ChatPalette 组件是一个结构化布局包装器，它将ChatMessages组织在一个可滚动的内容区域中，并将ChatPrompt组织在一个固定的底部部分，为模态框、侧滑或抽屉创建了连贯的聊天机器人界面。
<template>
<UChatPalette>
<UChatMessages />
<template #prompt>
<UChatPrompt />
</template>
</UChatPalette>
</template>
您可以在Modal的内容中使用 ChatPalette 组件。
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import type { UIMessage } from 'ai'
import { getTextFromMessage } from '@nuxt/ui/utils/ai'
const messages: UIMessage[] = []
const input = ref('')
const chat = new Chat({
messages
})
function onSubmit() {
chat.sendMessage({ text: input.value })
input.value = ''
}
</script>
<template>
<UModal open :ui="{ content: 'sm:max-w-3xl sm:h-[28rem]' }">
<template #content>
<UChatPalette>
<UChatMessages
:messages="chat.messages"
:status="chat.status"
:user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png' } }"
:assistant="{ icon: 'i-lucide-bot' }"
>
<template #content="{ message }">
<MDC
:value="getTextFromMessage(message)"
:cache-key="message.id"
class="[&_.my-5]:my-2.5 *:first:!mt-0 *:last:!mb-0 [&_.leading-7]:!leading-6"
/>
</template>
</UChatMessages>
<template #prompt>
<UChatPrompt
v-model="input"
icon="i-lucide-search"
variant="naked"
:error="chat.error"
@submit="onSubmit"
/>
</template>
</UChatPalette>
</template>
</UModal>
</template>
当用户选择一个项目时，您可以在ContentSearch的内容中有条件地使用 ChatPalette 组件来显示聊天机器人界面。
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import type { UIMessage } from 'ai'
import { getTextFromMessage } from '@nuxt/ui/utils/ai'
const messages: UIMessage[] = []
const input = ref('')
const groups = computed(() => [{
id: 'ai',
ignoreFilter: true,
items: [{
label: searchTerm.value ? `Ask AI for “${searchTerm.value}”` : 'Ask AI',
icon: 'i-lucide-bot',
onSelect: (e: any) => {
e.preventDefault()
ai.value = true
if (searchTerm.value) {
messages.push({
id: '1',
role: 'user',
parts: [{ type: 'text', text: searchTerm.value }]
})
chat.regenerate()
}
}
}]
}])
const ai = ref(false)
const searchTerm = ref('')
const chat = new Chat({
messages
})
function onSubmit() {
chat.sendMessage({ text: input.value })
input.value = ''
}
function onClose(e: Event) {
e.preventDefault()
ai.value = false
}
</script>
<template>
<UContentSearch v-model:search-term="searchTerm" open :groups="groups">
<template v-if="ai" #content>
<UChatPalette>
<UChatMessages
:messages="chat.messages"
:status="chat.status"
:user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png' } }"
:assistant="{ icon: 'i-lucide-bot' }"
>
<template #content="{ message }">
<MDC
:value="getTextFromMessage(message)"
:cache-key="message.id"
class="[&_.my-5]:my-2.5 *:first:!mt-0 *:last:!mb-0 [&_.leading-7]:!leading-6"
/>
</template>
</UChatMessages>
<template #prompt>
<UChatPrompt
v-model="input"
icon="i-lucide-search"
variant="naked"
:error="chat.error"
@submit="onSubmit"
@close="onClose"
/>
</template>
</UChatPalette>
</template>
</UContentSearch>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
ui |
|
| 插槽 | 类型 |
|---|---|
default |
|
提示 |
|
export default defineAppConfig({
ui: {
chatPalette: {
slots: {
root: 'relative flex-1 flex flex-col min-h-0 min-w-0',
prompt: 'px-0 rounded-t-none border-t border-default',
close: '',
content: 'overflow-y-auto flex-1 flex flex-col py-3'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
chatPalette: {
slots: {
root: 'relative flex-1 flex flex-col min-h-0 min-w-0',
prompt: 'px-0 rounded-t-none border-t border-default',
close: '',
content: 'overflow-y-auto flex-1 flex flex-col py-3'
}
}
}
})
]
})
5cb65— 特性：导入 @nuxt/ui-pro 组件