ChatPalette^PRO

一个用于在叠加层内创建聊天机器人界面的聊天面板。

用法

ChatPalette 组件是一个结构化的布局包装器，它将可滚动的 ChatMessages 内容区域和固定底部的 ChatPrompt 结合起来，为模态框 (modals)、侧滑抽屉 (slideovers) 或抽屉 (drawers) 创建一致的聊天机器人界面。

<template>
  <UChatPalette>
    <UChatMessages />

    <template #prompt>
      <UChatPrompt />
    </template>
  </UChatPalette>
</template>

示例

这些聊天组件设计用于与来自 Vercel AI SDK 的 useChat composable 一起使用。

你可以在 Modal 的内容区域中使用 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

Props

Prop	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。
`ui`		`{ root?: ClassNameValue; prompt?: ClassNameValue; close?: ClassNameValue; content?: ClassNameValue; }`

插槽

插槽	类型
`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'
          }
        }
      }
    })
  ]
})

ChatMessages

显示聊天消息列表，旨在与 Vercel AI SDK 无缝协作。

ChatPrompt

一个增强的 Textarea，用于在 AI 聊天界面中提交提示。

ChatPalettePRO

ChatPalette^PRO