@customerhero/react 2.1.0 → 2.1.1

package/dist/index.cjs

@@ -732,9 +732,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__ */ (0, import_jsx_runtime4.jsx)("li", { children: renderInline(l) }, i))
+            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
           },
           key
         );
@@ -745,9 +747,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__ */ (0, import_jsx_runtime4.jsx)("li", { children: renderInline(l) }, i))
+            children: block.lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { style: { display: "list-item" }, children: renderInline(l) }, i))
           },
           key
         );
@@ -950,11 +954,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__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, "aria-live": "polite", children: [
@@ -1263,13 +1267,20 @@ function Message({
   };
   const linkColor = isUser ? "#ffffff" : config.primaryColor;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(AnimatedMessage, { isUser, animate, reduced, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: bubbleStyle, children: isUser ? message.content : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      renderMarkdown(message.content, {
-        sources: message.sources,
-        linkColor
-      }),
-      message.streaming && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StreamingCursor, { reduced })
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        style: bubbleStyle,
+        "data-streaming-bubble": !isUser && message.streaming ? "true" : void 0,
+        children: isUser ? message.content : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          renderMarkdown(message.content, {
+            sources: message.sources,
+            linkColor
+          }),
+          message.streaming && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StreamingCursor, { reduced })
+        ] })
+      }
+    ),
     isUser && message.status && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageStatusPill, { status: message.status, t }),
     !isUser && message.blocks?.map((block, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       BlockRenderer,
@@ -1354,16 +1365,51 @@ function ChatMessages() {
     t
   } = useChat();
   const reduced = useReducedMotion();
+  const containerRef = (0, import_react7.useRef)(null);
   const messagesEndRef = (0, import_react7.useRef)(null);
   const isFirstRender = (0, import_react7.useRef)(true);
   const prevMessageCount = (0, import_react7.useRef)(0);
+  const stickRef = (0, import_react7.useRef)(true);
+  const suppressScrollRef = (0, import_react7.useRef)(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;
+  };
   (0, import_react7.useEffect)(() => {
-    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;
   (0, import_react7.useEffect)(() => {
@@ -1386,7 +1432,7 @@ function ChatMessages() {
   };
   const lastMsg = messages[messages.length - 1];
   const waitingForFirstToken = isLoading && (lastMsg?.role !== "bot" || lastMsg.streaming !== true);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: containerRef, style: containerStyle, onScroll: handleScroll, children: [
     messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Message,
       {
@@ -1505,12 +1551,23 @@ function ChatInput() {
   const [dragActive, setDragActive] = (0, import_react8.useState)(false);
   const [transientError, setTransientError] = (0, import_react8.useState)(null);
   const fileInputRef = (0, import_react8.useRef)(null);
+  const textInputRef = (0, import_react8.useRef)(null);
   const menuRef = (0, import_react8.useRef)(null);
   const menuButtonRef = (0, import_react8.useRef)(null);
   const dragCounterRef = (0, import_react8.useRef)(0);
   (0, import_react8.useEffect)(() => {
     setCaptureSupported((0, import_js2.canCaptureScreenshot)());
   }, []);
+  (0, import_react8.useEffect)(() => {
+    const id = requestAnimationFrame(() => textInputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, []);
+  (0, import_react8.useLayoutEffect)(() => {
+    const el = textInputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
   (0, import_react8.useEffect)(() => {
     if (pendingPrefill === null) return;
     const text = consumePendingPrefill();
@@ -1688,19 +1745,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,
@@ -1758,6 +1823,7 @@ function ChatInput() {
     fontSize: 14,
     color: "#333",
     textAlign: "left",
+    whiteSpace: "nowrap",
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
   const dropOverlayStyle = {
@@ -1884,9 +1950,10 @@ function ChatInput() {
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "input",
+            "textarea",
             {
-              type: "text",
+              ref: textInputRef,
+              rows: 1,
               value,
               onChange: (e) => setValue(e.target.value),
               onKeyDown: handleKeyDown,

package/dist/index.js

@@ -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,7 @@ function ChatSuggestions() {
 // src/components/chat-input.tsx
 import {
   useEffect as useEffect6,
+  useLayoutEffect,
   useRef as useRef4,
   useState as useState6
 } from "react";
@@ -1492,12 +1539,23 @@ function ChatInput() {
   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();
@@ -1675,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,
@@ -1745,6 +1811,7 @@ function ChatInput() {
     fontSize: 14,
     color: "#333",
     textAlign: "left",
+    whiteSpace: "nowrap",
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
   const dropOverlayStyle = {
@@ -1871,9 +1938,10 @@ function ChatInput() {
             }
           ),
           /* @__PURE__ */ jsx8(
-            "input",
+            "textarea",
             {
-              type: "text",
+              ref: textInputRef,
+              rows: 1,
               value,
               onChange: (e) => setValue(e.target.value),
               onKeyDown: handleKeyDown,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customerhero/react",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": false,
   "description": "React components for embedding the CustomerHero chat widget.",
   "keywords": [
@@ -58,7 +58,7 @@
     "react": ">=18"
   },
   "devDependencies": {
-    "@customerhero/js": "^2.1.0",
+    "@customerhero/js": "^2.1.1",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",