Send to zulip

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

@@ -13,6 +13,7 @@ import FinalSummary from "../finalSummary";
 import ShareLink from "../shareLink";
 import QRCode from "react-qr-code";
 import TranscriptTitle from "../transcriptTitle";
+import ShareModal from "./shareModal";
 
 type TranscriptDetails = {
   params: {
@@ -30,6 +31,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   const waveform = useWaveform(protectedPath, transcriptId);
   const useActiveTopic = useState<Topic | null>(null);
   const mp3 = useMp3(protectedPath, transcriptId);
+  const [showModal, setShowModal] = useState(false);
 
   if (transcript?.error /** || topics?.error || waveform?.error **/) {
     return (
@@ -53,6 +55,13 @@ export default function TranscriptDetails(details: TranscriptDetails) {
         <Modal title="Loading" text={"Loading transcript..."} />
       ) : (
         <>
+          <ShareModal
+            show={showModal}
+            setShow={(v) => setShowModal(v)}
+            title={transcript?.response?.title}
+            summary={transcript?.response?.longSummary}
+            url={window.location.href}
+          />
           <div className="flex flex-col">
             {transcript?.response?.title && (
               <TranscriptTitle
@@ -81,6 +90,13 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             />
             <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">
+                <button
+                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                  onClick={() => setShowModal(true)}
+                >
+                  Open Modal
+                </button>
+
                 {transcript?.response?.longSummary && (
                   <FinalSummary
                     protectedPath={protectedPath}

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

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import SelectSearch from "react-select-search";
+
+type ShareModal = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+  title: string;
+  url: string;
+  summary: string;
+};
+
+const ShareModal = (props: ShareModal) => {
+  const [stream, setStream] = useState(null);
+  const [topic, setTopic] = useState(null);
+  const [includeTranscript, setIncludeTranscript] = useState(false);
+  const [includeSummary, setIncludeSummary] = useState(false);
+  const [includeTopics, setIncludeTopics] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [streams, setStreams] = useState({});
+
+  useEffect(() => {
+    fetch("/streams.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log("Stream data:", data);
+        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 = () => {
+    const message = `### Reflector Recording\n\n**[${props.title}](${props.url})**\n\n${props.summary}`;
+
+    alert("Send to zulip");
+  };
+
+  if (props.show && isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      {props.show && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
+          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div className="mt-3 text-center">
+              {/*
+                            <Select
+                                options={streamOptions}
+                                onChange={setStream}
+                                placeholder="Select Stream"
+                            />
+                            <Select
+                                options={topicOptions}
+                                onChange={setTopic}
+                                placeholder="Select Topic"
+                                className="mt-4"
+            /> */}
+              <div className="flex flex-col mt-4">
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={includeTranscript}
+                    onChange={(e) => setIncludeTranscript(e.target.checked)}
+                  />
+                  Include Transcript
+                </label>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={includeSummary}
+                    onChange={(e) => setIncludeSummary(e.target.checked)}
+                  />
+                  Include Summary
+                </label>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={includeTopics}
+                    onChange={(e) => setIncludeTopics(e.target.checked)}
+                  />
+                  Include Topics
+                </label>
+              </div>
+              <button
+                className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4"
+                onClick={handleSendToZulip}
+              >
+                Send to Zulip
+              </button>
+              <button
+                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-4"
+                onClick={() => props.setShow(false)}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShareModal;

www/app/lib/edgeConfig.ts

@@ -3,9 +3,9 @@ import { isDevelopment } from "./utils";
 
 const localConfig = {
   features: {
-    requireLogin: true,
+    requireLogin: false,
     privacy: true,
-    browse: true,
+    browse: false,
   },
   api_url: "http://127.0.0.1:1250",
   websocket_url: "ws://127.0.0.1:1250",

www/package.json

@@ -18,7 +18,7 @@
     "@sentry/nextjs": "^7.77.0",
     "@vercel/edge-config": "^0.4.1",
     "autoprefixer": "10.4.14",
-    "axios": "^1.4.0",
+    "axios": "^1.6.2",
     "fontawesome": "^5.6.3",
     "jest-worker": "^29.6.2",
     "next": "^13.4.9",

www/pages/api/send-to-zulip.ts

@@ -0,0 +1,62 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import axios from "axios";
+
+type ZulipStream = {
+  id: number;
+  name: string;
+  topics: string[];
+};
+
+async function getTopics(stream_id: number): Promise<string[]> {
+  try {
+    const response = await axios.get(
+      `https://${process.env.ZULIP_REALM}/api/v1/users/me/${stream_id}/topics`,
+      {
+        auth: {
+          username: process.env.ZULIP_BOT_EMAIL || "?",
+          password: process.env.ZULIP_API_KEY || "?",
+        },
+      },
+    );
+    return response.data.topics.map((topic) => topic.name);
+  } catch (error) {
+    console.error("Error fetching topics for stream " + stream_id, error);
+    throw error; // Propagate the error up to be handled by the caller
+  }
+}
+
+async function getStreams(): Promise<ZulipStream[]> {
+  try {
+    const response = await axios.get(
+      `https://${process.env.ZULIP_REALM}/api/v1/streams`,
+      {
+        auth: {
+          username: process.env.ZULIP_BOT_EMAIL || "?",
+          password: process.env.ZULIP_API_KEY || "?",
+        },
+      },
+    );
+
+    const streams: ZulipStream[] = [];
+    for (const stream of response.data.streams) {
+      console.log("Loading topics for " + stream.name);
+      const topics = await getTopics(stream.stream_id);
+      streams.push({ id: stream.stream_id, name: stream.name, topics });
+    }
+
+    return streams;
+  } catch (error) {
+    console.error("Error fetching zulip streams", error);
+    throw error; // Propagate the error up
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const streams = await getStreams();
+    return res.status(200).json({ streams });
+  } catch (error) {
+    // Handle errors more gracefully
+    return res.status(500).json({ error: "Internal Server Error" });
+  }
+};

www/yarn.lock

@@ -585,10 +585,10 @@ axios@0.27.2:
     follow-redirects "^1.14.9"
     form-data "^4.0.0"
 
-axios@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
-  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+axios@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
+  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"