Merge branch 'main' of github.com:Monadical-SAS/reflector into sara/feat-speaker-reassign

2025-12-20 20:29:06 +00:00 · 2023-12-19 13:26:05 +01:00
parent 5d47c5d968 fd255361d5
commit 7ebeaf0eb9
41 changed files with 3018 additions and 210 deletions
--- a/www/.env_template
+++ b/www/.env_template
@@ -1,5 +1,2 @@
-FIEF_URL=https://auth.reflector-ui.dev/reflector-local
-FIEF_CLIENT_ID=s03<omitted>
-FIEF_CLIENT_SECRET=<omitted>
-
-EDGE_CONFIG=<omitted>
+FIEF_CLIENT_SECRET=<omitted, ask in zulip>
+ZULIP_API_KEY=<omitted, ask in zulip>
--- a/www/.gitignore
+++ b/www/.gitignore
@@ -39,3 +39,5 @@ next-env.d.ts

 # Sentry Auth Token
 .sentryclirc
+
+config.ts
--- a/www/app/[domain]/domainContext.tsx
+++ b/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;
 };

--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
@@ -12,9 +12,11 @@ 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 { featureEnabled } from "../../domainContext";

 type TranscriptDetails = {
  params: {
@@ -31,6 +33,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"];
@@ -66,6 +69,14 @@ 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
@@ -102,6 +113,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                fullTranscript={fullTranscript}
                summary={transcript.response.longSummary}
                transcriptId={transcript.response.id}
+                openZulipModal={() => setShowModal(true)}
              />
            ) : (
              <div className="flex flex-col h-full justify-center content-center">
--- a/www/app/[domain]/transcripts/[transcriptId]/shareModal.tsx
+++ b/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;
--- a/www/app/[domain]/transcripts/finalSummary.tsx
+++ b/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>
            </>
          )}
--- a/www/app/api/apis/DefaultApi.ts
+++ b/www/app/api/apis/DefaultApi.ts
@@ -121,6 +121,11 @@ export interface V1TranscriptGetWebsocketEventsRequest {
  transcriptId: any;
 }

+export interface V1TranscriptHeadAudioMp3Request {
+  transcriptId: any;
+  token?: any;
+}
+
 export interface V1TranscriptMergeSpeakerRequest {
  transcriptId: any;
  speakerMerge: SpeakerMerge;
@@ -1064,6 +1069,73 @@ export class DefaultApi extends runtime.BaseAPI {
    return await response.value();
  }

+  /**
+   * Transcript Get Audio Mp3
+   */
+  async v1TranscriptHeadAudioMp3Raw(
+    requestParameters: V1TranscriptHeadAudioMp3Request,
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<runtime.ApiResponse<any>> {
+    if (
+      requestParameters.transcriptId === null ||
+      requestParameters.transcriptId === undefined
+    ) {
+      throw new runtime.RequiredError(
+        "transcriptId",
+        "Required parameter requestParameters.transcriptId was null or undefined when calling v1TranscriptHeadAudioMp3.",
+      );
+    }
+
+    const queryParameters: any = {};
+
+    if (requestParameters.token !== undefined) {
+      queryParameters["token"] = requestParameters.token;
+    }
+
+    const headerParameters: runtime.HTTPHeaders = {};
+
+    if (this.configuration && this.configuration.accessToken) {
+      // oauth required
+      headerParameters["Authorization"] = await this.configuration.accessToken(
+        "OAuth2AuthorizationCodeBearer",
+        [],
+      );
+    }
+
+    const response = await this.request(
+      {
+        path: `/v1/transcripts/{transcript_id}/audio/mp3`.replace(
+          `{${"transcript_id"}}`,
+          encodeURIComponent(String(requestParameters.transcriptId)),
+        ),
+        method: "HEAD",
+        headers: headerParameters,
+        query: queryParameters,
+      },
+      initOverrides,
+    );
+
+    if (this.isJsonMime(response.headers.get("content-type"))) {
+      return new runtime.JSONApiResponse<any>(response);
+    } else {
+      return new runtime.TextApiResponse(response) as any;
+    }
+  }
+
+  /**
+   * Transcript Get Audio Mp3
+   */
+  async v1TranscriptHeadAudioMp3(
+    requestParameters: V1TranscriptHeadAudioMp3Request,
+    initOverrides?: RequestInit | runtime.InitOverrideFunction,
+  ): Promise<any> {
+    const response = await this.v1TranscriptHeadAudioMp3Raw(
+      requestParameters,
+      initOverrides,
+    );
+    return await response.value();
+  }
+
  /**
   * Transcript Merge Speaker
   */
--- a/www/app/lib/edgeConfig.ts
+++ b/www/app/lib/edgeConfig.ts
@@ -1,25 +1,19 @@
 import { get } from "@vercel/edge-config";
 import { isDevelopment } from "./utils";

-const localConfig = {
-  features: {
-    requireLogin: true,
-    privacy: true,
-    browse: true,
-  },
-  api_url: "http://127.0.0.1:1250",
-  websocket_url: "ws://127.0.0.1:1250",
-  auth_callback_url: "http://localhost:3000/auth-callback",
-};
-
 type EdgeConfig = {
  [domainWithDash: string]: {
    features: {
-      [featureName in "requireLogin" | "privacy" | "browse"]: boolean;
+      [featureName in
+        | "requireLogin"
+        | "privacy"
+        | "browse"
+        | "sendToZulip"]: boolean;
    };
    auth_callback_url: string;
    websocket_url: string;
    api_url: string;
+    zulip_streams: string;
  };
 };

@@ -36,8 +30,8 @@ export function edgeDomainToKey(domain: string) {

 // get edge config server-side (prefer DomainContext when available), domain is the hostname
 export async function getConfig(domain: string) {
-  if (isDevelopment()) {
-    return localConfig;
+  if (process.env.NEXT_PUBLIC_ENV === "development") {
+    return require("../../config").localConfig;
  }

  let config = await get(edgeDomainToKey(domain));
--- a/www/app/lib/utils.ts
+++ b/www/app/lib/utils.ts
@@ -98,26 +98,41 @@ export function murmurhash3_32_gc(key: string, seed: number = 0) {

 export const generateHighContrastColor = (
  name: string,
-  backgroundColor: [number, number, number] | null = null,
+  backgroundColor: [number, number, number],
 ) => {
-  const hash = murmurhash3_32_gc(name);
-  let red = (hash & 0xff0000) >> 16;
-  let green = (hash & 0x00ff00) >> 8;
-  let blue = hash & 0x0000ff;
+  let loopNumber = 0;
+  let minAcceptedContrast = 3.5;
+  while (true && /* Just as a safeguard */ loopNumber < 100) {
+    ++loopNumber;

-  const getCssColor = (red: number, green: number, blue: number) =>
-    `rgb(${red}, ${green}, ${blue})`;
+    if (loopNumber > 5) minAcceptedContrast -= 0.5;

-  if (!backgroundColor) return getCssColor(red, green, blue);
+    const hash = murmurhash3_32_gc(name + loopNumber);
+    let red = (hash & 0xff0000) >> 16;
+    let green = (hash & 0x00ff00) >> 8;
+    let blue = hash & 0x0000ff;

-  const contrast = getContrastRatio([red, green, blue], backgroundColor);
+    let contrast = getContrastRatio([red, green, blue], backgroundColor);

-  // Adjust the color to achieve better contrast if necessary (WCAG recommends at least 4.5:1 for text)
-  if (contrast < 4.5) {
+    if (contrast > minAcceptedContrast) return `rgb(${red}, ${green}, ${blue})`;
+
+    // Try to invert the color to increase contrat - this works best the more away the color is from gray
    red = Math.abs(255 - red);
    green = Math.abs(255 - green);
    blue = Math.abs(255 - blue);
-  }

-  return getCssColor(red, green, blue);
+    contrast = getContrastRatio([red, green, blue], backgroundColor);
+
+    if (contrast > minAcceptedContrast) return `rgb(${red}, ${green}, ${blue})`;
+  }
 };
+
+export function extractDomain(url) {
+  try {
+    const parsedUrl = new URL(url);
+    return parsedUrl.host;
+  } catch (error) {
+    console.error("Invalid URL:", error.message);
+    return null;
+  }
+}
--- a/www/app/lib/zulip.ts
+++ b/www/app/lib/zulip.ts
@@ -0,0 +1,80 @@
+import { GetTranscript, GetTranscriptTopic } from "../api";
+import { formatTime } from "./time";
+import { extractDomain } from "./utils";
+
+export async function sendZulipMessage(
+  stream: string,
+  topic: string,
+  message: string,
+) {
+  console.log("Sendiing zulip message", stream, topic);
+  try {
+    const response = await fetch("/api/send-zulip-message", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ stream, topic, message }),
+    });
+    return await response.json();
+  } catch (error) {
+    console.error("Error:", error);
+    throw error;
+  }
+}
+
+export const ZULIP_MSG_MAX_LENGTH = 10000;
+
+export function getZulipMessage(
+  transcript: GetTranscript,
+  topics: GetTranscriptTopic[] | null,
+  includeTopics: boolean,
+) {
+  const date = new Date(transcript.createdAt);
+
+  // Get the timezone offset in minutes and convert it to hours and minutes
+  const timezoneOffset = -date.getTimezoneOffset();
+  const offsetHours = String(
+    Math.floor(Math.abs(timezoneOffset) / 60),
+  ).padStart(2, "0");
+  const offsetMinutes = String(Math.abs(timezoneOffset) % 60).padStart(2, "0");
+  const offsetSign = timezoneOffset >= 0 ? "+" : "-";
+
+  // Combine to get the formatted timezone offset
+  const formattedOffset = `${offsetSign}${offsetHours}:${offsetMinutes}`;
+
+  // Now you can format your date and time string using this offset
+  const formattedDate = date.toISOString().slice(0, 10);
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+
+  const dateTimeString = `${formattedDate}T${hours}:${minutes}:${seconds}${formattedOffset}`;
+
+  const domain = window.location.origin; // Gives you "http://localhost:3000" or your deployment base URL
+  const link = `${domain}/transcripts/${transcript.id}`;
+
+  let headerText = `# Reflector – ${transcript.title ?? "Unnamed recording"}
+
+**Date**: <time:${dateTimeString}>
+**Link**: [${extractDomain(link)}](${link})
+**Duration**: ${formatTime(transcript.duration)}
+
+`;
+  let topicText = "";
+
+  if (topics && includeTopics) {
+    topicText = "```spoiler Topics\n";
+    topics.forEach((topic) => {
+      topicText += `1. [${formatTime(topic.timestamp)}] ${topic.title}\n`;
+    });
+    topicText += "```\n\n";
+  }
+
+  let summary = "```spoiler Summary\n";
+  summary += transcript.longSummary;
+  summary += "```\n\n";
+
+  const message = headerText + summary + topicText + "-----\n";
+  return message;
+}
--- a/www/config-template.ts
+++ b/www/config-template.ts
@@ -0,0 +1,12 @@
+export const localConfig = {
+  features: {
+    requireLogin: true,
+    privacy: true,
+    browse: true,
+    sendToZulip: true,
+  },
+  api_url: "http://127.0.0.1:1250",
+  websocket_url: "ws://127.0.0.1:1250",
+  auth_callback_url: "http://localhost:3000/auth-callback",
+  zulip_streams: "", // Find the value on zulip
+};
--- a/www/package.json
+++ b/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",
--- a/www/pages/api/send-zulip-message.ts
+++ b/www/pages/api/send-zulip-message.ts
@@ -0,0 +1,52 @@
+import axios from "axios";
+import { URLSearchParams } from "url";
+import { getConfig } from "../../app/lib/edgeConfig";
+
+export default async function handler(req, res) {
+  const domainName = req.headers.host;
+  const config = await getConfig(domainName);
+  const { requireLogin, privacy, browse, sendToZulip } = config.features;
+
+  if (req.method === "POST") {
+    const { stream, topic, message } = req.body;
+
+    if (!stream || !topic || !message) {
+      return res.status(400).json({ error: "Missing required parameters" });
+    }
+
+    if (!sendToZulip) {
+      return res.status(403).json({ error: "Zulip integration disabled" });
+    }
+
+    try {
+      // Construct URL-encoded data
+      const params = new URLSearchParams();
+      params.append("type", "stream");
+      params.append("to", stream);
+      params.append("topic", topic);
+      params.append("content", message);
+
+      // Send the request1
+      const zulipResponse = await axios.post(
+        `https://${process.env.ZULIP_REALM}/api/v1/messages`,
+        params,
+        {
+          auth: {
+            username: process.env.ZULIP_BOT_EMAIL || "?",
+            password: process.env.ZULIP_API_KEY || "?",
+          },
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+          },
+        },
+      );
+
+      return res.status(200).json(zulipResponse.data);
+    } catch (error) {
+      return res.status(500).json({ failed: true, error: error });
+    }
+  } else {
+    res.setHeader("Allow", ["POST"]);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
--- a/www/yarn.lock
+++ b/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"