dchat-vue 1.0.0

package/README.md

@@ -0,0 +1,146 @@
+# dchat-vue
+
+A Vue 3 chat dialog component that displays in the bottom right corner of the screen.
+
+## Features
+
+- Default positioning in the bottom right corner
+- Click to open/close chat dialog
+- Customizable bottom and right positioning via props
+- Integration with Element Plus UI library
+- Support for AI chat functionality
+- Responsive design
+
+## Installation
+
+```bash
+npm install dchat-vue
+```
+
+## Usage
+
+### Basic Usage
+
+```vue
+<template>
+  <div>
+    <ChatDialog
+      title="在线客服"
+      :username="'user123'"
+      :bottom="50"
+      :right="20"
+      :marker="'your-marker'"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ChatDialog } from 'dchat-vue'
+import 'dchat-vue/dist/style.css'
+</script>
+```
+
+### With Element Plus
+
+```vue
+<template>
+  <div>
+    <ChatDialog
+      title="智能助手"
+      :default-open="true"
+      :bottom="100"
+      :right="50"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ChatDialog } from 'dchat-vue'
+import 'dchat-vue/dist/style.css'
+// Import Element Plus styles if not already imported
+import 'element-plus/dist/index.css'
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| title | String | "在线客服" | The title of the chat dialog |
+| username | String | "" | The username of the current user |
+| defaultOpen | Boolean | false | Whether the dialog is open by default |
+| bottom | Number | 50 | Distance from the bottom of the screen (px) |
+| right | Number | 20 | Distance from the right of the screen (px) |
+| marker | String | "" | A marker to identify different chat instances |
+
+## Events
+
+| Name | Description |
+|------|-------------|
+| open | Emitted when the chat dialog is opened |
+| close | Emitted when the chat dialog is closed |
+
+## Project Structure
+
+```
+.
+├── src/
+│   ├── components/
+│   │   ├── ChatDialog.vue      # Main chat component
+│   │   ├── ChatMessage.vue     # Message component
+│   │   ├── TryToAsk.vue        # Suggested questions component
+│   │   └── index.js            # Component exports
+│   ├── utils/
+│   │   ├── httpClient.js       # HTTP utilities
+│   │   └── index.js            # Utility functions
+│   └── main.js                 # Entry point
+├── vite.config.js              # Vite configuration
+├── package.json                # Package configuration
+└── README.md                   # This file
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+This will generate the following files in the `dist` directory:
+
+- `dchat-vue.js` - ESM build
+- `dchat-vue.umd.cjs` - UMD build
+- `style.css` - Component styles
+
+## Dependencies
+
+- Vue 3 - ^3.5.0
+- Element Plus - ^2.12.0
+- @element-plus/icons-vue - ^2.3.2
+- @microsoft/fetch-event-source - ^2.0.1
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT

package/dist/dchat-vue.css

@@ -0,0 +1 @@
+.suggest_wrap[data-v-2f5e2e5e]{display:flex;align-items:center;padding-top:.5rem;padding-bottom:.5rem}.suggest_box[data-v-2f5e2e5e]{display:flex;flex-wrap:wrap;justify-content:center}.line-1[data-v-2f5e2e5e]{flex-grow:1;height:1px}.suggest-item[data-v-2f5e2e5e]{border:1px solid #1e80ff;padding:4px 6px;border-radius:4px;color:#1e80ff;font-size:12px;line-height:18px;cursor:pointer;margin-right:.5rem;margin-bottom:.5rem}.suggest-item[data-v-2f5e2e5e]:hover{background:#1e80ff33}.try_box[data-v-2f5e2e5e]{display:flex;align-items:center;font-size:12px}.try_box_icon[data-v-2f5e2e5e]{color:#6b7280}.msg-item[data-v-c8423ab8]:last-child{margin-bottom:0}.msg-item[data-v-c8423ab8]{margin-bottom:15px;text-align:left}.content[data-v-c8423ab8]{display:flex}.img_1[data-v-c8423ab8]{width:40px;height:40px;margin-right:8px;border-radius:50%;background:linear-gradient(-45deg,#5479f1,#4a8dff);color:#fff;text-align:center;line-height:44px;font-size:26px}.img_1 .robot_img[data-v-c8423ab8]{width:100%;height:100%;border-radius:50%}.img_2[data-v-c8423ab8]{width:36px;height:36px;margin-left:8px}.time[data-v-c8423ab8]{margin-top:2px;color:#909399;font-size:12px}.time_1[data-v-c8423ab8]{text-align:right}.time_2[data-v-c8423ab8]{text-align:left}.t1[data-v-c8423ab8]{text-align:right;margin-right:45px}.t2[data-v-c8423ab8]{margin-left:45px}.dialog_conent[data-v-c8423ab8]{max-width:350px;padding:10px;font-size:14px;background:#fff;color:#303133;box-shadow:0 2px 12px #0000001a}.dialog_user_box[data-v-c8423ab8]{display:flex;justify-content:flex-end;width:100%}.dialog_robot_box[data-v-c8423ab8]{display:flex}.dialog_conent_user[data-v-c8423ab8]{border-radius:20px 0 20px 20px;background:#4a8dff;color:#fff;margin-left:5px}.dialog_conent_robot[data-v-c8423ab8]{border-radius:0 20px 20px;margin-right:5px;text-align:left}.btn-icon[data-v-c8423ab8]:hover{color:#409eff}.chat-dialog-wrapper[data-v-d7eb24d5]{position:fixed;bottom:0;right:0;z-index:1000}.header_img[data-v-d7eb24d5]{vertical-align:middle;width:40px}.ml-10[data-v-d7eb24d5]{margin-left:10px}.open-chat-btn[data-v-d7eb24d5]{position:absolute;bottom:var(--v74d802ee);right:var(--d120986c);width:60px;height:60px;border-radius:50%;background-color:#409eff;background-color:#e9ebf6;color:#fff;border:none;cursor:pointer;box-shadow:0 2px 12px #00000026;transition:all .3s ease;font-size:20px;display:flex;align-items:center;justify-content:center;outline:none}.open-chat-btn[data-v-d7eb24d5]:hover{background-color:#66b1ff;transform:scale(1.1);box-shadow:0 4px 16px #0003}.open-chat-btn:hover img[data-v-d7eb24d5]{animation:shakeX 1s}.chat-dialog[data-v-d7eb24d5]{position:absolute;right:var(--v83fd9a38);bottom:var(--v74d802ee);width:500px;height:600px;background-color:#f0f4fa;border-radius:12px;box-shadow:0 4px 20px #00000026;display:flex;overflow:hidden;flex-direction:column;margin-bottom:10px;animation:slideUp-d7eb24d5 .3s ease}@keyframes slideUp-d7eb24d5{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chat-dialog-header[data-v-d7eb24d5]{display:flex;justify-content:space-between;line-height:28px;text-align:left;background-color:#b9d3f4;font-size:16px;color:#0b2949;height:auto;padding:8px 15px;border-top-left-radius:12px;border-top-right-radius:12px}.chat-dialog-header h3[data-v-d7eb24d5]{margin:0;font-size:16px;font-weight:600}.close-btn[data-v-d7eb24d5]{background:none;border:none;color:#4e5969;font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.close-btn[data-v-d7eb24d5]:hover{background-color:#fff3}.chat-box[data-v-d7eb24d5]{flex:1;padding:16px;overflow-y:auto;background-color:#f5f7fa;display:flex;flex-direction:column;gap:12px}.footer_box[data-v-d7eb24d5]{padding:0 12px 12px}.chat-input-area[data-v-d7eb24d5]{box-sizing:border-box;line-height:normal;display:flex;width:100%;border-collapse:separate;border-spacing:0;position:relative;font-size:14px;background-color:#fff;border-radius:8px}.message-input[data-v-d7eb24d5]{border-radius:4px 0 0 4px;border:none;vertical-align:middle;display:table-cell;-webkit-appearance:none;background-image:none;box-sizing:border-box;color:#606266;height:40px;line-height:40px;outline:0;padding:0 15px;flex:1}.message-input[data-v-d7eb24d5]:focus{border-color:#409eff}.send-btn[data-v-d7eb24d5]{padding:10px 16px;background-color:#409eff;color:#fff;border:none;font-size:14px;cursor:pointer;border-radius:initial;transition:background-color .2s;border-top-right-radius:12px;border-bottom-right-radius:12px}.send-btn[data-v-d7eb24d5]:hover{background-color:#66b1ff}.send-btn[data-v-d7eb24d5]:active{background-color:#3a8ee6}.explain_box[data-v-d7eb24d5]{position:relative;background-image:linear-gradient(120deg,#d9ebff,#e3e6ff);border-radius:12px;border:1px solid #fff;padding:10px 12px;margin:0}.explain_title[data-v-d7eb24d5]{text-align:left;font-family:SourceHanSansCN-Bold;font-size:18px;margin:0}.explain_close[data-v-d7eb24d5]{position:absolute;top:10px;right:10px;color:#252631;font-size:18px;transition:all .3s}.explain_content[data-v-d7eb24d5]{font-family:SourceHanSansCN-Regular;font-size:14px;color:#252631;text-indent:2em;text-align:left}.intro-title[data-v-d7eb24d5]{color:#252631;font-size:14px;margin:0;text-align:left}.list-box[data-v-d7eb24d5]{margin-bottom:4px;font-size:12px;text-align:left;padding:.35rem;border-radius:5px;background-color:#fff;line-height:1.5;color:#666}.cute_icon[data-v-d7eb24d5]{display:inline-block;border-radius:10px 10px 2px;background-image:linear-gradient(45deg,#4a8dff,#7368f2);color:#fff;font-size:12px;padding:0 4px;margin-right:.4rem}.cute_a[data-v-d7eb24d5]{cursor:pointer;width:100%}.custom-scroll[data-v-d7eb24d5]::-webkit-scrollbar{width:8px}.custom-scroll[data-v-d7eb24d5]::-webkit-scrollbar-track{background-color:#dcdee1}.custom-scroll[data-v-d7eb24d5]::-webkit-scrollbar-thumb{background-color:#e4e4e4;border-radius:8px}.custom-scroll[data-v-d7eb24d5]::-webkit-scrollbar-thumb:hover{background-color:#333}