@adminforth/agent 1.6.0 → 1.8.0

package/agent/simpleAgent.ts

@@ -170,21 +170,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 +186,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({

package/agent/systemPrompt.ts

@@ -57,9 +57,10 @@ export async function buildAgentSystemPrompt(adminforth: IAdminForth) {
     listBundledSkillManifests(),
   ]);
   const alwaysAvailableTools = ALWAYS_AVAILABLE_API_TOOL_NAMES.join(", ");
+  const adminBasePath = adminforth.config.baseUrlSlashed;
   const sections = [
     DEFAULT_AGENT_SYSTEM_PROMPT,
-    `BASE_URL: ${adminforth.config.baseUrl}`,
+    `ADMIN_BASE_PATH: ${adminBasePath}`,
     `List of resources:\n${formatResources(adminforth.config.resources)}`,
     `You have always-available base tools: ${alwaysAvailableTools}.`,
     primarySkills.length > 0
@@ -76,6 +77,8 @@ export async function buildAgentSystemPrompt(adminforth: IAdminForth) {
     "If a fetched skill lists a non-base tool you need, call fetch_tool_schema for it immediately instead of telling the user the tool is unavailable.",
     "For example: for record creation load mutate_data, read its tool list, call fetch_tool_schema for create_record, and then use create_record after confirmation.",
     "When fetch_tool_schema succeeds, that tool becomes available on the next step.",
+    "All admin links must be relative paths and must start with ADMIN_BASE_PATH.",
+    "Build record links as ADMIN_BASE_PATH + resource/{resourceId}/show/{primary key}. Do not prepend any extra slash before resource.",
     "Try to call as many tools as possible in parallel in one step.",
   ];
 

package/build.log

@@ -29,5 +29,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 170,361 bytes  received 413 bytes  341,548.00 bytes/sec
-total size is 168,687  speedup is 0.99
+sent 174,726 bytes  received 413 bytes  350,278.00 bytes/sec
+total size is 173,048  speedup is 0.99

package/custom/ChatSurface.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="relative w-6 h-6 cursor-pointer mr-6 mt-1
+    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"       
@@ -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>

package/custom/Message.vue

@@ -207,4 +207,44 @@
   max-height: 144px;
 }
 
+</style>
+
+<style lang="scss">
+.incremark a.incremark-link,
+.incremark a.incremark-link:visited {
+  display: inline-block;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-style:dotted;
+  color: rgb(0, 0, 0);
+  transition: color 0.2s ease;
+}
+
+.incremark a.incremark-link:hover {
+  color: rgb(74, 74, 255);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-style:dotted;
+}
+
+html[data-theme="dark"] .incremark a.incremark-link,
+html[data-theme="dark"] .incremark a.incremark-link:visited {
+  color: rgb(220, 220, 220);
+}
+
+html[data-theme="dark"] .incremark a.incremark-link:hover {
+  color: rgb(147, 147, 255);
+}
+
+a.incremark-link::after {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  rotate: -45deg;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 12H2m12 0l-4 4m4-4l-4-4'/%3E%3C/svg%3E") no-repeat center;
+  mask-size: contain;
+}
 </style>

package/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -255,6 +255,7 @@ function clearVega() {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96));
   box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.45);
+  margin: 16px 0 ;
 }
 
 .dark .incremark-shiki-code {

package/custom/skills/fetch_data/SKILL.md

@@ -12,4 +12,4 @@ To find specific data record you should use filters. ILIKE filters are preferred
 
 For long texts show only several first words and add "..." at the end (only if user did not request this field specifically).
 
-Also when you communicate with user about record, add related link to this record. For example /{BASE_URL}/resource/{resourceId}/show/{primary key}. Use _label from `get_resource_data` as anchor text for link (use markdown link). Links shoudl be always relative path, starting with slash.
+Also when you communicate with user about record, add related link to this record. Build it as `{ADMIN_BASE_PATH}resource/{resourceId}/show/{primary key}`. Use _label from `get_resource_data` as anchor text for link (use markdown link). Links should always be relative paths and must start with `ADMIN_BASE_PATH`. Do not add an extra slash after `ADMIN_BASE_PATH`.

package/custom/skills/mutate_data/SKILL.md

@@ -21,7 +21,7 @@ Use `start_custom_action` and `start_custom_bulk_action` for resource actions.
 Before performing any state mutation including action calls edit/delete please fetch record which is going to be edited/deleted and show user record in format field → value (show several most important fields which can help user to understand what exactly record he is going to edit or delete). 
 
 For field values with long texts show only several first words and add "..." at the end.
-Also please add related link to record with will be changed. For example /{BASE_URL}/resource/{resourceId}/show/{primary key}. Use _label from `get_resource_data` as anchor text for link (use markdown link). Links shoudl be always relative path, starting with slash.
+Also please add related link to record with will be changed. Build it as `{ADMIN_BASE_PATH}resource/{resourceId}/show/{primary key}`. Use _label from `get_resource_data` as anchor text for link (use markdown link). Links should always be relative paths and must start with `ADMIN_BASE_PATH`. Do not add an extra slash after `ADMIN_BASE_PATH`.
 
 And in the same message ask user for final confirmation.
 
@@ -62,7 +62,7 @@ If you want to block some user you can confirm that this action by saying:
 * IP Country: USA
 * Currently blocked: No // show this field only if it exists in user record
 
-View [John Doe](/resource/users/show/123)
+View [John Doe]({ADMIN_BASE_PATH}resource/users/show/123)
 Are you sure?
 ```
 
@@ -85,7 +85,7 @@ I am going to update user:
 * IP Country: USA
 I am going to change email from john_doe@example.com to new_email@example.com
 
-View [John Doe](/admin/resource/users/show/123)
+View [John Doe]({ADMIN_BASE_PATH}resource/users/show/123)
 
 Are you sure?
 ```
@@ -105,7 +105,7 @@ If you gonna delete user record, in confirmation please share full user info (no
 * Signed up: 2024 Jan 1
 * IP Country: USA
 
-View [John Doe](/admin/resource/users/show/123)
+View [John Doe]({ADMIN_BASE_PATH}resource/users/show/123)
 
 Are you sure?
 ```
@@ -130,7 +130,7 @@ I am going to create user:
 * Username: john_doe
 * Email: john_doe@example.com
 
-View [John Doe](/admin/resource/users/show/421) # 421 is id of new created record
+View [John Doe]({ADMIN_BASE_PATH}resource/users/show/421) # 421 is id of new created record
 
 Are you sure?
 ```

package/custom/useAgentStore.ts

@@ -7,6 +7,10 @@ import { Chat } from './chat';
 import { 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);
   }
@@ -91,6 +97,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;
@@ -105,6 +129,7 @@ export const useAgentStore = defineStore('agent', () => {
               message,
               sessionId,
               timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+              mode: activeModeName.value,
             };
 
             return {
@@ -368,6 +393,10 @@ export const useAgentStore = defineStore('agent', () => {
     setIsTeleportedToBody,
     chatWidth,
     setChatWidth,
-    focusTextInput
+    focusTextInput,
+    availableModes,
+    activeModeName,
+    setAvailableModes,
+    setActiveMode,
   }
-})
+})

package/dist/agent/simpleAgent.js

@@ -103,17 +103,8 @@ class AgentLlmMetricsLogger extends BaseCallbackHandler {
 function createAgentLlmMetricsLogger() {
     return new AgentLlmMetricsLogger();
 }
-function normalizeReasoning(reasoning) {
-    if (reasoning === "none") {
-        return undefined;
-    }
-    return {
-        effort: reasoning,
-        summary: "auto",
-    };
-}
 export function createAgentChatModel(params) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const adapter = params.adapter;
     const options = (_a = adapter.options) !== null && _a !== void 0 ? _a : {};
     if (!options.openAiApiKey) {
@@ -121,7 +112,7 @@ export function createAgentChatModel(params) {
     }
     const model = (_c = (_b = params.modelName) !== null && _b !== void 0 ? _b : options.model) !== null && _c !== void 0 ? _c : "gpt-5-nano";
     const baseURL = (_d = options.baseURL) !== null && _d !== void 0 ? _d : options.baseUrl;
-    const reasoning = normalizeReasoning(params.reasoning);
+    const reasoning = (_e = options.extraRequestBodyParameters) === null || _e === void 0 ? void 0 : _e.reasoning;
     // @ts-ignore
     return new ChatOpenAI(Object.assign(Object.assign(Object.assign({ apiKey: options.openAiApiKey, model, maxTokens: params.maxTokens, useResponsesApi: true, outputVersion: "v1", promptCacheKey: `adminforth-agent:${model}:system-v1:tools-v1`, promptCacheRetention: "in_memory" }, (reasoning ? { reasoning } : {})), (typeof options.timeoutMs === "number"
         ? { timeout: options.timeoutMs }

package/dist/agent/systemPrompt.js

@@ -52,9 +52,10 @@ export function buildAgentSystemPrompt(adminforth) {
             listBundledSkillManifests(),
         ]);
         const alwaysAvailableTools = ALWAYS_AVAILABLE_API_TOOL_NAMES.join(", ");
+        const adminBasePath = adminforth.config.baseUrlSlashed;
         const sections = [
             DEFAULT_AGENT_SYSTEM_PROMPT,
-            `BASE_URL: ${adminforth.config.baseUrl}`,
+            `ADMIN_BASE_PATH: ${adminBasePath}`,
             `List of resources:\n${formatResources(adminforth.config.resources)}`,
             `You have always-available base tools: ${alwaysAvailableTools}.`,
             primarySkills.length > 0
@@ -71,6 +72,8 @@ export function buildAgentSystemPrompt(adminforth) {
             "If a fetched skill lists a non-base tool you need, call fetch_tool_schema for it immediately instead of telling the user the tool is unavailable.",
             "For example: for record creation load mutate_data, read its tool list, call fetch_tool_schema for create_record, and then use create_record after confirmation.",
             "When fetch_tool_schema succeeds, that tool becomes available on the next step.",
+            "All admin links must be relative paths and must start with ADMIN_BASE_PATH.",
+            "Build record links as ADMIN_BASE_PATH + resource/{resourceId}/show/{primary key}. Do not prepend any extra slash before resource.",
             "Try to call as many tools as possible in parallel in one step.",
         ];
         return sections.filter(Boolean).join("\n\n");

package/dist/custom/ChatSurface.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="relative w-6 h-6 cursor-pointer mr-6 mt-1
+    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"       
@@ -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>

package/dist/custom/Message.vue

@@ -207,4 +207,44 @@
   max-height: 144px;
 }
 
+</style>
+
+<style lang="scss">
+.incremark a.incremark-link,
+.incremark a.incremark-link:visited {
+  display: inline-block;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-style:dotted;
+  color: rgb(0, 0, 0);
+  transition: color 0.2s ease;
+}
+
+.incremark a.incremark-link:hover {
+  color: rgb(74, 74, 255);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-style:dotted;
+}
+
+html[data-theme="dark"] .incremark a.incremark-link,
+html[data-theme="dark"] .incremark a.incremark-link:visited {
+  color: rgb(220, 220, 220);
+}
+
+html[data-theme="dark"] .incremark a.incremark-link:hover {
+  color: rgb(147, 147, 255);
+}
+
+a.incremark-link::after {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  rotate: -45deg;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 12H2m12 0l-4 4m4-4l-4-4'/%3E%3C/svg%3E") no-repeat center;
+  mask-size: contain;
+}
 </style>

package/dist/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -255,6 +255,7 @@ function clearVega() {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96));
   box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.45);
+  margin: 16px 0 ;
 }
 
 .dark .incremark-shiki-code {

package/dist/custom/skills/fetch_data/SKILL.md

@@ -12,4 +12,4 @@ To find specific data record you should use filters. ILIKE filters are preferred
 
 For long texts show only several first words and add "..." at the end (only if user did not request this field specifically).
 
-Also when you communicate with user about record, add related link to this record. For example /{BASE_URL}/resource/{resourceId}/show/{primary key}. Use _label from `get_resource_data` as anchor text for link (use markdown link). Links shoudl be always relative path, starting with slash.
+Also when you communicate with user about record, add related link to this record. Build it as `{ADMIN_BASE_PATH}resource/{resourceId}/show/{primary key}`. Use _label from `get_resource_data` as anchor text for link (use markdown link). Links should always be relative paths and must start with `ADMIN_BASE_PATH`. Do not add an extra slash after `ADMIN_BASE_PATH`.

package/dist/custom/skills/mutate_data/SKILL.md

@@ -21,7 +21,7 @@ Use `start_custom_action` and `start_custom_bulk_action` for resource actions.
 Before performing any state mutation including action calls edit/delete please fetch record which is going to be edited/deleted and show user record in format field → value (show several most important fields which can help user to understand what exactly record he is going to edit or delete). 
 
 For field values with long texts show only several first words and add "..." at the end.
-Also please add related link to record with will be changed. For example /{BASE_URL}/resource/{resourceId}/show/{primary key}. Use _label from `get_resource_data` as anchor text for link (use markdown link). Links shoudl be always relative path, starting with slash.
+Also please add related link to record with will be changed. Build it as `{ADMIN_BASE_PATH}resource/{resourceId}/show/{primary key}`. Use _label from `get_resource_data` as anchor text for link (use markdown link). Links should always be relative paths and must start with `ADMIN_BASE_PATH`. Do not add an extra slash after `ADMIN_BASE_PATH`.
 
 And in the same message ask user for final confirmation.
 
@@ -62,7 +62,7 @@ If you want to block some user you can confirm that this action by saying:
 * IP Country: USA
 * Currently blocked: No // show this field only if it exists in user record
 
-View [John Doe](/resource/users/show/123)
+View [John Doe]({ADMIN_BASE_PATH}resource/users/show/123)
 Are you sure?
 ```
 
@@ -85,7 +85,7 @@ I am going to update user:
 * IP Country: USA
 I am going to change email from john_doe@example.com to new_email@example.com
 
-View [John Doe](/admin/resource/users/show/123)
+View [John Doe]({ADMIN_BASE_PATH}resource/users/show/123)
 
 Are you sure?
 ```
@@ -105,7 +105,7 @@ If you gonna delete user record, in confirmation please share full user info (no
 * Signed up: 2024 Jan 1
 * IP Country: USA
 
-View [John Doe](/admin/resource/users/show/123)
+View [John Doe]({ADMIN_BASE_PATH}resource/users/show/123)
 
 Are you sure?
 ```
@@ -130,7 +130,7 @@ I am going to create user:
 * Username: john_doe
 * Email: john_doe@example.com
 
-View [John Doe](/admin/resource/users/show/421) # 421 is id of new created record
+View [John Doe]({ADMIN_BASE_PATH}resource/users/show/421) # 421 is id of new created record
 
 Are you sure?
 ```

package/dist/custom/useAgentStore.ts

@@ -7,6 +7,10 @@ import { Chat } from './chat';
 import { 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);
   }
@@ -91,6 +97,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;
@@ -105,6 +129,7 @@ export const useAgentStore = defineStore('agent', () => {
               message,
               sessionId,
               timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+              mode: activeModeName.value,
             };
 
             return {
@@ -368,6 +393,10 @@ export const useAgentStore = defineStore('agent', () => {
     setIsTeleportedToBody,
     chatWidth,
     setChatWidth,
-    focusTextInput
+    focusTextInput,
+    availableModes,
+    activeModeName,
+    setAvailableModes,
+    setActiveMode,
   }
-})
+})

package/dist/index.js

@@ -100,7 +100,11 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
             modifyResourceConfig: { get: () => super.modifyResourceConfig }
         });
         return __awaiter(this, void 0, void 0, function* () {
+            var _a;
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            if (!((_a = this.options.modes) === null || _a === void 0 ? void 0 : _a.length)) {
+                throw new Error("modes is required for AdminForthAgentPlugin");
+            }
             if (!this.adminforth.config.customization.globalInjections.header) {
                 this.adminforth.config.customization.globalInjections.header = [];
             }
@@ -108,11 +112,10 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
                 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");
             }
@@ -210,17 +213,14 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
                         messageId,
                     });
                     const maxTokens = (_f = this.options.maxTokens) !== null && _f !== void 0 ? _f : 10000;
-                    const reasoning = (_g = this.options.reasoning) !== null && _g !== void 0 ? _g : 'low';
-                    const summaryReasoning = 'low';
+                    const selectedMode = (_g = this.options.modes.find((mode) => mode.name === body.mode)) !== null && _g !== void 0 ? _g : 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 = yield this.agentSystemPromptPromise;
                     const stream = yield callAgent({

package/index.ts

@@ -1,6 +1,5 @@
 import type {
   AdminForthResource,
-  AdminUser,
   IAdminForth,
   IHttpServer
 } from "adminforth";
@@ -115,6 +114,9 @@ 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 = [];
     }
@@ -122,12 +124,10 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
       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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/agent",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/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;
 }