@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,202 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import {
+  useRive,
+  useStateMachineInput,
+  useViewModel,
+  useViewModelInstance,
+  useViewModelInstanceColor
+} from "@rive-app/react-webgl2";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+const stateMachine = "default";
+const sources = {
+  command: {
+    dynamicColor: true,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/command-2.0.riv"
+  },
+  glint: {
+    dynamicColor: true,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/glint-2.0.riv"
+  },
+  halo: {
+    dynamicColor: true,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/halo-2.0.riv"
+  },
+  mana: {
+    dynamicColor: false,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/mana-2.0.riv"
+  },
+  obsidian: {
+    dynamicColor: true,
+    hasModel: true,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/obsidian-2.0.riv"
+  },
+  opal: {
+    dynamicColor: false,
+    hasModel: false,
+    source: "https://ejiidnob33g9ap1r.public.blob.vercel-storage.com/orb-1.2.riv"
+  }
+};
+const getCurrentTheme = () => {
+  if (typeof window !== "undefined") {
+    if (document.documentElement.classList.contains("dark")) {
+      return "dark";
+    }
+    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+  }
+  return "light";
+};
+const useTheme = (enabled) => {
+  const [theme, setTheme] = useState(getCurrentTheme);
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      setTheme(getCurrentTheme());
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: ["class"],
+      attributes: true
+    });
+    let mql = null;
+    const handleMediaChange = () => {
+      setTheme(getCurrentTheme());
+    };
+    if (window.matchMedia) {
+      mql = window.matchMedia("(prefers-color-scheme: dark)");
+      mql.addEventListener("change", handleMediaChange);
+    }
+    return () => {
+      observer.disconnect();
+      if (mql) {
+        mql.removeEventListener("change", handleMediaChange);
+      }
+    };
+  }, [enabled]);
+  return theme;
+};
+const PersonaWithModel = memo(
+  ({ rive, source, children }) => {
+    const theme = useTheme(source.dynamicColor);
+    const viewModel = useViewModel(rive, { useDefault: true });
+    const viewModelInstance = useViewModelInstance(viewModel, {
+      rive,
+      useDefault: true
+    });
+    const viewModelInstanceColor = useViewModelInstanceColor(
+      "color",
+      viewModelInstance
+    );
+    useEffect(() => {
+      if (!(viewModelInstanceColor && source.dynamicColor)) {
+        return;
+      }
+      const [r, g, b] = theme === "dark" ? [255, 255, 255] : [0, 0, 0];
+      viewModelInstanceColor.setRgb(r, g, b);
+    }, [viewModelInstanceColor, theme, source.dynamicColor]);
+    return children;
+  }
+);
+PersonaWithModel.displayName = "PersonaWithModel";
+const PersonaWithoutModel = memo(
+  ({ children }) => children
+);
+PersonaWithoutModel.displayName = "PersonaWithoutModel";
+const Persona = memo(
+  ({
+    variant = "obsidian",
+    state = "idle",
+    onLoad,
+    onLoadError,
+    onReady,
+    onPause,
+    onPlay,
+    onStop,
+    className
+  }) => {
+    const source = sources[variant];
+    if (!source) {
+      throw new Error(`Invalid variant: ${variant}`);
+    }
+    const callbacksRef = useRef({
+      onLoad,
+      onLoadError,
+      onPause,
+      onPlay,
+      onReady,
+      onStop
+    });
+    useEffect(() => {
+      callbacksRef.current = {
+        onLoad,
+        onLoadError,
+        onPause,
+        onPlay,
+        onReady,
+        onStop
+      };
+    }, [onLoad, onLoadError, onPause, onPlay, onReady, onStop]);
+    const stableCallbacks = useMemo(
+      () => ({
+        onLoad: ((loadedRive) => callbacksRef.current.onLoad?.(
+          loadedRive
+        )),
+        onLoadError: ((err) => callbacksRef.current.onLoadError?.(
+          err
+        )),
+        onPause: ((event) => callbacksRef.current.onPause?.(event)),
+        onPlay: ((event) => callbacksRef.current.onPlay?.(event)),
+        onReady: () => callbacksRef.current.onReady?.(),
+        onStop: ((event) => callbacksRef.current.onStop?.(event))
+      }),
+      []
+    );
+    const { rive, RiveComponent } = useRive({
+      autoplay: true,
+      onLoad: stableCallbacks.onLoad,
+      onLoadError: stableCallbacks.onLoadError,
+      onPause: stableCallbacks.onPause,
+      onPlay: stableCallbacks.onPlay,
+      onRiveReady: stableCallbacks.onReady,
+      onStop: stableCallbacks.onStop,
+      src: source.source,
+      stateMachines: stateMachine
+    });
+    const listeningInput = useStateMachineInput(
+      rive,
+      stateMachine,
+      "listening"
+    );
+    const thinkingInput = useStateMachineInput(rive, stateMachine, "thinking");
+    const speakingInput = useStateMachineInput(rive, stateMachine, "speaking");
+    const asleepInput = useStateMachineInput(rive, stateMachine, "asleep");
+    useEffect(() => {
+      if (listeningInput) {
+        listeningInput.value = state === "listening";
+      }
+      if (thinkingInput) {
+        thinkingInput.value = state === "thinking";
+      }
+      if (speakingInput) {
+        speakingInput.value = state === "speaking";
+      }
+      if (asleepInput) {
+        asleepInput.value = state === "asleep";
+      }
+    }, [state, listeningInput, thinkingInput, speakingInput, asleepInput]);
+    const Component = source.hasModel ? PersonaWithModel : PersonaWithoutModel;
+    return /* @__PURE__ */ jsx(Component, { rive, source, children: /* @__PURE__ */ jsx(RiveComponent, { className: cn("size-16 shrink-0", className) }) });
+  }
+);
+Persona.displayName = "Persona";
+export {
+  Persona
+};

package/dist/components/ai-elements/plan.cjs

@@ -0,0 +1,90 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _button = require('../ui/button');
+
+
+
+
+
+
+
+
+var _card = require('../ui/card');
+
+
+
+
+var _collapsible = require('../ui/collapsible');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+var _shimmer = require('./shimmer');
+const PlanContext = _react.createContext.call(void 0, null);
+const usePlan = () => {
+  const context = _react.use.call(void 0, PlanContext);
+  if (!context) {
+    throw new Error("Plan components must be used within Plan");
+  }
+  return context;
+};
+const Plan = ({
+  className,
+  isStreaming = false,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PlanContext.Provider, { value: { isStreaming }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.Collapsible, { asChild: true, "data-slot": "plan", ...props, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.Card, { className: _utils.cn.call(void 0, "shadow-none", className), children }) }) });
+const PlanHeader = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _card.CardHeader,
+  {
+    className: _utils.cn.call(void 0, "flex items-start justify-between", className),
+    "data-slot": "plan-header",
+    ...props
+  }
+);
+const PlanTitle = ({ children, ...props }) => {
+  const { isStreaming } = usePlan();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.CardTitle, { "data-slot": "plan-title", ...props, children: isStreaming ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _shimmer.Shimmer, { children }) : children });
+};
+const PlanDescription = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { isStreaming } = usePlan();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _card.CardDescription,
+    {
+      className: _utils.cn.call(void 0, "text-balance", className),
+      "data-slot": "plan-description",
+      ...props,
+      children: isStreaming ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _shimmer.Shimmer, { children }) : children
+    }
+  );
+};
+const PlanAction = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.CardAction, { "data-slot": "plan-action", ...props });
+const PlanContent = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleContent, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.CardContent, { "data-slot": "plan-content", ...props }) });
+const PlanFooter = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _card.CardFooter, { "data-slot": "plan-footer", ...props });
+const PlanTrigger = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _button.Button,
+  {
+    className: _utils.cn.call(void 0, "size-8", className),
+    "data-slot": "plan-trigger",
+    size: "icon",
+    variant: "ghost",
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronsUpDownIcon, { className: "size-4" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Toggle plan" })
+    ]
+  }
+) });
+
+
+
+
+
+
+
+
+
+exports.Plan = Plan; exports.PlanAction = PlanAction; exports.PlanContent = PlanContent; exports.PlanDescription = PlanDescription; exports.PlanFooter = PlanFooter; exports.PlanHeader = PlanHeader; exports.PlanTitle = PlanTitle; exports.PlanTrigger = PlanTrigger;

package/dist/components/ai-elements/plan.d.cts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { CardAction, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card.cjs';
+import { Collapsible, CollapsibleTrigger } from '../ui/collapsible.cjs';
+import 'radix-ui';
+
+type PlanProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+};
+declare const Plan: ({ className, isStreaming, children, ...props }: PlanProps) => react_jsx_runtime.JSX.Element;
+type PlanHeaderProps = ComponentProps<typeof CardHeader>;
+declare const PlanHeader: ({ className, ...props }: PlanHeaderProps) => react_jsx_runtime.JSX.Element;
+type PlanTitleProps = Omit<ComponentProps<typeof CardTitle>, "children"> & {
+    children: string;
+};
+declare const PlanTitle: ({ children, ...props }: PlanTitleProps) => react_jsx_runtime.JSX.Element;
+type PlanDescriptionProps = Omit<ComponentProps<typeof CardDescription>, "children"> & {
+    children: string;
+};
+declare const PlanDescription: ({ className, children, ...props }: PlanDescriptionProps) => react_jsx_runtime.JSX.Element;
+type PlanActionProps = ComponentProps<typeof CardAction>;
+declare const PlanAction: (props: PlanActionProps) => react_jsx_runtime.JSX.Element;
+type PlanContentProps = ComponentProps<typeof CardContent>;
+declare const PlanContent: (props: PlanContentProps) => react_jsx_runtime.JSX.Element;
+type PlanFooterProps = ComponentProps<"div">;
+declare const PlanFooter: (props: PlanFooterProps) => react_jsx_runtime.JSX.Element;
+type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const PlanTrigger: ({ className, ...props }: PlanTriggerProps) => react_jsx_runtime.JSX.Element;
+
+export { Plan, PlanAction, type PlanActionProps, PlanContent, type PlanContentProps, PlanDescription, type PlanDescriptionProps, PlanFooter, type PlanFooterProps, PlanHeader, type PlanHeaderProps, type PlanProps, PlanTitle, type PlanTitleProps, PlanTrigger, type PlanTriggerProps };

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

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { CardAction, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card.js';
+import { Collapsible, CollapsibleTrigger } from '../ui/collapsible.js';
+import 'radix-ui';
+
+type PlanProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+};
+declare const Plan: ({ className, isStreaming, children, ...props }: PlanProps) => react_jsx_runtime.JSX.Element;
+type PlanHeaderProps = ComponentProps<typeof CardHeader>;
+declare const PlanHeader: ({ className, ...props }: PlanHeaderProps) => react_jsx_runtime.JSX.Element;
+type PlanTitleProps = Omit<ComponentProps<typeof CardTitle>, "children"> & {
+    children: string;
+};
+declare const PlanTitle: ({ children, ...props }: PlanTitleProps) => react_jsx_runtime.JSX.Element;
+type PlanDescriptionProps = Omit<ComponentProps<typeof CardDescription>, "children"> & {
+    children: string;
+};
+declare const PlanDescription: ({ className, children, ...props }: PlanDescriptionProps) => react_jsx_runtime.JSX.Element;
+type PlanActionProps = ComponentProps<typeof CardAction>;
+declare const PlanAction: (props: PlanActionProps) => react_jsx_runtime.JSX.Element;
+type PlanContentProps = ComponentProps<typeof CardContent>;
+declare const PlanContent: (props: PlanContentProps) => react_jsx_runtime.JSX.Element;
+type PlanFooterProps = ComponentProps<"div">;
+declare const PlanFooter: (props: PlanFooterProps) => react_jsx_runtime.JSX.Element;
+type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const PlanTrigger: ({ className, ...props }: PlanTriggerProps) => react_jsx_runtime.JSX.Element;
+
+export { Plan, PlanAction, type PlanActionProps, PlanContent, type PlanContentProps, PlanDescription, type PlanDescriptionProps, PlanFooter, type PlanFooterProps, PlanHeader, type PlanHeaderProps, type PlanProps, PlanTitle, type PlanTitleProps, PlanTrigger, type PlanTriggerProps };

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import { ChevronsUpDownIcon } from "lucide-react";
+import { createContext, use } from "react";
+import { Shimmer } from "./shimmer";
+const PlanContext = createContext(null);
+const usePlan = () => {
+  const context = use(PlanContext);
+  if (!context) {
+    throw new Error("Plan components must be used within Plan");
+  }
+  return context;
+};
+const Plan = ({
+  className,
+  isStreaming = false,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(PlanContext.Provider, { value: { isStreaming }, children: /* @__PURE__ */ jsx(Collapsible, { asChild: true, "data-slot": "plan", ...props, children: /* @__PURE__ */ jsx(Card, { className: cn("shadow-none", className), children }) }) });
+const PlanHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardHeader,
+  {
+    className: cn("flex items-start justify-between", className),
+    "data-slot": "plan-header",
+    ...props
+  }
+);
+const PlanTitle = ({ children, ...props }) => {
+  const { isStreaming } = usePlan();
+  return /* @__PURE__ */ jsx(CardTitle, { "data-slot": "plan-title", ...props, children: isStreaming ? /* @__PURE__ */ jsx(Shimmer, { children }) : children });
+};
+const PlanDescription = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { isStreaming } = usePlan();
+  return /* @__PURE__ */ jsx(
+    CardDescription,
+    {
+      className: cn("text-balance", className),
+      "data-slot": "plan-description",
+      ...props,
+      children: isStreaming ? /* @__PURE__ */ jsx(Shimmer, { children }) : children
+    }
+  );
+};
+const PlanAction = (props) => /* @__PURE__ */ jsx(CardAction, { "data-slot": "plan-action", ...props });
+const PlanContent = (props) => /* @__PURE__ */ jsx(CollapsibleContent, { asChild: true, children: /* @__PURE__ */ jsx(CardContent, { "data-slot": "plan-content", ...props }) });
+const PlanFooter = (props) => /* @__PURE__ */ jsx(CardFooter, { "data-slot": "plan-footer", ...props });
+const PlanTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  Button,
+  {
+    className: cn("size-8", className),
+    "data-slot": "plan-trigger",
+    size: "icon",
+    variant: "ghost",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle plan" })
+    ]
+  }
+) });
+export {
+  Plan,
+  PlanAction,
+  PlanContent,
+  PlanDescription,
+  PlanFooter,
+  PlanHeader,
+  PlanTitle,
+  PlanTrigger
+};

package/dist/components/ai-elements/prompt-input-context.cjs

@@ -0,0 +1,161 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+
+
+var _dropdownmenu = require('../ui/dropdown-menu');
+var _lucidereact = require('lucide-react');
+var _nanoid = require('nanoid');
+
+
+
+
+
+
+
+
+var _react = require('react');
+const PromptInputController = _react.createContext.call(void 0, null);
+const ProviderAttachmentsContext = _react.createContext.call(void 0, null);
+const LocalAttachmentsContext = _react.createContext.call(void 0, null);
+const LocalReferencedSourcesContext = _react.createContext.call(void 0, null);
+const usePromptInputController = () => {
+  const ctx = _react.use.call(void 0, PromptInputController);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use usePromptInputController()."
+    );
+  }
+  return ctx;
+};
+const useOptionalPromptInputController = () => _react.use.call(void 0, PromptInputController);
+const useProviderAttachments = () => {
+  const ctx = _react.use.call(void 0, ProviderAttachmentsContext);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use useProviderAttachments()."
+    );
+  }
+  return ctx;
+};
+const useOptionalProviderAttachments = () => _react.use.call(void 0, ProviderAttachmentsContext);
+const usePromptInputAttachments = () => {
+  const provider = useOptionalProviderAttachments();
+  const local = _react.use.call(void 0, LocalAttachmentsContext);
+  const context = _nullishCoalesce(local, () => ( provider));
+  if (!context) {
+    throw new Error(
+      "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider"
+    );
+  }
+  return context;
+};
+const usePromptInputReferencedSources = () => {
+  const ctx = _react.use.call(void 0, LocalReferencedSourcesContext);
+  if (!ctx) {
+    throw new Error(
+      "usePromptInputReferencedSources must be used within a LocalReferencedSourcesContext.Provider"
+    );
+  }
+  return ctx;
+};
+const PromptInputProvider = ({
+  initialInput: initialTextInput = "",
+  children
+}) => {
+  const [textInput, setTextInput] = _react.useState.call(void 0, initialTextInput);
+  const clearInput = _react.useCallback.call(void 0, () => setTextInput(""), []);
+  const [attachmentFiles, setAttachmentFiles] = _react.useState.call(void 0, []);
+  const fileInputRef = _react.useRef.call(void 0, null);
+  const openRef = _react.useRef.call(void 0, () => {
+  });
+  const add = _react.useCallback.call(void 0, (files) => {
+    const incoming = [...files];
+    if (incoming.length === 0) return;
+    setAttachmentFiles((prev) => [
+      ...prev,
+      ...incoming.map((file) => ({
+        filename: file.name,
+        id: _nanoid.nanoid.call(void 0, ),
+        mediaType: file.type,
+        type: "file",
+        url: URL.createObjectURL(file)
+      }))
+    ]);
+  }, []);
+  const remove = _react.useCallback.call(void 0, (id) => {
+    setAttachmentFiles((prev) => {
+      const found = prev.find((f) => f.id === id);
+      if (_optionalChain([found, 'optionalAccess', _ => _.url])) URL.revokeObjectURL(found.url);
+      return prev.filter((f) => f.id !== id);
+    });
+  }, []);
+  const clear = _react.useCallback.call(void 0, () => {
+    setAttachmentFiles((prev) => {
+      for (const f of prev) {
+        if (f.url) URL.revokeObjectURL(f.url);
+      }
+      return [];
+    });
+  }, []);
+  const attachmentsRef = _react.useRef.call(void 0, attachmentFiles);
+  _react.useEffect.call(void 0, () => {
+    attachmentsRef.current = attachmentFiles;
+  }, [attachmentFiles]);
+  _react.useEffect.call(void 0, () => () => {
+    for (const f of attachmentsRef.current) {
+      if (f.url) URL.revokeObjectURL(f.url);
+    }
+  }, []);
+  const openFileDialog = _react.useCallback.call(void 0, () => {
+    _optionalChain([openRef, 'access', _2 => _2.current, 'optionalCall', _3 => _3()]);
+  }, []);
+  const attachments = _react.useMemo.call(void 0, 
+    () => ({ add, clear, fileInputRef, files: attachmentFiles, openFileDialog, remove }),
+    [attachmentFiles, add, remove, clear, openFileDialog]
+  );
+  const __registerFileInput = _react.useCallback.call(void 0, 
+    (ref, open) => {
+      fileInputRef.current = ref.current;
+      openRef.current = open;
+    },
+    []
+  );
+  const controller = _react.useMemo.call(void 0, 
+    () => ({
+      __registerFileInput,
+      attachments,
+      textInput: { clear: clearInput, setInput: setTextInput, value: textInput }
+    }),
+    [textInput, clearInput, attachments, __registerFileInput]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PromptInputController.Provider, { value: controller, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProviderAttachmentsContext.Provider, { value: attachments, children }) });
+};
+const PromptInputActionAddAttachments = ({
+  label = "Add photos or files",
+  ...props
+}) => {
+  const attachments = usePromptInputAttachments();
+  const handleSelect = _react.useCallback.call(void 0, 
+    (e) => {
+      e.preventDefault();
+      attachments.openFileDialog();
+    },
+    [attachments]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dropdownmenu.DropdownMenuItem, { ...props, onSelect: handleSelect, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ImageIcon, { className: "mr-2 size-4" }),
+    " ",
+    label
+  ] });
+};
+
+
+
+
+
+
+
+
+
+
+exports.LocalAttachmentsContext = LocalAttachmentsContext; exports.LocalReferencedSourcesContext = LocalReferencedSourcesContext; exports.PromptInputActionAddAttachments = PromptInputActionAddAttachments; exports.PromptInputProvider = PromptInputProvider; exports.useOptionalPromptInputController = useOptionalPromptInputController; exports.usePromptInputAttachments = usePromptInputAttachments; exports.usePromptInputController = usePromptInputController; exports.usePromptInputReferencedSources = usePromptInputReferencedSources; exports.useProviderAttachments = useProviderAttachments;

package/dist/components/ai-elements/prompt-input-context.d.cts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { RefObject, ComponentProps, PropsWithChildren } from 'react';
+import { FileUIPart, SourceDocumentUIPart } from 'ai';
+import { DropdownMenuItem } from '../ui/dropdown-menu.cjs';
+import 'radix-ui';
+
+interface AttachmentsContext {
+    files: (FileUIPart & {
+        id: string;
+    })[];
+    add: (files: File[] | FileList) => void;
+    remove: (id: string) => void;
+    clear: () => void;
+    openFileDialog: () => void;
+    fileInputRef: RefObject<HTMLInputElement | null>;
+}
+interface TextInputContext {
+    value: string;
+    setInput: (v: string) => void;
+    clear: () => void;
+}
+interface PromptInputControllerProps {
+    textInput: TextInputContext;
+    attachments: AttachmentsContext;
+    /** INTERNAL: Allows PromptInput to register its file textInput + "open" callback */
+    __registerFileInput: (ref: RefObject<HTMLInputElement | null>, open: () => void) => void;
+}
+interface ReferencedSourcesContext {
+    sources: (SourceDocumentUIPart & {
+        id: string;
+    })[];
+    add: (sources: SourceDocumentUIPart[] | SourceDocumentUIPart) => void;
+    remove: (id: string) => void;
+    clear: () => void;
+}
+declare const LocalAttachmentsContext: React.Context<AttachmentsContext | null>;
+declare const LocalReferencedSourcesContext: React.Context<ReferencedSourcesContext | null>;
+declare const usePromptInputController: () => PromptInputControllerProps;
+/** Optional variant, does NOT throw. Useful for dual-mode components. */
+declare const useOptionalPromptInputController: () => PromptInputControllerProps | null;
+declare const useProviderAttachments: () => AttachmentsContext;
+declare const usePromptInputAttachments: () => AttachmentsContext;
+declare const usePromptInputReferencedSources: () => ReferencedSourcesContext;
+type PromptInputProviderProps = PropsWithChildren<{
+    initialInput?: string;
+}>;
+/**
+ * Optional global provider that lifts PromptInput state outside of PromptInput.
+ * If you don't use it, PromptInput stays fully self-managed.
+ */
+declare const PromptInputProvider: ({ initialInput: initialTextInput, children, }: PromptInputProviderProps) => react_jsx_runtime.JSX.Element;
+type PromptInputActionAddAttachmentsProps = ComponentProps<typeof DropdownMenuItem> & {
+    label?: string;
+};
+declare const PromptInputActionAddAttachments: ({ label, ...props }: PromptInputActionAddAttachmentsProps) => react_jsx_runtime.JSX.Element;
+
+export { type AttachmentsContext, LocalAttachmentsContext, LocalReferencedSourcesContext, PromptInputActionAddAttachments, type PromptInputActionAddAttachmentsProps, type PromptInputControllerProps, PromptInputProvider, type PromptInputProviderProps, type ReferencedSourcesContext, type TextInputContext, useOptionalPromptInputController, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };