Bubbles
  • 简体中文

      • @bubblesjs/vue-ai-chart

      一个 Vue 3 AI 聊天组件库，提供完整的 AI 对话界面，包括会话列表侧边栏、聊天内容区域和 Markdown 渲染支持。

      特性

      • 🤖 AI 聊天界面：完整的 AI 对话 UI 组件
      • 📝 Markdown 支持：内置 Markdown 渲染和代码高亮
      • 💬 会话管理：支持会话列表和历史记录
      • 🎨 可定制：灵活的插槽系统支持自定义布局
      • 🔌 易于集成：简单的 API 连接你的 AI 后端

      安装

      pnpm
      npm
      yarn
      pnpm add @bubblesjs/vue-ai-chart

      快速开始

      基础用法

      <template>
  <AiChart
    :create-conversation-request="createConversation"
    :chart-request="sendMessage"
    :conversation-detail-request="getConversationDetail"
  />
</template>

<script setup lang="ts">
import { AiChart } from '@bubblesjs/vue-ai-chart'
import '@bubblesjs/vue-ai-chart/style.css'

// 创建新会话
const createConversation = async () => {
  const response = await fetch('/api/conversations', { method: 'POST' })
  return response.json()
}

// 发送消息给 AI
const sendMessage = async (conversationId, message) => {
  const response = await fetch(`/api/chat/${conversationId}`, {
    method: 'POST',
    body: JSON.stringify({ message })
  })
  return response.json()
}

// 获取会话历史
const getConversationDetail = async (conversationId) => {
  const response = await fetch(`/api/conversations/${conversationId}`)
  return response.json()
}
</script>

      带会话侧边栏

      <template>
  <AiChart
    :is-conversation-list="true"
    :conversation-list="conversations"
    :create-conversation-request="createConversation"
    :chart-request="sendMessage"
    :conversation-detail-request="getConversationDetail"
    sidebar-width="280px"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiChart } from '@bubblesjs/vue-ai-chart'
import '@bubblesjs/vue-ai-chart/style.css'

const conversations = ref([
  { id: '1', title: '对话 1', createdAt: '2024-01-01' },
  { id: '2', title: '对话 2', createdAt: '2024-01-02' }
])
</script>

      组件

      AiChart

      主聊天组件，整合侧边栏和聊天内容区域。

      Props

      属性类型默认值说明
      isInitChartInputCenterbooleantrue聊天为空时输入框居中显示
      isConversationListbooleanfalse是否显示会话侧边栏
      sidebarWidthstring-侧边栏宽度
      conversationListArray-会话列表
      createConversationRequestFunction必填创建新会话的函数
      chartRequestFunction必填发送消息的函数
      conversationDetailRequestFunction必填获取会话详情的函数
      recommendsOptionObject-推荐问题配置
      markdownCodeRenderConfigObject-Markdown 代码渲染配置
      chartLogoComponentComponent-自定义 Logo 组件
      chartInputLayoutstring-输入框布局配置

      AiMarkdown

      独立的 Markdown 渲染组件。

      <template>
  <AiMarkdown :content="markdownContent" />
</template>

<script setup lang="ts">
import { AiMarkdown } from '@bubblesjs/vue-ai-chart'

const markdownContent = `
# Hello World

这是 **粗体** 和 *斜体* 文本。

\`\`\`javascript
console.log('Hello!')
\`\`\`
`
</script>

      AiChartModal

      AI 聊天组件的弹窗包装器。

      <template>
  <AiChartModal v-model:visible="showModal">
    <!-- 聊天内容 -->
  </AiChartModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AiChartModal } from '@bubblesjs/vue-ai-chart'

const showModal = ref(false)
</script>

      类型定义

      // 聊天请求类型
interface ChartRequestType {
  conversationId: string
  message: string
}

// 会话项
interface ConversationItem {
  id: string
  title: string
  createdAt: string
}

      自定义

      自定义侧边栏插槽

      <template>
  <AiChart
    :is-conversation-list="true"
    :conversation-list="conversations"
    :create-conversation-request="createConversation"
    :chart-request="sendMessage"
    :conversation-detail-request="getConversationDetail"
  >
    <template #sidebar-header>
      <div class="custom-header">我的 AI 助手</div>
    </template>
    <template #sidebar-footer>
      <div class="custom-footer">由 AI 驱动</div>
    </template>
  </AiChart>
</template>

      依赖

      此组件依赖：

      • Element Plus 用于 UI 组件
      • Swiper 用于轮播功能
      • dayjs 用于日期格式化