feat: add thinking/reasoning display UI

js/src/chat/ChatContainer.tsx

@@ -13,6 +13,7 @@ import { MessageErrorBoundary } from "./MessageErrorBoundary"
 import { ChatInput, type ChatInputHandle } from "./ChatInput"
 import { ScrollToBottomButton } from "./ScrollToBottomButton"
 import { ExternalLinkDialogComponent } from "./ExternalLinkDialog"
+import { ChatScrollContext } from "./context"
 import type { ChatMessageData } from "./state"
 import type { ChatTransport } from "../transport/types"
 
@@ -55,7 +56,7 @@ export const ChatContainer = forwardRef<
   const pendingUrlRef = useRef<string | null>(null)
   pendingUrlRef.current = pendingUrl
 
-  const { scrollRef, contentRef, isAtBottom, scrollToBottom } =
+  const { scrollRef, contentRef, isAtBottom, scrollToBottom, stopScroll } =
     useStickToBottom({ resize: "smooth" })
 
   useImperativeHandle(ref, () => ({
@@ -176,15 +177,17 @@ export const ChatContainer = forwardRef<
             onClick={onMessagesClick}
             onKeyDown={onSuggestionKeydown}
           >
-            <ChatMessages messages={messages} iconAssistant={iconAssistant} />
-            {streamingMessage && (
-              <MessageErrorBoundary key={streamingMessage.id}>
-                <ChatMessage
-                  message={streamingMessage}
-                  iconAssistant={iconAssistant}
-                />
-              </MessageErrorBoundary>
-            )}
+            <ChatScrollContext.Provider value={stopScroll}>
+              <ChatMessages messages={messages} iconAssistant={iconAssistant} />
+              {streamingMessage && (
+                <MessageErrorBoundary key={streamingMessage.id}>
+                  <ChatMessage
+                    message={streamingMessage}
+                    iconAssistant={iconAssistant}
+                  />
+                </MessageErrorBoundary>
+              )}
+            </ChatScrollContext.Provider>
           </div>
         </div>
         <ScrollToBottomButton

js/src/chat/ChatMessage.tsx

@@ -1,6 +1,7 @@
 import { memo } from "react"
 import type { ChatMessageData } from "./state"
 import { MarkdownContent } from "../markdown/MarkdownContent"
+import { ThinkingDisplay } from "./ThinkingDisplay"
 import { robot, dots_fade } from "../utils/icons"
 import { chatTagToComponentMap } from "./chatTagToComponentMap"
 
@@ -14,21 +15,19 @@ export const ChatMessage = memo(function ChatMessage({
   iconAssistant,
 }: ChatMessageProps) {
   const isUser = message.role === "user"
-  const isEmpty = message.content.trim() === ""
+  const hasContent =
+    message.content.trim() !== "" ||
+    message.blocks.some((b) => b.type === "thinking")
 
   let iconHtml: string | undefined
   if (isUser) {
     iconHtml = message.icon || undefined
   } else {
-    iconHtml = isEmpty ? dots_fade : (message.icon ?? iconAssistant ?? robot)
+    iconHtml = hasContent ? (message.icon ?? iconAssistant ?? robot) : dots_fade
   }
 
   const roleClass = isUser ? "shiny-chat-user-message" : "shiny-chat-message"
 
-  const segments = message.segments ?? [
-    { content: message.content, contentType: message.contentType },
-  ]
-
   return (
     <div className={roleClass}>
       {iconHtml && (
@@ -38,18 +37,28 @@ export const ChatMessage = memo(function ChatMessage({
         />
       )}
       <div className="shiny-chat-message-content">
-        {segments.map((seg, i, arr) => {
+        {message.blocks.map((block, i) => {
+          if (block.type === "thinking") {
+            return (
+              <ThinkingDisplay
+                key={i}
+                thinking={block}
+                messageId={`${message.id}-${i}`}
+              />
+            )
+          }
+          const isLast = i === message.blocks.length - 1
           const el = (
             <MarkdownContent
               key={i}
-              content={seg.content}
-              contentType={seg.contentType}
+              content={block.content}
+              contentType={block.contentType}
               role={message.role}
-              streaming={message.streaming && i === arr.length - 1}
+              streaming={message.streaming && isLast}
               tagToComponentMap={chatTagToComponentMap}
             />
           )
-          if (seg.contentType === "text") {
+          if (block.contentType === "text") {
             return (
               <div key={i} className="content-type-text">
                 {el}

js/src/chat/ThinkingDisplay.tsx

@@ -0,0 +1,272 @@
+import {
+  useState,
+  useEffect,
+  useRef,
+  memo,
+  useCallback,
+  useLayoutEffect,
+} from "react"
+import { useStickToBottom } from "use-stick-to-bottom"
+import type { ThinkingBlock } from "./state"
+import { MarkdownContent } from "../markdown/MarkdownContent"
+import { chatTagToComponentMap } from "./chatTagToComponentMap"
+import { useChatStopScroll } from "./context"
+
+interface ThinkingDisplayProps {
+  thinking: ThinkingBlock
+  messageId: string
+}
+
+const TOPIC_MIN_DISPLAY_MS = 2500
+
+function useDisplayedTopic(topic: string | null | undefined): string | null {
+  const [displayed, setDisplayed] = useState<string | null>(null)
+  const lastSetAt = useRef(0)
+  const pendingTopic = useRef<string | null>(null)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (!topic) return
+
+    const now = Date.now()
+    const elapsed = now - lastSetAt.current
+
+    if (elapsed >= TOPIC_MIN_DISPLAY_MS || !displayed) {
+      setDisplayed(topic)
+      lastSetAt.current = now
+      pendingTopic.current = null
+    } else {
+      pendingTopic.current = topic
+      if (!timerRef.current) {
+        const remaining = TOPIC_MIN_DISPLAY_MS - elapsed
+        timerRef.current = setTimeout(() => {
+          timerRef.current = null
+          if (pendingTopic.current) {
+            setDisplayed(pendingTopic.current)
+            lastSetAt.current = Date.now()
+            pendingTopic.current = null
+          }
+        }, remaining)
+      }
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+        timerRef.current = null
+      }
+    }
+  }, [topic, displayed])
+
+  return displayed
+}
+
+const FADE_DURATION_MS = 200
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+  )
+  useEffect(() => {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const handler = (e: MediaQueryListEvent) => setReduced(e.matches)
+    mql.addEventListener("change", handler)
+    return () => mql.removeEventListener("change", handler)
+  }, [])
+  return reduced
+}
+
+function useFadingText(text: string): { visible: string; fading: boolean } {
+  const reducedMotion = usePrefersReducedMotion()
+  const [visible, setVisible] = useState(text)
+  const [fading, setFading] = useState(false)
+  const pendingText = useRef(text)
+
+  useLayoutEffect(() => {
+    if (text === visible) return
+    pendingText.current = text
+
+    if (reducedMotion) {
+      setVisible(text)
+      setFading(false)
+      return
+    }
+
+    setFading(true)
+    const timer = setTimeout(() => {
+      setVisible(pendingText.current)
+      setFading(false)
+    }, FADE_DURATION_MS)
+
+    return () => clearTimeout(timer)
+  }, [text, visible, reducedMotion])
+
+  return { visible, fading }
+}
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      className="shinychat-thinking-chevron"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      aria-hidden="true"
+      {...(expanded ? { "data-expanded": "" } : {})}
+    >
+      <path
+        d="M4.5 2.5L8 6L4.5 9.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export const ThinkingDisplay = memo(function ThinkingDisplay({
+  thinking,
+  messageId,
+}: ThinkingDisplayProps) {
+  const [expanded, setExpanded] = useState(false)
+  const [userToggled, setUserToggled] = useState(false)
+  const prevStreamingRef = useRef(thinking.streaming)
+  const outerStopScroll = useChatStopScroll()
+
+  const {
+    scrollRef: innerScrollRef,
+    contentRef: innerContentRef,
+    scrollToBottom: innerScrollToBottom,
+  } = useStickToBottom({ resize: "smooth" })
+
+  // When the inner container transitions from non-overflowing to overflowing,
+  // kick stick-to-bottom into gear so it follows the stream.
+  const wasOverflowing = useRef(false)
+  useEffect(() => {
+    const el = innerScrollRef.current
+    if (!el || !expanded || !thinking.streaming) return
+    const isOverflowing = el.scrollHeight > el.clientHeight
+    if (isOverflowing && !wasOverflowing.current) {
+      innerScrollToBottom()
+    }
+    wasOverflowing.current = isOverflowing
+  }, [
+    thinking.content,
+    expanded,
+    thinking.streaming,
+    innerScrollToBottom,
+    innerScrollRef,
+  ])
+
+  const displayedTopic = useDisplayedTopic(
+    thinking.streaming ? thinking.topic : null,
+  )
+
+  // Auto-collapse when thinking completes (unless user has re-expanded after)
+  useEffect(() => {
+    if (prevStreamingRef.current && !thinking.streaming) {
+      if (!userToggled) {
+        const timer = setTimeout(() => setExpanded(false), 600)
+        return () => clearTimeout(timer)
+      }
+      prevStreamingRef.current = thinking.streaming
+    }
+    prevStreamingRef.current = thinking.streaming
+  }, [thinking.streaming, userToggled])
+
+  const handleToggle = useCallback(() => {
+    setExpanded((prev) => {
+      if (prev) {
+        outerStopScroll?.()
+      } else if (thinking.streaming) {
+        wasOverflowing.current = false
+        innerScrollToBottom()
+      }
+      return !prev
+    })
+    if (!thinking.streaming) {
+      setUserToggled(true)
+    }
+  }, [thinking.streaming, outerStopScroll, innerScrollToBottom])
+
+  const headerText = getHeaderText(thinking, displayedTopic)
+  const { visible: labelText, fading: labelFading } = useFadingText(headerText)
+
+  if (!thinking.streaming && !thinking.content.trim()) {
+    return null
+  }
+
+  return (
+    <div
+      className="shinychat-thinking"
+      data-streaming={thinking.streaming || undefined}
+    >
+      <button
+        id={`thinking-header-${messageId}`}
+        className="shinychat-thinking-header"
+        onClick={handleToggle}
+        aria-expanded={expanded}
+        aria-controls={`thinking-content-${messageId}`}
+      >
+        <ChevronIcon expanded={expanded} />
+        <span
+          className="shinychat-thinking-label"
+          data-fading={labelFading || undefined}
+        >
+          {labelText}
+        </span>
+        {thinking.streaming && (
+          <svg
+            className="shinychat-thinking-dot"
+            width="8"
+            height="8"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <circle cx="4" cy="4" r="4" />
+          </svg>
+        )}
+      </button>
+      <div
+        className="shinychat-thinking-content"
+        id={`thinking-content-${messageId}`}
+        role="region"
+        aria-labelledby={`thinking-header-${messageId}`}
+        aria-hidden={!expanded ? "true" : undefined}
+        inert={!expanded || undefined}
+        data-expanded={expanded || undefined}
+      >
+        <div className="shinychat-thinking-content-inner" ref={innerScrollRef}>
+          <div ref={innerContentRef}>
+            <MarkdownContent
+              content={thinking.content}
+              contentType="markdown"
+              role="assistant"
+              streaming={thinking.streaming}
+              tagToComponentMap={chatTagToComponentMap}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+function getHeaderText(
+  thinking: ThinkingBlock,
+  displayedTopic: string | null,
+): string {
+  if (thinking.streaming) {
+    return displayedTopic ?? "Thinking"
+  }
+  if (thinking.durationMs != null && thinking.durationMs >= 500) {
+    const seconds = Math.round(thinking.durationMs / 1000)
+    if (seconds < 1) return "Thought for less than a second"
+    return `Thought for ${seconds}s`
+  }
+  return "Thinking"
+}

js/src/chat/chat-entry.ts

@@ -31,6 +31,7 @@ function parseInitialMessages(container: HTMLElement): ChatMessageData[] {
       contentType,
       streaming: false,
       icon,
+      blocks: [{ type: "content", content, contentType }],
     })
   })