Add data analytics skill documentation with chart examples and usage instructions

Author: ivictbor

custom/Message.vue

@@ -2,12 +2,15 @@
   <div 
     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')

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 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>

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"
   }
 }