Merge branch 'main' into feat-api-speaker-reassignment

www/app/[domain]/domainContext.tsx

@@ -9,9 +9,11 @@ export const DomainContext = createContext<DomainContextType>({
     requireLogin: false,
     privacy: true,
     browse: false,
+    sendToZulip: false,
   },
   api_url: "",
   websocket_url: "",
+  zulip_streams: "",
 });
 
 export const DomainContextProvider = ({
@@ -38,9 +40,10 @@ export const DomainContextProvider = ({
 
 // Get feature config client-side with
 export const featureEnabled = (
-  featureName: "requireLogin" | "privacy" | "browse",
+  featureName: "requireLogin" | "privacy" | "browse" | "sendToZulip",
 ) => {
   const context = useContext(DomainContext);
+
   return context.features[featureName] as boolean | undefined;
 };
 

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

@@ -12,11 +12,13 @@ import FinalSummary from "../finalSummary";
 import ShareLink from "../shareLink";
 import QRCode from "react-qr-code";
 import TranscriptTitle from "../transcriptTitle";
+import ShareModal from "./shareModal";
 import Player from "../player";
 import WaveformLoading from "../waveformLoading";
 import { useRouter } from "next/navigation";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { featureEnabled } from "../../domainContext";
 
 type TranscriptDetails = {
   params: {
@@ -33,6 +35,7 @@ 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"];
@@ -53,89 +56,100 @@ export default function TranscriptDetails(details: TranscriptDetails) {
       .replace(/ +/g, " ")
       .trim() || "";
 
-  if (transcript.error || topics?.error) {
+  if (transcript && transcript.response) {
+    if (transcript.error || topics?.error) {
+      return (
+        <Modal
+          title="Transcription Not Found"
+          text="A trascription with this ID does not exist."
+        />
+      );
+    }
+
+    if (!transcriptId || transcript?.loading || topics?.loading) {
+      return <Modal title="Loading" text={"Loading transcript..."} />;
+    }
+
     return (
-      <Modal
-        title="Transcription Not Found"
-        text="A trascription with this ID does not exist."
-      />
+      <>
+        {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}
+            />
+          )}
+          {waveform.waveform && mp3.media ? (
+            <Player
+              topics={topics?.topics || []}
+              useActiveTopic={useActiveTopic}
+              waveform={waveform.waveform.data}
+              media={mp3.media}
+              mediaDuration={transcript.response.duration}
+            />
+          ) : waveform.error ? (
+            <div>"error loading this recording"</div>
+          ) : (
+            <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}
+          />
+
+          <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.longSummary ? (
+                <FinalSummary
+                  fullTranscript={fullTranscript}
+                  summary={transcript.response.longSummary}
+                  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?.userId}
+                  shareMode={transcript?.response?.shareMode}
+                />
+              </div>
+            </section>
+          </div>
+        </div>
+      </>
     );
   }
-
-  if (transcript?.loading || topics?.loading) {
-    return <Modal title="Loading" text={"Loading transcript..."} />;
-  }
-
-  return (
-    <>
-      <div className="flex flex-col">
-        {transcript?.response?.title && (
-          <TranscriptTitle
-            title={transcript.response.title}
-            transcriptId={transcript.response.id}
-          />
-        )}
-        {waveform.waveform && mp3.media ? (
-          <Player
-            topics={topics?.topics || []}
-            useActiveTopic={useActiveTopic}
-            waveform={waveform.waveform.data}
-            media={mp3.media}
-            mediaDuration={transcript.response.duration}
-          />
-        ) : waveform.error ? (
-          <div>"error loading this recording"</div>
-        ) : (
-          <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}
-        />
-
-        <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.longSummary ? (
-              <FinalSummary
-                fullTranscript={fullTranscript}
-                summary={transcript.response.longSummary}
-                transcriptId={transcript.response.id}
-              />
-            ) : (
-              <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?.userId}
-                shareMode={transcript?.response?.shareMode}
-              />
-            </div>
-          </section>
-        </div>
-      </div>
-    </>
-  );
 }

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

@@ -0,0 +1,159 @@
+import React, { useContext, useState, useEffect } from "react";
+import SelectSearch from "react-select-search";
+import { getZulipMessage, sendZulipMessage } from "../../../lib/zulip";
+import { GetTranscript, GetTranscriptTopic } from "../../../api";
+import "react-select-search/style.css";
+import { DomainContext } from "../../domainContext";
+
+type ShareModal = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+  transcript: GetTranscript | null;
+  topics: GetTranscriptTopic[] | null;
+};
+
+interface Stream {
+  id: number;
+  name: string;
+  topics: string[];
+}
+
+interface SelectSearchOption {
+  name: string;
+  value: string;
+}
+
+const ShareModal = (props: ShareModal) => {
+  const [stream, setStream] = useState<string | undefined>(undefined);
+  const [topic, setTopic] = useState<string | undefined>(undefined);
+  const [includeTopics, setIncludeTopics] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [streams, setStreams] = useState<Stream[]>([]);
+  const { zulip_streams } = useContext(DomainContext);
+
+  useEffect(() => {
+    fetch(zulip_streams + "/streams.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        data = data.sort((a: Stream, b: Stream) =>
+          a.name.localeCompare(b.name),
+        );
+        setStreams(data);
+        setIsLoading(false);
+        // data now contains the JavaScript object decoded from JSON
+      })
+      .catch((error) => {
+        console.error("There was a problem with your fetch operation:", error);
+      });
+  }, []);
+
+  const handleSendToZulip = () => {
+    if (!props.transcript) return;
+
+    const msg = getZulipMessage(props.transcript, props.topics, includeTopics);
+
+    if (stream && topic) sendZulipMessage(stream, topic, msg);
+  };
+
+  if (props.show && isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  let streamOptions: SelectSearchOption[] = [];
+  if (streams) {
+    streams.forEach((stream) => {
+      const value = stream.name;
+      streamOptions.push({ name: value, value: value });
+    });
+  }
+
+  return (
+    <div className="absolute">
+      {props.show && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white">
+            <div className="mt-3 text-center">
+              <h3 className="font-bold text-xl">Send to Zulip</h3>
+
+              {/* Checkbox for 'Include Topics' */}
+              <div className="mt-4 text-left ml-5">
+                <label className="flex items-center">
+                  <input
+                    type="checkbox"
+                    className="form-checkbox rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                    checked={includeTopics}
+                    onChange={(e) => setIncludeTopics(e.target.checked)}
+                  />
+                  <span className="ml-2">Include topics</span>
+                </label>
+              </div>
+
+              <div className="flex items-center mt-4">
+                <span className="mr-2">#</span>
+                <SelectSearch
+                  search={true}
+                  options={streamOptions}
+                  value={stream}
+                  onChange={(val) => {
+                    setTopic(undefined);
+                    setStream(val.toString());
+                  }}
+                  placeholder="Pick a stream"
+                />
+              </div>
+
+              {stream && (
+                <>
+                  <div className="flex items-center mt-4">
+                    <span className="mr-2 invisible">#</span>
+                    <SelectSearch
+                      search={true}
+                      options={
+                        streams
+                          .find((s) => s.name == stream)
+                          ?.topics.sort((a: string, b: string) =>
+                            a.localeCompare(b),
+                          )
+                          .map((t) => ({ name: t, value: t })) || []
+                      }
+                      value={topic}
+                      onChange={(val) => setTopic(val.toString())}
+                      placeholder="Pick a topic"
+                    />
+                  </div>
+                </>
+              )}
+
+              <button
+                className={`bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded py-2 px-4 mr-3 ${
+                  !stream || !topic ? "opacity-50 cursor-not-allowed" : ""
+                }`}
+                disabled={!stream || !topic}
+                onClick={() => {
+                  handleSendToZulip();
+                  props.setShow(false);
+                }}
+              >
+                Send to Zulip
+              </button>
+
+              <button
+                className="bg-red-500 hover:bg-red-700 focus-visible:bg-red-700 text-white rounded py-2 px-4 mt-4"
+                onClick={() => props.setShow(false)}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShareModal;

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

@@ -3,11 +3,13 @@ import React from "react";
 import Markdown from "react-markdown";
 import "../../styles/markdown.css";
 import getApi from "../../lib/getApi";
+import { featureEnabled } from "../domainContext";
 
 type FinalSummaryProps = {
   summary: string;
   fullTranscript: string;
   transcriptId: string;
+  openZulipModal: () => void;
 };
 
 export default function FinalSummary(props: FinalSummaryProps) {
@@ -116,33 +118,48 @@ 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={
-                  "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base text-xs"
+                  "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
                 }
               >
-                Edit Summary
+                <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 text-xs"
+                  " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
                 }
                 style={{ minHeight: "30px" }}
               >
-                {isCopiedTranscript ? "Copied!" : "Copy Transcript"}
+                <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 text-xs"
+                  " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
                 }
                 style={{ minHeight: "30px" }}
               >
-                {isCopiedSummary ? "Copied!" : "Copy Summary"}
+                <span className="text-xs">
+                  {isCopiedSummary ? "Copied!" : "Copy Summary"}
+                </span>
               </button>
             </>
           )}