@kodaris/krubble-app-components 1.0.63 → 1.0.64

package/dist/krubble-app.umd.min.js

@@ -1329,7 +1329,7 @@ function vt(t,e){return(e,i,s)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Ref
       display: block;
       height: 100%;
     }
-  `,t.RouterOutlet=At([ct("kr-router-outlet")],t.RouterOutlet);var Dt=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};t.Chatbot=class extends lt{constructor(){super(...arguments),this._reader=null,this._decoder=new TextDecoder,this._buffer="",this._userHasScrolledUp=!1,this._isDragging=!1,this._isResizing=!1,this._resizeDir="",this._dragStartX=0,this._dragStartY=0,this._dragStartLeft=0,this._dragStartTop=0,this._resizeStartW=0,this._resizeStartH=0,this.send=null,this.clear=null,this.messages=[],this.title="AI Assistant",this.subtitle="",this.placeholder="Type a message...",this.opened=!1,this._inputValue="",this._isStreaming=!1,this._statusText="",this._error="",this._handleMouseMove=t=>{if(this._isDragging){let e=this._dragStartLeft+(t.clientX-this._dragStartX),i=this._dragStartTop+(t.clientY-this._dragStartY);const s=this._panelEl.offsetWidth,a=this._panelEl.offsetHeight;e=Math.max(48-s,Math.min(e,window.innerWidth-48)),i=Math.max(48-a,Math.min(i,window.innerHeight-48)),this._panelEl.style.left=e+"px",this._panelEl.style.top=i+"px"}else if(this._isResizing){const e=t.clientX-this._dragStartX,i=t.clientY-this._dragStartY,s=340,a=380,r=.9*window.innerWidth,n=window.innerHeight-72;let o=this._resizeStartW,l=this._resizeStartH,d=this._dragStartLeft,c=this._dragStartTop;if(this._resizeDir.includes("e")&&(o=Math.max(s,Math.min(this._resizeStartW+e,r))),this._resizeDir.includes("w")){const t=this._resizeStartW-e;t>=s&&t<=r&&(o=t,d=this._dragStartLeft+e)}if(this._resizeDir.includes("s")&&(l=Math.max(a,Math.min(this._resizeStartH+i,n))),this._resizeDir.includes("n")){const t=this._resizeStartH-i;t>=a&&t<=n&&(l=t,c=this._dragStartTop+i)}d=Math.max(0,d),c=Math.max(0,c),this._panelEl.style.width=o+"px",this._panelEl.style.height=l+"px",this._panelEl.style.left=d+"px",this._panelEl.style.top=c+"px"}},this._handleMouseUp=()=>{this._isDragging&&(this._isDragging=!1,this._panelEl.classList.remove("chatbot__panel--dragging")),this._isResizing&&(this._isResizing=!1,this._panelEl.classList.remove("chatbot__panel--resizing")),document.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp)}}disconnectedCallback(){super.disconnectedCallback(),this._reader&&(this._reader.cancel(),this._reader=null),document.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp)}updated(t){(t.has("messages")||t.has("_statusText"))&&!this._userHasScrolledUp&&this._messagesEl&&requestAnimationFrame((()=>{this._messagesEl&&(this._messagesEl.scrollTop=this._messagesEl.scrollHeight)})),t.has("opened")&&this.opened&&this._inputEl&&setTimeout((()=>{this._inputEl&&this._inputEl.focus()}),200)}stop(){this._handleStop()}_handleHeaderMouseDown(t){if(t.target.closest("button"))return;if(!this._panelEl)return;this._isDragging=!0,this._panelEl.classList.add("chatbot__panel--dragging");const e=this._panelEl.getBoundingClientRect();this._panelEl.style.left=e.left+"px",this._panelEl.style.top=e.top+"px",this._panelEl.style.right="auto",this._panelEl.style.bottom="auto",this._panelEl.style.position="fixed",this._dragStartX=t.clientX,this._dragStartY=t.clientY,this._dragStartLeft=e.left,this._dragStartTop=e.top,t.preventDefault(),document.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleResizeMouseDown(t){if(!this._panelEl)return;this._isResizing=!0,this._resizeDir=t.currentTarget.dataset.dir||"",this._panelEl.classList.add("chatbot__panel--resizing");const e=this._panelEl.getBoundingClientRect();this._panelEl.style.left=e.left+"px",this._panelEl.style.top=e.top+"px",this._panelEl.style.right="auto",this._panelEl.style.bottom="auto",this._panelEl.style.position="fixed",this._dragStartX=t.clientX,this._dragStartY=t.clientY,this._dragStartLeft=e.left,this._dragStartTop=e.top,this._resizeStartW=e.width,this._resizeStartH=e.height,t.preventDefault(),t.stopPropagation(),document.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleToggle(){this.opened=!this.opened,this.opened&&this._panelEl&&(this._panelEl.style.left="",this._panelEl.style.top="",this._panelEl.style.right="",this._panelEl.style.bottom="",this._panelEl.style.width="",this._panelEl.style.height="",this._panelEl.style.position="")}_handleInputChange(t){this._inputValue=t.target.value;const e=t.target;e.style.height="auto",e.style.height=Math.min(e.scrollHeight,120)+"px"}_handleKeyDown(t){"Enter"!==t.key||t.shiftKey||(t.preventDefault(),this._handleSubmit())}_handleSubmit(){if(!this._inputValue.trim()||!this.send||this._isStreaming)return;const t=this._inputValue.trim(),e=new CustomEvent("message-submit",{detail:{message:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||(this.messages=[...this.messages,{role:"user",content:t}],this._inputValue="",this._error="",this._userHasScrolledUp=!1,this._inputEl&&(this._inputEl.style.height="auto"),this.messages=[...this.messages,{role:"assistant",content:""}],this._isStreaming=!0,this._statusText="",this.send({message:t,messages:this.messages.slice(0,-1)}).then((t=>{t.ok?t.body?(this._reader=t.body.getReader(),this._decoder=new TextDecoder,this._buffer="",this._readStreamChunk()):this._handleStreamError("No response body"):this._handleStreamError("Request failed: "+t.status)})).catch((t=>{"AbortError"!==t.name&&this._handleStreamError(t.message)})))}_handleStop(){this._reader&&(this._reader.cancel(),this._reader=null),this._isStreaming=!1,this._statusText=""}_handleClear(){this.clear&&this.clear().then((()=>{this._reader&&(this._reader.cancel(),this._reader=null),this.messages=[],this._isStreaming=!1,this._statusText="",this._error="",this._inputValue="",this._userHasScrolledUp=!1}))}_handleMessagesScroll(t){const e=t.target,i=e.scrollHeight-e.scrollTop-e.clientHeight;this._userHasScrolledUp=i>50}_handleErrorDismiss(){this._error=""}_readStreamChunk(){this._reader&&this._reader.read().then((t=>{if(t.done)return this._isStreaming=!1,this._statusText="",void(this._reader=null);this._buffer=this._buffer+this._decoder.decode(t.value,{stream:!0});const e=this._buffer.split("\n\n");this._buffer=e.pop()||"";for(let t=0;t<e.length;t++){if(!e[t].trim())continue;const i=e[t].split("\n");for(let t=0;t<i.length;t++){if(!i[t].startsWith("data:"))continue;const e=i[t].slice(5).trim();if(!e)continue;let s;try{s=JSON.parse(e)}catch{continue}if("STATUS"===s.type)s.message&&(this._statusText=String(s.message));else if("REASONING_PART"===s.type){if(s.message){const t=this.messages.length-1;t>=0&&"assistant"===this.messages[t].role&&(this.messages[t].reasoning||(this.messages[t].reasoning=""),this.messages[t].reasoning+=String(s.message),this.requestUpdate())}}else if("RESPONSE_PART"===s.type){if(s.message){this._statusText="";const t=this.messages.length-1;t>=0&&"assistant"===this.messages[t].role&&(this.messages[t].content+=String(s.message),this.requestUpdate())}}else if("ACTION"===s.type){const t=s,e=new CustomEvent("action",{detail:{action:t},bubbles:!0,composed:!0,cancelable:!0});if(this.dispatchEvent(e),!e.defaultPrevented)if("RELOAD"===t.action)location.reload();else if("NAVIGATE"===t.action)t.data&&t.data.url&&(window.location.href=t.data.url);else if("OPEN_TAB"===t.action)t.data&&t.data.url&&window.open(t.data.url,"_blank");else if("UPDATE_HTML"===t.action){if(t.data&&t.data.selector&&t.data.html){const e=document.querySelector(t.data.selector);e&&(e.innerHTML=t.data.html)}}else if("SCROLL_TO"===t.action&&t.data&&t.data.selector){const e=document.querySelector(t.data.selector);e&&e.scrollIntoView({behavior:"smooth"})}}else"ERROR"===s.type&&this._handleStreamError(String(s.message||"Unknown error"));s.finished&&(this._isStreaming=!1,this._statusText="",this._reader=null)}}this._readStreamChunk()})).catch((t=>{"AbortError"!==t.name&&this._handleStreamError(t.message)}))}_handleStreamError(t){if(this._isStreaming=!1,this._statusText="",this._error=t,this._reader&&(this._reader.cancel(),this._reader=null),this.messages.length>0){const t=this.messages[this.messages.length-1];"assistant"!==t.role||t.content||(this.messages=this.messages.slice(0,-1))}}_formatAssistantContent(t){let e=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;");e=e.replace(/```(\w*)\n?([\s\S]*?)```/g,"<pre><code>$2</code></pre>"),e=e.replace(/`([^`]+)`/g,"<code>$1</code>"),e=e.replace(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>");const i=e.split(/(<pre><code>[\s\S]*?<\/code><\/pre>)/g);for(let t=0;t<i.length;t++)t%2==0&&(i[t]=i[t].replace(/\n\n/g,"</p><p>"),i[t]=i[t].replace(/\n/g,"<br>"));return e=i.join(""),e.includes("</p><p>")&&(e="<p>"+e+"</p>"),e}render(){return B`
+  `,t.RouterOutlet=At([ct("kr-router-outlet")],t.RouterOutlet);var Dt=function(t,e,i,s){var a,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var o=t.length-1;o>=0;o--)(a=t[o])&&(n=(r<3?a(n):r>3?a(e,i,n):a(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};t.Chatbot=class extends lt{constructor(){super(...arguments),this._reader=null,this._decoder=new TextDecoder,this._buffer="",this._userHasScrolledUp=!1,this._isDragging=!1,this._isResizing=!1,this._resizeDir="",this._dragStartX=0,this._dragStartY=0,this._dragStartLeft=0,this._dragStartTop=0,this._resizeStartW=0,this._resizeStartH=0,this.send=null,this.clear=null,this.messages=[],this.title="AI Assistant",this.subtitle="",this.placeholder="Type a message...",this.opened=!1,this._inputValue="",this._isStreaming=!1,this._statusText="",this._error="",this._handleMouseMove=t=>{if(this._isDragging){let e=this._dragStartLeft+(t.clientX-this._dragStartX),i=this._dragStartTop+(t.clientY-this._dragStartY);const s=this._panelEl.offsetWidth,a=this._panelEl.offsetHeight;e=Math.max(48-s,Math.min(e,window.innerWidth-48)),i=Math.max(48-a,Math.min(i,window.innerHeight-48)),this._panelEl.style.left=e+"px",this._panelEl.style.top=i+"px"}else if(this._isResizing){const e=t.clientX-this._dragStartX,i=t.clientY-this._dragStartY,s=340,a=380,r=.9*window.innerWidth,n=window.innerHeight-72;let o=this._resizeStartW,l=this._resizeStartH,d=this._dragStartLeft,c=this._dragStartTop;if(this._resizeDir.includes("e")&&(o=Math.max(s,Math.min(this._resizeStartW+e,r))),this._resizeDir.includes("w")){const t=this._resizeStartW-e;t>=s&&t<=r&&(o=t,d=this._dragStartLeft+e)}if(this._resizeDir.includes("s")&&(l=Math.max(a,Math.min(this._resizeStartH+i,n))),this._resizeDir.includes("n")){const t=this._resizeStartH-i;t>=a&&t<=n&&(l=t,c=this._dragStartTop+i)}d=Math.max(0,d),c=Math.max(0,c),this._panelEl.style.width=o+"px",this._panelEl.style.height=l+"px",this._panelEl.style.left=d+"px",this._panelEl.style.top=c+"px"}},this._handleMouseUp=()=>{this._isDragging&&(this._isDragging=!1,this._panelEl.classList.remove("chatbot__panel--dragging")),this._isResizing&&(this._isResizing=!1,this._panelEl.classList.remove("chatbot__panel--resizing")),document.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp)}}disconnectedCallback(){super.disconnectedCallback(),this._reader&&(this._reader.cancel(),this._reader=null),document.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp)}updated(t){(t.has("messages")||t.has("_statusText"))&&!this._userHasScrolledUp&&this._messagesEl&&requestAnimationFrame((()=>{this._messagesEl&&(this._messagesEl.scrollTop=this._messagesEl.scrollHeight)})),t.has("opened")&&this.opened&&this._inputEl&&setTimeout((()=>{this._inputEl&&this._inputEl.focus()}),200)}stop(){this._handleStop()}_handleHeaderMouseDown(t){if(t.target.closest("button"))return;if(!this._panelEl)return;this._isDragging=!0,this._panelEl.classList.add("chatbot__panel--dragging");const e=this._panelEl.getBoundingClientRect();this._panelEl.style.left=e.left+"px",this._panelEl.style.top=e.top+"px",this._panelEl.style.right="auto",this._panelEl.style.bottom="auto",this._panelEl.style.position="fixed",this._dragStartX=t.clientX,this._dragStartY=t.clientY,this._dragStartLeft=e.left,this._dragStartTop=e.top,t.preventDefault(),document.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleResizeMouseDown(t){if(!this._panelEl)return;this._isResizing=!0,this._resizeDir=t.currentTarget.dataset.dir||"",this._panelEl.classList.add("chatbot__panel--resizing");const e=this._panelEl.getBoundingClientRect();this._panelEl.style.left=e.left+"px",this._panelEl.style.top=e.top+"px",this._panelEl.style.right="auto",this._panelEl.style.bottom="auto",this._panelEl.style.position="fixed",this._dragStartX=t.clientX,this._dragStartY=t.clientY,this._dragStartLeft=e.left,this._dragStartTop=e.top,this._resizeStartW=e.width,this._resizeStartH=e.height,t.preventDefault(),t.stopPropagation(),document.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleToggle(){this.opened=!this.opened,this.opened&&this._panelEl&&(this._panelEl.style.left="",this._panelEl.style.top="",this._panelEl.style.right="",this._panelEl.style.bottom="",this._panelEl.style.width="",this._panelEl.style.height="",this._panelEl.style.position="")}_handleInputChange(t){this._inputValue=t.target.value;const e=t.target;e.style.height="auto",e.style.height=Math.min(e.scrollHeight,120)+"px"}_handleKeyDown(t){"Enter"!==t.key||t.shiftKey||(t.preventDefault(),this._handleSubmit())}_handleSubmit(){if(!this._inputValue.trim()||!this.send||this._isStreaming)return;const t=this._inputValue.trim(),e=new CustomEvent("message-submit",{detail:{message:t},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||(this.messages=[...this.messages,{role:"user",content:t}],this._inputValue="",this._error="",this._userHasScrolledUp=!1,this._inputEl&&(this._inputEl.style.height="auto"),this.messages=[...this.messages,{role:"assistant",content:""}],this._isStreaming=!0,this._statusText="",this.send({message:t,messages:this.messages.slice(0,-1)}).then((t=>{t.ok?t.body?(this._reader=t.body.getReader(),this._decoder=new TextDecoder,this._buffer="",this._readStreamChunk()):this._handleStreamError("No response body"):this._handleStreamError("Request failed: "+t.status)})).catch((t=>{"AbortError"!==t.name&&this._handleStreamError(t.message)})))}_handleStop(){this._reader&&(this._reader.cancel(),this._reader=null),this._isStreaming=!1,this._statusText=""}_handleClear(){this.clear&&this.clear().then((()=>{this._reader&&(this._reader.cancel(),this._reader=null),this.messages=[],this._isStreaming=!1,this._statusText="",this._error="",this._inputValue="",this._userHasScrolledUp=!1}))}_handleMessagesScroll(t){const e=t.target,i=e.scrollHeight-e.scrollTop-e.clientHeight;this._userHasScrolledUp=i>50}_handleErrorDismiss(){this._error=""}_readStreamChunk(){this._reader&&this._reader.read().then((t=>{if(t.done)return this._isStreaming=!1,this._statusText="",void(this._reader=null);this._buffer=this._buffer+this._decoder.decode(t.value,{stream:!0});const e=this._buffer.split("\n\n");this._buffer=e.pop()||"";for(let t=0;t<e.length;t++){if(!e[t].trim())continue;const i=e[t].split("\n");for(let t=0;t<i.length;t++){if(!i[t].startsWith("data:"))continue;const e=i[t].slice(5).trim();if(!e)continue;let s;try{s=JSON.parse(e)}catch{continue}if(this.dispatchEvent(new CustomEvent("stream-event",{detail:s,bubbles:!0,composed:!0})),"STATUS"===s.type)s.message&&(this._statusText=String(s.message));else if("REASONING_PART"===s.type){if(s.message){const t=this.messages.length-1;t>=0&&"assistant"===this.messages[t].role&&(this.messages[t].reasoning||(this.messages[t].reasoning=""),this.messages[t].reasoning+=String(s.message),this.requestUpdate())}}else if("RESPONSE_PART"===s.type){if(s.message){this._statusText="";const t=this.messages.length-1;t>=0&&"assistant"===this.messages[t].role&&(this.messages[t].content+=String(s.message),this.requestUpdate())}}else if("ACTION"===s.type){const t=s,e=new CustomEvent("action",{detail:{action:t},bubbles:!0,composed:!0,cancelable:!0});if(this.dispatchEvent(e),!e.defaultPrevented)if("RELOAD"===t.action)location.reload();else if("NAVIGATE"===t.action)t.data&&t.data.url&&(window.location.href=t.data.url);else if("OPEN_TAB"===t.action)t.data&&t.data.url&&window.open(t.data.url,"_blank");else if("UPDATE_HTML"===t.action){if(t.data&&t.data.selector&&t.data.html){const e=document.querySelector(t.data.selector);e&&(e.innerHTML=t.data.html)}}else if("SCROLL_TO"===t.action&&t.data&&t.data.selector){const e=document.querySelector(t.data.selector);e&&e.scrollIntoView({behavior:"smooth"})}}else"ERROR"===s.type&&this._handleStreamError(String(s.message||"Unknown error"));s.finished&&(this._isStreaming=!1,this._statusText="",this._reader=null)}}this._readStreamChunk()})).catch((t=>{"AbortError"!==t.name&&this._handleStreamError(t.message)}))}_handleStreamError(t){if(this._isStreaming=!1,this._statusText="",this._error=t,this._reader&&(this._reader.cancel(),this._reader=null),this.messages.length>0){const t=this.messages[this.messages.length-1];"assistant"!==t.role||t.content||(this.messages=this.messages.slice(0,-1))}}_formatAssistantContent(t){let e=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;");e=e.replace(/```(\w*)\n?([\s\S]*?)```/g,"<pre><code>$2</code></pre>"),e=e.replace(/`([^`]+)`/g,"<code>$1</code>"),e=e.replace(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>");const i=e.split(/(<pre><code>[\s\S]*?<\/code><\/pre>)/g);for(let t=0;t<i.length;t++)t%2==0&&(i[t]=i[t].replace(/\n\n/g,"</p><p>"),i[t]=i[t].replace(/\n/g,"<br>"));return e=i.join(""),e.includes("</p><p>")&&(e="<p>"+e+"</p>"),e}render(){return B`
       <button
         class=${wt({chatbot__toggle:!0,"chatbot__toggle--hidden":this.opened})}
         @click=${this._handleToggle}