@courseecho/ai-core-sdk 1.0.20 → 1.0.22

package/dist/icons.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared SVG icons for AI Widget — single source of truth.
+ *
+ * Usage in React (JSX):
+ *   <div className="aiwg-avatar" dangerouslySetInnerHTML={{ __html: ICONS.BOT }} />
+ *
+ * Usage in jQuery / plain HTML template literals:
+ *   `<div class="aiwg-avatar">${ICONS.BOT}</div>`
+ */
+export declare const ICONS: {
+    readonly BOT: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"currentColor\" aria-hidden=\"true\">\n  <!-- head -->\n  <rect x=\"5\" y=\"8\" width=\"14\" height=\"11\" rx=\"2.5\"/>\n  <!-- eyes -->\n  <rect x=\"8.5\" y=\"11.5\" width=\"2\" height=\"2.5\" rx=\"1\" fill=\"white\"/>\n  <rect x=\"13.5\" y=\"11.5\" width=\"2\" height=\"2.5\" rx=\"1\" fill=\"white\"/>\n  <!-- mouth -->\n  <rect x=\"9\" y=\"15\" width=\"6\" height=\"1.2\" rx=\"0.6\" fill=\"white\" opacity=\"0.85\"/>\n  <!-- antenna stem -->\n  <rect x=\"11.25\" y=\"4.5\" width=\"1.5\" height=\"3.5\" rx=\"0.75\"/>\n  <!-- antenna ball -->\n  <circle cx=\"12\" cy=\"4\" r=\"1.5\"/>\n  <!-- left arm -->\n  <rect x=\"2.5\" y=\"11\" width=\"2.5\" height=\"5\" rx=\"1.25\"/>\n  <!-- right arm -->\n  <rect x=\"19\" y=\"11\" width=\"2.5\" height=\"5\" rx=\"1.25\"/>\n</svg>";
+    readonly USER: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"currentColor\" aria-hidden=\"true\">\n  <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n  <path d=\"M4 20c0-4.418 3.582-7 8-7s8 2.582 8 7\" fill=\"currentColor\"/>\n</svg>";
+    readonly WAVE: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"32\" height=\"32\" fill=\"currentColor\" aria-hidden=\"true\">\n  <!-- palm -->\n  <path d=\"M11 4.5a1 1 0 0 1 2 0v6.5a1 1 0 0 0 2 0V6a1 1 0 0 1 2 0v5a1 1 0 0 0 2 0V9a1 1 0 0 1 2 0v5c0 4-3 7-7 7H12c-3.86 0-7-3.14-7-7V9.97c0-.52.42-.97.93-1 .56-.02 1.07.44 1.07 1V12a1 1 0 0 0 2 0V4.5z\"/>\n</svg>";
+    readonly SEND: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n  <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/>\n  <polygon points=\"22 2 15 22 11 13 2 9 22 2\"/>\n</svg>";
+    readonly CLOSE: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" aria-hidden=\"true\">\n  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n</svg>";
+};
+/** 🎓 */ export declare const EMOJI_GRADUATION = "\uD83C\uDF93";
+/** 📋 */ export declare const EMOJI_CLIPBOARD = "\uD83D\uDCCB";
+/** 🏆 */ export declare const EMOJI_TROPHY = "\uD83C\uDFC6";
+/** ⬇️ */ export declare const EMOJI_DOWN_ARROW = "\u2B07\uFE0F";
+/** 📈 */ export declare const EMOJI_CHART_UP = "\uD83D\uDCC8";
+/** 🙋 */ export declare const EMOJI_HAND_RAISE = "\uD83D\uDE4B";
+/** 💡 */ export declare const EMOJI_BULB = "\uD83D\uDCA1";
+/** 📝 */ export declare const EMOJI_MEMO = "\uD83D\uDCDD";
+/** ➡️ */ export declare const EMOJI_RIGHT_ARROW = "\u27A1\uFE0F";
+/** 🆘 */ export declare const EMOJI_SOS = "\uD83C\uDD98";
+/** 🏋️ */ export declare const EMOJI_LIFT = "\uD83C\uDFCB\uFE0F";
+/** 🔍 */ export declare const EMOJI_SEARCH = "\uD83D\uDD0D";
+/** 📚 */ export declare const EMOJI_BOOKS = "\uD83D\uDCDA";
+/** 📦 */ export declare const EMOJI_PACKAGE = "\uD83D\uDCE6";
+/** 💳 */ export declare const EMOJI_CARD = "\uD83D\uDCB3";
+/** 🛒 */ export declare const EMOJI_CART = "\uD83D\uDED2";
+/** 🆓 */ export declare const EMOJI_FREE = "\uD83C\uDD93";
+/** 💰 */ export declare const EMOJI_MONEY = "\uD83D\uDCB0";
+/** 🔒 */ export declare const EMOJI_LOCK = "\uD83D\uDD12";
+/** 🎟️ */ export declare const EMOJI_TICKET = "\uD83C\uDF9F\uFE0F";
+/** 👤 */ export declare const EMOJI_USER = "\uD83D\uDC64";
+/** 💻 */ export declare const EMOJI_LAPTOP = "\uD83D\uDCBB";
+/** 🐛 */ export declare const EMOJI_BUG = "\uD83D\uDC1B";
+/** 🔧 */ export declare const EMOJI_WRENCH = "\uD83D\uDD27";
+/** 💬 */ export declare const EMOJI_CHAT = "\uD83D\uDCAC";
+/** 🚀 */ export declare const EMOJI_ROCKET = "\uD83D\uDE80";
+/** 📖 */ export declare const EMOJI_BOOK = "\uD83D\uDCD6";
+/** 🛠️ */ export declare const EMOJI_TOOLS = "\uD83D\uDEE0\uFE0F";
+/** ⚠️ */ export declare const EMOJI_WARNING = "\u26A0\uFE0F";

package/dist/icons.js

@@ -0,0 +1,81 @@
+/**
+ * Shared SVG icons for AI Widget — single source of truth.
+ *
+ * Usage in React (JSX):
+ *   <div className="aiwg-avatar" dangerouslySetInnerHTML={{ __html: ICONS.BOT }} />
+ *
+ * Usage in jQuery / plain HTML template literals:
+ *   `<div class="aiwg-avatar">${ICONS.BOT}</div>`
+ */
+/** Bot / AI assistant avatar */
+const BOT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
+  <!-- head -->
+  <rect x="5" y="8" width="14" height="11" rx="2.5"/>
+  <!-- eyes -->
+  <rect x="8.5" y="11.5" width="2" height="2.5" rx="1" fill="white"/>
+  <rect x="13.5" y="11.5" width="2" height="2.5" rx="1" fill="white"/>
+  <!-- mouth -->
+  <rect x="9" y="15" width="6" height="1.2" rx="0.6" fill="white" opacity="0.85"/>
+  <!-- antenna stem -->
+  <rect x="11.25" y="4.5" width="1.5" height="3.5" rx="0.75"/>
+  <!-- antenna ball -->
+  <circle cx="12" cy="4" r="1.5"/>
+  <!-- left arm -->
+  <rect x="2.5" y="11" width="2.5" height="5" rx="1.25"/>
+  <!-- right arm -->
+  <rect x="19" y="11" width="2.5" height="5" rx="1.25"/>
+</svg>`;
+/** Human / user avatar */
+const USER = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
+  <circle cx="12" cy="8" r="4"/>
+  <path d="M4 20c0-4.418 3.582-7 8-7s8 2.582 8 7" fill="currentColor"/>
+</svg>`;
+/** Waving hand — welcome screen */
+const WAVE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor" aria-hidden="true">
+  <!-- palm -->
+  <path d="M11 4.5a1 1 0 0 1 2 0v6.5a1 1 0 0 0 2 0V6a1 1 0 0 1 2 0v5a1 1 0 0 0 2 0V9a1 1 0 0 1 2 0v5c0 4-3 7-7 7H12c-3.86 0-7-3.14-7-7V9.97c0-.52.42-.97.93-1 .56-.02 1.07.44 1.07 1V12a1 1 0 0 0 2 0V4.5z"/>
+</svg>`;
+/** Paper-plane send button */
+const SEND = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <line x1="22" y1="2" x2="11" y2="13"/>
+  <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+</svg>`;
+/** Close / minimise (×) */
+const CLOSE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+  <line x1="18" y1="6" x2="6" y2="18"/>
+  <line x1="6" y1="6" x2="18" y2="18"/>
+</svg>`;
+export const ICONS = { BOT, USER, WAVE, SEND, CLOSE };
+// ---------------------------------------------------------------------------
+//  Chip / suggestion template emoji strings
+//  Using Unicode escapes so this file is encoding-safe regardless of editor.
+// ---------------------------------------------------------------------------
+/** 🎓 */ export const EMOJI_GRADUATION = '\u{1F393}';
+/** 📋 */ export const EMOJI_CLIPBOARD = '\u{1F4CB}';
+/** 🏆 */ export const EMOJI_TROPHY = '\u{1F3C6}';
+/** ⬇️ */ export const EMOJI_DOWN_ARROW = '\u2B07\uFE0F';
+/** 📈 */ export const EMOJI_CHART_UP = '\u{1F4C8}';
+/** 🙋 */ export const EMOJI_HAND_RAISE = '\u{1F64B}';
+/** 💡 */ export const EMOJI_BULB = '\u{1F4A1}';
+/** 📝 */ export const EMOJI_MEMO = '\u{1F4DD}';
+/** ➡️ */ export const EMOJI_RIGHT_ARROW = '\u27A1\uFE0F';
+/** 🆘 */ export const EMOJI_SOS = '\u{1F198}';
+/** 🏋️ */ export const EMOJI_LIFT = '\u{1F3CB}\uFE0F';
+/** 🔍 */ export const EMOJI_SEARCH = '\u{1F50D}';
+/** 📚 */ export const EMOJI_BOOKS = '\u{1F4DA}';
+/** 📦 */ export const EMOJI_PACKAGE = '\u{1F4E6}';
+/** 💳 */ export const EMOJI_CARD = '\u{1F4B3}';
+/** 🛒 */ export const EMOJI_CART = '\u{1F6D2}';
+/** 🆓 */ export const EMOJI_FREE = '\u{1F193}';
+/** 💰 */ export const EMOJI_MONEY = '\u{1F4B0}';
+/** 🔒 */ export const EMOJI_LOCK = '\u{1F512}';
+/** 🎟️ */ export const EMOJI_TICKET = '\u{1F39F}\uFE0F';
+/** 👤 */ export const EMOJI_USER = '\u{1F464}';
+/** 💻 */ export const EMOJI_LAPTOP = '\u{1F4BB}';
+/** 🐛 */ export const EMOJI_BUG = '\u{1F41B}';
+/** 🔧 */ export const EMOJI_WRENCH = '\u{1F527}';
+/** 💬 */ export const EMOJI_CHAT = '\u{1F4AC}';
+/** 🚀 */ export const EMOJI_ROCKET = '\u{1F680}';
+/** 📖 */ export const EMOJI_BOOK = '\u{1F4D6}';
+/** 🛠️ */ export const EMOJI_TOOLS = '\u{1F6E0}\uFE0F';
+/** ⚠️ */ export const EMOJI_WARNING = '\u26A0\uFE0F';

package/dist/index.d.ts

@@ -8,3 +8,5 @@ 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';
+export { ICONS, EMOJI_GRADUATION, EMOJI_CLIPBOARD, EMOJI_TROPHY, EMOJI_DOWN_ARROW, EMOJI_CHART_UP, EMOJI_HAND_RAISE, EMOJI_BULB, EMOJI_MEMO, EMOJI_RIGHT_ARROW, EMOJI_SOS, EMOJI_LIFT, EMOJI_SEARCH, EMOJI_BOOKS, EMOJI_PACKAGE, EMOJI_CARD, EMOJI_CART, EMOJI_FREE, EMOJI_MONEY, EMOJI_LOCK, EMOJI_TICKET, EMOJI_USER, EMOJI_LAPTOP, EMOJI_BUG, EMOJI_WRENCH, EMOJI_CHAT, EMOJI_ROCKET, EMOJI_BOOK, EMOJI_TOOLS, EMOJI_WARNING, } from './icons';

package/dist/index.js

@@ -11,3 +11,7 @@ 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';
+// Shared SVG icons + encoding-safe emoji strings
+export { ICONS, EMOJI_GRADUATION, EMOJI_CLIPBOARD, EMOJI_TROPHY, EMOJI_DOWN_ARROW, EMOJI_CHART_UP, EMOJI_HAND_RAISE, EMOJI_BULB, EMOJI_MEMO, EMOJI_RIGHT_ARROW, EMOJI_SOS, EMOJI_LIFT, EMOJI_SEARCH, EMOJI_BOOKS, EMOJI_PACKAGE, EMOJI_CARD, EMOJI_CART, EMOJI_FREE, EMOJI_MONEY, EMOJI_LOCK, EMOJI_TICKET, EMOJI_USER, EMOJI_LAPTOP, EMOJI_BUG, EMOJI_WRENCH, EMOJI_CHAT, EMOJI_ROCKET, EMOJI_BOOK, EMOJI_TOOLS, EMOJI_WARNING, } from './icons';

package/dist/widget-css.d.ts

@@ -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  color: #fff;\n}\n.aiwg-avatar svg { display: block; width: 22px; height: 22px; }\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 svg { display: block; width: 16px; height: 16px; }\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 {\n  display: flex; align-items: center; justify-content: center;\n  margin-bottom: 4px;\n  color: var(--aiwg-primary);\n}\n.aiwg-welcome-icon svg { width: 36px; height: 36px; }\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-avatar svg { display: block; width: 16px; height: 16px; }\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

@@ -0,0 +1,398 @@
+/**
+ * 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);
+  color: #fff;
+}
+.aiwg-avatar svg { display: block; width: 22px; height: 22px; }
+.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 svg { display: block; width: 16px; height: 16px; }
+.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 {
+  display: flex; align-items: center; justify-content: center;
+  margin-bottom: 4px;
+  color: var(--aiwg-primary);
+}
+.aiwg-welcome-icon svg { width: 36px; height: 36px; }
+.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-avatar svg { display: block; width: 16px; height: 16px; }
+.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

@@ -1,6 +1,6 @@
 {
   "name": "@courseecho/ai-core-sdk",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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"
   }
-}
+}