@adminforth/agent 1.1.0 → 1.2.0

package/agent/middleware/openAiResponsesContinuation.ts

@@ -0,0 +1,92 @@
+import { AIMessage } from "@langchain/core/messages";
+import { createMiddleware } from "langchain";
+
+type OpenAiResponsesMetadata = {
+  id?: string;
+};
+
+type OpenAiResponsesContext = {
+  sessionId: string;
+  turnId: string;
+};
+
+function getTurnKey(context: OpenAiResponsesContext) {
+  return `${context.sessionId}:${context.turnId}`;
+}
+
+function getResponseId(message: AIMessage) {
+  const metadata = message.response_metadata as OpenAiResponsesMetadata | undefined;
+  return metadata?.id ?? null;
+}
+
+function getPreviousResponseId(modelSettings?: Record<string, unknown>) {
+  return (modelSettings as { previous_response_id?: string } | undefined)
+    ?.previous_response_id;
+}
+
+function getContinuationMessages<T extends { response_metadata?: unknown }>(
+  messages: T[],
+  previousResponseId: string,
+) {
+  let continuationStartIndex: number | null = null;
+
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+
+    if (
+      AIMessage.isInstance(message) &&
+      (message.response_metadata as OpenAiResponsesMetadata | undefined)?.id ===
+        previousResponseId
+    ) {
+      continuationStartIndex = index + 1;
+      break;
+    }
+  }
+
+  if (continuationStartIndex === null) {
+    return null;
+  }
+
+  return messages.slice(continuationStartIndex);
+}
+
+export function createOpenAiResponsesContinuationMiddleware() {
+  const responseIdsByTurn = new Map<string, string>();
+
+  return createMiddleware({
+    name: "OpenAiResponsesContinuationMiddleware",
+    async wrapModelCall(request, handler) {
+      const context = request.runtime.context as OpenAiResponsesContext;
+      const turnKey = getTurnKey(context);
+      const previousResponseId =
+        getPreviousResponseId(request.modelSettings) ??
+        responseIdsByTurn.get(turnKey);
+      const continuationMessages = previousResponseId
+        ? getContinuationMessages(request.messages, previousResponseId)
+        : null;
+
+      const response = await handler(
+        previousResponseId && continuationMessages
+          ? {
+              ...request,
+              messages: continuationMessages,
+              modelSettings: {
+                ...request.modelSettings,
+                previous_response_id: previousResponseId,
+              },
+            }
+          : request,
+      ) as AIMessage;
+
+      const responseId = getResponseId(response);
+
+      if (responseId) {
+        responseIdsByTurn.set(turnKey, responseId);
+      } else {
+        responseIdsByTurn.delete(turnKey);
+      }
+
+      return response;
+    },
+  });
+}

package/agent/middleware/sequenceDebug.ts

@@ -23,6 +23,8 @@ export type SequenceDebug = {
   prompt: string;
   reasoning: string;
   text: string;
+  cachedTokens: number;
+  responseId: string | null;
   toolCalls: SequenceDebugToolCall[];
   endedAt: string;
   resultType: SequenceDebugResultType;
@@ -37,9 +39,21 @@ type PendingSequenceDebug = Omit<SequenceDebug, "toolCalls" | "endedAt" | "resul
 type SequenceDebugModelCall = {
   reasoning: string;
   text: string;
+  cachedTokens: number;
+  responseId: string | null;
   resultType: SequenceDebugResultType;
 };
 
+type OpenAiUsageMetadata = {
+  input_token_details?: {
+    cache_read?: number;
+  };
+};
+
+type OpenAiResponseMetadata = {
+  id?: string;
+};
+
 export type SequenceDebugModelCallSink = {
   handleModelCallStart: (prompt: string) => void;
   handleModelCallComplete: (params: SequenceDebugModelCall) => void;
@@ -58,6 +72,8 @@ function createPendingSequenceDebug(sequenceId: number): PendingSequenceDebug {
     prompt: "",
     reasoning: "",
     text: "",
+    cachedTokens: 0,
+    responseId: null,
     toolCalls: [],
     pendingToolCalls: 0,
     resultType: null,
@@ -83,6 +99,8 @@ function finalizeSequenceDebug(sequence: PendingSequenceDebug): SequenceDebug {
     prompt: sequence.prompt,
     reasoning: sequence.reasoning,
     text: sequence.text,
+    cachedTokens: sequence.cachedTokens,
+    responseId: sequence.responseId,
     toolCalls: sequence.toolCalls.map(({ completed: _completed, ...toolCall }) => toolCall),
     endedAt: new Date().toISOString(),
     resultType: sequence.resultType ?? "final_text",
@@ -172,6 +190,12 @@ function extractSequenceResponseDebug(message: AIMessage): SequenceDebugModelCal
   return {
     reasoning,
     text: textFromBlocks || (typeof message.content === "string" ? message.content : ""),
+    cachedTokens:
+      (message.usage_metadata as OpenAiUsageMetadata | undefined)
+        ?.input_token_details?.cache_read ?? 0,
+    responseId:
+      (message.response_metadata as OpenAiResponseMetadata | undefined)?.id ??
+      null,
     resultType: hasToolCallSignal(message) ? "tool_calls" : "final_text",
   };
 }
@@ -216,6 +240,8 @@ export function createSequenceDebugCollector(): SequenceDebugCollector {
       const sequenceDebug = ensureSequenceDebug();
       sequenceDebug.reasoning = params.reasoning;
       sequenceDebug.text = params.text;
+      sequenceDebug.cachedTokens = params.cachedTokens;
+      sequenceDebug.responseId = params.responseId;
       sequenceDebug.resultType = params.resultType;
 
       if (

package/agent/simpleAgent.ts

@@ -11,6 +11,7 @@ import {
   createSequenceDebugMiddleware,
   type SequenceDebugModelCallSink,
 } from "./middleware/sequenceDebug.js";
+import { createOpenAiResponsesContinuationMiddleware } from "./middleware/openAiResponsesContinuation.js";
 import type { ApiBasedTool } from "../apiBasedTools.js";
 import type { ToolCallEventSink } from "./toolCallEvents.js";
 
@@ -199,12 +200,18 @@ export function createAgentChatModel(params: {
   const baseURL = options.baseURL ?? options.baseUrl;
   const reasoning = normalizeReasoning(params.reasoning);
 
+  // @ts-ignore
   return new ChatOpenAI({
     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 }
@@ -250,16 +257,19 @@ export async function callAgent(params: {
 
   const tools = await createAgentTools(customComponentsDir, apiBasedTools);
   const apiBasedToolsMiddleware = createApiBasedToolsMiddleware(apiBasedTools);
+  const openAiResponsesContinuationMiddleware =
+    createOpenAiResponsesContinuationMiddleware();
   const sequenceDebugMiddleware = createSequenceDebugMiddleware(
     sequenceDebugSink,
   );
 
   const middleware = [
     apiBasedToolsMiddleware,
+    openAiResponsesContinuationMiddleware,
     sequenceDebugMiddleware,
     summarizationMiddleware({
       model: summaryModel,
-      trigger: { tokens: 1024 * 8 },
+      trigger: { tokens: 1024 * 128 },
       keep: { messages: 10 },
     }),
   ] as const;

package/build.log

@@ -21,10 +21,12 @@ custom/incremark_code_renderers/incremarkCodeHighlight.ts
 custom/incremark_code_renderers/incremarkRenderer.ts
 custom/incremark_code_renderers/renderIncremarkMarkdown.ts
 custom/skills/
+custom/skills/data-analytics/
+custom/skills/data-analytics/SKILL.md
 custom/skills/fetch_data/
 custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 136,273 bytes  received 367 bytes  273,280.00 bytes/sec
-total size is 134,767  speedup is 0.99
+sent 166,886 bytes  received 394 bytes  334,560.00 bytes/sec
+total size is 165,300  speedup is 0.99

package/custom/ConversationArea.vue

@@ -17,9 +17,10 @@
 
   </div>
   <AutoScrollContainer
-    enabled 
+    :enabled="!showScrollToBottomButton" 
     class="flex flex-col overflow-y-auto border-t border-gray-200 dark:border-gray-700"
     ref="scrollContainer"
+    :threshold="10"
     behavior="smooth"
   > 
 
@@ -57,8 +58,8 @@
       v-if="props.messages.length === 0"
       class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium"
     >
-      <p>Start the conversation</p>
-      <p class="tracking-normal text-base text">Give any input to begin</p>
+      <p>{{ $t('Start the conversation') }}</p>
+      <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
     </div>
   </AutoScrollContainer>
 </template>
@@ -151,20 +152,16 @@ const groupToolCallParts = (message: IMessage) => {
     if(!part?.toolInfo) {
       continue;
     }
-    console.log('part', part);
     if (part.toolInfo.toolName === currentToolName) {
-      console.log('grouping part with tool name', currentToolName);
       groupedParts[groupedParts.length - 1].groupedTools.push(part);
       continue;
     }
     currentToolName = part.toolInfo.toolName;
-    console.log('starting new group with tool name', currentToolName);
     groupedParts.push({
       title: currentToolName,
       groupedTools: [part]
     });
   }  
-  console.log('groupedParts', groupedParts);
   return groupedParts;
 }
 

package/custom/Message.vue

@@ -1,13 +1,16 @@
 <template>
   <div 
-    class="max-w-[80%] flex px-4 py-2 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
+    class="max-w-[80%] flex px-4 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
     @click="handleMarkdownLinkClick"
-    :class="props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end' 
+    :class="[
+      hasVegaLite ? 'w-full' : '',
+      props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end' 
       : isTypeReasoning || isTypeToolCall ? 'bg-transparent border-none self-start' 
-        : 'bg-blue-100 dark:bg-blue-700/10 self-start'"
+        : 'bg-blue-100 dark:bg-blue-700/10 self-start'
+    ]"
   >
     <IncremarkContent
-      class="text-wrap break-words max-w-full"
+      class="text-wrap break-words w-full max-w-full"
       v-if="content && props.type === 'text'"
       :content="content" 
       :is-finished="isFinished" 
@@ -88,6 +91,7 @@
   const content = computed(() => props.message)
   const isFinished = computed(() => props.state === 'done')
   const isThoughtsExpanded = ref(false)
+  const hasVegaLite = computed(() => props.type === 'text' && props.message.includes('```vega-lite'))
 
   const isTypeReasoning = computed(() => props.type === 'reasoning')
   const isTypeToolCall = computed(() => props.type === 'data-tool-call')

package/custom/SessionsHistory.vue

@@ -6,14 +6,14 @@
     "
   >
     <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
-    <Button @click="agentStore.createPreSession()" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
+    <Button @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false)" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
       <IconPlusOutline class="w-5 h-5" />
       {{ $t('New chat') }}
     </Button>
     <div class="w-full border-b border-gray-200 dark:border-gray-700"/>
     <div class="absolute w-full h-full flex flex-col items-center justify-center bg-gray-100/50 dark:bg-gray-700/50 z-10" v-if="agentStore.isResponseInProgress">
       <Spinner class="w-8 h-8" v-if="agentStore.isResponseInProgress" />
-      <p class="mt-2 text-gray-800 dark:text-gray-200">generation in progress...</p>
+      <p class="mt-2 text-gray-800 dark:text-gray-200">{{ $t('Generation in progress...') }}</p>
     </div>
     <div v-for="group in groupedSessions" :key="group.dayKey" class="w-full py-2">
       <div class="px-4 pb-2 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">
@@ -38,7 +38,7 @@
       v-if="!groupedSessions || groupedSessions.length === 0"
       class="w-full h-full flex items-center justify-center text-gray-800 dark:text-gray-200"
     >
-      There is no previous chat sessions
+      {{ $t('There are no previous chat sessions') }}
     </p>
   </div>
 </template>

package/custom/ToolRenderer.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="props.data?.toolInfo" class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 text-lightListTableHeadingText dark:text-darkListTableHeadingText">
+  <div 
+    class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"         
+    @click="isInputOutputExpanded = !isInputOutputExpanded"
+  >
     <div class="flex items-center gap-3">
       <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/70 dark:bg-blue-700/20">
         <Spinner v-if="isRunning" class="h-4 w-4" />
@@ -18,8 +21,7 @@
       <IconAngleDownOutline
         v-if="hasToolSections"
         :class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
-        class="cursor-pointer transition-transform duration-200 hover:scale-105 hover:opacity-75"
-        @click="isInputOutputExpanded = !isInputOutputExpanded"
+        class="cursor-pointer transition-transform duration-200 hover:scale-105"
       />
     </div>
     <transition name="expand">

package/custom/ToolsGroup.vue

@@ -1,8 +1,9 @@
 <template>
   <template v-for="group in props.toolGroup" :key="group.title">
-    <div v-if="group.groupedTools.length > 1" class="mb-4 flex flex-col">
-      <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5" @click="toggleGroup(group.title)">
-        - {{ group.title }} {{ 'x' + group.groupedTools.length }} 
+    <div v-if="group.groupedTools.length > 1" class="flex flex-col">
+      <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText" @click="toggleGroup(group.title)">
+        <IconMinusOutline  class="w-6 h-6 p-1"/> 
+        {{ group.title }} {{ 'x' + group.groupedTools.length }} 
         <IconAngleDownOutline 
           class="transition-transform duration-200 hover:scale-105 hover:opacity-75"
           :class="expandedGroups.includes(group.title) ? 'rotate-180' : 'rotate-0'"
@@ -10,7 +11,7 @@
       </div>
       <transition name="expand">
         <div v-show="expandedGroups.includes(group.title)" class="flex flex-col"> 
-        <ToolRenderer v-for="part in group.groupedTools" :key="part.text + part.type" :data="part" />
+        <ToolRenderer v-for="part in group.groupedTools" :key="part.text + part.type" :data="part" class="ml-8"/>
         </div>
       </transition>
     </div>
@@ -24,7 +25,7 @@ import { Tool } from 'langchain';
 import ToolRenderer from './ToolRenderer.vue';
 import type { IPart } from './types';
 import { ref } from 'vue';
-import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconAngleDownOutline, IconMinusOutline } from '@iconify-prerendered/vue-flowbite';
 
 const props = defineProps<{
   toolGroup: {

package/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -18,7 +18,13 @@
 
     <div class="incremark-shiki-body">
       <div
-        v-if="renderedHtml"
+        v-if="shouldRenderVega && !renderedHtml"
+        ref="vegaContainer"
+        class="incremark-vega"
+      />
+
+      <div
+        v-else-if="renderedHtml"
         class="incremark-shiki-html"
         v-html="renderedHtml"
       />
@@ -31,6 +37,7 @@
 <script setup lang="ts">
 import type { Code } from 'mdast';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import embed from 'vega-embed';
 
 import { highlightCodeSnippetHtml, type IncremarkCodeTheme } from './incremarkCodeHighlight';
 
@@ -53,15 +60,18 @@ const props = withDefaults(defineProps<{
 const renderedHtml = ref('');
 const copied = ref(false);
 const prefersDarkMode = ref(isDarkDocument());
+const vegaContainer = ref<HTMLDivElement | null>(null);
 
 let copyResetTimeout: number | null = null;
 let renderRequestId = 0;
 let scheduledFrameId: number | null = null;
 let themeObserver: MutationObserver | null = null;
+let vegaResult: { finalize: () => void } | null = null;
 
 const sourceCode = computed(() => props.node.value ?? '');
 const language = computed(() => props.node.lang?.trim().toLowerCase() || 'text');
-const languageLabel = computed(() => props.node.lang?.trim() || 'text');
+const languageLabel = computed(() => language.value === 'vega-lite' ? '' : props.node.lang?.trim() || 'text');
+const shouldRenderVega = computed(() => language.value === 'vega-lite' && props.blockStatus === 'completed');
 const codeTheme = computed<IncremarkCodeTheme>(() => {
   const requestedTheme = props.theme ?? (prefersDarkMode.value ? props.darkTheme : props.lightTheme);
 
@@ -77,7 +87,7 @@ const codeTheme = computed<IncremarkCodeTheme>(() => {
 });
 
 watch(
-  [sourceCode, language, codeTheme, () => props.disableHighlight],
+  [sourceCode, language, codeTheme, () => props.disableHighlight, () => props.blockStatus],
   () => {
     scheduleHighlight();
   },
@@ -86,6 +96,7 @@ watch(
 
 onMounted(() => {
   if (typeof MutationObserver === 'undefined' || typeof document === 'undefined') {
+    scheduleHighlight();
     return;
   }
 
@@ -97,10 +108,13 @@ onMounted(() => {
     attributes: true,
     attributeFilter: ['class'],
   });
+
+  scheduleHighlight();
 });
 
 onBeforeUnmount(() => {
   renderRequestId += 1;
+  clearVega();
 
   if (copyResetTimeout !== null) {
     window.clearTimeout(copyResetTimeout);
@@ -154,6 +168,45 @@ function scheduleHighlight() {
 async function renderHighlight() {
   const requestId = ++renderRequestId;
 
+  if (shouldRenderVega.value) {
+    renderedHtml.value = '';
+
+    if (!sourceCode.value || !vegaContainer.value) {
+      return;
+    }
+
+    try {
+      clearVega();
+      const spec = JSON.parse(sourceCode.value);
+
+      if (spec.width == null) {
+        spec.width = 'container';
+      }
+
+      if (spec.autosize == null) {
+        spec.autosize = { type: 'fit-x', contains: 'padding' };
+      }
+
+      const result = await embed(vegaContainer.value, spec, {
+        actions: false,
+        renderer: 'svg',
+      });
+
+      if (requestId !== renderRequestId) {
+        result.finalize();
+        return;
+      }
+
+      vegaResult = result;
+      return;
+    } catch (error) {
+      clearVega();
+      console.error('Failed to render Vega-Lite block', error);
+    }
+  } else {
+    clearVega();
+  }
+
   if (!sourceCode.value || props.disableHighlight) {
     renderedHtml.value = '';
     return;
@@ -177,6 +230,15 @@ async function renderHighlight() {
 function isDarkDocument(): boolean {
   return typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
 }
+
+function clearVega() {
+  vegaResult?.finalize();
+  vegaResult = null;
+
+  if (vegaContainer.value) {
+    vegaContainer.value.innerHTML = '';
+  }
+}
 </script>
 
 <style scoped>
@@ -265,6 +327,11 @@ function isDarkDocument(): boolean {
   overflow-x: auto;
 }
 
+.incremark-vega {
+  padding: 18px;
+  width: 100%;
+}
+
 .incremark-shiki-fallback {
   margin: 0;
   padding: 18px;
@@ -298,4 +365,12 @@ function isDarkDocument(): boolean {
 :deep(.incremark-shiki-html .line) {
   min-height: 1.65em;
 }
+
+:deep(.incremark-vega .vega-embed) {
+  width: 100%;
+}
+
+:deep(.incremark-vega){
+  padding: 0;
+}
 </style>

package/custom/package.json

@@ -21,6 +21,7 @@
     "ai": "^6.0.158",
     "dompurify": "^3.3.3",
     "katex": "^0.16.45",
-    "marked": "^18.0.0"
+    "marked": "^18.0.0",
+    "vega-embed": "^7.1.0"
   }
 }