聊天提示

Textarea GitHub

一个增强型文本区域，用于在 AI 聊天界面中提交提示。

用法

ChatPrompt 组件渲染一个 `

ChatPrompt 处理以下事件

当用户按下 ↵ 或点击提交按钮时，表单将被提交。
当按下 Esc 并触发 `close` 事件时，文本区域将失去焦点。

变体

使用 `variant` 属性来改变提示框的样式。默认为 `outline`。

variant

<template>
  <UChatPrompt variant="soft" />
</template>

示例

这些聊天组件旨在与 Vercel AI SDK 的 AI SDK v5 配合使用。

请查看 GitHub 上的 AI 聊天模板源代码，了解实际示例。

在页面内

使用 AI SDK v5 中的 `Chat` 类与 ChatPrompt 组件结合使用，可在页面内显示聊天提示框。

在出现错误时，将 `input` 属性与 `error` 属性一起传递，以禁用文本区域。

pages/[id].vue

<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import { getTextFromMessage } from '@nuxt/ui/utils/ai'

const input = ref('')

const chat = new Chat({
  onError(error) {
    console.error('Chat error:', error)
  }
})

const handleSubmit = (e: Event) => {
  e.preventDefault()
  chat.sendMessage({ text: input.value })
  input.value = ''
}
</script>

<template>
  <UDashboardPanel>
    <template #body>
      <UContainer>
        <UChatMessages :messages="chat.messages" :status="chat.status">
          <template #content="{ message }">
            <MDC :value="getTextFromMessage(message)" :cache-key="message.id" unwrap="p" />
          </template>
        </UChatMessages>
      </UContainer>
    </template>

    <template #footer>
      <UContainer>
        <UChatPrompt v-model="input" :error="chat.error" @submit="handleSubmit">
          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
        </UChatPrompt>
      </UContainer>
    </template>
  </UDashboardPanel>
</template>

你也可以将其用作聊天界面的起点。

pages/index.vue

<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'

const input = ref('')
const chat = new Chat()

async function onSubmit() {
  const userInput = input.value
  input.value = ''

  chat.sendMessage({ text: userInput })

  // Navigate to chat page after first message
  if (chat.messages.length === 1) {
    await navigateTo('/chat')
  }
}
</script>

<template>
  <UDashboardPanel>
    <template #body>
      <UContainer>
        <h1>How can I help you today?</h1>

        <UChatPrompt v-model="input" @submit="onSubmit">
          <UChatPromptSubmit :status="chat.status" />
        </UChatPrompt>
      </UContainer>
    </template>
  </UDashboardPanel>
</template>

API

属性

属性	默认值	类型
`as`	`'form'`	`any` 此组件应渲染为的元素或组件。
`placeholder`	`t('chatPrompt.placeholder')`	`string` 文本区域的占位符文本。
`autofocus`	`true`	`boolean`
`自动调整大小`	`true`	`boolean`
`行数`	`1`	`number`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "naked"`
`error`		`错误`
`loading`		`boolean` 当为 `true` 时，将显示加载图标。
`loadingIcon`	`appConfig.ui.icons.loading`	`字符串 \| 对象` 当 `loading` prop 为 `true` 时显示的图标。
`图标`		`字符串 \| 对象` 根据 `leading` 和 `trailing` 属性显示图标。
`avatar`		`AvatarProps` 在左侧显示头像。
`autofocusDelay`		`number`
`自动调整大小延迟`		`number`
`最大行数`		`number`
`modelValue`	`''`	`string`
`ui`		`{ root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; base?: ClassNameValue; } &{ root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; }`

插槽

插槽	类型
`页头`	`{}`
`页脚`	`{}`
`前置`	`{}`
`default`	`{}`
`尾部`	`{}`

事件

事件	类型
`close`	`[event: Event]`
`submit`	`[event: Event]`
`update:modelValue`	`[value: string]`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    chatPrompt: {
      slots: {
        root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur',
        header: 'flex items-center gap-1.5',
        body: 'items-start',
        footer: 'flex items-center justify-between gap-1.5',
        base: 'text-base/5'
      },
      variants: {
        variant: {
          outline: {
            root: 'bg-default/75 ring ring-default'
          },
          soft: {
            root: 'bg-elevated/50'
          },
          subtle: {
            root: 'bg-elevated/50 ring ring-default'
          },
          naked: {
            root: ''
          }
        }
      },
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})

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({
      ui: {
        chatPrompt: {
          slots: {
            root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur',
            header: 'flex items-center gap-1.5',
            body: 'items-start',
            footer: 'flex items-center justify-between gap-1.5',
            base: 'text-base/5'
          },
          variants: {
            variant: {
              outline: {
                root: 'bg-default/75 ring ring-default'
              },
              soft: {
                root: 'bg-elevated/50'
              },
              subtle: {
                root: 'bg-elevated/50 ring ring-default'
              },
              naked: {
                root: ''
              }
            }
          },
          defaultVariants: {
            variant: 'outline'
          }
        }
      }
    })
  ]
})

更新日志

3173b— fix: proxySlots 响应性 (#4969)

5cb65— 特性：导入 @nuxt/ui-pro 组件

ChatPalette

用于在覆盖层中创建聊天机器人的聊天面板。

ChatPromptSubmit

用于提交聊天提示的按钮，具有自动状态处理功能。