feature: add copy button to chat

devflowinc · Sep 14, 2024 · c35406d · c35406d
1 parent 122801a
commit c35406d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/frontends/chat/src/components/Atoms/AfMessage.tsx b/frontends/chat/src/components/Atoms/AfMessage.tsx
@@ -8,7 +8,8 @@ import {
   BiSolidCheckSquare,
   BiSolidUserRectangle,
 } from "solid-icons/bi";
-import { AiFillRobot } from "solid-icons/ai";
+import { AiFillRobot, AiOutlineCopy } from "solid-icons/ai";
+import { FiCheck } from "solid-icons/fi";
 import {
   Accessor,
   For,
@@ -59,6 +60,36 @@ export const AfMessage = (props: AfMessageProps) => {
 
   const [screenWidth, setScreenWidth] = createSignal(window.innerWidth);
 
+  const [copied, setCopied] = createSignal(false);
+
+  const copyChunk = () => {
+    try {
+      const responseText = props.content.split("||")[1];
+      navigator.clipboard
+        .write([
+          new ClipboardItem({
+            "text/plain": new Blob([responseText ?? ""], {
+              type: "text/plain",
+            }),
+            "text/html": new Blob([responseText ?? ""], {
+              type: "text/html",
+            }),
+          }),
+        ])
+        .then(() => {
+          setCopied(true);
+          setTimeout(() => {
+            setCopied(false);
+          }, 2000);
+        })
+        .catch((err) => {
+          alert(`Failed to copy to clipboard: ${(err as Error).message}`);
+        });
+    } catch (err) {
+      alert(`Failed to copy to clipboard: ${(err as Error).message}`);
+    }
+  };
+
   createEffect(() => {
     const handleResize = () => setScreenWidth(window.innerWidth);
     window.addEventListener("resize", handleResize);
@@ -189,7 +220,21 @@ export const AfMessage = (props: AfMessageProps) => {
               {props.role === "user" ? (
                 <BiSolidUserRectangle class="fill-current" />
               ) : (
-                <AiFillRobot class="fill-current" />
+                <div class="space-y-1.5">
+                  <AiFillRobot class="fill-current" />
+                  <Show when={!copied()}>
+                    <button
+                      class="opacity-80 hover:text-fuchsia-500"
+                      title="Copy text to clipboard"
+                      onClick={() => copyChunk()}
+                    >
+                      <AiOutlineCopy class="h-4 w-4 fill-current" />
+                    </button>
+                  </Show>
+                  <Show when={copied()}>
+                    <FiCheck class="text-green-500" />
+                  </Show>
+                </div>
               )}
             </div>
             <div

diff --git a/frontends/chat/src/components/ScoreChunk.tsx b/frontends/chat/src/components/ScoreChunk.tsx
@@ -129,7 +129,7 @@ const ScoreChunk = (props: ScoreChunkProps) => {
             href={`${searchURL}/chunk/${props.chunk.id}?dataset=${props.chunk.dataset_id}`}
             target="_blank"
           >
-            <FiExternalLink class="h-5 w-5 fill-current opacity-50" />
+            <FiExternalLink class="h-5 w-5 opacity-50" />
           </a>
         </div>
         <div class="flex w-full flex-col">