@budibase/frontend-core 3.39.23 → 3.39.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.39.23",
+  "version": "3.39.25",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -23,5 +23,5 @@
   "devDependencies": {
     "vitest": "^4.1.0"
   },
-  "gitHead": "833e219692f2ec7892cbeaef8aeaa2732d1ccb27"
+  "gitHead": "02e3837724b2102305a6aeb8590004680d403c32"
 }

package/src/api/chatLinks.ts

@@ -0,0 +1,44 @@
+import {
+  type ChatIdentityLink,
+  type ChatIdentityLinkProvider,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface SlackChannel {
+  id: string
+  name: string
+}
+
+export interface MSTeamsChannel {
+  id: string
+  name: string
+  teamId: string
+  teamName: string
+}
+
+export interface ChatLinksEndpoints {
+  fetchChatIdentityLinks: (
+    provider?: ChatIdentityLinkProvider
+  ) => Promise<ChatIdentityLink[]>
+  fetchSlackChannels: (agentId: string) => Promise<SlackChannel[]>
+  fetchMSTeamsChannels: (agentId: string) => Promise<MSTeamsChannel[]>
+}
+
+export const buildChatLinksEndpoints = (
+  API: BaseAPIClient
+): ChatLinksEndpoints => ({
+  fetchChatIdentityLinks: async provider => {
+    const query = provider
+      ? `?${new URLSearchParams({ provider }).toString()}`
+      : ""
+    return await API.get({ url: `/api/chat-links${query}` })
+  },
+  fetchSlackChannels: async agentId => {
+    const query = new URLSearchParams({ agentId }).toString()
+    return await API.get({ url: `/api/slack-channels?${query}` })
+  },
+  fetchMSTeamsChannels: async agentId => {
+    const query = new URLSearchParams({ agentId }).toString()
+    return await API.get({ url: `/api/teams-channels?${query}` })
+  },
+})

package/src/api/escalations.ts

@@ -0,0 +1,41 @@
+import type {
+  EscalationContextDoc,
+  EscalationRespondResult,
+  EscalationResponse,
+  EscalationResult,
+} from "@budibase/types"
+import type { BaseAPIClient } from "./types"
+
+export interface EscalationEndpoints {
+  fetchEscalationContext: (
+    escalationId: string
+  ) => Promise<EscalationContextDoc>
+  fetchEscalationResult: (escalationId: string) => Promise<EscalationResult>
+  resolveEscalation: (
+    escalationId: string,
+    response: EscalationResponse
+  ) => Promise<EscalationRespondResult>
+}
+
+export const buildEscalationEndpoints = (
+  API: BaseAPIClient
+): EscalationEndpoints => ({
+  fetchEscalationContext: async escalationId => {
+    return await API.get({
+      url: `/api/escalations/context/${escalationId}`,
+    })
+  },
+
+  fetchEscalationResult: async escalationId => {
+    return await API.get({
+      url: `/api/escalations/${escalationId}/result`,
+    })
+  },
+
+  resolveEscalation: async (escalationId, response) => {
+    return await API.post({
+      url: `/api/escalations/${escalationId}/resolve`,
+      body: { response },
+    })
+  },
+})

package/src/api/index.ts

@@ -23,6 +23,7 @@ import { buildFlagEndpoints } from "./flags"
 import { buildLayoutEndpoints } from "./layouts"
 import { buildOtherEndpoints } from "./other"
 import { buildPermissionsEndpoints } from "./permissions"
+import { buildProjectEndpoints } from "./projects"
 import { buildQueryEndpoints } from "./queries"
 import { buildRelationshipEndpoints } from "./relationships"
 import { buildRoleEndpoints } from "./roles"
@@ -51,6 +52,8 @@ import { buildAgentTestEndpoints } from "./agentTests"
 import { buildAgentLogEndpoints } from "./agentLogs"
 import { buildAgentRequestEndpoints } from "./agentRequests"
 import { buildChatAppEndpoints } from "./chatApps"
+import { buildEscalationEndpoints } from "./escalations"
+import { buildChatLinksEndpoints } from "./chatLinks"
 import { buildFeatureFlagEndpoints } from "./features"
 import { buildNavigationEndpoints } from "./navigation"
 import { buildWorkspaceAppEndpoints } from "./workspaceApps"
@@ -323,12 +326,15 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
     ...buildAgentLogEndpoints(API),
     ...buildAgentRequestEndpoints(API),
     ...buildChatAppEndpoints(API),
+    ...buildEscalationEndpoints(API),
+    ...buildChatLinksEndpoints(API),
     ...buildFeatureFlagEndpoints(API),
     deployment: buildDeploymentEndpoints(API),
     viewV2: buildViewV2Endpoints(API),
     rowActions: buildRowActionEndpoints(API),
     oauth2: buildOAuth2Endpoints(API),
     navigation: buildNavigationEndpoints(API),
+    projects: buildProjectEndpoints(API),
     workspaceApp: buildWorkspaceAppEndpoints(API),
     workspace: buildWorkspaceFavouriteEndpoints(API),
     workspaceHome: buildWorkspaceHomeEndpoints(API),

package/src/api/projects.ts

@@ -0,0 +1,78 @@
+import {
+  CreateProjectRequest,
+  CreateProjectResponse,
+  ExportProjectRequest,
+  FetchProjectsResponse,
+  ImportProjectRequest,
+  ImportProjectResponse,
+  UpdateProjectRequest,
+  UpdateProjectResponse,
+} from "@budibase/types"
+import { BaseAPIClient } from "./types"
+
+export interface ProjectEndpoints {
+  fetch: () => Promise<FetchProjectsResponse>
+  create: (project: CreateProjectRequest) => Promise<CreateProjectResponse>
+  exportBundle: (id: string, body?: ExportProjectRequest) => Promise<Response>
+  importBundle: (
+    file: File,
+    body?: ImportProjectRequest
+  ) => Promise<ImportProjectResponse>
+  update: (project: UpdateProjectRequest) => Promise<UpdateProjectResponse>
+  delete: (id: string, rev: string) => Promise<void>
+}
+
+export const buildProjectEndpoints = (
+  API: BaseAPIClient
+): ProjectEndpoints => ({
+  fetch: async () => {
+    return await API.get({
+      url: "/api/projects",
+    })
+  },
+  create: async project => {
+    return await API.post({
+      url: "/api/projects",
+      body: project,
+    })
+  },
+  exportBundle: async (id, body) => {
+    return await API.post<ExportProjectRequest | undefined, Response>({
+      url: `/api/projects/${id}/export`,
+      body,
+      parseResponse: response => response,
+    })
+  },
+  importBundle: async (file, body) => {
+    const formData = new FormData()
+    formData.append("file", file)
+    for (const [key, value] of Object.entries(body || {})) {
+      if (value !== undefined) {
+        formData.append(key, value)
+      }
+    }
+    return await API.post<FormData, ImportProjectResponse>({
+      url: "/api/projects/import",
+      body: formData,
+      json: false,
+    })
+  },
+  update: async project => {
+    const { _id, _rev, name, description, color } = project
+    return await API.put({
+      url: `/api/projects/${_id}`,
+      body: {
+        _id,
+        _rev,
+        name,
+        description,
+        color,
+      },
+    })
+  },
+  delete: async (id, rev) => {
+    return await API.delete({
+      url: `/api/projects/${id}/${rev}`,
+    })
+  },
+})

package/src/api/types.ts

@@ -20,6 +20,7 @@ import { MigrationEndpoints } from "./migrations"
 import { OAuth2Endpoints } from "./oauth2"
 import { OtherEndpoints } from "./other"
 import { PermissionEndpoints } from "./permissions"
+import { ProjectEndpoints } from "./projects"
 import { PluginEndpoins } from "./plugins"
 import { QueryEndpoints } from "./queries"
 import { RelationshipEndpoints } from "./relationships"
@@ -39,6 +40,8 @@ import { AgentTestEndpoints } from "./agentTests"
 import { AgentLogEndpoints } from "./agentLogs"
 import { AgentRequestEndpoints } from "./agentRequests"
 import { ChatAppEndpoints } from "./chatApps"
+import { ChatLinksEndpoints } from "./chatLinks"
+import { EscalationEndpoints } from "./escalations"
 import { NavigationEndpoints } from "./navigation"
 import { WorkspaceAppEndpoints } from "./workspaceApps"
 import { ResourceEndpoints } from "./resource"
@@ -125,6 +128,8 @@ export type APIClient = BaseAPIClient &
   AgentLogEndpoints &
   AgentRequestEndpoints &
   ChatAppEndpoints &
+  ChatLinksEndpoints &
+  EscalationEndpoints &
   AnalyticsEndpoints &
   AppEndpoints &
   AttachmentEndpoints &
@@ -162,6 +167,7 @@ export type APIClient = BaseAPIClient &
     viewV2: ViewV2Endpoints
     oauth2: OAuth2Endpoints
     navigation: NavigationEndpoints
+    projects: ProjectEndpoints
     workspaceApp: WorkspaceAppEndpoints
     workspace: WorkspaceFavouriteEndpoints
     workspaceHome: WorkspaceHomeEndpoints

package/src/components/Chatbox/EscalationCard.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { Body, Button, Icon } from "@budibase/bbui"
+  import type { EscalationContextDoc } from "@budibase/types"
+
+  interface Props {
+    title?: string
+    summary?: string
+    // Live resolution from the poll (not the frozen tool output).
+    resolution: EscalationContextDoc["resolution"]
+    // Message relayed from resolve ("Response recorded." etc.) - set as soon as
+    // the action is taken here, before the poll flips resolution.
+    statusMessage?: string
+    // Dev-only: whether to show the inline Approve/Reject buttons.
+    showApproval?: boolean
+    resolving?: boolean
+    onApprove?: () => void
+    onReject?: () => void
+  }
+
+  let {
+    title,
+    summary,
+    resolution,
+    statusMessage,
+    showApproval = false,
+    resolving = false,
+    onApprove,
+    onReject,
+  }: Props = $props()
+
+  // Resolved either by this card's action (statusMessage) or elsewhere (poll).
+  let isResolved = $derived(!!statusMessage || resolution !== "pending")
+</script>
+
+<div class="escalation-card" aria-live="polite">
+  <div class="escalation-card-header">
+    <Icon name={isResolved ? "check-circle" : "clock"} size="M" />
+    <span class="escalation-card-title">{title || "Approval required"}</span>
+    {#if showApproval && !isResolved}
+      <span class="escalation-card-badge">Test mode</span>
+    {/if}
+  </div>
+
+  {#if summary}
+    <Body size="S" color="var(--spectrum-global-color-gray-700)">
+      {summary}
+    </Body>
+  {/if}
+
+  {#if isResolved}
+    <Body size="XS" color="var(--spectrum-global-color-gray-600)">
+      {statusMessage || "Response recorded."}
+    </Body>
+  {:else if showApproval}
+    <Body size="XS" color="var(--spectrum-global-color-gray-600)">
+      Approve or reject here to simulate a reviewer response.
+    </Body>
+    <div class="escalation-card-actions">
+      <Button cta disabled={resolving} on:click={() => onApprove?.()}>
+        Approve
+      </Button>
+      <Button secondary disabled={resolving} on:click={() => onReject?.()}>
+        Reject
+      </Button>
+    </div>
+  {:else}
+    <Body size="XS" color="var(--spectrum-global-color-gray-600)">
+      Awaiting a human response.
+    </Body>
+  {/if}
+</div>
+
+<style>
+  .escalation-card {
+    align-self: flex-start;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+    padding: var(--spacing-m);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 12px;
+    background: var(--spectrum-global-color-gray-75);
+  }
+  .escalation-card-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+  .escalation-card-title {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .escalation-card-badge {
+    margin-left: auto;
+    border-radius: 999px;
+    border: 1px solid var(--spectrum-global-color-blue-400);
+    color: var(--spectrum-global-color-blue-700);
+    background: var(--spectrum-global-color-blue-100);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    padding: 4px 8px;
+  }
+  .escalation-card-actions {
+    display: flex;
+    gap: var(--spacing-s);
+    margin-top: var(--spacing-xs);
+  }
+</style>

package/src/components/Chatbox/index.svelte

@@ -11,6 +11,8 @@
     ChatConversation,
     DraftChatConversation,
     AgentMessageMetadata,
+    EscalationContextDoc,
+    EscalationRespondResult,
   } from "@budibase/types"
   import { Header } from "@budibase/shared-core"
   import { tick, untrack } from "svelte"
@@ -19,6 +21,7 @@
   import { formatToolName } from "../../utils/aiTools"
   import ReasoningStatus from "./ReasoningStatus.svelte"
   import ContextUsage from "./ContextUsage.svelte"
+  import EscalationCard from "./EscalationCard.svelte"
   import {
     DefaultChatTransport,
     isTextUIPart,
@@ -38,6 +41,20 @@
     onchatsaved?: (_event: {
       detail: { chatId?: string; chat: ChatConversationLike }
     }) => void
+    // Fired when an escalation parks; the consumer polls the outcome and
+    // injects it via appendAssistantMessage.
+    onEscalationPending?: (_detail: { escalationId: string }) => void
+    // Live resolution per escalationId (from the poll) - drives the card state.
+    escalationState?: Record<
+      string,
+      { resolution: EscalationContextDoc["resolution"] }
+    >
+    // Dev-only: show the inline Approve/Reject buttons on the escalation card.
+    showInlineApproval?: boolean
+    onResolve?: (
+      _escalationId: string,
+      _accepted: boolean
+    ) => Promise<EscalationRespondResult | undefined>
     isAgentPreviewChat?: boolean
     readOnly?: boolean
     readOnlyReason?: "disabled" | "deleted" | "offline"
@@ -50,11 +67,47 @@
     conversationStarters = [],
     initialPrompt = "",
     onchatsaved,
+    onEscalationPending,
+    escalationState,
+    showInlineApproval = false,
+    onResolve,
     isAgentPreviewChat = false,
     readOnly = false,
     readOnlyReason,
   }: Props = $props()
 
+  // Per-escalation in-flight flag + the message relayed from resolve, so the
+  // card shows the real outcome on click rather than a static label.
+  let resolvingEscalations = $state<Record<string, boolean>>({})
+  let resolveMessages = $state<Record<string, string>>({})
+  const handleResolve = async (escalationId: string, accepted: boolean) => {
+    resolvingEscalations = { ...resolvingEscalations, [escalationId]: true }
+    try {
+      const result = await onResolve?.(escalationId, accepted)
+      if (result?.message) {
+        resolveMessages = { ...resolveMessages, [escalationId]: result.message }
+      }
+    } finally {
+      resolvingEscalations = { ...resolvingEscalations, [escalationId]: false }
+    }
+  }
+
+  // The escalate part's input/output are loosely typed by the AI SDK, so the
+  // casts live here rather than cluttering the template.
+  const escalationCardProps = (part: { input?: unknown; output?: unknown }) => {
+    const output = part.output as { escalationId?: string } | undefined
+    const input = part.input as { title?: string; summary?: string } | undefined
+    const escalationId = output?.escalationId
+    return {
+      escalationId,
+      title: input?.title,
+      summary: input?.summary,
+      resolution:
+        (escalationId && escalationState?.[escalationId]?.resolution) ||
+        "pending",
+    }
+  }
+
   let API = $state(
     createAPIClient({
       attachHeaders: headers => {
@@ -322,6 +375,48 @@
   let messages = $derived(chatInstance.messages)
   let lastMessage = $derived(messages[messages.length - 1])
 
+  // Notify the consumer of every unseen parked escalation. The escalate part's
+  // output stays frozen at pending_approval, so notifying only the first would
+  // shadow later escalations.
+  const notifiedEscalations = new Set<string>()
+  let pendingEscalationIds = $derived.by(() => {
+    const ids: string[] = []
+    for (const message of messages) {
+      for (const part of message.parts ?? []) {
+        if (
+          !isToolUIPart(part) ||
+          getToolName(part) !== "escalate" ||
+          part.state !== "output-available"
+        ) {
+          continue
+        }
+        const output = part.output as
+          | { status?: string; escalationId?: string }
+          | undefined
+        if (output?.status === "pending_approval" && output.escalationId) {
+          ids.push(output.escalationId)
+        }
+      }
+    }
+    return ids
+  })
+  $effect(() => {
+    for (const escalationId of pendingEscalationIds) {
+      if (!notifiedEscalations.has(escalationId)) {
+        notifiedEscalations.add(escalationId)
+        onEscalationPending?.({ escalationId })
+      }
+    }
+  })
+
+  // Injects the polled resume outcome as a plain assistant turn - the agent's
+  // own reply self-frames the approval.
+  export function appendAssistantMessage(
+    message: UIMessage<AgentMessageMetadata>
+  ) {
+    chatInstance.messages = [...chatInstance.messages, message]
+  }
+
   let lastAssistantUsage = $derived(
     messages.findLast(m => m.role === "assistant" && m.metadata?.usage)
       ?.metadata?.usage
@@ -678,6 +773,24 @@
             {#each message.parts ?? [] as part, partIndex}
               {#if isTextUIPart(part)}
                 <MarkdownViewer value={part.text} />
+              {:else if isToolUIPart(part) && getToolName(part) === "escalate"}
+                {@const card = escalationCardProps(part)}
+                <EscalationCard
+                  title={card.title}
+                  summary={card.summary}
+                  resolution={card.resolution}
+                  statusMessage={card.escalationId
+                    ? resolveMessages[card.escalationId]
+                    : undefined}
+                  showApproval={showInlineApproval}
+                  resolving={!!card.escalationId &&
+                    !!resolvingEscalations[card.escalationId]}
+                  onApprove={() =>
+                    card.escalationId && handleResolve(card.escalationId, true)}
+                  onReject={() =>
+                    card.escalationId &&
+                    handleResolve(card.escalationId, false)}
+                />
               {:else if isToolUIPart(part)}
                 {@const rawToolName = getToolName(part)}
                 {@const displayToolName = formatToolName(