@adminforth/agent 1.34.2 → 1.36.0

package/agent/simpleAgent.ts

@@ -19,12 +19,14 @@ import {
 } from "./middleware/sequenceDebug.js";
 import type { ApiBasedTool } from "../apiBasedTools.js";
 import type { ToolCallEventSink } from "./toolCallEvents.js";
+import type { CurrentPageContext } from "./tools/getUserLocation.js";
 
 export const contextSchema = z.object({
   adminUser: z.custom<AdminUser>(),
   userTimeZone: z.string(),
   sessionId: z.string(),
   turnId: z.string(),
+  currentPage: z.custom<CurrentPageContext>().optional(),
   httpExtra: z.custom<Partial<HttpExtra>>().optional(),
   emitToolCallEvent: z.custom<ToolCallEventSink>(),
 });
@@ -231,6 +233,7 @@ export async function callAgent(params: {
   customComponentsDir: string;
   sessionId: string;
   turnId: string;
+  currentPage?: CurrentPageContext;
   httpExtra?: Partial<HttpExtra>;
   userTimeZone: string;
   emitToolCallEvent: ToolCallEventSink;
@@ -249,6 +252,7 @@ export async function callAgent(params: {
     customComponentsDir,
     sessionId,
     turnId,
+    currentPage,
     httpExtra,
     userTimeZone,
     emitToolCallEvent,
@@ -293,6 +297,7 @@ export async function callAgent(params: {
       userTimeZone,
       sessionId,
       turnId,
+      currentPage,
       httpExtra,
       emitToolCallEvent,
     },

package/agent/tools/getUserLocation.ts

@@ -0,0 +1,45 @@
+import { tool } from "langchain";
+import { z } from "zod";
+
+export type CurrentPageContext = {
+  path: string;
+  fullPath: string;
+  title: string;
+  url: string;
+};
+
+const getUserLocationSchema = z.object({});
+
+export function createGetUserLocationTool() {
+  return tool(
+    async (_input, runtime) => {
+      const currentPage = (runtime.context as { currentPage?: CurrentPageContext }).currentPage;
+
+      if (!currentPage) {
+        return JSON.stringify(
+          {
+            status: 404,
+            message: "Current user location is not available.",
+          },
+          null,
+          2,
+        );
+      }
+
+      return JSON.stringify(
+        {
+          status: 200,
+          location: currentPage,
+        },
+        null,
+        2,
+      );
+    },
+    {
+      name: "get_user_location",
+      description:
+        "Get the user's current location in the AdminForth UI, including current page path, full path, title, and URL. Call this tool when you do not understand what the user is referring to, especially when they say here, this page, current page, opened page, or otherwise rely on page context.",
+      schema: getUserLocationSchema,
+    },
+  );
+}

package/agent/tools/index.ts

@@ -3,6 +3,7 @@ import { createFetchSkillTool } from "./fetchSkill.js";
 import { createFetchToolSchemaTool } from "./fetchToolSchema.js";
 import type { ApiBasedTool } from "../../apiBasedTools.js";
 import { createApiTool } from "./apiTool.js";
+import { createGetUserLocationTool } from "./getUserLocation.js";
 
 export const ALWAYS_AVAILABLE_API_TOOL_NAMES = ["get_resource"] as const;
 
@@ -20,6 +21,7 @@ export async function createAgentTools(
 
       return createApiTool(toolName, apiBasedTool);
     }),
+    createGetUserLocationTool(),
     await createFetchSkillTool(customComponentsDir),
     await createFetchToolSchemaTool(apiBasedTools),
   ];

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,653 bytes  received 585 bytes  422,476.00 bytes/sec
-total size is 208,279  speedup is 0.99
+sent 216,415 bytes  received 699 bytes  434,228.00 bytes/sec
+total size is 213,565  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,270 @@
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import type { Chat } from '../../chat';
+import type { IAgentSession, ISessionsListItem, IPart } from '../../types';
+
+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));
+  }
+
+  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({message: 'Are you sure, that you want to delete this session?', 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,
+  };
+}