@copilotkit/vue 1.57.1

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+import { CopilotChatDefaultLabels } from "../../providers/types";
+import CopilotModalHeaderCloseButton from "./CopilotModalHeaderCloseButton";
+import CopilotModalHeaderTitle from "./CopilotModalHeaderTitle";
+import type {
+  CopilotModalHeaderCloseButtonSlotProps,
+  CopilotModalHeaderLayoutSlotProps,
+  CopilotModalHeaderProps,
+  CopilotModalHeaderTitleContentSlotProps,
+} from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<CopilotModalHeaderProps>();
+
+defineSlots<{
+  "title-content"?: (props: CopilotModalHeaderTitleContentSlotProps) => unknown;
+  "close-button"?: (props: CopilotModalHeaderCloseButtonSlotProps) => unknown;
+  layout?: (props: CopilotModalHeaderLayoutSlotProps) => unknown;
+}>();
+
+const attrs = useAttrs();
+const config = useCopilotChatConfiguration();
+
+const resolvedTitle = computed(
+  () =>
+    props.title ??
+    config.value?.labels.modalHeaderTitle ??
+    CopilotChatDefaultLabels.modalHeaderTitle,
+);
+const headerClass = computed(() => [
+  "cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4",
+  "cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80",
+  attrs.class,
+]);
+const headerAttrs = computed(() => {
+  const { class: _className, ...rest } = attrs;
+  return rest;
+});
+
+function handleClose() {
+  config.value?.setModalOpen?.(false);
+}
+</script>
+
+<template>
+  <header
+    data-copilotkit
+    data-slot="copilot-modal-header"
+    :class="headerClass"
+    v-bind="headerAttrs"
+  >
+    <slot name="layout" :title="resolvedTitle" :on-close="handleClose">
+      <div class="cpk:flex cpk:w-full cpk:items-center cpk:gap-2">
+        <div class="cpk:flex cpk:flex-1" aria-hidden="true" />
+        <div class="cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center">
+          <slot name="title-content" :title="resolvedTitle">
+            <CopilotModalHeaderTitle>
+              {{ resolvedTitle }}
+            </CopilotModalHeaderTitle>
+          </slot>
+        </div>
+        <div class="cpk:flex cpk:flex-1 cpk:justify-end">
+          <slot name="close-button" :on-close="handleClose">
+            <CopilotModalHeaderCloseButton @click="handleClose" />
+          </slot>
+        </div>
+      </div>
+    </slot>
+  </header>
+</template>

package/src/v2/components/chat/CopilotModalHeaderCloseButton.ts

@@ -0,0 +1,38 @@
+import { computed, defineComponent, h, useAttrs } from "vue";
+import { IconX } from "../icons";
+
+export default defineComponent({
+  name: "CopilotModalHeaderCloseButton",
+  inheritAttrs: false,
+  setup(_, { slots }) {
+    const attrs = useAttrs();
+    const ariaLabel = computed(() =>
+      typeof attrs["aria-label"] === "string" ? attrs["aria-label"] : "Close",
+    );
+
+    return () => {
+      const {
+        class: className,
+        type,
+        ...rest
+      } = attrs as Record<string, unknown>;
+
+      return h(
+        "button",
+        {
+          ...rest,
+          type: typeof type === "string" ? type : "button",
+          class: [
+            "cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer",
+            "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring",
+            className,
+          ],
+          "aria-label": ariaLabel.value,
+        },
+        slots.default
+          ? slots.default()
+          : [h(IconX, { class: "cpk:h-4 cpk:w-4", "aria-hidden": true })],
+      );
+    };
+  },
+});

package/src/v2/components/chat/CopilotModalHeaderTitle.ts

@@ -0,0 +1,22 @@
+import { defineComponent, h } from "vue";
+
+export default defineComponent({
+  name: "CopilotModalHeaderTitle",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => {
+      const { class: className, ...rest } = attrs as Record<string, unknown>;
+      return h(
+        "div",
+        {
+          ...rest,
+          class: [
+            "cpk:w-full cpk:text-base cpk:font-medium cpk:leading-none cpk:tracking-tight cpk:text-foreground",
+            className,
+          ],
+        },
+        slots.default ? slots.default() : [],
+      );
+    };
+  },
+});

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

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import CopilotChat from "./CopilotChat.vue";
+import CopilotPopupView from "./CopilotPopupView.vue";
+import CopilotPopupWelcomeScreen from "./CopilotPopupWelcomeScreen.vue";
+import InlineFeatureWarning from "../InlineFeatureWarning.vue";
+import { useLicenseContext } from "../../providers/useLicenseContext";
+import type {
+  CopilotChatMessageViewSlotProps,
+  CopilotChatViewOverrideSlotProps,
+  CopilotChatWelcomeScreenSlotProps,
+  CopilotPopupProps,
+  CopilotPopupViewHeaderSlotProps,
+  CopilotPopupViewToggleButtonSlotProps,
+  CopilotSidebarWelcomeScreenInputSlotProps,
+  CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
+} from "./types";
+import type { Suggestion } from "@copilotkit/core";
+
+function popupViewEventBindings(slotProps: CopilotChatViewOverrideSlotProps) {
+  return {
+    onSubmitMessage: slotProps.onSubmitMessage,
+    onInputChange: slotProps.onInputChange,
+    onSelectSuggestion: slotProps.onSelectSuggestion,
+    ...(slotProps.onStop ? { onStop: slotProps.onStop } : {}),
+    ...(slotProps.onAddFile ? { onAddFile: slotProps.onAddFile } : {}),
+    ...(slotProps.onStartTranscribe
+      ? { onStartTranscribe: slotProps.onStartTranscribe }
+      : {}),
+    ...(slotProps.onCancelTranscribe
+      ? { onCancelTranscribe: slotProps.onCancelTranscribe }
+      : {}),
+    ...(slotProps.onFinishTranscribe
+      ? { onFinishTranscribe: slotProps.onFinishTranscribe }
+      : {}),
+  };
+}
+
+const props = withDefaults(defineProps<CopilotPopupProps>(), {
+  autoScroll: true,
+  welcomeScreen: true,
+  inputValue: undefined,
+  inputMode: "input",
+  inputToolsMenu: () => [],
+  width: undefined,
+  height: undefined,
+  clickOutsideToClose: false,
+  defaultOpen: true,
+  onFinishTranscribeWithAudio: undefined,
+});
+
+defineSlots<{
+  header?: (props: CopilotPopupViewHeaderSlotProps) => unknown;
+  "toggle-button"?: (props: CopilotPopupViewToggleButtonSlotProps) => unknown;
+  "chat-view"?: (props: CopilotChatViewOverrideSlotProps) => unknown;
+  "message-view"?: (props: CopilotChatMessageViewSlotProps) => unknown;
+  input?: (props: CopilotSidebarWelcomeScreenInputSlotProps) => unknown;
+  "suggestion-view"?: (
+    props: CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
+  ) => unknown;
+  "welcome-screen"?: (props: CopilotChatWelcomeScreenSlotProps) => unknown;
+  "welcome-message"?: () => unknown;
+}>();
+
+defineEmits<{
+  "submit-message": [value: string];
+  stop: [];
+  "input-change": [value: string];
+  "select-suggestion": [suggestion: Suggestion, index: number];
+  "add-file": [];
+  "start-transcribe": [];
+  "cancel-transcribe": [];
+  "finish-transcribe": [];
+}>();
+
+const license = useLicenseContext();
+const isPopupLicensed = computed(() => license.value.checkFeature("popup"));
+
+watch(
+  isPopupLicensed,
+  (licensed) => {
+    if (!licensed) {
+      console.warn(
+        '[CopilotKit] Warning: "popup" feature is not licensed. Visit copilotkit.ai/pricing',
+      );
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <InlineFeatureWarning v-if="!isPopupLicensed" feature-name="Popup" />
+  <CopilotChat
+    v-bind="props"
+    @submit-message="$emit('submit-message', $event)"
+    @stop="$emit('stop')"
+    @input-change="$emit('input-change', $event)"
+    @select-suggestion="
+      (suggestion, index) => $emit('select-suggestion', suggestion, index)
+    "
+    @add-file="$emit('add-file')"
+    @start-transcribe="$emit('start-transcribe')"
+    @cancel-transcribe="$emit('cancel-transcribe')"
+    @finish-transcribe="$emit('finish-transcribe')"
+  >
+    <template #chat-view="slotProps">
+      <slot v-if="$slots['chat-view']" name="chat-view" v-bind="slotProps" />
+      <CopilotPopupView
+        v-else
+        :messages="slotProps.messages"
+        :auto-scroll="slotProps.autoScroll"
+        :is-running="slotProps.isRunning"
+        :suggestions="slotProps.suggestions"
+        :suggestion-loading-indexes="slotProps.suggestionLoadingIndexes"
+        :welcome-screen="slotProps.welcomeScreen"
+        :input-value="slotProps.inputValue"
+        :input-mode="slotProps.inputMode"
+        :input-tools-menu="slotProps.inputToolsMenu"
+        :width="width"
+        :height="height"
+        :click-outside-to-close="clickOutsideToClose"
+        :default-open="defaultOpen"
+        :on-finish-transcribe-with-audio="slotProps.onFinishTranscribeWithAudio"
+        v-bind="popupViewEventBindings(slotProps)"
+      >
+        <template v-if="$slots.header" #header="headerProps">
+          <slot name="header" v-bind="headerProps" />
+        </template>
+
+        <template
+          v-if="$slots['toggle-button']"
+          #toggle-button="toggleButtonProps"
+        >
+          <slot name="toggle-button" v-bind="toggleButtonProps" />
+        </template>
+
+        <template #welcome-screen="welcomeScreenProps">
+          <slot
+            v-if="$slots['welcome-screen']"
+            name="welcome-screen"
+            v-bind="welcomeScreenProps"
+          />
+          <CopilotPopupWelcomeScreen v-else v-bind="welcomeScreenProps">
+            <template v-if="$slots['welcome-message']" #welcome-message>
+              <slot name="welcome-message" />
+            </template>
+
+            <template
+              v-if="$slots['suggestion-view']"
+              #suggestion-view="suggestionViewProps"
+            >
+              <slot name="suggestion-view" v-bind="suggestionViewProps" />
+            </template>
+
+            <template v-if="$slots.input" #input="inputProps">
+              <slot name="input" v-bind="inputProps" />
+            </template>
+          </CopilotPopupWelcomeScreen>
+        </template>
+
+        <template
+          v-if="$slots['message-view']"
+          #message-view="messageViewProps"
+        >
+          <slot name="message-view" v-bind="messageViewProps" />
+        </template>
+
+        <template v-if="$slots.input" #input="inputProps">
+          <slot name="input" v-bind="inputProps" />
+        </template>
+
+        <template
+          v-if="$slots['suggestion-view']"
+          #suggestion-view="suggestionViewProps"
+        >
+          <slot name="suggestion-view" v-bind="suggestionViewProps" />
+        </template>
+      </CopilotPopupView>
+    </template>
+  </CopilotChat>
+</template>

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, useAttrs } from "vue";
+import CopilotChatConfigurationProvider from "../../providers/CopilotChatConfigurationProvider.vue";
+import CopilotPopupViewInternal from "./CopilotPopupViewInternal.vue";
+import type {
+  CopilotChatFeatherSlotProps,
+  CopilotChatMessageViewSlotProps,
+  CopilotChatScrollToBottomButtonSlotProps,
+  CopilotChatScrollViewSlotProps,
+  CopilotChatWelcomeScreenSlotProps,
+  CopilotPopupViewHeaderSlotProps,
+  CopilotPopupViewProps,
+  CopilotPopupViewToggleButtonSlotProps,
+  CopilotSidebarWelcomeScreenInputSlotProps,
+  CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
+} from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<CopilotPopupViewProps>(), {
+  messages: () => [],
+  autoScroll: true,
+  isRunning: false,
+  suggestions: () => [],
+  suggestionLoadingIndexes: () => [],
+  welcomeScreen: true,
+  inputValue: undefined,
+  inputMode: "input",
+  inputToolsMenu: () => [],
+  width: undefined,
+  height: undefined,
+  clickOutsideToClose: false,
+  defaultOpen: true,
+  onFinishTranscribeWithAudio: undefined,
+});
+
+defineSlots<{
+  header?: (props: CopilotPopupViewHeaderSlotProps) => unknown;
+  "toggle-button"?: (props: CopilotPopupViewToggleButtonSlotProps) => unknown;
+  "message-view"?: (props: CopilotChatMessageViewSlotProps) => unknown;
+  "scroll-view"?: (props: CopilotChatScrollViewSlotProps) => unknown;
+  feather?: (props: CopilotChatFeatherSlotProps) => unknown;
+  "scroll-to-bottom-button"?: (
+    props: CopilotChatScrollToBottomButtonSlotProps,
+  ) => unknown;
+  input?: (props: CopilotSidebarWelcomeScreenInputSlotProps) => unknown;
+  "suggestion-view"?: (
+    props: CopilotSidebarWelcomeScreenSuggestionViewSlotProps,
+  ) => unknown;
+  "welcome-screen"?: (props: CopilotChatWelcomeScreenSlotProps) => unknown;
+  "welcome-message"?: () => unknown;
+}>();
+
+const emit = defineEmits<{
+  "submit-message": [value: string];
+  stop: [];
+  "input-change": [value: string];
+  "select-suggestion": [
+    suggestion: (typeof props.suggestions)[number],
+    index: number,
+  ];
+  "add-file": [];
+  "start-transcribe": [];
+  "cancel-transcribe": [];
+  "finish-transcribe": [];
+}>();
+
+const attrs = useAttrs();
+const instance = getCurrentInstance();
+const vnodeProps = computed(
+  () => (instance?.vnode.props ?? {}) as Record<string, unknown>,
+);
+
+function hasListener(listenerName: string) {
+  const listener = vnodeProps.value[listenerName];
+  if (Array.isArray(listener)) {
+    return listener.length > 0;
+  }
+  return !!listener;
+}
+
+const internalProps = computed(() => {
+  const { defaultOpen: _defaultOpen, ...rest } = props;
+  return rest;
+});
+
+const forwardedEventListeners = computed(() => {
+  const listeners: Record<string, unknown> = {
+    onSubmitMessage: (value: string) => emit("submit-message", value),
+    onStop: () => emit("stop"),
+    onInputChange: (value: string) => emit("input-change", value),
+    onSelectSuggestion: (
+      suggestion: (typeof props.suggestions)[number],
+      index: number,
+    ) => emit("select-suggestion", suggestion, index),
+  };
+
+  if (hasListener("onAddFile")) {
+    listeners.onAddFile = () => emit("add-file");
+  }
+  if (hasListener("onStartTranscribe")) {
+    listeners.onStartTranscribe = () => emit("start-transcribe");
+  }
+  if (hasListener("onCancelTranscribe")) {
+    listeners.onCancelTranscribe = () => emit("cancel-transcribe");
+  }
+  if (hasListener("onFinishTranscribe")) {
+    listeners.onFinishTranscribe = () => emit("finish-transcribe");
+  }
+
+  return listeners;
+});
+
+const internalBindings = computed(() => ({
+  ...attrs,
+  ...internalProps.value,
+  ...forwardedEventListeners.value,
+}));
+</script>
+
+<template>
+  <CopilotChatConfigurationProvider :is-modal-default-open="defaultOpen">
+    <CopilotPopupViewInternal v-bind="internalBindings">
+      <template v-if="$slots.header" #header="slotProps">
+        <slot name="header" v-bind="slotProps" />
+      </template>
+
+      <template v-if="$slots['toggle-button']" #toggle-button="slotProps">
+        <slot name="toggle-button" v-bind="slotProps" />
+      </template>
+
+      <template v-if="$slots['message-view']" #message-view="slotProps">
+        <slot name="message-view" v-bind="slotProps" />
+      </template>
+
+      <template v-if="$slots['scroll-view']" #scroll-view="slotProps">
+        <slot name="scroll-view" v-bind="slotProps" />
+      </template>
+
+      <template v-if="$slots.feather" #feather="slotProps">
+        <slot name="feather" v-bind="slotProps" />
+      </template>
+
+      <template
+        v-if="$slots['scroll-to-bottom-button']"
+        #scroll-to-bottom-button="slotProps"
+      >
+        <slot name="scroll-to-bottom-button" v-bind="slotProps" />
+      </template>
+
+      <template v-if="$slots.input" #input="slotProps">
+        <slot name="input" v-bind="slotProps" />
+      </template>
+
+      <template v-if="$slots['suggestion-view']" #suggestion-view="slotProps">
+        <slot name="suggestion-view" v-bind="slotProps" />
+      </template>
+
+      <template v-if="$slots['welcome-screen']" #welcome-screen="slotProps">
+        <slot name="welcome-screen" v-bind="slotProps" />
+      </template>
+
+      <template v-if="$slots['welcome-message']" #welcome-message>
+        <slot name="welcome-message" />
+      </template>
+    </CopilotPopupViewInternal>
+  </CopilotChatConfigurationProvider>
+</template>