@admin-layout/tailwind-ui 12.2.4-alpha.9 → 12.2.4-alpha.98

package/lib/components/AIToolbar/components/speech/audio-visualizer.js

@@ -0,0 +1,194 @@
+import {jsx}from'react/jsx-runtime';import {useRef,useEffect}from'react';// Configuration constants for the audio analyzer
+const AUDIO_CONFIG = {
+  FFT_SIZE: 512,
+  SMOOTHING: 0.8,
+  MIN_BAR_HEIGHT: 2,
+  MIN_BAR_WIDTH: 2,
+  BAR_SPACING: 4,
+  COLOR: {
+    MIN_INTENSITY: 100,
+    // Minimum gray value (darker)
+    MAX_INTENSITY: 255,
+    // Maximum gray value (brighter)
+    INTENSITY_RANGE: 155 // MAX_INTENSITY - MIN_INTENSITY
+  }
+};
+function AudioVisualizer({
+  stream,
+  isRecording
+}) {
+  // Refs for managing audio context and animation
+  const canvasRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const analyserRef = useRef(null);
+  const animationFrameRef = useRef(0);
+  const containerRef = useRef(null);
+  const oscillatorsRef = useRef([]);
+  const gainNodesRef = useRef([]);
+  // Cleanup function to stop visualization and close audio context
+  const cleanup = () => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+    // Stop all oscillators
+    oscillatorsRef.current.forEach(osc => {
+      try {
+        osc.stop();
+      } catch {
+        // Oscillator may already be stopped
+      }
+    });
+    oscillatorsRef.current = [];
+    gainNodesRef.current = [];
+    if (audioContextRef.current) {
+      audioContextRef.current.close();
+      audioContextRef.current = null;
+    }
+  };
+  // Cleanup on unmount
+  useEffect(() => {
+    return cleanup;
+  }, []);
+  // Start or stop visualization based on recording state
+  useEffect(() => {
+    if (isRecording) {
+      startVisualization();
+    } else {
+      cleanup();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stream, isRecording]);
+  // Handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (canvasRef.current && containerRef.current) {
+        const container = containerRef.current;
+        const canvas = canvasRef.current;
+        const dpr = window.devicePixelRatio || 1;
+        // Set canvas size based on container and device pixel ratio
+        const rect = container.getBoundingClientRect();
+        // Account for the 2px total margin (1px on each side)
+        canvas.width = (rect.width - 2) * dpr;
+        canvas.height = (rect.height - 2) * dpr;
+        // Scale canvas CSS size to match container minus margins
+        canvas.style.width = `${rect.width - 2}px`;
+        canvas.style.height = `${rect.height - 2}px`;
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    // Initial setup
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  // Create a fake audio stream using oscillators that mimic speech patterns
+  const createFakeStream = (audioContext, analyser) => {
+    // Create multiple oscillators with different frequencies to simulate speech
+    const frequencies = [120, 240, 350, 500, 800, 1200, 2000, 3500];
+    const oscillators = [];
+    const gainNodes = [];
+    frequencies.forEach((freq, index) => {
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+      // Use different wave types for variety
+      oscillator.type = index % 2 === 0 ? 'sine' : 'triangle';
+      oscillator.frequency.setValueAtTime(freq, audioContext.currentTime);
+      // Set initial gain (very low to simulate quiet speech)
+      gainNode.gain.setValueAtTime(0.01, audioContext.currentTime);
+      oscillator.connect(gainNode);
+      gainNode.connect(analyser);
+      oscillator.start();
+      oscillators.push(oscillator);
+      gainNodes.push(gainNode);
+    });
+    oscillatorsRef.current = oscillators;
+    gainNodesRef.current = gainNodes;
+    // Animate the gain to simulate speech patterns
+    const animateGain = () => {
+      if (!isRecording || !audioContextRef.current) return;
+      gainNodes.forEach((gainNode, index) => {
+        // Create random fluctuations to simulate speech
+        const baseGain = 0.02 + Math.random() * 0.08;
+        const speechPattern = Math.sin(Date.now() / (200 + index * 50)) * 0.5 + 0.5;
+        const randomBurst = Math.random() > 0.7 ? Math.random() * 0.1 : 0;
+        const targetGain = baseGain * speechPattern + randomBurst;
+        gainNode.gain.linearRampToValueAtTime(targetGain, audioContextRef.current.currentTime + 0.05);
+      });
+      setTimeout(animateGain, 100);
+    };
+    animateGain();
+  };
+  // Initialize audio context and start visualization
+  const startVisualization = async () => {
+    try {
+      const audioContext = new AudioContext();
+      audioContextRef.current = audioContext;
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = AUDIO_CONFIG.FFT_SIZE;
+      analyser.smoothingTimeConstant = AUDIO_CONFIG.SMOOTHING;
+      analyserRef.current = analyser;
+      if (stream) {
+        // Use real stream if available
+        const source = audioContext.createMediaStreamSource(stream);
+        source.connect(analyser);
+      } else {
+        // Create fake stream for visualization
+        createFakeStream(audioContext, analyser);
+      }
+      draw();
+    } catch (error) {
+      console.error('Error starting visualization:', error);
+    }
+  };
+  // Calculate the color intensity based on bar height
+  const getBarColor = normalizedHeight => {
+    const intensity = Math.floor(normalizedHeight * AUDIO_CONFIG.COLOR.INTENSITY_RANGE) + AUDIO_CONFIG.COLOR.MIN_INTENSITY;
+    return `rgb(${intensity}, ${intensity}, ${intensity})`;
+  };
+  // Draw a single bar of the visualizer
+  const drawBar = (ctx, x, centerY, width, height, color) => {
+    ctx.fillStyle = color;
+    // Draw upper bar (above center)
+    ctx.fillRect(x, centerY - height, width, height);
+    // Draw lower bar (below center)
+    ctx.fillRect(x, centerY, width, height);
+  };
+  // Main drawing function
+  const draw = () => {
+    if (!isRecording) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx || !analyserRef.current) return;
+    const dpr = window.devicePixelRatio || 1;
+    ctx.scale(dpr, dpr);
+    const analyser = analyserRef.current;
+    const bufferLength = analyser.frequencyBinCount;
+    const frequencyData = new Uint8Array(bufferLength);
+    const drawFrame = () => {
+      animationFrameRef.current = requestAnimationFrame(drawFrame);
+      // Get current frequency data
+      analyser.getByteFrequencyData(frequencyData);
+      // Clear canvas - use CSS pixels for clearing
+      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+      // Calculate dimensions in CSS pixels
+      const barWidth = Math.max(AUDIO_CONFIG.MIN_BAR_WIDTH, canvas.width / dpr / bufferLength - AUDIO_CONFIG.BAR_SPACING);
+      const centerY = canvas.height / dpr / 2;
+      let x = 0;
+      // Draw each frequency bar
+      for (let i = 0; i < bufferLength; i++) {
+        const normalizedHeight = frequencyData[i] / 255; // Convert to 0-1 range
+        const barHeight = Math.max(AUDIO_CONFIG.MIN_BAR_HEIGHT, normalizedHeight * centerY);
+        drawBar(ctx, x, centerY, barWidth, barHeight, getBarColor(normalizedHeight));
+        x += barWidth + AUDIO_CONFIG.BAR_SPACING;
+      }
+    };
+    drawFrame();
+  };
+  return jsx("div", {
+    ref: containerRef,
+    className: "!h-[32px] !w-full pl-4 pt-2",
+    children: jsx("canvas", {
+      ref: canvasRef,
+      className: "h-full !w-full"
+    })
+  });
+}export{AudioVisualizer};//# sourceMappingURL=audio-visualizer.js.map

package/lib/components/AIToolbar/components/speech/audio-visualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-visualizer.js","sources":["../../../../../src/components/AIToolbar/components/speech/audio-visualizer.tsx"],"sourcesContent":[null],"names":[],"mappings":"yEAkBI;AACH,MAAA,YAAA,GAAA;AAED,EAAA,QAAA,EAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/AIToolbar/components/speech/floatArrayToWav.d.ts

@@ -0,0 +1,2 @@
+export declare const floatArrayToWav: (audioData: Float32Array, sampleRate?: number, format?: "wav" | "mp3" | "ogg") => Blob;
+//# sourceMappingURL=floatArrayToWav.d.ts.map

package/lib/components/AIToolbar/components/speech/floatArrayToWav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatArrayToWav.d.ts","sourceRoot":"","sources":["../../../../../src/components/AIToolbar/components/speech/floatArrayToWav.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GACxB,WAAW,YAAY,EACvB,aAAY,MAAc,EAC1B,SAAQ,KAAK,GAAG,KAAK,GAAG,KAAa,KACtC,IAiCF,CAAC"}

package/lib/components/AIToolbar/components/speech/floatArrayToWav.js

@@ -0,0 +1,32 @@
+const floatArrayToWav = (audioData, sampleRate = 16000, format = 'wav') => {
+  const buffer = new ArrayBuffer(44 + audioData.length * 2);
+  const view = new DataView(buffer);
+  const writeString = (offset, string) => {
+    for (let i = 0; i < string.length; i++) {
+      view.setUint8(offset + i, string.charCodeAt(i));
+    }
+  };
+  writeString(0, 'RIFF');
+  const dataSize = format === 'wav' ? 36 + audioData.length * 2 : 44 + audioData.length * 2;
+  view.setUint32(4, dataSize, true);
+  writeString(8, format === 'wav' ? 'WAVE' : 'FORM');
+  writeString(12, 'fmt ');
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, 1, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * 2, true);
+  view.setUint16(32, 2, true);
+  view.setUint16(34, 16, true);
+  writeString(36, 'data');
+  view.setUint32(40, audioData.length * 2, true);
+  let offset = 44;
+  for (let i = 0; i < audioData.length; i++) {
+    const sample = Math.max(-1, Math.min(1, audioData[i]));
+    view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7fff, true);
+    offset += 2;
+  }
+  return new Blob([buffer], {
+    type: `audio/${format}`
+  });
+};export{floatArrayToWav};//# sourceMappingURL=floatArrayToWav.js.map

package/lib/components/AIToolbar/components/speech/floatArrayToWav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatArrayToWav.js","sources":["../../../../../src/components/AIToolbar/components/speech/floatArrayToWav.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAA,eAAa,GAAA,CAAA,SACT,EAAA,UAAW,GAAA,KAAA,QACX,GAAA,KAAY,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/AIToolbar/components/speech/index.d.ts

@@ -0,0 +1,4 @@
+import type { SystemAudioProps as SystemAudioPropsType } from '../types';
+export type SystemAudioProps = SystemAudioPropsType;
+export declare const SystemAudio: (props: SystemAudioProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/AIToolbar/components/speech/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/AIToolbar/components/speech/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGzE,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA2UlD,CAAC"}

package/lib/components/AIToolbar/components/speech/index.js

@@ -0,0 +1,276 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useEffect,useCallback}from'react';import'../../../../shardui/accordion.js';import'../../../../shardui/alert.js';import'../../../../shardui/alert-dialog.js';import'@radix-ui/react-aspect-ratio';import'../../../../shardui/avatar.js';import'../../../../shardui/badge.js';import'../../../../shardui/breadcrumb.js';import {Button}from'../../../../shardui/button.js';import'../../../../shardui/calendar.js';import'../../../../shardui/card.js';import'../../../../shardui/carousel.js';import'../../../../shardui/chart.js';import'../../../../shardui/checkbox.js';import'@radix-ui/react-collapsible';import'../../../../shardui/command.js';import'../../../../shardui/context-menu.js';import'../../../../shardui/dialog.js';import'../../../../shardui/drawer.js';import'../../../../shardui/dropdown-menu.js';import'../../../../shardui/form.js';import'../../../../shardui/hover-card.js';import'../../../../shardui/input.js';import'../../../../shardui/input-otp.js';import'../../../../shardui/label.js';import'../../../../shardui/menubar.js';import'../../../../shardui/navigation-menu.js';import'../../../../shardui/pagination.js';import {Popover,PopoverTrigger,PopoverContent}from'../../../../shardui/popover.js';import'../../../../shardui/progress.js';import'../../../../shardui/radio-group.js';import {LoaderIcon,CameraIcon,PlusIcon,XIcon,AlertCircleIcon,AudioLinesIcon,HeadphonesIcon}from'lucide-react';import'react-resizable-panels';import'../../../../utils/isBrowser/index.js';import {cn}from'../../../../utils/util.js';import'fast-deep-equal/react.js';import {ScrollArea}from'../../../../shardui/scroll-area.js';import'../../../../shardui/select.js';import'../../../../shardui/separator.js';import'../../../../shardui/sheet.js';import'../../../../shardui/sidebar.js';import'../../../../shardui/slider.js';import'../../../ThemeProvider/ThemeProvider.js';import'sonner';import'../../../../shardui/switch.js';import'../../../../shardui/table.js';import'../../../../shardui/tabs.js';import'../../../../shardui/textarea.js';import'../../../../shardui/toast.js';import'../../../../shardui/toggle.js';import'../../../../shardui/toggle-group.js';import'../../../../shardui/tooltip.js';import {ModeSwitcher}from'./ModeSwitcher.js';import {RecordingPanel}from'./RecordingPanel.js';import {SettingsPanel}from'./SettingsPanel.js';import {PermissionFlow}from'./PermissionFlow.js';import {QuickActions}from'./QuickActions.js';import {Warning}from'./Warning.js';const SystemAudio = props => {
+  const {
+    hasActiveLicense = true,
+    supportsImages = true,
+    checkSystemAudioAccess,
+    requestSystemAudioAccess,
+    captureSystemScreenshot,
+    capturing,
+    isProcessing,
+    isAIProcessing,
+    lastAIResponse,
+    error,
+    setupRequired,
+    startCapture,
+    stopCapture,
+    isPopoverOpen,
+    setIsPopoverOpen,
+    useSystemPrompt,
+    setUseSystemPrompt,
+    contextContent,
+    setContextContent,
+    startNewConversation,
+    resizeWindow,
+    quickActions,
+    addQuickAction,
+    removeQuickAction,
+    isManagingQuickActions,
+    setIsManagingQuickActions,
+    showQuickActions,
+    setShowQuickActions,
+    handleQuickActionClick,
+    vadConfig,
+    updateVadConfiguration,
+    isRecordingInContinuousMode,
+    recordingProgress,
+    manualStopAndSend,
+    startContinuousRecording,
+    ignoreContinuousRecording,
+    scrollAreaRef,
+    settingsDropdownContent,
+    voicePopoverFooter,
+    toolbarShowElementTitles
+  } = props;
+  const showNativeTitles = toolbarShowElementTitles !== false;
+  // Screenshot state
+  const [screenshotImage, setScreenshotImage] = useState(null);
+  const [isCapturingScreenshot, setIsCapturingScreenshot] = useState(false);
+  const isVadMode = vadConfig.enabled;
+  const hasResponse = lastAIResponse || isAIProcessing;
+  // Reset screenshot when processing starts (message is being sent)
+  useEffect(() => {
+    if (isProcessing && screenshotImage) {
+      setScreenshotImage(null);
+    }
+  }, [isProcessing, screenshotImage]);
+  const handleToggleCapture = async () => {
+    if (capturing) {
+      await stopCapture();
+    } else {
+      await startCapture();
+    }
+  };
+  const handleModeChange = vadEnabled => {
+    updateVadConfiguration({
+      ...vadConfig,
+      enabled: vadEnabled
+    });
+  };
+  // Capture screenshot functionality
+  const handleCaptureScreenshot = useCallback(async () => {
+    if (!captureSystemScreenshot || isCapturingScreenshot) return;
+    setIsCapturingScreenshot(true);
+    try {
+      const base64 = await captureSystemScreenshot();
+      if (base64) {
+        setScreenshotImage(base64);
+      }
+    } catch (err) {
+      console.error('Failed to capture screenshot:', err);
+    } finally {
+      setIsCapturingScreenshot(false);
+    }
+  }, [captureSystemScreenshot, isCapturingScreenshot]);
+  const handleRemoveScreenshot = useCallback(() => {
+    setScreenshotImage(null);
+  }, []);
+  const getButtonIcon = () => {
+    if (setupRequired) return jsx(AlertCircleIcon, {
+      className: "text-orange-500"
+    });
+    if (error && !setupRequired) return jsx(AlertCircleIcon, {
+      className: "text-red-500"
+    });
+    if (isProcessing) return jsx(LoaderIcon, {
+      className: "animate-spin"
+    });
+    if (capturing) return jsx(AudioLinesIcon, {
+      className: "text-green-500 animate-pulse"
+    });
+    return jsx(HeadphonesIcon, {});
+  };
+  const getButtonTitle = () => {
+    if (setupRequired) return 'Setup required - Click for instructions';
+    if (error && !setupRequired) return `Error: ${error}`;
+    if (isProcessing) return 'Transcribing audio...';
+    if (capturing) return 'Stop system audio capture';
+    return 'Start system audio capture';
+  };
+  return jsxs(Popover, {
+    open: isPopoverOpen,
+    onOpenChange: open => {
+      if (capturing && !open) {
+        return;
+      }
+      setIsPopoverOpen(open);
+    },
+    children: [jsx(PopoverTrigger, {
+      asChild: true,
+      children: jsx(Button, {
+        size: "icon",
+        title: showNativeTitles ? getButtonTitle() : undefined,
+        onClick: handleToggleCapture,
+        className: cn(capturing && 'bg-green-50 hover:bg-green-100', error && 'bg-red-100 hover:bg-red-200'),
+        children: getButtonIcon()
+      })
+    }), (capturing || setupRequired || error) && jsx(PopoverContent, {
+      align: "end",
+      side: "bottom",
+      className: "z-[200] select-none w-screen max-h-[min(92vh,calc(100vh-1rem))] p-0 border shadow-lg overflow-hidden border-input/50",
+      sideOffset: 8,
+      children: jsxs("div", {
+        className: "flex flex-col h-[calc(100vh-4rem)] overflow-hidden",
+        children: [jsx("div", {
+          className: "flex-shrink-0 p-3 border-b border-border/50",
+          children: jsxs("div", {
+            className: "flex items-center justify-between gap-2",
+            children: [!setupRequired && jsx(ModeSwitcher, {
+              isVadMode: isVadMode,
+              onModeChange: handleModeChange,
+              disabled: isRecordingInContinuousMode || isProcessing || isAIProcessing
+            }), setupRequired && jsx("h2", {
+              className: "font-semibold text-sm",
+              children: "Setup Required"
+            }), jsxs("div", {
+              className: "flex items-center gap-1.5 flex-shrink-0",
+              children: [hasActiveLicense && !setupRequired && supportsImages && captureSystemScreenshot && jsxs(Button, {
+                size: "sm",
+                variant: screenshotImage ? 'default' : 'outline',
+                onClick: handleCaptureScreenshot,
+                disabled: isCapturingScreenshot,
+                className: cn('h-6 text-[10px] gap-1 px-2', screenshotImage && 'bg-primary text-primary-foreground'),
+                title: showNativeTitles ? 'Capture screenshot to include with transcription' : undefined,
+                children: [isCapturingScreenshot ? jsx(LoaderIcon, {
+                  className: "w-3 h-3 animate-spin"
+                }) : jsx(CameraIcon, {
+                  className: "w-3 h-3"
+                }), "Screenshot"]
+              }), !setupRequired && jsxs(Button, {
+                size: "sm",
+                variant: "ghost",
+                onClick: startNewConversation,
+                className: "h-6 text-[10px] gap-1 px-2",
+                title: showNativeTitles ? 'Start a new conversation' : undefined,
+                children: [jsx(PlusIcon, {
+                  className: "w-3 h-3"
+                }), "New"]
+              }), !capturing && jsx(Button, {
+                size: "icon",
+                variant: "ghost",
+                className: "h-6 w-6",
+                title: showNativeTitles ? 'Close' : undefined,
+                onClick: () => {
+                  setIsPopoverOpen(false);
+                  resizeWindow(false);
+                },
+                children: jsx(XIcon, {
+                  className: "h-3.5 w-3.5"
+                })
+              })]
+            })]
+          })
+        }), jsx(ScrollArea, {
+          className: "flex-1 min-h-0",
+          ref: scrollAreaRef,
+          children: jsxs("div", {
+            className: "p-2 space-y-2",
+            children: [screenshotImage && jsxs("div", {
+              className: "flex items-center gap-2 p-2 rounded-lg bg-primary/5 border border-primary/20",
+              children: [jsx("img", {
+                src: `data:image/png;base64,${screenshotImage}`,
+                alt: "Screenshot",
+                className: "h-12 w-20 object-cover rounded"
+              }), jsxs("div", {
+                className: "flex-1 min-w-0",
+                children: [jsx("p", {
+                  className: "text-[10px] font-medium",
+                  children: "Screenshot attached"
+                }), jsx("p", {
+                  className: "text-[9px] text-muted-foreground",
+                  children: "Will be sent with next transcription"
+                })]
+              }), jsx(Button, {
+                size: "icon",
+                variant: "ghost",
+                className: "h-5 w-5",
+                onClick: handleRemoveScreenshot,
+                children: jsx(XIcon, {
+                  className: "h-3 w-3"
+                })
+              })]
+            }), error && !setupRequired && jsxs("div", {
+              className: "flex items-start gap-2 p-2.5 rounded-lg bg-red-50 border border-red-200",
+              children: [jsx(AlertCircleIcon, {
+                className: "w-3.5 h-3.5 text-red-500 flex-shrink-0 mt-0.5"
+              }), jsxs("div", {
+                children: [jsx("p", {
+                  className: "text-[10px] font-medium text-red-800",
+                  children: "Error"
+                }), jsx("p", {
+                  className: "text-[10px] text-red-700",
+                  children: error
+                })]
+              })]
+            }), setupRequired ? jsx(PermissionFlow, {
+              checkAccess: checkSystemAudioAccess,
+              requestAccess: requestSystemAudioAccess,
+              onPermissionGranted: () => {
+                void startCapture();
+              },
+              onPermissionDenied: () => {
+                // Keep showing setup instructions
+              }
+            }) : jsxs(Fragment, {
+              children: [jsx(RecordingPanel, {
+                isVadMode: isVadMode,
+                isRecording: isRecordingInContinuousMode,
+                isProcessing: isProcessing,
+                isAIProcessing: isAIProcessing,
+                recordingProgress: recordingProgress,
+                maxDuration: vadConfig.max_recording_duration_secs,
+                onStartRecording: startContinuousRecording,
+                onStopAndSend: manualStopAndSend,
+                onIgnore: ignoreContinuousRecording
+              }), jsx(SettingsPanel, {
+                vadConfig: vadConfig,
+                onUpdateVadConfig: updateVadConfiguration,
+                useSystemPrompt: useSystemPrompt,
+                setUseSystemPrompt: setUseSystemPrompt,
+                contextContent: contextContent,
+                setContextContent: setContextContent,
+                settingsDropdownContent: settingsDropdownContent
+              }), jsx(Warning, {
+                isVadMode: isVadMode
+              })]
+            })]
+          })
+        }), voicePopoverFooter ? jsx("div", {
+          className: "flex-shrink-0 border-t border-border/55 bg-muted/25 px-3 py-2.5 backdrop-blur supports-[backdrop-filter]:bg-muted/20",
+          children: voicePopoverFooter
+        }) : null, !setupRequired && hasResponse && jsx("div", {
+          className: "flex-shrink-0 border-t border-border/50 p-2",
+          children: jsx(QuickActions, {
+            actions: quickActions,
+            onActionClick: handleQuickActionClick,
+            onAddAction: addQuickAction,
+            onRemoveAction: removeQuickAction,
+            isManaging: isManagingQuickActions,
+            setIsManaging: setIsManagingQuickActions,
+            show: showQuickActions,
+            setShow: setShowQuickActions
+          })
+        })]
+      })
+    })]
+  });
+};export{SystemAudio};//# sourceMappingURL=index.js.map

package/lib/components/AIToolbar/components/speech/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/AIToolbar/components/speech/promptTemplates.d.ts

@@ -0,0 +1,12 @@
+export interface PromptTemplate {
+    id: string;
+    name: string;
+    prompt: string;
+}
+export declare const PROMPT_TEMPLATES: PromptTemplate[];
+export declare const getPromptTemplateById: (id: string) => PromptTemplate | undefined;
+export declare const getPromptTemplateNames: () => {
+    id: string;
+    name: string;
+}[];
+//# sourceMappingURL=promptTemplates.d.ts.map

package/lib/components/AIToolbar/components/speech/promptTemplates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptTemplates.d.ts","sourceRoot":"","sources":["../../../../../src/components/AIToolbar/components/speech/promptTemplates.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,EAAE,cAAc,EAuH5C,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,IAAI,MAAM,KAAG,cAAc,GAAG,SAEnE,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAAO;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAKrE,CAAC"}

package/lib/components/AIToolbar/components/speech/promptTemplates.js

@@ -0,0 +1,114 @@
+const PROMPT_TEMPLATES = [{
+  id: 'real_time_translator',
+  name: 'Real-time Translator',
+  prompt: `You are a real-time translation assistant. Listen to system audio and provide instant, accurate translations. Be concise and quick.
+
+[ADD YOUR TRANSLATION SETTINGS HERE]
+- From language: 
+- To language: 
+- Context/Domain: (business, casual, technical, etc.)
+
+Provide immediate translations of what you hear. Keep responses short and clear for quick reading.`
+}, {
+  id: 'meeting_assistant',
+  name: 'Meeting Assistant',
+  prompt: `You are a transparent meeting assistant. Listen to conversations and provide real-time insights, summaries, and action items.
+
+[ADD YOUR MEETING CONTEXT HERE]
+- Meeting type: 
+- Your role: 
+- Key topics to focus on: 
+- What you need help with: 
+
+Provide quick insights, key points, and actionable information as the meeting progresses.`
+}, {
+  id: 'interview_assistant',
+  name: 'Interview Assistant',
+  prompt: `You are a real-time interview assistant. Help answer questions by providing quick, relevant talking points based on the candidate's background.
+
+[ADD YOUR RESUME HERE]
+- Your experience: 
+- Key skills: 
+- Notable achievements: 
+- Education: 
+- Projects: 
+
+[ADD JOB DESCRIPTION HERE]
+- Position: 
+- Required skills: 
+- Company: 
+- Key responsibilities: 
+
+Listen to interview questions and provide concise, relevant talking points to help answer effectively.`
+}, {
+  id: 'technical_interview',
+  name: 'Technical Interview Helper',
+  prompt: `You are a technical interview assistant. Provide quick hints, approaches, and explanations for technical questions.
+
+[ADD YOUR TECHNICAL BACKGROUND HERE]
+- Programming languages: 
+- Technologies/frameworks: 
+- Experience level: 
+- Areas of expertise: 
+
+[ADD JOB REQUIREMENTS HERE]
+- Technical stack: 
+- Position level: 
+- Key technical skills needed: 
+
+Listen to technical questions and provide brief, helpful guidance and approaches.`
+}, {
+  id: 'presentation_coach',
+  name: 'Presentation Coach',
+  prompt: `You are a real-time presentation assistant. Help improve delivery, suggest talking points, and provide confidence boosters.
+
+[ADD YOUR PRESENTATION CONTEXT HERE]
+- Topic/subject: 
+- Audience: 
+- Key messages: 
+- Your expertise level: 
+- Presentation goals: 
+
+Provide quick tips, talking points, and encouragement as you present.`
+}, {
+  id: 'learning_assistant',
+  name: 'Learning Assistant',
+  prompt: `You are a real-time learning companion. Help understand concepts, provide explanations, and suggest questions during lectures or tutorials.
+
+[ADD YOUR LEARNING CONTEXT HERE]
+- Subject/topic: 
+- Your current level: 
+- Learning goals: 
+- Areas of difficulty: 
+- Course context: 
+
+Provide quick explanations, clarifications, and helpful insights as you learn.`
+}, {
+  id: 'customer_call_helper',
+  name: 'Customer Call Helper',
+  prompt: `You are a customer service assistant. Help handle customer calls by providing quick responses, solutions, and talking points.
+
+[ADD YOUR PRODUCT/SERVICE INFO HERE]
+- Company/product: 
+- Common issues: 
+- Your role: 
+- Available solutions: 
+- Escalation procedures: 
+
+Listen to customer concerns and provide quick, helpful response suggestions.`
+}, {
+  id: 'general_assistant',
+  name: 'General Assistant',
+  prompt: `You are a transparent AI assistant. Provide real-time help, insights, and information based on what you hear through system audio.
+
+[ADD YOUR PREFERENCES HERE]
+- Primary use case: 
+- Areas of interest: 
+- Response style: (brief, detailed, technical, etc.)
+- Language preference: 
+
+Listen and provide relevant, helpful information and insights in real-time.`
+}];
+const getPromptTemplateById = id => {
+  return PROMPT_TEMPLATES.find(template => template.id === id);
+};export{PROMPT_TEMPLATES,getPromptTemplateById};//# sourceMappingURL=promptTemplates.js.map

package/lib/components/AIToolbar/components/speech/promptTemplates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptTemplates.js","sources":["../../../../../src/components/AIToolbar/components/speech/promptTemplates.ts"],"sourcesContent":[null],"names":[],"mappings":"sBAAiB,GAAc,CAAA;IAC3B,EAAE,sBAAS;MACX,EAAI,sBAAS;QACb,EAAM,CAAA;;AAGV;AAyHA;AAIA;;;AAAsE,kGAKpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}