@courseecho/ai-widget-react 1.0.17 → 1.0.18
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.
- package/dist/ai-chat-widget.css +152 -0
- package/package.json +2 -2
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
/* AI Chat Widget - Shared Modern Design (React) */
|
|
2
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
|
3
|
+
|
|
4
|
+
.aiwg-root *, .aiwg-root *::before, .aiwg-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
5
|
+
|
|
6
|
+
.aiwg-root {
|
|
7
|
+
/* CSS custom properties — overridden by fetchWidgetConfig() or parent styles */
|
|
8
|
+
--aiwg-primary: #6366f1;
|
|
9
|
+
--aiwg-primary-dark: #8b5cf6;
|
|
10
|
+
--aiwg-fg-color: #ffffff;
|
|
11
|
+
--aiwg-bg-color: #ffffff;
|
|
12
|
+
--aiwg-chat-bg: #f1f5f9;
|
|
13
|
+
|
|
14
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
15
|
+
font-size: 14px; line-height: 1.5; color: #1a1a2e;
|
|
16
|
+
display: flex; flex-direction: column; overflow: hidden;
|
|
17
|
+
border-radius: 16px; background: var(--aiwg-bg-color);
|
|
18
|
+
position: fixed; bottom: 24px; right: 24px;
|
|
19
|
+
width: 380px !important; max-width: calc(100vw - 48px) !important;
|
|
20
|
+
z-index: 99999;
|
|
21
|
+
/* height is controlled via inline style — never use 100% here */
|
|
22
|
+
transition: height 0.25s ease;
|
|
23
|
+
box-shadow: 0 24px 64px rgba(0,0,0,0.18);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Header */
|
|
27
|
+
.aiwg-header { background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%); padding: 16px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; position: relative; overflow: hidden; }
|
|
28
|
+
.aiwg-header::before { content:''; position:absolute; width:140px; height:140px; background:rgba(255,255,255,.08); border-radius:50%; top:-50px; right:-30px; }
|
|
29
|
+
.aiwg-avatar { width:40px; height:40px; background:rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; border:2px solid rgba(255,255,255,.4); }
|
|
30
|
+
.aiwg-header-info { flex:1; }
|
|
31
|
+
.aiwg-title { color:#fff; font-weight:600; font-size:15px; }
|
|
32
|
+
.aiwg-subtitle { color:rgba(255,255,255,.75); font-size:12px; display:flex; align-items:center; gap:5px; }
|
|
33
|
+
.aiwg-online-dot { width:7px; height:7px; background:#4ade80; border-radius:50%; display:inline-block; animation:aiwg-pulse 2s ease-in-out infinite; }
|
|
34
|
+
@keyframes aiwg-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }
|
|
35
|
+
.aiwg-minimize-btn { width:36px; height:36px; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.3); border-radius:50%; color:#fff; cursor:pointer !important; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; transition:background .15s,transform .15s; flex-shrink:0; position:relative; z-index:2; }
|
|
36
|
+
.aiwg-minimize-btn * { pointer-events:none; }
|
|
37
|
+
.aiwg-minimize-btn:hover { background:rgba(255,255,255,.32); transform:scale(1.08); }
|
|
38
|
+
|
|
39
|
+
/* Messages */
|
|
40
|
+
.aiwg-messages { flex:1; overflow-y:auto; padding:20px 16px 8px; scroll-behavior:smooth; display:flex; flex-direction:column; gap:12px; }
|
|
41
|
+
.aiwg-messages::-webkit-scrollbar { width:4px; }
|
|
42
|
+
.aiwg-messages::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:99px; }
|
|
43
|
+
|
|
44
|
+
/* Welcome */
|
|
45
|
+
.aiwg-welcome { text-align:center; padding:24px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; }
|
|
46
|
+
.aiwg-welcome-icon { font-size:36px; margin-bottom:4px; }
|
|
47
|
+
.aiwg-welcome h4 { font-size:15px; font-weight:600; color:#1a1a2e; }
|
|
48
|
+
.aiwg-welcome p { font-size:13px; color:#64748b; }
|
|
49
|
+
|
|
50
|
+
/* Bubbles */
|
|
51
|
+
.aiwg-msg { display:flex; gap:8px; align-items:flex-end; animation:aiwg-fade-up .2s ease both; }
|
|
52
|
+
@keyframes aiwg-fade-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
|
|
53
|
+
.aiwg-msg--user { flex-direction:row-reverse; }
|
|
54
|
+
.aiwg-msg-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; margin-bottom:2px; }
|
|
55
|
+
.aiwg-msg--bot .aiwg-msg-avatar { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
|
|
56
|
+
.aiwg-msg--user .aiwg-msg-avatar { background:#e2e8f0; color:#64748b; }
|
|
57
|
+
.aiwg-msg-body { max-width:78%; }
|
|
58
|
+
.aiwg-msg-bubble { padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.55; word-break:break-word; }
|
|
59
|
+
.aiwg-msg--bot .aiwg-msg-bubble { background:#f1f5f9; color:#1a1a2e; border-bottom-left-radius:4px; }
|
|
60
|
+
.aiwg-msg--user .aiwg-msg-bubble { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border-bottom-right-radius:4px; }
|
|
61
|
+
.aiwg-msg-time { font-size:10px; color:#94a3b8; margin-top:4px; text-align:right; padding:0 4px; }
|
|
62
|
+
.aiwg-msg--bot .aiwg-msg-time { text-align:left; }
|
|
63
|
+
|
|
64
|
+
/* Markdown inside bubbles */
|
|
65
|
+
.aiwg-msg-bubble strong { font-weight:600; }
|
|
66
|
+
.aiwg-msg-bubble em { font-style:italic; }
|
|
67
|
+
.aiwg-msg-bubble code { background:rgba(0,0,0,.08); padding:1px 5px; border-radius:4px; font-family:'Fira Code','Consolas',monospace; font-size:.9em; }
|
|
68
|
+
.aiwg-msg--user .aiwg-msg-bubble code { background:rgba(255,255,255,.2); }
|
|
69
|
+
.aiwg-msg-bubble ol, .aiwg-msg-bubble ul { padding-left:18px; margin:6px 0; display:flex; flex-direction:column; gap:3px; }
|
|
70
|
+
.aiwg-msg-bubble ol { list-style:decimal; }
|
|
71
|
+
.aiwg-msg-bubble ul { list-style:disc; }
|
|
72
|
+
.aiwg-msg-bubble li { line-height:1.5; }
|
|
73
|
+
.aiwg-msg-bubble h3,.aiwg-msg-bubble h4 { font-weight:600; margin:8px 0 4px; }
|
|
74
|
+
.aiwg-msg-bubble p { margin:2px 0; }
|
|
75
|
+
|
|
76
|
+
/* Typing indicator */
|
|
77
|
+
.aiwg-typing { padding:10px 14px; }
|
|
78
|
+
.aiwg-typing-dots { display:flex; gap:4px; align-items:center; }
|
|
79
|
+
.aiwg-typing-dots span { width:7px; height:7px; background:#94a3b8; border-radius:50%; animation:aiwg-bounce 1.2s ease-in-out infinite; }
|
|
80
|
+
.aiwg-typing-dots span:nth-child(2) { animation-delay:.2s; }
|
|
81
|
+
.aiwg-typing-dots span:nth-child(3) { animation-delay:.4s; }
|
|
82
|
+
@keyframes aiwg-bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }
|
|
83
|
+
|
|
84
|
+
/* Chips */
|
|
85
|
+
.aiwg-chip-row { padding:6px 16px 2px; display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
|
|
86
|
+
.aiwg-chip { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:99px; padding:4px 12px; font-size:12px; color:#4f46e5; cursor:pointer; transition:all .15s; white-space:nowrap; font-weight:500; }
|
|
87
|
+
.aiwg-chip:hover { background:#ede9fe; border-color:#a5b4fc; }
|
|
88
|
+
|
|
89
|
+
/* Input area */
|
|
90
|
+
.aiwg-input-area { padding:12px 16px 16px; flex-shrink:0; background:#fff; border-top:1px solid #f1f5f9; position:relative; }
|
|
91
|
+
|
|
92
|
+
/* Suggestion dropdown */
|
|
93
|
+
.aiwg-suggestions { position:absolute; bottom:calc(100% + 4px); left:16px; right:16px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); overflow:hidden; z-index:100; animation:aiwg-fade-up .15s ease both; }
|
|
94
|
+
.aiwg-suggestions-header { padding:8px 14px 4px; font-size:11px; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid #f1f5f9; }
|
|
95
|
+
.aiwg-suggestion-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background .1s; border-bottom:1px solid #f8fafc; }
|
|
96
|
+
.aiwg-suggestion-item:last-child { border-bottom:none; }
|
|
97
|
+
.aiwg-suggestion-item:hover,.aiwg-suggestion-item.aiwg-active { background:#f5f3ff; }
|
|
98
|
+
.aiwg-suggestion-icon { font-size:16px; flex-shrink:0; }
|
|
99
|
+
.aiwg-suggestion-main { flex:1; min-width:0; }
|
|
100
|
+
.aiwg-suggestion-text { font-size:13px; font-weight:500; color:#1a1a2e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
101
|
+
.aiwg-suggestion-text mark { background:none; color:#6366f1; font-weight:600; }
|
|
102
|
+
.aiwg-suggestion-desc { font-size:11px; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
103
|
+
.aiwg-suggestion-badge { font-size:10px; font-weight:600; padding:2px 8px; border-radius:99px; background:#ede9fe; color:#6366f1; flex-shrink:0; }
|
|
104
|
+
.aiwg-kbd-hint { padding:6px 14px; font-size:11px; color:#cbd5e1; background:#f8fafc; display:flex; justify-content:flex-end; gap:10px; }
|
|
105
|
+
.aiwg-kbd-hint kbd { font-family:inherit; background:#e2e8f0; border-radius:4px; padding:1px 5px; font-size:10px; color:#64748b; }
|
|
106
|
+
|
|
107
|
+
/* Input row */
|
|
108
|
+
.aiwg-input-row { display:flex; gap:8px; align-items:flex-end; }
|
|
109
|
+
.aiwg-input { flex:1; border:1.5px solid #e2e8f0; border-radius:12px; padding:10px 14px; font-size:14px; font-family:inherit; outline:none; resize:none; background:#f8fafc; color:#1a1a2e; transition:border-color .15s,box-shadow .15s,background .15s; line-height:1.4; max-height:120px; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
|
|
110
|
+
.aiwg-input::-webkit-scrollbar { display:none; }
|
|
111
|
+
.aiwg-input::placeholder { color:#94a3b8; }
|
|
112
|
+
.aiwg-input:focus { border-color:#8b5cf6; background:#fff; box-shadow:0 0 0 3px rgba(139,92,246,.1); }
|
|
113
|
+
.aiwg-send-btn { width:42px; height:42px; background:linear-gradient(135deg,#6366f1,#8b5cf6); border:none; border-radius:12px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s,box-shadow .15s,opacity .15s; box-shadow:0 4px 12px rgba(99,102,241,.35); }
|
|
114
|
+
.aiwg-send-btn svg { width:18px; height:18px; }
|
|
115
|
+
.aiwg-send-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.4); }
|
|
116
|
+
.aiwg-send-btn:active { transform:translateY(0); }
|
|
117
|
+
.aiwg-send-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
|
|
118
|
+
|
|
119
|
+
/* Error */
|
|
120
|
+
.aiwg-error { margin:0 16px 8px; padding:8px 12px; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; font-size:12px; color:#dc2626; }
|
|
121
|
+
|
|
122
|
+
/* Minimize – height driven by React state via inline style; CSS only hides inner panels */
|
|
123
|
+
.aiwg-root.aiwg-minimized .aiwg-messages,
|
|
124
|
+
.aiwg-root.aiwg-minimized .aiwg-chip-row,
|
|
125
|
+
.aiwg-root.aiwg-minimized .aiwg-error,
|
|
126
|
+
.aiwg-root.aiwg-minimized .aiwg-input-area,
|
|
127
|
+
.aiwg-root.aiwg-minimized .aiwg-powered { display:none !important; }
|
|
128
|
+
.aiwg-root.aiwg-minimized .aiwg-minimize-btn { display:none !important; }
|
|
129
|
+
.aiwg-root.aiwg-minimized { cursor:pointer; }
|
|
130
|
+
.aiwg-root.aiwg-minimized .aiwg-header { cursor:pointer !important; }
|
|
131
|
+
|
|
132
|
+
/* Powered by */
|
|
133
|
+
.aiwg-powered { text-align:center; padding:6px 16px 10px; font-size:11px; color:#94a3b8; flex-shrink:0; border-top:1px solid #f1f5f9; background:#fff; }
|
|
134
|
+
.aiwg-powered a { color:#6366f1; text-decoration:none; font-weight:500; }
|
|
135
|
+
.aiwg-powered a:hover { text-decoration:underline; }
|
|
136
|
+
|
|
137
|
+
/* Dark theme */
|
|
138
|
+
.aiwg-dark { background:#0f172a; color:#e2e8f0; }
|
|
139
|
+
.aiwg-dark .aiwg-msg--bot .aiwg-msg-bubble { background:#1e293b; color:#e2e8f0; }
|
|
140
|
+
.aiwg-dark .aiwg-input-area { background:#0f172a; border-top-color:#1e293b; }
|
|
141
|
+
.aiwg-dark .aiwg-input { background:#1e293b; border-color:#334155; color:#e2e8f0; }
|
|
142
|
+
.aiwg-dark .aiwg-input:focus { border-color:#8b5cf6; background:#1e293b; }
|
|
143
|
+
.aiwg-dark .aiwg-suggestions { background:#1e293b; border-color:#334155; }
|
|
144
|
+
.aiwg-dark .aiwg-suggestions-header { color:#64748b; border-bottom-color:#334155; }
|
|
145
|
+
.aiwg-dark .aiwg-suggestion-item { border-bottom-color:#0f172a; }
|
|
146
|
+
.aiwg-dark .aiwg-suggestion-item:hover,.aiwg-dark .aiwg-suggestion-item.aiwg-active { background:#2d1b69; }
|
|
147
|
+
.aiwg-dark .aiwg-suggestion-text { color:#e2e8f0; }
|
|
148
|
+
.aiwg-dark .aiwg-chip { background:#1e293b; border-color:#334155; }
|
|
149
|
+
.aiwg-dark .aiwg-chip:hover { background:#2d1b69; }
|
|
150
|
+
.aiwg-dark .aiwg-kbd-hint { background:#1e293b; }
|
|
151
|
+
.aiwg-dark .aiwg-welcome h4 { color:#e2e8f0; }
|
|
152
|
+
.aiwg-dark .aiwg-powered { background:#0f172a; border-top-color:#1e293b; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@courseecho/ai-widget-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "React AI chat widget component for CourseEcho. Drop-in AI assistant for React apps.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "CourseEcho",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
},
|
|
17
17
|
"files": ["dist"],
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "tsc",
|
|
19
|
+
"build": "tsc && xcopy /Y src\\*.css dist\\",
|
|
20
20
|
"dev": "tsc --watch"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|