From c14f79ebf7ba31a4de84d338767ed552a8513726 Mon Sep 17 00:00:00 2001 From: Lakshmi Narayanan Date: Sun, 29 Oct 2023 01:40:50 +0400 Subject: [PATCH 01/10] Add the new logo --- frontend/src/assets/cute_docsgpt3.svg | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 frontend/src/assets/cute_docsgpt3.svg 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 @@ + + + + + + + + + From 057ecc3ed9476992170ea1ebb3f72e2c9e586346 Mon Sep 17 00:00:00 2001 From: Lakshmi Narayanan Date: Sun, 29 Oct 2023 01:41:55 +0400 Subject: [PATCH 02/10] Update logo in Homepage and About page --- frontend/src/About.tsx | 3 ++- frontend/src/Hero.tsx | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx index 53a87bc8..4f388e37 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/Hero.tsx b/frontend/src/Hero.tsx index 34347c09..dd2f60a2 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! From 754339214c0c923973fb6e55d56d35aaf6a1784a Mon Sep 17 00:00:00 2001 From: Lakshmi Narayanan Date: Sun, 29 Oct 2023 01:42:26 +0400 Subject: [PATCH 03/10] Update logo in conversation --- frontend/src/Avatar.tsx | 4 +++- frontend/src/conversation/ConversationBubble.tsx | 6 +++++- 2 files changed, 8 insertions(+), 2 deletions(-) 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/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index b429e2ee..85b80286 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,10 @@ const ConversationBubble = forwardRef< className={`flex self-start ${className} group flex-col pr-20`} >

- + } + >
Date: Sun, 29 Oct 2023 01:43:09 +0400 Subject: [PATCH 04/10] Add expand icon --- frontend/src/assets/expand.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 frontend/src/assets/expand.svg 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 @@ + + + + From c3044850797ac62b88e070cdef700caf0f655c3d Mon Sep 17 00:00:00 2001 From: Lakshmi Narayanan Date: Sun, 29 Oct 2023 01:44:00 +0400 Subject: [PATCH 05/10] Fix the color of documentation icon --- frontend/src/assets/documentation.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 + + From 56b81b78c30d07fcd9e132c846b3fdac5f194f44 Mon Sep 17 00:00:00 2001 From: Lakshmi Narayanan Date: Sun, 29 Oct 2023 01:48:04 +0400 Subject: [PATCH 06/10] Update sidebar with new logo and icon --- frontend/src/Navigation.tsx | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index f3d810d7..5eb7e018 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 Message from './assets/message.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 )} @@ -192,19 +193,25 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { !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`} > -
+
+
+ +

DocsGPT

+
@@ -224,7 +231,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { } my-auto mx-4 mt-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100` } > - +

New Chat

From e627ebc12716028667f7e84622cb61ea2ca8656f Mon Sep 17 00:00:00 2001 From: Lakshmi Narayanan Date: Sun, 29 Oct 2023 02:01:18 +0400 Subject: [PATCH 07/10] Small fix with fixed height and width --- frontend/src/About.tsx | 2 +- frontend/src/Hero.tsx | 2 +- frontend/src/Navigation.tsx | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx index 4f388e37..85f654cc 100644 --- a/frontend/src/About.tsx +++ b/frontend/src/About.tsx @@ -8,7 +8,7 @@ export default function About() {

About DocsGPT

- DocsGPT + DocsGPT

Find the information in your documentation through AI-powered diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx index dd2f60a2..d1030402 100644 --- a/frontend/src/Hero.tsx +++ b/frontend/src/Hero.tsx @@ -5,7 +5,7 @@ export default function Hero({ className = '' }: { className?: string }) {

DocsGPT

- DocsGPT + DocsGPT

Welcome to DocsGPT, your technical documentation assistant! diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 5eb7e018..31a27178 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -210,8 +210,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { className={`${ !navOpen ? 'rotate-180' : 'rotate-0' } m-auto transition-all duration-200`} - width="25px" - height="25px" />

From 5a33953b788fd7211c923cd3d7487f1a6e2aa35c Mon Sep 17 00:00:00 2001 From: Lakshmi Narayanan Date: Mon, 30 Oct 2023 10:14:40 +0400 Subject: [PATCH 08/10] Add Chats heading if there are any conversations --- frontend/src/Navigation.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 31a27178..59ef4af7 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -232,19 +232,21 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {

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)} + /> + ))} +
+ )} -
Date: Tue, 31 Oct 2023 00:38:12 +0400 Subject: [PATCH 09/10] Update sidebar effects and styles based on figma --- frontend/src/Navigation.tsx | 38 +++++++++++++++++++++++------------- frontend/src/assets/add.svg | 10 ++++++++++ frontend/tailwind.config.cjs | 3 +++ 3 files changed, 37 insertions(+), 14 deletions(-) create mode 100644 frontend/src/assets/add.svg diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 59ef4af7..7b54399c 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -11,7 +11,7 @@ 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 Message from './assets/message.svg'; +import Add from './assets/add.svg'; import UploadIcon from './assets/upload.svg'; import { ActiveState } from './models/misc'; import APIKeyModal from './preferences/APIKeyModal'; @@ -191,10 +191,10 @@ 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

@@ -225,16 +225,22 @@ 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 && (
-

Chats

+

Chats

{conversations?.map((conversation) => ( )}
-

Source Docs

+

+ Source Docs +

key -

Reset Key

+

Reset Key

@@ -336,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/tailwind.config.cjs b/frontend/tailwind.config.cjs index ff3f42ba..a5d61d67 100644 --- a/frontend/tailwind.config.cjs +++ b/frontend/tailwind.config.cjs @@ -31,6 +31,9 @@ module.exports = { 'green-2000': '#0FFF50', 'light-gray': '#edeef0', 'white-3000': '#ffffff', + 'dove-gray': '#6c6c6c', + silver: '#c4c4c4', + 'rainy-gray': '#a4a4a4', }, }, }, From 0254510d5310e45aaabc6493e7a48ef3cf88db57 Mon Sep 17 00:00:00 2001 From: Lakshmi Narayanan Date: Tue, 31 Oct 2023 00:40:35 +0400 Subject: [PATCH 10/10] Fix the rotation of the avatar --- frontend/src/conversation/ConversationBubble.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index 85b80286..6460d662 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/frontend/src/conversation/ConversationBubble.tsx @@ -66,10 +66,7 @@ const ConversationBubble = forwardRef< className={`flex self-start ${className} group flex-col pr-20`} >
- } - > + DocsGPT