@aigentyc/chat-sdk 0.1.0

package/dist/ai-elements.js

@@ -0,0 +1,4363 @@
+"use client";
+export { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, Loader, SpinnerLoader } from './chunk-VS3NZ7FX.js';
+import './chunk-MZQKGNWF.js';
+import { useI18n } from './chunk-QYCEHFAB.js';
+import { processImagesInHtml } from './chunk-PS3U7T37.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent, Badge, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Textarea, Input, Carousel, CarouselContent, CarouselItem, ScrollArea, ScrollBar, Progress, Alert, AlertDescription, Dialog, DialogTrigger, DialogContent, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, Separator } from './chunk-NW2ESHRV.js';
+import { Button } from './chunk-42ARGQXE.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from './chunk-NPJKLYLV.js';
+import { cn } from './chunk-3RW7O444.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { BrainIcon, ChevronDownIcon, DotIcon, Search, ChevronLeftIcon, ChevronRightIcon, XIcon, PaperclipIcon, Check, Copy, X, CheckIcon, CopyIcon, BookIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsUpDownIcon, ImageIcon, PlusIcon, MicIcon, SearchIcon, WrenchIcon, BookmarkIcon, CornerDownLeftIcon, Loader2Icon, SquareIcon, ExternalLinkIcon, MessageCircleIcon, XCircleIcon, CheckCircleIcon, ClockIcon, CircleIcon } from 'lucide-react';
+import * as React2 from 'react';
+import { createContext, memo, useState, useEffect, useMemo, useContext, useId, useRef, useSyncExternalStore, useCallback, Fragment as Fragment$1, Children, isValidElement } from 'react';
+import { Streamdown } from 'streamdown';
+import { codeToHtml } from 'shiki';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { motion } from 'motion/react';
+import { getUsage } from 'tokenlens';
+import { Controls as Controls$1, Panel as Panel$1, NodeToolbar, Position, ReactFlow, Background, getSimpleBezierPath, BaseEdge, useInternalNode, getBezierPath, Handle } from '@xyflow/react';
+import { Command as Command$1 } from 'cmdk';
+import { nanoid } from 'nanoid';
+import '@xyflow/react/dist/style.css';
+
+var buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    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"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Message = ({ className, from, fullWidth, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "group flex w-full flex-col gap-2",
+      fullWidth ? "" : from === "assistant" ? "max-w-[var(--ac-assistant-max-width,95%)]" : "max-w-[95%]",
+      from === "user" ? "is-user justify-end" : "is-assistant",
+      className
+    ),
+    ...props
+  }
+);
+var MessageContent = ({
+  children,
+  className,
+  fullWidth,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex min-w-0 flex-col gap-2 overflow-hidden",
+      fullWidth ? "w-full" : "w-fit max-w-full",
+      "group-[.is-user]:ml-auto group-[.is-user]:px-6 group-[.is-user]:py-4 group-[.is-user]:text-foreground group-[.is-user]:rounded-bl-[24px] group-[.is-user]:rounded-br-[24px] group-[.is-user]:rounded-tl-[4px] group-[.is-user]:rounded-tr-[24px] group-[.is-user]:bg-[var(--ac-user-bubble-bg,#f0f4f8)]",
+      "group-[.is-assistant]:text-foreground group-[.is-assistant]:w-full",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var MessageActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("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__ */ jsxs(Button, { size, type: "button", variant, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+var MessageBranchContext = createContext(
+  null
+);
+var useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  }
+  return context;
+};
+var MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState([]);
+  const handleBranchChange = (newBranch) => {
+    setCurrentBranch(newBranch);
+    onBranchChange?.(newBranch);
+  };
+  const goToPrevious = () => {
+    const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  };
+  const goToNext = () => {
+    const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  };
+  const contextValue = {
+    currentBranch,
+    totalBranches: branches.length,
+    goToPrevious,
+    goToNext,
+    branches,
+    setBranches
+  };
+  return /* @__PURE__ */ jsx(MessageBranchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid w-full gap-2 [&>div]:pb-0", className),
+      ...props
+    }
+  ) });
+};
+var MessageBranchContent = ({
+  children,
+  ...props
+}) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = Array.isArray(children) ? children : [children];
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+  return childrenArray.map((branch, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden"
+      ),
+      ...props,
+      children: branch
+    },
+    branch.key
+  ));
+};
+var MessageBranchSelector = ({
+  className,
+  from,
+  ...props
+}) => {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ButtonGroup,
+    {
+      className: "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+      orientation: "horizontal",
+      ...props
+    }
+  );
+};
+var MessageBranchPrevious = ({
+  children,
+  ...props
+}) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Previous branch",
+      disabled: totalBranches <= 1,
+      onClick: goToPrevious,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14 })
+    }
+  );
+};
+var MessageBranchNext = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Next branch",
+      disabled: totalBranches <= 1,
+      onClick: goToNext,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14 })
+    }
+  );
+};
+var MessageBranchPage = ({
+  className,
+  ...props
+}) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsxs(
+    ButtonGroupText,
+    {
+      className: cn(
+        "border-none bg-transparent text-muted-foreground shadow-none",
+        className
+      ),
+      ...props,
+      children: [
+        currentBranch + 1,
+        " of ",
+        totalBranches
+      ]
+    }
+  );
+};
+function addUtmParams(url) {
+  try {
+    const urlObj = new URL(url);
+    urlObj.searchParams.set("utm_source", "chat");
+    urlObj.searchParams.set("utm_medium", "referral");
+    return urlObj.toString();
+  } catch {
+    return url;
+  }
+}
+var CustomLink = ({ href, children, ...props }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    href: href ? addUtmParams(href) : href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "hover:underline hover:opacity-80 transition-opacity font-medium",
+    ...props,
+    children
+  }
+);
+var CustomImage = ({ src, alt, ...props }) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    src,
+    alt: alt || "",
+    loading: "lazy",
+    className: "rounded-xl max-w-full h-auto my-4",
+    ...props
+  }
+);
+var CustomTable = ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-4 overflow-x-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    className: "w-full text-sm rounded-xl border border-black/[0.08] overflow-hidden",
+    ...props,
+    children
+  }
+) });
+var CustomThead = ({ children, ...props }) => /* @__PURE__ */ jsx("thead", { className: "bg-black/[0.04]", ...props, children });
+var CustomTh = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    className: "px-4 py-3 text-start text-xs font-medium uppercase tracking-wider opacity-60 border-b border-black/[0.08]",
+    ...props,
+    children
+  }
+);
+var CustomTd = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    className: "px-4 py-3 border-b border-black/[0.08]",
+    ...props,
+    children
+  }
+);
+var CustomTr = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    className: "hover:bg-black/[0.02] transition-colors",
+    ...props,
+    children
+  }
+);
+var MessageResponse = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx(
+    Streamdown,
+    {
+      className: cn(
+        "message-response size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      ),
+      components: {
+        a: CustomLink,
+        img: CustomImage,
+        table: CustomTable,
+        thead: CustomThead,
+        th: CustomTh,
+        td: CustomTd,
+        tr: CustomTr
+      },
+      linkSafety: { enabled: false },
+      ...props
+    }
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+MessageResponse.displayName = "MessageResponse";
+function MessageAttachment({
+  data,
+  className,
+  onRemove,
+  ...props
+}) {
+  const filename = data.filename || "";
+  const mediaType = data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+  const isImage = mediaType === "image";
+  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group relative size-24 overflow-hidden rounded-lg",
+        className
+      ),
+      ...props,
+      children: isImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: filename || "attachment",
+            className: "size-full object-cover",
+            height: 100,
+            src: data.url,
+            width: 100
+          }
+        ),
+        onRemove && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": "Remove attachment",
+            className: "absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            type: "button",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ jsx(XIcon, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "flex size-full shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4" }) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: attachmentLabel }) })
+        ] }),
+        onRemove && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": "Remove attachment",
+            className: "size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100 [&>svg]:size-3",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove();
+            },
+            type: "button",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ jsx(XIcon, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function MessageAttachments({
+  children,
+  className,
+  ...props
+}) {
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ml-auto flex w-fit flex-wrap items-start gap-2",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var MessageToolbar = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+// src/core/api/kb-client.ts
+function getDefaultEndpoint() {
+  try {
+    const env = import.meta.env;
+    if (env?.VITE_API_ENDPOINT) return env.VITE_API_ENDPOINT;
+  } catch {
+  }
+  return "http://localhost:3000";
+}
+async function submitFeedback(request, apiKey, apiEndpoint) {
+  const endpoint = apiEndpoint || getDefaultEndpoint();
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (apiKey) {
+    headers["Authorization"] = `Bearer ${apiKey}`;
+  }
+  try {
+    const response = await fetch(`${endpoint}/api/kb/feedback`, {
+      method: "POST",
+      headers,
+      credentials: "include",
+      body: JSON.stringify(request)
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: response.statusText }));
+      return { success: false, error: error.error || response.statusText };
+    }
+    return { success: true };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Unknown error"
+    };
+  }
+}
+var ThumbsUpIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M7 11V19C7 19.2652 6.89464 19.5196 6.70711 19.7071C6.51957 19.8946 6.26522 20 6 20H4C3.73478 20 3.48043 19.8946 3.29289 19.7071C3.10536 19.5196 3 19.2652 3 19V12C3 11.7348 3.10536 11.4804 3.29289 11.2929C3.48043 11.1054 3.73478 11 4 11H7ZM7 11C8.06087 11 9.07828 10.5786 9.82843 9.82843C10.5786 9.07828 11 8.06087 11 7V6C11 5.46957 11.2107 4.96086 11.5858 4.58579C11.9609 4.21071 12.4696 4 13 4C13.5304 4 14.0391 4.21071 14.4142 4.58579C14.7893 4.96086 15 5.46957 15 6V11H18C18.5304 11 19.0391 11.2107 19.4142 11.5858C19.7893 11.9609 20 12.4696 20 13L19 18C18.8562 18.6135 18.5834 19.1402 18.2227 19.501C17.8619 19.8617 17.4328 20.0368 17 20H10C9.20435 20 8.44129 19.6839 7.87868 19.1213C7.31607 18.5587 7 17.7956 7 17",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ThumbsDownIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M7 13V4.99999C7 4.73478 6.89464 4.48042 6.70711 4.29289C6.51957 4.10535 6.26522 3.99999 6 3.99999H4C3.73478 3.99999 3.48043 4.10535 3.29289 4.29289C3.10536 4.48042 3 4.73478 3 4.99999V12C3 12.2652 3.10536 12.5196 3.29289 12.7071C3.48043 12.8946 3.73478 13 4 13H7ZM7 13C8.06087 13 9.07828 13.4214 9.82843 14.1716C10.5786 14.9217 11 15.9391 11 17V18C11 18.5304 11.2107 19.0391 11.5858 19.4142C11.9609 19.7893 12.4696 20 13 20C13.5304 20 14.0391 19.7893 14.4142 19.4142C14.7893 19.0391 15 18.5304 15 18V13H18C18.5304 13 19.0391 12.7893 19.4142 12.4142C19.7893 12.0391 20 11.5304 20 11L19 5.99999C18.8562 5.38652 18.5834 4.85975 18.2227 4.49903C17.8619 4.13831 17.4328 3.96317 17 3.99999H10C9.20435 3.99999 8.44129 4.31606 7.87868 4.87867C7.31607 5.44128 7 6.20434 7 6.99999",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var REVIEW_TYPES = [
+  { value: "wrong_answer", labelKey: "wrongAnswer" },
+  { value: "partial_answer", labelKey: "partialAnswer" },
+  { value: "hallucination", labelKey: "hallucination" },
+  { value: "inappropriate_tone", labelKey: "inappropriateTone" }
+];
+function MessageFeedback({
+  messageId,
+  projectId,
+  sessionId,
+  apiKey,
+  apiEndpoint,
+  textContent,
+  trackInteraction
+}) {
+  const { t } = useI18n();
+  const [feedback, setFeedback] = useState(null);
+  const [showReviewForm, setShowReviewForm] = useState(false);
+  const [reviewType, setReviewType] = useState(null);
+  const [reviewText, setReviewText] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const submitFeedbackToApi = async (feedbackData) => {
+    if (!projectId || !messageId || isSubmitting) return;
+    setIsSubmitting(true);
+    try {
+      const request = {
+        projectId,
+        sessionId,
+        messageId,
+        isPositive: feedbackData.isPositive,
+        issueType: feedbackData.reviewType,
+        feedbackText: feedbackData.reviewText
+      };
+      const result = await submitFeedback(request, apiKey, apiEndpoint);
+      if (!result.success) {
+        console.error("Failed to submit feedback:", result.error);
+      }
+    } catch (error) {
+      console.error("Failed to submit feedback:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handlePositiveFeedback = () => {
+    if (isSubmitting) return;
+    setFeedback("positive");
+    setShowReviewForm(false);
+    submitFeedbackToApi({ isPositive: true });
+    trackInteraction?.({
+      type: "feedback",
+      target: "thumbs_up",
+      label: "Positive feedback",
+      messageId,
+      metadata: { isPositive: true }
+    });
+  };
+  const handleNegativeFeedback = () => {
+    if (isSubmitting) return;
+    setFeedback("negative");
+    setShowReviewForm(true);
+  };
+  const handleSubmitReview = () => {
+    if (isSubmitting) return;
+    const feedbackData = {
+      isPositive: false,
+      reviewType: reviewType ?? void 0,
+      reviewText: reviewText || void 0
+    };
+    setShowReviewForm(false);
+    submitFeedbackToApi(feedbackData);
+    trackInteraction?.({
+      type: "feedback",
+      target: "thumbs_down",
+      label: "Negative feedback",
+      messageId,
+      metadata: { isPositive: false, reviewType, reviewText }
+    });
+  };
+  const handleCancelReview = () => {
+    setFeedback(null);
+    setShowReviewForm(false);
+    setReviewType(null);
+    setReviewText("");
+  };
+  const handleCopy = async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) return;
+    try {
+      await navigator.clipboard.writeText(textContent);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+      trackInteraction?.({
+        type: "copy",
+        target: "message",
+        label: "Copy response",
+        messageId,
+        metadata: { contentLength: textContent.length }
+      });
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handlePositiveFeedback,
+          disabled: isSubmitting,
+          className: cn(
+            "group w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300",
+            feedback === "positive" ? "bg-primary/10 text-primary" : "bg-secondary text-muted-foreground hover:bg-primary/10 hover:text-primary",
+            isSubmitting && "opacity-50 cursor-not-allowed"
+          ),
+          title: t("helpful"),
+          children: /* @__PURE__ */ jsx(ThumbsUpIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleNegativeFeedback,
+          disabled: isSubmitting,
+          className: cn(
+            "group w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300",
+            feedback === "negative" ? "bg-red-100 text-red-500" : "bg-secondary text-muted-foreground hover:bg-red-50 hover:text-red-500",
+            isSubmitting && "opacity-50 cursor-not-allowed"
+          ),
+          title: t("notHelpful"),
+          children: /* @__PURE__ */ jsx(ThumbsDownIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: "group w-8 h-8 rounded-full bg-secondary flex items-center justify-center text-muted-foreground hover:bg-primary/10 hover:text-primary transition-all duration-300",
+          title: t("copyResponse"),
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    showReviewForm && /* @__PURE__ */ jsxs("div", { className: "mt-4 bg-gradient-to-br from-accent to-secondary rounded-2xl border border-border overflow-hidden animate-in slide-in-from-top-2 duration-300", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 border-b border-border flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-8 h-8 rounded-xl bg-card border border-border flex items-center justify-center", children: /* @__PURE__ */ jsx(ThumbsDownIcon, { className: "text-red-500" }) }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: t("whatWentWrong") })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleCancelReview,
+            className: "w-8 h-8 rounded-full bg-card border border-border flex items-center justify-center hover:border-primary transition-colors",
+            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "p-5 space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: REVIEW_TYPES.map((type) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setReviewType(type.value),
+            className: cn(
+              "px-4 py-2 rounded-full text-xs font-medium transition-all duration-300",
+              reviewType === type.value ? "bg-primary text-primary-foreground shadow-md shadow-primary/20" : "bg-card border border-border text-foreground hover:border-primary hover:text-primary"
+            ),
+            children: t(type.labelKey)
+          },
+          type.value
+        )) }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            placeholder: t("addDetails"),
+            value: reviewText,
+            onChange: (e) => setReviewText(e.target.value),
+            rows: 2,
+            className: "text-sm resize-none rounded-xl border-border focus:border-primary focus:ring-primary/20"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleSubmitReview,
+            disabled: isSubmitting,
+            className: "group relative px-5 py-2.5 bg-primary text-primary-foreground rounded-full text-sm font-medium overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-primary/25 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "relative z-10", children: isSubmitting ? t("submitting") : t("submitFeedback") }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity bg-primary/90"
+                }
+              )
+            ]
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+				.animate-in {
+					animation: animateIn 0.3s ease-out;
+				}
+				.slide-in-from-top-2 {
+					--tw-enter-translate-y: -0.5rem;
+				}
+				@keyframes animateIn {
+					from {
+						opacity: 0;
+						transform: translateY(var(--tw-enter-translate-y, 0));
+					}
+					to {
+						opacity: 1;
+						transform: translateY(0);
+					}
+				}
+			` })
+  ] });
+}
+var MOBILE_BREAKPOINT = 768;
+function subscribeToResize(cb) {
+  if (typeof window === "undefined") return () => {
+  };
+  window.addEventListener("resize", cb);
+  return () => window.removeEventListener("resize", cb);
+}
+function getIsMobile() {
+  if (typeof window === "undefined") return false;
+  return window.innerWidth < MOBILE_BREAKPOINT;
+}
+function ComponentRenderer({
+  htmlCode,
+  cssCode,
+  data,
+  mobileGridCols = 1,
+  desktopGridCols = 3,
+  onInteraction,
+  messageId,
+  eventId,
+  mobilePageSize = 4,
+  desktopPageSize = 4
+}) {
+  const containerId = useId();
+  const containerRef = useRef(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const isMobile = useSyncExternalStore(subscribeToResize, getIsMobile, () => true);
+  const pageSize = isMobile ? mobilePageSize : desktopPageSize;
+  const isArray = Array.isArray(data);
+  const totalItems = isArray ? data.length : 1;
+  const totalPages = isArray ? Math.ceil(totalItems / pageSize) : 1;
+  const hasPagination = isArray && totalItems > pageSize;
+  useEffect(() => {
+    setCurrentPage((p) => Math.min(p, Math.max(0, totalPages - 1)));
+  }, [totalPages]);
+  const displayData = isArray && hasPagination ? data.slice(currentPage * pageSize, (currentPage + 1) * pageSize) : data;
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (typeof document === "undefined") return;
+    let processedHtml = "";
+    if (Array.isArray(displayData)) {
+      const gridId = `grid-${containerId}`;
+      const items = displayData.map((item, idx) => {
+        let rendered = replaceTemplateVariables(htmlCode, item);
+        rendered = processImagesInHtml(rendered);
+        const globalIndex = currentPage * pageSize + idx;
+        return `<div class="grid-item" data-item-index="${globalIndex}">${rendered}</div>`;
+      }).join("");
+      processedHtml = `<div class="grid-container" id="${gridId}">${items}</div>`;
+    } else {
+      processedHtml = replaceTemplateVariables(htmlCode, displayData);
+      processedHtml = processImagesInHtml(processedHtml);
+    }
+    containerRef.current.innerHTML = processedHtml;
+    const styleId = `component-style-${containerId}`;
+    const existingStyle = document.getElementById(styleId);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+    let finalCss = cssCode;
+    if (Array.isArray(displayData)) {
+      const gridCss = `
+#${containerId} .grid-container {
+  display: grid;
+  grid-template-columns: repeat(${mobileGridCols}, 1fr);
+  gap: 1rem;
+  width: 100%;
+}
+
+#${containerId} .grid-item {
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  #${containerId} .grid-container {
+    grid-template-columns: repeat(${desktopGridCols}, 1fr);
+  }
+}
+`;
+      finalCss = `${cssCode}
+${gridCss}`;
+    }
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = finalCss;
+    containerRef.current.appendChild(style);
+    const images = containerRef.current.querySelectorAll("img");
+    images.forEach((img) => {
+      if (!img.hasAttribute("loading")) {
+        img.setAttribute("loading", "lazy");
+      }
+    });
+    const links = containerRef.current.querySelectorAll("a");
+    links.forEach((link) => {
+      link.setAttribute("target", "_blank");
+      link.setAttribute("rel", "noopener noreferrer");
+    });
+  }, [htmlCode, cssCode, displayData, mobileGridCols, desktopGridCols, containerId, currentPage, pageSize, totalItems, totalPages]);
+  return /* @__PURE__ */ jsxs("div", { className: "component-renderer-wrapper", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        id: containerId,
+        className: "component-render w-full rounded",
+        onClick: (e) => {
+          if (!onInteraction) return;
+          const target = e.target;
+          const link = target.closest("a");
+          const button = target.closest("button");
+          if (link?.href) {
+            onInteraction({
+              type: "link_click",
+              target: link.href,
+              label: link.textContent || link.href,
+              metadata: { url: link.href, text: link.textContent },
+              messageId,
+              eventId
+            });
+          } else if (button && !button.hasAttribute("data-no-track")) {
+            onInteraction({
+              type: "button_click",
+              target: button.textContent || "button",
+              label: button.textContent || "button",
+              metadata: { buttonText: button.textContent },
+              messageId,
+              eventId
+            });
+          }
+        },
+        style: { display: "block" }
+      }
+    ),
+    hasPagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 mt-4", dir: "ltr", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setCurrentPage((p) => Math.max(0, p - 1)),
+          disabled: currentPage === 0,
+          className: "px-3 py-1.5 text-sm rounded-md border border-gray-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-gray-100 transition-colors",
+          "aria-label": "Previous page",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600 px-2 tabular-nums", children: [
+        currentPage + 1,
+        " / ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setCurrentPage((p) => Math.min(totalPages - 1, p + 1)),
+          disabled: currentPage >= totalPages - 1,
+          className: "px-3 py-1.5 text-sm rounded-md border border-gray-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-gray-100 transition-colors",
+          "aria-label": "Next page",
+          children: "\u203A"
+        }
+      )
+    ] })
+  ] });
+}
+function replaceTemplateVariables(html, data) {
+  let processed = processEachBlocks(html, data);
+  processed = processed.replace(/\{\{[#/][^}]+\}\}/g, "");
+  processed = processed.replace(/\{\{this\}\}/g, () => {
+    return data !== void 0 && data !== null ? String(data) : "";
+  });
+  processed = processed.replace(/\{\{this\.([^}]+)\}\}/g, "{{$1}}");
+  return processed.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
+    try {
+      const trimmedPath = path.trim();
+      const value = getNestedValue(data, trimmedPath);
+      if (value === void 0 || value === null) {
+        return "";
+      }
+      if (typeof value === "object") {
+        return JSON.stringify(value);
+      }
+      return String(value);
+    } catch (error) {
+      console.error(`Error processing template variable {{${path}}}:`, error);
+      return match;
+    }
+  });
+}
+function processEachBlocks(html, data) {
+  const eachRegex = /\{\{#each\s+([^}]+)\}\}([\s\S]*?)\{\{\/each\}\}/g;
+  return html.replace(eachRegex, (_match, field, content) => {
+    const trimmedField = field.trim();
+    const array = getNestedValue(data, trimmedField);
+    if (!Array.isArray(array)) {
+      return "";
+    }
+    return array.map((item) => {
+      let itemHtml = processEachBlocks(content, item);
+      if (typeof item !== "object" || item === null) {
+        itemHtml = itemHtml.replace(/\{\{this\}\}/g, String(item));
+        return itemHtml;
+      }
+      itemHtml = itemHtml.replace(/\{\{this\.([^}]+)\}\}/g, "{{$1}}");
+      itemHtml = itemHtml.replace(/\{\{([^}]+)\}\}/g, (m, path) => {
+        const trimmedPath = path.trim();
+        if (trimmedPath.startsWith("#") || trimmedPath.startsWith("/")) return m;
+        const value = getNestedValue(item, trimmedPath);
+        if (value === void 0 || value === null) return "";
+        if (typeof value === "object") return JSON.stringify(value);
+        return String(value);
+      });
+      return itemHtml;
+    }).join("");
+  });
+}
+function getNestedValue(obj, path) {
+  if (!path || obj === null || obj === void 0) {
+    return void 0;
+  }
+  const parts = path.split(/\.(?![^[]*\])/);
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) {
+      return void 0;
+    }
+    const arrayMatch = part.match(/^([^[]+)\[([^\]]+)\]$/);
+    if (arrayMatch) {
+      const [, key, index] = arrayMatch;
+      current = current[key];
+      if (Array.isArray(current)) {
+        current = current[parseInt(index, 10)];
+      }
+    } else {
+      current = current[part];
+    }
+  }
+  return current;
+}
+var Artifact = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      className
+    ),
+    ...props
+  }
+);
+var ArtifactHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",
+      className
+    ),
+    ...props
+  }
+);
+var ArtifactClose = ({
+  className,
+  children,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Button,
+  {
+    className: cn(
+      "size-8 p-0 text-muted-foreground hover:text-foreground",
+      className
+    ),
+    size,
+    type: "button",
+    variant,
+    ...props,
+    children: [
+      children ?? /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+);
+var ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("font-medium text-foreground text-sm", className),
+    ...props
+  }
+);
+var ArtifactDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-sm", className), ...props });
+var ArtifactActions = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props });
+var ArtifactAction = ({
+  tooltip,
+  label,
+  icon: Icon,
+  children,
+  className,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn(
+        "size-8 p-0 text-muted-foreground hover:text-foreground",
+        className
+      ),
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4" }) : children,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+var ArtifactContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto p-4", className), ...props });
+var CodeBlockContext = createContext({
+  code: ""
+});
+var lineNumberTransformer = {
+  name: "line-numbers",
+  line(node, line) {
+    node.children.unshift({
+      type: "element",
+      tagName: "span",
+      properties: {
+        className: [
+          "inline-block",
+          "min-w-10",
+          "mr-4",
+          "text-right",
+          "select-none",
+          "text-muted-foreground"
+        ]
+      },
+      children: [{ type: "text", value: String(line) }]
+    });
+  }
+};
+async function highlightCode(code, language, showLineNumbers = false) {
+  const transformers = showLineNumbers ? [lineNumberTransformer] : [];
+  return await Promise.all([
+    codeToHtml(code, {
+      lang: language,
+      theme: "one-light",
+      transformers
+    }),
+    codeToHtml(code, {
+      lang: language,
+      theme: "one-dark-pro",
+      transformers
+    })
+  ]);
+}
+var CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}) => {
+  const [html, setHtml] = useState("");
+  const [darkHtml, setDarkHtml] = useState("");
+  const mounted = useRef(false);
+  useEffect(() => {
+    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+      if (!mounted.current) {
+        setHtml(light);
+        setDarkHtml(dark);
+        mounted.current = true;
+      }
+    });
+    return () => {
+      mounted.current = false;
+    };
+  }, [code, language, showLineNumbers]);
+  return /* @__PURE__ */ jsx(CodeBlockContext.Provider, { value: { code }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "overflow-auto dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm",
+            dangerouslySetInnerHTML: { __html: html }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "hidden overflow-auto dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm",
+            dangerouslySetInnerHTML: { __html: darkHtml }
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
+      ] })
+    }
+  ) });
+};
+var CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { code } = useContext(CodeBlockContext);
+  const copyToClipboard = async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(code);
+      setIsCopied(true);
+      onCopy?.();
+      setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error);
+    }
+  };
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("shrink-0", className),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { size: 14 })
+    }
+  );
+};
+var WebPreviewContext = createContext(null);
+var useWebPreview = () => {
+  const context = useContext(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+var WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ...props
+}) => {
+  const [url, setUrl] = useState(defaultUrl);
+  const [consoleOpen, setConsoleOpen] = useState(false);
+  const handleUrlChange = (newUrl) => {
+    setUrl(newUrl);
+    onUrlChange?.(newUrl);
+  };
+  const contextValue = {
+    url,
+    setUrl: handleUrlChange,
+    consoleOpen,
+    setConsoleOpen
+  };
+  return /* @__PURE__ */ jsx(WebPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex size-full flex-col rounded-lg border bg-card",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+var WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center gap-1 border-b p-2", className),
+    ...props,
+    children
+  }
+);
+var WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: "h-8 w-8 p-0 hover:text-foreground",
+      disabled,
+      onClick,
+      size: "sm",
+      variant: "ghost",
+      ...props,
+      children
+    }
+  ) }),
+  /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+] }) });
+var WebPreviewUrl = ({
+  value,
+  onChange,
+  onKeyDown,
+  ...props
+}) => {
+  const { url, setUrl } = useWebPreview();
+  const [inputValue, setInputValue] = useState(url);
+  useEffect(() => {
+    setInputValue(url);
+  }, [url]);
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+    onChange?.(event);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      const target = event.target;
+      setUrl(target.value);
+    }
+    onKeyDown?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      className: "h-8 flex-1 text-sm",
+      onChange: onChange ?? handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder: "Enter URL...",
+      value: value ?? inputValue,
+      ...props
+    }
+  );
+};
+var WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  ...props
+}) => {
+  const { url } = useWebPreview();
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        className: cn("size-full", className),
+        sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-presentation",
+        src: (src ?? url) || void 0,
+        title: "Preview",
+        ...props
+      }
+    ),
+    loading
+  ] });
+};
+var WebPreviewConsole = ({
+  className,
+  logs = [],
+  children,
+  ...props
+}) => {
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      className: cn("border-t bg-muted/50 font-mono text-sm", className),
+      onOpenChange: setConsoleOpen,
+      open: consoleOpen,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: "flex w-full items-center justify-between p-4 text-start font-medium hover:bg-muted/50",
+            variant: "ghost",
+            children: [
+              "Console",
+              /* @__PURE__ */ jsx(
+                ChevronDownIcon,
+                {
+                  className: cn(
+                    "h-4 w-4 transition-transform duration-200",
+                    consoleOpen && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          CollapsibleContent,
+          {
+            className: cn(
+              "px-4 pb-4",
+              "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto", children: [
+              logs.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No console output" }) : logs.map((log, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "text-xs",
+                    log.level === "error" && "text-destructive",
+                    log.level === "warn" && "text-yellow-600",
+                    log.level === "log" && "text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: log.timestamp.toLocaleTimeString() }),
+                    " ",
+                    log.message
+                  ]
+                },
+                `${log.timestamp.getTime()}-${index}`
+              )),
+              children
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+var Sources = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("not-prose mb-4 text-primary text-xs", className),
+    ...props
+  }
+);
+var SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleTrigger,
+  {
+    className: cn("flex items-center gap-2", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { className: "font-medium", children: [
+        "Used ",
+        count,
+        " sources"
+      ] }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4" })
+    ] })
+  }
+);
+var SourcesContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleContent,
+  {
+    className: cn(
+      "mt-3 flex w-fit flex-col gap-2",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+var Source = ({ href, title, children, ...props }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    className: "flex items-center gap-2",
+    href,
+    rel: "noreferrer",
+    target: "_blank",
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BookIcon, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "block font-medium", children: title })
+    ] })
+  }
+);
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  HoverCardPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+var InlineCitation = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("group inline items-center gap-1", className),
+    ...props
+  }
+);
+var InlineCitationText = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("transition-colors group-hover:bg-accent", className),
+    ...props
+  }
+);
+var InlineCitationCard = (props) => /* @__PURE__ */ jsx(HoverCard, { closeDelay: 0, openDelay: 0, ...props });
+var InlineCitationCardTrigger = ({
+  sources,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  Badge,
+  {
+    className: cn("ml-1 rounded-full", className),
+    variant: "secondary",
+    ...props,
+    children: sources[0] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      new URL(sources[0]).hostname,
+      " ",
+      sources.length > 1 && `+${sources.length - 1}`
+    ] }) : "unknown"
+  }
+) });
+var InlineCitationCardBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardContent, { className: cn("relative w-80 p-0", className), ...props });
+var CarouselApiContext = createContext(void 0);
+var useCarouselApi = () => {
+  const context = useContext(CarouselApiContext);
+  return context;
+};
+var InlineCitationCarousel = ({
+  className,
+  children,
+  ...props
+}) => {
+  const [api, setApi] = useState();
+  return /* @__PURE__ */ jsx(CarouselApiContext.Provider, { value: api, children: /* @__PURE__ */ jsx(Carousel, { className: cn("w-full", className), setApi, ...props, children }) });
+};
+var InlineCitationCarouselContent = (props) => /* @__PURE__ */ jsx(CarouselContent, { ...props });
+var InlineCitationCarouselItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CarouselItem,
+  {
+    className: cn("w-full space-y-2 p-4 pl-8", className),
+    ...props
+  }
+);
+var InlineCitationCarouselHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2",
+      className
+    ),
+    ...props
+  }
+);
+var InlineCitationCarouselIndex = ({
+  children,
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
+        className
+      ),
+      ...props,
+      children: children ?? `${current}/${count}`
+    }
+  );
+};
+var InlineCitationCarouselPrev = ({
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollPrev();
+    }
+  }, [api]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Previous",
+      className: cn("shrink-0", className),
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4 text-muted-foreground" })
+    }
+  );
+};
+var InlineCitationCarouselNext = ({
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollNext();
+    }
+  }, [api]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Next",
+      className: cn("shrink-0", className),
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4 text-muted-foreground" })
+    }
+  );
+};
+var InlineCitationSource = ({
+  title,
+  url,
+  description,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), ...props, children: [
+  title && /* @__PURE__ */ jsx("h4", { className: "truncate font-medium text-sm leading-tight", children: title }),
+  url && /* @__PURE__ */ jsx("p", { className: "truncate break-all text-muted-foreground text-xs", children: url }),
+  description && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-muted-foreground text-sm leading-relaxed", children: description }),
+  children
+] });
+var InlineCitationQuote = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "blockquote",
+  {
+    className: cn(
+      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2
+}) => {
+  const MotionComponent = motion.create(
+    Component
+  );
+  const dynamicSpread = useMemo(
+    () => (children?.length ?? 0) * spread,
+    [children, spread]
+  );
+  return /* @__PURE__ */ jsx(
+    MotionComponent,
+    {
+      animate: { backgroundPosition: "0% center" },
+      className: cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ac-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      ),
+      initial: { backgroundPosition: "100% center" },
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        backgroundImage: "var(--bg), linear-gradient(var(--ac-muted-foreground), var(--ac-muted-foreground))"
+      },
+      transition: {
+        repeat: Number.POSITIVE_INFINITY,
+        duration,
+        ease: "linear"
+      },
+      children
+    }
+  );
+};
+var Shimmer = memo(ShimmerComponent);
+var ReasoningContext = createContext(null);
+var useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+var AUTO_CLOSE_DELAY = 1e3;
+var MS_IN_S = 1e3;
+var Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    const [duration, setDuration] = useControllableState({
+      prop: durationProp,
+      defaultProp: void 0
+    });
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const [startTime, setStartTime] = useState(null);
+    useEffect(() => {
+      if (isStreaming) {
+        if (startTime === null) {
+          setStartTime(Date.now());
+        }
+      } else if (startTime !== null) {
+        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+        setStartTime(null);
+      }
+    }, [isStreaming, startTime, setDuration]);
+    useEffect(() => {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+    const handleOpenChange = (newOpen) => {
+      setIsOpen(newOpen);
+    };
+    return /* @__PURE__ */ jsx(
+      ReasoningContext.Provider,
+      {
+        value: { isStreaming, isOpen, setIsOpen, duration },
+        children: /* @__PURE__ */ jsx(
+          Collapsible,
+          {
+            className: cn("not-prose mb-4", className),
+            onOpenChange: handleOpenChange,
+            open: isOpen,
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+var defaultGetThinkingMessage = (isStreaming, duration) => {
+  if (isStreaming || duration === 0) {
+    return /* @__PURE__ */ jsx(Shimmer, { duration: 1, children: "Thinking..." });
+  }
+  if (duration === void 0) {
+    return /* @__PURE__ */ jsx("p", { children: "Thought for a few seconds" });
+  }
+  return /* @__PURE__ */ jsxs("p", { children: [
+    "Thought for ",
+    duration,
+    " seconds"
+  ] });
+};
+var ReasoningTrigger = memo(
+  ({ className, children, getThinkingMessage = defaultGetThinkingMessage, ...props }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+    return /* @__PURE__ */ jsx(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+          getThinkingMessage(isStreaming, duration),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var ReasoningContent = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+    CollapsibleContent,
+    {
+      className: cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Streamdown, { ...props, children })
+    }
+  )
+);
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+function ThinkingSpinner({
+  text = "Thinking...",
+  className
+}) {
+  const [displayText, setDisplayText] = useState(text);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const prevTextRef = useRef(text);
+  useEffect(() => {
+    if (text !== prevTextRef.current) {
+      setIsAnimating(true);
+      const timer = setTimeout(() => {
+        setDisplayText(text);
+        setIsAnimating(false);
+        prevTextRef.current = text;
+      }, 150);
+      return () => clearTimeout(timer);
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 my-4", className), children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "animate-spin",
+        width: "20",
+        height: "20",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: { color: "var(--ac-loader-color, var(--ac-primary, #2f80ed))" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "10",
+              cy: "10",
+              r: "8",
+              stroke: "#E5E5E5",
+              strokeWidth: "2",
+              fill: "none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M10 2C14.4183 2 18 5.58172 18 10",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              fill: "none"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-sm text-muted-foreground transition-all duration-150",
+          isAnimating ? "opacity-0" : "opacity-100"
+        ),
+        children: displayText
+      }
+    )
+  ] });
+}
+function FollowupButtons({
+  suggestions,
+  onSelect,
+  className,
+  disabled = false
+}) {
+  if (!suggestions || suggestions.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      onClick: () => onSelect(suggestion),
+      disabled,
+      className: "text-xs h-auto py-1.5 px-3 whitespace-normal text-start",
+      children: suggestion
+    },
+    index
+  )) });
+}
+var Suggestions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full overflow-x-auto whitespace-nowrap", ...props, children: [
+  /* @__PURE__ */ jsx("div", { className: cn("flex w-max flex-nowrap items-center gap-2", className), children }),
+  /* @__PURE__ */ jsx(ScrollBar, { className: "hidden", orientation: "horizontal" })
+] });
+var Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}) => {
+  const handleClick = () => {
+    onClick?.(suggestion);
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("cursor-pointer rounded-full px-4", className),
+      onClick: handleClick,
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: children || suggestion
+    }
+  );
+};
+var PERCENT_MAX = 100;
+var ICON_RADIUS = 10;
+var ICON_VIEWBOX = 24;
+var ICON_CENTER = 12;
+var ICON_STROKE_WIDTH = 2;
+var ContextContext = createContext(null);
+var useContextValue = () => {
+  const context = useContext(ContextContext);
+  if (!context) {
+    throw new Error("Context components must be used within Context");
+  }
+  return context;
+};
+var Context = ({
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  ContextContext.Provider,
+  {
+    value: {
+      usedTokens,
+      maxTokens,
+      usage,
+      modelId
+    },
+    children: /* @__PURE__ */ jsx(HoverCard, { closeDelay: 0, openDelay: 0, ...props })
+  }
+);
+var ContextIcon = () => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const usedPercent = usedTokens / maxTokens;
+  const dashOffset = circumference * (1 - usedPercent);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": "Model context usage",
+      height: "20",
+      role: "img",
+      style: { color: "currentcolor" },
+      viewBox: `0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`,
+      width: "20",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.25",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeWidth: ICON_STROKE_WIDTH
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.7",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeDasharray: `${circumference} ${circumference}`,
+            strokeDashoffset: dashOffset,
+            strokeLinecap: "round",
+            strokeWidth: ICON_STROKE_WIDTH,
+            style: { transformOrigin: "center", transform: "rotate(-90deg)" }
+          }
+        )
+      ]
+    }
+  );
+};
+var ContextTrigger = ({ children, ...props }) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const renderedPercent = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    maximumFractionDigits: 1
+  }).format(usedPercent);
+  return /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: renderedPercent }),
+    /* @__PURE__ */ jsx(ContextIcon, {})
+  ] }) });
+};
+var ContextContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  HoverCardContent,
+  {
+    className: cn("min-w-60 divide-y overflow-hidden p-0", className),
+    ...props
+  }
+);
+var ContextContentHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const displayPct = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    maximumFractionDigits: 1
+  }).format(usedPercent);
+  const used = new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(usedTokens);
+  const total = new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(maxTokens);
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [
+      /* @__PURE__ */ jsx("p", { children: displayPct }),
+      /* @__PURE__ */ jsxs("p", { className: "font-mono text-muted-foreground", children: [
+        used,
+        " / ",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })
+  ] }) });
+};
+var ContextContentBody = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("w-full p-3", className), ...props, children });
+var ContextContentFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { modelId, usage } = useContextValue();
+  const costUSD = modelId ? getUsage({
+    modelId,
+    usage: {
+      input: usage?.inputTokens ?? 0,
+      output: usage?.outputTokens ?? 0
+    }
+  }).costUSD?.totalUSD : void 0;
+  const totalCost = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(costUSD ?? 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Total cost" }),
+        /* @__PURE__ */ jsx("span", { children: totalCost })
+      ] })
+    }
+  );
+};
+var ContextInputUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const inputTokens = usage?.inputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!inputTokens) {
+    return null;
+  }
+  const inputCost = modelId ? getUsage({
+    modelId,
+    usage: { input: inputTokens, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const inputCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(inputCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Input" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: inputCostText, tokens: inputTokens })
+      ]
+    }
+  );
+};
+var ContextOutputUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const outputTokens = usage?.outputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!outputTokens) {
+    return null;
+  }
+  const outputCost = modelId ? getUsage({
+    modelId,
+    usage: { input: 0, output: outputTokens }
+  }).costUSD?.totalUSD : void 0;
+  const outputCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(outputCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Output" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: outputCostText, tokens: outputTokens })
+      ]
+    }
+  );
+};
+var ContextReasoningUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const reasoningTokens = usage?.reasoningTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!reasoningTokens) {
+    return null;
+  }
+  const reasoningCost = modelId ? getUsage({
+    modelId,
+    usage: { reasoningTokens }
+  }).costUSD?.totalUSD : void 0;
+  const reasoningCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(reasoningCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })
+      ]
+    }
+  );
+};
+var ContextCacheUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const cacheTokens = usage?.cachedInputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!cacheTokens) {
+    return null;
+  }
+  const cacheCost = modelId ? getUsage({
+    modelId,
+    usage: { cacheReads: cacheTokens, input: 0, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const cacheCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(cacheCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Cache" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })
+      ]
+    }
+  );
+};
+var TokensWithCost = ({
+  tokens,
+  costText
+}) => /* @__PURE__ */ jsxs("span", { children: [
+  tokens === void 0 ? "\u2014" : new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(tokens),
+  costText ? /* @__PURE__ */ jsxs("span", { className: "ml-2 text-muted-foreground", children: [
+    "\u2022 ",
+    costText
+  ] }) : null
+] });
+var ChainOfThoughtContext = createContext(
+  null
+);
+var useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought"
+    );
+  }
+  return context;
+};
+var ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen]
+    );
+    return /* @__PURE__ */ jsx(ChainOfThoughtContext.Provider, { value: chainOfThoughtContext, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("not-prose max-w-prose space-y-4", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var ChainOfThoughtHeader = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+    return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: setIsOpen, open: isOpen, children: /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-start", children: children ?? "Chain of Thought" }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var ChainOfThoughtStep = memo(
+  ({
+    className,
+    icon: Icon = DotIcon,
+    label,
+    description,
+    status = "complete",
+    children,
+    ...props
+  }) => {
+    const statusStyles = {
+      complete: "text-muted-foreground",
+      active: "text-foreground",
+      pending: "text-muted-foreground/50"
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex gap-2 text-sm",
+          statusStyles[status],
+          "fade-in-0 slide-in-from-top-2 animate-in",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative mt-0.5", children: [
+            /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+            /* @__PURE__ */ jsx("div", { className: "-mx-px absolute top-7 bottom-0 left-1/2 w-px bg-border" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2 overflow-hidden", children: [
+            /* @__PURE__ */ jsx("div", { children: label }),
+            description && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: description }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+var ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ...props
+    }
+  )
+);
+var ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+    Badge,
+    {
+      className: cn("gap-1 px-2 py-0.5 font-normal text-xs", className),
+      variant: "secondary",
+      ...props,
+      children
+    }
+  )
+);
+var ChainOfThoughtContent = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen } = useChainOfThought();
+    return /* @__PURE__ */ jsx(Collapsible, { open: isOpen, children: /* @__PURE__ */ jsx(
+      CollapsibleContent,
+      {
+        className: cn(
+          "mt-2 space-y-3",
+          "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("mt-2 space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children }),
+    caption && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: caption })
+  ] })
+);
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
+var ConfirmationContext = createContext(
+  null
+);
+var useConfirmation = () => {
+  const context = useContext(ConfirmationContext);
+  if (!context) {
+    throw new Error("Confirmation components must be used within Confirmation");
+  }
+  return context;
+};
+var Confirmation = ({
+  className,
+  approval,
+  state,
+  ...props
+}) => {
+  if (!approval || state === "input-streaming" || state === "input-available") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ConfirmationContext.Provider, { value: { approval, state }, children: /* @__PURE__ */ jsx(Alert, { className: cn("flex flex-col gap-2", className), ...props }) });
+};
+var ConfirmationTitle = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(AlertDescription, { className: cn("inline", className), ...props });
+var ConfirmationRequest = ({ children }) => {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationAccepted = ({
+  children
+}) => {
+  const { approval, state } = useConfirmation();
+  if (!approval?.approved || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationRejected = ({
+  children
+}) => {
+  const { approval, state } = useConfirmation();
+  if (approval?.approved !== false || state !== "approval-responded" && state !== "output-denied" && state !== "output-available") {
+    return null;
+  }
+  return children;
+};
+var ConfirmationActions = ({
+  className,
+  ...props
+}) => {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end gap-2 self-end", className),
+      ...props
+    }
+  );
+};
+var ConfirmationAction = (props) => /* @__PURE__ */ jsx(Button, { className: "h-8 px-3 text-sm", type: "button", ...props });
+var Controls = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Controls$1,
+  {
+    className: cn(
+      "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
+      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
+      className
+    ),
+    ...props
+  }
+);
+var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+var CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
+};
+var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = Command$1.Input.displayName;
+var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Command$1.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+var ModelSelector = (props) => /* @__PURE__ */ jsx(Dialog, { ...props });
+var ModelSelectorTrigger = (props) => /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+var ModelSelectorContent = ({
+  className,
+  children,
+  title = "Model Selector",
+  ...props
+}) => /* @__PURE__ */ jsxs(DialogContent, { className: cn("p-0", className), ...props, children: [
+  /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+  /* @__PURE__ */ jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children })
+] });
+var ModelSelectorDialog = (props) => /* @__PURE__ */ jsx(CommandDialog, { ...props });
+var ModelSelectorInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandInput, { className: cn("h-auto py-3.5", className), ...props });
+var ModelSelectorList = (props) => /* @__PURE__ */ jsx(CommandList, { ...props });
+var ModelSelectorEmpty = (props) => /* @__PURE__ */ jsx(CommandEmpty, { ...props });
+var ModelSelectorGroup = (props) => /* @__PURE__ */ jsx(CommandGroup, { ...props });
+var ModelSelectorItem = (props) => /* @__PURE__ */ jsx(CommandItem, { ...props });
+var ModelSelectorShortcut = (props) => /* @__PURE__ */ jsx(CommandShortcut, { ...props });
+var ModelSelectorSeparator = (props) => /* @__PURE__ */ jsx(CommandSeparator, { ...props });
+var ModelSelectorLogo = ({
+  provider,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    ...props,
+    alt: `${provider} logo`,
+    className: cn("size-3 dark:invert", className),
+    height: 12,
+    src: `https://models.dev/logos/${provider}.svg`,
+    width: 12
+  }
+);
+var ModelSelectorLogoGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var ModelSelectorName = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-start", className), ...props });
+var providers = {
+  github: {
+    title: "Open in GitHub",
+    createUrl: (url) => url,
+    icon: /* @__PURE__ */ jsxs("svg", { fill: "currentColor", role: "img", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ jsx("title", { children: "GitHub" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" })
+    ] })
+  },
+  chatgpt: {
+    title: "Open in ChatGPT",
+    createUrl: (prompt) => `https://chatgpt.com/?${new URLSearchParams({
+      hints: "search",
+      prompt
+    })}`,
+    icon: /* @__PURE__ */ jsxs("svg", { fill: "currentColor", role: "img", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("title", { children: "OpenAI" }),
+      /* @__PURE__ */ jsx("path", { d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729z" })
+    ] })
+  },
+  claude: {
+    title: "Open in Claude",
+    createUrl: (q) => `https://claude.ai/new?${new URLSearchParams({ q })}`,
+    icon: /* @__PURE__ */ jsx("svg", { fill: "currentColor", role: "img", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("title", { children: "Claude" }) })
+  },
+  t3: {
+    title: "Open in T3 Chat",
+    createUrl: (q) => `https://t3.chat/new?${new URLSearchParams({ q })}`,
+    icon: /* @__PURE__ */ jsx(MessageCircleIcon, {})
+  },
+  scira: {
+    title: "Open in Scira",
+    createUrl: (q) => `https://scira.ai/?${new URLSearchParams({ q })}`,
+    icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 910 934", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("title", { children: "Scira AI" }) })
+  },
+  v0: {
+    title: "Open in v0",
+    createUrl: (q) => `https://v0.app?${new URLSearchParams({ q })}`,
+    icon: /* @__PURE__ */ jsxs("svg", { fill: "currentColor", viewBox: "0 0 147 70", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx("title", { children: "v0" }),
+      /* @__PURE__ */ jsx("path", { d: "M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z" })
+    ] })
+  },
+  cursor: {
+    title: "Open in Cursor",
+    createUrl: (text) => {
+      if (typeof window === "undefined") return `https://cursor.com/link/prompt?text=${encodeURIComponent(text)}`;
+      const url = new URL("https://cursor.com/link/prompt");
+      url.searchParams.set("text", text);
+      return url.toString();
+    },
+    icon: /* @__PURE__ */ jsx("svg", { version: "1.1", viewBox: "0 0 466.73 532.09", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("title", { children: "Cursor" }) })
+  }
+};
+var OpenInContext = createContext(void 0);
+var useOpenInContext = () => {
+  const context = useContext(OpenInContext);
+  if (!context) {
+    throw new Error("OpenIn components must be used within an OpenIn provider");
+  }
+  return context;
+};
+var OpenIn = ({ query, ...props }) => /* @__PURE__ */ jsx(OpenInContext.Provider, { value: { query }, children: /* @__PURE__ */ jsx(DropdownMenu, { ...props }) });
+var OpenInContent = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  DropdownMenuContent,
+  {
+    align: "start",
+    className: cn("w-[240px]", className),
+    ...props
+  }
+);
+var OpenInItem = (props) => /* @__PURE__ */ jsx(DropdownMenuItem, { ...props });
+var OpenInLabel = (props) => /* @__PURE__ */ jsx(DropdownMenuLabel, { ...props });
+var OpenInSeparator = (props) => /* @__PURE__ */ jsx(DropdownMenuSeparator, { ...props });
+var OpenInTrigger = ({ children, ...props }) => /* @__PURE__ */ jsx(DropdownMenuTrigger, { ...props, asChild: true, children: children ?? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", children: [
+  "Open in chat",
+  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+] }) });
+var makeProviderItem = (key) => {
+  return (props) => {
+    const { query } = useOpenInContext();
+    const p = providers[key];
+    return /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, ...props, children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        className: "flex items-center gap-2",
+        href: p.createUrl(query),
+        rel: "noopener",
+        target: "_blank",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "shrink-0", children: p.icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: p.title }),
+          /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-4 shrink-0" })
+        ]
+      }
+    ) });
+  };
+};
+var OpenInChatGPT = makeProviderItem("chatgpt");
+var OpenInClaude = makeProviderItem("claude");
+var OpenInT3 = makeProviderItem("t3");
+var OpenInScira = makeProviderItem("scira");
+var OpenInv0 = makeProviderItem("v0");
+var OpenInCursor = makeProviderItem("cursor");
+var Panel = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Panel$1,
+  {
+    className: cn(
+      "m-4 overflow-hidden rounded-md border bg-card p-1",
+      className
+    ),
+    ...props
+  }
+);
+var PlanContext = createContext(null);
+var usePlan = () => {
+  const context = useContext(PlanContext);
+  if (!context) {
+    throw new Error("Plan components must be used within Plan");
+  }
+  return context;
+};
+var 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 }) }) });
+var PlanHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardHeader,
+  {
+    className: cn("flex items-start justify-between", className),
+    "data-slot": "plan-header",
+    ...props
+  }
+);
+var PlanTitle = ({ children, ...props }) => {
+  const { isStreaming } = usePlan();
+  return /* @__PURE__ */ jsx(CardTitle, { "data-slot": "plan-title", ...props, children: isStreaming ? /* @__PURE__ */ jsx(Shimmer, { children }) : children });
+};
+var 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
+    }
+  );
+};
+var PlanAction = (props) => /* @__PURE__ */ jsx(CardAction, { "data-slot": "plan-action", ...props });
+var PlanContent = (props) => /* @__PURE__ */ jsx(CollapsibleContent, { asChild: true, children: /* @__PURE__ */ jsx(CardContent, { "data-slot": "plan-content", ...props }) });
+var PlanFooter = (props) => /* @__PURE__ */ jsx(CardFooter, { "data-slot": "plan-footer", ...props });
+var 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" })
+    ]
+  }
+) });
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        " shadow-xs relative flex w-full items-center rounded-md  outline-none transition-[color,box-shadow]",
+        "h-9 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]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+        // 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 = cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    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.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "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 = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 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__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    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
+    }
+  );
+}
+var PromptInputController = createContext(
+  null
+);
+var ProviderAttachmentsContext = createContext(
+  null
+);
+var usePromptInputController = () => {
+  const ctx = useContext(PromptInputController);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use usePromptInputController()."
+    );
+  }
+  return ctx;
+};
+var useOptionalPromptInputController = () => useContext(PromptInputController);
+var useProviderAttachments = () => {
+  const ctx = useContext(ProviderAttachmentsContext);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use useProviderAttachments()."
+    );
+  }
+  return ctx;
+};
+var useOptionalProviderAttachments = () => useContext(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(() => {
+  });
+  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: typeof window !== "undefined" ? 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 && typeof window !== "undefined") {
+        URL.revokeObjectURL(found.url);
+      }
+      return prev.filter((f) => f.id !== id);
+    });
+  }, []);
+  const clear = useCallback(() => {
+    setAttachmentFiles((prev) => {
+      if (typeof window !== "undefined") {
+        for (const f of prev) {
+          if (f.url) {
+            URL.revokeObjectURL(f.url);
+          }
+        }
+      }
+      return [];
+    });
+  }, []);
+  const attachmentsRef = useRef(attachmentFiles);
+  attachmentsRef.current = attachmentFiles;
+  useEffect(() => {
+    return () => {
+      if (typeof window !== "undefined") {
+        for (const f of attachmentsRef.current) {
+          if (f.url) {
+            URL.revokeObjectURL(f.url);
+          }
+        }
+      }
+    };
+  }, []);
+  const openFileDialog = useCallback(() => {
+    openRef.current?.();
+  }, []);
+  const attachments = useMemo(
+    () => ({
+      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 = useMemo(
+    () => ({
+      textInput: {
+        value: textInput,
+        setInput: setTextInput,
+        clear: clearInput
+      },
+      attachments,
+      __registerFileInput
+    }),
+    [textInput, clearInput, attachments, __registerFileInput]
+  );
+  return /* @__PURE__ */ jsx(PromptInputController.Provider, { value: controller, children: /* @__PURE__ */ jsx(ProviderAttachmentsContext.Provider, { value: attachments, children }) });
+}
+var LocalAttachmentsContext = createContext(null);
+var usePromptInputAttachments = () => {
+  const provider = useOptionalProviderAttachments();
+  const local = useContext(LocalAttachmentsContext);
+  const context = provider ?? local;
+  if (!context) {
+    throw new Error(
+      "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider"
+    );
+  }
+  return context;
+};
+function PromptInputAttachment({
+  data,
+  className,
+  ...props
+}) {
+  const attachments = usePromptInputAttachments();
+  const filename = data.filename || "";
+  const mediaType = data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+  const isImage = mediaType === "image";
+  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+  return /* @__PURE__ */ jsxs(PromptInputHoverCard, { children: [
+    /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group relative 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",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative size-5 shrink-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0", children: isImage ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: filename || "attachment",
+                className: "size-5 object-cover",
+                height: 20,
+                src: data.url,
+                width: 20
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "flex size-5 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3" }) }) }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                "aria-label": "Remove attachment",
+                className: "absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  attachments.remove(data.id);
+                },
+                type: "button",
+                variant: "ghost",
+                children: [
+                  /* @__PURE__ */ jsx(XIcon, {}),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: attachmentLabel })
+        ]
+      },
+      data.id
+    ) }),
+    /* @__PURE__ */ jsx(PromptInputHoverCardContent, { className: "w-auto p-2", children: /* @__PURE__ */ jsxs("div", { className: "w-auto space-y-3", children: [
+      isImage && /* @__PURE__ */ jsx("div", { className: "flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: filename || "attachment preview",
+          className: "max-h-full max-w-full object-contain",
+          height: 384,
+          src: data.url,
+          width: 448
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2.5", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1 px-0.5", children: [
+        /* @__PURE__ */ jsx("h4", { className: "truncate font-semibold text-sm leading-none", children: filename || (isImage ? "Image" : "Attachment") }),
+        data.mediaType && /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-muted-foreground text-xs", children: data.mediaType })
+      ] }) })
+    ] }) })
+  ] });
+}
+function PromptInputAttachments({
+  children,
+  className,
+  ...props
+}) {
+  const attachments = usePromptInputAttachments();
+  if (!attachments.files.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-2 p-3 w-full", className),
+      ...props,
+      children: attachments.files.map((file) => /* @__PURE__ */ jsx(Fragment$1, { children: children(file) }, file.id))
+    }
+  );
+}
+var PromptInputActionAddAttachments = ({
+  label = "Add photos or files",
+  ...props
+}) => {
+  const attachments = usePromptInputAttachments();
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuItem,
+    {
+      ...props,
+      onSelect: (e) => {
+        e.preventDefault();
+        attachments.openFileDialog();
+      },
+      children: [
+        /* @__PURE__ */ jsx(ImageIcon, { className: "mr-2 size-4" }),
+        " ",
+        label
+      ]
+    }
+  );
+};
+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 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: typeof window !== "undefined" ? 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 && typeof window !== "undefined") {
+        URL.revokeObjectURL(found.url);
+      }
+      return prev.filter((file) => file.id !== id);
+    }),
+    []
+  );
+  const clearLocal = useCallback(
+    () => setItems((prev) => {
+      if (typeof window !== "undefined") {
+        for (const file of prev) {
+          if (file.url) {
+            URL.revokeObjectURL(file.url);
+          }
+        }
+      }
+      return [];
+    }),
+    []
+  );
+  const add = usingProvider ? controller.attachments.add : addLocal;
+  const remove = usingProvider ? controller.attachments.remove : removeLocal;
+  const clear = usingProvider ? controller.attachments.clear : clearLocal;
+  const openFileDialog = usingProvider ? controller.attachments.openFileDialog : openFileDialogLocal;
+  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;
+    if (typeof document === "undefined") 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 && typeof window !== "undefined") {
+        for (const f of filesRef.current) {
+          if (f.url) URL.revokeObjectURL(f.url);
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [usingProvider]
+  );
+  const handleChange = (event) => {
+    if (event.currentTarget.files) {
+      add(event.currentTarget.files);
+    }
+    event.currentTarget.value = "";
+  };
+  const convertBlobUrlToDataUrl = async (url) => {
+    if (typeof window === "undefined") return null;
+    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 ctx = useMemo(
+    () => ({
+      files: files.map((item) => ({ ...item, id: item.id })),
+      add,
+      remove,
+      clear,
+      openFileDialog,
+      fileInputRef: inputRef
+    }),
+    [files, add, remove, clear, openFileDialog]
+  );
+  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 && 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        accept,
+        "aria-label": "Upload files",
+        className: "hidden",
+        multiple,
+        onChange: handleChange,
+        ref: inputRef,
+        title: "Upload files",
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "form",
+      {
+        className: cn("w-full", className),
+        onSubmit: handleSubmit,
+        ref: formRef,
+        ...props,
+        children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden", children })
+      }
+    )
+  ] });
+  return usingProvider ? inner : /* @__PURE__ */ jsx(LocalAttachmentsContext.Provider, { value: ctx, children: inner });
+};
+var PromptInputBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("contents", className), ...props });
+var PromptInputTextarea = ({
+  onChange,
+  className,
+  placeholder = "What would you like to know?",
+  ...props
+}) => {
+  const controller = useOptionalPromptInputController();
+  const attachments = usePromptInputAttachments();
+  const [isComposing, setIsComposing] = useState(false);
+  const handleKeyDown = (e) => {
+    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.at(-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__ */ jsx(
+    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 PromptInputHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  InputGroupAddon,
+  {
+    align: "block-end",
+    className: cn("order-first flex-wrap gap-1", className),
+    ...props
+  }
+);
+var PromptInputFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  InputGroupAddon,
+  {
+    align: "block-end",
+    className: cn("justify-between gap-1", className),
+    ...props
+  }
+);
+var PromptInputTools = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props });
+var PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  ...props
+}) => {
+  const newSize = size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      className: cn(className),
+      size: newSize,
+      type: "button",
+      variant,
+      ...props
+    }
+  );
+};
+var PromptInputActionMenu = (props) => /* @__PURE__ */ jsx(DropdownMenu, { ...props });
+var PromptInputActionMenuTrigger = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PromptInputButton, { className, ...props, children: children ?? /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" }) }) });
+var PromptInputActionMenuContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn(className), ...props });
+var PromptInputActionMenuItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuItem, { className: cn(className), ...props });
+var PromptInputSubmit = ({
+  className,
+  variant = "default",
+  size = "icon-sm",
+  status,
+  children,
+  ...props
+}) => {
+  let Icon = /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "size-4" });
+  if (status === "submitted") {
+    Icon = /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" });
+  } else if (status === "streaming") {
+    Icon = /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" });
+  } else if (status === "error") {
+    Icon = /* @__PURE__ */ jsx(XIcon, { className: "size-4" });
+  }
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      "aria-label": "Submit",
+      className: cn(className),
+      size,
+      type: "submit",
+      variant,
+      ...props,
+      children: children ?? Icon
+    }
+  );
+};
+var PromptInputSpeechButton = ({
+  className,
+  textareaRef,
+  onTranscriptionChange,
+  ...props
+}) => {
+  const [isListening, setIsListening] = useState(false);
+  const [recognition, setRecognition] = useState(
+    null
+  );
+  const recognitionRef = useRef(null);
+  useEffect(() => {
+    if (typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)) {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      const speechRecognition = new SpeechRecognition();
+      speechRecognition.continuous = true;
+      speechRecognition.interimResults = true;
+      speechRecognition.lang = "en-US";
+      speechRecognition.onstart = () => {
+        setIsListening(true);
+      };
+      speechRecognition.onend = () => {
+        setIsListening(false);
+      };
+      speechRecognition.onresult = (event) => {
+        let finalTranscript = "";
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const result = event.results[i];
+          if (result.isFinal) {
+            finalTranscript += result[0]?.transcript ?? "";
+          }
+        }
+        if (finalTranscript && textareaRef?.current) {
+          const textarea = textareaRef.current;
+          const currentValue = textarea.value;
+          const newValue = currentValue + (currentValue ? " " : "") + finalTranscript;
+          textarea.value = newValue;
+          textarea.dispatchEvent(new Event("input", { bubbles: true }));
+          onTranscriptionChange?.(newValue);
+        }
+      };
+      speechRecognition.onerror = (event) => {
+        console.error("Speech recognition error:", event.error);
+        setIsListening(false);
+      };
+      recognitionRef.current = speechRecognition;
+      setRecognition(speechRecognition);
+    }
+    return () => {
+      if (recognitionRef.current) {
+        recognitionRef.current.stop();
+      }
+    };
+  }, [textareaRef, onTranscriptionChange]);
+  const toggleListening = useCallback(() => {
+    if (!recognition) {
+      return;
+    }
+    if (isListening) {
+      recognition.stop();
+    } else {
+      recognition.start();
+    }
+  }, [recognition, isListening]);
+  return /* @__PURE__ */ jsx(
+    PromptInputButton,
+    {
+      className: cn(
+        "relative transition-all duration-200",
+        isListening && "animate-pulse bg-accent text-accent-foreground",
+        className
+      ),
+      disabled: !recognition,
+      onClick: toggleListening,
+      ...props,
+      children: /* @__PURE__ */ jsx(MicIcon, { className: "size-4" })
+    }
+  );
+};
+var PromptInputSelect = (props) => /* @__PURE__ */ jsx(Select, { ...props });
+var PromptInputSelectTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  SelectTrigger,
+  {
+    className: cn(
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors",
+      "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var PromptInputSelectContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectContent, { className: cn(className), ...props });
+var PromptInputSelectItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectItem, { className: cn(className), ...props });
+var PromptInputSelectValue = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectValue, { className: cn(className), ...props });
+var PromptInputHoverCard = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCard, { closeDelay, openDelay, ...props });
+var PromptInputHoverCardTrigger = (props) => /* @__PURE__ */ jsx(HoverCardTrigger, { ...props });
+var PromptInputHoverCardContent = ({
+  align = "start",
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardContent, { align, ...props });
+var PromptInputTabsList = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn(className), ...props });
+var PromptInputTab = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn(className), ...props });
+var PromptInputTabLabel = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    className: cn(
+      "mb-2 px-3 font-medium text-muted-foreground text-xs",
+      className
+    ),
+    ...props
+  }
+);
+var PromptInputTabBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), ...props });
+var PromptInputTabItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent",
+      className
+    ),
+    ...props
+  }
+);
+var PromptInputCommand = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Command, { className: cn(className), ...props });
+var PromptInputCommandInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandInput, { className: cn(className), ...props });
+var PromptInputCommandList = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandList, { className: cn(className), ...props });
+var PromptInputCommandEmpty = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandEmpty, { className: cn(className), ...props });
+var PromptInputCommandGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandGroup, { className: cn(className), ...props });
+var PromptInputCommandItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandItem, { className: cn(className), ...props });
+var PromptInputCommandSeparator = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandSeparator, { className: cn(className), ...props });
+var QueueItem = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    className: cn(
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed ? "border-muted-foreground/20 bg-muted-foreground/10" : "border-muted-foreground/50",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "line-clamp-1 grow break-words",
+      completed ? "text-muted-foreground/50 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "ml-6 text-xs",
+      completed ? "text-muted-foreground/40 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemActions = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex gap-1", className), ...props });
+var QueueItemAction = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    className: cn(
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className
+    ),
+    size: "icon",
+    type: "button",
+    variant: "ghost",
+    ...props
+  }
+);
+var QueueItemAttachment = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("mt-1 flex flex-wrap gap-2", className), ...props });
+var QueueItemImage = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    alt: "",
+    className: cn("h-8 w-8 rounded border object-cover", className),
+    height: 32,
+    width: 32,
+    ...props
+  }
+);
+var QueueItemFile = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    className: cn(
+      "flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(PaperclipIcon, { size: 12 }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate", children })
+    ]
+  }
+);
+var QueueList = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ScrollArea, { className: cn("-mb-1 mt-2", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "max-h-40 pr-4", children: /* @__PURE__ */ jsx("ul", { children }) }) });
+var QueueSection = ({
+  className,
+  defaultOpen = true,
+  ...props
+}) => /* @__PURE__ */ jsx(Collapsible, { className: cn(className), defaultOpen, ...props });
+var QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: cn(
+      "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-start font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+      className
+    ),
+    type: "button",
+    ...props,
+    children
+  }
+) });
+var QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "group-data-[state=closed]:-rotate-90 size-4 transition-transform" }),
+  icon,
+  /* @__PURE__ */ jsxs("span", { children: [
+    count,
+    " ",
+    label
+  ] })
+] });
+var QueueSectionContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn(className), ...props });
+var Queue = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className
+    ),
+    ...props
+  }
+);
+var TaskItemFile = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TaskItem = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground text-sm", className), ...props, children });
+var Task = ({
+  defaultOpen = true,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Collapsible, { className: cn(className), defaultOpen, ...props });
+var TaskTrigger = ({
+  children,
+  className,
+  title,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, className: cn("group", className), ...props, children: children ?? /* @__PURE__ */ jsxs("div", { className: "flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground", children: [
+  /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" }),
+  /* @__PURE__ */ jsx("p", { className: "text-sm", children: title }),
+  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 transition-transform group-data-[state=open]:rotate-180" })
+] }) });
+var TaskContent = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  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 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2 border-muted border-l-2 pl-4", children })
+  }
+);
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("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__ */ jsx(CircleIcon, { className: "size-4" }),
+    "input-available": /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 animate-pulse" }),
+    "approval-requested": /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 text-yellow-600" }),
+    "approval-responded": /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4 text-blue-600" }),
+    "output-available": /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4 text-green-600" }),
+    "output-error": /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4 text-red-600" }),
+    "output-denied": /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4 text-orange-600" })
+  };
+  return /* @__PURE__ */ jsxs(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+    icons[status],
+    labels[status]
+  ] });
+};
+var ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  CollapsibleTrigger,
+  {
+    className: cn(
+      "flex w-full items-center justify-between gap-4 p-3",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(WrenchIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: title ?? type.split("-").slice(1).join("-") }),
+        getStatusBadge(state)
+      ] }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+    ]
+  }
+);
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  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 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 overflow-hidden p-4", className), ...props, children: [
+  /* @__PURE__ */ jsx("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+  /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+] });
+var ToolOutput = ({
+  className,
+  output,
+  errorText,
+  ...props
+}) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+  let Output = /* @__PURE__ */ jsx("div", { children: output });
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = /* @__PURE__ */ jsx(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+  } else if (typeof output === "string") {
+    Output = /* @__PURE__ */ jsx(CodeBlock, { code: output, language: "json" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 p-4", className), ...props, children: [
+    /* @__PURE__ */ jsx("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
+    /* @__PURE__ */ jsxs(
+      "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__ */ jsx("div", { children: errorText }),
+          Output
+        ]
+      }
+    )
+  ] });
+};
+var Toolbar = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  NodeToolbar,
+  {
+    className: cn(
+      "flex items-center gap-1 rounded-sm border bg-background p-1.5",
+      className
+    ),
+    position: Position.Bottom,
+    ...props
+  }
+);
+var Canvas = ({ children, ...props }) => /* @__PURE__ */ jsxs(
+  ReactFlow,
+  {
+    deleteKeyCode: ["Backspace", "Delete"],
+    fitView: true,
+    panOnDrag: false,
+    panOnScroll: true,
+    selectionOnDrag: true,
+    zoomOnDoubleClick: false,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Background, { bgColor: "var(--ac-sidebar)" }),
+      children
+    ]
+  }
+);
+var Checkpoint = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn("flex items-center gap-0.5 text-muted-foreground overflow-hidden", className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(Separator, {})
+    ]
+  }
+);
+var CheckpointIcon = ({
+  className,
+  children,
+  ...props
+}) => children ?? /* @__PURE__ */ jsx(BookmarkIcon, { className: cn("size-4 shrink-0", className), ...props });
+var CheckpointTrigger = ({
+  children,
+  className,
+  variant = "ghost",
+  size = "sm",
+  tooltip,
+  ...props
+}) => tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size, type: "button", variant, ...props, children }) }),
+  /* @__PURE__ */ jsx(TooltipContent, { align: "start", side: "bottom", children: tooltip })
+] }) : /* @__PURE__ */ jsx(Button, { size, type: "button", variant, ...props, children });
+var HALF = 0.5;
+var Connection = ({
+  fromX,
+  fromY,
+  toX,
+  toY
+}) => /* @__PURE__ */ jsxs("g", { children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: "animated",
+      d: `M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`,
+      fill: "none",
+      stroke: "var(--ac-ring)",
+      strokeWidth: 1
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: toX,
+      cy: toY,
+      fill: "#fff",
+      r: 3,
+      stroke: "var(--ac-ring)",
+      strokeWidth: 1
+    }
+  )
+] });
+var Temporary = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition
+}) => {
+  const [edgePath] = getSimpleBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      className: "stroke-1 stroke-ring",
+      id,
+      path: edgePath,
+      style: {
+        strokeDasharray: "5, 5"
+      }
+    }
+  );
+};
+var getHandleCoordsByPosition = (node, handlePosition) => {
+  const handleType = handlePosition === Position.Left ? "target" : "source";
+  const handle = node.internals.handleBounds?.[handleType]?.find(
+    (h) => h.position === handlePosition
+  );
+  if (!handle) {
+    return [0, 0];
+  }
+  let offsetX = handle.width / 2;
+  let offsetY = handle.height / 2;
+  switch (handlePosition) {
+    case Position.Left:
+      offsetX = 0;
+      break;
+    case Position.Right:
+      offsetX = handle.width;
+      break;
+    case Position.Top:
+      offsetY = 0;
+      break;
+    case Position.Bottom:
+      offsetY = handle.height;
+      break;
+    default:
+      throw new Error(`Invalid handle position: ${handlePosition}`);
+  }
+  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+  return [x, y];
+};
+var getEdgeParams = (source, target) => {
+  const sourcePos = Position.Right;
+  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+  const targetPos = Position.Left;
+  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+  return {
+    sx,
+    sy,
+    tx,
+    ty,
+    sourcePos,
+    targetPos
+  };
+};
+var Animated = ({ id, source, target, markerEnd, style }) => {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+  if (!(sourceNode && targetNode)) {
+    return null;
+  }
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+    sourceNode,
+    targetNode
+  );
+  const [edgePath] = getBezierPath({
+    sourceX: sx,
+    sourceY: sy,
+    sourcePosition: sourcePos,
+    targetX: tx,
+    targetY: ty,
+    targetPosition: targetPos
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BaseEdge, { id, markerEnd, path: edgePath, style }),
+    /* @__PURE__ */ jsx("circle", { fill: "var(--ac-primary)", r: "4", children: /* @__PURE__ */ jsx("animateMotion", { dur: "2s", path: edgePath, repeatCount: "indefinite" }) })
+  ] });
+};
+var Edge = {
+  Temporary,
+  Animated
+};
+var Node = ({ handles, className, ...props }) => /* @__PURE__ */ jsxs(
+  Card,
+  {
+    className: cn(
+      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
+      className
+    ),
+    ...props,
+    children: [
+      handles.target && /* @__PURE__ */ jsx(Handle, { position: Position.Left, type: "target" }),
+      handles.source && /* @__PURE__ */ jsx(Handle, { position: Position.Right, type: "source" }),
+      props.children
+    ]
+  }
+);
+var NodeHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardHeader,
+  {
+    className: cn("gap-0.5 rounded-t-md border-b bg-secondary p-3!", className),
+    ...props
+  }
+);
+var NodeTitle = (props) => /* @__PURE__ */ jsx(CardTitle, { ...props });
+var NodeDescription = (props) => /* @__PURE__ */ jsx(CardDescription, { ...props });
+var NodeAction = (props) => /* @__PURE__ */ jsx(CardAction, { ...props });
+var NodeContent = ({ className, ...props }) => /* @__PURE__ */ jsx(CardContent, { className: cn("p-3", className), ...props });
+var NodeFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CardFooter,
+  {
+    className: cn("rounded-b-md border-t bg-secondary p-3!", className),
+    ...props
+  }
+);
+var Image = ({
+  base64,
+  uint8Array,
+  mediaType,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    ...props,
+    alt: props.alt,
+    className: cn(
+      "h-auto max-w-full overflow-hidden rounded-md",
+      props.className
+    ),
+    src: `data:${mediaType};base64,${base64}`
+  }
+);
+
+export { Image as AIImage, Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, Canvas, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, Checkpoint, CheckpointIcon, CheckpointTrigger, CodeBlock, CodeBlockCopyButton, ComponentRenderer, Confirmation, ConfirmationAccepted, ConfirmationAction, ConfirmationActions, ConfirmationRejected, ConfirmationRequest, ConfirmationTitle, Connection, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Controls, Edge, FollowupButtons, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationCarouselNext, InlineCitationCarouselPrev, InlineCitationQuote, InlineCitationSource, InlineCitationText, Message, MessageAction, MessageActions, MessageAttachment, MessageAttachments, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageFeedback, MessageResponse, MessageToolbar, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, Node, NodeAction, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInCursor, OpenInItem, OpenInLabel, OpenInScira, OpenInSeparator, OpenInT3, OpenInTrigger, OpenInv0, Panel, Plan, PlanAction, PlanContent, PlanDescription, PlanFooter, PlanHeader, PlanTitle, PlanTrigger, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSpeechButton, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemAttachment, QueueItemContent, QueueItemDescription, QueueItemFile, QueueItemImage, QueueItemIndicator, QueueList, QueueSection, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger, Reasoning, ReasoningContent, ReasoningTrigger, Shimmer, Source, Sources, SourcesContent, SourcesTrigger, Suggestion, Suggestions, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, ThinkingSpinner, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Toolbar, WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, highlightCode, usePromptInputAttachments, usePromptInputController, useProviderAttachments, useReasoning };
+//# sourceMappingURL=ai-elements.js.map
+//# sourceMappingURL=ai-elements.js.map