@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/speech-input.js

@@ -0,0 +1,206 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Spinner } from '@chatsdk-dev/ui/components/spinner';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { SquareIcon, MicIcon } from 'lucide-react';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var detectSpeechInputMode = () => {
+  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";
+};
+var SpeechInput = ({
+  className,
+  onTranscriptionChange,
+  onAudioRecorded,
+  lang = "en-US",
+  ...props
+}) => {
+  const [isListening, setIsListening] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [mode] = useState(detectSpeechInputMode);
+  const [isRecognitionReady, setIsRecognitionReady] = useState(false);
+  const recognitionRef = useRef(null);
+  const mediaRecorderRef = useRef(null);
+  const streamRef = useRef(null);
+  const audioChunksRef = useRef([]);
+  const onTranscriptionChangeRef = useRef(onTranscriptionChange);
+  const onAudioRecordedRef = useRef(onAudioRecorded);
+  onTranscriptionChangeRef.current = onTranscriptionChange;
+  onAudioRecordedRef.current = onAudioRecorded;
+  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) => {
+      const speechEvent = event;
+      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]);
+  useEffect(
+    () => () => {
+      if (mediaRecorderRef.current?.state === "recording") {
+        mediaRecorderRef.current.stop();
+      }
+      if (streamRef.current) {
+        for (const track of streamRef.current.getTracks()) {
+          track.stop();
+        }
+      }
+    },
+    []
+  );
+  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) => {
+        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 {
+          } 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);
+    }
+  }, []);
+  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]);
+  const isDisabled = mode === "none" || mode === "speech-recognition" && !isRecognitionReady || mode === "media-recorder" && !onAudioRecorded || isProcessing;
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex items-center justify-center", children: [
+    isListening && [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 animate-ping rounded-full border-2 border-red-400/30",
+        style: {
+          animationDelay: `${index * 0.3}s`,
+          animationDuration: "2s"
+        }
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxs(
+      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,
+        children: [
+          isProcessing && /* @__PURE__ */ jsx(Spinner, {}),
+          !isProcessing && isListening && /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" }),
+          !(isProcessing || isListening) && /* @__PURE__ */ jsx(MicIcon, { className: "size-4" })
+        ]
+      }
+    )
+  ] });
+};
+
+export { SpeechInput };

package/dist/components/ai-elements/stack-trace.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { CollapsibleContent, CollapsibleTrigger } from '@chatsdk-dev/ui/components/collapsible';
+
+type StackTraceProps = ComponentProps<"div"> & {
+    trace: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onFilePathClick?: (filePath: string, line?: number, column?: number) => void;
+};
+declare const StackTrace: react.MemoExoticComponent<({ trace, className, open, defaultOpen, onOpenChange, onFilePathClick, children, ...props }: StackTraceProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const StackTraceHeader: react.MemoExoticComponent<({ className, children, ...props }: StackTraceHeaderProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceErrorProps = ComponentProps<"div">;
+declare const StackTraceError: react.MemoExoticComponent<({ className, children, ...props }: StackTraceErrorProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceErrorTypeProps = ComponentProps<"span">;
+declare const StackTraceErrorType: react.MemoExoticComponent<({ className, children, ...props }: StackTraceErrorTypeProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceErrorMessageProps = ComponentProps<"span">;
+declare const StackTraceErrorMessage: react.MemoExoticComponent<({ className, children, ...props }: StackTraceErrorMessageProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceActionsProps = ComponentProps<"div">;
+declare const StackTraceActions: react.MemoExoticComponent<({ className, children, ...props }: StackTraceActionsProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const StackTraceCopyButton: react.MemoExoticComponent<({ onCopy, onError, timeout, className, children, ...props }: StackTraceCopyButtonProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceExpandButtonProps = ComponentProps<"div">;
+declare const StackTraceExpandButton: react.MemoExoticComponent<({ className, ...props }: StackTraceExpandButtonProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceContentProps = ComponentProps<typeof CollapsibleContent> & {
+    maxHeight?: number;
+};
+declare const StackTraceContent: react.MemoExoticComponent<({ className, maxHeight, children, ...props }: StackTraceContentProps) => react_jsx_runtime.JSX.Element>;
+type StackTraceFramesProps = ComponentProps<"div"> & {
+    showInternalFrames?: boolean;
+};
+declare const StackTraceFrames: react.MemoExoticComponent<({ className, showInternalFrames, ...props }: StackTraceFramesProps) => react_jsx_runtime.JSX.Element>;
+
+export { StackTrace, StackTraceActions, type StackTraceActionsProps, StackTraceContent, type StackTraceContentProps, StackTraceCopyButton, type StackTraceCopyButtonProps, StackTraceError, StackTraceErrorMessage, type StackTraceErrorMessageProps, type StackTraceErrorProps, StackTraceErrorType, type StackTraceErrorTypeProps, StackTraceExpandButton, type StackTraceExpandButtonProps, StackTraceFrames, type StackTraceFramesProps, StackTraceHeader, type StackTraceHeaderProps, type StackTraceProps };

package/dist/components/ai-elements/stack-trace.js

@@ -0,0 +1,377 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { AlertTriangleIcon, CheckIcon, CopyIcon, ChevronDownIcon } from 'lucide-react';
+import { createContext, memo, useMemo, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var STACK_FRAME_WITH_PARENS_REGEX = /^at\s+(.+?)\s+\((.+):(\d+):(\d+)\)$/;
+var STACK_FRAME_WITHOUT_FN_REGEX = /^at\s+(.+):(\d+):(\d+)$/;
+var ERROR_TYPE_REGEX = /^(\w+Error|Error):\s*(.*)$/;
+var AT_PREFIX_REGEX = /^at\s+/;
+var StackTraceContext = createContext(null);
+var useStackTrace = () => {
+  const context = useContext(StackTraceContext);
+  if (!context) {
+    throw new Error("StackTrace components must be used within StackTrace");
+  }
+  return context;
+};
+var parseStackFrame = (line) => {
+  const trimmed = line.trim();
+  const withParensMatch = trimmed.match(STACK_FRAME_WITH_PARENS_REGEX);
+  if (withParensMatch) {
+    const [, functionName, filePath, lineNum, colNum] = withParensMatch;
+    const isInternal = filePath?.includes("node_modules") || filePath?.startsWith("node:") || !!filePath?.includes("internal/");
+    return {
+      columnNumber: colNum ? Number.parseInt(colNum, 10) : null,
+      filePath: filePath ?? null,
+      functionName: functionName ?? null,
+      isInternal,
+      lineNumber: lineNum ? Number.parseInt(lineNum, 10) : null,
+      raw: trimmed
+    };
+  }
+  const withoutFnMatch = trimmed.match(STACK_FRAME_WITHOUT_FN_REGEX);
+  if (withoutFnMatch) {
+    const [, filePath, lineNum, colNum] = withoutFnMatch;
+    const isInternal = (filePath?.includes("node_modules") ?? false) || (filePath?.startsWith("node:") ?? false) || (filePath?.includes("internal/") ?? false);
+    return {
+      columnNumber: colNum ? Number.parseInt(colNum, 10) : null,
+      filePath: filePath ?? null,
+      functionName: null,
+      isInternal,
+      lineNumber: lineNum ? Number.parseInt(lineNum, 10) : null,
+      raw: trimmed
+    };
+  }
+  return {
+    columnNumber: null,
+    filePath: null,
+    functionName: null,
+    isInternal: trimmed.includes("node_modules") || trimmed.includes("node:"),
+    lineNumber: null,
+    raw: trimmed
+  };
+};
+var parseStackTrace = (trace) => {
+  const lines = trace.split("\n").filter((line) => line.trim());
+  if (lines.length === 0) {
+    return {
+      errorMessage: trace,
+      errorType: null,
+      frames: [],
+      raw: trace
+    };
+  }
+  const firstLine = lines[0]?.trim() ?? "";
+  let errorType = null;
+  let errorMessage = firstLine;
+  const errorMatch = firstLine.match(ERROR_TYPE_REGEX);
+  if (errorMatch) {
+    const [, type, msg] = errorMatch;
+    errorType = type ?? null;
+    errorMessage = msg || "";
+  }
+  const frames = lines.slice(1).filter((line) => line.trim().startsWith("at ")).map(parseStackFrame);
+  return {
+    errorMessage,
+    errorType,
+    frames,
+    raw: trace
+  };
+};
+var StackTrace = memo(
+  ({
+    trace,
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    onFilePathClick,
+    children,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const parsedTrace = useMemo(() => parseStackTrace(trace), [trace]);
+    const contextValue = useMemo(
+      () => ({
+        isOpen,
+        onFilePathClick,
+        raw: trace,
+        setIsOpen,
+        trace: parsedTrace
+      }),
+      [parsedTrace, trace, isOpen, setIsOpen, onFilePathClick]
+    );
+    return /* @__PURE__ */ jsx(StackTraceContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "not-prose w-full overflow-hidden rounded-lg border bg-background font-mono text-sm",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var StackTraceHeader = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen, setIsOpen } = useStackTrace();
+    return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: setIsOpen, open: isOpen, children: /* @__PURE__ */ jsx(
+      CollapsibleTrigger,
+      {
+        render: () => /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "flex w-full cursor-pointer items-center gap-3 p-3 text-left transition-colors hover:bg-muted/50",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+var StackTraceError = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 items-center gap-2 overflow-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4 shrink-0 text-destructive" }),
+        children
+      ]
+    }
+  )
+);
+var StackTraceErrorType = memo(
+  ({ className, children, ...props }) => {
+    const { trace } = useStackTrace();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("shrink-0 font-semibold text-destructive", className),
+        ...props,
+        children: children ?? trace.errorType
+      }
+    );
+  }
+);
+var StackTraceErrorMessage = memo(
+  ({ className, children, ...props }) => {
+    const { trace } = useStackTrace();
+    return /* @__PURE__ */ jsx("span", { className: cn("truncate text-foreground", className), ...props, children: children ?? trace.errorMessage });
+  }
+);
+var handleActionsClick = (e) => e.stopPropagation();
+var handleActionsKeyDown = (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.stopPropagation();
+  }
+};
+var StackTraceActions = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex shrink-0 items-center gap-1", className),
+      onClick: handleActionsClick,
+      onKeyDown: handleActionsKeyDown,
+      role: "group",
+      ...props,
+      children
+    }
+  )
+);
+var StackTraceCopyButton = memo(
+  ({
+    onCopy,
+    onError,
+    timeout = 2e3,
+    className,
+    children,
+    ...props
+  }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const timeoutRef = useRef(0);
+    const { raw } = useStackTrace();
+    const copyToClipboard = useCallback(async () => {
+      if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+        onError?.(new Error("Clipboard API not available"));
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(raw);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      } catch (error) {
+        onError?.(error);
+      }
+    }, [raw, onCopy, onError, timeout]);
+    useEffect(
+      () => () => {
+        window.clearTimeout(timeoutRef.current);
+      },
+      []
+    );
+    const Icon = isCopied ? CheckIcon : CopyIcon;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: cn("size-7", className),
+        onClick: copyToClipboard,
+        size: "icon",
+        variant: "ghost",
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(Icon, { size: 14 })
+      }
+    );
+  }
+);
+var StackTraceExpandButton = memo(
+  ({ className, ...props }) => {
+    const { isOpen } = useStackTrace();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex size-7 items-center justify-center", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            className: cn(
+              "size-4 text-muted-foreground transition-transform",
+              isOpen ? "rotate-180" : "rotate-0"
+            )
+          }
+        )
+      }
+    );
+  }
+);
+var StackTraceContent = memo(
+  ({
+    className,
+    maxHeight = 400,
+    children,
+    ...props
+  }) => {
+    const { isOpen } = useStackTrace();
+    return /* @__PURE__ */ jsx(Collapsible, { open: isOpen, children: /* @__PURE__ */ jsx(
+      CollapsibleContent,
+      {
+        className: cn(
+          "overflow-auto border-t bg-muted/30",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in",
+          className
+        ),
+        style: { maxHeight },
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var FilePathButton = memo(
+  ({ frame, onFilePathClick }) => {
+    const handleClick = useCallback(() => {
+      if (frame.filePath) {
+        onFilePathClick?.(
+          frame.filePath,
+          frame.lineNumber ?? void 0,
+          frame.columnNumber ?? void 0
+        );
+      }
+    }, [frame, onFilePathClick]);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: cn(
+          "underline decoration-dotted hover:text-primary",
+          onFilePathClick && "cursor-pointer"
+        ),
+        disabled: !onFilePathClick,
+        onClick: handleClick,
+        type: "button",
+        children: [
+          frame.filePath,
+          frame.lineNumber !== null && `:${frame.lineNumber}`,
+          frame.columnNumber !== null && `:${frame.columnNumber}`
+        ]
+      }
+    );
+  }
+);
+FilePathButton.displayName = "FilePathButton";
+var StackTraceFrames = memo(
+  ({
+    className,
+    showInternalFrames = true,
+    ...props
+  }) => {
+    const { trace, onFilePathClick } = useStackTrace();
+    const framesToShow = showInternalFrames ? trace.frames : trace.frames.filter((f) => !f.isInternal);
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1 p-3", className), ...props, children: [
+      framesToShow.map((frame) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "text-xs",
+            frame.isInternal ? "text-muted-foreground/50" : "text-foreground/90"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "at " }),
+            frame.functionName && /* @__PURE__ */ jsxs("span", { className: frame.isInternal ? "" : "text-foreground", children: [
+              frame.functionName,
+              " "
+            ] }),
+            frame.filePath && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "(" }),
+              /* @__PURE__ */ jsx(
+                FilePathButton,
+                {
+                  frame,
+                  onFilePathClick
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: ")" })
+            ] }),
+            !(frame.filePath || frame.functionName) && /* @__PURE__ */ jsx("span", { children: frame.raw.replace(AT_PREFIX_REGEX, "") })
+          ]
+        },
+        frame.raw
+      )),
+      framesToShow.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: "No stack frames" })
+    ] });
+  }
+);
+StackTrace.displayName = "StackTrace";
+StackTraceHeader.displayName = "StackTraceHeader";
+StackTraceError.displayName = "StackTraceError";
+StackTraceErrorType.displayName = "StackTraceErrorType";
+StackTraceErrorMessage.displayName = "StackTraceErrorMessage";
+StackTraceActions.displayName = "StackTraceActions";
+StackTraceCopyButton.displayName = "StackTraceCopyButton";
+StackTraceExpandButton.displayName = "StackTraceExpandButton";
+StackTraceContent.displayName = "StackTraceContent";
+StackTraceFrames.displayName = "StackTraceFrames";
+
+export { StackTrace, StackTraceActions, StackTraceContent, StackTraceCopyButton, StackTraceError, StackTraceErrorMessage, StackTraceErrorType, StackTraceExpandButton, StackTraceFrames, StackTraceHeader };

package/dist/components/ai-elements/suggestion.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { ScrollArea } from '@chatsdk-dev/ui/components/scroll-area';
+import { ComponentProps } from 'react';
+
+type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+declare const Suggestions: ({ className, children, ...props }: SuggestionsProps) => react_jsx_runtime.JSX.Element;
+type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+    suggestion: string;
+    onClick?: (suggestion: string) => void;
+};
+declare const Suggestion: ({ suggestion, onClick, className, variant, size, children, ...props }: SuggestionProps) => react_jsx_runtime.JSX.Element;
+
+export { Suggestion, type SuggestionProps, Suggestions, type SuggestionsProps };

package/dist/components/ai-elements/suggestion.js

@@ -0,0 +1,41 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { ScrollArea, ScrollBar } from '@chatsdk-dev/ui/components/scroll-area';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Suggestions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full overflow-x-auto whitespace-nowrap", ...props, children: [
+  /* @__PURE__ */ jsx("div", { className: cn("flex w-max flex-nowrap items-center gap-2", className), children }),
+  /* @__PURE__ */ jsx(ScrollBar, { className: "hidden", orientation: "horizontal" })
+] });
+var Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}) => {
+  const handleClick = useCallback(() => {
+    onClick?.(suggestion);
+  }, [onClick, suggestion]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("cursor-pointer rounded-full px-4", className),
+      onClick: handleClick,
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: children || suggestion
+    }
+  );
+};
+
+export { Suggestion, Suggestions };