Copaw AI Chat Widget

AI 对话助手组件包，提供两种 Vue 3 接入方式：

• 直接渲染聊天组件 AiChatAssistant
• 开箱即用的悬浮入口 AiChatFloatingAssistant

安装

npm install copaw-ai-chat-widget
# 或 pnpm add copaw-ai-chat-widget

依赖

宿主项目需要安装以下 peerDependencies：

npm install vue@^3.3.0 element-plus@^2.13.0

使用方式

1. 直接渲染聊天组件

<script setup>
import { AiChatAssistant } from 'copaw-ai-chat-widget'
import 'copaw-ai-chat-widget/style'
</script>

<template>
  <AiChatAssistant
    title="你好，我是 AI 助手"
    theme="auto"
    :show-sidebar="true"
    :sidebar-width="320"
  />
</template>

2. 使用悬浮按钮 + 弹窗一体化组件

<script setup>
import { AiChatFloatingAssistant } from 'copaw-ai-chat-widget'
import 'copaw-ai-chat-widget/style'
</script>

<template>
  <AiChatFloatingAssistant
    title="你好，我是 AI 助手"
    window-title="AI 助手"
    button-label="AI 助手"
    theme="auto"
    :show-sidebar="true"
    :default-visible="false"
    :default-size="{ width: 720, height: 600 }"
  />
</template>

3. 受控模式

<script setup lang="ts">
const visible = ref(false)
const position = ref({ x: 200, y: 80 })
const size = ref({ width: 720, height: 600 })
const isMinimized = ref(false)
</script>

<template>
  <AiChatFloatingAssistant
    v-model:visible="visible"
    v-model:position="position"
    v-model:size="size"
    v-model:is-minimized="isMinimized"
    :show-sidebar="true"
  />
</template>

AiChatAssistant Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | '你好，我是 AI 助手' | 欢迎页标题 | | primaryColor | string | '#9547EC' | 主题色 | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | 主题模式 | | showSidebar | boolean | false | 是否显示左侧会话栏 | | sidebarWidth | number | 280 | 左侧会话栏宽度 | | showHeader | boolean | false | 是否显示顶部导航栏 |

AiChatFloatingAssistant Props

除透传全部 AiChatAssistant props 外，还支持以下外层配置：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | visible | boolean | - | 受控显示状态 | | position | { x: number; y: number } | - | 受控窗口位置 | | size | { width: number; height: number } | - | 受控窗口尺寸 | | isMinimized | boolean | - | 受控最小化状态 | | defaultVisible | boolean | false | 非受控默认显示状态 | | defaultPosition | { x: number; y: number } | window.innerWidth - 780, 80 | 非受控默认位置 | | defaultSize | { width: number; height: number } | { width: 720, height: 600 } | 非受控默认尺寸 | | defaultMinimized | boolean | false | 非受控默认最小化状态 | | buttonLabel | string | 'AI 助手' | 悬浮按钮文案 | | windowTitle | string | 'AI 助手' | 弹窗标题 | | zIndex | number | 9999 | 弹窗层级 |

认证

组件通过 sessionStorage 读取以下认证信息：

• authorization
• access-token
• refresh-token
• expires-at

请确保在调用组件前，这些值已正确设置到 sessionStorage 中。