refactor past meeting

2025-12-20 20:29:06 +00:00 · 2024-01-18 14:05:34 +01:00
parent fa4935c454
commit 69ae5b281e
7 changed files with 219 additions and 152 deletions
--- a/www/app/[domain]/browse/page.tsx
+++ b/www/app/[domain]/browse/page.tsx
@@ -100,6 +100,7 @@ export default function TranscriptBrowser() {
      api
        .v1TranscriptDelete(transcriptToDeleteId)
        .then(() => {
+          refetch();
          setDeletionLoading(false);
          refetch();
          onCloseDeletion();
--- a/www/app/[domain]/transcripts/[transcriptId]/finalSummary.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/finalSummary.tsx
@@ -1,25 +1,38 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import React from "react";
 import Markdown from "react-markdown";
-import "../../styles/markdown.css";
-import { featureEnabled } from "../domainContext";
-import { UpdateTranscript } from "../../api";
-import useApi from "../../lib/useApi";
+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 = {
-  summary: string;
-  fullTranscript: string;
  transcriptId: string;
-  openZulipModal: () => void;
 };

 export default function FinalSummary(props: FinalSummaryProps) {
+  const transcript = useTranscript(props.transcriptId);
+  const topics = useTopics(props.transcriptId);
+
  const finalSummaryRef = useRef<HTMLParagraphElement>(null);
-  const [isCopiedSummary, setIsCopiedSummary] = useState(false);
-  const [isCopiedTranscript, setIsCopiedTranscript] = useState(false);
+
  const [isEditMode, setIsEditMode] = useState(false);
-  const [preEditSummary, setPreEditSummary] = useState(props.summary);
-  const [editedSummary, setEditedSummary] = useState(props.summary);
+  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 {
@@ -37,28 +50,6 @@ export default function FinalSummary(props: FinalSummaryProps) {
    }
  };

-  const onCopySummaryClick = () => {
-    let text_to_copy = finalSummaryRef.current?.innerText;
-
-    text_to_copy &&
-      navigator.clipboard.writeText(text_to_copy).then(() => {
-        setIsCopiedSummary(true);
-        // Reset the copied state after 2 seconds
-        setTimeout(() => setIsCopiedSummary(false), 2000);
-      });
-  };
-
-  const onCopyTranscriptClick = () => {
-    let text_to_copy = props.fullTranscript;
-
-    text_to_copy &&
-      navigator.clipboard.writeText(text_to_copy).then(() => {
-        setIsCopiedTranscript(true);
-        // Reset the copied state after 2 seconds
-        setTimeout(() => setIsCopiedTranscript(false), 2000);
-      });
-  };
-
  const onEditClick = () => {
    setPreEditSummary(editedSummary);
    setIsEditMode(true);
@@ -119,17 +110,6 @@ export default function FinalSummary(props: FinalSummaryProps) {

          {!isEditMode && (
            <>
-              {featureEnabled("sendToZulip") && (
-                <button
-                  className={
-                    "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
-                  }
-                  onClick={() => props.openZulipModal()}
-                >
-                  <span className="text-xs">➡️ Zulip</span>
-                </button>
-              )}
-
              <button
                onClick={onEditClick}
                className={
@@ -138,30 +118,26 @@ export default function FinalSummary(props: FinalSummaryProps) {
              >
                <span className="text-xs">✏️ Summary</span>
              </button>
-              <button
-                onClick={onCopyTranscriptClick}
-                className={
-                  (isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
-                  " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
-                }
-                style={{ minHeight: "30px" }}
-              >
-                <span className="text-xs">
-                  {isCopiedTranscript ? "Copied!" : "Copy Transcript"}
-                </span>
-              </button>
-              <button
-                onClick={onCopySummaryClick}
-                className={
-                  (isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
-                  " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
-                }
-                style={{ minHeight: "30px" }}
-              >
-                <span className="text-xs">
-                  {isCopiedSummary ? "Copied!" : "Copy 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>
@@ -177,9 +153,9 @@ export default function FinalSummary(props: FinalSummaryProps) {
          />
        </div>
      ) : (
-        <p ref={finalSummaryRef} className="markdown">
+        <div ref={finalSummaryRef} className="markdown">
          <Markdown>{editedSummary}</Markdown>
-        </p>
+        </div>
      )}
    </div>
  );
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/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>
+    </>
  );
 }
--- a/www/app/[domain]/transcripts/shareLink.tsx
+++ b/www/app/[domain]/transcripts/shareLink.tsx
@@ -10,9 +10,10 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { UpdateTranscript } from "../../api";
 import { ShareMode, toShareMode } from "../../lib/shareMode";
 import useApi from "../../lib/useApi";
+
 type ShareLinkProps = {
  transcriptId: string;
-  userId: string | null;
+  transcriptUserId: string | null;
  shareMode: ShareMode;
 };

@@ -24,16 +25,16 @@ const ShareLink = (props: ShareLinkProps) => {
  const [isOwner, setIsOwner] = useState(false);
  const [shareMode, setShareMode] = useState<ShareMode>(props.shareMode);
  const [shareLoading, setShareLoading] = useState(false);
-  const userinfo = useFiefUserinfo();
  const api = useApi();
+  const userId = useFiefUserinfo()?.sub;

  useEffect(() => {
    setCurrentUrl(window.location.href);
  }, []);

  useEffect(() => {
-    setIsOwner(!!(requireLogin && userinfo?.sub === props.userId));
-  }, [userinfo, props.userId]);
+    setIsOwner(!!(requireLogin && userId === props.transcriptUserId));
+  }, [userId, props.transcriptUserId]);

  const handleCopyClick = () => {
    if (inputRef.current) {
--- a/www/app/[domain]/transcripts/shareTranscript.tsx
+++ b/www/app/[domain]/transcripts/shareTranscript.tsx
@@ -0,0 +1,108 @@
+import { useState } from "react";
+import { featureEnabled } from "../domainContext";
+import ShareModal from "./[transcriptId]/shareModal";
+import ShareLink from "./shareLink";
+import QRCode from "react-qr-code";
+import { toShareMode } from "../../lib/shareMode";
+import { GetTranscript, GetTranscriptTopic } from "../../api";
+
+type ShareTranscriptProps = {
+  finalSummaryRef: any;
+  transcriptResponse: GetTranscript;
+  topicsResponse: GetTranscriptTopic[];
+};
+
+export default function ShareTranscript(props: ShareTranscriptProps) {
+  const [showModal, setShowModal] = useState(false);
+  const [isCopiedSummary, setIsCopiedSummary] = useState(false);
+  const [isCopiedTranscript, setIsCopiedTranscript] = useState(false);
+
+  const onCopySummaryClick = () => {
+    let text_to_copy = props.finalSummaryRef.current?.innerText;
+
+    text_to_copy &&
+      navigator.clipboard.writeText(text_to_copy).then(() => {
+        setIsCopiedSummary(true);
+        // Reset the copied state after 2 seconds
+        setTimeout(() => setIsCopiedSummary(false), 2000);
+      });
+  };
+
+  const onCopyTranscriptClick = () => {
+    let text_to_copy =
+      props.topicsResponse
+        ?.map((topic) => topic.transcript)
+        .join("\n\n")
+        .replace(/ +/g, " ")
+        .trim() || "";
+
+    text_to_copy &&
+      navigator.clipboard.writeText(text_to_copy).then(() => {
+        setIsCopiedTranscript(true);
+        // Reset the copied state after 2 seconds
+        setTimeout(() => setIsCopiedTranscript(false), 2000);
+      });
+  };
+
+  return (
+    <div>
+      <>
+        {featureEnabled("sendToZulip") && (
+          <button
+            className={
+              "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+            }
+            onClick={() => setShowModal(true)}
+          >
+            <span className="text-xs">➡️ Zulip</span>
+          </button>
+        )}
+
+        <button
+          onClick={onCopyTranscriptClick}
+          className={
+            (isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
+            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+          }
+          style={{ minHeight: "30px" }}
+        >
+          <span className="text-xs">
+            {isCopiedTranscript ? "Copied!" : "Copy Transcript"}
+          </span>
+        </button>
+        <button
+          onClick={onCopySummaryClick}
+          className={
+            (isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
+            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+          }
+          style={{ minHeight: "30px" }}
+        >
+          <span className="text-xs">
+            {isCopiedSummary ? "Copied!" : "Copy Summary"}
+          </span>
+        </button>
+        {featureEnabled("sendToZulip") && (
+          <ShareModal
+            transcript={props.transcriptResponse}
+            topics={props.topicsResponse}
+            show={showModal}
+            setShow={(v) => setShowModal(v)}
+          />
+        )}
+
+        <QRCode
+          value={`${location.origin}/transcripts/${props.transcriptResponse.id}`}
+          level="L"
+          size={98}
+        />
+
+        <ShareLink
+          transcriptId={props.transcriptResponse.id}
+          transcriptUserId={props.transcriptResponse.user_id}
+          shareMode={toShareMode(props.transcriptResponse.share_mode)}
+        />
+      </>
+    </div>
+  );
+}
--- a/www/app/[domain]/transcripts/useTranscriptList.ts
+++ b/www/app/[domain]/transcripts/useTranscriptList.ts
@@ -20,6 +20,7 @@ const useTranscriptList = (page: number): TranscriptList => {
  const [refetchCount, setRefetchCount] = useState(0);

  const refetch = () => {
+    setLoading(true);
    setRefetchCount(refetchCount + 1);
  };

--- a/www/app/lib/time.ts
+++ b/www/app/lib/time.ts
@@ -1,3 +1,5 @@
+// TODO format duraction in be ?
+
 export const formatTime = (seconds: number): string => {
  let hours = Math.floor(seconds / 3600);
  let minutes = Math.floor((seconds % 3600) / 60);