@courseecho/ai-widget-react 1.0.16 → 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 +36 -61
|
@@ -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,61 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
38
|
-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
39
|
-
},
|
|
40
|
-
"devDependencies": {
|
|
41
|
-
"@courseecho/ai-core-sdk": "file:../core",
|
|
42
|
-
"@types/jest": "^29.0.0",
|
|
43
|
-
"@types/node": "^20.0.0",
|
|
44
|
-
"@types/react": "^18.2.0",
|
|
45
|
-
"@types/react-dom": "^18.2.0",
|
|
46
|
-
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
|
47
|
-
"@typescript-eslint/parser": "^6.0.0",
|
|
48
|
-
"eslint": "^8.0.0",
|
|
49
|
-
"jest": "^29.0.0",
|
|
50
|
-
"react": "^18.2.0",
|
|
51
|
-
"react-dom": "^18.2.0",
|
|
52
|
-
"ts-jest": "^29.0.0",
|
|
53
|
-
"typescript": "^5.3.0"
|
|
54
|
-
},
|
|
55
|
-
"peerDependenciesMeta": {
|
|
56
|
-
"@courseecho/ai-core-sdk": {
|
|
57
|
-
"optional": false
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@courseecho/ai-widget-react",
|
|
3
|
+
"version": "1.0.18",
|
|
4
|
+
"description": "React AI chat widget component for CourseEcho. Drop-in AI assistant for React apps.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "CourseEcho",
|
|
7
|
+
"main": "dist/index.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.js",
|
|
12
|
+
"require": "./dist/index.js",
|
|
13
|
+
"default": "./dist/index.js",
|
|
14
|
+
"types": "./dist/index.d.ts"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": ["dist"],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "tsc && xcopy /Y src\\*.css dist\\",
|
|
20
|
+
"dev": "tsc --watch"
|
|
21
|
+
},
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"@courseecho/ai-core-sdk": "^1.0.0",
|
|
24
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
25
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
26
|
+
},
|
|
27
|
+
"keywords": ["ai", "courseecho", "chatbot", "sdk", "widget", "react", "ai-assistant"],
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@courseecho/ai-core-sdk": "file:../core",
|
|
30
|
+
"@types/react": "^18.0.0",
|
|
31
|
+
"@types/react-dom": "^18.0.0",
|
|
32
|
+
"react": "^18.0.0",
|
|
33
|
+
"react-dom": "^18.0.0",
|
|
34
|
+
"typescript": "^5.3.0"
|
|
35
|
+
}
|
|
36
|
+
}
|