@adminforth/agent 1.15.0 → 1.16.1

package/agent/systemPrompt.ts

@@ -35,10 +35,21 @@ export const DEFAULT_AGENT_SYSTEM_PROMPT = [
   "If the confirmed plan has multiple steps, you may execute the whole confirmed plan without asking again between those steps.",
   "If the plan changes, expands, or you want to do anything beyond the confirmed plan, ask for confirmation again.",
   "Do not reuse an old confirmation for a new mutation plan.",
-
-  
 ].join(" ");
 
+export function appendCustomSystemPrompt(
+  systemPrompt: string,
+  customSystemPrompt?: string,
+) {
+  const normalizedCustomSystemPrompt = customSystemPrompt?.trim();
+
+  if (!normalizedCustomSystemPrompt) {
+    return systemPrompt;
+  }
+
+  return `${systemPrompt}\n\n${normalizedCustomSystemPrompt}`;
+}
+
 function formatResources(resources: AdminForthResource[]) {
   return resources
     .map((resource) => `- resourceId: ${resource.resourceId}\n  label: ${resource.label}`)

package/build.log

@@ -31,5 +31,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 184,200 bytes  received 436 bytes  369,272.00 bytes/sec
-total size is 182,411  speedup is 0.99
+sent 184,388 bytes  received 436 bytes  369,648.00 bytes/sec
+total size is 182,599  speedup is 0.99

package/custom/ChatSurface.vue

@@ -33,11 +33,13 @@
 
       <div 
         class="w-full h-full flex flex-col"
-        :class="{ 'ml-4': agentStore.isFullScreen }"
       >
-        <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
+        <div 
+          class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
+          :class="{ 'pl-4': agentStore.isFullScreen }"
+        >
           <div 
-            class="flex items-center h-[55px]"
+            class="flex items-center"
           >
             <IconBarsOutline 
               class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
@@ -99,9 +101,11 @@
           />
 
           <div 
-            class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative"
-            :class="agentStore.isFullScreen ? 'mx-auto' : ''"
-            :style="{ maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%' }"            
+            class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
+            :style="{ 
+              maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
+              transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
+            }"            
           >
             <textarea
               v-model="agentStore.userMessageInput"
@@ -121,7 +125,7 @@
             >
               <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="flex h-9 w-9 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"
@@ -148,7 +152,7 @@
               </div>
             </div>
             <Button 
-              class="absolute right-4 bottom-2 !p-0 h-[34px] w-[34px]"                    
+              class="absolute right-4 bottom-2 !p-0 h-9 w-9"                    
               @click="sendMessage" 
               :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
             >
@@ -193,7 +197,6 @@ const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
 const isModeMenuOpen = ref(false);
-
 let startX = 0
 let startWidth = 0
 

package/custom/ConversationArea.vue

@@ -1,5 +1,12 @@
 <template>
-
+  <button @click="scrollContainer.scrollToBottom()">
+    <IconArrowDownOutline 
+      class="absolute z-10 bottom-32 left-1/2 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'"
   />
@@ -12,24 +19,19 @@
   </div>
   <AutoScrollContainer
     :enabled="!showScrollToBottomButton" 
-    class="relative flex flex-col overflow-y-auto"
+    class="relative flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
     ref="scrollContainer"
     :threshold="10"
     behavior="smooth"
-    :class="agentStore.isFullScreen ? 'mx-auto' : ''"
     :style="{ 
       maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
-      transition: `max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
+      transition: `
+        max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
+        transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
+      `
     }"
   > 
 
-    <button @click="scrollContainer.scrollToBottom()">
-      <IconArrowDownOutline 
-        class="fixed bottom-32 left-1/2 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>
     <div 
       v-for="message in props.messages" :key="message.id"
       class="flex flex-col w-full"

package/custom/SessionsHistory.vue

@@ -23,12 +23,15 @@
       <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}"
+        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"
+        :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); agentStore.setSessionHistoryOpen(false);"
         :disabled="agentStore.isResponseInProgress"
       >
-        {{ session.title || session.sessionId }}
+        <p class="truncate">{{ session.title || session.sessionId }}</p>
         <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>

package/custom/composables/useAgentTransitions.ts

@@ -4,7 +4,7 @@ import { useAgentStore } from './useAgentStore';
 
 
 export const useAgentTransitions = defineStore('agentTransitions', () => {
-  const TRANSITION_DURATION = 200;
+  const TRANSITION_DURATION = 300;
 
   const agentStore = useAgentStore();
   const appRoot = ref<HTMLElement | null>(null);

package/dist/agent/systemPrompt.js

@@ -35,6 +35,13 @@ export const DEFAULT_AGENT_SYSTEM_PROMPT = [
     "If the plan changes, expands, or you want to do anything beyond the confirmed plan, ask for confirmation again.",
     "Do not reuse an old confirmation for a new mutation plan.",
 ].join(" ");
+export function appendCustomSystemPrompt(systemPrompt, customSystemPrompt) {
+    const normalizedCustomSystemPrompt = customSystemPrompt === null || customSystemPrompt === void 0 ? void 0 : customSystemPrompt.trim();
+    if (!normalizedCustomSystemPrompt) {
+        return systemPrompt;
+    }
+    return `${systemPrompt}\n\n${normalizedCustomSystemPrompt}`;
+}
 function formatResources(resources) {
     return resources
         .map((resource) => `- resourceId: ${resource.resourceId}\n  label: ${resource.label}`)

package/dist/custom/ChatSurface.vue

@@ -33,11 +33,13 @@
 
       <div 
         class="w-full h-full flex flex-col"
-        :class="{ 'ml-4': agentStore.isFullScreen }"
       >
-        <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
+        <div 
+          class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
+          :class="{ 'pl-4': agentStore.isFullScreen }"
+        >
           <div 
-            class="flex items-center h-[55px]"
+            class="flex items-center"
           >
             <IconBarsOutline 
               class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
@@ -99,9 +101,11 @@
           />
 
           <div 
-            class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative"
-            :class="agentStore.isFullScreen ? 'mx-auto' : ''"
-            :style="{ maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%' }"            
+            class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
+            :style="{ 
+              maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
+              transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
+            }"            
           >
             <textarea
               v-model="agentStore.userMessageInput"
@@ -121,7 +125,7 @@
             >
               <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="flex h-9 w-9 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"
@@ -148,7 +152,7 @@
               </div>
             </div>
             <Button 
-              class="absolute right-4 bottom-2 !p-0 h-[34px] w-[34px]"                    
+              class="absolute right-4 bottom-2 !p-0 h-9 w-9"                    
               @click="sendMessage" 
               :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
             >
@@ -193,7 +197,6 @@ const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
 const isModeMenuOpen = ref(false);
-
 let startX = 0
 let startWidth = 0
 

package/dist/custom/ConversationArea.vue

@@ -1,5 +1,12 @@
 <template>
-
+  <button @click="scrollContainer.scrollToBottom()">
+    <IconArrowDownOutline 
+      class="absolute z-10 bottom-32 left-1/2 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'"
   />
@@ -12,24 +19,19 @@
   </div>
   <AutoScrollContainer
     :enabled="!showScrollToBottomButton" 
-    class="relative flex flex-col overflow-y-auto"
+    class="relative flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
     ref="scrollContainer"
     :threshold="10"
     behavior="smooth"
-    :class="agentStore.isFullScreen ? 'mx-auto' : ''"
     :style="{ 
       maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
-      transition: `max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
+      transition: `
+        max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
+        transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
+      `
     }"
   > 
 
-    <button @click="scrollContainer.scrollToBottom()">
-      <IconArrowDownOutline 
-        class="fixed bottom-32 left-1/2 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>
     <div 
       v-for="message in props.messages" :key="message.id"
       class="flex flex-col w-full"

package/dist/custom/SessionsHistory.vue

@@ -23,12 +23,15 @@
       <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}"
+        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"
+        :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); agentStore.setSessionHistoryOpen(false);"
         :disabled="agentStore.isResponseInProgress"
       >
-        {{ session.title || session.sessionId }}
+        <p class="truncate">{{ session.title || session.sessionId }}</p>
         <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>

package/dist/custom/composables/useAgentTransitions.ts

@@ -4,7 +4,7 @@ import { useAgentStore } from './useAgentStore';
 
 
 export const useAgentTransitions = defineStore('agentTransitions', () => {
-  const TRANSITION_DURATION = 200;
+  const TRANSITION_DURATION = 300;
 
   const agentStore = useAgentStore();
   const appRoot = ref<HTMLElement | null>(null);

package/dist/index.js

@@ -20,7 +20,7 @@ import { HumanMessage, SystemMessage } from "langchain";
 import { createAgentChatModel, callAgent } from "./agent/simpleAgent.js";
 import { createSequenceDebugCollector } from "./agent/middleware/sequenceDebug.js";
 import { prepareApiBasedTools as buildApiBasedTools, } from './apiBasedTools.js';
-import { buildAgentSystemPrompt, DEFAULT_AGENT_SYSTEM_PROMPT, } from "./agent/systemPrompt.js";
+import { appendCustomSystemPrompt, buildAgentSystemPrompt, DEFAULT_AGENT_SYSTEM_PROMPT, } from "./agent/systemPrompt.js";
 import { ALWAYS_AVAILABLE_API_TOOL_NAMES } from "./agent/tools/index.js";
 function isAggregateErrorLike(error) {
     return typeof error === "object" && error !== null && Array.isArray(error.errors);
@@ -91,8 +91,8 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
     constructor(options) {
         super(options, import.meta.url);
         this.apiBasedTools = {};
-        this.agentSystemPromptPromise = Promise.resolve(DEFAULT_AGENT_SYSTEM_PROMPT);
         this.options = options;
+        this.agentSystemPromptPromise = Promise.resolve(appendCustomSystemPrompt(DEFAULT_AGENT_SYSTEM_PROMPT, this.options.systemPrompt));
         this.shouldHaveSingleInstancePerWholeApp = () => false;
     }
     modifyResourceConfig(adminforth, resourceConfig) {
@@ -127,7 +127,8 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
             assertRequiredApiTool(this.apiBasedTools, toolName);
         }
         assertRequiredApiTool(this.apiBasedTools, "update_record");
-        this.agentSystemPromptPromise = buildAgentSystemPrompt(adminforth);
+        this.agentSystemPromptPromise = buildAgentSystemPrompt(adminforth)
+            .then((systemPrompt) => appendCustomSystemPrompt(systemPrompt, this.options.systemPrompt));
     }
     instanceUniqueRepresentation(pluginOptions) {
         return `single`;
@@ -406,7 +407,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
             handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser }) {
                 const triggerMessage = body.triggerMessage;
                 const userId = adminUser.pk;
-                const title = triggerMessage ? (triggerMessage.length > 40 ? triggerMessage.slice(0, 40) + '...' : triggerMessage) : 'New Session';
+                const title = triggerMessage ? (triggerMessage.length > 40 ? triggerMessage.slice(0, 40) : triggerMessage) : 'New Session';
                 const newSession = {
                     [this.pluginOptions.sessionResource.idField]: randomUUID(),
                     [this.pluginOptions.sessionResource.titleField]: title,

package/index.ts

@@ -16,6 +16,7 @@ import {
 } from './apiBasedTools.js';
 import type { ApiBasedTool } from './apiBasedTools.js';
 import {
+  appendCustomSystemPrompt,
   buildAgentSystemPrompt,
   DEFAULT_AGENT_SYSTEM_PROMPT,
 } from "./agent/systemPrompt.js";
@@ -67,7 +68,7 @@ function assertRequiredApiTool(
 export default class AdminForthAgentPlugin extends AdminForthPlugin {
   options: PluginOptions;
   apiBasedTools: Record<string, ApiBasedTool> = {};
-  agentSystemPromptPromise = Promise.resolve(DEFAULT_AGENT_SYSTEM_PROMPT);
+  agentSystemPromptPromise: Promise<string>;
 
   private async createNewTurn(sessionId: string, prompt: string, response?: string) {
     const turnId = randomUUID();
@@ -109,6 +110,9 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
     this.options = options;
+    this.agentSystemPromptPromise = Promise.resolve(
+      appendCustomSystemPrompt(DEFAULT_AGENT_SYSTEM_PROMPT, this.options.systemPrompt),
+    );
     this.shouldHaveSingleInstancePerWholeApp = () => false;
   }
 
@@ -139,7 +143,8 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
       assertRequiredApiTool(this.apiBasedTools, toolName);
     }
     assertRequiredApiTool(this.apiBasedTools, "update_record");
-    this.agentSystemPromptPromise = buildAgentSystemPrompt(adminforth);
+    this.agentSystemPromptPromise = buildAgentSystemPrompt(adminforth)
+      .then((systemPrompt) => appendCustomSystemPrompt(systemPrompt, this.options.systemPrompt));
   }
 
   instanceUniqueRepresentation(pluginOptions: any) : string {
@@ -442,7 +447,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
       handler: async ({body, adminUser }) => {
         const triggerMessage = body.triggerMessage;
         const userId = adminUser.pk;
-        const title = triggerMessage ? (triggerMessage.length > 40 ? triggerMessage.slice(0, 40) + '...' : triggerMessage) : 'New Session';
+        const title = triggerMessage ? (triggerMessage.length > 40 ? triggerMessage.slice(0, 40) : triggerMessage) : 'New Session';
         const newSession = {
           [this.pluginOptions.sessionResource.idField]: randomUUID(),
           [this.pluginOptions.sessionResource.titleField]: title,

package/package.json

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

package/types.ts

@@ -50,6 +50,11 @@ export interface PluginOptions extends PluginsCommonOptions {
    */
   maxTokens?: number;
 
+  /**
+   * Optional custom system prompt appended to the built-in agent system prompt.
+   */
+  systemPrompt?: string;
+
   /**
    * Response generation level.
    * Default is low