@budibase/frontend-core 3.26.0 → 3.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.26.0",
+  "version": "3.26.1",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -19,5 +19,5 @@
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "94f6d3fcbeb2043d8144dc3be0cf560b71dd35dc"
+  "gitHead": "3ee1bf769467a216a2e44443e01810cb1b076dfc"
 }

package/src/components/Chatbox/index.svelte

@@ -30,6 +30,7 @@
     workspaceId: string
     chat: ChatConversationLike
     persistConversation?: boolean
+    conversationStarters?: { prompt: string }[]
     onchatsaved?: (_event: {
       detail: { chatId?: string; chat: ChatConversationLike }
     }) => void
@@ -39,6 +40,7 @@
     workspaceId,
     chat = $bindable(),
     persistConversation = true,
+    conversationStarters = [],
     onchatsaved,
   }: Props = $props()
 
@@ -60,6 +62,15 @@
   let resolvedChatAppId = $state<string | undefined>()
   let resolvedConversationId = $state<string | undefined>()
 
+  const applyConversationStarter = async (starterPrompt: string) => {
+    if (isBusy) {
+      return
+    }
+    inputValue = starterPrompt
+    await sendMessage()
+    tick().then(() => textareaElement?.focus())
+  }
+
   const chatInstance = new Chat<UIMessage<AgentMessageMetadata>>({
     transport: new DefaultChatTransport({
       headers: () => ({ [Header.APP_ID]: workspaceId }),
@@ -116,6 +127,10 @@
   let isBusy = $derived(
     chatInstance.status === "streaming" || chatInstance.status === "submitted"
   )
+  let hasMessages = $derived(Boolean(chat?.messages?.length))
+  let showConversationStarters = $derived(
+    !isBusy && !hasMessages && conversationStarters.length > 0
+  )
 
   let lastChatId = $state<string | undefined>(chat?._id)
   $effect(() => {
@@ -285,6 +300,22 @@
 
 <div class="chat-area" bind:this={chatAreaElement}>
   <div class="chatbox">
+    {#if showConversationStarters}
+      <div class="starter-section">
+        <div class="starter-title">Conversation starters</div>
+        <div class="starter-grid">
+          {#each conversationStarters as starter, index (index)}
+            <button
+              type="button"
+              class="starter-card"
+              onclick={() => applyConversationStarter(starter.prompt)}
+            >
+              {starter.prompt}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
     {#each messages as message (message.id)}
       {#if message.role === "user"}
         <div class="message user">
@@ -430,6 +461,41 @@
     padding: 48px 0 24px 0;
   }
 
+  .starter-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+  }
+
+  .starter-title {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .starter-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--spacing-s);
+  }
+
+  .starter-card {
+    border: 1px solid var(--grey-3);
+    border-radius: 12px;
+    padding: var(--spacing-m);
+    background: var(--grey-2);
+    color: var(--spectrum-global-color-gray-900);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .starter-card:hover {
+    border-color: var(--grey-4);
+    background: var(--grey-1);
+  }
+
   .message {
     display: flex;
     flex-direction: column;