@adminforth/agent 2.10.0 → 3.0.1

package/dist/custom/ChatFooter.vue

@@ -8,11 +8,12 @@
     }"
   >
     <SteerQueue />
-    <!-- <SteerDebugPanel /> -->
     <div
-      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"
+      class="af-agent-composer w-full flex flex-col rounded-xl border transition-colors duration-150
+        border-lightInputBorder bg-lightInputBackground hover:border-lightInputBorderHover
+        focus-within:border-lightInputFocusBorder focus-within:ring-[3px] focus-within:ring-lightInputFocusRing
+        dark:border-darkInputBorder dark:bg-darkInputBackground dark:hover:border-darkInputBorderHover
+        dark:focus-within:border-darkInputFocusBorder dark:focus-within:ring-darkInputFocusRing"
     >
       <textarea
         v-if="!agentStore.isAudioChatMode"
@@ -21,9 +22,9 @@
         rows="1"
         @input="autoResize"
         :class="[
-          `block w-full px-3.5 pt-3 pb-1 resize-none overflow-hidden bg-transparent border-none text-sm leading-6
+          `block w-full px-3 pt-2.5 pb-1 resize-none overflow-hidden bg-transparent border-none text-sm leading-[22px]
             focus:outline-none focus:ring-0
-            text-lightInputText placeholder:text-gray-500 dark:text-darkInputText dark:placeholder:text-gray-400`,
+            text-lightInputText placeholder:text-lightInputPlaceholderText dark:text-darkInputText dark:placeholder:text-darkInputPlaceholderText`,
           { '!text-base': coreStore.isIos }
         ]"
         :placeholder="placeholderText"
@@ -35,57 +36,38 @@
         class="items-center gap-1 px-2 pb-2"
         :class="agentStore.isAudioChatMode ? 'grid grid-cols-[1fr_auto_1fr] pt-2' : 'flex pt-1'"
       >
-        <div
+        <DropdownMenu
           v-if="agentStore.availableModes.length > 1"
-          ref="modeMenu"
-          class="relative justify-self-start"
+          v-model:open="isModeMenuOpen"
+          class="af-agent-mode-menu justify-self-start"
+          teleportToBody
         >
-          <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"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition ease-in duration-150"
-            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-44 p-1 rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
+          <template #trigger="{ open }">
+            <Button
+              variant="ghost"
+              size="sm"
+              type="button"
+              :class="open && 'bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText'"
+              :aria-label="$t('Select mode')"
+              :aria-expanded="open"
+              :title="$t('Select mode')"
             >
-              <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>
+              <IconSparkles class="w-4 h-4" />
+              {{ agentStore.activeModeName }}
+              <IconChevronDown class="w-3.5 h-3.5 transition-transform duration-200" :class="open && 'rotate-180'" />
+            </Button>
+          </template>
+          <DropdownMenuItem
+            v-for="mode in agentStore.availableModes"
+            :key="mode.name"
+            @click="agentStore.setActiveMode(mode.name)"
+          >
+            {{ mode.name }}
+            <template v-if="mode.name === agentStore.activeModeName" #suffix>
+              <IconCheck class="w-4 h-4 text-lightPrimary dark:text-darkPrimary" />
+            </template>
+          </DropdownMenuItem>
+        </DropdownMenu>
         <div
           class="ml-auto flex items-center gap-1"
           :class="agentStore.isAudioChatMode ? 'col-start-2' : ''"
@@ -100,27 +82,29 @@
               @cancel="cancelEdit"
               @confirm="sendMessage"
             />
-            <button
+            <Button
               v-else-if="!agentStore.isResponseInProgress"
               type="button"
-              :class="ROUND_PRIMARY_BUTTON_CLASSES"
+              iconOnly
+              class="rounded-full"
               :disabled="!agentStore.trimmedUserMessage"
               :title="$t('Send message')"
               :aria-label="$t('Send message')"
               @click="sendMessage"
             >
-              <IconArrowUp class="w-4 h-4" />
-            </button>
-            <button
+              <IconArrowUp />
+            </Button>
+            <Button
               v-else
               type="button"
-              :class="ROUND_PRIMARY_BUTTON_CLASSES"
+              iconOnly
+              class="rounded-full"
               :title="$t('Stop')"
               :aria-label="$t('Stop')"
               @click="stopCurrentRequest"
             >
               <span class="w-2.5 h-2.5 rounded-sm bg-current" />
-            </button>
+            </Button>
           </template>
         </div>
       </div>
@@ -129,16 +113,15 @@
 </template>
 
 <script setup lang="ts">
-import { IconArrowUp, IconCheck, IconChevronDown, IconSparklesSolid } from '@iconify-prerendered/vue-heroicons';
+import { IconArrowUp, IconCheck, IconChevronDown, IconSparkles } from '@iconify-prerendered/vue-lucide';
 import { useTemplateRef, onMounted, ref, watch, computed } from 'vue';
-import { onClickOutside } from '@vueuse/core'
+import { Button, DropdownMenu, DropdownMenuItem } from '@/afcl';
 import { useAgentStore } from './composables/useAgentStore';
 import { useAgentTransitions } from './composables/useAgentTransitions';
 import { useCoreStore } from '@/stores/core';
 import { remToPx } from './utils';
 import MicrophoneButton from './speech_recognition_frontend/MicrophoneButon.vue';
 import SteerQueue from './SteerQueue.vue';
-import SteerDebugPanel from './SteerDebugPanel.vue';
 import EditActionButtons from './EditActionButtons.vue';
 
 const props = defineProps<{
@@ -156,14 +139,7 @@ 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();
 const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
@@ -176,8 +152,6 @@ const placeholderText = computed(() => {
   return agentStore.userMessagePlaceholder;
 });
 
-onClickOutside(modeMenu as any, () => { isModeMenuOpen.value = false; });
-
 onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.setCurrentGenerationModeFromLocalStorage();
@@ -210,15 +184,6 @@ function autoResize() {
   }
 }
 
-function toggleModeMenu() {
-  isModeMenuOpen.value = !isModeMenuOpen.value;
-}
-
-function selectMode(modeName: string) {
-  agentStore.setActiveMode(modeName);
-  isModeMenuOpen.value = false;
-}
-
 async function sendMessage() {
   if (agentStore.isAudioChatMode) return;
   isModeMenuOpen.value = false;

package/dist/custom/ChatHeader.vue

@@ -1,83 +1,79 @@
 <template>
-  <div 
+  <!-- in full screen the controls line up with the centered column of the conversation -->
+  <div
     ref="headerRef"
-    class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
+    class="af-agent-header flex items-center gap-0.5 h-12 px-2 border-b border-lightNavbarBorder dark:border-darkNavbarBorder"
+    :style="agentStore.isFullScreen ? { paddingInline: `max(0.5rem, calc((100% - ${agentStore.MAX_WIDTH}rem) / 2 + 0.5rem))` } : undefined"
   >
-    <div
-      class="flex items-center shrink-0"
+    <Button
+      variant="ghost"
+      iconOnly
+      :class="agentStore.isSessionHistoryOpen && PRESSED_CLASSES"
+      :aria-pressed="agentStore.isSessionHistoryOpen"
+      :aria-label="$t('Chat history')"
+      :title="$t('Chat history')"
+      @click="agentStore.setSessionHistoryOpen(!agentStore.isSessionHistoryOpen)"
     >
-      <IconBarsOutline 
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 "
-        :class="agentStore.isSessionHistoryOpen ? 
-          'bg-lightNavbarIcons/20 text-lightNavbarIcons/80 dark:bg-darkNavbarIcons/20 dark:text-darkNavbarIcons/80' : 
-          ''" 
-        @click="agentStore.setSessionHistoryOpen(!agentStore.isSessionHistoryOpen)" 
-      />
-      <IconOpenSidebarSolid 
-        v-if="!agentStore.isTeleportedToBody && !coreStore.isMobile && !agentStore.isFullScreen"
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-        @click="agentStore.setIsTeleportedToBody(true)" 
-      />
-      <IconCloseSidebarSolid 
-        v-else-if="!coreStore.isMobile && !agentStore.isFullScreen"
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 bg-lightNavbarIcons/20 
-          dark:bg-darkNavbarIcons/20 dark:text-darkNavbarIcons/80 hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-        @click="agentStore.setIsTeleportedToBody(false)" 
-      />
-      <IconArrowsPointingOut 
-        v-if="!agentStore.isFullScreen && !coreStore.isMobile"
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-        @click="agentStore.setFullScreen(true)" 
-      />
-      <IconArrowsPointingIn 
-        v-else-if="!coreStore.isMobile"
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 "
-        :class="agentStore.isFullScreen ? 
-          'bg-lightNavbarIcons/20 text-lightNavbarIcons/80 dark:bg-darkNavbarIcons/20 dark:text-darkNavbarIcons/80' : 
-          ''" 
-        @click="agentStore.setFullScreen(false)" 
-      />
-    </div>
-    <p class="flex-1 min-w-0 truncate px-1 text-sm font-semibold text-lightNavbarText dark:text-darkNavbarText">
+      <IconHistory />
+    </Button>
+    <Button
+      v-if="!coreStore.isMobile && !agentStore.isFullScreen"
+      variant="ghost"
+      iconOnly
+      :class="agentStore.isTeleportedToBody && PRESSED_CLASSES"
+      :aria-pressed="agentStore.isTeleportedToBody"
+      :aria-label="$t('Dock to the side')"
+      :title="$t('Dock to the side')"
+      @click="agentStore.setIsTeleportedToBody(!agentStore.isTeleportedToBody)"
+    >
+      <IconPanelRight />
+    </Button>
+    <Button
+      v-if="!coreStore.isMobile"
+      variant="ghost"
+      iconOnly
+      :aria-label="agentStore.isFullScreen ? $t('Exit full screen') : $t('Full screen')"
+      :title="agentStore.isFullScreen ? $t('Exit full screen') : $t('Full screen')"
+      @click="agentStore.setFullScreen(!agentStore.isFullScreen)"
+    >
+      <IconMinimize2 v-if="agentStore.isFullScreen" />
+      <IconMaximize2 v-else />
+    </Button>
+    <p class="flex-1 min-w-0 truncate px-1 text-[13px] 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"
-      >
-        <IconPlusOutline class="w-5 h-5" />
-        {{ $t('New chat') }}
-      </Button>
-      <IconCloseOutline 
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-        @click="agentStore.setIsChatOpen(false)" 
-      />
-    </div>
+    <Button
+      variant="secondary"
+      class="shrink-0"
+      @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();"
+    >
+      <IconPlus class="w-4 h-4" />
+      {{ $t('New chat') }}
+    </Button>
+    <Button
+      variant="ghost"
+      iconOnly
+      :aria-label="$t('Close')"
+      :title="$t('Close')"
+      @click="agentStore.setIsChatOpen(false)"
+    >
+      <IconX />
+    </Button>
   </div>
 </template>
 
 
 <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 { IconHistory, IconMaximize2, IconMinimize2, IconPanelRight, IconPlus, IconX } from '@iconify-prerendered/vue-lucide';
   import { useAgentStore } from './composables/useAgentStore';
   import { useCoreStore } from '@/stores/core';
   import { Button } from '@/afcl';
   import { PRE_SESSION_ID } from './composables/agentStore/constants';
 
+  // a toggle in the on state, same fill as the hover of a ghost button
+  const PRESSED_CLASSES = 'bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText';
+
   const agentStore = useAgentStore();
   const coreStore = useCoreStore();
 

package/dist/custom/ChatSurface.vue

@@ -1,29 +1,21 @@
 <template>
-  <div 
-    class="relative w-6 h-6 cursor-pointer mr-1 mt-1
-      text-lightNavbarIcons hover:text-lightNavbarIcons/80 
-      dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80
-      hover:scale-110 transition-colors duration-200"       
+  <Button
+    variant="secondary"
+    :class="{ 'bg-lightButtonGroupActiveBackground hover:bg-lightButtonGroupActiveBackground dark:bg-darkButtonGroupActiveBackground dark:hover:bg-darkButtonGroupActiveBackground': agentStore.isChatOpen }"
+    :aria-expanded="agentStore.isChatOpen"
     @click="agentStore.setIsChatOpen(!agentStore.isChatOpen)"
   >
-    <IconChatBubbleLeft20Solid 
-      class="w-6 h-6" 
-    />
-    <div class="absolute w-4 h-4 bg-lightNavbar dark:bg-darkNavbar rounded-full -top-1 -right-2">
-      <IconSparklesSolid 
-        class="w-4 h-4"
-      />
-    </div>
-  </div>
+    <IconBot class="w-4 h-4" />
+    {{ $t('Agent') }}
+  </Button>
 
   <Teleport to="body">
     <div 
       ref="chatSurface"
       id="adminforth-agent-chat-surface"
-      class="fixed bg-lightNavbar dark:bg-darkNavbar top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
-            flex flex z-40 h-screen"
-      :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
-      :style="{ width: agentStore.chatWidth + 'rem' }"
+      class="fixed top-0 right-0 z-40 flex h-screen border-l border-lightNavbarBorder bg-lightNavbar dark:border-darkNavbarBorder dark:bg-darkNavbar"
+      :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody && !agentStore.isFullScreen ? 'shadow-popover dark:shadow-darkPopover' : '']"
+      :style="{ width: agentStore.isFullScreen ? '100%' : agentStore.chatWidth + 'rem' }"
     > 
       <div 
         v-if="!(coreStore.isMobile || agentStore.isFullScreen)"
@@ -58,7 +50,8 @@
 </template>
 
 <script setup lang="ts">
-import { IconChatBubbleLeft20Solid, IconSparklesSolid } from '@iconify-prerendered/vue-heroicons';
+import { IconBot } from '@iconify-prerendered/vue-lucide';
+import { Button } from '@/afcl';
 import { useTemplateRef, onMounted, ref, onUnmounted } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import ConversationArea from './conversation_area/ConversationArea.vue';

package/dist/custom/EditActionButtons.vue

@@ -1,26 +1,30 @@
 <template>
-  <div class="flex items-center gap-3">
+  <div class="flex items-center gap-2">
     <Button
       variant="secondary"
-      class="!p-0 h-7 w-7 mr-1 bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800"
-      title="Cancel edit"
+      size="sm"
+      iconOnly
+      :title="$t('Cancel edit')"
+      :aria-label="$t('Cancel edit')"
       @click="emit('cancel')"
     >
-      <IconCloseOutline class="w-5 h-5" />
+      <IconX />
     </Button>
     <Button
-      class="!p-0 h-7 w-7"
-      title="Send edited message"
+      size="sm"
+      iconOnly
+      :title="$t('Send edited message')"
+      :aria-label="$t('Send edited message')"
       :disabled="confirmDisabled"
       @click="emit('confirm')"
     >
-      <IconCheckOutline class="w-6 h-6 text-white" />
+      <IconCheck />
     </Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { IconCloseOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconCheck, IconX } from '@iconify-prerendered/vue-lucide';
 import { Button } from '@/afcl';
 
 defineProps<{

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' });