ai-chat-ui-kit 0.1.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 (95) hide show
  1. package/.eslintrc.cjs +74 -0
  2. package/.github/actions/screenshot/action.yml +35 -0
  3. package/.github/workflows/pages.yml +46 -0
  4. package/README.md +285 -0
  5. package/docs/README.md +176 -0
  6. package/docs/api/components.md +344 -0
  7. package/docs/api/core.md +349 -0
  8. package/docs/chat-style-1-minimal.html +78 -0
  9. package/docs/chat-style-2-neon.html +74 -0
  10. package/docs/chat-style-3-glass.html +73 -0
  11. package/docs/chat-style-4-terminal.html +84 -0
  12. package/docs/chat-style-5-gradient.html +69 -0
  13. package/docs/chat-style-6-corporate.html +116 -0
  14. package/docs/examples/basic-chat.md +291 -0
  15. package/docs/examples/custom-plugins.md +431 -0
  16. package/docs/examples/multi-model.md +466 -0
  17. package/docs/guide/api-adapters.md +431 -0
  18. package/docs/guide/getting-started.md +244 -0
  19. package/docs/guide/headless-mode.md +508 -0
  20. package/docs/guide/plugins.md +416 -0
  21. package/docs/guide/themes.md +327 -0
  22. package/docs/index.html +256 -0
  23. package/docs/theme-preview-1-minimal.html +74 -0
  24. package/docs/theme-preview-2-neon.html +73 -0
  25. package/docs/theme-preview-3-glass.html +77 -0
  26. package/docs/theme-preview-4-terminal.html +86 -0
  27. package/docs/theme-preview-5-gradient.html +79 -0
  28. package/docs/theme-preview-6-corporate.html +71 -0
  29. package/examples/index.html +414 -0
  30. package/examples/react-app/App.tsx +131 -0
  31. package/examples/react-app/index.html +12 -0
  32. package/examples/react-app/main.tsx +15 -0
  33. package/examples/react-app/package.json +24 -0
  34. package/examples/vue-app/index.html +12 -0
  35. package/examples/vue-app/package.json +22 -0
  36. package/examples/vue-app/src/App.vue +145 -0
  37. package/examples/vue-app/src/main.ts +9 -0
  38. package/package.json +44 -0
  39. package/packages/components/package.json +25 -0
  40. package/packages/components/src/chat/chat.css +80 -0
  41. package/packages/components/src/chat/chat.ts +236 -0
  42. package/packages/components/src/index.ts +36 -0
  43. package/packages/components/src/input/input.css +52 -0
  44. package/packages/components/src/input/input.ts +116 -0
  45. package/packages/components/src/markdown/markdown.css +118 -0
  46. package/packages/components/src/markdown/markdown.ts +229 -0
  47. package/packages/components/src/message/message.css +56 -0
  48. package/packages/components/src/message/message.ts +72 -0
  49. package/packages/components/src/styles/global.css +43 -0
  50. package/packages/components/src/tool-call/tool-call.css +98 -0
  51. package/packages/components/src/tool-call/tool-call.ts +171 -0
  52. package/packages/components/src/types.ts +55 -0
  53. package/packages/components/src/utils/helpers.ts +128 -0
  54. package/packages/components/tsconfig.json +25 -0
  55. package/packages/components/tsup.config.ts +18 -0
  56. package/packages/core/package.json +47 -0
  57. package/packages/core/pnpm-lock.yaml +2032 -0
  58. package/packages/core/pnpm-workspace.yaml +2 -0
  59. package/packages/core/src/api/adapters.ts +717 -0
  60. package/packages/core/src/api/base.ts +210 -0
  61. package/packages/core/src/api/index.ts +54 -0
  62. package/packages/core/src/index.ts +93 -0
  63. package/packages/core/src/parser/latex.ts +274 -0
  64. package/packages/core/src/parser/markdown.test.ts +58 -0
  65. package/packages/core/src/parser/markdown.ts +206 -0
  66. package/packages/core/src/parser/mermaid.ts +276 -0
  67. package/packages/core/src/plugins/PluginManager.ts +232 -0
  68. package/packages/core/src/plugins/builtin.ts +406 -0
  69. package/packages/core/src/store/ChatStore.ts +163 -0
  70. package/packages/core/src/store/ModelConfigStore.ts +136 -0
  71. package/packages/core/src/store/ToolCallStore.ts +164 -0
  72. package/packages/core/src/store/base.ts +75 -0
  73. package/packages/core/src/types/index.ts +133 -0
  74. package/packages/core/tsup.config.ts +18 -0
  75. package/packages/themes/package.json +33 -0
  76. package/packages/themes/src/corporate/index.ts +52 -0
  77. package/packages/themes/src/corporate/theme.css +228 -0
  78. package/packages/themes/src/glass/index.ts +52 -0
  79. package/packages/themes/src/glass/theme.css +237 -0
  80. package/packages/themes/src/gradient/index.ts +53 -0
  81. package/packages/themes/src/gradient/theme.css +218 -0
  82. package/packages/themes/src/index.ts +13 -0
  83. package/packages/themes/src/minimal/index.ts +52 -0
  84. package/packages/themes/src/minimal/theme.css +198 -0
  85. package/packages/themes/src/neon/index.ts +52 -0
  86. package/packages/themes/src/neon/theme.css +233 -0
  87. package/packages/themes/src/terminal/index.ts +52 -0
  88. package/packages/themes/src/terminal/theme.css +235 -0
  89. package/packages/themes/src/types.ts +10 -0
  90. package/packages/themes/src/vite-env.d.ts +9 -0
  91. package/packages/themes/tsup.config.ts +21 -0
  92. package/pnpm-workspace.yaml +4 -0
  93. package/tsconfig.json +27 -0
  94. package/vite.config.ts +25 -0
  95. package/vitest.config.ts +28 -0
package/examples/index.html ADDED
@@ -0,0 +1,414 @@
1
+ <!--
2
+ @generated-by AI: edenxpzhang
3
+ @generated-date 2026-05-13
4
+ -->
5
+ <!DOCTYPE html>
6
+ <html lang="zh-CN">
7
+ <head>
8
+ <meta charset="UTF-8">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
+ <title>AI Chat UI Kit - 原生 HTML 示例</title>
11
+ <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ html, body {
19
+ height: 100%;
20
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
21
+ }
22
+
23
+ #app {
24
+ height: 100vh;
25
+ display: flex;
26
+ flex-direction: column;
27
+ }
28
+
29
+ .header {
30
+ padding: 16px 24px;
31
+ background: #1677ff;
32
+ color: white;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: space-between;
36
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
37
+ flex-wrap: wrap;
38
+ gap: 12px;
39
+ }
40
+
41
+ .header h1 {
42
+ font-size: 20px;
43
+ font-weight: 600;
44
+ }
45
+
46
+ .theme-selector {
47
+ display: flex;
48
+ gap: 8px;
49
+ flex-wrap: wrap;
50
+ }
51
+
52
+ .theme-btn {
53
+ padding: 6px 16px;
54
+ border: 1px solid rgba(255, 255, 255, 0.5);
55
+ background: transparent;
56
+ color: white;
57
+ border-radius: 4px;
58
+ cursor: pointer;
59
+ font-size: 14px;
60
+ transition: all 0.3s;
61
+ }
62
+
63
+ .theme-btn:hover {
64
+ background: rgba(255, 255, 255, 0.15);
65
+ }
66
+
67
+ .theme-btn.active {
68
+ background: rgba(255, 255, 255, 0.25);
69
+ border-color: white;
70
+ }
71
+
72
+ .chat-container {
73
+ flex: 1;
74
+ height: 0;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body>
79
+ <div id="app">
80
+ <div class="header">
81
+ <h1>🤖 AI Chat UI Kit 示例</h1>
82
+ <div class="theme-selector">
83
+ <button class="theme-btn active" data-theme="minimal">Minimal</button>
84
+ <button class="theme-btn" data-theme="neon">Neon</button>
85
+ <button class="theme-btn" data-theme="glass">Glass</button>
86
+ <button class="theme-btn" data-theme="terminal">Terminal</button>
87
+ <button class="theme-btn" data-theme="gradient">Gradient</button>
88
+ <button class="theme-btn" data-theme="corporate">Corporate</button>
89
+ </div>
90
+ </div>
91
+
92
+ <div class="chat-container">
93
+ <ai-chat id="chat"></ai-chat>
94
+ </div>
95
+ </div>
96
+
97
+ <script>
98
+ // 主题配置
99
+ const themes = {
100
+ minimal: {
101
+ name: 'minimal',
102
+ variables: {
103
+ '--ai-primary': '#0071e3',
104
+ '--ai-bg-chat': '#f5f5f7',
105
+ '--ai-message-user-bg': '#0071e3',
106
+ '--ai-message-ai-bg': '#e5e5ea',
107
+ '--ai-text-primary': '#1d1d1f',
108
+ }
109
+ },
110
+ neon: {
111
+ name: 'neon',
112
+ variables: {
113
+ '--ai-primary': '#7f5af0',
114
+ '--ai-bg-chat': '#0a0a0a',
115
+ '--ai-message-user-bg': 'linear-gradient(135deg, #7f5af0, #ff006e)',
116
+ '--ai-message-ai-bg': '#16213e',
117
+ '--ai-text-primary': '#00ffff',
118
+ }
119
+ },
120
+ glass: {
121
+ name: 'glass',
122
+ variables: {
123
+ '--ai-primary': 'rgba(102, 126, 234, 0.6)',
124
+ '--ai-bg-chat': 'transparent',
125
+ '--ai-message-user-bg': 'rgba(102, 126, 234, 0.6)',
126
+ '--ai-message-ai-bg': 'rgba(255, 255, 255, 0.4)',
127
+ '--ai-text-primary': '#ffffff',
128
+ }
129
+ },
130
+ terminal: {
131
+ name: 'terminal',
132
+ variables: {
133
+ '--ai-primary': '#00ff00',
134
+ '--ai-bg-chat': '#0a0a0a',
135
+ '--ai-message-user-bg': 'transparent',
136
+ '--ai-message-ai-bg': 'transparent',
137
+ '--ai-text-primary': '#00ff00',
138
+ }
139
+ },
140
+ gradient: {
141
+ name: 'gradient',
142
+ variables: {
143
+ '--ai-primary': 'linear-gradient(135deg, #f093fb, #f5576c)',
144
+ '--ai-bg-chat': '#ffffff',
145
+ '--ai-message-user-bg': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
146
+ '--ai-message-ai-bg': '#ffffff',
147
+ '--ai-text-primary': '#333333',
148
+ },
149
+ bodyBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 25%, #4facfe 50%, #00f2fe 75%, #43e97b 100%)'
150
+ },
151
+ corporate: {
152
+ name: 'corporate',
153
+ variables: {
154
+ '--ai-primary': '#1890ff',
155
+ '--ai-bg-chat': '#fafafa',
156
+ '--ai-message-user-bg': '#1890ff',
157
+ '--ai-message-ai-bg': '#ffffff',
158
+ '--ai-text-primary': '#333333',
159
+ }
160
+ }
161
+ };
162
+
163
+ // 应用主题
164
+ function applyTheme(themeName) {
165
+ const theme = themes[themeName];
166
+ if (!theme) return;
167
+
168
+ const root = document.documentElement;
169
+ Object.entries(theme.variables).forEach(([key, value]) => {
170
+ root.style.setProperty(key, value);
171
+ });
172
+
173
+ // 设置/清除 body 背景（gradient 主题专用）
174
+ if (theme.bodyBg) {
175
+ document.body.style.background = theme.bodyBg;
176
+ } else {
177
+ document.body.style.background = '';
178
+ }
179
+
180
+ // 更新按钮状态
181
+ document.querySelectorAll('.theme-btn').forEach(btn => {
182
+ btn.classList.toggle('active', btn.dataset.theme === themeName);
183
+ });
184
+
185
+ console.log(`已切换到 ${theme.name} 主题`);
186
+ }
187
+
188
+ // 绑定主题切换按钮
189
+ document.querySelectorAll('.theme-btn').forEach(btn => {
190
+ btn.addEventListener('click', () => {
191
+ applyTheme(btn.dataset.theme);
192
+ });
193
+ });
194
+
195
+ // 模拟 AI Chat 组件
196
+ class AIChat extends HTMLElement {
197
+ constructor() {
198
+ super();
199
+ this.attachShadow({ mode: 'open' });
200
+ this.messages = [
201
+ { role: 'assistant', content: '你好！我是 AI 助手，有什么可以帮助你的吗？' }
202
+ ];
203
+ this.render();
204
+ }
205
+
206
+ render() {
207
+ const messagesHTML = this.messages.map(msg => {
208
+ const isUser = msg.role === 'user';
209
+ return `
210
+ <div class="ai-message ${isUser ? 'ai-message--user' : 'ai-message--assistant'}">
211
+ <div class="ai-message__avatar">${isUser ? '我' : 'AI'}</div>
212
+ <div class="ai-message__content">${msg.content}</div>
213
+ </div>
214
+ `;
215
+ }).join('');
216
+
217
+ this.shadowRoot.innerHTML = `
218
+ <style>
219
+ :host {
220
+ display: flex;
221
+ flex-direction: column;
222
+ height: 100%;
223
+ background: var(--ai-bg-chat, #f0f2f5);
224
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
225
+ }
226
+
227
+ .messages {
228
+ flex: 1;
229
+ overflow-y: auto;
230
+ padding: 16px;
231
+ display: flex;
232
+ flex-direction: column;
233
+ gap: 12px;
234
+ }
235
+
236
+ .ai-message {
237
+ display: flex;
238
+ gap: 8px;
239
+ max-width: 80%;
240
+ animation: fadeIn 0.3s ease-out;
241
+ }
242
+
243
+ .ai-message--user {
244
+ flex-direction: row-reverse;
245
+ margin-left: auto;
246
+ }
247
+
248
+ .ai-message--assistant {
249
+ margin-right: auto;
250
+ }
251
+
252
+ .ai-message__avatar {
253
+ width: 36px;
254
+ height: 36px;
255
+ border-radius: 50%;
256
+ flex-shrink: 0;
257
+ display: flex;
258
+ align-items: center;
259
+ justify-content: center;
260
+ font-size: 14px;
261
+ background: var(--ai-primary, #1677ff);
262
+ color: white;
263
+ }
264
+
265
+ .ai-message--assistant .ai-message__avatar {
266
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
267
+ }
268
+
269
+ .ai-message__content {
270
+ padding: 12px 16px;
271
+ border-radius: 12px;
272
+ line-height: 1.6;
273
+ word-break: break-word;
274
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
275
+ }
276
+
277
+ .ai-message--user .ai-message__content {
278
+ background: var(--ai-message-user-bg, #1677ff);
279
+ color: white;
280
+ border-top-right-radius: 4px;
281
+ }
282
+
283
+ .ai-message--assistant .ai-message__content {
284
+ background: var(--ai-message-ai-bg, #ffffff);
285
+ color: var(--ai-text-primary, rgba(0, 0, 0, 0.88));
286
+ border: 1px solid #e8e8e8;
287
+ border-top-left-radius: 4px;
288
+ }
289
+
290
+ .input-area {
291
+ padding: 16px;
292
+ background: white;
293
+ border-top: 1px solid #e8e8e8;
294
+ }
295
+
296
+ .input-wrapper {
297
+ display: flex;
298
+ gap: 8px;
299
+ align-items: flex-end;
300
+ background: white;
301
+ border: 1px solid #d9d9d9;
302
+ border-radius: 8px;
303
+ padding: 8px 12px;
304
+ transition: border-color 0.3s;
305
+ }
306
+
307
+ .input-wrapper:focus-within {
308
+ border-color: var(--ai-primary, #1677ff);
309
+ box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
310
+ }
311
+
312
+ textarea {
313
+ flex: 1;
314
+ border: none;
315
+ outline: none;
316
+ resize: none;
317
+ font-size: 14px;
318
+ line-height: 1.6;
319
+ min-height: 24px;
320
+ max-height: 120px;
321
+ font-family: inherit;
322
+ padding: 0;
323
+ background: transparent;
324
+ }
325
+
326
+ button {
327
+ background: var(--ai-primary, #1677ff);
328
+ color: white;
329
+ border: none;
330
+ border-radius: 8px;
331
+ padding: 8px 20px;
332
+ cursor: pointer;
333
+ font-size: 14px;
334
+ transition: background 0.3s;
335
+ flex-shrink: 0;
336
+ }
337
+
338
+ button:hover {
339
+ opacity: 0.85;
340
+ }
341
+
342
+ @keyframes fadeIn {
343
+ from {
344
+ opacity: 0;
345
+ transform: translateY(10px);
346
+ }
347
+ to {
348
+ opacity: 1;
349
+ transform: translateY(0);
350
+ }
351
+ }
352
+ </style>
353
+ <div class="messages" id="messages">
354
+ ${messagesHTML}
355
+ </div>
356
+ <div class="input-area">
357
+ <div class="input-wrapper">
358
+ <textarea id="input" rows="1" placeholder="输入消息..."></textarea>
359
+ <button id="sendBtn">发送</button>
360
+ </div>
361
+ </div>
362
+ `;
363
+
364
+ this.bindEvents();
365
+ this.scrollToBottom();
366
+ }
367
+
368
+ bindEvents() {
369
+ const input = this.shadowRoot.getElementById('input');
370
+ const sendBtn = this.shadowRoot.getElementById('sendBtn');
371
+ const messages = this.shadowRoot.getElementById('messages');
372
+
373
+ const sendMessage = () => {
374
+ const text = input.value.trim();
375
+ if (!text) return;
376
+
377
+ this.messages.push({ role: 'user', content: text });
378
+ input.value = '';
379
+ this.render();
380
+
381
+ setTimeout(() => {
382
+ this.messages.push({
383
+ role: 'assistant',
384
+ content: `收到你的消息："${text}"。这是 AI 的回复。`
385
+ });
386
+ this.render();
387
+ }, 1000);
388
+ };
389
+
390
+ sendBtn.addEventListener('click', sendMessage);
391
+ input.addEventListener('keydown', (e) => {
392
+ if (e.key === 'Enter' && !e.shiftKey) {
393
+ e.preventDefault();
394
+ sendMessage();
395
+ }
396
+ });
397
+ }
398
+
399
+ scrollToBottom() {
400
+ const messages = this.shadowRoot.getElementById('messages');
401
+ if (messages) {
402
+ messages.scrollTop = messages.scrollHeight;
403
+ }
404
+ }
405
+ }
406
+
407
+ // 注册组件
408
+ customElements.define('ai-chat', AIChat);
409
+
410
+ console.log('✅ AI Chat 组件已加载');
411
+ console.log('💡 点击右上角按钮切换主题');
412
+ </script>
413
+ </body>
414
+ </html>
package/examples/react-app/App.tsx ADDED
@@ -0,0 +1,131 @@
1
+ /**
2
+ * @generated-by AI: edenxpzhang
3
+ * @generated-date 2026-05-13
4
+ */
5
+
6
+ import React, { useEffect, useRef, useState } from 'react';
7
+ import '@ai-chat/components';
8
+ import '@ai-chat/themes/default';
9
+
10
+ const ChatApp: React.FC = () => {
11
+ const chatRef = useRef<HTMLElement>(null);
12
+ const [theme, setTheme] = useState<'default' | 'bubble' | 'flat'>('default');
13
+
14
+ useEffect(() => {
15
+ if (chatRef.current) {
16
+ // 设置消息处理回调
17
+ (chatRef.current as any).setMessageHandler(async (message: string) => {
18
+ // 模拟 AI 回复延迟
19
+ await new Promise(resolve => setTimeout(resolve, 1000));
20
+ return `AI 回复：${message}`;
21
+ });
22
+
23
+ // 添加欢迎消息
24
+ (chatRef.current as any).addMessage({
25
+ role: 'assistant',
26
+ content: '你好！我是 AI 助手。有什么可以帮助你的吗？'
27
+ });
28
+ }
29
+ }, []);
30
+
31
+ // 切换主题
32
+ const handleThemeChange = (newTheme: 'default' | 'bubble' | 'flat') => {
33
+ setTheme(newTheme);
34
+ // 在实际使用中，这里应该动态加载对应的主题 CSS
35
+ console.log(`切换到 ${newTheme} 主题`);
36
+ // 可以通过动态导入实现：
37
+ // import(`@ai-chat/themes/${newTheme}`);
38
+ };
39
+
40
+ return (
41
+ <div style={styles.container}>
42
+ <header style={styles.header}>
43
+ <h1 style={styles.title}>🤖 AI Chat - React 示例</h1>
44
+ <div style={styles.themeButtons}>
45
+ <button
46
+ style={{
47
+ ...styles.themeBtn,
48
+ ...(theme === 'default' ? styles.themeBtnActive : {}),
49
+ }}
50
+ onClick={() => handleThemeChange('default')}
51
+ >
52
+ 默认主题
53
+ </button>
54
+ <button
55
+ style={{
56
+ ...styles.themeBtn,
57
+ ...(theme === 'bubble' ? styles.themeBtnActive : {}),
58
+ }}
59
+ onClick={() => handleThemeChange('bubble')}
60
+ >
61
+ 气泡主题
62
+ </button>
63
+ <button
64
+ style={{
65
+ ...styles.themeBtn,
66
+ ...(theme === 'flat' ? styles.themeBtnActive : {}),
67
+ }}
68
+ onClick={() => handleThemeChange('flat')}
69
+ >
70
+ 扁平主题
71
+ </button>
72
+ </div>
73
+ </header>
74
+ <main style={styles.chatContainer}>
75
+ <ai-chat ref={chatRef} style={styles.chat}></ai-chat>
76
+ </main>
77
+ </div>
78
+ );
79
+ };
80
+
81
+ const styles: Record<string, React.CSSProperties> = {
82
+ container: {
83
+ height: '100vh',
84
+ display: 'flex',
85
+ flexDirection: 'column',
86
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
87
+ },
88
+ header: {
89
+ padding: '16px 24px',
90
+ background: '#1677ff',
91
+ color: 'white',
92
+ display: 'flex',
93
+ alignItems: 'center',
94
+ justifyContent: 'space-between',
95
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
96
+ },
97
+ title: {
98
+ fontSize: '20px',
99
+ fontWeight: 600,
100
+ margin: 0,
101
+ },
102
+ themeButtons: {
103
+ display: 'flex',
104
+ gap: '8px',
105
+ },
106
+ themeBtn: {
107
+ padding: '6px 16px',
108
+ border: '1px solid rgba(255, 255, 255, 0.5)',
109
+ background: 'transparent',
110
+ color: 'white',
111
+ borderRadius: '4px',
112
+ cursor: 'pointer',
113
+ fontSize: '14px',
114
+ transition: 'all 0.3s',
115
+ },
116
+ themeBtnActive: {
117
+ background: 'rgba(255, 255, 255, 0.25)',
118
+ borderColor: 'white',
119
+ },
120
+ chatContainer: {
121
+ flex: 1,
122
+ height: 0,
123
+ overflow: 'hidden',
124
+ },
125
+ chat: {
126
+ height: '100%',
127
+ display: 'block',
128
+ },
129
+ };
130
+
131
+ export default ChatApp;
package/examples/react-app/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>AI Chat - React Example</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <script type="module" src="/src/main.tsx"></script>
11
+ </body>
12
+ </html>
package/examples/react-app/main.tsx ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * @generated-by AI: edenxpzhang
3
+ * @generated-date 2026-05-13
4
+ */
5
+
6
+ import React from 'react';
7
+ import ReactDOM from 'react-dom/client';
8
+ import App from './App';
9
+ import './index.css';
10
+
11
+ ReactDOM.createRoot(document.getElementById('root')!).render(
12
+ <React.StrictMode>
13
+ <App />
14
+ </React.StrictMode>
15
+ );
package/examples/react-app/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "ai-chat-react-example",
3
+ "version": "0.1.0",
4
+ "private": true,
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "tsc && vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "dependencies": {
12
+ "@ai-chat/components": "^0.1.0",
13
+ "@ai-chat/themes": "^0.1.0",
14
+ "react": "^18.2.0",
15
+ "react-dom": "^18.2.0"
16
+ },
17
+ "devDependencies": {
18
+ "@types/react": "^18.2.0",
19
+ "@types/react-dom": "^18.2.0",
20
+ "@vitejs/plugin-react": "^4.0.0",
21
+ "typescript": "^5.0.0",
22
+ "vite": "^4.0.0"
23
+ }
24
+ }
package/examples/vue-app/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>AI Chat - Vue Example</title>
7
+ </head>
8
+ <body>
9
+ <div id="app"></div>
10
+ <script type="module" src="/src/main.ts"></script>
11
+ </body>
12
+ </html>
package/examples/vue-app/package.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "name": "ai-chat-vue-example",
3
+ "version": "0.1.0",
4
+ "private": true,
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vue-tsc && vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "dependencies": {
12
+ "@ai-chat/components": "^0.1.0",
13
+ "@ai-chat/themes": "^0.1.0",
14
+ "vue": "^3.3.0"
15
+ },
16
+ "devDependencies": {
17
+ "@vitejs/plugin-vue": "^4.0.0",
18
+ "typescript": "^5.0.0",
19
+ "vite": "^4.0.0",
20
+ "vue-tsc": "^1.0.0"
21
+ }
22
+ }