@gis_victory/ai-chat 1.0.0

package/README.md

@@ -0,0 +1,155 @@
+# gis-victory-ai-chat
+
+Vue 3 AI 聊天面板组件，支持流式对话、历史记录管理、多技能切换等功能。
+
+## 安装
+
+```bash
+npm install gis-victory-ai-chat
+npm install tdesign-vue-next @tdesign-vue-next/chat
+```
+
+## 使用
+
+### 基础使用
+
+```vue
+<template>
+  <AiChatPanel 
+    v-model:open="isOpen"
+    mode="popup"
+    :skills="skills"
+    :on-send="handleSend"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { AiChatPanel } from 'gis-victory-ai-chat'
+import 'gis-victory-ai-chat/style.css'
+
+// 需要引入 TDesign 组件库
+import TDesign from 'tdesign-vue-next'
+import '@tdesign-vue-next/chat/es/style/index.css'
+
+const isOpen = ref(false)
+
+const skills = ref([
+  { id: 'general', label: '综合问答', icon: '🤖' },
+  { id: 'code', label: '代码助手', icon: '💻' },
+  { id: 'document', label: '文档生成', icon: '📄' },
+  { id: 'image', label: '图像生成', icon: '🎨' }
+])
+
+const handleSend = async (message, skill, conversationId) => {
+  // 调用你的 AI 接口
+  const response = await fetch('your-api-endpoint', {
+    method: 'POST',
+    body: JSON.stringify({ message, skill, conversationId })
+  })
+  return await response.text()
+}
+</script>
+```
+
+### 插件式安装
+
+```vue
+<template>
+  <AiChatPanel 
+    mode="page"
+    :skills="skills"
+    :on-send="handleSend"
+  />
+</template>
+
+<script setup>
+import { AiChatPanel } from 'gis-victory-ai-chat'
+import 'gis-victory-ai-chat/style.css'
+
+// 需要引入 TDesign 组件库
+import TDesign from 'tdesign-vue-next'
+import '@tdesign-vue-next/chat/es/style/index.css'
+
+const skills = ref([
+  { id: 'general', label: '综合问答' }
+])
+
+const handleSend = async (message, skill, conversationId) => {
+  // 你的 AI 接口逻辑
+}
+</script>
+```
+
+## 依赖
+
+- **Vue 3.4.0+** - 核心框架
+- **tdesign-vue-next 1.12.0+** - UI 组件库
+- **@tdesign-vue-next/chat 0.5.2+** - 聊天组件
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `open` | `boolean` | - | 面板是否打开（v-model 绑定） |
+| `mode` | `'popup' \| 'page'` | `'popup'` | 显示模式：弹窗模式或全屏模式 |
+| `position` | `'right-bottom' \| 'left-bottom' \| 'right-top' \| 'left-top'` | `'right-bottom'` | 浮动按钮位置（仅 popup 模式） |
+| `width` | `number \| string` | `500` | 面板宽度 |
+| `height` | `number \| string` | `'auto'` | 面板高度 |
+| `skills` | `Skill[]` | - | 可用的技能列表 |
+| `defaultSkill` | `string` | - | 默认选中的技能 ID |
+| `assistantName` | `string` | `'AI 助手'` | AI 助手名称 |
+| `assistantAvatar` | `string` | - | AI 助手头像 URL |
+| `userAvatar` | `string` | - | 用户头像 URL |
+| `persistent` | `boolean` | `true` | 是否持久化对话记录到 localStorage |
+| `storageKey` | `string` | `'ai-chat-panel'` | localStorage 存储键 |
+| `maxHistory` | `number` | `50` | 最大历史对话数量 |
+| `baseURL` | `string` | - | API 基础 URL |
+| `token` | `string` | - | 认证 token |
+| `appId` | `string` | - | 应用 ID |
+
+## Events
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `update:open` | `boolean` | 面板打开/关闭状态变化 |
+| `open` | - | 面板打开时触发 |
+| `close` | - | 面板关闭时触发 |
+| `send` | `{ message, skill, conversationId }` | 发送消息时触发 |
+| `new-chat` | - | 新建对话时触发 |
+| `clear-history` | - | 清除历史记录时触发 |
+| `skill-change` | `skill` | 技能切换时触发 |
+
+## TypeScript 类型
+
+```typescript
+import type { Skill, AiChatPanelProps } from 'gis-victory-ai-chat'
+
+interface Skill {
+  id: string
+  label: string
+  icon?: string
+}
+```
+
+## 注意事项
+
+1. 组件依赖以下包，请确保你的项目已安装：
+   - Vue 3.4.0+
+   - tdesign-vue-next 1.12.0+
+   - @tdesign-vue-next/chat 0.5.2+
+
+2. 需要引入 TDesign 的样式：
+   ```javascript
+   import '@tdesign-vue-next/chat/es/style/index.css'
+   ```
+
+3. 建议使用 `v-model:open` 来控制面板的打开/关闭状态
+
+4. 在 popup 模式下，会显示一个浮动按钮，点击可打开/关闭面板
+
+5. 在 page 模式下，面板会直接全屏显示
+
+## 许可证
+
+MIT

package/dist/components/AiChatPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AiChatPanel } from './AiChatPanel.vue';
+export * from './types';

package/dist/components/AiChatPanel/types.d.ts

@@ -0,0 +1,82 @@
+export type SkillId = 'general' | 'code' | 'doc' | 'image' | 'data' | string;
+export interface Skill {
+    id: SkillId;
+    label: string;
+    icon?: string;
+}
+export interface Message {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: number;
+    loading?: boolean;
+}
+export interface Conversation {
+    id: string;
+    title: string;
+    skill: SkillId;
+    messages: Message[];
+    createdAt: number;
+    updatedAt: number;
+}
+export interface AiChatPanelProps {
+    /** Whether the panel is open (for v-model binding) */
+    open?: boolean;
+    /** Available skills for switching */
+    skills: Skill[];
+    /** Whether to show the skill tabs bar */
+    showSkills?: boolean;
+    /** Allowed skill IDs to display. If set, only skills with matching IDs will be shown */
+    allowedSkills?: SkillId[];
+    /** Display mode: 'popup' (with floating button) or 'page' (full page mode) */
+    mode?: 'popup' | 'page';
+    /** Panel position: 'right-bottom' | 'left-bottom' | 'right-top' | 'left-top' (only in popup mode) */
+    position?: 'right-bottom' | 'left-bottom' | 'right-top' | 'left-top';
+    /** Panel width in pixels */
+    width?: number | string;
+    /** Panel height in pixels */
+    height?: number | string;
+    /** AI assistant name */
+    assistantName?: string;
+    /** Custom avatar URL for AI assistant */
+    assistantAvatar?: string;
+    /** Custom avatar URL for user */
+    userAvatar?: string;
+    /** Whether to persist conversation history to localStorage */
+    persistent?: boolean;
+    /** localStorage key prefix for persistence */
+    storageKey?: string;
+    /** Maximum history conversations to keep */
+    maxHistory?: number;
+    /** Whether to show the floating button */
+    visible?: boolean;
+    /** Send message handler (required for real AI integration) */
+    onSend?: (message: string, skill: SkillId, conversationId: string) => Promise<string> | string;
+    /** Load history conversations from external source (database/API).
+     *  Return the full list of valid conversations; locally stored conversations
+     *  whose IDs are not in the returned list will be removed. */
+    onLoadHistory?: () => Promise<Conversation[]> | Conversation[];
+    /** API base URL */
+    /** Default selected skill id; first skill is used if not specified */
+    defaultSkill?: SkillId;
+    /** API base URL */
+    baseURL?: string;
+    /** Auth token */
+    token?: string;
+    /** Application ID */
+    appId?: string;
+}
+export type AiChatPanelEmits = {
+    (e: 'open'): void;
+    (e: 'close'): void;
+    (e: 'send', payload: {
+        message: string;
+        skill: SkillId;
+        conversationId: string;
+    }): void;
+    (e: 'new-chat'): void;
+    (e: 'clear-history'): void;
+    (e: 'skill-change', skill: SkillId): void;
+};
+export declare const DEFAULT_SKILLS: Skill[];
+export declare const STORAGE_KEY = "ai-chat-panel";