fix: copy transcript (#674)

* Copy transcript

* Fix share copy transcript

* Move copy button above transcript

www/app/(app)/transcripts/transcriptTitle.tsx

@@ -4,10 +4,15 @@ import type { components } from "../../reflector-api";
 type UpdateTranscript = components["schemas"]["UpdateTranscript"];
 type GetTranscript = components["schemas"]["GetTranscript"];
 type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
-import { useTranscriptUpdate } from "../../lib/apiHooks";
+import {
+  useTranscriptUpdate,
+  useTranscriptParticipants,
+} from "../../lib/apiHooks";
 import { Heading, IconButton, Input, Flex, Spacer } from "@chakra-ui/react";
-import { LuPen } from "react-icons/lu";
+import { LuPen, LuCopy, LuCheck } from "react-icons/lu";
 import ShareAndPrivacy from "./shareAndPrivacy";
+import { buildTranscriptWithTopics } from "./buildTranscriptWithTopics";
+import { toaster } from "../../components/ui/toaster";
 
 type TranscriptTitle = {
   title: string;
@@ -25,6 +30,9 @@ const TranscriptTitle = (props: TranscriptTitle) => {
   const [preEditTitle, setPreEditTitle] = useState(props.title);
   const [isEditing, setIsEditing] = useState(false);
   const updateTranscriptMutation = useTranscriptUpdate();
+  const participantsQuery = useTranscriptParticipants(
+    props.transcript?.id || null,
+  );
 
   const updateTitle = async (newTitle: string, transcriptId: string) => {
     try {
@@ -118,11 +126,57 @@ const TranscriptTitle = (props: TranscriptTitle) => {
             <LuPen />
           </IconButton>
           {props.transcript && props.topics && (
-            <ShareAndPrivacy
-              finalSummaryElement={props.finalSummaryElement}
-              transcript={props.transcript}
-              topics={props.topics}
-            />
+            <>
+              <IconButton
+                aria-label="Copy Transcript"
+                size="sm"
+                variant="subtle"
+                onClick={() => {
+                  const text = buildTranscriptWithTopics(
+                    props.topics || [],
+                    participantsQuery?.data || null,
+                    props.transcript?.title || null,
+                  );
+                  if (!text) return;
+                  navigator.clipboard
+                    .writeText(text)
+                    .then(() => {
+                      toaster
+                        .create({
+                          placement: "top",
+                          duration: 2500,
+                          render: () => (
+                            <div className="chakra-ui-light">
+                              <div
+                                style={{
+                                  background: "#38A169",
+                                  color: "white",
+                                  padding: "8px 12px",
+                                  borderRadius: 6,
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: 8,
+                                  boxShadow: "rgba(0,0,0,0.25) 0px 4px 12px",
+                                }}
+                              >
+                                <LuCheck /> Transcript copied
+                              </div>
+                            </div>
+                          ),
+                        })
+                        .then(() => {});
+                    })
+                    .catch(() => {});
+                }}
+              >
+                <LuCopy />
+              </IconButton>
+              <ShareAndPrivacy
+                finalSummaryElement={props.finalSummaryElement}
+                transcript={props.transcript}
+                topics={props.topics}
+              />
+            </>
           )}
         </Flex>
       )}