@adminforth/agent 1.0.0

package/dist/custom/ToolRenderer.vue

@@ -0,0 +1,131 @@
+<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="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" />
+        <IconCheckOutline v-else class="h-4 w-4 text-lightPrimary dark:text-darkPrimary" />
+      </div>
+
+      <div class="min-w-0">
+        <p class="text-xs text-gray-500 dark:text-gray-400 font-bold">
+          {{ statusLabel }}
+          <span v-if="props.data?.toolInfo?.durationMs" class="text-xs">({{ (props.data.toolInfo.durationMs / 1000).toFixed(2) }}s)</span>
+        </p>
+        <p class="break-all font-mono text-sm leading-5">
+          {{ props.data?.toolInfo?.toolName }}
+        </p>
+      </div>
+      <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"
+      />
+    </div>
+    <transition name="expand">
+      <div v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1">
+        <section
+          v-for="section in toolSections"
+          :key="section.label"
+          class="overflow-hidden rounded-xl border border-black/5 bg-white/70 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-slate-900/50"
+        >
+          <header class="border-b border-black/5 px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.22em] text-gray-500 dark:border-white/10 dark:text-gray-400">
+            {{ section.label }}
+          </header>
+          <div class="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1 px-3 py-3 font-mono text-xs leading-5 text-gray-700 dark:text-gray-200">
+            <template v-for="line in section.lines" :key="`${section.label}-${line.number}`">
+              <span class="select-none text-[11px] text-gray-400 dark:text-gray-500">{{ line.number }}</span>
+              <span class="whitespace-pre-wrap break-words">{{ line.content || ' ' }}</span>
+            </template>
+          </div>
+        </section>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { type IPartData } from './types';
+  import { Spinner } from '@/afcl';
+  import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
+
+  const isInputOutputExpanded = ref(false);
+
+  interface IToolSection {
+    label: string;
+    lines: Array<{
+      number: number;
+      content: string;
+    }>;
+  }
+
+  const props = defineProps<{
+    data: {
+      type: string;
+      toolInfo: IPartData;
+    }
+  }>();
+
+  const isRunning = computed(() => props.data?.toolInfo?.phase === 'start');
+  const statusLabel = computed(() => isRunning.value ? 'Running tool' : 'Tool finished');
+
+  const normalizeToolPayload = (value: unknown): string | null => {
+    if (value === null || value === undefined || value === '') {
+      return null;
+    }
+
+    if (typeof value === 'string') {
+      return value.trim();
+    }
+
+    return JSON.stringify(value, null, 2);
+  };
+
+  const toolSections = computed<IToolSection[]>(() => {
+    const sections = [
+      {
+        label: 'Input',
+        content: normalizeToolPayload(props.data.toolInfo.input),
+      },
+      {
+        label: 'Output',
+        content: normalizeToolPayload(props.data.toolInfo.output),
+      },
+    ];
+
+    return sections
+      .filter((section): section is { label: string; content: string } => Boolean(section.content))
+      .map(section => ({
+        label: section.label,
+        lines: section.content.split('\n').map((content, index) => ({
+          number: index + 1,
+          content,
+        })),
+      }));
+  });
+
+  const hasToolSections = computed(() => toolSections.value.length > 0);
+</script>
+
+
+<style scoped>
+
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.3s ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+  opacity: 1;
+  max-height: 288px;
+}
+
+</style>

package/dist/custom/ToolsGroup.vue

@@ -0,0 +1,67 @@
+<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 }} 
+        <IconAngleDownOutline 
+          class="transition-transform duration-200 hover:scale-105 hover:opacity-75"
+          :class="expandedGroups.includes(group.title) ? 'rotate-180' : 'rotate-0'"
+        />
+      </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" />
+        </div>
+      </transition>
+    </div>
+    <ToolRenderer v-else :data="group.groupedTools[0]" />
+  </template> 
+
+</template>
+
+<script setup lang="ts">
+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';
+
+const props = defineProps<{
+  toolGroup: {
+    title: string;
+    groupedTools: IPart[];
+  }[]
+}>();
+
+const expandedGroups = ref<string[]>([]);
+
+function toggleGroup(groupTitle: string) {
+  if (expandedGroups.value.includes(groupTitle)) {
+    expandedGroups.value = expandedGroups.value.filter((title: string) => title !== groupTitle);
+  } else {
+    expandedGroups.value.push(groupTitle);
+  }
+}
+
+</script>
+
+<style scoped>
+
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.3s ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+  opacity: 1;
+  max-height: 288px;
+}
+
+</style>

package/dist/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -0,0 +1,301 @@
+<template>
+  <div
+    class="incremark-shiki-code"
+    :data-stream-state="props.blockStatus"
+  >
+    <div class="incremark-shiki-toolbar">
+      <span class="incremark-shiki-language">{{ languageLabel }}</span>
+      <button
+        type="button"
+        class="incremark-shiki-copy"
+        :class="copied ? 'is-copied' : ''"
+        :disabled="!sourceCode"
+        @click="copyCode"
+      >
+        {{ copied ? 'Copied' : 'Copy' }}
+      </button>
+    </div>
+
+    <div class="incremark-shiki-body">
+      <div
+        v-if="renderedHtml"
+        class="incremark-shiki-html"
+        v-html="renderedHtml"
+      />
+
+      <pre v-else class="incremark-shiki-fallback"><code>{{ sourceCode }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Code } from 'mdast';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { highlightCodeSnippetHtml, type IncremarkCodeTheme } from './incremarkCodeHighlight';
+
+const props = withDefaults(defineProps<{
+  node: Code;
+  lightTheme?: string;
+  darkTheme?: string;
+  theme?: string;
+  fallbackTheme?: string;
+  disableHighlight?: boolean;
+  blockStatus?: 'pending' | 'stable' | 'completed';
+}>(), {
+  lightTheme: 'github-light',
+  darkTheme: 'github-dark',
+  fallbackTheme: 'github-dark',
+  disableHighlight: false,
+  blockStatus: 'completed',
+});
+
+const renderedHtml = ref('');
+const copied = ref(false);
+const prefersDarkMode = ref(isDarkDocument());
+
+let copyResetTimeout: number | null = null;
+let renderRequestId = 0;
+let scheduledFrameId: number | null = null;
+let themeObserver: MutationObserver | 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 codeTheme = computed<IncremarkCodeTheme>(() => {
+  const requestedTheme = props.theme ?? (prefersDarkMode.value ? props.darkTheme : props.lightTheme);
+
+  if (requestedTheme === 'github-light') {
+    return 'light';
+  }
+
+  if (requestedTheme === 'github-dark') {
+    return 'dark';
+  }
+
+  return props.fallbackTheme === 'github-light' ? 'light' : 'dark';
+});
+
+watch(
+  [sourceCode, language, codeTheme, () => props.disableHighlight],
+  () => {
+    scheduleHighlight();
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (typeof MutationObserver === 'undefined' || typeof document === 'undefined') {
+    return;
+  }
+
+  themeObserver = new MutationObserver(() => {
+    prefersDarkMode.value = isDarkDocument();
+  });
+
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+});
+
+onBeforeUnmount(() => {
+  renderRequestId += 1;
+
+  if (copyResetTimeout !== null) {
+    window.clearTimeout(copyResetTimeout);
+  }
+
+  if (scheduledFrameId !== null) {
+    window.cancelAnimationFrame(scheduledFrameId);
+  }
+
+  themeObserver?.disconnect();
+});
+
+async function copyCode() {
+  if (!sourceCode.value || typeof navigator === 'undefined' || !navigator.clipboard) {
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(sourceCode.value);
+    copied.value = true;
+
+    if (copyResetTimeout !== null) {
+      window.clearTimeout(copyResetTimeout);
+    }
+
+    copyResetTimeout = window.setTimeout(() => {
+      copied.value = false;
+      copyResetTimeout = null;
+    }, 1500);
+  } catch (error) {
+    console.error('Failed to copy code block', error);
+  }
+}
+
+function scheduleHighlight() {
+  if (typeof window === 'undefined') {
+    void renderHighlight();
+    return;
+  }
+
+  if (scheduledFrameId !== null) {
+    window.cancelAnimationFrame(scheduledFrameId);
+  }
+
+  scheduledFrameId = window.requestAnimationFrame(() => {
+    scheduledFrameId = null;
+    void renderHighlight();
+  });
+}
+
+async function renderHighlight() {
+  const requestId = ++renderRequestId;
+
+  if (!sourceCode.value || props.disableHighlight) {
+    renderedHtml.value = '';
+    return;
+  }
+
+  try {
+    const html = await highlightCodeSnippetHtml(sourceCode.value, language.value, codeTheme.value);
+
+    if (requestId === renderRequestId) {
+      renderedHtml.value = html;
+    }
+  } catch (error) {
+    if (requestId === renderRequestId) {
+      renderedHtml.value = '';
+    }
+
+    console.error('Failed to highlight streamed code block', error);
+  }
+}
+
+function isDarkDocument(): boolean {
+  return typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+}
+</script>
+
+<style scoped>
+.incremark-shiki-code {
+  --incremark-code-border: rgba(148, 163, 184, 0.24);
+  --incremark-code-toolbar-bg: rgba(248, 250, 252, 0.9);
+  --incremark-code-toolbar-text: #475569;
+  --incremark-code-copy-bg: rgba(226, 232, 240, 0.9);
+  --incremark-code-copy-text: #0f172a;
+  border: 1px solid var(--incremark-code-border);
+  border-radius: 16px;
+  overflow: hidden;
+  width: 100%;
+  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);
+}
+
+.dark .incremark-shiki-code {
+  --incremark-code-border: rgba(100, 116, 139, 0.38);
+  --incremark-code-toolbar-bg: rgba(15, 23, 42, 0.88);
+  --incremark-code-toolbar-text: #cbd5e1;
+  --incremark-code-copy-bg: rgba(30, 41, 59, 0.88);
+  --incremark-code-copy-text: #e2e8f0;
+  background:
+    linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.98));
+}
+
+.incremark-shiki-code[data-stream-state='pending'],
+.incremark-shiki-code[data-stream-state='stable'] {
+  box-shadow: 0 10px 24px -24px rgba(15, 23, 42, 0.8);
+}
+
+.incremark-shiki-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--incremark-code-border);
+  background: var(--incremark-code-toolbar-bg);
+  backdrop-filter: blur(10px);
+}
+
+.incremark-shiki-language {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--incremark-code-toolbar-text);
+}
+
+.incremark-shiki-copy {
+  border: none;
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  background: var(--incremark-code-copy-bg);
+  color: var(--incremark-code-copy-text);
+  cursor: pointer;
+  transition: transform 0.16s ease, opacity 0.16s ease, background-color 0.16s ease;
+}
+
+.incremark-shiki-copy:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.incremark-shiki-copy:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.incremark-shiki-copy.is-copied {
+  background: rgba(16, 185, 129, 0.16);
+  color: #059669;
+}
+
+.dark .incremark-shiki-copy.is-copied {
+  background: rgba(16, 185, 129, 0.24);
+  color: #6ee7b7;
+}
+
+.incremark-shiki-body {
+  overflow-x: auto;
+}
+
+.incremark-shiki-fallback {
+  margin: 0;
+  padding: 18px;
+  overflow-x: auto;
+  background: transparent;
+  color: inherit;
+}
+
+.incremark-shiki-fallback code {
+  display: block;
+  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.65;
+  white-space: pre;
+}
+
+:deep(.incremark-shiki-html pre.shiki) {
+  margin: 0;
+  padding: 18px;
+  overflow-x: auto;
+  background: transparent !important;
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+:deep(.incremark-shiki-html code) {
+  display: block;
+  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+}
+
+:deep(.incremark-shiki-html .line) {
+  min-height: 1.65em;
+}
+</style>