@copilotkit/vue 1.83.0 → 2.0.0-rc.0

package/src/v2/components/chat/CopilotChatAssistantMessage.vue

@@ -1,25 +1,22 @@
 <script setup lang="ts">
-import {
-  computed,
-  defineComponent,
-  h,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-} from "vue";
+import { computed, onBeforeUnmount, ref } from "vue";
+import type { Component } from "vue";
 import type { AssistantMessage, Message } from "@ag-ui/core";
-import { StreamMarkdown } from "streamdown-vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 import {
   IconCheck,
   IconCopy,
-  IconDownload,
   IconRefreshCw,
   IconThumbsDown,
   IconThumbsUp,
   IconVolume2,
 } from "../icons";
+import StreamingMarkdownDefault from "./StreamingMarkdownDefault.vue";
+import {
+  useMarkdownRenderer,
+  isVueComponentRenderer,
+} from "../../providers/markdown-renderer";
 import CopilotChatToolCallsView from "./CopilotChatToolCallsView.vue";
 import type {
   CopilotChatAssistantMessageCopyButtonSlotProps,
@@ -32,10 +29,6 @@ import type {
   CopilotChatAssistantMessageToolCallsViewSlotProps,
   CopilotChatAssistantMessageToolbarSlotProps,
 } from "./types";
-import { useKatexStyles } from "../../hooks/use-katex-styles";
-
-useKatexStyles();
-
 const props = withDefaults(
   defineProps<{
     message: AssistantMessage;
@@ -101,512 +94,6 @@ const toolbarButtonClass = [
   "cpk:dark:hover:text-[rgb(243,243,243)] cpk:disabled:pointer-events-none cpk:disabled:opacity-50",
 ].join(" ");
 
-function extractFileNameFromUrl(url: string, fallback: string) {
-  try {
-    const parsed = new URL(url, "https://copilotkit.local");
-    const pathname = parsed.pathname.split("/").filter(Boolean).pop();
-    if (pathname) {
-      return decodeURIComponent(pathname);
-    }
-  } catch {
-    return fallback;
-  }
-  return fallback;
-}
-
-function triggerDownload(href: string, fileName: string) {
-  if (typeof document === "undefined") {
-    return;
-  }
-  const anchor = document.createElement("a");
-  anchor.href = href;
-  anchor.download = fileName;
-  anchor.rel = "noopener noreferrer";
-  document.body.appendChild(anchor);
-  anchor.click();
-  document.body.removeChild(anchor);
-}
-
-type MarkdownTableData = {
-  headers: string[];
-  rows: string[][];
-};
-
-function extractTableData(table: HTMLTableElement): MarkdownTableData {
-  const headers = Array.from(table.querySelectorAll("thead th")).map((cell) =>
-    (cell.textContent ?? "").trim(),
-  );
-  const rows = Array.from(table.querySelectorAll("tbody tr")).map((row) =>
-    Array.from(row.querySelectorAll("td")).map((cell) =>
-      (cell.textContent ?? "").trim(),
-    ),
-  );
-  return { headers, rows };
-}
-
-function toDelimitedTable(
-  data: MarkdownTableData,
-  delimiter: "," | "\t",
-): string {
-  const escapeCell = (value: string): string => {
-    const needsQuotes =
-      value.includes(delimiter) || value.includes('"') || value.includes("\n");
-    const escaped = value.replace(/"/g, '""');
-    return needsQuotes ? `"${escaped}"` : escaped;
-  };
-
-  const lines: string[] = [];
-  if (data.headers.length > 0) {
-    lines.push(data.headers.map(escapeCell).join(delimiter));
-  }
-  for (const row of data.rows) {
-    lines.push(row.map(escapeCell).join(delimiter));
-  }
-  return lines.join("\n");
-}
-
-function toMarkdownTable(data: MarkdownTableData): string {
-  if (data.headers.length === 0) {
-    return data.rows.map((row) => `| ${row.join(" | ")} |`).join("\n");
-  }
-
-  const separator = `| ${data.headers.map(() => "---").join(" | ")} |`;
-  const body = data.rows.map((row) => `| ${row.join(" | ")} |`);
-  return [`| ${data.headers.join(" | ")} |`, separator, ...body].join("\n");
-}
-
-function triggerBlobDownload(
-  content: string,
-  fileName: string,
-  mimeType: string,
-) {
-  if (typeof document === "undefined") {
-    return;
-  }
-  const blob = new Blob([content], { type: mimeType });
-  const url = URL.createObjectURL(blob);
-  triggerDownload(url, fileName);
-  URL.revokeObjectURL(url);
-}
-
-const MarkdownImage = defineComponent({
-  name: "CopilotMarkdownImage",
-  inheritAttrs: false,
-  props: {
-    src: {
-      type: String,
-      default: "",
-    },
-    alt: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(imageProps, { attrs }) {
-    async function handleDownload() {
-      if (!imageProps.src) {
-        return;
-      }
-
-      const fileName = extractFileNameFromUrl(imageProps.src, "image");
-      try {
-        const response = await fetch(imageProps.src);
-        if (!response.ok) {
-          throw new Error("Failed to fetch image");
-        }
-        const blob = await response.blob();
-        const objectUrl = URL.createObjectURL(blob);
-        triggerDownload(objectUrl, fileName);
-        URL.revokeObjectURL(objectUrl);
-      } catch {
-        triggerDownload(imageProps.src, fileName);
-      }
-    }
-
-    return () => {
-      const imageAttrs = {
-        ...attrs,
-        src: imageProps.src,
-        alt: imageProps.alt,
-        class: ["cpk:max-w-full cpk:rounded-lg", attrs.class]
-          .filter(Boolean)
-          .join(" "),
-        "data-streamdown": "image",
-      } as Record<string, unknown>;
-
-      delete imageAttrs.className;
-
-      return h(
-        "div",
-        {
-          class: "cpk:group cpk:relative cpk:my-4 cpk:inline-block",
-          "data-streamdown": "image-wrapper",
-        },
-        [
-          h("img", imageAttrs),
-          h("div", {
-            class:
-              "cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:hidden cpk:rounded-lg cpk:bg-black/10 cpk:group-hover:block",
-          }),
-          h(
-            "button",
-            {
-              type: "button",
-              class:
-                "cpk:absolute cpk:right-2 cpk:bottom-2 cpk:flex cpk:h-8 cpk:w-8 cpk:cursor-pointer cpk:items-center cpk:justify-center cpk:rounded-md cpk:border cpk:border-border cpk:bg-background/90 cpk:shadow-sm cpk:backdrop-blur-sm cpk:transition-all cpk:duration-200 cpk:hover:bg-background cpk:opacity-0 cpk:group-hover:opacity-100",
-              title: "Download image",
-              onClick: handleDownload,
-            },
-            [h(IconDownload, { class: "cpk:size-[14px]" })],
-          ),
-        ],
-      );
-    };
-  },
-});
-
-const tableIconButtonClass =
-  "cpk:cursor-pointer cpk:p-1 cpk:text-muted-foreground cpk:transition-all cpk:hover:text-foreground cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50";
-const tableMenuClass =
-  "cpk:absolute cpk:top-full cpk:right-0 cpk:z-10 cpk:mt-1 cpk:min-w-[120px] cpk:overflow-hidden cpk:rounded-md cpk:border cpk:border-border cpk:bg-background cpk:shadow-lg";
-const tableMenuItemClass =
-  "cpk:w-full cpk:px-3 cpk:py-2 cpk:text-left cpk:text-sm cpk:transition-colors cpk:hover:bg-muted/40";
-
-const MarkdownTable = defineComponent({
-  name: "CopilotMarkdownTable",
-  inheritAttrs: false,
-  setup(_, { attrs, slots }) {
-    const wrapperRef = ref<HTMLElement | null>(null);
-    const showCopyMenu = ref(false);
-    const showDownloadMenu = ref(false);
-    const tableCopied = ref(false);
-    let tableCopiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
-
-    const closeMenus = () => {
-      showCopyMenu.value = false;
-      showDownloadMenu.value = false;
-    };
-
-    const setTableCopiedStateWithDelay = () => {
-      if (tableCopiedResetTimeout) {
-        clearTimeout(tableCopiedResetTimeout);
-      }
-      tableCopied.value = true;
-      tableCopiedResetTimeout = setTimeout(() => {
-        tableCopied.value = false;
-        tableCopiedResetTimeout = null;
-      }, 2000);
-    };
-
-    const findTable = (): HTMLTableElement | null => {
-      if (!wrapperRef.value) return null;
-      return wrapperRef.value.querySelector("table");
-    };
-
-    const getTableData = (): MarkdownTableData | null => {
-      const table = findTable();
-      if (!table) return null;
-      return extractTableData(table);
-    };
-
-    const copyTableAs = async (format: "csv" | "tsv") => {
-      const data = getTableData();
-      if (!data) return;
-
-      const delimiter = format === "csv" ? "," : "\t";
-      const text = toDelimitedTable(data, delimiter);
-
-      if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-        try {
-          await navigator.clipboard.writeText(text);
-        } catch {
-          return;
-        }
-      }
-
-      closeMenus();
-      setTableCopiedStateWithDelay();
-    };
-
-    const downloadTableAs = (format: "csv" | "markdown") => {
-      const data = getTableData();
-      if (!data) return;
-
-      if (format === "csv") {
-        triggerBlobDownload(
-          toDelimitedTable(data, ","),
-          "table.csv",
-          "text/csv",
-        );
-      } else {
-        triggerBlobDownload(toMarkdownTable(data), "table.md", "text/markdown");
-      }
-
-      closeMenus();
-    };
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (!wrapperRef.value) return;
-      const target = event.target as Node | null;
-      if (target && !wrapperRef.value.contains(target)) {
-        closeMenus();
-      }
-    };
-
-    onMounted(() => {
-      if (typeof document !== "undefined") {
-        document.addEventListener("mousedown", handleClickOutside);
-      }
-    });
-
-    onBeforeUnmount(() => {
-      if (tableCopiedResetTimeout) {
-        clearTimeout(tableCopiedResetTimeout);
-      }
-      if (typeof document !== "undefined") {
-        document.removeEventListener("mousedown", handleClickOutside);
-      }
-    });
-
-    return () => {
-      const tableAttrs = {
-        ...attrs,
-        class: [
-          "cpk:w-full cpk:border-collapse cpk:border cpk:border-border",
-          attrs.class,
-        ]
-          .filter(Boolean)
-          .join(" "),
-        "data-streamdown": "table",
-      } as Record<string, unknown>;
-
-      delete tableAttrs.className;
-
-      return h(
-        "div",
-        {
-          ref: wrapperRef,
-          class: "cpk:my-4 cpk:flex cpk:flex-col cpk:space-y-2",
-          "data-streamdown": "table-wrapper",
-        },
-        [
-          h(
-            "div",
-            { class: "cpk:flex cpk:items-center cpk:justify-end cpk:gap-1" },
-            [
-              h("div", { class: "cpk:relative" }, [
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: tableIconButtonClass,
-                    title: "Copy table",
-                    onClick: () => {
-                      showCopyMenu.value = !showCopyMenu.value;
-                      showDownloadMenu.value = false;
-                    },
-                  },
-                  [
-                    tableCopied.value
-                      ? h(IconCheck, { class: "cpk:size-[14px]" })
-                      : h(IconCopy, { class: "cpk:size-[14px]" }),
-                  ],
-                ),
-                showCopyMenu.value
-                  ? h("div", { class: tableMenuClass }, [
-                      h(
-                        "button",
-                        {
-                          type: "button",
-                          class: tableMenuItemClass,
-                          title: "Copy table as CSV",
-                          onClick: () => copyTableAs("csv"),
-                        },
-                        "CSV",
-                      ),
-                      h(
-                        "button",
-                        {
-                          type: "button",
-                          class: tableMenuItemClass,
-                          title: "Copy table as TSV",
-                          onClick: () => copyTableAs("tsv"),
-                        },
-                        "TSV",
-                      ),
-                    ])
-                  : null,
-              ]),
-              h("div", { class: "cpk:relative" }, [
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: tableIconButtonClass,
-                    title: "Download table",
-                    onClick: () => {
-                      showDownloadMenu.value = !showDownloadMenu.value;
-                      showCopyMenu.value = false;
-                    },
-                  },
-                  [h(IconDownload, { class: "cpk:size-[14px]" })],
-                ),
-                showDownloadMenu.value
-                  ? h("div", { class: tableMenuClass }, [
-                      h(
-                        "button",
-                        {
-                          type: "button",
-                          class: tableMenuItemClass,
-                          title: "Download table as CSV",
-                          onClick: () => downloadTableAs("csv"),
-                        },
-                        "CSV",
-                      ),
-                      h(
-                        "button",
-                        {
-                          type: "button",
-                          class: tableMenuItemClass,
-                          title: "Download table as Markdown",
-                          onClick: () => downloadTableAs("markdown"),
-                        },
-                        "Markdown",
-                      ),
-                    ])
-                  : null,
-              ]),
-            ],
-          ),
-          h("div", { class: "cpk:overflow-x-auto" }, [
-            h("table", tableAttrs, slots.default ? slots.default() : []),
-          ]),
-        ],
-      );
-    };
-  },
-});
-
-const codeActionButtonClass =
-  "cpk:cursor-pointer cpk:p-1 cpk:text-muted-foreground cpk:transition-all cpk:hover:text-foreground cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50";
-
-const codeLanguageExtensionMap: Record<string, string> = {
-  javascript: "js",
-  js: "js",
-  typescript: "ts",
-  ts: "ts",
-  json: "json",
-  vue: "vue",
-  html: "html",
-  css: "css",
-  md: "md",
-  markdown: "md",
-  sh: "sh",
-  bash: "sh",
-  py: "py",
-  python: "py",
-  go: "go",
-  rust: "rs",
-  rs: "rs",
-};
-
-const CodeBlockCopyAction = defineComponent({
-  name: "CopilotCodeBlockCopyAction",
-  props: {
-    code: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(actionProps) {
-    const isCopied = ref(false);
-    let resetTimeout: ReturnType<typeof setTimeout> | null = null;
-
-    const handleClick = async () => {
-      if (!actionProps.code) return;
-      if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-        try {
-          await navigator.clipboard.writeText(actionProps.code);
-        } catch {
-          return;
-        }
-      }
-
-      if (resetTimeout) {
-        clearTimeout(resetTimeout);
-      }
-      isCopied.value = true;
-      resetTimeout = setTimeout(() => {
-        isCopied.value = false;
-        resetTimeout = null;
-      }, 2000);
-    };
-
-    onBeforeUnmount(() => {
-      if (resetTimeout) {
-        clearTimeout(resetTimeout);
-      }
-    });
-
-    return () =>
-      h(
-        "button",
-        {
-          type: "button",
-          class: codeActionButtonClass,
-          title: "Copy Code",
-          "data-streamdown": "code-block-copy-button",
-          onClick: handleClick,
-        },
-        [
-          isCopied.value
-            ? h(IconCheck, { class: "cpk:size-[14px]" })
-            : h(IconCopy, { class: "cpk:size-[14px]" }),
-        ],
-      );
-  },
-});
-
-const CodeBlockDownloadAction = defineComponent({
-  name: "CopilotCodeBlockDownloadAction",
-  props: {
-    code: {
-      type: String,
-      default: "",
-    },
-    language: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(actionProps) {
-    const handleClick = () => {
-      if (!actionProps.code) return;
-      const extension =
-        codeLanguageExtensionMap[actionProps.language.toLowerCase()] ?? "txt";
-      triggerBlobDownload(actionProps.code, `file.${extension}`, "text/plain");
-    };
-
-    return () =>
-      h(
-        "button",
-        {
-          type: "button",
-          class: codeActionButtonClass,
-          title: "Download file",
-          "data-streamdown": "code-block-download-button",
-          onClick: handleClick,
-        },
-        [h(IconDownload, { class: "cpk:size-[14px]" })],
-      );
-  },
-});
-
-const markdownComponents = {
-  img: MarkdownImage,
-  table: MarkdownTable,
-};
-
 function normalizeContent(content: unknown): string {
   if (!content) {
     return "";
@@ -642,6 +129,22 @@ const normalizedContent = computed(() =>
   normalizeContent(props.message.content),
 );
 const hasContent = computed(() => normalizedContent.value.trim().length > 0);
+
+const providerMarkdownRenderer = useMarkdownRenderer();
+const providerIsComponent = computed(() =>
+  isVueComponentRenderer(providerMarkdownRenderer),
+);
+const ActiveMarkdownRenderer = computed(() =>
+  providerIsComponent.value
+    ? (providerMarkdownRenderer as Component)
+    : StreamingMarkdownDefault,
+);
+const activeMarkdownConfig = computed(() =>
+  providerIsComponent.value || !providerMarkdownRenderer
+    ? {}
+    : (providerMarkdownRenderer as Record<string, unknown>),
+);
+
 const hasThumbsUp = computed(() => typeof props.onThumbsUp === "function");
 const hasThumbsDown = computed(() => typeof props.onThumbsDown === "function");
 const hasReadAloud = computed(() => typeof props.onReadAloud === "function");
@@ -743,24 +246,12 @@ onBeforeUnmount(() => {
         :message="message"
         :content="normalizedContent"
       >
-        <StreamMarkdown
+        <component
+          :is="ActiveMarkdownRenderer"
           v-if="hasContent"
-          class="copilot-chat-assistant-markdown"
+          v-bind="activeMarkdownConfig"
           :content="normalizedContent"
-          :components="markdownComponents"
-          :code-block-actions="[CodeBlockDownloadAction, CodeBlockCopyAction]"
-          :code-block-show-line-numbers="false"
-          :code-block-hide-copy="true"
-          :code-block-hide-download="true"
-          :allowed-link-prefixes="[
-            'https://',
-            'http://',
-            '#',
-            '/',
-            './',
-            '../',
-          ]"
-          :shiki-theme="{ light: 'github-light', dark: 'github-dark' }"
+          :is-streaming="isRunning && isLatestAssistantMessage"
         />
       </slot>
 

package/src/v2/components/chat/CopilotChatReasoningMessage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import type { Message, ReasoningMessage } from "@ag-ui/core";
-import { StreamMarkdown } from "streamdown-vue";
 import { IconChevronRight } from "../icons";
+import StreamingMarkdownDefault from "./StreamingMarkdownDefault.vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
 
@@ -237,7 +237,12 @@ function toggleOpen() {
             >
               <div v-if="hasContent || isStreaming" class="cpk:pb-2 cpk:pt-1">
                 <div class="cpk:text-sm cpk:text-muted-foreground">
-                  <StreamMarkdown :content="normalizedContent" />
+                  <!-- Reasoning content uses the streaming renderer (same as assistant);
+                       the pluggable provider renderer applies to assistant messages only. -->
+                  <StreamingMarkdownDefault
+                    :content="normalizedContent"
+                    :is-streaming="isStreaming"
+                  />
                   <span
                     v-if="isStreaming && hasContent"
                     class="cpk:inline-flex cpk:items-center cpk:ml-1 cpk:align-middle"

package/src/v2/components/chat/StreamingMarkdownDefault.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, h, watchEffect } from "vue";
+import {
+  StreamingMarkdownRenderer,
+  type VueStreamingMarkdownNodeRenderer,
+} from "@copilotkit/markdown-renderer/vue";
+import { warnUnsupportedRichSyntaxOnce } from "@copilotkit/markdown-renderer";
+import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown-renderer";
+import type { DefaultMarkdownRendererProps } from "../../providers/markdown-renderer";
+
+const props = withDefaults(
+  defineProps<
+    { content: string; isStreaming?: boolean } & DefaultMarkdownRendererProps
+  >(),
+  { isStreaming: false },
+);
+
+const resolvedOptions = computed(
+  () => props.options as StreamingMarkdownParserOptions | undefined,
+);
+
+const defaultCodeBlockRenderer: VueStreamingMarkdownNodeRenderer = (
+  node,
+  defaultVNode,
+) => {
+  if (node.type !== "code-block") return defaultVNode;
+  return h(
+    "pre",
+    {
+      "data-streaming-markdown-node": "code-block",
+      "data-node-open": String(!node.closed),
+      class: "cpk:overflow-x-auto cpk:rounded-lg cpk:p-3",
+    },
+    [h("code", { "data-code-info": node.info ?? undefined }, node.text)],
+  );
+};
+
+const mergedNodeRenderers = computed(() => ({
+  codeBlock: defaultCodeBlockRenderer,
+  ...props.nodeRenderers,
+}));
+
+// Dev-only: nudge upgraders from the bundled Streamdown default when their
+// content needs math/syntax highlighting the built-in renderer doesn't do.
+watchEffect(() => warnUnsupportedRichSyntaxOnce(props.content));
+</script>
+
+<template>
+  <StreamingMarkdownRenderer
+    :content="props.content"
+    :is-complete="!props.isStreaming"
+    :node-renderers="mergedNodeRenderers"
+    :caret="props.caret ?? props.isStreaming"
+    :options="resolvedOptions"
+    :class="props.class"
+  />
+</template>