建议

一个建议组件，显示一行可点击的建议供用户交互。

Suggestion 组件显示一行可点击的建议供用户交互。

使用 CLI 安装

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add suggestion

手动安装

将以下代码复制并粘贴到同一文件夹中。

Suggestions.vue

index.ts

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { ScrollArea, ScrollBar } from '@repo/shadcn-vue/components/ui/scroll-area'
import { cn } from '@repo/shadcn-vue/lib/utils'

interface SuggestionsProps {
  class?: HTMLAttributes['class']
}

const props = defineProps<SuggestionsProps>()
</script>

<template>
  <ScrollArea class="w-full overflow-x-auto whitespace-nowrap" v-bind="$attrs">
    <div :class="cn('flex w-max flex-nowrap items-center gap-2', props.class)">
      <slot />
    </div>
    <ScrollBar class="hidden" orientation="horizontal" />
  </ScrollArea>
</template>

与 AI SDK 一起使用

构建一个带有建议的简单输入，用户可以点击以向 LLM 发送消息。

将以下组件添加到你的前端：

pages/index.vue

<script setup lang="ts">
import { useChat } from '@ai-sdk/vue'
import { ref } from 'vue'
import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from '@/components/ai-elements/conversation'
import { Message, MessageContent } from '@/components/ai-elements/message'
import {
  PromptInput,
  PromptInputSubmit,
  PromptInputTextarea,
} from '@/components/ai-elements/prompt-input'
import { Response } from '@/components/ai-elements/response'
import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion'

const input = ref('')
const { sendMessage, status } = useChat()

function handleSubmit() {
  if (input.value.trim()) {
    sendMessage({ text: input.value })
    input.value = ''
  }
}

function handleSuggestionClick(suggestion: string) {
  sendMessage({ text: suggestion })
}
</script>

<template>
  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
    <div class="flex flex-col h-full">
      <div class="flex flex-col gap-4">
        <Suggestions>
          <Suggestion
            v-for="suggestion in suggestions"
            :key="suggestion"
            :suggestion="suggestion"
            @click="handleSuggestionClick"
          />
        </Suggestions>

        <PromptInput class="mt-4 w-full max-w-2xl mx-auto relative" @submit.prevent="handleSubmit">
          <PromptInputTextarea
            v-model="input"
            placeholder="Say something..."
            class="pr-12"
          />
          <PromptInputSubmit
            :status="status === 'streaming' ? 'streaming' : 'ready'"
            :disabled="!input.trim()"
            class="absolute bottom-1 right-1"
          />
        </PromptInput>
      </div>
    </div>
  </div>
</template>