@budibase/frontend-core 3.25.2 → 3.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.25.2",
+  "version": "3.25.4",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -9,6 +9,7 @@
     "check:types": "yarn svelte-check"
   },
   "dependencies": {
+    "@ai-sdk/svelte": "^4.0.48",
     "@budibase/bbui": "*",
     "@budibase/shared-core": "*",
     "@budibase/types": "*",
@@ -18,5 +19,5 @@
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "f65a21f6595ff1a6d7b94d3f3ee9187185cc89a8"
+  "gitHead": "4a51aa9f4675ffa6555788aeaf6c31b522a952b3"
 }

package/src/components/Chatbox/index.svelte

@@ -1,52 +1,147 @@
 <script lang="ts">
-  import { MarkdownViewer, notifications } from "@budibase/bbui"
+  import {
+    MarkdownViewer,
+    notifications,
+    Icon,
+    ProgressCircle,
+  } from "@budibase/bbui"
   import type {
     ChatConversation,
     DraftChatConversation,
     AgentMessageMetadata,
-    ChatConversationRequest,
   } from "@budibase/types"
   import { Header } from "@budibase/shared-core"
   import BBAI from "../../icons/BBAI.svelte"
   import { tick } from "svelte"
-  import { onDestroy } from "svelte"
-  import { onMount } from "svelte"
-  import { createEventDispatcher } from "svelte"
   import { createAPIClient } from "@budibase/frontend-core"
-  import { v4 as uuidv4 } from "uuid"
-  import type { UIMessage } from "ai"
-
-  export let workspaceId: string
-  export let API = createAPIClient({
-    attachHeaders: headers => {
-      if (workspaceId) {
-        headers[Header.APP_ID] = workspaceId
-      }
-    },
-  })
+  import { Chat } from "@ai-sdk/svelte"
+  import {
+    DefaultChatTransport,
+    isTextUIPart,
+    isToolUIPart,
+    isReasoningUIPart,
+    getToolName,
+    type UIMessage,
+  } from "ai"
+
   type ChatConversationLike = ChatConversation | DraftChatConversation
 
-  export let chat: ChatConversationLike
-  export let loading: boolean = false
-  export let persistConversation: boolean = true
+  interface Props {
+    workspaceId: string
+    chat: ChatConversationLike
+    persistConversation?: boolean
+    onchatsaved?: (_event: {
+      detail: { chatId?: string; chat: ChatConversationLike }
+    }) => void
+  }
+
+  let {
+    workspaceId,
+    chat = $bindable(),
+    persistConversation = true,
+    onchatsaved,
+  }: Props = $props()
+
+  let API = $state(
+    createAPIClient({
+      attachHeaders: headers => {
+        if (workspaceId) {
+          headers[Header.APP_ID] = workspaceId
+        }
+      },
+    })
+  )
+
+  let chatAreaElement = $state<HTMLDivElement>()
+  let textareaElement = $state<HTMLTextAreaElement>()
+  let expandedTools = $state<Record<string, boolean>>({})
+  let inputValue = $state("")
+
+  let resolvedChatAppId = $state<string | undefined>()
+  let resolvedConversationId = $state<string | undefined>()
+
+  const chatInstance = new Chat<UIMessage<AgentMessageMetadata>>({
+    transport: new DefaultChatTransport({
+      headers: () => ({ [Header.APP_ID]: workspaceId }),
+      prepareSendMessagesRequest: ({ messages }) => {
+        const chatAppId = resolvedChatAppId || chat?.chatAppId
+        const conversationId = resolvedConversationId || chat?._id || "new"
+        return {
+          api: `/api/chatapps/${chatAppId}/conversations/${conversationId}/stream`,
+          body: {
+            _id: resolvedConversationId || chat?._id,
+            chatAppId,
+            agentId: chat?.agentId,
+            transient: !persistConversation,
+            title: chat?.title,
+            messages,
+          },
+        }
+      },
+    }),
+    messages: chat?.messages || [],
+    onFinish: async () => {
+      if (persistConversation && !chat._id && chat.chatAppId) {
+        try {
+          const history = await API.fetchChatHistory(chat.chatAppId)
+          const msgs = chatInstance.messages
+          const lastMessageId = msgs[msgs.length - 1]?.id
+          const savedConversation =
+            history?.find(convo =>
+              convo.messages.some(message => message.id === lastMessageId)
+            ) || history?.[0]
+
+          if (savedConversation) {
+            chat = { ...chat, ...savedConversation }
+            resolvedConversationId = savedConversation._id
+          }
+        } catch (historyError) {
+          console.error(historyError)
+        }
+      }
 
-  const dispatch = createEventDispatcher<{
-    chatSaved: { chatId?: string; chat: ChatConversationLike }
-  }>()
+      chat = { ...chat, messages: chatInstance.messages }
+      onchatsaved?.({ detail: { chatId: chat._id, chat } })
 
-  let inputValue = ""
-  let chatAreaElement: HTMLDivElement
-  let observer: MutationObserver
-  let textareaElement: HTMLTextAreaElement
-  let lastFocusedChatId: string | undefined
-  let lastFocusedNewChat: ChatConversationLike | undefined
+      await tick()
+      textareaElement?.focus()
+    },
+    onError: error => {
+      console.error(error)
+      notifications.error(error.message || "Failed to send message")
+    },
+  })
+
+  let messages = $derived(chatInstance.messages)
+  let isBusy = $derived(
+    chatInstance.status === "streaming" || chatInstance.status === "submitted"
+  )
+
+  let lastChatId = $state<string | undefined>(chat?._id)
+  $effect(() => {
+    if (chat?._id !== lastChatId) {
+      lastChatId = chat?._id
+      chatInstance.messages = chat?.messages || []
+      expandedTools = {}
+    }
+  })
 
-  $: if (chat?.messages?.length) {
-    scrollToBottom()
+  const scrollToBottom = async () => {
+    await tick()
+    if (chatAreaElement) {
+      chatAreaElement.scrollTop = chatAreaElement.scrollHeight
+    }
   }
 
+  $effect(() => {
+    if (messages?.length) {
+      scrollToBottom()
+    }
+  })
+
   const ensureChatApp = async (): Promise<string | undefined> => {
     if (chat?.chatAppId) {
+      resolvedChatAppId = chat.chatAppId
       return chat.chatAppId
     }
     try {
@@ -66,6 +161,7 @@
             ? { agentId: fallbackAgentId }
             : {}),
         }
+        resolvedChatAppId = chatApp._id
         return chatApp._id
       }
     } catch (err) {
@@ -74,28 +170,21 @@
     return undefined
   }
 
-  async function scrollToBottom() {
-    await tick()
-    if (chatAreaElement) {
-      chatAreaElement.scrollTop = chatAreaElement.scrollHeight
-    }
-  }
-
-  async function handleKeyDown(event: any) {
+  const handleKeyDown = async (event: KeyboardEvent) => {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault()
-      await prompt()
+      await sendMessage()
     }
   }
 
-  async function prompt() {
-    const resolvedChatAppId = await ensureChatApp()
+  const sendMessage = async () => {
+    const chatAppIdFromEnsure = await ensureChatApp()
 
     if (!chat) {
       chat = { title: "", messages: [], chatAppId: "", agentId: "" }
     }
 
-    const chatAppId = chat.chatAppId || resolvedChatAppId
+    const chatAppId = chat.chatAppId || chatAppIdFromEnsure
     const agentId = chat.agentId
 
     if (!chatAppId) {
@@ -108,6 +197,8 @@
       return
     }
 
+    resolvedChatAppId = chatAppId
+
     if (
       persistConversation &&
       !chat._id &&
@@ -115,229 +206,163 @@
     ) {
       try {
         const newChat = await API.createChatConversation(
-          {
-            chatAppId,
-            agentId,
-            title: chat.title,
-          },
+          { chatAppId, agentId, title: chat.title },
           workspaceId
         )
-
-        chat = {
-          ...chat,
-          ...newChat,
-          chatAppId,
-        }
-      } catch (err: any) {
+        chat = { ...chat, ...newChat, chatAppId }
+        resolvedConversationId = newChat._id
+      } catch (err: unknown) {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : "Could not start a new chat conversation"
         console.error(err)
-        notifications.error(
-          err?.message || "Could not start a new chat conversation"
-        )
+        notifications.error(errorMessage)
         return
       }
+    } else if (chat._id) {
+      resolvedConversationId = chat._id
     }
 
-    const userMessage: UIMessage<AgentMessageMetadata> = {
-      id: uuidv4(),
-      role: "user",
-      parts: [{ type: "text", text: inputValue }],
-    }
+    const text = inputValue.trim()
+    if (!text) return
 
-    const updatedChat: ChatConversationLike = {
-      ...chat,
-      chatAppId: chat.chatAppId,
-      transient: !persistConversation,
-      messages: [...chat.messages, userMessage],
-    }
+    inputValue = ""
+    chatInstance.sendMessage({ text })
+  }
 
-    chat = updatedChat
-    await scrollToBottom()
+  const toggleTool = (toolId: string) => {
+    expandedTools = { ...expandedTools, [toolId]: !expandedTools[toolId] }
+  }
 
-    inputValue = ""
-    loading = true
+  const formatToolOutput = (output: unknown): string =>
+    typeof output === "string" ? output : JSON.stringify(output, null, 2)
 
-    try {
-      const messageStream = await API.streamChatConversation(
-        updatedChat as ChatConversationRequest,
-        workspaceId
-      )
-
-      let streamedMessages = [...updatedChat.messages]
-      let transientAssistantId = uuidv4()
-
-      for await (const message of messageStream) {
-        const normalizedMessage =
-          !persistConversation && message?.role === "assistant" && !message?.id
-            ? {
-                ...message,
-                id: transientAssistantId,
-              }
-            : message
-
-        if (normalizedMessage?.id) {
-          const existingIndex = streamedMessages.findIndex(
-            existing => existing.id === normalizedMessage.id
-          )
-          if (existingIndex !== -1) {
-            streamedMessages = streamedMessages.map((existing, index) =>
-              index === existingIndex ? normalizedMessage : existing
-            )
-          } else {
-            streamedMessages = [...streamedMessages, normalizedMessage]
-          }
-        } else if (normalizedMessage?.role === "assistant") {
-          const lastIndex = [...streamedMessages]
-            .reverse()
-            .findIndex(existing => existing.role === "assistant")
-          if (lastIndex !== -1) {
-            const targetIndex = streamedMessages.length - 1 - lastIndex
-            streamedMessages = streamedMessages.map((existing, index) =>
-              index === targetIndex ? normalizedMessage : existing
-            )
-          } else {
-            streamedMessages = [...streamedMessages, normalizedMessage]
-          }
-        } else {
-          streamedMessages = [...streamedMessages, normalizedMessage]
-        }
-        chat = {
-          ...updatedChat,
-          messages: streamedMessages,
-        }
-        scrollToBottom()
-      }
+  const getUserMessageText = (
+    message: UIMessage<AgentMessageMetadata>
+  ): string =>
+    message.parts
+      ?.filter(isTextUIPart)
+      .map(p => p.text)
+      .join("") || "[Empty message]"
 
-      // When a chat is created for the first time the server generates the ID.
-      // If we don't have it locally yet, retrieve the saved conversation so
-      // subsequent prompts append to the same document instead of creating a new one.
-      if (persistConversation && !chat._id && chat.chatAppId) {
-        try {
-          const history = await API.fetchChatHistory(chat.chatAppId)
-          const lastMessageId = chat.messages[chat.messages.length - 1]?.id
-          const savedConversation =
-            history?.find(convo =>
-              convo.messages.some(message => message.id === lastMessageId)
-            ) || history?.[0]
-          if (savedConversation) {
-            chat = savedConversation
-          }
-        } catch (historyError) {
-          console.error(historyError)
-        }
-      }
+  let mounted = $state(false)
 
-      loading = false
-      dispatch("chatSaved", { chatId: chat._id, chat })
-    } catch (err: any) {
-      console.error(err)
-      notifications.error(err.message)
-      loading = false
+  $effect(() => {
+    const currentChatId = chat?._id
+    if (currentChatId) {
+      resolvedConversationId = currentChatId
     }
+  })
 
-    await tick()
-    if (textareaElement) {
-      textareaElement.focus()
+  $effect(() => {
+    if (!mounted) {
+      mounted = true
+      ensureChatApp()
+      tick().then(() => {
+        textareaElement?.focus()
+      })
     }
-  }
+  })
 
-  onMount(async () => {
-    await ensureChatApp()
+  $effect(() => {
+    if (!chatAreaElement) return
 
-    // Ensure we always autoscroll to reveal new messages
-    observer = new MutationObserver(async () => {
-      await tick()
-      if (chatAreaElement) {
-        chatAreaElement.scrollTop = chatAreaElement.scrollHeight
-      }
+    const obs = new MutationObserver(scrollToBottom)
+    obs.observe(chatAreaElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
     })
 
-    if (chatAreaElement) {
-      observer.observe(chatAreaElement, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-      })
-    }
-
-    await tick()
-    if (textareaElement) {
-      textareaElement.focus()
+    return () => {
+      obs.disconnect()
     }
   })
-
-  $: {
-    const currentId = chat?._id
-    const isNewChat =
-      !currentId && (!chat?.messages || chat.messages.length === 0)
-    const shouldFocus =
-      textareaElement &&
-      ((currentId && currentId !== lastFocusedChatId) ||
-        (isNewChat && chat && chat !== lastFocusedNewChat))
-
-    if (shouldFocus) {
-      tick().then(() => textareaElement?.focus())
-      lastFocusedChatId = currentId
-      lastFocusedNewChat = isNewChat ? chat : undefined
-    }
-  }
-
-  onDestroy(() => {
-    observer.disconnect()
-  })
 </script>
 
 <div class="chat-area" bind:this={chatAreaElement}>
   <div class="chatbox">
-    {#each chat.messages as message}
+    {#each messages as message (message.id)}
       {#if message.role === "user"}
         <div class="message user">
-          <MarkdownViewer
-            value={message.parts && message.parts.length > 0
-              ? message.parts
-                  .filter(part => part.type === "text")
-                  .map(part => (part.type === "text" ? part.text : ""))
-                  .join("")
-              : "[Empty message]"}
-          />
+          <MarkdownViewer value={getUserMessageText(message)} />
         </div>
       {:else if message.role === "assistant"}
         <div class="message assistant">
-          {#each message.parts || [] as part}
-            {#if part.type === "text"}
-              <MarkdownViewer value={part.text || ""} />
-            {:else if part.type === "reasoning"}
+          {#each message.parts || [] as part, partIndex (partIndex)}
+            {#if isTextUIPart(part)}
+              <MarkdownViewer value={part.text} />
+            {:else if isReasoningUIPart(part)}
               <div class="reasoning-part">
                 <div class="reasoning-label">Reasoning</div>
-                <div class="reasoning-content">{part.text || ""}</div>
+                <div class="reasoning-content">{part.text}</div>
               </div>
-            {:else if part.type?.startsWith("tool-") || part.type === "dynamic-tool"}
-              {@const toolPart = part}
-              <div class="tool-part">
-                <div class="tool-header">
-                  <span class="tool-icon">🔧</span>
-                  <span class="tool-name"
-                    >{("toolName" in toolPart && toolPart.toolName) ||
-                      "Tool"}</span
+            {:else if isToolUIPart(part)}
+              {@const toolId = `${message.id}-${getToolName(part)}-${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"
+                  type="button"
+                  onclick={() => toggleTool(toolId)}
+                >
+                  <span
+                    class="tool-chevron"
+                    class:expanded={expandedTools[toolId]}
                   >
-                  {#if "state" in toolPart}
-                    {#if toolPart.state === "output-available"}
-                      <span class="tool-status success">✓</span>
-                    {:else if toolPart.state === "output-error"}
-                      <span class="tool-status error">✗</span>
-                    {:else if toolPart.state === "input-streaming"}
-                      <span class="tool-status pending">...</span>
-                    {:else if toolPart.state === "input-available"}
-                      <span class="tool-status pending">...</span>
+                    <Icon name="caret-right" size="XS" />
+                  </span>
+                  <span class="tool-icon">
+                    <Icon name="wrench" size="S" />
+                  </span>
+                  <span class="tool-name">{getToolName(part)}</span>
+                  <span class="tool-status">
+                    {#if isRunning}
+                      <ProgressCircle size="S" />
+                    {:else if isSuccess}
+                      <Icon
+                        name="check"
+                        size="S"
+                        color="var(--spectrum-global-color-green-600)"
+                      />
+                    {:else if isError}
+                      <Icon
+                        name="x"
+                        size="S"
+                        color="var(--spectrum-global-color-red-600)"
+                      />
+                    {/if}
+                  </span>
+                </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}
-                  {/if}
-                </div>
-                {#if "state" in toolPart && toolPart.state === "output-available" && "output" in toolPart && toolPart.output}
-                  <div class="tool-output">
-                    <div class="tool-output-label">Output:</div>
-                    <pre class="tool-output-content">{typeof toolPart.output ===
-                      "string"
-                        ? toolPart.output
-                        : JSON.stringify(toolPart.output, null, 2)}</pre>
                   </div>
                 {/if}
               </div>
@@ -367,7 +392,7 @@
         </div>
       {/if}
     {/each}
-    {#if loading}
+    {#if isBusy}
       <div class="message system">
         <BBAI size="48px" animate />
       </div>
@@ -379,9 +404,9 @@
       bind:value={inputValue}
       bind:this={textareaElement}
       class="input spectrum-Textfield-input"
-      on:keydown={handleKeyDown}
+      onkeydown={handleKeyDown}
       placeholder="Ask anything"
-      disabled={loading}
+      disabled={isBusy}
     ></textarea>
   </div>
 </div>
@@ -480,19 +505,49 @@
     background-color: var(--grey-2);
     border: 1px solid var(--grey-3);
     border-radius: 8px;
+    transition: border-color 0.2s ease;
+  }
+
+  .tool-part.tool-running {
+    border-color: var(--spectrum-global-color-static-seafoam-600);
   }
 
   .tool-header {
     display: flex;
     align-items: center;
     gap: var(--spacing-s);
-    margin-bottom: var(--spacing-s);
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
     font-weight: 600;
     font-size: 14px;
+    text-align: left;
+  }
+
+  .tool-header:hover {
+    opacity: 0.8;
+  }
+
+  .tool-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s ease;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .tool-chevron.expanded {
+    transform: rotate(90deg);
   }
 
   .tool-icon {
-    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--spectrum-global-color-static-seafoam-700);
   }
 
   .tool-name {
@@ -502,24 +557,33 @@
 
   .tool-status {
     margin-left: auto;
-    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  .tool-status.success {
-    color: var(--spectrum-global-color-green-600);
+  .tool-details {
+    margin-top: var(--spacing-m);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
   }
 
-  .tool-status.error {
-    color: var(--spectrum-global-color-red-600);
+  .tool-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
   }
 
-  .tool-status.pending {
+  .tool-section-label {
+    font-size: 11px;
+    font-weight: 600;
     color: var(--spectrum-global-color-gray-600);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
   }
 
-  .tool-output,
-  .tool-output-label,
-  .tool-output-content {
+  .tool-section-content {
     background-color: var(--background);
     border: 1px solid var(--grey-3);
     border-radius: 4px;
@@ -529,6 +593,18 @@
     overflow-x: auto;
     white-space: pre-wrap;
     word-break: break-word;
+    margin: 0;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .tool-error .tool-section-label {
+    color: var(--spectrum-global-color-red-600);
+  }
+
+  .error-content {
+    border-color: var(--spectrum-global-color-red-400);
+    color: var(--spectrum-global-color-red-700);
   }
 
   /* Reasoning parts styling */