@adminforth/agent 1.35.0 → 1.37.0

package/build.log

@@ -8,6 +8,7 @@ custom/ChatSurface.vue
 custom/CustomAutoScrollContainer.vue
 custom/SessionsHistory.vue
 custom/chat.ts
+custom/env.d.ts
 custom/package.json
 custom/pnpm-lock.yaml
 custom/tsconfig.json
@@ -16,6 +17,12 @@ custom/utils.ts
 custom/composables/
 custom/composables/useAgentStore.ts
 custom/composables/useAgentTransitions.ts
+custom/composables/agentStore/
+custom/composables/agentStore/constants.ts
+custom/composables/agentStore/pageContext.ts
+custom/composables/agentStore/useAgentChat.ts
+custom/composables/agentStore/useAgentPlaceholder.ts
+custom/composables/agentStore/useAgentSessions.ts
 custom/conversation_area/
 custom/conversation_area/ConversationArea.vue
 custom/conversation_area/MessageRenderer.vue
@@ -40,5 +47,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 210,681 bytes  received 581 bytes  422,524.00 bytes/sec
-total size is 208,279  speedup is 0.99
+sent 216,524 bytes  received 699 bytes  434,446.00 bytes/sec
+total size is 213,674  speedup is 0.98

package/custom/ChatSurface.vue

@@ -170,6 +170,7 @@
                 </div>
               </div>
               <Button 
+                v-if="!agentStore.isResponseInProgress"
                 class="absolute right-4 bottom-2 !p-0 h-9 w-9"                    
                 @click="sendMessage" 
                 :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
@@ -179,6 +180,15 @@
                     text-white" 
                 />
               </Button>
+              <Button
+                v-else
+                class="absolute right-4 bottom-2 !p-0 h-9 w-9"    
+                @click="stopCurrentRequest"                
+              >
+                <div
+                  class="w-3 h-3 bg-white rounded-sm"
+                />
+              </Button>
             </div>
           </div>
         </div>
@@ -231,6 +241,7 @@ onClickOutside(modeMenu, () => { isModeMenuOpen.value = false; });
 
 onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
+  agentStore.setCurrentGenerationModeFromLocalStorage();
   agentStore.regisrerTextInput(textInput.value);
   window.addEventListener('resize', updateHeight)
   textInput.value?.focus();
@@ -316,6 +327,10 @@ async function sendMessage() {
   conversationArea.value?.handleSendMessage();
 }
 
+function stopCurrentRequest() {
+  agentStore.abortCurrentChatRequestAndAddSystemMessage();
+}
+
 function updateHeight() {
   dvh.value = Math.round(window.visualViewport?.height || window.innerHeight);
 }

package/custom/composables/agentStore/constants.ts

@@ -0,0 +1,12 @@
+export type AgentMode = {
+  name: string;
+};
+
+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 PLACEHOLDER_TYPING_DELAY_MS = 60;
+export const PLACEHOLDER_DELETING_DELAY_MS = 35;
+export const PLACEHOLDER_HOLD_DELAY_MS = 3000;

package/custom/composables/agentStore/pageContext.ts

@@ -0,0 +1,8 @@
+export function getCurrentPageContext() {
+  return {
+    path: window.location.pathname,
+    fullPath: `${window.location.pathname}${window.location.search}${window.location.hash}`,
+    title: document.title,
+    url: window.location.href,
+  };
+}

package/custom/composables/agentStore/useAgentChat.ts

@@ -0,0 +1,69 @@
+import { DefaultChatTransport } from 'ai';
+import { shallowRef, type Ref } from 'vue';
+import { Chat } from '../../chat';
+import { getCurrentPageContext } from './pageContext';
+
+type AgentImportMeta = ImportMeta & {
+  env: {
+    VITE_ADMINFORTH_PUBLIC_PATH?: string;
+  };
+};
+
+type CreateAgentChatManagerOptions = {
+  lastMessage: Ref<string>;
+  activeModeName: Ref<string | null>;
+};
+
+export function createAgentChatManager({
+  lastMessage,
+  activeModeName,
+}: CreateAgentChatManagerOptions) {
+  const chats = new Map<string, Chat<any>>();
+  const currentChat = shallowRef<Chat<any> | null>();
+
+  function setCurrentChat(sessionId: string) {
+    if (chats.has(sessionId)) {
+      currentChat.value = chats.get(sessionId) || null;
+    } else {
+      const newChat = new Chat({
+        transport: new DefaultChatTransport({
+          api: `${(import.meta as AgentImportMeta).env.VITE_ADMINFORTH_PUBLIC_PATH || ''}/adminapi/v1/agent/response`,
+          credentials: 'include',
+          prepareSendMessagesRequest({ messages }: any) {
+            const message = lastMessage.value;
+            const body = {
+              message,
+              sessionId,
+              timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+              mode: activeModeName.value,
+              currentPage: getCurrentPageContext(),
+            };
+
+            return {
+              headers: {
+                Accept: 'text/event-stream',
+                'x-vercel-ai-ui-message-stream': 'v1',
+              },
+              body
+            };
+          }
+        }),
+        onError(error: unknown) {
+          console.error('Chat error:', error);
+        },
+      });
+      chats.set(sessionId, newChat);
+      currentChat.value = newChat;
+    }
+  }
+
+  function abortCurrentChatRequest() {
+    currentChat.value?.stop();
+  }
+
+  return {
+    currentChat,
+    setCurrentChat,
+    abortCurrentChatRequest,
+  };
+}

package/custom/composables/agentStore/useAgentPlaceholder.ts

@@ -0,0 +1,142 @@
+import { ref, watch, type Ref } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import {
+  DEFAULT_TEXTAREA_PLACEHOLDER,
+  PLACEHOLDER_DELETING_DELAY_MS,
+  PLACEHOLDER_HOLD_DELAY_MS,
+  PLACEHOLDER_TYPING_DELAY_MS,
+} from './constants';
+
+type CreateAgentPlaceholderControllerOptions = {
+  userMessageInput: Ref<unknown>;
+};
+
+export function createAgentPlaceholderController({
+  userMessageInput,
+}: CreateAgentPlaceholderControllerOptions) {
+  const userMessagePlaceholder = ref(DEFAULT_TEXTAREA_PLACEHOLDER);
+  const placeholderMessages = ref<string[]>([]);
+  const hasTypedMessageInPageSession = ref(false);
+
+  let placeholderAnimationTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function clearPlaceholderAnimationTimer() {
+    if (placeholderAnimationTimer !== null) {
+      clearTimeout(placeholderAnimationTimer);
+      placeholderAnimationTimer = null;
+    }
+  }
+
+  function resetPlaceholder() {
+    clearPlaceholderAnimationTimer();
+    userMessagePlaceholder.value = DEFAULT_TEXTAREA_PLACEHOLDER;
+  }
+
+  function stopPlaceholderAnimation() {
+    resetPlaceholder();
+  }
+
+  function startPlaceholderAnimation(messages: string[]) {
+    clearPlaceholderAnimationTimer();
+
+    if (!messages.length) {
+      userMessagePlaceholder.value = DEFAULT_TEXTAREA_PLACEHOLDER;
+      return;
+    }
+
+    let messageIndex = 0;
+    let visibleLength = 0;
+    let isDeleting = false;
+
+    const animate = () => {
+      const currentMessage = messages[messageIndex];
+
+      if (!currentMessage) {
+        resetPlaceholder();
+        return;
+      }
+
+      if (!isDeleting) {
+        visibleLength += 1;
+        userMessagePlaceholder.value = currentMessage.slice(0, visibleLength);
+
+        if (visibleLength >= currentMessage.length) {
+          isDeleting = true;
+          placeholderAnimationTimer = setTimeout(animate, PLACEHOLDER_HOLD_DELAY_MS);
+          return;
+        }
+
+        placeholderAnimationTimer = setTimeout(animate, PLACEHOLDER_TYPING_DELAY_MS);
+        return;
+      }
+
+      visibleLength -= 1;
+      userMessagePlaceholder.value = currentMessage.slice(0, Math.max(visibleLength, 0));
+
+      if (visibleLength <= 0) {
+        isDeleting = false;
+        messageIndex = (messageIndex + 1) % messages.length;
+        placeholderAnimationTimer = setTimeout(animate, PLACEHOLDER_TYPING_DELAY_MS);
+        return;
+      }
+
+      placeholderAnimationTimer = setTimeout(animate, PLACEHOLDER_DELETING_DELAY_MS);
+    };
+
+    animate();
+  }
+
+  async function fetchPlaceholderMessages() {
+    if (hasTypedMessageInPageSession.value) {
+      stopPlaceholderAnimation();
+      return;
+    }
+
+    try {
+      const res = await callAdminForthApi({
+        method: 'POST',
+        path: '/agent/get-placeholder-messages',
+      });
+
+      if (res.error) {
+        console.error('Error fetching placeholder messages:', res.error);
+        placeholderMessages.value = [];
+        resetPlaceholder();
+        return;
+      }
+
+      placeholderMessages.value = Array.isArray(res.messages)
+        ? res.messages.filter((message: unknown): message is string => typeof message === 'string' && message.length > 0)
+        : [];
+
+      if (!placeholderMessages.value.length) {
+        resetPlaceholder();
+        return;
+      }
+
+      startPlaceholderAnimation(placeholderMessages.value);
+    } catch (error) {
+      console.error('Error fetching placeholder messages', error);
+      placeholderMessages.value = [];
+      resetPlaceholder();
+    }
+  }
+
+  watch(userMessageInput, (newVal: unknown) => {
+    if (hasTypedMessageInPageSession.value) {
+      return;
+    }
+
+    if (typeof newVal === 'string' && newVal.trim() !== '') {
+      hasTypedMessageInPageSession.value = true;
+      stopPlaceholderAnimation();
+    }
+  });
+
+  return {
+    userMessagePlaceholder,
+    hasTypedMessageInPageSession,
+    fetchPlaceholderMessages,
+    stopPlaceholderAnimation,
+  };
+}

package/custom/composables/agentStore/useAgentSessions.ts

@@ -0,0 +1,272 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import type { Chat } from '../../chat';
+import type { IAgentSession, ISessionsListItem, IPart } from '../../types';
+import { useI18n } from 'vue-i18n';
+
+type AdminforthLike = {
+  confirm(options: { message: string; yes: string; no: string }): Promise<boolean>;
+};
+
+type CreateAgentSessionManagerOptions = {
+  activeSessionId: Ref<string | null>;
+  currentSession: Ref<IAgentSession | null>;
+  sessionList: Ref<ISessionsListItem[]>;
+  sessions: Ref<Record<string, IAgentSession>>;
+  currentChat: ShallowRef<Chat<any> | null | undefined>;
+  trimmedUserMessage: ComputedRef<string>;
+  isResponseInProgress: ComputedRef<boolean>;
+  userMessageInput: Ref<any>;
+  lastMessage: Ref<string>;
+  blockCloseOfChat: Ref<boolean>;
+  adminforth: AdminforthLike;
+  setCurrentChat: (sessionId: string) => void;
+};
+
+export function createAgentSessionManager({
+  activeSessionId,
+  currentSession,
+  sessionList,
+  sessions,
+  currentChat,
+  trimmedUserMessage,
+  isResponseInProgress,
+  userMessageInput,
+  lastMessage,
+  blockCloseOfChat,
+  adminforth,
+  setCurrentChat,
+}: CreateAgentSessionManagerOptions) {
+  function sortSessionsListByTimestamp(sessionsListToSort: ISessionsListItem[]) {
+    return [...sessionsListToSort].sort((a: ISessionsListItem, b: ISessionsListItem) => b.timestamp.localeCompare(a.timestamp));
+  }
+
+  const { t } = useI18n();
+  function saveCurrentSessionInCache() {
+    if (currentSession.value) {
+      currentSession.value.messages = currentChat.value?.messages.map((m: any) => ({
+        role: m.role,
+        text: m.parts.map((p: IPart) => p.type === 'text' ? p.text : '').join(''),
+      })) || [];
+      sessions.value[currentSession.value.sessionId] = currentSession.value;
+    }
+  }
+
+  async function fetchSession(sessionId: string) {
+    try {
+      const res = await callAdminForthApi({
+        method: 'POST',
+        path: '/agent/get-session-info',
+        body: { sessionId },
+      });
+      if (res.error) {
+        console.error('Error fetching session:', res.error);
+        return;
+      }
+      sessions.value[sessionId] = res.session;
+      setCurrentChat(sessionId);
+    } catch (error) {
+      console.error('Error fetching session', error);
+    }
+  }
+
+  async function setActiveSession(sessionId: string) {
+    activeSessionId.value = sessionId;
+    saveCurrentSessionInCache();
+    if (!sessions.value[sessionId]) {
+      await fetchSession(sessionId);
+    }
+    currentSession.value = sessions.value[sessionId];
+    setCurrentChat(sessionId);
+    if (currentChat.value.messages.length === 0) {
+      currentChat.value.messages = currentSession.value?.messages.map((m: any) => ({
+        role: m.role,
+        parts:[{
+          type: 'text',
+          text: m.text,
+          state: 'done',
+        }]
+      }));
+    }
+  }
+
+  async function deletePreSession() {
+    sessionList.value = sessionList.value.filter((s: ISessionsListItem) => s.sessionId !== 'pre-session');
+    if (activeSessionId.value === 'pre-session') {
+      activeSessionId.value = null;
+      currentSession.value = null;
+    }
+  }
+
+  async function createNewSession(triggerMessage?: string) {
+    try {
+      const res = await callAdminForthApi({
+        method: 'POST',
+        path: '/agent/create-session',
+        body: {
+          triggerMessage
+        },
+      });
+      if (res.error) {
+        console.error('Error creating new session:', res.error);
+        return;
+      }
+      deletePreSession();
+      sessions.value[res.sessionId] = res;
+      sessionList.value.unshift({
+        sessionId: res.sessionId,
+        title: res.title,
+        timestamp: new Date().toISOString(),
+      });
+      setActiveSession(res.sessionId);
+    } catch (error) {
+      console.error('Error creating new session', error);
+    }
+  }
+
+  async function sendMessage() {
+    const message = trimmedUserMessage.value;
+    if (!message || isResponseInProgress.value) {
+      return;
+    }
+    if (!currentSession.value || currentSession.value.sessionId === 'pre-session') {
+      await createNewSession(message);
+    }
+    currentSession.value!.timestamp = new Date().toISOString();
+    sessionList.value = sortSessionsListByTimestamp(sessionList.value.map((s: ISessionsListItem) => s.sessionId === currentSession.value?.sessionId ? {
+      ...s,
+      timestamp: currentSession.value?.timestamp || s.timestamp,
+    } : s));
+    lastMessage.value = message;
+    currentChat.value?.sendMessage({
+      text: message,
+    });
+    userMessageInput.value = '';
+  }
+
+  async function createPreSession() {
+    saveCurrentSessionInCache();
+    if (!sessionList.value.some((s: ISessionsListItem) => s.sessionId === 'pre-session')) {
+      sessionList.value.unshift({
+        sessionId: 'pre-session',
+        title: 'New Session',
+        timestamp: new Date().toISOString(),
+      });
+    }
+
+    activeSessionId.value = 'pre-session';
+    currentSession.value = {
+      sessionId: 'pre-session',
+      title: 'New Session',
+      timestamp: new Date().toISOString(),
+      messages: [],
+    };
+    sessions.value['pre-session'] = currentSession.value;
+    setCurrentChat('pre-session');
+  }
+
+  async function deleteSession(sessionId: string) {
+    if (sessionId === 'pre-session') {
+      deletePreSession();
+      return;
+    }
+    blockCloseOfChat.value = true;
+    const isConfirmed = await adminforth.confirm({title: t('Are you sure, that you want to delete this session?'), message: t('This process is irreversible.'), yes: 'Yes', no: 'No'});
+    blockCloseOfChat.value = false;
+    if (!isConfirmed) {
+      return;
+    }
+    try {
+      const res = await callAdminForthApi({
+        method: 'POST',
+        path: '/agent/delete-session',
+        body: { sessionId },
+      });
+      if (res.error) {
+        console.error('Error deleting session:', res.error);
+        return;
+      }
+      delete sessions.value[sessionId];
+      sessionList.value = sessionList.value.filter((s: ISessionsListItem) => s.sessionId !== sessionId);
+      if (activeSessionId.value === sessionId) {
+        activeSessionId.value = null;
+        currentSession.value = null;
+      }
+    } catch (error) {
+      console.error('Error deleting session', error);
+    }
+    if(sessionId === activeSessionId.value) {
+      activeSessionId.value = sessionList.value.length > 0 ? sessionList.value[0].sessionId : null;
+      if (activeSessionId.value) {
+        currentSession.value = sessions.value[activeSessionId.value] || null;
+      } else {
+        currentSession.value = null;
+      }
+    }
+  }
+
+  async function fetchSessionsList() {
+    try {
+      const res = await callAdminForthApi({
+        method: 'POST',
+        path: '/agent/get-sessions',
+        body: {
+          limit: 100,
+        },
+      });
+      if (res.error) {
+        console.error('Error fetching sessions list:', res.error);
+        return;
+      }
+      sessionList.value = res.sessions;
+    } catch (error) {
+      console.error('Error fetching sessions list', error);
+    }
+  }
+
+  function addDebugMessage(message: string) {
+    const debugMessage = {
+      role: 'assistant',
+      parts: [{
+        type: 'text',
+        text: message,
+        state: 'done',
+      }]
+    };
+    currentChat.value?.messages.push(debugMessage);
+  }
+
+  function addSystemMessage(message: string) {
+    const systemMessage = {
+      role: 'system',
+      parts: [{
+        type: 'text',
+        text: message,
+        state: 'done',
+      }]
+    };
+    currentChat.value?.messages.push(systemMessage);
+    try {
+      const res = callAdminForthApi({
+        method: 'POST',
+        path: '/agent/add-system-message-to-turns',
+        body: {
+          sessionId: activeSessionId.value,
+          systemMessage: message,
+        },
+      });
+    } catch (error) {
+      console.error('Error adding system message', error);
+    }
+  }
+
+  return {
+    sendMessage,
+    createPreSession,
+    setActiveSession,
+    fetchSessionsList,
+    deleteSession,
+    addDebugMessage,
+    addSystemMessage,
+  };
+}