@adminforth/agent 1.44.0 → 1.44.2

package/agentEvents.ts

@@ -17,6 +17,11 @@ export type AgentEvent =
       type: "tool-call";
       data: ToolCallEvent;
     }
+  | {
+      type: "rendering";
+      phase: "start" | "end";
+      label: string;
+    }
   | {
       type: "transcript";
       text: string;

package/build.log

@@ -62,5 +62,5 @@ custom/speech_recognition_frontend/voiceActivityDetection.ts
 custom/speech_recognition_frontend/types/
 custom/speech_recognition_frontend/types/voice-activity-detection.d.ts
 
-sent 1,666,161 bytes  received 921 bytes  3,334,164.00 bytes/sec
-total size is 1,662,008  speedup is 1.00
+sent 1,667,675 bytes  received 921 bytes  3,337,192.00 bytes/sec
+total size is 1,663,522  speedup is 1.00

package/custom/ChatSurface.vue

@@ -106,7 +106,13 @@ onMounted(async () => {
   if( coreStore.isMobile ) {
     agentStore.setIsTeleportedToBody(false);
   } else {
-    agentStore.setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault);
+    const shouldTeleportToBody = isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault;
+    const savedIsChatOpen = agentStore.getLocalStorageItem('isChatOpen');
+
+    agentStore.setIsTeleportedToBody(shouldTeleportToBody);
+    if (shouldTeleportToBody && savedIsChatOpen === null) {
+      agentStore.setIsChatOpen(true);
+    }
   }
   await agentStore.fetchSessionsList();
 });

package/custom/composables/useAgentStore.ts

@@ -174,7 +174,10 @@ export const useAgentStore = defineStore('agent', () => {
     if (!coreStore.isMobile) {
       const savedIsTeleportedToBody = getLocalStorageItem('isTeleportedToBody');
       const savedIsTeleportedToBodyBeforeFullScreen = getLocalStorageItem('isTeleportedToBodyBeforeFullScreen');
-      const isTeleportedToBodyFromLocalStorage = savedIsTeleportedToBody === 'true' || savedIsTeleportedToBodyBeforeFullScreen === 'true';
+      let isTeleportedToBodyFromLocalStorage = true;
+      if (savedIsTeleportedToBody !== null || savedIsTeleportedToBodyBeforeFullScreen !== null) {
+        isTeleportedToBodyFromLocalStorage = savedIsTeleportedToBody === 'true' || savedIsTeleportedToBodyBeforeFullScreen === 'true';
+      }
       const savedIsChatOpen = getLocalStorageItem('isChatOpen');
 
       setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage);
@@ -374,4 +377,4 @@ export const useAgentStore = defineStore('agent', () => {
     setCurrentChatStatus,
     updateLastAgentMessage
   }
-})
+})

package/custom/conversation_area/ProcessingTimeline.vue

@@ -39,6 +39,15 @@
           <template v-for="(part, index) in ToolOrReasoningParts" :key="index">
             <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
             <ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" />
+            <li v-else-if="part.type === 'data-rendering'" class="mb-6 mx-2 mt-2 px-2 z-50 overflow-hidden">
+              <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar">
+                <div class="w-2 h-2 rounded-full bg-current animate-pulse"></div>
+              </span>
+              <h3 class="flex items-center mb-1 text-sm ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText">
+                <span class="font-semibold">{{ part.data?.label ?? 'Rendering...' }}</span>
+                <ThreeDotsAnimation />
+              </h3>
+            </li>
           </template>
         </ol>
       </CustomAutoScrollContainer>
@@ -73,7 +82,11 @@
   const isExpanded = ref(true);
   let isUserScrolled = false;
   const ToolOrReasoningParts = computed(() => {
-    return props.message.parts.filter((part: IPart) => part.type === 'data-tool-call' || part.type === 'reasoning');
+    return props.message.parts.filter((part: IPart) => {
+      return part.type === 'data-tool-call'
+        || part.type === 'reasoning'
+        || isActiveRenderingPart(part);
+    });
   });
   const isResponseInProgress = computed(() =>{
     return props.isLastMessageInChat && agentStore.isResponseInProgress; 
@@ -157,6 +170,14 @@
     });
   };
 
+  function isActiveRenderingPart(part: IPart) {
+    return part.type === 'data-rendering'
+      && part.data?.phase === 'start'
+      && !props.message.parts.some((candidate: IPart) => {
+        return candidate.type === 'data-rendering' && candidate.data?.phase === 'end';
+      });
+  }
+
   const groupToolCallParts = (message: IMessage, currentPart: IPart): IToolGroup[] => {
     if (currentPart.type !== 'data-tool-call') {
       return [];
@@ -259,4 +280,4 @@
   }
 }
 
-</style>
+</style>

package/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -72,7 +72,7 @@ let highlightModulePromise: Promise<typeof import('./incremarkCodeHighlight')> |
 const sourceCode = computed(() => props.node.value ?? '');
 const language = computed(() => props.node.lang?.trim().toLowerCase() || 'text');
 const languageLabel = computed(() => language.value === 'vega-lite' ? '' : props.node.lang?.trim() || 'text');
-const shouldRenderVega = computed(() => language.value === 'vega-lite' && props.blockStatus === 'completed');
+const shouldRenderVega = computed(() => language.value === 'vega-lite');
 const codeTheme = computed<IncremarkCodeTheme>(() => {
   const requestedTheme = props.theme ?? (prefersDarkMode.value ? props.darkTheme : props.lightTheme);
 
@@ -390,4 +390,4 @@ function clearVega() {
 :deep(.incremark-vega){
   padding: 0;
 }
-</style>
+</style>

package/custom/types.ts

@@ -1,14 +1,15 @@
 export interface IPartData {
-  toolCallId: string;
-  toolName: string;
-  phase: 'start' | 'end';
+  toolCallId?: string;
+  toolName?: string;
+  phase?: 'start' | 'end';
+  label?: string;
   input?: any;
   output?: any;
   durationMs?: number;
   toolInfo?: string;
 }
 export interface IPart {
-  type: 'reasoning' | 'data-tool-call' | 'text';
+  type: 'reasoning' | 'data-tool-call' | 'data-rendering' | 'text';
   text?: string;
   state?: 'started' | 'thinking' | 'processing' | 'streaming' | 'done';
   data?: IPartData;

package/dist/agentEvents.d.ts

@@ -11,6 +11,10 @@ export type AgentEvent = {
 } | {
     type: "tool-call";
     data: ToolCallEvent;
+} | {
+    type: "rendering";
+    phase: "start" | "end";
+    label: string;
 } | {
     type: "transcript";
     text: string;

package/dist/custom/ChatSurface.vue

@@ -106,7 +106,13 @@ onMounted(async () => {
   if( coreStore.isMobile ) {
     agentStore.setIsTeleportedToBody(false);
   } else {
-    agentStore.setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault);
+    const shouldTeleportToBody = isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault;
+    const savedIsChatOpen = agentStore.getLocalStorageItem('isChatOpen');
+
+    agentStore.setIsTeleportedToBody(shouldTeleportToBody);
+    if (shouldTeleportToBody && savedIsChatOpen === null) {
+      agentStore.setIsChatOpen(true);
+    }
   }
   await agentStore.fetchSessionsList();
 });

package/dist/custom/composables/useAgentStore.ts

@@ -174,7 +174,10 @@ export const useAgentStore = defineStore('agent', () => {
     if (!coreStore.isMobile) {
       const savedIsTeleportedToBody = getLocalStorageItem('isTeleportedToBody');
       const savedIsTeleportedToBodyBeforeFullScreen = getLocalStorageItem('isTeleportedToBodyBeforeFullScreen');
-      const isTeleportedToBodyFromLocalStorage = savedIsTeleportedToBody === 'true' || savedIsTeleportedToBodyBeforeFullScreen === 'true';
+      let isTeleportedToBodyFromLocalStorage = true;
+      if (savedIsTeleportedToBody !== null || savedIsTeleportedToBodyBeforeFullScreen !== null) {
+        isTeleportedToBodyFromLocalStorage = savedIsTeleportedToBody === 'true' || savedIsTeleportedToBodyBeforeFullScreen === 'true';
+      }
       const savedIsChatOpen = getLocalStorageItem('isChatOpen');
 
       setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage);
@@ -374,4 +377,4 @@ export const useAgentStore = defineStore('agent', () => {
     setCurrentChatStatus,
     updateLastAgentMessage
   }
-})
+})

package/dist/custom/conversation_area/ProcessingTimeline.vue

@@ -39,6 +39,15 @@
           <template v-for="(part, index) in ToolOrReasoningParts" :key="index">
             <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
             <ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" />
+            <li v-else-if="part.type === 'data-rendering'" class="mb-6 mx-2 mt-2 px-2 z-50 overflow-hidden">
+              <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar">
+                <div class="w-2 h-2 rounded-full bg-current animate-pulse"></div>
+              </span>
+              <h3 class="flex items-center mb-1 text-sm ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText">
+                <span class="font-semibold">{{ part.data?.label ?? 'Rendering...' }}</span>
+                <ThreeDotsAnimation />
+              </h3>
+            </li>
           </template>
         </ol>
       </CustomAutoScrollContainer>
@@ -73,7 +82,11 @@
   const isExpanded = ref(true);
   let isUserScrolled = false;
   const ToolOrReasoningParts = computed(() => {
-    return props.message.parts.filter((part: IPart) => part.type === 'data-tool-call' || part.type === 'reasoning');
+    return props.message.parts.filter((part: IPart) => {
+      return part.type === 'data-tool-call'
+        || part.type === 'reasoning'
+        || isActiveRenderingPart(part);
+    });
   });
   const isResponseInProgress = computed(() =>{
     return props.isLastMessageInChat && agentStore.isResponseInProgress; 
@@ -157,6 +170,14 @@
     });
   };
 
+  function isActiveRenderingPart(part: IPart) {
+    return part.type === 'data-rendering'
+      && part.data?.phase === 'start'
+      && !props.message.parts.some((candidate: IPart) => {
+        return candidate.type === 'data-rendering' && candidate.data?.phase === 'end';
+      });
+  }
+
   const groupToolCallParts = (message: IMessage, currentPart: IPart): IToolGroup[] => {
     if (currentPart.type !== 'data-tool-call') {
       return [];
@@ -259,4 +280,4 @@
   }
 }
 
-</style>
+</style>

package/dist/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -72,7 +72,7 @@ let highlightModulePromise: Promise<typeof import('./incremarkCodeHighlight')> |
 const sourceCode = computed(() => props.node.value ?? '');
 const language = computed(() => props.node.lang?.trim().toLowerCase() || 'text');
 const languageLabel = computed(() => language.value === 'vega-lite' ? '' : props.node.lang?.trim() || 'text');
-const shouldRenderVega = computed(() => language.value === 'vega-lite' && props.blockStatus === 'completed');
+const shouldRenderVega = computed(() => language.value === 'vega-lite');
 const codeTheme = computed<IncremarkCodeTheme>(() => {
   const requestedTheme = props.theme ?? (prefersDarkMode.value ? props.darkTheme : props.lightTheme);
 
@@ -390,4 +390,4 @@ function clearVega() {
 :deep(.incremark-vega){
   padding: 0;
 }
-</style>
+</style>

package/dist/custom/types.ts

@@ -1,14 +1,15 @@
 export interface IPartData {
-  toolCallId: string;
-  toolName: string;
-  phase: 'start' | 'end';
+  toolCallId?: string;
+  toolName?: string;
+  phase?: 'start' | 'end';
+  label?: string;
   input?: any;
   output?: any;
   durationMs?: number;
   toolInfo?: string;
 }
 export interface IPart {
-  type: 'reasoning' | 'data-tool-call' | 'text';
+  type: 'reasoning' | 'data-tool-call' | 'data-rendering' | 'text';
   text?: string;
   state?: 'started' | 'thinking' | 'processing' | 'streaming' | 'done';
   data?: IPartData;

package/dist/index.js

@@ -48,6 +48,8 @@ const sessionIdBodySchema = z.object({
 const createSessionBodySchema = z.object({
     triggerMessage: z.string().optional(),
 }).strict();
+const VEGA_LITE_FENCE_START = "```vega-lite";
+const COMPLETE_VEGA_LITE_BLOCK_RE = /```vega-lite[\s\S]*?```/;
 function isAbortError(error) {
     return (error instanceof DOMException && error.name === "AbortError") || (typeof error === "object" &&
         error !== null &&
@@ -203,8 +205,10 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
     runAgentTurn(input) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, e_1, _b, _c;
-            var _d, _e, _f, _g, _h, _j;
+            var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
             let fullResponse = "";
+            let bufferedTextDelta = "";
+            let isRenderingVegaLite = false;
             const maxTokens = (_d = this.options.maxTokens) !== null && _d !== void 0 ? _d : 1000;
             const selectedMode = (_e = this.options.modes.find((mode) => mode.name === input.modeName)) !== null && _e !== void 0 ? _e : this.options.modes[0];
             const [primaryModelSpec, summaryModelSpec] = yield Promise.all([
@@ -268,9 +272,9 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
                 sequenceDebugSink: input.sequenceDebugCollector,
             });
             try {
-                for (var _k = true, _l = __asyncValues(stream), _m; _m = yield _l.next(), _a = _m.done, !_a; _k = true) {
-                    _c = _m.value;
-                    _k = false;
+                for (var _p = true, _q = __asyncValues(stream), _r; _r = yield _q.next(), _a = _r.done, !_a; _p = true) {
+                    _c = _r.value;
+                    _p = false;
                     const rawChunk = _c;
                     if ((_g = input.abortSignal) === null || _g === void 0 ? void 0 : _g.aborted) {
                         throw new DOMException("This operation was aborted", "AbortError");
@@ -303,20 +307,61 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
                     }
                     if (textDelta) {
                         fullResponse += textDelta;
-                        yield ((_j = input.emit) === null || _j === void 0 ? void 0 : _j.call(input, {
+                        bufferedTextDelta += textDelta;
+                        if (bufferedTextDelta.includes(VEGA_LITE_FENCE_START) &&
+                            !COMPLETE_VEGA_LITE_BLOCK_RE.test(bufferedTextDelta)) {
+                            if (!isRenderingVegaLite) {
+                                isRenderingVegaLite = true;
+                                yield ((_j = input.emit) === null || _j === void 0 ? void 0 : _j.call(input, {
+                                    type: "rendering",
+                                    phase: "start",
+                                    label: "Rendering...",
+                                }));
+                            }
+                            continue;
+                        }
+                        if (isRenderingVegaLite) {
+                            isRenderingVegaLite = false;
+                            yield ((_k = input.emit) === null || _k === void 0 ? void 0 : _k.call(input, {
+                                type: "rendering",
+                                phase: "end",
+                                label: "Rendering...",
+                            }));
+                        }
+                        const streamableLength = bufferedTextDelta.includes(VEGA_LITE_FENCE_START)
+                            ? bufferedTextDelta.length
+                            : bufferedTextDelta.length - getPartialVegaLiteFenceStartLength(bufferedTextDelta);
+                        if (!streamableLength) {
+                            continue;
+                        }
+                        yield ((_l = input.emit) === null || _l === void 0 ? void 0 : _l.call(input, {
                             type: "text-delta",
-                            delta: textDelta,
+                            delta: bufferedTextDelta.slice(0, streamableLength),
                         }));
+                        bufferedTextDelta = bufferedTextDelta.slice(streamableLength);
                     }
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (!_k && !_a && (_b = _l.return)) yield _b.call(_l);
+                    if (!_p && !_a && (_b = _q.return)) yield _b.call(_q);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
+            if (isRenderingVegaLite) {
+                yield ((_m = input.emit) === null || _m === void 0 ? void 0 : _m.call(input, {
+                    type: "rendering",
+                    phase: "end",
+                    label: "Rendering...",
+                }));
+            }
+            if (bufferedTextDelta) {
+                yield ((_o = input.emit) === null || _o === void 0 ? void 0 : _o.call(input, {
+                    type: "text-delta",
+                    delta: bufferedTextDelta,
+                }));
+            }
             return {
                 text: fullResponse,
             };
@@ -853,3 +898,11 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
             });
     }
 }
+function getPartialVegaLiteFenceStartLength(text) {
+    for (let length = Math.min(text.length, VEGA_LITE_FENCE_START.length - 1); length > 0; length -= 1) {
+        if (VEGA_LITE_FENCE_START.startsWith(text.slice(-length))) {
+            return length;
+        }
+    }
+    return 0;
+}

package/dist/surfaces/web-sse/createSseEventEmitter.js

@@ -75,6 +75,18 @@ function createAgentEventStream(res, options = {}) {
                 data: event,
             });
         },
+        rendering(phase, label) {
+            if (phase === "start") {
+                stream.endActiveBlock();
+            }
+            stream.send({
+                type: "data-rendering",
+                data: {
+                    phase,
+                    label,
+                },
+            });
+        },
         transcript(text, language) {
             stream.send({
                 type: "transcript",
@@ -167,6 +179,9 @@ export function createSseEventEmitter(res, options = {}) {
             case "tool-call":
                 stream.toolCall(event.data);
                 break;
+            case "rendering":
+                stream.rendering(event.phase, event.label);
+                break;
             case "transcript":
                 stream.transcript(event.text, event.language);
                 break;

package/index.ts

@@ -89,6 +89,9 @@ const createSessionBodySchema = z.object({
   triggerMessage: z.string().optional(),
 }).strict();
 
+const VEGA_LITE_FENCE_START = "```vega-lite";
+const COMPLETE_VEGA_LITE_BLOCK_RE = /```vega-lite[\s\S]*?```/;
+
 function isAbortError(error: unknown): boolean {
   return (
     error instanceof DOMException && error.name === "AbortError"
@@ -279,6 +282,8 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
 
   private async runAgentTurn(input: AgentTurnRunInput) {
     let fullResponse = "";
+    let bufferedTextDelta = "";
+    let isRenderingVegaLite = false;
     const maxTokens = this.options.maxTokens ?? 1000;
     const selectedMode = this.options.modes.find((mode) => mode.name === input.modeName) ?? this.options.modes[0];
     const [primaryModelSpec, summaryModelSpec] = await Promise.all([
@@ -386,13 +391,63 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
 
       if (textDelta) {
         fullResponse += textDelta;
+        bufferedTextDelta += textDelta;
+
+        if (
+          bufferedTextDelta.includes(VEGA_LITE_FENCE_START) &&
+          !COMPLETE_VEGA_LITE_BLOCK_RE.test(bufferedTextDelta)
+        ) {
+          if (!isRenderingVegaLite) {
+            isRenderingVegaLite = true;
+            await input.emit?.({
+              type: "rendering",
+              phase: "start",
+              label: "Rendering...",
+            });
+          }
+          continue;
+        }
+
+        if (isRenderingVegaLite) {
+          isRenderingVegaLite = false;
+          await input.emit?.({
+            type: "rendering",
+            phase: "end",
+            label: "Rendering...",
+          });
+        }
+
+        const streamableLength = bufferedTextDelta.includes(VEGA_LITE_FENCE_START)
+          ? bufferedTextDelta.length
+          : bufferedTextDelta.length - getPartialVegaLiteFenceStartLength(bufferedTextDelta);
+
+        if (!streamableLength) {
+          continue;
+        }
+
         await input.emit?.({
           type: "text-delta",
-          delta: textDelta,
+          delta: bufferedTextDelta.slice(0, streamableLength),
         });
+        bufferedTextDelta = bufferedTextDelta.slice(streamableLength);
       }
     }
 
+    if (isRenderingVegaLite) {
+      await input.emit?.({
+        type: "rendering",
+        phase: "end",
+        label: "Rendering...",
+      });
+    }
+
+    if (bufferedTextDelta) {
+      await input.emit?.({
+        type: "text-delta",
+        delta: bufferedTextDelta,
+      });
+    }
+
     return {
       text: fullResponse,
     };
@@ -956,3 +1011,13 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
     })
   }
 }
+
+function getPartialVegaLiteFenceStartLength(text: string): number {
+  for (let length = Math.min(text.length, VEGA_LITE_FENCE_START.length - 1); length > 0; length -= 1) {
+    if (VEGA_LITE_FENCE_START.startsWith(text.slice(-length))) {
+      return length;
+    }
+  }
+
+  return 0;
+}

package/package.json

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

package/surfaces/web-sse/createSseEventEmitter.ts

@@ -108,6 +108,20 @@ function createAgentEventStream(
       });
     },
 
+    rendering(phase: "start" | "end", label: string) {
+      if (phase === "start") {
+        stream.endActiveBlock();
+      }
+
+      stream.send({
+        type: "data-rendering",
+        data: {
+          phase,
+          label,
+        },
+      });
+    },
+
     transcript(text: string, language?: string) {
       stream.send({
         type: "transcript",
@@ -226,6 +240,9 @@ export function createSseEventEmitter(
       case "tool-call":
         stream.toolCall(event.data);
         break;
+      case "rendering":
+        stream.rendering(event.phase, event.label);
+        break;
       case "transcript":
         stream.transcript(event.text, event.language);
         break;