@adminforth/agent 1.0.0

package/dist/custom/ChatSurface.vue

@@ -0,0 +1,184 @@
+<template>
+  <div 
+    class="relative w-6 h-6 cursor-pointer mr-6 mt-1
+      text-lightNavbarIcons hover:text-lightNavbarIcons/80 
+      dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80
+      hover:scale-110 transition-colors duration-200"       
+    @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>
+  
+  <div 
+    ref="chatSurface"
+    class="fixed bg-lightNavbar dark:bg-darkNavbar h-screen top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
+          transition-transform duration-200 ease-in-out 
+          flex flex z-10"
+    :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
+    :style="{ width: agentStore.chatWidth + 'px' }"
+  > 
+    <div 
+      v-if="!coreStore.isMobile"
+      class="w-2 cursor-ew-resize absolute left-0 top-0 h-full z-30"
+      @mousedown="startResize"
+    ></div>
+
+    <div class="w-full h-full flex flex-col">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center h-[55px]">
+          <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"
+            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"
+            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)" 
+          />
+        </div>
+
+        <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>
+      <div class="relative flex-1 flex flex-col overflow-hidden">
+        <ConversationArea 
+          v-if="agentStore.isChatOpen"
+          class="flex-1 overflow-auto" 
+          :messages="agentStore.chatMessages"
+        />
+
+        <div class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative">
+          <textarea
+            v-model="agentStore.userMessageInput"
+            ref="textInput"
+            @input="autoResize"
+            class="min-h-12 p-4 pr-12 w-full resize-none overflow-hidden border 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"
+            placeholder="Type a message..."
+            @keydown.enter.exact.prevent="async () => {await agentStore.sendMessage(); autoResize();}"
+          />
+          <Button 
+            class="absolute right-4 bottom-2 !p-0 h-[34px] w-[34px]"                    
+            @click="async () => {await agentStore.sendMessage(); autoResize();}" 
+            :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
+          >
+            <IconArrowUpOutline 
+              class="w-8 h-8 p-1
+                text-white" 
+            />
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import { IconChatBubbleLeft20Solid, IconSparklesSolid } from '@iconify-prerendered/vue-heroicons';
+import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid } from '@iconify-prerendered/vue-flowbite';
+import { useTemplateRef, onMounted, ref, computed } from 'vue';
+import { onClickOutside } from '@vueuse/core'
+import ConversationArea from './ConversationArea.vue';
+import { useAgentStore } from './useAgentStore';
+import { Button } from '@/afcl';
+import { useCoreStore } from '@/stores/core';
+
+const props = defineProps<{
+  meta: {
+    pluginInstanceId: string;
+  }
+}>();
+
+const chatSurface = useTemplateRef('chatSurface');
+const textInput = useTemplateRef('textInput');
+const agentStore = useAgentStore();
+const coreStore = useCoreStore();
+
+const MAX_WIDTH = 800;
+const MIN_WIDTH = 382; //w-96
+
+let startX = 0
+let startWidth = 0
+
+const startResize = (e: MouseEvent) => {
+  startX = e.clientX
+  startWidth = agentStore.chatWidth
+
+  document.body.style.userSelect = 'none'
+  document.body.style.cursor = 'ew-resize'
+
+  document.addEventListener('mousemove', onResize)
+  document.addEventListener('mouseup', stopResize)
+}
+
+const onResize = (e: MouseEvent) => {
+  const dx = startX - e.clientX
+  agentStore.setChatWidth(Math.min(Math.max(startWidth + dx, MIN_WIDTH), MAX_WIDTH))
+}
+
+const stopResize = () => {
+  document.body.style.userSelect = ''
+  document.body.style.cursor = ''
+
+  document.removeEventListener('mousemove', onResize)
+  document.removeEventListener('mouseup', stopResize)
+
+  const appRoot = document.getElementById('app');
+  const header = document.getElementById('af-header-nav');
+  if (appRoot && header) {
+    appRoot.style.transition = 'padding-right 200ms ease-in-out';
+    header.style.transition = 'padding-right 200ms ease-in-out';
+  }
+}
+
+onClickOutside(chatSurface, () => {if (!agentStore.isTeleportedToBody) agentStore.setIsChatOpen(false);});
+
+onMounted(async () => {
+  agentStore.regisrerTextInput(textInput.value);
+  textInput.value?.focus();
+  await agentStore.fetchSessionsList();
+});
+
+function autoResize() {
+  const el = textInput.value
+  if (!el) return
+
+  el.style.height = 'auto'
+  //max-w-48
+  const maxHeight = 192
+  if (el.scrollHeight > maxHeight) {
+    el.style.height = maxHeight + 'px'
+    el.style.overflowY = 'auto'
+  } else {
+    el.style.height = el.scrollHeight + 'px'
+    el.style.overflowY = 'hidden'
+  }
+}
+
+</script>

package/dist/custom/ConversationArea.vue

@@ -0,0 +1,175 @@
+<template>
+  <button @click="scrollContainer.scrollToBottom()">
+    <IconArrowDownOutline 
+      class="absolute bottom-32 right-4 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in" 
+      :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+      :disabled="!showScrollToBottomButton"
+    />
+  </button>
+  <SessionsHistory 
+    :class="agentStore.isSessionHistoryOpen ? 'translate-x-0' : '-translate-x-full'"
+  />
+  <div 
+    v-if="agentStore.isSessionHistoryOpen"
+    @click="agentStore.setSessionHistoryOpen(false)"
+    class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
+  >
+
+  </div>
+  <AutoScrollContainer
+    enabled 
+    class="flex flex-col overflow-y-auto border-t border-gray-200 dark:border-gray-700"
+    ref="scrollContainer"
+    behavior="smooth"
+  > 
+
+    <div 
+      v-for="message in props.messages" :key="message.id"
+      class="flex flex-col w-full"
+      :class="message.role === 'user' ? 'self-end' : 'self-start'"
+    >
+      <ToolsGroup :toolGroup="groupToolCallParts(message)" />
+      <template 
+        v-for="part in getParts(message)"
+        :key="part.type"
+      >
+        <Message
+          v-if="part.type !== 'data-tool-call'"
+          :message="part.text"
+          :role="message.role"
+          :type="part.type"
+          :state="part.state"
+          :data="part.data"
+          @toggle-thoughts="() => clicks++"
+        >
+        </Message>
+      </template>
+    </div>
+    <!-- Show a placeholder message if the last message is not of type 'text' or 'reasoning' -->
+    <Message
+      v-if="props.messages.length > 0 && showFakeThinkingMessage"
+      :message="''"
+      :role="props.messages[props.messages.length - 1].role"
+      type="reasoning"
+      state="streaming"
+    />
+    <div 
+      v-if="props.messages.length === 0"
+      class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium"
+    >
+      <p>Start the conversation</p>
+      <p class="tracking-normal text-base text">Give any input to begin</p>
+    </div>
+  </AutoScrollContainer>
+</template>
+
+
+<script setup lang="ts">
+import Message from './Message.vue';
+import type { IMessage, IPart } from './types';
+import { useTemplateRef, ref, defineAsyncComponent, onMounted, watch, computed } from 'vue';
+import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
+import SessionsHistory from './SessionsHistory.vue';
+import { useAgentStore } from './useAgentStore';
+import ToolRenderer from './ToolRenderer.vue';
+import ToolsGroup from './ToolsGroup.vue';
+
+const scrollContainer = useTemplateRef('scrollContainer');
+const showScrollToBottomButton = ref(false);
+const innerScrollContainerRef = ref(null);
+const AutoScrollContainer = defineAsyncComponent(() => import('@incremark/vue').then(module => module.AutoScrollContainer))
+const agentStore = useAgentStore();
+const clicks = ref(0);
+
+function recalculateScroll() {
+  if (scrollContainer.value) {
+    const isScrolledUp = scrollContainer.value.isUserScrolledUp();
+    showScrollToBottomButton.value = !!isScrolledUp;
+  }
+}
+
+onMounted(async () => {
+  await import('@incremark/theme/styles.css')
+});
+
+watch(scrollContainer, () => {
+  if (scrollContainer.value) {
+    innerScrollContainerRef.value = scrollContainer.value.container;
+
+    innerScrollContainerRef.value.addEventListener('scroll', () => {
+      recalculateScroll();
+    });
+  }
+})
+
+watch(clicks, () => {
+  recalculateScroll();
+})
+
+const showFakeThinkingMessage = computed(() => {
+  const lastMessage = props.messages[props.messages.length - 1];
+  if (!lastMessage) return false;
+  const lastPart = getParts(lastMessage)[getParts(lastMessage).length - 1];
+  return lastPart?.type !== 'text' && lastPart?.type !== 'reasoning';
+})
+
+const getParts = (message: IMessage) => {
+  return message.parts?.length
+    ? message.parts
+    : [{ text: '', type: 'reasoning', state: 'streaming' }];
+};
+
+const formatToolCallTextPart = ((part: IPart, currentMessage: IMessage) => {
+  if (part.type === 'data-tool-call') {
+    if (part.data?.phase === 'start') {
+      const finishedPart = currentMessage.parts?.find(p => p.type === 'data-tool-call' && p.data?.toolCallId === part.data?.toolCallId && p.data?.phase === 'end');
+      return {
+        type: 'text',
+        toolInfo: {
+          toolCallId: part.data!.toolCallId,
+          toolName: part.data!.toolName,
+          phase: finishedPart ? 'end' : 'start',
+          durationMs: finishedPart ? finishedPart.data?.durationMs : undefined,
+          input: part.data!.input,
+          output: finishedPart ? finishedPart.data!.output : undefined,
+        }          
+      }
+    }
+  }
+  return null;  
+});
+
+const groupToolCallParts = (message: IMessage) => {
+  const groupedParts = [];
+  let currentToolName = null;
+  const parts = getParts(message);
+  if (!parts) return [];
+  const formatedToolParts = parts.map(part => {
+    return formatToolCallTextPart(part as IPart, message)
+  });
+  for( const[index, part] of formatedToolParts.entries()){
+    if(!part?.toolInfo) {
+      continue;
+    }
+    console.log('part', part);
+    if (part.toolInfo.toolName === currentToolName) {
+      console.log('grouping part with tool name', currentToolName);
+      groupedParts[groupedParts.length - 1].groupedTools.push(part);
+      continue;
+    }
+    currentToolName = part.toolInfo.toolName;
+    console.log('starting new group with tool name', currentToolName);
+    groupedParts.push({
+      title: currentToolName,
+      groupedTools: [part]
+    });
+  }  
+  console.log('groupedParts', groupedParts);
+  return groupedParts;
+}
+
+const props = defineProps<{
+  messages: IMessage[]
+}>();
+
+</script>

package/dist/custom/Message.vue

@@ -0,0 +1,206 @@
+<template>
+  <div 
+    class="max-w-[80%] flex px-4 py-2 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
+    @click="handleMarkdownLinkClick"
+    :class="props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end' 
+      : isTypeReasoning || isTypeToolCall ? 'bg-transparent border-none self-start' 
+        : 'bg-blue-100 dark:bg-blue-700/10 self-start'"
+  >
+    <IncremarkContent
+      class="text-wrap break-words max-w-full"
+      v-if="content && props.type === 'text'"
+      :content="content" 
+      :is-finished="isFinished" 
+      :components="incremarkComponents"
+      :incremark-options="incremarkOptions"
+    />
+    <!-- reasoning/thinking -->
+    <div 
+      v-else-if="isTypeReasoning || isStateStreaming" 
+      class="flex flex-col items-start gap-1 text-gray-500 py-2 " 
+    >
+      <div class="flex items-center gap-1 hover:underline cursor-pointer text-lightListTableHeadingText hover:text-lightListTableHeadingText  dark:text-darkListTableHeadingText dark:hover:text-darkListTableHeadingText" @click="isThoughtsExpanded = !isThoughtsExpanded">
+        <IconAngleDownOutline 
+          v-if="content"
+          :class="isThoughtsExpanded ? 'rotate-180' : 'rotate-0'"
+          class="transition-transform duration-200"
+        />
+        {{ isStateStreaming ? 'Thinking' : 'Thoughts' }}
+        <template v-if="isStateStreaming">
+          <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary"></span>
+          <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary"></span>
+          <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary"></span>
+        </template>
+      </div>
+      <transition name="expand" class="max-h-36 overflow-y-auto">
+        <p v-show="isThoughtsExpanded" class="overflow-hidden">
+          {{ content }}
+        </p>
+      </transition>    
+    </div>
+    <div v-else-if="isTypeToolCall && isToolCallStart">
+      {{ props.data?.toolName }} start
+    </div>
+    <div v-else-if="isTypeToolCall && isToolCallEnd">
+      {{ props.data?.toolName }} end
+    </div>
+    <p v-else class="text-red-500 py-2">
+      Error occured
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+  
+  const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
+  const ShikiCodeBlock = defineAsyncComponent(() => import('./incremark_code_renderers/IncremarkShikiCodeBlock.vue'))
+
+  const incremarkComponents = {
+    code: ShikiCodeBlock,
+  };
+
+  const incremarkOptions = {
+		gfm: true,
+		math: { tex: true },
+		containers: true,
+		htmlTree: true,
+	};
+
+  const router = useRouter();
+
+  onMounted(async () => {
+    void import('katex/dist/katex.min.css')
+  })
+
+  const props = defineProps<{
+    type: string,
+    message: string
+    state: string
+    data?: any
+    role: 'user' | 'assistant'
+  }>();
+
+  const emit = defineEmits(['toggle-thoughts']);
+
+  const content = computed(() => props.message)
+  const isFinished = computed(() => props.state === 'done')
+  const isThoughtsExpanded = ref(false)
+
+  const isTypeReasoning = computed(() => props.type === 'reasoning')
+  const isTypeToolCall = computed(() => props.type === 'data-tool-call')
+  const isToolCallStart = computed(() => {
+    if (props.type !== 'data-tool-call') return false;
+    return props.data?.phase === 'start';
+  })
+  const isToolCallEnd = computed(() => {
+    if (props.type !== 'data-tool-call') return false;
+    return props.data?.phase === 'end';
+  })
+  const isStateStreaming = computed(() => props.state === 'streaming')
+
+  watch(isThoughtsExpanded, (newValue: boolean) => {
+    emit('toggle-thoughts', newValue);
+  })
+
+  function handleMarkdownLinkClick(event: MouseEvent) {
+    if (props.type !== 'text' || event.defaultPrevented || event.button !== 0) {
+      return;
+    }
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const anchor = target.closest('a');
+    if (!(anchor instanceof HTMLAnchorElement)) {
+      return;
+    }
+    const href = anchor.getAttribute('href');
+    if (!href || href.startsWith('mailto:') || href.startsWith('tel:')) {
+      return;
+    }
+    event.preventDefault();
+
+    const internalRoute = resolveInternalRoute(href);
+    if (internalRoute !== null) {
+      void router.push(internalRoute);
+      return;
+    }
+
+    window.location.assign(new URL(href, window.location.href).toString());
+  }
+
+  function resolveInternalRoute(href: string): string | null {
+    if (href.startsWith('#')) {
+      return `${window.location.pathname}${window.location.search}${href}`;
+    }
+
+    const resolvedUrl = new URL(href, window.location.href);
+    if (resolvedUrl.origin !== window.location.origin) {
+      return null;
+    }
+
+    return `${resolvedUrl.pathname}${resolvedUrl.search}${resolvedUrl.hash}`;
+  }
+
+</script>
+
+<style lang="scss">
+  .incremark-paragraph {
+    margin: 8px 0;
+  }
+</style>
+
+<style scoped>
+
+.bounce-dot1 {
+  animation: bounce 1.5s infinite;
+  animation-delay: 0s;
+}
+
+.bounce-dot2 {
+  animation: bounce 1.5s infinite;
+  animation-delay: 0.1s;
+}
+
+.bounce-dot3 {
+  animation: bounce 1.5s infinite;
+  animation-delay: 0.2s;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(20%);
+    opacity: 0.3;
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.3s ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+  opacity: 1;
+  max-height: 144px;
+}
+
+</style>

package/dist/custom/SessionsHistory.vue

@@ -0,0 +1,93 @@
+<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
+    "
+  >
+    <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
+    <Button @click="agentStore.createPreSession()" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
+      <IconPlusOutline class="w-5 h-5" />
+      {{ $t('New chat') }}
+    </Button>
+    <div class="w-full border-b border-gray-200 dark:border-gray-700"/>
+    <div class="absolute w-full h-full flex flex-col items-center justify-center bg-gray-100/50 dark:bg-gray-700/50 z-10" v-if="agentStore.isResponseInProgress">
+      <Spinner class="w-8 h-8" v-if="agentStore.isResponseInProgress" />
+      <p class="mt-2 text-gray-800 dark:text-gray-200">generation in progress...</p>
+    </div>
+    <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">
+        {{ group.label }}
+      </div>
+
+      <button
+        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 overflow-hidden text-nowrap"
+        :class="{'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId, 'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress}"
+        @click="agentStore.setActiveSession(session.sessionId)"
+        :disabled="agentStore.isResponseInProgress"
+      >
+        {{ session.title || session.sessionId }}
+        <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>
+    </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"
+    >
+      There is no previous chat sessions
+    </p>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { Button, Spinner } from '@/afcl'
+import { computed } from 'vue';
+import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+import type { ISessionsListItem } from './types';
+import { useAgentStore } from './useAgentStore';
+
+const agentStore = useAgentStore();
+
+const h3Style = "text-gray-800 dark:text-gray-200 font-medium text-xl tracking-widest mt-4"
+
+const dayLabelFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
+const dayLabelWithYearFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+
+function getLocalDayKey(date: Date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
+
+const groupedSessions = computed(() => {
+  const groups = new Map<string, { dayKey: string; label: string; sessions: ISessionsListItem[] }>();
+
+  for (const session of agentStore.sessionList) {
+    const date = new Date(session.timestamp);
+    const dayKey = getLocalDayKey(date);
+    const label = date.getFullYear() === new Date().getFullYear()
+      ? dayLabelFormatter.format(date)
+      : dayLabelWithYearFormatter.format(date);
+
+    if (!groups.has(dayKey)) {
+      groups.set(dayKey, {
+        dayKey,
+        label,
+        sessions: [],
+      });
+    }
+
+    groups.get(dayKey)!.sessions.push(session);
+  }
+
+  return Array.from(groups.values());
+});
+
+</script>