@cloudbase/agent-react-ui 1.0.1-alpha.32

package/dist/index.mjs

@@ -0,0 +1,2182 @@
+// src/components/ui/button.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/hover-card.tsx
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+
+// src/components/ai-elements/attachments.tsx
+import {
+  FileTextIcon,
+  GlobeIcon,
+  ImageIcon,
+  Music2Icon,
+  PaperclipIcon,
+  VideoIcon,
+  XIcon
+} from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var getMediaCategory = (data) => {
+  if (data.type === "source-document") {
+    return "source";
+  }
+  const mediaType = data.mediaType ?? "";
+  if (mediaType.startsWith("image/")) {
+    return "image";
+  }
+  if (mediaType.startsWith("video/")) {
+    return "video";
+  }
+  if (mediaType.startsWith("audio/")) {
+    return "audio";
+  }
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) {
+    return "document";
+  }
+  return "unknown";
+};
+var AttachmentsContext = createContext(null);
+var AttachmentContext = createContext(null);
+var useAttachmentsContext = () => useContext(AttachmentsContext) ?? { variant: "grid" };
+var useAttachmentContext = () => {
+  const ctx = useContext(AttachmentContext);
+  if (!ctx) {
+    throw new Error("Attachment components must be used within <Attachment>");
+  }
+  return ctx;
+};
+var Attachments = ({
+  variant = "grid",
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ variant }), [variant]);
+  return /* @__PURE__ */ jsx3(AttachmentsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "flex items-start",
+        variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
+        variant === "grid" && "ml-auto w-fit",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+var Attachment = ({
+  data,
+  onRemove,
+  className,
+  children,
+  ...props
+}) => {
+  const { variant } = useAttachmentsContext();
+  const mediaCategory = getMediaCategory(data);
+  const contextValue = useMemo(
+    () => ({ data, mediaCategory, onRemove, variant }),
+    [data, mediaCategory, onRemove, variant]
+  );
+  return /* @__PURE__ */ jsx3(AttachmentContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "group relative",
+        variant === "grid" && "size-24 overflow-hidden rounded-lg",
+        variant === "inline" && [
+          "flex h-8 cursor-pointer select-none items-center gap-1.5",
+          "rounded-md border border-border px-1.5",
+          "font-medium text-sm transition-all",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+        ],
+        variant === "list" && [
+          "flex w-full items-center gap-3 rounded-lg border p-3",
+          "hover:bg-accent/50"
+        ],
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+var AttachmentPreview = ({
+  fallbackIcon,
+  className,
+  ...props
+}) => {
+  const { data, mediaCategory, variant } = useAttachmentContext();
+  const iconSize = variant === "inline" ? "size-3" : "size-4";
+  const renderImage = (url, filename, isGrid) => isGrid ? /* @__PURE__ */ jsx3(
+    "img",
+    {
+      alt: filename || "Image",
+      className: "size-full object-cover",
+      height: 96,
+      src: url,
+      width: 96
+    }
+  ) : /* @__PURE__ */ jsx3(
+    "img",
+    {
+      alt: filename || "Image",
+      className: "size-full rounded object-cover",
+      height: 20,
+      src: url,
+      width: 20
+    }
+  );
+  const renderIcon = (Icon) => /* @__PURE__ */ jsx3(Icon, { className: cn(iconSize, "text-muted-foreground") });
+  const renderContent = () => {
+    if (mediaCategory === "image" && data.type === "file" && data.url) {
+      return renderImage(data.url, data.filename, variant === "grid");
+    }
+    if (mediaCategory === "video" && data.type === "file" && data.url) {
+      return /* @__PURE__ */ jsx3("video", { className: "size-full object-cover", muted: true, src: data.url });
+    }
+    const iconMap = {
+      image: ImageIcon,
+      video: VideoIcon,
+      audio: Music2Icon,
+      source: GlobeIcon,
+      document: FileTextIcon,
+      unknown: PaperclipIcon
+    };
+    const Icon = iconMap[mediaCategory];
+    return fallbackIcon ?? renderIcon(Icon);
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-center overflow-hidden",
+        variant === "grid" && "size-full bg-muted",
+        variant === "inline" && "size-5 rounded bg-background",
+        variant === "list" && "size-12 rounded bg-muted",
+        className
+      ),
+      ...props,
+      children: renderContent()
+    }
+  );
+};
+var AttachmentRemove = ({
+  label = "Remove",
+  className,
+  children,
+  ...props
+}) => {
+  const { onRemove, variant } = useAttachmentContext();
+  if (!onRemove) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "aria-label": label,
+      className: cn(
+        variant === "grid" && [
+          "absolute top-2 right-2 size-6 rounded-full p-0",
+          "bg-background/80 backdrop-blur-sm",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "hover:bg-background",
+          "[&>svg]:size-3"
+        ],
+        variant === "inline" && [
+          "size-5 rounded p-0",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "[&>svg]:size-2.5"
+        ],
+        variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        onRemove();
+      },
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: [
+        children ?? /* @__PURE__ */ jsx3(XIcon, {}),
+        /* @__PURE__ */ jsx3("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+};
+
+// src/components/ui/command.tsx
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+// src/components/ui/dialog.tsx
+import { XIcon as XIcon2 } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/components/ui/command.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/components/ui/dropdown-menu.tsx
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// src/components/ui/input-group.tsx
+import { cva as cva2 } from "class-variance-authority";
+
+// src/components/ui/input.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// src/components/ui/textarea.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/input-group.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = cva2(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = cva2(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/select.tsx
+import { CheckIcon as CheckIcon2, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/components/ui/spinner.tsx
+import { Loader2Icon } from "lucide-react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    Loader2Icon,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ai-elements/prompt-input.tsx
+import {
+  CornerDownLeftIcon,
+  ImageIcon as ImageIcon2,
+  PlusIcon,
+  SquareIcon,
+  XIcon as XIcon3
+} from "lucide-react";
+import { nanoid } from "nanoid";
+import {
+  Children,
+  createContext as createContext2,
+  useCallback,
+  useContext as useContext2,
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var PromptInputController = createContext2(
+  null
+);
+var ProviderAttachmentsContext = createContext2(
+  null
+);
+var useOptionalPromptInputController = () => useContext2(PromptInputController);
+var useOptionalProviderAttachments = () => useContext2(ProviderAttachmentsContext);
+function PromptInputProvider({
+  initialInput: initialTextInput = "",
+  children
+}) {
+  const [textInput, setTextInput] = useState(initialTextInput);
+  const clearInput = useCallback(() => setTextInput(""), []);
+  const [attachmentFiles, setAttachmentFiles] = useState([]);
+  const fileInputRef = useRef(null);
+  const openRef = useRef(() => void 0);
+  const add = useCallback((files) => {
+    const incoming = Array.from(files);
+    if (incoming.length === 0) {
+      return;
+    }
+    setAttachmentFiles(
+      (prev) => prev.concat(
+        incoming.map((file) => ({
+          id: nanoid(),
+          type: "file",
+          url: URL.createObjectURL(file),
+          mediaType: file.type,
+          filename: file.name
+        }))
+      )
+    );
+  }, []);
+  const remove = useCallback((id) => {
+    setAttachmentFiles((prev) => {
+      const found = prev.find((f) => f.id === id);
+      if (found?.url) {
+        URL.revokeObjectURL(found.url);
+      }
+      return prev.filter((f) => f.id !== id);
+    });
+  }, []);
+  const clear = useCallback(() => {
+    setAttachmentFiles((prev) => {
+      for (const f of prev) {
+        if (f.url) {
+          URL.revokeObjectURL(f.url);
+        }
+      }
+      return [];
+    });
+  }, []);
+  const attachmentsRef = useRef(attachmentFiles);
+  attachmentsRef.current = attachmentFiles;
+  useEffect(
+    () => () => {
+      for (const f of attachmentsRef.current) {
+        if (f.url) {
+          URL.revokeObjectURL(f.url);
+        }
+      }
+    },
+    []
+  );
+  const openFileDialog = useCallback(() => {
+    openRef.current?.();
+  }, []);
+  const attachments = useMemo2(
+    () => ({
+      files: attachmentFiles,
+      add,
+      remove,
+      clear,
+      openFileDialog,
+      fileInputRef
+    }),
+    [attachmentFiles, add, remove, clear, openFileDialog]
+  );
+  const __registerFileInput = useCallback(
+    (ref, open) => {
+      fileInputRef.current = ref.current;
+      openRef.current = open;
+    },
+    []
+  );
+  const controller = useMemo2(
+    () => ({
+      textInput: {
+        value: textInput,
+        setInput: setTextInput,
+        clear: clearInput
+      },
+      attachments,
+      __registerFileInput
+    }),
+    [textInput, clearInput, attachments, __registerFileInput]
+  );
+  return /* @__PURE__ */ jsx12(PromptInputController.Provider, { value: controller, children: /* @__PURE__ */ jsx12(ProviderAttachmentsContext.Provider, { value: attachments, children }) });
+}
+var LocalAttachmentsContext = createContext2(null);
+var usePromptInputAttachments = () => {
+  const provider = useOptionalProviderAttachments();
+  const local = useContext2(LocalAttachmentsContext);
+  const context = local ?? provider;
+  if (!context) {
+    throw new Error(
+      "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider"
+    );
+  }
+  return context;
+};
+var LocalReferencedSourcesContext = createContext2(null);
+var PromptInput = ({
+  className,
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  onError,
+  onSubmit,
+  children,
+  ...props
+}) => {
+  const controller = useOptionalPromptInputController();
+  const usingProvider = !!controller;
+  const inputRef = useRef(null);
+  const formRef = useRef(null);
+  const [items, setItems] = useState([]);
+  const files = usingProvider ? controller.attachments.files : items;
+  const [referencedSources, setReferencedSources] = useState([]);
+  const filesRef = useRef(files);
+  filesRef.current = files;
+  const openFileDialogLocal = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+  const matchesAccept = useCallback(
+    (f) => {
+      if (!accept || accept.trim() === "") {
+        return true;
+      }
+      const patterns = accept.split(",").map((s) => s.trim()).filter(Boolean);
+      return patterns.some((pattern) => {
+        if (pattern.endsWith("/*")) {
+          const prefix = pattern.slice(0, -1);
+          return f.type.startsWith(prefix);
+        }
+        return f.type === pattern;
+      });
+    },
+    [accept]
+  );
+  const addLocal = useCallback(
+    (fileList) => {
+      const incoming = Array.from(fileList);
+      const accepted = incoming.filter((f) => matchesAccept(f));
+      if (incoming.length && accepted.length === 0) {
+        onError?.({
+          code: "accept",
+          message: "No files match the accepted types."
+        });
+        return;
+      }
+      const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+      const sized = accepted.filter(withinSize);
+      if (accepted.length > 0 && sized.length === 0) {
+        onError?.({
+          code: "max_file_size",
+          message: "All files exceed the maximum size."
+        });
+        return;
+      }
+      setItems((prev) => {
+        const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : void 0;
+        const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+        if (typeof capacity === "number" && sized.length > capacity) {
+          onError?.({
+            code: "max_files",
+            message: "Too many files. Some were not added."
+          });
+        }
+        const next = [];
+        for (const file of capped) {
+          next.push({
+            id: nanoid(),
+            type: "file",
+            url: URL.createObjectURL(file),
+            mediaType: file.type,
+            filename: file.name
+          });
+        }
+        return prev.concat(next);
+      });
+    },
+    [matchesAccept, maxFiles, maxFileSize, onError]
+  );
+  const removeLocal = useCallback(
+    (id) => setItems((prev) => {
+      const found = prev.find((file) => file.id === id);
+      if (found?.url) {
+        URL.revokeObjectURL(found.url);
+      }
+      return prev.filter((file) => file.id !== id);
+    }),
+    []
+  );
+  const addWithProviderValidation = useCallback(
+    (fileList) => {
+      const incoming = Array.from(fileList);
+      const accepted = incoming.filter((f) => matchesAccept(f));
+      if (incoming.length && accepted.length === 0) {
+        onError?.({
+          code: "accept",
+          message: "No files match the accepted types."
+        });
+        return;
+      }
+      const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+      const sized = accepted.filter(withinSize);
+      if (accepted.length > 0 && sized.length === 0) {
+        onError?.({
+          code: "max_file_size",
+          message: "All files exceed the maximum size."
+        });
+        return;
+      }
+      const currentCount = files.length;
+      const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - currentCount) : void 0;
+      const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+      if (typeof capacity === "number" && sized.length > capacity) {
+        onError?.({
+          code: "max_files",
+          message: "Too many files. Some were not added."
+        });
+      }
+      if (capped.length > 0) {
+        controller?.attachments.add(capped);
+      }
+    },
+    [matchesAccept, maxFileSize, maxFiles, onError, files.length, controller]
+  );
+  const clearAttachments = useCallback(
+    () => usingProvider ? controller?.attachments.clear() : setItems((prev) => {
+      for (const file of prev) {
+        if (file.url) {
+          URL.revokeObjectURL(file.url);
+        }
+      }
+      return [];
+    }),
+    [usingProvider, controller]
+  );
+  const clearReferencedSources = useCallback(
+    () => setReferencedSources([]),
+    []
+  );
+  const add = usingProvider ? addWithProviderValidation : addLocal;
+  const remove = usingProvider ? controller.attachments.remove : removeLocal;
+  const openFileDialog = usingProvider ? controller.attachments.openFileDialog : openFileDialogLocal;
+  const clear = useCallback(() => {
+    clearAttachments();
+    clearReferencedSources();
+  }, [clearAttachments, clearReferencedSources]);
+  useEffect(() => {
+    if (!usingProvider) {
+      return;
+    }
+    controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+  }, [usingProvider, controller]);
+  useEffect(() => {
+    if (syncHiddenInput && inputRef.current && files.length === 0) {
+      inputRef.current.value = "";
+    }
+  }, [files, syncHiddenInput]);
+  useEffect(() => {
+    const form = formRef.current;
+    if (!form) {
+      return;
+    }
+    if (globalDrop) {
+      return;
+    }
+    const onDragOver = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+    };
+    const onDrop = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+        add(e.dataTransfer.files);
+      }
+    };
+    form.addEventListener("dragover", onDragOver);
+    form.addEventListener("drop", onDrop);
+    return () => {
+      form.removeEventListener("dragover", onDragOver);
+      form.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  useEffect(() => {
+    if (!globalDrop) {
+      return;
+    }
+    const onDragOver = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+    };
+    const onDrop = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+        add(e.dataTransfer.files);
+      }
+    };
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragover", onDragOver);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  useEffect(
+    () => () => {
+      if (!usingProvider) {
+        for (const f of filesRef.current) {
+          if (f.url) {
+            URL.revokeObjectURL(f.url);
+          }
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- cleanup only on unmount; filesRef always current
+    [usingProvider]
+  );
+  const handleChange = (event) => {
+    if (event.currentTarget.files) {
+      add(event.currentTarget.files);
+    }
+    event.currentTarget.value = "";
+  };
+  const convertBlobUrlToDataUrl = async (url) => {
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = () => resolve(null);
+        reader.readAsDataURL(blob);
+      });
+    } catch {
+      return null;
+    }
+  };
+  const attachmentsCtx = useMemo2(
+    () => ({
+      files: files.map((item) => ({ ...item, id: item.id })),
+      add,
+      remove,
+      clear: clearAttachments,
+      openFileDialog,
+      fileInputRef: inputRef
+    }),
+    [files, add, remove, clearAttachments, openFileDialog]
+  );
+  const refsCtx = useMemo2(
+    () => ({
+      sources: referencedSources,
+      add: (incoming) => {
+        const array = Array.isArray(incoming) ? incoming : [incoming];
+        setReferencedSources(
+          (prev) => prev.concat(array.map((s) => ({ ...s, id: nanoid() })))
+        );
+      },
+      remove: (id) => {
+        setReferencedSources((prev) => prev.filter((s) => s.id !== id));
+      },
+      clear: clearReferencedSources
+    }),
+    [referencedSources, clearReferencedSources]
+  );
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const text = usingProvider ? controller.textInput.value : (() => {
+      const formData = new FormData(form);
+      return formData.get("message") || "";
+    })();
+    if (!usingProvider) {
+      form.reset();
+    }
+    Promise.all(
+      files.map(async ({ id, ...item }) => {
+        if (item.url?.startsWith("blob:")) {
+          const dataUrl = await convertBlobUrlToDataUrl(item.url);
+          return {
+            ...item,
+            url: dataUrl ?? item.url
+          };
+        }
+        return item;
+      })
+    ).then((convertedFiles) => {
+      try {
+        const result = onSubmit({ text, files: convertedFiles }, event);
+        if (result instanceof Promise) {
+          result.then(() => {
+            clear();
+            if (usingProvider) {
+              controller.textInput.clear();
+            }
+          }).catch(() => {
+          });
+        } else {
+          clear();
+          if (usingProvider) {
+            controller.textInput.clear();
+          }
+        }
+      } catch {
+      }
+    }).catch(() => {
+    });
+  };
+  const inner = /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx12(
+      "input",
+      {
+        accept,
+        "aria-label": "Upload files",
+        className: "hidden",
+        multiple,
+        onChange: handleChange,
+        ref: inputRef,
+        title: "Upload files",
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "form",
+      {
+        className: cn("w-full", className),
+        onSubmit: handleSubmit,
+        ref: formRef,
+        ...props,
+        children: /* @__PURE__ */ jsx12(InputGroup, { className: "overflow-hidden", children })
+      }
+    )
+  ] });
+  const withReferencedSources = /* @__PURE__ */ jsx12(LocalReferencedSourcesContext.Provider, { value: refsCtx, children: inner });
+  return /* @__PURE__ */ jsx12(LocalAttachmentsContext.Provider, { value: attachmentsCtx, children: withReferencedSources });
+};
+var PromptInputBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx12("div", { className: cn("contents", className), ...props });
+var PromptInputTextarea = ({
+  onChange,
+  onKeyDown,
+  className,
+  placeholder = "What would you like to know?",
+  ...props
+}) => {
+  const controller = useOptionalPromptInputController();
+  const attachments = usePromptInputAttachments();
+  const [isComposing, setIsComposing] = useState(false);
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.key === "Enter") {
+      if (isComposing || e.nativeEvent.isComposing) {
+        return;
+      }
+      if (e.shiftKey) {
+        return;
+      }
+      e.preventDefault();
+      const form = e.currentTarget.form;
+      const submitButton = form?.querySelector(
+        'button[type="submit"]'
+      );
+      if (submitButton?.disabled) {
+        return;
+      }
+      form?.requestSubmit();
+    }
+    if (e.key === "Backspace" && e.currentTarget.value === "" && attachments.files.length > 0) {
+      e.preventDefault();
+      const lastAttachment = attachments.files[attachments.files.length - 1];
+      if (lastAttachment) {
+        attachments.remove(lastAttachment.id);
+      }
+    }
+  };
+  const handlePaste = (event) => {
+    const items = event.clipboardData?.items;
+    if (!items) {
+      return;
+    }
+    const files = [];
+    for (const item of items) {
+      if (item.kind === "file") {
+        const file = item.getAsFile();
+        if (file) {
+          files.push(file);
+        }
+      }
+    }
+    if (files.length > 0) {
+      event.preventDefault();
+      attachments.add(files);
+    }
+  };
+  const controlledProps = controller ? {
+    value: controller.textInput.value,
+    onChange: (e) => {
+      controller.textInput.setInput(e.currentTarget.value);
+      onChange?.(e);
+    }
+  } : {
+    onChange
+  };
+  return /* @__PURE__ */ jsx12(
+    InputGroupTextarea,
+    {
+      className: cn("field-sizing-content max-h-48 min-h-16", className),
+      name: "message",
+      onCompositionEnd: () => setIsComposing(false),
+      onCompositionStart: () => setIsComposing(true),
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      placeholder,
+      ...props,
+      ...controlledProps
+    }
+  );
+};
+var PromptInputFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx12(
+  InputGroupAddon,
+  {
+    align: "block-end",
+    className: cn("justify-between gap-1", className),
+    ...props
+  }
+);
+var PromptInputTools = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx12("div", { className: cn("flex items-center gap-1", className), ...props });
+var PromptInputSubmit = ({
+  className,
+  variant = "default",
+  size = "icon-sm",
+  status,
+  onStop,
+  onClick,
+  children,
+  ...props
+}) => {
+  const isGenerating = status === "submitted" || status === "streaming";
+  let Icon = /* @__PURE__ */ jsx12(CornerDownLeftIcon, { className: "size-4" });
+  if (status === "submitted") {
+    Icon = /* @__PURE__ */ jsx12(Spinner, {});
+  } else if (status === "streaming") {
+    Icon = /* @__PURE__ */ jsx12(SquareIcon, { className: "size-4" });
+  } else if (status === "error") {
+    Icon = /* @__PURE__ */ jsx12(XIcon3, { className: "size-4" });
+  }
+  const handleClick = (e) => {
+    if (isGenerating && onStop) {
+      e.preventDefault();
+      onStop();
+      return;
+    }
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx12(
+    InputGroupButton,
+    {
+      "aria-label": isGenerating ? "Stop" : "Submit",
+      className: cn(className),
+      onClick: handleClick,
+      size,
+      type: isGenerating && onStop ? "button" : "submit",
+      variant,
+      ...props,
+      children: children ?? Icon
+    }
+  );
+};
+
+// src/locales/context.ts
+import { createContext as createContext3 } from "react";
+var LocaleContext = createContext3({
+  locale: "zh-CN"
+});
+
+// src/locales/hooks.ts
+import { useContext as useContext3, useMemo as useMemo3 } from "react";
+
+// src/locales/langs/zh-cn.ts
+var zhCN = {
+  chat: {
+    emptyTitle: "\u6709\u4EC0\u4E48\u6211\u53EF\u4EE5\u5E2E\u5230\u4F60\uFF1F"
+  },
+  input: {
+    placeholder: "\u8BF7\u8F93\u5165\u6D88\u606F...",
+    disclaimer: "\u5185\u5BB9\u7531 AI \u751F\u6210\uFF0C\u4EC5\u4F9B\u53C2\u8003"
+  },
+  message: {
+    copy: "\u590D\u5236",
+    copied: "\u5DF2\u590D\u5236",
+    copyToClipboard: "\u590D\u5236",
+    paused: "\u5DF2\u6682\u505C\u751F\u6210"
+  }
+};
+
+// src/locales/langs/en.ts
+var en = {
+  chat: {
+    emptyTitle: "How can I help you?"
+  },
+  input: {
+    placeholder: "Type your message...",
+    disclaimer: "AI-generated content, for reference only"
+  },
+  message: {
+    copy: "Copy",
+    copied: "Copied!",
+    copyToClipboard: "Copy to clipboard",
+    paused: "Generation paused"
+  }
+};
+
+// src/locales/langs/index.ts
+var locales = {
+  "zh-CN": zhCN,
+  "en-US": en
+};
+
+// src/locales/hooks.ts
+function useLocale(name) {
+  const { locale: localeCode } = useContext3(LocaleContext);
+  const locale = useMemo3(() => {
+    const fullLocale = locales[localeCode] ?? locales["zh-CN"];
+    return name ? fullLocale[name] : fullLocale;
+  }, [localeCode, name]);
+  return { locale, localeCode };
+}
+
+// src/components/chat/Input.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var PromptInputAttachmentsDisplay = () => {
+  const attachments = usePromptInputAttachments();
+  if (attachments.files.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx13(Attachments, { variant: "inline", children: attachments.files.map((attachment) => /* @__PURE__ */ jsxs7(
+    Attachment,
+    {
+      data: attachment,
+      onRemove: () => attachments.remove(attachment.id),
+      children: [
+        /* @__PURE__ */ jsx13(AttachmentPreview, {}),
+        /* @__PURE__ */ jsx13(AttachmentRemove, {})
+      ]
+    },
+    attachment.id
+  )) });
+};
+function Input2({
+  onSend,
+  onStop,
+  placeholder,
+  streaming = false
+}) {
+  const { locale } = useLocale("input");
+  const status = streaming ? "streaming" : "ready";
+  const handleSubmit = (message) => {
+    const text = message.text.trim();
+    const hasText = Boolean(text);
+    const hasAttachments = Boolean(message.files?.length);
+    if (!(hasText || hasAttachments)) {
+      return;
+    }
+    onSend?.({
+      ...message,
+      text
+    });
+  };
+  return /* @__PURE__ */ jsx13("div", { className: "pb-4", children: /* @__PURE__ */ jsxs7(PromptInputProvider, { children: [
+    /* @__PURE__ */ jsxs7(PromptInput, { globalDrop: true, multiple: true, onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx13(PromptInputAttachmentsDisplay, {}),
+      /* @__PURE__ */ jsx13(PromptInputBody, { children: /* @__PURE__ */ jsx13(
+        PromptInputTextarea,
+        {
+          placeholder: placeholder ?? locale.placeholder
+        }
+      ) }),
+      /* @__PURE__ */ jsxs7(PromptInputFooter, { children: [
+        /* @__PURE__ */ jsx13(PromptInputTools, {}),
+        /* @__PURE__ */ jsx13(PromptInputSubmit, { status, onStop })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "text-center text-xs opacity-50 mt-3", children: locale.disclaimer })
+  ] }) });
+}
+
+// src/components/chat/Chat.tsx
+import { useChat } from "@cloudbase/agent-react-core";
+
+// src/components/ui/button-group.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+
+// src/components/ui/separator.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { jsx as jsx14 } from "react/jsx-runtime";
+
+// src/components/ui/button-group.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var buttonGroupVariants = cva3(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+
+// src/components/ui/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(TooltipProvider, { children: /* @__PURE__ */ jsx16(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs8(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx16(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/ai-elements/message.tsx
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "lucide-react";
+import { createContext as createContext4, memo, useContext as useContext4, useEffect as useEffect2, useState as useState2 } from "react";
+import { Streamdown } from "streamdown";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx17(
+  "div",
+  {
+    className: cn(
+      "group flex w-full max-w-[95%] flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      className
+    ),
+    ...props
+  }
+);
+var MessageContent = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx17(
+  "div",
+  {
+    className: cn(
+      "is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+      "group-[.is-assistant]:text-foreground",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var MessageActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx17("div", { className: cn("flex items-center gap-1", className), ...props, children });
+var MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs9(Button, { size, type: "button", variant, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx17("span", { className: "sr-only", children: label || tooltip })
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx17(TooltipProvider, { children: /* @__PURE__ */ jsxs9(Tooltip, { children: [
+      /* @__PURE__ */ jsx17(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx17(TooltipContent, { children: /* @__PURE__ */ jsx17("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+var MessageBranchContext = createContext4(
+  null
+);
+var MessageResponse = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx17(
+    Streamdown,
+    {
+      className: cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      ),
+      plugins: { code, mermaid, math, cjk },
+      ...props
+    }
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+MessageResponse.displayName = "MessageResponse";
+
+// src/components/ui/badge.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { Slot as Slot3 } from "radix-ui";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var badgeVariants = cva4(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot3.Root : "span";
+  return /* @__PURE__ */ jsx18(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/collapsible.tsx
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function Collapsible({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx19(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx19(
+    CollapsiblePrimitive.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      ...props
+    }
+  );
+}
+function CollapsibleContent({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx19(
+    CollapsiblePrimitive.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      ...props
+    }
+  );
+}
+
+// src/components/ai-elements/tool.tsx
+import {
+  CheckCircleIcon,
+  ChevronDownIcon as ChevronDownIcon2,
+  CircleIcon as CircleIcon2,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon
+} from "lucide-react";
+import { isValidElement } from "react";
+
+// src/components/ai-elements/code-block.tsx
+import { CheckIcon as CheckIcon3, CopyIcon } from "lucide-react";
+import {
+  createContext as createContext5,
+  memo as memo2,
+  useContext as useContext5,
+  useEffect as useEffect3,
+  useMemo as useMemo4,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import {
+  createHighlighter
+} from "shiki";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var isItalic = (fontStyle) => fontStyle && fontStyle & 1;
+var isBold = (fontStyle) => fontStyle && fontStyle & 2;
+var isUnderline = (fontStyle) => (
+  // biome-ignore lint/suspicious/noBitwiseOperators: shiki bitflag check
+  fontStyle && fontStyle & 4
+);
+var addKeysToTokens = (lines) => lines.map((line, lineIdx) => ({
+  key: `line-${lineIdx}`,
+  tokens: line.map((token, tokenIdx) => ({
+    token,
+    key: `line-${lineIdx}-${tokenIdx}`
+  }))
+}));
+var TokenSpan = ({ token }) => /* @__PURE__ */ jsx20(
+  "span",
+  {
+    className: "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]",
+    style: {
+      color: token.color,
+      backgroundColor: token.bgColor,
+      ...token.htmlStyle,
+      fontStyle: isItalic(token.fontStyle) ? "italic" : void 0,
+      fontWeight: isBold(token.fontStyle) ? "bold" : void 0,
+      textDecoration: isUnderline(token.fontStyle) ? "underline" : void 0
+    },
+    children: token.content
+  }
+);
+var LineSpan = ({
+  keyedLine,
+  showLineNumbers
+}) => /* @__PURE__ */ jsx20("span", { className: showLineNumbers ? LINE_NUMBER_CLASSES : "block", children: keyedLine.tokens.length === 0 ? "\n" : keyedLine.tokens.map(({ token, key }) => /* @__PURE__ */ jsx20(TokenSpan, { token }, key)) });
+var CodeBlockContext = createContext5({
+  code: ""
+});
+var highlighterCache = /* @__PURE__ */ new Map();
+var tokensCache = /* @__PURE__ */ new Map();
+var subscribers = /* @__PURE__ */ new Map();
+var getTokensCacheKey = (code2, language) => {
+  const start = code2.slice(0, 100);
+  const end = code2.length > 100 ? code2.slice(-100) : "";
+  return `${language}:${code2.length}:${start}:${end}`;
+};
+var getHighlighter = (language) => {
+  const cached = highlighterCache.get(language);
+  if (cached) {
+    return cached;
+  }
+  const highlighterPromise = createHighlighter({
+    themes: ["github-light", "github-dark"],
+    langs: [language]
+  });
+  highlighterCache.set(language, highlighterPromise);
+  return highlighterPromise;
+};
+var createRawTokens = (code2) => ({
+  tokens: code2.split("\n").map(
+    (line) => line === "" ? [] : [
+      {
+        content: line,
+        color: "inherit"
+      }
+    ]
+  ),
+  fg: "inherit",
+  bg: "transparent"
+});
+function highlightCode(code2, language, callback) {
+  const tokensCacheKey = getTokensCacheKey(code2, language);
+  const cached = tokensCache.get(tokensCacheKey);
+  if (cached) {
+    return cached;
+  }
+  if (callback) {
+    if (!subscribers.has(tokensCacheKey)) {
+      subscribers.set(tokensCacheKey, /* @__PURE__ */ new Set());
+    }
+    subscribers.get(tokensCacheKey)?.add(callback);
+  }
+  getHighlighter(language).then((highlighter) => {
+    const availableLangs = highlighter.getLoadedLanguages();
+    const langToUse = availableLangs.includes(language) ? language : "text";
+    const result = highlighter.codeToTokens(code2, {
+      lang: langToUse,
+      themes: {
+        light: "github-light",
+        dark: "github-dark"
+      }
+    });
+    const tokenized = {
+      tokens: result.tokens,
+      fg: result.fg ?? "inherit",
+      bg: result.bg ?? "transparent"
+    };
+    tokensCache.set(tokensCacheKey, tokenized);
+    const subs = subscribers.get(tokensCacheKey);
+    if (subs) {
+      for (const sub of subs) {
+        sub(tokenized);
+      }
+      subscribers.delete(tokensCacheKey);
+    }
+  }).catch((error) => {
+    console.error("Failed to highlight code:", error);
+    subscribers.delete(tokensCacheKey);
+  });
+  return null;
+}
+var LINE_NUMBER_CLASSES = cn(
+  "block",
+  "before:content-[counter(line)]",
+  "before:inline-block",
+  "before:[counter-increment:line]",
+  "before:w-8",
+  "before:mr-4",
+  "before:text-right",
+  "before:text-muted-foreground/50",
+  "before:font-mono",
+  "before:select-none"
+);
+var CodeBlockBody = memo2(
+  ({
+    tokenized,
+    showLineNumbers,
+    className
+  }) => {
+    const preStyle = useMemo4(
+      () => ({
+        backgroundColor: tokenized.bg,
+        color: tokenized.fg
+      }),
+      [tokenized.bg, tokenized.fg]
+    );
+    const keyedLines = useMemo4(
+      () => addKeysToTokens(tokenized.tokens),
+      [tokenized.tokens]
+    );
+    return /* @__PURE__ */ jsx20(
+      "pre",
+      {
+        className: cn(
+          "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)] m-0 p-4 text-sm",
+          className
+        ),
+        style: preStyle,
+        children: /* @__PURE__ */ jsx20(
+          "code",
+          {
+            className: cn(
+              "font-mono text-sm",
+              showLineNumbers && "[counter-increment:line_0] [counter-reset:line]"
+            ),
+            children: keyedLines.map((keyedLine) => /* @__PURE__ */ jsx20(
+              LineSpan,
+              {
+                keyedLine,
+                showLineNumbers
+              },
+              keyedLine.key
+            ))
+          }
+        )
+      }
+    );
+  },
+  (prevProps, nextProps) => prevProps.tokenized === nextProps.tokenized && prevProps.showLineNumbers === nextProps.showLineNumbers && prevProps.className === nextProps.className
+);
+var CodeBlockContainer = ({
+  className,
+  language,
+  style,
+  ...props
+}) => /* @__PURE__ */ jsx20(
+  "div",
+  {
+    className: cn(
+      "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      className
+    ),
+    "data-language": language,
+    style: {
+      contentVisibility: "auto",
+      containIntrinsicSize: "auto 200px",
+      ...style
+    },
+    ...props
+  }
+);
+var CodeBlockContent = ({
+  code: code2,
+  language,
+  showLineNumbers = false
+}) => {
+  const rawTokens = useMemo4(() => createRawTokens(code2), [code2]);
+  const [tokenized, setTokenized] = useState3(
+    () => highlightCode(code2, language) ?? rawTokens
+  );
+  useEffect3(() => {
+    setTokenized(highlightCode(code2, language) ?? rawTokens);
+    highlightCode(code2, language, setTokenized);
+  }, [code2, language, rawTokens]);
+  return /* @__PURE__ */ jsx20("div", { className: "relative overflow-auto", children: /* @__PURE__ */ jsx20(CodeBlockBody, { showLineNumbers, tokenized }) });
+};
+var CodeBlock = ({
+  code: code2,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx20(CodeBlockContext.Provider, { value: { code: code2 }, children: /* @__PURE__ */ jsxs10(CodeBlockContainer, { className, language, ...props, children: [
+  children,
+  /* @__PURE__ */ jsx20(
+    CodeBlockContent,
+    {
+      code: code2,
+      language,
+      showLineNumbers
+    }
+  )
+] }) });
+
+// src/components/ai-elements/tool.tsx
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx21(
+  Collapsible,
+  {
+    className: cn("group not-prose mb-4 w-full rounded-md border", className),
+    ...props
+  }
+);
+var getStatusBadge = (status) => {
+  const labels = {
+    "input-streaming": "Pending",
+    "input-available": "Running",
+    "approval-requested": "Awaiting Approval",
+    "approval-responded": "Responded",
+    "output-available": "Completed",
+    "output-error": "Error",
+    "output-denied": "Denied"
+  };
+  const icons = {
+    "input-streaming": /* @__PURE__ */ jsx21(CircleIcon2, { className: "size-4" }),
+    "input-available": /* @__PURE__ */ jsx21(ClockIcon, { className: "size-4 animate-pulse" }),
+    "approval-requested": /* @__PURE__ */ jsx21(ClockIcon, { className: "size-4 text-yellow-600" }),
+    "approval-responded": /* @__PURE__ */ jsx21(CheckCircleIcon, { className: "size-4 text-blue-600" }),
+    "output-available": /* @__PURE__ */ jsx21(CheckCircleIcon, { className: "size-4 text-green-600" }),
+    "output-error": /* @__PURE__ */ jsx21(XCircleIcon, { className: "size-4 text-red-600" }),
+    "output-denied": /* @__PURE__ */ jsx21(XCircleIcon, { className: "size-4 text-orange-600" })
+  };
+  return /* @__PURE__ */ jsxs11(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+    icons[status],
+    labels[status]
+  ] });
+};
+var ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  toolName,
+  ...props
+}) => {
+  const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
+  return /* @__PURE__ */ jsxs11(
+    CollapsibleTrigger,
+    {
+      className: cn(
+        "flex w-full items-center justify-between gap-4 p-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx21(WrenchIcon, { className: "size-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx21("span", { className: "font-medium text-sm", children: title ?? derivedName }),
+          getStatusBadge(state)
+        ] }),
+        /* @__PURE__ */ jsx21(ChevronDownIcon2, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+      ]
+    }
+  );
+};
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx21(
+  CollapsibleContent,
+  {
+    className: cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 space-y-4 p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs11("div", { className: cn("space-y-2 overflow-hidden", className), ...props, children: [
+  /* @__PURE__ */ jsx21("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+  /* @__PURE__ */ jsx21("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx21(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+] });
+var ToolOutput = ({
+  className,
+  output,
+  errorText,
+  ...props
+}) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+  let Output = /* @__PURE__ */ jsx21("div", { children: output });
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = /* @__PURE__ */ jsx21(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+  } else if (typeof output === "string") {
+    Output = /* @__PURE__ */ jsx21(CodeBlock, { code: output, language: "json" });
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: cn("space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx21("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: cn(
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+          errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"
+        ),
+        children: [
+          errorText && /* @__PURE__ */ jsx21("div", { children: errorText }),
+          Output
+        ]
+      }
+    )
+  ] });
+};
+
+// src/hooks/use-copy-to-clipboard.ts
+import { useState as useState4 } from "react";
+function useCopyToClipboard({
+  timeout = 2e3
+} = {}) {
+  const [isCopied, setIsCopied] = useState4(false);
+  const copyToClipboard = (value) => {
+    if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
+      return;
+    }
+    if (!value) {
+      return;
+    }
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+    });
+  };
+  return { isCopied, copyToClipboard };
+}
+
+// src/components/chat/Message.tsx
+import { CheckIcon as CheckIcon4, CopyIcon as CopyIcon2 } from "lucide-react";
+import { memo as memo3 } from "react";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var CopyAction = memo3(({ content }) => {
+  const { locale } = useLocale("message");
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  return /* @__PURE__ */ jsx22(
+    MessageAction,
+    {
+      label: locale.copy,
+      onClick: () => copyToClipboard(content),
+      tooltip: isCopied ? locale.copied : locale.copyToClipboard,
+      children: isCopied ? /* @__PURE__ */ jsx22(CheckIcon4, { className: "size-4" }) : /* @__PURE__ */ jsx22(CopyIcon2, { className: "size-4" })
+    }
+  );
+});
+CopyAction.displayName = "CopyAction";
+var mapToolStatus = (status) => {
+  const statusMap = {
+    pending: "input-streaming",
+    ready: "input-available",
+    executing: "input-available",
+    completed: "output-available",
+    failed: "output-error"
+  };
+  return statusMap[status];
+};
+var ToolCallRenderer = memo3(
+  ({ toolPart, actions, onRespond }) => {
+    const action = actions?.[toolPart.name];
+    if (action && (action.type === "client-tool" && action.render || action.type === "tool-call")) {
+      const respond = (result) => {
+        onRespond?.(toolPart.toolCallId, result);
+      };
+      const render = action.render;
+      const rendered = render?.({
+        toolCall: toolPart,
+        respond
+      });
+      if (typeof rendered === "string") {
+        return /* @__PURE__ */ jsx22("div", { children: rendered });
+      }
+      return rendered;
+    }
+    const state = mapToolStatus(toolPart.status);
+    return /* @__PURE__ */ jsxs12(Tool, { children: [
+      /* @__PURE__ */ jsx22(
+        ToolHeader,
+        {
+          type: "dynamic-tool",
+          state,
+          toolName: toolPart.name
+        }
+      ),
+      /* @__PURE__ */ jsxs12(ToolContent, { children: [
+        /* @__PURE__ */ jsx22(ToolInput, { input: toolPart.args }),
+        (toolPart.status === "completed" || toolPart.status === "failed") && /* @__PURE__ */ jsx22(
+          ToolOutput,
+          {
+            output: toolPart.result,
+            errorText: toolPart.error?.message
+          }
+        )
+      ] })
+    ] });
+  }
+);
+ToolCallRenderer.displayName = "ToolCallRenderer";
+function ChatMessage({
+  messages,
+  isLoading = false,
+  actions,
+  onRespond
+}) {
+  const { locale } = useLocale("message");
+  const visibleMessages = messages.filter(
+    (message) => message.role === "user" || message.role === "assistant"
+  );
+  const lastVisibleMessage = visibleMessages[visibleMessages.length - 1];
+  const shouldRenderAssistantPlaceholder = isLoading && (!lastVisibleMessage || lastVisibleMessage.role === "user");
+  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-4", children: [
+    visibleMessages.map((message) => {
+      const role = message.role;
+      const isLoadingAssistantMessage = isLoading && role === "assistant" && message.id === lastVisibleMessage?.id;
+      const allTextContent = message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
+      const hasAssistantText = role === "assistant" && allTextContent.trim().length > 0;
+      const isPausedAssistantNoText = role === "assistant" && Boolean(message.paused) && !hasAssistantText;
+      const copyContent = allTextContent || (isPausedAssistantNoText ? locale.paused : "");
+      return /* @__PURE__ */ jsxs12(Message, { from: role, children: [
+        message.parts.map((part) => {
+          if (part.type === "text") {
+            const textPart = part;
+            return /* @__PURE__ */ jsx22(MessageContent, { children: role === "assistant" ? /* @__PURE__ */ jsx22(MessageResponse, { children: textPart.text }) : textPart.text }, textPart.id);
+          }
+          if (part.type === "tool") {
+            const toolPart = part;
+            return /* @__PURE__ */ jsx22(
+              ToolCallRenderer,
+              {
+                toolPart,
+                actions,
+                onRespond
+              },
+              toolPart.id
+            );
+          }
+          return null;
+        }),
+        isLoadingAssistantMessage && /* @__PURE__ */ jsx22(MessageContent, { children: /* @__PURE__ */ jsx22("div", { className: "inline-flex items-center text-muted-foreground", children: /* @__PURE__ */ jsx22(SvgSpinners3DotsFade, { className: "text-xl" }) }) }),
+        isPausedAssistantNoText && !isLoadingAssistantMessage && /* @__PURE__ */ jsx22(MessageContent, { children: /* @__PURE__ */ jsx22("div", { className: "text-muted-foreground", children: locale.paused }) }),
+        role === "assistant" && copyContent && !isLoadingAssistantMessage && /* @__PURE__ */ jsx22(MessageActions, { children: /* @__PURE__ */ jsx22(CopyAction, { content: copyContent }) })
+      ] }, message.id);
+    }),
+    shouldRenderAssistantPlaceholder && /* @__PURE__ */ jsx22(Message, { from: "assistant", children: /* @__PURE__ */ jsx22(MessageContent, { children: /* @__PURE__ */ jsx22("div", { className: "inline-flex items-center text-muted-foreground", children: /* @__PURE__ */ jsx22(SvgSpinners3DotsFade, { className: "text-xl" }) }) }) })
+  ] });
+}
+function SvgSpinners3DotsFade(props) {
+  return /* @__PURE__ */ jsxs12(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx22("circle", { cx: "4", cy: "12", r: "3", fill: "currentColor", children: /* @__PURE__ */ jsx22(
+          "animate",
+          {
+            id: "dotFadeFirst",
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "0;dotFadeThird.end-0.25s",
+            dur: "0.75s",
+            values: "1;.2"
+          }
+        ) }),
+        /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "3", fill: "currentColor", opacity: ".4", children: /* @__PURE__ */ jsx22(
+          "animate",
+          {
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "dotFadeFirst.begin+0.15s",
+            dur: "0.75s",
+            values: "1;.2"
+          }
+        ) }),
+        /* @__PURE__ */ jsx22("circle", { cx: "20", cy: "12", r: "3", fill: "currentColor", opacity: ".3", children: /* @__PURE__ */ jsx22(
+          "animate",
+          {
+            id: "dotFadeThird",
+            fill: "freeze",
+            attributeName: "opacity",
+            begin: "dotFadeFirst.begin+0.3s",
+            dur: "0.75s",
+            values: "1;.2"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/chat/Chat.tsx
+import { v4 as uuidv4 } from "uuid";
+import { useMemo as useMemo5 } from "react";
+
+// src/components/ui/scroll-area.tsx
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs13(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx23(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx23(ScrollBar, {}),
+        /* @__PURE__ */ jsx23(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx23(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx23(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
+
+// src/components/ai-elements/suggestion.tsx
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+var Suggestions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs14(ScrollArea, { className: "w-full overflow-x-auto whitespace-nowrap", ...props, children: [
+  /* @__PURE__ */ jsx24("div", { className: cn("flex w-max flex-nowrap items-center gap-2", className), children }),
+  /* @__PURE__ */ jsx24(ScrollBar, { className: "hidden", orientation: "horizontal" })
+] });
+var Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}) => {
+  const handleClick = () => {
+    onClick?.(suggestion);
+  };
+  return /* @__PURE__ */ jsx24(
+    Button,
+    {
+      className: cn("cursor-pointer rounded-full px-4", className),
+      onClick: handleClick,
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: children || suggestion
+    }
+  );
+};
+
+// src/components/chat/Chat.tsx
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+function AgKitUI({
+  className = "h-full min-h-0 mx-auto max-w-225 flex flex-col overflow-hidden px-4",
+  containerClassName,
+  messagesClassName,
+  inputClassName,
+  emptyTitleClassName,
+  inputPlaceholder,
+  suggestions,
+  onSuggestionClick,
+  locale = "zh-CN"
+}) {
+  const contextValue = useMemo5(() => ({ locale }), [locale]);
+  return /* @__PURE__ */ jsx25(LocaleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx25(
+    AgKitUIContent,
+    {
+      className,
+      containerClassName,
+      messagesClassName,
+      inputClassName,
+      emptyTitleClassName,
+      inputPlaceholder,
+      suggestions,
+      onSuggestionClick
+    }
+  ) });
+}
+function AgKitUIContent({
+  className,
+  containerClassName,
+  messagesClassName,
+  inputClassName,
+  emptyTitleClassName,
+  inputPlaceholder,
+  suggestions,
+  onSuggestionClick
+}) {
+  const { locale } = useLocale("chat");
+  const { uiMessages, streaming, sendMessage, actions, abort } = useChat();
+  const handleRespond = (toolCallId, result) => {
+    sendMessage({
+      id: uuidv4(),
+      role: "tool",
+      content: result,
+      toolCallId
+    });
+  };
+  const visibleMessages = uiMessages.filter(
+    (message) => message.role === "user" || message.role === "assistant"
+  );
+  const isEmpty = visibleMessages.length === 0;
+  const inputNode = /* @__PURE__ */ jsxs15("div", { className: inputClassName, children: [
+    isEmpty && suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx25(Suggestions, { className: "mb-3", children: suggestions.map((suggestion) => suggestion.trim()).filter(Boolean).map((suggestion, index) => /* @__PURE__ */ jsx25(
+      Suggestion,
+      {
+        suggestion,
+        variant: "ghost",
+        className: "max-w-full border border-border/80 text-muted-foreground",
+        disabled: streaming,
+        onClick: (value) => {
+          onSuggestionClick?.(value);
+          sendMessage(value);
+        }
+      },
+      `${suggestion}-${index}`
+    )) }),
+    /* @__PURE__ */ jsx25(
+      Input2,
+      {
+        placeholder: inputPlaceholder,
+        streaming,
+        onStop: () => {
+          if (!streaming) return;
+          abort();
+        },
+        onSend: (message) => {
+          sendMessage(message.text);
+        }
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: cn(
+        "bg-background text-foreground h-full min-h-0 w-full",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ jsx25("div", { className: cn(className), children: isEmpty ? /* @__PURE__ */ jsx25("div", { className: "flex min-h-0 flex-1 items-center justify-center", children: /* @__PURE__ */ jsxs15("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsx25(
+          "div",
+          {
+            className: cn(
+              "mb-5 text-center text-xl font-medium text-foreground",
+              emptyTitleClassName
+            ),
+            children: locale.emptyTitle
+          }
+        ),
+        inputNode
+      ] }) }) : /* @__PURE__ */ jsxs15(Fragment2, { children: [
+        /* @__PURE__ */ jsx25(
+          "div",
+          {
+            className: cn(
+              "min-h-0 flex-1 overflow-y-auto py-4",
+              messagesClassName
+            ),
+            children: /* @__PURE__ */ jsx25(
+              ChatMessage,
+              {
+                messages: uiMessages,
+                isLoading: streaming,
+                actions,
+                onRespond: handleRespond
+              }
+            )
+          }
+        ),
+        inputNode
+      ] }) })
+    }
+  );
+}
+export {
+  AgKitUI
+};
+//# sourceMappingURL=index.mjs.map