add transcripts from stt agent

Caddyfile

@@ -0,0 +1,16 @@
+https://open.sphinx.chat/open {
+    log {
+        output stdout
+        format json
+        level DEBUG
+    }
+
+    handle {
+        redir "{query.red}" 302
+    }
+}
+
+https://chat.sphinx.chat:443 {
+    reverse_proxy http://livekit.sphinx:3000
+}
+

README.md

@@ -1,3 +1,7 @@
+### fork
+
+code on `develop` branch
+
 <a href="https://livekit.io/">
   <img src="./.github/assets/livekit-mark.png" alt="LiveKit logo" width="100" height="100">
 </a>

app/rooms/[roomName]/PageClientImpl.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
 import { decodePassphrase } from '@/lib/client-utils';
 import { ConnectionDetails } from '@/lib/types';
 import {
@@ -17,11 +17,14 @@ import {
   Room,
   DeviceUnsupportedError,
   RoomConnectOptions,
+  RoomEvent,
+  TranscriptionSegment,
 } from 'livekit-client';
 import { useRouter } from 'next/navigation';
 import '../../../styles/PageClientImpl.css';
 import { CustomVideoLayoutContextProvider } from '@/app/custom/layout/LayoutContextProvider';
 import CustomVideoLayout from '@/app/custom/layout/CustomVideoLayout';
+import Transcript from '@/lib/Transcript';
 
 const CONN_DETAILS_ENDPOINT =
   process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details';
@@ -166,6 +169,27 @@ function VideoConferenceComponent(props: {
   const router = useRouter();
   const handleOnLeave = () => router.push('/');
 
+  const [latestText, setLatestText] = useState('');
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!room) return;
+
+    const updateTranscriptions = (segments: TranscriptionSegment[]) => {
+      if (segments.length > 0) {
+        setLatestText(segments[0].text);
+        if (hideTimer.current) clearTimeout(hideTimer.current);
+        hideTimer.current = setTimeout(() => setLatestText(''), 4400);
+      }
+    };
+
+    room.on(RoomEvent.TranscriptionReceived, updateTranscriptions);
+    return () => {
+      room.off(RoomEvent.TranscriptionReceived, updateTranscriptions);
+      if (hideTimer.current) clearTimeout(hideTimer.current);
+    };
+  }, [room]);
+
   if (!isClient) return null;
 
   return (
@@ -182,6 +206,7 @@ function VideoConferenceComponent(props: {
         <CustomVideoLayout />
         <RoomAudioRenderer />
       </CustomVideoLayoutContextProvider>
+      <Transcript latestText={latestText} />
     </LiveKitRoom>
   );
 }

package.json

@@ -14,7 +14,7 @@
     "@livekit/components-react": "2.6.0",
     "@livekit/components-styles": "1.1.2",
     "@livekit/krisp-noise-filter": "^0.2.8",
-    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-toast": "^1.2.15",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "livekit-client": "^2.8.1",

prod.yaml

@@ -3,14 +3,17 @@ services:
     image: caddy:2.8.4-alpine
     restart: unless-stopped
     container_name: caddy.sphinx
-    command: caddy reverse-proxy --from https://$DOMAIN:443 --to http://livekit.sphinx:3000
+    # command: caddy reverse-proxy --from https://$DOMAIN:443 --to http://livekit.sphinx:3000
     ports:
       - 80:80
       - 443:443
     volumes:
       - caddy:/data
+      - ./Caddyfile:/etc/caddy/Caddyfile
     depends_on:
       - livekit
+    environment:
+      - DOMAIN=$DOMAIN
 
   livekit:
     image: sphinxlightning/sphinx-livekit:latest

styles/Transcript.module.css

@@ -10,4 +10,5 @@
   color: white;
   text-align: center;
   margin: 16px;
+  font-size: 0.9em;
 }