@budibase/frontend-core 3.23.28 → 3.23.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.23.28",
+  "version": "3.23.30",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -18,5 +18,5 @@
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "bf96741b576cc61b4aae9af4ff390dbcf1eb34e4"
+  "gitHead": "f14a0f7924ce2526ffddd2e9eae9e94eb702aa80"
 }

package/src/api/agents.ts

@@ -14,15 +14,14 @@ import {
 
 import { Header } from "@budibase/shared-core"
 import { BaseAPIClient } from "./types"
-import { UIMessageChunk } from "ai"
+import { readUIMessageStream, UIMessage, UIMessageChunk } from "ai"
+import { createSseToJsonTransformStream } from "../utils/utils"
 
 export interface AgentEndpoints {
   agentChatStream: (
     chat: AgentChat,
-    workspaceId: string,
-    onChunk: (chunk: UIMessageChunk) => void,
-    onError?: (error: Error) => void
-  ) => Promise<void>
+    workspaceId: string
+  ) => Promise<AsyncIterable<UIMessage>>
 
   removeChat: (chatId: string) => Promise<void>
   fetchChats: (agentId: string) => Promise<FetchAgentHistoryResponse>
@@ -40,71 +39,36 @@ export interface AgentEndpoints {
 }
 
 export const buildAgentEndpoints = (API: BaseAPIClient): AgentEndpoints => ({
-  agentChatStream: async (chat, workspaceId, onChunk, onError) => {
+  agentChatStream: async (chat, workspaceId) => {
     const body: ChatAgentRequest = chat
 
-    try {
-      const response = await fetch("/api/agent/chat/stream", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-          [Header.APP_ID]: workspaceId,
-        },
-        body: JSON.stringify(body),
-        credentials: "same-origin",
-      })
-
-      if (!response.ok) {
-        const body = await response.json()
-
-        if (body.message) {
-          throw new Error(body.message)
-        }
-        throw new Error(`HTTP error! status: ${response.status}`)
-      }
-
-      const reader = response.body?.getReader()
-      if (!reader) {
-        throw new Error("Failed to get response reader")
-      }
-
-      const decoder = new TextDecoder()
-      let buffer = ""
-
-      while (true) {
-        const { done, value } = await reader.read()
-
-        if (done) break
-
-        buffer += decoder.decode(value, { stream: true })
-
-        // Process complete lines
-        const lines = buffer.split("\n")
-        buffer = lines.pop() || "" // Keep incomplete line in buffer
-
-        for (const line of lines) {
-          if (line.startsWith("data: ")) {
-            try {
-              const data = line.slice(6) // Remove 'data: ' prefix
-              const trimmedData = data.trim()
-              if (trimmedData && trimmedData !== "[DONE]") {
-                const chunk: UIMessageChunk = JSON.parse(data)
-                onChunk(chunk)
-              }
-            } catch (parseError) {
-              console.error("Failed to parse SSE data:", parseError)
-            }
-          }
-        }
-      }
-    } catch (error: any) {
-      if (onError) {
-        onError(error)
-      } else {
-        throw error
-      }
+    const response = await fetch("/api/agent/chat/stream", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        [Header.APP_ID]: workspaceId,
+      },
+      body: JSON.stringify(body),
+      credentials: "same-origin",
+    })
+
+    if (!response.ok) {
+      const errorBody = await response.json()
+      throw new Error(
+        errorBody.message || `HTTP error! status: ${response.status}`
+      )
+    }
+
+    if (!response.body) {
+      throw new Error("Failed to get response body")
     }
+
+    const chunkStream = response.body
+      .pipeThrough(new TextDecoderStream())
+      .pipeThrough(createSseToJsonTransformStream<UIMessageChunk>())
+
+    return readUIMessageStream({ stream: chunkStream })
   },
 
   removeChat: async (chatId: string) => {

package/src/components/ChangePasswordModal.svelte

@@ -3,24 +3,36 @@
   import PasswordRepeatInput from "./PasswordRepeatInput.svelte"
   import type { APIClient } from "@budibase/frontend-core"
   import { createEventDispatcher } from "svelte"
+  import { resolveTranslationGroup } from "@budibase/shared-core"
 
   export let API: APIClient
   export let passwordMinLength: string | undefined = undefined
   export let notifySuccess = notifications.success
   export let notifyError = notifications.error
+  // Get the default translations for the password modal and derive a type from it.
+  // `labels` can override any subset of these defaults while keeping type safety.
+  const DEFAULT_LABELS = resolveTranslationGroup("passwordModal")
+  type PasswordModalLabels = typeof DEFAULT_LABELS
+
+  export let labels: Partial<PasswordModalLabels> = {}
 
   const dispatch = createEventDispatcher()
 
+  $: resolvedLabels = {
+    ...DEFAULT_LABELS,
+    ...labels,
+  } as PasswordModalLabels
+
   let password: string = ""
   let error: string = ""
 
   const updatePassword = async () => {
     try {
       await API.updateSelf({ password })
-      notifySuccess("Password changed successfully")
+      notifySuccess(resolvedLabels.successText)
       dispatch("save")
     } catch (error) {
-      notifyError("Failed to update password")
+      notifyError(resolvedLabels.errorText)
     }
   }
 
@@ -33,11 +45,17 @@
 
 <svelte:window on:keydown={handleKeydown} />
 <ModalContent
-  title="Update password"
-  confirmText="Update password"
+  title={resolvedLabels.title}
+  confirmText={resolvedLabels.saveText}
+  cancelText={resolvedLabels.cancelText}
   onConfirm={updatePassword}
   disabled={!!error || !password}
 >
-  <Body size="S">Enter your new password below.</Body>
-  <PasswordRepeatInput bind:password bind:error minLength={passwordMinLength} />
+  <Body size="S">{resolvedLabels.body}</Body>
+  <PasswordRepeatInput
+    bind:password
+    bind:error
+    minLength={passwordMinLength}
+    labels={resolvedLabels}
+  />
 </ModalContent>

package/src/components/Chatbox/index.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Helpers, MarkdownViewer, notifications } from "@budibase/bbui"
+  import { MarkdownViewer, notifications } from "@budibase/bbui"
   import type { AgentChat } from "@budibase/types"
   import BBAI from "../../icons/BBAI.svelte"
   import { tick } from "svelte"
@@ -7,7 +7,7 @@
   import { onMount } from "svelte"
   import { createEventDispatcher } from "svelte"
   import { createAPIClient } from "@budibase/frontend-core"
-  import type { UIMessage, UIMessageChunk } from "ai"
+  import type { UIMessage } from "ai"
   import { v4 as uuidv4 } from "uuid"
 
   export let API = createAPIClient()
@@ -23,7 +23,7 @@
   let observer: MutationObserver
   let textareaElement: HTMLTextAreaElement
 
-  $: if (chat.messages.length) {
+  $: if (chat?.messages?.length) {
     scrollToBottom()
   }
 
@@ -43,7 +43,7 @@
 
   async function prompt() {
     if (!chat) {
-      chat = { title: "", messages: [], agentId: "" }
+      chat = { title: "", messages: [] }
     }
 
     const userMessage: UIMessage = {
@@ -52,97 +52,36 @@
       parts: [{ type: "text", text: inputValue }],
     }
 
-    const updatedChat = {
+    const updatedChat: AgentChat = {
       ...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 streamingText = ""
-    let assistantIndex = -1
-    let streamCompleted = false
-
     try {
-      await API.agentChatStream(
-        updatedChat,
-        workspaceId,
-        (chunk: UIMessageChunk) => {
-          if (chunk.type === "text-start") {
-            const assistantMessage: UIMessage = {
-              id: Helpers.uuid(),
-              role: "assistant",
-              parts: [{ type: "text", text: "", state: "streaming" }],
-            }
-            chat = {
-              ...chat,
-              messages: [...updatedChat.messages, assistantMessage],
-            }
-            assistantIndex = chat.messages.length - 1
-            scrollToBottom()
-          } else if (chunk.type === "text-delta") {
-            streamingText += chunk.delta || ""
-            if (assistantIndex >= 0) {
-              const messages = [...chat.messages]
-              const assistant = { ...messages[assistantIndex] }
-              const parts = [...assistant.parts]
-              const textPart = parts.find(p => p.type === "text")
-              if (textPart) {
-                textPart.text = streamingText
-              }
-              assistant.parts = parts
-              messages[assistantIndex] = assistant
-              chat = { ...chat, messages }
-            }
-            scrollToBottom()
-          } else if (chunk.type === "text-end") {
-            loading = false
-            streamCompleted = true
-            if (assistantIndex >= 0) {
-              const messages = [...chat.messages]
-              const assistant = { ...messages[assistantIndex] }
-              const parts = [...assistant.parts]
-              const textPart = parts.find(p => p.type === "text")
-              if (textPart) {
-                textPart.state = "done"
-              }
-              assistant.parts = parts
-              messages[assistantIndex] = assistant
-              chat = { ...chat, messages }
-            }
-            scrollToBottom()
-          } else if (chunk.type === "error") {
-            notifications.error(chunk.errorText || "An error occurred")
-            loading = false
-          }
-        },
-        error => {
-          console.error("Streaming error:", error)
-          notifications.error(error.message)
-          loading = false
-        }
-      )
+      const messageStream = await API.agentChatStream(updatedChat, workspaceId)
 
-      if (streamCompleted && chat) {
-        setTimeout(() => {
-          const chatId = chat._id || ""
-          dispatch("chatSaved", { chatId })
-        }, 500)
+      for await (const message of messageStream) {
+        chat = {
+          ...updatedChat,
+          messages: [...updatedChat.messages, message],
+        }
+        scrollToBottom()
       }
+
+      loading = false
+      dispatch("chatSaved", { chatId: chat._id || "" })
     } 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()

package/src/components/FilterUsers.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Select, Multiselect } from "@budibase/bbui"
-  import { fetchData } from "@budibase/frontend-core"
+  import { fetchData, loadTranslationsByGroup } from "@budibase/frontend-core"
   import { createAPIClient } from "../api"
 
   export let API = createAPIClient()
@@ -22,6 +22,7 @@
   $: options = $fetch.rows
 
   $: component = multiselect ? Multiselect : Select
+  const pickerLabels = loadTranslationsByGroup("picker")
 </script>
 
 <div class="user-control">
@@ -34,5 +35,6 @@
     getOptionLabel={option => option.email}
     getOptionValue={option => option._id}
     {disabled}
+    searchPlaceholder={pickerLabels.searchPlaceholder}
   />
 </div>

package/src/components/PasswordRepeatInput.svelte

@@ -6,10 +6,14 @@
   export let password: string
   export let error: string
   export let minLength = "12"
+  export let labels: any = {}
 
   const validatePassword = (value: string | undefined) => {
     if (!value || value.length < parseInt(minLength)) {
-      return `Please enter at least ${minLength} characters. We recommend using machine generated or random passwords.`
+      return (
+        labels?.minLengthText?.replace("{minLength}", minLength) ||
+        `Please enter at least ${minLength} characters. We recommend using machine generated or random passwords.`
+      )
     }
     return null
   }
@@ -38,17 +42,17 @@
 
 <FancyForm bind:this={passwordForm}>
   <FancyInput
-    label="Password"
+    label={labels?.passwordLabel ?? "Password"}
     type="password"
     error={firstPasswordError}
     bind:value={$firstPassword}
   />
   <FancyInput
-    label="Repeat password"
+    label={labels?.repeatLabel ?? "Repeat password"}
     type="password"
     error={$repeatTouched &&
       $firstPassword !== $repeatPassword &&
-      "Passwords must match"}
+      (labels?.mismatchText ?? "Passwords must match")}
     bind:value={$repeatPassword}
   />
 </FancyForm>

package/src/components/ProfileModal.svelte

@@ -4,14 +4,24 @@
   import type { User, ContextUser } from "@budibase/types"
   import type { APIClient } from "@budibase/frontend-core"
   import { createEventDispatcher } from "svelte"
+  import { resolveTranslationGroup } from "@budibase/shared-core"
 
   export let user: User | ContextUser | undefined = undefined
   export let API: APIClient
   export let notifySuccess = notifications.success
   export let notifyError = notifications.error
+  const DEFAULT_LABELS = resolveTranslationGroup("profileModal")
+  type ProfileModalLabels = typeof DEFAULT_LABELS
+
+  export let labels: Partial<ProfileModalLabels> = {}
 
   const dispatch = createEventDispatcher()
 
+  $: resolvedLabels = {
+    ...DEFAULT_LABELS,
+    ...labels,
+  } as ProfileModalLabels
+
   const values = writable({
     firstName: user?.firstName,
     lastName: user?.lastName,
@@ -20,20 +30,25 @@
   const updateInfo = async () => {
     try {
       await API.updateSelf($values)
-      notifySuccess("Information updated successfully")
+      notifySuccess(resolvedLabels.successText)
       dispatch("save")
     } catch (error) {
       console.error(error)
-      notifyError("Failed to update information")
+      notifyError(resolvedLabels.errorText)
     }
   }
 </script>
 
-<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
+<ModalContent
+  title={resolvedLabels.title}
+  confirmText={resolvedLabels.saveText}
+  cancelText={resolvedLabels.cancelText}
+  onConfirm={updateInfo}
+>
   <Body size="S">
-    Personalise the platform by adding your first name and last name.
+    {resolvedLabels.body}
   </Body>
-  <Input disabled value={user?.email || ""} label="Email" />
-  <Input bind:value={$values.firstName} label="First name" />
-  <Input bind:value={$values.lastName} label="Last name" />
+  <Input disabled value={user?.email || ""} label={resolvedLabels.emailLabel} />
+  <Input bind:value={$values.firstName} label={resolvedLabels.firstNameLabel} />
+  <Input bind:value={$values.lastName} label={resolvedLabels.lastNameLabel} />
 </ModalContent>

package/src/components/grid/cells/RelationshipCell.svelte

@@ -4,9 +4,12 @@
   import { debounce } from "../../../utils/utils"
   import GridPopover from "../overlays/GridPopover.svelte"
   import { OptionColours } from "../../../constants"
+  import { loadTranslationsByGroup } from "../../../utils/translationGroups"
 
   const { API, cache } = getContext("grid")
 
+  const pickerLabels = loadTranslationsByGroup("picker")
+
   export let value = []
   export let api
   export let readonly
@@ -40,6 +43,10 @@
     }
   }
 
+  $: relationshipSearchPlaceholder = primaryDisplay
+    ? pickerLabels.searchByFieldPlaceholder.replace("{field}", primaryDisplay)
+    : pickerLabels.searchPlaceholder
+
   $: relationFields = fieldValue?.reduce((acc, f) => {
     const fields = {}
     for (const [column] of Object.entries(schema?.columns || {}).filter(
@@ -314,7 +321,7 @@
           quiet
           type="text"
           bind:value={searchString}
-          placeholder={primaryDisplay ? `Search by ${primaryDisplay}` : null}
+          placeholder={relationshipSearchPlaceholder}
         />
       </div>
       {#if searching}

package/src/utils/index.ts

@@ -17,3 +17,4 @@ export * from "./components"
 export * from "./validation"
 export * from "./formatting"
 export * from "./login"
+export * from "./translationGroups"

package/src/utils/translationGroups.ts

@@ -0,0 +1,40 @@
+import { getContext } from "svelte"
+import { get, type Readable } from "svelte/store"
+import {
+  resolveTranslationGroup,
+  resolveWorkspaceTranslations,
+  type TranslationCategory,
+  type TranslationOverrides,
+} from "@budibase/shared-core"
+
+type TranslationStoreValue = {
+  translationOverrides?: TranslationOverrides | null
+  application?: { translationOverrides?: TranslationOverrides | null } | null
+}
+
+interface LoadTranslationsByGroupOptions {
+  appStore?: Readable<TranslationStoreValue> | null
+  overrides?: TranslationOverrides | null
+}
+
+interface SDKContext {
+  appStore?: Readable<TranslationStoreValue> | null
+}
+
+export const loadTranslationsByGroup = (
+  category: TranslationCategory,
+  options?: LoadTranslationsByGroupOptions
+): Record<string, string> => {
+  const sdk = getContext<SDKContext | undefined>("sdk")
+  const appStore = options?.appStore ?? sdk?.appStore
+  const storeValue = appStore ? get(appStore) : undefined
+
+  const overrides = options?.overrides
+    ? resolveWorkspaceTranslations(options.overrides)
+    : resolveWorkspaceTranslations(
+        storeValue?.translationOverrides ??
+          storeValue?.application?.translationOverrides
+      )
+
+  return resolveTranslationGroup(category, overrides)
+}

package/src/utils/utils.ts

@@ -422,3 +422,31 @@ export function parseFilter(filter: UISearchFilter) {
 
   return update
 }
+
+/**
+ * Utility to transform a SSE stream into a JSON stream
+ * @param {TransformStream<string, T>} stream
+ * @returns {TransformStream<T, T>}
+ */
+
+export function createSseToJsonTransformStream<T>(): TransformStream<
+  string,
+  T
+> {
+  let buffer = ""
+  return new TransformStream({
+    transform(chunk, controller) {
+      buffer += chunk
+      const lines = buffer.split("\n")
+      buffer = lines.pop() || ""
+      for (const line of lines) {
+        if (line.startsWith("data: ")) {
+          const data = line.slice(6).trim()
+          if (data && data !== "[DONE]") {
+            controller.enqueue(JSON.parse(data))
+          }
+        }
+      }
+    },
+  })
+}