@budibase/frontend-core 3.23.48 → 3.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.23.48",
+  "version": "3.24.0",
   "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": "0a78faa2adbb8fb3b81de2b9b00352e60178f12f"
+  "gitHead": "7cfa950d39730aa88a1c26c60f8094d6f0b0606d"
 }

package/src/api/agents.ts

@@ -10,7 +10,7 @@ import {
 import { BaseAPIClient } from "./types"
 
 export interface AgentEndpoints {
-  fetchTools: () => Promise<ToolMetadata[]>
+  fetchTools: (aiconfigId?: string) => Promise<ToolMetadata[]>
   fetchAgents: () => Promise<FetchAgentsResponse>
   createAgent: (agent: CreateAgentRequest) => Promise<CreateAgentResponse>
   updateAgent: (agent: UpdateAgentRequest) => Promise<UpdateAgentResponse>
@@ -44,9 +44,12 @@ export const buildAgentEndpoints = (API: BaseAPIClient): AgentEndpoints => ({
     })
   },
 
-  fetchTools: async () => {
+  fetchTools: async (aiconfigId?: string) => {
+    const query = aiconfigId
+      ? `?aiconfigId=${encodeURIComponent(aiconfigId)}`
+      : ""
     return await API.get({
-      url: `/api/agent/tools`,
+      url: `/api/agent/tools${query}`,
     })
   },
 })

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/components/Chatbox/index.svelte

@@ -303,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