@cognitiondesk/widget 1.1.0

package/dist/react.umd.cjs

@@ -0,0 +1,256 @@
+(function(c,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],u):(c=typeof globalThis<"u"?globalThis:c||self,u(c.CognitionDeskWidgetReact={},c.jsxRuntime,c.React))})(this,function(c,u,g){"use strict";const C="https://mounaji-backendv3.onrender.com",H=`
+  :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;
+    }
+  }
+`,v={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 T(){return"cd_"+Math.random().toString(36).slice(2)+Date.now().toString(36)}let k=class{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||C,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=T(),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=H,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=v.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 o=document.createElement("button");o.className="cd-close-btn",o.innerHTML=v.close,o.setAttribute("aria-label","Close chat"),s.appendChild(o),this._closeBtn=o;const r=document.createElement("div");r.className="cd-messages",r.setAttribute("role","log"),r.setAttribute("aria-live","polite"),this._messagesEl=r;const n=document.createElement("div");n.className="cd-input-area";const d=document.createElement("textarea");d.className="cd-textarea",d.rows=1,d.placeholder=this._cfg.placeholder,this._textarea=d;const l=document.createElement("button");l.className="cd-send-btn",l.innerHTML=v.send,l.setAttribute("aria-label","Send"),this._sendBtn=l,n.appendChild(d),n.appendChild(l);const p=document.createElement("div");p.className="cd-powered",p.innerHTML='Powered by <a href="https://cognitiondesk.com" target="_blank" rel="noopener">CognitionDesk</a>',a.appendChild(s),a.appendChild(r),a.appendChild(n),a.appendChild(p),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 d=await t.json().catch(()=>({}));throw new Error(d.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(),o=new TextDecoder;let r="",n=!1;try{for(;;){const{done:d,value:l}=await s.read();if(d)break;const p=o.decode(l,{stream:!0});for(const m of p.split(`
+`)){if(!m.startsWith("data: "))continue;const _=m.slice(6).trim();if(_==="[DONE]")break;let f;try{f=JSON.parse(_)}catch{continue}f.type==="content"&&f.data&&(n||(a.innerHTML="",n=!0),r+=f.data,a.innerHTML=this._renderMarkdown(r),this._scrollToBottom())}}}finally{s.releaseLock()}n||(a.innerHTML=this._renderMarkdown("No response")),r&&this._messages.push({role:"assistant",content:r})}async _callApi(){var s,o,r;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||((r=(o=(s=a.choices)==null?void 0:s[0])==null?void 0:o.message)==null?void 0:r.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])}};const L=g.forwardRef(function(e,t){const{apiKey:a,widgetId:s,assistantId:o,theme:r="light",primaryColor:n="#2563eb",botName:d="AI Assistant",botEmoji:l="🤖",welcomeMessage:p="Hello! How can I help you today?",placeholder:m="Type a message…",defaultOpen:_=!1,streaming:f=!0,backendUrl:E,onOpen:b,onClose:x}=e,h=g.useRef(null),M=g.useRef(null);return g.useImperativeHandle(t,()=>({open:()=>{var i;return(i=h.current)==null?void 0:i.open()},close:()=>{var i;return(i=h.current)==null?void 0:i.close()},toggle:()=>{var i;return(i=h.current)==null?void 0:i.toggle()},clearHistory:()=>{var i;return(i=h.current)==null?void 0:i.clearHistory()}}),[]),g.useEffect(()=>{if(!a){console.error("[CognitionDesk] apiKey prop is required");return}const i=new k({apiKey:a,widgetId:s,assistantId:o,theme:r,primaryColor:n,botName:d,botEmoji:l,welcomeMessage:p,placeholder:m,streaming:f,...E?{backendUrl:E}:{}});if(b||x){const w=i.open.bind(i),I=i.close.bind(i);i.open=(...y)=>{w(...y),b==null||b()},i.close=(...y)=>{I(...y),x==null||x()}}return Promise.resolve(i.mount(M.current)).then(()=>{h.current=i,_&&i.open()}),()=>{i.unmount(),h.current=null}},[a,s,o]),g.useEffect(()=>{var w;const i=h.current;i&&(i._cfg.theme=r,i._cfg.primaryColor=n,(w=i._applyTheme)==null||w.call(i))},[r,n]),u.jsx("div",{ref:M,"data-cognitiondesk-root":""})});c.CognitionDeskWidget=L,c.CognitionDeskWidgetCore=k,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});