@budibase/frontend-core 3.23.4 → 3.23.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.23.4",
+  "version": "3.23.6",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -17,5 +17,5 @@
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "de7e273c24ea446e0639e606fb3808a3fe46caae"
+  "gitHead": "993c44f2265cdca05008c355c1225967e2eb10c2"
 }

package/src/components/Chatbox/index.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">
+  import { MarkdownViewer, notifications } from "@budibase/bbui"
+  import type { UserMessage, AgentChat } from "@budibase/types"
+  import BBAI from "../../icons/BBAI.svelte"
+  import { tick } from "svelte"
+  import { onDestroy } from "svelte"
+  import { onMount } from "svelte"
+  import { createAPIClient } from "@budibase/frontend-core"
+  import { createEventDispatcher } from "svelte"
+
+  export let API = createAPIClient()
+
+  export let workspaceId: string
+  export let chat: AgentChat
+
+  const dispatch = createEventDispatcher<{ chatSaved: { chatId: string } }>()
+
+  let inputValue = ""
+  let loading: boolean = false
+  let chatAreaElement: HTMLDivElement
+  let observer: MutationObserver
+  let textareaElement: HTMLTextAreaElement
+
+  $: if (chat.messages.length) {
+    scrollToBottom()
+  }
+
+  async function scrollToBottom() {
+    await tick()
+    if (chatAreaElement) {
+      chatAreaElement.scrollTop = chatAreaElement.scrollHeight
+    }
+  }
+
+  async function handleKeyDown(event: any) {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault()
+      await prompt()
+    }
+  }
+
+  async function prompt() {
+    if (!chat) {
+      chat = { title: "", messages: [] }
+    }
+
+    const userMessage: UserMessage = { role: "user", content: inputValue }
+
+    const updatedChat = {
+      ...chat,
+      messages: [...chat.messages, userMessage],
+    }
+
+    // Update local display immediately with user message
+    chat = updatedChat
+
+    // Ensure we scroll to the new message
+    await scrollToBottom()
+
+    inputValue = ""
+    loading = true
+
+    let streamingContent = ""
+    let isToolCall = false
+    let toolCallInfo: string = ""
+
+    try {
+      await API.agentChatStream(
+        updatedChat,
+        workspaceId,
+        chunk => {
+          if (chunk.type === "content") {
+            // Accumulate streaming content
+            streamingContent += chunk.content || ""
+
+            // Update chat with partial content
+            const updatedMessages = [...updatedChat.messages]
+
+            // Find or create assistant message
+            const lastMessage = updatedMessages[updatedMessages.length - 1]
+            if (lastMessage?.role === "assistant") {
+              lastMessage.content =
+                streamingContent + (isToolCall ? toolCallInfo : "")
+            } else {
+              updatedMessages.push({
+                role: "assistant",
+                content: streamingContent + (isToolCall ? toolCallInfo : ""),
+              })
+            }
+
+            chat = {
+              ...chat,
+              messages: updatedMessages,
+            }
+
+            // Auto-scroll as content streams
+            scrollToBottom()
+          } else if (chunk.type === "tool_call_start") {
+            isToolCall = true
+            toolCallInfo = `\n\n**🔧 Executing Tool:** ${chunk.toolCall?.name}\n**Parameters:**\n\`\`\`json\n${chunk.toolCall?.arguments}\n\`\`\`\n`
+
+            const updatedMessages = [...updatedChat.messages]
+            const lastMessage = updatedMessages[updatedMessages.length - 1]
+            if (lastMessage?.role === "assistant") {
+              lastMessage.content = streamingContent + toolCallInfo
+            } else {
+              updatedMessages.push({
+                role: "assistant",
+                content: streamingContent + toolCallInfo,
+              })
+            }
+
+            chat = {
+              ...chat,
+              messages: updatedMessages,
+            }
+
+            scrollToBottom()
+          } else if (chunk.type === "tool_call_result") {
+            const resultInfo = chunk.toolResult?.error
+              ? `\n**❌ Tool Error:** ${chunk.toolResult.error}`
+              : `\n**✅ Tool Result:** Complete`
+
+            toolCallInfo += resultInfo
+
+            const updatedMessages = [...updatedChat.messages]
+            const lastMessage = updatedMessages[updatedMessages.length - 1]
+            if (lastMessage?.role === "assistant") {
+              lastMessage.content = streamingContent + toolCallInfo
+            }
+
+            chat = {
+              ...chat,
+              messages: updatedMessages,
+            }
+
+            scrollToBottom()
+          } else if (chunk.type === "chat_saved") {
+            if (chunk.chat) {
+              chat = chunk.chat
+              if (chunk.chat._id) {
+                dispatch("chatSaved", { chatId: chunk.chat._id })
+              }
+            }
+          } else if (chunk.type === "done") {
+            loading = false
+            scrollToBottom()
+          } else if (chunk.type === "error") {
+            notifications.error(chunk.content || "An error occurred")
+            loading = false
+          }
+        },
+        error => {
+          console.error("Streaming error:", error)
+          notifications.error(error.message)
+          loading = false
+        }
+      )
+    } catch (err: any) {
+      console.error(err)
+      notifications.error(err.message)
+      loading = false
+    }
+
+    // Return focus to textarea after the response
+    await tick()
+    if (textareaElement) {
+      textareaElement.focus()
+    }
+  }
+
+  onMount(async () => {
+    chat = { title: "", messages: [] }
+
+    // Ensure we always autoscroll to reveal new messages
+    observer = new MutationObserver(async () => {
+      await tick()
+      if (chatAreaElement) {
+        chatAreaElement.scrollTop = chatAreaElement.scrollHeight
+      }
+    })
+
+    if (chatAreaElement) {
+      observer.observe(chatAreaElement, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+      })
+    }
+
+    await tick()
+    if (textareaElement) {
+      textareaElement.focus()
+    }
+  })
+
+  onDestroy(() => {
+    observer.disconnect()
+  })
+</script>
+
+<div class="chat-area" bind:this={chatAreaElement}>
+  <div class="chatbox">
+    {#each chat.messages as message}
+      {#if message.role === "user"}
+        <div class="message user">
+          <MarkdownViewer
+            value={typeof message.content === "string"
+              ? message.content
+              : message.content.length > 0
+                ? message.content
+                    .map(part =>
+                      part.type === "text"
+                        ? part.text
+                        : `${part.type} content not supported`
+                    )
+                    .join("")
+                : "[Empty message]"}
+          />
+        </div>
+      {:else if message.role === "assistant" && message.content}
+        <div class="message assistant">
+          <MarkdownViewer value={message.content} />
+        </div>
+      {/if}
+    {/each}
+    {#if loading}
+      <div class="message system">
+        <BBAI size="48px" animate />
+      </div>
+    {/if}
+  </div>
+
+  <div class="input-wrapper">
+    <textarea
+      bind:value={inputValue}
+      bind:this={textareaElement}
+      class="input spectrum-Textfield-input"
+      on:keydown={handleKeyDown}
+      placeholder="Ask anything"
+      disabled={loading}
+    />
+  </div>
+</div>
+
+<style>
+  .chat-area {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: 0;
+  }
+  .chatbox {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 600px;
+    margin: 0 auto;
+    flex: 1 1 auto;
+    padding: 48px 0 24px 0;
+  }
+
+  .message {
+    display: flex;
+    flex-direction: column;
+    max-width: 80%;
+    padding: var(--spacing-l);
+    border-radius: 20px;
+    font-size: 16px;
+    color: var(--spectrum-global-color-gray-900);
+  }
+
+  .message.user {
+    align-self: flex-end;
+    background-color: var(--grey-3);
+  }
+
+  .message.assistant {
+    align-self: flex-start;
+    background-color: var(--grey-1);
+    border: 1px solid var(--grey-3);
+  }
+
+  .message.system {
+    align-self: flex-start;
+    background: none;
+    padding-left: 0;
+  }
+
+  .input-wrapper {
+    position: sticky;
+    bottom: 0;
+    width: 600px;
+    margin: 0 auto;
+    background: var(--background-alt);
+    padding-bottom: 32px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input {
+    width: 100%;
+    height: 100px;
+    top: 0;
+    resize: none;
+    padding: 20px;
+    font-size: 16px;
+    background-color: var(--grey-3);
+    color: var(--grey-9);
+    border-radius: 16px;
+    border: none;
+    outline: none;
+    min-height: 100px;
+    margin-bottom: 8px;
+  }
+
+  .input::placeholder {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  /* Style the markdown tool sections in assistant messages */
+  :global(.assistant strong) {
+    color: var(--spectrum-global-color-static-seafoam-700);
+  }
+
+  :global(.assistant h3) {
+    margin-top: var(--spacing-m);
+    color: var(--spectrum-global-color-static-seafoam-700);
+  }
+
+  :global(.assistant pre) {
+    background-color: var(--grey-2);
+    border: 1px solid var(--grey-3);
+    border-radius: 4px;
+  }
+</style>

package/src/components/index.js

@@ -10,3 +10,4 @@ export { default as FilterUsers } from "./FilterUsers.svelte"
 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"

package/src/icons/BBAI.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  export let size = "64px"
+  export let animate: boolean = false
+</script>
+
+<svg
+  viewBox="0 0 150 150"
+  width={size}
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="bbai">
+    <g id="Group 48096461">
+      {#if animate}
+        <animateTransform
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="0 75 75"
+          to="360 75 75"
+          dur="2.5s"
+          repeatCount="indefinite"
+          calcMode="spline"
+          keyTimes="0;1"
+          keySplines="0.3 0 0.5 1"
+        />
+      {/if}
+      <path
+        id="Vector"
+        d="M22.3457 95.0839L51.9032 124.642C53.199 125.937 55.2988 125.937 56.5946 124.642L69.4653 111.771C70.6236 110.612 71.171 108.976 70.9436 107.352L67.4872 82.9246C67.2334 81.1475 65.8371 79.7512 64.0626 79.4999L39.6354 76.0436C38.0143 75.8135 36.3774 76.3609 35.2164 77.5218L22.3457 90.3926C21.0499 91.6884 21.0499 93.7881 22.3457 95.0839Z"
+        fill="url(#paint0_linear_605_124)"
+      />
+      <path
+        id="Vector_2"
+        d="M92.0381 124.643L121.596 95.0851C122.891 93.7893 122.891 91.6895 121.596 90.3937L108.725 77.5229C107.567 76.3647 105.93 75.8172 104.306 76.0447L79.8787 79.501C78.1016 79.7549 76.7053 81.1512 76.454 82.9257L72.9977 107.353C72.7676 108.974 73.315 110.611 74.4759 111.772L87.3467 124.643C88.6425 125.938 90.7422 125.938 92.0381 124.643Z"
+        fill="url(#paint1_linear_605_124)"
+      />
+      <path
+        id="Vector_3"
+        d="M121.654 54.92L92.0968 25.3624C90.801 24.0666 88.7012 24.0666 87.4054 25.3624L74.5347 38.2332C73.3764 39.3915 72.829 41.0284 73.0564 42.6521L76.5128 67.0793C76.7666 68.8565 78.1629 70.2527 79.9374 70.504L104.365 73.9603C105.986 74.1904 107.623 73.643 108.784 72.4821L121.654 59.6113C122.95 58.3155 122.95 56.2158 121.654 54.92Z"
+        fill="url(#paint2_linear_605_124)"
+      />
+      <path
+        id="Vector_4"
+        d="M51.9619 25.3613L22.4044 54.9188C21.1086 56.2146 21.1086 58.3144 22.4044 59.6102L35.2752 72.481C36.4334 73.6393 38.0704 74.1867 39.6941 73.9592L64.1213 70.5029C65.8984 70.249 67.2947 68.8527 67.546 67.0782L71.0023 42.651C71.2324 41.0299 70.685 39.393 69.5241 38.2321L56.6533 25.3613C55.3575 24.0655 53.2578 24.0655 51.9619 25.3613Z"
+        fill="url(#paint3_linear_605_124)"
+      />
+    </g>
+  </g>
+  <defs>
+    <linearGradient
+      id="paint0_linear_605_124"
+      x1="52.1505"
+      y1="121.517"
+      x2="68.292"
+      y2="84.222"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6E56FF" />
+      <stop offset="1" stop-color="#9F8FFF" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_605_124"
+      x1="118.471"
+      y1="94.8378"
+      x2="81.1761"
+      y2="78.6963"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6E56FF" />
+      <stop offset="1" stop-color="#9F8FFF" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_605_124"
+      x1="91.8495"
+      y1="28.4869"
+      x2="75.708"
+      y2="65.7819"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6E56FF" />
+      <stop offset="1" stop-color="#9F8FFF" />
+    </linearGradient>
+    <linearGradient
+      id="paint3_linear_605_124"
+      x1="25.5289"
+      y1="55.1661"
+      x2="62.8239"
+      y2="71.3076"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6E56FF" />
+      <stop offset="1" stop-color="#9F8FFF" />
+    </linearGradient>
+  </defs>
+</svg>