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/docs/chat-style-1-minimal.html ADDED
@@ -0,0 +1,78 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="zh-CN">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Style 1: Minimal Clean - AI Chat UI</title>
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f7; height: 100vh; display: flex; justify-content: center; align-items: center; }
11
+ .chat-container { width: 400px; height: 700px; background: white; border-radius: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; }
12
+ .chat-header { padding: 20px; background: white; border-bottom: 1px solid #e5e5ea; display: flex; align-items: center; gap: 12px; }
13
+ .chat-header img { width: 40px; height: 40px; border-radius: 50%; }
14
+ .chat-header h3 { font-size: 16px; font-weight: 600; color: #1d1d1f; }
15
+ .chat-header p { font-size: 12px; color: #86868b; }
16
+ .chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
17
+ .message { max-width: 75%; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.5; }
18
+ .message.user { align-self: flex-end; background: #0071e3; color: white; border-bottom-right-radius: 6px; }
19
+ .message.ai { align-self: flex-start; background: #e5e5ea; color: #1d1d1f; border-bottom-left-radius: 6px; }
20
+ .chat-input { padding: 16px 20px; background: white; border-top: 1px solid #e5e5ea; display: flex; gap: 12px; align-items: center; }
21
+ .chat-input input { flex: 1; padding: 12px 16px; border: 1px solid #e5e5ea; border-radius: 20px; font-size: 14px; outline: none; transition: border-color 0.2s; }
22
+ .chat-input input:focus { border-color: #0071e3; }
23
+ .chat-input button { width: 40px; height: 40px; border: none; background: #0071e3; color: white; border-radius: 50%; cursor: pointer; font-size: 18px; transition: transform 0.2s; }
24
+ .chat-input button:hover { transform: scale(1.05); }
25
+ .typing { display: flex; gap: 4px; padding: 12px 16px; }
26
+ .typing span { width: 6px; height: 6px; background: #86868b; border-radius: 50%; animation: typing 1.4s infinite; }
27
+ .typing span:nth-child(2) { animation-delay: 0.2s; }
28
+ .typing span:nth-child(3) { animation-delay: 0.4s; }
29
+ @keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
30
+ </style>
31
+ </head>
32
+ <body>
33
+ <div class="chat-container">
34
+ <div class="chat-header">
35
+ <div style="width:40px;height:40px;background:linear-gradient(135deg,#0071e3,#42a4ff);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:18px;">🤖</div>
36
+ <div>
37
+ <h3>AI Assistant</h3>
38
+ <p>在线 · 随时为您服务</p>
39
+ </div>
40
+ </div>
41
+ <div class="chat-messages" id="messages">
42
+ <div class="message ai">您好！我是 AI 助手，有什么可以帮您的吗？😊</div>
43
+ </div>
44
+ <div class="chat-input">
45
+ <input type="text" id="input" placeholder="输入消息..." onkeypress="if(event.key==='Enter')sendMessage()">
46
+ <button onclick="sendMessage()">↑</button>
47
+ </div>
48
+ </div>
49
+ <script>
50
+ const responses = [
51
+ '这是一个很好的问题！让我想想...',
52
+ '根据我的分析，我认为...',
53
+ '当然可以！我很乐意帮助您。',
54
+ '有趣的观点！从另一个角度来看...',
55
+ '让我为您详细解释一下。'
56
+ ];
57
+ function sendMessage() {
58
+ const input = document.getElementById('input');
59
+ const text = input.value.trim();
60
+ if (!text) return;
61
+ const messages = document.getElementById('messages');
62
+ messages.innerHTML += `<div class="message user">${text}</div>`;
63
+ input.value = '';
64
+ setTimeout(() => {
65
+ messages.innerHTML += `<div class="typing"><span></span><span></span><span></span></div>`;
66
+ messages.scrollTop = messages.scrollHeight;
67
+ setTimeout(() => {
68
+ messages.querySelector('.typing').remove();
69
+ const reply = responses[Math.floor(Math.random() * responses.length)];
70
+ messages.innerHTML += `<div class="message ai">${reply}</div>`;
71
+ messages.scrollTop = messages.scrollHeight;
72
+ }, 1500);
73
+ }, 500);
74
+ messages.scrollTop = messages.scrollHeight;
75
+ }
76
+ </script>
77
+ </body>
78
+ </html>
package/docs/chat-style-2-neon.html ADDED
@@ -0,0 +1,74 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="zh-CN">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Style 2: Dark Neon - AI Chat UI</title>
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+ body { font-family: 'Courier New', monospace; background: #0a0a0a; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; }
11
+ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 50%, rgba(120,0,255,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(0,255,255,0.1) 0%, transparent 50%); z-index: 0; pointer-events: none; }
12
+ .chat-container { width: 450px; height: 700px; background: #1a1a2e; border-radius: 16px; border: 1px solid #16213e; display: flex; flex-direction: column; position: relative; z-index: 1; box-shadow: 0 0 30px rgba(120,0,255,0.3), 0 0 60px rgba(0,255,255,0.1); }
13
+ .chat-header { padding: 20px; background: linear-gradient(135deg, #16213e, #1a1a2e); border-bottom: 2px solid #0f3460; display: flex; align-items: center; gap: 12px; }
14
+ .chat-header h3 { font-size: 16px; font-weight: 600; color: #00ffff; text-shadow: 0 0 10px rgba(0,255,255,0.5); }
15
+ .chat-header p { font-size: 12px; color: #7f5af0; }
16
+ .status-dot { width: 8px; height: 8px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; }
17
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
18
+ .chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
19
+ .chat-messages::-webkit-scrollbar { width: 6px; }
20
+ .chat-messages::-webkit-scrollbar-thumb { background: #7f5af0; border-radius: 3px; }
21
+ .message { max-width: 80%; padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.6; position: relative; }
22
+ .message.user { align-self: flex-end; background: linear-gradient(135deg, #7f5af0, #ff006e); color: white; border: 1px solid rgba(127,90,240,0.5); box-shadow: 0 0 20px rgba(127,90,240,0.3); }
23
+ .message.ai { align-self: flex-start; background: #16213e; color: #00ffff; border: 1px solid rgba(0,255,255,0.3); box-shadow: 0 0 15px rgba(0,255,255,0.1); }
24
+ .message.ai::before { content: '⚡'; position: absolute; left: -25px; top: 50%; transform: translateY(-50%); font-size: 16px; }
25
+ .chat-input { padding: 16px 20px; background: #16213e; border-top: 2px solid #0f3460; display: flex; gap: 12px; }
26
+ .chat-input input { flex: 1; padding: 12px 16px; background: #1a1a2e; border: 2px solid #7f5af0; border-radius: 12px; color: #00ffff; font-family: inherit; font-size: 14px; outline: none; transition: all 0.3s; }
27
+ .chat-input input:focus { border-color: #00ffff; box-shadow: 0 0 15px rgba(0,255,255,0.3); }
28
+ .chat-input input::placeholder { color: #7f5af0; }
29
+ .chat-input button { padding: 12px 24px; background: linear-gradient(135deg, #7f5af0, #ff006e); border: none; color: white; border-radius: 12px; cursor: pointer; font-weight: 600; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
30
+ .chat-input button:hover { box-shadow: 0 0 20px rgba(127,90,240,0.5); transform: translateY(-2px); }
31
+ .neon-text { color: #00ffff; text-shadow: 0 0 10px rgba(0,255,255,0.7); }
32
+ </style>
33
+ </head>
34
+ <body>
35
+ <div class="chat-container">
36
+ <div class="chat-header">
37
+ <div class="status-dot"></div>
38
+ <div>
39
+ <h3 class="neon-text">⚡ NEON AI</h3>
40
+ <p>● SYSTEM ONLINE</p>
41
+ </div>
42
+ </div>
43
+ <div class="chat-messages" id="messages">
44
+ <div class="message ai">> SYSTEM READY<br>> 您好，我是 Neon AI<br>> 随时准备为您服务_</div>
45
+ </div>
46
+ <div class="chat-input">
47
+ <input type="text" id="input" placeholder="> 输入命令..." onkeypress="if(event.key==='Enter')sendMessage()">
48
+ <button onclick="sendMessage()">SEND ▸</button>
49
+ </div>
50
+ </div>
51
+ <script>
52
+ const responses = [
53
+ '> 处理中...<br>> 根据数据分析，我认为...',
54
+ '> 收到指令<br>> 当然可以！让我为您处理。',
55
+ '> 正在计算...<br>> 有趣的问题！从技术角度分析...',
56
+ '> 系统分析中...<br>> 让我为您详细解释。'
57
+ ];
58
+ function sendMessage() {
59
+ const input = document.getElementById('input');
60
+ const text = input.value.trim();
61
+ if (!text) return;
62
+ const messages = document.getElementById('messages');
63
+ messages.innerHTML += `<div class="message user">> ${text}</div>`;
64
+ input.value = '';
65
+ setTimeout(() => {
66
+ const reply = responses[Math.floor(Math.random() * responses.length)];
67
+ messages.innerHTML += `<div class="message ai">${reply}</div>`;
68
+ messages.scrollTop = messages.scrollHeight;
69
+ }, 1000);
70
+ messages.scrollTop = messages.scrollHeight;
71
+ }
72
+ </script>
73
+ </body>
74
+ </html>
package/docs/chat-style-3-glass.html ADDED
@@ -0,0 +1,73 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="zh-CN">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Style 3: Glassmorphism - AI Chat UI</title>
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+ body { font-family: 'Segoe UI', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; overflow: hidden; }
11
+ body::before { content: ''; position: absolute; width: 400px; height: 400px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; top: -100px; left: -100px; filter: blur(60px); }
12
+ body::after { content: ''; position: absolute; width: 350px; height: 350px; background: rgba(255, 200, 200, 0.3); border-radius: 50%; bottom: -80px; right: -80px; filter: blur(60px); }
13
+ .chat-container { width: 420px; height: 700px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.5); display: flex; flex-direction: column; position: relative; z-index: 1; box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); }
14
+ .chat-header { padding: 24px; background: rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.5); display: flex; align-items: center; gap: 14px; border-radius: 24px 24px 0 0; }
15
+ .chat-header h3 { font-size: 18px; font-weight: 600; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
16
+ .chat-header p { font-size: 13px; color: rgba(255, 255, 255, 0.8); }
17
+ .avatar { width: 45px; height: 45px; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; border: 2px solid rgba(255, 255, 255, 0.6); }
18
+ .chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
19
+ .chat-messages::-webkit-scrollbar { width: 6px; }
20
+ .chat-messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5); border-radius: 3px; }
21
+ .message { max-width: 78%; padding: 14px 18px; border-radius: 20px; font-size: 14px; line-height: 1.6; backdrop-filter: blur(10px); }
22
+ .message.user { align-self: flex-end; background: rgba(102, 126, 234, 0.6); color: white; border: 1px solid rgba(255, 255, 255, 0.4); border-bottom-right-radius: 8px; }
23
+ .message.ai { align-self: flex-start; background: rgba(255, 255, 255, 0.4); color: #333; border: 1px solid rgba(255, 255, 255, 0.6); border-bottom-left-radius: 8px; }
24
+ .chat-input { padding: 16px 20px; background: rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.5); display: flex; gap: 12px; border-radius: 0 0 24px 24px; }
25
+ .chat-input input { flex: 1; padding: 12px 18px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; color: white; font-size: 14px; outline: none; }
26
+ .chat-input input::placeholder { color: rgba(255, 255, 255, 0.7); }
27
+ .chat-input input:focus { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.8); }
28
+ .chat-input button { width: 44px; height: 44px; background: rgba(102, 126, 234, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); color: white; border-radius: 50%; cursor: pointer; font-size: 18px; transition: all 0.3s; }
29
+ .chat-input button:hover { background: rgba(102, 126, 234, 0.8); transform: scale(1.05); }
30
+ </style>
31
+ </head>
32
+ <body>
33
+ <div class="chat-container">
34
+ <div class="chat-header">
35
+ <div class="avatar">✨</div>
36
+ <div>
37
+ <h3>Glass AI</h3>
38
+ <p>透明 · 优雅 · 智能</p>
39
+ </div>
40
+ </div>
41
+ <div class="chat-messages" id="messages">
42
+ <div class="message ai">您好！我是 Glass AI，采用最新的毛玻璃设计风格。有什么可以帮您的吗？✨</div>
43
+ </div>
44
+ <div class="chat-input">
45
+ <input type="text" id="input" placeholder="输入消息..." onkeypress="if(event.key==='Enter')sendMessage()">
46
+ <button onclick="sendMessage()">➤</button>
47
+ </div>
48
+ </div>
49
+ <script>
50
+ const responses = [
51
+ '这是一个很好的问题！让我为您详细解答。',
52
+ '当然可以！我很乐意帮助您解决这个问题。',
53
+ '有趣的观点！让我从多个角度为您分析。',
54
+ '感谢您的提问！根据我的分析...',
55
+ '好的，让我为您处理这个请求。'
56
+ ];
57
+ function sendMessage() {
58
+ const input = document.getElementById('input');
59
+ const text = input.value.trim();
60
+ if (!text) return;
61
+ const messages = document.getElementById('messages');
62
+ messages.innerHTML += `<div class="message user">${text}</div>`;
63
+ input.value = '';
64
+ setTimeout(() => {
65
+ const reply = responses[Math.floor(Math.random() * responses.length)];
66
+ messages.innerHTML += `<div class="message ai">${reply}</div>`;
67
+ messages.scrollTop = messages.scrollHeight;
68
+ }, 800);
69
+ messages.scrollTop = messages.scrollHeight;
70
+ }
71
+ </script>
72
+ </body>
73
+ </html>
package/docs/chat-style-4-terminal.html ADDED
@@ -0,0 +1,84 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="zh-CN">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Style 4: Retro Terminal - AI Chat UI</title>
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+ body { font-family: 'Courier New', monospace; background: #0c0c0c; height: 100vh; display: flex; justify-content: center; align-items: center; }
11
+ .scanline { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0, 255, 0, 0.03) 0px, rgba(0, 255, 0, 0.03) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 100; }
12
+ .chat-container { width: 650px; height: 720px; background: #0a0a0a; border: 2px solid #00ff00; border-radius: 8px; display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(0, 255, 0, 0.3), inset 0 0 30px rgba(0, 255, 0, 0.05); position: relative; }
13
+ .chat-header { padding: 16px 20px; background: #0a0a0a; border-bottom: 1px solid #00ff00; display: flex; align-items: center; gap: 12px; }
14
+ .terminal-icon { color: #00ff00; font-size: 20px; animation: blink 1s infinite; }
15
+ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
16
+ .chat-header h3 { font-size: 14px; font-weight: normal; color: #00ff00; letter-spacing: 2px; }
17
+ .chat-header p { font-size: 11px; color: #008000; }
18
+ .chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
19
+ .chat-messages::-webkit-scrollbar { width: 8px; }
20
+ .chat-messages::-webkit-scrollbar-thumb { background: #00ff00; border-radius: 0; }
21
+ .chat-messages::-webkit-scrollbar-track { background: #0a0a0a; }
22
+ .message { font-size: 13px; line-height: 1.6; padding: 8px 0; border-left: 2px solid transparent; padding-left: 12px; }
23
+ .message.user { color: #00ffff; border-left-color: #00ffff; }
24
+ .message.ai { color: #00ff00; border-left-color: #00ff00; }
25
+ .message .prefix { font-weight: bold; margin-right: 8px; }
26
+ .chat-input { padding: 16px 20px; background: #0a0a0a; border-top: 1px solid #00ff00; display: flex; gap: 12px; align-items: center; }
27
+ .prompt { color: #00ff00; font-size: 14px; }
28
+ .chat-input input { flex: 1; background: transparent; border: none; color: #00ff00; font-family: 'Courier New', monospace; font-size: 14px; outline: none; caret-color: #00ff00; }
29
+ .chat-input input::placeholder { color: #006600; }
30
+ .chat-input button { background: transparent; border: 1px solid #00ff00; color: #00ff00; padding: 8px 16px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: 2px; transition: all 0.3s; }
31
+ .chat-input button:hover { background: #00ff00; color: #0a0a0a; }
32
+ .ascii-art { color: #00ff00; font-size: 10px; line-height: 1.2; white-space: pre; }
33
+ </style>
34
+ </head>
35
+ <body>
36
+ <div class="scanline"></div>
37
+ <div class="chat-container">
38
+ <div class="chat-header">
39
+ <span class="terminal-icon">●</span>
40
+ <div>
41
+ <h3>█ AI TERMINAL v2.0 █</h3>
42
+ <p>SYSTEM READY >_</p>
43
+ </div>
44
+ </div>
45
+ <div class="chat-messages" id="messages">
46
+ <div class="ascii-art"> ___ ___ ___ _ _
47
+ |_ _/ _ \|_ _|| \ | |
48
+ | | | | | | | | \| |
49
+ | | |_| | | | | |\ |
50
+ |___/___/ |_| |_| \_|</div>
51
+ <div class="message ai"><span class="prefix">AI></span> 系统初始化完成。</div>
52
+ <div class="message ai"><span class="prefix">AI></span> 您好！我是终端 AI 助手。</div>
53
+ <div class="message ai"><span class="prefix">AI></span> 请输入您的指令_</div>
54
+ </div>
55
+ <div class="chat-input">
56
+ <span class="prompt">USER></span>
57
+ <input type="text" id="input" placeholder="输入命令..." onkeypress="if(event.key==='Enter')sendMessage()" autofocus>
58
+ <button onclick="sendMessage()">EXEC</button>
59
+ </div>
60
+ </div>
61
+ <script>
62
+ const responses = [
63
+ '> 处理中...<br>> 根据数据分析，我认为...<br>> 完成。',
64
+ '> 收到指令。<br>> 当然可以！让我为您处理。<br>> 完成。',
65
+ '> 正在计算...<br>> 有趣的问题！分析结果显示...<br>> 完成。',
66
+ '> 系统分析中...<br>> 让我为您详细解释。<br>> 完成。'
67
+ ];
68
+ function sendMessage() {
69
+ const input = document.getElementById('input');
70
+ const text = input.value.trim();
71
+ if (!text) return;
72
+ const messages = document.getElementById('messages');
73
+ messages.innerHTML += `<div class="message user"><span class="prefix">USER></span> ${text}</div>`;
74
+ input.value = '';
75
+ setTimeout(() => {
76
+ const reply = responses[Math.floor(Math.random() * responses.length)];
77
+ messages.innerHTML += `<div class="message ai"><span class="prefix">AI></span> ${reply}</div>`;
78
+ messages.scrollTop = messages.scrollHeight;
79
+ }, 800);
80
+ messages.scrollTop = messages.scrollHeight;
81
+ }
82
+ </script>
83
+ </body>
84
+ </html>
package/docs/chat-style-5-gradient.html ADDED
@@ -0,0 +1,69 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="zh-CN">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Style 5: Gradient Bubbles - AI Chat UI</title>
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+ body { font-family: 'Segoe UI', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #f093fb 0%, #f5576c 25%, #4facfe 50%, #00f2fe 75%, #43e97b 100%); background-size: 400% 400%; animation: gradientShift 15s ease infinite; }
11
+ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
12
+ .chat-container { width: 420px; height: 720px; background: white; border-radius: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; }
13
+ .chat-header { padding: 24px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; }
14
+ .chat-header h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
15
+ .chat-header p { font-size: 12px; opacity: 0.8; }
16
+ .chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; background: #fafafa; }
17
+ .message { max-width: 80%; padding: 14px 18px; font-size: 14px; line-height: 1.6; position: relative; animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
18
+ @keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
19
+ .message.user { align-self: flex-end; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 20px 20px 6px 20px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
20
+ .message.ai { align-self: flex-start; background: white; color: #333; border-radius: 20px 20px 20px 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid #f0f0f0; }
21
+ .chat-input { padding: 16px 20px; background: white; display: flex; gap: 12px; align-items: center; border-top: 1px solid #f0f0f0; }
22
+ .chat-input input { flex: 1; padding: 14px 20px; border: none; background: #f5f5f5; border-radius: 25px; font-size: 14px; outline: none; transition: all 0.3s; }
23
+ .chat-input input:focus { background: #eee; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); }
24
+ .chat-input input::placeholder { color: #999; }
25
+ .chat-input button { width: 48px; height: 48px; border: none; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 50%; cursor: pointer; font-size: 20px; transition: all 0.3s; box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4); }
26
+ .chat-input button:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0 6px 20px rgba(245, 87, 108, 0.6); }
27
+ .time-divider { text-align: center; font-size: 11px; color: #999; padding: 8px; }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <div class="chat-container">
32
+ <div class="chat-header">
33
+ <h3>✨ Gradient AI</h3>
34
+ <p>多彩 · 活力 · 智能</p>
35
+ </div>
36
+ <div class="chat-messages" id="messages">
37
+ <div class="time-divider">今天 14:30</div>
38
+ <div class="message ai">嗨！我是 Gradient AI 🌈<br>采用最新的渐变色设计，让聊天更有趣！</div>
39
+ </div>
40
+ <div class="chat-input">
41
+ <input type="text" id="input" placeholder="说点什么..." onkeypress="if(event.key==='Enter')sendMessage()">
42
+ <button onclick="sendMessage()">➤</button>
43
+ </div>
44
+ </div>
45
+ <script>
46
+ const responses = [
47
+ '太棒了！🌟 让我来帮您...',
48
+ '没问题！✨ 我很乐意协助您。',
49
+ '有趣！🎨 让我从创意角度分析...',
50
+ '好的！💡 让我为您详细解答。',
51
+ '当然！🚀 马上为您处理。'
52
+ ];
53
+ function sendMessage() {
54
+ const input = document.getElementById('input');
55
+ const text = input.value.trim();
56
+ if (!text) return;
57
+ const messages = document.getElementById('messages');
58
+ messages.innerHTML += `<div class="message user">${text}</div>`;
59
+ input.value = '';
60
+ setTimeout(() => {
61
+ const reply = responses[Math.floor(Math.random() * responses.length)];
62
+ messages.innerHTML += `<div class="message ai">${reply}</div>`;
63
+ messages.scrollTop = messages.scrollHeight;
64
+ }, 600);
65
+ messages.scrollTop = messages.scrollHeight;
66
+ }
67
+ </script>
68
+ </body>
69
+ </html>
package/docs/chat-style-6-corporate.html ADDED
@@ -0,0 +1,116 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="zh-CN">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Style 6: Corporate Professional - AI Chat UI</title>
8
+ <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; }
10
+ body { font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif; background: #f0f2f5; height: 100vh; display: flex; justify-content: center; align-items: center; }
11
+ .chat-container { width: 480px; height: 720px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; border: 1px solid #e8e8e8; }
12
+ .chat-header { padding: 16px 24px; background: white; border-bottom: 3px solid #1890ff; display: flex; align-items: center; gap: 16px; }
13
+ .company-logo { width: 42px; height: 42px; background: #1890ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: bold; }
14
+ .header-info h3 { font-size: 16px; font-weight: 600; color: #333; }
15
+ .header-info p { font-size: 12px; color: #999; }
16
+ .header-actions { margin-left: auto; display: flex; gap: 8px; }
17
+ .header-actions button { padding: 6px 12px; border: 1px solid #d9d9d9; background: white; border-radius: 4px; cursor: pointer; font-size: 12px; color: #666; transition: all 0.2s; }
18
+ .header-actions button:hover { border-color: #1890ff; color: #1890ff; }
19
+ .chat-messages { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; background: #fafafa; }
20
+ .chat-messages::-webkit-scrollbar { width: 6px; }
21
+ .chat-messages::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
22
+ .message { display: flex; gap: 12px; max-width: 85%; }
23
+ .message.user { flex-direction: row-reverse; align-self: flex-end; }
24
+ .message-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
25
+ .message.ai .message-avatar { background: #1890ff; color: white; }
26
+ .message.user .message-avatar { background: #52c41a; color: white; }
27
+ .message-content { padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; }
28
+ .message.ai .message-content { background: white; color: #333; border: 1px solid #e8e8e8; border-top-left-radius: 2px; }
29
+ .message.user .message-content { background: #1890ff; color: white; border-top-right-radius: 2px; }
30
+ .message-time { font-size: 11px; color: #999; margin-top: 4px; }
31
+ .message.user .message-time { text-align: right; }
32
+ .chat-input { padding: 16px 24px; background: white; border-top: 1px solid #e8e8e8; }
33
+ .input-wrapper { display: flex; gap: 12px; align-items: flex-end; }
34
+ .input-wrapper textarea { flex: 1; padding: 12px 16px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; resize: none; outline: none; min-height: 44px; max-height: 120px; font-family: inherit; transition: all 0.2s; }
35
+ .input-wrapper textarea:focus { border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); }
36
+ .input-wrapper button { padding: 12px 24px; background: #1890ff; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; white-space: nowrap; }
37
+ .input-wrapper button:hover { background: #40a9ff; }
38
+ .input-actions { display: flex; gap: 8px; margin-top: 8px; }
39
+ .input-actions span { font-size: 12px; color: #999; cursor: pointer; }
40
+ .input-actions span:hover { color: #1890ff; }
41
+ </style>
42
+ </head>
43
+ <body>
44
+ <div class="chat-container">
45
+ <div class="chat-header">
46
+ <div class="company-logo">AI</div>
47
+ <div class="header-info">
48
+ <h3>企业智能助手</h3>
49
+ <p>Enterprise AI Assistant v3.0</p>
50
+ </div>
51
+ <div class="header-actions">
52
+ <button>设置</button>
53
+ <button>历史</button>
54
+ </div>
55
+ </div>
56
+ <div class="chat-messages" id="messages">
57
+ <div class="message ai">
58
+ <div class="message-avatar">AI</div>
59
+ <div>
60
+ <div class="message-content">您好！我是企业智能助手。我可以帮助您处理文档、数据分析、日程安排等工作事务。有什么可以为您服务的吗？</div>
61
+ <div class="message-time">14:30</div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ <div class="chat-input">
66
+ <div class="input-wrapper">
67
+ <textarea id="input" rows="1" placeholder="输入您的问题..." onkeypress="if(event.key==='Enter' && !event.shiftKey){event.preventDefault();sendMessage()}"></textarea>
68
+ <button onclick="sendMessage()">发送</button>
69
+ </div>
70
+ <div class="input-actions">
71
+ <span>📎 上传文件</span>
72
+ <span>📊 数据分析</span>
73
+ <span>📅 日程管理</span>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ <script>
78
+ const responses = [
79
+ '感谢您的提问。根据系统分析，我建议您...',
80
+ '好的，我已经为您处理了相关事务。如需进一步协助，请随时告知。',
81
+ '这是一个专业的问题。从行业最佳实践来看...',
82
+ '我已经为您生成了详细的分析报告，主要包括以下几个方面...',
83
+ '收到您的指令。正在为您查询相关数据，请稍候...'
84
+ ];
85
+ function sendMessage() {
86
+ const input = document.getElementById('input');
87
+ const text = input.value.trim();
88
+ if (!text) return;
89
+ const messages = document.getElementById('messages');
90
+ const time = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
91
+ messages.innerHTML += `
92
+ <div class="message user">
93
+ <div class="message-avatar">我</div>
94
+ <div>
95
+ <div class="message-content">${text}</div>
96
+ <div class="message-time">${time}</div>
97
+ </div>
98
+ </div>`;
99
+ input.value = '';
100
+ setTimeout(() => {
101
+ const reply = responses[Math.floor(Math.random() * responses.length)];
102
+ messages.innerHTML += `
103
+ <div class="message ai">
104
+ <div class="message-avatar">AI</div>
105
+ <div>
106
+ <div class="message-content">${reply}</div>
107
+ <div class="message-time">${new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</div>
108
+ </div>
109
+ </div>`;
110
+ messages.scrollTop = messages.scrollHeight;
111
+ }, 1000);
112
+ messages.scrollTop = messages.scrollHeight;
113
+ }
114
+ </script>
115
+ </body>
116
+ </html>