dchat-vue 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +146 -0
  2. package/dist/dchat-vue.css +1 -0
  3. package/dist/dchat-vue.js +704 -0
  4. package/dist/dchat-vue.umd.cjs +2 -0
  5. package/package.json +55 -0
package/README.md ADDED
@@ -0,0 +1,146 @@
1
+ # dchat-vue
2
+
3
+ A Vue 3 chat dialog component that displays in the bottom right corner of the screen.
4
+
5
+ ## Features
6
+
7
+ - Default positioning in the bottom right corner
8
+ - Click to open/close chat dialog
9
+ - Customizable bottom and right positioning via props
10
+ - Integration with Element Plus UI library
11
+ - Support for AI chat functionality
12
+ - Responsive design
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install dchat-vue
18
+ ```
19
+
20
+ ## Usage
21
+
22
+ ### Basic Usage
23
+
24
+ ```vue
25
+ <template>
26
+ <div>
27
+ <ChatDialog
28
+ title="在线客服"
29
+ :username="'user123'"
30
+ :bottom="50"
31
+ :right="20"
32
+ :marker="'your-marker'"
33
+ />
34
+ </div>
35
+ </template>
36
+
37
+ <script setup>
38
+ import { ChatDialog } from 'dchat-vue'
39
+ import 'dchat-vue/dist/style.css'
40
+ </script>
41
+ ```
42
+
43
+ ### With Element Plus
44
+
45
+ ```vue
46
+ <template>
47
+ <div>
48
+ <ChatDialog
49
+ title="智能助手"
50
+ :default-open="true"
51
+ :bottom="100"
52
+ :right="50"
53
+ />
54
+ </div>
55
+ </template>
56
+
57
+ <script setup>
58
+ import { ChatDialog } from 'dchat-vue'
59
+ import 'dchat-vue/dist/style.css'
60
+ // Import Element Plus styles if not already imported
61
+ import 'element-plus/dist/index.css'
62
+ </script>
63
+ ```
64
+
65
+ ## Props
66
+
67
+ | Name | Type | Default | Description |
68
+ |------|------|---------|-------------|
69
+ | title | String | "在线客服" | The title of the chat dialog |
70
+ | username | String | "" | The username of the current user |
71
+ | defaultOpen | Boolean | false | Whether the dialog is open by default |
72
+ | bottom | Number | 50 | Distance from the bottom of the screen (px) |
73
+ | right | Number | 20 | Distance from the right of the screen (px) |
74
+ | marker | String | "" | A marker to identify different chat instances |
75
+
76
+ ## Events
77
+
78
+ | Name | Description |
79
+ |------|-------------|
80
+ | open | Emitted when the chat dialog is opened |
81
+ | close | Emitted when the chat dialog is closed |
82
+
83
+ ## Project Structure
84
+
85
+ ```
86
+ .
87
+ ├── src/
88
+ │ ├── components/
89
+ │ │ ├── ChatDialog.vue # Main chat component
90
+ │ │ ├── ChatMessage.vue # Message component
91
+ │ │ ├── TryToAsk.vue # Suggested questions component
92
+ │ │ └── index.js # Component exports
93
+ │ ├── utils/
94
+ │ │ ├── httpClient.js # HTTP utilities
95
+ │ │ └── index.js # Utility functions
96
+ │ └── main.js # Entry point
97
+ ├── vite.config.js # Vite configuration
98
+ ├── package.json # Package configuration
99
+ └── README.md # This file
100
+ ```
101
+
102
+ ## Development
103
+
104
+ ```bash
105
+ # Install dependencies
106
+ npm install
107
+
108
+ # Start development server
109
+ npm run dev
110
+
111
+ # Build for production
112
+ npm run build
113
+
114
+ # Preview production build
115
+ npm run preview
116
+ ```
117
+
118
+ ## Build
119
+
120
+ ```bash
121
+ npm run build
122
+ ```
123
+
124
+ This will generate the following files in the `dist` directory:
125
+
126
+ - `dchat-vue.js` - ESM build
127
+ - `dchat-vue.umd.cjs` - UMD build
128
+ - `style.css` - Component styles
129
+
130
+ ## Dependencies
131
+
132
+ - Vue 3 - ^3.5.0
133
+ - Element Plus - ^2.12.0
134
+ - @element-plus/icons-vue - ^2.3.2
135
+ - @microsoft/fetch-event-source - ^2.0.1
136
+
137
+ ## Browser Support
138
+
139
+ - Chrome (latest)
140
+ - Firefox (latest)
141
+ - Safari (latest)
142
+ - Edge (latest)
143
+
144
+ ## License
145
+
146
+ MIT
package/dist/dchat-vue.css ADDED
@@ -0,0 +1 @@
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}