diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx index 53a87bc8..85f654cc 100644 --- a/frontend/src/About.tsx +++ b/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() {

About DocsGPT

-

🦖

+ DocsGPT

Find the information in your documentation through AI-powered diff --git a/frontend/src/Avatar.tsx b/frontend/src/Avatar.tsx index 04819e7e..ef733ff2 100644 --- a/frontend/src/Avatar.tsx +++ b/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; }) { diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx index 4df9d109..b814de1c 100644 --- a/frontend/src/Hero.tsx +++ b/frontend/src/Hero.tsx @@ -1,9 +1,11 @@ +import DocsGPT3 from './assets/cute_docsgpt3.svg'; + export default function Hero({ className = '' }: { className?: string }) { return (

DocsGPT

-

🦖

+ DocsGPT

Welcome to DocsGPT, your technical documentation assistant! diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index f3d810d7..7b54399c 100644 --- a/frontend/src/Navigation.tsx +++ b/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) { }} > menu toggle )} @@ -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`} > -

+
+
+ +

DocsGPT

+
@@ -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` } > - -

New Chat

+ new +

+ New Chat +

-
- {conversations?.map((conversation) => ( - handleConversationClick(id)} - onDeleteConversation={(id) => handleDeleteConversation(id)} - onSave={(conversation) => updateConversationName(conversation)} - /> - ))} -
+ {conversations && ( +
+

Chats

+ {conversations?.map((conversation) => ( + handleConversationClick(id)} + onDeleteConversation={(id) => handleDeleteConversation(id)} + onSave={(conversation) => updateConversationName(conversation)} + /> + ))} +
+ )} -
)}
-

Source Docs

+

+ Source Docs +

key -

Reset Key

+

Reset Key

@@ -329,7 +344,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { } > info -

About

+

About

documentation -

Documentation

+

Documentation

 link -

Visit our Discord

+

+ Visit our Discord +

link -

Visit our Github

+

Visit our Github
diff --git a/frontend/src/assets/add.svg b/frontend/src/assets/add.svg new file mode 100644 index 00000000..d38c815e --- /dev/null +++ b/frontend/src/assets/add.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/assets/cute_docsgpt3.svg b/frontend/src/assets/cute_docsgpt3.svg new file mode 100644 index 00000000..53f7cac1 --- /dev/null +++ b/frontend/src/assets/cute_docsgpt3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/documentation.svg b/frontend/src/assets/documentation.svg index a1620ff3..344fb6cc 100644 --- a/frontend/src/assets/documentation.svg +++ b/frontend/src/assets/documentation.svg @@ -1,3 +1,3 @@ - - \ No newline at end of file + + diff --git a/frontend/src/assets/expand.svg b/frontend/src/assets/expand.svg new file mode 100644 index 00000000..a3260d98 --- /dev/null +++ b/frontend/src/assets/expand.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index b429e2ee..6460d662 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/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`} >
- + DocsGPT