@aleph-alpha/chat-kit 1.17.3 → 1.18.0

package/dist/components/base/CkModelSelector/CkModelSelector.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CkModelSelector.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/CkModelSelector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,eAAe,MAAM,uBAAuB,CAAC;AASpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAyBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAC;AAoC9C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAGtB,CAAC"}

package/dist/components/base/CkModelSelector/CkModelSelector.vue.d.ts

@@ -0,0 +1,16 @@
+import type { CkModelSelectorProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<CkModelSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selectedModelId": (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<CkModelSelectorProps> & Readonly<{
+    "onUpdate:selectedModelId"?: ((id: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    side: "top" | "right" | "bottom" | "left";
+    sideOffset: number;
+    align: "start" | "center" | "end";
+    models: readonly import("./types").CkModelOption[];
+    selectedModelId: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=CkModelSelector.vue.d.ts.map

package/dist/components/base/CkModelSelector/CkModelSelector.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CkModelSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/CkModelSelector.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAwB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA6Q1E,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/base/CkModelSelector/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CkModelSelector } from './CkModelSelector.vue';
+export type { CkModelOption, CkModelSelectorProps, CkModelSelectorEmits, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/base/CkModelSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

package/dist/components/base/CkModelSelector/types.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Compact dropdown for choosing the active model, sized to sit inline in a
+ * prompt field next to the send button. Controlled component: pass the
+ * available `models` and the `selectedModelId`, and react to
+ * `update:selectedModelId` (so it works with `v-model:selected-model-id`).
+ * Purely presentational — fetching the list and persisting the choice are the
+ * consumer's responsibility.
+ *
+ * @category Actions
+ * @useCases select model, choose LLM, model picker in prompt field, switch model mid-conversation
+ * @keywords model, selector, picker, dropdown, llm, prompt, choose, switch
+ * @related CkPromptInput, CkPromptActionButton
+ */
+export interface CkModelOption {
+    /**
+     * Stable identifier for the model. Emitted on selection and compared
+     * against `selectedModelId` to mark the active row.
+     */
+    id: string;
+    /** Display name shown in the trigger and the option row. */
+    label: string;
+}
+export interface CkModelSelectorProps {
+    /** Models to choose from. The dropdown trigger is still rendered when empty. */
+    models?: readonly CkModelOption[];
+    /** Id of the currently selected model. */
+    selectedModelId?: string | null;
+    /** Disable the trigger (e.g. while a model list is loading). */
+    disabled?: boolean;
+    /**
+     * Which side of the trigger the dropdown opens on.
+     * @default 'top'
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Alignment of the dropdown relative to the trigger.
+     * @default 'end'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Gap in pixels between the trigger and the dropdown.
+     * @default 8
+     */
+    sideOffset?: number;
+}
+/** Emitted events for `CkModelSelector`. */
+export interface CkModelSelectorEmits {
+    /**
+     * Fired with the chosen model id when the selection changes. Pairs with
+     * `v-model:selected-model-id`.
+     */
+    'update:selectedModelId': [id: string];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/base/CkModelSelector/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkModelSelector/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,gFAAgF;IAChF,MAAM,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,4CAA4C;AAC5C,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,wBAAwB,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;CACxC"}

package/dist/components/base/index.d.ts

@@ -16,6 +16,8 @@ export type { CkHistoryWrapperProps } from './CkHistoryWrapper';
 export { CkMarkdownRenderer } from './CkMarkdownRenderer';
 export type { CkMarkdownRendererProps, CkMarkdownElementClasses, } from './CkMarkdownRenderer';
 export { CkMessageActionButton } from './CkMessageActionButton';
+export { CkModelSelector } from './CkModelSelector';
+export type { CkModelOption, CkModelSelectorProps, CkModelSelectorEmits, } from './CkModelSelector';
 export { CkPromptActionButton } from './CkPromptActionButton';
 export { CkPromptStopButton } from './CkPromptStopButton';
 export { CkPromptInput } from './CkPromptInput';

package/dist/components/base/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,WAAW,EACX,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,WAAW,EACX,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
-export { CkAgentMessage, CkConversationLayout, CkCopyMessageActionButton, CkFeedbackButton, CkFeedbackDialog, CkFileItemsList, CkHistoryItem, CkHistoryWrapper, CkMarkdownRenderer, CkMessageActionButton, CkPromptActionButton, CkPromptStopButton, CkPromptInput, CkPromptInputDisclaimer, CkSendIcon, CkStopIcon, CkUserMessage, } from './base';
-export type { CkConversationLayoutProps, CkFeedbackButtonProps, CkFeedbackDialogEmits, CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload, CkFeedbackReason, CkFeedbackSentiment, CkFeedbackValue, CkFileEntry, CkFileItemsListEmits, CkFileItemsListProps, CkHistoryItemEmits, CkHistoryItemProps, CkHistoryWrapperProps, CkMarkdownElementClasses, CkMarkdownRendererProps, CkUserMessageProps, } from './base';
+export { CkAgentMessage, CkConversationLayout, CkCopyMessageActionButton, CkFeedbackButton, CkFeedbackDialog, CkFileItemsList, CkHistoryItem, CkHistoryWrapper, CkMarkdownRenderer, CkMessageActionButton, CkModelSelector, CkPromptActionButton, CkPromptStopButton, CkPromptInput, CkPromptInputDisclaimer, CkSendIcon, CkStopIcon, CkUserMessage, } from './base';
+export type { CkConversationLayoutProps, CkFeedbackButtonProps, CkFeedbackDialogEmits, CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload, CkFeedbackReason, CkFeedbackSentiment, CkFeedbackValue, CkFileEntry, CkFileItemsListEmits, CkFileItemsListProps, CkHistoryItemEmits, CkHistoryItemProps, CkHistoryWrapperProps, CkMarkdownElementClasses, CkMarkdownRendererProps, CkModelOption, CkModelSelectorProps, CkModelSelectorEmits, CkUserMessageProps, } from './base';
 export { CkConversation, CkHistory, CkInput } from './composed';
 export type { CkConversationProps, CkHistoryEmits, CkHistoryProps, } from './composed';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,QAAQ,CAAC;AAChB,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,YAAY,EACV,mBAAmB,EACnB,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,QAAQ,CAAC;AAChB,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,YAAY,EACV,mBAAmB,EACnB,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r } from "../CkInput.vue_vue_type_script_setup_true_lang-DYBCJPBn.js";
+import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s } from "../CkInput.vue_vue_type_script_setup_true_lang-BGlztr2p.js";
 export {
   _ as CkAgentMessage,
   a as CkConversation,
@@ -13,11 +13,12 @@ export {
   i as CkInput,
   j as CkMarkdownRenderer,
   k as CkMessageActionButton,
-  l as CkPromptActionButton,
-  m as CkPromptInput,
-  n as CkPromptInputDisclaimer,
-  o as CkPromptStopButton,
-  p as CkSendIcon,
-  q as CkStopIcon,
-  r as CkUserMessage
+  l as CkModelSelector,
+  m as CkPromptActionButton,
+  n as CkPromptInput,
+  o as CkPromptInputDisclaimer,
+  p as CkPromptStopButton,
+  q as CkSendIcon,
+  r as CkStopIcon,
+  s as CkUserMessage
 };

package/dist/handlers/index.js

@@ -1,5 +1,5 @@
 import { u } from "../useMessageHandler-CMdy-lm0.js";
-import { C, d, p, u as u2, a } from "../useChatKitLabels-BC6ItJc6.js";
+import { C, d, p, u as u2, a } from "../useChatKitLabels-ZutacPad.js";
 export {
   C as CHAT_KIT_LABELS,
   d as defaultChatKitLabels,

package/dist/handlers/useChatKitLabels.d.ts

@@ -67,6 +67,12 @@ export type ChatKitLabels = {
     userMessageShowMore?: string;
     /** Label for the `CkUserMessage` toggle when the message is expanded. */
     userMessageShowLess?: string;
+    /** Accessible label for the `CkModelSelector` trigger button. */
+    modelSelectorAriaLabel?: string;
+    /** Accessible label for the `CkModelSelector` options list. */
+    modelSelectorListAriaLabel?: string;
+    /** Trigger text shown by `CkModelSelector` when no model is selected. */
+    modelSelectorPlaceholder?: string;
     /** Fallback title used by `CkHistory` when a conversation has no `title`. */
     historyItemUntitled: string;
     /** Accessible name for the trailing kebab trigger on each `CkHistory` row. */

package/dist/handlers/useChatKitLabels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChatKitLabels.d.ts","sourceRoot":"","sources":["../../src/handlers/useChatKitLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gDAAgD;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,gEAAgE;IAChE,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,kFAAkF;IAClF,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,qEAAqE;IACrE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qEAAqE;IACrE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,iEAAiE;IACjE,iCAAiC,CAAC,EAAE,MAAM,CAAC;IAC3C,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,0BAA0B,EAAE,MAAM,CAAC;IACnC,uEAAuE;IACvE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,yEAAyE;IACzE,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,EAAE,aA2BlC,CAAC;AAEF,4CAA4C;AAC5C,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,WAAW,CAAC,aAAa,CAAC,CAC1C,CAAC;AAE5B,KAAK,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE5C,yFAAyF;AACzF,KAAK,cAAc,GACf,GAAG,CAAC,aAAa,CAAC,GAClB,WAAW,CAAC,aAAa,CAAC,GAC1B,CAAC,MAAM,aAAa,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAKjE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,WAAW,CAAC,aAAa,CAAC,CAK7D"}
+{"version":3,"file":"useChatKitLabels.d.ts","sourceRoot":"","sources":["../../src/handlers/useChatKitLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG1D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,0CAA0C;IAC1C,cAAc,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gDAAgD;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4FAA4F;IAC5F,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,+DAA+D;IAC/D,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,gEAAgE;IAChE,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,kFAAkF;IAClF,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,qEAAqE;IACrE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qEAAqE;IACrE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,iEAAiE;IACjE,iCAAiC,CAAC,EAAE,MAAM,CAAC;IAC3C,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iEAAiE;IACjE,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,+DAA+D;IAC/D,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,yEAAyE;IACzE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,6EAA6E;IAC7E,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,0BAA0B,EAAE,MAAM,CAAC;IACnC,uEAAuE;IACvE,qBAAqB,EAAE,MAAM,CAAC;IAC9B,yEAAyE;IACzE,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,EAAE,aA8BlC,CAAC;AAEF,4CAA4C;AAC5C,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,WAAW,CAAC,aAAa,CAAC,CAC1C,CAAC;AAE5B,KAAK,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAE5C,yFAAyF;AACzF,KAAK,cAAc,GACf,GAAG,CAAC,aAAa,CAAC,GAClB,WAAW,CAAC,aAAa,CAAC,GAC1B,CAAC,MAAM,aAAa,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAKjE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,WAAW,CAAC,aAAa,CAAC,CAK7D"}

package/dist/index.d.ts

@@ -5,8 +5,8 @@ export { useChat, useConversationSessions, useConversations, } from './composabl
 export type { ChatActions, ChatState, ConversationSession, CreateConversationInput, MessageHandler, MutationOptions, UseChatReturn, UseConversationSessionsReturn, UseConversationsOptions, UseConversationsReturn, } from './composables';
 export { SdkError, createDocumentUploadProvider, defaultDocumentUploadConfig, defaultEndpoints, useDocumentUploadWithDefaultConfig, } from './composables/fileUpload';
 export type { DocumentUploadConfig, DocumentUploadProvider, FileEntry, FileStatus, } from './composables/fileUpload';
-export { CkAgentMessage, CkConversation, CkConversationLayout, CkCopyMessageActionButton, CkFeedbackButton, CkFeedbackDialog, CkFileItemsList, CkHistory, CkHistoryItem, CkHistoryWrapper, CkInput, CkMarkdownRenderer, CkMessageActionButton, CkPromptActionButton, CkPromptStopButton, CkPromptInput, CkPromptInputDisclaimer, CkSendIcon, CkStopIcon, CkUserMessage, } from './components';
-export type { CkConversationLayoutProps, CkConversationProps, CkFeedbackButtonProps, CkFeedbackDialogEmits, CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload, CkFeedbackReason, CkFeedbackSentiment, CkFeedbackValue, CkFileEntry, CkFileItemsListEmits, CkFileItemsListProps, CkHistoryEmits, CkHistoryItemEmits, CkHistoryItemProps, CkHistoryProps, CkHistoryWrapperProps, CkMarkdownElementClasses, CkMarkdownRendererProps, CkUserMessageProps, } from './components';
+export { CkAgentMessage, CkConversation, CkConversationLayout, CkCopyMessageActionButton, CkFeedbackButton, CkFeedbackDialog, CkFileItemsList, CkHistory, CkHistoryItem, CkHistoryWrapper, CkInput, CkMarkdownRenderer, CkMessageActionButton, CkModelSelector, CkPromptActionButton, CkPromptStopButton, CkPromptInput, CkPromptInputDisclaimer, CkSendIcon, CkStopIcon, CkUserMessage, } from './components';
+export type { CkConversationLayoutProps, CkConversationProps, CkFeedbackButtonProps, CkFeedbackDialogEmits, CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload, CkFeedbackReason, CkFeedbackSentiment, CkFeedbackValue, CkFileEntry, CkFileItemsListEmits, CkFileItemsListProps, CkHistoryEmits, CkHistoryItemEmits, CkHistoryItemProps, CkHistoryProps, CkHistoryWrapperProps, CkMarkdownElementClasses, CkMarkdownRendererProps, CkModelOption, CkModelSelectorProps, CkModelSelectorEmits, CkUserMessageProps, } from './components';
 export { formatRelativeTime } from './helpers';
 export type { BaseMessage, Conversation, ConversationTree, MessageContent, MessageContentStatus, MessageMetadata, MessageReasoningContent, MessageRole, MessageStatus, MessageTextContent, MessageToolContent, TreeMessage, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AASpB,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EACL,OAAO,EACP,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,aAAa,EACb,6BAA6B,EAC7B,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,2BAA2B,EAC3B,gBAAgB,EAChB,kCAAkC,GACnC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,SAAS,EACT,UAAU,GACX,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,yBAAyB,EACzB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/C,YAAY,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,GACZ,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AASpB,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EACL,OAAO,EACP,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,aAAa,EACb,6BAA6B,EAC7B,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,2BAA2B,EAC3B,gBAAgB,EAChB,kCAAkC,GACnC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,SAAS,EACT,UAAU,GACX,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,yBAAyB,EACzB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/C,YAAY,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,GACZ,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-CMdy-lm0.js";
-import { C, d, p, u as u2, a } from "./useChatKitLabels-BC6ItJc6.js";
+import { C, d, p, u as u2, a } from "./useChatKitLabels-ZutacPad.js";
 import { S, c, d as d2, a as a2, u as u3, b, e, f } from "./index-Ct5hD214.js";
-import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s } from "./CkInput.vue_vue_type_script_setup_true_lang-DYBCJPBn.js";
+import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t } from "./CkInput.vue_vue_type_script_setup_true_lang-BGlztr2p.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,
@@ -17,19 +17,20 @@ export {
   i as CkInput,
   j as CkMarkdownRenderer,
   k as CkMessageActionButton,
-  l as CkPromptActionButton,
-  m as CkPromptInput,
-  n as CkPromptInputDisclaimer,
-  o as CkPromptStopButton,
-  p2 as CkSendIcon,
-  q as CkStopIcon,
-  r as CkUserMessage,
+  l as CkModelSelector,
+  m as CkPromptActionButton,
+  n as CkPromptInput,
+  o as CkPromptInputDisclaimer,
+  p2 as CkPromptStopButton,
+  q as CkSendIcon,
+  r as CkStopIcon,
+  s as CkUserMessage,
   S as SdkError,
   c as createDocumentUploadProvider,
   d as defaultChatKitLabels,
   d2 as defaultDocumentUploadConfig,
   a2 as defaultEndpoints,
-  s as formatRelativeTime,
+  t as formatRelativeTime,
   p as provideChatKitLabels,
   u3 as useChat,
   u2 as useChatKitLabels,

package/dist/{useChatKitLabels-BC6ItJc6.js → useChatKitLabels-ZutacPad.js}

@@ -12719,6 +12719,9 @@ const defaultChatKitLabels = {
   feedbackDialogSubmitLabel: "Submit",
   userMessageShowMore: "Show more",
   userMessageShowLess: "Show less",
+  modelSelectorAriaLabel: "Select model",
+  modelSelectorListAriaLabel: "Models",
+  modelSelectorPlaceholder: "Select model",
   historyItemUntitled: "Untitled conversation",
   historyItemActionAriaLabel: "Conversation options",
   historyItemEditAction: "Edit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "1.17.3",
+  "version": "1.18.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/base/CkModelSelector/CkModelSelector.spec.ts

@@ -0,0 +1,60 @@
+import { defaultChatKitLabels } from '../../../handlers/useChatKitLabels';
+import CkModelSelector from './CkModelSelector.vue';
+import type { CkModelOption } from './types';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+const PLACEHOLDER = defaultChatKitLabels.modelSelectorPlaceholder!;
+const TRIGGER_LABEL = defaultChatKitLabels.modelSelectorAriaLabel!;
+
+const MODELS: CkModelOption[] = [
+  { id: 'kimi', label: 'Kimi' },
+  { id: 'phoenix', label: 'Phoenix' },
+];
+
+describe('CkModelSelector', () => {
+  it('shows the selected model label on the trigger', () => {
+    render(CkModelSelector, {
+      props: { models: MODELS, selectedModelId: 'phoenix' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: TRIGGER_LABEL }),
+    ).toHaveTextContent('Phoenix');
+  });
+
+  it('falls back to the placeholder when nothing is selected', () => {
+    render(CkModelSelector, {
+      props: { models: MODELS, selectedModelId: null },
+    });
+
+    expect(
+      screen.getByRole('button', { name: TRIGGER_LABEL }),
+    ).toHaveTextContent(PLACEHOLDER);
+  });
+
+  it('emits update:selectedModelId with the chosen id', async () => {
+    const user = userEvent.setup();
+    const { emitted } = render(CkModelSelector, {
+      props: { models: MODELS, selectedModelId: 'phoenix' },
+    });
+
+    await user.click(screen.getByRole('button', { name: TRIGGER_LABEL }));
+    await user.click(await screen.findByRole('option', { name: 'Kimi' }));
+
+    expect(emitted('update:selectedModelId')).toEqual([['kimi']]);
+  });
+
+  it('does not re-emit when the already-selected model is clicked', async () => {
+    const user = userEvent.setup();
+    const { emitted } = render(CkModelSelector, {
+      props: { models: MODELS, selectedModelId: 'phoenix' },
+    });
+
+    await user.click(screen.getByRole('button', { name: TRIGGER_LABEL }));
+    await user.click(await screen.findByRole('option', { name: 'Phoenix' }));
+
+    expect(emitted('update:selectedModelId')).toBeUndefined();
+  });
+});

package/src/components/base/CkModelSelector/CkModelSelector.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import CkModelSelector from './CkModelSelector.vue';
+import type { CkModelOption } from './types';
+
+const MODELS: CkModelOption[] = [
+  { id: 'kimi', label: 'Kimi' },
+  { id: 'phoenix', label: 'Phoenix' },
+  { id: 'phoenix-no-think', label: 'Phoenix (no thinking)' },
+];
+
+const meta: Meta<typeof CkModelSelector> = {
+  title: 'Base/CkModelSelector',
+  component: CkModelSelector,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Compact, controlled model picker for a prompt field. Pass `models` and `selectedModelId`; react to **`update:selectedModelId`** (works with `v-model:selected-model-id`). Presentational only — the consumer fetches the list and persists the choice.',
+      },
+    },
+  },
+  args: {
+    models: MODELS,
+    selectedModelId: 'phoenix',
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    side: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+    align: { control: 'select', options: ['start', 'center', 'end'] },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CkModelSelector>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue';
+import { CkModelSelector, type CkModelOption } from '@aleph-alpha/chat-kit';
+
+const models: CkModelOption[] = [
+  { id: 'kimi', label: 'Kimi' },
+  { id: 'phoenix', label: 'Phoenix' },
+];
+const selectedModelId = ref('phoenix');
+</script>
+
+<template>
+  <CkModelSelector
+    :models="models"
+    v-model:selected-model-id="selectedModelId"
+  />
+</template>`;
+
+const renderStory = (args: Story['args']) => ({
+  components: { CkModelSelector },
+  setup() {
+    const selectedModelId = ref(args?.selectedModelId ?? null);
+    return { args, selectedModelId };
+  },
+  template: `
+    <div class="bg-background-surface-primary p-8">
+      <CkModelSelector
+        v-bind="args"
+        v-model:selected-model-id="selectedModelId"
+      />
+    </div>
+  `,
+});
+
+/**
+ * Default picker with a current selection. Opens upward and aligns to the
+ * end, matching its intended spot next to a send button.
+ */
+export const Default: Story = {
+  render: renderStory,
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * No selection yet — the trigger shows the placeholder label until the user
+ * picks a model.
+ */
+export const Placeholder: Story = {
+  args: { selectedModelId: null },
+  render: renderStory,
+};
+
+/**
+ * Disabled trigger — e.g. while the model list is still loading.
+ */
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: renderStory,
+};

package/src/components/base/CkModelSelector/CkModelSelector.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+  UiIcon,
+  UiPopover,
+  UiPopoverContent,
+  UiPopoverTrigger,
+} from '@aleph-alpha/ui-library';
+
+import {
+  defaultChatKitLabels,
+  useChatKitLabels,
+} from '../../../handlers/useChatKitLabels';
+import type { CkModelSelectorEmits, CkModelSelectorProps } from './types';
+
+defineOptions({ name: 'CkModelSelector' });
+
+const props = withDefaults(defineProps<CkModelSelectorProps>(), {
+  models: () => [],
+  selectedModelId: null,
+  disabled: false,
+  side: 'top',
+  align: 'end',
+  sideOffset: 8,
+});
+
+const emit = defineEmits<CkModelSelectorEmits>();
+
+const labels = useChatKitLabels();
+
+// Resolution order: injected label, English default.
+const triggerAriaLabel = computed(
+  () =>
+    labels.value.modelSelectorAriaLabel ??
+    defaultChatKitLabels.modelSelectorAriaLabel!,
+);
+const listAriaLabel = computed(
+  () =>
+    labels.value.modelSelectorListAriaLabel ??
+    defaultChatKitLabels.modelSelectorListAriaLabel!,
+);
+const placeholderLabel = computed(
+  () =>
+    labels.value.modelSelectorPlaceholder ??
+    defaultChatKitLabels.modelSelectorPlaceholder!,
+);
+
+const open = ref(false);
+
+const selectedLabel = computed(() => {
+  const match = props.models.find((m) => m.id === props.selectedModelId);
+  return match?.label ?? placeholderLabel.value;
+});
+
+function select(id: string) {
+  open.value = false;
+  if (id !== props.selectedModelId) emit('update:selectedModelId', id);
+}
+</script>
+
+<template>
+  <UiPopover v-model:open="open">
+    <UiPopoverTrigger as-child>
+      <button
+        type="button"
+        class="ck-model-selector__trigger inline-flex h-9 shrink-0 items-center gap-1 rounded-3xl px-3 label-14-medium text-content-on-surface-primary outline-none transition-colors hover:bg-background-surface-muted focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        :disabled="disabled"
+        aria-haspopup="listbox"
+        :aria-expanded="open"
+        :aria-label="triggerAriaLabel"
+      >
+        <span class="max-w-[10rem] truncate">{{ selectedLabel }}</span>
+        <UiIcon name="chevron-down" :size="16" aria-hidden="true" />
+      </button>
+    </UiPopoverTrigger>
+    <UiPopoverContent
+      :side="side"
+      :align="align"
+      :side-offset="sideOffset"
+      class="max-h-72 w-56 overflow-y-auto rounded-xl border border-border-surface-default bg-background-surface-floating p-2 text-content-on-surface-primary shadow-md"
+      @open-auto-focus.prevent
+    >
+      <ul
+        class="flex flex-col gap-1"
+        role="listbox"
+        :aria-label="listAriaLabel"
+      >
+        <li v-for="model in models" :key="model.id" role="presentation">
+          <button
+            type="button"
+            role="option"
+            :aria-selected="model.id === selectedModelId"
+            class="relative flex w-full items-center gap-2 rounded-sm py-2 pr-8 pl-3 text-left body-14-regular text-content-on-surface-primary outline-none hover:bg-background-surface-muted-subtle focus-visible:ring-2 focus-visible:ring-ring"
+            @click="select(model.id)"
+          >
+            <span class="min-w-0 flex-1 truncate">{{ model.label }}</span>
+            <UiIcon
+              v-if="model.id === selectedModelId"
+              name="check"
+              :size="16"
+              class="absolute right-2 text-content-on-surface-primary"
+              aria-hidden="true"
+            />
+          </button>
+        </li>
+      </ul>
+    </UiPopoverContent>
+  </UiPopover>
+</template>

package/src/components/base/CkModelSelector/index.ts

@@ -0,0 +1,6 @@
+export { default as CkModelSelector } from './CkModelSelector.vue';
+export type {
+  CkModelOption,
+  CkModelSelectorProps,
+  CkModelSelectorEmits,
+} from './types';

package/src/components/base/CkModelSelector/types.ts

@@ -0,0 +1,55 @@
+/**
+ * Compact dropdown for choosing the active model, sized to sit inline in a
+ * prompt field next to the send button. Controlled component: pass the
+ * available `models` and the `selectedModelId`, and react to
+ * `update:selectedModelId` (so it works with `v-model:selected-model-id`).
+ * Purely presentational — fetching the list and persisting the choice are the
+ * consumer's responsibility.
+ *
+ * @category Actions
+ * @useCases select model, choose LLM, model picker in prompt field, switch model mid-conversation
+ * @keywords model, selector, picker, dropdown, llm, prompt, choose, switch
+ * @related CkPromptInput, CkPromptActionButton
+ */
+export interface CkModelOption {
+  /**
+   * Stable identifier for the model. Emitted on selection and compared
+   * against `selectedModelId` to mark the active row.
+   */
+  id: string;
+  /** Display name shown in the trigger and the option row. */
+  label: string;
+}
+
+export interface CkModelSelectorProps {
+  /** Models to choose from. The dropdown trigger is still rendered when empty. */
+  models?: readonly CkModelOption[];
+  /** Id of the currently selected model. */
+  selectedModelId?: string | null;
+  /** Disable the trigger (e.g. while a model list is loading). */
+  disabled?: boolean;
+  /**
+   * Which side of the trigger the dropdown opens on.
+   * @default 'top'
+   */
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * Alignment of the dropdown relative to the trigger.
+   * @default 'end'
+   */
+  align?: 'start' | 'center' | 'end';
+  /**
+   * Gap in pixels between the trigger and the dropdown.
+   * @default 8
+   */
+  sideOffset?: number;
+}
+
+/** Emitted events for `CkModelSelector`. */
+export interface CkModelSelectorEmits {
+  /**
+   * Fired with the chosen model id when the selection changes. Pairs with
+   * `v-model:selected-model-id`.
+   */
+  'update:selectedModelId': [id: string];
+}

package/src/components/base/index.ts

@@ -32,6 +32,12 @@ export type {
   CkMarkdownElementClasses,
 } from './CkMarkdownRenderer';
 export { CkMessageActionButton } from './CkMessageActionButton';
+export { CkModelSelector } from './CkModelSelector';
+export type {
+  CkModelOption,
+  CkModelSelectorProps,
+  CkModelSelectorEmits,
+} from './CkModelSelector';
 export { CkPromptActionButton } from './CkPromptActionButton';
 export { CkPromptStopButton } from './CkPromptStopButton';
 export { CkPromptInput } from './CkPromptInput';

package/src/components/index.ts

@@ -10,6 +10,7 @@ export {
   CkHistoryWrapper,
   CkMarkdownRenderer,
   CkMessageActionButton,
+  CkModelSelector,
   CkPromptActionButton,
   CkPromptStopButton,
   CkPromptInput,
@@ -35,6 +36,9 @@ export type {
   CkHistoryWrapperProps,
   CkMarkdownElementClasses,
   CkMarkdownRendererProps,
+  CkModelOption,
+  CkModelSelectorProps,
+  CkModelSelectorEmits,
   CkUserMessageProps,
 } from './base';