@budibase/frontend-core 3.32.6 → 3.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.32.6",
+  "version": "3.33.1",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -24,5 +24,5 @@
   "devDependencies": {
     "vitest": "^3.2.4"
   },
-  "gitHead": "f499dd1b20467f2fec0926d001b343d91ebdea96"
+  "gitHead": "7e37f4dca78aaab158a4fa07ba631720003da6b3"
 }

package/src/components/Chatbox/index.svelte

@@ -27,7 +27,6 @@
   } from "ai"
 
   type ChatConversationLike = ChatConversation | DraftChatConversation
-
   interface Props {
     workspaceId: string
     chat: ChatConversationLike
@@ -74,6 +73,33 @@
   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 ?? [])
@@ -94,6 +120,24 @@
   const getMessageError = (message: UIMessage<AgentMessageMetadata>) =>
     message.metadata?.error
 
+  const getToolDisplayName = (
+    message: UIMessage<AgentMessageMetadata>,
+    rawToolName: string
+  ) => {
+    const { metadata } = message
+    if (!metadata) {
+      return undefined
+    }
+
+    const toolDisplayNames = Reflect.get(metadata, "toolDisplayNames")
+    const displayName =
+      toolDisplayNames !== undefined
+        ? Reflect.get(toolDisplayNames, rawToolName)
+        : undefined
+
+    return displayName
+  }
+
   $effect(() => {
     const interval = setInterval(() => {
       let updated = false
@@ -153,7 +197,6 @@
     }
     inputValue = starterPrompt
     await sendMessage()
-    tick().then(() => textareaElement?.focus())
   }
 
   $effect(() => {
@@ -193,6 +236,8 @@
     }),
     messages: chat?.messages || [],
     onFinish: async () => {
+      isPreparingResponse = false
+
       if (persistConversation && !chat._id && chat.chatAppId) {
         try {
           const history = await API.fetchChatHistory(
@@ -217,11 +262,10 @@
 
       chat = { ...chat, messages: chatInstance.messages }
       onchatsaved?.({ detail: { chatId: chat._id, chat } })
-
-      await tick()
-      textareaElement?.focus()
     },
     onError: error => {
+      resetPendingResponse()
+
       console.error(error)
       let message = error.message || "Failed to send message"
       try {
@@ -237,13 +281,30 @@
   })
 
   let messages = $derived(chatInstance.messages)
+  let lastVisibleMessage = $derived(
+    isHoldingFirstResponse
+      ? messages.findLast(message => message.role !== "assistant")
+      : messages[messages.length - 1]
+  )
   let isBusy = $derived(
     chatInstance.status === "streaming" || chatInstance.status === "submitted"
   )
+  let isRequestPending = $derived(
+    isPreparingResponse || isHoldingFirstResponse || isBusy
+  )
+  let showPendingAssistantState = $derived(
+    isPreparingResponse ||
+      ((isBusy || isHoldingFirstResponse) &&
+        lastVisibleMessage?.role === "user")
+  )
   let canStart = $derived(inputValue.trim().length > 0)
-  let hasMessages = $derived(Boolean(messages?.length))
+  let hasMessages = $derived(
+    messages.some(
+      message => !isHoldingFirstResponse || message.role !== "assistant"
+    )
+  )
   let showConversationStarters = $derived(
-    !isBusy &&
+    !isRequestPending &&
       !hasMessages &&
       conversationStarters.length > 0 &&
       !isAgentPreviewChat &&
@@ -262,6 +323,9 @@
     if (chat?._id !== lastChatId) {
       lastChatId = chat?._id
       stableSessionId = createStableSessionId()
+      if (!isPreparingResponse) {
+        resetPendingResponse()
+      }
       chatInstance.messages = chat?.messages || []
       expandedTools = {}
     }
@@ -338,6 +402,25 @@
       return
     }
 
+    const text = inputValue.trim()
+    if (!text) {
+      return
+    }
+
+    const failToStartResponse = (message: string, error?: unknown) => {
+      resetPendingResponse()
+      if (error) {
+        console.error(error)
+      }
+      notifications.error(message)
+    }
+
+    const isFirstMessage = !messages.length
+    isPreparingResponse = true
+    if (isFirstMessage) {
+      holdFirstResponse()
+    }
+
     const chatAppIdFromEnsure = await ensureChatApp()
 
     if (!chat) {
@@ -348,12 +431,12 @@
     const agentId = chat.agentId
 
     if (!chatAppId) {
-      notifications.error("Chat app could not be created")
+      failToStartResponse("Chat app could not be created")
       return
     }
 
     if (!agentId) {
-      notifications.error("Agent is required to start a chat")
+      failToStartResponse("Agent is required to start a chat")
       return
     }
 
@@ -378,19 +461,16 @@
           err instanceof Error
             ? err.message
             : "Could not start a new chat conversation"
-        console.error(err)
-        notifications.error(errorMessage)
+        failToStartResponse(errorMessage, err)
         return
       }
     } else if (chat._id) {
       resolvedConversationId = chat._id
     }
 
-    const text = inputValue.trim()
-    if (!text) return
-
     inputValue = ""
     chatInstance.sendMessage({ text })
+    isPreparingResponse = false
   }
 
   const handlePromptAction = async () => {
@@ -429,14 +509,19 @@
     if (!mounted) {
       mounted = true
       ensureChatApp()
-      tick().then(() => {
-        if (!readOnly) {
-          textareaElement?.focus()
-        }
-      })
     }
   })
 
+  $effect(() => {
+    if (readOnly || isRequestPending) {
+      return
+    }
+
+    tick().then(() => {
+      textareaElement?.focus()
+    })
+  })
+
   $effect(() => {
     if (!chatAreaElement) return
 
@@ -470,7 +555,7 @@
           {/each}
         </div>
       </div>
-    {:else if !hasMessages}
+    {:else if !hasMessages && !isRequestPending}
       <div class="empty-state">
         <div class="empty-state-icon">
           <Icon
@@ -490,7 +575,7 @@
         <div class="message user">
           <MarkdownViewer value={getUserMessageText(message)} />
         </div>
-      {:else if message.role === "assistant"}
+      {:else if message.role === "assistant" && !isHoldingFirstResponse}
         {@const reasoningText = getReasoningText(message)}
         {@const reasoningId = `${message.id}-reasoning`}
         {@const toolError = hasToolError(message)}
@@ -541,7 +626,7 @@
               {@const rawToolName = getToolName(part)}
               {@const displayToolName = formatToolName(
                 rawToolName,
-                message.metadata?.toolDisplayNames?.[rawToolName]
+                getToolDisplayName(message, rawToolName)
               )}
               {@const toolId = `${message.id}-${rawToolName}-${partIndex}`}
               {@const isRunning =
@@ -582,11 +667,6 @@
                     <span class="tool-name-primary"
                       >{displayToolName.primary}</span
                     >
-                    {#if displayToolName.secondary}
-                      <span class="tool-name-secondary">
-                        {displayToolName.secondary}
-                      </span>
-                    {/if}
                   </div>
                   {#if isRunning || isError || isSuccess}
                     <span class="tool-status">
@@ -661,6 +741,22 @@
         </div>
       {/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>
+      </div>
+    {/if}
   </div>
 
   {#if readOnly}
@@ -680,18 +776,20 @@
           class="input spectrum-Textfield-input"
           onkeydown={handleKeyDown}
           placeholder="Ask..."
-          disabled={isBusy}
+          disabled={isRequestPending}
         ></textarea>
         <button
           type="button"
           class="prompt-action"
-          class:running={isBusy}
+          class:running={isRequestPending}
           onclick={handlePromptAction}
           aria-label={isBusy ? "Pause response" : "Start response"}
-          disabled={!isBusy && !canStart}
+          disabled={isPreparingResponse || (!isBusy && !canStart)}
         >
           {#if isBusy}
             <Icon name="stop" size="M" weight="fill" color="#ffffff" />
+          {:else if isPreparingResponse}
+            <ProgressCircle size="S" />
           {:else}
             <Icon name="arrow-up" size="M" weight="bold" color="#111111" />
           {/if}
@@ -806,6 +904,14 @@
     max-width: 100%;
   }
 
+  .assistant-loading {
+    min-height: 24px;
+  }
+
+  .assistant-loading .reasoning-toggle {
+    cursor: default;
+  }
+
   .input-wrapper {
     position: sticky;
     bottom: 0;
@@ -995,9 +1101,7 @@
 
   .tool-name-wrapper {
     display: flex;
-    flex-direction: column;
     align-items: flex-start;
-    gap: 2px;
     padding: 6px 8px;
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: 6px;
@@ -1010,12 +1114,6 @@
     line-height: 1.2;
   }
 
-  .tool-name-secondary {
-    font-size: 11px;
-    color: var(--spectrum-global-color-gray-600);
-    line-height: 1.2;
-  }
-
   .tool-status {
     margin-left: auto;
     display: flex;