@budibase/frontend-core 3.42.0 → 3.44.0

package/src/api/chatApps.ts

@@ -1,268 +0,0 @@
-import {
-  ChatAgentRequest,
-  ChatConversation,
-  ChatConversationRequest,
-  CreateChatConversationRequest,
-  FetchChatAppAgentsResponse,
-  ChatApp,
-  ChatAppAgent,
-  FetchAgentHistoryResponse,
-  FetchPublishedChatAppsResponse,
-  UpdateChatAppRequest,
-  AgentMessageMetadata,
-  FetchAgentFileUrlResponse,
-} 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<AgentMessageMetadata>>>
-  deleteChatConversation: (
-    chatConversationId: string,
-    chatAppId: string,
-    agentId?: string
-  ) => Promise<void>
-  fetchChatConversation: (
-    chatAppId: string,
-    chatConversationId: string,
-    agentId?: string
-  ) => Promise<ChatConversation>
-  fetchChatAppAgents: (chatAppId: string) => Promise<FetchChatAppAgentsResponse>
-  fetchChatHistory: (
-    chatAppId: string,
-    agentId?: string
-  ) => Promise<FetchAgentHistoryResponse>
-  fetchChatApp: (workspaceId?: string) => Promise<ChatApp | null>
-  setChatAppAgent: (chatAppId: string, agentId: string) => Promise<ChatAppAgent>
-  fetchChatAppAgentFileUrl: (
-    chatAppId: string,
-    agentId: string,
-    fileId: string,
-    operationId: string
-  ) => Promise<FetchAgentFileUrlResponse>
-  createChatConversation: (
-    chat: CreateChatConversationRequest,
-    workspaceId?: string
-  ) => Promise<ChatConversation>
-  updateChatApp: (chatApp: UpdateChatAppRequest) => Promise<ChatApp>
-  getPublishedChatApps: () => Promise<
-    FetchPublishedChatAppsResponse["chatApps"]
-  >
-}
-
-const getBrowserTimezone = () => {
-  try {
-    return Intl.DateTimeFormat().resolvedOptions().timeZone
-  } catch {
-    return undefined
-  }
-}
-
-const throwOnErrorChunk = () =>
-  new TransformStream<UIMessageChunk, UIMessageChunk>({
-    transform(chunk, controller) {
-      if (chunk.type === "error") {
-        throw new Error(chunk.errorText || "Agent action failed")
-      }
-      controller.enqueue(chunk)
-    },
-  })
-
-const withAgentIdQuery = (url: string, agentId?: string) => {
-  if (!agentId) {
-    return url
-  }
-
-  const query = new URLSearchParams({ agentId })
-  return `${url}?${query.toString()}`
-}
-
-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,
-      timezone: chat.timezone ?? getBrowserTimezone(),
-    }
-    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.WORKSPACE_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,
-    agentId?: string
-  ) => {
-    return await API.delete({
-      url: withAgentIdQuery(
-        `/api/chatapps/${chatAppId}/conversations/${chatConversationId}`,
-        agentId
-      ),
-    })
-  },
-
-  fetchChatConversation: async (
-    chatAppId: string,
-    chatConversationId: string,
-    agentId?: string
-  ) => {
-    return await API.get({
-      url: withAgentIdQuery(
-        `/api/chatapps/${chatAppId}/conversations/${chatConversationId}`,
-        agentId
-      ),
-    })
-  },
-
-  fetchChatAppAgents: async (chatAppId: string) => {
-    return await API.get({
-      url: `/api/chatapps/${chatAppId}/agents`,
-    })
-  },
-
-  fetchChatHistory: async (chatAppId: string, agentId?: string) => {
-    return await API.get({
-      url: withAgentIdQuery(
-        `/api/chatapps/${chatAppId}/conversations`,
-        agentId
-      ),
-    })
-  },
-
-  fetchChatApp: async (workspaceId?: string) => {
-    const url = "/api/chatapps"
-    const headers = workspaceId
-      ? {
-          [Header.WORKSPACE_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,
-    })
-  },
-
-  fetchChatAppAgentFileUrl: async (
-    chatAppId: string,
-    agentId: string,
-    fileId: string,
-    operationId: string
-  ) => {
-    if (!operationId) {
-      throw new Error("operationId is required to fetch a chat app agent file")
-    }
-    return await API.get<FetchAgentFileUrlResponse>({
-      url: `/api/chatapps/${chatAppId}/agents/${agentId}/operations/${operationId}/files/${fileId}/url`,
-    })
-  },
-
-  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.WORKSPACE_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,
-    })
-  },
-
-  getPublishedChatApps: async () => {
-    const response = await API.get<FetchPublishedChatAppsResponse>({
-      url: "/api/client/chatapps",
-    })
-    return response.chatApps
-  },
-})

package/src/components/Chatbox/ChatConversationPanel.svelte

@@ -1,401 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte"
-  import { Body, Icon } from "@budibase/bbui"
-  import type { ChatConversation, DraftChatConversation } from "@budibase/types"
-  import Chatbox from "./index.svelte"
-
-  type AgentAvailability =
-    | "no_selection"
-    | "deleted"
-    | "offline"
-    | "disabled"
-    | "ready"
-
-  type ChatConversationLike = ChatConversation | DraftChatConversation
-
-  type EnabledAgentListItem = {
-    agentId: string
-    name?: string
-    icon?: string
-    iconColor?: string
-  }
-
-  export let selectedAgentId: string | null = null
-  export let enabledAgentList: EnabledAgentListItem[] = []
-  export let conversationStarters: { prompt: string }[] = []
-  export let agentAvailability: AgentAvailability = "ready"
-
-  export let chat: ChatConversationLike
-  export let suppressAgentPicker: boolean = false
-  export let workspaceId: string
-  export let initialPrompt: string = ""
-  export let userName: string = ""
-
-  const dispatch = createEventDispatcher<{
-    chatSaved: { chatId?: string; chat: ChatConversationLike }
-    agentSelected: { agentId: string }
-    startChat: { agentId: string; prompt: string }
-  }>()
-
-  const hasChatId = (value: ChatConversationLike) =>
-    value && "_id" in value && Boolean(value._id)
-
-  const buildGreeting = (name: string) => {
-    const currentDate = new Date()
-    const suffix = name ? `, ${name}` : ""
-
-    if (currentDate.getDay() === 1) {
-      return `Happy Monday${suffix}`
-    }
-
-    const isMorning = currentDate.getHours() < 12
-    return `${isMorning ? "Good Morning" : "Good Afternoon"}${suffix}`
-  }
-
-  let readOnlyReason: "disabled" | "deleted" | "offline" | undefined
-
-  let draftPrompt = ""
-  let draftPromptInput: HTMLInputElement | null = null
-
-  $: greetingText = buildGreeting(userName)
-
-  $: visibleAgentList = enabledAgentList.slice(0, 3)
-  $: hasEnabledAgents = enabledAgentList.length > 0
-
-  const getReadOnlyReason = (
-    availability: AgentAvailability
-  ): "disabled" | "deleted" | "offline" | undefined => {
-    switch (availability) {
-      case "deleted":
-        return "deleted"
-      case "offline":
-        return "offline"
-      case "disabled":
-        return "disabled"
-      default:
-        return undefined
-    }
-  }
-
-  $: readOnlyReason = getReadOnlyReason(agentAvailability)
-
-  const selectAgent = (agentId: string) => {
-    dispatch("agentSelected", { agentId })
-  }
-
-  const startChat = () => {
-    const prompt = draftPrompt.trim()
-    if (!prompt) {
-      return
-    }
-
-    const agentId = enabledAgentList[0]?.agentId
-    if (!agentId) {
-      return
-    }
-
-    dispatch("startChat", { agentId, prompt })
-    draftPrompt = ""
-  }
-
-  const handlePromptKeyDown = (event: KeyboardEvent) => {
-    if (event.key !== "Enter") {
-      return
-    }
-
-    event.preventDefault()
-    startChat()
-  }
-
-  onMount(() => {
-    draftPromptInput?.focus()
-  })
-</script>
-
-<div class="chat-wrapper">
-  {#if selectedAgentId}
-    {#if hasChatId(chat)}
-      <div class="chat-header">
-        <div class="chat-header-title">
-          <Body size="S">{chat.title || "Untitled Chat"}</Body>
-        </div>
-      </div>
-    {/if}
-
-    <Chatbox
-      bind:chat
-      {workspaceId}
-      {conversationStarters}
-      {initialPrompt}
-      readOnly={Boolean(readOnlyReason)}
-      {readOnlyReason}
-      onchatsaved={event => dispatch("chatSaved", event.detail)}
-    />
-  {:else if !suppressAgentPicker}
-    <div class="chat-empty">
-      <div class="chat-empty-greeting">
-        <Body size="XL" weight="600">
-          {greetingText}
-        </Body>
-      </div>
-      <div class="chat-empty-input" role="presentation">
-        <input
-          class="chat-empty-input-field"
-          type="text"
-          placeholder="How can I help you today?"
-          bind:this={draftPromptInput}
-          bind:value={draftPrompt}
-          on:keydown={handlePromptKeyDown}
-          disabled={!hasEnabledAgents}
-        />
-        <button
-          class="chat-empty-input-action"
-          type="button"
-          on:click={startChat}
-          disabled={!hasEnabledAgents}
-          aria-label="Start chat"
-        >
-          <Icon name="arrow-up" size="S" />
-        </button>
-      </div>
-      <div class="chat-empty-grid">
-        {#if visibleAgentList.length}
-          {#each visibleAgentList as agent (agent.agentId)}
-            <button
-              class="chat-empty-card"
-              class:chat-empty-card-single={visibleAgentList.length === 1}
-              on:click={() => selectAgent(agent.agentId)}
-              style={`--agent-icon-color:${
-                agent.iconColor ||
-                "var(--spectrum-semantic-cta-color-background-default)"
-              };`}
-            >
-              <div class="chat-empty-card-head">
-                <div class="chat-empty-card-icon">
-                  <Icon
-                    name={agent.icon || "SideKick"}
-                    size="S"
-                    color="var(--agent-icon-color)"
-                  />
-                </div>
-                <Body size="S" weight="500">
-                  {agent.name || "Unknown agent"}
-                </Body>
-              </div>
-              <div class="chat-empty-card-subtitle">
-                <Body size="XS" color="var(--spectrum-global-color-gray-600)">
-                  Start a chat with this agent.
-                </Body>
-              </div>
-            </button>
-          {/each}
-        {:else}
-          <Body size="S" color="var(--spectrum-global-color-gray-500)">
-            No enabled agents
-          </Body>
-        {/if}
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .chat-wrapper {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    padding: 0 32px 32px 32px;
-    box-sizing: border-box;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  .chat-header {
-    width: 100%;
-    padding: var(--spacing-l) 0 var(--spacing-l);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacing-m);
-    border-bottom: var(--border-light);
-  }
-
-  .chat-header-title {
-    min-width: 0;
-    flex: 1 1 auto;
-  }
-
-  .chat-header-title :global(p) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 14px;
-    line-height: 17px;
-    letter-spacing: 0;
-    font-weight: 400;
-    color: var(--spectrum-alias-text-color);
-  }
-
-  .chat-empty {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 32px;
-    padding: var(--spacing-xxl);
-    text-align: center;
-  }
-
-  .chat-empty-greeting :global(p) {
-    color: var(--spectrum-alias-text-color);
-    font-size: 28px;
-    line-height: 34px;
-  }
-
-  .chat-empty-input {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-m);
-    width: 600px;
-    padding: 10px;
-    padding-left: 20px;
-    border-radius: 999px;
-    background: var(--spectrum-alias-background-color-secondary);
-    color: var(--spectrum-alias-text-color);
-    border: 1px solid var(--spectrum-alias-border-color);
-  }
-
-  .chat-empty-input-field {
-    flex: 1;
-    font-size: 16px;
-    color: var(--spectrum-alias-text-color);
-    background: transparent;
-    border: none;
-    outline: none;
-    font: inherit;
-  }
-
-  .chat-empty-input-field::placeholder {
-    color: var(--spectrum-alias-text-color-disabled);
-  }
-
-  .chat-empty-input-action {
-    width: 32px;
-    height: 32px;
-    border-radius: 999px;
-    background: var(--spectrum-semantic-cta-color-background-default);
-    color: var(--spectrum-global-color-gray-50);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-  }
-
-  .chat-empty-input-action:disabled,
-  .chat-empty-input-field:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .chat-empty-input-action:hover {
-    background: var(--spectrum-semantic-cta-color-background-hover);
-  }
-
-  .chat-empty-grid {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    width: min(720px, 100%);
-    align-items: center;
-    justify-content: center;
-  }
-
-  .chat-empty-card {
-    border: 1px solid var(--spectrum-alias-border-color);
-    width: 240px;
-    border-radius: 16px;
-    padding: 0;
-    background: var(--spectrum-alias-background-color-primary);
-    color: var(--spectrum-alias-text-color);
-    font: inherit;
-    cursor: pointer;
-    text-align: left;
-    overflow: hidden;
-    transform: translateY(var(--card-offset, 0px))
-      rotate(var(--card-rotation, 0deg));
-    transition:
-      border-color 150ms ease,
-      transform 150ms ease;
-  }
-
-  .chat-empty-card:hover {
-    border-color: var(--spectrum-alias-border-color-hover);
-    transform: translateY(calc(var(--card-offset, 0px) - 3px))
-      rotate(var(--card-rotation, 0deg));
-  }
-
-  .chat-empty-card:first-child {
-    --card-rotation: -6deg;
-    --card-offset: 12px;
-  }
-
-  .chat-empty-card:last-child {
-    --card-rotation: 6deg;
-    --card-offset: 12px;
-  }
-
-  .chat-empty-card.chat-empty-card-single {
-    --card-rotation: 0deg;
-    --card-offset: 0px;
-  }
-
-  .chat-empty-card-head {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-s);
-    padding: var(--spacing-m);
-    background-color: var(--spectrum-alias-background-color-secondary);
-    color: var(--spectrum-alias-text-color);
-    border-bottom: 1px solid var(--spectrum-alias-border-color);
-  }
-
-  .chat-empty-card-icon {
-    width: 28px;
-    height: 28px;
-    border-radius: 8px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-  }
-
-  .chat-empty-card-subtitle {
-    padding: var(--spacing-m);
-  }
-
-  @media (max-width: 1000px) {
-    .chat-wrapper {
-      padding: 0 var(--spacing-l) var(--spacing-l);
-    }
-
-    .chat-empty-input {
-      width: min(600px, 100%);
-    }
-
-    .chat-empty-grid {
-      flex-direction: column;
-    }
-
-    .chat-empty-card {
-      width: min(360px, 100%);
-    }
-
-    .chat-empty-card:first-child,
-    .chat-empty-card:last-child {
-      --card-rotation: 0deg;
-      --card-offset: 0px;
-    }
-  }
-</style>