@copilotkit/vue 2.0.0-rc.19 → 2.0.0-rc.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/vue",
-  "version": "2.0.0-rc.19",
+  "version": "2.0.0-rc.20",
   "private": false,
   "description": "Vue 3 components and composables for CopilotKit",
   "keywords": [
@@ -61,13 +61,13 @@
     "@a2ui/web_core": "0.10.4",
     "@ag-ui/client": "1.0.2",
     "@ag-ui/core": "1.0.2",
-    "@copilotkit/a2ui-renderer": "2.0.0-rc.19",
-    "@copilotkit/core": "2.0.0-rc.19",
-    "@copilotkit/markdown": "2.0.0-rc.19",
-    "@copilotkit/mcp-apps-renderer": "2.0.0-rc.19",
-    "@copilotkit/shared": "2.0.0-rc.19",
-    "@copilotkit/web-components": "2.0.0-rc.19",
-    "@copilotkit/web-inspector": "2.0.0-rc.19",
+    "@copilotkit/a2ui-renderer": "2.0.0-rc.20",
+    "@copilotkit/core": "2.0.0-rc.20",
+    "@copilotkit/markdown": "2.0.0-rc.20",
+    "@copilotkit/mcp-apps-renderer": "2.0.0-rc.20",
+    "@copilotkit/shared": "2.0.0-rc.20",
+    "@copilotkit/web-components": "2.0.0-rc.20",
+    "@copilotkit/web-inspector": "2.0.0-rc.20",
     "zod": "^4.2.0"
   },
   "devDependencies": {

package/src/v2/components/InlineFeatureWarning.vue

@@ -1,35 +1,34 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from "vue";
+import {
+  ɵINLINE_FEATURE_WARNING_STYLE,
+  ɵgetInlineFeatureWarningSpec,
+} from "@copilotkit/core";
+import { useChatLabels } from "./chat/use-chat-labels";
+
+const props = defineProps<{
   featureName: string;
 }>();
 
-const containerStyle = {
-  padding: "8px 12px",
-  backgroundColor: "#fffbeb",
-  border: "1px solid #fbbf24",
-  borderRadius: "6px",
-  fontSize: "13px",
-  color: "#92400e",
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-} as const;
-
-const linkStyle = {
-  color: "#b45309",
-  textDecoration: "underline",
-} as const;
+const labels = useChatLabels();
+const spec = computed(() =>
+  ɵgetInlineFeatureWarningSpec(props.featureName, labels.value),
+);
 </script>
 
 <template>
-  <div :style="containerStyle" data-testid="copilot-inline-feature-warning">
-    ⚠ The "{{ featureName }}" feature requires a CopilotKit license.
+  <div
+    :style="ɵINLINE_FEATURE_WARNING_STYLE.container"
+    data-testid="copilot-inline-feature-warning"
+  >
+    {{ spec.message }}
     <a
-      href="https://copilotkit.ai/pricing"
+      :href="spec.actionUrl"
       target="_blank"
       rel="noopener noreferrer"
-      :style="linkStyle"
+      :style="ɵINLINE_FEATURE_WARNING_STYLE.link"
     >
-      Get one at copilotkit.ai/pricing
+      {{ spec.actionLabel }}
     </a>
   </div>
 </template>

package/src/v2/components/LicenseWarningBanner.vue

@@ -1,23 +1,16 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted } from "vue";
-import { ɵformatLabel } from "@copilotkit/core";
+import {
+  ɵLICENSE_BANNER_STYLE,
+  ɵgetLicenseBannerSpec,
+  ɵreserveLicenseBannerOffset,
+} from "@copilotkit/core";
+import type { ɵLicenseBannerType } from "@copilotkit/core";
 import { useChatLabels } from "./chat/use-chat-labels";
 
-// Total reserved vertical space for the fixed license banner: banner height
-// (~36px) + bottom offset (8px) + visual gap above the chat input (~8px).
-const LICENSE_BANNER_OFFSET_PX = 52;
-const LICENSE_BANNER_OFFSET_VAR = "--copilotkit-license-banner-offset";
-
-type LicenseBannerType =
-  | "no_license"
-  | "expired"
-  | "expiring"
-  | "invalid"
-  | "feature_unlicensed";
-
 const props = withDefaults(
   defineProps<{
-    type: LicenseBannerType;
+    type: ɵLicenseBannerType;
     featureName?: string;
     expiryDate?: string;
     graceRemaining?: number;
@@ -31,166 +24,49 @@ const props = withDefaults(
   },
 );
 
-interface BannerSpec {
-  severity: "info" | "warning" | "critical";
-  message: string;
-  actionLabel: string;
-  actionUrl: string;
-}
-
 const labels = useChatLabels();
 
-function expiringMessage(days: number | undefined) {
-  if (days === undefined) return labels.value.licenseExpiringText;
-  const template =
-    days === 1
-      ? labels.value.licenseExpiringInDaysOne
-      : labels.value.licenseExpiringInDaysOther;
-  return ɵformatLabel(template, { days });
-}
-
-const spec = computed<BannerSpec | null>(() => {
-  const text = labels.value;
-  switch (props.type) {
-    case "no_license":
-      return {
-        severity: "info",
-        message: text.licensePoweredByText,
-        actionLabel: text.licenseGetLicenseLabel,
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "feature_unlicensed":
-      return {
-        severity: "warning",
-        message: ɵformatLabel(text.licenseFeatureUnlicensedText, {
-          feature: props.featureName ?? "",
-        }),
-        actionLabel: text.licenseGetLicenseLabel,
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "expiring":
-      return {
-        severity: "warning",
-        message: expiringMessage(props.graceRemaining),
-        actionLabel: text.licenseRenewLabel,
-        actionUrl: "https://dashboard.operations.copilotkit.ai",
-      };
-    case "expired":
-      return {
-        severity: "critical",
-        message: props.expiryDate
-          ? ɵformatLabel(text.licenseExpiredOnDateText, {
-              date: props.expiryDate,
-            })
-          : text.licenseExpiredText,
-        actionLabel: text.licenseRenewNowLabel,
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "invalid":
-      return {
-        severity: "critical",
-        message: text.licenseInvalidText,
-        actionLabel: text.licenseGetLicenseLabel,
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    default:
-      return null;
-  }
-});
-
-const baseStyle = {
-  position: "fixed",
-  bottom: "8px",
-  left: "50%",
-  transform: "translateX(-50%)",
-  zIndex: 99999,
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "12px",
-  whiteSpace: "nowrap",
-  padding: "8px 16px",
-  fontSize: "13px",
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
-  borderRadius: "6px",
-  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-} as const;
-
-const severityStyle = computed(() => {
-  switch (spec.value?.severity) {
-    case "warning":
-      return {
-        backgroundColor: "#fffbeb",
-        border: "1px solid #fbbf24",
-        color: "#92400e",
-      };
-    case "critical":
-      return {
-        backgroundColor: "#fef2f2",
-        border: "1px solid #fca5a5",
-        color: "#991b1b",
-      };
-    default:
-      return {
-        backgroundColor: "#eff6ff",
-        border: "1px solid #93c5fd",
-        color: "#1e40af",
-      };
-  }
-});
+// Core picks the text, link, and severity; this component renders them.
+const spec = computed(() =>
+  ɵgetLicenseBannerSpec(props.type, labels.value, {
+    featureName: props.featureName,
+    expiryDate: props.expiryDate,
+    graceRemaining: props.graceRemaining,
+  }),
+);
 
 const containerStyle = computed(() => ({
-  ...baseStyle,
-  ...severityStyle.value,
+  ...ɵLICENSE_BANNER_STYLE.base,
+  ...ɵLICENSE_BANNER_STYLE.severity[spec.value.severity],
 }));
 
 // Publish the banner's reserved bottom offset so the chat input can lift
 // itself above it via padding-bottom: var(--copilotkit-license-banner-offset).
+let releaseOffset: (() => void) | undefined;
 onMounted(() => {
-  if (typeof document === "undefined") return;
-  document.documentElement.style.setProperty(
-    LICENSE_BANNER_OFFSET_VAR,
-    `${LICENSE_BANNER_OFFSET_PX}px`,
-  );
+  releaseOffset = ɵreserveLicenseBannerOffset();
 });
-
 onBeforeUnmount(() => {
-  if (typeof document === "undefined") return;
-  document.documentElement.style.removeProperty(LICENSE_BANNER_OFFSET_VAR);
+  releaseOffset?.();
+  releaseOffset = undefined;
 });
 </script>
 
 <template>
-  <div v-if="spec" :style="containerStyle" data-testid="copilot-license-banner">
+  <div :style="containerStyle" data-testid="copilot-license-banner">
     <span>{{ spec.message }}</span>
-    <div
-      :style="{
-        display: 'flex',
-        gap: '8px',
-        alignItems: 'center',
-      }"
-    >
+    <div :style="ɵLICENSE_BANNER_STYLE.actions">
       <a
         :href="spec.actionUrl"
         target="_blank"
         rel="noopener noreferrer"
-        :style="{
-          fontWeight: 600,
-          textDecoration: 'underline',
-          color: 'inherit',
-        }"
+        :style="ɵLICENSE_BANNER_STYLE.link"
       >
         {{ spec.actionLabel }}
       </a>
       <button
         v-if="props.onDismiss"
-        :style="{
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          color: 'inherit',
-          fontSize: '16px',
-        }"
+        :style="ɵLICENSE_BANNER_STYLE.dismiss"
         @click="props.onDismiss"
       >
         ×

package/src/v2/components/__tests__/LicenseWarningBanner.test.ts

@@ -1,7 +1,24 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, it, vi } from "vitest";
+import { defineComponent, h } from "vue";
+import type { CopilotChatLabels } from "@copilotkit/core";
+import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
+import InlineFeatureWarning from "../InlineFeatureWarning.vue";
 import LicenseWarningBanner from "../LicenseWarningBanner.vue";
 
+/** Mounts `child` inside a chat configuration with `labels`. */
+function mountWithLabels(
+  labels: Partial<CopilotChatLabels>,
+  child: () => ReturnType<typeof h>,
+) {
+  const Host = defineComponent({
+    setup: () => () =>
+      h(CopilotChatConfigurationProvider, { labels }, { default: child }),
+  });
+  return mount(Host);
+}
+
+// The banner text rules are covered next to core's ɵgetLicenseBannerSpec.
 describe("LicenseWarningBanner", () => {
   it("reactively renders and invokes the optional dismiss callback", async () => {
     const onDismiss = vi.fn();
@@ -21,23 +38,46 @@ describe("LicenseWarningBanner", () => {
     expect(wrapper.find("button").exists()).toBe(false);
   });
 
-  it("says the license expires soon when the day count is unknown", () => {
+  it("shows the core spec's text and link", () => {
     const wrapper = mount(LicenseWarningBanner, {
-      props: { type: "expiring" },
+      props: { type: "expiring", graceRemaining: 1 },
     });
 
     expect(wrapper.get("span").text()).toBe(
-      "Your CopilotKit license expires soon. Please renew.",
+      "Your CopilotKit license expires in 1 day. Please renew.",
+    );
+    expect(wrapper.get("a").attributes("href")).toBe(
+      "https://dashboard.operations.copilotkit.ai",
     );
   });
 
-  it("counts the days left before the license expires", () => {
-    const wrapper = mount(LicenseWarningBanner, {
-      props: { type: "expiring", graceRemaining: 1 },
+  it("uses the configured chat labels", () => {
+    const wrapper = mountWithLabels(
+      { licenseInvalidText: "Token ungültig" },
+      () => h(LicenseWarningBanner, { type: "invalid" }),
+    );
+
+    expect(wrapper.get("span").text()).toBe("Token ungültig");
+  });
+});
+
+describe("InlineFeatureWarning", () => {
+  it("shows the default feature-unlicensed label", () => {
+    const wrapper = mount(InlineFeatureWarning, {
+      props: { featureName: "Chat" },
     });
 
-    expect(wrapper.get("span").text()).toBe(
-      "Your CopilotKit license expires in 1 day. Please renew.",
+    expect(wrapper.text()).toContain(
+      '⚠ The "Chat" feature requires a CopilotKit license.',
     );
   });
+
+  it("uses the configured feature-unlicensed label", () => {
+    const wrapper = mountWithLabels(
+      { licenseFeatureUnlicensedText: "{feature} braucht eine Lizenz." },
+      () => h(InlineFeatureWarning, { featureName: "Chat" }),
+    );
+
+    expect(wrapper.text()).toContain("Chat braucht eine Lizenz.");
+  });
 });

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

@@ -2,7 +2,6 @@
 import {
   computed,
   inject,
-  onBeforeUnmount,
   onUpdated,
   ref,
   shallowRef,
@@ -34,7 +33,12 @@ import CopilotChatInspectorButton from "./CopilotChatInspectorButton.vue";
 import { useInspectorShortcutsHidden } from "./inspector-shortcuts";
 import { InspectorKey } from "../../providers/keys";
 import { useFeedbackComment, useMessageFeedback } from "./message-feedback";
-import type { MessageFeedbackRating } from "../../lib/message-feedback";
+import {
+  ɵhasAssistantMessageText,
+  ɵshouldShowAssistantToolbar,
+} from "@copilotkit/core";
+import type { ɵMessageFeedbackRating as MessageFeedbackRating } from "@copilotkit/core";
+import { useCopyFeedback } from "./use-copy-feedback";
 import type {
   CopilotChatAssistantMessageCopyButtonSlotProps,
   CopilotChatAssistantMessageFeedbackCommentSlotProps,
@@ -109,8 +113,7 @@ const emit = defineEmits<{
 
 const config = useCopilotChatConfiguration();
 const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
-const copied = ref(false);
-let copiedResetTimeout: ReturnType<typeof setTimeout> | null = null;
+const { copied, copy } = useCopyFeedback();
 
 function normalizeContent(content: unknown): string {
   if (!content) {
@@ -146,7 +149,9 @@ function normalizeContent(content: unknown): string {
 const normalizedContent = computed(() =>
   normalizeContent(props.message.content),
 );
-const hasContent = computed(() => normalizedContent.value.trim().length > 0);
+const hasContent = computed(() =>
+  ɵhasAssistantMessageText(normalizedContent.value),
+);
 
 const providerMarkdownRenderer = useMarkdownRenderer();
 const providerIsComponent = computed(() =>
@@ -190,11 +195,14 @@ const hasRegenerate = computed(() => typeof props.onRegenerate === "function");
 const isLatestAssistantMessage = computed(
   () => props.messages[props.messages.length - 1]?.id === props.message.id,
 );
-const shouldShowToolbar = computed(
-  () =>
-    props.toolbarVisible &&
-    (hasContent.value || showInspectorShortcut.value) &&
-    !(props.isRunning && isLatestAssistantMessage.value),
+const shouldShowToolbar = computed(() =>
+  ɵshouldShowAssistantToolbar({
+    toolbarVisible: props.toolbarVisible,
+    hasContent: hasContent.value,
+    showInspectorShortcut: showInspectorShortcut.value,
+    isRunning: props.isRunning,
+    isLatest: isLatestAssistantMessage.value,
+  }),
 );
 
 // A custom thumb that calls its handler without an event gives no element:
@@ -325,34 +333,8 @@ function handleInspect() {
   });
 }
 
-function resetCopiedStateWithDelay() {
-  if (copiedResetTimeout) {
-    clearTimeout(copiedResetTimeout);
-  }
-  copied.value = true;
-  copiedResetTimeout = setTimeout(() => {
-    copied.value = false;
-    copiedResetTimeout = null;
-  }, 2000);
-}
-
 async function handleCopyMessage() {
-  const content = normalizedContent.value;
-  if (!content) return;
-
-  if (
-    typeof navigator === "undefined" ||
-    typeof navigator.clipboard?.writeText !== "function"
-  ) {
-    return;
-  }
-
-  try {
-    await navigator.clipboard.writeText(content);
-    resetCopiedStateWithDelay();
-  } catch (error) {
-    console.error("Failed to copy to clipboard:", error);
-  }
+  await copy(normalizedContent.value);
 }
 
 function handleThumbsUp(event?: MouseEvent) {
@@ -371,12 +353,6 @@ function handleReadAloud() {
 function handleRegenerate() {
   emit("regenerate", props.message);
 }
-
-onBeforeUnmount(() => {
-  if (copiedResetTimeout) {
-    clearTimeout(copiedResetTimeout);
-  }
-});
 </script>
 
 <template>

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

@@ -12,8 +12,8 @@
 import { computed, nextTick, ref, watch } from "vue";
 import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
 import { CopilotChatDefaultLabels } from "../../providers/types";
-import { MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH } from "../../lib/message-feedback";
-import type { MessageFeedbackRating } from "../../lib/message-feedback";
+import { ɵMESSAGE_FEEDBACK_MAX_COMMENT_LENGTH as MESSAGE_FEEDBACK_MAX_COMMENT_LENGTH } from "@copilotkit/core";
+import type { ɵMessageFeedbackRating as MessageFeedbackRating } from "@copilotkit/core";
 import CopilotPopover from "../ui/CopilotPopover.vue";
 import { IconArrowUp } from "../icons";
 import type { FeedbackComment } from "./message-feedback";