Edit title + summary UI

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

@@ -55,7 +55,11 @@ export default function TranscriptDetails(details: TranscriptDetails) {
         <>
           <div className="flex flex-col">
             {transcript?.response?.title && (
-              <TranscriptTitle title={transcript.response.title} />
+              <TranscriptTitle
+                protectedPath={protectedPath}
+                title={transcript.response.title}
+                transcriptId={transcript.response.id}
+              />
             )}
             {waveform?.loading === false && (
               <Recorder
@@ -78,8 +82,10 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               <section className=" bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 h-full">
                 {transcript?.response?.longSummary && (
                   <FinalSummary
+                    protectedPath={protectedPath}
                     fullTranscript={fullTranscript}
                     summary={transcript?.response?.longSummary}
+                    transcriptId={transcript?.response?.id}
                   />
                 )}
               </section>

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

@@ -1,18 +1,38 @@
 import { useRef, useState } from "react";
 import React from "react";
-import ReactDom from "react-dom";
 import Markdown from "react-markdown";
 import "../../styles/markdown.css";
+import getApi from "../../lib/getApi";
 
 type FinalSummaryProps = {
+  protectedPath: boolean;
   summary: string;
   fullTranscript: string;
+  transcriptId: string;
 };
 
 export default function FinalSummary(props: FinalSummaryProps) {
   const finalSummaryRef = useRef<HTMLParagraphElement>(null);
   const [isCopiedSummary, setIsCopiedSummary] = useState(false);
   const [isCopiedTranscript, setIsCopiedTranscript] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editedSummary, setEditedSummary] = useState(props.summary);
+  const api = getApi(props.protectedPath);
+
+  const updateSummary = async (newSummary: string, transcriptId: string) => {
+    try {
+      setEditedSummary(newSummary);
+      const updatedTranscript = await api.v1TranscriptUpdate({
+        transcriptId,
+        updateTranscript: {
+          longSummary: newSummary,
+        },
+      });
+      console.log("Updated long summary:", updatedTranscript);
+    } catch (err) {
+      console.error("Failed to update long summary:", err);
+    }
+  };
 
   const handleCopySummaryClick = () => {
     let text_to_copy = finalSummaryRef.current?.innerText;
@@ -36,6 +56,10 @@ export default function FinalSummary(props: FinalSummaryProps) {
       });
   };
 
+  const handleEditMode = () => {
+    setIsEditMode(!isEditMode);
+  };
+
   return (
     <div className="overflow-y-auto h-auto max-h-full">
       <div className="flex flex-row flex-wrap-reverse justify-between items-center">
@@ -43,6 +67,14 @@ export default function FinalSummary(props: FinalSummaryProps) {
           Final Summary
         </h2>
         <div className="ml-auto flex space-x-2 mb-2">
+          <button
+            onClick={handleEditMode}
+            className={
+              "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
+            }
+          >
+            {isEditMode ? "Save" : "Edit Summary"}
+          </button>
           <button
             onClick={handleCopyTranscriptClick}
             className={
@@ -65,10 +97,17 @@ export default function FinalSummary(props: FinalSummaryProps) {
           </button>
         </div>
       </div>
-
+      {isEditMode ? (
-      <p ref={finalSummaryRef} className="markdown">
+        <textarea
-        <Markdown>{props.summary}</Markdown>
+          value={editedSummary}
-      </p>
+          onChange={(e) => updateSummary(e.target.value, props.transcriptId)}
+          className="markdown"
+        />
+      ) : (
+        <p ref={finalSummaryRef} className="markdown">
+          <Markdown>{editedSummary}</Markdown>
+        </p>
+      )}{" "}
     </div>
   );
 }

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

@@ -1,11 +1,43 @@
+import { useState } from "react";
+import getApi from "../../lib/getApi";
+
 type TranscriptTitle = {
+  protectedPath: boolean;
   title: string;
+  transcriptId: string;
 };
 
 const TranscriptTitle = (props: TranscriptTitle) => {
+  const [currentTitle, setCurrentTitle] = useState(props.title);
+  const api = getApi(props.protectedPath);
+
+  const updateTitle = async (newTitle: string, transcriptId: string) => {
+    try {
+      const updatedTranscript = await api.v1TranscriptUpdate({
+        transcriptId,
+        updateTranscript: {
+          title: newTitle,
+        },
+      });
+      console.log("Updated transcript:", updatedTranscript);
+    } catch (err) {
+      console.error("Failed to update transcript:", err);
+    }
+  };
+  const handleClick = () => {
+    const newTitle = prompt("Please enter the new title:", currentTitle);
+    if (newTitle !== null) {
+      setCurrentTitle(newTitle);
+      updateTitle(newTitle, props.transcriptId);
+    }
+  };
+
   return (
-    <h2 className="text-2xl lg:text-4xl font-extrabold text-center mb-4">
+    <h2
-      {props.title}
+      className="text-2xl lg:text-4xl font-extrabold text-center mb-4"
+      onClick={handleClick}
+    >
+      {currentTitle}
     </h2>
   );
 };