feat(model-selector): add model selector component

packages/components/src/index.ts

@@ -13,6 +13,7 @@ import Feedback from './feedback'
 import History from './history'
 import IconButton from './icon-button'
 import { Layout, LayoutAsideToggle, LayoutProxyScrollbar } from './layout'
+import ModelSelector from './model-selector'
 import { Prompt, Prompts } from './prompts'
 import Sender from './sender'
 import SenderCompat from './sender-compat'
@@ -45,6 +46,7 @@ export * from './feedback/index.type'
 export * from './history/index.type'
 export * from './icon-button/index.type'
 export * from './layout/index.type'
+export * from './model-selector/index.type'
 export * from './prompts/index.type'
 export * from './sender/index.type'
 export * from './sender-actions/index.type'
@@ -89,6 +91,7 @@ const components = [
   Layout,
   LayoutProxyScrollbar,
   LayoutAsideToggle,
+  ModelSelector,
   Prompt,
   Prompts,
   Sender,
@@ -149,6 +152,8 @@ export {
   LayoutProxyScrollbar as TrLayoutProxyScrollbar,
   LayoutAsideToggle,
   LayoutAsideToggle as TrLayoutAsideToggle,
+  ModelSelector,
+  ModelSelector as TrModelSelector,
   Prompt,
   Prompt as TrPrompt,
   Prompts,

packages/components/src/model-selector/components/ModelSelectorEffort.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ModelSelectorReasoningEffortOption } from '../index.type'
+
+defineOptions({ name: 'TrModelSelectorEffort' })
+
+defineProps<{
+  options: readonly ModelSelectorReasoningEffortOption[]
+  value: string | null
+  label: string
+  disabled: boolean
+}>()
+
+defineEmits<{
+  select: [value: string | null]
+}>()
+</script>
+
+<template>
+  <div class="tr-model-selector__effort">
+    <span class="tr-model-selector__effort-label">{{ label }}</span>
+    <div class="tr-model-selector__effort-options" role="group" :aria-label="label">
+      <button
+        v-for="option in options"
+        :key="option.value"
+        type="button"
+        class="tr-model-selector__effort-option"
+        :class="{ 'is-active': option.value === value }"
+        :disabled="disabled || option.disabled"
+        :aria-pressed="option.value === value"
+        :data-model-selector-effort-value="option.value"
+        @click="$emit('select', option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+  </div>
+</template>

packages/components/src/model-selector/components/ModelSelectorGroup.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import type { ModelSelectorItemSlotProps, ModelSelectorOption } from '../index.type'
+import type { ModelSelectorOptionGroup } from '../internal.type'
+import ModelSelectorItem from './ModelSelectorItem.vue'
+
+defineOptions({ name: 'TrModelSelectorGroup' })
+
+defineProps<{
+  group: ModelSelectorOptionGroup
+  selectedValue: string | null
+  highlightedKey: string | null
+  optionIdPrefix: string
+}>()
+
+defineEmits<{
+  hover: [key: string]
+  select: [option: ModelSelectorOption]
+}>()
+
+defineSlots<{
+  item?: (props: ModelSelectorItemSlotProps) => VNode | VNode[]
+}>()
+</script>
+
+<template>
+  <div
+    class="tr-model-selector__group"
+    :role="group.label ? 'group' : 'presentation'"
+    :aria-labelledby="group.label ? `${optionIdPrefix}-group-${group.index}` : undefined"
+  >
+    <div v-if="group.label" :id="`${optionIdPrefix}-group-${group.index}`" class="tr-model-selector__group-title">
+      {{ group.label }}
+    </div>
+
+    <ModelSelectorItem
+      v-for="option in group.items"
+      :key="option.key"
+      :option="option"
+      :selected="selectedValue === option.value"
+      :highlighted="highlightedKey === option.key"
+      :option-id="`${optionIdPrefix}-option-${option.index}`"
+      :description-id="`${optionIdPrefix}-option-${option.index}-description`"
+      @hover="$emit('hover', $event)"
+      @select="$emit('select', $event)"
+    >
+      <template v-if="$slots.item" #item="slotProps">
+        <slot name="item" v-bind="slotProps" />
+      </template>
+    </ModelSelectorItem>
+  </div>
+</template>

packages/components/src/model-selector/components/ModelSelectorItem.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { IconCheck } from '@opentiny/tiny-robot-svgs'
+import type { VNode } from 'vue'
+import type { ModelSelectorItemSlotProps, ModelSelectorOption } from '../index.type'
+import type { NormalizedModelSelectorOption } from '../internal.type'
+
+defineOptions({ name: 'TrModelSelectorItem' })
+
+const props = defineProps<{
+  option: NormalizedModelSelectorOption
+  selected: boolean
+  highlighted: boolean
+  optionId: string
+  descriptionId: string
+}>()
+
+const emit = defineEmits<{
+  hover: [key: string]
+  select: [option: ModelSelectorOption]
+}>()
+
+defineSlots<{
+  item?: (props: ModelSelectorItemSlotProps) => VNode | VNode[]
+}>()
+
+function handleMouseEnter() {
+  if (!props.option.disabled) {
+    emit('hover', props.option.key)
+  }
+}
+
+function handleSelect() {
+  if (!props.option.disabled) {
+    emit('select', props.option.raw)
+  }
+}
+</script>
+
+<template>
+  <div
+    :id="optionId"
+    class="tr-model-selector__option"
+    :class="{
+      'is-selected': selected,
+      'is-highlighted': highlighted,
+      'is-disabled': option.disabled,
+    }"
+    :data-model-selector-option-key="option.key"
+    role="option"
+    :aria-selected="selected"
+    :aria-disabled="option.disabled || undefined"
+    :aria-describedby="option.description && !$slots.item ? descriptionId : undefined"
+    @mouseenter="handleMouseEnter"
+    @mousedown.prevent
+    @click="handleSelect"
+  >
+    <slot name="item" :option="option.raw" :selected="selected" :highlighted="highlighted">
+      <span class="tr-model-selector__option-main">
+        <img
+          v-if="typeof option.icon === 'string'"
+          :src="option.icon"
+          class="tr-model-selector__option-icon"
+          alt=""
+          aria-hidden="true"
+        />
+        <component
+          :is="option.icon"
+          v-else-if="option.icon"
+          class="tr-model-selector__option-icon"
+          aria-hidden="true"
+          focusable="false"
+        />
+        <span class="tr-model-selector__option-copy">
+          <span class="tr-model-selector__option-label" :title="option.label">{{ option.label }}</span>
+          <span
+            v-if="option.description"
+            :id="descriptionId"
+            class="tr-model-selector__option-description"
+            :title="option.description"
+          >
+            {{ option.description }}
+          </span>
+        </span>
+      </span>
+      <IconCheck v-if="selected" class="tr-model-selector__option-check" aria-hidden="true" focusable="false" />
+    </slot>
+  </div>
+</template>