@cas0570/chat-widget 0.0.1

package/dist/geoapps-chat-widget.umd.cjs

@@ -0,0 +1,597 @@
+(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","react-dom/client"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.GeoAppsChatWidget={},f.React,f.React,f.ReactDOM))})(this,function(f,t,c,le){"use strict";const ce="gcw_chat_",de="gcw_popout_",ue="gcw_read_";let J=!1;function U(e){return`${ce}${e||"default"}`}function pe(e,n,s){if(!J)try{J=!0;const a={messages:e.map(r=>({id:r.id,role:r.role,content:r.content,timestamp:r.timestamp.toISOString(),sources:r.sources})),sessionId:n,lastUpdated:new Date().toISOString()};localStorage.setItem(U(s),JSON.stringify(a))}catch(a){console.warn("Failed to save chat state:",a)}finally{J=!1}}function ee(e){try{const n=localStorage.getItem(U(e));if(!n)return null;const s=JSON.parse(n),a=new Date(s.lastUpdated);return(Date.now()-a.getTime())/(1e3*60*60)>24?(te(e),null):{messages:s.messages.map(o=>({id:o.id,role:o.role,content:o.content,timestamp:new Date(o.timestamp),sources:o.sources})),sessionId:s.sessionId}}catch(n){return console.warn("Failed to load chat state:",n),null}}function te(e){try{localStorage.removeItem(U(e))}catch(n){console.warn("Failed to clear chat state:",n)}}function ge(e,n){const s=U(e),a=r=>{if(r.key===s){if(!r.newValue){n(null);return}try{const o=JSON.parse(r.newValue);n({messages:o.messages.map(i=>({id:i.id,role:i.role,content:i.content,timestamp:new Date(i.timestamp),sources:i.sources})),sessionId:o.sessionId})}catch{}}};return window.addEventListener("storage",a),()=>window.removeEventListener("storage",a)}function q(e){return`${de}${e||"default"}`}function F(e,n){try{e?localStorage.setItem(q(n),"true"):localStorage.removeItem(q(n))}catch(s){console.warn("Failed to save popout state:",s)}}function he(e){try{return localStorage.getItem(q(e))==="true"}catch{return!1}}function Y(e){return`${ue}${e||"default"}`}function X(e,n){try{e?localStorage.setItem(Y(n),e):localStorage.removeItem(Y(n))}catch(s){console.warn("Failed to save read state:",s)}}function me(e){try{return localStorage.getItem(Y(e))}catch{return null}}function se(e){const{apiUrl:n,tenantId:s,sessionId:a,headers:r={},onError:o,persist:i=!0}=e,u=c.useRef(!1),[g,l]=c.useState(()=>{if(i){const d=ee(s);if(d)return d.messages}return[]}),[w,y]=c.useState(!1),[L,M]=c.useState(null),[h,b]=c.useState(()=>{if(i){const d=ee(s);if(d)return d.sessionId}return a||null}),B=c.useRef(null);c.useEffect(()=>{u.current||i&&g.length>0&&pe(g,h,s)},[g,h,s,i]),c.useEffect(()=>i?ge(s,S=>{u.current=!0,S?(l(S.messages),b(S.sessionId)):(l([]),b(null)),setTimeout(()=>{u.current=!1},0)}):void 0,[s,i]);const P=()=>`msg_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,Z=c.useCallback(async d=>{var D;if(!d.trim()||w)return;B.current&&B.current.abort(),B.current=new AbortController;const S={id:P(),role:"user",content:d.trim(),timestamp:new Date};l(p=>[...p,S]),y(!0),M(null);const T=P(),z={id:T,role:"assistant",content:"",timestamp:new Date,isStreaming:!0};l(p=>[...p,z]);try{const p=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json",...s&&{"X-Tenant-ID":s},...r},body:JSON.stringify({message:d.trim(),session_id:h}),signal:B.current.signal});if(!p.ok){const m=await p.json().catch(()=>({}));throw new Error(m.detail||`Request failed with status ${p.status}`)}const k=p.headers.get("content-type");if(k!=null&&k.includes("text/event-stream"))await R(p,T);else{const m=await p.json(),C=(D=m.message.citations)==null?void 0:D.map(x=>({title:x.title,url:x.url,relevance:x.relevance_score}));l(x=>x.map(j=>j.id===T?{...j,content:m.message.content,isStreaming:!1,sources:C}:j)),m.session_id&&b(m.session_id)}}catch(p){if(p.name==="AbortError")return;const k=p instanceof Error?p:new Error("An error occurred");M(k),o==null||o(k),l(m=>m.map(C=>C.id===T?{...C,content:"Sorry, an error occurred. Please try again.",isStreaming:!1}:C))}finally{y(!1),B.current=null}},[n,s,h,r,w,o]),R=async(d,S)=>{var p;const T=(p=d.body)==null?void 0:p.getReader();if(!T)throw new Error("No response body");const z=new TextDecoder;let D="";try{for(;;){const{done:k,value:m}=await T.read();if(k)break;const x=z.decode(m,{stream:!0}).split(`
+`);for(const j of x)if(j.startsWith("data: ")){const G=j.slice(6);if(G==="[DONE]")continue;try{const I=JSON.parse(G);I.type==="content"&&I.content?(D+=I.content,l(H=>H.map($=>$.id===S?{...$,content:D}:$))):I.type==="sources"&&I.sources?l(H=>H.map($=>$.id===S?{...$,sources:I.sources}:$)):I.conversation_id&&b(I.conversation_id)}catch{}}}}finally{l(k=>k.map(m=>m.id===S?{...m,isStreaming:!1}:m))}},E=c.useCallback(()=>{l([]),b(null),M(null),i&&te(s)},[i,s]);return{messages:g,isLoading:w,error:L,sendMessage:Z,clearMessages:E,sessionId:h}}let O=null;function fe(e,n,s){const[a,r]=c.useState(()=>he(e.tenantId)),o=c.useRef(O);c.useEffect(()=>{if(a&&!o.current){const l=window.open("","GeoAppsChatPopout");l&&l.location.href!=="about:blank"&&!l.closed?(o.current=l,O=l):(r(!1),F(!1,e.tenantId))}},[a,e.tenantId]),c.useEffect(()=>{if(!o.current)return;const l=setInterval(()=>{var w;(w=o.current)!=null&&w.closed&&(r(!1),o.current=null,O=null,F(!1,e.tenantId))},500);return()=>clearInterval(l)},[e.tenantId,s]);const i=c.useCallback(()=>{if(o.current&&!o.current.closed){o.current.focus();return}const l={small:{width:380,height:520},medium:{width:440,height:660},large:{width:560,height:780},fullscreen:{width:700,height:800}},{width:w,height:y}=l[n],L=(window.screen.width-w)/2,M=(window.screen.height-y)/2,h=window.open("","GeoAppsChatPopout",`width=${w},height=${y},left=${L},top=${M},resizable=yes,scrollbars=no`);if(!h){console.error("Failed to open popup window. Check if popups are blocked.");return}h.__CHAT_CONFIG__=e,h.document.write(we(e)),h.document.close(),o.current=h,O=h,r(!0),F(!0,e.tenantId)},[e,n]),u=c.useCallback(()=>{o.current&&!o.current.closed&&o.current.close(),o.current=null,O=null,r(!1),F(!1,e.tenantId)},[e.tenantId]),g=c.useCallback(()=>{o.current&&!o.current.closed&&o.current.focus()},[]);return{isPoppedOut:a,openPopout:i,closePopout:u,focusPopout:g}}function we(e){const n=e.messages.map(s=>({...s,timestamp:s.timestamp.toISOString()}));return`
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${V(e.title)}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body, #chat-root { height: 100%; width: 100%; }
+    body { 
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f5f5f5;
+    }
+    
+    /* Modern chat widget styling */
+    .popout-container {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background: white;
+      border-radius: 0;
+    }
+    .popout-header {
+      padding: 0.75rem 1rem;
+      color: white;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex-shrink: 0;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .popout-header-icon {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+      background: rgba(255,255,255,0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .popout-header-icon svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+    .popout-header-info {
+      flex: 1;
+      min-width: 0;
+    }
+    .popout-title {
+      font-weight: 600;
+      font-size: 0.875rem;
+    }
+    .popout-subtitle {
+      font-size: 0.75rem;
+      opacity: 0.9;
+    }
+    .popout-header-actions {
+      display: flex;
+      gap: 0.25rem;
+    }
+    .popout-header-btn {
+      width: 2rem;
+      height: 2rem;
+      border-radius: 50%;
+      border: none;
+      background: rgba(255,255,255,0.1);
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s;
+    }
+    .popout-header-btn:hover {
+      background: rgba(255,255,255,0.25);
+    }
+    .popout-header-btn svg {
+      width: 1rem;
+      height: 1rem;
+    }
+    .popout-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      background: #fafafa;
+    }
+    .popout-messages::-webkit-scrollbar {
+      width: 6px;
+    }
+    .popout-messages::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .popout-messages::-webkit-scrollbar-thumb {
+      background: #d1d5db;
+      border-radius: 3px;
+    }
+    .popout-messages::-webkit-scrollbar-thumb:hover {
+      background: #9ca3af;
+    }
+    /* Empty state */
+    .popout-empty {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      color: #9ca3af;
+      text-align: center;
+    }
+    .popout-empty svg {
+      width: 4rem;
+      height: 4rem;
+      margin-bottom: 1rem;
+      opacity: 0.5;
+    }
+    .popout-empty p {
+      font-size: 0.875rem;
+    }
+    .popout-message-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+    .popout-message-wrapper.user {
+      align-items: flex-end;
+    }
+    .popout-message-wrapper.assistant {
+      align-items: flex-start;
+    }
+    .popout-message {
+      max-width: 85%;
+      padding: 0.75rem 1rem;
+      border-radius: 1rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      word-wrap: break-word;
+    }
+    .popout-message.user {
+      color: white;
+      border-bottom-right-radius: 0.25rem;
+    }
+    .popout-message.assistant {
+      background: #f1f5f9;
+      color: #1f2937;
+      border-bottom-left-radius: 0.25rem;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    }
+    .popout-message p { margin-bottom: 0.5rem; }
+    .popout-message p:last-child { margin-bottom: 0; }
+    .popout-message strong { font-weight: 600; }
+    .popout-message em { font-style: italic; }
+    .popout-message code {
+      background: rgba(0,0,0,0.06);
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      font-size: 0.8125rem;
+      font-family: 'SF Mono', Monaco, Consolas, monospace;
+    }
+    .popout-message.user code {
+      background: rgba(255,255,255,0.2);
+    }
+    .popout-message pre {
+      background: #1f2937;
+      color: #f3f4f6;
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      font-size: 0.75rem;
+      overflow-x: auto;
+      margin: 0.5rem 0;
+    }
+    .popout-message pre code {
+      background: none;
+      padding: 0;
+      font-size: inherit;
+    }
+    .popout-message ul, .popout-message ol {
+      padding-left: 1.25rem;
+      margin: 0.5rem 0;
+    }
+    .popout-message li { margin: 0.25rem 0; }
+    .popout-message a {
+      color: #2563eb;
+      text-decoration: underline;
+    }
+    .popout-message.user a {
+      color: rgba(255,255,255,0.9);
+    }
+    .popout-input-container {
+      padding: 0.75rem 1rem 1rem;
+      border-top: 1px solid #e5e7eb;
+      flex-shrink: 0;
+      background: white;
+    }
+    .popout-input-wrapper {
+      display: flex;
+      gap: 0.5rem;
+      align-items: flex-end;
+    }
+    .popout-textarea {
+      flex: 1;
+      padding: 0.625rem 1rem;
+      border: 1px solid #e5e7eb;
+      border-radius: 1.25rem;
+      resize: none;
+      font-size: 0.875rem;
+      font-family: inherit;
+      min-height: 44px;
+      max-height: 120px;
+      outline: none;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    .popout-textarea:focus {
+      border-color: ${e.primaryColor};
+      box-shadow: 0 0 0 3px ${e.primaryColor}15;
+    }
+    .popout-textarea::placeholder {
+      color: #9ca3af;
+    }
+    .popout-send-btn {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.75rem;
+      border: none;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: opacity 0.2s, transform 0.1s;
+    }
+    .popout-send-btn:hover { opacity: 0.9; }
+    .popout-send-btn:active { transform: scale(0.95); }
+    .popout-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    .popout-send-btn svg { width: 1.25rem; height: 1.25rem; }
+    .popout-input-hint {
+      font-size: 0.625rem;
+      color: #9ca3af;
+      text-align: center;
+      margin-top: 0.5rem;
+    }
+    .popout-timestamp {
+      font-size: 0.625rem;
+      color: #9ca3af;
+      margin-top: 0.25rem;
+      padding: 0 0.25rem;
+    }
+    .popout-loading {
+      display: flex;
+      gap: 0.25rem;
+      padding: 0.25rem 0;
+    }
+    .popout-loading span {
+      width: 0.5rem;
+      height: 0.5rem;
+      background: #9ca3af;
+      border-radius: 50%;
+      animation: bounce 1.4s infinite ease-in-out both;
+    }
+    .popout-loading span:nth-child(1) { animation-delay: -0.32s; }
+    .popout-loading span:nth-child(2) { animation-delay: -0.16s; }
+    @keyframes bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+    /* Typing indicator */
+    .typing-indicator {
+      display: flex;
+      align-items: flex-start;
+    }
+    .typing-bubble {
+      background: white;
+      padding: 0.75rem 1rem;
+      border-radius: 1rem;
+      border-bottom-left-radius: 0.25rem;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+      display: flex;
+      gap: 0.25rem;
+    }
+    .typing-bubble span {
+      width: 0.5rem;
+      height: 0.5rem;
+      background: #9ca3af;
+      border-radius: 50%;
+      animation: bounce 1.4s infinite ease-in-out both;
+    }
+    .typing-bubble span:nth-child(1) { animation-delay: -0.32s; }
+    .typing-bubble span:nth-child(2) { animation-delay: -0.16s; }
+  </style>
+</head>
+<body>
+  <div id="chat-root">
+    <div class="popout-container">
+      <div class="popout-header" style="background: ${e.primaryColor}">
+        <div class="popout-header-icon">
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+          </svg>
+        </div>
+        <div class="popout-header-info">
+          <div class="popout-title">${V(e.title)}</div>
+          <div class="popout-subtitle">${V(e.subtitle)}</div>
+        </div>
+        <div class="popout-header-actions">
+          <button class="popout-header-btn" id="clear-btn" title="Clear conversation">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="popout-messages" id="messages-container"></div>
+      <div class="popout-input-container">
+        <div class="popout-input-wrapper">
+          <textarea 
+            class="popout-textarea" 
+            id="message-input"
+            placeholder="${V(e.placeholder)}"
+            rows="1"
+          ></textarea>
+          <button 
+            class="popout-send-btn" 
+            id="send-btn"
+            style="background: ${e.primaryColor}"
+          >
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+            </svg>
+          </button>
+        </div>
+        <p class="popout-input-hint">Press Enter to send, Shift+Enter for new line</p>
+      </div>
+    </div>
+  </div>
+  <script>
+    (function() {
+      const config = ${JSON.stringify({apiUrl:e.apiUrl,tenantId:e.tenantId,sessionId:e.sessionId,primaryColor:e.primaryColor,headers:e.headers||{}})};
+      
+      const STORAGE_KEY = 'gcw_chat_' + (config.tenantId || 'default');
+      
+      let messages = ${JSON.stringify(n)}.map(m => ({
+        ...m,
+        timestamp: new Date(m.timestamp)
+      }));
+      let sessionId = config.sessionId;
+      let isLoading = false;
+
+      const messagesContainer = document.getElementById('messages-container');
+      const messageInput = document.getElementById('message-input');
+      const sendBtn = document.getElementById('send-btn');
+
+      // Save state to localStorage for sync with main window
+      function saveState() {
+        try {
+          const state = {
+            messages: messages.map(m => ({
+              id: m.id,
+              role: m.role,
+              content: m.content,
+              timestamp: m.timestamp.toISOString(),
+              sources: m.sources
+            })),
+            sessionId: sessionId,
+            lastUpdated: new Date().toISOString()
+          };
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+        } catch (e) {
+          console.warn('Failed to save state:', e);
+        }
+      }
+
+      function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+      }
+
+      function parseMarkdown(text) {
+        if (!text) return '';
+        
+        // Code blocks
+        text = text.replace(/\`\`\`([\\s\\S]*?)\`\`\`/g, '<pre><code>$1</code></pre>');
+        
+        // Inline code
+        text = text.replace(/\`([^\`]+)\`/g, '<code>$1</code>');
+        
+        // Bold
+        text = text.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');
+        
+        // Italic
+        text = text.replace(/\\*([^*]+?)\\*/g, '<em>$1</em>');
+        
+        // Links
+        text = text.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+        
+        // Lists
+        const lines = text.split('\\n');
+        let result = [];
+        let inList = false;
+        let listType = null;
+        
+        for (const line of lines) {
+          const ulMatch = line.match(/^[\\s]*[-*•]\\s+(.+)/);
+          const olMatch = line.match(/^[\\s]*(\\d+)[.)]\\s+(.+)/);
+          
+          if (ulMatch) {
+            if (!inList || listType !== 'ul') {
+              if (inList) result.push('</' + listType + '>');
+              result.push('<ul>');
+              inList = true;
+              listType = 'ul';
+            }
+            result.push('<li>' + ulMatch[1] + '</li>');
+          } else if (olMatch) {
+            if (!inList || listType !== 'ol') {
+              if (inList) result.push('</' + listType + '>');
+              result.push('<ol>');
+              inList = true;
+              listType = 'ol';
+            }
+            result.push('<li>' + olMatch[2] + '</li>');
+          } else {
+            if (inList) {
+              result.push('</' + listType + '>');
+              inList = false;
+              listType = null;
+            }
+            if (line.trim()) {
+              result.push('<p>' + line + '</p>');
+            }
+          }
+        }
+        if (inList) result.push('</' + listType + '>');
+        
+        return result.join('');
+      }
+
+      function formatTime(date) {
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      }
+
+      function renderMessages() {
+        // Show empty state if no messages
+        if (messages.length === 0) {
+          messagesContainer.innerHTML = \`
+            <div class="popout-empty">
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+              </svg>
+              <p>Start a conversation by typing a message below</p>
+            </div>
+          \`;
+          return;
+        }
+
+        messagesContainer.innerHTML = messages.map(msg => {
+          const isUser = msg.role === 'user';
+          const content = msg.isStreaming && !msg.content 
+            ? '<div class="popout-loading"><span></span><span></span><span></span></div>'
+            : parseMarkdown(escapeHtml(msg.content));
+          
+          return \`
+            <div class="popout-message-wrapper \${msg.role}">
+              <div class="popout-message \${msg.role}" \${isUser ? 'style="background: ' + config.primaryColor + '"' : ''}>
+                \${content}
+              </div>
+              <div class="popout-timestamp">\${formatTime(msg.timestamp)}</div>
+            </div>
+          \`;
+        }).join('');
+        
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      }
+
+      async function sendMessage(content) {
+        if (!content.trim() || isLoading) return;
+
+        const userMsg = {
+          id: 'msg_' + Date.now(),
+          role: 'user',
+          content: content.trim(),
+          timestamp: new Date()
+        };
+        messages.push(userMsg);
+
+        const assistantMsgId = 'msg_' + Date.now() + '_assistant';
+        const assistantMsg = {
+          id: assistantMsgId,
+          role: 'assistant',
+          content: '',
+          timestamp: new Date(),
+          isStreaming: true
+        };
+        messages.push(assistantMsg);
+        
+        isLoading = true;
+        renderMessages();
+        messageInput.value = '';
+        sendBtn.disabled = true;
+
+        try {
+          const response = await fetch(config.apiUrl, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              ...(config.tenantId && { 'X-Tenant-ID': config.tenantId }),
+              ...config.headers
+            },
+            body: JSON.stringify({
+              message: content.trim(),
+              session_id: sessionId
+            })
+          });
+
+          if (!response.ok) throw new Error('Request failed');
+
+          const data = await response.json();
+          
+          const msgIndex = messages.findIndex(m => m.id === assistantMsgId);
+          if (msgIndex !== -1) {
+            messages[msgIndex] = {
+              ...messages[msgIndex],
+              content: data.message.content,
+              isStreaming: false
+            };
+          }
+          
+          if (data.session_id) {
+            sessionId = data.session_id;
+          }
+          
+          // Save to localStorage after successful response
+          saveState();
+        } catch (err) {
+          const msgIndex = messages.findIndex(m => m.id === assistantMsgId);
+          if (msgIndex !== -1) {
+            messages[msgIndex] = {
+              ...messages[msgIndex],
+              content: 'Sorry, an error occurred. Please try again.',
+              isStreaming: false
+            };
+          }
+        } finally {
+          isLoading = false;
+          sendBtn.disabled = false;
+          renderMessages();
+          saveState(); // Always save state after message exchange
+        }
+      }
+
+      // Auto-resize textarea
+      messageInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+      });
+
+      // Send on Enter (Shift+Enter for newline)
+      messageInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendMessage(this.value);
+        }
+      });
+
+      sendBtn.addEventListener('click', function() {
+        sendMessage(messageInput.value);
+      });
+
+      // Clear conversation button
+      const clearBtn = document.getElementById('clear-btn');
+      if (clearBtn) {
+        clearBtn.addEventListener('click', function() {
+          if (confirm('Are you sure you want to clear the conversation?')) {
+            messages = [];
+            sessionId = null;
+            saveState();
+            renderMessages();
+          }
+        });
+      }
+
+      // Initial render
+      renderMessages();
+      messageInput.focus();
+    })();
+  <\/script>
+</body>
+</html>
+  `}function V(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function be({content:e,className:n}){if(!e)return null;const s=ve(e);return t.jsx("div",{className:n,children:s.map((a,r)=>t.jsx(c.Fragment,{children:a},r))})}function ve(e){const n=e.split(`
+`),s=[];let a=null;const r=()=>{a&&(a.type==="ul"?s.push(t.jsx("ul",{className:"gcw-md-list gcw-md-list--ul",children:a.items.map((o,i)=>t.jsx("li",{className:"gcw-md-list__item",children:o},i))},`list-${s.length}`)):s.push(t.jsx("ol",{className:"gcw-md-list gcw-md-list--ol",children:a.items.map((o,i)=>t.jsx("li",{className:"gcw-md-list__item",children:o},i))},`list-${s.length}`)),a=null)};for(let o=0;o<n.length;o++){const i=n[o];if(i.startsWith("#### ")){r(),s.push(t.jsx("h5",{className:"gcw-md-heading gcw-md-heading--h5",children:W(i.slice(5))},o));continue}if(i.startsWith("### ")){r(),s.push(t.jsx("h4",{className:"gcw-md-heading gcw-md-heading--h4",children:W(i.slice(4))},o));continue}if(i.startsWith("## ")){r(),s.push(t.jsx("h3",{className:"gcw-md-heading gcw-md-heading--h3",children:W(i.slice(3))},o));continue}if(i.startsWith("# ")){r(),s.push(t.jsx("h2",{className:"gcw-md-heading gcw-md-heading--h2",children:W(i.slice(2))},o));continue}const u=i.match(/^[\s]*[-*•]\s+(.+)/);if(u){(!a||a.type!=="ul")&&(r(),a={type:"ul",items:[]}),a.items.push(W(u[1]));continue}const g=i.match(/^[\s]*(\d+)[.)]\s+(.+)/);if(g){(!a||a.type!=="ol")&&(r(),a={type:"ol",items:[]}),a.items.push(W(g[2]));continue}if(i.startsWith("```")){r();const l=[];for(o++;o<n.length&&!n[o].startsWith("```");)l.push(n[o]),o++;s.push(t.jsx("pre",{className:"gcw-md-code-block",children:t.jsx("code",{children:l.join(`
+`)})},`code-${s.length}`));continue}if(i.trim()===""){r();continue}r(),s.push(t.jsx("p",{className:"gcw-md-paragraph",children:W(i)},o))}return r(),s}function W(e){if(!e)return null;const n=[];let s=e,a=0;for(;s.length>0;){const r=s.match(/^\*\*(.+?)\*\*/);if(r){n.push(t.jsx("strong",{className:"gcw-md-bold",children:r[1]},a++)),s=s.slice(r[0].length);continue}const o=s.match(/^\*([^*]+?)\*/);if(o){n.push(t.jsx("em",{className:"gcw-md-italic",children:o[1]},a++)),s=s.slice(o[0].length);continue}const i=s.match(/^`([^`]+)`/);if(i){n.push(t.jsx("code",{className:"gcw-md-code",children:i[1]},a++)),s=s.slice(i[0].length);continue}const u=s.match(/^\[([^\]]+)\]\(([^)]+)\)/);if(u){n.push(t.jsx("a",{href:u[2],target:"_blank",rel:"noopener noreferrer",className:"gcw-md-link",children:u[1]},a++)),s=s.slice(u[0].length);continue}const g=s.search(/[\*`\[]/);if(g===-1){n.push(s);break}else g===0?(n.push(s[0]),s=s.slice(1)):(n.push(s.slice(0,g)),s=s.slice(g))}return n.length===1?n[0]:n}function ye(){return t.jsxs("div",{className:"gcw-typing__dots",children:[t.jsx("span",{className:"gcw-typing__dot"}),t.jsx("span",{className:"gcw-typing__dot"}),t.jsx("span",{className:"gcw-typing__dot"})]})}function ke({className:e}){return t.jsx("svg",{className:e,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"})})}function xe(e){return e.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}function Me(e,n){return e.length<=n?e:e.slice(0,n-3)+"..."}function ne({message:e,primaryColor:n}){const s=e.role==="user",a=s?"user":"assistant";return t.jsx("div",{className:`gcw-bubble-row gcw-bubble-row--${a}`,children:t.jsxs("div",{className:`gcw-bubble-wrapper gcw-bubble-wrapper--${a}`,children:[t.jsx("div",{className:`gcw-bubble gcw-bubble--${a}`,style:s?{backgroundColor:n}:void 0,children:e.isStreaming&&!e.content?t.jsx(ye,{}):t.jsx(be,{content:e.content,className:"gcw-content"})}),e.sources&&e.sources.length>0&&t.jsx("div",{className:"gcw-sources",children:e.sources.slice(0,3).map((r,o)=>t.jsxs("a",{href:r.url,target:"_blank",rel:"noopener noreferrer",className:"gcw-source",children:[t.jsx(ke,{className:"gcw-source__icon"}),Me(r.title,25)]},o))}),t.jsx("span",{className:"gcw-bubble__timestamp",children:xe(e.timestamp)})]})})}function _e(){return t.jsx("div",{className:"gcw-typing",children:t.jsx("div",{className:"gcw-typing__bubble",children:t.jsxs("div",{className:"gcw-typing__dots",children:[t.jsx("span",{className:"gcw-typing__dot"}),t.jsx("span",{className:"gcw-typing__dot"}),t.jsx("span",{className:"gcw-typing__dot"})]})})})}function oe({messages:e,isLoading:n,primaryColor:s}){var r;const a=c.useRef(null);return c.useEffect(()=>{var o;(o=a.current)==null||o.scrollIntoView({behavior:"smooth"})},[e,n]),e.length===0&&!n?t.jsxs("div",{className:"gcw-empty",children:[t.jsx("svg",{className:"gcw-empty__icon",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"})}),t.jsx("p",{className:"gcw-empty__text",children:"Start a conversation by typing a message below"})]}):t.jsxs("div",{className:"gcw-messages",children:[e.map(o=>t.jsx(ne,{message:o,primaryColor:s},o.id)),n&&((r=e[e.length-1])==null?void 0:r.role)!=="assistant"&&t.jsx(_e,{}),t.jsx("div",{ref:a})]})}function re({placeholder:e,isLoading:n,onSendMessage:s,primaryColor:a}){const[r,o]=c.useState(""),i=c.useRef(null);c.useEffect(()=>{const l=i.current;l&&(l.style.height="auto",l.style.height=`${Math.min(l.scrollHeight,120)}px`)},[r]);const u=()=>{r.trim()&&!n&&(s(r),o(""),i.current&&(i.current.style.height="auto"))},g=l=>{l.key==="Enter"&&!l.shiftKey&&(l.preventDefault(),u())};return t.jsxs("div",{className:"gcw-input-area",children:[t.jsxs("div",{className:"gcw-input-row",children:[t.jsx("textarea",{ref:i,value:r,onChange:l=>o(l.target.value),onKeyDown:g,placeholder:e,disabled:n,rows:1,className:"gcw-input"}),t.jsx("button",{onClick:u,disabled:!r.trim()||n,className:"gcw-send-btn",style:{backgroundColor:a},title:"Send message",children:n?t.jsxs("svg",{className:"gcw-send-btn__icon gcw-spin",fill:"none",viewBox:"0 0 24 24",children:[t.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),t.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}):t.jsx("svg",{className:"gcw-send-btn__icon",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 19l9 2-9-18-9 18 9-2zm0 0v-8"})})})]}),t.jsx("p",{className:"gcw-input-hint",children:"Press Enter to send, Shift+Enter for new line"})]})}function Se({size:e,className:n="gcw-w-4 gcw-h-4"}){switch(e){case"small":return t.jsx("svg",{className:n,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"})});case"medium":return t.jsx("svg",{className:n,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"})});case"large":return t.jsx("svg",{className:n,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"})});case"fullscreen":return t.jsx("svg",{className:n,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"})})}}function Ce({className:e="gcw-w-4 gcw-h-4"}){return t.jsx("svg",{className:e,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"})})}function Ie({className:e="gcw-w-4 gcw-h-4"}){return t.jsx("svg",{className:e,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})}function Ne({className:e="gcw-w-4 gcw-h-4"}){return t.jsx("svg",{className:e,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"})})}function Le({className:e="gcw-w-6 gcw-h-6"}){return t.jsx("svg",{className:e,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"})})}const Ee={small:"gcw-window--small",medium:"gcw-window--medium",large:"gcw-window--large",fullscreen:"gcw-window--fullscreen"};function ae({title:e,subtitle:n,placeholder:s,messages:a,isLoading:r,onSendMessage:o,onClose:i,onClear:u,onSizeChange:g,onPopout:l,primaryColor:w,size:y}){const L=()=>{const M=["small","medium","large","fullscreen"],b=(M.indexOf(y)+1)%M.length;g(M[b])};return t.jsxs("div",{className:`gcw-window ${Ee[y]}`,children:[t.jsxs("div",{className:"gcw-header",style:{backgroundColor:w},children:[t.jsxs("div",{className:"gcw-header__left",children:[t.jsx("div",{className:"gcw-header__avatar",children:t.jsx(Le,{className:"gcw-header__avatar-icon"})}),t.jsxs("div",{className:"gcw-header__info",children:[t.jsx("h3",{className:"gcw-header__title",children:e}),t.jsx("p",{className:"gcw-header__subtitle",children:n})]})]}),t.jsxs("div",{className:"gcw-header__actions",children:[t.jsx("button",{onClick:L,className:"gcw-header__btn",title:`Size: ${y} (click to cycle)`,children:t.jsx(Se,{size:y,className:"gcw-header__btn-icon"})}),t.jsx("button",{onClick:l,className:"gcw-header__btn",title:"Open in new window",children:t.jsx(Ce,{className:"gcw-header__btn-icon"})}),t.jsx("button",{onClick:u,className:"gcw-header__btn",title:"Clear conversation",children:t.jsx(Ne,{className:"gcw-header__btn-icon"})}),t.jsx("button",{onClick:i,className:"gcw-header__btn",title:"Close",children:t.jsx(Ie,{className:"gcw-header__btn-icon"})})]})]}),t.jsx(oe,{messages:a,isLoading:r,primaryColor:w}),t.jsx(re,{placeholder:s,isLoading:r,onSendMessage:o,primaryColor:w})]})}function ie({isOpen:e,onClick:n,primaryColor:s,hasUnread:a,isPoppedOut:r}){return t.jsxs("button",{onClick:n,className:"gcw-toggle",style:{backgroundColor:s},title:r?"Chat is open in another window":e?"Close chat":"Open chat",children:[a&&!e&&t.jsx("span",{className:"gcw-toggle__badge gcw-toggle__badge--unread",children:"!"}),r&&t.jsx("span",{className:"gcw-toggle__badge gcw-toggle__badge--popout"}),t.jsx("div",{className:"gcw-toggle__icon",children:r?t.jsx("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"})}):e?t.jsx("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})}):t.jsx("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"})})})]})}function Q({apiUrl:e,tenantId:n,title:s="Chat Assistant",subtitle:a="How can I help you?",placeholder:r="Type a message...",greeting:o,primaryColor:i="#3b82f6",position:u="bottom-right",defaultOpen:g=!1,defaultSize:l="medium",headers:w,onOpen:y,onClose:L,onMessageSent:M,onResponseReceived:h}){const[b,B]=c.useState(g),[P,Z]=c.useState(l),[R,E]=c.useState(!1),{messages:d,isLoading:S,sendMessage:T,clearMessages:z,sessionId:D}=se({apiUrl:e,tenantId:n,headers:w}),[p,k]=c.useState(()=>d.length>0),[m,C]=c.useState([]);c.useEffect(()=>{b&&o&&!p&&d.length===0&&k(!0)},[b,o,p,d.length]),c.useEffect(()=>{d.length>0&&k(!0)},[d.length]),c.useEffect(()=>{p&&o&&d.length===0?C([{id:"greeting",role:"assistant",content:o,timestamp:new Date}]):o&&d.length>0?C([{id:"greeting",role:"assistant",content:o,timestamp:new Date},...d]):C(d)},[d,p,o]);const{isPoppedOut:x,openPopout:j,focusPopout:G}=fe({apiUrl:e,tenantId:n,title:s,subtitle:a,placeholder:r,primaryColor:i,sessionId:D,messages:m,headers:w},P,()=>{});c.useEffect(()=>{if(b||x){const v=[...d].reverse().find(_=>!_.isStreaming&&_.content);v&&X(v.id,n),E(!1)}else{const v=d.filter(N=>!N.isStreaming&&N.content),_=me(n);if(v.length===0){E(!1);return}if(!_){E(v.some(N=>N.role==="assistant"));return}const A=v.findIndex(N=>N.id===_);if(A===-1){E(v.some(N=>N.role==="assistant"));return}const je=v.slice(A+1).some(N=>N.role==="assistant");E(je)}},[b,x,d,n]);const I=()=>{if(x){G();return}const v=!b;if(B(v),v){y==null||y();const _=[...d].reverse().find(A=>!A.isStreaming&&A.content);_&&X(_.id,n),E(!1)}else L==null||L()},H=async v=>{M==null||M(v),await T(v);const _=d[d.length-1];(_==null?void 0:_.role)==="assistant"&&(h==null||h(_.content))},$=()=>{z(),k(!1),C([]),E(!1),X(null,n)},Te=v=>{Z(v)},$e=()=>{B(!1),j()},Be=u==="top-left"?"gcw-container--top-left":u==="top-right"?"gcw-container--top-right":u==="bottom-left"?"gcw-container--bottom-left":"gcw-container--bottom-right";return t.jsxs("div",{className:`gcw-widget gcw-container ${Be}`,children:[b&&!x&&t.jsx(ae,{title:s,subtitle:a,placeholder:r,messages:m,isLoading:S,onSendMessage:H,onClose:I,onClear:$,onSizeChange:Te,onPopout:$e,primaryColor:i,size:P}),t.jsx(ie,{isOpen:b,onClick:I,primaryColor:i,hasUnread:R&&!b&&!x,isPoppedOut:x})]})}function K(e,n){let s;if(n){const r=document.getElementById(n);if(!r)throw new Error(`Container with id "${n}" not found`);s=r}else s=document.createElement("div"),s.id="geoapps-chat-widget-root",document.body.appendChild(s);const a=le.createRoot(s);return a.render(c.createElement(c.StrictMode,null,c.createElement(Q,e))),()=>{a.unmount(),!n&&s.parentNode&&s.parentNode.removeChild(s)}}if(typeof window<"u"){window.GeoAppsChatWidget={embed:K,ChatWidget:Q};const e=document.currentScript;if(e){const n=e.dataset.apiUrl;n&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{K({apiUrl:n,title:e.dataset.title,subtitle:e.dataset.subtitle,greeting:e.dataset.greeting,placeholder:e.dataset.placeholder,primaryColor:e.dataset.primaryColor,position:e.dataset.position,defaultOpen:e.dataset.defaultOpen==="true"})}):K({apiUrl:n,title:e.dataset.title,subtitle:e.dataset.subtitle,greeting:e.dataset.greeting,placeholder:e.dataset.placeholder,primaryColor:e.dataset.primaryColor,position:e.dataset.position,defaultOpen:e.dataset.defaultOpen==="true"}))}}f.ChatBubble=ne,f.ChatWidget=Q,f.ChatWindow=ae,f.MessageInput=re,f.MessageList=oe,f.ToggleButton=ie,f.embedChatWidget=K,f.useChat=se,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/dist/hooks/__tests__/useChat.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useChat.d.ts

@@ -0,0 +1,17 @@
+import { Message, ChatConfig } from '../types';
+
+interface UseChatOptions extends ChatConfig {
+    onError?: (error: Error) => void;
+    /** Enable localStorage persistence (default: true) */
+    persist?: boolean;
+}
+interface UseChatReturn {
+    messages: Message[];
+    isLoading: boolean;
+    error: Error | null;
+    sendMessage: (content: string) => Promise<void>;
+    clearMessages: () => void;
+    sessionId: string | null;
+}
+export declare function useChat(options: UseChatOptions): UseChatReturn;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { ChatWidget } from './components/ChatWidget';
+export { ChatWindow } from './components/ChatWindow';
+export { MessageList } from './components/MessageList';
+export { MessageInput } from './components/MessageInput';
+export { ChatBubble } from './components/ChatBubble';
+export { ToggleButton } from './components/ToggleButton';
+export { useChat } from './hooks/useChat';
+export type { Message, ChatConfig, ChatWidgetProps } from './types';
+export { embedChatWidget } from './embed';

package/dist/main.d.ts

@@ -0,0 +1 @@
+