@aqcq/chat-vue

Vue 3 版本的 ChatGPT 聊天组件，与 React 版本 @aqcq/chat3 功能一致。

安装

npm install @aqcq/chat-vue
# 或
pnpm add @aqcq/chat-vue

使用

基本使用

<template>
  <Chat
    :width="800"
    :height="600"
    :model-config="modelConfig"
  />
</template>

<script setup lang="ts">
import { Chat, ChatPlugin } from '@aqcq/chat-vue';
import type { ModelConfig } from '@aqcq/chat-vue';

// 在 main.ts 中需要安装插件
// app.use(ChatPlugin);

const modelConfig: ModelConfig = {
  baseUrl: 'https://api.openai.com/v1/chat/completions',
  apiKey: 'your-api-key',
  model: 'gpt-3.5-turbo',
};
</script>

弹窗使用

<template>
  <button @click="open = true">打开聊天</button>
  
  <ChatModal
    v-model:open="open"
    :width="800"
    :height="600"
    :model-config="modelConfig"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ChatModal } from '@aqcq/chat-vue';

const open = ref(false);

const modelConfig = {
  baseUrl: 'https://api.openai.com/v1/chat/completions',
  apiKey: 'your-api-key',
};
</script>

在 main.ts 中安装插件

import { createApp } from 'vue';
import { ChatPlugin } from '@aqcq/chat-vue';
import App from './App.vue';

const app = createApp(App);
app.use(ChatPlugin);
app.mount('#app');

Props

Chat Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | width | string | number | '100%' | 宽度 | | height | string | number | '100%' | 高度 | | modelConfig | ModelConfig | - | 模型配置 | | isFullscreen | boolean | false | 是否全屏 | | boxShadow | string | '0 4px 32px rgba(0, 0, 0, 0.1)' | 阴影 | | borderRadius | string | number | 10 | 圆角 |

ChatModal Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | open | boolean | false | 是否打开 | | mask | boolean | true | 是否显示遮罩 | | maskClosable | boolean | true | 点击遮罩是否关闭 | | zIndex | number | 1000 | 层级 |

ModelConfig

interface ModelConfig {
  baseUrl?: string;    // API 地址
  apiKey?: string;     // API Key
  model?: string;      // 模型名称
  stream?: boolean;    // 是否流式返回
  temperature?: number; // 随机性
  top_p?: number;      // 核采样
  max_tokens?: number; // 最大 token 数
}

License

MIT