Merge pull request #249 from Monadical-SAS/copy-final-summary

adds copy button for final summary

www/app/transcripts/finalSummary.tsx

@@ -1,12 +1,41 @@
+import { useRef, useState } from "react";
+
 type FinalSummaryProps = {
   text: string;
 };
 
 export default function FinalSummary(props: FinalSummaryProps) {
+  const finalSummaryRef = useRef<HTMLParagraphElement>(null);
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopyClick = () => {
+    let text_to_copy = finalSummaryRef.current?.innerText;
+
+    text_to_copy &&
+      navigator.clipboard.writeText(text_to_copy).then(() => {
+        setIsCopied(true);
+        // Reset the copied state after 2 seconds
+        setTimeout(() => setIsCopied(false), 2000);
+      });
+  };
+
   return (
     <div className="overflow-y-auto h-auto max-h-full">
-      <h2 className="text-xl md:text-2xl font-bold">Final Summary</h2>
+      <div className="flex flex-row justify-between items-center">
-      <p>{props.text}</p>
+        <h2 className="text-xl md:text-2xl font-bold">Final Summary</h2>
+        <button
+          onClick={handleCopyClick}
+          className={
+            (isCopied ? "bg-blue-500" : "bg-blue-400") +
+            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
+          }
+          style={{ minHeight: "30px" }}
+        >
+          {isCopied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+
+      <p ref={finalSummaryRef}>{props.text}</p>
     </div>
   );
 }

www/app/transcripts/shareLink.tsx

@@ -11,12 +11,14 @@ const ShareLink = () => {
 
   const handleCopyClick = () => {
     if (inputRef.current) {
-      inputRef.current.select();
+      let text_to_copy = inputRef.current.value;
-      document.execCommand("copy");
-      setIsCopied(true);
 
-      // Reset the copied state after 2 seconds
+      text_to_copy &&
-      setTimeout(() => setIsCopied(false), 2000);
+        navigator.clipboard.writeText(text_to_copy).then(() => {
+          setIsCopied(true);
+          // Reset the copied state after 2 seconds
+          setTimeout(() => setIsCopied(false), 2000);
+        });
     }
   };