@aleph-alpha/chat-kit 1.17.2 → 1.18.0

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';
 

package/src/handlers/useChatKitLabels.spec.ts

@@ -34,34 +34,11 @@ describe('useChatKitLabels', () => {
   });
 
   it('returns provided labels when a ref is used', () => {
-    const customLabels = ref<ChatKitLabels>({
-      agentAvatarAlt: 'Bot-Bild',
-      agentLoadingAvatarAlt: 'Bot lädt',
-      inputPlaceholder: 'Nachricht eingeben...',
-      copyMessageAction: 'Nachricht kopieren',
-      copyMessageActionCopied: 'Kopiert',
-      feedbackThumbsUp: 'Gute Antwort',
-      feedbackThumbsDown: 'Schlechte Antwort',
-      feedbackGroup: 'Antwort bewerten',
-      feedbackDialogTitlePositive: 'Positives Feedback geben',
-      feedbackDialogTitleNegative: 'Negatives Feedback geben',
-      feedbackDialogResponseHeading: 'Antwort',
-      feedbackDialogDescription:
-        'Wählen Sie einen Grund und fügen Sie optional einen Kommentar hinzu.',
-      feedbackDialogOtherLabel: 'Sonstiges',
-      feedbackDialogOtherTooltip:
-        'Teilen Sie weitere Details zu dieser Antwort mit.',
-      feedbackDialogFreeTextPlaceholder: 'Zusätzliche Details eingeben',
-      feedbackDialogCancelLabel: 'Abbrechen',
-      feedbackDialogSubmitLabel: 'Senden',
-      userMessageShowMore: 'Mehr anzeigen',
-      userMessageShowLess: 'Weniger anzeigen',
-      historyItemUntitled: 'Unbenannte Konversation',
-      historyItemActionAriaLabel: 'Konversationsoptionen',
-      historyItemEditAction: 'Bearbeiten',
-      historyItemDeleteAction: 'Löschen',
-      historyShowAll: 'Alle anzeigen',
-    });
+    const customLabels = ref<ChatKitLabels>(
+      Object.fromEntries(
+        Object.keys(defaultChatKitLabels).map((key) => [key, `custom:${key}`]),
+      ) as ChatKitLabels,
+    );
 
     let result: ComputedRef<ChatKitLabels> | undefined;
 

package/src/handlers/useChatKitLabels.ts

@@ -69,6 +69,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. */
@@ -107,6 +113,9 @@ export const defaultChatKitLabels: ChatKitLabels = {
   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/src/index.ts

@@ -75,6 +75,7 @@ export {
   CkInput,
   CkMarkdownRenderer,
   CkMessageActionButton,
+  CkModelSelector,
   CkPromptActionButton,
   CkPromptStopButton,
   CkPromptInput,
@@ -103,6 +104,9 @@ export type {
   CkHistoryWrapperProps,
   CkMarkdownElementClasses,
   CkMarkdownRendererProps,
+  CkModelOption,
+  CkModelSelectorProps,
+  CkModelSelectorEmits,
   CkUserMessageProps,
 } from './components';