diff --git a/frontend/index.html b/frontend/index.html index 5af1721b3..30faadc95 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,7 +5,7 @@ - DocsGPT 🦖 + DocsGPT diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 73917e9f3..0714098f5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -17,6 +17,7 @@ "react-chartjs-2": "^5.2.0", "react-copy-to-clipboard": "^5.1.0", "react-dom": "^18.3.1", + "react-helmet": "^6.1.0", "react-dropzone": "^14.3.5", "react-i18next": "^15.0.2", "react-markdown": "^9.0.1", @@ -30,6 +31,7 @@ "devDependencies": { "@types/react": "^18.0.27", "@types/react-dom": "^18.3.0", + "@types/react-helmet": "^6.1.11", "@types/react-syntax-highlighter": "^15.5.13", "@typescript-eslint/eslint-plugin": "^5.51.0", "@typescript-eslint/parser": "^5.62.0", @@ -1675,7 +1677,17 @@ "version": "18.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", - "devOptional": true, + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-helmet": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz", + "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==", + "dev": true, + "license": "MIT", "dependencies": { "@types/react": "*" } @@ -2848,10 +2860,11 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -7844,6 +7857,27 @@ "react": ">= 16.8 || 18.0.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "license": "MIT" + }, + "node_modules/react-helmet": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", + "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", + "license": "MIT", + "dependencies": { + "object-assign": "^4.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.1.1", + "react-side-effect": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, "node_modules/react-i18next": { "version": "15.0.2", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.2.tgz", @@ -7985,6 +8019,15 @@ "react-dom": ">=16.8" } }, + "node_modules/react-side-effect": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", + "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-syntax-highlighter": { "version": "15.5.0", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 6a63305c1..be08de0ce 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,6 +28,7 @@ "react-chartjs-2": "^5.2.0", "react-copy-to-clipboard": "^5.1.0", "react-dom": "^18.3.1", + "react-helmet": "^6.1.0", "react-dropzone": "^14.3.5", "react-i18next": "^15.0.2", "react-markdown": "^9.0.1", @@ -41,6 +42,7 @@ "devDependencies": { "@types/react": "^18.0.27", "@types/react-dom": "^18.3.0", + "@types/react-helmet": "^6.1.11", "@types/react-syntax-highlighter": "^15.5.13", "@typescript-eslint/eslint-plugin": "^5.51.0", "@typescript-eslint/parser": "^5.62.0", diff --git a/frontend/src/assets/user.png b/frontend/src/assets/user.png new file mode 100644 index 000000000..3cc5d2f11 Binary files /dev/null and b/frontend/src/assets/user.png differ diff --git a/frontend/src/components/Avatar.tsx b/frontend/src/components/Avatar.tsx index 202be2070..7f8c5a935 100644 --- a/frontend/src/components/Avatar.tsx +++ b/frontend/src/components/Avatar.tsx @@ -5,7 +5,7 @@ export default function Avatar({ size, className, }: { - avatar: string | ReactNode; + avatar: ReactNode; size?: 'SMALL' | 'MEDIUM' | 'LARGE'; className: string; }) { diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index fc0044044..62e943dd0 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/frontend/src/conversation/ConversationBubble.tsx @@ -16,6 +16,7 @@ import Like from '../assets/like.svg?react'; import Link from '../assets/link.svg'; import Sources from '../assets/sources.svg'; import Edit from '../assets/edit.svg'; +import UserIcon from '../assets/user.png'; import Avatar from '../components/Avatar'; import CopyButton from '../components/CopyButton'; import Sidebar from '../components/Sidebar'; @@ -90,9 +91,15 @@ const ConversationBubble = forwardRef< >
- + + } + /> {!isEditClicked && (
Edit diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx index c4cb17fb6..5ab1d639c 100644 --- a/frontend/src/conversation/SharedConversation.tsx +++ b/frontend/src/conversation/SharedConversation.tsx @@ -26,6 +26,7 @@ import { selectQueries, } from './sharedConversationSlice'; import { useSelector } from 'react-redux'; +import { Helmet } from 'react-helmet'; export const SharedConversation = () => { const navigate = useNavigate(); @@ -176,94 +177,111 @@ export const SharedConversation = () => { }, []); return ( -
-
-
-
-

- {title} -

-

- {t('sharedConv.subtitle')}{' '} - - DocsGPT - -

-

- {date} -

-
-
- {queries?.map((query, index) => { - return ( - - + <> + + {`DocsGPT | ${title}`} + + + + + + + +
+
+
+
+

+ {title} +

+

+ {t('sharedConv.subtitle')}{' '} + + DocsGPT + +

+

+ {date} +

+
+
+ {queries?.map((query, index) => { + return ( + + - {prepResponseView(query, index)} - - ); - })} + {prepResponseView(query, index)} + + ); + })} +
-
-
- {apiKey ? ( -
-
{ - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - handleQuestionSubmission(); - } - }} - >
- {status === 'loading' ? ( - - ) : ( -
+
+ {apiKey ? ( +
+
{ + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleQuestionSubmission(); + } + }} + >
+ {status === 'loading' ? ( -
- )} -
- ) : ( - - )} - - {t('sharedConv.meta')} - + ) : ( +
+ +
+ )} +
+ ) : ( + + )} + + {t('sharedConv.meta')} + +
-
+ ); };