npm - @courseecho/ai-core-sdk - Versions diffs - 1.0.20 → 1.0.21 - Mend

@courseecho/ai-core-sdk 1.0.20 → 1.0.21

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

package/dist/index.d.ts CHANGED Viewed

@@ -8,3 +8,4 @@ export { ChatStateManager, ContextStateManager, ChartManager, SuggestionManager,
 export { PageContentScanner, AiSuggestionGenerator, type PageContent, } from './auto-suggestion-generator';
 export { AiWidgetSDK } from './sdk';
 export type { StateListener } from './state-manager';
+export { WIDGET_CSS } from './widget-css';

package/dist/index.js CHANGED Viewed

@@ -11,3 +11,5 @@ export { ChatStateManager, ContextStateManager, ChartManager, SuggestionManager,
 export { PageContentScanner, AiSuggestionGenerator, } from './auto-suggestion-generator';
 // Main SDK
 export { AiWidgetSDK } from './sdk';
+// Canonical widget CSS (used by all framework packages)
+export { WIDGET_CSS } from './widget-css';

package/dist/widget-css.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/**
+ * Canonical widget CSS — single source of truth for all framework packages.
+ *
+ * Isolation strategy:
+ *   - React  : injected into a Shadow DOM via ShadowWrapper (createPortal).
+ *              :host { all: initial } resets inherited properties at the boundary.
+ *   - jQuery : injected into attachShadow() root. Same :host reset applies.
+ *   - Angular: ViewEncapsulation.ShadowDom — Angular handles the shadow root.
+ *
+ * NOTE: `@import` for Google Fonts does NOT work inside shadow-DOM <style> tags.
+ * Each package is responsible for loading the Inter font into document <head>
+ * separately (React: ensureFont(), jQuery: injectFontLink()).
+ */
+export declare const WIDGET_CSS = "\n/* \u2500\u2500 Shadow-DOM host isolation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host {\n  all: initial !important;\n  display: block !important;\n}\n\n/* Scoped box-model reset \u2014 only touches widget elements, not all of shadow DOM */\n.aiwg-root *, .aiwg-root *::before, .aiwg-root *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n/* \u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-root {\n  --aiwg-primary:      #6366f1;\n  --aiwg-primary-dark: #8b5cf6;\n  --aiwg-fg-color:     #ffffff;\n  --aiwg-bg-color:     #ffffff;\n  --aiwg-chat-bg:      #f1f5f9;\n\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a2e;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: 16px;\n  background: var(--aiwg-bg-color);\n  position: fixed !important;\n  bottom: 24px;\n  right: 24px;\n  width: 380px !important;\n  max-width: calc(100vw - 48px) !important;\n  z-index: 99999;\n  transition: height 0.25s ease;\n  box-shadow: 0 24px 64px rgba(0,0,0,0.18);\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-header {\n  background: linear-gradient(135deg, var(--aiwg-primary) 0%, var(--aiwg-primary-dark) 100%);\n  padding: 16px 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n.aiwg-header::before {\n  content: '';\n  position: absolute;\n  width: 140px; height: 140px;\n  background: rgba(255,255,255,0.08);\n  border-radius: 50%;\n  top: -50px; right: -30px;\n}\n.aiwg-avatar {\n  width: 40px; height: 40px;\n  background: rgba(255,255,255,0.25);\n  border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n  border: 2px solid rgba(255,255,255,0.4);\n}\n.aiwg-header-info { flex: 1; }\n.aiwg-title { color: #fff; font-weight: 600; font-size: 15px; }\n.aiwg-subtitle {\n  color: rgba(255,255,255,0.75);\n  font-size: 12px;\n  display: flex; align-items: center; gap: 5px;\n}\n.aiwg-online-dot {\n  width: 7px; height: 7px;\n  background: #4ade80;\n  border-radius: 50%;\n  display: inline-block;\n  animation: aiwg-pulse 2s ease-in-out infinite;\n}\n@keyframes aiwg-pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%       { opacity: 0.6; transform: scale(0.85); }\n}\n.aiwg-minimize-btn {\n  width: 36px; height: 36px;\n  background: rgba(255,255,255,0.18);\n  border: 1.5px solid rgba(255,255,255,0.3);\n  border-radius: 50%;\n  color: #fff; cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 18px; line-height: 1;\n  transition: background 0.15s, transform 0.15s;\n  flex-shrink: 0;\n  position: relative; z-index: 2;\n}\n.aiwg-minimize-btn * { cursor: pointer !important; pointer-events: none; }\n.aiwg-minimize-btn:hover { background: rgba(255,255,255,0.32); transform: scale(1.08); }\n\n/* \u2500\u2500 Messages area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px 16px 8px;\n  scroll-behavior: smooth;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.aiwg-messages::-webkit-scrollbar { width: 4px; }\n.aiwg-messages::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }\n\n/* \u2500\u2500 Welcome card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-welcome {\n  text-align: center;\n  padding: 24px 16px;\n  display: flex; flex-direction: column; align-items: center; gap: 8px;\n}\n.aiwg-welcome-icon { font-size: 36px; margin-bottom: 4px; }\n.aiwg-welcome h4 { font-size: 15px; font-weight: 600; color: #1a1a2e; }\n.aiwg-welcome p  { font-size: 13px; color: #64748b; }\n\n/* \u2500\u2500 Message bubbles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-msg {\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n  animation: aiwg-fade-up 0.2s ease both;\n}\n@keyframes aiwg-fade-up {\n  from { opacity: 0; transform: translateY(8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n.aiwg-msg--user { flex-direction: row-reverse; }\n.aiwg-msg-avatar {\n  width: 28px; height: 28px; border-radius: 50%;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 13px; flex-shrink: 0;\n  margin-bottom: 2px;\n}\n.aiwg-msg--bot  .aiwg-msg-avatar { background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark)); color: var(--aiwg-fg-color); }\n.aiwg-msg--user .aiwg-msg-avatar { background: #e2e8f0; color: #64748b; }\n.aiwg-msg-body { max-width: 78%; }\n.aiwg-msg-bubble {\n  padding: 10px 14px;\n  border-radius: 18px;\n  font-size: 14px;\n  line-height: 1.55;\n  word-break: break-word;\n}\n.aiwg-msg--bot  .aiwg-msg-bubble { background: var(--aiwg-chat-bg); color: #1a1a2e; border-bottom-left-radius: 4px; }\n.aiwg-msg--user .aiwg-msg-bubble { background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark)); color: var(--aiwg-fg-color); border-bottom-right-radius: 4px; }\n.aiwg-msg-time { font-size: 10px; color: #94a3b8; margin-top: 4px; text-align: right; padding: 0 4px; }\n.aiwg-msg--bot .aiwg-msg-time { text-align: left; }\n\n/* \u2500\u2500 Typing indicator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-typing { padding: 10px 14px; }\n.aiwg-typing-dots { display: flex; gap: 4px; align-items: center; }\n.aiwg-typing-dots span {\n  width: 7px; height: 7px;\n  background: #94a3b8; border-radius: 50%;\n  animation: aiwg-bounce 1.2s ease-in-out infinite;\n}\n.aiwg-typing-dots span:nth-child(2) { animation-delay: 0.2s; }\n.aiwg-typing-dots span:nth-child(3) { animation-delay: 0.4s; }\n@keyframes aiwg-bounce {\n  0%, 80%, 100% { transform: translateY(0); }\n  40%           { transform: translateY(-6px); }\n}\n\n/* \u2500\u2500 Quick-reply chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-chip-row {\n  padding: 6px 16px 2px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.aiwg-chip {\n  background: #f1f5f9;\n  border: 1px solid #e2e8f0;\n  border-radius: 99px;\n  padding: 4px 12px;\n  font-size: 12px;\n  color: #4f46e5;\n  cursor: pointer;\n  transition: all 0.15s;\n  white-space: nowrap;\n  font-weight: 500;\n}\n.aiwg-chip:hover { background: #ede9fe; border-color: #a5b4fc; }\n.aiwg-chip-shimmer {\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  border: 1px solid transparent;\n  border-radius: 99px;\n  padding: 4px 34px;\n  animation: aiwg-shimmer 1.4s ease-in-out infinite;\n  cursor: default;\n  pointer-events: none;\n}\n.aiwg-chip-ai-badge {\n  display: inline-block;\n  font-size: 9px; font-weight: 700;\n  background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark));\n  color: #fff;\n  padding: 1px 5px;\n  border-radius: 99px;\n  margin-left: 5px;\n  vertical-align: middle;\n  letter-spacing: 0.04em;\n}\n@keyframes aiwg-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* \u2500\u2500 Input area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-input-area {\n  padding: 12px 16px 16px;\n  flex-shrink: 0;\n  background: #fff;\n  border-top: 1px solid #f1f5f9;\n  position: relative;\n}\n.aiwg-input-row { display: flex; gap: 8px; align-items: flex-end; }\n.aiwg-input {\n  flex: 1;\n  border: 1.5px solid #e2e8f0;\n  border-radius: 12px;\n  padding: 10px 14px;\n  font-size: 14px;\n  font-family: inherit;\n  outline: none;\n  resize: none;\n  background: #f8fafc;\n  color: #1a1a2e;\n  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;\n  line-height: 1.4;\n  max-height: 120px;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.aiwg-input::-webkit-scrollbar { display: none; }\n.aiwg-input::placeholder { color: #94a3b8; }\n.aiwg-input:focus {\n  border-color: var(--aiwg-primary-dark);\n  background: #fff;\n  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);\n}\n.aiwg-send-btn {\n  width: 42px; height: 42px;\n  background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark));\n  border: none; border-radius: 12px;\n  color: var(--aiwg-fg-color); cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  flex-shrink: 0;\n  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;\n  box-shadow: 0 4px 12px rgba(99,102,241,0.35);\n}\n.aiwg-send-btn svg { width: 18px; height: 18px; }\n.aiwg-send-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }\n.aiwg-send-btn:active { transform: translateY(0); }\n.aiwg-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }\n\n/* \u2500\u2500 Autocomplete suggestions dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-suggestions {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 16px; right: 16px;\n  background: #fff;\n  border: 1px solid #e2e8f0;\n  border-radius: 12px;\n  box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n  overflow: hidden;\n  z-index: 100;\n  animation: aiwg-fade-up 0.15s ease both;\n}\n.aiwg-suggestions-header {\n  padding: 8px 14px 4px;\n  font-size: 11px; font-weight: 600;\n  color: #94a3b8;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  border-bottom: 1px solid #f1f5f9;\n}\n.aiwg-suggestion-item {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 14px;\n  cursor: pointer;\n  transition: background 0.1s;\n  border-bottom: 1px solid #f8fafc;\n}\n.aiwg-suggestion-item:last-child { border-bottom: none; }\n.aiwg-suggestion-item:hover,\n.aiwg-suggestion-item.aiwg-active { background: #f5f3ff; }\n.aiwg-suggestion-icon  { font-size: 16px; flex-shrink: 0; }\n.aiwg-suggestion-main  { flex: 1; min-width: 0; }\n.aiwg-suggestion-text  { font-size: 13px; font-weight: 500; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.aiwg-suggestion-text mark { background: none; color: #6366f1; font-weight: 600; }\n.aiwg-suggestion-desc  { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.aiwg-suggestion-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #ede9fe; color: #6366f1; flex-shrink: 0; }\n.aiwg-kbd-hint {\n  padding: 6px 14px;\n  font-size: 11px; color: #cbd5e1; background: #f8fafc;\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n.aiwg-kbd-hint kbd { font-family: inherit; background: #e2e8f0; border-radius: 4px; padding: 1px 5px; font-size: 10px; color: #64748b; }\n\n/* \u2500\u2500 Error toast \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-error {\n  margin: 0 16px 8px;\n  padding: 8px 12px;\n  background: #fef2f2;\n  border: 1px solid #fecaca;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #dc2626;\n}\n\n/* \u2500\u2500 Minimized state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-root.aiwg-minimized .aiwg-messages,\n.aiwg-root.aiwg-minimized .aiwg-chip-row,\n.aiwg-root.aiwg-minimized .aiwg-error,\n.aiwg-root.aiwg-minimized .aiwg-input-area,\n.aiwg-root.aiwg-minimized .aiwg-powered   { display: none !important; }\n.aiwg-root.aiwg-minimized .aiwg-minimize-btn { display: none !important; }\n.aiwg-root.aiwg-minimized { cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,0.28); }\n.aiwg-root.aiwg-minimized .aiwg-header   { cursor: pointer !important; }\n\n/* \u2500\u2500 Powered-by footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-powered {\n  text-align: center;\n  padding: 6px 16px 10px;\n  font-size: 11px; color: #94a3b8;\n  flex-shrink: 0;\n  border-top: 1px solid #f1f5f9;\n  background: #fff;\n}\n.aiwg-powered a { color: #6366f1; text-decoration: none; font-weight: 500; }\n.aiwg-powered a:hover { text-decoration: underline; }\n\n/* \u2500\u2500 Markdown rendering \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-msg-bubble strong { font-weight: 600; }\n.aiwg-msg-bubble em     { font-style: italic; }\n.aiwg-msg-bubble code   { background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; font-family: 'Fira Code','Consolas',monospace; font-size: 0.9em; }\n.aiwg-msg--user .aiwg-msg-bubble code { background: rgba(255,255,255,0.2); }\n.aiwg-msg-bubble ol, .aiwg-msg-bubble ul { padding-left: 18px; margin: 6px 0; display: flex; flex-direction: column; gap: 3px; }\n.aiwg-msg-bubble ol  { list-style: decimal; }\n.aiwg-msg-bubble ul  { list-style: disc; }\n.aiwg-msg-bubble li  { line-height: 1.5; }\n.aiwg-msg-bubble h3, .aiwg-msg-bubble h4 { font-weight: 600; margin: 8px 0 4px; }\n.aiwg-msg-bubble p   { margin: 2px 0; }\n\n/* \u2500\u2500 Dark theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.aiwg-root.aiwg-dark { background: #0f172a; color: #e2e8f0; }\n.aiwg-dark .aiwg-msg--bot .aiwg-msg-bubble { background: #1e293b; color: #e2e8f0; }\n.aiwg-dark .aiwg-input-area { background: #0f172a; border-top-color: #1e293b; }\n.aiwg-dark .aiwg-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }\n.aiwg-dark .aiwg-input:focus { border-color: #8b5cf6; background: #1e293b; box-shadow: 0 0 0 3px rgba(139,92,246,0.2); }\n.aiwg-dark .aiwg-suggestions { background: #1e293b; border-color: #334155; }\n.aiwg-dark .aiwg-suggestions-header { color: #64748b; border-bottom-color: #334155; }\n.aiwg-dark .aiwg-suggestion-item { border-bottom-color: #0f172a; }\n.aiwg-dark .aiwg-suggestion-item:hover,\n.aiwg-dark .aiwg-suggestion-item.aiwg-active { background: #2d1b69; }\n.aiwg-dark .aiwg-suggestion-text { color: #e2e8f0; }\n.aiwg-dark .aiwg-chip { background: #1e293b; border-color: #334155; }\n.aiwg-dark .aiwg-chip:hover { background: #2d1b69; }\n.aiwg-dark .aiwg-chip-shimmer { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; }\n.aiwg-dark .aiwg-kbd-hint { background: #1e293b; }\n.aiwg-dark .aiwg-welcome h4 { color: #e2e8f0; }\n.aiwg-dark .aiwg-powered { background: #0f172a; border-top-color: #1e293b; }\n";

package/dist/widget-css.js ADDED Viewed

@@ -0,0 +1,389 @@
+/**
+ * Canonical widget CSS — single source of truth for all framework packages.
+ *
+ * Isolation strategy:
+ *   - React  : injected into a Shadow DOM via ShadowWrapper (createPortal).
+ *              :host { all: initial } resets inherited properties at the boundary.
+ *   - jQuery : injected into attachShadow() root. Same :host reset applies.
+ *   - Angular: ViewEncapsulation.ShadowDom — Angular handles the shadow root.
+ *
+ * NOTE: `@import` for Google Fonts does NOT work inside shadow-DOM <style> tags.
+ * Each package is responsible for loading the Inter font into document <head>
+ * separately (React: ensureFont(), jQuery: injectFontLink()).
+ */
+export const WIDGET_CSS = `
+/* ── Shadow-DOM host isolation ────────────────────────────────────────────── */
+:host {
+  all: initial !important;
+  display: block !important;
+}
+/* Scoped box-model reset — only touches widget elements, not all of shadow DOM */
+.aiwg-root *, .aiwg-root *::before, .aiwg-root *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+/* ── Container ────────────────────────────────────────────────────────────── */
+.aiwg-root {
+  --aiwg-primary:      #6366f1;
+  --aiwg-primary-dark: #8b5cf6;
+  --aiwg-fg-color:     #ffffff;
+  --aiwg-bg-color:     #ffffff;
+  --aiwg-chat-bg:      #f1f5f9;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #1a1a2e;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 16px;
+  background: var(--aiwg-bg-color);
+  position: fixed !important;
+  bottom: 24px;
+  right: 24px;
+  width: 380px !important;
+  max-width: calc(100vw - 48px) !important;
+  z-index: 99999;
+  transition: height 0.25s ease;
+  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
+}
+/* ── Header ───────────────────────────────────────────────────────────────── */
+.aiwg-header {
+  background: linear-gradient(135deg, var(--aiwg-primary) 0%, var(--aiwg-primary-dark) 100%);
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+}
+.aiwg-header::before {
+  content: '';
+  position: absolute;
+  width: 140px; height: 140px;
+  background: rgba(255,255,255,0.08);
+  border-radius: 50%;
+  top: -50px; right: -30px;
+}
+.aiwg-avatar {
+  width: 40px; height: 40px;
+  background: rgba(255,255,255,0.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,0.4);
+}
+.aiwg-header-info { flex: 1; }
+.aiwg-title { color: #fff; font-weight: 600; font-size: 15px; }
+.aiwg-subtitle {
+  color: rgba(255,255,255,0.75);
+  font-size: 12px;
+  display: flex; align-items: center; gap: 5px;
+}
+.aiwg-online-dot {
+  width: 7px; height: 7px;
+  background: #4ade80;
+  border-radius: 50%;
+  display: inline-block;
+  animation: aiwg-pulse 2s ease-in-out infinite;
+}
+@keyframes aiwg-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.6; transform: scale(0.85); }
+}
+.aiwg-minimize-btn {
+  width: 36px; height: 36px;
+  background: rgba(255,255,255,0.18);
+  border: 1.5px solid rgba(255,255,255,0.3);
+  border-radius: 50%;
+  color: #fff; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px; line-height: 1;
+  transition: background 0.15s, transform 0.15s;
+  flex-shrink: 0;
+  position: relative; z-index: 2;
+}
+.aiwg-minimize-btn * { cursor: pointer !important; pointer-events: none; }
+.aiwg-minimize-btn:hover { background: rgba(255,255,255,0.32); transform: scale(1.08); }
+/* ── Messages area ────────────────────────────────────────────────────────── */
+.aiwg-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 16px 8px;
+  scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.aiwg-messages::-webkit-scrollbar { width: 4px; }
+.aiwg-messages::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }
+/* ── Welcome card ─────────────────────────────────────────────────────────── */
+.aiwg-welcome {
+  text-align: center;
+  padding: 24px 16px;
+  display: flex; flex-direction: column; align-items: center; gap: 8px;
+}
+.aiwg-welcome-icon { font-size: 36px; margin-bottom: 4px; }
+.aiwg-welcome h4 { font-size: 15px; font-weight: 600; color: #1a1a2e; }
+.aiwg-welcome p  { font-size: 13px; color: #64748b; }
+/* ── Message bubbles ──────────────────────────────────────────────────────── */
+.aiwg-msg {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  animation: aiwg-fade-up 0.2s ease both;
+}
+@keyframes aiwg-fade-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.aiwg-msg--user { flex-direction: row-reverse; }
+.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;
+}
+.aiwg-msg--bot  .aiwg-msg-avatar { background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark)); color: var(--aiwg-fg-color); }
+.aiwg-msg--user .aiwg-msg-avatar { background: #e2e8f0; color: #64748b; }
+.aiwg-msg-body { max-width: 78%; }
+.aiwg-msg-bubble {
+  padding: 10px 14px;
+  border-radius: 18px;
+  font-size: 14px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+.aiwg-msg--bot  .aiwg-msg-bubble { background: var(--aiwg-chat-bg); color: #1a1a2e; border-bottom-left-radius: 4px; }
+.aiwg-msg--user .aiwg-msg-bubble { background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark)); color: var(--aiwg-fg-color); border-bottom-right-radius: 4px; }
+.aiwg-msg-time { font-size: 10px; color: #94a3b8; margin-top: 4px; text-align: right; padding: 0 4px; }
+.aiwg-msg--bot .aiwg-msg-time { text-align: left; }
+/* ── Typing indicator ─────────────────────────────────────────────────────── */
+.aiwg-typing { padding: 10px 14px; }
+.aiwg-typing-dots { display: flex; gap: 4px; align-items: center; }
+.aiwg-typing-dots span {
+  width: 7px; height: 7px;
+  background: #94a3b8; border-radius: 50%;
+  animation: aiwg-bounce 1.2s ease-in-out infinite;
+}
+.aiwg-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+.aiwg-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes aiwg-bounce {
+  0%, 80%, 100% { transform: translateY(0); }
+  40%           { transform: translateY(-6px); }
+}
+/* ── Quick-reply chips ────────────────────────────────────────────────────── */
+.aiwg-chip-row {
+  padding: 6px 16px 2px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.aiwg-chip {
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 99px;
+  padding: 4px 12px;
+  font-size: 12px;
+  color: #4f46e5;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.aiwg-chip:hover { background: #ede9fe; border-color: #a5b4fc; }
+.aiwg-chip-shimmer {
+  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
+  background-size: 200% 100%;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  padding: 4px 34px;
+  animation: aiwg-shimmer 1.4s ease-in-out infinite;
+  cursor: default;
+  pointer-events: none;
+}
+.aiwg-chip-ai-badge {
+  display: inline-block;
+  font-size: 9px; font-weight: 700;
+  background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark));
+  color: #fff;
+  padding: 1px 5px;
+  border-radius: 99px;
+  margin-left: 5px;
+  vertical-align: middle;
+  letter-spacing: 0.04em;
+}
+@keyframes aiwg-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+/* ── Input area ───────────────────────────────────────────────────────────── */
+.aiwg-input-area {
+  padding: 12px 16px 16px;
+  flex-shrink: 0;
+  background: #fff;
+  border-top: 1px solid #f1f5f9;
+  position: relative;
+}
+.aiwg-input-row { display: flex; gap: 8px; align-items: flex-end; }
+.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 0.15s, box-shadow 0.15s, background 0.15s;
+  line-height: 1.4;
+  max-height: 120px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.aiwg-input::-webkit-scrollbar { display: none; }
+.aiwg-input::placeholder { color: #94a3b8; }
+.aiwg-input:focus {
+  border-color: var(--aiwg-primary-dark);
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
+}
+.aiwg-send-btn {
+  width: 42px; height: 42px;
+  background: linear-gradient(135deg, var(--aiwg-primary), var(--aiwg-primary-dark));
+  border: none; border-radius: 12px;
+  color: var(--aiwg-fg-color); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
+  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
+}
+.aiwg-send-btn svg { width: 18px; height: 18px; }
+.aiwg-send-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }
+.aiwg-send-btn:active { transform: translateY(0); }
+.aiwg-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+/* ── Autocomplete suggestions dropdown ────────────────────────────────────── */
+.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,0.12);
+  overflow: hidden;
+  z-index: 100;
+  animation: aiwg-fade-up 0.15s ease both;
+}
+.aiwg-suggestions-header {
+  padding: 8px 14px 4px;
+  font-size: 11px; font-weight: 600;
+  color: #94a3b8;
+  text-transform: uppercase; letter-spacing: 0.06em;
+  border-bottom: 1px solid #f1f5f9;
+}
+.aiwg-suggestion-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  transition: background 0.1s;
+  border-bottom: 1px solid #f8fafc;
+}
+.aiwg-suggestion-item:last-child { border-bottom: none; }
+.aiwg-suggestion-item:hover,
+.aiwg-suggestion-item.aiwg-active { background: #f5f3ff; }
+.aiwg-suggestion-icon  { font-size: 16px; flex-shrink: 0; }
+.aiwg-suggestion-main  { flex: 1; min-width: 0; }
+.aiwg-suggestion-text  { font-size: 13px; font-weight: 500; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.aiwg-suggestion-text mark { background: none; color: #6366f1; font-weight: 600; }
+.aiwg-suggestion-desc  { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.aiwg-suggestion-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #ede9fe; color: #6366f1; flex-shrink: 0; }
+.aiwg-kbd-hint {
+  padding: 6px 14px;
+  font-size: 11px; color: #cbd5e1; background: #f8fafc;
+  display: flex; justify-content: flex-end; gap: 10px;
+}
+.aiwg-kbd-hint kbd { font-family: inherit; background: #e2e8f0; border-radius: 4px; padding: 1px 5px; font-size: 10px; color: #64748b; }
+/* ── Error toast ──────────────────────────────────────────────────────────── */
+.aiwg-error {
+  margin: 0 16px 8px;
+  padding: 8px 12px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #dc2626;
+}
+/* ── Minimized state ──────────────────────────────────────────────────────── */
+.aiwg-root.aiwg-minimized .aiwg-messages,
+.aiwg-root.aiwg-minimized .aiwg-chip-row,
+.aiwg-root.aiwg-minimized .aiwg-error,
+.aiwg-root.aiwg-minimized .aiwg-input-area,
+.aiwg-root.aiwg-minimized .aiwg-powered   { display: none !important; }
+.aiwg-root.aiwg-minimized .aiwg-minimize-btn { display: none !important; }
+.aiwg-root.aiwg-minimized { cursor: pointer; box-shadow: 0 8px 32px rgba(0,0,0,0.28); }
+.aiwg-root.aiwg-minimized .aiwg-header   { cursor: pointer !important; }
+/* ── Powered-by footer ────────────────────────────────────────────────────── */
+.aiwg-powered {
+  text-align: center;
+  padding: 6px 16px 10px;
+  font-size: 11px; color: #94a3b8;
+  flex-shrink: 0;
+  border-top: 1px solid #f1f5f9;
+  background: #fff;
+}
+.aiwg-powered a { color: #6366f1; text-decoration: none; font-weight: 500; }
+.aiwg-powered a:hover { text-decoration: underline; }
+/* ── Markdown rendering ───────────────────────────────────────────────────── */
+.aiwg-msg-bubble strong { font-weight: 600; }
+.aiwg-msg-bubble em     { font-style: italic; }
+.aiwg-msg-bubble code   { background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; font-family: 'Fira Code','Consolas',monospace; font-size: 0.9em; }
+.aiwg-msg--user .aiwg-msg-bubble code { background: rgba(255,255,255,0.2); }
+.aiwg-msg-bubble ol, .aiwg-msg-bubble ul { padding-left: 18px; margin: 6px 0; display: flex; flex-direction: column; gap: 3px; }
+.aiwg-msg-bubble ol  { list-style: decimal; }
+.aiwg-msg-bubble ul  { list-style: disc; }
+.aiwg-msg-bubble li  { line-height: 1.5; }
+.aiwg-msg-bubble h3, .aiwg-msg-bubble h4 { font-weight: 600; margin: 8px 0 4px; }
+.aiwg-msg-bubble p   { margin: 2px 0; }
+/* ── Dark theme ───────────────────────────────────────────────────────────── */
+.aiwg-root.aiwg-dark { background: #0f172a; color: #e2e8f0; }
+.aiwg-dark .aiwg-msg--bot .aiwg-msg-bubble { background: #1e293b; color: #e2e8f0; }
+.aiwg-dark .aiwg-input-area { background: #0f172a; border-top-color: #1e293b; }
+.aiwg-dark .aiwg-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }
+.aiwg-dark .aiwg-input:focus { border-color: #8b5cf6; background: #1e293b; box-shadow: 0 0 0 3px rgba(139,92,246,0.2); }
+.aiwg-dark .aiwg-suggestions { background: #1e293b; border-color: #334155; }
+.aiwg-dark .aiwg-suggestions-header { color: #64748b; border-bottom-color: #334155; }
+.aiwg-dark .aiwg-suggestion-item { border-bottom-color: #0f172a; }
+.aiwg-dark .aiwg-suggestion-item:hover,
+.aiwg-dark .aiwg-suggestion-item.aiwg-active { background: #2d1b69; }
+.aiwg-dark .aiwg-suggestion-text { color: #e2e8f0; }
+.aiwg-dark .aiwg-chip { background: #1e293b; border-color: #334155; }
+.aiwg-dark .aiwg-chip:hover { background: #2d1b69; }
+.aiwg-dark .aiwg-chip-shimmer { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; }
+.aiwg-dark .aiwg-kbd-hint { background: #1e293b; }
+.aiwg-dark .aiwg-welcome h4 { color: #e2e8f0; }
+.aiwg-dark .aiwg-powered { background: #0f172a; border-top-color: #1e293b; }
+`;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@courseecho/ai-core-sdk",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Framework-agnostic core AI chat SDK. Shared logic for all framework wrappers.",
   "license": "MIT",
   "author": "CourseEcho",
@@ -14,7 +14,9 @@
       "types": "./dist/index.d.ts"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch"
@@ -22,9 +24,16 @@
   "dependencies": {
     "rxjs": "^7.8.0"
   },
-  "keywords": ["ai", "courseecho", "chatbot", "sdk", "widget", "chat"],
+  "keywords": [
+    "ai",
+    "courseecho",
+    "chatbot",
+    "sdk",
+    "widget",
+    "chat"
+  ],
   "devDependencies": {
     "typescript": "^5.3.0",
     "@types/node": "^20.0.0"
   }
-}
+}