feature: option to copy chat message in search component

devflowinc · Dec 7, 2024 · 9b76f6b · 9b76f6b
1 parent 686181b
commit 9b76f6b
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 29 deletions.
diff --git a/clients/search-component/package.json b/clients/search-component/package.json
@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.7",
+  "version": "0.2.8",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx
@@ -3,6 +3,8 @@ const Markdown = lazy(() => import("react-markdown"));
 
 import {
   AIIcon,
+  CopyConfirmIcon,
+  CopyIcon,
   LoadingIcon,
   ThumbsDownIcon,
   ThumbsUpIcon,
@@ -91,6 +93,7 @@ export const Message = ({
 }) => {
   const { rateChatCompletion } = useChatState();
   const [positive, setPositive] = React.useState<boolean | null>(null);
+  const [copied, setCopied] = React.useState<boolean>(false);
   const { props } = useModalState();
 
   const ecommerceItems = message.additional
@@ -115,7 +118,7 @@ export const Message = ({
     .filter(
       (item, index, array) =>
         array.findIndex((arrayItem) => arrayItem.title === item.title) ===
-          index && item.title,
+        index && item.title,
     )
     .map((item, index) => (
       <a
@@ -176,37 +179,49 @@ export const Message = ({
           <div>
             {message.additional
               ? props.type !== "ecommerce" && (
-                  <div className="additional-links">
-                    {message.additional
-                      .filter(
-                        (chunk) =>
-                          (chunk.metadata.heading ||
-                            chunk.metadata.title ||
-                            chunk.metadata.page_title) &&
-                          chunk.link,
-                      )
-                      .map((chunk) => [
-                        chunk.metadata.heading ||
+                <div className="additional-links">
+                  {message.additional
+                    .filter(
+                      (chunk) =>
+                        (chunk.metadata.heading ||
                           chunk.metadata.title ||
-                          chunk.metadata.page_title,
+                          chunk.metadata.page_title) &&
                         chunk.link,
-                      ])
-                      .filter(
-                        (link, index, array) =>
-                          array.findIndex((item) => item[0] === link[0]) ===
-                            index && link[0],
-                      )
-                      .map((link, index) => (
-                        <a key={index} href={link[1] as string} target="_blank">
-                          {link[0]}
-                        </a>
-                      ))}
-                  </div>
-                )
+                    )
+                    .map((chunk) => [
+                      chunk.metadata.heading ||
+                      chunk.metadata.title ||
+                      chunk.metadata.page_title,
+                      chunk.link,
+                    ])
+                    .filter(
+                      (link, index, array) =>
+                        array.findIndex((item) => item[0] === link[0]) ===
+                        index && link[0],
+                    )
+                    .map((link, index) => (
+                      <a key={index} href={link[1] as string} target="_blank">
+                        {link[0]}
+                      </a>
+                    ))}
+                </div>
+              )
               : null}
             <div className="feedback-wrapper">
               <span className="spacer"></span>
               <div className="feedback-icons">
+                {copied ? <CopyConfirmIcon /> : 
+                  <button
+                    onClick={() => {
+                      void navigator.clipboard.writeText(message.text).then(() => {
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 2000);
+                      });
+                    }}
+                  >
+                    <CopyIcon />
+                  </button>
+                }
                 <button
                   className={positive != null && positive ? "icon-darken" : ""}
                   onClick={() => {

diff --git a/clients/search-component/src/TrieveModal/icons.tsx b/clients/search-component/src/TrieveModal/icons.tsx
@@ -322,3 +322,27 @@ export const ChatIcon = () => {
     </svg>
   );
 };
+
+export const CopyIcon = () => {
+  return (
+    <svg
+      className="w-4 h-4"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+    >
+      <path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z" />
+    </svg>
+  );
+};
+
+export const CopyConfirmIcon = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    className="w-4 h-4"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" />
+  </svg>
+);
diff --git a/server/src/public/page.html b/server/src/public/page.html
@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="/static/output.css" />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/[email protected].7/dist/index.css"
+      href="https://unpkg.com/[email protected].8/dist/index.css"
     />
     <link
       rel="apple-touch-icon"
@@ -181,7 +181,7 @@
     </style>
 
     <script type="module">
-      import {renderToDiv} from 'https://unpkg.com/[email protected].7/dist/vanilla/index.js';
+      import {renderToDiv} from 'https://unpkg.com/[email protected].8/dist/vanilla/index.js';
       window.addEventListener('load', () => {
         const root = document.getElementById('root');
         renderToDiv(root, {