Merge pull request #374 from Monadical-SAS/fix-recording-layout

Fix recording layout

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

@@ -23,6 +23,7 @@ import ShareAndPrivacy from "../shareAndPrivacy";
 type FinalSummaryProps = {
   transcriptResponse: GetTranscript;
   topicsResponse: GetTranscriptTopic[];
+  onUpdate?: (newSummary) => void;
 };
 
 export default function FinalSummary(props: FinalSummaryProps) {
@@ -53,6 +54,9 @@ export default function FinalSummary(props: FinalSummaryProps) {
         transcriptId,
         requestBody,
       });
+      if (props.onUpdate) {
+        props.onUpdate(newSummary);
+      }
       console.log("Updated long summary:", updatedTranscript);
     } catch (err) {
       console.error("Failed to update long summary:", err);

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

@@ -103,6 +103,9 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             <TranscriptTitle
               title={transcript.response.title || "Unnamed Transcript"}
               transcriptId={transcriptId}
+              onUpdate={(newTitle) => {
+                transcript.reload();
+              }}
             />
           </GridItem>
           <TopicList
@@ -118,6 +121,9 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               <FinalSummary
                 transcriptResponse={transcript.response}
                 topicsResponse={topics.topics}
+                onUpdate={(newSummary) => {
+                  transcript.reload();
+                }}
               />
             </>
           ) : (

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

@@ -93,8 +93,8 @@ const TranscriptRecord = (details: TranscriptDetails) => {
           {status === "processing" ? "Processing meeting" : "Record meeting"}
         </Heading>
 
-        <Flex direction={{ base: "column-reverse", md: "row" }}>
+        <Flex direction={{ base: "column-reverse", md: "row" }} h={"full"}>
-          <Box w={{ md: "50%" }}>
+          <Box w={{ md: "50%" }} h={{ base: "80%", md: "full" }}>
             <TopicList
               topics={webSockets.topics}
               useActiveTopic={useActiveTopic}

www/app/[domain]/transcripts/topicList.tsx

@@ -112,7 +112,7 @@ export function TopicList({
     <Flex
       position={"relative"}
       w={"100%"}
-      h={"100%"}
+      h={"95%"}
       flexDirection={"column"}
       justify={"center"}
       align={"center"}

www/app/[domain]/transcripts/transcriptTitle.tsx

@@ -7,6 +7,7 @@ import { FaPen } from "react-icons/fa";
 type TranscriptTitle = {
   title: string;
   transcriptId: string;
+  onUpdate?: (newTitle: string) => void;
 };
 
 const TranscriptTitle = (props: TranscriptTitle) => {
@@ -25,6 +26,9 @@ const TranscriptTitle = (props: TranscriptTitle) => {
         transcriptId,
         requestBody,
       });
+      if (props.onUpdate) {
+        props.onUpdate(newTitle);
+      }
       console.log("Updated transcript:", updatedTranscript);
     } catch (err) {
       console.error("Failed to update transcript:", err);

www/app/[domain]/transcripts/useTranscript.ts

@@ -8,18 +8,21 @@ type ErrorTranscript = {
   error: Error;
   loading: false;
   response: null;
+  reload: () => void;
 };
 
 type LoadingTranscript = {
   response: null;
   loading: true;
   error: false;
+  reload: () => void;
 };
 
 type SuccessTranscript = {
   response: GetTranscript;
   loading: false;
   error: null;
+  reload: () => void;
 };
 
 const useTranscript = (
@@ -28,13 +31,17 @@ const useTranscript = (
   const [response, setResponse] = useState<GetTranscript | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setErrorState] = useState<Error | null>(null);
+  const [reload, setReload] = useState(0);
   const { setError } = useError();
   const api = useApi();
+  const reloadHandler = () => setReload((prev) => prev + 1);
 
   useEffect(() => {
     if (!id || !api) return;
 
-    setLoading(true);
+    if (!response) {
+      setLoading(true);
+    }
 
     api
       .v1TranscriptGet({ transcriptId: id })
@@ -52,9 +59,9 @@ const useTranscript = (
         }
         setErrorState(error);
       });
-  }, [id, !api]);
+  }, [id, !api, reload]);
 
-  return { response, loading, error } as
+  return { response, loading, error, reload: reloadHandler } as
     | ErrorTranscript
     | LoadingTranscript
     | SuccessTranscript;