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

package/src/v2/components/A2UIMessageRenderer.ts

@@ -1,6 +1,6 @@
 import { computed, defineComponent, h } from "vue";
 import type { PropType } from "vue";
-import { z } from "zod";
+import * as z from "zod";
 import type { VueActivityMessageRenderer } from "../types";
 import type { A2UITheme } from "../types";
 import A2UISurfaceActivityRenderer from "./A2UISurfaceActivityRenderer.vue";
@@ -31,7 +31,7 @@ export type A2UIMessageRendererOptions = {
  * The `a2ui-surface` activity carries the WHOLE generative-UI lifecycle on one
  * stable messageId: pre-paint `status` ("building" | "retrying" | "failed")
  * with recovery detail, then `a2ui_operations` on paint. The states swap in
- * place, so the painted surface replaces the skeleton. `.passthrough()` keeps
+ * place, so the painted surface replaces the skeleton. `.loose()` keeps
  * the operations and any future fields.
  */
 const A2UISurfaceContentSchema = z
@@ -39,7 +39,7 @@ const A2UISurfaceContentSchema = z
     a2ui_operations: z.array(z.any()).optional(),
     ...A2UILifecycleFields,
   })
-  .passthrough();
+  .loose();
 
 export function createA2UIMessageRenderer(
   options: A2UIMessageRendererOptions,

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,21 +1,16 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted } from "vue";
-
-// 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";
+import {
+  ɵLICENSE_BANNER_STYLE,
+  ɵgetLicenseBannerSpec,
+  ɵreserveLicenseBannerOffset,
+} from "@copilotkit/core";
+import type { ɵLicenseBannerType } from "@copilotkit/core";
+import { useChatLabels } from "./chat/use-chat-labels";
 
 const props = withDefaults(
   defineProps<{
-    type: LicenseBannerType;
+    type: ɵLicenseBannerType;
     featureName?: string;
     expiryDate?: string;
     graceRemaining?: number;
@@ -29,152 +24,49 @@ const props = withDefaults(
   },
 );
 
-interface BannerSpec {
-  severity: "info" | "warning" | "critical";
-  message: string;
-  actionLabel: string;
-  actionUrl: string;
-}
-
-const spec = computed<BannerSpec | null>(() => {
-  switch (props.type) {
-    case "no_license":
-      return {
-        severity: "info",
-        message: "Powered by CopilotKit",
-        actionLabel: "Get a license",
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "feature_unlicensed":
-      return {
-        severity: "warning",
-        message: `⚠ The "${props.featureName ?? ""}" feature requires a CopilotKit license.`,
-        actionLabel: "Get a license",
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "expiring": {
-      const days = props.graceRemaining;
-      const dayLabel = days === 1 ? "day" : "days";
-      return {
-        severity: "warning",
-        message: `Your CopilotKit license expires in ${days} ${dayLabel}. Please renew.`,
-        actionLabel: "Renew",
-        actionUrl: "https://dashboard.operations.copilotkit.ai",
-      };
-    }
-    case "expired":
-      return {
-        severity: "critical",
-        message: `Your CopilotKit license expired${props.expiryDate ? ` on ${props.expiryDate}` : ""}. Please renew at copilotkit.ai/pricing`,
-        actionLabel: "Renew now",
-        actionUrl: "https://copilotkit.ai/pricing",
-      };
-    case "invalid":
-      return {
-        severity: "critical",
-        message:
-          "Invalid CopilotKit license token. Please check your configuration.",
-        actionLabel: "Get a license",
-        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 labels = useChatLabels();
 
-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"
       >
         ×