Merge pull request #722 from lakshmi930/update-sidebar-ui

Update sidebar UI and Logo

frontend/src/About.tsx

@@ -1,5 +1,6 @@
 //TODO - Add hyperlinks to text
 //TODO - Styling
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
 
 export default function About() {
   return (
@@ -7,7 +8,7 @@ export default function About() {
       <article className="place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-4 rounded-3xl bg-gray-100 p-6 text-jet lg:p-6 xl:p-10">
         <div className="flex items-center">
           <p className="mr-2 text-3xl">About DocsGPT</p>
-          <p className="text-[21px]">🦖</p>
+          <img src={DocsGPT3} alt="DocsGPT" />
         </div>
         <p className="mt-4">
           Find the information in your documentation through AI-powered

frontend/src/Avatar.tsx

@@ -1,9 +1,11 @@
+import { ReactNode } from 'react';
+
 export default function Avatar({
   avatar,
   size,
   className,
 }: {
-  avatar: string;
+  avatar: string | ReactNode;
   size?: 'SMALL' | 'MEDIUM' | 'LARGE';
   className: string;
 }) {

frontend/src/Hero.tsx

@@ -1,9 +1,11 @@
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
+
 export default function Hero({ className = '' }: { className?: string }) {
   return (
     <div className={`mt-14 mb-12 flex flex-col `}>
       <div className="mb-10 flex items-center justify-center ">
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
-        <p className="text-[27px]">🦖</p>
+        <img src={DocsGPT3} alt="DocsGPT" />
       </div>
       <p className="mb-3 text-center leading-6 text-black-1000">
         Welcome to DocsGPT, your technical documentation assistant!

frontend/src/Navigation.tsx

@@ -1,19 +1,20 @@
 import { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useNavigate } from 'react-router-dom';
-import Arrow1 from './assets/arrow.svg';
-import Arrow2 from './assets/dropdown-arrow.svg';
-import Exit from './assets/exit.svg';
-import Message from './assets/message.svg';
-import Hamburger from './assets/hamburger.svg';
-import Key from './assets/key.svg';
-import Info from './assets/info.svg';
+import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import Documentation from './assets/documentation.svg';
 import Discord from './assets/discord.svg';
+import Arrow2 from './assets/dropdown-arrow.svg';
+import Expand from './assets/expand.svg';
+import Exit from './assets/exit.svg';
 import Github from './assets/github.svg';
+import Hamburger from './assets/hamburger.svg';
+import Info from './assets/info.svg';
+import Key from './assets/key.svg';
+import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   selectApiKeyStatus,
   selectSelectedDocs,
@@ -178,11 +179,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           }}
         >
           <img
-            src={Arrow1}
+            src={Expand}
             alt="menu toggle"
             className={`${
               !navOpen ? 'rotate-180' : 'rotate-0'
-            } m-auto w-3 transition-all duration-200`}
+            } m-auto transition-all duration-200`}
           />
         </button>
       )}
@@ -190,21 +191,25 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         ref={navRef}
         className={`${
           !navOpen && '-ml-96 md:-ml-[18rem]'
-        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all`}
+        } duration-20 bg-light-gray-3000 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 transition-all`}
       >
-        <div className={'visible h-16 w-full border-b-2 md:h-12'}>
+        <div className={'visible flex h-16 w-full justify-between md:h-12'}>
+          <div className="my-auto mx-4 flex cursor-pointer gap-1.5">
+            <img src={DocsGPT3} alt="" />
+            <p className="my-auto text-2xl font-semibold">DocsGPT</p>
+          </div>
           <button
-            className="float-right mr-5 mt-5 h-5 w-5 md:mt-3"
+            className="float-right mr-5"
             onClick={() => {
               setNavOpen(!navOpen);
             }}
           >
             <img
-              src={Arrow1}
+              src={Expand}
               alt="menu toggle"
               className={`${
                 !navOpen ? 'rotate-180' : 'rotate-0'
-              } m-auto w-3 transition-all duration-200`}
+              } m-auto transition-all duration-200`}
             />
           </button>
         </div>
@@ -220,26 +225,34 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           }}
           className={({ isActive }) =>
             `${
-              isActive && conversationId === null ? 'bg-gray-3000' : ''
-            } my-auto mx-4 mt-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100`
+              isActive ? 'bg-gray-3000' : ''
+            } group my-auto mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000`
           }
         >
-          <img src={Message} className="ml-4 w-5"></img>
-          <p className="my-auto text-sm text-eerie-black">New Chat</p>
+          <img
+            src={Add}
+            alt="new"
+            className="opacity-80 group-hover:opacity-100"
+          />
+          <p className="my-auto text-sm text-dove-gray group-hover:text-neutral-600">
+            New Chat
+          </p>
         </NavLink>
-        <div className="conversations-container max-h-[25rem] overflow-y-auto">
-          {conversations?.map((conversation) => (
-            <ConversationTile
-              key={conversation.id}
-              conversation={conversation}
-              selectConversation={(id) => handleConversationClick(id)}
-              onDeleteConversation={(id) => handleDeleteConversation(id)}
-              onSave={(conversation) => updateConversationName(conversation)}
-            />
-          ))}
-        </div>
+        {conversations && (
+          <div className="conversations-container max-h-[25rem] overflow-y-auto">
+            <p className="text-sm-eerie-black ml-6 mt-3 font-semibold">Chats</p>
+            {conversations?.map((conversation) => (
+              <ConversationTile
+                key={conversation.id}
+                conversation={conversation}
+                selectConversation={(id) => handleConversationClick(id)}
+                onDeleteConversation={(id) => handleDeleteConversation(id)}
+                onSave={(conversation) => updateConversationName(conversation)}
+              />
+            ))}
+          </div>
+        )}
 
-        <div className="flex-grow border-b-2 border-gray-100"></div>
         <div className="flex flex-col-reverse border-b-2">
           <div className="relative my-4 flex gap-2 px-2">
             <div
@@ -305,7 +318,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               </div>
             )}
           </div>
-          <p className="ml-6 mt-3 font-bold text-jet">Source Docs</p>
+          <p className="ml-6 mt-3 text-sm font-semibold text-eerie-black">
+            Source Docs
+          </p>
         </div>
         <div className="flex flex-col gap-2 border-b-2 py-2">
           <div
@@ -315,7 +330,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             }}
           >
             <img src={Key} alt="key" className="ml-2 w-6" />
-            <p className="my-auto text-eerie-black">Reset Key</p>
+            <p className="my-auto text-sm text-eerie-black">Reset Key</p>
           </div>
         </div>
 
@@ -329,7 +344,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             }
           >
             <img src={Info} alt="info" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">About</p>
+            <p className="my-auto text-sm text-eerie-black">About</p>
           </NavLink>
 
           <a
@@ -339,7 +354,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Documentation} alt="documentation" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Documentation</p>
+            <p className="my-auto text-sm text-eerie-black">Documentation</p>
           </a>
           <a
             href="https://discord.gg/WHJdfbQDR4"
@@ -348,7 +363,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Discord} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Visit our Discord</p>
+            <p className="my-auto text-sm text-eerie-black">
+              Visit our Discord
+            </p>
           </a>
 
           <a
@@ -358,7 +375,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Github} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Visit our Github</p>
+            <p className="my-auto text-sm text-eerie-black">Visit our Github</p>
           </a>
         </div>
       </div>

frontend/src/assets/add.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2494_3464)">
+<path d="M7.43717 14.1667C7.43717 14.4485 7.54912 14.7187 7.74837 14.918C7.94763 15.1172 8.21788 15.2292 8.49967 15.2292C8.78147 15.2292 9.05172 15.1172 9.25098 14.918C9.45023 14.7187 9.56217 14.4485 9.56217 14.1667V9.56249H14.1663C14.4481 9.56249 14.7184 9.45055 14.9176 9.2513C15.1169 9.05204 15.2288 8.78179 15.2288 8.49999C15.2288 8.2182 15.1169 7.94795 14.9176 7.74869C14.7184 7.54944 14.4481 7.43749 14.1663 7.43749H9.56217V2.83333C9.56217 2.55154 9.45023 2.28128 9.25098 2.08203C9.05172 1.88277 8.78147 1.77083 8.49967 1.77083C8.21788 1.77083 7.94763 1.88277 7.74837 2.08203C7.54912 2.28128 7.43717 2.55154 7.43717 2.83333V7.43749H2.83301C2.55122 7.43749 2.28096 7.54944 2.08171 7.74869C1.88245 7.94795 1.77051 8.2182 1.77051 8.49999C1.77051 8.78179 1.88245 9.05204 2.08171 9.2513C2.28096 9.45055 2.55122 9.56249 2.83301 9.56249H7.43717V14.1667Z" fill="#5D5D5D" />
+</g>
+<defs>
+<clipPath id="clip0_2494_3464">
+<rect width="17" height="17" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/assets/documentation.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="#605b5b" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
-    </svg>
+    <g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="black" fill-opacity="0.5" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
+</svg>

frontend/src/assets/expand.svg

@@ -0,0 +1,4 @@
+<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.03371 5.27275L4.1915 20.9162C4.20021 21.7802 4.90766 22.4735 5.77162 22.4648L21.4151 22.307C22.2791 22.2983 22.9724 21.5909 22.9637 20.7269L22.8059 5.0834C22.7972 4.21944 22.0897 3.52612 21.2258 3.53483L5.58228 3.69262C4.71831 3.70134 4.02499 4.40878 4.03371 5.27275Z" stroke="#949494" stroke-width="2.08591" stroke-linejoin="round"/>
+<path d="M9.42289 22.428L9.23354 3.65585M17.6924 15.0436L15.5856 12.9788L17.6504 10.872M6.29419 22.4596L12.5516 22.3965M6.10484 3.68741L12.3622 3.62429" stroke="#949494" stroke-width="2.08591" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/conversation/ConversationBubble.tsx

@@ -11,6 +11,7 @@ import ReactMarkdown from 'react-markdown';
 import copy from 'copy-to-clipboard';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
 
@@ -65,7 +66,7 @@ const ConversationBubble = forwardRef<
         className={`flex self-start ${className} group flex-col pr-20`}
       >
         <div className="flex self-start">
-          <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
+          <img src={DocsGPT3} alt="DocsGPT" />
           <div
             className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'