npm - @budibase/frontend-core - Versions diffs - 3.34.1 → 3.34.3 - Mend

@budibase/frontend-core 3.34.1 → 3.34.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +4 -4
package/src/components/Chatbox/ChatConversationPanel.svelte +15 -44
package/src/components/Chatbox/ChatNavigationPanel.svelte +131 -10
package/src/components/Chatbox/ReasoningStatus.svelte +111 -0
package/src/components/Chatbox/index.svelte +167 -310

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.34.1",
+  "version": "3.34.3",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -11,11 +11,11 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ai-sdk/svelte": "^4.0.48",
+    "@ai-sdk/svelte": "^4.0.116",
     "@budibase/bbui": "*",
     "@budibase/shared-core": "*",
     "@budibase/types": "*",
-    "ai": "^6.0.3",
+    "ai": "^6.0.116",
     "dayjs": "^1.10.8",
     "lodash": "4.17.23",
     "shortid": "2.2.15",
@@ -24,5 +24,5 @@
   "devDependencies": {
     "vitest": "^3.2.4"
   },
-  "gitHead": "a55111838ecb57332a3e62f3d9f08c6084936d66"
+  "gitHead": "9c56751662ed542fe5398a29d207dd55198c9f83"
 }

package/src/components/Chatbox/ChatConversationPanel.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from "svelte"
-  import { Body, Button, Icon, ProgressCircle } from "@budibase/bbui"
+  import { Body, Icon } from "@budibase/bbui"
   import type { ChatConversation, DraftChatConversation } from "@budibase/types"
   import Chatbox from "./index.svelte"
@@ -21,7 +21,6 @@
   }
   export let selectedAgentId: string | null = null
-  export let selectedAgentName: string = ""
   export let enabledAgentList: EnabledAgentListItem[] = []
   export let conversationStarters: { prompt: string }[] = []
   export let agentAvailability: AgentAvailability = "ready"
@@ -29,14 +28,12 @@
   export let chat: ChatConversationLike
   export let loading: boolean = false
   export let suppressAgentPicker: boolean = false
-  export let deletingChat: boolean = false
   export let workspaceId: string
   export let initialPrompt: string = ""
   export let userName: string = ""
   const dispatch = createEventDispatcher<{
     chatSaved: { chatId?: string; chat: ChatConversationLike }
-    deleteChat: undefined
     agentSelected: { agentId: string }
     startChat: { agentId: string; prompt: string }
   }>()
@@ -83,10 +80,6 @@
   $: readOnlyReason = getReadOnlyReason(agentAvailability)
-  const deleteChat = () => {
-    dispatch("deleteChat")
-  }
   const selectAgent = (agentId: string) => {
     dispatch("agentSelected", { agentId })
   }
@@ -122,32 +115,13 @@
 <div class="chat-wrapper">
   {#if selectedAgentId}
-    <div class="chat-header">
-      <div class="chat-header-agent">
-        <Body size="S">
-          {selectedAgentName || (loading ? "" : "Unknown agent")}
-        </Body>
+    {#if hasChatId(chat)}
+      <div class="chat-header">
+        <div class="chat-header-title">
+          <Body size="S">{chat.title || "Untitled Chat"}</Body>
+        </div>
       </div>
-      {#if hasChatId(chat)}
-        <Button
-          quiet
-          warning
-          disabled={deletingChat || loading}
-          on:click={deleteChat}
-        >
-          <span class="delete-button-content">
-            {#if deletingChat}
-              <ProgressCircle size="S" />
-              Deleting...
-            {:else}
-              <Icon name="trash" size="S" />
-              Delete chat
-            {/if}
-          </span>
-        </Button>
-      {/if}
-    </div>
+    {/if}
     <Chatbox
       bind:chat
@@ -161,7 +135,7 @@
   {:else if !suppressAgentPicker}
     <div class="chat-empty">
       <div class="chat-empty-greeting">
-        <Body size="XL" weight="600" serif>
+        <Body size="XL" weight="600">
           {greetingText}
         </Body>
       </div>
@@ -247,12 +221,15 @@
     border-bottom: var(--border-light);
   }
-  .chat-header-agent {
-    display: flex;
-    align-items: center;
+  .chat-header-title {
+    min-width: 0;
+    flex: 1 1 auto;
   }
-  .chat-header-agent :global(p) {
+  .chat-header-title :global(p) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-size: 14px;
     line-height: 17px;
     letter-spacing: 0;
@@ -260,12 +237,6 @@
     color: var(--spectrum-alias-text-color);
   }
-  .delete-button-content {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-  }
   .chat-empty {
     flex: 1 1 auto;
     display: flex;

package/src/components/Chatbox/ChatNavigationPanel.svelte CHANGED Viewed

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Body, Icon } from "@budibase/bbui"
+  import { ActionMenu, Body, Icon, MenuItem } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   type EnabledAgentListItem = {
@@ -15,17 +15,29 @@
     title?: string
   }
+  type ConversationWithId = ConversationListItem & {
+    _id: string
+  }
   export let enabledAgentList: EnabledAgentListItem[] = []
   export let conversationHistory: ConversationListItem[] = []
   export let selectedConversationId: string | undefined
+  export let selectedAgentName: string | undefined
   export let hideAgents = false
+  export let deletingChat = false
   $: defaultAgent =
     enabledAgentList.find(agent => agent.isDefault) || enabledAgentList[0]
+  $: conversationsWithId = conversationHistory.filter(
+    (conversation): conversation is ConversationWithId =>
+      Boolean(conversation._id)
+  )
   const dispatch = createEventDispatcher<{
     agentSelected: { agentId: string }
     conversationSelected: { conversationId: string }
+    conversationDeleted: { conversationId: string }
   }>()
   const selectAgent = (agentId: string) => {
@@ -35,10 +47,20 @@
   const selectConversation = (conversationId: string) => {
     dispatch("conversationSelected", { conversationId })
   }
+  const deleteConversation = (conversationId: string) => {
+    dispatch("conversationDeleted", { conversationId })
+  }
 </script>
 <div class="chat-nav-shell">
   <div class="chat-nav-content">
+    {#if selectedAgentName}
+      <div class="list-section current-agent-section">
+        <div class="current-agent-name">{selectedAgentName}</div>
+      </div>
+    {/if}
     {#if defaultAgent?.agentId}
       <div class="list-section">
         <button
@@ -78,17 +100,47 @@
     <div class="list-section">
       <div class="list-title">Recent Chats</div>
-      {#if conversationHistory.length}
-        {#each conversationHistory as conversation}
-          {#if conversation._id}
+      {#if conversationsWithId.length}
+        {#each conversationsWithId as conversation (conversation._id)}
+          <div
+            class="conversation-row"
+            class:selected={selectedConversationId === conversation._id}
+          >
             <button
-              class="list-item list-item-button"
-              class:selected={selectedConversationId === conversation._id}
-              on:click={() => selectConversation(conversation._id!)}
+              class="list-item list-item-button conversation-button"
+              on:click={() => selectConversation(conversation._id)}
             >
-              {conversation.title || "Untitled Chat"}
+              <span class="conversation-title">
+                {conversation.title || "Untitled Chat"}
+              </span>
             </button>
-          {/if}
+            <ActionMenu align="right" disabled={deletingChat}>
+              <button
+                slot="control"
+                class="conversation-actions"
+                type="button"
+                aria-label={`Open actions for ${
+                  conversation.title || "Untitled Chat"
+                }`}
+              >
+                <Icon size="S" name="dots-three" />
+              </button>
+              <MenuItem
+                on:click={() => selectConversation(conversation._id)}
+                icon="chat-circle"
+              >
+                View chat
+              </MenuItem>
+              <MenuItem
+                on:click={() => deleteConversation(conversation._id)}
+                icon="trash"
+                disabled={deletingChat}
+              >
+                {deletingChat ? "Deleting..." : "Delete chat"}
+              </MenuItem>
+            </ActionMenu>
+          </div>
         {/each}
       {:else}
         <Body size="XS" color="var(--spectrum-global-color-gray-500)">
@@ -126,6 +178,17 @@
     padding-top: 0;
   }
+  .current-agent-section {
+    padding-bottom: var(--spacing-m);
+  }
+  .current-agent-name {
+    font-size: 14px;
+    line-height: 17px;
+    color: var(--spectrum-global-color-gray-800);
+    padding: var(--spacing-xs) 0;
+  }
   .new-chat {
     display: flex;
     align-items: center;
@@ -176,6 +239,59 @@
     text-overflow: ellipsis;
   }
+  .conversation-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xxs);
+    min-width: 0;
+  }
+  .conversation-button {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .conversation-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .conversation-actions {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--spectrum-global-color-gray-600);
+    cursor: pointer;
+    flex: 0 0 auto;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity 120ms ease,
+      color 120ms ease;
+  }
+  .conversation-row:hover .conversation-actions,
+  .conversation-row:focus-within .conversation-actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .conversation-actions:hover,
+  .conversation-actions:focus-visible {
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .conversation-actions:disabled {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
   .list-item-icon {
     display: inline-flex;
     align-items: center;
@@ -190,11 +306,16 @@
     color: var(--spectrum-global-color-gray-900);
   }
-  .list-item.selected {
+  .list-item.selected,
+  .conversation-row.selected .list-item {
     color: var(--spectrum-global-color-gray-900);
     font-weight: 600;
   }
+  .conversation-row.selected .conversation-actions {
+    color: var(--spectrum-global-color-gray-900);
+  }
   .list-title {
     font-size: 14px;
     line-height: 17px;

package/src/components/Chatbox/ReasoningStatus.svelte ADDED Viewed

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { Icon } from "@budibase/bbui"
+  interface Props {
+    thinking?: boolean
+    label?: string
+    interactive?: boolean
+    expanded?: boolean
+    content?: string
+    ontoggle?: () => void
+  }
+  let {
+    thinking = false,
+    label = "Thought",
+    interactive = false,
+    expanded = false,
+    content = "",
+    ontoggle,
+  }: Props = $props()
+  const handleToggle = () => {
+    if (!interactive) {
+      return
+    }
+    ontoggle?.()
+  }
+</script>
+<div class="reasoning-part">
+  <button
+    class="reasoning-toggle"
+    class:reasoning-toggle-static={!interactive}
+    type="button"
+    onclick={handleToggle}
+    aria-disabled={!interactive}
+    tabindex={interactive ? undefined : -1}
+  >
+    <span class="reasoning-icon" class:shimmer={thinking}>
+      <Icon
+        name="brain"
+        size="M"
+        color="var(--spectrum-global-color-gray-600)"
+      />
+    </span>
+    <span class="reasoning-label" class:shimmer={thinking}>{label}</span>
+  </button>
+  {#if expanded && content}
+    <div class="reasoning-content">{content}</div>
+  {/if}
+</div>
+<style>
+  .reasoning-part {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .reasoning-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  .reasoning-toggle-static {
+    cursor: default;
+    pointer-events: none;
+  }
+  .reasoning-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .reasoning-label {
+    font-size: 13px;
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .reasoning-label.shimmer,
+  .reasoning-icon.shimmer {
+    animation: shimmer 2s ease-in-out infinite;
+  }
+  .reasoning-content {
+    font-size: 13px;
+    color: var(--spectrum-global-color-gray-600);
+    font-style: italic;
+    line-height: 1.4;
+  }
+  @keyframes shimmer {
+    0%,
+    100% {
+      opacity: 0.6;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+</style>

package/src/components/Chatbox/index.svelte CHANGED Viewed

@@ -17,6 +17,7 @@
   import { createAPIClient } from "@budibase/frontend-core"
   import { Chat } from "@ai-sdk/svelte"
   import { formatToolName } from "../../utils/aiTools"
+  import ReasoningStatus from "./ReasoningStatus.svelte"
   import {
     DefaultChatTransport,
     isTextUIPart,
@@ -72,35 +73,12 @@
   let expandedTools = $state<Record<string, boolean>>({})
   let inputValue = $state("")
   let lastInitialPrompt = $state("")
-  let reasoningTimers = $state<Record<string, number>>({})
   let isPreparingResponse = $state(false)
-  let isHoldingFirstResponse = $state(false)
-  let firstResponseHoldTimer: ReturnType<typeof setTimeout> | undefined
-  const MIN_FIRST_RESPONSE_LOADING_MS = 1000
-  const clearFirstResponseHold = () => {
-    if (firstResponseHoldTimer) {
-      clearTimeout(firstResponseHoldTimer)
-      firstResponseHoldTimer = undefined
-    }
-    isHoldingFirstResponse = false
-  }
   const resetPendingResponse = () => {
-    clearFirstResponseHold()
     isPreparingResponse = false
   }
-  const holdFirstResponse = () => {
-    clearFirstResponseHold()
-    isHoldingFirstResponse = true
-    firstResponseHoldTimer = setTimeout(() => {
-      isHoldingFirstResponse = false
-      firstResponseHoldTimer = undefined
-    }, MIN_FIRST_RESPONSE_LOADING_MS)
-  }
   const getReasoningText = (message: UIMessage<AgentMessageMetadata>) =>
     (message.parts ?? [])
       .filter(isReasoningUIPart)
@@ -112,6 +90,26 @@
       part => isReasoningUIPart(part) && part.state === "streaming"
     )
+  const hasVisibleAssistantContent = (
+    message: UIMessage<AgentMessageMetadata>
+  ) => {
+    if (getReasoningText(message).trim()) {
+      return true
+    }
+    if (
+      (message.parts ?? []).some(
+        part =>
+          (isTextUIPart(part) && part.text.trim().length > 0) ||
+          isToolUIPart(part)
+      )
+    ) {
+      return true
+    }
+    return Boolean(message.metadata?.ragSources?.length)
+  }
   const hasToolError = (message: UIMessage<AgentMessageMetadata>) =>
     (message.parts ?? []).some(
       part => isToolUIPart(part) && part.state === "output-error"
@@ -138,54 +136,6 @@
     return displayName
   }
-  $effect(() => {
-    const interval = setInterval(() => {
-      let updated = false
-      const newTimers = { ...reasoningTimers }
-      for (const message of messages) {
-        if (message.role !== "assistant") continue
-        const createdAt = message.metadata?.createdAt
-        const completedAt = message.metadata?.completedAt
-        const id = `${message.id}-reasoning`
-        if (!createdAt) continue
-        if (completedAt) {
-          const finalElapsed = (completedAt - createdAt) / 1000
-          if (newTimers[id] !== finalElapsed) {
-            newTimers[id] = finalElapsed
-            updated = true
-          }
-          continue
-        }
-        const toolError = hasToolError(message)
-        if (toolError) {
-          if (newTimers[id] == null) {
-            newTimers[id] = (Date.now() - createdAt) / 1000
-            updated = true
-          }
-          continue
-        }
-        if (isReasoningStreaming(message)) {
-          const newElapsed = (Date.now() - createdAt) / 1000
-          if (newTimers[id] !== newElapsed) {
-            newTimers[id] = newElapsed
-            updated = true
-          }
-        }
-      }
-      if (updated) {
-        reasoningTimers = newTimers
-      }
-    }, 100)
-    return () => clearInterval(interval)
-  })
   const PREVIEW_CHAT_APP_ID = "agent-preview"
   let resolvedChatAppId = $state<string | undefined>()
@@ -281,28 +231,19 @@
   })
   let messages = $derived(chatInstance.messages)
-  let lastVisibleMessage = $derived(
-    isHoldingFirstResponse
-      ? messages.findLast(message => message.role !== "assistant")
-      : messages[messages.length - 1]
+  let lastMessage = $derived(messages[messages.length - 1])
+  let lastAssistantMessage = $derived(
+    messages.findLast(message => message.role === "assistant")
   )
   let isBusy = $derived(
     chatInstance.status === "streaming" || chatInstance.status === "submitted"
   )
-  let isRequestPending = $derived(
-    isPreparingResponse || isHoldingFirstResponse || isBusy
-  )
+  let isRequestPending = $derived(isPreparingResponse || isBusy)
   let showPendingAssistantState = $derived(
-    isPreparingResponse ||
-      ((isBusy || isHoldingFirstResponse) &&
-        lastVisibleMessage?.role === "user")
+    isPreparingResponse || (isBusy && lastMessage?.role === "user")
   )
   let canStart = $derived(inputValue.trim().length > 0)
-  let hasMessages = $derived(
-    messages.some(
-      message => !isHoldingFirstResponse || message.role !== "assistant"
-    )
-  )
+  let hasMessages = $derived(messages.length > 0)
   let showConversationStarters = $derived(
     !isRequestPending &&
       !hasMessages &&
@@ -415,11 +356,7 @@
       notifications.error(message)
     }
-    const isFirstMessage = !messages.length
     isPreparingResponse = true
-    if (isFirstMessage) {
-      holdFirstResponse()
-    }
     const chatAppIdFromEnsure = await ensureChatApp()
@@ -575,186 +512,165 @@
         <div class="message user">
           <MarkdownViewer value={getUserMessageText(message)} />
         </div>
-      {:else if message.role === "assistant" && !isHoldingFirstResponse}
+      {:else if message.role === "assistant"}
         {@const reasoningText = getReasoningText(message)}
         {@const reasoningId = `${message.id}-reasoning`}
+        {@const pendingAssistant =
+          isBusy &&
+          lastAssistantMessage?.id === message.id &&
+          !hasVisibleAssistantContent(message)}
         {@const toolError = hasToolError(message)}
         {@const messageError = getMessageError(message)}
         {@const reasoningStreaming = isReasoningStreaming(message)}
         {@const isThinking =
-          reasoningStreaming &&
+          (reasoningStreaming || pendingAssistant) &&
           !toolError &&
           !messageError &&
           !message.metadata?.completedAt}
-        <div class="message assistant">
-          {#if reasoningText}
-            <div class="reasoning-part">
-              <button
-                class="reasoning-toggle"
-                type="button"
-                onclick={() =>
+        {#if hasVisibleAssistantContent(message) || pendingAssistant}
+          <div class="message assistant">
+            {#if reasoningText || pendingAssistant}
+              <ReasoningStatus
+                thinking={isThinking}
+                label={isThinking ? "Thinking" : "Thought"}
+                interactive={!!reasoningText}
+                expanded={Boolean(expandedTools[reasoningId])}
+                content={reasoningText}
+                ontoggle={() =>
                   (expandedTools = {
                     ...expandedTools,
                     [reasoningId]: !expandedTools[reasoningId],
                   })}
-              >
-                <span class="reasoning-icon" class:shimmer={isThinking}>
-                  <Icon
-                    name="brain"
-                    size="M"
-                    color="var(--spectrum-global-color-gray-600)"
-                  />
-                </span>
-                <span class="reasoning-label" class:shimmer={isThinking}>
-                  {isThinking ? "Thinking" : "Thought for"}
-                  {#if reasoningTimers[reasoningId]}
-                    <span class="reasoning-timer"
-                      >{reasoningTimers[reasoningId].toFixed(1)}s</span
-                    >
-                  {/if}
-                </span>
-              </button>
-              {#if expandedTools[reasoningId]}
-                <div class="reasoning-content">{reasoningText}</div>
-              {/if}
-            </div>
-          {/if}
-          {#each message.parts ?? [] as part, partIndex}
-            {#if isTextUIPart(part)}
-              <MarkdownViewer value={part.text} />
-            {:else if isToolUIPart(part)}
-              {@const rawToolName = getToolName(part)}
-              {@const displayToolName = formatToolName(
-                rawToolName,
-                getToolDisplayName(message, rawToolName)
-              )}
-              {@const toolId = `${message.id}-${rawToolName}-${partIndex}`}
-              {@const isRunning =
-                part.state === "input-streaming" ||
-                part.state === "input-available"}
-              {@const isSuccess = part.state === "output-available"}
-              {@const isError = part.state === "output-error"}
-              <div class="tool-part" class:tool-running={isRunning}>
-                <button
-                  class="tool-header"
-                  class:tool-header-expanded={expandedTools[toolId]}
-                  type="button"
-                  onclick={() => toggleTool(toolId)}
-                >
-                  <span
-                    class="tool-chevron"
-                    class:expanded={expandedTools[toolId]}
+              />
+            {/if}
+            {#each message.parts ?? [] as part, partIndex}
+              {#if isTextUIPart(part)}
+                <MarkdownViewer value={part.text} />
+              {:else if isToolUIPart(part)}
+                {@const rawToolName = getToolName(part)}
+                {@const displayToolName = formatToolName(
+                  rawToolName,
+                  getToolDisplayName(message, rawToolName)
+                )}
+                {@const toolId = `${message.id}-${rawToolName}-${partIndex}`}
+                {@const isRunning =
+                  part.state === "input-streaming" ||
+                  part.state === "input-available"}
+                {@const isSuccess = part.state === "output-available"}
+                {@const isError = part.state === "output-error"}
+                <div class="tool-part" class:tool-running={isRunning}>
+                  <button
+                    class="tool-header"
+                    class:tool-header-expanded={expandedTools[toolId]}
+                    type="button"
+                    onclick={() => toggleTool(toolId)}
                   >
-                    <span class="tool-chevron-icon tool-chevron-icon-default">
-                      <Icon
-                        name="wrench"
-                        size="M"
-                        weight="regular"
-                        color="var(--spectrum-global-color-gray-600)"
-                      />
-                    </span>
-                    <span class="tool-chevron-icon tool-chevron-icon-expanded">
-                      <Icon
-                        name="minus"
-                        size="M"
-                        weight="regular"
-                        color="var(--spectrum-global-color-gray-600)"
-                      />
-                    </span>
-                  </span>
-                  <span class="tool-call-label">Tool call</span>
-                  <div class="tool-name-wrapper">
-                    <span class="tool-name-primary"
-                      >{displayToolName.primary}</span
+                    <span
+                      class="tool-chevron"
+                      class:expanded={expandedTools[toolId]}
                     >
-                  </div>
-                  {#if isRunning || isError || isSuccess}
-                    <span class="tool-status">
-                      {#if isRunning}
-                        <ProgressCircle size="S" />
-                      {:else if isError}
+                      <span class="tool-chevron-icon tool-chevron-icon-default">
                         <Icon
-                          name="x"
-                          size="S"
-                          color="var(--spectrum-global-color-red-600)"
+                          name="wrench"
+                          size="M"
+                          weight="regular"
+                          color="var(--spectrum-global-color-gray-600)"
                         />
-                      {:else if isSuccess}
+                      </span>
+                      <span
+                        class="tool-chevron-icon tool-chevron-icon-expanded"
+                      >
                         <Icon
-                          name="check"
-                          size="S"
-                          color="var(--spectrum-global-color-green-600)"
+                          name="minus"
+                          size="M"
+                          weight="regular"
+                          color="var(--spectrum-global-color-gray-600)"
                         />
-                      {/if}
+                      </span>
                     </span>
-                  {/if}
-                </button>
-                {#if expandedTools[toolId]}
-                  <div class="tool-details">
-                    {#if part.input}
-                      <div class="tool-section">
-                        <div class="tool-section-label">Input</div>
-                        <pre class="tool-section-content">{formatToolOutput(
-                            part.input
-                          )}</pre>
-                      </div>
-                    {/if}
-                    {#if isSuccess && part.output}
-                      <div class="tool-section">
-                        <div class="tool-section-label">Output</div>
-                        <pre class="tool-section-content">{formatToolOutput(
-                            part.output
-                          )}</pre>
-                      </div>
-                    {:else if isError && part.errorText}
-                      <div class="tool-section tool-error">
-                        <div class="tool-section-label">Error</div>
-                        <pre
-                          class="tool-section-content error-content">{part.errorText}</pre>
-                      </div>
+                    <span class="tool-call-label">Tool call</span>
+                    <div class="tool-name-wrapper">
+                      <span class="tool-name-primary"
+                        >{displayToolName.primary}</span
+                      >
+                    </div>
+                    {#if isRunning || isError || isSuccess}
+                      <span class="tool-status">
+                        {#if isRunning}
+                          <ProgressCircle size="S" />
+                        {:else if isError}
+                          <Icon
+                            name="x"
+                            size="S"
+                            color="var(--spectrum-global-color-red-600)"
+                          />
+                        {:else if isSuccess}
+                          <Icon
+                            name="check"
+                            size="S"
+                            color="var(--spectrum-global-color-green-600)"
+                          />
+                        {/if}
+                      </span>
                     {/if}
-                  </div>
-                {/if}
+                  </button>
+                  {#if expandedTools[toolId]}
+                    <div class="tool-details">
+                      {#if part.input}
+                        <div class="tool-section">
+                          <div class="tool-section-label">Input</div>
+                          <pre class="tool-section-content">{formatToolOutput(
+                              part.input
+                            )}</pre>
+                        </div>
+                      {/if}
+                      {#if isSuccess && part.output}
+                        <div class="tool-section">
+                          <div class="tool-section-label">Output</div>
+                          <pre class="tool-section-content">{formatToolOutput(
+                              part.output
+                            )}</pre>
+                        </div>
+                      {:else if isError && part.errorText}
+                        <div class="tool-section tool-error">
+                          <div class="tool-section-label">Error</div>
+                          <pre
+                            class="tool-section-content error-content">{part.errorText}</pre>
+                        </div>
+                      {/if}
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+            {/each}
+            {#if message.metadata?.ragSources?.length}
+              <div class="sources">
+                <div class="sources-title">Sources</div>
+                <ul>
+                  {#each message.metadata.ragSources as source (source.sourceId)}
+                    <li class="source-item">
+                      <span class="source-name"
+                        >{source.filename || source.sourceId}</span
+                      >
+                      {#if source.chunkCount > 0}
+                        <span class="source-count"
+                          >({source.chunkCount} chunk{source.chunkCount === 1
+                            ? ""
+                            : "s"})</span
+                        >
+                      {/if}
+                    </li>
+                  {/each}
+                </ul>
               </div>
             {/if}
-          {/each}
-          {#if message.metadata?.ragSources?.length}
-            <div class="sources">
-              <div class="sources-title">Sources</div>
-              <ul>
-                {#each message.metadata.ragSources as source (source.sourceId)}
-                  <li class="source-item">
-                    <span class="source-name"
-                      >{source.filename || source.sourceId}</span
-                    >
-                    {#if source.chunkCount > 0}
-                      <span class="source-count"
-                        >({source.chunkCount} chunk{source.chunkCount === 1
-                          ? ""
-                          : "s"})</span
-                      >
-                    {/if}
-                  </li>
-                {/each}
-              </ul>
-            </div>
-          {/if}
-        </div>
+          </div>
+        {/if}
       {/if}
     {/each}
     {#if showPendingAssistantState}
       <div class="message assistant assistant-loading" aria-live="polite">
-        <div class="reasoning-part">
-          <button class="reasoning-toggle" type="button" disabled>
-            <span class="reasoning-icon shimmer">
-              <Icon
-                name="brain"
-                size="M"
-                color="var(--spectrum-global-color-gray-600)"
-              />
-            </span>
-            <span class="reasoning-label shimmer">Thinking</span>
-          </button>
-        </div>
+        <ReasoningStatus thinking={true} label="Thinking" />
       </div>
     {/if}
   </div>
@@ -806,6 +722,14 @@
     flex-direction: column;
     overflow-y: auto;
     min-height: 0;
+    font-family: var(--chat-font-sans, var(--font-sans));
+    --font-serif: var(--chat-font-sans, var(--font-sans));
+    --font-accent: var(--chat-font-sans, var(--font-sans));
+    --spectrum-alias-body-text-font-family: var(
+      --chat-font-sans,
+      var(--font-sans)
+    );
+    --spectrum-global-font-family-base: var(--chat-font-sans, var(--font-sans));
   }
   .chatbox {
     display: flex;
@@ -904,14 +828,6 @@
     max-width: 100%;
   }
-  .assistant-loading {
-    min-height: 24px;
-  }
-  .assistant-loading .reasoning-toggle {
-    cursor: default;
-  }
   .input-wrapper {
     position: sticky;
     bottom: 0;
@@ -1182,65 +1098,6 @@
     color: var(--spectrum-global-color-red-700);
   }
-  /* Reasoning parts styling */
-  .reasoning-part {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .reasoning-toggle {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 0;
-    margin: 0;
-    background: none;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-  }
-  .reasoning-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-  .reasoning-label {
-    font-size: 13px;
-    color: var(--spectrum-global-color-gray-600);
-  }
-  .reasoning-timer {
-    font-size: 12px;
-    color: var(--spectrum-global-color-gray-600);
-    font-weight: 400;
-  }
-  .reasoning-label.shimmer,
-  .reasoning-icon.shimmer {
-    animation: shimmer 2s ease-in-out infinite;
-  }
-  .reasoning-content {
-    font-size: 13px;
-    color: var(--spectrum-global-color-gray-600);
-    font-style: italic;
-    line-height: 1.4;
-  }
-  @keyframes shimmer {
-    0%,
-    100% {
-      opacity: 0.6;
-    }
-    50% {
-      opacity: 1;
-    }
-  }
   .sources {
     margin-top: var(--spacing-m);
     padding-top: var(--spacing-s);