@copilotkit/vue 1.57.1

package/src/v2/components/chat/__tests__/normalize-auto-scroll.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import {
+  normalizeAutoScroll,
+  type AutoScrollMode,
+} from "../normalize-auto-scroll";
+
+// Strict counterpart of React `normalize-auto-scroll.test.ts`.
+// Keep case order and wording aligned 1:1 with the React suite.
+describe("normalizeAutoScroll", () => {
+  it("returns 'pin-to-bottom' for undefined (default)", () => {
+    expect(normalizeAutoScroll(undefined)).toBe("pin-to-bottom");
+  });
+
+  it("maps true -> 'pin-to-bottom'", () => {
+    expect(normalizeAutoScroll(true)).toBe("pin-to-bottom");
+  });
+
+  it("maps false -> 'none'", () => {
+    expect(normalizeAutoScroll(false)).toBe("none");
+  });
+
+  it("passes 'pin-to-bottom' through", () => {
+    expect(normalizeAutoScroll("pin-to-bottom")).toBe("pin-to-bottom");
+  });
+
+  it("passes 'pin-to-send' through", () => {
+    expect(normalizeAutoScroll("pin-to-send")).toBe("pin-to-send");
+  });
+
+  it("passes 'none' through", () => {
+    expect(normalizeAutoScroll("none")).toBe("none");
+  });
+
+  it("falls back to 'pin-to-bottom' for unknown strings", () => {
+    expect(normalizeAutoScroll("bogus" as AutoScrollMode)).toBe(
+      "pin-to-bottom",
+    );
+  });
+});

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

@@ -0,0 +1,15 @@
+export type AudioRecorderState = "idle" | "recording" | "processing";
+
+export class AudioRecorderError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "AudioRecorderError";
+  }
+}
+
+export interface CopilotChatAudioRecorderRef {
+  state: AudioRecorderState;
+  start: () => Promise<void>;
+  stop: () => Promise<Blob>;
+  dispose: () => void;
+}

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

@@ -0,0 +1,52 @@
+export * from "./types";
+export { default as CopilotChatAssistantMessage } from "./CopilotChatAssistantMessage.vue";
+export { default as CopilotChatAudioRecorder } from "./CopilotChatAudioRecorder.vue";
+import _CopilotChat from "./CopilotChat.vue";
+import _CopilotChatView from "./CopilotChatView.vue";
+export { default as CopilotChatInput } from "./CopilotChatInput.vue";
+export { default as CopilotChatAttachmentQueue } from "./CopilotChatAttachmentQueue.vue";
+export { default as CopilotChatAttachmentRenderer } from "./CopilotChatAttachmentRenderer.vue";
+export { default as CopilotChatMessageView } from "./CopilotChatMessageView.vue";
+export { default as CopilotChatReasoningMessage } from "./CopilotChatReasoningMessage.vue";
+export { default as CopilotChatSuggestionPill } from "./CopilotChatSuggestionPill.vue";
+export { default as CopilotChatSuggestionView } from "./CopilotChatSuggestionView.vue";
+export { default as CopilotChatToolCallsView } from "./CopilotChatToolCallsView.vue";
+export { default as CopilotChatUserMessage } from "./CopilotChatUserMessage.vue";
+export { default as CopilotChatView } from "./CopilotChatView.vue";
+import _CopilotChatToggleButton from "./CopilotChatToggleButton.vue";
+import CopilotChatToggleButtonCloseIcon from "./CopilotChatToggleButtonCloseIcon";
+import CopilotChatToggleButtonOpenIcon from "./CopilotChatToggleButtonOpenIcon";
+import _CopilotModalHeader from "./CopilotModalHeader.vue";
+import CopilotModalHeaderCloseButton from "./CopilotModalHeaderCloseButton";
+import CopilotModalHeaderTitle from "./CopilotModalHeaderTitle";
+import _CopilotPopupView from "./CopilotPopupView.vue";
+import CopilotPopupWelcomeScreen from "./CopilotPopupWelcomeScreen.vue";
+import _CopilotSidebarView from "./CopilotSidebarView.vue";
+import CopilotSidebarWelcomeScreen from "./CopilotSidebarWelcomeScreen.vue";
+
+export const CopilotChat = Object.assign(_CopilotChat, {
+  View: _CopilotChatView,
+});
+
+export const CopilotChatToggleButton = Object.assign(_CopilotChatToggleButton, {
+  OpenIcon: CopilotChatToggleButtonOpenIcon,
+  CloseIcon: CopilotChatToggleButtonCloseIcon,
+});
+
+export { CopilotChatToggleButtonOpenIcon, CopilotChatToggleButtonCloseIcon };
+
+export const CopilotModalHeader = Object.assign(_CopilotModalHeader, {
+  Title: CopilotModalHeaderTitle,
+  CloseButton: CopilotModalHeaderCloseButton,
+});
+
+export const CopilotPopupView = Object.assign(_CopilotPopupView, {
+  WelcomeScreen: CopilotPopupWelcomeScreen,
+});
+
+export { default as CopilotPopup } from "./CopilotPopup.vue";
+export { default as CopilotSidebar } from "./CopilotSidebar.vue";
+
+export const CopilotSidebarView = Object.assign(_CopilotSidebarView, {
+  WelcomeScreen: CopilotSidebarWelcomeScreen,
+});

package/src/v2/components/chat/last-user-message-context.ts

@@ -0,0 +1,39 @@
+import type { InjectionKey, Ref } from "vue";
+import { ref } from "vue";
+
+/**
+ * Vue counterpart of React's `LastUserMessageContext`.
+ *
+ * Used by `CopilotChatView` to announce the latest user message
+ * to descendants (notably `usePinToSend`), so scroll logic can anchor
+ * the viewport to the most recent user turn in "pin-to-send" mode.
+ *
+ * `sendNonce` increments on each new send so repeated IDs (e.g., message
+ * edits that preserve the ID) still trigger dependent effects.
+ *
+ * Vue divergence: React exposes a `React.Context` whose value is replaced
+ * via `<Provider value={...}>`. Vue idiomatically provides a `Ref` so
+ * descendant `watch` effects fire when the value changes; the underlying
+ * `{ id, sendNonce }` shape and semantics match React 1:1.
+ */
+export type LastUserMessageState = {
+  id: string | null;
+  sendNonce: number;
+};
+
+export const DEFAULT_LAST_USER_MESSAGE_STATE: LastUserMessageState = {
+  id: null,
+  sendNonce: 0,
+};
+
+export const LastUserMessageKey: InjectionKey<Ref<LastUserMessageState>> =
+  Symbol("LastUserMessage");
+
+/**
+ * Returns the default `LastUserMessageState` ref used when no provider
+ * has been mounted above the consumer. Mirrors React's context default
+ * value (`{ id: null, sendNonce: 0 }`).
+ */
+export function createDefaultLastUserMessageRef(): Ref<LastUserMessageState> {
+  return ref({ ...DEFAULT_LAST_USER_MESSAGE_STATE });
+}

package/src/v2/components/chat/normalize-auto-scroll.ts

@@ -0,0 +1,17 @@
+export type AutoScrollMode = "pin-to-bottom" | "pin-to-send" | "none";
+
+const VALID: readonly AutoScrollMode[] = [
+  "pin-to-bottom",
+  "pin-to-send",
+  "none",
+];
+
+export function normalizeAutoScroll(
+  value: AutoScrollMode | boolean | undefined,
+): AutoScrollMode {
+  if (value === undefined) return "pin-to-bottom";
+  if (value === true) return "pin-to-bottom";
+  if (value === false) return "none";
+  if ((VALID as readonly string[]).includes(value)) return value;
+  return "pin-to-bottom";
+}

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

@@ -0,0 +1,481 @@
+import type {
+  AssistantMessage,
+  Message,
+  ReasoningMessage,
+  ToolCall,
+  ToolMessage,
+  UserMessage,
+} from "@ag-ui/core";
+import type { CopilotKitCoreErrorCode, ToolCallStatus } from "@copilotkit/core";
+import type { Suggestion } from "@copilotkit/core";
+import type {
+  Attachment,
+  AttachmentsConfig,
+  AttachmentModality,
+} from "@copilotkit/shared";
+import type { CopilotChatLabels } from "../../providers/types";
+import type { InterruptEvent } from "../../types";
+import type { AutoScrollMode } from "./normalize-auto-scroll";
+
+export type CopilotChatInputMode = "input" | "transcribe" | "processing";
+export type { Attachment, AttachmentsConfig, AttachmentModality };
+export type { AutoScrollMode };
+
+export interface CopilotChatAttachmentRendererProps {
+  type: AttachmentModality;
+  source: Attachment["source"];
+  filename?: string;
+  className?: string;
+}
+
+export interface CopilotChatAttachmentQueueProps {
+  attachments: Attachment[];
+  className?: string;
+}
+
+export interface CopilotChatViewProps {
+  messages?: Message[];
+  /**
+   * Controls how the chat view scrolls as new messages stream in.
+   *
+   * Accepts the modern `AutoScrollMode` strings or the legacy boolean
+   * shorthand. Defaults to `"pin-to-bottom"` when unspecified.
+   *
+   * - `"pin-to-bottom"` / `true`: stick to the bottom while at the bottom.
+   * - `"pin-to-send"`: anchor the latest user message near the top of
+   *   the viewport while the assistant streams a response (parity with
+   *   React's `usePinToSend`).
+   * - `"none"` / `false`: never auto-scroll.
+   */
+  autoScroll?: AutoScrollMode | boolean;
+  isRunning?: boolean;
+  suggestions?: Suggestion[];
+  suggestionLoadingIndexes?: ReadonlyArray<number>;
+  welcomeScreen?: boolean;
+  attachments?: Attachment[];
+  dragOver?: boolean;
+  inputValue?: string;
+  inputMode?: CopilotChatInputMode;
+  inputToolsMenu?: (ToolsMenuItem | "-")[];
+  /**
+   * When `true`, suppresses the welcome screen while a thread's initial
+   * connect is in flight. Prevents the "How can I help you today?" flash
+   * that would otherwise appear between mounting an empty cloned agent and
+   * the bootstrap messages arriving from `/connect`.
+   */
+  isConnecting?: boolean;
+  /**
+   * When `true`, the caller has explicitly picked a thread (via `threadId`
+   * prop or `CopilotChatConfigurationProvider`). Suppresses the welcome
+   * screen unconditionally — a caller-managed thread targets a specific
+   * conversation and should render its messages (or an empty panel during
+   * connect) rather than a generic "start a new chat" greeting.
+   */
+  hasExplicitThreadId?: boolean;
+  onRemoveAttachment?: (id: string) => void;
+  onAddFile?: () => void;
+  onDragOver?: (event: DragEvent) => void;
+  onDragLeave?: (event: DragEvent) => void;
+  onDrop?: (event: DragEvent) => void;
+  onFinishTranscribeWithAudio?: (audioBlob: Blob) => void | Promise<void>;
+}
+
+export interface CopilotChatProps extends Omit<
+  CopilotChatViewProps,
+  | "messages"
+  | "isRunning"
+  | "suggestions"
+  | "suggestionLoadingIndexes"
+  | "attachments"
+  | "onRemoveAttachment"
+  | "onAddFile"
+  | "dragOver"
+  | "onDragOver"
+  | "onDragLeave"
+  | "onDrop"
+> {
+  agentId?: string;
+  threadId?: string;
+  throttleMs?: number;
+  labels?: Partial<CopilotChatLabels>;
+  attachments?: AttachmentsConfig;
+  onError?: (event: {
+    error: Error;
+    code: CopilotKitCoreErrorCode;
+    context: Record<string, any>;
+  }) => void | Promise<void>;
+}
+
+export interface CopilotChatViewOverrideSlotProps extends CopilotChatViewProps {
+  onSubmitMessage: (value: string) => void | Promise<void>;
+  onStop?: () => void;
+  onInputChange: (value: string) => void;
+  onSelectSuggestion: (
+    suggestion: Suggestion,
+    index: number,
+  ) => void | Promise<void>;
+  onAddFile?: () => void;
+  onStartTranscribe?: () => void;
+  onCancelTranscribe?: () => void;
+  onFinishTranscribe?: () => void;
+  onFinishTranscribeWithAudio?: (audioBlob: Blob) => void | Promise<void>;
+}
+
+export interface CopilotChatMessageViewSlotProps {
+  messages: Message[];
+  isRunning: boolean;
+}
+
+export interface CopilotChatScrollToBottomButtonSlotProps {
+  onClick: () => void;
+}
+
+export interface CopilotChatFeatherSlotProps {}
+
+export interface CopilotChatScrollViewSlotProps
+  extends CopilotChatMessageViewSlotProps, CopilotChatSuggestionViewSlotProps {
+  messagePaddingBottom: string;
+  showScrollToBottomButton: boolean;
+  onScroll: () => void;
+  scrollToBottom: () => void;
+}
+
+export interface CopilotChatInterruptSlotProps<
+  TValue = unknown,
+  TResult = unknown,
+> {
+  event: InterruptEvent<TValue>;
+  result: TResult;
+  resolve: (response: unknown) => void;
+}
+
+export interface CopilotChatInputSlotProps {
+  modelValue: string;
+  isRunning: boolean;
+  inputMode: CopilotChatInputMode;
+  inputToolsMenu: (ToolsMenuItem | "-")[];
+  onUpdateModelValue: (value: string) => void;
+  onSubmitMessage: (value: string) => void;
+  onStop?: () => void;
+  onAddFile: () => void;
+  onStartTranscribe: () => void;
+  onCancelTranscribe: () => void;
+  onFinishTranscribe: () => void;
+  onFinishTranscribeWithAudio: (audioBlob: Blob) => void | Promise<void>;
+}
+
+export interface CopilotChatSuggestionViewSlotProps {
+  suggestions: Suggestion[];
+  loadingIndexes: ReadonlyArray<number>;
+  onSelectSuggestion: (suggestion: Suggestion, index: number) => void;
+}
+
+export interface CopilotChatSuggestionViewSuggestionSlotProps {
+  suggestion: Suggestion;
+  index: number;
+  isLoading: boolean;
+  onSelect: () => void;
+}
+
+export interface CopilotChatSuggestionViewContainerSlotProps extends CopilotChatSuggestionViewSlotProps {
+  containerClass: unknown[];
+  containerAttrs: Record<string, unknown>;
+}
+
+export interface CopilotChatSuggestionViewLayoutSlotProps extends CopilotChatSuggestionViewContainerSlotProps {}
+
+export interface CopilotChatWelcomeScreenSlotProps extends CopilotChatSuggestionViewSlotProps {
+  modelValue: string;
+  isRunning: boolean;
+  inputMode: CopilotChatInputMode;
+  inputToolsMenu: (ToolsMenuItem | "-")[];
+  onUpdateModelValue: (value: string) => void;
+  onSubmitMessage: (value: string) => void;
+  onStop?: () => void;
+  onAddFile: () => void;
+  onStartTranscribe: () => void;
+  onCancelTranscribe: () => void;
+  onFinishTranscribe: () => void;
+  onFinishTranscribeWithAudio: (audioBlob: Blob) => void | Promise<void>;
+}
+
+export type ToolsMenuItem = {
+  label: string;
+} & (
+  | {
+      action: () => void;
+      items?: never;
+    }
+  | {
+      action?: never;
+      items: (ToolsMenuItem | "-")[];
+    }
+);
+
+export interface CopilotChatUserMessageOnEditMessageProps {
+  message: UserMessage;
+}
+
+export interface CopilotChatUserMessageOnSwitchToBranchProps {
+  message: UserMessage;
+  branchIndex: number;
+  numberOfBranches: number;
+}
+
+export interface CopilotChatUserMessageMessageRendererSlotProps {
+  message: UserMessage;
+  content: string;
+  isMultiline: boolean;
+}
+
+export interface CopilotChatUserMessageToolbarSlotProps {
+  message: UserMessage;
+  showBranchNavigation: boolean;
+  hasEditAction: boolean;
+}
+
+export interface CopilotChatUserMessageCopyButtonSlotProps {
+  onCopy: () => Promise<void>;
+  copied: boolean;
+  label: string;
+}
+
+export interface CopilotChatUserMessageEditButtonSlotProps {
+  onEdit: () => void;
+  label: string;
+}
+
+export interface CopilotChatUserMessageBranchNavigationSlotProps {
+  branchIndex: number;
+  numberOfBranches: number;
+  canGoPrev: boolean;
+  canGoNext: boolean;
+  goPrev: () => void;
+  goNext: () => void;
+}
+
+export interface CopilotChatUserMessageLayoutSlotProps {
+  message: UserMessage;
+  content: string;
+  isMultiline: boolean;
+  showBranchNavigation: boolean;
+  hasEditAction: boolean;
+  branchIndex: number;
+  numberOfBranches: number;
+  canGoPrev: boolean;
+  canGoNext: boolean;
+  onCopy: () => Promise<void>;
+  onEdit: () => void;
+  goPrev: () => void;
+  goNext: () => void;
+  copied: boolean;
+}
+
+export interface CopilotChatAssistantMessageMessageRendererSlotProps {
+  message: AssistantMessage;
+  content: string;
+}
+
+export interface CopilotChatAssistantMessageToolbarSlotProps {
+  message: AssistantMessage;
+  shouldShowToolbar: boolean;
+}
+
+export interface CopilotChatAssistantMessageCopyButtonSlotProps {
+  onCopy: () => Promise<void>;
+  copied: boolean;
+  label: string;
+}
+
+export interface CopilotChatAssistantMessageThumbsUpButtonSlotProps {
+  onThumbsUp: () => void;
+  label: string;
+}
+
+export interface CopilotChatAssistantMessageThumbsDownButtonSlotProps {
+  onThumbsDown: () => void;
+  label: string;
+}
+
+export interface CopilotChatAssistantMessageReadAloudButtonSlotProps {
+  onReadAloud: () => void;
+  label: string;
+}
+
+export interface CopilotChatAssistantMessageRegenerateButtonSlotProps {
+  onRegenerate: () => void;
+  label: string;
+}
+
+export interface CopilotChatAssistantMessageToolCallsViewSlotProps {
+  message: AssistantMessage;
+  messages: Message[];
+}
+
+export interface CopilotChatAssistantMessageLayoutSlotProps {
+  message: AssistantMessage;
+  content: string;
+  isRunning: boolean;
+  toolbarVisible: boolean;
+  shouldShowToolbar: boolean;
+  messageRenderer: unknown;
+  toolbar: unknown;
+  copyButton: unknown;
+  thumbsUpButton: unknown;
+  thumbsDownButton: unknown;
+  readAloudButton: unknown;
+  regenerateButton: unknown;
+  toolCallsView: unknown;
+  onCopy: () => Promise<void>;
+  onThumbsUp: () => void;
+  onThumbsDown: () => void;
+  onReadAloud: () => void;
+  onRegenerate: () => void;
+}
+
+export interface CopilotChatReasoningMessageHeaderSlotProps {
+  isOpen: boolean;
+  label: string;
+  hasContent: boolean;
+  isStreaming: boolean;
+  onClick?: () => void;
+}
+
+export interface CopilotChatReasoningMessageContentViewSlotProps {
+  isStreaming: boolean;
+  hasContent: boolean;
+  content: string;
+}
+
+export interface CopilotChatReasoningMessageToggleSlotProps {
+  isOpen: boolean;
+  contentView: CopilotChatReasoningMessageContentViewSlotProps;
+}
+
+export interface CopilotChatReasoningMessageLayoutSlotProps {
+  message: ReasoningMessage;
+  messages: Message[];
+  isRunning: boolean;
+  header: CopilotChatReasoningMessageHeaderSlotProps;
+  contentView: CopilotChatReasoningMessageContentViewSlotProps;
+  toggle: CopilotChatReasoningMessageToggleSlotProps;
+}
+
+export interface CopilotChatToolCallRenderSlotProps {
+  name: string;
+  args: unknown;
+  status: ToolCallStatus;
+  result: string | undefined;
+  toolCall: ToolCall;
+  toolMessage: ToolMessage | undefined;
+}
+
+export interface CopilotChatToggleButtonProps {
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+}
+
+export interface CopilotChatToggleButtonIconSlotProps {
+  iconClass: string;
+  isOpen: boolean;
+}
+
+export interface CopilotModalHeaderProps {
+  title?: string;
+}
+
+export interface CopilotModalHeaderTitleContentSlotProps {
+  title: string;
+}
+
+export interface CopilotModalHeaderCloseButtonSlotProps {
+  onClose: () => void;
+}
+
+export interface CopilotModalHeaderLayoutSlotProps {
+  title: string;
+  onClose: () => void;
+}
+
+export interface CopilotSidebarWelcomeScreenInputSlotProps {
+  modelValue: string;
+  isRunning: boolean;
+  inputMode: CopilotChatInputMode;
+  inputToolsMenu: (ToolsMenuItem | "-")[];
+  onUpdateModelValue: (value: string) => void;
+  onSubmitMessage: (value: string) => void;
+  onStop?: () => void;
+  onAddFile?: () => void;
+  onStartTranscribe?: () => void;
+  onCancelTranscribe?: () => void;
+  onFinishTranscribe?: () => void;
+  onFinishTranscribeWithAudio?: (audioBlob: Blob) => void | Promise<void>;
+}
+
+export interface CopilotSidebarWelcomeScreenSuggestionViewSlotProps {
+  suggestions: Suggestion[];
+  loadingIndexes: ReadonlyArray<number>;
+  onSelectSuggestion: (suggestion: Suggestion, index: number) => void;
+}
+
+export interface CopilotSidebarWelcomeScreenLayoutSlotProps
+  extends
+    CopilotSidebarWelcomeScreenInputSlotProps,
+    CopilotSidebarWelcomeScreenSuggestionViewSlotProps {}
+
+export type CopilotSidebarWelcomeScreenProps =
+  CopilotSidebarWelcomeScreenLayoutSlotProps;
+
+export interface CopilotSidebarViewHeaderSlotProps {
+  title: string;
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export interface CopilotSidebarViewToggleButtonSlotProps {
+  isOpen: boolean;
+  toggle: () => void;
+  open: () => void;
+  close: () => void;
+}
+
+export interface CopilotSidebarViewProps extends CopilotChatViewProps {
+  width?: number | string;
+  defaultOpen?: boolean;
+}
+
+export type CopilotPopupViewHeaderSlotProps = CopilotSidebarViewHeaderSlotProps;
+
+export type CopilotPopupViewToggleButtonSlotProps =
+  CopilotSidebarViewToggleButtonSlotProps;
+
+export type CopilotPopupWelcomeScreenInputSlotProps =
+  CopilotSidebarWelcomeScreenInputSlotProps;
+
+export type CopilotPopupWelcomeScreenSuggestionViewSlotProps =
+  CopilotSidebarWelcomeScreenSuggestionViewSlotProps;
+
+export type CopilotPopupWelcomeScreenLayoutSlotProps =
+  CopilotSidebarWelcomeScreenLayoutSlotProps;
+
+export type CopilotPopupWelcomeScreenProps =
+  CopilotPopupWelcomeScreenLayoutSlotProps;
+
+export interface CopilotPopupViewProps extends CopilotChatViewProps {
+  width?: number | string;
+  height?: number | string;
+  clickOutsideToClose?: boolean;
+  defaultOpen?: boolean;
+}
+
+export interface CopilotPopupProps extends CopilotChatProps {
+  width?: number | string;
+  height?: number | string;
+  clickOutsideToClose?: boolean;
+  defaultOpen?: boolean;
+}
+
+export interface CopilotSidebarProps extends CopilotChatProps {
+  width?: number | string;
+  defaultOpen?: boolean;
+}