@budibase/frontend-core 3.28.3 → 3.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.28.3",
+  "version": "3.30.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -24,5 +24,5 @@
   "devDependencies": {
     "vitest": "^3.2.4"
   },
-  "gitHead": "40bc76dc62aa2c1876e442d464c17aa388630975"
+  "gitHead": "58456cc695d2c71a354bcf5c064943b247ad4969"
 }

package/src/api/agents.ts

@@ -7,6 +7,8 @@ import {
   FetchAgentsResponse,
   SyncAgentDiscordCommandsRequest,
   SyncAgentDiscordCommandsResponse,
+  ToggleAgentDiscordRequest,
+  ToggleAgentDiscordResponse,
   ToolMetadata,
   UpdateAgentRequest,
   UpdateAgentResponse,
@@ -34,6 +36,10 @@ export interface AgentEndpoints {
     agentId: string,
     body?: SyncAgentDiscordCommandsRequest
   ) => Promise<SyncAgentDiscordCommandsResponse>
+  toggleAgentDiscordDeployment: (
+    agentId: string,
+    enabled: boolean
+  ) => Promise<ToggleAgentDiscordResponse>
 }
 
 export const buildAgentEndpoints = (API: BaseAPIClient): AgentEndpoints => ({
@@ -108,4 +114,14 @@ export const buildAgentEndpoints = (API: BaseAPIClient): AgentEndpoints => ({
       body,
     })
   },
+
+  toggleAgentDiscordDeployment: async (agentId: string, enabled: boolean) => {
+    return await API.post<
+      ToggleAgentDiscordRequest,
+      ToggleAgentDiscordResponse
+    >({
+      url: `/api/agent/${agentId}/discord/toggle`,
+      body: { enabled },
+    })
+  },
 })

package/src/api/chatApps.ts

@@ -3,9 +3,11 @@ import {
   ChatConversation,
   ChatConversationRequest,
   CreateChatConversationRequest,
+  FetchChatAppAgentsResponse,
   ChatApp,
   ChatAppAgent,
   FetchAgentHistoryResponse,
+  FetchPublishedChatAppsResponse,
   UpdateChatAppRequest,
   AgentMessageMetadata,
 } from "@budibase/types"
@@ -27,6 +29,7 @@ export interface ChatAppEndpoints {
     chatAppId: string,
     chatConversationId: string
   ) => Promise<ChatConversation>
+  fetchChatAppAgents: (chatAppId: string) => Promise<FetchChatAppAgentsResponse>
   fetchChatHistory: (chatAppId: string) => Promise<FetchAgentHistoryResponse>
   fetchChatApp: (workspaceId?: string) => Promise<ChatApp | null>
   setChatAppAgent: (chatAppId: string, agentId: string) => Promise<ChatAppAgent>
@@ -35,6 +38,9 @@ export interface ChatAppEndpoints {
     workspaceId?: string
   ) => Promise<ChatConversation>
   updateChatApp: (chatApp: UpdateChatAppRequest) => Promise<ChatApp>
+  getPublishedChatApps: () => Promise<
+    FetchPublishedChatAppsResponse["chatApps"]
+  >
 }
 
 const throwOnErrorChunk = () =>
@@ -112,6 +118,12 @@ export const buildChatAppEndpoints = (
     })
   },
 
+  fetchChatAppAgents: async (chatAppId: string) => {
+    return await API.get({
+      url: `/api/chatapps/${chatAppId}/agents`,
+    })
+  },
+
   fetchChatHistory: async (chatAppId: string) => {
     return await API.get({
       url: `/api/chatapps/${chatAppId}/conversations`,
@@ -189,4 +201,11 @@ export const buildChatAppEndpoints = (
       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

@@ -0,0 +1,442 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount } from "svelte"
+  import { Body, Button, Icon, ProgressCircle } from "@budibase/bbui"
+  import type { ChatConversation, DraftChatConversation } from "@budibase/types"
+  import Chatbox from "./index.svelte"
+
+  type ChatConversationLike = ChatConversation | DraftChatConversation
+
+  type EnabledAgentListItem = {
+    agentId: string
+    name?: string
+    icon?: string
+    iconColor?: string
+  }
+
+  export let selectedAgentId: string | null = null
+  export let selectedAgentName: string = ""
+  export let enabledAgentList: EnabledAgentListItem[] = []
+  export let conversationStarters: { prompt: string }[] = []
+  export let isAgentKnown: boolean = true
+  export let isAgentLive: boolean = true
+
+  export let chat: ChatConversationLike
+  export let loading: boolean = false
+  export let deletingChat: boolean = false
+  export let workspaceId: string
+  export let initialPrompt: string = ""
+  export let userName: string = ""
+
+  const dispatch = createEventDispatcher<{
+    chatSaved: { chatId?: string; chat: ChatConversationLike }
+    deleteChat: undefined
+    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 getAgentStatus = (
+    agentId: string | null,
+    agents: EnabledAgentListItem[],
+    agentKnown: boolean,
+    agentLive: boolean
+  ): {
+    isAgentEnabled: boolean
+    readOnlyReason: "disabled" | "deleted" | "offline" | undefined
+  } => {
+    if (!agentId) {
+      return { isAgentEnabled: false, readOnlyReason: undefined }
+    }
+
+    if (!agentKnown) {
+      return { isAgentEnabled: false, readOnlyReason: "deleted" }
+    }
+
+    if (!agentLive) {
+      return { isAgentEnabled: false, readOnlyReason: "offline" }
+    }
+
+    const isAgentEnabled = agents.some(agent => agent.agentId === agentId)
+    return {
+      isAgentEnabled,
+      readOnlyReason: isAgentEnabled ? undefined : "disabled",
+    }
+  }
+
+  $: ({ readOnlyReason } = getAgentStatus(
+    selectedAgentId,
+    enabledAgentList,
+    isAgentKnown,
+    isAgentLive
+  ))
+
+  const deleteChat = () => {
+    dispatch("deleteChat")
+  }
+
+  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}
+    <div class="chat-header">
+      <div class="chat-header-agent">
+        <Body size="S">
+          {selectedAgentName || "Unknown agent"}
+        </Body>
+      </div>
+
+      {#if hasChatId(chat)}
+        <Button
+          quiet
+          warning
+          disabled={deletingChat || loading}
+          on:click={deleteChat}
+        >
+          <span class="delete-button-content">
+            {#if deletingChat}
+              <ProgressCircle size="S" />
+              Deleting...
+            {:else}
+              <Icon name="trash" size="S" />
+              Delete chat
+            {/if}
+          </span>
+        </Button>
+      {/if}
+    </div>
+
+    <Chatbox
+      bind:chat
+      {workspaceId}
+      {conversationStarters}
+      {initialPrompt}
+      readOnly={Boolean(readOnlyReason)}
+      {readOnlyReason}
+      onchatsaved={event => dispatch("chatSaved", event.detail)}
+    />
+  {:else}
+    <div class="chat-empty">
+      <div class="chat-empty-greeting">
+        <Body size="XL" weight="600" serif>
+          {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-dark);
+  }
+
+  .chat-header-agent {
+    display: flex;
+    align-items: center;
+  }
+
+  .chat-header-agent :global(p) {
+    font-size: 14px;
+    line-height: 17px;
+    letter-spacing: 0;
+    font-weight: 400;
+    color: var(--spectrum-alias-text-color);
+  }
+
+  .delete-button-content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  .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>

package/src/components/Chatbox/ChatNavigationPanel.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import { Body, Icon } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  type EnabledAgentListItem = {
+    agentId: string
+    name?: string
+    isDefault?: boolean
+    icon?: string
+    iconColor?: string
+  }
+
+  type ConversationListItem = {
+    _id?: string
+    title?: string
+  }
+
+  export let enabledAgentList: EnabledAgentListItem[] = []
+  export let conversationHistory: ConversationListItem[] = []
+  export let selectedConversationId: string | undefined
+
+  $: defaultAgent =
+    enabledAgentList.find(agent => agent.isDefault) || enabledAgentList[0]
+
+  const dispatch = createEventDispatcher<{
+    agentSelected: { agentId: string }
+    conversationSelected: { conversationId: string }
+  }>()
+
+  const selectAgent = (agentId: string) => {
+    dispatch("agentSelected", { agentId })
+  }
+
+  const selectConversation = (conversationId: string) => {
+    dispatch("conversationSelected", { conversationId })
+  }
+</script>
+
+<div class="chat-nav-shell">
+  <div class="chat-nav-content">
+    {#if defaultAgent?.agentId}
+      <div class="list-section">
+        <button
+          class="new-chat"
+          on:click={() => selectAgent(defaultAgent.agentId)}
+        >
+          <span class="new-chat-icon">
+            <Icon name="plus" size="S" />
+          </span>
+          <span class="new-chat-label">New chat</span>
+        </button>
+      </div>
+    {/if}
+
+    <div class="list-section">
+      <div class="list-title">Agents</div>
+      {#if enabledAgentList.length}
+        {#each enabledAgentList as agent (agent.agentId)}
+          <button
+            class="list-item list-item-button"
+            on:click={() => selectAgent(agent.agentId)}
+          >
+            <span class="list-item-icon">
+              <Icon name={agent.icon || "robot"} size="S" />
+            </span>
+            {agent.name}
+          </button>
+        {/each}
+      {:else}
+        <Body size="XS" color="var(--spectrum-global-color-gray-500)">
+          No agents
+        </Body>
+      {/if}
+    </div>
+
+    <div class="list-section">
+      <div class="list-title">Recent Chats</div>
+      {#if conversationHistory.length}
+        {#each conversationHistory as conversation}
+          {#if conversation._id}
+            <button
+              class="list-item list-item-button"
+              class:selected={selectedConversationId === conversation._id}
+              on:click={() => selectConversation(conversation._id!)}
+            >
+              {conversation.title || "Untitled Chat"}
+            </button>
+          {/if}
+        {/each}
+      {:else}
+        <Body size="XS" color="var(--spectrum-global-color-gray-500)">
+          No recent chats
+        </Body>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .chat-nav-shell {
+    display: flex;
+    width: 260px;
+    min-width: 260px;
+    border-right: var(--border-light);
+    background: transparent;
+  }
+
+  .chat-nav-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    width: 100%;
+  }
+
+  .list-section {
+    padding: var(--spacing-m);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xxs);
+  }
+
+  .list-section + .list-section {
+    padding-top: 0;
+  }
+
+  .new-chat {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+    background: transparent;
+    border: none;
+    padding: var(--spacing-xs) 0;
+    font: inherit;
+    color: var(--spectrum-global-color-gray-700);
+    text-align: left;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .new-chat-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--spectrum-semantic-cta-color-background-default);
+    color: var(--spectrum-global-color-gray-50);
+  }
+
+  .new-chat-label {
+    font-size: 14px;
+    color: var(--spectrum-global-color-gray-800);
+  }
+
+  .new-chat:hover .new-chat-icon {
+    background: var(--spectrum-semantic-cta-color-background-hover);
+  }
+
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+    background: transparent;
+    border: none;
+    padding: var(--spacing-xs) 0;
+    font: inherit;
+    color: var(--spectrum-global-color-gray-700);
+    text-align: left;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .list-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .list-item-button {
+    cursor: pointer;
+  }
+
+  .list-item-button:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
+
+  .list-item.selected {
+    color: var(--spectrum-global-color-gray-900);
+    font-weight: 600;
+  }
+
+  .list-title {
+    font-size: 14px;
+    line-height: 17px;
+    letter-spacing: 0;
+    color: var(--spectrum-global-color-gray-600);
+    font-weight: 400;
+    margin-bottom: var(--spacing-xs);
+  }
+</style>

package/src/components/Chatbox/index.svelte

@@ -221,6 +221,7 @@
   let isBusy = $derived(
     chatInstance.status === "streaming" || chatInstance.status === "submitted"
   )
+  let canStart = $derived(inputValue.trim().length > 0)
   let hasMessages = $derived(Boolean(messages?.length))
   let showConversationStarters = $derived(
     !isBusy &&
@@ -372,6 +373,14 @@
     chatInstance.sendMessage({ text })
   }
 
+  const handlePromptAction = async () => {
+    if (isBusy) {
+      await chatInstance.stop()
+      return
+    }
+    await sendMessage()
+  }
+
   const toggleTool = (toolId: string) => {
     expandedTools = { ...expandedTools, [toolId]: !expandedTools[toolId] }
   }
@@ -632,14 +641,30 @@
     </div>
   {:else}
     <div class="input-wrapper">
-      <textarea
-        bind:value={inputValue}
-        bind:this={textareaElement}
-        class="input spectrum-Textfield-input"
-        onkeydown={handleKeyDown}
-        placeholder="Ask anything"
-        disabled={isBusy}
-      ></textarea>
+      <div class="input-container">
+        <textarea
+          bind:value={inputValue}
+          bind:this={textareaElement}
+          class="input spectrum-Textfield-input"
+          onkeydown={handleKeyDown}
+          placeholder="Ask..."
+          disabled={isBusy}
+        ></textarea>
+        <button
+          type="button"
+          class="prompt-action"
+          class:running={isBusy}
+          onclick={handlePromptAction}
+          aria-label={isBusy ? "Pause response" : "Start response"}
+          disabled={!isBusy && !canStart}
+        >
+          {#if isBusy}
+            <Icon name="stop" size="M" weight="fill" color="#ffffff" />
+          {:else}
+            <Icon name="arrow-up" size="M" weight="bold" color="#111111" />
+          {/if}
+        </button>
+      </div>
     </div>
   {/if}
 </div>
@@ -733,7 +758,7 @@
   .message.user {
     border-radius: 8px;
     align-self: flex-end;
-    background-color: #215f9e33;
+    background-color: var(--spectrum-alias-background-color-secondary);
     font-size: 14px;
     color: var(--spectrum-global-color-gray-800);
   }
@@ -767,29 +792,65 @@
     text-align: center;
   }
 
+  .input-container {
+    position: relative;
+    width: 100%;
+  }
+
   .input {
     width: 100%;
-    height: 100px;
+    height: 80px;
     top: 0;
     resize: none;
     padding: 20px;
     font-size: 16px;
     background-color: var(--spectrum-global-color-gray-200);
-    color: var(--grey-9);
+    color: var(--spectrum-alias-text-color);
     border-radius: 10px;
     border: 1px solid var(--spectrum-global-color-gray-300) !important;
     outline: none;
-    min-height: 100px;
+    min-height: 80px;
   }
 
   .input:focus {
-    border: 1px solid #215f9e33 !important;
+    border: 1px solid var(--spectrum-alias-border-color-mouse-focus) !important;
   }
 
   .input::placeholder {
     color: var(--spectrum-global-color-gray-600);
   }
 
+  .prompt-action {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background: #f2f2f2;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.15s ease;
+  }
+
+  .prompt-action:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+
+  .prompt-action.running {
+    background: rgba(255, 255, 255, 0.14);
+  }
+
+  .prompt-action:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
   /* Style the markdown tool sections in assistant messages */
   :global(.assistant strong) {
     color: var(--spectrum-global-color-gray-900);

package/src/components/index.ts

@@ -11,3 +11,5 @@ export { default as ChangePasswordModal } from "./ChangePasswordModal.svelte"
 export { default as ProfileModal } from "./ProfileModal.svelte"
 export { default as PasswordRepeatInput } from "./PasswordRepeatInput.svelte"
 export { default as Chatbox } from "./Chatbox/index.svelte"
+export { default as ChatNavigationPanel } from "./Chatbox/ChatNavigationPanel.svelte"
+export { default as ChatConversationPanel } from "./Chatbox/ChatConversationPanel.svelte"