O componente ChatPalette é um wrapper de layout estruturado que organiza o ChatMessages em uma área de conteúdo rolável e o ChatPrompt em uma seção inferior fixa, criando interfaces de chatbot coesas para modais, slideovers ou gavetas.
<template>
<NChatPalette>
<NChatMessages />
<template #prompt>
<NChatPrompt />
</template>
</NChatPalette>
</template>
Você pode usar o componente ChatPalette dentro do conteúdo de um Modal.
Você pode usar o componente ChatPalette condicionalmente dentro do conteúdo do ContentSearch para exibir uma interface de chatbot quando um usuário seleciona um item.
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { root?: SlotClass; prompt?: SlotClass; close?: SlotClass; content?: SlotClass; } |
| Slot | Type |
|---|---|
default | {} |
prompt | {} |
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 '@nitro/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'
}
}
}
})
]
})