@cognitiondesk/widget 1.1.0

package/dist/widget.umd.cjs

@@ -0,0 +1,256 @@
+(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d.CognitionDeskWidget={}))})(this,function(d){"use strict";const l="https://mounaji-backendv3.onrender.com",_=`
+  :host {
+    all: initial;
+    font-family: system-ui, sans-serif;
+    --cd-offset: clamp(12px, 4vw, 24px);
+    --cd-launcher-size: clamp(56px, 14vw, 64px);
+    --cd-launcher-gap: 12px;
+    --cd-viewport-height: 100vh;
+    --cd-safe-top: env(safe-area-inset-top, 0px);
+    --cd-safe-right: env(safe-area-inset-right, 0px);
+    --cd-safe-bottom: env(safe-area-inset-bottom, 0px);
+    --cd-safe-left: env(safe-area-inset-left, 0px);
+  }
+
+  .cd-root {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2147483000;
+  }
+
+  .cd-root > * {
+    pointer-events: auto;
+  }
+
+  .cd-widget-btn {
+    position: fixed;
+    bottom: calc(var(--cd-offset) + var(--cd-safe-bottom));
+    right: calc(var(--cd-offset) + var(--cd-safe-right));
+    z-index: 2147483647;
+    width: var(--cd-launcher-size);
+    height: var(--cd-launcher-size);
+    border-radius: 50%;
+    background: var(--cd-primary, #2563eb);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 20px rgba(37,99,235,.45);
+    transition: transform .2s, box-shadow .2s;
+    touch-action: manipulation;
+  }
+  .cd-widget-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,99,235,.55); }
+  .cd-widget-btn svg { width: 26px; height: 26px; }
+
+  .cd-panel {
+    position: fixed;
+    bottom: calc(var(--cd-offset) + var(--cd-safe-bottom) + var(--cd-launcher-size) + var(--cd-launcher-gap));
+    right: calc(var(--cd-offset) + var(--cd-safe-right));
+    z-index: 2147483646;
+    width: min(380px, calc(100vw - (var(--cd-offset) * 2) - var(--cd-safe-left) - var(--cd-safe-right)));
+    height: min(560px, calc(var(--cd-viewport-height) - (var(--cd-offset) * 2) - var(--cd-safe-top) - var(--cd-safe-bottom) - var(--cd-launcher-size) - var(--cd-launcher-gap)));
+    max-height: calc(var(--cd-viewport-height) - (var(--cd-offset) * 2) - var(--cd-safe-top) - var(--cd-safe-bottom));
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 12px 40px rgba(0,0,0,.18);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transform: scale(.96) translateY(8px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s, transform .2s;
+    overscroll-behavior: contain;
+  }
+  .cd-panel.open {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  .cd-header {
+    background: var(--cd-primary, #2563eb);
+    color: #fff;
+    padding: 14px 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+  .cd-header-avatar {
+    width: 36px; height: 36px; border-radius: 50%;
+    background: rgba(255,255,255,.25);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 18px;
+  }
+  .cd-header-info { flex: 1; min-width: 0; }
+  .cd-header-name { font-size: 14px; font-weight: 600; }
+  .cd-header-status { font-size: 11px; opacity: .85; display: flex; align-items: center; gap: 4px; }
+  .cd-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
+  .cd-close-btn {
+    background: none; border: none; color: rgba(255,255,255,.75);
+    cursor: pointer; padding: 4px; border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .cd-close-btn:hover { color: #fff; background: rgba(255,255,255,.15); }
+  .cd-close-btn svg { width: 18px; height: 18px; }
+
+  .cd-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    background: #f8fafc;
+  }
+  .cd-msg {
+    max-width: 78%;
+    padding: 10px 13px;
+    border-radius: 14px;
+    font-size: 13.5px;
+    line-height: 1.5;
+    word-break: break-word;
+  }
+  .cd-msg.user {
+    align-self: flex-end;
+    background: var(--cd-primary, #2563eb);
+    color: #fff;
+    border-bottom-right-radius: 4px;
+  }
+  .cd-msg.assistant {
+    align-self: flex-start;
+    background: #fff;
+    color: #1e293b;
+    border-bottom-left-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0,0,0,.08);
+  }
+  .cd-msg.error {
+    align-self: flex-start;
+    background: #fef2f2;
+    color: #b91c1c;
+    border-bottom-left-radius: 4px;
+  }
+  .cd-typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
+  .cd-typing span {
+    width: 7px; height: 7px; background: #94a3b8; border-radius: 50%;
+    animation: cd-bounce .9s infinite;
+  }
+  .cd-typing span:nth-child(2) { animation-delay: .15s; }
+  .cd-typing span:nth-child(3) { animation-delay: .3s; }
+  @keyframes cd-bounce {
+    0%,60%,100% { transform: translateY(0); }
+    30% { transform: translateY(-5px); }
+  }
+
+  .cd-input-area {
+    border-top: 1px solid #e2e8f0;
+    padding: 12px;
+    padding-bottom: calc(12px + (var(--cd-safe-bottom) * 0.35));
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+    background: #fff;
+    flex-shrink: 0;
+  }
+  .cd-textarea {
+    flex: 1;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    padding: 9px 12px;
+    font-size: 13.5px;
+    font-family: inherit;
+    resize: none;
+    outline: none;
+    max-height: 120px;
+    line-height: 1.5;
+    background: #f8fafc;
+    color: #1e293b;
+    transition: border-color .15s;
+  }
+  .cd-textarea:focus { border-color: var(--cd-primary, #2563eb); background: #fff; }
+  .cd-send-btn {
+    width: 36px; height: 36px;
+    background: var(--cd-primary, #2563eb);
+    color: #fff;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    transition: opacity .15s;
+  }
+  .cd-send-btn:disabled { opacity: .45; cursor: not-allowed; }
+  .cd-send-btn svg { width: 16px; height: 16px; }
+
+  .cd-powered {
+    text-align: center;
+    font-size: 10px;
+    color: #94a3b8;
+    padding: 6px 0;
+    background: #fff;
+    flex-shrink: 0;
+  }
+  .cd-powered a { color: #94a3b8; text-decoration: none; }
+  .cd-powered a:hover { color: #64748b; }
+
+  /* Dark theme */
+  .cd-dark .cd-panel { background: #1e293b; }
+  .cd-dark .cd-messages { background: #0f172a; }
+  .cd-dark .cd-msg.assistant { background: #1e293b; color: #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
+  .cd-dark .cd-input-area { background: #1e293b; border-color: #334155; }
+  .cd-dark .cd-textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; }
+  .cd-dark .cd-textarea:focus { border-color: var(--cd-primary, #3b82f6); }
+  .cd-dark .cd-powered { background: #1e293b; }
+
+  @media (max-width: 640px) {
+    .cd-panel {
+      left: calc(var(--cd-offset) + var(--cd-safe-left));
+      right: calc(var(--cd-offset) + var(--cd-safe-right));
+      width: auto;
+      height: min(540px, calc(var(--cd-viewport-height) - (var(--cd-offset) * 2) - var(--cd-safe-top) - var(--cd-safe-bottom) - 12px));
+    }
+  }
+
+  @media (max-width: 480px) {
+    .cd-panel {
+      top: var(--cd-safe-top);
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: auto;
+      height: calc(var(--cd-viewport-height) - var(--cd-safe-top));
+      max-height: calc(var(--cd-viewport-height) - var(--cd-safe-top));
+      border-radius: 18px 18px 0 0;
+    }
+
+    .cd-header {
+      padding: 16px;
+    }
+
+    .cd-messages {
+      padding: 14px;
+    }
+
+    .cd-input-area {
+      padding: 10px;
+      padding-bottom: calc(10px + var(--cd-safe-bottom));
+    }
+
+    .cd-textarea {
+      font-size: 16px;
+    }
+  }
+`,m={chat:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',close:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',send:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>'};function w(){return"cd_"+Math.random().toString(36).slice(2)+Date.now().toString(36)}class g{constructor(e={}){if(!e.apiKey)throw new Error("[CognitionDesk] apiKey is required");this._cfg={apiKey:e.apiKey,widgetId:e.widgetId||null,assistantId:e.assistantId||null,backendUrl:e.backendUrl||l,primaryColor:e.primaryColor||"#2563eb",theme:e.theme||"light",botName:e.botName||"AI Assistant",botEmoji:e.botEmoji||"🤖",welcomeMessage:e.welcomeMessage||"Hello! How can I help you today?",placeholder:e.placeholder||"Type a message…",position:e.position||"bottom-right",streaming:e.streaming!==!1},this._sessionId=w(),this._messages=[],this._open=!1,this._loading=!1,this._container=null,this._shadow=null,this._panel=null,this._messagesEl=null,this._textarea=null,this._sendBtn=null,this._viewportHandler=null}mount(e){const t=()=>{const a=e||document.body;this._container=document.createElement("div"),this._container.setAttribute("data-cognitiondesk",""),a.appendChild(this._container),this._shadow=this._container.attachShadow({mode:"open"});const s=document.createElement("style");s.textContent=_,this._shadow.appendChild(s),this._buildDOM(),this._applyTheme(),this._syncViewportMetrics(),this._bindViewportMetrics(),this._bindEvents(),this._cfg.welcomeMessage&&this._appendMessage("assistant",this._cfg.welcomeMessage,!1)};return this._cfg.widgetId?this._fetchWidgetConfig().then(()=>t()).catch(()=>t()):(t(),Promise.resolve(this))}async _fetchWidgetConfig(){var t;const e=`${this._cfg.backendUrl}/platforms/web-widget/public/${this._cfg.widgetId}`;try{const a=await fetch(e);if(!a.ok)return;const{config:s}=await a.json();if(!s)return;s.botName&&!this._userSet("botName")&&(this._cfg.botName=s.botName),s.welcomeMessage&&!this._userSet("welcomeMessage")&&(this._cfg.welcomeMessage=s.welcomeMessage),s.primaryColor&&!this._userSet("primaryColor")&&(this._cfg.primaryColor=s.primaryColor),s.placeholder&&!this._userSet("placeholder")&&(this._cfg.placeholder=s.placeholder),s.assistantId&&!this._cfg.assistantId&&(this._cfg.assistantId=s.assistantId),(t=s.avatar)!=null&&t.value&&!this._userSet("botEmoji")&&(this._cfg.botEmoji=s.avatar.value)}catch{}}_userSet(e){return!1}unmount(){this._unbindViewportMetrics(),this._container&&(this._container.remove(),this._container=null)}open(){var e,t;this._open=!0,this._syncViewportMetrics(),(e=this._panel)==null||e.classList.add("open"),(t=this._textarea)==null||t.focus()}close(){var e;this._open=!1,(e=this._panel)==null||e.classList.remove("open")}toggle(){this._open?this.close():this.open()}clearHistory(){this._messages=[],this._messagesEl&&(this._messagesEl.innerHTML=""),this._cfg.welcomeMessage&&this._appendMessage("assistant",this._cfg.welcomeMessage)}_buildDOM(){const e=document.createElement("div");e.className="cd-root";const t=document.createElement("button");t.className="cd-widget-btn",t.innerHTML=m.chat,t.setAttribute("aria-label","Open chat"),t.style.setProperty("--cd-primary",this._cfg.primaryColor),this._toggleBtn=t;const a=document.createElement("div");a.className="cd-panel",this._panel=a;const s=document.createElement("div");s.className="cd-header",s.innerHTML=`
+      <div class="cd-header-avatar">${this._cfg.botEmoji}</div>
+      <div class="cd-header-info">
+        <div class="cd-header-name">${this._escHtml(this._cfg.botName)}</div>
+        <div class="cd-header-status">
+          <span class="cd-status-dot"></span> Online
+        </div>
+      </div>
+    `;const r=document.createElement("button");r.className="cd-close-btn",r.innerHTML=m.close,r.setAttribute("aria-label","Close chat"),s.appendChild(r),this._closeBtn=r;const i=document.createElement("div");i.className="cd-messages",i.setAttribute("role","log"),i.setAttribute("aria-live","polite"),this._messagesEl=i;const n=document.createElement("div");n.className="cd-input-area";const o=document.createElement("textarea");o.className="cd-textarea",o.rows=1,o.placeholder=this._cfg.placeholder,this._textarea=o;const c=document.createElement("button");c.className="cd-send-btn",c.innerHTML=m.send,c.setAttribute("aria-label","Send"),this._sendBtn=c,n.appendChild(o),n.appendChild(c);const h=document.createElement("div");h.className="cd-powered",h.innerHTML='Powered by <a href="https://cognitiondesk.com" target="_blank" rel="noopener">CognitionDesk</a>',a.appendChild(s),a.appendChild(i),a.appendChild(n),a.appendChild(h),e.appendChild(t),e.appendChild(a),this._shadow.appendChild(e),this._root=e}_applyTheme(){var t,a,s;(this._cfg.theme==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":this._cfg.theme)==="dark"&&((t=this._root)==null||t.classList.add("cd-dark")),(a=this._root)==null||a.style.setProperty("--cd-primary",this._cfg.primaryColor),(s=this._panel)==null||s.style.setProperty("--cd-primary",this._cfg.primaryColor)}_bindEvents(){this._toggleBtn.addEventListener("click",()=>this.toggle()),this._closeBtn.addEventListener("click",()=>this.close()),this._sendBtn.addEventListener("click",()=>this._sendMessage()),this._textarea.addEventListener("keydown",e=>{e.key==="Enter"&&!e.shiftKey&&(e.preventDefault(),this._sendMessage())}),this._textarea.addEventListener("input",()=>{this._textarea.style.height="auto",this._textarea.style.height=Math.min(this._textarea.scrollHeight,120)+"px"}),this._textarea.addEventListener("focus",()=>{this._syncViewportMetrics()})}_bindViewportMetrics(){this._viewportHandler||(this._viewportHandler=()=>this._syncViewportMetrics(),window.addEventListener("resize",this._viewportHandler,{passive:!0}),window.addEventListener("orientationchange",this._viewportHandler),window.visualViewport&&(window.visualViewport.addEventListener("resize",this._viewportHandler),window.visualViewport.addEventListener("scroll",this._viewportHandler)))}_unbindViewportMetrics(){this._viewportHandler&&(window.removeEventListener("resize",this._viewportHandler),window.removeEventListener("orientationchange",this._viewportHandler),window.visualViewport&&(window.visualViewport.removeEventListener("resize",this._viewportHandler),window.visualViewport.removeEventListener("scroll",this._viewportHandler)),this._viewportHandler=null)}_syncViewportMetrics(){const e=this._root||this._container;if(!e)return;const t=window.visualViewport,a=t?t.height:window.innerHeight;e.style.setProperty("--cd-viewport-height",`${Math.round(a)}px`)}async _sendMessage(){const e=this._textarea.value.trim();if(!(!e||this._loading)){this._textarea.value="",this._textarea.style.height="auto",this._loading=!0,this._sendBtn.disabled=!0,this._messages.push({role:"user",content:e}),this._appendMessage("user",e,!1);try{if(this._cfg.streaming)await this._callApiStream();else{const t=this._showTyping(),a=await this._callApi();this._removeTyping(t),this._messages.push({role:"assistant",content:a}),this._appendMessage("assistant",a,!0)}}catch(t){this._appendMessage("error","Sorry, something went wrong. Please try again.",!1),console.error("[CognitionDesk]",t)}finally{this._loading=!1,this._sendBtn.disabled=!1,this._textarea.focus()}}}_buildRequestBody(){return{messages:this._messages,assistantId:this._cfg.assistantId||void 0,userContext:{sessionId:this._sessionId,assistantId:this._cfg.assistantId||void 0,widgetId:this._cfg.widgetId||void 0,platform:"cognitiondesk-widget"}}}async _callApiStream(){const e=`${this._cfg.backendUrl}/chat-apiKeyAuth/stream`,t=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json","x-api-key":this._cfg.apiKey},body:JSON.stringify({...this._buildRequestBody(),stream:!0})});if(!t.ok){const o=await t.json().catch(()=>({}));throw new Error(o.message||`HTTP ${t.status}`)}const a=document.createElement("div");a.className="cd-msg assistant",a.innerHTML='<div class="cd-typing"><span></span><span></span><span></span></div>',this._messagesEl.appendChild(a),this._scrollToBottom();const s=t.body.getReader(),r=new TextDecoder;let i="",n=!1;try{for(;;){const{done:o,value:c}=await s.read();if(o)break;const h=r.decode(c,{stream:!0});for(const u of h.split(`
+`)){if(!u.startsWith("data: "))continue;const b=u.slice(6).trim();if(b==="[DONE]")break;let f;try{f=JSON.parse(b)}catch{continue}f.type==="content"&&f.data&&(n||(a.innerHTML="",n=!0),i+=f.data,a.innerHTML=this._renderMarkdown(i),this._scrollToBottom())}}}finally{s.releaseLock()}n||(a.innerHTML=this._renderMarkdown("No response")),i&&this._messages.push({role:"assistant",content:i})}async _callApi(){var s,r,i;const e=`${this._cfg.backendUrl}/chat-apiKeyAuth/chat`,t=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json","x-api-key":this._cfg.apiKey},body:JSON.stringify(this._buildRequestBody())});if(!t.ok){const n=await t.json().catch(()=>({}));throw new Error(n.message||`HTTP ${t.status}`)}const a=await t.json();return a.response||a.message||a.content||((i=(r=(s=a.choices)==null?void 0:s[0])==null?void 0:r.message)==null?void 0:i.content)||"No response"}_appendMessage(e,t,a=!0){const s=document.createElement("div");s.className=`cd-msg ${e}`,a&&e!=="user"?s.innerHTML=this._renderMarkdown(t):s.textContent=t,this._messagesEl.appendChild(s),this._scrollToBottom()}_renderMarkdown(e){if(!e)return"";let t=this._escHtml(e);return t=t.replace(/```[\w]*\n?([\s\S]*?)```/g,(a,s)=>`<pre style="background:#0f172a;color:#e2e8f0;padding:10px;border-radius:6px;font-size:12px;overflow-x:auto;margin:6px 0;white-space:pre-wrap">${s.trim()}</pre>`),t=t.replace(/`([^`]+)`/g,'<code style="background:rgba(0,0,0,.08);padding:1px 5px;border-radius:4px;font-size:.9em">$1</code>'),t=t.replace(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>"),t=t.replace(/__([^_]+)__/g,"<strong>$1</strong>"),t=t.replace(/\*([^*]+)\*/g,"<em>$1</em>"),t=t.replace(/_([^_]+)_/g,"<em>$1</em>"),t=t.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener" style="color:var(--cd-primary,#2563eb)">$1</a>'),t=t.replace(/\n/g,"<br>"),t}_showTyping(){const e=document.createElement("div");return e.className="cd-msg assistant",e.innerHTML='<div class="cd-typing"><span></span><span></span><span></span></div>',this._messagesEl.appendChild(e),this._scrollToBottom(),e}_removeTyping(e){e==null||e.remove()}_scrollToBottom(){this._messagesEl&&(this._messagesEl.scrollTop=this._messagesEl.scrollHeight)}_escHtml(e){return String(e).replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[t])}}function v(p){const e=new g(p);return e.mount(),e}if(typeof document<"u"){const p=()=>{document.querySelectorAll("script[data-api-key]").forEach(e=>{const t=e.getAttribute("data-api-key");if(!t)return;const a=e.getAttribute("data-widget-id")||void 0,s=e.getAttribute("data-streaming"),r=new g({apiKey:t,widgetId:a,assistantId:e.getAttribute("data-assistant-id")||void 0,theme:e.getAttribute("data-theme")||"light",primaryColor:e.getAttribute("data-primary-color")||"#2563eb",botName:e.getAttribute("data-bot-name")||"AI Assistant",botEmoji:e.getAttribute("data-bot-emoji")||void 0,welcomeMessage:e.getAttribute("data-welcome-message")||void 0,placeholder:e.getAttribute("data-placeholder")||void 0,backendUrl:e.getAttribute("data-backend-url")||void 0,streaming:s===null?!0:s!=="false"});Promise.resolve(r.mount())})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",p):p()}d.CognitionDeskWidget=g,d.default=g,d.init=v,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@cognitiondesk/widget",
+  "version": "1.1.0",
+  "description": "Embed a CognitionDesk AI chat widget into any website. Authenticate with an API key from your CognitionDesk dashboard.",
+  "keywords": ["chat", "widget", "ai", "cognitiondesk", "chatbot", "react", "streaming", "mounaji"],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/widget.umd.cjs",
+  "module": "./dist/widget.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/widget.es.js",
+      "require": "./dist/widget.umd.cjs"
+    },
+    "./react": {
+      "import": "./dist/react.es.js",
+      "require": "./dist/react.umd.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && vite build --config vite.config.react.js",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.1.0"
+  }
+}

package/src/index.js

@@ -0,0 +1,78 @@
+/**
+ * @cognitiondesk/widget — main entry point (vanilla JS / UMD)
+ *
+ * For React, import from '@cognitiondesk/widget/react' instead.
+ */
+
+import CognitionDeskWidget from './widget.js';
+export { CognitionDeskWidget };
+export default CognitionDeskWidget;
+
+/**
+ * Convenience global init — used by the UMD/script-tag build.
+ *
+ *   <script src="widget.umd.js"></script>
+ *   <script>
+ *     CognitionDesk.init({ apiKey: 'xxx', assistantId: 'yyy' });
+ *   </script>
+ */
+export function init(config) {
+  const w = new CognitionDeskWidget(config);
+  w.mount();
+  return w;
+}
+
+/**
+ * Auto-init via data attributes when included as a script tag:
+ *
+ *   <!-- Minimal — config loaded from platform -->
+ *   <script src="widget.umd.cjs"
+ *     data-api-key="YOUR_API_KEY"
+ *     data-widget-id="widget_xxx">
+ *   </script>
+ *
+ *   <!-- Full inline config -->
+ *   <script src="widget.umd.cjs"
+ *     data-api-key="YOUR_API_KEY"
+ *     data-assistant-id="asst_xxx"
+ *     data-theme="light"
+ *     data-primary-color="#2563eb"
+ *     data-bot-name="Support Bot"
+ *     data-bot-emoji="🤖"
+ *     data-welcome-message="Hi! How can I help?"
+ *     data-placeholder="Type a message…"
+ *     data-streaming="true"
+ *     data-backend-url="https://mounaji-backendv3.onrender.com">
+ *   </script>
+ */
+if (typeof document !== 'undefined') {
+  const _autoInit = () => {
+    document.querySelectorAll('script[data-api-key]').forEach(script => {
+      const apiKey = script.getAttribute('data-api-key');
+      if (!apiKey) return;
+      const widgetId   = script.getAttribute('data-widget-id') || undefined;
+      const streamingAttr = script.getAttribute('data-streaming');
+      const w = new CognitionDeskWidget({
+        apiKey,
+        widgetId,
+        assistantId:    script.getAttribute('data-assistant-id')   || undefined,
+        theme:          script.getAttribute('data-theme')           || 'light',
+        primaryColor:   script.getAttribute('data-primary-color')   || '#2563eb',
+        botName:        script.getAttribute('data-bot-name')        || 'AI Assistant',
+        botEmoji:       script.getAttribute('data-bot-emoji')       || undefined,
+        welcomeMessage: script.getAttribute('data-welcome-message') || undefined,
+        placeholder:    script.getAttribute('data-placeholder')     || undefined,
+        backendUrl:     script.getAttribute('data-backend-url')     || undefined,
+        streaming:      streamingAttr === null ? true : streamingAttr !== 'false',
+      });
+      // mount() is async when widgetId is set (fetches remote config first)
+      Promise.resolve(w.mount());
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', _autoInit);
+  } else {
+    _autoInit();
+  }
+}

package/src/react.jsx

@@ -0,0 +1,114 @@
+/**
+ * CognitionDesk React component wrapper.
+ *
+ * Usage:
+ *   import { CognitionDeskWidget } from '@cognitiondesk/widget/react';
+ *
+ *   // Minimal — loads config from the platform using widgetId
+ *   <CognitionDeskWidget apiKey="YOUR_API_KEY" widgetId="widget_xxx" />
+ *
+ *   // Full inline config — no widgetId needed
+ *   <CognitionDeskWidget
+ *     apiKey="YOUR_API_KEY"
+ *     assistantId="assistant-id"
+ *     theme="light"
+ *     primaryColor="#2563eb"
+ *     botName="Support Bot"
+ *     botEmoji="🤖"
+ *     welcomeMessage="Hi! How can I help?"
+ *     placeholder="Type a message…"
+ *     defaultOpen={false}
+ *     streaming={true}
+ *     backendUrl="https://mounaji-backendv3.onrender.com"
+ *     onOpen={() => console.log('chat opened')}
+ *     onClose={() => console.log('chat closed')}
+ *   />
+ */
+
+import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import CognitionDeskWidgetCore from './widget.js';
+
+export const CognitionDeskWidget = forwardRef(function CognitionDeskWidget(props, ref) {
+  const {
+    apiKey,
+    widgetId,
+    assistantId,
+    theme        = 'light',
+    primaryColor = '#2563eb',
+    botName      = 'AI Assistant',
+    botEmoji     = '🤖',
+    welcomeMessage = 'Hello! How can I help you today?',
+    placeholder  = 'Type a message…',
+    defaultOpen  = false,
+    streaming    = true,
+    backendUrl,
+    onOpen,
+    onClose,
+  } = props;
+
+  const widgetRef = useRef(null);
+  const mountRef  = useRef(null);
+
+  // Expose widget API to parent via ref
+  useImperativeHandle(ref, () => ({
+    open:         () => widgetRef.current?.open(),
+    close:        () => widgetRef.current?.close(),
+    toggle:       () => widgetRef.current?.toggle(),
+    clearHistory: () => widgetRef.current?.clearHistory(),
+  }), []);
+
+  useEffect(() => {
+    if (!apiKey) {
+      console.error('[CognitionDesk] apiKey prop is required');
+      return;
+    }
+
+    const widget = new CognitionDeskWidgetCore({
+      apiKey,
+      widgetId,
+      assistantId,
+      theme,
+      primaryColor,
+      botName,
+      botEmoji,
+      welcomeMessage,
+      placeholder,
+      streaming,
+      ...(backendUrl ? { backendUrl } : {}),
+    });
+
+    // Patch open/close to fire callbacks
+    if (onOpen || onClose) {
+      const origOpen  = widget.open.bind(widget);
+      const origClose = widget.close.bind(widget);
+      widget.open  = (...a) => { origOpen(...a);  onOpen?.(); };
+      widget.close = (...a) => { origClose(...a); onClose?.(); };
+    }
+
+    // mount() returns a Promise when widgetId is set
+    Promise.resolve(widget.mount(mountRef.current)).then(() => {
+      widgetRef.current = widget;
+      if (defaultOpen) widget.open();
+    });
+
+    return () => {
+      widget.unmount();
+      widgetRef.current = null;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiKey, widgetId, assistantId]); // re-init only when identity changes
+
+  // Sync visual-only props without full re-init
+  useEffect(() => {
+    const w = widgetRef.current;
+    if (!w) return;
+    w._cfg.theme        = theme;
+    w._cfg.primaryColor = primaryColor;
+    w._applyTheme?.();
+  }, [theme, primaryColor]);
+
+  return <div ref={mountRef} data-cognitiondesk-root="" />;
+});
+
+// Also expose the raw class for advanced use
+export { default as CognitionDeskWidgetCore } from './widget.js';