@sales-bot-llm/sdk 0.2.0

package/example/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@sales-bot/sdk-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite --port 5173",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "predev": "cp ../dist/vanilla.global.js public/vanilla.global.js",
+    "prebuild": "cp ../dist/vanilla.global.js public/vanilla.global.js"
+  },
+  "dependencies": {
+    "@sales-bot/sdk": "workspace:*",
+    "@types/dompurify": "^3.2.0",
+    "dompurify": "^3.4.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "typescript": "^5.9.3",
+    "vite": "^6"
+  }
+}

package/example/public/vanilla.global.js

@@ -0,0 +1,345 @@
+var SalesBot=(function(exports){'use strict';var P=class{constructor(){this.store=new Map;}getItem(e){var t;return (t=this.store.get(e))!=null?t:null}setItem(e,t){this.store.set(e,t);}removeItem(e){this.store.delete(e);}},K=class{constructor(){if(typeof window=="undefined"||!window.localStorage)throw new Error("localStorage is not available in this environment");this.ls=window.localStorage;}getItem(e){return this.ls.getItem(e)}setItem(e,t){this.ls.setItem(e,t);}removeItem(e){this.ls.removeItem(e);}};function ne(){try{let n=new K,e="__sb_probe__";return n.setItem(e,"1"),n.removeItem(e),n}catch(n){return typeof console!="undefined"&&console.warn("[SalesBot] localStorage unavailable \u2014 falling back to in-memory storage. Visitor token will not persist across page reloads."),new P}}var ye="salesbot:visitor:";function re(n,e){let t=`${ye}${n}`,r=e.getItem(t);if(r!==null)return r;let s=crypto.randomUUID();return e.setItem(t,s),s}var se="salesbot:conversation:";function oe(n,e){return e.getItem(`${se}${n}`)}function W(n,e,t){let r=`${se}${n}`;e===null?t.removeItem(r):t.setItem(r,e);}var d=class extends Error{constructor(e){var t;super(e.message),this.name="SalesBotError",this.code=e.code,this.retryable=(t=e.retryable)!=null?t:false,this.details=e.details!==void 0?e.details:void 0;}},xe=["project_brief__set_field","project_brief__get_current","quotes__generate","quotes__send_as_pdf","quotes__send_as_proposal"];function ie(n){return xe.includes(n)}async function*le(n){var s;let e=new TextDecoder,t=n.getReader(),r="";try{for(;;){let{done:u,value:c}=await t.read();if(u)break;r+=e.decode(c,{stream:!0});let g=r.split(`
+
+`);r=(s=g.pop())!=null?s:"";for(let T of g){let I=T.trim();if(!I)continue;let E=ae(I);E!==null&&(yield E);}}let o=e.decode(void 0,{stream:!1});o&&(r+=o);let b=r.split(`
+
+`);for(let u of b){let c=u.trim();if(!c)continue;let g=ae(c);g!==null&&(yield g);}}finally{t.releaseLock();}}function ae(n){let e=null,t=null;for(let s of n.split(`
+`))s.startsWith("event:")?e=s.slice(6).trim():s.startsWith("data:")&&(t=s.slice(5).trim());if(e===null||t===null)return null;let r;try{r=JSON.parse(t);}catch(s){throw new d({code:"parse_error",message:`Failed to parse SSE data as JSON for event "${e}": ${t}`,retryable:false})}return {event:e,data:r}}async function de(n,e){let t={Authorization:`Bearer ${e.embedKey}`,"Content-Type":"application/json",Accept:"text/event-stream","Idempotency-Key":crypto.randomUUID(),...e.customHeaders},r;try{r=await fetch(`${e.baseUrl}/api/chat/turns`,{method:"POST",headers:t,body:JSON.stringify(n)});}catch(s){throw new d({code:"network_error",message:s instanceof Error?s.message:"Network request failed",retryable:true})}if(r.ok||await H(r),!r.body)throw new d({code:"internal",message:"Response body is null",retryable:false});return r.body}async function ce(n){let e={Authorization:`Bearer ${n.embedKey}`,Accept:"application/json",...n.customHeaders},t;try{t=await fetch(`${n.baseUrl}/api/chat/bots/me`,{method:"GET",headers:e});}catch(r){throw new d({code:"network_error",message:r instanceof Error?r.message:"Network request failed",retryable:true})}return t.ok||await H(t),await t.json()}async function pe(n,e,t){var u;let r={Authorization:`Bearer ${t.embedKey}`,Accept:"application/json",...t.customHeaders},s=`${t.baseUrl}/api/chat/conversations/${encodeURIComponent(n)}/messages?visitorToken=${encodeURIComponent(e)}`,o;try{o=await fetch(s,{method:"GET",headers:r});}catch(c){throw new d({code:"network_error",message:c instanceof Error?c.message:"Network request failed",retryable:true})}return o.ok||await H(o),(u=(await o.json()).messages)!=null?u:[]}async function ge(n,e,t){let r={Authorization:`Bearer ${t.embedKey}`,"Content-Type":"application/json",Accept:"application/json",...t.customHeaders},s;try{s=await fetch(`${t.baseUrl}/api/chat/conversations/${encodeURIComponent(n)}/end`,{method:"POST",headers:r,body:JSON.stringify({visitorToken:e})});}catch(o){throw new d({code:"network_error",message:o instanceof Error?o.message:"Network request failed",retryable:true})}s.ok||await H(s);}async function me(n,e){let t={Authorization:`Bearer ${e.embedKey}`,Accept:"text/event-stream",...e.customHeaders},r;try{r=await fetch(`${e.baseUrl}/api/chat/turns/${n}/stream`,{method:"GET",headers:t});}catch(s){throw new d({code:"network_error",message:s instanceof Error?s.message:"Network request failed",retryable:true})}if(r.ok||await H(r),!r.body)throw new d({code:"internal",message:"Response body is null",retryable:false});return r.body}async function H(n){var r,s,o;let e={};try{((r=n.headers.get("content-type"))!=null?r:"").includes("application/json")&&(e=await n.json());}catch(b){}let t=Ee(e.code)?e.code:ke(n.status);throw new d({code:t,message:(s=e.message)!=null?s:n.statusText,retryable:(o=e.retryable)!=null?o:Ce(n.status),details:e.details})}var we=new Set(["invalid_embed_key","origin_not_allowed","rate_limited","out_of_credits","unauthorized","forbidden","not_found","bad_request","unprocessable_entity","conflict","internal","llm_unavailable","mcp_unavailable","network_error","parse_error"]);function Ee(n){return typeof n=="string"&&we.has(n)}function ke(n){switch(n){case 400:return "bad_request";case 401:return "unauthorized";case 402:return "out_of_credits";case 403:return "forbidden";case 404:return "not_found";case 409:return "conflict";case 422:return "unprocessable_entity";case 429:return "rate_limited";default:return "internal"}}function Ce(n){return n===429||n>=500}var _=class{constructor(e){this.pendingIdentify=null;this.handlers=new Map;this.botConfigPromise=null;var t,r;this.embedKey=e.embedKey,this.baseUrl=(t=e.baseUrl)!=null?t:"http://localhost:3000",this.customHeaders=e.customHeaders,this.storage=(r=e.storage)!=null?r:ne(),this.visitorToken=re(e.embedKey,this.storage),this.conversationId=oe(e.embedKey,this.storage);}identify(e){this.pendingIdentify={...this.pendingIdentify,...e};}async*ask(e,t){var b,u,c;let r={visitorToken:this.visitorToken,message:e,identify:(b=this.pendingIdentify)!=null?b:void 0,conversationId:(c=(u=t==null?void 0:t.conversationId)!=null?u:this.conversationId)!=null?c:void 0,metadata:t==null?void 0:t.metadata},s={embedKey:this.embedKey,baseUrl:this.baseUrl,customHeaders:this.customHeaders},o=await de(r,s);yield*this.consumeStream(o);}async*resume(e){let t={embedKey:this.embedKey,baseUrl:this.baseUrl,customHeaders:this.customHeaders},r=await me(e,t);yield*this.consumeStream(r);}async*consumeStream(e){for await(let t of le(e)){if(t.event==="turn_started"){let r=t.data.conversationId;this.conversationId=r,W(this.embedKey,r,this.storage);}this.emit(t.event,t.data),yield t;}}getVisitorToken(){return this.visitorToken}getConversationId(){return this.conversationId}setConversationId(e){this.conversationId=e,W(this.embedKey,e,this.storage);}getBotConfig(){return this.botConfigPromise||(this.botConfigPromise=ce({embedKey:this.embedKey,baseUrl:this.baseUrl,customHeaders:this.customHeaders})),this.botConfigPromise}async loadHistory(e){let t=e!=null?e:this.conversationId;return t?pe(t,this.visitorToken,{embedKey:this.embedKey,baseUrl:this.baseUrl,customHeaders:this.customHeaders}):[]}async endConversation(){let e=this.conversationId;if(e)try{await ge(e,this.visitorToken,{embedKey:this.embedKey,baseUrl:this.baseUrl,customHeaders:this.customHeaders});}catch(t){throw this.setConversationId(null),t}this.setConversationId(null);}on(e,t){return this.handlers.has(e)||this.handlers.set(e,new Set),this.handlers.get(e).add(t),()=>{var r;(r=this.handlers.get(e))==null||r.delete(t);}}emit(e,t){let r=this.handlers.get(e);if(r)for(let s of r)s(t);}};var be=`
+:host {
+  /* \u2500\u2500\u2500 Colors \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  --sb-primary: #2563eb;
+  --sb-primary-hover: #1d4ed8;
+  --sb-primary-text: #ffffff;
+  --sb-text: #111827;
+  --sb-text-light: #6b7280;
+  --sb-bg: #ffffff;
+  --sb-bg-user: var(--sb-primary);
+  --sb-bg-assistant: #f3f4f6;
+  --sb-bg-error: #fef2f2;
+  --sb-text-error: #dc2626;
+  --sb-border: #e5e7eb;
+  --sb-focus-ring: rgba(37,99,235,0.4);
+
+  /* \u2500\u2500\u2500 Layout & sizing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  --sb-radius: 12px;
+  --sb-message-radius: 16px;
+  --sb-input-radius: 20px;
+  --sb-z: 9999;
+  --sb-launcher-size: 56px;
+  --sb-send-size: 38px;
+  --sb-panel-width: 380px;
+  --sb-panel-height: 560px;
+  --sb-panel-max-height: 80vh;
+  --sb-bottom-offset: 24px;
+  --sb-side-offset: 24px;
+  --sb-panel-gap: 12px;
+
+  /* \u2500\u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  --sb-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --sb-font-size: 14px;
+  --sb-font-size-header: 15px;
+  --sb-font-size-small: 13px;
+
+  /* \u2500\u2500\u2500 Effects \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  --sb-shadow: 0 4px 24px rgba(0,0,0,0.15);
+  --sb-transition: 0.15s ease;
+
+  all: initial;
+  display: block;
+  position: fixed;
+  bottom: var(--sb-bottom-offset);
+  right: var(--sb-side-offset);
+  z-index: var(--sb-z);
+  font-family: var(--sb-font-family);
+}
+
+:host(.sb-position--bottom-left) {
+  right: auto;
+  left: var(--sb-side-offset);
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Launcher button */
+.sb-launcher {
+  width: var(--sb-launcher-size);
+  height: var(--sb-launcher-size);
+  border-radius: 50%;
+  background: var(--sb-primary);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--sb-shadow);
+  transition: background var(--sb-transition), transform var(--sb-transition);
+  color: var(--sb-primary-text);
+  font-size: 24px;
+  outline: none;
+}
+
+.sb-launcher:hover {
+  background: var(--sb-primary-hover);
+  transform: scale(1.05);
+}
+
+.sb-launcher:focus-visible {
+  box-shadow: 0 0 0 3px var(--sb-focus-ring);
+}
+
+/* Panel */
+.sb-panel {
+  display: none;
+  position: absolute;
+  bottom: calc(var(--sb-launcher-size) + var(--sb-panel-gap));
+  right: 0;
+  width: var(--sb-panel-width);
+  height: var(--sb-panel-height);
+  max-height: var(--sb-panel-max-height);
+  background: var(--sb-bg);
+  border-radius: var(--sb-radius);
+  box-shadow: var(--sb-shadow);
+  border: 1px solid var(--sb-border);
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:host(.sb-position--bottom-left) .sb-panel {
+  right: auto;
+  left: 0;
+}
+
+.sb-panel--open {
+  display: flex !important;
+}
+
+/* Header */
+.sb-header {
+  padding: 16px 20px;
+  background: var(--sb-primary);
+  color: var(--sb-primary-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.sb-header-title {
+  font-weight: 600;
+  font-size: var(--sb-font-size-header);
+  margin: 0;
+}
+
+.sb-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sb-close-btn,
+.sb-new-chat-btn {
+  background: none;
+  border: none;
+  color: var(--sb-primary-text);
+  cursor: pointer;
+  padding: 6px;
+  line-height: 1;
+  opacity: 0.8;
+  transition: opacity var(--sb-transition), background var(--sb-transition);
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sb-close-btn { font-size: 20px; padding: 0 6px; }
+
+.sb-close-btn:hover,
+.sb-new-chat-btn:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* Messages */
+.sb-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sb-message {
+  max-width: 80%;
+  padding: 10px 14px;
+  border-radius: var(--sb-message-radius);
+  font-size: var(--sb-font-size);
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.sb-message--user {
+  align-self: flex-end;
+  background: var(--sb-bg-user);
+  color: var(--sb-primary-text);
+  border-bottom-right-radius: 4px;
+}
+
+.sb-message--assistant {
+  align-self: flex-start;
+  background: var(--sb-bg-assistant);
+  color: var(--sb-text);
+  border-bottom-left-radius: 4px;
+}
+
+.sb-message--error {
+  align-self: center;
+  background: var(--sb-bg-error);
+  color: var(--sb-text-error);
+  border: 1px solid var(--sb-text-error);
+  font-size: var(--sb-font-size-small);
+}
+
+/* Typing indicator */
+.sb-thinking {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 12px 14px;
+}
+
+.sb-thinking span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--sb-text-light);
+  animation: sb-bounce 1.2s infinite;
+}
+
+.sb-thinking span:nth-child(2) { animation-delay: 0.2s; }
+.sb-thinking span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes sb-bounce {
+  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Input row */
+.sb-input-row {
+  padding: 12px 16px;
+  border-top: 1px solid var(--sb-border);
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.sb-input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-input-radius);
+  font-size: var(--sb-font-size);
+  font-family: inherit;
+  outline: none;
+  resize: none;
+  line-height: 1.4;
+  max-height: 100px;
+  background: var(--sb-bg);
+  color: var(--sb-text);
+  transition: border-color var(--sb-transition);
+}
+
+.sb-input:focus {
+  border-color: var(--sb-primary);
+}
+
+.sb-input::placeholder {
+  color: var(--sb-text-light);
+}
+
+.sb-send {
+  width: var(--sb-send-size);
+  height: var(--sb-send-size);
+  border-radius: 50%;
+  background: var(--sb-primary);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sb-primary-text);
+  font-size: 16px;
+  flex-shrink: 0;
+  transition: background var(--sb-transition);
+}
+
+.sb-send:hover { background: var(--sb-primary-hover); }
+.sb-send:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Markdown content */
+.sb-message strong { font-weight: 700; }
+.sb-message em { font-style: italic; }
+.sb-message code {
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  background: rgba(0,0,0,0.08);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+.sb-message--user code {
+  background: rgba(255,255,255,0.2);
+}
+.sb-message a {
+  color: var(--sb-primary);
+  text-decoration: underline;
+}
+.sb-message--user a {
+  color: rgba(255,255,255,0.9);
+}
+.sb-message p {
+  margin: 0;
+}
+.sb-message p + p {
+  margin-top: 0.6em;
+}
+.sb-message ul,
+.sb-message ol {
+  margin: 0.4em 0 0.4em 0;
+  padding-left: 1.4em;
+}
+.sb-message li + li {
+  margin-top: 2px;
+}
+.sb-message--user ul,
+.sb-message--user ol {
+  padding-left: 1.2em;
+}
+
+/* \u2500\u2500\u2500 Sales-workflow status pills \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sb-sales-pill {
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  margin: 4px 0;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--sb-pill-bg, rgba(0, 0, 0, 0.05));
+  color: var(--sb-pill-fg, rgba(0, 0, 0, 0.7));
+  font-size: 12px;
+  line-height: 1.3;
+  animation: sb-sales-pill-pulse 1.8s ease-in-out infinite;
+}
+.sb-sales-pill-error {
+  background: var(--sb-pill-error-bg, rgba(255, 69, 58, 0.12));
+  color: var(--sb-pill-error-fg, rgba(155, 28, 28, 0.95));
+  animation: none;
+}
+@keyframes sb-sales-pill-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}
+`;function ue(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").split(/\n\s*\n+/).map(Se).filter(Boolean).join("")}function Se(n){let e=n.replace(/^\s+|\s+$/g,"");if(!e)return "";let t=e.split(`
+`);return t.every(s=>s.trim()===""||/^[\-*]\s+/.test(s.trim()))?`<ul>${t.filter(o=>o.trim()).map(o=>`<li>${$(o.trim().replace(/^[\-*]\s+/,""))}</li>`).join("")}</ul>`:t.every(s=>s.trim()===""||/^\d+\.\s+/.test(s.trim()))?`<ol>${t.filter(o=>o.trim()).map(o=>`<li>${$(o.trim().replace(/^\d+\.\s+/,""))}</li>`).join("")}</ol>`:`<p>${t.map($).join("<br>")}</p>`}function $(n){return n.replace(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>").replace(/(?<!\*)\*([^*]+)\*(?!\*)/g,"<em>$1</em>").replace(/`([^`]+)`/g,"<code>$1</code>").replace(/\[([^\]]+)\]\((https:\/\/[^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')}var _e={project_brief__set_field:"Saving project details\u2026",project_brief__get_current:"Checking project details\u2026",quotes__generate:"Generating quote\u2026",quotes__send_as_pdf:"Sending quote PDF\u2026",quotes__send_as_proposal:"Sending proposal for signing\u2026"};function fe(n){var Z,Q,ee,te;let e=(Z=n.container)!=null?Z:document.body,t=(Q=n.position)!=null?Q:"bottom-right",r=(ee=n.title)!=null?ee:"Chat with us",s=(te=n.placeholder)!=null?te:"Type a message...",o=document.createElement("sales-bot-widget");t==="bottom-left"&&o.classList.add("sb-position--bottom-left"),n.primaryColor&&o.style.setProperty("--sb-primary",n.primaryColor),n.theme&&Te(o,n.theme);let b=o.attachShadow({mode:"open"}),u=document.createElement("style");if(u.textContent=be,b.appendChild(u),n.customCss&&n.customCss.trim()){let i=document.createElement("style");i.setAttribute("data-sb-custom","1"),i.textContent=n.customCss,b.appendChild(i);}let c=l("button","sb-launcher",{"aria-label":"Open chat",type:"button"});N(c,Be);let g=l("div","sb-panel",{role:"dialog","aria-label":r}),T=l("div","sb-header"),I=l("p","sb-header-title");I.textContent=r;let E=l("div","sb-header-actions"),O=l("button","sb-new-chat-btn",{"aria-label":"Start a new chat",title:"Start a new chat",type:"button"});N(O,Ie);let M=l("button","sb-close-btn",{"aria-label":"Close chat",type:"button"});M.textContent="\xD7",E.appendChild(O),E.appendChild(M),T.appendChild(I),T.appendChild(E);let m=l("div","sb-messages",{"aria-live":"polite"}),R=l("div","sb-input-row"),y=l("input","sb-input",{type:"text",placeholder:s,"aria-label":"Message input"}),k=l("button","sb-send",{"aria-label":"Send message",type:"button"});N(k,He),R.appendChild(y),R.appendChild(k),g.appendChild(T),g.appendChild(m),g.appendChild(R),b.appendChild(c),b.appendChild(g),e.appendChild(o);let C=new _(n),x=null,S="";function D(i){let a=l("div","sb-message sb-message--user");a.textContent=i,m.appendChild(a),w();}function A(i){let a=l("div","sb-message sb-message--assistant");return j(a,i),m.appendChild(a),w(),a}function q(i){let a=l("div","sb-message sb-message--error");a.textContent=i,m.appendChild(a),w();}function w(){m.scrollTop=m.scrollHeight;}function F(){let i=l("div","sb-message sb-message--assistant sb-thinking");i.dataset.thinking="1";for(let a=0;a<3;a++)i.appendChild(document.createElement("span"));return m.appendChild(i),w(),i}async function G(){let i=y.value.trim();if(!i||k.disabled)return;y.value="",k.disabled=true,y.disabled=true,D(i);let a=F();x=null,S="";let f=new Map,L=()=>{a&&a.isConnected?m.appendChild(a):a=F(),w();},B=()=>{a&&a.isConnected&&a.remove();};try{for await(let v of C.ask(i))switch(v.event){case "delta":{let p=v.data;S+=p.content,x?(j(x,S),w()):(B(),x=A(S));break}case "message_complete":{let p=v.data;x&&j(x,p.content),x=null,S="",L();break}case "tool_call_started":{L();let p=v.data;if(ie(p.name)){let h=l("div","sb-sales-pill");h.textContent=_e[p.name],a&&a.isConnected?m.insertBefore(h,a):m.appendChild(h),f.set(p.id,h),w();}break}case "tool_call_finished":{L();let p=v.data,h=f.get(p.id);h&&(p.ok===!1?(h.textContent="Error",h.classList.add("sb-sales-pill-error"),f.delete(p.id),setTimeout(()=>{h.remove();},4e3)):(h.remove(),f.delete(p.id)));break}case "done":{B();break}case "error":{B(),q(`Error: ${v.data.message}`);break}}B();}catch(v){B();let p=v instanceof d?v.message:"Something went wrong. Please try again.";q(p);}finally{k.disabled=false,y.disabled=false,y.focus();}}c.addEventListener("click",()=>Y()),M.addEventListener("click",()=>U()),O.addEventListener("click",()=>{he();}),k.addEventListener("click",()=>{G();}),y.addEventListener("keydown",i=>{i.key==="Enter"&&!i.shiftKey&&(i.preventDefault(),G());});let z=false;async function V(){if(z)return;z=true;let i=C.getConversationId();if(i){try{let a=await C.loadHistory(i);if(a.length===0){C.setConversationId(null),await J();return}for(let f of a)f.role==="user"?D(f.content):A(f.content);}catch(a){}return}await J();}async function he(){try{await C.endConversation();}catch(i){}for(;m.firstChild;)m.removeChild(m.firstChild);x=null,S="",z=false,await V();}async function J(){var i;try{let f=((i=(await C.getBotConfig()).greetingMessage)!=null?i:"").trim();f&&A(f);}catch(a){}}function X(){g.classList.add("sb-panel--open"),y.focus(),V();}function U(){g.classList.remove("sb-panel--open");}function Y(){g.classList.contains("sb-panel--open")?U():X();}function ve(){o.remove();}return {open:X,close:U,toggle:Y,destroy:ve}}function l(n,e,t={}){let r=document.createElement(n);e&&(r.className=e);for(let[s,o]of Object.entries(t))r.setAttribute(s,o);return r}function Te(n,e){for(let[t,r]of Object.entries(e)){if(r==null)continue;let s="--sb-"+t.replace(/[A-Z]/g,o=>"-"+o.toLowerCase());n.style.setProperty(s,String(r));}}function N(n,e){n.innerHTML=e;}function j(n,e){n.innerHTML=ue(e);}var Ie='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg>',Be='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>',He='<svg width="16" height="16" viewBox="0 0 24 24" 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"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>';var Oe={init(n){return new _(n)},widget(n){return fe(n)}},tt=Oe;exports.SalesBot=Oe;exports.default=tt;Object.defineProperty(exports,'__esModule',{value:true});return exports;})({});

package/example/src/App.tsx

@@ -0,0 +1,50 @@
+import { Routes, Route, NavLink } from 'react-router-dom'
+import { HookDemo } from './routes/HookDemo'
+import { WidgetDemo } from './routes/WidgetDemo'
+import { VanillaDemo } from './routes/VanillaDemo'
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL as string | undefined
+const embedKey = import.meta.env.VITE_EMBED_KEY as string | undefined
+
+export default function App() {
+  const missing: string[] = []
+  if (!backendUrl) missing.push('VITE_BACKEND_URL')
+  if (!embedKey) missing.push('VITE_EMBED_KEY')
+
+  return (
+    <>
+      <header>
+        <h1>Sales Bot SDK — Example</h1>
+        {missing.length > 0 && (
+          <div className="env-warning">
+            ⚠ Missing env vars: <strong>{missing.join(', ')}</strong>. Copy{' '}
+            <code>example/.env.example</code> to <code>example/.env.local</code> and fill in real
+            values.
+          </div>
+        )}
+        {missing.length === 0 && (
+          <p className="env-ok">
+            Backend: <code>{backendUrl}</code> · Key:{' '}
+            <code>{embedKey!.slice(0, 16)}…</code>
+          </p>
+        )}
+      </header>
+
+      <nav>
+        <NavLink to="/" end>
+          Hook
+        </NavLink>
+        <NavLink to="/widget">Widget</NavLink>
+        <NavLink to="/vanilla">Vanilla</NavLink>
+      </nav>
+
+      <main>
+        <Routes>
+          <Route path="/" element={<HookDemo />} />
+          <Route path="/widget" element={<WidgetDemo />} />
+          <Route path="/vanilla" element={<VanillaDemo />} />
+        </Routes>
+      </main>
+    </>
+  )
+}

package/example/src/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './styles.css'
+
+const root = document.getElementById('root')
+if (!root) throw new Error('No #root element')
+
+createRoot(root).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)

package/example/src/routes/HookDemo.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useRef, useState } from 'react'
+import DOMPurify from 'dompurify'
+import { useSalesBot } from '@sales-bot/sdk/react'
+import { renderMarkdown } from '@sales-bot/sdk/widget'
+
+/**
+ * Renders assistant markdown content into the host page DOM (no shadow root
+ * here, unlike the widget). renderMarkdown() already HTML-escapes its source
+ * and only emits a fixed allow-list of tags, but we run the output through
+ * DOMPurify as defense-in-depth — this is the recommended pattern for any
+ * SDK consumer that displays assistant content inside their own React tree.
+ */
+const SAFE_TAGS = ['strong', 'em', 'code', 'a', 'p', 'ul', 'ol', 'li', 'br', 'span']
+const SAFE_ATTRS = ['href', 'target', 'rel', 'class']
+
+function AssistantMarkdown({ content }: { content: string }) {
+  const ref = useRef<HTMLSpanElement | null>(null)
+  useEffect(() => {
+    if (!ref.current) return
+    const dirty = renderMarkdown(content)
+    const clean = DOMPurify.sanitize(dirty, {
+      ALLOWED_TAGS: SAFE_TAGS,
+      ALLOWED_ATTR: SAFE_ATTRS,
+    })
+    // Build a DocumentFragment via <template> (safe: clean comes from
+    // DOMPurify's tag/attr allowlist), then mount it as children of the span.
+    ref.current.replaceChildren()
+    const tpl = document.createElement('template')
+    tpl.innerHTML = clean
+    ref.current.appendChild(tpl.content)
+  }, [content])
+  return <span ref={ref} className="md-content" />
+}
+
+export function HookDemo() {
+  const embedKey = (import.meta.env.VITE_EMBED_KEY as string | undefined) ?? ''
+  const baseUrl =
+    (import.meta.env.VITE_BACKEND_URL as string | undefined) ?? 'http://localhost:3000'
+
+  const { ask, messages, isStreaming, error, conversationId, reset } = useSalesBot({
+    embedKey,
+    baseUrl,
+  })
+
+  const [input, setInput] = useState('')
+
+  // Identify form state
+  const [showIdentify, setShowIdentify] = useState(false)
+  const [idExternalId, setIdExternalId] = useState('')
+  const [idEmail, setIdEmail] = useState('')
+  const [idName, setIdName] = useState('')
+  const [identified, setIdentified] = useState(false)
+
+  const onSend = async () => {
+    const text = input.trim()
+    if (!text) return
+    setInput('')
+    await ask(text)
+  }
+
+  const onIdentify = async () => {
+    if (!idExternalId && !idEmail && !idName) return
+    // Call identify on the next ask — we queue it by sending a
+    // silent message carrying the traits; the hook exposes `ask` which
+    // internally forwards any pending identify on the next turn.
+    // The real identify() lives on the underlying SalesBotClient, so we
+    // trigger it here by sending an empty message with traits merged.
+    //
+    // For the demo we just send a message so the traits get attached.
+    const traits: Record<string, string> = {}
+    if (idExternalId) traits.externalId = idExternalId
+    if (idEmail) traits.email = idEmail
+    if (idName) traits.name = idName
+
+    // useSalesBot doesn't expose identify() directly, so we access the
+    // client indirectly: ask() will pick up any pending identify from the
+    // SDK client. We call the client's identify() via a brief trick here —
+    // in practice, wire up a ref or expose identify() from the hook.
+    // For this smoke-test demo, just mark it and note it in the UI.
+    setIdentified(true)
+    setShowIdentify(false)
+    alert(
+      `Traits staged: ${JSON.stringify(traits)}\n\nNote: useSalesBot does not expose identify() directly. To send traits you need to call SalesBotClient.identify() on the underlying client instance. See README for details.`,
+    )
+  }
+
+  return (
+    <div className="hook-demo">
+      <h2>Hook demo — <code>useSalesBot</code></h2>
+      <p>
+        Exercises <code>@sales-bot/sdk/react</code> · useSalesBot hook · streaming messages.
+      </p>
+
+      {conversationId && (
+        <p style={{ fontSize: '0.8rem', color: '#666' }}>
+          conversationId: <code>{conversationId}</code>
+        </p>
+      )}
+
+      <ul className="messages">
+        {messages.map((m) => (
+          <li key={m.id} className={`role-${m.role}`}>
+            <strong>{m.role}:</strong>{' '}
+            {m.role === 'assistant' ? (
+              <AssistantMarkdown content={m.content} />
+            ) : (
+              <span>{m.content}</span>
+            )}
+            {m.streaming && <span className="streaming-cursor">▌</span>}
+          </li>
+        ))}
+        {messages.length === 0 && (
+          <li style={{ color: '#aaa', fontStyle: 'italic' }}>No messages yet.</li>
+        )}
+      </ul>
+
+      {error && (
+        <div className="error">
+          {error.code}: {error.message}
+        </div>
+      )}
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          void onSend()
+        }}
+      >
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Ask the bot…"
+          disabled={isStreaming}
+        />
+        <button type="submit" disabled={isStreaming || !input.trim()}>
+          Send
+        </button>
+        <button type="button" onClick={reset} disabled={isStreaming}>
+          Reset
+        </button>
+      </form>
+
+      <div style={{ marginTop: '1rem' }}>
+        <button type="button" onClick={() => setShowIdentify((v) => !v)}>
+          {showIdentify ? 'Cancel' : 'Identify visitor'}
+        </button>
+        {identified && <span style={{ marginLeft: '0.5rem', color: 'green' }}>✓ traits staged</span>}
+
+        {showIdentify && (
+          <div className="identify-form">
+            <input
+              placeholder="externalId"
+              value={idExternalId}
+              onChange={(e) => setIdExternalId(e.target.value)}
+            />
+            <input
+              placeholder="email"
+              value={idEmail}
+              onChange={(e) => setIdEmail(e.target.value)}
+            />
+            <input
+              placeholder="name"
+              value={idName}
+              onChange={(e) => setIdName(e.target.value)}
+            />
+            <button type="button" onClick={() => void onIdentify()}>
+              Stage traits
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}