@adminforth/agent 2.9.1 → 2.10.0

package/README.md

@@ -424,6 +424,10 @@ approval interrupt: generation pauses and the UI shows an approve/reject prompt.
 resolves it via `POST /agent/approval`, and the run resumes (or, on reject, the model is
 told the action was declined).
 
+The prompt names the resource and columns by their labels and lists every value the tool
+would write; for `update_record` each field shows its current value next to the new one.
+Values of `masked` and `backendOnly` columns are never shown.
+
 Where the pending approval lives depends on your setup: with `checkpointResource` configured
 the LangGraph checkpoint is authoritative, so a resume survives a restart and works across
 instances; with the in-memory fallback the state is held per process instance.

package/dist/application/runTurnUseCase.d.ts

@@ -3,6 +3,7 @@ import type { AgentSessionStore } from "../persistence/sessionStore.js";
 import type { SteerBuffer } from "../domain/steerBuffer.js";
 import type { PluginOptions } from "../types.js";
 import type { LlmPort } from "./ports.js";
+import { type ApprovalDescription } from "../tools/approvalFormatter.js";
 import type { BaseAgentTurnInput, DebugSink, HandleTurnInput, HandleEditTurnInput, PendingInterrupt, RunAndPersistAgentResponseInput, RunAndPersistAgentResponseResult } from "../domain/turnTypes.js";
 /**
  * Build the provider-agnostic resume payload for a human-in-the-loop turn.
@@ -78,7 +79,7 @@ export declare class RunTurnUseCase {
      * page reload would otherwise leave the user with no way to answer it. Empty when
      * nothing is pending.
      */
-    getPendingApprovals(sessionId: string, modeName?: string | null): Promise<string[]>;
+    getPendingApprovals(sessionId: string, modeName?: string | null): Promise<ApprovalDescription[]>;
     private requiresSessionOwnership;
     /** Verify the session exists and belongs to the requesting admin user. */
     assertSessionOwnership(sessionId: string, adminUser: BaseAgentTurnInput["adminUser"]): Promise<void>;

package/dist/application/runTurnUseCase.js

@@ -125,9 +125,9 @@ export class RunTurnUseCase {
     /** Describe pending tool calls in plain language an admin (not a developer) can act on. */
     describeApprovals(interrupts) {
         const adminforth = this.deps.getAdminforth();
-        return interrupts
+        return Promise.all(interrupts
             .flatMap((interrupt) => interrupt.requests)
-            .map((request) => formatApprovalRequest(adminforth, request));
+            .map((request) => formatApprovalRequest(adminforth, request)));
     }
     /**
      * Describe what a session is still waiting for approval on, so a client that (re)loads
@@ -322,7 +322,7 @@ export class RunTurnUseCase {
                 type: "interrupt",
                 sessionId: prepared.sessionId,
                 interrupt,
-                approvals: this.describeApprovals(descriptors),
+                approvals: yield this.describeApprovals(descriptors),
             }));
         });
     }

package/dist/custom/ChatFooter.vue

@@ -1,17 +1,18 @@
 <template>
   <div
-    ref="promptInput" 
-    class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
-    :style="{ 
+    ref="promptInput"
+    class="w-full mb-3 px-3 relative translate-x-[-50%] left-1/2"
+    :style="{
       maxWidth: agentStore.isFullScreen ? remToPx(agentStore.MAX_WIDTH)+'px' : '100%',
       transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
-    }"            
+    }"
   >
     <SteerQueue />
     <!-- <SteerDebugPanel /> -->
     <div
-      class="w-full border rounded-lg flex flex-col"
-      :class="agentStore.isAudioChatMode ? 'border-none mt-8' : 'border dark:bg-gray-700'"
+      class="w-full flex flex-col rounded-2xl border shadow-sm transition-colors duration-150
+        border-gray-300 bg-white focus-within:border-gray-400
+        dark:border-gray-600 dark:bg-gray-800 dark:focus-within:border-gray-500"
     >
       <textarea
         v-if="!agentStore.isAudioChatMode"
@@ -20,36 +21,42 @@
         rows="1"
         @input="autoResize"
         :class="[
-          'h-8 px-4 py-3 rounded-xl rounded-b-none w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
+          `block w-full px-3.5 pt-3 pb-1 resize-none overflow-hidden bg-transparent border-none text-sm leading-6
+            focus:outline-none focus:ring-0
+            text-lightInputText placeholder:text-gray-500 dark:text-darkInputText dark:placeholder:text-gray-400`,
           { '!text-base': coreStore.isIos }
         ]"
         :placeholder="placeholderText"
         @keydown.enter.exact.prevent="sendMessage"
         @keydown.esc="onEscape"
       />
-      <div class="flex items-center justify-between px-2 py-1">
+      <!-- in audio chat mode the voice button is centered between the mode picker and an empty column -->
       <div
-        v-if="agentStore.availableModes.length > 1"
-        ref="modeMenu"
-        class="relative"
+        class="items-center gap-1 px-2 pb-2"
+        :class="agentStore.isAudioChatMode ? 'grid grid-cols-[1fr_auto_1fr] pt-2' : 'flex pt-1'"
       >
-        <button
-          aria-label="Select mode"
-          class="flex px-2 py-1 items-center text-sm justify-center 
-            rounded-md bg-white text-lightListTableHeadingText 
-            transition-colors duration-200 hover:bg-gray-100 
-            dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
-          :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
-          title="Select mode"
-          type="button"
-          @click="toggleModeMenu"
+        <div
+          v-if="agentStore.availableModes.length > 1"
+          ref="modeMenu"
+          class="relative justify-self-start"
         >
-          {{ agentStore.activeModeName }}
-          <IconAngleDownOutline 
-            class="w-4 h-4 ml-1 transition-transform duration-200" 
-            :class="isModeMenuOpen ? '!rotate-180' : '!rotate-0'"
-          />
-        </button>
+          <button
+            aria-label="Select mode"
+            class="flex items-center gap-1.5 h-7 pl-2 pr-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors duration-150
+              text-gray-700 hover:bg-gray-100
+              dark:text-gray-200 dark:hover:bg-gray-700"
+            :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
+            title="Select mode"
+            type="button"
+            @click="toggleModeMenu"
+          >
+            <IconSparklesSolid class="w-3.5 h-3.5 text-lightPrimary dark:text-darkPrimary" />
+            {{ agentStore.activeModeName }}
+            <IconChevronDown
+              class="w-3.5 h-3.5 transition-transform duration-200"
+              :class="isModeMenuOpen ? 'rotate-180' : 'rotate-0'"
+            />
+          </button>
           <Transition
             enter-active-class="transition ease-out duration-200"
             enter-from-class="opacity-0 scale-95"
@@ -58,69 +65,75 @@
             leave-from-class="opacity-100 scale-100"
             leave-to-class="opacity-0 scale-95"
           >
-          <div
-            v-if="isModeMenuOpen"
-            class="absolute z-20 bottom-full left-0 mb-2 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
-          >
+            <div
+              v-if="isModeMenuOpen"
+              class="absolute z-20 bottom-full left-0 mb-2 min-w-44 p-1 rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
+            >
+              <button
+                v-for="mode in agentStore.availableModes"
+                :key="mode.name"
+                class="flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-left text-sm transition-colors duration-150
+                  text-lightInputText hover:bg-gray-100 dark:text-darkInputText dark:hover:bg-gray-700"
+                type="button"
+                @click="selectMode(mode.name)"
+              >
+                {{ mode.name }}
+                <IconCheck
+                  v-if="mode.name === agentStore.activeModeName"
+                  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
+                />
+              </button>
+            </div>
+          </Transition>
+        </div>
+        <div
+          class="ml-auto flex items-center gap-1"
+          :class="agentStore.isAudioChatMode ? 'col-start-2' : ''"
+        >
+          <div v-if="props.meta.hasAudioAdapter" v-show="!agentStore.isEditingMessage" class="contents">
+            <MicrophoneButton />
+          </div>
+          <template v-if="!agentStore.isAudioChatMode">
+            <EditActionButtons
+              v-if="agentStore.isEditingMessage"
+              :confirm-disabled="!agentStore.trimmedUserMessage"
+              @cancel="cancelEdit"
+              @confirm="sendMessage"
+            />
             <button
-              v-for="mode in agentStore.availableModes"
-              :key="mode.name"
-              class="block w-full px-3 py-2 text-left text-sm text-lightInputText transition-colors duration-150 hover:bg-gray-100 dark:text-darkInputText dark:hover:bg-gray-700"
-              :class="mode.name === agentStore.activeModeName ? 'bg-gray-100 dark:bg-gray-700' : ''"
+              v-else-if="!agentStore.isResponseInProgress"
               type="button"
-              @click="selectMode(mode.name)"
+              :class="ROUND_PRIMARY_BUTTON_CLASSES"
+              :disabled="!agentStore.trimmedUserMessage"
+              :title="$t('Send message')"
+              :aria-label="$t('Send message')"
+              @click="sendMessage"
             >
-              {{ mode.name }}
+              <IconArrowUp class="w-4 h-4" />
             </button>
-          </div>
-        </Transition>
-      </div>
-      <div v-if="props.meta.hasAudioAdapter" v-show="!agentStore.isEditingMessage" class="contents">
-        <MicrophoneButton />
-      </div>
-      <template v-if="!agentStore.isAudioChatMode">
-        <template v-if="agentStore.isEditingMessage">
-          <EditActionButtons
-            :confirm-disabled="!agentStore.trimmedUserMessage"
-            @cancel="cancelEdit"
-            @confirm="sendMessage"
-          />
-        </template>
-        <template v-else>
-          <Button
-            v-if="!agentStore.isResponseInProgress"
-            class=" !p-0 h-7 w-7 transition-opacity duration-200"
-            @click="sendMessage"
-            :disabled="!agentStore.trimmedUserMessage"
-          >
-            <IconArrowUpOutline
-              class="w-6 h-6
-                text-white"
-            />
-          </Button>
-          <Button
-            v-else
-            class="right-4 bottom-2 !p-0 h-7 w-7"
-            @click="stopCurrentRequest"
-          >
-            <div
-              class="w-2.5 h-2.5 bg-white rounded-sm"
-            />
-          </Button>
-        </template>
-      </template>
+            <button
+              v-else
+              type="button"
+              :class="ROUND_PRIMARY_BUTTON_CLASSES"
+              :title="$t('Stop')"
+              :aria-label="$t('Stop')"
+              @click="stopCurrentRequest"
+            >
+              <span class="w-2.5 h-2.5 rounded-sm bg-current" />
+            </button>
+          </template>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { IconArrowUpOutline, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
-import { useTemplateRef, onMounted, ref, onUnmounted, watch, computed } from 'vue';
+import { IconArrowUp, IconCheck, IconChevronDown, IconSparklesSolid } from '@iconify-prerendered/vue-heroicons';
+import { useTemplateRef, onMounted, ref, watch, computed } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import { useAgentStore } from './composables/useAgentStore';
 import { useAgentTransitions } from './composables/useAgentTransitions';
-import { Button } from '@/afcl';
 import { useCoreStore } from '@/stores/core';
 import { remToPx } from './utils';
 import MicrophoneButton from './speech_recognition_frontend/MicrophoneButon.vue';
@@ -143,6 +156,12 @@ const props = defineProps<{
   conversationAreaRef: any
 }>();
 
+const ROUND_PRIMARY_BUTTON_CLASSES = `flex items-center justify-center w-8 h-8 shrink-0 rounded-full transition-colors duration-150
+  bg-lightPrimary text-lightPrimaryContrast hover:opacity-90
+  dark:bg-darkPrimary dark:text-darkPrimaryContrast
+  disabled:bg-gray-200 disabled:text-gray-400 disabled:hover:opacity-100 disabled:cursor-default
+  dark:disabled:bg-gray-700 dark:disabled:text-gray-500`;
+
 const textInput = useTemplateRef('textInput');
 const modeMenu = useTemplateRef('modeMenu');
 const agentStore = useAgentStore();
@@ -163,14 +182,17 @@ onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.setCurrentGenerationModeFromLocalStorage();
   agentStore.setEditingEnabled(props.meta.editingEnabled);
-  agentStore.regisrerTextInput(textInput.value);
   textInput.value?.focus();
   autoResize();
 });
 
-watch(() => textInput.value?.value, () => {
-  autoResize();
-});
+// The textarea is re-created after leaving audio chat mode; keep the store pointing at the
+// live element, otherwise focusTextInput() targets a detached one and does nothing.
+watch(textInput, (el) => agentStore.regisrerTextInput(el), { immediate: true, flush: 'post' });
+
+// Re-measure whenever the text changes programmatically (suggestion picked, edit restored)
+// or the textarea is re-mounted after leaving audio chat mode.
+watch([() => agentStore.userMessageInput, textInput], autoResize, { flush: 'post' });
 
 function autoResize() {
   const el = textInput.value

package/dist/custom/ChatHeader.vue

@@ -3,8 +3,8 @@
     ref="headerRef"
     class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
   >
-    <div 
-      class="flex items-center"
+    <div
+      class="flex items-center shrink-0"
     >
       <IconBarsOutline 
         class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
@@ -47,7 +47,10 @@
         @click="agentStore.setFullScreen(false)" 
       />
     </div>
-    <div class="flex items-center justify-center">
+    <p class="flex-1 min-w-0 truncate px-1 text-sm font-semibold text-lightNavbarText dark:text-darkNavbarText">
+      {{ isNewChat ? $t('New chat') : agentStore.currentSession.title }}
+    </p>
+    <div class="flex items-center justify-center shrink-0">
       <Button 
         @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" 
         class="!py-1 !px-2 max-w-64 mr-2"
@@ -67,12 +70,16 @@
 
 
 <script setup>
+  import { computed } from 'vue';
   import { IconArrowsPointingOut, IconArrowsPointingIn } from '@iconify-prerendered/vue-heroicons';
   import { IconCloseOutline, IconBarsOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
   import { useAgentStore } from './composables/useAgentStore';
   import { useCoreStore } from '@/stores/core';
   import { Button } from '@/afcl';
+  import { PRE_SESSION_ID } from './composables/agentStore/constants';
 
   const agentStore = useAgentStore();
   const coreStore = useCoreStore();
+
+  const isNewChat = computed(() => !agentStore.currentSession || agentStore.currentSession.sessionId === PRE_SESSION_ID);
 </script>

package/dist/custom/composables/agentStore/constants.ts

@@ -6,7 +6,7 @@ export const DEFAULT_CHAT_WIDTH = 30;
 export const MAX_WIDTH = 60;
 export const MIN_WIDTH = 25;
 
-export const DEFAULT_TEXTAREA_PLACEHOLDER = 'Type a message...';
+export const DEFAULT_TEXTAREA_PLACEHOLDER = 'Ask anything about your data…';
 export const PLACEHOLDER_TYPING_DELAY_MS = 60;
 export const PLACEHOLDER_DELETING_DELAY_MS = 35;
 export const PLACEHOLDER_HOLD_DELAY_MS = 3000;

package/dist/custom/composables/agentStore/useAgentChat.ts

@@ -2,6 +2,7 @@ import { DefaultChatTransport } from 'ai';
 import { ref, shallowRef, watch, type Ref } from 'vue';
 import { Chat } from '../../chat';
 import { getCurrentPageContext } from './pageContext';
+import type { IApprovalDescription } from '../../types';
 // const { DefaultChatTransport } = await import('ai');
 
 type AgentImportMeta = ImportMeta & {
@@ -14,7 +15,7 @@ type CreateAgentChatManagerOptions = {
   lastMessage: Ref<string>;
   activeModeName: Ref<string | null>;
   onOpenPage: (targetPath: string) => void;
-  onToolApprovalRequest: (sessionId: string, interrupt: unknown, approvals?: unknown) => void;
+  onToolApprovalRequest: (sessionId: string, approvals: IApprovalDescription[]) => void;
 };
 
 export function createAgentChatManager({
@@ -119,7 +120,7 @@ export function createAgentChatManager({
     }
 
     if (dataPart?.type === 'data-interrupt' && typeof dataPart.data?.sessionId === 'string') {
-      onToolApprovalRequest(dataPart.data.sessionId, dataPart.data.interrupt, dataPart.data.approvals);
+      onToolApprovalRequest(dataPart.data.sessionId, dataPart.data.approvals);
       return;
     }
 
@@ -165,7 +166,7 @@ export function createAgentChatManager({
     }
 
     if (dataPart?.type === 'data-interrupt' && typeof dataPart.data?.sessionId === 'string') {
-      onToolApprovalRequest(dataPart.data.sessionId, dataPart.data.interrupt, dataPart.data.approvals);
+      onToolApprovalRequest(dataPart.data.sessionId, dataPart.data.approvals);
       return;
     }
 

package/dist/custom/composables/agentStore/useAgentPlaceholder.ts

@@ -135,6 +135,7 @@ export function createAgentPlaceholderController({
 
   return {
     userMessagePlaceholder,
+    placeholderMessages,
     hasTypedMessageInPageSession,
     fetchPlaceholderMessages,
     stopPlaceholderAnimation,

package/dist/custom/composables/agentStore/useAgentSessions.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref, ShallowRef } from 'vue';
 import { callAdminForthApi } from '@/utils';
 import type { Chat } from '../../chat';
-import type { IAgentSession, ISessionsListItem, IPart } from '../../types';
+import type { IAgentSession, IApprovalDescription, ISessionsListItem, IPart } from '../../types';
 import { PRE_SESSION_ID, STEER_PERSIST_PREFIX } from './constants';
 import { i18nInstance } from '@/i18n';
 
@@ -23,7 +23,7 @@ type CreateAgentSessionManagerOptions = {
   blockCloseOfChat: Ref<boolean>;
   adminforth: AdminforthLike;
   setCurrentChat: (sessionId: string) => void;
-  restorePendingToolApproval: (sessionId: string, messages: string[]) => void;
+  restorePendingToolApproval: (sessionId: string, approvals: IApprovalDescription[]) => void;
 };
 
 export function createAgentSessionManager({

package/dist/custom/composables/useAgentStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { IAgentSession, ISessionsListItem } from '../types';
+import { IAgentSession, IApprovalDescription, ISessionsListItem } from '../types';
 import { ref, nextTick, computed, watch, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAdminforth } from '@/adminforth';
@@ -69,10 +69,11 @@ export const useAgentStore = defineStore('agent', () => {
     lastMessage,
     activeModeName,
     onOpenPage: openAgentPage,
-    onToolApprovalRequest: addToolApprovalMessage,
+    onToolApprovalRequest: addToolApprovalPart,
   });
   const {
     userMessagePlaceholder,
+    placeholderMessages,
     hasTypedMessageInPageSession,
     fetchPlaceholderMessages,
     stopPlaceholderAnimation,
@@ -108,28 +109,13 @@ export const useAgentStore = defineStore('agent', () => {
     isAudioChatMode.value = isAudioChat;
   }
 
-  function getToolApprovalMessages(interrupt: unknown): string[] {
-    const interrupts = Array.isArray(interrupt) ? interrupt : [interrupt];
-
-    return interrupts.flatMap((item: any) => {
-      const value = item?.value ?? item;
-      const actionRequests = Array.isArray(value?.actionRequests) ? value.actionRequests : [];
-
-      return actionRequests.map((actionRequest: any) => (
-        typeof actionRequest?.description === 'string'
-          ? actionRequest.description
-          : String(actionRequest?.name ?? 'Tool execution pending approval')
-      ));
-    });
-  }
-
-  function addToolApprovalPart(sessionId: string, messages: string[]) {
+  function addToolApprovalPart(sessionId: string, approvals: IApprovalDescription[]) {
     const approvalPart = {
       type: 'data-tool-approval' as const,
       data: {
         sessionId,
         status: 'pending' as const,
-        messages,
+        approvals,
       },
     };
     const lastChatMessage = currentChat.value?.lastMessage;
@@ -146,16 +132,6 @@ export const useAgentStore = defineStore('agent', () => {
     });
   }
 
-  function addToolApprovalMessage(sessionId: string, interrupt: unknown, approvals?: unknown) {
-    // The backend describes each pending tool call in plain language; its raw
-    // descriptions are only the fallback when it could not.
-    const formatted = Array.isArray(approvals)
-      ? approvals.filter((line): line is string => typeof line === 'string' && Boolean(line))
-      : [];
-
-    addToolApprovalPart(sessionId, formatted.length ? formatted : getToolApprovalMessages(interrupt));
-  }
-
   async function submitToolApproval(sessionId: string, decision: 'approve' | 'reject') {
     const message = (currentChat.value?.messages ?? [])
       .findLast(candidate => candidate.role === 'assistant' && (candidate.parts ?? []).some((part: any) => {
@@ -628,6 +604,7 @@ export const useAgentStore = defineStore('agent', () => {
     submitToolApproval,
     userMessageInput,
     userMessagePlaceholder,
+    placeholderMessages,
     chatMessages: computed(() => currentChat.value?.messages || []),
     trimmedUserMessage,
     isResponseInProgress,

package/dist/custom/conversation_area/ConversationArea.vue

@@ -45,10 +45,32 @@
       <!-- absolute, so it doesn't resize the scroll content when the container resizes (see the spacer comment) -->
       <div
         v-if="props.messages.length === 0"
-        class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium"
+        class="absolute inset-0 flex flex-col items-center justify-center px-7 pb-10 text-center"
       >
-        <p>{{ $t('Start the conversation') }}</p>
-        <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
+        <div class="flex items-center justify-center w-11 h-11 rounded-xl bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/15 dark:text-darkPrimary">
+          <IconSparkles class="w-6 h-6" />
+        </div>
+        <h2 class="mt-4 text-xl font-semibold text-lightNavbarText dark:text-darkNavbarText">
+          {{ $t('How can I help?') }}
+        </h2>
+        <p class="mt-1.5 max-w-xs text-sm leading-relaxed text-gray-600 dark:text-gray-400">
+          {{ $t('Ask about your data, build charts or update records.') }}
+        </p>
+        <div v-if="suggestions.length" class="mt-7 w-full max-w-sm flex flex-col gap-2 text-left">
+          <p class="pl-0.5 text-xs font-medium text-gray-500 dark:text-gray-400">{{ $t('Try asking') }}</p>
+          <button
+            v-for="suggestion in suggestions"
+            :key="suggestion"
+            type="button"
+            class="group flex items-center gap-2.5 w-full px-3 py-2.5 rounded-xl border text-sm text-left transition-colors duration-150
+              border-gray-200 text-lightNavbarText hover:border-gray-300 hover:bg-gray-50
+              dark:border-gray-700 dark:text-darkNavbarText dark:hover:border-gray-600 dark:hover:bg-gray-800"
+            @click="applySuggestion(suggestion)"
+          >
+            <span class="flex-1 min-w-0">{{ suggestion }}</span>
+            <IconArrowRight class="w-4 h-4 shrink-0 text-gray-400 transition-transform duration-150 group-hover:translate-x-0.5" />
+          </button>
+        </div>
       </div>
     </CustomAutoScrollContainer>
     <Transition
@@ -89,6 +111,7 @@
 import type { IMessage } from '../types';
 import { useTemplateRef, ref, onMounted, onUnmounted, watch, nextTick, defineAsyncComponent, computed } from 'vue';
 import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconArrowRight, IconSparkles } from '@iconify-prerendered/vue-heroicons';
 import SessionsHistory from '../SessionsHistory.vue';
 import { useAgentStore } from '../composables/useAgentStore';
 import { useAgentTransitions } from '../composables/useAgentTransitions';
@@ -132,6 +155,7 @@ const lastTurnHeight = ref(0);
 const MASK_HEIGHT = 20;
 const EMPTY_MESSAGE_HEIGHT = 18;
 const THRESHOLD_TO_SHOW_BUTTON = 10;
+const MAX_SUGGESTIONS = 3;
 let messageResizeObserver: ResizeObserver | null = null;
 let observedLastUserMessageElement: HTMLElement | null = null;
 let observedLastAgentMessageElement: HTMLElement | null = null;
@@ -143,6 +167,14 @@ const showAnimationInScrollToBottomButton = computed(() => {
   return agentStore.isResponseInProgress && showScrollToBottomButton.value;
 });
 
+// The configured placeholder examples double as clickable starters on an empty chat.
+const suggestions = computed(() => agentStore.placeholderMessages.slice(0, MAX_SUGGESTIONS));
+
+function applySuggestion(suggestion: string) {
+  agentStore.userMessageInput = suggestion;
+  agentStore.focusTextInput();
+}
+
 onMounted(async () => {
   messageResizeObserver = new ResizeObserver(() => {
     scheduleSpacerHeightUpdate();

package/dist/custom/conversation_area/MessageRenderer.vue

@@ -26,20 +26,20 @@
           <button
             v-if="canCopy"
             type="button"
-            class="flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-lightPrimary dark:hover:text-darkPrimary opacity-60 group-hover/msg:opacity-100 transition-opacity duration-150 hover:scale-110"
+            :class="ACTION_BUTTON_CLASSES"
             :title="$t('Copy message')"
             @click="copyMessageToClipboard"
           >
-            <IconFileCopySolid class="w-5 h-5" />
+            <IconFileCopyOutline class="w-4 h-4" />
           </button>
           <button
             v-if="canEdit"
             type="button"
-            class="flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-lightPrimary dark:hover:text-darkPrimary opacity-60 group-hover/msg:opacity-100 transition-opacity duration-150 hover:scale-110"
+            :class="ACTION_BUTTON_CLASSES"
             :title="$t('Edit message')"
             @click="agentStore.startEditMessage(message)"
           >
-            <IconPenSolid class="w-5 h-5" />
+            <IconPenOutline class="w-4 h-4" />
           </button>
         </div>
       </Transition>
@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
   import { computed, ref } from 'vue';
-  import { IconPenSolid, IconFileCopySolid } from '@iconify-prerendered/vue-flowbite';
+  import { IconPenOutline, IconFileCopyOutline } from '@iconify-prerendered/vue-flowbite';
   import TextRenderer from './TextRenderer.vue';
   import type { IMessage } from '../types';
   import { getMessageParts } from '../utils';
@@ -99,6 +99,10 @@
     isLastMessageInChat: boolean
   }>();
 
+  const ACTION_BUTTON_CLASSES = `flex items-center justify-center w-7 h-7 rounded-md transition-colors duration-150
+    text-gray-500 hover:bg-gray-100 hover:text-gray-800
+    dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200`;
+
   const agentStore = useAgentStore();
   const { alert } = useAdminforth();
   const showEditButton = ref(false);