@openconsole/shadcn 0.2.6 → 0.2.7

package/components/ai-elements/sources.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../ui/collapsible";
-import { cn } from "../../lib/utils";
-import { BookIcon, ChevronDownIcon } from "lucide-react";
-import type { ComponentProps } from "react";
-
-export type SourcesProps = ComponentProps<"div">;
-
-export const Sources = ({ className, ...props }: SourcesProps) => (
-  <Collapsible
-    className={cn("not-prose mb-4 text-primary text-xs", className)}
-    {...props}
-  />
-);
-
-export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
-  count: number;
-};
-
-export const SourcesTrigger = ({
-  className,
-  count,
-  children,
-  ...props
-}: SourcesTriggerProps) => (
-  <CollapsibleTrigger
-    className={cn("flex items-center gap-2", className)}
-    {...props}
-  >
-    {children ?? (
-      <>
-        <p className="font-medium">Used {count} sources</p>
-        <ChevronDownIcon className="h-4 w-4" />
-      </>
-    )}
-  </CollapsibleTrigger>
-);
-
-export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
-
-export const SourcesContent = ({
-  className,
-  ...props
-}: SourcesContentProps) => (
-  <CollapsibleContent
-    className={cn(
-      "mt-3 flex w-fit flex-col gap-2",
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-      className
-    )}
-    {...props}
-  />
-);
-
-export type SourceProps = ComponentProps<"a">;
-
-export const Source = ({ href, title, children, ...props }: SourceProps) => (
-  <a
-    className="flex items-center gap-2"
-    href={href}
-    rel="noreferrer"
-    target="_blank"
-    {...props}
-  >
-    {children ?? (
-      <>
-        <BookIcon className="h-4 w-4" />
-        <span className="block font-medium">{title}</span>
-      </>
-    )}
-  </a>
-);

package/components/ai-elements/speech-input.tsx

@@ -1,323 +0,0 @@
-"use client";
-
-import { Button } from "../ui/button";
-import { Spinner } from "../ui/spinner";
-import { cn } from "../../lib/utils";
-import { MicIcon, SquareIcon } from "lucide-react";
-import type { ComponentProps } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-
-interface SpeechRecognition extends EventTarget {
-  continuous: boolean;
-  interimResults: boolean;
-  lang: string;
-  start(): void;
-  stop(): void;
-  onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
-  onend: ((this: SpeechRecognition, ev: Event) => void) | null;
-  onresult:
-    | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void)
-    | null;
-  onerror:
-    | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void)
-    | null;
-}
-
-interface SpeechRecognitionEvent extends Event {
-  results: SpeechRecognitionResultList;
-  resultIndex: number;
-}
-
-interface SpeechRecognitionResultList {
-  readonly length: number;
-  item(index: number): SpeechRecognitionResult;
-  [index: number]: SpeechRecognitionResult;
-}
-
-interface SpeechRecognitionResult {
-  readonly length: number;
-  item(index: number): SpeechRecognitionAlternative;
-  [index: number]: SpeechRecognitionAlternative;
-  isFinal: boolean;
-}
-
-interface SpeechRecognitionAlternative {
-  transcript: string;
-  confidence: number;
-}
-
-interface SpeechRecognitionErrorEvent extends Event {
-  error: string;
-}
-
-declare global {
-  interface Window {
-    SpeechRecognition: new () => SpeechRecognition;
-    webkitSpeechRecognition: new () => SpeechRecognition;
-  }
-}
-
-type SpeechInputMode = "speech-recognition" | "media-recorder" | "none";
-
-export type SpeechInputProps = ComponentProps<typeof Button> & {
-  onTranscriptionChange?: (text: string) => void;
-  /**
-   * Callback for when audio is recorded using MediaRecorder fallback.
-   * This is called in browsers that don't support the Web Speech API (Firefox, Safari).
-   * The callback receives an audio Blob that should be sent to a transcription service.
-   * Return the transcribed text, which will be passed to onTranscriptionChange.
-   */
-  onAudioRecorded?: (audioBlob: Blob) => Promise<string>;
-  lang?: string;
-};
-
-const detectSpeechInputMode = (): SpeechInputMode => {
-  if (typeof window === "undefined") {
-    return "none";
-  }
-
-  if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
-    return "speech-recognition";
-  }
-
-  if ("MediaRecorder" in window && "mediaDevices" in navigator) {
-    return "media-recorder";
-  }
-
-  return "none";
-};
-
-export const SpeechInput = ({
-  className,
-  onTranscriptionChange,
-  onAudioRecorded,
-  lang = "en-US",
-  ...props
-}: SpeechInputProps) => {
-  const [isListening, setIsListening] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [mode] = useState<SpeechInputMode>(detectSpeechInputMode);
-  const [isRecognitionReady, setIsRecognitionReady] = useState(false);
-  const recognitionRef = useRef<SpeechRecognition | null>(null);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const streamRef = useRef<MediaStream | null>(null);
-  const audioChunksRef = useRef<Blob[]>([]);
-  const onTranscriptionChangeRef = useRef<
-    SpeechInputProps["onTranscriptionChange"]
-  >(onTranscriptionChange);
-  const onAudioRecordedRef =
-    useRef<SpeechInputProps["onAudioRecorded"]>(onAudioRecorded);
-
-  // Keep refs in sync
-  onTranscriptionChangeRef.current = onTranscriptionChange;
-  onAudioRecordedRef.current = onAudioRecorded;
-
-  // Initialize Speech Recognition when mode is speech-recognition
-  useEffect(() => {
-    if (mode !== "speech-recognition") {
-      return;
-    }
-
-    const SpeechRecognition =
-      window.SpeechRecognition || window.webkitSpeechRecognition;
-    const speechRecognition = new SpeechRecognition();
-
-    speechRecognition.continuous = true;
-    speechRecognition.interimResults = true;
-    speechRecognition.lang = lang;
-
-    const handleStart = () => {
-      setIsListening(true);
-    };
-
-    const handleEnd = () => {
-      setIsListening(false);
-    };
-
-    const handleResult = (event: Event) => {
-      const speechEvent = event as SpeechRecognitionEvent;
-      let finalTranscript = "";
-
-      for (
-        let i = speechEvent.resultIndex;
-        i < speechEvent.results.length;
-        i += 1
-      ) {
-        const result = speechEvent.results[i];
-        if (result.isFinal) {
-          finalTranscript += result[0]?.transcript ?? "";
-        }
-      }
-
-      if (finalTranscript) {
-        onTranscriptionChangeRef.current?.(finalTranscript);
-      }
-    };
-
-    const handleError = () => {
-      setIsListening(false);
-    };
-
-    speechRecognition.addEventListener("start", handleStart);
-    speechRecognition.addEventListener("end", handleEnd);
-    speechRecognition.addEventListener("result", handleResult);
-    speechRecognition.addEventListener("error", handleError);
-
-    recognitionRef.current = speechRecognition;
-    setIsRecognitionReady(true);
-
-    return () => {
-      speechRecognition.removeEventListener("start", handleStart);
-      speechRecognition.removeEventListener("end", handleEnd);
-      speechRecognition.removeEventListener("result", handleResult);
-      speechRecognition.removeEventListener("error", handleError);
-      speechRecognition.stop();
-      recognitionRef.current = null;
-      setIsRecognitionReady(false);
-    };
-  }, [mode, lang]);
-
-  // Cleanup MediaRecorder and stream on unmount
-  useEffect(
-    () => () => {
-      if (mediaRecorderRef.current?.state === "recording") {
-        mediaRecorderRef.current.stop();
-      }
-      if (streamRef.current) {
-        for (const track of streamRef.current.getTracks()) {
-          track.stop();
-        }
-      }
-    },
-    []
-  );
-
-  // Start MediaRecorder recording
-  const startMediaRecorder = useCallback(async () => {
-    if (!onAudioRecordedRef.current) {
-      return;
-    }
-
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      streamRef.current = stream;
-      const mediaRecorder = new MediaRecorder(stream);
-      audioChunksRef.current = [];
-
-      const handleDataAvailable = (event: BlobEvent) => {
-        if (event.data.size > 0) {
-          audioChunksRef.current.push(event.data);
-        }
-      };
-
-      const handleStop = async () => {
-        for (const track of stream.getTracks()) {
-          track.stop();
-        }
-        streamRef.current = null;
-
-        const audioBlob = new Blob(audioChunksRef.current, {
-          type: "audio/webm",
-        });
-
-        if (audioBlob.size > 0 && onAudioRecordedRef.current) {
-          setIsProcessing(true);
-          try {
-            const transcript = await onAudioRecordedRef.current(audioBlob);
-            if (transcript) {
-              onTranscriptionChangeRef.current?.(transcript);
-            }
-          } catch {
-            // Error handling delegated to the onAudioRecorded caller
-          } finally {
-            setIsProcessing(false);
-          }
-        }
-      };
-
-      const handleError = () => {
-        setIsListening(false);
-        for (const track of stream.getTracks()) {
-          track.stop();
-        }
-        streamRef.current = null;
-      };
-
-      mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
-      mediaRecorder.addEventListener("stop", handleStop);
-      mediaRecorder.addEventListener("error", handleError);
-
-      mediaRecorderRef.current = mediaRecorder;
-      mediaRecorder.start();
-      setIsListening(true);
-    } catch {
-      setIsListening(false);
-    }
-  }, []);
-
-  // Stop MediaRecorder recording
-  const stopMediaRecorder = useCallback(() => {
-    if (mediaRecorderRef.current?.state === "recording") {
-      mediaRecorderRef.current.stop();
-    }
-    setIsListening(false);
-  }, []);
-
-  const toggleListening = useCallback(() => {
-    if (mode === "speech-recognition" && recognitionRef.current) {
-      if (isListening) {
-        recognitionRef.current.stop();
-      } else {
-        recognitionRef.current.start();
-      }
-    } else if (mode === "media-recorder") {
-      if (isListening) {
-        stopMediaRecorder();
-      } else {
-        startMediaRecorder();
-      }
-    }
-  }, [mode, isListening, startMediaRecorder, stopMediaRecorder]);
-
-  // Determine if button should be disabled
-  const isDisabled =
-    mode === "none" ||
-    (mode === "speech-recognition" && !isRecognitionReady) ||
-    (mode === "media-recorder" && !onAudioRecorded) ||
-    isProcessing;
-
-  return (
-    <div className="relative inline-flex items-center justify-center">
-      {/* Animated pulse rings */}
-      {isListening &&
-        [0, 1, 2].map((index) => (
-          <div
-            className="absolute inset-0 animate-ping rounded-full border-2 border-red-400/30"
-            key={index}
-            style={{
-              animationDelay: `${index * 0.3}s`,
-              animationDuration: "2s",
-            }}
-          />
-        ))}
-
-      {/* Main record button */}
-      <Button
-        className={cn(
-          "relative z-10 rounded-full transition-all duration-300",
-          isListening
-            ? "bg-destructive text-white hover:bg-destructive/80 hover:text-white"
-            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
-          className
-        )}
-        disabled={isDisabled}
-        onClick={toggleListening}
-        {...props}
-      >
-        {isProcessing && <Spinner />}
-        {!isProcessing && isListening && <SquareIcon className="size-4" />}
-        {!(isProcessing || isListening) && <MicIcon className="size-4" />}
-      </Button>
-    </div>
-  );
-};