@admin-layout/tailwind-ui 12.2.4-alpha.4 → 12.2.4-alpha.41

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

@@ -0,0 +1,154 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState}from'react';import {InfoIcon,ChevronDownIcon,AudioWaveformIcon,MicIcon,KeyboardIcon,CameraIcon}from'lucide-react';import'../../../../utils/isBrowser/index.js';import {cn}from'../../../../utils/util.js';import'fast-deep-equal/react.js';const Warning = ({
+  isVadMode
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const isMac = navigator.platform.toLowerCase().includes('mac');
+  const modKey = isMac ? '⌘' : 'Ctrl';
+  return jsxs("div", {
+    className: "rounded-lg border border-border/50 bg-muted/30 overflow-hidden",
+    children: [jsxs("button", {
+      type: "button",
+      onClick: () => setIsExpanded(!isExpanded),
+      className: "w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors",
+      children: [jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [jsx(InfoIcon, {
+          className: "w-3.5 h-3.5 text-muted-foreground"
+        }), jsx("span", {
+          className: "text-xs font-medium",
+          children: "Help & Keyboard Shortcuts"
+        })]
+      }), jsx(ChevronDownIcon, {
+        className: cn('w-4 h-4 text-muted-foreground transition-transform', isExpanded && 'rotate-180')
+      })]
+    }), isExpanded && jsxs("div", {
+      className: "px-3 pb-3 space-y-3",
+      children: [jsxs("div", {
+        className: "flex items-start gap-2 p-2 rounded-md bg-primary/5",
+        children: [isVadMode ? jsx(AudioWaveformIcon, {
+          className: "w-4 h-4 text-primary mt-0.5"
+        }) : jsx(MicIcon, {
+          className: "w-4 h-4 text-primary mt-0.5"
+        }), jsxs("div", {
+          children: [jsx("p", {
+            className: "text-xs font-medium",
+            children: isVadMode ? 'Auto-detect Mode' : 'Manual Mode'
+          }), jsx("p", {
+            className: "text-[10px] text-muted-foreground mt-0.5",
+            children: isVadMode ? 'Speech is automatically detected from system audio. When someone speaks, it will be captured and transcribed.' : 'Press the record button or use keyboard shortcuts to manually control recording.'
+          })]
+        })]
+      }), jsxs("div", {
+        className: "space-y-2",
+        children: [jsxs("div", {
+          className: "flex items-center gap-1.5",
+          children: [jsx(KeyboardIcon, {
+            className: "w-3 h-3 text-muted-foreground"
+          }), jsx("span", {
+            className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide",
+            children: "Keyboard Shortcuts"
+          })]
+        }), jsxs("div", {
+          className: "grid grid-cols-2 gap-2 text-[10px]",
+          children: [jsxs("div", {
+            className: "flex items-center justify-between p-1.5 rounded bg-muted/50",
+            children: [jsx("span", {
+              className: "text-muted-foreground",
+              children: "Scroll down"
+            }), jsx("kbd", {
+              className: "px-1.5 py-0.5 rounded bg-background border border-border font-mono",
+              children: "\u2193"
+            })]
+          }), jsxs("div", {
+            className: "flex items-center justify-between p-1.5 rounded bg-muted/50",
+            children: [jsx("span", {
+              className: "text-muted-foreground",
+              children: "Scroll up"
+            }), jsx("kbd", {
+              className: "px-1.5 py-0.5 rounded bg-background border border-border font-mono",
+              children: "\u2191"
+            })]
+          }), !isVadMode && jsxs(Fragment, {
+            children: [jsxs("div", {
+              className: "flex items-center justify-between p-1.5 rounded bg-muted/50",
+              children: [jsx("span", {
+                className: "text-muted-foreground",
+                children: "Start/Stop"
+              }), jsx("kbd", {
+                className: "px-1.5 py-0.5 rounded bg-background border border-border font-mono",
+                children: "Enter"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between p-1.5 rounded bg-muted/50",
+              children: [jsx("span", {
+                className: "text-muted-foreground",
+                children: "Start record"
+              }), jsx("kbd", {
+                className: "px-1.5 py-0.5 rounded bg-background border border-border font-mono",
+                children: "Space"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between p-1.5 rounded bg-muted/50",
+              children: [jsx("span", {
+                className: "text-muted-foreground",
+                children: "Discard"
+              }), jsx("kbd", {
+                className: "px-1.5 py-0.5 rounded bg-background border border-border font-mono",
+                children: "Esc"
+              })]
+            })]
+          }), jsxs("div", {
+            className: "flex items-center justify-between p-1.5 rounded bg-muted/50",
+            children: [jsx("span", {
+              className: "text-muted-foreground",
+              children: "Toggle view"
+            }), jsxs("kbd", {
+              className: "px-1.5 py-0.5 rounded bg-background border border-border font-mono",
+              children: [modKey, "+K"]
+            })]
+          })]
+        })]
+      }), jsxs("div", {
+        className: "space-y-2",
+        children: [jsxs("div", {
+          className: "flex items-center gap-1.5",
+          children: [jsx(CameraIcon, {
+            className: "w-3 h-3 text-muted-foreground"
+          }), jsx("span", {
+            className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide",
+            children: "Screenshot Feature"
+          })]
+        }), jsxs("div", {
+          className: "p-2 rounded-md bg-primary/5 text-[10px] text-muted-foreground space-y-1",
+          children: [jsx("p", {
+            children: "Screenshot: Captures your current screen and attaches it to your next transcription."
+          }), jsx("p", {
+            children: "The AI will receive both the transcribed audio and the screenshot image, allowing it to provide context-aware responses based on what you're viewing."
+          }), jsx("p", {
+            className: "text-[9px] opacity-70",
+            children: "The screenshot is automatically cleared after each message is sent."
+          })]
+        })]
+      }), jsxs("div", {
+        className: "text-[10px] text-muted-foreground space-y-1 pt-2 border-t border-border/50",
+        children: [jsxs("p", {
+          children: [jsx("strong", {
+            children: "Tip:"
+          }), " Use Auto-detect for hands-free operation during interviews."]
+        }), jsxs("p", {
+          children: [jsx("strong", {
+            children: "Tip:"
+          }), " Use Manual mode when you need precise control over what gets transcribed."]
+        }), jsxs("p", {
+          children: [jsx("strong", {
+            children: "Tip:"
+          }), " Quick Actions let you send follow-up prompts with one click."]
+        }), jsxs("p", {
+          children: [jsx("strong", {
+            children: "Tip:"
+          }), " Use Screenshot to share your screen context with the AI for more relevant responses."]
+        })]
+      })]
+    })]
+  });
+};export{Warning};//# sourceMappingURL=Warning.js.map

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

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

package/lib/components/AIToolbar/components/speech/audio-visualizer.d.ts

@@ -0,0 +1,7 @@
+interface AudioVisualizerProps {
+    isRecording: boolean;
+    stream?: MediaStream | null;
+}
+export declare function AudioVisualizer({ stream, isRecording }: AudioVisualizerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=audio-visualizer.d.ts.map

package/lib/components/AIToolbar/components/speech/audio-visualizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-visualizer.d.ts","sourceRoot":"","sources":["../../../../../src/components/AIToolbar/components/speech/audio-visualizer.tsx"],"names":[],"mappings":"AAgBA,UAAU,oBAAoB;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,oBAAoB,2CA8N5E"}

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":"AAUA,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGzE,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAyVlD,CAAC"}