@copilotkit/vue 1.57.1

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

@@ -0,0 +1,247 @@
+<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";
+
+const props = withDefaults(
+  defineProps<{
+    message: ReasoningMessage;
+    messages?: Message[];
+    isRunning?: boolean;
+  }>(),
+  {
+    messages: () => [],
+    isRunning: false,
+  },
+);
+
+defineSlots<{
+  layout?: (props: {
+    message: ReasoningMessage;
+    messages: Message[];
+    isRunning: boolean;
+    header: {
+      isOpen: boolean;
+      label: string;
+      hasContent: boolean;
+      isStreaming: boolean;
+      onClick?: () => void;
+    };
+    contentView: {
+      isStreaming: boolean;
+      hasContent: boolean;
+      content: string;
+    };
+    toggle: {
+      isOpen: boolean;
+      contentView: {
+        isStreaming: boolean;
+        hasContent: boolean;
+        content: string;
+      };
+    };
+  }) => unknown;
+  header?: (props: {
+    isOpen: boolean;
+    label: string;
+    hasContent: boolean;
+    isStreaming: boolean;
+    onClick?: () => void;
+  }) => unknown;
+  "content-view"?: (props: {
+    isStreaming: boolean;
+    hasContent: boolean;
+    content: string;
+  }) => unknown;
+  toggle?: (props: {
+    isOpen: boolean;
+    contentView: {
+      isStreaming: boolean;
+      hasContent: boolean;
+      content: string;
+    };
+  }) => unknown;
+}>();
+
+function formatDuration(seconds: number): string {
+  if (seconds < 1) return "a few seconds";
+  if (seconds < 60) return `${Math.round(seconds)} seconds`;
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.round(seconds % 60);
+  if (secs === 0) return `${mins} minute${mins > 1 ? "s" : ""}`;
+  return `${mins}m ${secs}s`;
+}
+
+const normalizedContent = computed(() =>
+  typeof props.message.content === "string" ? props.message.content : "",
+);
+const hasContent = computed(() => normalizedContent.value.length > 0);
+const isLatest = computed(
+  () => props.messages[props.messages.length - 1]?.id === props.message.id,
+);
+const isStreaming = computed(() => !!(props.isRunning && isLatest.value));
+
+const elapsed = ref(0);
+const isOpen = ref(isStreaming.value);
+const userToggledDuringStreaming = ref(false);
+let startTimeMs: number | null = null;
+let elapsedInterval: ReturnType<typeof setInterval> | null = null;
+
+function clearElapsedInterval() {
+  if (elapsedInterval) {
+    clearInterval(elapsedInterval);
+    elapsedInterval = null;
+  }
+}
+
+function updateElapsedNow() {
+  if (startTimeMs !== null) {
+    elapsed.value = (Date.now() - startTimeMs) / 1000;
+  }
+}
+
+watch(
+  isStreaming,
+  (nextIsStreaming) => {
+    if (nextIsStreaming) {
+      if (startTimeMs === null) {
+        startTimeMs = Date.now();
+      }
+      clearElapsedInterval();
+      elapsedInterval = setInterval(updateElapsedNow, 1000);
+      userToggledDuringStreaming.value = false;
+      isOpen.value = true;
+      return;
+    }
+
+    clearElapsedInterval();
+    updateElapsedNow();
+    if (!userToggledDuringStreaming.value) {
+      isOpen.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  clearElapsedInterval();
+});
+
+const label = computed(() =>
+  isStreaming.value
+    ? "Thinking…"
+    : `Thought for ${formatDuration(elapsed.value)}`,
+);
+
+function toggleOpen() {
+  if (!hasContent.value) return;
+  userToggledDuringStreaming.value = true;
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <div data-copilotkit class="cpk:my-1" :data-message-id="message.id">
+    <slot
+      name="layout"
+      :message="message"
+      :messages="messages"
+      :is-running="isRunning"
+      :header="{
+        isOpen,
+        label,
+        hasContent,
+        isStreaming,
+        onClick: hasContent ? toggleOpen : undefined,
+      }"
+      :content-view="{
+        isStreaming,
+        hasContent,
+        content: normalizedContent,
+      }"
+      :toggle="{
+        isOpen,
+        contentView: {
+          isStreaming,
+          hasContent,
+          content: normalizedContent,
+        },
+      }"
+    >
+      <slot
+        name="header"
+        :is-open="isOpen"
+        :label="label"
+        :has-content="hasContent"
+        :is-streaming="isStreaming"
+        :on-click="hasContent ? toggleOpen : undefined"
+      >
+        <button
+          type="button"
+          class="cpk:inline-flex cpk:items-center cpk:gap-1 cpk:py-1 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:select-none"
+          :class="
+            hasContent
+              ? 'cpk:hover:text-foreground cpk:cursor-pointer'
+              : 'cpk:cursor-default'
+          "
+          :aria-expanded="hasContent ? isOpen : undefined"
+          @click="hasContent ? toggleOpen() : undefined"
+        >
+          <span class="cpk:font-medium">{{ label }}</span>
+          <span
+            v-if="isStreaming && !hasContent"
+            class="cpk:inline-flex cpk:items-center cpk:ml-1"
+          >
+            <span
+              class="cpk:w-1.5 cpk:h-1.5 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse"
+            />
+          </span>
+          <IconChevronRight
+            v-if="hasContent"
+            class="cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200"
+            :class="{ 'cpk:rotate-90': isOpen }"
+          />
+        </button>
+      </slot>
+
+      <slot
+        name="toggle"
+        :is-open="isOpen"
+        :content-view="{
+          isStreaming,
+          hasContent,
+          content: normalizedContent,
+        }"
+      >
+        <div
+          class="cpk:grid cpk:transition-[grid-template-rows] cpk:duration-200 cpk:ease-in-out"
+          :style="{ gridTemplateRows: isOpen ? '1fr' : '0fr' }"
+        >
+          <div class="cpk:overflow-hidden">
+            <slot
+              name="content-view"
+              :is-streaming="isStreaming"
+              :has-content="hasContent"
+              :content="normalizedContent"
+            >
+              <div v-if="hasContent || isStreaming" class="cpk:pb-2 cpk:pt-1">
+                <div class="cpk:text-sm cpk:text-muted-foreground">
+                  <StreamMarkdown :content="normalizedContent" />
+                  <span
+                    v-if="isStreaming && hasContent"
+                    class="cpk:inline-flex cpk:items-center cpk:ml-1 cpk:align-middle"
+                  >
+                    <span
+                      class="cpk:w-2 cpk:h-2 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse-cursor"
+                    />
+                  </span>
+                </div>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </slot>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { Component } from "vue";
+import { computed } from "vue";
+import { IconLoader2 } from "../icons";
+
+const props = withDefaults(
+  defineProps<{
+    icon?: Component;
+    isLoading?: boolean;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+  }>(),
+  {
+    icon: undefined,
+    isLoading: false,
+    disabled: false,
+    type: "button",
+  },
+);
+
+const isDisabled = computed(() => props.isLoading || props.disabled);
+</script>
+
+<template>
+  <button
+    data-copilotkit
+    data-slot="suggestion-pill"
+    data-testid="copilot-chat-suggestion-pill"
+    :type="type"
+    :aria-busy="isLoading ? 'true' : undefined"
+    :disabled="isDisabled"
+    class="cpk:group cpk:inline-flex cpk:h-7 cpk:w-fit cpk:items-center cpk:gap-1 cpk:rounded-full cpk:border cpk:border-border/60 cpk:bg-background cpk:px-2.5 cpk:text-[11px] cpk:leading-none cpk:text-foreground cpk:transition-colors cpk:cursor-pointer cpk:hover:bg-accent/60 cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background cpk:disabled:cursor-not-allowed cpk:disabled:text-muted-foreground cpk:disabled:hover:bg-background cpk:disabled:hover:text-muted-foreground cpk:pointer-events-auto cpk:sm:h-8 cpk:sm:gap-1.5 cpk:sm:px-3 cpk:sm:text-xs"
+    v-bind="$attrs"
+  >
+    <span
+      v-if="isLoading"
+      class="cpk:flex cpk:h-3.5 cpk:w-3.5 cpk:items-center cpk:justify-center cpk:text-muted-foreground cpk:sm:h-4 cpk:sm:w-4"
+    >
+      <IconLoader2
+        class="cpk:h-3.5 cpk:w-3.5 cpk:animate-spin cpk:sm:h-4 cpk:sm:w-4"
+        aria-hidden="true"
+      />
+    </span>
+    <span
+      v-else-if="$slots.icon || icon"
+      class="cpk:flex cpk:h-3.5 cpk:w-3.5 cpk:items-center cpk:justify-center cpk:text-muted-foreground cpk:sm:h-4 cpk:sm:w-4"
+    >
+      <slot name="icon">
+        <component :is="icon" />
+      </slot>
+    </span>
+    <span class="cpk:whitespace-nowrap cpk:font-medium cpk:leading-none">
+      <slot />
+    </span>
+  </button>
+</template>

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import type { Suggestion } from "@copilotkit/core";
+import CopilotChatSuggestionPill from "./CopilotChatSuggestionPill.vue";
+import type {
+  CopilotChatSuggestionViewContainerSlotProps,
+  CopilotChatSuggestionViewLayoutSlotProps,
+  CopilotChatSuggestionViewSuggestionSlotProps,
+} from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    suggestions: Suggestion[];
+    loadingIndexes?: ReadonlyArray<number>;
+  }>(),
+  {
+    loadingIndexes: () => [],
+  },
+);
+
+defineSlots<{
+  suggestion?: (props: CopilotChatSuggestionViewSuggestionSlotProps) => unknown;
+  container?: (props: CopilotChatSuggestionViewContainerSlotProps) => unknown;
+  layout?: (props: CopilotChatSuggestionViewLayoutSlotProps) => unknown;
+}>();
+
+const emit = defineEmits<{
+  "select-suggestion": [suggestion: Suggestion, index: number];
+}>();
+
+const attrs = useAttrs();
+const loadingSet = computed(() => new Set(props.loadingIndexes));
+const containerClass = computed(() => [
+  "cpk:flex cpk:flex-wrap cpk:items-center cpk:gap-1.5 cpk:pl-0 cpk:pr-4 cpk:pointer-events-none cpk:sm:gap-2 cpk:sm:px-0",
+  attrs.class,
+]);
+const containerAttrs = computed(() => {
+  const { class: _className, ...rest } = attrs;
+  return rest;
+});
+
+function isLoading(index: number, suggestion: Suggestion) {
+  return loadingSet.value.has(index) || suggestion.isLoading === true;
+}
+
+function handleSelectSuggestion(suggestion: Suggestion, index: number) {
+  emit("select-suggestion", suggestion, index);
+}
+
+const slotProps = computed<CopilotChatSuggestionViewContainerSlotProps>(() => ({
+  suggestions: props.suggestions,
+  loadingIndexes: props.loadingIndexes,
+  onSelectSuggestion: handleSelectSuggestion,
+  containerClass: containerClass.value,
+  containerAttrs: containerAttrs.value as Record<string, unknown>,
+}));
+</script>
+
+<template>
+  <slot name="layout" v-bind="slotProps">
+    <slot name="container" v-bind="slotProps">
+      <div
+        data-copilotkit
+        data-testid="copilot-chat-suggestion-view"
+        :class="containerClass"
+        v-bind="containerAttrs"
+      >
+        <template
+          v-for="(suggestion, index) in suggestions"
+          :key="`${suggestion.title}-${index}`"
+        >
+          <slot
+            name="suggestion"
+            :suggestion="suggestion"
+            :index="index"
+            :is-loading="isLoading(index, suggestion)"
+            :on-select="() => handleSelectSuggestion(suggestion, index)"
+          >
+            <CopilotChatSuggestionPill
+              :is-loading="isLoading(index, suggestion)"
+              type="button"
+              @click="handleSelectSuggestion(suggestion, index)"
+            >
+              {{ suggestion.title }}
+            </CopilotChatSuggestionPill>
+          </slot>
+        </template>
+      </div>
+    </slot>
+  </slot>
+</template>

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

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed, ref, useAttrs } from "vue";
+import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
+import { CopilotChatDefaultLabels } from "../../providers/types";
+import CopilotChatToggleButtonCloseIcon from "./CopilotChatToggleButtonCloseIcon";
+import CopilotChatToggleButtonOpenIcon from "./CopilotChatToggleButtonOpenIcon";
+import type {
+  CopilotChatToggleButtonIconSlotProps,
+  CopilotChatToggleButtonProps,
+} from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<CopilotChatToggleButtonProps>(), {
+  disabled: false,
+  type: "button",
+});
+
+defineSlots<{
+  "open-icon"?: (props: CopilotChatToggleButtonIconSlotProps) => unknown;
+  "close-icon"?: (props: CopilotChatToggleButtonIconSlotProps) => unknown;
+}>();
+
+const attrs = useAttrs();
+const config = useCopilotChatConfiguration();
+const fallbackOpen = ref(false);
+
+const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const isOpen = computed(() => config.value?.isModalOpen ?? fallbackOpen.value);
+const ariaLabel = computed(() =>
+  isOpen.value
+    ? labels.value.chatToggleCloseLabel
+    : labels.value.chatToggleOpenLabel,
+);
+const buttonClass = computed(() => [
+  "cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center",
+  "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground",
+  "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out",
+  "cpk:hover:scale-[1.04] cpk:hover:shadow-md cpk:cursor-pointer cpk:active:scale-[0.96]",
+  "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background",
+  "cpk:disabled:pointer-events-none cpk:disabled:opacity-60",
+  attrs.class,
+]);
+const buttonAttrs = computed(() => {
+  const { class: _className, onClick: _onClick, ...rest } = attrs;
+  return rest;
+});
+
+const iconClass = "cpk:h-6 cpk:w-6";
+const iconTransitionStyle = Object.freeze({
+  transition:
+    "opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)",
+});
+const iconWrapperBase =
+  "cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform";
+
+function setModalOpen(open: boolean) {
+  if (config.value?.setModalOpen) {
+    config.value.setModalOpen(open);
+    return;
+  }
+  fallbackOpen.value = open;
+}
+
+function getClickListeners() {
+  const listener = attrs.onClick;
+  if (Array.isArray(listener)) {
+    return listener.filter(
+      (item): item is (event: MouseEvent) => void => typeof item === "function",
+    );
+  }
+  return typeof listener === "function"
+    ? [listener as (event: MouseEvent) => void]
+    : [];
+}
+
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+
+  for (const listener of getClickListeners()) {
+    listener(event);
+  }
+
+  if (event.defaultPrevented) {
+    return;
+  }
+
+  setModalOpen(!isOpen.value);
+}
+</script>
+
+<template>
+  <button
+    data-copilotkit
+    :type="type"
+    data-slot="chat-toggle-button"
+    :data-state="isOpen ? 'open' : 'closed'"
+    :class="buttonClass"
+    :aria-label="ariaLabel"
+    :aria-pressed="isOpen"
+    :disabled="disabled"
+    v-bind="buttonAttrs"
+    @click="handleClick"
+  >
+    <span
+      aria-hidden="true"
+      data-slot="chat-toggle-button-open-icon"
+      :class="iconWrapperBase"
+      :style="{
+        ...iconTransitionStyle,
+        opacity: isOpen ? 0 : 1,
+        transform: `scale(${isOpen ? 0.75 : 1}) rotate(${isOpen ? 90 : 0}deg)`,
+      }"
+    >
+      <slot name="open-icon" :icon-class="iconClass" :is-open="isOpen">
+        <CopilotChatToggleButtonOpenIcon
+          :class="iconClass"
+          aria-hidden="true"
+          :focusable="false"
+        />
+      </slot>
+    </span>
+
+    <span
+      aria-hidden="true"
+      data-slot="chat-toggle-button-close-icon"
+      :class="iconWrapperBase"
+      :style="{
+        ...iconTransitionStyle,
+        opacity: isOpen ? 1 : 0,
+        transform: `scale(${isOpen ? 1 : 0.75}) rotate(${isOpen ? 0 : -90}deg)`,
+      }"
+    >
+      <slot name="close-icon" :icon-class="iconClass" :is-open="isOpen">
+        <CopilotChatToggleButtonCloseIcon
+          :class="iconClass"
+          aria-hidden="true"
+          :focusable="false"
+        />
+      </slot>
+    </span>
+  </button>
+</template>

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

@@ -0,0 +1,17 @@
+import { defineComponent, h } from "vue";
+import { IconX } from "../icons";
+
+export default defineComponent({
+  name: "CopilotChatToggleButtonCloseIcon",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    return () => {
+      const { class: className, ...rest } = attrs as Record<string, unknown>;
+      return h(IconX, {
+        ...rest,
+        class: ["cpk:h-6 cpk:w-6", className],
+        strokeWidth: 1.75,
+      });
+    };
+  },
+});

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

@@ -0,0 +1,18 @@
+import { defineComponent, h } from "vue";
+import { IconMessageCircle } from "../icons";
+
+export default defineComponent({
+  name: "CopilotChatToggleButtonOpenIcon",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    return () => {
+      const { class: className, ...rest } = attrs as Record<string, unknown>;
+      return h(IconMessageCircle, {
+        ...rest,
+        class: ["cpk:h-6 cpk:w-6", className],
+        strokeWidth: 1.75,
+        fill: "currentColor",
+      });
+    };
+  },
+});