模型选择器
一个可搜索的命令面板,用于在聊天界面中选择 AI 模型。
Model Selector 组件提供了一个可搜索的命令面板界面,用于选择 AI 模型。它基于 cmdk 库构建,提供了一个带有搜索功能的键盘可导航界面。
使用 CLI 安装
AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest add model-selector
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/model-selector.json
手动安装
将以下代码复制并粘贴到同一文件夹中。
ModelSelector.vue
ModelSelectorTrigger.vue
ModelSelectorContent.vue
ModelSelectorDialog.vue
ModelSelectorInput.vue
ModelSelectorList.vue
ModelSelectorEmpty.vue
ModelSelectorGroup.vue
ModelSelectorItem.vue
ModelSelectorShortcut.vue
ModelSelectorSeparator.vue
ModelSelectorLogo.vue
ModelSelectorLogoGroup.vue
ModelSelectorName.vue
index.ts
<script setup lang="ts">
import { Dialog } from '@repo/shadcn-vue/components/ui/dialog'
</script>
<template>
<Dialog v-bind="$attrs">
<slot />
</Dialog>
</template>
<script setup lang="ts">
import { DialogTrigger } from '@repo/shadcn-vue/components/ui/dialog'
</script>
<template>
<DialogTrigger v-bind="$attrs">
<slot />
</DialogTrigger>
</template>
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Command } from '@repo/shadcn-vue/components/ui/command'
import { DialogContent, DialogTitle } from '@repo/shadcn-vue/components/ui/dialog'
import { cn } from '@repo/shadcn-vue/lib/utils'
interface Props {
title?: string
class?: HTMLAttributes['class']
}
const props = withDefaults(defineProps<Props>(), {
title: 'Model Selector',
})
</script>
<template>
<DialogContent
:class="cn('p-0', props.class)"
v-bind="$attrs"
>
<DialogTitle class="sr-only">
{{ title }}
</DialogTitle>
<Command class="**:data-[slot=command-input-wrapper]:h-auto">
<slot />
</Command>
</DialogContent>
</template>
<script setup lang="ts">
import { CommandDialog } from '@repo/shadcn-vue/components/ui/command'
</script>
<template>
<CommandDialog v-bind="$attrs">
<slot />
</CommandDialog>
</template>
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
import { cn } from '@repo/shadcn-vue/lib/utils'
interface Props {
class?: HTMLAttributes['class']
}
const props = defineProps<Props>()
</script>
<template>
<CommandInput
:class="cn('h-auto py-3.5', props.class)"
v-bind="$attrs"
/>
</template>
<script setup lang="ts">
import { CommandList } from '@repo/shadcn-vue/components/ui/command'
</script>
<template>
<CommandList v-bind="$attrs">
<slot />
</CommandList>
</template>
<script setup lang="ts">
import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
</script>
<template>
<CommandEmpty v-bind="$attrs">
<slot />
</CommandEmpty>
</template>
<script setup lang="ts">
import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
</script>
<template>
<CommandGroup v-bind="$attrs">
<slot />
</CommandGroup>
</template>
<script setup lang="ts">
import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
</script>
<template>
<CommandItem v-bind="$attrs">
<slot />
</CommandItem>
</template>
<script setup lang="ts">
import { CommandShortcut } from '@repo/shadcn-vue/components/ui/command'
</script>
<template>
<CommandShortcut v-bind="$attrs">
<slot />
</CommandShortcut>
</template>
<script setup lang="ts">
import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
</script>
<template>
<CommandSeparator v-bind="$attrs" />
</template>
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
interface Props {
provider: string
class?: HTMLAttributes['class']
}
const props = defineProps<Props>()
</script>
<template>
<img
v-bind="$attrs"
:alt="`${props.provider} logo`"
:class="cn('size-3 dark:invert', props.class)"
height="12"
:src="`https://models.dev/logos/${props.provider}.svg`"
width="12"
>
</template>
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
interface Props {
class?: HTMLAttributes['class']
}
const props = defineProps<Props>()
</script>
<template>
<div
:class="
cn(
'-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground',
props.class,
)
"
v-bind="$attrs"
>
<slot />
</div>
</template>
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
interface Props {
class?: HTMLAttributes['class']
}
const props = defineProps<Props>()
</script>
<template>
<span
:class="cn('flex-1 truncate text-left', props.class)"
v-bind="$attrs"
>
<slot />
</span>
</template>
export { default as ModelSelector } from './ModelSelector.vue'
export { default as ModelSelectorContent } from './ModelSelectorContent.vue'
export { default as ModelSelectorDialog } from './ModelSelectorDialog.vue'
export { default as ModelSelectorEmpty } from './ModelSelectorEmpty.vue'
export { default as ModelSelectorGroup } from './ModelSelectorGroup.vue'
export { default as ModelSelectorInput } from './ModelSelectorInput.vue'
export { default as ModelSelectorItem } from './ModelSelectorItem.vue'
export { default as ModelSelectorList } from './ModelSelectorList.vue'
export { default as ModelSelectorLogo } from './ModelSelectorLogo.vue'
export { default as ModelSelectorLogoGroup } from './ModelSelectorLogoGroup.vue'
export { default as ModelSelectorName } from './ModelSelectorName.vue'
export { default as ModelSelectorSeparator } from './ModelSelectorSeparator.vue'
export { default as ModelSelectorShortcut } from './ModelSelectorShortcut.vue'
export { default as ModelSelectorTrigger } from './ModelSelectorTrigger.vue'
特性
- 可搜索界面,带有键盘导航
- 跨模型名称的模糊搜索过滤
- 按提供商分组的模型组织
- 键盘快捷键支持
- 空状态处理
- 使用 Tailwind CSS 可自定义样式
- 基于 cmdk 构建,具有出色的可访问性
- 支持内联和对话框模式
- 具有适当类型定义的 TypeScript 支持
Props
<ModelSelectorContent />
titlestring
'Model Selector'classstring
<ModelSelectorInput />
classstring
<ModelSelectorLogo />
providerstring
classstring
<ModelSelectorLogoGroup />
classstring
<ModelSelectorName />
classstring