Merge branch 'main' of https://github.com/devforth/adminforth-agent

Author: yaroslav8765

agent/simpleAgent.ts

@@ -25,14 +25,6 @@ export const contextSchema = z.object({
   emitToolCallEvent: z.custom<ToolCallEventSink>(),
 });
 
-type AgentReasoning =
-  | "none"
-  | "minimal"
-  | "low"
-  | "medium"
-  | "high"
-  | "xhigh";
-
 type OpenAIBackedCompletionAdapter = CompletionAdapter & {
   options?: {
     openAiApiKey?: string;
@@ -170,21 +162,9 @@ function createAgentLlmMetricsLogger() {
   return new AgentLlmMetricsLogger();
 }
 
-function normalizeReasoning(reasoning: AgentReasoning) {
-  if (reasoning === "none") {
-    return undefined;
-  }
-
-  return {
-    effort: reasoning as "minimal" | "low" | "medium" | "high" | "xhigh",
-    summary: "auto" as const,
-  };
-}
-
 export function createAgentChatModel(params: {
   adapter: CompletionAdapter;
   maxTokens: number;
-  reasoning: AgentReasoning;
   modelName?: string;
 }) {
   const adapter = params.adapter as OpenAIBackedCompletionAdapter;
@@ -198,7 +178,7 @@ export function createAgentChatModel(params: {
 
   const model = params.modelName ?? options.model ?? "gpt-5-nano";
   const baseURL = options.baseURL ?? options.baseUrl;
-  const reasoning = normalizeReasoning(params.reasoning);
+  const reasoning = options.extraRequestBodyParameters?.reasoning;
 
   // @ts-ignore
   return new ChatOpenAI({
@@ -285,7 +265,7 @@ export async function callAgent(params: {
 
   return await agent.stream({ messages } as any, {
     streamMode: "messages",
-    recursionLimit: 50,
+    recursionLimit: 100,
     callbacks: [createAgentLlmMetricsLogger()],
     configurable: {
       thread_id: sessionId,

custom/ChatSurface.vue

@@ -78,13 +78,49 @@
             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"
+            :class="[
+              'min-h-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',
+              agentStore.availableModes.length > 1 ? 'p-4 pr-12 pb-12' : 'p-4 pr-12',
+            ]"
             placeholder="Type a message..."
-            @keydown.enter.exact.prevent="async () => {await agentStore.sendMessage(); autoResize();}"
+            @keydown.enter.exact.prevent="sendMessage"
           />
+          <div
+            v-if="agentStore.availableModes.length > 1"
+            ref="modeMenu"
+            class="absolute bottom-2 left-4"
+          >
+            <button
+              aria-label="Select mode"
+              class="flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-lightNavbarIcons transition-colors duration-200 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-darkNavbarIcons dark:hover:bg-gray-700"
+              :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
+              :disabled="agentStore.isResponseInProgress"
+              title="Select mode"
+              type="button"
+              @click="toggleModeMenu"
+            >
+              <IconBrainOutline class="h-4 w-4" />
+            </button>
+
+            <div
+              v-if="isModeMenuOpen"
+              class="absolute bottom-full left-0 mb-2 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
+            >
+              <button
+                v-for="mode in agentStore.availableModes"
+                :key="mode.name"
+                class="block w-full px-3 py-2 text-left text-sm text-lightInputText transition-colors duration-150 hover:bg-gray-100 dark:text-darkInputText dark:hover:bg-gray-700"
+                :class="mode.name === agentStore.activeModeName ? 'bg-gray-100 dark:bg-gray-700' : ''"
+                type="button"
+                @click="selectMode(mode.name)"
+              >
+                {{ mode.name }}
+              </button>
+            </div>
+          </div>
           <Button 
             class="absolute right-4 bottom-2 !p-0 h-[34px] w-[34px]"                    
-            @click="async () => {await agentStore.sendMessage(); autoResize();}" 
+            @click="sendMessage" 
             :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
           >
             <IconArrowUpOutline 
@@ -101,8 +137,8 @@
 
 <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 { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconBrainOutline } from '@iconify-prerendered/vue-flowbite';
+import { useTemplateRef, onMounted, ref } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import ConversationArea from './ConversationArea.vue';
 import { useAgentStore } from './useAgentStore';
@@ -112,13 +148,19 @@ import { useCoreStore } from '@/stores/core';
 const props = defineProps<{
   meta: {
     pluginInstanceId: string;
+    modes: Array<{
+      name: string;
+    }>;
+    defaultModeName: string | null;
   }
 }>();
 
 const chatSurface = useTemplateRef('chatSurface');
 const textInput = useTemplateRef('textInput');
+const modeMenu = useTemplateRef('modeMenu');
 const agentStore = useAgentStore();
 const coreStore = useCoreStore();
+const isModeMenuOpen = ref(false);
 
 const MAX_WIDTH = 800;
 const MIN_WIDTH = 382; //w-96
@@ -158,8 +200,10 @@ const stopResize = () => {
 }
 
 onClickOutside(chatSurface, () => {if (!agentStore.isTeleportedToBody) agentStore.setIsChatOpen(false);});
+onClickOutside(modeMenu, () => { isModeMenuOpen.value = false; });
 
 onMounted(async () => {
+  agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.regisrerTextInput(textInput.value);
   textInput.value?.focus();
   await agentStore.fetchSessionsList();
@@ -181,4 +225,19 @@ function autoResize() {
   }
 }
 
-</script>
+function toggleModeMenu() {
+  isModeMenuOpen.value = !isModeMenuOpen.value;
+}
+
+function selectMode(modeName: string) {
+  agentStore.setActiveMode(modeName);
+  isModeMenuOpen.value = false;
+}
+
+async function sendMessage() {
+  isModeMenuOpen.value = false;
+  await agentStore.sendMessage();
+  autoResize();
+}
+
+</script>

custom/ToolsGroup.vue

@@ -21,7 +21,6 @@
 </template>
 
 <script setup lang="ts">
-import { Tool } from 'langchain';
 import ToolRenderer from './ToolRenderer.vue';
 import type { IPart } from './types';
 import { ref } from 'vue';

custom/useAgentStore.ts

@@ -7,6 +7,10 @@ import { Chat } from './chat';
 import { cosineSimilarity, DefaultChatTransport } from 'ai';
 import { useCoreStore } from '@/stores/core';
 
+type AgentMode = {
+  name: string;
+};
+
 export const useAgentStore = defineStore('agent', () => {
   const activeSessionId = ref<string | null>(null);
   const currentSession = ref<IAgentSession | null>(null);
@@ -28,6 +32,8 @@ export const useAgentStore = defineStore('agent', () => {
   const header = ref<HTMLElement | null>(null);
   const lastSessionId = ref<string | null>(null);
   const chatWidth = ref(600);
+  const availableModes = ref<AgentMode[]>([]);
+  const activeModeName = ref<string | null>(null);
   function setLocalStorageItem(key: string, value: string) {
     window.localStorage.setItem(`${coreStore.config.brandName || 'adminforth'}-${key}`, value);
   }
@@ -105,6 +111,24 @@ export const useAgentStore = defineStore('agent', () => {
   })
   const chats = new Map<string, Chat<any>>();
   const currentChat = shallowRef<Chat<any>>();
+
+  function setAvailableModes(modes: AgentMode[], defaultModeName?: string | null) {
+    availableModes.value = modes;
+    activeModeName.value =
+      modes.find((mode) => mode.name === activeModeName.value)?.name
+      ?? defaultModeName
+      ?? modes[0]?.name
+      ?? null;
+  }
+
+  function setActiveMode(modeName: string) {
+    if (!availableModes.value.some((mode) => mode.name === modeName)) {
+      return;
+    }
+
+    activeModeName.value = modeName;
+  }
+
   function setCurrentChat(sessionId: string) {
     if (chats.has(sessionId)) {
       currentChat.value = chats.get(sessionId) || null;
@@ -119,6 +143,7 @@ export const useAgentStore = defineStore('agent', () => {
               message,
               sessionId,
               timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+              mode: activeModeName.value,
             };
 
             return {
@@ -384,6 +409,10 @@ export const useAgentStore = defineStore('agent', () => {
     setChatWidth,
     focusTextInput,
     setFullScreen,
-    isFullScreen
+    isFullScreen,
+    availableModes,
+    activeModeName,
+    setAvailableModes,
+    setActiveMode,
   }
-})
+})

index.ts

@@ -1,6 +1,5 @@
 import type {
   AdminForthResource,
-  AdminUser,
   IAdminForth,
   IHttpServer
 } from "adminforth";
@@ -115,19 +114,20 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
 
   async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
     super.modifyResourceConfig(adminforth, resourceConfig);
+    if (!this.options.modes?.length) {
+      throw new Error("modes is required for AdminForthAgentPlugin");
+    }
     if (!this.adminforth.config.customization.globalInjections.header) {
       this.adminforth.config.customization.globalInjections.header = [];
     }
     this.adminforth.config.customization.globalInjections.header.push({
       file: this.componentPath("ChatSurface.vue"),
       meta: {
         pluginInstanceId: this.pluginInstanceId,
+        modes: this.options.modes.map((mode) => ({ name: mode.name })),
+        defaultModeName: this.options.modes[0].name,
       }
     });
-
-    if (!this.pluginOptions.completionAdapter) {
-      throw new Error("CompletionAdapter is required for AdminForthAgentPlugin");
-    }
     if (!this.pluginOptions.sessionResource) {
       throw new Error("sessionResource is required for AdminForthAgentPlugin");
     }
@@ -244,19 +244,15 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
           });
 
           const maxTokens = this.options.maxTokens ?? 10000;
-          const reasoning = this.options.reasoning ?? 'low';
-          const summaryReasoning = 'low';
-
+          const selectedMode = this.options.modes.find((mode) => mode.name === body.mode) ?? this.options.modes[0];
           const model = createAgentChatModel({
-            adapter: this.options.completionAdapter,
+            adapter: selectedMode.completionAdapter,
             maxTokens,
-            reasoning,
           });
 
           const summaryModel = createAgentChatModel({
-            adapter: this.options.completionAdapter,
+            adapter: selectedMode.completionAdapter,
             maxTokens,
-            reasoning: summaryReasoning,
           });
           const systemPrompt = await this.agentSystemPromptPromise;
           const stream = await callAgent({

types.ts

@@ -1,5 +1,4 @@
-import  {type PluginsCommonOptions } from "adminforth";
-import { type CompletionAdapter } from "adminforth";
+import { type PluginsCommonOptions, type CompletionAdapter } from "adminforth";
 
 interface ISessionResource {
   resourceId: string;
@@ -22,11 +21,14 @@ interface ITurnResource {
 
 export interface PluginOptions extends PluginsCommonOptions {
   /**
-   * Adapter instance that will be used to generate responses. 
-   * You can use any adapter that implements the CompletionAdapter interface, for example the OpenAIAdapter included in adminforth, 
-   * or create your own that fetches responses from your custom backend.
+   * Modes for the plugin.
+   * Each mode can have its own configuration.
+   * Each mode uses its own completion adapter instance.
    */
-  completionAdapter: CompletionAdapter;
+  modes: {
+    name: string;
+    completionAdapter: CompletionAdapter;
+  }[];
 
   /**
    * Max tokens for the generation.
@@ -40,6 +42,13 @@ export interface PluginOptions extends PluginsCommonOptions {
    */
   reasoning?: "none" | "minimal" | "low" | "medium" | "high" | "xhigh";
 
+  /**
+   * Resource configuration for sessions.
+   */
   sessionResource: ISessionResource;
+  
+  /**
+   * Resource configuration for turns.
+   */
   turnResource: ITurnResource;
 }