refactor past meeting

www/app/[domain]/transcripts/[transcriptId]/finalSummary.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from "react";
+import React from "react";
+import Markdown from "react-markdown";
+import "../../../styles/markdown.css";
+import { UpdateTranscript } from "../../../api";
+import useApi from "../../../lib/useApi";
+import useTranscript from "../useTranscript";
+import useTopics from "../useTopics";
+import { Box, Flex, IconButton, Modal, ModalContent } from "@chakra-ui/react";
+import { FaShare } from "react-icons/fa";
+import ShareTranscript from "../shareTranscript";
+
+type FinalSummaryProps = {
+  transcriptId: string;
+};
+
+export default function FinalSummary(props: FinalSummaryProps) {
+  const transcript = useTranscript(props.transcriptId);
+  const topics = useTopics(props.transcriptId);
+
+  const finalSummaryRef = useRef<HTMLParagraphElement>(null);
+
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [preEditSummary, setPreEditSummary] = useState("");
+  const [editedSummary, setEditedSummary] = useState("");
+
+  const [showShareModal, setShowShareModal] = useState(false);
+
+  useEffect(() => {
+    setEditedSummary(transcript.response?.long_summary || "");
+  }, [transcript.response?.long_summary]);
+
+  if (!topics.topics || !transcript.response) {
+    return null;
+  }
+
+  const updateSummary = async (newSummary: string, transcriptId: string) => {
+    try {
+      const api = useApi();
+      const requestBody: UpdateTranscript = {
+        long_summary: newSummary,
+      };
+      const updatedTranscript = await api?.v1TranscriptUpdate(
+        transcriptId,
+        requestBody,
+      );
+      console.log("Updated long summary:", updatedTranscript);
+    } catch (err) {
+      console.error("Failed to update long summary:", err);
+    }
+  };
+
+  const onEditClick = () => {
+    setPreEditSummary(editedSummary);
+    setIsEditMode(true);
+  };
+
+  const onDiscardClick = () => {
+    setEditedSummary(preEditSummary);
+    setIsEditMode(false);
+  };
+
+  const onSaveClick = () => {
+    updateSummary(editedSummary, props.transcriptId);
+    setIsEditMode(false);
+  };
+
+  const handleTextAreaKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      onDiscardClick();
+    }
+
+    if (e.key === "Enter" && e.shiftKey) {
+      onSaveClick();
+      e.preventDefault(); // prevent the default action of adding a new line
+    }
+  };
+
+  return (
+    <div
+      className={
+        (isEditMode ? "overflow-y-none" : "overflow-y-auto") +
+        " max-h-full flex flex-col h-full"
+      }
+    >
+      <div className="flex flex-row flex-wrap-reverse justify-between items-center">
+        <h2 className="text-lg sm:text-xl md:text-2xl font-bold">
+          Final Summary
+        </h2>
+
+        <div className="ml-auto flex space-x-2 mb-2">
+          {isEditMode && (
+            <>
+              <button
+                onClick={onDiscardClick}
+                className={"text-gray-500 text-sm hover:underline"}
+              >
+                Discard Changes
+              </button>
+              <button
+                onClick={onSaveClick}
+                className={
+                  "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
+                }
+              >
+                Save Changes
+              </button>
+            </>
+          )}
+
+          {!isEditMode && (
+            <>
+              <button
+                onClick={onEditClick}
+                className={
+                  "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+                }
+              >
+                <span className="text-xs">✏️ Summary</span>
+              </button>
+              <IconButton
+                icon={<FaShare />}
+                onClick={() => setShowShareModal(true)}
+                aria-label="Share"
+              />
+              {showShareModal && (
+                <Modal
+                  isOpen={showShareModal}
+                  onClose={() => setShowShareModal(false)}
+                  size="xl"
+                >
+                  <ModalContent>
+                    <ShareTranscript
+                      finalSummaryRef={finalSummaryRef}
+                      transcriptResponse={transcript.response}
+                      topicsResponse={topics.topics}
+                    />
+                  </ModalContent>
+                </Modal>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {isEditMode ? (
+        <div className="flex-grow overflow-y-none">
+          <textarea
+            value={editedSummary}
+            onChange={(e) => setEditedSummary(e.target.value)}
+            className="markdown w-full h-full d-block p-2 border rounded shadow-sm"
+            onKeyDown={(e) => handleTextAreaKeyDown(e)}
+          />
+        </div>
+      ) : (
+        <div ref={finalSummaryRef} className="markdown">
+          <Markdown>{editedSummary}</Markdown>
+        </div>
+      )}
+    </div>
+  );
+}

www/app/[domain]/transcripts/[transcriptId]/page.tsx

@@ -8,7 +8,7 @@ import { TopicList } from "../topicList";
 import { Topic } from "../webSocketTypes";
 import React, { useEffect, useState } from "react";
 import "../../../styles/button.css";
-import FinalSummary from "../finalSummary";
+import FinalSummary from "./finalSummary";
 import ShareLink from "../shareLink";
 import QRCode from "react-qr-code";
 import TranscriptTitle from "../transcriptTitle";
@@ -17,7 +17,16 @@ import Player from "../player";
 import WaveformLoading from "../waveformLoading";
 import { useRouter } from "next/navigation";
 import { featureEnabled } from "../../domainContext";
-import { toShareMode } from "../../../lib/shareMode";
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  IconButton,
+  Text,
+} from "@chakra-ui/react";
+import { FaPen } from "react-icons/fa";
 
 type TranscriptDetails = {
   params: {
@@ -34,7 +43,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   const waveform = useWaveform(transcriptId);
   const useActiveTopic = useState<Topic | null>(null);
   const mp3 = useMp3(transcriptId);
-  const [showModal, setShowModal] = useState(false);
 
   useEffect(() => {
     const statusToRedirect = ["idle", "recording", "processing"];
@@ -43,18 +51,11 @@ export default function TranscriptDetails(details: TranscriptDetails) {
       // Shallow redirection does not work on NextJS 13
       // https://github.com/vercel/next.js/discussions/48110
       // https://github.com/vercel/next.js/discussions/49540
-      router.push(newUrl, undefined);
+      router.replace(newUrl);
       // history.replaceState({}, "", newUrl);
     }
   }, [transcript.response?.status]);
 
-  const fullTranscript =
-    topics.topics
-      ?.map((topic) => topic.transcript)
-      .join("\n\n")
-      .replace(/ +/g, " ")
-      .trim() || "";
-
   if (transcript.error || topics?.error) {
     return (
       <Modal
@@ -69,22 +70,48 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   }
 
   return (
-    <div className="grid grid-rows-layout-topbar h-full max-h-full gap-2 lg:gap-4">
-      {featureEnabled("sendToZulip") && (
-        <ShareModal
-          transcript={transcript.response}
-          topics={topics ? topics.topics : null}
-          show={showModal}
-          setShow={(v) => setShowModal(v)}
-        />
-      )}
-      <div className="flex flex-col">
-        {transcript?.response?.title && (
-          <TranscriptTitle
-            title={transcript.response.title}
-            transcriptId={transcript.response.id}
+    <>
+      <Grid templateColumns="1fr" templateRows="minmax(0, 1fr) auto">
+        <Grid
+          templateColumns="repeat(2, 1fr)"
+          templateRows="auto minmax(0, 1fr)"
+          gap={4}
+          padding={4}
+          background="gray.100"
+          borderRadius={2}
+        >
+          <GridItem display="flex" flexDir="row" colSpan={2}>
+            <TranscriptTitle
+              title={transcript.response.title || "Unamed Transcript"}
+              transcriptId={transcriptId}
+            />
+            <IconButton icon={<FaPen />} aria-label="Edit Transcript Title" />
+          </GridItem>
+          <TopicList
+            topics={topics.topics || []}
+            useActiveTopic={useActiveTopic}
+            autoscroll={false}
+            transcriptId={transcriptId}
           />
-        )}
+          {transcript.response.long_summary ? (
+            <>
+              <FinalSummary transcriptId={transcript.response.id} />
+            </>
+          ) : (
+            <Flex justify={"center"} alignItems={"center"} h={"100%"}>
+              <div className="flex flex-col h-full justify-center content-center">
+                {transcript.response.status == "processing" ? (
+                  <Text>Loading Transcript</Text>
+                ) : (
+                  <Text>
+                    There was an error generating the final summary, please come
+                    back later
+                  </Text>
+                )}
+              </div>
+            </Flex>
+          )}
+        </Grid>
         {waveform.waveform && mp3.media ? (
           <Player
             topics={topics?.topics || []}
@@ -98,56 +125,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
         ) : (
           <WaveformLoading />
         )}
-      </div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-2 lg:grid-rows-1 gap-2 lg:gap-4 h-full">
-        <TopicList
-          topics={topics.topics || []}
-          useActiveTopic={useActiveTopic}
-          autoscroll={false}
-          transcriptId={transcriptId}
-        />
-
-        <div className="w-full h-full grid grid-rows-layout-one grid-cols-1 gap-2 lg:gap-4">
-          <section className=" bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 h-full">
-            {transcript.response.long_summary ? (
-              <FinalSummary
-                fullTranscript={fullTranscript}
-                summary={transcript.response.long_summary}
-                transcriptId={transcript.response.id}
-                openZulipModal={() => setShowModal(true)}
-              />
-            ) : (
-              <div className="flex flex-col h-full justify-center content-center">
-                {transcript.response.status == "processing" ? (
-                  <p>Loading Transcript</p>
-                ) : (
-                  <p>
-                    There was an error generating the final summary, please come
-                    back later
-                  </p>
-                )}
-              </div>
-            )}
-          </section>
-
-          <section className="flex items-center">
-            <div className="mr-4 hidden md:block h-auto">
-              <QRCode
-                value={`${location.origin}/transcripts/${details.params.transcriptId}`}
-                level="L"
-                size={98}
-              />
-            </div>
-            <div className="flex-grow max-w-full">
-              <ShareLink
-                transcriptId={transcript.response.id}
-                userId={transcript.response.user_id}
-                shareMode={toShareMode(transcript.response.share_mode)}
-              />
-            </div>
-          </section>
-        </div>
-      </div>
-    </div>
+      </Grid>
+    </>
   );
 }