聊天提示

Textarea GitHub

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

用法

ChatPrompt 组件渲染一个 <form> 元素，并扩展了 Textarea 组件，因此你可以传递任何属性，例如 icon、placeholder、autofocus 等。

ChatPrompt 处理以下事件

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

变体

使用 variant 属性更改提示的样式。默认为 outline。

variant

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

示例

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

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

在页面内

将 ChatPrompt 组件与 AI SDK v5 中的 Chat 类一起使用，以在页面中显示聊天提示。

当出现错误时，将 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(error)
  }
})

function onSubmit() {
  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" class="*:first:mt-0 *:last:mb-0" />
          </template>
        </UChatMessages>
      </UContainer>
    </template>

    <template #footer>
      <UContainer class="pb-4 sm:pb-6">
        <UChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
          <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() {
  chat.sendMessage({ text: input.value })

  // 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` 文本区域的占位符文本。
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "naked"`
`error`		`错误`
`disabled`		`boolean`
`图标`		`字符串 \| 对象` 根据 `leading` 和 `trailing` 属性显示图标。
`avatar`		`AvatarProps` 在左侧显示头像。
`loading`		`boolean` 当为 `true` 时，将显示加载图标。
`loadingIcon`	`appConfig.ui.icons.loading`	`字符串 \| 对象` 当 `loading` prop 为 `true` 时显示的图标。
`rows`	`1`	`number`
`autofocus`	`true`	`boolean`
`autofocusDelay`		`number`
`autoresize`	`true`	`boolean`
`autoresizeDelay`		`number`
`maxrows`		`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`
`尾部`	{ ui: { root: (props?: Record<string, any> \| undefined) => string; base: (props?: Record<string, any> \| undefined) => string; leading: (props?: Record<string, any> \| undefined) => string; leadingIcon: (props?: Record<string, any> \| undefined) => string; leadingAvatar: (props?: Record<string, any> \| undefined) => string; leadingAvatarSize: (props?: Record<string, any> \| undefined) => string; trailing: (props?: Record<string, any> \| undefined) => string; trailingIcon: (props?: Record<string, any> \| undefined) => string; }; }

事件

事件	类型
`close`
`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'
          }
        }
      }
    })
  ]
})

更新日志

a8f21— 修复：代理 disabled 属性

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

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

ChatPalette

一个聊天调色板，用于在覆盖层中创建聊天机器人界面。

ChatPromptSubmit

一个用于提交聊天提示并自动处理状态的按钮。