@hef2024/llmasaservice-ui 0.23.2 → 0.24.1

package/dist/index.css

@@ -1114,6 +1114,23 @@ button[data-pending=true]::after {
   align-items: center;
   gap: 8px;
 }
+.thinking-block__icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.thinking-block__icon-wrapper--spinning {
+  animation: thinkingIconSpin 1.5s linear infinite;
+}
+@keyframes thinkingIconSpin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .thinking-block__icon {
   width: 16px;
   height: 16px;
@@ -1124,6 +1141,30 @@ button[data-pending=true]::after {
   font-weight: 600;
   font-size: 13px;
   color: var(--thinking-block-text, var(--title-text-color));
+  position: relative;
+}
+.thinking-block__title--shimmer {
+  background:
+    linear-gradient(
+      90deg,
+      var(--thinking-block-text, var(--title-text-color)) 0%,
+      var(--thinking-block-text, var(--title-text-color)) 40%,
+      var(--thinking-block-accent, var(--ai-chat-thinking-icon)) 50%,
+      var(--thinking-block-text, var(--title-text-color)) 60%,
+      var(--thinking-block-text, var(--title-text-color)) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: titleShimmer 2s ease-in-out infinite;
+}
+@keyframes titleShimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
 }
 .thinking-block__chevron {
   width: 16px;
@@ -1295,6 +1336,107 @@ button[data-pending=true]::after {
 .thinking-block:not(.thinking-block--collapsed) {
   border-left-width: 3px;
 }
+.thinking-block--collapsed {
+  margin-bottom: 4px;
+  border-radius: 6px;
+  border-width: 0;
+  background-color: transparent;
+}
+.thinking-block--collapsed .thinking-block__header {
+  padding: 4px 8px;
+}
+.thinking-block--collapsed .thinking-block__header-left {
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+.thinking-block--collapsed .thinking-block__icon-wrapper {
+  flex-shrink: 0;
+}
+.thinking-block--collapsed .thinking-block__icon {
+  width: 14px;
+  height: 14px;
+  opacity: 0.6;
+}
+.thinking-block--collapsed .thinking-block__title {
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+.thinking-block__preview {
+  font-size: 11px;
+  font-weight: 400;
+  opacity: 0.5;
+  color: var(--thinking-block-text, var(--title-text-color));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+.thinking-block--collapsed .thinking-block__chevron {
+  width: 12px;
+  height: 12px;
+  opacity: 0.4;
+  flex-shrink: 0;
+}
+.thinking-block--collapsed:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.thinking-block--collapsed:hover .thinking-block__icon,
+.thinking-block--collapsed:hover .thinking-block__title {
+  opacity: 0.9;
+}
+.thinking-block--collapsed:hover .thinking-block__preview {
+  opacity: 0.7;
+}
+.thinking-block--collapsed:hover .thinking-block__chevron {
+  opacity: 0.6;
+}
+.dark-theme .thinking-block--collapsed:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+.thinking-block:not(.thinking-block--collapsed) {
+  margin-bottom: 8px;
+  border-radius: 6px;
+  border: none;
+  background-color: transparent;
+  opacity: 0.75;
+}
+.thinking-block:not(.thinking-block--collapsed):hover {
+  opacity: 0.9;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__header {
+  padding: 4px 10px;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__icon {
+  width: 14px;
+  height: 14px;
+  opacity: 0.7;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__title {
+  font-size: 12px;
+  opacity: 0.8;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__chevron {
+  opacity: 0.5;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__content {
+  padding: 0 10px 6px 10px;
+  font-size: 11px;
+  line-height: 1.5;
+  opacity: 0.7;
+  max-height: 120px;
+  overflow-y: auto;
+}
+.thinking-block--streaming:not(.thinking-block--collapsed) {
+  opacity: 0.85;
+  background-color: rgba(0, 0, 0, 0.015);
+}
+.dark-theme .thinking-block--streaming:not(.thinking-block--collapsed) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
 .thinking-block {
   animation: thinkingBlockAppear 0.2s ease-out;
 }
@@ -4457,6 +4599,23 @@ button[data-pending=true]::after {
   align-items: center;
   gap: 8px;
 }
+.thinking-block__icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.thinking-block__icon-wrapper--spinning {
+  animation: thinkingIconSpin 1.5s linear infinite;
+}
+@keyframes thinkingIconSpin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .thinking-block__icon {
   width: 16px;
   height: 16px;
@@ -4467,6 +4626,30 @@ button[data-pending=true]::after {
   font-weight: 600;
   font-size: 13px;
   color: var(--thinking-block-text, var(--ai-chat-thinking-text));
+  position: relative;
+}
+.thinking-block__title--shimmer {
+  background:
+    linear-gradient(
+      90deg,
+      var(--thinking-block-text, var(--ai-chat-thinking-text)) 0%,
+      var(--thinking-block-text, var(--ai-chat-thinking-text)) 40%,
+      var(--thinking-block-accent, var(--ai-chat-thinking-icon)) 50%,
+      var(--thinking-block-text, var(--ai-chat-thinking-text)) 60%,
+      var(--thinking-block-text, var(--ai-chat-thinking-text)) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: titleShimmer 2s ease-in-out infinite;
+}
+@keyframes titleShimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
 }
 .thinking-block__chevron {
   width: 16px;
@@ -4638,6 +4821,107 @@ button[data-pending=true]::after {
 .thinking-block:not(.thinking-block--collapsed) {
   border-left-width: 3px;
 }
+.thinking-block--collapsed {
+  margin-bottom: 4px;
+  border-radius: 6px;
+  border-width: 0;
+  background-color: transparent;
+}
+.thinking-block--collapsed .thinking-block__header {
+  padding: 4px 8px;
+}
+.thinking-block--collapsed .thinking-block__header-left {
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+.thinking-block--collapsed .thinking-block__icon-wrapper {
+  flex-shrink: 0;
+}
+.thinking-block--collapsed .thinking-block__icon {
+  width: 14px;
+  height: 14px;
+  opacity: 0.6;
+}
+.thinking-block--collapsed .thinking-block__title {
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+.thinking-block__preview {
+  font-size: 11px;
+  font-weight: 400;
+  opacity: 0.5;
+  color: var(--thinking-block-text, var(--ai-chat-thinking-text));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+.thinking-block--collapsed .thinking-block__chevron {
+  width: 12px;
+  height: 12px;
+  opacity: 0.4;
+  flex-shrink: 0;
+}
+.thinking-block--collapsed:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.thinking-block--collapsed:hover .thinking-block__icon,
+.thinking-block--collapsed:hover .thinking-block__title {
+  opacity: 0.9;
+}
+.thinking-block--collapsed:hover .thinking-block__preview {
+  opacity: 0.7;
+}
+.thinking-block--collapsed:hover .thinking-block__chevron {
+  opacity: 0.6;
+}
+.dark-theme .thinking-block--collapsed:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+.thinking-block:not(.thinking-block--collapsed) {
+  margin-bottom: 8px;
+  border-radius: 6px;
+  border: none;
+  background-color: transparent;
+  opacity: 0.75;
+}
+.thinking-block:not(.thinking-block--collapsed):hover {
+  opacity: 0.9;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__header {
+  padding: 4px 10px;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__icon {
+  width: 14px;
+  height: 14px;
+  opacity: 0.7;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__title {
+  font-size: 12px;
+  opacity: 0.8;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__chevron {
+  opacity: 0.5;
+}
+.thinking-block:not(.thinking-block--collapsed) .thinking-block__content {
+  padding: 0 10px 6px 10px;
+  font-size: 11px;
+  line-height: 1.5;
+  opacity: 0.7;
+  max-height: 120px;
+  overflow-y: auto;
+}
+.thinking-block--streaming:not(.thinking-block--collapsed) {
+  opacity: 0.85;
+  background-color: rgba(0, 0, 0, 0.015);
+}
+.dark-theme .thinking-block--streaming:not(.thinking-block--collapsed) {
+  background-color: rgba(255, 255, 255, 0.02);
+}
 .thinking-block {
   animation: thinkingBlockAppear 0.2s ease-out;
 }

package/dist/index.d.mts

@@ -596,6 +596,11 @@ interface ThinkingBlockProps {
 /**
  * ThinkingBlock - A collapsible block for displaying thinking/reasoning/searching content
  * with streaming support. Content streams in naturally as it arrives.
+ *
+ * Features Cursor-style effects:
+ * - Spinning icon when streaming
+ * - Shimmer highlight effect on title text
+ * - Compact collapsed state with content preview
  */
 declare const ThinkingBlock: React__default.FC<ThinkingBlockProps>;
 

package/dist/index.d.ts

@@ -596,6 +596,11 @@ interface ThinkingBlockProps {
 /**
  * ThinkingBlock - A collapsible block for displaying thinking/reasoning/searching content
  * with streaming support. Content streams in naturally as it arrives.
+ *
+ * Features Cursor-style effects:
+ * - Spinning icon when streaming
+ * - Shimmer highlight effect on title text
+ * - Compact collapsed state with content preview
  */
 declare const ThinkingBlock: React__default.FC<ThinkingBlockProps>;
 

package/dist/index.js

@@ -668,10 +668,15 @@ var ThinkingBlock = ({
 }) => {
   const displayTitle = title || getDefaultTitle(type);
   const icon = getIcon(type);
+  const getPreview = (text, maxLength = 60) => {
+    const cleaned = text.replace(/\s+/g, " ").trim();
+    if (cleaned.length <= maxLength) return cleaned;
+    return cleaned.substring(0, maxLength).trim() + "...";
+  };
   return /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
-      className: `thinking-block thinking-block--${type} ${isCollapsed ? "thinking-block--collapsed" : ""}`
+      className: `thinking-block thinking-block--${type} ${isCollapsed ? "thinking-block--collapsed" : ""} ${isStreaming ? "thinking-block--streaming" : ""}`
     },
     /* @__PURE__ */ import_react10.default.createElement(
       "button",
@@ -681,7 +686,7 @@ var ThinkingBlock = ({
         type: "button",
         "aria-expanded": !isCollapsed
       },
-      /* @__PURE__ */ import_react10.default.createElement("div", { className: "thinking-block__header-left" }, icon, /* @__PURE__ */ import_react10.default.createElement("span", { className: "thinking-block__title" }, displayTitle), isStreaming && /* @__PURE__ */ import_react10.default.createElement("span", { className: "thinking-block__streaming-indicator" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: "thinking-block__streaming-dot" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: "thinking-block__streaming-dot" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: "thinking-block__streaming-dot" }))),
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "thinking-block__header-left" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: `thinking-block__icon-wrapper ${isStreaming ? "thinking-block__icon-wrapper--spinning" : ""}` }, icon), /* @__PURE__ */ import_react10.default.createElement("span", { className: `thinking-block__title ${isStreaming ? "thinking-block__title--shimmer" : ""}` }, displayTitle), isCollapsed && content && /* @__PURE__ */ import_react10.default.createElement("span", { className: "thinking-block__preview" }, getPreview(content))),
       /* @__PURE__ */ import_react10.default.createElement(ChevronIcon, { isCollapsed })
     ),
     /* @__PURE__ */ import_react10.default.createElement("div", { className: "thinking-block__content-wrapper" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "thinking-block__content" }, content, isStreaming && /* @__PURE__ */ import_react10.default.createElement("span", { className: "thinking-block__cursor" }, "|")))
@@ -842,6 +847,11 @@ var ChatPanel = ({
   }, []);
   const [iframeUrl, setIframeUrl] = (0, import_react11.useState)(null);
   const responseAreaRef = (0, import_react11.useRef)(null);
+  const [userHasScrolled, setUserHasScrolled] = (0, import_react11.useState)(false);
+  const lastScrollTopRef = (0, import_react11.useRef)(0);
+  const prevResponseLengthRef = (0, import_react11.useRef)(0);
+  const userHasScrolledRef = (0, import_react11.useRef)(false);
+  const idleRef = (0, import_react11.useRef)(true);
   const THINKING_PATTERNS = (0, import_react11.useMemo)(
     () => ({
       thinking: /<thinking>([\s\S]*?)<\/thinking>/gi,
@@ -2174,32 +2184,67 @@ var ChatPanel = ({
       }
     }
   }, [initialPrompt]);
+  (0, import_react11.useEffect)(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+  (0, import_react11.useEffect)(() => {
+    idleRef.current = idle;
+  }, [idle]);
   (0, import_react11.useEffect)(() => {
     var _a2;
-    if (scrollToEnd) {
+    if (idle) return;
+    const currentResponseLength = response.length;
+    const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    prevResponseLengthRef.current = currentResponseLength;
+    const shouldAutoScroll = scrollToEnd || !userHasScrolledRef.current;
+    if (shouldAutoScroll && response && responseGotLonger) {
       if (window.top !== window.self) {
         const responseArea = responseAreaRef.current;
-        responseArea.scrollTo({
-          top: responseArea.scrollHeight,
-          behavior: "smooth"
-        });
+        if (responseArea) {
+          responseArea.scrollTo({
+            top: responseArea.scrollHeight,
+            behavior: "auto"
+          });
+        }
       } else {
-        (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "end" });
+        (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto", block: "end" });
       }
-    } else {
-      const responseArea = responseAreaRef.current;
-      if (responseArea) {
-        setHasScroll(hasVerticalScrollbar(responseArea));
-        const handleScroll = () => {
-          const isScrolledToBottom = responseArea.scrollHeight - responseArea.scrollTop === responseArea.clientHeight;
-          setIsAtBottom(isScrolledToBottom);
-        };
-        handleScroll();
-        responseArea.addEventListener("scroll", handleScroll);
-        return () => responseArea.removeEventListener("scroll", handleScroll);
+    }
+  }, [response, idle, scrollToEnd]);
+  (0, import_react11.useEffect)(() => {
+    const responseArea = responseAreaRef.current;
+    if (!responseArea) return;
+    const handleWheel = (e) => {
+      if (idleRef.current) return;
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
       }
+    };
+    const handleScroll = () => {
+      setHasScroll(hasVerticalScrollbar(responseArea));
+      const isScrolledToBottom = responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 5;
+      setIsAtBottom(isScrolledToBottom);
+      if (!idleRef.current && userHasScrolledRef.current) {
+        const isNearBottom = responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 50;
+        if (isNearBottom) {
+          setUserHasScrolled(false);
+        }
+      }
+    };
+    handleScroll();
+    responseArea.addEventListener("wheel", handleWheel, { passive: true });
+    responseArea.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      responseArea.removeEventListener("wheel", handleWheel);
+      responseArea.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    const responseArea = responseAreaRef.current;
+    if (responseArea) {
+      setHasScroll(hasVerticalScrollbar(responseArea));
     }
-  }, [response, history]);
+  }, [history]);
   (0, import_react11.useEffect)(() => {
     if (historyCallbackRef.current) {
       historyCallbackRef.current(history);
@@ -2322,6 +2367,8 @@ var ChatPanel = ({
     hasAutoCollapsedRef.current = false;
     prevBlockCountRef.current = 0;
     setError(null);
+    setUserHasScrolled(false);
+    prevResponseLengthRef.current = 0;
     setResponse("");
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
       const newId = (currentCustomer == null ? void 0 : currentCustomer.customer_id) && currentCustomer.customer_id !== "" && currentCustomer.customer_id !== (currentCustomer == null ? void 0 : currentCustomer.customer_user_email) ? currentCustomer.customer_id : emailInput;
@@ -4655,7 +4702,7 @@ var AIChatPanel = ({
       cancelAnimationFrame(scrollRAFRef.current);
     }
     if (!force && responseAreaRef.current) {
-      const scrollViewport = responseAreaRef.current.querySelector("[data-radix-scroll-area-viewport]");
+      const scrollViewport = responseAreaRef.current.querySelector(".ai-scroll-area-viewport");
       const scrollElement = scrollViewport || responseAreaRef.current;
       const scrollTop = scrollElement.scrollTop;
       const scrollHeight = scrollElement.scrollHeight;
@@ -4958,7 +5005,7 @@ var AIChatPanel = ({
     prevResponseLengthRef.current = currentResponseLength;
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      scrollToBottom(false);
+      scrollToBottom(true);
     }
   }, [response, idle]);
   const idleRef = (0, import_react14.useRef)(idle);
@@ -4966,21 +5013,30 @@ var AIChatPanel = ({
   (0, import_react14.useEffect)(() => {
     const scrollArea = responseAreaRef.current;
     if (!scrollArea) return;
-    const scrollViewport = scrollArea.querySelector("[data-radix-scroll-area-viewport]");
+    const scrollViewport = scrollArea.querySelector(".ai-scroll-area-viewport");
     const scrollElement = scrollViewport || scrollArea;
+    const handleWheel = (e) => {
+      if (idleRef.current) return;
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
     const handleScroll = () => {
-      if (idleRef.current || userHasScrolledRef.current) return;
-      const currentScrollTop = scrollElement.scrollTop;
+      if (idleRef.current || !userHasScrolledRef.current) return;
       const scrollHeight = scrollElement.scrollHeight;
+      const currentScrollTop = scrollElement.scrollTop;
       const clientHeight = scrollElement.clientHeight;
-      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 100;
-      if (currentScrollTop < lastScrollTopRef.current && !isNearBottom) {
-        setUserHasScrolled(true);
+      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 50;
+      if (isNearBottom) {
+        setUserHasScrolled(false);
       }
-      lastScrollTopRef.current = currentScrollTop;
     };
+    scrollElement.addEventListener("wheel", handleWheel, { passive: true });
     scrollElement.addEventListener("scroll", handleScroll, { passive: true });
-    return () => scrollElement.removeEventListener("scroll", handleScroll);
+    return () => {
+      scrollElement.removeEventListener("wheel", handleWheel);
+      scrollElement.removeEventListener("scroll", handleScroll);
+    };
   }, []);
   (0, import_react14.useEffect)(() => {
     setFollowOnQuestionsState(followOnQuestions);