@polpo-ai/chat 0.1.0

package/dist/index.js

@@ -0,0 +1,737 @@
+import {
+  ToolCallChip,
+  ToolCallShell
+} from "./chunk-CCSIMOXD.js";
+import {
+  useDocumentDrag,
+  useSubmitHandler
+} from "./chunk-LTLIBITC.js";
+
+// src/components/chat.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/components/chat-provider.tsx
+import {
+  createContext,
+  useContext
+} from "react";
+import { useChat } from "@polpo-ai/react";
+import { useFiles } from "@polpo-ai/react";
+import { jsx } from "react/jsx-runtime";
+var ChatContext = createContext(null);
+function ChatProvider({
+  sessionId,
+  agent,
+  onSessionCreated,
+  onUpdate,
+  children
+}) {
+  const chat = useChat({
+    sessionId,
+    agent,
+    onSessionCreated,
+    onUpdate
+  });
+  const { uploadFile, isUploading } = useFiles();
+  const value = {
+    ...chat,
+    uploadFile,
+    isUploading
+  };
+  return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children });
+}
+function useChatContext() {
+  const ctx = useContext(ChatContext);
+  if (!ctx) {
+    throw new Error("useChatContext must be used within a <ChatProvider>");
+  }
+  return ctx;
+}
+
+// src/components/chat-messages.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { Virtuoso } from "react-virtuoso";
+
+// src/components/chat-skeleton.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Bone({ width, height = 14 }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "bg-p-line animate-pulse",
+      style: { width, height, borderRadius: height > 20 ? 12 : 6 }
+    }
+  );
+}
+function MessageSkeleton({ lines = 3 }) {
+  const widths = ["85%", "70%", "55%", "90%", "40%"];
+  return /* @__PURE__ */ jsx2("div", { className: "w-full px-6 pt-4 pb-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsx2("div", { className: "size-6 rounded-md bg-p-line animate-pulse shrink-0" }),
+      /* @__PURE__ */ jsx2(Bone, { width: "80px", height: 13 })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-2", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx2(Bone, { width: widths[i % widths.length] }, i)) })
+  ] }) });
+}
+function UserMessageSkeleton() {
+  return /* @__PURE__ */ jsx2("div", { className: "w-full px-6 py-3", children: /* @__PURE__ */ jsx2("div", { className: "max-w-3xl mx-auto flex justify-end", children: /* @__PURE__ */ jsx2("div", { className: "w-[45%] min-w-[120px] h-[42px] rounded-[18px_18px_4px_18px] bg-p-line animate-pulse" }) }) });
+}
+function ChatSkeleton({ count = 3 }) {
+  return /* @__PURE__ */ jsx2("div", { className: "py-2", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx2(UserMessageSkeleton, {}),
+    /* @__PURE__ */ jsx2(MessageSkeleton, { lines: i === 0 ? 2 : i === 1 ? 4 : 3 })
+  ] }, i)) });
+}
+
+// src/components/chat-scroll-button.tsx
+import { ArrowDown } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatScrollButton({
+  isAtBottom,
+  showNewMessage,
+  onClick,
+  className
+}) {
+  if (isAtBottom) return null;
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Scroll to bottom",
+      onClick,
+      className: `absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full border border-[var(--polpo-border)] bg-[var(--polpo-bg,#fff)] shadow-md transition-colors hover:bg-[var(--polpo-bg-hover,#f5f5f5)] ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsx3(ArrowDown, { className: "h-4 w-4 text-[var(--polpo-fg,#333)]" }),
+        showNewMessage && /* @__PURE__ */ jsxs2("span", { className: "absolute -top-1 -right-1 flex h-3 w-3", children: [
+          /* @__PURE__ */ jsx3("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--polpo-accent,#3b82f6)] opacity-75" }),
+          /* @__PURE__ */ jsx3("span", { className: "relative inline-flex h-3 w-3 rounded-full bg-[var(--polpo-accent,#3b82f6)]" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/lib/get-text-content.ts
+function getTextContent(content) {
+  if (typeof content === "string") return content;
+  return content.filter((p) => p.type === "text").map((p) => p.text).join("");
+}
+
+// src/components/chat-messages.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DefaultMessageItem({ msg }) {
+  const text = getTextContent(msg.content);
+  return /* @__PURE__ */ jsx4("div", { className: "w-full px-6 py-3", children: /* @__PURE__ */ jsxs3("div", { className: "max-w-3xl mx-auto", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium opacity-50 mb-1", children: msg.role === "user" ? "You" : "Assistant" }),
+    /* @__PURE__ */ jsx4("p", { className: "whitespace-pre-wrap", children: text })
+  ] }) });
+}
+function VirtuosoFooter() {
+  return /* @__PURE__ */ jsx4("div", { className: "h-px", "aria-hidden": "true" });
+}
+var ChatMessages = forwardRef(
+  function ChatMessages2({ renderItem, className, skeletonCount = 3 }, ref) {
+    const { messages, isStreaming, status } = useChatContext();
+    const virtuosoRef = useRef(null);
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    const [showNewMessage, setShowNewMessage] = useState(false);
+    const prevMessageCountRef = useRef(0);
+    const hasInitialScrollRef = useRef(false);
+    const scrollToBottom = useCallback(
+      (behavior = "smooth") => {
+        virtuosoRef.current?.scrollToIndex({
+          index: "LAST",
+          align: "end",
+          behavior
+        });
+        setShowNewMessage(false);
+      },
+      []
+    );
+    useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+    const handleAtBottomStateChange = useCallback((atBottom) => {
+      setIsAtBottom(atBottom);
+      if (atBottom) setShowNewMessage(false);
+    }, []);
+    useEffect(() => {
+      if (messages.length > 0 && !hasInitialScrollRef.current) {
+        hasInitialScrollRef.current = true;
+        requestAnimationFrame(
+          () => virtuosoRef.current?.scrollToIndex({
+            index: "LAST",
+            align: "end",
+            behavior: "auto"
+          })
+        );
+      }
+    }, [messages.length]);
+    useEffect(() => {
+      hasInitialScrollRef.current = false;
+    }, [status]);
+    useEffect(() => {
+      const cur = messages.length;
+      const prev = prevMessageCountRef.current;
+      if (cur > prev && !isAtBottom && prev > 0) {
+        setShowNewMessage(true);
+      }
+      prevMessageCountRef.current = cur;
+    }, [messages.length, isAtBottom]);
+    const itemContent = useCallback(
+      (index, msg) => {
+        const isLast = index === messages.length - 1;
+        if (renderItem) {
+          return renderItem(msg, index, isLast, isStreaming);
+        }
+        return /* @__PURE__ */ jsx4(DefaultMessageItem, { msg });
+      },
+      [messages.length, isStreaming, renderItem]
+    );
+    if (status === "loading") {
+      return /* @__PURE__ */ jsx4("div", { className: `flex-1 overflow-hidden ${className ?? ""}`, children: /* @__PURE__ */ jsx4(ChatSkeleton, { count: skeletonCount }) });
+    }
+    return /* @__PURE__ */ jsxs3("div", { className: `relative flex-1 min-h-0 ${className ?? ""}`, children: [
+      /* @__PURE__ */ jsx4(
+        Virtuoso,
+        {
+          ref: virtuosoRef,
+          data: messages,
+          followOutput: "auto",
+          atBottomStateChange: handleAtBottomStateChange,
+          atBottomThreshold: 100,
+          defaultItemHeight: 120,
+          overscan: 500,
+          increaseViewportBy: { top: 300, bottom: 300 },
+          skipAnimationFrameInResizeObserver: true,
+          itemContent,
+          className: "h-full",
+          components: { Footer: VirtuosoFooter }
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        ChatScrollButton,
+        {
+          isAtBottom,
+          showNewMessage,
+          onClick: () => scrollToBottom()
+        }
+      )
+    ] });
+  }
+);
+
+// src/components/chat-message.tsx
+import {
+  memo,
+  useState as useState2,
+  useCallback as useCallback2
+} from "react";
+import { Copy, Check, FileCode } from "lucide-react";
+import { Streamdown } from "streamdown";
+
+// src/lib/relative-time.ts
+function relativeTime(iso) {
+  const now = Date.now();
+  const then = new Date(iso).getTime();
+  const diff = Math.floor((now - then) / 1e3);
+  if (diff < 10) return "Just now";
+  if (diff < 60) return `${diff}s ago`;
+  const mins = Math.floor(diff / 60);
+  if (mins < 60) return mins === 1 ? "A minute ago" : `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return hours === 1 ? "An hour ago" : `${hours}h ago`;
+  return new Date(iso).toLocaleString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
+
+// src/components/chat-typing.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var dotBase = "inline-block h-1.5 w-1.5 rounded-full bg-current opacity-40 animate-[typing-dot_1.4s_ease-in-out_infinite]";
+function ChatTyping({ className }) {
+  return /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      role: "status",
+      "aria-label": "Typing",
+      className: `inline-flex items-center gap-1 ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsx5("span", { className: dotBase, style: { animationDelay: "0ms" } }),
+        /* @__PURE__ */ jsx5("span", { className: dotBase, style: { animationDelay: "200ms" } }),
+        /* @__PURE__ */ jsx5("span", { className: dotBase, style: { animationDelay: "400ms" } })
+      ]
+    }
+  );
+}
+
+// src/components/chat-message.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState2(false);
+  const handleCopy = useCallback2(() => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [text]);
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": "Copy message",
+      className: "inline-flex items-center justify-center rounded-md p-1 text-[var(--ink-3)] hover:text-[var(--ink)] hover:bg-[var(--warm)] transition-colors",
+      children: copied ? /* @__PURE__ */ jsx6(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx6(Copy, { className: "size-3.5" })
+    }
+  );
+}
+function ContentParts({
+  parts,
+  align
+}) {
+  const nonText = parts.filter((p) => p.type !== "text");
+  if (nonText.length === 0) return null;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: `flex flex-wrap gap-1.5 mb-1 ${align === "end" ? "justify-end" : ""}`,
+      children: nonText.map((part, i) => {
+        if (part.type === "image_url") {
+          return /* @__PURE__ */ jsx6(
+            "a",
+            {
+              href: part.image_url.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "rounded-lg overflow-hidden max-w-[200px]",
+              children: /* @__PURE__ */ jsx6(
+                "img",
+                {
+                  src: part.image_url.url,
+                  alt: "",
+                  className: "w-full h-auto block"
+                }
+              )
+            },
+            i
+          );
+        }
+        if (part.type === "file") {
+          const fileId = part.file_id;
+          const fn = fileId.split("/").pop() || fileId;
+          return /* @__PURE__ */ jsxs5(
+            "a",
+            {
+              href: `/api/polpo/files/read?path=${encodeURIComponent(fileId)}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "flex items-center gap-1.5 bg-[var(--warm)] border border-[var(--line)] rounded-lg px-2.5 py-1.5 text-xs text-[var(--ink)] hover:border-[var(--ink-3)] transition-colors",
+              children: [
+                /* @__PURE__ */ jsx6(FileCode, { size: 13 }),
+                /* @__PURE__ */ jsx6("span", { className: "truncate max-w-[120px]", children: fn })
+              ]
+            },
+            i
+          );
+        }
+        return null;
+      })
+    }
+  );
+}
+var ChatUserMessage = memo(
+  function ChatUserMessage2({
+    msg,
+    isLast,
+    isStreaming
+  }) {
+    const text = getTextContent(msg.content);
+    return /* @__PURE__ */ jsx6("div", { className: "w-full px-6 py-3", children: /* @__PURE__ */ jsx6("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxs5("div", { className: "group flex w-full flex-col gap-2 ml-auto justify-end", children: [
+      Array.isArray(msg.content) && /* @__PURE__ */ jsx6(ContentParts, { parts: msg.content, align: "end" }),
+      /* @__PURE__ */ jsx6("div", { className: "w-fit max-w-[80%] ml-auto rounded-[18px_18px_4px_18px] bg-[var(--warm)] px-4 py-3", children: text ? /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words text-[var(--ink)]", children: text }) : null }),
+      text && (!isLast || !isStreaming) && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-end gap-1.5 h-6", children: [
+        /* @__PURE__ */ jsx6("span", { className: "text-[11px] text-[var(--ink-3)] opacity-0 group-hover:opacity-100 transition-opacity", children: msg.ts ? relativeTime(msg.ts) : "" }),
+        /* @__PURE__ */ jsx6("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx6(CopyButton, { text }) })
+      ] })
+    ] }) }) });
+  },
+  (prev, next) => prev.isLast === next.isLast && prev.isStreaming === next.isStreaming && prev.msg.id === next.msg.id && prev.msg.content === next.msg.content
+);
+var ChatAssistantMessage = memo(
+  function ChatAssistantMessage2({
+    msg,
+    isLast,
+    isStreaming,
+    avatar,
+    agentName,
+    streamdownComponents: components
+  }) {
+    const text = getTextContent(msg.content);
+    const filteredToolCalls = msg.toolCalls?.filter(
+      (tc) => tc.name !== "ask_user_question"
+    );
+    return /* @__PURE__ */ jsx6("div", { className: "w-full px-6 pt-4 pb-6", children: /* @__PURE__ */ jsx6("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxs5("div", { className: "group flex w-full flex-col gap-2", children: [
+      (avatar || agentName) && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mb-1", children: [
+        avatar,
+        agentName && /* @__PURE__ */ jsx6("span", { className: "font-display text-[13px] font-semibold text-[var(--ink)]", children: agentName })
+      ] }),
+      filteredToolCalls && filteredToolCalls.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-1 mb-1", children: filteredToolCalls.map((tc) => /* @__PURE__ */ jsx6(ToolCallChip, { tool: tc }, tc.id)) }),
+      Array.isArray(msg.content) && /* @__PURE__ */ jsx6(ContentParts, { parts: msg.content, align: "start" }),
+      /* @__PURE__ */ jsx6("div", { className: "w-full text-[var(--ink)]", children: text ? components ? /* @__PURE__ */ jsx6(
+        Streamdown,
+        {
+          className: "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+          components,
+          children: text
+        }
+      ) : /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words", children: text }) : !filteredToolCalls?.length && /* @__PURE__ */ jsx6(ChatTyping, { className: "pt-1" }) }),
+      text && (!isLast || !isStreaming) && /* @__PURE__ */ jsx6("div", { className: "h-6 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx6(CopyButton, { text }) })
+    ] }) }) });
+  },
+  (prev, next) => prev.avatar === next.avatar && prev.agentName === next.agentName && prev.isLast === next.isLast && prev.isStreaming === next.isStreaming && prev.streamdownComponents === next.streamdownComponents && prev.msg.id === next.msg.id && prev.msg.content === next.msg.content && prev.msg.toolCalls?.length === next.msg.toolCalls?.length && JSON.stringify(prev.msg.toolCalls?.map((t) => t.state)) === JSON.stringify(next.msg.toolCalls?.map((t) => t.state))
+);
+var ChatMessage = memo(
+  function ChatMessage2({
+    msg,
+    isLast,
+    isStreaming,
+    avatar,
+    agentName,
+    streamdownComponents: streamdownComponents2
+  }) {
+    if (msg.role === "user") {
+      return /* @__PURE__ */ jsx6(ChatUserMessage, { msg, isLast, isStreaming });
+    }
+    return /* @__PURE__ */ jsx6(
+      ChatAssistantMessage,
+      {
+        msg,
+        isLast,
+        isStreaming,
+        avatar,
+        agentName,
+        streamdownComponents: streamdownComponents2
+      }
+    );
+  },
+  (prev, next) => prev.avatar === next.avatar && prev.agentName === next.agentName && prev.isLast === next.isLast && prev.isStreaming === next.isStreaming && prev.streamdownComponents === next.streamdownComponents && prev.msg.id === next.msg.id && prev.msg.content === next.msg.content && prev.msg.role === next.msg.role && prev.msg.toolCalls?.length === next.msg.toolCalls?.length && JSON.stringify(prev.msg.toolCalls?.map((t) => t.state)) === JSON.stringify(next.msg.toolCalls?.map((t) => t.state))
+);
+
+// src/components/chat-input.tsx
+import {
+  useState as useState3,
+  useRef as useRef2,
+  useCallback as useCallback3,
+  useEffect as useEffect2
+} from "react";
+import { ArrowUp, Square, Plus, X, Upload } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChatInput({
+  placeholder = "Type a message\u2026",
+  hint,
+  allowAttachments = true,
+  className,
+  renderSubmit
+}) {
+  const { sendMessage, isStreaming, abort, uploadFile } = useChatContext();
+  const handleSubmit = useSubmitHandler(sendMessage, uploadFile);
+  const dragging = useDocumentDrag();
+  const [text, setText] = useState3("");
+  const [files, setFiles] = useState3([]);
+  const [isSending, setIsSending] = useState3(false);
+  const textareaRef = useRef2(null);
+  const fileInputRef = useRef2(null);
+  useEffect2(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
+  }, [text]);
+  const addFiles = useCallback3((incoming) => {
+    const arr = Array.from(incoming);
+    setFiles((prev) => {
+      const existing = new Set(prev.map((f) => f.file.name));
+      const fresh = arr.filter((f) => !existing.has(f.name));
+      return [
+        ...prev,
+        ...fresh.map((file) => ({
+          id: Math.random().toString(36).slice(2),
+          file,
+          url: URL.createObjectURL(file)
+        }))
+      ];
+    });
+  }, []);
+  const removeFile = useCallback3((id) => {
+    setFiles((prev) => {
+      const f = prev.find((p) => p.id === id);
+      if (f) URL.revokeObjectURL(f.url);
+      return prev.filter((p) => p.id !== id);
+    });
+  }, []);
+  useEffect2(
+    () => () => {
+      files.forEach((f) => URL.revokeObjectURL(f.url));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const submit = useCallback3(async () => {
+    if (isSending) return;
+    const trimmed = text.trim();
+    if (!trimmed && files.length === 0) return;
+    setIsSending(true);
+    try {
+      await handleSubmit({
+        text: trimmed,
+        files: files.map((f) => ({ url: f.url, filename: f.file.name }))
+      });
+      setText("");
+      setFiles([]);
+    } finally {
+      setIsSending(false);
+    }
+    setTimeout(() => textareaRef.current?.focus(), 0);
+  }, [text, files, handleSubmit, isSending]);
+  const onKeyDown = useCallback3(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        submit();
+      }
+    },
+    [submit]
+  );
+  const onFileChange = useCallback3(
+    (e) => {
+      if (e.target.files) addFiles(e.target.files);
+      e.target.value = "";
+    },
+    [addFiles]
+  );
+  const onDrop = useCallback3(
+    (e) => {
+      e.preventDefault();
+      if (e.dataTransfer.files.length > 0) {
+        addFiles(e.dataTransfer.files);
+      }
+    },
+    [addFiles]
+  );
+  return /* @__PURE__ */ jsx7("div", { className: `shrink-0 ${className || ""}`, children: /* @__PURE__ */ jsx7("div", { className: "w-full px-6 py-3", children: /* @__PURE__ */ jsxs6("div", { className: "max-w-3xl mx-auto relative", children: [
+    allowAttachments && dragging && /* @__PURE__ */ jsxs6("div", { className: "absolute inset-0 z-10 bg-blue-50 border-2 border-dashed border-blue-400 rounded-2xl flex items-center justify-center gap-2 text-blue-600 text-sm font-medium pointer-events-none", children: [
+      /* @__PURE__ */ jsx7(Upload, { className: "size-4" }),
+      " Drop files to attach"
+    ] }),
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "rounded-2xl border border-gray-200 shadow-sm focus-within:border-blue-400 focus-within:shadow-md transition-all bg-white",
+        onDrop: allowAttachments ? onDrop : void 0,
+        onDragOver: allowAttachments ? (e) => e.preventDefault() : void 0,
+        children: [
+          files.length > 0 && /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2 px-4 pt-3", children: files.map((f) => {
+            const isImage = f.file.type.startsWith("image/");
+            return /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                className: "relative flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-lg px-2.5 py-1.5 text-xs",
+                children: [
+                  isImage ? /* @__PURE__ */ jsx7("img", { src: f.url, alt: f.file.name, className: "size-8 rounded object-cover" }) : /* @__PURE__ */ jsx7("div", { className: "size-8 rounded bg-gray-200 flex items-center justify-center text-gray-500 text-[10px] font-mono uppercase", children: f.file.name.split(".").pop()?.slice(0, 4) }),
+                  /* @__PURE__ */ jsx7("span", { className: "truncate max-w-[120px]", children: f.file.name }),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => removeFile(f.id),
+                      className: "size-4 rounded-full bg-gray-300/50 flex items-center justify-center hover:bg-red-500 hover:text-white transition-colors",
+                      children: /* @__PURE__ */ jsx7(X, { className: "size-2.5" })
+                    }
+                  )
+                ]
+              },
+              f.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx7(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              onKeyDown,
+              placeholder,
+              rows: 1,
+              className: "w-full resize-none bg-transparent px-5 pt-4 pb-2 text-sm outline-none placeholder:text-gray-400"
+            }
+          ),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-3 pb-3", children: [
+            allowAttachments ? /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: () => fileInputRef.current?.click(),
+                className: "flex items-center justify-center size-8 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors",
+                "aria-label": "Attach file",
+                children: /* @__PURE__ */ jsx7(Plus, { className: "size-4" })
+              }
+            ) : /* @__PURE__ */ jsx7("div", {}),
+            renderSubmit ? renderSubmit({ isStreaming, onStop: abort }) : /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: isStreaming ? abort : submit,
+                disabled: isSending && !isStreaming,
+                className: "flex items-center justify-center size-8 rounded-lg bg-gray-900 text-white hover:bg-gray-700 disabled:opacity-40 transition-colors",
+                "aria-label": isStreaming ? "Stop" : "Send",
+                children: isStreaming ? /* @__PURE__ */ jsx7(Square, { className: "size-3.5" }) : /* @__PURE__ */ jsx7(ArrowUp, { className: "size-4" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    allowAttachments && /* @__PURE__ */ jsx7(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        onChange: onFileChange,
+        className: "hidden"
+      }
+    ),
+    hint && /* @__PURE__ */ jsx7("p", { className: "text-center text-xs text-gray-400 mt-2", children: hint })
+  ] }) }) });
+}
+
+// src/components/chat.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var Chat = forwardRef2(function Chat2({
+  sessionId,
+  agent,
+  onSessionCreated,
+  onUpdate,
+  renderMessage,
+  avatar,
+  agentName,
+  streamdownComponents: streamdownComponents2,
+  skeletonCount,
+  inputPlaceholder,
+  inputHint,
+  allowAttachments,
+  children,
+  className
+}, ref) {
+  const hasChildren = children !== void 0 && children !== null;
+  const defaultRender = (msg, _index, isLast, isStreaming) => /* @__PURE__ */ jsx8(
+    ChatMessage,
+    {
+      msg,
+      isLast,
+      isStreaming,
+      avatar,
+      agentName,
+      streamdownComponents: streamdownComponents2
+    }
+  );
+  return /* @__PURE__ */ jsx8(
+    ChatProvider,
+    {
+      sessionId,
+      agent,
+      onSessionCreated,
+      onUpdate,
+      children: /* @__PURE__ */ jsxs7("div", { className: `flex flex-col min-w-0 min-h-0 ${className || ""}`, children: [
+        /* @__PURE__ */ jsx8(
+          ChatMessages,
+          {
+            ref,
+            renderItem: renderMessage || defaultRender,
+            skeletonCount,
+            className: "flex-1"
+          }
+        ),
+        hasChildren ? children : /* @__PURE__ */ jsx8(
+          ChatInput,
+          {
+            placeholder: inputPlaceholder,
+            hint: inputHint,
+            allowAttachments
+          }
+        )
+      ] })
+    }
+  );
+});
+
+// src/components/streamdown-code.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function FallbackCodeBlock({ code, language }) {
+  return /* @__PURE__ */ jsx9(
+    "pre",
+    {
+      "data-language": language,
+      style: {
+        margin: "0.75rem 0",
+        padding: "0.875rem 1rem",
+        borderRadius: "10px",
+        overflowX: "auto",
+        border: "1px solid var(--line, #e5e7eb)",
+        background: "var(--bg, #f9fafb)",
+        color: "var(--ink, inherit)",
+        fontSize: "0.75rem",
+        lineHeight: "1.625"
+      },
+      children: /* @__PURE__ */ jsx9("code", { className: `language-${language}`, children: code })
+    }
+  );
+}
+function createStreamdownComponents(CodeBlockComponent) {
+  const Block = CodeBlockComponent ?? FallbackCodeBlock;
+  function StreamdownCode(props) {
+    const {
+      children,
+      className,
+      node: _,
+      "data-block": dataBlock,
+      ...rest
+    } = props;
+    if (dataBlock !== void 0) {
+      const match = /language-(\w+)/.exec(className || "");
+      const lang = match?.[1] || "text";
+      const code = String(children).replace(/\n$/, "");
+      return /* @__PURE__ */ jsx9(Block, { code, language: lang });
+    }
+    return /* @__PURE__ */ jsx9("code", { className, ...rest, children });
+  }
+  return { code: StreamdownCode };
+}
+var streamdownComponents = createStreamdownComponents();
+export {
+  Chat,
+  ChatAssistantMessage,
+  ChatInput,
+  ChatMessage,
+  ChatMessages,
+  ChatProvider,
+  ChatScrollButton,
+  ChatSkeleton,
+  ChatTyping,
+  ChatUserMessage,
+  MessageSkeleton,
+  ToolCallChip,
+  ToolCallShell,
+  UserMessageSkeleton,
+  createStreamdownComponents,
+  getTextContent,
+  relativeTime,
+  streamdownComponents,
+  useChatContext,
+  useDocumentDrag,
+  useSubmitHandler
+};
+//# sourceMappingURL=index.js.map