@budibase/frontend-core 3.47.0 → 3.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "v3.47.0",
+  "version": "v3.48.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -24,5 +24,5 @@
   "devDependencies": {
     "vitest": "^5.0.0"
   },
-  "gitHead": "adfff86585b1d393941175f58cbe74f2005616b4"
+  "gitHead": "0d896a86074936025b8ef6e3400ab650faeb8d06"
 }

package/src/components/Chatbox/EscalationCard.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
   import { Body, Button, Icon } from "@budibase/bbui"
-  import type { EscalationContextDoc } from "@budibase/types"
+  import { APPROVAL_REQUIRED_TITLE_PREFIX } from "@budibase/shared-core"
+  import type {
+    EscalationContextDoc,
+    EscalationReviewContext,
+  } from "@budibase/types"
 
   interface Props {
     title?: string
     summary?: string
+    reviewContext?: EscalationReviewContext
     // Live resolution from the poll (not the frozen tool output).
     resolution: EscalationContextDoc["resolution"]
     // Message relayed from resolve ("Response recorded." etc.) - set as soon as
@@ -20,6 +25,7 @@
   let {
     title,
     summary,
+    reviewContext,
     resolution,
     statusMessage,
     showApproval = false,
@@ -32,6 +38,14 @@
   let isResolved = $derived(!!statusMessage || resolution !== "pending")
   let expanded = $state(true)
   let showDetails = $derived(!showApproval || expanded)
+  // The card heading already reads "Approval required", so drop the matching
+  // prefix that operation escalations put on the title.
+  let displayTitle = $derived(
+    title?.startsWith(APPROVAL_REQUIRED_TITLE_PREFIX)
+      ? title.slice(APPROVAL_REQUIRED_TITLE_PREFIX.length).trim()
+      : title
+  )
+  let hasSharedParameters = $derived(Boolean(reviewContext?.parameters?.length))
 
   const toggleDetails = () => {
     expanded = !expanded
@@ -44,11 +58,11 @@
       type="button"
       class="escalation-card-header escalation-card-toggle"
       aria-expanded={expanded}
-      aria-label={`${expanded ? "Collapse" : "Expand"} approval details${title ? ` for ${title}` : ""}`}
+      aria-label={`${expanded ? "Collapse" : "Expand"} approval details${displayTitle ? ` for ${displayTitle}` : ""}`}
       onclick={toggleDetails}
     >
       <Icon name={isResolved ? "check-circle" : "clock"} size="M" />
-      <span class="escalation-card-title">{title || "Approval required"}</span>
+      <span class="escalation-card-heading">Approval required</span>
       <span class="escalation-card-header-end">
         {#if !isResolved}
           <span class="escalation-card-badge">Test mode</span>
@@ -61,11 +75,23 @@
   {:else}
     <div class="escalation-card-header">
       <Icon name={isResolved ? "check-circle" : "clock"} size="M" />
-      <span class="escalation-card-title">{title || "Approval required"}</span>
+      <span class="escalation-card-heading">Approval required</span>
     </div>
   {/if}
 
   {#if showDetails}
+    {#if displayTitle}
+      <div class="escalation-card-title">{displayTitle}</div>
+    {/if}
+
+    {#if reviewContext}
+      <Body size="S" color="var(--spectrum-global-color-gray-700)">
+        {reviewContext.requestedBy} is requesting approval for
+        <strong>{reviewContext.action}</strong> as part of
+        <strong>{reviewContext.operation}</strong>.
+      </Body>
+    {/if}
+
     {#if summary}
       <Body size="S" color="var(--spectrum-global-color-gray-700)">
         {summary}
@@ -85,6 +111,24 @@
         Awaiting a human response.
       </Body>
     {/if}
+
+    {#if hasSharedParameters && reviewContext?.parameters}
+      <div class="escalation-card-divider"></div>
+      <div class="escalation-card-parameters-heading">
+        <span>Tool parameters</span>
+        {#if reviewContext.toolName}
+          <code>{reviewContext.toolName}</code>
+        {/if}
+      </div>
+      <div class="escalation-card-parameters-list">
+        {#each reviewContext.parameters as parameter (parameter.name)}
+          <div class="escalation-card-parameter">
+            <code>{parameter.name}</code>
+            <pre class="escalation-card-parameters">{parameter.value}</pre>
+          </div>
+        {/each}
+      </div>
+    {/if}
   {/if}
 
   {#if showApproval && !isResolved}
@@ -129,25 +173,22 @@
     color: inherit;
     font: inherit;
   }
+  .escalation-card-heading,
+  .escalation-card-title,
+  .escalation-card-parameters-heading {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .escalation-card-title {
+    margin-top: var(--spacing-xs);
+  }
   .escalation-card-header-end {
     display: flex;
     align-items: center;
     gap: var(--spacing-xs);
     margin-left: auto;
   }
-  .escalation-card-chevron {
-    display: flex;
-    color: var(--spectrum-global-color-gray-700);
-    transition: transform 130ms ease-in-out;
-  }
-  .escalation-card-chevron.expanded {
-    transform: rotate(180deg);
-  }
-  .escalation-card-title {
-    font-weight: 600;
-    font-size: 14px;
-    color: var(--spectrum-global-color-gray-900);
-  }
   .escalation-card-badge {
     border-radius: 999px;
     border: 1px solid var(--spectrum-global-color-blue-400);
@@ -158,9 +199,61 @@
     line-height: 1;
     padding: 4px 8px;
   }
+  .escalation-card-chevron {
+    display: flex;
+    color: var(--spectrum-global-color-gray-700);
+    transition: transform 130ms ease-in-out;
+  }
+  .escalation-card-chevron.expanded {
+    transform: rotate(180deg);
+  }
   .escalation-card-actions {
     display: flex;
     gap: var(--spacing-s);
     margin-top: var(--spacing-xs);
   }
+  .escalation-card-divider {
+    height: 1px;
+    margin: var(--spacing-xs) calc(-1 * var(--spacing-m));
+    background: var(--spectrum-global-color-gray-300);
+  }
+  .escalation-card-parameters-heading {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .escalation-card-parameters-heading code {
+    min-width: 0;
+    padding: 2px 5px;
+    border-radius: 4px;
+    background: var(--spectrum-global-color-gray-200);
+    font-size: 12px;
+    font-weight: 400;
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+
+  .escalation-card-parameters-list,
+  .escalation-card-parameter {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+  .escalation-card-parameters {
+    box-sizing: content-box;
+    min-height: 12px;
+    max-height: 360px;
+    margin: 0;
+    padding: var(--spacing-s);
+    overflow: auto;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    background: var(--spectrum-global-color-gray-100);
+    color: var(--spectrum-global-color-gray-800);
+    font-family: monospace;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
 </style>

package/src/components/Chatbox/index.svelte

@@ -12,6 +12,7 @@
     DraftChatConversation,
     AgentMessageMetadata,
     EscalationContextDoc,
+    EscalationReviewContext,
     EscalationRespondResult,
   } from "@budibase/types"
   import { ApprovalToolResultStatus } from "@budibase/types"
@@ -93,7 +94,12 @@
   // casts live here rather than cluttering the template.
   const escalationCardProps = (part: { input?: unknown; output?: unknown }) => {
     const output = part.output as
-      | { escalationId?: string; title?: string; summary?: string }
+      | {
+          escalationId?: string
+          title?: string
+          summary?: string
+          reviewContext?: EscalationReviewContext
+        }
       | undefined
     const input = part.input as { title?: string; summary?: string } | undefined
     const escalationId = output?.escalationId
@@ -101,6 +107,7 @@
       escalationId,
       title: output?.title ?? input?.title,
       summary: output?.summary ?? input?.summary,
+      reviewContext: output?.reviewContext,
       resolution:
         (escalationId && escalationState?.[escalationId]?.resolution) ||
         "pending",
@@ -266,7 +273,25 @@
 
   let resolvedConversationId = $state<string | undefined>()
 
+  // The consumer must get plain objects, otherwise reading them keeps
+  // subscribing to the live chat state and every streamed token counts as a
+  // change. $state.snapshot cannot type UIMessage, hence the manual clone.
+  const snapshotMessages = (
+    nextMessages: UIMessage<AgentMessageMetadata>[]
+  ): UIMessage<AgentMessageMetadata>[] =>
+    nextMessages.map(message => JSON.parse(JSON.stringify(message)))
+
+  const publishChatMessages = (
+    nextMessages: UIMessage<AgentMessageMetadata>[] = chatInstance.messages
+  ) => {
+    chat = {
+      ...chat,
+      messages: snapshotMessages(nextMessages),
+    }
+  }
+
   const chatInstance = new Chat<UIMessage<AgentMessageMetadata>>({
+    messages: chat?.messages || [],
     transport: new DefaultChatTransport({
       headers: () => ({ [Header.WORKSPACE_ID]: workspaceId }),
       prepareSendMessagesRequest: ({ messages }) => {
@@ -286,13 +311,13 @@
         }
       },
     }),
-    messages: chat?.messages || [],
     onFinish: async () => {
       isPreparingResponse = false
-      chat = { ...chat, messages: chatInstance.messages }
+      publishChatMessages()
     },
     onError: error => {
       resetPendingResponse()
+      publishChatMessages()
 
       console.error(error)
       let message = error.message || "Failed to send message"
@@ -350,6 +375,7 @@
     message: UIMessage<AgentMessageMetadata>
   ) {
     chatInstance.messages = [...chatInstance.messages, message]
+    publishChatMessages()
   }
 
   let lastAssistantUsage = $derived(
@@ -490,7 +516,18 @@
     inputValue = ""
     promptHistoryIndex = undefined
     onpromptsubmitted?.(text)
-    chatInstance.sendMessage({ text })
+
+    const userMessage: UIMessage<AgentMessageMetadata> = {
+      id: Helpers.uuid(),
+      role: "user",
+      parts: [{ type: "text", text }],
+    }
+    publishChatMessages([...(chat.messages ?? []), userMessage])
+    chatInstance.sendMessage({
+      id: userMessage.id,
+      role: "user",
+      parts: userMessage.parts,
+    })
     isPreparingResponse = false
   }
 
@@ -758,6 +795,7 @@
                 <EscalationCard
                   title={card.title}
                   summary={card.summary}
+                  reviewContext={card.reviewContext}
                   resolution={card.resolution}
                   statusMessage={card.escalationId
                     ? resolveMessages[card.escalationId]

package/src/components/FilterUsers.svelte

@@ -1,14 +1,25 @@
 <script>
   import { Select, Multiselect } from "@budibase/bbui"
-  import { fetchData, loadTranslationsByGroup } from "@budibase/frontend-core"
+  import {
+    fetchData,
+    fetchUsersById,
+    loadTranslationsByGroup,
+    Utils,
+  } from "@budibase/frontend-core"
   import { createAPIClient } from "../api"
 
   export let API = createAPIClient()
 
+  /** @type {string | string[] | null} */
   export let value = null
-  export let disabled
+  export let disabled = false
   export let multiselect = false
 
+  let searchTerm = null
+  let appliedTerm = ""
+  let selectedCache = {}
+  let loadingIds = new Set()
+
   $: fetch = fetchData({
     API,
     datasource: {
@@ -19,10 +30,57 @@
     },
   })
 
-  $: options = $fetch.rows
+  $: search(searchTerm || "")
+  $: selectedIds = !value ? [] : Array.isArray(value) ? value : [value]
+  $: pageIds = new Set(($fetch.rows || []).map(user => user._id))
+  $: loadMissing(
+    selectedIds.filter(id => !pageIds.has(id) && !selectedCache[id])
+  )
+  $: options = sortSelectedFirst(
+    [
+      ...($fetch.rows || []),
+      ...Object.values(selectedCache).filter(
+        user => selectedIds.includes(user._id) && !pageIds.has(user._id)
+      ),
+    ],
+    selectedIds
+  )
 
   $: component = multiselect ? Multiselect : Select
   const pickerLabels = loadTranslationsByGroup("picker")
+
+  const search = Utils.debounce(term => {
+    if (term === appliedTerm) {
+      return
+    }
+    appliedTerm = term
+    fetch.update({ query: term ? { string: { email: term } } : {} })
+  }, 250)
+
+  const loadMissing = async ids => {
+    const wanted = ids.filter(id => !loadingIds.has(id))
+    if (!wanted.length) {
+      return
+    }
+    wanted.forEach(id => loadingIds.add(id))
+    const users = await fetchUsersById(API, wanted)
+    wanted.forEach(id => loadingIds.delete(id))
+    if (Object.keys(users).length) {
+      selectedCache = { ...selectedCache, ...users }
+    }
+  }
+
+  const sortSelectedFirst = (users, ids) => {
+    const selected = new Set(ids)
+    return [...users].sort((a, b) => {
+      const aSelected = selected.has(a._id)
+      const bSelected = selected.has(b._id)
+      if (aSelected !== bSelected) {
+        return aSelected ? -1 : 1
+      }
+      return (a.email || "").localeCompare(b.email || "")
+    })
+  }
 </script>
 
 <div class="user-control">
@@ -37,5 +95,6 @@
     {disabled}
     searchPlaceholder={pickerLabels.searchPlaceholder}
     popoverAutoWidth
+    bind:searchTerm
   />
 </div>

package/src/fetch/DataFetch.ts

@@ -84,6 +84,7 @@ export default abstract class BaseDataFetch<
   }
   store: Writable<DataFetchStore<TDefinition, TQuery, TRow>>
   derivedStore: Readable<DataFetchDerivedStore<TDefinition, TQuery, TRow>>
+  lastLoadId: number | undefined
 
   /**
    * Constructs a new DataFetch instance.
@@ -203,11 +204,22 @@ export default abstract class BaseDataFetch<
   async getInitialData() {
     const { filter, paginate } = this.options
 
+    // Load using IDs to track invocations and ensure we're handling the
+    // latest update
+    this.lastLoadId = Math.random()
+    const thisLoadId = this.lastLoadId
+
     // Fetch datasource definition and extract sort properties if configured
     const definition = await this.getDefinition()
 
     // Determine feature flags
     const features = await this.determineFeatureFlags()
+
+    // In case a newer load started while we waited, abandon this one before
+    // it writes its query to the store
+    if (thisLoadId !== this.lastLoadId) {
+      return
+    }
     this.features = {
       supportsSearch: !!features?.supportsSearch,
       supportsSort: !!features?.supportsSort,
@@ -259,6 +271,11 @@ export default abstract class BaseDataFetch<
 
     // Actually fetch data
     const page = await this.getPage()
+
+    // In case fetching takes longer than a newer load, abandon these results
+    if (thisLoadId !== this.lastLoadId) {
+      return
+    }
     this.store.update($store => ({
       ...$store,
       loading: false,

package/src/utils/index.ts

@@ -18,4 +18,5 @@ export * from "./validation"
 export * from "./formatting"
 export * from "./aiTools"
 export * from "./login"
+export * from "./users"
 export * from "./translationGroups"

package/src/utils/users.ts

@@ -0,0 +1,37 @@
+import { StrippedUser, User } from "@budibase/types"
+import { APIClient } from "../api"
+
+export type PickerUser = User | StrippedUser | { _id: string; email: string }
+
+// Resolves user ids that fall outside a picker's first page. Ids that no
+// longer match a user get a placeholder so callers stop re-requesting them
+// and still have something to render.
+export const fetchUsersById = async (
+  API: APIClient,
+  ids: string[]
+): Promise<Record<string, PickerUser>> => {
+  const wanted = Array.from(new Set(ids.filter(Boolean)))
+  const users: Record<string, PickerUser> = {}
+  if (!wanted.length) {
+    return users
+  }
+  try {
+    const res = await API.searchUsers({
+      query: { oneOf: { _id: wanted } },
+      limit: wanted.length,
+    })
+    for (const user of res?.data || []) {
+      if (user?._id) {
+        users[user._id] = user
+      }
+    }
+    for (const id of wanted) {
+      if (!users[id]) {
+        users[id] = { _id: id, email: id }
+      }
+    }
+  } catch (error) {
+    console.error("Failed to load users by id", error)
+  }
+  return users
+}