@invergent/agent-chat-react 1.5.5 → 1.5.7

package/dist/index.cjs

@@ -19,9 +19,9 @@ var reactUseControllableState = require('@radix-ui/react-use-controllable-state'
 var shiki = require('shiki');
 var diff = require('diff');
 var Ansi = require('ansi-to-react');
-var tokenlens = require('tokenlens');
 var cmdk = require('cmdk');
 var nanoid = require('nanoid');
+var tokenlens = require('tokenlens');
 require('pdfjs-dist/web/pdf_viewer.css');
 var dateFns = require('date-fns');
 
@@ -3947,7 +3947,18 @@ var ChatMessage = react.memo(function ChatMessage2({
   onFileSelect
 }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Message, { from: "user", children: /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { children: message.content }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Message, { from: "user", children: /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { children: [
+      message.content,
+      message.images && message.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: message.images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: img.data,
+          alt: "Attached",
+          className: "max-w-64 max-h-48 rounded-lg border border-border object-contain"
+        },
+        i
+      )) })
+    ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { message, isLast, onFileSelect });
 });
@@ -3974,487 +3985,159 @@ function AssistantMessage({
   ] }) });
 }
 
-// src/components/ui/hover-card.tsx
+// src/components/ui/command.tsx
 init_utils();
-function HoverCard({
+
+// src/components/ui/input-group.tsx
+init_utils();
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = classVarianceAuthority.cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first",
+        "inline-end": "order-last",
+        "block-start": "order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+        "block-end": "order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.HoverCard.Root, { "data-slot": "hover-card", ...props });
+  return /* @__PURE__ */ jsxRuntime.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
+    }
+  );
 }
-function HoverCardTrigger({
+var inputGroupButtonVariants = classVarianceAuthority.cva(
+  "flex items-center gap-2 rounded-none text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 p-0 text-xs 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__ */ jsxRuntime.jsx(radixUi.HoverCard.Trigger, { "data-slot": "hover-card-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
 }
-function HoverCardContent({
+function InputGroupTextarea({
   className,
-  align = "center",
-  sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.HoverCard.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.HoverCard.Content,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Textarea,
     {
-      "data-slot": "hover-card-content",
-      align,
-      sideOffset,
+      "data-slot": "input-group-control",
       className: cn(
-        "z-50 w-72 origin-(--radix-hover-card-content-transform-origin) bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
         className
       ),
       ...props
     }
-  ) });
+  );
 }
-
-// src/components/ui/progress.tsx
-init_utils();
-function Progress({
+function Command({
   className,
-  value,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Progress.Root,
+    cmdk.Command,
     {
-      "data-slot": "progress",
+      "data-slot": "command",
       className: cn(
-        "relative flex h-0.5 w-full items-center overflow-x-hidden rounded-none bg-muted",
+        "flex size-full flex-col overflow-hidden bg-popover text-popover-foreground",
         className
       ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        radixUi.Progress.Indicator,
-        {
-          "data-slot": "progress-indicator",
-          className: "size-full flex-1 bg-primary transition-all",
-          style: { transform: `translateX(-${100 - (value || 0)}%)` }
-        }
-      )
+      ...props
     }
   );
 }
-
-// src/components/ai-elements/context.tsx
-init_utils();
-var PERCENT_MAX = 100;
-var ICON_RADIUS = 10;
-var ICON_VIEWBOX = 24;
-var ICON_CENTER = 12;
-var ICON_STROKE_WIDTH = 2;
-var ContextContext = react.createContext(null);
-var useContextValue = () => {
-  const context = react.useContext(ContextContext);
-  if (!context) {
-    throw new Error("Context components must be used within Context");
-  }
-  return context;
-};
-var Context = ({
-  usedTokens,
-  maxTokens,
-  usage,
-  modelId,
+function CommandList({
+  className,
   ...props
-}) => {
-  const contextValue = react.useMemo(
-    () => ({ maxTokens, modelId, usage, usedTokens }),
-    [maxTokens, modelId, usage, usedTokens]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-    "svg",
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.List,
     {
-      "aria-label": "Model context usage",
-      height: "20",
-      role: "img",
-      style: { color: "currentcolor" },
-      viewBox: `0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`,
-      width: "20",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            cx: ICON_CENTER,
-            cy: ICON_CENTER,
-            fill: "none",
-            opacity: "0.25",
-            r: ICON_RADIUS,
-            stroke: "currentColor",
-            strokeWidth: ICON_STROKE_WIDTH
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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: { transform: "rotate(-90deg)", transformOrigin: "center" }
-          }
-        )
-      ]
+      "data-slot": "command-list",
+      className: cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      ),
+      ...props
     }
   );
-};
-var ContextTrigger = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(HoverCardTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ContextIcon, {}) }) });
-};
-var ContextContent = ({
+}
+function CommandEmpty({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.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", {
-    maximumFractionDigits: 1,
-    style: "percent"
-  }).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__ */ jsxRuntime.jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: displayPct }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: " text-muted-foreground", children: [
-        used,
-        " / ",
-        total
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })
-  ] }) });
-};
-var ContextContentBody = ({
-  children,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full p-3", className), ...props, children });
-var TokensWithCost = ({
-  tokens,
-  costText
-}) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-  tokens === void 0 ? "\u2014" : new Intl.NumberFormat("en-US", {
-    notation: "compact"
-  }).format(tokens),
-  costText ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-muted-foreground", children: [
-    "\u2022 ",
-    costText
-  ] }) : null
-] });
-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 ? tokenlens.getUsage({
-    modelId,
-    usage: { input: inputTokens, output: 0 }
-  }).costUSD?.totalUSD : void 0;
-  const inputCostText = new Intl.NumberFormat("en-US", {
-    currency: "USD",
-    style: "currency"
-  }).format(inputCost ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center justify-between text-xs", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Input" }),
-        /* @__PURE__ */ jsxRuntime.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 ? tokenlens.getUsage({
-    modelId,
-    usage: { input: 0, output: outputTokens }
-  }).costUSD?.totalUSD : void 0;
-  const outputCostText = new Intl.NumberFormat("en-US", {
-    currency: "USD",
-    style: "currency"
-  }).format(outputCost ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center justify-between text-xs", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Output" }),
-        /* @__PURE__ */ jsxRuntime.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 ? tokenlens.getUsage({
-    modelId,
-    usage: { reasoningTokens }
-  }).costUSD?.totalUSD : void 0;
-  const reasoningCostText = new Intl.NumberFormat("en-US", {
-    currency: "USD",
-    style: "currency"
-  }).format(reasoningCost ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center justify-between text-xs", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
-        /* @__PURE__ */ jsxRuntime.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 ? tokenlens.getUsage({
-    modelId,
-    usage: { cacheReads: cacheTokens, input: 0, output: 0 }
-  }).costUSD?.totalUSD : void 0;
-  const cacheCostText = new Intl.NumberFormat("en-US", {
-    currency: "USD",
-    style: "currency"
-  }).format(cacheCost ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex items-center justify-between text-xs", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Cache" }),
-        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })
-      ]
-    }
-  );
-};
-
-// src/components/ui/command.tsx
-init_utils();
-
-// src/components/ui/input-group.tsx
-init_utils();
-function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "input-group",
-      role: "group",
-      className: cn(
-        "group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var inputGroupAddonVariants = classVarianceAuthority.cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-  {
-    variants: {
-      align: {
-        "inline-start": "order-first",
-        "inline-end": "order-last",
-        "block-start": "order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
-        "block-end": "order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5"
-      }
-    },
-    defaultVariants: {
-      align: "inline-start"
-    }
-  }
-);
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.cva(
-  "flex items-center gap-2 rounded-none text-sm shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs": "size-6 p-0 text-xs 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__ */ jsxRuntime.jsx(
-    Button,
-    {
-      type,
-      "data-size": size,
-      variant,
-      className: cn(inputGroupButtonVariants({ size }), className),
-      ...props
-    }
-  );
-}
-function InputGroupTextarea({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Textarea,
-    {
-      "data-slot": "input-group-control",
-      className: cn(
-        "flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function Command({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command,
-    {
-      "data-slot": "command",
-      className: cn(
-        "flex size-full flex-col overflow-hidden bg-popover text-popover-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandList({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.List,
-    {
-      "data-slot": "command-list",
-      className: cn(
-        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandEmpty({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.Empty,
-    {
-      "data-slot": "command-empty",
-      className: cn("py-6 text-center text-sm", className),
-      ...props
-    }
-  );
-}
-function CommandGroup({
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: cn("py-6 text-center text-sm", className),
+      ...props
+    }
+  );
+}
+function CommandGroup({
   className,
   ...props
 }) {
@@ -4548,6 +4231,39 @@ function DropdownMenuItem({
   );
 }
 
+// src/components/ui/hover-card.tsx
+init_utils();
+function HoverCard({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.HoverCard.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.HoverCard.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.HoverCard.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.HoverCard.Content,
+    {
+      "data-slot": "hover-card-content",
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 w-72 origin-(--radix-hover-card-content-transform-origin) bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
 // src/components/ui/spinner.tsx
 init_utils();
 function Spinner({ className, ...props }) {
@@ -4586,6 +4302,15 @@ var usePromptInputController = () => {
   return ctx;
 };
 var useOptionalPromptInputController = () => react.useContext(PromptInputController);
+var useProviderAttachments = () => {
+  const ctx = react.useContext(ProviderAttachmentsContext);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use useProviderAttachments()."
+    );
+  }
+  return ctx;
+};
 var useOptionalProviderAttachments = () => react.useContext(ProviderAttachmentsContext);
 var PromptInputProvider = ({
   initialInput: initialTextInput = "",
@@ -5161,95 +4886,390 @@ var PromptInputTools = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
+  "div",
+  {
+    className: cn("flex min-w-0 items-center gap-1", className),
+    ...props
+  }
+);
+var PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  tooltip,
+  ...props
+}) => {
+  const newSize = size ?? (react.Children.count(props.children) > 1 ? "sm" : "icon-sm");
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    InputGroupButton,
+    {
+      className: cn(className),
+      size: newSize,
+      type: "button",
+      variant,
+      ...props
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  const tooltipContent = typeof tooltip === "string" ? tooltip : tooltip.content;
+  const shortcut = typeof tooltip === "string" ? void 0 : tooltip.shortcut;
+  const side = typeof tooltip === "string" ? "top" : tooltip.side ?? "top";
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { side, children: [
+      tooltipContent,
+      shortcut && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-muted-foreground", children: shortcut })
+    ] })
+  ] });
+};
+var PromptInputActionMenu = (props) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu, { ...props });
+var PromptInputActionMenuTrigger = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PromptInputButton, { className, ...props, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "size-4" }) }) });
+var PromptInputActionMenuContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: cn(className), ...props });
+var PromptInputSubmit = ({
+  className,
+  variant = "default",
+  size = "icon-sm",
+  status,
+  onStop,
+  onClick,
+  children,
+  ...props
+}) => {
+  const isGenerating = status === "submitted" || status === "streaming";
+  let Icon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeftIcon, { className: "size-4" });
+  if (status === "submitted") {
+    Icon = /* @__PURE__ */ jsxRuntime.jsx(Spinner, {});
+  } else if (status === "streaming") {
+    Icon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareIcon, { className: "size-4" });
+  } else if (status === "error") {
+    Icon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" });
+  }
+  const handleClick = react.useCallback(
+    (e) => {
+      if (isGenerating && onStop) {
+        e.preventDefault();
+        onStop();
+        return;
+      }
+      onClick?.(e);
+    },
+    [isGenerating, onStop, onClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputGroupButton,
+    {
+      "aria-label": isGenerating ? "Stop" : "Submit",
+      className: cn(className),
+      onClick: handleClick,
+      size,
+      type: isGenerating && onStop ? "button" : "submit",
+      variant,
+      ...props,
+      children: children ?? Icon
+    }
+  );
+};
+
+// src/components/ui/progress.tsx
+init_utils();
+function Progress({
+  className,
+  value,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Progress.Root,
+    {
+      "data-slot": "progress",
+      className: cn(
+        "relative flex h-0.5 w-full items-center overflow-x-hidden rounded-none bg-muted",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Progress.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "size-full flex-1 bg-primary transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+
+// src/components/ai-elements/context.tsx
+init_utils();
+var PERCENT_MAX = 100;
+var ICON_RADIUS = 10;
+var ICON_VIEWBOX = 24;
+var ICON_CENTER = 12;
+var ICON_STROKE_WIDTH = 2;
+var ContextContext = react.createContext(null);
+var useContextValue = () => {
+  const context = react.useContext(ContextContext);
+  if (!context) {
+    throw new Error("Context components must be used within Context");
+  }
+  return context;
+};
+var Context = ({
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  ...props
+}) => {
+  const contextValue = react.useMemo(
+    () => ({ maxTokens, modelId, usage, usedTokens }),
+    [maxTokens, modelId, usage, usedTokens]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.25",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeWidth: ICON_STROKE_WIDTH
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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: { transform: "rotate(-90deg)", transformOrigin: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+var ContextTrigger = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(HoverCardTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "ghost", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ContextIcon, {}) }) });
+};
+var ContextContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  HoverCardContent,
   {
-    className: cn("flex min-w-0 items-center gap-1", className),
+    className: cn("min-w-60 divide-y overflow-hidden p-0", className),
     ...props
   }
 );
-var PromptInputButton = ({
-  variant = "ghost",
+var ContextContentHeader = ({
+  children,
   className,
-  size,
-  tooltip,
   ...props
 }) => {
-  const newSize = size ?? (react.Children.count(props.children) > 1 ? "sm" : "icon-sm");
-  const button = /* @__PURE__ */ jsxRuntime.jsx(
-    InputGroupButton,
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const displayPct = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 1,
+    style: "percent"
+  }).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__ */ jsxRuntime.jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: displayPct }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: " text-muted-foreground", children: [
+        used,
+        " / ",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })
+  ] }) });
+};
+var ContextContentBody = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full p-3", className), ...props, children });
+var TokensWithCost = ({
+  tokens,
+  costText
+}) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+  tokens === void 0 ? "\u2014" : new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(tokens),
+  costText ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-muted-foreground", children: [
+    "\u2022 ",
+    costText
+  ] }) : null
+] });
+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 ? tokenlens.getUsage({
+    modelId,
+    usage: { input: inputTokens, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const inputCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(inputCost ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      className: cn(className),
-      size: newSize,
-      type: "button",
-      variant,
-      ...props
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Input" }),
+        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: inputCostText, tokens: inputTokens })
+      ]
     }
   );
-  if (!tooltip) {
-    return button;
-  }
-  const tooltipContent = typeof tooltip === "string" ? tooltip : tooltip.content;
-  const shortcut = typeof tooltip === "string" ? void 0 : tooltip.shortcut;
-  const side = typeof tooltip === "string" ? "top" : tooltip.side ?? "top";
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { side, children: [
-      tooltipContent,
-      shortcut && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-muted-foreground", children: shortcut })
-    ] })
-  ] });
 };
-var PromptInputActionMenu = (props) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu, { ...props });
-var PromptInputActionMenuTrigger = ({
+var ContextOutputUsage = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PromptInputButton, { className, ...props, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "size-4" }) }) });
-var PromptInputActionMenuContent = ({
+}) => {
+  const { usage, modelId } = useContextValue();
+  const outputTokens = usage?.outputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!outputTokens) {
+    return null;
+  }
+  const outputCost = modelId ? tokenlens.getUsage({
+    modelId,
+    usage: { input: 0, output: outputTokens }
+  }).costUSD?.totalUSD : void 0;
+  const outputCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(outputCost ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Output" }),
+        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: outputCostText, tokens: outputTokens })
+      ]
+    }
+  );
+};
+var ContextReasoningUsage = ({
   className,
+  children,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: cn(className), ...props });
-var PromptInputSubmit = ({
+}) => {
+  const { usage, modelId } = useContextValue();
+  const reasoningTokens = usage?.reasoningTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!reasoningTokens) {
+    return null;
+  }
+  const reasoningCost = modelId ? tokenlens.getUsage({
+    modelId,
+    usage: { reasoningTokens }
+  }).costUSD?.totalUSD : void 0;
+  const reasoningCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(reasoningCost ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
+        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })
+      ]
+    }
+  );
+};
+var ContextCacheUsage = ({
   className,
-  variant = "default",
-  size = "icon-sm",
-  status,
-  onStop,
-  onClick,
   children,
   ...props
 }) => {
-  const isGenerating = status === "submitted" || status === "streaming";
-  let Icon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeftIcon, { className: "size-4" });
-  if (status === "submitted") {
-    Icon = /* @__PURE__ */ jsxRuntime.jsx(Spinner, {});
-  } else if (status === "streaming") {
-    Icon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareIcon, { className: "size-4" });
-  } else if (status === "error") {
-    Icon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" });
+  const { usage, modelId } = useContextValue();
+  const cacheTokens = usage?.cachedInputTokens ?? 0;
+  if (children) {
+    return children;
   }
-  const handleClick = react.useCallback(
-    (e) => {
-      if (isGenerating && onStop) {
-        e.preventDefault();
-        onStop();
-        return;
-      }
-      onClick?.(e);
-    },
-    [isGenerating, onStop, onClick]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputGroupButton,
+  if (!cacheTokens) {
+    return null;
+  }
+  const cacheCost = modelId ? tokenlens.getUsage({
+    modelId,
+    usage: { cacheReads: cacheTokens, input: 0, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const cacheCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(cacheCost ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      "aria-label": isGenerating ? "Stop" : "Submit",
-      className: cn(className),
-      onClick: handleClick,
-      size,
-      type: isGenerating && onStop ? "button" : "submit",
-      variant,
+      className: cn("flex items-center justify-between text-xs", className),
       ...props,
-      children: children ?? Icon
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Cache" }),
+        /* @__PURE__ */ jsxRuntime.jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })
+      ]
     }
   );
 };
@@ -5289,6 +5309,29 @@ function PopoverAnchor({
 function ChatComposer(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(PromptInputProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ChatComposerInner, { ...props }) });
 }
+function AttachmentPreviewStrip() {
+  const attachments = useProviderAttachments();
+  if (attachments.files.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 px-3 pt-2 pb-1 flex-wrap", children: attachments.files.map((file) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+    file.mediaType?.startsWith("image/") && file.url ? /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: file.url,
+        alt: file.filename,
+        className: "h-16 w-16 rounded-lg border border-border object-cover"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16 w-16 rounded-lg border border-border bg-muted flex items-center justify-center text-[10px] text-muted-foreground truncate px-1", children: file.filename }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => attachments.remove(file.id),
+        className: "absolute -top-1.5 -right-1.5 hidden group-hover:flex items-center justify-center w-4 h-4 rounded-full bg-destructive text-destructive-foreground text-[10px]",
+        children: "\xD7"
+      }
+    )
+  ] }, file.id)) });
+}
 function ChatComposerInner({
   onSend,
   onStop,
@@ -5381,7 +5424,13 @@ function ChatComposerInner({
     (message) => {
       const text = message.text.trim();
       if (!text || isRunning || disabled) return;
-      onSend(text);
+      const images = [];
+      for (const file of message.files) {
+        if (file.mediaType?.startsWith("image/") && file.url) {
+          images.push({ data: file.url, mimeType: file.mediaType });
+        }
+      }
+      onSend(text, images.length > 0 ? images : void 0);
     },
     [onSend, isRunning, disabled]
   );
@@ -5390,7 +5439,8 @@ function ChatComposerInner({
       setButtonMenuOpen(false);
     }
   }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(PromptInput, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewStrip, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(PromptInput, { onSubmit: handleSubmit, accept: "image/*", multiple: true, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PromptInputBody, { children: /* @__PURE__ */ jsxRuntime.jsx(
         PromptInputTextarea,
         {
@@ -8290,23 +8340,27 @@ function useAgentChatRuntime({
       closeStream();
     };
   }, [adapter, clearReconnectTimer, closeStream, sessionId]);
-  const markSending = react.useCallback((content) => {
-    setState((prev) => ({
-      ...prev,
-      terminal: false,
-      isRunning: true,
-      messages: [
-        ...prev.messages,
-        {
-          id: `local-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-          role: "user",
-          content,
-          createdAt: /* @__PURE__ */ new Date(),
-          status: "complete"
-        }
-      ]
-    }));
-  }, []);
+  const markSending = react.useCallback(
+    (content, images) => {
+      setState((prev) => ({
+        ...prev,
+        terminal: false,
+        isRunning: true,
+        messages: [
+          ...prev.messages,
+          {
+            id: `local-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+            role: "user",
+            content,
+            createdAt: /* @__PURE__ */ new Date(),
+            status: "complete",
+            images: images?.length ? images : void 0
+          }
+        ]
+      }));
+    },
+    []
+  );
   const markSendError = react.useCallback((errorText) => {
     setState((prev) => {
       for (let i = prev.messages.length - 1; i >= 0; i--) {
@@ -8357,13 +8411,13 @@ function useAgentChatRuntime({
     });
   }, []);
   const send = react.useCallback(
-    async (content) => {
-      markSending(content);
+    async (content, images) => {
+      markSending(content, images);
       if (!sessionId) {
         try {
           const session = await adapter.createSession({ agentId });
           onSessionChange?.(session.id);
-          await adapter.sendMessage({ sessionId: session.id, content });
+          await adapter.sendMessage({ sessionId: session.id, content, images });
         } catch (error) {
           markSendError(error instanceof Error ? error.message : "send failed");
           throw error;
@@ -8371,7 +8425,7 @@ function useAgentChatRuntime({
         return;
       }
       try {
-        await adapter.sendMessage({ sessionId, content });
+        await adapter.sendMessage({ sessionId, content, images });
       } catch (error) {
         markSendError(error instanceof Error ? error.message : "send failed");
         throw error;
@@ -8477,7 +8531,7 @@ function AgentChat({
             messages: runtime.messages,
             isRunning: runtime.isRunning,
             isLoadingHistory: runtime.isLoadingHistory,
-            onSend: (content) => void runtime.send(content),
+            onSend: (content, images) => void runtime.send(content, images),
             onStop: () => void runtime.stop(),
             onRetry: runtime.retry,
             onFileSelect: handleFileSelect,