coze-chat-widget 1.0.0

package/README.md

@@ -0,0 +1,79 @@
+# coze-chat-widget
+
+Coze 问答 AI 对话弹窗的构建产物包，可在任意网页或前端项目中通过 Script 或 ESM 引入，无需单独部署前端工程。
+
+## 安装
+
+```bash
+npm install coze-chat-widget
+```
+
+## 使用方式
+
+### 方式一：Script 标签（UMD）
+
+适用于任意 HTML 页面或非构建型项目。需同时引入 Vue 3 与本包（UMD 依赖全局 `Vue`）：
+
+```html
+<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+<link rel="stylesheet" href="./node_modules/coze-chat-widget/dist/coze-widget.css">
+<script src="./node_modules/coze-chat-widget/dist/coze-widget.umd.cjs"></script>
+<script>
+  CozeWidget.init({
+    apiUrl: 'https://your-api.com/api',
+    userId: 'user-123',
+    theme: {
+      primaryColor: '#1890ff',
+      position: 'bottom-right',
+      headerTitle: '智能助手'
+    }
+  });
+</script>
+```
+
+### 方式二：ES Module
+
+在支持 ESM 的项目中：
+
+```javascript
+import 'coze-chat-widget/dist/coze-widget.css';
+import CozeWidget from 'coze-chat-widget';
+
+CozeWidget.init({
+  apiUrl: 'https://your-api.com/api',
+  theme: { position: 'bottom-right' }
+});
+```
+
+### 类型（TypeScript）
+
+```typescript
+import type { WidgetConfig, ThemeConfig } from 'coze-chat-widget';
+```
+
+## 配置说明
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `apiUrl` | string | 必填，后端 API 根地址（如 `https://your-api.com/api`） |
+| `userId` | string | 可选，用户标识，默认 `anonymous` |
+| `theme` | ThemeConfig | 可选，主题与布局配置 |
+
+更多主题选项见主仓库 [主题自定义指南](https://github.com/your-repo/docs/blob/main/docs/主题自定义指南.md)。
+
+## API
+
+- `CozeWidget.init(config)`：初始化并挂载弹窗
+- `CozeWidget.destroy()`：销毁弹窗实例
+- `CozeWidget.openWithQuestion(question)`：打开弹窗并预填问题
+
+## 构建说明（维护者）
+
+本包由主仓库 `frontend` 的 Widget 构建产出复制而来。发布前请在**仓库根目录**执行：
+
+```bash
+npm run build:widget:pkg
+cd packages/coze-chat-widget && npm publish
+```
+
+确保 `dist/` 内包含 `coze-widget.js`、`coze-widget.umd.cjs`、`coze-widget.css`。

package/dist/coze-widget.css

@@ -0,0 +1 @@
+.chat-wrapper[data-v-dba9b35f]{position:relative}.floating-button[data-v-dba9b35f]{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:none;font-size:24px;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:all .2s ease;z-index:calc(var(--coze-z-index) - 1);display:flex;align-items:center;justify-content:center;color:#fff}.floating-button[data-v-dba9b35f]:hover{box-shadow:0 6px 16px #0003;transform:scale(1.05)}.floating-button[data-v-dba9b35f]:active{transform:scale(.95)}.chat-container[data-v-dba9b35f]{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;border-radius:16px;box-shadow:0 10px 40px #0000001f;z-index:var(--coze-z-index, 9999);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.chat-window-enter-active[data-v-dba9b35f],.chat-window-leave-active[data-v-dba9b35f]{transition:all .25s ease-out}.chat-window-enter-from[data-v-dba9b35f],.chat-window-leave-to[data-v-dba9b35f]{opacity:0;transform:translateY(10px) scale(.95)}.chat-header[data-v-dba9b35f]{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);min-height:56px}.chat-header-left[data-v-dba9b35f]{display:flex;align-items:center;gap:12px;flex:1}.chat-logo[data-v-dba9b35f]{-o-object-fit:contain;object-fit:contain;border-radius:8px;box-shadow:0 2px 4px #0000001a}.chat-title[data-v-dba9b35f]{font-size:16px;font-weight:600}.chat-header-actions[data-v-dba9b35f]{display:flex;align-items:center;gap:6px}.chat-action-button[data-v-dba9b35f]{width:var(--coze-action-button-size, 36px);height:var(--coze-action-button-size, 36px);border:none;border-radius:4px;background:transparent;color:#fff;font-size:var(--coze-action-button-font-size, 24px);cursor:pointer;transition:opacity .15s ease;display:flex;align-items:center;justify-content:center}.chat-action-button[data-v-dba9b35f]:hover{opacity:.8}.chat-action-button[data-v-dba9b35f]:active{opacity:.6}.chat-close-button[data-v-dba9b35f]{font-size:var(--coze-close-button-font-size, 28px);line-height:1}.chat-messages[data-v-dba9b35f]{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;min-height:0;scroll-behavior:smooth}.chat-messages-scrollbar[data-v-dba9b35f]::-webkit-scrollbar{width:6px}.chat-messages-scrollbar[data-v-dba9b35f]::-webkit-scrollbar-track{background:transparent}.chat-messages-scrollbar[data-v-dba9b35f]::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px}.chat-messages-scrollbar[data-v-dba9b35f]::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}.message-list-container[data-v-dba9b35f]{display:flex;flex-direction:column;gap:12px}.empty-state[data-v-dba9b35f]{text-align:center;padding:48px 20px;font-size:14px}.message-item[data-v-dba9b35f]{display:flex;gap:12px}.message-user[data-v-dba9b35f]{flex-direction:row-reverse}.message-avatar[data-v-dba9b35f]{width:var(--coze-avatar-size, 40px);height:var(--coze-avatar-size, 40px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--coze-avatar-font-size, 20px);flex-shrink:0}.message-content-wrapper[data-v-dba9b35f]{flex:1;display:flex;flex-direction:column;gap:4px;max-width:75%}.message-content-wrapper-user[data-v-dba9b35f]{align-items:flex-end}.message-content-wrapper-assistant[data-v-dba9b35f]{align-items:flex-start}.message-content[data-v-dba9b35f]{padding:10px 16px;border-radius:8px;word-wrap:break-word;word-break:break-word;line-height:1.6;font-size:14px}.message-content-user[data-v-dba9b35f]{color:#fff;border-bottom-right-radius:2px}.message-content-assistant[data-v-dba9b35f]{border:1px solid;border-bottom-left-radius:2px}.message-actions[data-v-dba9b35f]{display:flex;gap:4px;margin-top:4px}.message-expand-button[data-v-dba9b35f]{padding:4px 8px;border:none;border-radius:4px;background:transparent;color:color-mix(in srgb,var(--coze-text-color, #333333) 60%,transparent);font-size:14px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.message-expand-button[data-v-dba9b35f]:hover{background-color:color-mix(in srgb,var(--coze-text-color, #333333) 10%,transparent);color:var(--coze-primary-color, #007bff)}.message-expand-button[data-v-dba9b35f]:active{transform:scale(.95)}.message-timestamp[data-v-dba9b35f]{font-size:11px;padding:0 4px}.message-loading[data-v-dba9b35f]{justify-content:flex-start;align-items:center;gap:12px}.loading-animation[data-v-dba9b35f]{display:flex;gap:6px;align-items:center;padding:10px 16px;border-radius:8px;border:1px solid}.loading-dot[data-v-dba9b35f]{width:8px;height:8px;border-radius:50%;animation:loadingDot-dba9b35f 1.4s infinite ease-in-out}.message-list-enter-active[data-v-dba9b35f],.message-list-leave-active[data-v-dba9b35f]{transition:all .2s ease-out}.message-list-enter-from[data-v-dba9b35f]{opacity:0;transform:translateY(5px)}.message-list-leave-to[data-v-dba9b35f]{opacity:0;transform:translate(5px)}@keyframes loadingDot-dba9b35f{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}.message-content-assistant[data-v-dba9b35f] p{margin:0 0 8px}.message-content-assistant[data-v-dba9b35f] p:last-child{margin-bottom:0}.message-content-assistant[data-v-dba9b35f] h1,.message-content-assistant[data-v-dba9b35f] h2,.message-content-assistant[data-v-dba9b35f] h3,.message-content-assistant[data-v-dba9b35f] h4,.message-content-assistant[data-v-dba9b35f] h5,.message-content-assistant[data-v-dba9b35f] h6{margin:12px 0 8px;font-weight:600;color:var(--coze-text-color, #333333)}.message-content-assistant[data-v-dba9b35f] ul,.message-content-assistant[data-v-dba9b35f] ol{margin:8px 0;padding-left:24px}.message-content-assistant[data-v-dba9b35f] li{margin:4px 0}.message-content-assistant[data-v-dba9b35f] code{background:color-mix(in srgb,var(--coze-bg-color, #ffffff) 85%,var(--coze-text-color, #333333));padding:2px 6px;border-radius:4px;font-family:Consolas,Monaco,monospace;font-size:13px;color:var(--coze-primary-color, #007bff)}.message-content-assistant[data-v-dba9b35f] pre{background:#282c34;color:#abb2bf;padding:12px;border-radius:8px;overflow-x:auto;margin:8px 0;font-family:Consolas,Monaco,monospace;font-size:13px;line-height:1.5}.message-content-assistant[data-v-dba9b35f] pre code{background:transparent;padding:0;color:inherit}.message-content-assistant[data-v-dba9b35f] blockquote{border-left:4px solid var(--coze-primary-color, #007bff);padding-left:12px;margin:8px 0;color:color-mix(in srgb,var(--coze-text-color, #333333) 70%,transparent);font-style:italic}.message-content-assistant[data-v-dba9b35f] a{color:var(--coze-primary-color, #007bff);text-decoration:none}.message-content-assistant[data-v-dba9b35f] a:hover{text-decoration:underline}.message-content-assistant[data-v-dba9b35f] strong{font-weight:600}.message-content-assistant[data-v-dba9b35f] em{font-style:italic}.chat-footer[data-v-dba9b35f]{display:flex;gap:8px;padding:12px 16px;border-top:1px solid;align-items:center}.chat-input[data-v-dba9b35f]{flex:1;padding:10px 16px;border:1px solid;border-radius:8px;font-size:14px;outline:none;transition:all .15s ease;font-family:inherit;background-color:var(--coze-bg-color, #ffffff)}.chat-input[data-v-dba9b35f]:focus{border-color:var(--coze-primary-color, #007bff);box-shadow:0 0 0 3px color-mix(in srgb,var(--coze-primary-color, #007bff) 10%,transparent)}.chat-input[data-v-dba9b35f]:disabled{background-color:color-mix(in srgb,var(--coze-bg-color, #ffffff) 95%,var(--coze-text-color, #333333));cursor:not-allowed;opacity:.6}.chat-input[data-v-dba9b35f]::-moz-placeholder{color:color-mix(in srgb,var(--coze-text-color, #333333) 60%,transparent)}.chat-input[data-v-dba9b35f]::placeholder{color:color-mix(in srgb,var(--coze-text-color, #333333) 60%,transparent)}.chat-send-button[data-v-dba9b35f]{padding:10px 20px;border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;white-space:nowrap}.chat-send-button[data-v-dba9b35f]:hover:not(:disabled){opacity:.9}.chat-send-button[data-v-dba9b35f]:active:not(:disabled){opacity:.8}.chat-send-button[data-v-dba9b35f]:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 480px){.chat-container[data-v-dba9b35f]{bottom:0!important;right:0!important;left:0!important;width:100vw!important;height:100vh!important;border-radius:0!important;max-width:none!important;max-height:none!important}.floating-button[data-v-dba9b35f]{bottom:16px!important;right:16px!important;width:48px!important;height:48px!important;font-size:20px!important}.message-content-wrapper[data-v-dba9b35f]{max-width:85%!important}.chat-header[data-v-dba9b35f]{padding:12px 16px!important;min-height:52px!important}.chat-title[data-v-dba9b35f]{font-size:15px!important}.chat-messages[data-v-dba9b35f]{padding:12px!important}.chat-footer[data-v-dba9b35f]{padding:10px 12px!important}}.drawer-overlay[data-v-dba9b35f]{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:calc(var(--coze-z-index, 9999) + 1);display:flex;align-items:center;justify-content:center;padding:20px}.drawer-content[data-v-dba9b35f]{background-color:var(--coze-bg-color, #ffffff);border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:800px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.drawer-header[data-v-dba9b35f]{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--coze-border-color, #dee2e6);background-color:var(--coze-primary-color, #007bff);color:#fff}.drawer-title[data-v-dba9b35f]{margin:0;font-size:18px;font-weight:600}.drawer-close-button[data-v-dba9b35f]{width:32px;height:32px;border:none;border-radius:4px;background:rgba(255,255,255,.2);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.drawer-close-button[data-v-dba9b35f]:hover{background:rgba(255,255,255,.3);transform:scale(1.1)}.drawer-close-button[data-v-dba9b35f]:active{transform:scale(.95)}.drawer-body[data-v-dba9b35f]{flex:1;overflow-y:auto;padding:24px;color:var(--coze-text-color, #333333);line-height:1.8;font-size:15px}.drawer-body[data-v-dba9b35f]::-webkit-scrollbar{width:8px}.drawer-body[data-v-dba9b35f]::-webkit-scrollbar-track{background:transparent}.drawer-body[data-v-dba9b35f]::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}.drawer-body[data-v-dba9b35f]::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}.drawer-body[data-v-dba9b35f] p{margin:0 0 16px}.drawer-body[data-v-dba9b35f] p:last-child{margin-bottom:0}.drawer-body[data-v-dba9b35f] h1,.drawer-body[data-v-dba9b35f] h2,.drawer-body[data-v-dba9b35f] h3,.drawer-body[data-v-dba9b35f] h4,.drawer-body[data-v-dba9b35f] h5,.drawer-body[data-v-dba9b35f] h6{margin:20px 0 12px;font-weight:600;color:var(--coze-text-color, #333333)}.drawer-body[data-v-dba9b35f] h1{font-size:24px}.drawer-body[data-v-dba9b35f] h2{font-size:20px}.drawer-body[data-v-dba9b35f] h3{font-size:18px}.drawer-body[data-v-dba9b35f] ul,.drawer-body[data-v-dba9b35f] ol{margin:12px 0;padding-left:28px}.drawer-body[data-v-dba9b35f] li{margin:8px 0}.drawer-body[data-v-dba9b35f] code{background:color-mix(in srgb,var(--coze-bg-color, #ffffff) 85%,var(--coze-text-color, #333333));padding:3px 8px;border-radius:4px;font-family:Consolas,Monaco,monospace;font-size:14px;color:var(--coze-primary-color, #007bff)}.drawer-body[data-v-dba9b35f] pre{background:#282c34;color:#abb2bf;padding:16px;border-radius:8px;overflow-x:auto;margin:16px 0;font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.6}.drawer-body[data-v-dba9b35f] pre code{background:transparent;padding:0;color:inherit}.drawer-body[data-v-dba9b35f] blockquote{border-left:4px solid var(--coze-primary-color, #007bff);padding-left:16px;margin:16px 0;color:color-mix(in srgb,var(--coze-text-color, #333333) 70%,transparent);font-style:italic}.drawer-body[data-v-dba9b35f] a{color:var(--coze-primary-color, #007bff);text-decoration:none}.drawer-body[data-v-dba9b35f] a:hover{text-decoration:underline}.drawer-body[data-v-dba9b35f] strong{font-weight:600}.drawer-body[data-v-dba9b35f] em{font-style:italic}.drawer-body[data-v-dba9b35f] table{width:100%;border-collapse:collapse;margin:16px 0}.drawer-body[data-v-dba9b35f] th,.drawer-body[data-v-dba9b35f] td{border:1px solid var(--coze-border-color, #dee2e6);padding:8px 12px;text-align:left}.drawer-body[data-v-dba9b35f] th{background-color:color-mix(in srgb,var(--coze-bg-color, #ffffff) 90%,var(--coze-text-color, #333333));font-weight:600}.drawer-enter-active[data-v-dba9b35f],.drawer-leave-active[data-v-dba9b35f]{transition:all .3s ease}.drawer-enter-from[data-v-dba9b35f],.drawer-leave-to[data-v-dba9b35f]{opacity:0}.drawer-enter-from .drawer-content[data-v-dba9b35f],.drawer-leave-to .drawer-content[data-v-dba9b35f]{transform:scale(.9) translateY(20px)}.drawer-enter-to .drawer-content[data-v-dba9b35f],.drawer-leave-from .drawer-content[data-v-dba9b35f]{transform:scale(1) translateY(0)}.drawer-content[data-v-dba9b35f]{transition:transform .3s ease}.chat-widget-wrapper[data-v-4b054758]{position:relative;isolation:isolate}:root{--coze-primary-color: #007bff;--coze-bg-color: #ffffff;--coze-text-color: #333333;--coze-button-color: #007bff;--coze-border-color: #dee2e6;--coze-width: 400px;--coze-height: 75vh;--coze-border-radius: 12px;--coze-shadow: 0 4px 12px rgba(0, 0, 0, .15);--coze-z-index: 9999;--coze-action-button-size: 36px;--coze-action-button-font-size: 24px;--coze-close-button-font-size: 28px;--coze-avatar-size: 40px;--coze-avatar-font-size: 20px;--coze-user-avatar-opacity: 20%;--coze-assistant-avatar-opacity: 10%}