@hef2024/llmasaservice-ui 0.23.2 → 0.24.1

package/dist/index.mjs

@@ -627,10 +627,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__ */ React10.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__ */ React10.createElement(
       "button",
@@ -640,7 +645,7 @@ var ThinkingBlock = ({
         type: "button",
         "aria-expanded": !isCollapsed
       },
-      /* @__PURE__ */ React10.createElement("div", { className: "thinking-block__header-left" }, icon, /* @__PURE__ */ React10.createElement("span", { className: "thinking-block__title" }, displayTitle), isStreaming && /* @__PURE__ */ React10.createElement("span", { className: "thinking-block__streaming-indicator" }, /* @__PURE__ */ React10.createElement("span", { className: "thinking-block__streaming-dot" }), /* @__PURE__ */ React10.createElement("span", { className: "thinking-block__streaming-dot" }), /* @__PURE__ */ React10.createElement("span", { className: "thinking-block__streaming-dot" }))),
+      /* @__PURE__ */ React10.createElement("div", { className: "thinking-block__header-left" }, /* @__PURE__ */ React10.createElement("span", { className: `thinking-block__icon-wrapper ${isStreaming ? "thinking-block__icon-wrapper--spinning" : ""}` }, icon), /* @__PURE__ */ React10.createElement("span", { className: `thinking-block__title ${isStreaming ? "thinking-block__title--shimmer" : ""}` }, displayTitle), isCollapsed && content && /* @__PURE__ */ React10.createElement("span", { className: "thinking-block__preview" }, getPreview(content))),
       /* @__PURE__ */ React10.createElement(ChevronIcon, { isCollapsed })
     ),
     /* @__PURE__ */ React10.createElement("div", { className: "thinking-block__content-wrapper" }, /* @__PURE__ */ React10.createElement("div", { className: "thinking-block__content" }, content, isStreaming && /* @__PURE__ */ React10.createElement("span", { className: "thinking-block__cursor" }, "|")))
@@ -801,6 +806,11 @@ var ChatPanel = ({
   }, []);
   const [iframeUrl, setIframeUrl] = useState5(null);
   const responseAreaRef = useRef5(null);
+  const [userHasScrolled, setUserHasScrolled] = useState5(false);
+  const lastScrollTopRef = useRef5(0);
+  const prevResponseLengthRef = useRef5(0);
+  const userHasScrolledRef = useRef5(false);
+  const idleRef = useRef5(true);
   const THINKING_PATTERNS = useMemo(
     () => ({
       thinking: /<thinking>([\s\S]*?)<\/thinking>/gi,
@@ -2133,32 +2143,67 @@ var ChatPanel = ({
       }
     }
   }, [initialPrompt]);
+  useEffect6(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+  useEffect6(() => {
+    idleRef.current = idle;
+  }, [idle]);
   useEffect6(() => {
     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]);
+  useEffect6(() => {
+    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);
+    };
+  }, []);
+  useEffect6(() => {
+    const responseArea = responseAreaRef.current;
+    if (responseArea) {
+      setHasScroll(hasVerticalScrollbar(responseArea));
     }
-  }, [response, history]);
+  }, [history]);
   useEffect6(() => {
     if (historyCallbackRef.current) {
       historyCallbackRef.current(history);
@@ -2281,6 +2326,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;
@@ -4620,7 +4667,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;
@@ -4923,7 +4970,7 @@ var AIChatPanel = ({
     prevResponseLengthRef.current = currentResponseLength;
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      scrollToBottom(false);
+      scrollToBottom(true);
     }
   }, [response, idle]);
   const idleRef = useRef6(idle);
@@ -4931,21 +4978,30 @@ var AIChatPanel = ({
   useEffect8(() => {
     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);
+    };
   }, []);
   useEffect8(() => {
     setFollowOnQuestionsState(followOnQuestions);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.23.2",
+  "version": "0.24.1",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIChatPanel.css

@@ -2499,6 +2499,23 @@
   gap: 8px;
 }
 
+/* Icon Wrapper - for spinning animation */
+.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); }
+}
+
 /* Icon */
 .thinking-block__icon {
   width: 16px;
@@ -2512,6 +2529,33 @@
   font-weight: 600;
   font-size: 13px;
   color: var(--thinking-block-text, var(--ai-chat-thinking-text));
+  position: relative;
+}
+
+/* Shimmer effect on title when streaming */
+.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;
+  }
 }
 
 /* Chevron (collapse indicator) */
@@ -2703,6 +2747,140 @@
   border-left-width: 3px;
 }
 
+/* ============================================================================
+   Collapsed State - Compact Line Style with Preview
+============================================================================ */
+
+.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;
+}
+
+/* Preview text in collapsed state */
+.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;
+}
+
+/* Hover state for collapsed - subtle highlight */
+.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);
+}
+
+/* ============================================================================
+   Expanded State - Subtle, Transient Content
+============================================================================ */
+
+.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;
+}
+
+/* Streaming state gets slightly more presence */
+.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);
+}
+
 /* Animation when block first appears */
 .thinking-block {
   animation: thinkingBlockAppear 0.2s ease-out;

package/src/AIChatPanel.tsx

@@ -1585,7 +1585,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Check if we should scroll - only if user is near bottom or force is true
     if (!force && responseAreaRef.current) {
-      const scrollViewport = responseAreaRef.current.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+      const scrollViewport = responseAreaRef.current.querySelector('.ai-scroll-area-viewport') as HTMLElement;
       const scrollElement = scrollViewport || responseAreaRef.current;
       
       const scrollTop = scrollElement.scrollTop;
@@ -2038,8 +2038,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Only scroll if response actually grew - use refs to avoid unnecessary effect runs
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      // Use non-forced scroll - will only scroll if near bottom
-      scrollToBottom(false);
+      // Use forced scroll since userHasScrolled is our gatekeeper for user intent
+      // The isNearBottom check in scrollToBottom is for layout changes, not streaming
+      scrollToBottom(true);
     }
   }, [response, idle]); // ONLY response and idle - no other dependencies!
 
@@ -2047,39 +2048,48 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const idleRef = useRef(idle);
   idleRef.current = idle;
   
-  // Detect user scroll to disable auto-scroll
+  // Detect user scroll intent via wheel event (fires before scroll position changes)
   useEffect(() => {
     const scrollArea = responseAreaRef.current;
     if (!scrollArea) return;
 
     // Get the actual scrollable element (ScrollArea wraps a viewport)
-    const scrollViewport = scrollArea.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+    const scrollViewport = scrollArea.querySelector('.ai-scroll-area-viewport') as HTMLElement;
     const scrollElement = scrollViewport || scrollArea;
 
+    // Wheel event detects user intent immediately (before scroll position changes)
+    const handleWheel = (e: WheelEvent) => {
+      // Skip if not streaming
+      if (idleRef.current) return;
+
+      // deltaY < 0 means scrolling UP (toward top of document)
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
+
+    // Scroll event for detecting when user returns to bottom
     const handleScroll = () => {
-      // Skip if not streaming or already marked as user-scrolled
-      if (idleRef.current || userHasScrolledRef.current) return;
+      // Skip if not streaming or user hasn't scrolled up
+      if (idleRef.current || !userHasScrolledRef.current) return;
 
-      const currentScrollTop = scrollElement.scrollTop;
       const scrollHeight = scrollElement.scrollHeight;
+      const currentScrollTop = scrollElement.scrollTop;
       const clientHeight = scrollElement.clientHeight;
 
-      // If user scrolled UP (away from bottom), disable auto-scroll
-      // We consider "near bottom" as within 100px to account for smooth scrolling
-      const isNearBottom = scrollHeight - currentScrollTop - clientHeight < 100;
-      
-      // User scrolled up if:
-      // 1. They scrolled upward (currentScrollTop < lastScrollTopRef.current)
-      // 2. AND they're not near the bottom
-      if (currentScrollTop < lastScrollTopRef.current && !isNearBottom) {
-        setUserHasScrolled(true);
+      // Re-enable auto-scroll when user scrolls back near bottom
+      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);
+    };
   }, []); // Empty deps - handler uses refs to get current values
 
   // Update follow-on questions from props

package/src/ChatPanel.css

@@ -1359,6 +1359,23 @@ button[data-pending="true"]::after {
   gap: 8px;
 }
 
+/* Icon Wrapper - for spinning animation */
+.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); }
+}
+
 /* Icon */
 .thinking-block__icon {
   width: 16px;
@@ -1372,6 +1389,33 @@ button[data-pending="true"]::after {
   font-weight: 600;
   font-size: 13px;
   color: var(--thinking-block-text, var(--title-text-color));
+  position: relative;
+}
+
+/* Shimmer effect on title when streaming */
+.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;
+  }
 }
 
 /* Chevron (collapse indicator) */
@@ -1563,6 +1607,140 @@ button[data-pending="true"]::after {
   border-left-width: 3px;
 }
 
+/* ============================================================================
+   Collapsed State - Compact Line Style with Preview
+============================================================================ */
+
+.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;
+}
+
+/* Preview text in collapsed state */
+.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;
+}
+
+/* Hover state for collapsed - subtle highlight */
+.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);
+}
+
+/* ============================================================================
+   Expanded State - Subtle, Transient Content
+============================================================================ */
+
+.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;
+}
+
+/* Streaming state gets slightly more presence */
+.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);
+}
+
 /* Animation when block first appears */
 .thinking-block {
   animation: thinkingBlockAppear 0.2s ease-out;