@aj-archipelago/cortex 1.3.5 → 1.3.7

package/helper-apps/cortex-realtime-voice-server/client/src/chat/components/ImageOverlay.tsx

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const FADE_DURATION = 300; // milliseconds
+const DISPLAY_DURATION = 10000; // milliseconds (10 seconds)
+
+type ImageOverlayProps = {
+  imageUrls: string[];
+  onComplete?: () => void;
+  isAudioPlaying?: boolean;
+};
+
+export function ImageOverlay({ imageUrls, onComplete, isAudioPlaying = false }: ImageOverlayProps) {
+  const [currentIndex, setCurrentIndex] = useState(-1);
+  const [shownImages, setShownImages] = useState<Set<string>>(new Set());
+  const [isVisible, setIsVisible] = useState(false);
+  const [showControls, setShowControls] = useState(false);
+  const previousAudioPlaying = useRef(isAudioPlaying);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const displayStartTimeRef = useRef<number | null>(null);
+  
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  // Start display timer when image becomes visible
+  useEffect(() => {
+    if (isVisible && currentIndex >= 0) {
+      displayStartTimeRef.current = Date.now();
+    }
+  }, [isVisible, currentIndex]);
+
+  // Handle image transitions when audio stops and minimum time has passed
+  useEffect(() => {
+    if (previousAudioPlaying.current && !isAudioPlaying && currentIndex >= 0) {
+      const timeElapsed = displayStartTimeRef.current ? Date.now() - displayStartTimeRef.current : 0;
+      const remainingTime = Math.max(0, DISPLAY_DURATION - timeElapsed);
+
+      clearTimer();
+      
+      if (remainingTime > 0) {
+        // If minimum display time hasn't elapsed, wait for the remaining time
+        timerRef.current = setTimeout(() => {
+          const currentUrl = imageUrls[currentIndex];
+          setIsVisible(false);
+          setTimeout(() => {
+            setShownImages(prev => new Set(Array.from(prev).concat([currentUrl])));
+            setCurrentIndex(-1);
+          }, FADE_DURATION);
+        }, remainingTime);
+      } else {
+        // If minimum time has elapsed, start fade immediately
+        const currentUrl = imageUrls[currentIndex];
+        setIsVisible(false);
+        setTimeout(() => {
+          setShownImages(prev => new Set(Array.from(prev).concat([currentUrl])));
+          setCurrentIndex(-1);
+        }, FADE_DURATION);
+      }
+    }
+    previousAudioPlaying.current = isAudioPlaying;
+  }, [isAudioPlaying, currentIndex, imageUrls, clearTimer]);
+
+  // Start timer when new image is shown
+  useEffect(() => {
+    if (currentIndex >= 0 && !isAudioPlaying) {
+      clearTimer();
+      timerRef.current = setTimeout(() => {
+        const currentUrl = imageUrls[currentIndex];
+        setIsVisible(false);
+        setTimeout(() => {
+          setShownImages(prev => new Set(Array.from(prev).concat([currentUrl])));
+          setCurrentIndex(-1);
+        }, FADE_DURATION);
+      }, DISPLAY_DURATION);
+
+      return () => clearTimer();
+    }
+  }, [currentIndex, imageUrls, isAudioPlaying, clearTimer]);
+
+  // Handle image transitions
+  useEffect(() => {
+    if (currentIndex === -1) {
+      const nextIndex = imageUrls.findIndex(url => !shownImages.has(url));
+      if (nextIndex !== -1) {
+        setCurrentIndex(nextIndex);
+        setIsVisible(true);
+      } else if (shownImages.size > 0) {
+        onComplete?.();
+      }
+    }
+  }, [imageUrls, shownImages, currentIndex, onComplete]);
+
+  const handleImageSelect = (index: number) => {
+    clearTimer();
+    displayStartTimeRef.current = Date.now();
+    setCurrentIndex(index);
+    // Start with image invisible for manual selection too
+    setIsVisible(false);
+    setTimeout(() => setIsVisible(true), 50);
+  };
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => clearTimer();
+  }, [clearTimer]);
+
+  if (!imageUrls.length) {
+    return null;
+  }
+
+  return (
+    <div 
+      className="absolute inset-0 flex items-center justify-center"
+      onMouseEnter={() => {
+        setShowControls(true);
+      }}
+      onMouseLeave={() => {
+        setShowControls(false);
+      }}
+    >
+      {currentIndex !== -1 && (
+        <img
+          src={imageUrls[currentIndex]}
+          alt="Generated content"
+          style={{ 
+            opacity: isVisible ? 1 : 0,
+            transition: 'opacity 500ms ease-in-out'
+          }}
+          className="max-w-full max-h-full object-contain"
+        />
+      )}
+      
+      {/* Image selection controls */}
+      <div 
+        className={`absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 p-2 bg-black/50 rounded-full transition-opacity duration-200 ${
+          showControls ? 'opacity-100' : 'opacity-0'
+        }`}
+      >
+        <button
+          onClick={() => {
+            clearTimer();
+            setCurrentIndex(-1);
+            setIsVisible(false);
+          }}
+          className={`w-3 h-3 rounded-full transition-all ${
+            currentIndex === -1 ? 'bg-white scale-110' : 'bg-white/50 hover:bg-white/75'
+          }`}
+          title="Hide all images"
+        />
+        {imageUrls.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => handleImageSelect(index)}
+            className={`w-3 h-3 rounded-full transition-all ${
+              currentIndex === index ? 'bg-white scale-110' : 'bg-white/50 hover:bg-white/75'
+            }`}
+            title={`Show image ${index + 1}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+} 

package/helper-apps/cortex-realtime-voice-server/client/src/chat/components/MicrophoneVisualizer.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+
+type MicrophoneVisualizerProps = {
+  audioContext: AudioContext | null;
+  sourceNode: MediaStreamAudioSourceNode | null;
+  size?: 'small' | 'large';
+};
+
+export const MicrophoneVisualizer = ({ 
+  audioContext, 
+  sourceNode,
+  size = 'large' 
+}: MicrophoneVisualizerProps) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const analyzerRef = useRef<AnalyserNode | null>(null);
+  const animationRef = useRef<number>();
+
+  const dimensions = size === 'small' ? 48 : 64;
+  const ringRadius = size === 'small' ? 21 : 28;
+
+  useEffect(() => {
+    if (!audioContext || !sourceNode || !canvasRef.current) return;
+
+    const analyzer = audioContext.createAnalyser();
+    analyzerRef.current = analyzer;
+    
+    analyzer.fftSize = 256;
+    analyzer.smoothingTimeConstant = 0.7;
+    
+    sourceNode.connect(analyzer);
+
+    const draw = () => {
+      const canvas = canvasRef.current;
+      if (!canvas || !analyzer) return;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      const bufferLength = analyzer.frequencyBinCount;
+      const dataArray = new Uint8Array(bufferLength);
+      analyzer.getByteFrequencyData(dataArray);
+
+      // Calculate average volume
+      const average = dataArray.reduce((a, b) => a + b) / bufferLength;
+      const normalizedVolume = Math.min(average / 128, 1);
+
+      // Clear canvas
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Draw background ring
+      ctx.beginPath();
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+      ctx.lineWidth = size === 'small' ? 3 : 4;
+      ctx.arc(canvas.width / 2, canvas.height / 2, ringRadius, 0, Math.PI * 2);
+      ctx.stroke();
+
+      // Draw volume indicator with increased brightness
+      ctx.beginPath();
+      ctx.strokeStyle = `hsla(${210 + normalizedVolume * 30}, 100%, 90%, 1.0)`;
+      ctx.lineWidth = size === 'small' ? 3 : 4;
+      ctx.arc(canvas.width / 2, canvas.height / 2, ringRadius, 0, Math.PI * 2 * normalizedVolume);
+      ctx.stroke();
+
+      // Subtle glow effect
+      ctx.shadowBlur = 10;
+      ctx.shadowColor = `hsla(${210 + normalizedVolume * 30}, 100%, 70%, ${0.6})`;
+
+      // Simpler second pass
+      ctx.beginPath();
+      ctx.strokeStyle = `hsla(${210 + normalizedVolume * 30}, 100%, 95%, ${0.4 + normalizedVolume * 0.4})`;
+      ctx.lineWidth = 2;
+      ctx.arc(canvas.width / 2, canvas.height / 2, ringRadius + 1, 0, Math.PI * 2 * normalizedVolume);
+      ctx.stroke();
+
+      animationRef.current = requestAnimationFrame(draw);
+    };
+
+    draw();
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [audioContext, sourceNode, size, ringRadius]);
+
+  return (
+    <canvas 
+      ref={canvasRef} 
+      width={dimensions} 
+      height={dimensions} 
+      className={size === 'small' ? 'w-12 h-12' : 'w-16 h-16'}
+    />
+  );
+}; 

package/helper-apps/cortex-realtime-voice-server/client/src/chat/components/ScreenshotCapture.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { Socket } from 'socket.io-client';
+import { ClientToServerEvents, ServerToClientEvents } from '../../../../src/realtime/socket';
+import { logger } from '../../utils/logger';
+
+type ScreenshotCaptureProps = {
+  socket: Socket<ServerToClientEvents, ClientToServerEvents>;
+};
+
+export const ScreenshotCapture = ({ socket }: ScreenshotCaptureProps) => {
+  const activeStreamRef = useRef<MediaStream | null>(null);
+
+  const startScreenCapture = useCallback(async () => {
+    logger.log('Starting screen capture...');
+    try {
+      // Request screen capture with friendly message and whole screen preference
+      logger.log('Requesting display media...');
+      const stream = await navigator.mediaDevices.getDisplayMedia({ 
+        video: { 
+          frameRate: 1,
+          displaySurface: 'monitor', // Prefer whole screen
+          cursor: 'never' // Don't need cursor
+        } as MediaTrackConstraints
+      });
+      
+      // Store the stream reference
+      activeStreamRef.current = stream;
+
+      // Handle stream ending (user clicks "Stop Sharing")
+      stream.getVideoTracks()[0].onended = () => {
+        logger.log('Screen sharing stopped by user');
+        activeStreamRef.current = null;
+      };
+
+      return stream;
+    } catch (error) {
+      logger.error('Error starting screen capture:', error);
+      activeStreamRef.current = null;
+      throw error;
+    }
+  }, []);
+
+  const captureFrame = useCallback(async (stream: MediaStream) => {
+    logger.log('Capturing frame from stream...');
+    const track = stream.getVideoTracks()[0];
+    
+    // Create video element to capture frame
+    const video = document.createElement('video');
+    video.srcObject = stream;
+    
+    // Wait for video to load
+    await new Promise<void>((resolve) => {
+      video.onloadedmetadata = () => {
+        logger.log('Video metadata loaded, playing...');
+        video.play();
+        resolve();
+      };
+    });
+    
+    // Create canvas and draw video frame
+    const canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext('2d');
+    
+    if (!ctx) {
+      throw new Error('Could not get canvas context');
+    }
+    
+    // Draw the video frame
+    ctx.drawImage(video, 0, 0);
+    
+    // Convert to base64
+    const imageData = canvas.toDataURL('image/png');
+    
+    // Clean up
+    video.remove();
+    canvas.remove();
+    
+    return imageData;
+  }, []);
+
+  const handleScreenshotRequest = useCallback(async () => {
+    try {
+      // Use existing stream or request new one
+      const stream = activeStreamRef.current || await startScreenCapture();
+      
+      // Capture frame from stream
+      const imageData = await captureFrame(stream);
+      
+      logger.log('Sending screenshot data to server...');
+      socket.emit('screenshotCaptured', imageData);
+      
+    } catch (error) {
+      logger.error('Error handling screenshot request:', error);
+      socket.emit('screenshotError', error instanceof Error ? error.message : 'Failed to capture screenshot');
+    }
+  }, [socket, startScreenCapture, captureFrame]);
+
+  useEffect(() => {
+    logger.log('Setting up screenshot request listener');
+    socket.on('requestScreenshot', handleScreenshotRequest);
+
+    return () => {
+      logger.log('Cleaning up screenshot request listener');
+      socket.off('requestScreenshot');
+      // Clean up stream if component unmounts
+      if (activeStreamRef.current) {
+        activeStreamRef.current.getTracks().forEach(track => track.stop());
+        activeStreamRef.current = null;
+      }
+    };
+  }, [socket, handleScreenshotRequest]);
+
+  return null; // This is a non-visual component
+}; 

package/helper-apps/cortex-realtime-voice-server/client/src/chat/hooks/useWindowResize.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+export const useWindowResize = () => {
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return size;
+};

package/helper-apps/cortex-realtime-voice-server/client/src/chat/utils/audio.ts

@@ -0,0 +1,33 @@
+export function arrayBufferToBase64(
+  arrayBuffer: ArrayBuffer | Int16Array,
+): string {
+  let buffer: ArrayBuffer;
+  if (arrayBuffer instanceof ArrayBuffer) {
+    buffer = arrayBuffer;
+  } else {
+    buffer = arrayBuffer.buffer as ArrayBuffer;
+  }
+
+  const bytes = new Uint8Array(buffer);
+  const chunkSize = 0x80_00; // 32KB chunk size
+  let binary = '';
+
+  for (let i = 0; i < bytes.length; i += chunkSize) {
+    const chunk = bytes.subarray(i, i + chunkSize);
+    binary += String.fromCharCode.apply(null, chunk as any);
+  }
+
+  return btoa(binary);
+}
+
+export function base64ToArrayBuffer(base64: string): ArrayBuffer {
+  const binaryString = atob(base64)
+  const len = binaryString.length
+  const bytes = new Uint8Array(len)
+
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i)
+  }
+
+  return bytes.buffer as ArrayBuffer;
+}

package/helper-apps/cortex-realtime-voice-server/client/src/index.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body {
+  background: rgb(17, 24, 39); /* matches from-gray-900 */
+  min-height: 100%;
+  overscroll-behavior: none; /* prevents bounce on some browsers */
+}
+
+/* For Safari/iOS */
+@supports (-webkit-overflow-scrolling: touch) {
+  body {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}

package/helper-apps/cortex-realtime-voice-server/client/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/helper-apps/cortex-realtime-voice-server/client/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

package/helper-apps/cortex-realtime-voice-server/client/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/helper-apps/cortex-realtime-voice-server/client/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/helper-apps/cortex-realtime-voice-server/client/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/helper-apps/cortex-realtime-voice-server/client/src/utils/logger.ts

@@ -0,0 +1,45 @@
+// Logger utility for centralized logging control
+
+// Environment-based logging control
+const isProduction = process.env.NODE_ENV === 'production';
+let isLoggingEnabled = !isProduction;
+
+export const logger = {
+  enable: () => {
+    isLoggingEnabled = true;
+  },
+  
+  disable: () => {
+    isLoggingEnabled = false;
+  },
+
+  log: (...args: any[]) => {
+    if (isLoggingEnabled) {
+      console.log(...args);
+    }
+  },
+
+  // Additional logging levels if needed
+  debug: (...args: any[]) => {
+    if (isLoggingEnabled) {
+      console.debug(...args);
+    }
+  },
+
+  error: (...args: any[]) => {
+    // Always log errors, even in production
+    console.error(...args);
+  },
+
+  warn: (...args: any[]) => {
+    if (isLoggingEnabled) {
+      console.warn(...args);
+    }
+  },
+
+  info: (...args: any[]) => {
+    if (isLoggingEnabled) {
+      console.info(...args);
+    }
+  }
+}; 

package/helper-apps/cortex-realtime-voice-server/client/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}
+

package/helper-apps/cortex-realtime-voice-server/client/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/helper-apps/cortex-realtime-voice-server/client/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    watch: {
+      usePolling: true
+    },
+    host: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8081',
+        changeOrigin: true
+      },
+      '/socket.io': {
+        target: 'http://localhost:8081',
+        ws: true
+      }
+    }
+  }
+}) 

package/helper-apps/cortex-realtime-voice-server/index.ts

@@ -0,0 +1,19 @@
+import {SocketServer} from './src/SocketServer';
+import {ApiServer} from "./src/ApiServer";
+
+const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
+const CORS_HOSTS = process.env.CORS_HOSTS ? JSON.parse(process.env.CORS_HOSTS) : 'http://localhost:5173';
+const PORT = process.env.PORT ? parseInt(process.env.PORT) : 8081;
+
+if (!OPENAI_API_KEY) {
+  console.error(
+    `Environment variable "OPENAI_API_KEY" is required.\n` +
+    `Please set it in your .env file.`
+  );
+  process.exit(1);
+}
+
+const apiServer = new ApiServer(OPENAI_API_KEY, CORS_HOSTS);
+apiServer.initServer();
+const server = new SocketServer(OPENAI_API_KEY, CORS_HOSTS);
+server.listen(apiServer.getServer(), PORT);

package/helper-apps/cortex-realtime-voice-server/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "cortex-realtime-voice",
+  "module": "index.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"cd client && bun run dev\" \"bun --watch run index.ts\"",
+    "dev:server": "bun --watch run index.ts",
+    "dev:client": "cd client && bun run dev",
+    "start": "bun run index.ts",
+    "start:test": "NODE_ENV=test bun run index.ts",
+    "start:prod": "NODE_ENV=production bun run index.ts"
+  },
+  "dependencies": {
+    "@hono/node-server": "1.13.7",
+    "@paralleldrive/cuid2": "2.2.2",
+    "hono": "4.6.13",
+    "socket.io": "4.8.1"
+  },
+  "devDependencies": {
+    "@types/bun": "1.1.14",
+    "@types/node": "22.10.1",
+    "bun-types": "^1.1.38",
+    "concurrently": "^8.2.2"
+  },
+  "peerDependencies": {
+    "typescript": "5.7.2"
+  }
+}