@adminforth/agent 2.9.1 → 3.0.0

package/dist/custom/SessionsHistory.vue

@@ -1,37 +1,73 @@
 <template>
-  <div class="absolute top-0 left-0 transition-transform 
-    duration-200 ease-in-out border-y border-r dark:border-gray-600 z-20 
-    bg-lightNavbar dark:bg-darkNavbar w-96 h-full flex flex-col items-center
-    overflow-y-auto overflow-x-hidden
-    "
+  <div
+    class="af-agent-history absolute top-0 left-0 z-20 flex h-full w-96 max-w-full flex-col overflow-y-auto overflow-x-hidden
+      border-r border-lightNavbarBorder bg-lightNavbar transition-transform duration-200 ease-in-out
+      dark:border-darkNavbarBorder dark:bg-darkNavbar"
   >
-    <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
-    <div class="w-full flex items-center justify-center">
-    </div>
-    <div class="w-full border-b border-gray-200 dark:border-gray-700"/>
-    <div v-for="group in groupedSessions" :key="group.dayKey" class="w-full py-2">
-      <div class="px-4 pb-2 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">
+    <h3 class="px-4 pt-4 pb-2 text-sm font-semibold text-lightNavbarText dark:text-darkNavbarText">{{ $t('Chat history') }}</h3>
+    <div v-for="group in groupedSessions" :key="group.dayKey" class="px-2 py-2">
+      <div class="px-2.5 pb-1 text-xs font-medium text-lightInputIconColor dark:text-darkInputIconColor">
         {{ group.label }}
       </div>
-
-      <button
+      <!-- enter and esc are handled on the wrapper so they fire once: Input spreads attrs on both its root and the input -->
+      <div
         v-for="session in group.sessions"
         :key="session.sessionId"
-        class=" flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200"
-        :class="{
-          'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId, 
-         }"
-        @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
+        class="af-agent-history-row group flex items-center gap-0.5 rounded-default text-sm transition-colors"
+        :class="agentStore.activeSessionId === session.sessionId
+          ? 'font-medium bg-lightVerticalTabsBackgroundActive text-lightVerticalTabsTextActive dark:bg-darkVerticalTabsBackgroundActive dark:text-darkVerticalTabsTextActive'
+          : 'text-lightVerticalTabsText hover:bg-lightVerticalTabsBackgroundHover hover:text-lightVerticalTabsTextHover dark:text-darkVerticalTabsText dark:hover:bg-darkVerticalTabsBackgroundHover dark:hover:text-darkVerticalTabsTextHover'"
+        @keydown.enter.prevent="renamingSessionId === session.sessionId && commitRename(session)"
+        @keydown.esc.prevent="renamingSessionId = null"
       >
-        <p class="truncate">{{ session.title || session.sessionId }}</p>
-        <div @click.stop="agentStore.deleteSession(session.sessionId)" class="w-7 h-7 p-1 hover:scale-110 hover:bg-gray-200 dark:hover:bg-gray-500 flex items-center justify-center rounded">
-          <IconPlusOutline class="rotate-45 w-6 h-6"/>
-        </div>
-      </button>
+        <Input
+          v-if="renamingSessionId === session.sessionId"
+          ref="renameInput"
+          v-model="renameTitle"
+          type="text"
+          class="min-w-0 flex-1"
+          fullWidth
+          maxlength="100"
+          :aria-label="$t('Chat name')"
+          @blur="commitRename(session)"
+        />
+        <template v-else>
+          <button
+            type="button"
+            class="min-w-0 flex-1 truncate rounded-default px-2.5 py-1.5 text-left focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightFocusRing dark:focus-visible:ring-darkFocusRing"
+            @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
+          >
+            {{ session.title || session.sessionId }}
+          </button>
+          <Button
+            v-if="session.sessionId !== PRE_SESSION_ID"
+            variant="ghost"
+            size="sm"
+            iconOnly
+            :class="ROW_ACTION_CLASSES"
+            :aria-label="$t('Rename chat')"
+            :title="$t('Rename chat')"
+            @click="startRename(session)"
+          >
+            <IconPencil />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            iconOnly
+            :class="ROW_ACTION_CLASSES"
+            :aria-label="$t('Delete chat')"
+            :title="$t('Delete chat')"
+            @click="agentStore.deleteSession(session.sessionId)"
+          >
+            <IconTrash2 />
+          </Button>
+        </template>
+      </div>
     </div>
     <p
       v-if="!groupedSessions || groupedSessions.length === 0"
-      class="w-full h-full flex items-center justify-center text-gray-800 dark:text-gray-200"
+      class="flex flex-1 items-center justify-center px-4 text-sm text-lightInputIconColor dark:text-darkInputIconColor"
     >
       {{ $t('There are no previous chat sessions') }}
     </p>
@@ -40,15 +76,41 @@
 
 
 <script setup lang="ts">
-import { Button, Spinner } from '@/afcl'
-import { computed } from 'vue';
-import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+import { Button, Input } from '@/afcl'
+import { computed, nextTick, ref, useTemplateRef } from 'vue';
+import { IconPencil, IconTrash2 } from '@iconify-prerendered/vue-lucide';
 import type { ISessionsListItem } from './types';
 import { useAgentStore } from './composables/useAgentStore';
+import { PRE_SESSION_ID } from './composables/agentStore/constants';
+
+// row actions show on hover or keyboard focus of the row, and always on touch screens which have no hover
+const ROW_ACTION_CLASSES = 'hidden group-hover:flex group-focus-within:flex [@media(hover:none)]:flex';
 
 const agentStore = useAgentStore();
+const renamingSessionId = ref<string | null>(null);
+const renameTitle = ref('');
+// the input is rendered inside v-for, so the template ref is an array with the one open input
+const renameInputs = useTemplateRef<Array<{ focus: () => void }>>('renameInput');
+
+async function startRename(session: ISessionsListItem) {
+  renamingSessionId.value = session.sessionId;
+  renameTitle.value = session.title;
+  await nextTick();
+  renameInputs.value![0].focus();
+}
+
+// called by both enter and the blur that follows when the input goes away, only the first one saves
+async function commitRename(session: ISessionsListItem) {
+  if (renamingSessionId.value !== session.sessionId) {
+    return;
+  }
+  renamingSessionId.value = null;
+  const title = renameTitle.value.trim();
+  if (title && title !== session.title) {
+    await agentStore.renameSession(session.sessionId, title);
+  }
+}
 
-const h3Style = "text-gray-800 dark:text-gray-200 font-medium text-xl tracking-widest my-2"
 const dayLabelFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
 const dayLabelWithYearFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
 

package/dist/custom/SteerQueue.vue

@@ -15,7 +15,7 @@
       <div
         v-for="item in agentStore.steerQueue"
         :key="item.id"
-        class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 shadow-sm dark:border-gray-600 dark:bg-gray-800"
+        class="flex items-center gap-2 rounded-lg border border-lightCardBorder bg-lightCardBackground py-1.5 pl-3 pr-1.5 shadow-popover dark:border-darkCardBorder dark:bg-darkCardBackground dark:shadow-darkPopover"
       >
         <span
           class="flex-1 min-w-0 truncate text-sm text-lightInputText dark:text-darkInputText"
@@ -23,12 +23,13 @@
         >
           {{ item.text }}
         </span>
-        <span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">
+        <span class="shrink-0 text-xs text-lightInputPlaceholderText dark:text-darkInputPlaceholderText">
           {{ $t('queued') }}
         </span>
-        <button
+        <Button
+          variant="secondary"
+          size="sm"
           type="button"
-          class="shrink-0 rounded-md px-2 py-1 text-xs font-medium text-lightPrimary transition-colors hover:bg-lightPrimary/10 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent dark:text-darkPrimary dark:hover:bg-darkPrimary/10 dark:disabled:hover:bg-transparent"
           :disabled="agentStore.isFinalResponseStreaming"
           :title="agentStore.isFinalResponseStreaming
             ? $t('The final response is streaming; this message will be sent after it finishes')
@@ -36,21 +37,26 @@
           @click="agentStore.steerQueuedMessage(item.id)"
         >
           {{ $t('Steer') }}
-        </button>
-        <button
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          iconOnly
           type="button"
-          class="shrink-0 flex h-6 w-6 items-center justify-center rounded-md text-lg leading-none text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
           :title="$t('Remove from queue')"
+          :aria-label="$t('Remove from queue')"
           @click="agentStore.removeQueuedMessage(item.id)"
         >
-          &times;
-        </button>
+          <IconX />
+        </Button>
       </div>
     </TransitionGroup>
   </div>
 </template>
 
 <script setup lang="ts">
+import { IconX } from '@iconify-prerendered/vue-lucide';
+import { Button } from '@/afcl';
 import { useAgentStore } from './composables/useAgentStore';
 
 const agentStore = useAgentStore();

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({
@@ -203,6 +203,26 @@ export function createAgentSessionManager({
     setCurrentChat(PRE_SESSION_ID);
   }
 
+  async function renameSession(sessionId: string, title: string) {
+    const res = await callAdminForthApi({
+      method: 'POST',
+      path: '/agent/rename-session',
+      body: { sessionId, title },
+    });
+    if (res.error) {
+      console.error('Error renaming session:', res.error);
+      return;
+    }
+    sessionList.value.find((s: ISessionsListItem) => s.sessionId === sessionId)!.title = res.title;
+    // a loaded session is cached apart from the list, and the open one is shown in the header
+    if (sessions.value[sessionId]) {
+      sessions.value[sessionId].title = res.title;
+    }
+    if (currentSession.value?.sessionId === sessionId) {
+      currentSession.value.title = res.title;
+    }
+  }
+
   async function deleteSession(sessionId: string) {
     if (sessionId === PRE_SESSION_ID) {
       deletePreSession();
@@ -370,6 +390,7 @@ export function createAgentSessionManager({
     createPreSession,
     setActiveSession,
     fetchSessionsList,
+    renameSession,
     deleteSession,
     addDebugMessage,
     addSystemMessage,

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) => {
@@ -222,6 +198,7 @@ export const useAgentStore = defineStore('agent', () => {
     createPreSession,
     setActiveSession,
     fetchSessionsList,
+    renameSession,
     deleteSession,
     addDebugMessage,
     addSystemMessage,
@@ -614,6 +591,7 @@ export const useAgentStore = defineStore('agent', () => {
     sessionList,
     setActiveSession,
     fetchSessionsList,
+    renameSession,
     deleteSession,
     createPreSession,
     //____________________________________________
@@ -628,6 +606,7 @@ export const useAgentStore = defineStore('agent', () => {
     submitToolApproval,
     userMessageInput,
     userMessagePlaceholder,
+    placeholderMessages,
     chatMessages: computed(() => currentChat.value?.messages || []),
     trimmedUserMessage,
     isResponseInProgress,

package/dist/custom/conversation_area/ConversationArea.vue

@@ -5,7 +5,7 @@
   <div 
     v-if="agentStore.isSessionHistoryOpen"
     @click="agentStore.setSessionHistoryOpen(false)"
-    class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
+    class="absolute z-10 h-full w-full bg-lightScrim dark:bg-darkScrim"
   >
   </div>
   <div class="relative flex-1 min-h-0 overflow-hidden [container-type:size]" @click="recalculateScroll()">
@@ -36,7 +36,7 @@
 
       <div 
         v-for="(message, index) in props.messages" :key="index"
-        class="flex flex-col w-full mt-2 pb-2"
+        class="flex flex-col w-full pt-5 first:pt-4"
         :class="message.role === 'user' ? 'self-end' : 'self-start'"
         ref="messagesRefs"
       >
@@ -45,10 +45,34 @@
       <!-- 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-lg font-semibold tracking-tight text-lightNavbarText dark:text-darkNavbarText">
+          {{ $t('How can I help?') }}
+        </h2>
+        <p class="mt-1.5 max-w-xs text-sm leading-relaxed text-lightInputIconColor dark:text-darkInputIconColor">
+          {{ $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-lightInputIconColor dark:text-darkInputIconColor">{{ $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-lg border text-sm text-left transition-colors duration-150
+              border-lightCardBorder bg-lightCardBackground text-lightNavbarText hover:bg-lightCardBackgroundHover
+              focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightFocusRing
+              dark:border-darkCardBorder dark:bg-darkCardBackground dark:text-darkNavbarText dark:hover:bg-darkCardBackgroundHover
+              dark:focus-visible:ring-darkFocusRing"
+            @click="applySuggestion(suggestion)"
+          >
+            <span class="flex-1 min-w-0">{{ suggestion }}</span>
+            <IconArrowRight class="w-4 h-4 shrink-0 text-lightInputIconColor transition-transform duration-150 group-hover:translate-x-0.5 dark:text-darkInputIconColor" />
+          </button>
+        </div>
       </div>
     </CustomAutoScrollContainer>
     <Transition
@@ -62,18 +86,17 @@
       <button 
         v-if="showScrollToBottomButton" 
         @click="scrollContainer.scrollToBottom();"
-        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 
-          bg-lightPrimary/20 dark:bg-darkPrimary/10
-          border border-lightPrimary dark:border-darkPrimary 
-          text-lightPrimary dark:text-darkPrimary 
-          backdrop-blur-sm rounded-full
-          w-10 h-10 flex items-center justify-center gap-0.5"
-        :class="{ 'w-12 h-8': showAnimationInScrollToBottomButton }"
+        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 flex items-center justify-center gap-0.5 w-[2.125rem] h-[2.125rem] rounded-full border
+          border-lightInputBorder bg-lightInputBackground text-lightInputIconColor shadow-popover hover:text-lightInputText
+          focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightFocusRing
+          dark:border-darkInputBorder dark:bg-darkInputBackground dark:text-darkInputIconColor dark:shadow-darkPopover dark:hover:text-darkInputText
+          dark:focus-visible:ring-darkFocusRing"
+        :class="{ 'w-12': showAnimationInScrollToBottomButton }"
+        :aria-label="$t('Scroll to the latest message')"
       >
-        <IconArrowDownOutline 
+        <IconArrowDown
           v-if="!showAnimationInScrollToBottomButton"
-          class="p-2 w-10 h-10 transition-opacity duration-100 ease-in " 
-          :disabled="!showScrollToBottomButton"
+          class="w-4 h-4"
         />
         <ThreeDotsAnimation 
           v-else
@@ -88,7 +111,7 @@
 <script setup lang="ts">
 import type { IMessage } from '../types';
 import { useTemplateRef, ref, onMounted, onUnmounted, watch, nextTick, defineAsyncComponent, computed } from 'vue';
-import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconArrowDown, IconArrowRight, IconSparkles } from '@iconify-prerendered/vue-lucide';
 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

@@ -18,34 +18,38 @@
       >
         <div
           v-if="showActionsBar && showEditButton"
-          class="absolute flex -bottom-6 p-1 mt-0.5 z-20"
+          class="absolute flex top-full -mt-1 p-1 z-20"
           :class="isUserMessage ? 'right-0 self-end mr-4' : 'left-0 self-start ml-4'"
           @mouseenter="showEditButtonOnHover"
           @mouseleave="hideEditButtonOnHover"
         >
-          <button
+          <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"
+            variant="ghost"
+            size="sm"
+            iconOnly
             :title="$t('Copy message')"
+            :aria-label="$t('Copy message')"
             @click="copyMessageToClipboard"
           >
-            <IconFileCopySolid class="w-5 h-5" />
-          </button>
-          <button
+            <IconCopy />
+          </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"
+            variant="ghost"
+            size="sm"
+            iconOnly
             :title="$t('Edit message')"
+            :aria-label="$t('Edit message')"
             @click="agentStore.startEditMessage(message)"
           >
-            <IconPenSolid class="w-5 h-5" />
-          </button>
+            <IconPencil />
+          </Button>
         </div>
       </Transition>
     <div
       v-if="message.role === 'user' && message.metadata?.steer && !isBeingEditedTurn"
-      class="self-end mr-4 mb-0.5 text-xs italic text-gray-400 dark:text-gray-500"
+      class="self-end mr-4 mb-0.5 text-xs italic text-lightInputPlaceholderText dark:text-darkInputPlaceholderText"
     >
       {{ $t('Steering instruction') }}
     </div>
@@ -83,7 +87,8 @@
 
 <script setup lang="ts">
   import { computed, ref } from 'vue';
-  import { IconPenSolid, IconFileCopySolid } from '@iconify-prerendered/vue-flowbite';
+  import { IconCopy, IconPencil } from '@iconify-prerendered/vue-lucide';
+  import { Button } from '@/afcl';
   import TextRenderer from './TextRenderer.vue';
   import type { IMessage } from '../types';
   import { getMessageParts } from '../utils';