@budibase/frontend-core 3.23.47 → 3.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.23.47",
+  "version": "3.24.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -12,11 +12,11 @@
     "@budibase/bbui": "*",
     "@budibase/shared-core": "*",
     "@budibase/types": "*",
-    "ai": "^5.0.93",
+    "ai": "^6.0.3",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "534845c38ed0fe209406ebe45fd87f3de79f1da5"
+  "gitHead": "7cfa950d39730aa88a1c26c60f8094d6f0b0606d"
 }

package/src/api/agents.ts

@@ -1,101 +1,23 @@
 import {
-  AgentChat,
-  ChatAgentRequest,
   CreateAgentRequest,
   CreateAgentResponse,
-  FetchAgentHistoryResponse,
   FetchAgentsResponse,
   ToolMetadata,
   UpdateAgentRequest,
   UpdateAgentResponse,
 } from "@budibase/types"
 
-import { Header } from "@budibase/shared-core"
 import { BaseAPIClient } from "./types"
-import { readUIMessageStream, UIMessage, UIMessageChunk } from "ai"
-import { createSseToJsonTransformStream } from "../utils/utils"
 
 export interface AgentEndpoints {
-  agentChatStream: (
-    chat: AgentChat,
-    workspaceId: string
-  ) => Promise<AsyncIterable<UIMessage>>
-
-  removeChat: (chatId: string) => Promise<void>
-  fetchChats: (agentId: string) => Promise<FetchAgentHistoryResponse>
-
-  fetchTools: () => Promise<ToolMetadata[]>
+  fetchTools: (aiconfigId?: string) => Promise<ToolMetadata[]>
   fetchAgents: () => Promise<FetchAgentsResponse>
   createAgent: (agent: CreateAgentRequest) => Promise<CreateAgentResponse>
   updateAgent: (agent: UpdateAgentRequest) => Promise<UpdateAgentResponse>
   deleteAgent: (agentId: string) => Promise<{ deleted: true }>
 }
 
-const throwOnErrorChunk = () =>
-  new TransformStream<UIMessageChunk, UIMessageChunk>({
-    transform(chunk, controller) {
-      if (chunk.type === "error") {
-        throw new Error(chunk.errorText || "Agent action failed")
-      }
-      controller.enqueue(chunk)
-    },
-  })
-
 export const buildAgentEndpoints = (API: BaseAPIClient): AgentEndpoints => ({
-  agentChatStream: async (chat, workspaceId) => {
-    const body: ChatAgentRequest = chat
-
-    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>())
-      .pipeThrough(throwOnErrorChunk())
-
-    return readUIMessageStream({
-      stream: chunkStream,
-      terminateOnError: true,
-    })
-  },
-
-  removeChat: async (chatId: string) => {
-    return await API.delete({
-      url: `/api/agent/chats/${chatId}`,
-    })
-  },
-
-  fetchChats: async (agentId: string) => {
-    return await API.get({
-      url: `/api/agent/${agentId}/chats`,
-    })
-  },
-
-  fetchTools: async () => {
-    return await API.get({
-      url: `/api/agent/tools`,
-    })
-  },
-
   fetchAgents: async () => {
     return await API.get({
       url: "/api/agent",
@@ -121,4 +43,13 @@ export const buildAgentEndpoints = (API: BaseAPIClient): AgentEndpoints => ({
       url: `/api/agent/${agentId}`,
     })
   },
+
+  fetchTools: async (aiconfigId?: string) => {
+    const query = aiconfigId
+      ? `?aiconfigId=${encodeURIComponent(aiconfigId)}`
+      : ""
+    return await API.get({
+      url: `/api/agent/tools${query}`,
+    })
+  },
 })

package/src/api/chatApps.ts

@@ -0,0 +1,190 @@
+import {
+  ChatAgentRequest,
+  ChatConversation,
+  ChatConversationRequest,
+  CreateChatConversationRequest,
+  ChatApp,
+  FetchAgentHistoryResponse,
+  UpdateChatAppRequest,
+} from "@budibase/types"
+import { Header } from "@budibase/shared-core"
+import { BaseAPIClient } from "./types"
+import { readUIMessageStream, UIMessage, UIMessageChunk } from "ai"
+import { createSseToJsonTransformStream } from "../utils/utils"
+
+export interface ChatAppEndpoints {
+  streamChatConversation: (
+    chat: ChatConversationRequest,
+    workspaceId: string
+  ) => Promise<AsyncIterable<UIMessage>>
+  deleteChatConversation: (
+    chatConversationId: string,
+    chatAppId: string
+  ) => Promise<void>
+  fetchChatConversation: (
+    chatAppId: string,
+    chatConversationId: string
+  ) => Promise<ChatConversation>
+  fetchChatHistory: (chatAppId: string) => Promise<FetchAgentHistoryResponse>
+  fetchChatApp: (workspaceId?: string) => Promise<ChatApp | null>
+  setChatAppAgent: (chatAppId: string, agentId: string) => Promise<ChatApp>
+  createChatConversation: (
+    chat: CreateChatConversationRequest,
+    workspaceId?: string
+  ) => Promise<ChatConversation>
+  updateChatApp: (chatApp: UpdateChatAppRequest) => Promise<ChatApp>
+}
+
+const throwOnErrorChunk = () =>
+  new TransformStream<UIMessageChunk, UIMessageChunk>({
+    transform(chunk, controller) {
+      if (chunk.type === "error") {
+        throw new Error(chunk.errorText || "Agent action failed")
+      }
+      controller.enqueue(chunk)
+    },
+  })
+
+export const buildChatAppEndpoints = (
+  API: BaseAPIClient
+): ChatAppEndpoints => ({
+  streamChatConversation: async (chat, workspaceId) => {
+    if (!chat.chatAppId) {
+      throw new Error("chatAppId is required to stream a chat conversation")
+    }
+
+    const body: ChatAgentRequest = chat
+    const conversationId = chat._id || "new"
+
+    const response = await fetch(
+      `/api/chatapps/${chat.chatAppId}/conversations/${conversationId}/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>())
+      .pipeThrough(throwOnErrorChunk())
+
+    return readUIMessageStream({
+      stream: chunkStream,
+      terminateOnError: true,
+    })
+  },
+
+  deleteChatConversation: async (
+    chatConversationId: string,
+    chatAppId: string
+  ) => {
+    return await API.delete({
+      url: `/api/chatapps/${chatAppId}/conversations/${chatConversationId}`,
+    })
+  },
+
+  fetchChatConversation: async (
+    chatAppId: string,
+    chatConversationId: string
+  ) => {
+    return await API.get({
+      url: `/api/chatapps/${chatAppId}/conversations/${chatConversationId}`,
+    })
+  },
+
+  fetchChatHistory: async (chatAppId: string) => {
+    return await API.get({
+      url: `/api/chatapps/${chatAppId}/conversations`,
+    })
+  },
+
+  fetchChatApp: async (workspaceId?: string) => {
+    const url = "/api/chatapps"
+    const headers = workspaceId
+      ? {
+          [Header.APP_ID]: workspaceId,
+        }
+      : undefined
+    return await API.get({
+      url,
+      ...(headers && { headers }),
+    })
+  },
+
+  setChatAppAgent: async (chatAppId: string, agentId: string) => {
+    if (!chatAppId) {
+      throw new Error("chatAppId is required to set chat app agent")
+    }
+    if (!agentId) {
+      throw new Error("agentId is required to set chat app agent")
+    }
+    return await API.post({
+      url: `/api/chatapps/${chatAppId}/agent`,
+      body: { agentId } as any,
+    })
+  },
+
+  createChatConversation: async (
+    chat: CreateChatConversationRequest,
+    workspaceId?: string
+  ) => {
+    const resolvedWorkspaceId = workspaceId || API.getAppID()
+    const { chatAppId } = chat
+    if (!chatAppId) {
+      throw new Error("chatAppId is required to create a chat conversation")
+    }
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    }
+
+    if (resolvedWorkspaceId) {
+      headers[Header.APP_ID] = resolvedWorkspaceId
+    }
+
+    const response = await fetch(`/api/chatapps/${chatAppId}/conversations`, {
+      method: "POST",
+      headers,
+      credentials: "same-origin",
+      body: JSON.stringify(chat),
+    })
+
+    if (!response.ok) {
+      const errorBody = await response.json().catch(() => null)
+      throw new Error(
+        errorBody?.message || `HTTP error! status: ${response.status}`
+      )
+    }
+
+    return (await response.json()) as ChatConversation
+  },
+
+  updateChatApp: async (chatApp: UpdateChatAppRequest) => {
+    if (!chatApp._id) {
+      throw new Error("chatAppId is required to update a chat app")
+    }
+    return await API.put({
+      url: `/api/chatapps/${chatApp._id}`,
+      body: chatApp as any,
+    })
+  },
+})

package/src/api/index.ts

@@ -47,6 +47,7 @@ import { buildMigrationEndpoints } from "./migrations"
 import { buildRowActionEndpoints } from "./rowActions"
 import { buildOAuth2Endpoints } from "./oauth2"
 import { buildAgentEndpoints } from "./agents"
+import { buildChatAppEndpoints } from "./chatApps"
 import { buildFeatureFlagEndpoints } from "./features"
 import { buildNavigationEndpoints } from "./navigation"
 import { buildWorkspaceAppEndpoints } from "./workspaceApps"
@@ -313,6 +314,7 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
     ...buildLogsEndpoints(API),
     ...buildMigrationEndpoints(API),
     ...buildAgentEndpoints(API),
+    ...buildChatAppEndpoints(API),
     ...buildFeatureFlagEndpoints(API),
     deployment: buildDeploymentEndpoints(API),
     viewV2: buildViewV2Endpoints(API),

package/src/api/plugins.ts

@@ -5,6 +5,9 @@ import {
   FetchPluginResponse,
   UploadPluginRequest,
   UploadPluginResponse,
+  PluginUpdateCheckResponse,
+  PluginUpdateApplyRequest,
+  PluginUpdateApplyResponse,
 } from "@budibase/types"
 import { BaseAPIClient } from "./types"
 
@@ -13,6 +16,11 @@ export interface PluginEndpoins {
   createPlugin: (data: CreatePluginRequest) => Promise<CreatePluginResponse>
   getPlugins: () => Promise<FetchPluginResponse>
   deletePlugin: (pluginId: string) => Promise<DeletePluginResponse>
+  checkPluginUpdates: (token?: string) => Promise<PluginUpdateCheckResponse>
+  applyPluginUpdates: (
+    data: PluginUpdateApplyRequest,
+    token?: string
+  ) => Promise<PluginUpdateApplyResponse>
 }
 
 export const buildPluginEndpoints = (API: BaseAPIClient): PluginEndpoins => ({
@@ -58,4 +66,20 @@ export const buildPluginEndpoints = (API: BaseAPIClient): PluginEndpoins => ({
       url: `/api/plugin/${encodeURIComponent(pluginId)}`,
     })
   },
+
+  checkPluginUpdates: async token => {
+    const url = token
+      ? `/api/plugin/updates?token=${encodeURIComponent(token)}`
+      : "/api/plugin/updates"
+    return await API.get({
+      url,
+    })
+  },
+
+  applyPluginUpdates: async (data, token) => {
+    return await API.post({
+      url: "/api/plugin/updates",
+      body: { ...data, token },
+    })
+  },
 })

package/src/api/types.ts

@@ -35,6 +35,7 @@ import { UserEndpoints } from "./user"
 import { ViewEndpoints } from "./views"
 import { ViewV2Endpoints } from "./viewsV2"
 import { AgentEndpoints } from "./agents"
+import { ChatAppEndpoints } from "./chatApps"
 import { NavigationEndpoints } from "./navigation"
 import { WorkspaceAppEndpoints } from "./workspaceApps"
 import { ResourceEndpoints } from "./resource"
@@ -113,6 +114,7 @@ export type APIError = {
 export type APIClient = BaseAPIClient &
   AIEndpoints &
   AgentEndpoints &
+  ChatAppEndpoints &
   AnalyticsEndpoints &
   AppEndpoints &
   AttachmentEndpoints &

package/src/components/Chatbox/index.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { MarkdownViewer, notifications } from "@budibase/bbui"
-  import type { AgentChat } from "@budibase/types"
+  import type {
+    ChatConversation,
+    ChatConversationRequest,
+  } from "@budibase/types"
+  import { Header } from "@budibase/shared-core"
   import BBAI from "../../icons/BBAI.svelte"
   import { tick } from "svelte"
   import { onDestroy } from "svelte"
@@ -10,14 +14,21 @@
   import type { UIMessage } from "ai"
   import { v4 as uuidv4 } from "uuid"
 
-  export let API = createAPIClient()
-
   export let workspaceId: string
-  export let chat: AgentChat
+  export let API = createAPIClient({
+    attachHeaders: headers => {
+      if (workspaceId) {
+        headers[Header.APP_ID] = workspaceId
+      }
+    },
+  })
+  type ChatConversationLike = ChatConversation | ChatConversationRequest
+
+  export let chat: ChatConversationLike
   export let loading: boolean = false
 
   const dispatch = createEventDispatcher<{
-    chatSaved: { chatId?: string; chat: AgentChat }
+    chatSaved: { chatId?: string; chat: ChatConversationLike }
   }>()
 
   let inputValue = ""
@@ -25,12 +36,32 @@
   let observer: MutationObserver
   let textareaElement: HTMLTextAreaElement
   let lastFocusedChatId: string | undefined
-  let lastFocusedNewChat: AgentChat | undefined
+  let lastFocusedNewChat: ChatConversationLike | undefined
 
   $: if (chat?.messages?.length) {
     scrollToBottom()
   }
 
+  const ensureChatApp = async (): Promise<string | undefined> => {
+    if (chat?.chatAppId) {
+      return chat.chatAppId
+    }
+    try {
+      const chatApp = await API.fetchChatApp(workspaceId)
+      if (chatApp?._id) {
+        const baseChat = chat || { title: "", messages: [], chatAppId: "" }
+        chat = {
+          ...baseChat,
+          chatAppId: chatApp._id,
+        }
+        return chatApp._id
+      }
+    } catch (err) {
+      console.error(err)
+    }
+    return undefined
+  }
+
   async function scrollToBottom() {
     await tick()
     if (chatAreaElement) {
@@ -46,8 +77,41 @@
   }
 
   async function prompt() {
+    const resolvedChatAppId = await ensureChatApp()
+
     if (!chat) {
-      chat = { title: "", messages: [] }
+      chat = { title: "", messages: [], chatAppId: "" }
+    }
+
+    const chatAppId = chat.chatAppId || resolvedChatAppId
+
+    if (!chatAppId) {
+      notifications.error("Chat app could not be created")
+      return
+    }
+
+    if (!chat._id && (!chat.messages || chat.messages.length === 0)) {
+      try {
+        const newChat = await API.createChatConversation(
+          {
+            chatAppId,
+            title: chat.title,
+          },
+          workspaceId
+        )
+
+        chat = {
+          ...chat,
+          ...newChat,
+          chatAppId,
+        }
+      } catch (err: any) {
+        console.error(err)
+        notifications.error(
+          err?.message || "Could not start a new chat conversation"
+        )
+        return
+      }
     }
 
     const userMessage: UIMessage = {
@@ -56,8 +120,9 @@
       parts: [{ type: "text", text: inputValue }],
     }
 
-    const updatedChat: AgentChat = {
+    const updatedChat: ChatConversationLike = {
       ...chat,
+      chatAppId: chat.chatAppId,
       messages: [...chat.messages, userMessage],
     }
 
@@ -68,16 +133,41 @@
     loading = true
 
     try {
-      const messageStream = await API.agentChatStream(updatedChat, workspaceId)
+      const messageStream = await API.streamChatConversation(
+        updatedChat,
+        workspaceId
+      )
+
+      let streamedMessages: UIMessage[] = [...updatedChat.messages]
 
       for await (const message of messageStream) {
+        streamedMessages = [...streamedMessages, message]
         chat = {
           ...updatedChat,
-          messages: [...updatedChat.messages, message],
+          messages: streamedMessages,
         }
         scrollToBottom()
       }
 
+      // 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 (!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)
+        }
+      }
+
       loading = false
       dispatch("chatSaved", { chatId: chat._id, chat })
     } catch (err: any) {
@@ -93,6 +183,8 @@
   }
 
   onMount(async () => {
+    await ensureChatApp()
+
     // Ensure we always autoscroll to reveal new messages
     observer = new MutationObserver(async () => {
       await tick()
@@ -211,7 +303,7 @@
       on:keydown={handleKeyDown}
       placeholder="Ask anything"
       disabled={loading}
-    />
+    ></textarea>
   </div>
 </div>
 

package/src/components/ClientAppSkeleton.svelte

@@ -6,17 +6,17 @@
 </script>
 
 <div class:sideNav id="clientAppSkeletonLoader" class="skeleton">
-  <div class="animation" class:noAnimation />
+  <div class="animation" class:noAnimation></div>
 
   {#if !hideDevTools}
-    <div class="devTools" />
+    <div class="devTools"></div>
   {/if}
   <div class="main">
-    <div class="nav" />
+    <div class="nav"></div>
     <div class="body">
-      <div class="bodyVerticalPadding" />
+      <div class="bodyVerticalPadding"></div>
       <div class="bodyHorizontal">
-        <div class="bodyHorizontalPadding" />
+        <div class="bodyHorizontalPadding"></div>
         <svg
           class="svg"
           xmlns="http://www.w3.org/2000/svg"
@@ -42,13 +42,13 @@
             mask="url(#mask)"
           />
         </svg>
-        <div class="bodyHorizontalPadding" />
+        <div class="bodyHorizontalPadding"></div>
       </div>
-      <div class="bodyVerticalPadding" />
+      <div class="bodyVerticalPadding"></div>
     </div>
   </div>
   {#if !hideFooter}
-    <div class="footer" />
+    <div class="footer"></div>
   {/if}
 </div>
 

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

@@ -57,7 +57,7 @@
       on:wheel|stopPropagation
       spellcheck="false"
       use:clickOutside={close}
-    />
+    ></textarea>
   </GridPopover>
 {/if}
 

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

@@ -12,7 +12,12 @@
   export let schema
   export let maximum
 
-  const { API, notifications, props, datasource } = getContext("grid")
+  const {
+    API,
+    notifications,
+    props: gridProps,
+    datasource,
+  } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
 
   let isOpen = false
@@ -89,7 +94,7 @@
   {#each value || [] as attachment}
     {#if isImage(attachment.extension)}
       <img
-        class:light={!$props?.darkMode &&
+        class:light={!$gridProps?.darkMode &&
           schema.type === FieldType.SIGNATURE_SINGLE}
         src={attachment.url}
         alt={attachment.extension}
@@ -111,7 +116,7 @@
         on:change={e => onChange(e.detail)}
         maximum={maximum || schema.constraints?.length?.maximum}
         {processFiles}
-        handleFileTooLarge={$props.isCloud ? handleFileTooLarge : null}
+        handleFileTooLarge={$gridProps.isCloud ? handleFileTooLarge : null}
       />
     </div>
   </GridPopover>

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

@@ -74,7 +74,7 @@
       on:wheel|stopPropagation
       spellcheck="false"
       use:clickOutside={close}
-    />
+    ></textarea>
   </GridPopover>
 {/if}
 

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

@@ -11,7 +11,12 @@
   export let readonly = false
   export let api
 
-  const { API, notifications, props, datasource } = getContext("grid")
+  const {
+    API,
+    notifications,
+    props: gridProps,
+    datasource,
+  } = getContext("grid")
 
   let isOpen = false
   let modal
@@ -73,7 +78,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="signature-cell"
-  class:light={!$props?.darkMode}
+  class:light={!$gridProps?.darkMode}
   class:editable
   bind:this={anchor}
   on:click={editable ? open : null}
@@ -88,7 +93,7 @@
   onConfirm={saveSignature}
   title={schema?.name}
   {value}
-  darkMode={$props.darkMode}
+  darkMode={$gridProps.darkMode}
   bind:this={modal}
 />
 
@@ -98,7 +103,7 @@
       {#if value?.key}
         <div class="signature-wrap">
           <CoreSignature
-            darkMode={$props.darkMode}
+            darkMode={$gridProps.darkMode}
             editable={false}
             {value}
             on:change={saveSignature}

package/src/components/grid/layout/ButtonColumn.svelte

@@ -8,7 +8,7 @@
   const {
     renderedRows,
     hoveredRowId,
-    props,
+    props: gridProps,
     width,
     rows,
     focusedRow,
@@ -26,7 +26,7 @@
 
   let container
 
-  $: buttons = getButtons($props)
+  $: buttons = getButtons($gridProps)
   $: columnsWidth = $scrollableColumns.reduce(
     (total, col) => (total += col.width),
     0
@@ -116,11 +116,11 @@
               class="buttons"
               class:offset={$showVScrollbar && $showHScrollbar}
             >
-              {#if $props.buttonsCollapsed}
+              {#if $gridProps.buttonsCollapsed}
                 {#if rowButtons.length > 0}
                   <CollapsedButtonGroup
                     buttons={makeCollapsedButtons(rowButtons, row)}
-                    text={$props.buttonsCollapsedText || "Action"}
+                    text={$gridProps.buttonsCollapsedText || "Action"}
                     align="right"
                     offset={5}
                     size="S"
@@ -128,7 +128,7 @@
                     on:mouseenter={() => ($hoveredRowId = row._id)}
                   />
                 {:else}
-                  <div class="button-placeholder-collapsed" />
+                  <div class="button-placeholder-collapsed"></div>
                 {/if}
               {:else}
                 {#each rowButtons as button}
@@ -143,13 +143,13 @@
                     on:click={() => handleClick(button, row)}
                   >
                     {#if button.icon}
-                      <i class="{button.icon} S" />
+                      <i class="{button.icon} S"></i>
                     {/if}
                     {button.text || "Button"}
                   </Button>
                 {/each}
                 {#if rowButtons.length === 0}
-                  <div class="button-placeholder" />
+                  <div class="button-placeholder"></div>
                 {/if}
               {/if}
             </div>

package/src/components/grid/layout/GridBody.svelte

@@ -14,7 +14,7 @@
     dispatch,
     isDragging,
     config,
-    props,
+    props: gridProps,
   } = getContext("grid")
 
   let body
@@ -66,7 +66,7 @@
       </div>
     {/if}
   </GridScrollWrapper>
-  {#if $props.buttons?.length}
+  {#if $gridProps.buttons?.length}
     <ButtonColumn />
   {/if}
 </div>

package/src/components/grid/layout/GridRow.svelte

@@ -23,7 +23,7 @@
     isSelectingCells,
     selectedCellMap,
     selectedCellCount,
-    props,
+    props: gridProps,
     buttonColumnWidth,
   } = getContext("grid")
 
@@ -32,7 +32,7 @@
     $hoveredRowId === row._id && (!$selectedCellCount || !$isSelectingCells)
   $: rowFocused = $focusedRow?._id === row._id
   $: reorderSource = $reorder.sourceColumn
-  $: hasButtons = $props?.buttons?.length > 0
+  $: hasButtons = $gridProps?.buttons?.length > 0
   $: needsButtonSpacer = hasButtons && $buttonColumnWidth > 0
 </script>
 

package/src/components/grid/layout/NewRow.svelte

@@ -188,14 +188,17 @@
     class:floating={offset > 0}
     style="--offset:{offset}px; --sticky-width:{width}px;"
   >
-    <div class="underlay sticky" transition:fade|local={{ duration: 130 }} />
-    <div class="underlay" transition:fade|local={{ duration: 130 }} />
+    <div
+      class="underlay sticky"
+      transition:fade|local={{ duration: 130 }}
+    ></div>
+    <div class="underlay" transition:fade|local={{ duration: 130 }}></div>
     <div class="sticky-column" transition:fade|local={{ duration: 130 }}>
       <div class="row">
         <GutterCell expandable on:expand={addViaModal} rowHovered>
           <Icon name="plus" color="var(--spectrum-global-color-gray-500)" />
           {#if isAdding}
-            <div in:fade={{ duration: 130 }} class="loading-overlay" />
+            <div in:fade={{ duration: 130 }} class="loading-overlay"></div>
           {/if}
         </GutterCell>
         {#if $displayColumn}
@@ -214,7 +217,7 @@
               <div class="readonly-overlay">Can't edit auto column</div>
             {/if}
             {#if isAdding}
-              <div in:fade={{ duration: 130 }} class="loading-overlay" />
+              <div in:fade={{ duration: 130 }} class="loading-overlay"></div>
             {/if}
           </DataCell>
         {/if}
@@ -240,7 +243,7 @@
                 <div class="readonly-overlay">Can't edit auto column</div>
               {/if}
               {#if isAdding}
-                <div in:fade={{ duration: 130 }} class="loading-overlay" />
+                <div in:fade={{ duration: 130 }} class="loading-overlay"></div>
               {/if}
             </DataCell>
           {/each}

package/src/components/grid/overlays/MenuOverlay.svelte

@@ -65,7 +65,7 @@
   }
 </script>
 
-<div bind:this={anchor} {style} class="menu-anchor" />
+<div bind:this={anchor} {style} class="menu-anchor"></div>
 
 {#if $menu.visible}
   {#key style}

package/src/components/grid/overlays/PopoverOverlay.svelte

@@ -1,4 +1,4 @@
-<div class="grid-popover-container" />
+<div class="grid-popover-container"></div>
 
 <style>
   .grid-popover-container {

package/src/components/grid/overlays/ReorderOverlay.svelte

@@ -35,7 +35,7 @@
 {#if visible}
   <div class="reorder-wrapper">
     <GridScrollWrapper scrollVertically>
-      <div class="reorder-overlay" {style} />
+      <div class="reorder-overlay" {style}></div>
     </GridScrollWrapper>
   </div>
 {/if}

package/src/components/grid/overlays/ResizeOverlay.svelte

@@ -24,7 +24,7 @@
       on:dblclick={() => resize.actions.resetSize(column)}
       style={getStyle(column, $scrollLeft)}
     >
-      <div class="resize-indicator" />
+      <div class="resize-indicator"></div>
     </div>
   {/each}
 {/if}

package/src/components/grid/overlays/ScrollOverlay.svelte

@@ -123,7 +123,7 @@
     on:mousedown={startVDragging}
     on:touchstart={startVDragging}
     class:dragging={isDraggingV}
-  />
+  ></div>
 {/if}
 {#if $showHScrollbar}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -133,7 +133,7 @@
     on:mousedown={startHDragging}
     on:touchstart={startHDragging}
     class:dragging={isDraggingH}
-  />
+  ></div>
 {/if}
 
 <style>

package/src/components/grid/stores/rows.ts

@@ -1,5 +1,5 @@
 import { writable, derived, get, Writable, Readable } from "svelte/store"
-import { DataFetch, fetchData } from "../../../fetch"
+import { DataFetch, DataFetchDefinition, fetchData } from "../../../fetch"
 import { NewRowID, RowPageSize } from "../lib/constants"
 import {
   generateRowID,
@@ -252,7 +252,18 @@ export const createActions = (context: StoreContext): RowActionStore => {
     })
 
     // Subscribe to changes of this fetch model
-    unsubscribe = newFetch.subscribe(async $fetch => {
+    type GridFetchSnapshot = {
+      rows: Row[]
+      loading: boolean
+      loaded: boolean
+      resetKey: string
+      hasNextPage: boolean
+      error: { message: string; status: number; url: string } | null
+      definition?: DataFetchDefinition | null
+    }
+
+    const fetchStore = newFetch as unknown as Readable<GridFetchSnapshot>
+    unsubscribe = fetchStore.subscribe(async $fetch => {
       if ($fetch.error) {
         // Present a helpful error to the user
         let message = "An unknown error occurred"
@@ -481,7 +492,7 @@ export const createActions = (context: StoreContext): RowActionStore => {
     })
 
     // Create rows
-    let saved = []
+    let saved: UIRow[] = []
     let failed = 0
     for (let i = 0; i < count; i++) {
       try {
@@ -700,7 +711,7 @@ export const createActions = (context: StoreContext): RowActionStore => {
 
     // Update rows
     const $columnLookupMap = get(columnLookupMap)
-    let updated = []
+    let updated: UIRow[] = []
     let failed = 0
     for (let i = 0; i < count; i++) {
       const rowId = rowIds[i]
@@ -779,7 +790,7 @@ export const createActions = (context: StoreContext): RowActionStore => {
     if (resetRows) {
       rowCacheMap = {}
     }
-    let rowsToAppend = []
+    let rowsToAppend: Row[] = []
     let newRow
     const $hasBudibaseIdentifiers = get(hasBudibaseIdentifiers)
     for (let i = 0; i < newRows.length; i++) {

package/src/fetch/JSONArrayFetch.ts

@@ -11,9 +11,13 @@ export default class JSONArrayFetch extends FieldFetch<JSONArrayFieldDatasource>
     try {
       const { fieldName } = datasource
       const table = await this.API.fetchTableDefinition(datasource.tableId)
+
+      // For Postgres JSON columns, the schema may be directly available on the field
+      // Otherwise, fall back to fetching the schema
       const schema =
-        table.schema[fieldName].schema ??
+        table.schema?.[fieldName]?.schema ??
         getJSONArrayDatasourceSchema(table.schema, datasource)
+
       return { schema }
     } catch (error) {
       return null

package/svelte.config.mjs

@@ -1,7 +1,7 @@
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
 
 const config = {
-  preprocess: vitePreprocess(),
+  preprocess: vitePreprocess({ script: true }),
 }
 
 export default config