ChatPalettePRO
一个聊天调色板,用于在叠加层中创建聊天机器人界面。
用法
ChatPalette 组件是一个结构化的布局包装器,它将 ChatMessages 组织在一个可滚动的内容区域中,并将 ChatPrompt 组织在一个固定的底部区域中,为模态框、侧滑抽屉或抽屉创建了连贯的聊天机器人界面。
<template>
<UChatPalette>
<UChatMessages />
<template #prompt>
<UChatPrompt />
</template>
</UChatPalette>
</template>
示例
在模态框中
您可以在 模态框 的内容中使用 ChatPalette 组件。
<script setup lang="ts">
import { useChat } from '@ai-sdk/vue'
const { messages, input, handleSubmit, status, error } = useChat()
</script>
<template>
<UModal open :ui="{ content: 'sm:h-[28rem]' }">
<template #content>
<UChatPalette>
<UChatMessages
:messages="messages"
:status="status"
:user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png' } }"
:assistant="{ icon: 'i-lucide-bot' }"
>
<template #content="{ message }">
<MDC :value="message.content" :cache-key="message.id" unwrap="p" />
</template>
</UChatMessages>
<template #prompt>
<UChatPrompt
v-model="input"
icon="i-lucide-search"
variant="naked"
:error="error"
@submit="handleSubmit"
/>
</template>
</UChatPalette>
</template>
</UModal>
</template>
在 ContentSearch 中
您可以在 ContentSearch 的内容中根据条件使用 ChatPalette 组件,以便在用户选择项目时显示聊天机器人界面。
<script setup lang="ts">
import { useChat } from '@ai-sdk/vue'
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) {
setMessages([{
id: '1',
role: 'user',
content: searchTerm.value
}])
reload()
}
}
}]
}])
const ai = ref(false)
const searchTerm = ref('')
const { messages, input, handleSubmit, status, error, reload, setMessages } = useChat()
function onClose(e: Event) {
e.preventDefault()
ai.value = false
}
</script>
<template>
<ClientOnly>
<LazyUContentSearch v-model:search-term="searchTerm" open :groups="groups">
<template v-if="ai" #content>
<UChatPalette>
<UChatMessages
:messages="messages"
:status="status"
:user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png' } }"
:assistant="{ icon: 'i-lucide-bot' }"
>
<template #content="{ message }">
<MDC :value="message.content" :cache-key="message.id" unwrap="p" />
</template>
</UChatMessages>
<template #prompt>
<UChatPrompt
v-model="input"
icon="i-lucide-search"
variant="naked"
:error="error"
@submit="handleSubmit"
@close="onClose"
/>
</template>
</UChatPalette>
</template>
</LazyUContentSearch>
</ClientOnly>
</template>
API
属性
属性 | 默认值 | 类型 |
---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
ui |
|
插槽
插槽 | 类型 |
---|---|
default |
|
prompt |
|
主题
app.config.ts
export default defineAppConfig({
uiPro: {
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'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
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'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
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'
}
}
}
})
]
})