@customerhero/react 2.0.0 → 2.1.1

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat-widget.tsx
-import { useEffect as useEffect8, useRef as useRef4 } from "react";
+import { useEffect as useEffect8, useRef as useRef5 } from "react";
 
 // src/context.tsx
 import {
@@ -36,9 +36,6 @@ function useCustomerHeroClient() {
   return client;
 }
 
-// src/components/chat-bubble.tsx
-import { useEffect as useEffect3, useState as useState2 } from "react";
-
 // src/use-chat.ts
 import { useCallback, useSyncExternalStore } from "react";
 function useChat() {
@@ -104,6 +101,9 @@ function useChat() {
   };
 }
 
+// src/components/chat-bubble.tsx
+import { useEffect as useEffect3, useState as useState2 } from "react";
+
 // src/use-reduced-motion.ts
 import { useEffect as useEffect2, useState } from "react";
 function useReducedMotion() {
@@ -711,9 +711,11 @@ function renderMarkdown(source, opts = {}) {
             style: {
               margin: "0 0 8px",
               paddingLeft: 20,
-              lineHeight: 1.5
+              lineHeight: 1.5,
+              listStyleType: "disc",
+              listStylePosition: "outside"
             },
-            children: block.lines.map((l, i) => /* @__PURE__ */ jsx4("li", { children: renderInline(l) }, i))
+            children: block.lines.map((l, i) => /* @__PURE__ */ jsx4("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
           },
           key
         );
@@ -724,9 +726,11 @@ function renderMarkdown(source, opts = {}) {
             style: {
               margin: "0 0 8px",
               paddingLeft: 22,
-              lineHeight: 1.5
+              lineHeight: 1.5,
+              listStyleType: "decimal",
+              listStylePosition: "outside"
             },
-            children: block.lines.map((l, i) => /* @__PURE__ */ jsx4("li", { children: renderInline(l) }, i))
+            children: block.lines.map((l, i) => /* @__PURE__ */ jsx4("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
           },
           key
         );
@@ -929,11 +933,11 @@ function MessageStatusPill({
   const containerStyle = {
     display: "flex",
     alignItems: "center",
+    justifyContent: "flex-end",
     gap: 4,
     marginTop: 2,
     fontSize: 11,
-    color: failed ? "#b91c1c" : "#888",
-    alignSelf: "flex-end"
+    color: failed ? "#b91c1c" : "#888"
   };
   const labelKey = status === "sending" ? "status_sending" : status === "sent" ? "status_sent" : "status_failed";
   return /* @__PURE__ */ jsxs4("div", { style: containerStyle, "aria-live": "polite", children: [
@@ -1242,13 +1246,20 @@ function Message({
   };
   const linkColor = isUser ? "#ffffff" : config.primaryColor;
   return /* @__PURE__ */ jsxs4(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ jsx6("div", { style: bubbleStyle, children: isUser ? message.content : /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      renderMarkdown(message.content, {
-        sources: message.sources,
-        linkColor
-      }),
-      message.streaming && /* @__PURE__ */ jsx6(StreamingCursor, { reduced })
-    ] }) }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        style: bubbleStyle,
+        "data-streaming-bubble": !isUser && message.streaming ? "true" : void 0,
+        children: isUser ? message.content : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+          renderMarkdown(message.content, {
+            sources: message.sources,
+            linkColor
+          }),
+          message.streaming && /* @__PURE__ */ jsx6(StreamingCursor, { reduced })
+        ] })
+      }
+    ),
     isUser && message.status && /* @__PURE__ */ jsx6(MessageStatusPill, { status: message.status, t }),
     !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ jsx6(
       BlockRenderer,
@@ -1333,16 +1344,51 @@ function ChatMessages() {
     t
   } = useChat();
   const reduced = useReducedMotion();
+  const containerRef = useRef3(null);
   const messagesEndRef = useRef3(null);
   const isFirstRender = useRef3(true);
   const prevMessageCount = useRef3(0);
+  const stickRef = useRef3(true);
+  const suppressScrollRef = useRef3(false);
+  const autoScrollTo = (top) => {
+    const el = containerRef.current;
+    if (!el) return;
+    suppressScrollRef.current = true;
+    el.scrollTop = top;
+    requestAnimationFrame(() => {
+      suppressScrollRef.current = false;
+    });
+  };
+  const handleScroll = () => {
+    if (suppressScrollRef.current) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    stickRef.current = distFromBottom < 60;
+  };
   useEffect5(() => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({
-        behavior: isFirstRender.current || reduced ? "auto" : "smooth"
-      });
-      isFirstRender.current = false;
+    const el = containerRef.current;
+    if (!el) return;
+    const lastMsg2 = messages[messages.length - 1];
+    if (messages.length > prevMessageCount.current && lastMsg2?.role === "user") {
+      stickRef.current = true;
     }
+    if (!stickRef.current && !isFirstRender.current) {
+      return;
+    }
+    const streamingBubble = el.querySelector(
+      "[data-streaming-bubble='true']"
+    );
+    let target = el.scrollHeight - el.clientHeight;
+    if (streamingBubble && streamingBubble.offsetHeight > el.clientHeight - 24) {
+      const containerTop = el.getBoundingClientRect().top;
+      const bubbleTop = streamingBubble.getBoundingClientRect().top;
+      const TOP_GAP = 16;
+      target = el.scrollTop + (bubbleTop - containerTop) - TOP_GAP;
+      stickRef.current = false;
+    }
+    autoScrollTo(target);
+    isFirstRender.current = false;
   }, [messages, isLoading, reduced]);
   const newStartIndex = isFirstRender.current ? messages.length : prevMessageCount.current;
   useEffect5(() => {
@@ -1365,7 +1411,7 @@ function ChatMessages() {
   };
   const lastMsg = messages[messages.length - 1];
   const waitingForFirstToken = isLoading && (lastMsg?.role !== "bot" || lastMsg.streaming !== true);
-  return /* @__PURE__ */ jsxs4("div", { style: containerStyle, children: [
+  return /* @__PURE__ */ jsxs4("div", { ref: containerRef, style: containerStyle, onScroll: handleScroll, children: [
     messages.map((msg, i) => /* @__PURE__ */ jsx6(
       Message,
       {
@@ -1454,6 +1500,8 @@ function ChatSuggestions() {
 // src/components/chat-input.tsx
 import {
   useEffect as useEffect6,
+  useLayoutEffect,
+  useRef as useRef4,
   useState as useState6
 } from "react";
 import {
@@ -1463,6 +1511,16 @@ import {
 } from "@customerhero/js";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var MAX_ATTACHMENTS = 3;
+var ALLOWED_MIME_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "application/pdf"
+];
+var ACCEPT_ATTR = ALLOWED_MIME_TYPES.join(",");
+function isImageMime(mime) {
+  return mime.startsWith("image/");
+}
 function ChatInput() {
   const {
     sendMessage,
@@ -1477,9 +1535,27 @@ function ChatInput() {
   const [value, setValue] = useState6("");
   const [attachments, setAttachments] = useState6([]);
   const [captureSupported, setCaptureSupported] = useState6(false);
+  const [menuOpen, setMenuOpen] = useState6(false);
+  const [dragActive, setDragActive] = useState6(false);
+  const [transientError, setTransientError] = useState6(null);
+  const fileInputRef = useRef4(null);
+  const textInputRef = useRef4(null);
+  const menuRef = useRef4(null);
+  const menuButtonRef = useRef4(null);
+  const dragCounterRef = useRef4(0);
   useEffect6(() => {
     setCaptureSupported(canCaptureScreenshot());
   }, []);
+  useEffect6(() => {
+    const id = requestAnimationFrame(() => textInputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, []);
+  useLayoutEffect(() => {
+    const el = textInputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
   useEffect6(() => {
     if (pendingPrefill === null) return;
     const text = consumePendingPrefill();
@@ -1490,6 +1566,30 @@ function ChatInput() {
       for (const a of attachments) URL.revokeObjectURL(a.previewUrl);
     };
   }, []);
+  useEffect6(() => {
+    if (!menuOpen) return;
+    const onClick = (e) => {
+      const target = e.target;
+      if (menuRef.current?.contains(target) || menuButtonRef.current?.contains(target)) {
+        return;
+      }
+      setMenuOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setMenuOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [menuOpen]);
+  useEffect6(() => {
+    if (!transientError) return;
+    const id = window.setTimeout(() => setTransientError(null), 4e3);
+    return () => window.clearTimeout(id);
+  }, [transientError]);
   const updateAttachment = (id, patch) => {
     setAttachments(
       (current) => current.map(
@@ -1497,16 +1597,16 @@ function ChatInput() {
       )
     );
   };
-  const startUpload = async (blob) => {
+  const startUpload = async (blob, filename) => {
     if (attachments.length >= MAX_ATTACHMENTS) return;
     const id = `att_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
     const previewUrl = URL.createObjectURL(blob);
     setAttachments((current) => [
       ...current,
-      { id, status: "uploading", previewUrl, blob }
+      { id, status: "uploading", previewUrl, blob, filename }
     ]);
     try {
-      const { attachmentToken } = await uploadAttachment(blob);
+      const { attachmentToken } = await uploadAttachment(blob, { filename });
       updateAttachment(id, {
         status: "ready",
         token: attachmentToken
@@ -1515,7 +1615,31 @@ function ChatInput() {
       updateAttachment(id, { status: "error" });
     }
   };
+  const ingestFiles = (files) => {
+    const remainingSlots = Math.max(0, MAX_ATTACHMENTS - attachments.length);
+    if (remainingSlots === 0) return 0;
+    let queued = 0;
+    let rejectedAny = false;
+    for (const f of Array.from(files)) {
+      if (queued >= remainingSlots) break;
+      const type = f.type;
+      if (!ALLOWED_MIME_TYPES.includes(
+        type
+      )) {
+        rejectedAny = true;
+        continue;
+      }
+      const filename = typeof f.name === "string" && f.name.length > 0 ? f.name : void 0;
+      void startUpload(f, filename);
+      queued += 1;
+    }
+    if (rejectedAny) {
+      setTransientError(t("attachment_unsupported_type"));
+    }
+    return queued;
+  };
   const handleCapture = async () => {
+    setMenuOpen(false);
     try {
       const blob = await captureScreenshot();
       await startUpload(blob);
@@ -1523,6 +1647,17 @@ function ChatInput() {
       if (e instanceof ScreenshotCancelled) return;
     }
   };
+  const handlePickFile = () => {
+    setMenuOpen(false);
+    fileInputRef.current?.click();
+  };
+  const handleFileInputChange = (e) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      ingestFiles(files);
+    }
+    e.target.value = "";
+  };
   const handleRemove = (id) => {
     setAttachments((current) => {
       const target = current.find((a) => a.id === id);
@@ -1530,6 +1665,45 @@ function ChatInput() {
       return current.filter((a) => a.id !== id);
     });
   };
+  const handlePaste = (e) => {
+    const items = e.clipboardData?.items;
+    if (!items || items.length === 0) return;
+    const blobs = [];
+    for (const item of Array.from(items)) {
+      if (item.kind !== "file") continue;
+      const blob = item.getAsFile();
+      if (blob) blobs.push(blob);
+    }
+    if (blobs.length === 0) return;
+    e.preventDefault();
+    ingestFiles(blobs);
+  };
+  const handleDragEnter = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    dragCounterRef.current += 1;
+    setDragActive(true);
+  };
+  const handleDragOver = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+  };
+  const handleDragLeave = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+    if (dragCounterRef.current === 0) setDragActive(false);
+  };
+  const handleDrop = (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    dragCounterRef.current = 0;
+    setDragActive(false);
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0) {
+      ingestFiles(files);
+    }
+  };
   const readyTokens = attachments.filter(
     (a) => a.status === "ready"
   ).map((a) => a.token);
@@ -1550,6 +1724,7 @@ function ChatInput() {
     }
   };
   const containerStyle = {
+    position: "relative",
     padding: "12px 16px",
     borderTop: "1px solid #eee",
     display: "flex",
@@ -1558,19 +1733,27 @@ function ChatInput() {
   };
   const rowStyle = {
     display: "flex",
-    alignItems: "center",
+    // Anchor the icon buttons to the bottom of the row so a multi-line
+    // textarea grows upward without dragging them along.
+    alignItems: "flex-end",
     gap: 8
   };
+  const TEXTAREA_MAX_HEIGHT = 140;
   const inputStyle = {
     flex: 1,
     border: "1px solid #e0e0e0",
-    borderRadius: 24,
+    borderRadius: 18,
     padding: "10px 16px",
     fontSize: 14,
+    lineHeight: 1.4,
     outline: "none",
     background: "#fafafa",
     color: config.textColor,
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    resize: "none",
+    overflowY: "auto",
+    maxHeight: TEXTAREA_MAX_HEIGHT,
+    boxSizing: "border-box"
   };
   const sendButtonStyle = {
     width: 36,
@@ -1602,99 +1785,238 @@ function ChatInput() {
     flexShrink: 0,
     padding: 0
   });
-  const captureDisabled = attachments.length >= MAX_ATTACHMENTS || isLoading;
-  return /* @__PURE__ */ jsxs5("div", { style: containerStyle, children: [
-    attachments.length > 0 && /* @__PURE__ */ jsx8(
-      "div",
-      {
-        style: { display: "flex", gap: 8, flexWrap: "wrap" },
-        "aria-label": "Attachments",
-        children: attachments.map((a) => /* @__PURE__ */ jsx8(
-          Thumbnail,
+  const menuStyle = {
+    position: "absolute",
+    bottom: "calc(100% + 4px)",
+    left: 0,
+    background: "white",
+    border: "1px solid #e0e0e0",
+    borderRadius: 8,
+    boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+    padding: 4,
+    minWidth: 180,
+    zIndex: 10,
+    display: "flex",
+    flexDirection: "column"
+  };
+  const menuItemStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 12px",
+    background: "transparent",
+    border: "none",
+    borderRadius: 4,
+    cursor: "pointer",
+    fontSize: 14,
+    color: "#333",
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  const dropOverlayStyle = {
+    position: "absolute",
+    inset: 0,
+    background: "rgba(255,255,255,0.92)",
+    border: `2px dashed ${config.primaryColor}`,
+    borderRadius: 4,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: config.primaryColor,
+    fontSize: 14,
+    fontWeight: 500,
+    pointerEvents: "none",
+    zIndex: 11
+  };
+  const errorPillStyle = {
+    alignSelf: "flex-start",
+    background: "#fef2f2",
+    color: "#b91c1c",
+    border: "1px solid #fecaca",
+    borderRadius: 12,
+    padding: "4px 10px",
+    fontSize: 12
+  };
+  const attachDisabled = attachments.length >= MAX_ATTACHMENTS || isLoading;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: containerStyle,
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        dragActive && /* @__PURE__ */ jsx8("div", { style: dropOverlayStyle, "aria-hidden": "true", children: t("drop_files_here") }),
+        transientError && /* @__PURE__ */ jsx8("div", { role: "alert", style: errorPillStyle, children: transientError }),
+        attachments.length > 0 && /* @__PURE__ */ jsx8(
+          "div",
           {
-            attachment: a,
-            onRemove: () => handleRemove(a.id),
-            t
-          },
-          a.id
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsxs5("div", { style: rowStyle, children: [
-      captureSupported && /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          onClick: handleCapture,
-          disabled: captureDisabled,
-          style: iconButtonStyle(captureDisabled),
-          "aria-label": t("screenshot_capture"),
-          title: t("screenshot_capture"),
-          children: /* @__PURE__ */ jsx8(CameraIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "input",
-        {
-          type: "text",
-          value,
-          onChange: (e) => setValue(e.target.value),
-          onKeyDown: handleKeyDown,
-          placeholder: config.placeholderText,
-          style: inputStyle,
-          disabled: isLoading
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "button",
-        {
-          onClick: handleSend,
-          disabled: isLoading || !value.trim(),
-          style: sendButtonStyle,
-          "aria-label": t("send_message"),
-          onMouseEnter: (e) => {
-            if (!reduced && !isLoading)
-              e.currentTarget.style.transform = "scale(1.1)";
-          },
-          onMouseLeave: (e) => {
-            if (!reduced) e.currentTarget.style.transform = "scale(1)";
-          },
-          children: /* @__PURE__ */ jsxs5(
-            "svg",
+            style: { display: "flex", gap: 8, flexWrap: "wrap" },
+            "aria-label": "Attachments",
+            children: attachments.map((a) => /* @__PURE__ */ jsx8(
+              Thumbnail,
+              {
+                attachment: a,
+                onRemove: () => handleRemove(a.id),
+                t
+              },
+              a.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { style: rowStyle, children: [
+          /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                ref: menuButtonRef,
+                type: "button",
+                onClick: () => setMenuOpen((o) => !o),
+                disabled: attachDisabled,
+                style: iconButtonStyle(attachDisabled),
+                "aria-label": t("attach_menu_open"),
+                "aria-haspopup": "menu",
+                "aria-expanded": menuOpen,
+                title: t("attach_menu_open"),
+                children: /* @__PURE__ */ jsx8(PaperclipIcon, {})
+              }
+            ),
+            menuOpen && /* @__PURE__ */ jsxs5("div", { ref: menuRef, role: "menu", style: menuStyle, children: [
+              /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: handlePickFile,
+                  style: menuItemStyle,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "#f5f5f5";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8(ImageIcon, {}),
+                    t("attach_photo")
+                  ]
+                }
+              ),
+              captureSupported && /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  onClick: handleCapture,
+                  style: menuItemStyle,
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "#f5f5f5";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "transparent";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8(CameraIcon, {}),
+                    t("screenshot_capture")
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "input",
             {
-              width: "16",
-              height: "16",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: [
-                /* @__PURE__ */ jsx8("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-                /* @__PURE__ */ jsx8("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
-              ]
+              ref: fileInputRef,
+              type: "file",
+              accept: ACCEPT_ATTR,
+              multiple: true,
+              onChange: handleFileInputChange,
+              style: { display: "none" },
+              "aria-hidden": "true",
+              tabIndex: -1
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "textarea",
+            {
+              ref: textInputRef,
+              rows: 1,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              placeholder: config.placeholderText,
+              style: inputStyle,
+              disabled: isLoading
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              onClick: handleSend,
+              disabled: isLoading || !value.trim(),
+              style: sendButtonStyle,
+              "aria-label": t("send_message"),
+              onMouseEnter: (e) => {
+                if (!reduced && !isLoading)
+                  e.currentTarget.style.transform = "scale(1.1)";
+              },
+              onMouseLeave: (e) => {
+                if (!reduced) e.currentTarget.style.transform = "scale(1)";
+              },
+              children: /* @__PURE__ */ jsxs5(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsx8("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                    /* @__PURE__ */ jsx8("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                  ]
+                }
+              )
             }
           )
-        }
-      )
-    ] })
-  ] });
+        ] })
+      ]
+    }
+  );
+}
+function hasFiles(e) {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === "Files") return true;
+  }
+  return false;
 }
 function Thumbnail({
   attachment,
   onRemove,
   t
 }) {
-  const { status, previewUrl } = attachment;
+  const { status, previewUrl, blob, filename } = attachment;
+  const isImage = isImageMime(blob.type);
   const wrap = {
     position: "relative",
-    width: 56,
+    width: isImage ? 56 : 160,
     height: 56,
     borderRadius: 8,
     overflow: "hidden",
     border: status === "error" ? "2px solid #b91c1c" : "1px solid #e0e0e0",
-    background: "#f5f5f5"
+    background: "#f5f5f5",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: isImage ? "stretch" : "flex-start",
+    gap: isImage ? 0 : 8,
+    padding: isImage ? 0 : "0 8px"
   };
   const img = {
     width: "100%",
@@ -1725,8 +2047,42 @@ function Thumbnail({
     alignItems: "center",
     justifyContent: "center"
   };
+  const docName = {
+    fontSize: 12,
+    fontWeight: 500,
+    color: "#333",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: 110,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  const docMeta = {
+    fontSize: 11,
+    color: "#888",
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  const displayName = filename ?? (isImage ? "" : "Document");
+  const sizeLabel = formatBytes(blob.size);
   return /* @__PURE__ */ jsxs5("div", { style: wrap, children: [
-    /* @__PURE__ */ jsx8("img", { src: previewUrl, alt: "", style: img }),
+    isImage ? /* @__PURE__ */ jsx8("img", { src: previewUrl, alt: "", style: img }) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+      /* @__PURE__ */ jsx8(DocIcon, {}),
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            minWidth: 0,
+            flex: 1
+          },
+          children: [
+            /* @__PURE__ */ jsx8("span", { style: docName, title: displayName, children: displayName }),
+            sizeLabel && /* @__PURE__ */ jsx8("span", { style: docMeta, children: sizeLabel })
+          ]
+        }
+      )
+    ] }),
     status === "uploading" && /* @__PURE__ */ jsx8("div", { style: overlay, "aria-label": "Uploading", children: /* @__PURE__ */ jsx8(Spinner2, {}) }),
     status === "error" && /* @__PURE__ */ jsx8(
       "div",
@@ -1749,7 +2105,45 @@ function Thumbnail({
     )
   ] });
 }
-function CameraIcon() {
+function PaperclipIcon() {
+  return /* @__PURE__ */ jsx8(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx8("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+    }
+  );
+}
+function ImageIcon() {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx8("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx8("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ jsx8("polyline", { points: "21 15 16 10 5 21" })
+      ]
+    }
+  );
+}
+function DocIcon() {
   return /* @__PURE__ */ jsxs5(
     "svg",
     {
@@ -1762,6 +2156,36 @@ function CameraIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
+      style: { color: "#666", flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ jsx8("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx8("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ jsx8("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+        /* @__PURE__ */ jsx8("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+        /* @__PURE__ */ jsx8("polyline", { points: "10 9 9 9 8 9" })
+      ]
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function CameraIcon() {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
       children: [
         /* @__PURE__ */ jsx8("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
         /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "13", r: "4" })
@@ -2163,7 +2587,8 @@ function ChatWindow() {
 import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ChatWidgetInner({ identity }) {
   const client = useCustomerHeroClient();
-  const prevIdentityRef = useRef4(void 0);
+  const { configLoaded, configError } = useChat();
+  const prevIdentityRef = useRef5(void 0);
   useEffect8(() => {
     const key = identity ? JSON.stringify(identity) : void 0;
     if (key !== prevIdentityRef.current) {
@@ -2173,6 +2598,7 @@ function ChatWidgetInner({ identity }) {
       }
     }
   }, [identity, client]);
+  if (!configLoaded || configError) return null;
   return /* @__PURE__ */ jsxs7(Fragment6, { children: [
     /* @__PURE__ */ jsx10(ChatBubble, {}),
     /* @__PURE__ */ jsx10(ChatWindow, {})