@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/schema-display.js

@@ -0,0 +1,313 @@
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { ChevronRightIcon } from 'lucide-react';
+import { createContext, useContext, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SchemaDisplayContext = createContext({
+  method: "GET",
+  path: ""
+});
+var methodStyles = {
+  DELETE: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  GET: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  PATCH: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+  POST: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  PUT: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
+};
+var SchemaDisplayHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center gap-3 border-b px-4 py-3", className),
+    ...props,
+    children
+  }
+);
+var SchemaDisplayMethod = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { method } = useContext(SchemaDisplayContext);
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      className: cn("font-mono text-xs", methodStyles[method], className),
+      variant: "secondary",
+      ...props,
+      children: children ?? method
+    }
+  );
+};
+var SchemaDisplayPath = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { path } = useContext(SchemaDisplayContext);
+  const highlightedPath = path.replaceAll(
+    /\{([^}]+)\}/g,
+    '<span class="text-blue-600 dark:text-blue-400">{$1}</span>'
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("font-mono text-sm", className),
+      dangerouslySetInnerHTML: { __html: children ?? highlightedPath },
+      ...props
+    }
+  );
+};
+var SchemaDisplayDescription = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { description } = useContext(SchemaDisplayContext);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "border-b px-4 py-3 text-muted-foreground text-sm",
+        className
+      ),
+      ...props,
+      children: children ?? description
+    }
+  );
+};
+var SchemaDisplayContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("divide-y", className), ...props, children });
+var SchemaDisplayParameter = ({
+  name,
+  type,
+  required,
+  description,
+  location,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { className: cn("px-4 py-3 pl-10", className), ...props, children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: name }),
+    /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: type }),
+    location && /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "secondary", children: location }),
+    required && /* @__PURE__ */ jsx(
+      Badge,
+      {
+        className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+        variant: "secondary",
+        children: "required"
+      }
+    )
+  ] }),
+  description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground text-sm", children: description })
+] });
+var SchemaDisplayParameters = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { parameters } = useContext(SchemaDisplayContext);
+  return /* @__PURE__ */ jsxs(Collapsible, { className: cn(className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Parameters" }),
+      /* @__PURE__ */ jsx(Badge, { className: "ml-auto text-xs", variant: "secondary", children: parameters?.length })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "divide-y border-t", children: children ?? parameters?.map((param) => /* @__PURE__ */ jsx(SchemaDisplayParameter, { ...param }, param.name)) }) })
+  ] });
+};
+var SchemaDisplayProperty = ({
+  name,
+  type,
+  required,
+  description,
+  properties,
+  items,
+  depth = 0,
+  className,
+  ...props
+}) => {
+  const hasChildren = properties || items;
+  const paddingLeft = 40 + depth * 16;
+  if (hasChildren) {
+    return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen: depth < 2, children: [
+      /* @__PURE__ */ jsxs(
+        CollapsibleTrigger,
+        {
+          className: cn(
+            "group flex w-full items-center gap-2 py-3 text-left transition-colors hover:bg-muted/50",
+            className
+          ),
+          style: { paddingLeft },
+          children: [
+            /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: name }),
+            /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: type }),
+            required && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+                variant: "secondary",
+                children: "required"
+              }
+            )
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "pb-2 text-muted-foreground text-sm",
+          style: { paddingLeft: paddingLeft + 24 },
+          children: description
+        }
+      ),
+      /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", { className: "divide-y border-t", children: [
+        properties?.map((prop) => /* @__PURE__ */ jsx(
+          SchemaDisplayProperty,
+          {
+            ...prop,
+            depth: depth + 1
+          },
+          prop.name
+        )),
+        items && /* @__PURE__ */ jsx(
+          SchemaDisplayProperty,
+          {
+            ...items,
+            depth: depth + 1,
+            name: `${name}[]`
+          }
+        )
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("py-3 pr-4", className),
+      style: { paddingLeft },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: name }),
+          /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: type }),
+          required && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              className: "bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400",
+              variant: "secondary",
+              children: "required"
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 pl-6 text-muted-foreground text-sm", children: description })
+      ]
+    }
+  );
+};
+var SchemaDisplayRequest = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { requestBody } = useContext(SchemaDisplayContext);
+  return /* @__PURE__ */ jsxs(Collapsible, { className: cn(className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Request Body" })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "border-t", children: children ?? requestBody?.map((prop) => /* @__PURE__ */ jsx(SchemaDisplayProperty, { ...prop, depth: 0 }, prop.name)) }) })
+  ] });
+};
+var SchemaDisplayResponse = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { responseBody } = useContext(SchemaDisplayContext);
+  return /* @__PURE__ */ jsxs(Collapsible, { className: cn(className), defaultOpen: true, ...props, children: [
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50", children: [
+      /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Response" })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "border-t", children: children ?? responseBody?.map((prop) => /* @__PURE__ */ jsx(SchemaDisplayProperty, { ...prop, depth: 0 }, prop.name)) }) })
+  ] });
+};
+var SchemaDisplay = ({
+  method,
+  path,
+  description,
+  parameters,
+  requestBody,
+  responseBody,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({
+      description,
+      method,
+      parameters,
+      path,
+      requestBody,
+      responseBody
+    }),
+    [description, method, parameters, path, requestBody, responseBody]
+  );
+  return /* @__PURE__ */ jsx(SchemaDisplayContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-lg border bg-background",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SchemaDisplayHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(SchemaDisplayMethod, {}),
+          /* @__PURE__ */ jsx(SchemaDisplayPath, {})
+        ] }) }),
+        description && /* @__PURE__ */ jsx(SchemaDisplayDescription, {}),
+        /* @__PURE__ */ jsxs(SchemaDisplayContent, { children: [
+          parameters && parameters.length > 0 && /* @__PURE__ */ jsx(SchemaDisplayParameters, {}),
+          requestBody && requestBody.length > 0 && /* @__PURE__ */ jsx(SchemaDisplayRequest, {}),
+          responseBody && responseBody.length > 0 && /* @__PURE__ */ jsx(SchemaDisplayResponse, {})
+        ] })
+      ] })
+    }
+  ) });
+};
+var SchemaDisplayBody = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("divide-y", className), ...props, children });
+var SchemaDisplayExample = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "pre",
+  {
+    className: cn(
+      "mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-sm",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { SchemaDisplay, SchemaDisplayBody, SchemaDisplayContent, SchemaDisplayDescription, SchemaDisplayExample, SchemaDisplayHeader, SchemaDisplayMethod, SchemaDisplayParameter, SchemaDisplayParameters, SchemaDisplayPath, SchemaDisplayProperty, SchemaDisplayRequest, SchemaDisplayResponse };

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

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ElementType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TextShimmerProps {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+}
+declare const Shimmer: react.MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => react_jsx_runtime.JSX.Element>;
+
+export { Shimmer, type TextShimmerProps };

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

@@ -0,0 +1 @@
+export { Shimmer } from '../../chunk-NIC3MOMY.js';

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

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '@chatsdk-dev/ui/components/input-group';
+import { ComponentProps } from 'react';
+
+type SnippetProps = ComponentProps<typeof InputGroup> & {
+    code: string;
+};
+declare const Snippet: ({ code, className, children, ...props }: SnippetProps) => react_jsx_runtime.JSX.Element;
+type SnippetAddonProps = ComponentProps<typeof InputGroupAddon>;
+declare const SnippetAddon: (props: SnippetAddonProps) => react_jsx_runtime.JSX.Element;
+type SnippetTextProps = ComponentProps<typeof InputGroupText>;
+declare const SnippetText: ({ className, ...props }: SnippetTextProps) => react_jsx_runtime.JSX.Element;
+type SnippetInputProps = Omit<ComponentProps<typeof InputGroupInput>, "readOnly" | "value">;
+declare const SnippetInput: ({ className, ...props }: SnippetInputProps) => react_jsx_runtime.JSX.Element;
+type SnippetCopyButtonProps = ComponentProps<typeof InputGroupButton> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const SnippetCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: SnippetCopyButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { Snippet, SnippetAddon, type SnippetAddonProps, SnippetCopyButton, type SnippetCopyButtonProps, SnippetInput, type SnippetInputProps, type SnippetProps, SnippetText, type SnippetTextProps };

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

@@ -0,0 +1,90 @@
+import { InputGroup, InputGroupAddon, InputGroupText, InputGroupInput, InputGroupButton } from '@chatsdk-dev/ui/components/input-group';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+import { createContext, useMemo, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var SnippetContext = createContext({
+  code: ""
+});
+var Snippet = ({
+  code,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ code }), [code]);
+  return /* @__PURE__ */ jsx(SnippetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(InputGroup, { className: cn("font-mono", className), ...props, children }) });
+};
+var SnippetAddon = (props) => /* @__PURE__ */ jsx(InputGroupAddon, { ...props });
+var SnippetText = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  InputGroupText,
+  {
+    className: cn("pl-2 font-normal text-muted-foreground", className),
+    ...props
+  }
+);
+var SnippetInput = ({ className, ...props }) => {
+  const { code } = useContext(SnippetContext);
+  return /* @__PURE__ */ jsx(
+    InputGroupInput,
+    {
+      className: cn("text-foreground", className),
+      readOnly: true,
+      value: code,
+      ...props
+    }
+  );
+};
+var SnippetCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(0);
+  const { code } = useContext(SnippetContext);
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      }
+    } catch (error) {
+      onError?.(error);
+    }
+  }, [code, onCopy, onError, timeout, isCopied]);
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      "aria-label": "Copy",
+      className,
+      onClick: copyToClipboard,
+      size: "icon-sm",
+      title: "Copy",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { className: "size-3.5", size: 14 })
+    }
+  );
+};
+
+export { Snippet, SnippetAddon, SnippetCopyButton, SnippetInput, SnippetText };

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

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CollapsibleContent, CollapsibleTrigger } from '@chatsdk-dev/ui/components/collapsible';
+import { ComponentProps } from 'react';
+
+type SourcesProps = ComponentProps<"div">;
+declare const Sources: ({ className, ...props }: SourcesProps) => react_jsx_runtime.JSX.Element;
+type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    count: number;
+};
+declare const SourcesTrigger: ({ className, count, children, ...props }: SourcesTriggerProps) => react_jsx_runtime.JSX.Element;
+type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const SourcesContent: ({ className, ...props }: SourcesContentProps) => react_jsx_runtime.JSX.Element;
+type SourceProps = ComponentProps<"a">;
+declare const Source: ({ href, title, children, ...props }: SourceProps) => react_jsx_runtime.JSX.Element;
+
+export { Source, type SourceProps, Sources, SourcesContent, type SourcesContentProps, type SourcesProps, SourcesTrigger, type SourcesTriggerProps };

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

@@ -0,0 +1,62 @@
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { ChevronDownIcon, BookIcon } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var Sources = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("not-prose mb-4 text-primary text-xs", className),
+    ...props
+  }
+);
+var SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleTrigger,
+  {
+    className: cn("flex items-center gap-2", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { className: "font-medium", children: [
+        "Used ",
+        count,
+        " sources"
+      ] }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4" })
+    ] })
+  }
+);
+var SourcesContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  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
+  }
+);
+var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    className: "flex items-center gap-2",
+    href,
+    rel: "noreferrer",
+    target: "_blank",
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BookIcon, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "block font-medium", children: title })
+    ] })
+  }
+);
+
+export { Source, Sources, SourcesContent, SourcesTrigger };

package/dist/components/ai-elements/speech-input.d.ts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { ComponentProps } 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 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;
+};
+declare const SpeechInput: ({ className, onTranscriptionChange, onAudioRecorded, lang, ...props }: SpeechInputProps) => react_jsx_runtime.JSX.Element;
+
+export { SpeechInput, type SpeechInputProps };