Merge pull request #503 from ManishMadan2882/main

added the copy response feature
2025-11-29 08:33:20 +00:00 · 2023-10-08 22:40:51 +01:00
parent 46c4bf6e94 3197c356e9
commit 860030824e
7 changed files with 69 additions and 4 deletions
--- 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
--- 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",
--- 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",
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -51,9 +51,11 @@ export default function About() {
        </div>

        <p>
-          Currently It uses <span className= "text-blue-950 font-medium">DocsGPT</span> documentation, so it will respond to 
-          information relevant to <span className= "text-blue-950 font-medium">DocsGPT</span> . If you want to train it on different
-          documentation - please follow
+          Currently It uses{' '}
+          <span className="text-blue-950 font-medium">DocsGPT</span>{' '}
+          documentation, so it will respond to information relevant to{' '}
+          <span className="text-blue-950 font-medium">DocsGPT</span> . If you
+          want to train it on different documentation - please follow
          <a
            className="text-blue-500"
            href="https://github.com/arc53/DocsGPT/wiki/How-to-train-on-other-documentation"
--- a/frontend/src/assets/checkmark.svg
+++ b/frontend/src/assets/checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7617 1.34847L5.14891 9.76785C5.0739 9.84143 4.98476 9.89982 4.88661 9.93965C4.78847 9.97949 4.68324 10 4.57697 10C4.4707 10 4.36547 9.97949 4.26732 9.93965C4.16917 9.89982 4.08004 9.84143 4.00502 9.76785L0.236908 6.08437C0.161799 6.01095 0.102219 5.92378 0.0615703 5.82785C0.0209216 5.73192 1.11921e-09 5.6291 0 5.52527C-1.11921e-09 5.42143 0.0209216 5.31862 0.0615703 5.22269C0.102219 5.12676 0.161799 5.03959 0.236908 4.96617C0.312017 4.89275 0.401184 4.83451 0.499319 4.79477C0.597453 4.75503 0.702634 4.73458 0.808854 4.73458C0.915074 4.73458 1.02025 4.75503 1.11839 4.79477C1.21652 4.83451 1.30569 4.89275 1.3808 4.96617L4.57764 8.09121L12.6192 0.231586C12.7709 0.083304 12.9766 0 13.1911 0C13.4057 0 13.6114 0.083304 13.7631 0.231586C13.9148 0.379869 14 0.580983 14 0.790686C14 1.00039 13.9148 1.2015 13.7631 1.34978L13.7617 1.34847Z" fill="#13A10E"/>
+</svg>
--- a/frontend/src/assets/copy.svg
+++ b/frontend/src/assets/copy.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="17" stroke-width="1.15" viewBox="0 0 14 17" >
+<path d="M13.8013 5.01282L8.80645 0.191795C8.67953 0.0691399 8.50734 0.000152609 8.32774 0H6.09677C5.43801 0 4.80623 0.252586 4.34041 0.702193C3.8746 1.1518 3.6129 1.7616 3.6129 2.39744V3.48718H2.48387C1.82511 3.48718 1.19332 3.73977 0.727509 4.18937C0.261693 4.63898 0 5.24878 0 5.88462V14.6026C0 15.2384 0.261693 15.8482 0.727509 16.2978C1.19332 16.7474 1.82511 17 2.48387 17H8.80645C9.46521 17 10.097 16.7474 10.5628 16.2978C11.0286 15.8482 11.2903 15.2384 11.2903 14.6026V13.5128H11.5161C12.1749 13.5128 12.8067 13.2602 13.2725 12.8106C13.7383 12.361 14 11.7512 14 11.1154V5.44872C13.9929 5.28447 13.9219 5.12884 13.8013 5.01282ZM9.03226 2.23179L11.6877 4.79487H9.03226V2.23179ZM9.93548 14.6026C9.93548 14.8916 9.81653 15.1688 9.6048 15.3731C9.39306 15.5775 9.10589 15.6923 8.80645 15.6923H2.48387C2.18443 15.6923 1.89726 15.5775 1.68552 15.3731C1.47379 15.1688 1.35484 14.8916 1.35484 14.6026V5.88462C1.35484 5.5956 1.47379 5.31842 1.68552 5.11405C1.89726 4.90968 2.18443 4.79487 2.48387 4.79487H3.6129V11.1154C3.6129 11.7512 3.8746 12.361 4.34041 12.8106C4.80623 13.2602 5.43801 13.5128 6.09677 13.5128H9.93548V14.6026ZM11.5161 12.2051H6.09677C5.79734 12.2051 5.51016 12.0903 5.29843 11.886C5.08669 11.6816 4.96774 11.4044 4.96774 11.1154V2.39744C4.96774 2.10842 5.08669 1.83124 5.29843 1.62687C5.51016 1.4225 5.79734 1.30769 6.09677 1.30769H7.67742V5.44872C7.67976 5.62143 7.75188 5.78643 7.87842 5.90856C8.00496 6.03069 8.1759 6.10031 8.35484 6.10256H12.6452V11.1154C12.6452 11.4044 12.5262 11.6816 12.3145 11.886C12.1027 12.0903 11.8156 12.2051 11.5161 12.2051Z" fill="#949494"/>
+</svg>
--- 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<number | null>(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<
              </div>
            </div>
          </div>
+          <div
+            className={`mr-2 flex items-center justify-center ${
+              type !== 'ERROR' && showFeedback ? '' : 'md:invisible'
+            }`}
+          >
+            {copied ? (
+              <Checkmark />
+            ) : (
+              <Copy
+                className={`cursor-pointer fill-gray-4000 hover:stroke-gray-4000`}
+                onClick={() => {
+                  handleCopyClick(message);
+                }}
+              ></Copy>
+            )}
+          </div>
          <div
            className={`mr-2 flex items-center justify-center ${
              feedback === 'LIKE' || (type !== 'ERROR' && showFeedback)