@slipstream-ui/ai 0.0.0-stage → 0.3.0

package/dist/index.mjs

@@ -0,0 +1,1706 @@
+'use client';
+
+// src/components/message/Message.tsx
+import * as React from "react";
+import { Avatar, AvatarImage, AvatarFallback, Button } from "@slipstream-ui/core";
+import { cn } from "@slipstream-ui/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Message = React.forwardRef(
+  ({
+    message,
+    className,
+    showAvatar = true,
+    avatarSrc,
+    avatarFallback,
+    userLabel = "You",
+    assistantLabel = "Assistant",
+    renderContent,
+    isStreaming = false,
+    error,
+    onRetry,
+    onEditContent,
+    labels,
+    ...props
+  }, ref) => {
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(message.content);
+    const t = {
+      retry: labels?.retry ?? "Retry",
+      edit: labels?.edit ?? "Edit",
+      save: labels?.save ?? "Save & resend",
+      cancel: labels?.cancel ?? "Cancel"
+    };
+    const isUser = message.role === "user";
+    const isSystem = message.role === "system";
+    const displayLabel = isUser ? userLabel : message.role === "assistant" ? assistantLabel : message.role;
+    const startEdit = () => {
+      setDraft(message.content);
+      setIsEditing(true);
+    };
+    const commitEdit = () => {
+      const trimmed = draft.trim();
+      if (!trimmed) return;
+      setIsEditing(false);
+      onEditContent?.(trimmed);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "aria-busy": isStreaming || void 0,
+        className: cn(
+          "flex gap-3 p-4 rounded-lg",
+          isUser ? "bg-primary/10" : "bg-muted",
+          isSystem && "border-l-4 border-muted-foreground",
+          error && "border border-destructive/40",
+          className
+        ),
+        ...props,
+        children: [
+          showAvatar && !isSystem && /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 flex-shrink-0", children: [
+            avatarSrc && /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: displayLabel }),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: cn(
+              "text-xs font-medium",
+              isUser ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"
+            ), children: avatarFallback || (isUser ? "U" : "A") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: displayLabel }),
+              message.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(message.timestamp).toLocaleTimeString() })
+            ] }),
+            error ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "text-sm", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-destructive mb-2", children: error }),
+              onRetry && /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: onRetry, children: [
+                "\u21BB ",
+                t.retry
+              ] })
+            ] }) : isEditing ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  value: draft,
+                  onChange: (event) => setDraft(event.target.value),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" && !event.shiftKey) {
+                      event.preventDefault();
+                      commitEdit();
+                    }
+                    if (event.key === "Escape") setIsEditing(false);
+                  },
+                  "aria-label": "Edit message",
+                  autoFocus: true,
+                  rows: Math.min(6, draft.split("\n").length + 1),
+                  className: "w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(Button, { size: "sm", onClick: commitEdit, children: t.save }),
+                /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setIsEditing(false), children: t.cancel })
+              ] })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "text-sm whitespace-pre-wrap break-words", children: [
+              renderContent ? renderContent(message.content) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                message.content,
+                isStreaming && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "inline-block w-[2px] h-[1em] ml-0.5 align-text-bottom bg-current animate-pulse motion-reduce:animate-none",
+                    "data-testid": "streaming-cursor"
+                  }
+                )
+              ] }),
+              onEditContent && !isStreaming && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: startEdit,
+                  "aria-label": t.edit,
+                  className: "mt-1 rounded px-1 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: [
+                    "\u270E ",
+                    t.edit
+                  ]
+                }
+              ) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Message.displayName = "Message";
+var MemoizedMessage = React.memo(Message);
+MemoizedMessage.displayName = "Message";
+
+// src/components/message-actions/MessageActions.tsx
+import * as React2 from "react";
+import { cn as cn2 } from "@slipstream-ui/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MessageActions = React2.forwardRef(
+  ({ content, onCopy, onFeedback, onRegenerate, autohide = "always", labels, className, ...props }, ref) => {
+    const [copied, setCopied] = React2.useState(false);
+    const [rating, setRating] = React2.useState();
+    const t = {
+      copy: labels?.copy ?? "Copy",
+      copied: labels?.copied ?? "Copied",
+      thumbUp: labels?.thumbUp ?? "Good response",
+      thumbDown: labels?.thumbDown ?? "Bad response",
+      regenerate: labels?.regenerate ?? "Regenerate"
+    };
+    const handleCopy = async () => {
+      if (!content) return;
+      try {
+        await navigator.clipboard.writeText(content);
+      } catch {
+      }
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2e3);
+      onCopy?.(content);
+    };
+    const handleRating = (next) => {
+      const updated = rating === next ? void 0 : next;
+      setRating(updated);
+      onFeedback?.(updated);
+    };
+    const actionButton = "rounded px-1.5 py-0.5 text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+    const actionButtonIdle = "text-muted-foreground hover:bg-accent hover:text-accent-foreground";
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        role: "toolbar",
+        "aria-label": "Message actions",
+        className: cn2(
+          "flex items-center gap-1 mt-2",
+          autohide !== "always" && "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100 motion-reduce:opacity-100",
+          className
+        ),
+        ...props,
+        children: [
+          content !== void 0 && /* @__PURE__ */ jsx2("button", { type: "button", onClick: handleCopy, className: cn2(actionButton, actionButtonIdle), children: copied ? t.copied : t.copy }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRating("up"),
+              "aria-label": t.thumbUp,
+              "aria-pressed": rating === "up",
+              className: cn2(
+                actionButton,
+                rating === "up" ? "text-primary" : actionButtonIdle
+              ),
+              children: "\u{1F44D}"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRating("down"),
+              "aria-label": t.thumbDown,
+              "aria-pressed": rating === "down",
+              className: cn2(
+                actionButton,
+                rating === "down" ? "text-destructive" : actionButtonIdle
+              ),
+              children: "\u{1F44E}"
+            }
+          ),
+          onRegenerate && /* @__PURE__ */ jsx2("button", { type: "button", onClick: onRegenerate, className: cn2(actionButton, actionButtonIdle), children: t.regenerate })
+        ]
+      }
+    );
+  }
+);
+MessageActions.displayName = "MessageActions";
+
+// src/components/attachment/Attachment.tsx
+import * as React3 from "react";
+import { Spinner } from "@slipstream-ui/core";
+import { cn as cn3 } from "@slipstream-ui/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Attachment = React3.forwardRef(
+  ({ attachment, onRemove, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref,
+        className: cn3(
+          "inline-flex items-center gap-2 rounded-md border border-border bg-muted/50 px-2 py-1.5 text-sm max-w-xs",
+          className
+        ),
+        ...props,
+        children: [
+          attachment.previewUrl ? /* @__PURE__ */ jsx3(
+            "img",
+            {
+              src: attachment.previewUrl,
+              alt: "",
+              "aria-hidden": "true",
+              className: "h-8 w-8 rounded object-cover flex-shrink-0"
+            }
+          ) : /* @__PURE__ */ jsx3(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "flex h-8 w-8 items-center justify-center rounded bg-secondary text-[10px] font-semibold uppercase text-secondary-foreground flex-shrink-0",
+              children: (attachment.type ?? attachment.name.split(".").pop() ?? "?").slice(0, 4)
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx3("div", { className: "truncate font-medium text-foreground", title: attachment.name, children: attachment.name }),
+            /* @__PURE__ */ jsx3("div", { className: "text-xs text-muted-foreground", children: attachment.status === "uploading" ? "Uploading..." : [attachment.size, attachment.type].filter(Boolean).join(" \xB7 ") || null })
+          ] }),
+          attachment.status === "uploading" && /* @__PURE__ */ jsx3(Spinner, { size: "sm", label: "Uploading", "aria-label": "Uploading", className: "flex-shrink-0" }),
+          onRemove && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(attachment),
+              "aria-label": `Remove ${attachment.name}`,
+              className: "flex-shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Attachment.displayName = "Attachment";
+
+// src/components/attachment/AttachmentList.tsx
+import * as React4 from "react";
+import { cn as cn4 } from "@slipstream-ui/core";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AttachmentList = React4.forwardRef(
+  ({ attachments, onRemove, className, ...props }, ref) => {
+    if (attachments.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx4("div", { ref, className: cn4("flex flex-wrap gap-2", className), ...props, children: attachments.map((attachment) => /* @__PURE__ */ jsx4(Attachment, { attachment, onRemove }, attachment.id)) });
+  }
+);
+AttachmentList.displayName = "AttachmentList";
+
+// src/components/response/Response.tsx
+import * as React6 from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn as cn6 } from "@slipstream-ui/core";
+
+// src/components/code-block/CodeBlock.tsx
+import * as React5 from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { cn as cn5 } from "@slipstream-ui/core";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function useIsDark() {
+  const [dark, setDark] = React5.useState(false);
+  React5.useEffect(() => {
+    const el = document.documentElement;
+    setDark(el.classList.contains("dark"));
+    const observer = new MutationObserver(() => setDark(el.classList.contains("dark")));
+    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  return dark;
+}
+var CodeBlock = React5.forwardRef(
+  ({ code, language = "tsx", showCopyButton = true, className, ...props }, ref) => {
+    const [copied, setCopied] = React5.useState(false);
+    const isDark = useIsDark();
+    const trimmedCode = code.replace(/\n$/, "");
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(trimmedCode);
+      } catch {
+      }
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2e3);
+    };
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref,
+        className: cn5(
+          // bg-background (not muted): Prism light themes assume a white
+          // surface — on gray the comment/keyword tokens fall below AA.
+          "relative group rounded-md border border-border bg-background overflow-hidden",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/60", children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-xs font-mono text-muted-foreground uppercase", children: language }),
+            showCopyButton && /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopy,
+                "aria-label": copied ? "Copied" : "Copy code",
+                className: "text-xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1",
+                children: copied ? "Copied!" : "Copy"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5(Highlight, { theme: isDark ? themes.vsDark : themes.github, code: trimmedCode, language, children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx5(
+            "pre",
+            {
+              className: "overflow-x-auto p-4 text-xs leading-relaxed m-0",
+              style: { ...style, background: "transparent" },
+              children: tokens.map((line, i) => /* @__PURE__ */ jsx5("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ jsx5("span", { ...getTokenProps({ token }) }, key)) }, i))
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+
+// src/components/response/close-incomplete-markdown.ts
+function closeIncompleteMarkdown(markdown) {
+  let text = markdown;
+  const fenceMatches = text.match(/^`{3,}/gm);
+  if (fenceMatches && fenceMatches.length % 2 === 1) {
+    text = `${text}
+\`\`\``;
+  }
+  const firstFence = text.indexOf("```");
+  const hasUnclosedFence = fenceMatches !== null && fenceMatches.length % 2 === 1;
+  const prose = hasUnclosedFence && firstFence !== -1 ? text.slice(0, firstFence) : text;
+  const rest = hasUnclosedFence && firstFence !== -1 ? text.slice(firstFence) : "";
+  let repaired = prose;
+  for (const marker of ["**", "__", "~~"]) {
+    const occurrences = prose.split(marker).length - 1;
+    if (occurrences % 2 === 1) {
+      repaired += marker;
+    }
+  }
+  for (const marker of ["*", "_"]) {
+    const singles = repaired.replace(/\*\*/g, "").replace(/__/g, "").split(marker).length - 1;
+    if (singles % 2 === 1) {
+      repaired += marker;
+    }
+  }
+  const backtickCount = repaired.replace(/```/g, "").split("`").length - 1;
+  if (backtickCount % 2 === 1) {
+    repaired += "`";
+  }
+  return repaired + rest;
+}
+
+// src/components/response/Response.tsx
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
+var Response = React6.forwardRef(
+  ({ children, parseIncompleteMarkdown = true, className, ...props }, ref) => {
+    const content = React6.useMemo(
+      () => parseIncompleteMarkdown ? closeIncompleteMarkdown(children) : children,
+      [children, parseIncompleteMarkdown]
+    );
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref,
+        className: cn6(
+          "text-sm space-y-3 [&_a]:text-primary [&_a]:underline underline-offset-2",
+          "[&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5",
+          "[&_h1]:text-lg [&_h1]:font-semibold [&_h2]:text-base [&_h2]:font-semibold",
+          "[&_h3]:text-sm [&_h3]:font-semibold",
+          "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground",
+          "[&_table]:w-full [&_table]:text-xs [&_th]:border [&_th]:border-border [&_th]:p-1.5 [&_td]:border [&_td]:border-border [&_td]:p-1.5",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx6(
+          ReactMarkdown,
+          {
+            remarkPlugins: [remarkGfm],
+            components: {
+              pre: ({ children: children2 }) => /* @__PURE__ */ jsx6(Fragment2, { children: children2 }),
+              code: ({ className: codeClassName, children: codeChildren }) => {
+                const raw = String(codeChildren).replace(/\n$/, "");
+                const match = /language-(\w+)/.exec(codeClassName ?? "");
+                const isInline = !match && !raw.includes("\n");
+                if (isInline) {
+                  return /* @__PURE__ */ jsx6("code", { className: "bg-muted px-1 py-0.5 rounded text-xs font-mono before:content-none after:content-none", children: raw });
+                }
+                return /* @__PURE__ */ jsx6(CodeBlock, { code: raw, language: match?.[1] ?? "text" });
+              }
+            },
+            children: content
+          }
+        )
+      }
+    );
+  }
+);
+Response.displayName = "Response";
+
+// src/components/confirmation/Confirmation.tsx
+import * as React7 from "react";
+import { Button as Button2 } from "@slipstream-ui/core";
+import { cn as cn7 } from "@slipstream-ui/core";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var statusChipClasses = {
+  pending: "bg-warning/10 text-warning border-warning/20",
+  approved: "bg-success/10 text-success border-success/20",
+  rejected: "bg-destructive/10 text-destructive border-destructive/20"
+};
+var pendingVariantClasses = {
+  default: "border-warning/40",
+  warning: "border-warning/40",
+  destructive: "border-destructive/40 bg-destructive/5",
+  info: "border-info/40",
+  success: "border-success/40"
+};
+var Confirmation = React7.forwardRef(
+  ({
+    title,
+    description,
+    toolName,
+    status: controlledStatus,
+    variant = "default",
+    onApprove,
+    onReject,
+    approveVariant = "default",
+    rejectVariant = "outline",
+    showActions = true,
+    labels,
+    className,
+    ...props
+  }, ref) => {
+    const [internalStatus, setInternalStatus] = React7.useState("pending");
+    const status = controlledStatus ?? internalStatus;
+    const t = {
+      approve: labels?.approve ?? "Approve",
+      reject: labels?.reject ?? "Reject",
+      approved: labels?.approved ?? "Approved",
+      rejected: labels?.rejected ?? "Rejected"
+    };
+    const decide = (next) => {
+      setInternalStatus(next);
+      (next === "approved" ? onApprove : onReject)?.();
+    };
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref,
+        role: status === "pending" ? "alertdialog" : void 0,
+        "aria-label": status === "pending" ? title : void 0,
+        className: cn7(
+          "rounded-lg border p-4 bg-muted/30 max-w-md",
+          status === "pending" && pendingVariantClasses[variant],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-2 mb-2", children: [
+            /* @__PURE__ */ jsx7("div", { className: "text-sm font-medium text-foreground", children: title }),
+            /* @__PURE__ */ jsx7(
+              "span",
+              {
+                className: cn7(
+                  "text-xs px-2 py-0.5 rounded-full border whitespace-nowrap",
+                  statusChipClasses[status]
+                ),
+                children: status === "approved" ? t.approved : status === "rejected" ? t.rejected : "Pending"
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsx7("div", { className: "text-sm text-muted-foreground mb-1", children: description }),
+          toolName && /* @__PURE__ */ jsx7("div", { className: "text-xs font-mono text-muted-foreground mb-3", children: toolName }),
+          status === "pending" && showActions && /* @__PURE__ */ jsxs5("div", { className: "flex gap-2 mt-2", children: [
+            /* @__PURE__ */ jsx7(Button2, { size: "sm", variant: approveVariant, onClick: () => decide("approved"), children: t.approve }),
+            /* @__PURE__ */ jsx7(Button2, { size: "sm", variant: rejectVariant, onClick: () => decide("rejected"), children: t.reject })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Confirmation.displayName = "Confirmation";
+
+// src/components/branch/Branch.tsx
+import * as React8 from "react";
+import { cn as cn8 } from "@slipstream-ui/core";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var Branch = React8.forwardRef(
+  ({ count, selected, defaultSelected = 0, onSelect, labels, className, ...props }, ref) => {
+    const [internalIndex, setInternalIndex] = React8.useState(defaultSelected);
+    const isControlled = selected !== void 0;
+    const index = Math.min(Math.max(isControlled ? selected : internalIndex, 0), count - 1);
+    const t = {
+      previous: labels?.previous ?? "Previous response",
+      next: labels?.next ?? "Next response"
+    };
+    if (count < 2) return null;
+    const goTo = (next) => {
+      const clamped = Math.min(Math.max(next, 0), count - 1);
+      if (!isControlled) setInternalIndex(clamped);
+      onSelect?.(clamped);
+    };
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref,
+        className: cn8("flex items-center gap-1 text-xs text-muted-foreground", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: () => goTo(index - 1),
+              disabled: index === 0,
+              "aria-label": t.previous,
+              className: "rounded px-1 hover:bg-accent hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40",
+              children: "\u2039"
+            }
+          ),
+          /* @__PURE__ */ jsxs6("span", { "aria-live": "polite", className: "tabular-nums", children: [
+            index + 1,
+            " / ",
+            count
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: () => goTo(index + 1),
+              disabled: index === count - 1,
+              "aria-label": t.next,
+              className: "rounded px-1 hover:bg-accent hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40",
+              children: "\u203A"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Branch.displayName = "Branch";
+
+// src/components/inline-citation/InlineCitation.tsx
+import * as React9 from "react";
+import { cn as cn9 } from "@slipstream-ui/core";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var InlineCitation = React9.forwardRef(
+  ({ source, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs7(
+      "span",
+      {
+        ref,
+        className: cn9("group relative inline focus-within:outline-none", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "button",
+              "aria-describedby": `citation-${source.id}-card`,
+              className: "inline-flex items-baseline rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: [
+                children ?? /* @__PURE__ */ jsx9("span", { children: source.title }),
+                /* @__PURE__ */ jsx9(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "inline-flex items-center justify-center align-super ml-0.5 h-4 min-w-4 px-1 rounded-full border border-border bg-muted text-[10px] font-medium text-muted-foreground group-hover:text-foreground transition-colors",
+                    children: source.title.charAt(0).toUpperCase()
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs7(
+            "span",
+            {
+              id: `citation-${source.id}-card`,
+              role: "tooltip",
+              className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 -translate-x-1/2 w-64 rounded-md border border-border bg-popover p-2.5 text-xs text-popover-foreground shadow-md opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity",
+              children: [
+                /* @__PURE__ */ jsx9("span", { className: "block font-medium text-foreground truncate", children: source.title }),
+                source.snippet && /* @__PURE__ */ jsx9("span", { className: "mt-0.5 block text-muted-foreground line-clamp-3", children: source.snippet })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InlineCitation.displayName = "InlineCitation";
+
+// src/components/conversation/Conversation.tsx
+import * as React10 from "react";
+import { cn as cn10 } from "@slipstream-ui/core";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var PINNED_THRESHOLD = 80;
+var DEFAULT_WELCOME_TITLE = "Start the conversation";
+var DEFAULT_WELCOME_DESCRIPTION = "Ask anything \u2014 responses stream in real time.";
+var DEFAULT_WELCOME_SUGGESTIONS = [
+  "Explain what you can do",
+  "Summarize a topic for me"
+];
+function transcriptToMarkdown(messages) {
+  return messages.map((message) => {
+    const speaker = message.role === "user" ? "You" : message.role === "assistant" ? "Assistant" : message.role;
+    const time = message.timestamp ? ` (${new Date(message.timestamp).toISOString()})` : "";
+    return `**${speaker}${time}:**
+
+${message.content}`;
+  }).join("\n\n---\n\n");
+}
+var Conversation = React10.forwardRef(
+  ({
+    messages,
+    className,
+    showAvatars = true,
+    userAvatarSrc,
+    userAvatarFallback,
+    assistantAvatarSrc,
+    assistantAvatarFallback,
+    isLoading = false,
+    loadingMessage = "Thinking...",
+    renderContent,
+    streamingMessageId,
+    showScrollButton = true,
+    showDownload = false,
+    messageErrors,
+    onRetryMessage,
+    welcomeTitle = DEFAULT_WELCOME_TITLE,
+    welcomeDescription = DEFAULT_WELCOME_DESCRIPTION,
+    welcomeSuggestions = DEFAULT_WELCOME_SUGGESTIONS,
+    onWelcomeSelect,
+    hasMoreHistory = false,
+    isLoadingMore = false,
+    onLoadMore,
+    ...props
+  }, ref) => {
+    const scrollRef = React10.useRef(null);
+    const messagesEndRef = React10.useRef(null);
+    const [isUnpinned, setIsUnpinned] = React10.useState(false);
+    const prevScrollMetrics = React10.useRef(null);
+    const [announcement, setAnnouncement] = React10.useState("");
+    const prevStreamingRef = React10.useRef(void 0);
+    React10.useEffect(() => {
+      if (prevStreamingRef.current && !streamingMessageId) {
+        setAnnouncement("Response complete.");
+      }
+      prevStreamingRef.current = streamingMessageId;
+    }, [streamingMessageId]);
+    React10.useEffect(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const updatePinned = () => {
+        const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+        setIsUnpinned(distanceFromBottom > PINNED_THRESHOLD);
+      };
+      updatePinned();
+      container.addEventListener("scroll", updatePinned, { passive: true });
+      return () => container.removeEventListener("scroll", updatePinned);
+    }, []);
+    React10.useLayoutEffect(() => {
+      const container = scrollRef.current;
+      if (!container || prevScrollMetrics.current === null) return;
+      const { height, top } = prevScrollMetrics.current;
+      container.scrollTop = container.scrollHeight - height + top;
+      prevScrollMetrics.current = null;
+    }, [messages]);
+    const captureAnchor = () => {
+      const container = scrollRef.current;
+      if (!container) return;
+      prevScrollMetrics.current = { height: container.scrollHeight, top: container.scrollTop };
+    };
+    const handleLoadMore = () => {
+      captureAnchor();
+      onLoadMore?.();
+    };
+    React10.useEffect(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+      if (distanceFromBottom > PINNED_THRESHOLD) return;
+      container.scrollTo?.({
+        top: container.scrollHeight,
+        behavior: streamingMessageId ? "auto" : "smooth"
+      });
+    }, [messages, streamingMessageId]);
+    const scrollToLatest = () => {
+      const container = scrollRef.current;
+      if (!container) return;
+      container.scrollTo?.({ top: container.scrollHeight, behavior: "smooth" });
+    };
+    const handleDownload = () => {
+      const blob = new Blob([transcriptToMarkdown(messages)], { type: "text/markdown" });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = "conversation.md";
+      anchor.click();
+      URL.revokeObjectURL(url);
+    };
+    const isEmpty = messages.length === 0 && !isLoading;
+    return /* @__PURE__ */ jsxs8("div", { ref, className: cn10("relative h-full w-full", className), ...props, children: [
+      /* @__PURE__ */ jsxs8("div", { ref: scrollRef, className: "flex flex-col gap-4 p-4 overflow-y-auto h-full", children: [
+        (hasMoreHistory || isLoadingMore) && /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: handleLoadMore,
+            disabled: isLoadingMore,
+            className: "mx-auto rounded-full border border-border bg-background px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
+            children: isLoadingMore ? "Loading\u2026" : "Load earlier messages"
+          }
+        ),
+        isEmpty ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-center py-16", children: [
+          /* @__PURE__ */ jsx10("h3", { className: "text-lg font-semibold", children: welcomeTitle }),
+          /* @__PURE__ */ jsx10("p", { className: "text-sm text-muted-foreground max-w-sm", children: welcomeDescription }),
+          welcomeSuggestions.length > 0 && /* @__PURE__ */ jsx10("div", { className: "mt-2 flex flex-col gap-2 w-full max-w-sm", children: welcomeSuggestions.map((suggestion) => /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: () => onWelcomeSelect?.(suggestion),
+              className: "rounded-md border border-border bg-background px-4 py-2.5 text-sm text-left text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: suggestion
+            },
+            suggestion
+          )) })
+        ] }) : messages.map((message) => /* @__PURE__ */ jsx10(
+          MemoizedMessage,
+          {
+            message,
+            showAvatar: showAvatars,
+            avatarSrc: message.role === "user" ? userAvatarSrc : assistantAvatarSrc,
+            avatarFallback: message.role === "user" ? userAvatarFallback : assistantAvatarFallback,
+            renderContent,
+            isStreaming: message.id === streamingMessageId,
+            error: messageErrors?.[message.id],
+            onRetry: onRetryMessage && messageErrors?.[message.id] ? () => onRetryMessage(message) : void 0
+          },
+          message.id
+        )),
+        isLoading && !isEmpty && /* @__PURE__ */ jsx10(
+          MemoizedMessage,
+          {
+            message: {
+              id: "__loading__",
+              role: "assistant",
+              content: loadingMessage
+            },
+            showAvatar: showAvatars,
+            avatarSrc: assistantAvatarSrc,
+            avatarFallback: assistantAvatarFallback,
+            className: "bg-muted/50",
+            renderContent: (content) => /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground animate-pulse motion-reduce:animate-none", children: content })
+          }
+        ),
+        /* @__PURE__ */ jsx10("div", { "aria-live": "polite", className: "sr-only", children: announcement }),
+        /* @__PURE__ */ jsx10("div", { ref: messagesEndRef })
+      ] }),
+      showDownload && messages.length > 0 && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: handleDownload,
+          "aria-label": "Download transcript",
+          className: "absolute top-2 right-2 z-10 rounded-md border border-border bg-background/90 px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: "\u2193 .md"
+        }
+      ),
+      showScrollButton && isUnpinned && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: scrollToLatest,
+          "aria-label": "Scroll to latest message",
+          className: "absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full border border-border bg-background/95 px-3 py-1.5 text-xs font-medium shadow-sm hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: "\u2193 Latest"
+        }
+      )
+    ] });
+  }
+);
+Conversation.displayName = "Conversation";
+
+// src/components/prompt-input/PromptInput.tsx
+import * as React11 from "react";
+import { Button as Button3 } from "@slipstream-ui/core";
+import { cn as cn11 } from "@slipstream-ui/core";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function usePromptInputAttachments(options = {}) {
+  const { accept, maxFiles, maxFileSize, multiple = true, onError } = options;
+  const [files, setFiles] = React11.useState([]);
+  const inputRef = React11.useRef(null);
+  const add = React11.useCallback(
+    (fileList) => {
+      const incoming = Array.from(fileList);
+      setFiles((prev) => {
+        const next = [...prev];
+        for (const file of incoming) {
+          if (accept && !file.type.match(accept.replace(/\*/g, ".*"))) {
+            onError?.({ code: "accept", message: `"${file.name}" is not an accepted file type.` });
+            continue;
+          }
+          if (maxFileSize && file.size > maxFileSize) {
+            onError?.({
+              code: "max_file_size",
+              message: `"${file.name}" exceeds the ${Math.round(maxFileSize / 1024)} KB limit.`
+            });
+            continue;
+          }
+          if (maxFiles !== void 0 && next.length >= maxFiles) {
+            onError?.({ code: "max_files", message: `At most ${maxFiles} files can be attached.` });
+            break;
+          }
+          if (!multiple && next.length >= 1) {
+            onError?.({ code: "max_files", message: "Only one file can be attached." });
+            break;
+          }
+          next.push({
+            id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+            name: file.name,
+            size: `${Math.max(1, Math.round(file.size / 1024))} KB`,
+            type: file.type.split("/")[1]?.toUpperCase() ?? file.name.split(".").pop()?.toUpperCase()
+          });
+        }
+        return next;
+      });
+    },
+    [accept, maxFileSize, maxFiles, multiple, onError]
+  );
+  const remove = React11.useCallback((id) => {
+    setFiles((prev) => prev.filter((file) => file.id !== id));
+  }, []);
+  const clear = React11.useCallback(() => setFiles([]), []);
+  const openFileDialog = React11.useCallback(() => inputRef.current?.click(), []);
+  const input = /* @__PURE__ */ jsx11(
+    "input",
+    {
+      ref: inputRef,
+      type: "file",
+      hidden: true,
+      accept,
+      multiple,
+      onChange: (event) => {
+        if (event.target.files) add(event.target.files);
+        event.target.value = "";
+      }
+    }
+  );
+  return { files, add, remove, clear, openFileDialog, input };
+}
+function useSpeechRecognition(onTranscript) {
+  const [isListening, setIsListening] = React11.useState(false);
+  const Ctor = typeof window !== "undefined" ? window.SpeechRecognition ?? window.webkitSpeechRecognition : void 0;
+  const recognitionRef = React11.useRef(null);
+  const toggle = React11.useCallback(() => {
+    if (!Ctor) return;
+    if (isListening) {
+      recognitionRef.current?.stop();
+      setIsListening(false);
+      return;
+    }
+    const recognition = new Ctor();
+    recognition.lang = navigator.language || "en-US";
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.onresult = (event) => {
+      const transcript = Array.from({ length: event.results.length }, (_, i) => event.results[i][0].transcript).join(" ");
+      onTranscript(transcript.trim());
+    };
+    recognition.onend = () => setIsListening(false);
+    recognitionRef.current = recognition;
+    recognition.start();
+    setIsListening(true);
+  }, [Ctor, isListening, onTranscript]);
+  return { supported: Boolean(Ctor), isListening, toggle };
+}
+var PromptInputContext = React11.createContext(null);
+function usePromptInputContext() {
+  const context = React11.useContext(PromptInputContext);
+  if (!context) throw new Error("PromptInput primitives must be rendered inside <PromptInput>.");
+  return context;
+}
+var PromptInputRoot = React11.forwardRef(
+  ({
+    onSubmit,
+    onStop,
+    attachments: controlledAttachments,
+    onRemoveAttachment,
+    onAttachmentsChange,
+    hasError = false,
+    accept,
+    multiple = true,
+    maxFiles,
+    maxFileSize,
+    onAttachmentError,
+    globalDrop = false,
+    placeholder = "Type your message...",
+    disabled = false,
+    isLoading = false,
+    className,
+    autoFocus = false,
+    maxLength,
+    showSendButton = true,
+    sendButtonText = "Send",
+    stopButtonText = "Stop generating",
+    children,
+    ...props
+  }, ref) => {
+    const [value, setValue] = React11.useState("");
+    const textareaRef = React11.useRef(null);
+    const managed = usePromptInputAttachments({ accept, maxFiles, maxFileSize, multiple, onError: onAttachmentError });
+    const prevManagedCount = React11.useRef(0);
+    React11.useEffect(() => {
+      if (!controlledAttachments && managed.files.length !== prevManagedCount.current) {
+        prevManagedCount.current = managed.files.length;
+        onAttachmentsChange?.(managed.files);
+      }
+    }, [managed.files, controlledAttachments, onAttachmentsChange]);
+    const activeAttachments = controlledAttachments ?? managed.files;
+    React11.useEffect(() => {
+      if (autoFocus && textareaRef.current) textareaRef.current.focus();
+    }, [autoFocus]);
+    React11.useImperativeHandle(ref, () => textareaRef.current);
+    React11.useEffect(() => {
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      }
+    }, [value]);
+    React11.useEffect(() => {
+      if (!globalDrop || controlledAttachments) return;
+      const prevent = (event) => event.preventDefault();
+      const drop = (event) => {
+        event.preventDefault();
+        if (event.dataTransfer?.files.length) managed.add(event.dataTransfer.files);
+      };
+      document.addEventListener("dragover", prevent);
+      document.addEventListener("drop", drop);
+      return () => {
+        document.removeEventListener("dragover", prevent);
+        document.removeEventListener("drop", drop);
+      };
+    }, [globalDrop, controlledAttachments, managed]);
+    const canSubmit = Boolean(value.trim()) && !disabled && !isLoading;
+    const handleSubmit = () => {
+      const trimmedValue = value.trim();
+      if (!trimmedValue || disabled || isLoading) return;
+      onSubmit(trimmedValue);
+      setValue("");
+      if (textareaRef.current) textareaRef.current.style.height = "auto";
+      if (!controlledAttachments) managed.clear();
+    };
+    const handleStop = () => onStop?.();
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSubmit();
+      }
+    };
+    const dictate = useSpeechRecognition(
+      (transcript) => setValue((current) => current ? `${current} ${transcript}` : transcript)
+    );
+    const contextValue = {
+      value,
+      setValue,
+      disabled,
+      isLoading,
+      canSubmit,
+      submit: handleSubmit,
+      stop: handleStop,
+      hasStop: Boolean(onStop),
+      attachments: activeAttachments,
+      removeAttachment: (id) => controlledAttachments ? onRemoveAttachment?.({ id }) : managed.remove(id),
+      addFiles: (files) => !controlledAttachments && managed.add(files),
+      openFilePicker: managed.openFileDialog,
+      hiddenInput: managed.input,
+      dictate
+    };
+    const showStop = isLoading && Boolean(onStop);
+    const submitIcon = showStop ? "\u25A0" : hasError ? "\u26A0" : "\u2192";
+    const submitLabel = showStop ? stopButtonText : hasError ? "Failed \u2014 check message" : sendButtonText;
+    const textarea = /* @__PURE__ */ jsx11(
+      "textarea",
+      {
+        ref: textareaRef,
+        value,
+        onChange: (event) => setValue(event.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled: disabled || isLoading,
+        maxLength,
+        rows: 1,
+        className: cn11(
+          "flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "min-h-[40px] max-h-[200px] overflow-y-auto"
+        )
+      }
+    );
+    const sendButton = showSendButton ? /* @__PURE__ */ jsx11(
+      Button3,
+      {
+        onClick: showStop ? handleStop : handleSubmit,
+        disabled: showStop ? false : !canSubmit || disabled,
+        variant: showStop ? "outline" : "default",
+        size: "icon",
+        type: "button",
+        "aria-label": submitLabel,
+        children: /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: submitIcon })
+      }
+    ) : null;
+    const dropHandlers = controlledAttachments ? {} : {
+      onDrop: (event) => {
+        event.preventDefault();
+        if (event.dataTransfer.files.length) managed.add(event.dataTransfer.files);
+      },
+      onPaste: (event) => {
+        const files = event.clipboardData?.files;
+        if (files && files.length > 0) {
+          event.preventDefault();
+          managed.add(files);
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx11(PromptInputContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9("div", { className: cn11("flex flex-col gap-2", className), ...dropHandlers, ...props, children: [
+      activeAttachments.length > 0 && /* @__PURE__ */ jsx11(
+        AttachmentList,
+        {
+          attachments: activeAttachments,
+          onRemove: controlledAttachments ? onRemoveAttachment : (a) => managed.remove(a.id)
+        }
+      ),
+      children ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
+        children,
+        managed.input
+      ] }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex gap-2 items-end", children: [
+          textarea,
+          sendButton
+        ] }),
+        managed.input
+      ] })
+    ] }) });
+  }
+);
+PromptInputRoot.displayName = "PromptInput";
+var PromptInputTextarea = React11.forwardRef(({ className, onKeyDown, ...props }, ref) => {
+  const { value, setValue, disabled, isLoading, submit } = usePromptInputContext();
+  return /* @__PURE__ */ jsx11(
+    "textarea",
+    {
+      ref,
+      value,
+      onChange: (event) => setValue(event.target.value),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          submit();
+        }
+        onKeyDown?.(event);
+      },
+      disabled: disabled || isLoading,
+      rows: 1,
+      className: cn11(
+        "flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "min-h-[40px]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+PromptInputTextarea.displayName = "PromptInputTextarea";
+var PromptInputSubmit = React11.forwardRef(({ className }, ref) => {
+  const { canSubmit, isLoading, hasStop, submit, stop, disabled } = usePromptInputContext();
+  return /* @__PURE__ */ jsx11(
+    Button3,
+    {
+      ref,
+      onClick: isLoading && hasStop ? stop : submit,
+      disabled: isLoading && hasStop ? false : !canSubmit || disabled,
+      variant: isLoading && hasStop ? "outline" : "default",
+      size: "icon",
+      type: "button",
+      "aria-label": isLoading && hasStop ? "Stop generating" : "Send",
+      className,
+      children: /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: isLoading && hasStop ? "\u25A0" : "\u2192" })
+    }
+  );
+});
+PromptInputSubmit.displayName = "PromptInputSubmit";
+function PromptInputFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx11("div", { className: cn11("flex items-center justify-between gap-2 pt-1", className), ...props });
+}
+function PromptInputTools({ className, ...props }) {
+  return /* @__PURE__ */ jsx11("div", { className: cn11("flex items-center gap-1", className), ...props });
+}
+function PromptInputHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx11("div", { className: cn11("mb-1", className), ...props });
+}
+function PromptInputBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx11("div", { className: cn11("flex gap-2 items-end", className), ...props });
+}
+var PromptInputButton = React11.forwardRef(
+  ({ tooltip, active = false, className, ...props }, ref) => {
+    const tip = typeof tooltip === "string" ? { content: tooltip } : tooltip;
+    return /* @__PURE__ */ jsxs9("span", { className: "relative inline-flex group/tip", children: [
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          ref,
+          type: "button",
+          "aria-pressed": active || void 0,
+          className: cn11(
+            "inline-flex h-7 items-center gap-1 rounded-md border border-transparent px-2 text-xs text-muted-foreground transition-colors",
+            "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            active && "border-border bg-muted text-foreground",
+            className
+          ),
+          ...props
+        }
+      ),
+      tip && /* @__PURE__ */ jsxs9(
+        "span",
+        {
+          role: "tooltip",
+          className: "pointer-events-none absolute bottom-full left-0 mb-1 z-10 flex items-center gap-1 whitespace-nowrap rounded border border-border bg-popover px-2 py-0.5 text-[11px] text-popover-foreground opacity-0 shadow-sm transition-opacity group-hover/tip:opacity-100",
+          children: [
+            tip.content,
+            tip.shortcut && /* @__PURE__ */ jsx11("kbd", { className: "rounded bg-muted px-1 font-mono", children: tip.shortcut })
+          ]
+        }
+      )
+    ] });
+  }
+);
+PromptInputButton.displayName = "PromptInputButton";
+function PromptInputActionDictate({ labels }) {
+  const { dictate } = usePromptInputContext();
+  if (!dictate.supported) return null;
+  return /* @__PURE__ */ jsx11(
+    PromptInputButton,
+    {
+      onClick: dictate.toggle,
+      active: dictate.isListening,
+      tooltip: { content: dictate.isListening ? labels?.stop ?? "Stop dictating" : labels?.start ?? "Dictate" },
+      "aria-label": dictate.isListening ? labels?.stop ?? "Stop dictation" : labels?.start ?? "Start dictation",
+      children: /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\u{1F399}" })
+    }
+  );
+}
+function PromptInputActionAddAttachments({ label = "Add photos or files" }) {
+  const { openFilePicker } = usePromptInputContext();
+  return /* @__PURE__ */ jsxs9(PromptInputButton, { onClick: openFilePicker, children: [
+    /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\uFF0B" }),
+    /* @__PURE__ */ jsx11("span", { children: label })
+  ] });
+}
+
+// src/components/reasoning/Reasoning.tsx
+import * as React12 from "react";
+import { cn as cn12 } from "@slipstream-ui/core";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var Reasoning = React12.forwardRef(
+  ({ steps, className, collapsible = true, defaultExpanded = false, duration, isStreaming = false, ...props }, ref) => {
+    const [isExpanded, setIsExpanded] = React12.useState(defaultExpanded);
+    const contentId = React12.useId();
+    if (steps.length === 0) {
+      return null;
+    }
+    const headerText = [
+      "Reasoning",
+      `(${steps.length} ${steps.length === 1 ? "step" : "steps"})`,
+      typeof duration === "number" ? `\xB7 ${duration}s` : duration ? `\xB7 ${duration}` : "",
+      isStreaming ? "\xB7 thinking\u2026" : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs10("div", { ref, className: cn12("border-l-2 border-muted-foreground/30 pl-4", className), ...props, children: [
+      collapsible ? /* @__PURE__ */ jsxs10(
+        "button",
+        {
+          onClick: () => setIsExpanded(!isExpanded),
+          className: "flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+          "aria-expanded": isExpanded,
+          "aria-controls": contentId,
+          children: [
+            /* @__PURE__ */ jsx12("span", { className: cn12("transition-transform", isExpanded ? "rotate-90" : ""), children: "\u25B6" }),
+            /* @__PURE__ */ jsx12("span", { children: headerText }),
+            isStreaming && /* @__PURE__ */ jsx12("span", { className: "flex gap-0.5", "aria-hidden": "true", children: [0, 150, 300].map((delay) => /* @__PURE__ */ jsx12(
+              "span",
+              {
+                className: "h-1 w-1 rounded-full bg-muted-foreground animate-pulse motion-reduce:animate-none",
+                style: { animationDelay: `${delay}ms` }
+              },
+              delay
+            )) })
+          ]
+        }
+      ) : null,
+      (isExpanded || !collapsible) && /* @__PURE__ */ jsx12("div", { id: contentId, className: "mt-3 space-y-3", children: steps.map((step, index) => /* @__PURE__ */ jsxs10("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx12("div", { className: "w-3 h-3 rounded-full bg-primary/20 border-2 border-primary flex-shrink-0 mt-1" }),
+        /* @__PURE__ */ jsxs10("div", { className: "text-sm flex-1", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "font-medium text-foreground mb-1", children: [
+            "Step ",
+            index + 1
+          ] }),
+          /* @__PURE__ */ jsx12("div", { className: "text-muted-foreground", children: step.content }),
+          step.timestamp && /* @__PURE__ */ jsx12("div", { className: "text-xs text-muted-foreground mt-1", children: new Date(step.timestamp).toLocaleTimeString() })
+        ] })
+      ] }, step.id)) })
+    ] });
+  }
+);
+Reasoning.displayName = "Reasoning";
+
+// src/components/tool-call/ToolCall.tsx
+import * as React13 from "react";
+import { cn as cn13 } from "@slipstream-ui/core";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var statusChipClasses2 = {
+  pending: "bg-warning/10 text-warning border-warning/20",
+  running: "bg-info/10 text-info border-info/20",
+  completed: "bg-success/10 text-success border-success/20",
+  failed: "bg-destructive/10 text-destructive border-destructive/20"
+};
+var statusLabels = {
+  pending: "Pending",
+  running: "Running",
+  completed: "Completed",
+  failed: "Failed"
+};
+var ToolCall = React13.forwardRef(
+  ({ toolCall, className, showResult = true, ...props }, ref) => {
+    const serializedArguments = React13.useMemo(
+      () => JSON.stringify(toolCall.arguments, null, 2),
+      [toolCall.arguments]
+    );
+    const serializedResult = React13.useMemo(() => {
+      if (toolCall.result === void 0) return void 0;
+      return typeof toolCall.result === "string" ? toolCall.result : JSON.stringify(toolCall.result, null, 2);
+    }, [toolCall.result]);
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ref,
+        className: cn13(
+          "border rounded-lg p-4 bg-muted/30",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx13("span", { className: "font-medium text-sm", children: toolCall.name }),
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  className: cn13(
+                    "text-xs px-2 py-0.5 rounded-full border",
+                    statusChipClasses2[toolCall.status]
+                  ),
+                  children: statusLabels[toolCall.status]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx13("span", { className: "text-xs text-muted-foreground", children: toolCall.id })
+          ] }),
+          /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Arguments" }),
+              /* @__PURE__ */ jsx13("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx13("code", { children: serializedArguments }) })
+            ] }),
+            showResult && serializedResult !== void 0 && /* @__PURE__ */ jsxs11("div", { children: [
+              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Result" }),
+              /* @__PURE__ */ jsx13("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx13("code", { children: serializedResult }) })
+            ] }),
+            toolCall.status === "failed" && toolCall.error && /* @__PURE__ */ jsxs11("div", { role: "alert", children: [
+              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-destructive mb-1", children: "Error" }),
+              /* @__PURE__ */ jsx13("pre", { className: "text-xs bg-destructive/10 text-destructive p-2 rounded overflow-x-auto whitespace-pre-wrap", children: /* @__PURE__ */ jsx13("code", { children: toolCall.error }) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ToolCall.displayName = "ToolCall";
+
+// src/components/source/Source.tsx
+import * as React14 from "react";
+import { cn as cn14 } from "@slipstream-ui/core";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var Source = React14.forwardRef(
+  ({ source, index, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs12("div", { ref, className: cn14("flex gap-2 items-start text-sm", className), ...props, children: [
+      index !== void 0 && /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground select-none", "aria-hidden": "true", children: [
+        "[",
+        index,
+        "]"
+      ] }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx14("div", { className: "font-medium text-foreground", children: source.url ? /* @__PURE__ */ jsx14(
+          "a",
+          {
+            href: source.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "hover:text-primary transition-colors",
+            children: source.title
+          }
+        ) : /* @__PURE__ */ jsx14("span", { children: source.title }) }),
+        source.snippet && /* @__PURE__ */ jsx14("div", { className: "text-xs text-muted-foreground mt-1 line-clamp-2", children: source.snippet })
+      ] })
+    ] });
+  }
+);
+Source.displayName = "Source";
+
+// src/components/source/Sources.tsx
+import * as React15 from "react";
+import { cn as cn15 } from "@slipstream-ui/core";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var Sources = React15.forwardRef(
+  ({ sources, className, maxDisplay = 3, label = "Sources", ...props }, ref) => {
+    const displaySources = maxDisplay ? sources.slice(0, maxDisplay) : sources;
+    const hasMore = maxDisplay && sources.length > maxDisplay;
+    if (sources.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs13("div", { ref, className: cn15("mt-4 pt-4 border-t border-border", className), ...props, children: [
+      /* @__PURE__ */ jsx15("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: label }),
+      /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
+        displaySources.map((source, index) => /* @__PURE__ */ jsx15(Source, { source, index: index + 1 }, source.id)),
+        hasMore && /* @__PURE__ */ jsxs13("div", { className: "text-xs text-muted-foreground", children: [
+          "+",
+          sources.length - (maxDisplay ?? 0),
+          " more sources"
+        ] })
+      ] })
+    ] });
+  }
+);
+Sources.displayName = "Sources";
+
+// src/components/suggestion/Suggestion.tsx
+import * as React16 from "react";
+import { cn as cn16 } from "@slipstream-ui/core";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Suggestions = React16.forwardRef(
+  ({ suggestions, onSelect, className, maxDisplay = 4, ...props }, ref) => {
+    const displaySuggestions = maxDisplay ? suggestions.slice(0, maxDisplay) : suggestions;
+    if (suggestions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx16("div", { ref, className: cn16("mt-4 space-y-2", className), ...props, children: displaySuggestions.map((suggestion) => /* @__PURE__ */ jsx16(
+      "button",
+      {
+        className: cn16(
+          "w-full text-left h-auto py-2 px-3 text-sm rounded-md",
+          "hover:bg-accent hover:text-accent-foreground",
+          "transition-colors",
+          "text-muted-foreground",
+          "focus:outline-none focus:ring-2 focus:ring-ring"
+        ),
+        onClick: () => onSelect?.(suggestion),
+        children: suggestion.text
+      },
+      suggestion.id
+    )) });
+  }
+);
+Suggestions.displayName = "Suggestions";
+
+// src/components/chainthought/ChainThought.tsx
+import * as React17 from "react";
+import { cn as cn17 } from "@slipstream-ui/core";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+var ChainThought = React17.forwardRef(
+  ({ steps, className, compact = false, ...props }, ref) => {
+    if (steps.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx17("div", { ref, className: cn17("space-y-2", className), ...props, children: steps.map((step, index) => /* @__PURE__ */ jsxs14("div", { className: "flex gap-3 items-start", children: [
+      /* @__PURE__ */ jsx17("div", { className: cn17(
+        "w-2 h-2 rounded-full mt-1.5 flex-shrink-0",
+        step.status === "completed" ? "bg-success" : step.status === "failed" ? "bg-destructive" : step.status === "pending" ? "bg-warning" : "bg-primary"
+      ) }),
+      /* @__PURE__ */ jsxs14("div", { className: cn17("flex-1", compact && "text-sm"), children: [
+        /* @__PURE__ */ jsxs14("div", { className: "text-sm text-muted-foreground", children: [
+          "Step ",
+          index + 1
+        ] }),
+        /* @__PURE__ */ jsx17("div", { className: "text-foreground", children: step.content })
+      ] })
+    ] }, step.id)) });
+  }
+);
+ChainThought.displayName = "ChainThought";
+
+// src/components/streaming/StreamingIndicator.tsx
+import * as React18 from "react";
+import { cn as cn18 } from "@slipstream-ui/core";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+var StreamingIndicator = React18.forwardRef(
+  ({ isStreaming, className, text = "Generating...", ...props }, ref) => {
+    if (!isStreaming) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": text,
+        className: cn18("flex items-center gap-2 text-sm text-muted-foreground", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx18("div", { className: "flex gap-1", "aria-hidden": "true", children: [0, 150, 300].map((delay) => /* @__PURE__ */ jsx18(
+            "span",
+            {
+              className: "w-2 h-2 bg-primary rounded-full animate-pulse motion-reduce:animate-none",
+              style: { animationDelay: `${delay}ms` }
+            },
+            delay
+          )) }),
+          /* @__PURE__ */ jsx18("span", { children: text })
+        ]
+      }
+    );
+  }
+);
+StreamingIndicator.displayName = "StreamingIndicator";
+
+// src/components/command-palette/CommandPalette.tsx
+import * as React19 from "react";
+import { cn as cn19 } from "@slipstream-ui/core";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function CommandPalette({
+  open,
+  onOpenChange,
+  commands,
+  onSelect,
+  placeholder = "Type a command\u2026"
+}) {
+  const [query, setQuery] = React19.useState("");
+  const [activeIndex, setActiveIndex] = React19.useState(0);
+  const inputRef = React19.useRef(null);
+  const listboxId = React19.useId();
+  const optionId = (index) => `${listboxId}-option-${index}`;
+  const filtered = React19.useMemo(() => {
+    const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (terms.length === 0) return commands;
+    return commands.filter((command) => {
+      const haystack = `${command.label} ${command.section ?? ""} ${(command.keywords ?? []).join(" ")}`.toLowerCase();
+      return terms.every((term) => haystack.includes(term));
+    });
+  }, [commands, query]);
+  React19.useEffect(() => {
+    if (open) {
+      setQuery("");
+      setActiveIndex(0);
+      const timer = setTimeout(() => inputRef.current?.focus(), 0);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [open]);
+  React19.useEffect(() => {
+    setActiveIndex((index) => Math.min(index, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+  if (!open) return null;
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onOpenChange(false);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((index) => filtered.length === 0 ? 0 : (index + 1) % filtered.length);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((index) => filtered.length === 0 ? 0 : (index - 1 + filtered.length) % filtered.length);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      const command = filtered[activeIndex];
+      if (command) {
+        onSelect(command);
+        onOpenChange(false);
+      }
+    }
+  };
+  let lastSection;
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-start justify-center bg-background/80 p-4 pt-[15vh]",
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) onOpenChange(false);
+      },
+      children: /* @__PURE__ */ jsxs16("div", { className: "w-full max-w-lg overflow-hidden rounded-xl border border-border bg-card shadow-2xl", children: [
+        /* @__PURE__ */ jsx19(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            role: "combobox",
+            "aria-expanded": "true",
+            "aria-controls": listboxId,
+            "aria-activedescendant": filtered.length > 0 ? optionId(activeIndex) : void 0,
+            "aria-autocomplete": "list",
+            "aria-label": "Command palette",
+            placeholder,
+            value: query,
+            onChange: (event) => {
+              setQuery(event.target.value);
+              setActiveIndex(0);
+            },
+            onKeyDown,
+            className: "w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring placeholder:text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxs16("ul", { id: listboxId, role: "listbox", "aria-label": "Commands", className: "max-h-72 overflow-y-auto py-1", children: [
+          filtered.length === 0 && /* @__PURE__ */ jsx19("li", { role: "presentation", className: "px-4 py-3 text-sm text-muted-foreground", children: "No matching commands." }),
+          filtered.map((command, index) => {
+            const showSection = command.section && command.section !== lastSection;
+            lastSection = command.section ?? lastSection;
+            return /* @__PURE__ */ jsxs16(React19.Fragment, { children: [
+              showSection && /* @__PURE__ */ jsx19("li", { role: "presentation", className: "px-4 pb-1 pt-3 text-xs font-medium uppercase text-muted-foreground", children: command.section }),
+              /* @__PURE__ */ jsxs16(
+                "li",
+                {
+                  id: optionId(index),
+                  role: "option",
+                  "aria-selected": index === activeIndex,
+                  onMouseEnter: () => setActiveIndex(index),
+                  onClick: () => {
+                    onSelect(command);
+                    onOpenChange(false);
+                  },
+                  className: cn19(
+                    "flex cursor-pointer items-center justify-between px-4 py-2 text-sm",
+                    index === activeIndex ? "bg-primary/10 text-foreground" : "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx19("span", { children: command.label }),
+                    command.shortcut && /* @__PURE__ */ jsx19("span", { className: "font-mono text-xs", children: command.shortcut })
+                  ]
+                }
+              )
+            ] }, command.id);
+          })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/adapter/messages.ts
+function toSlipstreamToolCall(invocation) {
+  const status = invocation.state === "result" ? "completed" : invocation.state === "error" ? "failed" : invocation.state === "call" ? "pending" : "pending";
+  return {
+    id: invocation.toolCallId,
+    name: invocation.toolName,
+    arguments: invocation.args ?? {},
+    status,
+    ...status === "completed" && invocation.result !== void 0 ? { result: invocation.result } : {},
+    ...status === "failed" ? { error: invocation.error instanceof Error ? invocation.error.message : String(invocation.error ?? "Tool call failed") } : {}
+  };
+}
+function toSlipstreamToolCalls(message) {
+  return (message.toolInvocations ?? []).map(toSlipstreamToolCall);
+}
+function toSlipstreamMessage(message) {
+  return {
+    id: message.id,
+    role: message.role,
+    content: message.content,
+    ...message.toolInvocations?.length ? { metadata: { toolCalls: toSlipstreamToolCalls(message) } } : {}
+  };
+}
+function toSlipstreamMessages(messages) {
+  return messages.map(toSlipstreamMessage);
+}
+
+// src/adapter/hooks.ts
+import { useMemo as useMemo4 } from "react";
+function useSlipstreamMessages({ messages }) {
+  const mapped = useMemo4(() => toSlipstreamMessages(messages), [messages]);
+  return { messages: mapped };
+}
+function useSlipstreamStream({
+  status,
+  error,
+  onRetry,
+  messages = []
+}) {
+  const isLoading = status === "submitted" || status === "streaming";
+  const streamingMessageId = useMemo4(() => {
+    if (status !== "streaming") return void 0;
+    for (let index = messages.length - 1; index >= 0; index--) {
+      const message = messages[index];
+      if (message?.role === "assistant") return message.id;
+    }
+    return messages.at(-1)?.id;
+  }, [status, messages]);
+  const messageErrors = useMemo4(() => {
+    if (status !== "error" || !error) return void 0;
+    const last = messages.at(-1);
+    if (!last) return void 0;
+    return {
+      [last.id]: error instanceof Error ? error.message : String(error)
+    };
+  }, [status, error, messages]);
+  return {
+    isLoading,
+    ...streamingMessageId ? { streamingMessageId } : {},
+    ...messageErrors ? { messageErrors } : {},
+    ...onRetry ? { onRetryMessage: onRetry } : {}
+  };
+}
+export {
+  Attachment,
+  AttachmentList,
+  Branch,
+  ChainThought,
+  CodeBlock,
+  CommandPalette,
+  Confirmation,
+  Conversation,
+  InlineCitation,
+  MemoizedMessage as Message,
+  MessageActions,
+  PromptInputRoot as PromptInput,
+  PromptInputActionAddAttachments,
+  PromptInputActionDictate,
+  PromptInputBody,
+  PromptInputButton,
+  PromptInputFooter,
+  PromptInputHeader,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+  Reasoning,
+  Response,
+  Source,
+  Sources,
+  StreamingIndicator,
+  Suggestions,
+  ToolCall,
+  closeIncompleteMarkdown,
+  toSlipstreamMessage,
+  toSlipstreamMessages,
+  toSlipstreamToolCall,
+  toSlipstreamToolCalls,
+  usePromptInputAttachments,
+  useSlipstreamMessages,
+  useSlipstreamStream,
+  useSpeechRecognition
+};
+//# sourceMappingURL=index.mjs.map