From accd65a26ab47114852fc295d5af6097e267e341 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Sun, 8 Oct 2023 05:27:03 +0530 Subject: [PATCH 1/4] added the copy msg feature --- frontend/package-lock.json | 26 +++++++++++++++++++ frontend/package.json | 1 + frontend/src/assets/copy.svg | 3 +++ .../src/conversation/ConversationBubble.tsx | 7 +++++ 4 files changed, 37 insertions(+) create mode 100644 frontend/src/assets/copy.svg 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/assets/copy.svg b/frontend/src/assets/copy.svg new file mode 100644 index 00000000..d0da8857 --- /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..3f38ee9a 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/frontend/src/conversation/ConversationBubble.tsx @@ -4,7 +4,9 @@ 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 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'; @@ -145,6 +147,11 @@ const ConversationBubble = forwardRef< : 'md:invisible' }`} > + copy(message)} + > Date: Sun, 8 Oct 2023 05:33:13 +0530 Subject: [PATCH 2/4] fix --- frontend/src/About.tsx | 8 +++++--- frontend/src/conversation/ConversationBubble.tsx | 3 +-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx index 303708ca..2365536c 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 copy(message)} > Date: Sun, 8 Oct 2023 06:26:08 +0530 Subject: [PATCH 3/4] UI checks --- frontend/.env.development | 2 +- frontend/src/conversation/ConversationBubble.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index 2e881314..471970a8 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/frontend/src/conversation/ConversationBubble.tsx @@ -148,7 +148,7 @@ const ConversationBubble = forwardRef< }`} > copy(message)} > Date: Mon, 9 Oct 2023 02:36:48 +0530 Subject: [PATCH 4/4] UI corrections --- frontend/src/assets/checkmark.svg | 3 ++ frontend/src/assets/copy.svg | 2 +- .../src/conversation/ConversationBubble.tsx | 32 ++++++++++++++++--- 3 files changed, 32 insertions(+), 5 deletions(-) create mode 100644 frontend/src/assets/checkmark.svg diff --git a/frontend/src/assets/checkmark.svg b/frontend/src/assets/checkmark.svg new file mode 100644 index 00000000..682c29d7 --- /dev/null +++ b/frontend/src/assets/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/copy.svg b/frontend/src/assets/copy.svg index d0da8857..846d285f 100644 --- a/frontend/src/assets/copy.svg +++ b/frontend/src/assets/copy.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx index 471970a8..19019613 100644 --- a/frontend/src/conversation/ConversationBubble.tsx +++ b/frontend/src/conversation/ConversationBubble.tsx @@ -5,6 +5,7 @@ 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'; @@ -28,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, @@ -140,6 +152,22 @@ const ConversationBubble = forwardRef< +

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