@budibase/frontend-core 3.43.0 → 3.44.1

package/src/components/Chatbox/index.svelte

@@ -14,7 +14,7 @@
     EscalationContextDoc,
     EscalationRespondResult,
   } from "@budibase/types"
-  import { ESCALATE_TOOL_NAME, EscalateToolResultStatus } from "@budibase/types"
+  import { EscalateToolResultStatus } from "@budibase/types"
   import { Header } from "@budibase/shared-core"
   import { tick, untrack } from "svelte"
   import { createAPIClient } from "@budibase/frontend-core"
@@ -37,12 +37,6 @@
   interface Props {
     workspaceId: string
     chat: ChatConversationLike
-    persistConversation?: boolean
-    conversationStarters?: { prompt: string }[]
-    initialPrompt?: string
-    onchatsaved?: (event: {
-      detail: { chatId?: string; chat: ChatConversationLike }
-    }) => void
     // Fired when an escalation parks; the consumer polls the outcome and
     // injects it via appendAssistantMessage.
     onEscalationPending?: (detail: { escalationId: string }) => void
@@ -57,10 +51,7 @@
       escalationId: string,
       accepted: boolean
     ) => Promise<EscalationRespondResult | undefined>
-    isAgentPreviewChat?: boolean
     previewRoleId?: string
-    readOnly?: boolean
-    readOnlyReason?: "disabled" | "deleted" | "offline"
     promptHistory?: string[]
     onpromptsubmitted?: (prompt: string) => void
   }
@@ -68,18 +59,11 @@
   let {
     workspaceId,
     chat = $bindable(),
-    persistConversation = true,
-    conversationStarters = [],
-    initialPrompt = "",
-    onchatsaved,
     onEscalationPending,
     escalationState,
     showInlineApproval = false,
     onResolve,
-    isAgentPreviewChat = false,
     previewRoleId,
-    readOnly = false,
-    readOnlyReason,
     promptHistory = [],
     onpromptsubmitted,
   }: Props = $props()
@@ -108,13 +92,15 @@
   // The escalate part's input/output are loosely typed by the AI SDK, so the
   // casts live here rather than cluttering the template.
   const escalationCardProps = (part: { input?: unknown; output?: unknown }) => {
-    const output = part.output as { escalationId?: string } | undefined
+    const output = part.output as
+      | { escalationId?: string; title?: string; summary?: string }
+      | undefined
     const input = part.input as { title?: string; summary?: string } | undefined
     const escalationId = output?.escalationId
     return {
       escalationId,
-      title: input?.title,
-      summary: input?.summary,
+      title: output?.title ?? input?.title,
+      summary: output?.summary ?? input?.summary,
       resolution:
         (escalationId && escalationState?.[escalationId]?.resolution) ||
         "pending",
@@ -131,8 +117,7 @@
     })
   )
 
-  const createStableSessionId = () =>
-    isAgentPreviewChat ? `chat-preview:${Helpers.uuid()}` : Helpers.uuid()
+  const createStableSessionId = () => `chat-preview:${Helpers.uuid()}`
 
   let stableSessionId = $state(createStableSessionId())
   let chatAreaElement = $state<HTMLDivElement>()
@@ -141,7 +126,6 @@
   let reasoningTextByMessageId = $state<Record<string, string>>({})
   let inputValue = $state("")
   let promptHistoryIndex = $state<number | undefined>()
-  let lastInitialPrompt = $state("")
   let isPreparingResponse = $state(false)
   const resetPendingResponse = () => {
     isPreparingResponse = false
@@ -165,27 +149,15 @@
 
     try {
       const resolvedUrl =
-        !isAgentPreviewChat &&
-        chat?.chatAppId &&
-        chat?.agentId &&
-        selectedOperationId
+        chat?.agentId && selectedOperationId
           ? (
-              await API.fetchChatAppAgentFileUrl(
-                chat.chatAppId,
+              await API.fetchOperationFileUrl(
                 chat.agentId,
-                source.fileId,
-                selectedOperationId
+                selectedOperationId,
+                source.fileId
               )
             ).url
-          : isAgentPreviewChat && chat?.agentId && selectedOperationId
-            ? (
-                await API.fetchOperationFileUrl(
-                  chat.agentId,
-                  selectedOperationId,
-                  source.fileId
-                )
-              ).url
-            : undefined
+          : undefined
       if (!resolvedUrl) {
         notifications.error("Could not resolve source file URL")
         return
@@ -292,48 +264,21 @@
     return displayName
   }
 
-  const PREVIEW_CHAT_APP_ID = "agent-preview"
-
-  let resolvedChatAppId = $state<string | undefined>()
   let resolvedConversationId = $state<string | undefined>()
 
-  const applyConversationStarter = async (starterPrompt: string) => {
-    if (isBusy) {
-      return
-    }
-    inputValue = starterPrompt
-    await sendMessage()
-  }
-
-  $effect(() => {
-    if (!initialPrompt) {
-      lastInitialPrompt = ""
-      return
-    }
-
-    if (initialPrompt === lastInitialPrompt) {
-      return
-    }
-
-    lastInitialPrompt = initialPrompt
-    applyConversationStarter(initialPrompt)
-  })
-
   const chatInstance = new Chat<UIMessage<AgentMessageMetadata>>({
     transport: new DefaultChatTransport({
       headers: () => ({ [Header.WORKSPACE_ID]: workspaceId }),
       prepareSendMessagesRequest: ({ messages }) => {
-        const chatAppId = resolvedChatAppId || chat?.chatAppId
         const conversationId = resolvedConversationId || chat?._id || "new"
+        const agentId = chat?.agentId
         return {
-          api: `/api/chatapps/${chatAppId}/conversations/${conversationId}/stream`,
+          api: `/api/agents/${agentId}/conversations/${conversationId}/stream`,
           body: {
             _id: resolvedConversationId || chat?._id,
-            chatAppId,
-            agentId: chat?.agentId,
-            transient: !persistConversation,
-            isPreview: isAgentPreviewChat,
-            previewRoleId: isAgentPreviewChat ? previewRoleId : undefined,
+            agentId,
+            isPreview: true,
+            previewRoleId,
             sessionId: stableSessionId,
             title: chat?.title,
             messages,
@@ -344,31 +289,7 @@
     messages: chat?.messages || [],
     onFinish: async () => {
       isPreparingResponse = false
-
-      if (persistConversation && !chat._id && chat.chatAppId) {
-        try {
-          const history = await API.fetchChatHistory(
-            chat.chatAppId,
-            chat.agentId
-          )
-          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)
-        }
-      }
-
       chat = { ...chat, messages: chatInstance.messages }
-      onchatsaved?.({ detail: { chatId: chat._id, chat } })
     },
     onError: error => {
       resetPendingResponse()
@@ -398,11 +319,7 @@
     const ids: string[] = []
     for (const message of messages) {
       for (const part of message.parts ?? []) {
-        if (
-          !isToolUIPart(part) ||
-          getToolName(part) !== ESCALATE_TOOL_NAME ||
-          part.state !== "output-available"
-        ) {
+        if (!isToolUIPart(part) || part.state !== "output-available") {
           continue
         }
         const output = part.output as
@@ -451,20 +368,6 @@
   )
   let canStart = $derived(inputValue.trim().length > 0)
   let hasMessages = $derived(messages.length > 0)
-  let showConversationStarters = $derived(
-    !isRequestPending &&
-      !hasMessages &&
-      conversationStarters.length > 0 &&
-      !isAgentPreviewChat &&
-      !readOnly
-  )
-  let readOnlyMessage = $derived(
-    readOnlyReason === "deleted"
-      ? "This agent was deleted. Select another agent to resume chatting."
-      : readOnlyReason === "offline"
-        ? "This agent is no longer live. Make it live in Settings to resume chatting."
-        : "This agent is disabled. Enable it in Settings to resume chatting."
-  )
 
   let lastChatId = $state<string | undefined>(chat?._id)
   $effect(() => {
@@ -522,70 +425,22 @@
     }
   })
 
-  const ensureChatApp = async (): Promise<string | undefined> => {
-    if (chat?.chatAppId) {
-      resolvedChatAppId = chat.chatAppId
-      return chat.chatAppId
-    }
-
-    if (isAgentPreviewChat) {
-      resolvedChatAppId = PREVIEW_CHAT_APP_ID
-      if (chat) {
-        chat = { ...chat, chatAppId: PREVIEW_CHAT_APP_ID }
-      }
-      return PREVIEW_CHAT_APP_ID
-    }
-
-    try {
-      const chatApp = await API.fetchChatApp(workspaceId)
-      if (chatApp?._id) {
-        const baseChat = chat || {
-          title: "",
-          messages: [],
-          chatAppId: "",
-          agentId: "",
-        }
-        const fallbackAgentId =
-          chatApp.agents?.find(agent => agent.isEnabled && agent.isDefault)
-            ?.agentId || chatApp.agents?.find(agent => agent.isEnabled)?.agentId
-        chat = {
-          ...baseChat,
-          chatAppId: chatApp._id,
-          ...(fallbackAgentId && !baseChat.agentId
-            ? { agentId: fallbackAgentId }
-            : {}),
-        }
-        resolvedChatAppId = chatApp._id
-        return chatApp._id
-      }
-    } catch (err) {
-      console.error(err)
-    }
-    return undefined
-  }
-
   const handleKeyDown = async (event: KeyboardEvent) => {
-    if (readOnly) {
+    const navigationState = navigatePromptHistory({
+      key: event.key,
+      history: promptHistory,
+      inputValue,
+      index: promptHistoryIndex,
+    })
+    if (navigationState) {
+      event.preventDefault()
+      inputValue = navigationState.inputValue
+      promptHistoryIndex = navigationState.index
+      await tick()
+      textareaElement?.setSelectionRange(inputValue.length, inputValue.length)
       return
     }
 
-    if (isAgentPreviewChat) {
-      const navigationState = navigatePromptHistory({
-        key: event.key,
-        history: promptHistory,
-        inputValue,
-        index: promptHistoryIndex,
-      })
-      if (navigationState) {
-        event.preventDefault()
-        inputValue = navigationState.inputValue
-        promptHistoryIndex = navigationState.index
-        await tick()
-        textareaElement?.setSelectionRange(inputValue.length, inputValue.length)
-        return
-      }
-    }
-
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault()
       await sendMessage()
@@ -593,10 +448,6 @@
   }
 
   const sendMessage = async () => {
-    if (readOnly) {
-      return
-    }
-
     const text = inputValue.trim()
     if (!text) {
       return
@@ -612,52 +463,22 @@
 
     isPreparingResponse = true
 
-    const chatAppIdFromEnsure = await ensureChatApp()
-
     if (!chat) {
-      chat = { title: "", messages: [], chatAppId: "", agentId: "" }
+      chat = {
+        title: "",
+        messages: [],
+        agentId: "",
+      }
     }
 
-    const chatAppId = chat.chatAppId || chatAppIdFromEnsure
     const agentId = chat.agentId
 
-    if (!chatAppId) {
-      failToStartResponse("Chat app could not be created")
-      return
-    }
-
     if (!agentId) {
       failToStartResponse("Agent is required to start a chat")
       return
     }
 
-    resolvedChatAppId = chatAppId
-
-    if (isAgentPreviewChat) {
-      resolvedConversationId = chat._id
-    } else if (
-      persistConversation &&
-      !chat._id &&
-      (!chat.messages || chat.messages.length === 0)
-    ) {
-      try {
-        const newChat = await API.createChatConversation(
-          { chatAppId, agentId, title: chat.title },
-          workspaceId
-        )
-        chat = { ...chat, ...newChat, chatAppId }
-        resolvedConversationId = newChat._id
-      } catch (err: unknown) {
-        const errorMessage =
-          err instanceof Error
-            ? err.message
-            : "Could not start a new chat conversation"
-        failToStartResponse(errorMessage, err)
-        return
-      }
-    } else if (chat._id) {
-      resolvedConversationId = chat._id
-    }
+    resolvedConversationId = chat._id
 
     inputValue = ""
     promptHistoryIndex = undefined
@@ -689,8 +510,6 @@
       .map(p => p.text)
       .join("") || "[Empty message]"
 
-  let mounted = $state(false)
-
   $effect(() => {
     const currentChatId = chat?._id
     if (currentChatId) {
@@ -699,14 +518,7 @@
   })
 
   $effect(() => {
-    if (!mounted) {
-      mounted = true
-      ensureChatApp()
-    }
-  })
-
-  $effect(() => {
-    if (readOnly || isRequestPending) {
+    if (isRequestPending) {
       return
     }
 
@@ -733,22 +545,7 @@
 
 <div class="chat-area" bind:this={chatAreaElement}>
   <div class="chatbox">
-    {#if showConversationStarters}
-      <div class="starter-section">
-        <div class="starter-title">Conversation starters</div>
-        <div class="starter-grid">
-          {#each conversationStarters as starter, index (index)}
-            <button
-              type="button"
-              class="starter-card"
-              onclick={() => applyConversationStarter(starter.prompt)}
-            >
-              {starter.prompt}
-            </button>
-          {/each}
-        </div>
-      </div>
-    {:else if !hasMessages && !isRequestPending}
+    {#if !hasMessages && !isRequestPending}
       <div class="empty-state">
         <div class="empty-state-icon">
           <Icon
@@ -810,7 +607,7 @@
             {#each message.parts ?? [] as part, partIndex}
               {#if isTextUIPart(part)}
                 <MarkdownViewer value={part.text} />
-              {:else if isToolUIPart(part) && getToolName(part) === ESCALATE_TOOL_NAME && isRaisedEscalation(part.output)}
+              {:else if isToolUIPart(part) && isRaisedEscalation(part.output)}
                 {@const card = escalationCardProps(part)}
                 <EscalationCard
                   title={card.title}
@@ -967,48 +764,38 @@
     {/if}
   </div>
 
-  {#if readOnly}
-    <div class="input-wrapper">
-      <div class="read-only-notice">
-        <Body size="S" color="var(--spectrum-global-color-gray-700)">
-          {readOnlyMessage}
-        </Body>
-      </div>
+  <div class="input-wrapper">
+    <div class="input-container">
+      <textarea
+        bind:value={inputValue}
+        bind:this={textareaElement}
+        class="input spectrum-Textfield-input"
+        onkeydown={handleKeyDown}
+        oninput={() => (promptHistoryIndex = undefined)}
+        placeholder="Ask..."
+        disabled={isRequestPending}
+      ></textarea>
+      <button
+        type="button"
+        class="prompt-action"
+        class:running={isRequestPending}
+        onclick={handlePromptAction}
+        aria-label={isBusy ? "Pause response" : "Start response"}
+        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}
+      </button>
     </div>
-  {:else}
-    <div class="input-wrapper">
-      <div class="input-container">
-        <textarea
-          bind:value={inputValue}
-          bind:this={textareaElement}
-          class="input spectrum-Textfield-input"
-          onkeydown={handleKeyDown}
-          oninput={() => (promptHistoryIndex = undefined)}
-          placeholder="Ask..."
-          disabled={isRequestPending}
-        ></textarea>
-        <button
-          type="button"
-          class="prompt-action"
-          class:running={isRequestPending}
-          onclick={handlePromptAction}
-          aria-label={isBusy ? "Pause response" : "Start response"}
-          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}
-        </button>
-      </div>
-      <div class="input-footer">
-        <ContextUsage usage={lastAssistantUsage} />
-      </div>
+    <div class="input-footer">
+      <ContextUsage usage={lastAssistantUsage} />
     </div>
-  {/if}
+  </div>
 </div>
 
 <style>
@@ -1050,50 +837,6 @@
   .empty-state-icon {
     --size: 24px;
   }
-  .starter-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-xl);
-    margin: auto 0;
-  }
-
-  .starter-title {
-    font-size: 14px;
-    letter-spacing: 0;
-    color: var(--spectrum-global-color-gray-700);
-    text-align: center;
-  }
-
-  .starter-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: var(--spacing-m);
-    width: min(520px, 100%);
-    margin: 0 auto;
-  }
-
-  .starter-card {
-    border: 1px solid var(--spectrum-global-color-gray-200);
-    border-radius: 12px;
-    padding: var(--spacing-m);
-    background: var(--spectrum-global-color-gray-50);
-    color: var(--spectrum-global-color-gray-800);
-    font: inherit;
-    font-size: 14px;
-    line-height: 1.4;
-    text-align: center;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .starter-card:hover {
-    border-color: var(--spectrum-global-color-gray-300);
-    background: var(--spectrum-global-color-gray-100);
-  }
-
   .message {
     display: flex;
     flex-direction: column;
@@ -1141,14 +884,6 @@
     padding: 0 4px;
   }
 
-  .read-only-notice {
-    border: 1px solid var(--spectrum-global-color-gray-200);
-    border-radius: 10px;
-    padding: var(--spacing-m);
-    background-color: var(--spectrum-global-color-gray-50);
-    text-align: center;
-  }
-
   .input-container {
     position: relative;
     width: 100%;

package/src/components/index.ts

@@ -11,5 +11,3 @@ export { default as ChangePasswordModal } from "./ChangePasswordModal.svelte"
 export { default as ProfileModal } from "./ProfileModal.svelte"
 export { default as PasswordRepeatInput } from "./PasswordRepeatInput.svelte"
 export { default as Chatbox } from "./Chatbox/index.svelte"
-export { default as ChatNavigationPanel } from "./Chatbox/ChatNavigationPanel.svelte"
-export { default as ChatConversationPanel } from "./Chatbox/ChatConversationPanel.svelte"

package/src/utils/download.test.js

@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { downloadStream } from "./download.js"
+
+describe("downloadStream", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it("uses the filename from the Content-Disposition header", async () => {
+    const link = {
+      click: vi.fn(),
+      download: "",
+      href: "",
+    }
+    const createObjectURL = vi.fn(() => "blob:package")
+    const revokeObjectURL = vi.fn()
+    vi.stubGlobal("document", {
+      createElement: vi.fn(() => link),
+    })
+    vi.stubGlobal("URL", { createObjectURL, revokeObjectURL })
+
+    await downloadStream({
+      blob: vi.fn().mockResolvedValue(new Blob(["package"])),
+      headers: new Headers({
+        "Content-Disposition":
+          'attachment; filename="budibase-teams-support-agent-package.zip"',
+      }),
+    })
+
+    expect(link.download).toBe("budibase-teams-support-agent-package.zip")
+    expect(link.click).toHaveBeenCalledOnce()
+    expect(revokeObjectURL).toHaveBeenCalledWith("blob:package")
+  })
+})