diff --git a/frontend/.env.development b/frontend/.env.development index 2bb67110..7a87f762 100644 --- a/frontend/.env.development +++ b/frontend/.env.development @@ -1,3 +1,3 @@ # Please put appropriate value -VITE_API_HOST=http://localhost:7091 +VITE_API_HOST=http://0.0.0.0:7091 VITE_API_STREAMING=true \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8cf969d7..7c08dfb7 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,6 +11,7 @@ "@reduxjs/toolkit": "^1.9.2", "@vercel/analytics": "^0.1.10", "react": "^18.2.0", + "react-copy-to-clipboard": "^5.1.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-markdown": "^8.0.7", @@ -2248,6 +2249,14 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "dev": true }, + "node_modules/copy-to-clipboard": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", + "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==", + "dependencies": { + "toggle-selection": "^1.0.6" + } + }, "node_modules/cosmiconfig": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", @@ -6072,6 +6081,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-copy-to-clipboard": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz", + "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==", + "dependencies": { + "copy-to-clipboard": "^3.3.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^15.3.0 || 16 || 17 || 18" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -6907,6 +6928,11 @@ "node": ">=8.0" } }, + "node_modules/toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==" + }, "node_modules/trim-lines": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 66d14ddc..9dcbf4ae 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,6 +22,7 @@ "@reduxjs/toolkit": "^1.9.2", "@vercel/analytics": "^0.1.10", "react": "^18.2.0", + "react-copy-to-clipboard": "^5.1.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-markdown": "^8.0.7", diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx index f5107991..ca318a6e 100644 --- a/frontend/src/About.tsx +++ b/frontend/src/About.tsx @@ -51,9 +51,11 @@ export default function About() {

- Currently It uses DocsGPT documentation, so it will respond to - information relevant to DocsGPT . If you want to train it on different - documentation - please follow + Currently It uses{' '} + DocsGPT{' '} + documentation, so it will respond to information relevant to{' '} + DocsGPT . If you + want to train it on different documentation - please follow + + diff --git a/frontend/src/assets/copy.svg b/frontend/src/assets/copy.svg new file mode 100644 index 00000000..846d285f --- /dev/null +++ b/frontend/src/assets/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index b74c65fe..19019613 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/frontend/src/conversation/ConversationBubble.tsx @@ -4,7 +4,10 @@ import { FEEDBACK, MESSAGE_TYPE } from './conversationModels'; import Alert from './../assets/alert.svg'; import { ReactComponent as Like } from './../assets/like.svg'; import { ReactComponent as Dislike } from './../assets/dislike.svg'; +import { ReactComponent as Copy } from './../assets/copy.svg'; +import { ReactComponent as Checkmark } from './../assets/checkmark.svg'; 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'; @@ -26,6 +29,17 @@ const ConversationBubble = forwardRef< ) { const [showFeedback, setShowFeedback] = useState(false); const [openSource, setOpenSource] = useState(null); + const [copied, setCopied] = useState(false); + + const handleCopyClick = (text: string) => { + copy(text); + setCopied(true); + // Reset copied to false after a few seconds + setTimeout(() => { + setCopied(false); + }, 2000); + }; + const List = ({ ordered, children, @@ -138,6 +152,22 @@ const ConversationBubble = forwardRef< +

+ {copied ? ( + + ) : ( + { + handleCopyClick(message); + }} + > + )} +