@adminforth/agent 3.0.0 → 3.1.0

package/dist/custom/ChatHeader.vue

@@ -1,7 +1,9 @@
 <template>
+  <!-- in full screen the controls line up with the centered column of the conversation -->
   <div
     ref="headerRef"
     class="af-agent-header flex items-center gap-0.5 h-12 px-2 border-b border-lightNavbarBorder dark:border-darkNavbarBorder"
+    :style="agentStore.isFullScreen ? { paddingInline: `max(0.5rem, calc((100% - ${agentStore.MAX_WIDTH}rem) / 2 + 0.5rem))` } : undefined"
   >
     <Button
       variant="ghost"

package/dist/custom/ChatSurface.vue

@@ -14,8 +14,8 @@
       ref="chatSurface"
       id="adminforth-agent-chat-surface"
       class="fixed top-0 right-0 z-40 flex h-screen border-l border-lightNavbarBorder bg-lightNavbar dark:border-darkNavbarBorder dark:bg-darkNavbar"
-      :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-popover dark:shadow-darkPopover' : '']"
-      :style="{ width: agentStore.chatWidth + 'rem' }"
+      :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody && !agentStore.isFullScreen ? 'shadow-popover dark:shadow-darkPopover' : '']"
+      :style="{ width: agentStore.isFullScreen ? '100%' : agentStore.chatWidth + 'rem' }"
     > 
       <div 
         v-if="!(coreStore.isMobile || agentStore.isFullScreen)"

package/dist/custom/CustomAutoScrollContainer.vue

@@ -42,18 +42,12 @@ const scrollElement = ref<HTMLElement | null>(null)
 let lastScrollTop = 0
 let lastScrollHeight = 0
 let observer: MutationObserver | null = null
+let resizeObserver: ResizeObserver | null = null
 
-const INITIAL_SCROLL_DEBOUNCE = 200
-let initialScrollDone = false
-let initialScrollTimer: ReturnType<typeof setTimeout> | null = null
-
-function scheduleInitialScrollEnd(): void {
-  if (initialScrollTimer) clearTimeout(initialScrollTimer)
-  initialScrollTimer = setTimeout(() => {
-    initialScrollDone = true
-    initialScrollTimer = null
-  }, INITIAL_SCROLL_DEBOUNCE)
-}
+// Markdown, code highlighting and charts render asynchronously and keep growing the content after
+// it appears, with pauses longer than any debounce. So after mount the container stays at the bottom
+// on every resize until the user scrolls away or the parent scrolls it (a sent message).
+let keepAtBottom = false
 
 const scrollParams = ref({
   scrollTop: 0,
@@ -62,7 +56,10 @@ const scrollParams = ref({
 });
 
 defineExpose({
-  scrollToBottom: () => scrollToBottom(true),
+  scrollToBottom: () => {
+    keepAtBottom = false
+    scrollToBottom(true)
+  },
   isUserScrolledUp: () => isUserScrolledUp.value,
   container: containerRef,
   handleScroll,
@@ -90,11 +87,6 @@ onMounted(() => {
       scrollParams.value.clientHeight = containerRef.value.scrollEl.clientHeight
       if (props.enabled && !isUserScrolledUp.value) {
         scrollToBottom()
-      } else if (props.scrollToBottomOnMount && !initialScrollDone) {
-        // Delayed content is still settling in the initial scroll phase: keep
-        // pinning to the bottom and restart the quiet-period debounce.
-        scrollToBottom(true)
-        scheduleInitialScrollEnd()
       }
     })
   })
@@ -106,14 +98,23 @@ onMounted(() => {
   })
 
   if (props.scrollToBottomOnMount) {
-    nextTick(() => scrollToBottom(true))
-    scheduleInitialScrollEnd()
+    keepAtBottom = true
+    const scrollEl = containerRef.value.scrollEl
+    // fires once on observe, which is the initial scroll; instant, the user sees the latest messages right away.
+    // While enabled, the mutation observer above follows the content with the behavior of the container
+    resizeObserver = new ResizeObserver(() => {
+      if (keepAtBottom && !props.enabled) {
+        scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: 'instant' })
+      }
+    })
+    resizeObserver.observe(scrollEl)
+    resizeObserver.observe(scrollEl.firstElementChild!)
   }
 })
 
 onUnmounted(() => {
   observer?.disconnect()
-  if (initialScrollTimer) clearTimeout(initialScrollTimer)
+  resizeObserver?.disconnect()
 })
 
 function isNearBottom(customThreshold?: number): boolean {
@@ -168,6 +169,7 @@ function handleScroll(detectScrollDown = true, customThreshold?: number): void {
     const isContentUnchanged = scrollHeight === lastScrollHeight
     if ((isScrollingUp || isScrollingDown) && isContentUnchanged) {
       isUserScrolledUp.value = true
+      keepAtBottom = false
     }
   }
   lastScrollTop = scrollTop

package/dist/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -40,6 +40,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import embed from 'vega-embed';
 
 import type { IncremarkCodeTheme } from './incremarkCodeHighlight';
+import { vegaLiteConfig } from './vegaTheme';
 
 const props = withDefaults(defineProps<{
   node: Code;
@@ -205,9 +206,9 @@ async function renderHighlight() {
       const result = await embed(vegaContainer.value, spec, {
         actions: false,
         renderer: 'svg',
-        // the chart sits on the surface of the code block, so it takes the theme of the page
-        theme: codeTheme.value === 'dark' ? 'dark' : undefined,
-        config: { background: 'transparent' },
+        // read on every render, a theme switch re-renders the chart with the tokens of the new theme
+        config: vegaLiteConfig(vegaContainer.value),
+        tooltip: { theme: 'af' },
       });
 
       if (requestId !== renderRequestId) {
@@ -307,9 +308,22 @@ function clearVega() {
   overflow-x: auto;
 }
 
+/* tokens for vegaLiteConfig, the chart reads them when it renders */
 .incremark-vega {
-  padding: 12px;
   width: 100%;
+  --chart-text: theme('colors.lightInputText');
+  --chart-muted: theme('colors.lightInputIconColor');
+  --chart-grid: theme('colors.lightCardBorder');
+  --chart-baseline: theme('colors.lightInputBorder');
+  --chart-surface: theme('colors.lightCardBackground');
+}
+
+.dark .incremark-vega {
+  --chart-text: theme('colors.darkInputText');
+  --chart-muted: theme('colors.darkInputIconColor');
+  --chart-grid: theme('colors.darkCardBorder');
+  --chart-baseline: theme('colors.darkInputBorder');
+  --chart-surface: theme('colors.darkCardBackground');
 }
 
 .incremark-shiki-fallback {
@@ -349,6 +363,24 @@ function clearVega() {
 :deep(.incremark-vega .vega-embed) {
   width: 100%;
 }
+</style>
+
+<style>
+/* vega-tooltip appends its element to the body, so the "af" tooltip theme is global */
+#vg-tooltip-element.af-theme {
+  @apply rounded-default border-0 px-2 py-1.5 text-xs bg-lightDropdownOptionsBackground text-lightInputText shadow-popover dark:bg-darkDropdownOptionsBackground dark:text-darkInputText dark:shadow-darkPopover;
+  font-family: inherit;
+}
 
+#vg-tooltip-element.af-theme h2 {
+  @apply mb-1 text-xs font-semibold;
+}
 
+#vg-tooltip-element.af-theme td.key {
+  @apply pr-2 text-lightInputIconColor dark:text-darkInputIconColor;
+}
+
+#vg-tooltip-element.af-theme td.value {
+  @apply font-medium tabular-nums;
+}
 </style>

package/dist/custom/incremark_code_renderers/vegaTheme.ts

@@ -0,0 +1,68 @@
+import type { Config } from 'vega-embed';
+import { CHART_COLORS } from '@/afcl/chartUtils';
+
+// charts of the agent follow the AFCL charts of the design system: one categorical palette in fixed order,
+// 2px lines, 4px rounded bar ends, recessive horizontal grid, muted axes, no frame around the plot.
+// Colors come from the --chart-* properties of the chart container, which take them from the theme tokens
+export function vegaLiteConfig(container: HTMLElement): Config {
+  const style = getComputedStyle(container);
+  const token = (name: string) => style.getPropertyValue(`--chart-${name}`).trim();
+  const text = token('text');
+  const muted = token('muted');
+  const surface = token('surface');
+
+  return {
+    background: 'transparent',
+    // vega measures a container chart by clientWidth, so the space around the chart is vega padding, not CSS padding
+    padding: 12,
+    font: style.fontFamily,
+    view: { stroke: null, continuousHeight: 200 },
+    range: { category: CHART_COLORS },
+    scale: { bandPaddingInner: 0.3 },
+    mark: { color: CHART_COLORS[0] },
+    bar: { cornerRadiusEnd: 4, binSpacing: 2 },
+    line: { strokeWidth: 2, strokeJoin: 'round', strokeCap: 'round' },
+    area: { fillOpacity: 0.12, line: true },
+    point: { size: 36, stroke: surface, strokeWidth: 1.5 },
+    arc: { stroke: surface, strokeWidth: 2 },
+    text: { color: text, fontSize: 11 },
+    title: {
+      anchor: 'start',
+      color: text,
+      fontSize: 13,
+      fontWeight: 600,
+      subtitleColor: muted,
+      subtitleFontSize: 12,
+      subtitlePadding: 2,
+      offset: 16,
+    },
+    axis: {
+      domainColor: token('baseline'),
+      gridColor: token('grid'),
+      ticks: false,
+      labelColor: muted,
+      labelFontSize: 11,
+      labelPadding: 6,
+      labelOverlap: true,
+      labelSeparation: 8,
+      titleColor: muted,
+      titleFontSize: 11,
+      titleFontWeight: 500,
+      titlePadding: 8,
+    },
+    axisX: { grid: false },
+    axisXDiscrete: { labelAngle: 0 },
+    axisY: { domain: false },
+    legend: {
+      orient: 'bottom',
+      direction: 'horizontal',
+      labelColor: text,
+      labelFontSize: 11,
+      titleColor: muted,
+      titleFontSize: 11,
+      titleFontWeight: 500,
+      symbolSize: 64,
+      columnPadding: 12,
+    },
+  };
+}

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

@@ -15,6 +15,10 @@ Every chart spec should include:
 - explicit axis titles when axes are used
 - tooltips for the key fields
 
+Don't set `config`, `width`, colors or fonts: the chat draws every chart in the AdminForth theme.
+
+Labels of the x axis stay horizontal and the ones which don't fit are hidden, so for more than 6 categories or long category names put the categories on `y` (horizontal bars).
+
 ### Line chart
 
 ```vega-lite

package/package.json

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