DIYGW Chat Stream

由https://www.diygw.com维护

一个基于Vue 3的AI对话流式响应组件，支持多种大模型提供商（OpenAI、DeepSeek等），具有自定义机器人图标、Markdown渲染等功能。

特性

• 支持多种大模型提供商
• 流式响应显示
• Markdown格式渲染
• 代码高亮显示
• 自定义机器人图标
• 响应式设计

安装

npm install diygw-chat-stream
# 或
pnpm add diygw-chat-stream
# 或
 yarn add diygw-chat-stream

使用

注意：

1. 在大多数Vue项目中，由于package.json中配置了"style"字段，样式文件会被自动导入，无需额外引入。
2. 如果使用Vite等现代构建工具，可能需要确保CSS文件在package.json的exports字段中有正确配置。

如需手动引入样式，有两种方式：

方式一：在JavaScript/TypeScript中引入

<template>
  <div class="chat-container">
    <ChatWindow
      :provider="'openai'"
      :apiKey="apiKey"
      :model="'gpt-3.5-turbo'"
      :instruction="systemPrompt"
      :welcomeText="'欢迎使用AI助手'"
      :robotIcon="'https://example.com/robot.png'"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ChatWindow } from 'diygw-chat-stream';
// 引入样式文件
import 'diygw-chat-stream/dist/diygw-chat-stream.css';

const apiKey = ref('your-api-key');
const systemPrompt = ref('你是一个有用的AI助手');
</script>

方式二：在HTML中直接引入

<!-- 在HTML文件的head标签中添加 -->
<link rel="stylesheet" href="/node_modules/diygw-chat-stream/dist/diygw-chat-stream.css">

<!-- 然后在Vue组件中使用 -->
<template>
  <div class="chat-container">
    <ChatWindow
      :provider="'openai'"
      :apiKey="apiKey"
      :model="'gpt-3.5-turbo'"
      :instruction="systemPrompt"
      :welcomeText="'欢迎使用AI助手'"
      :robotIcon="'https://example.com/robot.png'"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ChatWindow } from 'diygw-chat-stream';

const apiKey = ref('your-api-key');
const systemPrompt = ref('你是一个有用的AI助手');
</script>

配置参数

| 参数名 | 类型 | 必填 | 默认值 | 说明 | | ----------- | ------ | ---- | ---------------------- | ------------------------- | | provider | string | 是 | openai | 大模型提供商 | | apiKey | string | 是 | - | API密钥 | | model | string | 是 | gpt-3.5-turbo | 模型名称 | | instruction | string | 否 | - | 系统提示词 | | welcomeText | string | 否 | '欢迎使用 AI 流式对话' | 欢迎信息 | | robotIcon | string | 否 | - | 机器人图标URL或Base64编码 | | baseURL | string | 否 | - | API基础URL |

支持的提供商

• OpenAI
• DeepSeek

License

MIT