@0xbot/chat-react 1.0.8 → 1.0.9

package/dist/chat-library.umd.js

@@ -0,0 +1,43 @@
+(function(O,x){typeof exports=="object"&&typeof module<"u"?x(exports,require("react"),require("markdown-it"),require("highlight.js"),require("localforage"),require("axios"),require("@fingerprintjs/fingerprintjs")):typeof define=="function"&&define.amd?define(["exports","react","markdown-it","highlight.js","localforage","axios","@fingerprintjs/fingerprintjs"],x):(O=typeof globalThis<"u"?globalThis:O||self,x(O.ChatLibrary={},O.React,O.MarkdownIt,O.hljs,O.localforage,O.axios,O.FingerprintJS))})(this,function(O,x,Se,$,ee,Te,he){"use strict";var ve=document.createElement("style");ve.textContent=`.message-container{display:flex}.message-align-right{justify-content:flex-end}.message-align-left{justify-content:flex-start}.chat-avatar{width:44px;height:44px;max-width:44px;max-height:44px;min-width:44px;min-height:44px;border-radius:8px;overflow:hidden;flex-shrink:0}.chat-avatar img{width:100%;height:100%;object-fit:cover}.message-bubble{padding:12px 16px;border-radius:8px;max-width:90%;font-size:14px;word-break:break-all;line-height:24px;background:#ffffff0d;color:#fff}@media (min-width: 768px){.message-bubble{max-width:70%;font-size:13px}}.chat-message{background-color:#ffffff1a}.message-spacing-small{gap:.5rem}.message-spacing-medium{gap:1rem}.message-loading{color:#fff;font-style:italic}.message-empty{color:#fff;font-style:italic;text-align:center}.chat-library{box-sizing:border-box;height:100%;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px}.chat-container{flex:1;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.chat-container::-webkit-scrollbar{display:none}.chat-container-list{display:flex;flex-direction:column;gap:16px}.chat-bar{display:flex;align-items:center;gap:16px}.chat-bar-trash{width:24px;height:24px;min-width:24px;min-height:24px;color:#fff;cursor:pointer}.chat-bar-input{flex:1;height:44px;outline:none;border-radius:99999px;border:1px solid #ccc;background-color:transparent;color:#fff;padding:0 16px;min-width:0}.chat-bar-send{flex:none;width:auto;border:1px solid;height:48px;padding:0 32px;border-radius:99999px;cursor:pointer;background-color:transparent;transition:all .2s ease-in-out}.chat-bar-send:hover{background-color:var(--primary-color);color:#fff!important}.message{display:flex;gap:12px;max-width:80%}.message-self{align-self:flex-end;flex-direction:row-reverse}.message-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.message-avatar img{width:100%;height:100%;object-fit:cover}.message-content{flex:1;padding:12px 16px;border-radius:12px;background:#ffffff0d;color:#fff;font-size:14px;line-height:1.5}.message-self .message-content{background:var(--primary-color)}.message-loading{display:flex;align-items:center;gap:8px;color:#ffffff8c}.message-loading-dot{width:8px;height:8px;border-radius:50%;background:#ffffff8c;animation:loading 1.4s infinite ease-in-out}.message-loading-dot:nth-child(2){animation-delay:.2s}.message-loading-dot:nth-child(3){animation-delay:.4s}@keyframes loading{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--un-default-border-color, #e5e7eb)}:before,:after{--un-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}
+/*$vite$:1*/`,document.head.appendChild(ve);var ae={exports:{}},J={};/** @license React v16.14.0
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var me;function Oe(){if(me)return J;me=1;var n=x,i=60103;if(J.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var v=Symbol.for;i=v("react.element"),J.Fragment=v("react.fragment")}var g=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,w=Object.prototype.hasOwnProperty,E={key:!0,ref:!0,__self:!0,__source:!0};function j(R,m,l){var c,p={},C=null,A=null;l!==void 0&&(C=""+l),m.key!==void 0&&(C=""+m.key),m.ref!==void 0&&(A=m.ref);for(c in m)w.call(m,c)&&!E.hasOwnProperty(c)&&(p[c]=m[c]);if(R&&R.defaultProps)for(c in m=R.defaultProps,m)p[c]===void 0&&(p[c]=m[c]);return{$$typeof:i,type:R,key:C,ref:A,props:p,_owner:g.current}}return J.jsx=j,J.jsxs=j,J}var ie={};/** @license React v16.14.0
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var xe;function Pe(){return xe||(xe=1,function(n){process.env.NODE_ENV!=="production"&&function(){var i=x,v=60103,g=60106;n.Fragment=60107;var w=60108,E=60114,j=60109,R=60110,m=60112,l=60113,c=60120,p=60115,C=60116,A=60121,I=60122,M=60117,V=60129,T=60131;if(typeof Symbol=="function"&&Symbol.for){var u=Symbol.for;v=u("react.element"),g=u("react.portal"),n.Fragment=u("react.fragment"),w=u("react.strict_mode"),E=u("react.profiler"),j=u("react.provider"),R=u("react.context"),m=u("react.forward_ref"),l=u("react.suspense"),c=u("react.suspense_list"),p=u("react.memo"),C=u("react.lazy"),A=u("react.block"),I=u("react.server.block"),M=u("react.fundamental"),u("react.scope"),u("react.opaque.id"),V=u("react.debug_trace_mode"),u("react.offscreen"),T=u("react.legacy_hidden")}var W=typeof Symbol=="function"&&Symbol.iterator,U="@@iterator";function D(e){if(e===null||typeof e!="object")return null;var t=W&&e[W]||e[U];return typeof t=="function"?t:null}var Y=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function S(e){{for(var t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];L("error",e,r)}}function L(e,t,r){{var o=Y.ReactDebugCurrentFrame,y="";if(d){var _=a(d.type),f=d._owner;y+=ce(_,d._source,f&&a(f.type))}y+=o.getStackAddendum(),y!==""&&(t+="%s",r=r.concat([y]));var s=r.map(function(P){return""+P});s.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,s)}}var B=!1;function K(e){return!!(typeof e=="string"||typeof e=="function"||e===n.Fragment||e===E||e===V||e===w||e===l||e===c||e===T||B||typeof e=="object"&&e!==null&&(e.$$typeof===C||e.$$typeof===p||e.$$typeof===j||e.$$typeof===R||e.$$typeof===m||e.$$typeof===M||e.$$typeof===A||e[0]===I))}var H=/^(.*)[\\\/]/;function ce(e,t,r){var o="";if(t){var y=t.fileName,_=y.replace(H,"");if(/^index\./.test(_)){var f=y.match(H);if(f){var s=f[1];if(s){var P=s.replace(H,"");_=P+"/"+_}}}o=" (at "+_+":"+t.lineNumber+")"}else r&&(o=" (created by "+r+")");return`
+    in `+(e||"Unknown")+o}var le=1;function ne(e){return e._status===le?e._result:null}function fe(e,t,r){var o=t.displayName||t.name||"";return e.displayName||(o!==""?r+"("+o+")":r)}function a(e){if(e==null)return null;if(typeof e.tag=="number"&&S("Received an unexpected object in getComponentName(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case n.Fragment:return"Fragment";case g:return"Portal";case E:return"Profiler";case w:return"StrictMode";case l:return"Suspense";case c:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case R:return"Context.Consumer";case j:return"Context.Provider";case m:return fe(e,e.render,"ForwardRef");case p:return a(e.type);case A:return a(e.render);case C:{var t=e,r=ne(t);if(r)return a(r);break}}return null}var h={};Y.ReactDebugCurrentFrame;var d=null;function b(e){d=e}function z(e,t,r,o,y){{var _=Function.call.bind(Object.prototype.hasOwnProperty);for(var f in e)if(_(e,f)){var s=void 0;try{if(typeof e[f]!="function"){var P=Error((o||"React class")+": "+r+" type `"+f+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[f]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw P.name="Invariant Violation",P}s=e[f](t,f,o,r,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(N){s=N}s&&!(s instanceof Error)&&(b(y),S("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",o||"React class",r,f,typeof s),b(null)),s instanceof Error&&!(s.message in h)&&(h[s.message]=!0,b(y),S("Failed %s type: %s",r,s.message),b(null))}}}var G=Y.ReactCurrentOwner,q=Object.prototype.hasOwnProperty,Q={key:!0,ref:!0,__self:!0,__source:!0},ye,we;function Be(e){if(q.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return e.ref!==void 0}function Fe(e){if(q.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function He(e,t){typeof e.ref=="string"&&G.current}function Je(e,t){{var r=function(){ye||(ye=!0,S("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}}function Ke(e,t){{var r=function(){we||(we=!0,S("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}}var Ge=function(e,t,r,o,y,_,f){var s={$$typeof:v,type:e,key:t,ref:r,props:f,_owner:_};return s._store={},Object.defineProperty(s._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(s,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(s,"_source",{configurable:!1,enumerable:!1,writable:!1,value:y}),Object.freeze&&(Object.freeze(s.props),Object.freeze(s)),s};function Ze(e,t,r,o,y){{var _,f={},s=null,P=null;r!==void 0&&(s=""+r),Fe(t)&&(s=""+t.key),Be(t)&&(P=t.ref,He(t,y));for(_ in t)q.call(t,_)&&!Q.hasOwnProperty(_)&&(f[_]=t[_]);if(e&&e.defaultProps){var N=e.defaultProps;for(_ in N)f[_]===void 0&&(f[_]=N[_])}if(s||P){var F=typeof e=="function"?e.displayName||e.name||"Unknown":e;s&&Je(f,F),P&&Ke(f,F)}return Ge(e,s,P,y,o,G.current,f)}}var ue=Y.ReactCurrentOwner;Y.ReactDebugCurrentFrame;function Z(e){d=e}var de;de=!1;function ge(e){return typeof e=="object"&&e!==null&&e.$$typeof===v}function Ee(){{if(ue.current){var e=a(ue.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function Xe(e){return""}var Re={};function qe(e){{var t=Ee();if(!t){var r=typeof e=="string"?e:e.displayName||e.name;r&&(t=`
+
+Check the top-level render call using <`+r+">.")}return t}}function ke(e,t){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var r=qe(t);if(Re[r])return;Re[r]=!0;var o="";e&&e._owner&&e._owner!==ue.current&&(o=" It was passed a child from "+a(e._owner.type)+"."),Z(e),S('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',r,o),Z(null)}}function Ce(e,t){{if(typeof e!="object")return;if(Array.isArray(e))for(var r=0;r<e.length;r++){var o=e[r];ge(o)&&ke(o,t)}else if(ge(e))e._store&&(e._store.validated=!0);else if(e){var y=D(e);if(typeof y=="function"&&y!==e.entries)for(var _=y.call(e),f;!(f=_.next()).done;)ge(f.value)&&ke(f.value,t)}}}function Qe(e){{var t=e.type;if(t==null||typeof t=="string")return;var r;if(typeof t=="function")r=t.propTypes;else if(typeof t=="object"&&(t.$$typeof===m||t.$$typeof===p))r=t.propTypes;else return;if(r){var o=a(t);z(r,e.props,"prop",o,e)}else if(t.PropTypes!==void 0&&!de){de=!0;var y=a(t);S("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",y||"Unknown")}typeof t.getDefaultProps=="function"&&!t.getDefaultProps.isReactClassApproved&&S("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function $e(e){{for(var t=Object.keys(e.props),r=0;r<t.length;r++){var o=t[r];if(o!=="children"&&o!=="key"){Z(e),S("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",o),Z(null);break}}e.ref!==null&&(Z(e),S("Invalid attribute `ref` supplied to `React.Fragment`."),Z(null))}}function je(e,t,r,o,y,_){{var f=K(e);if(!f){var s="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(s+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var P=Xe();P?s+=P:s+=Ee();var N;e===null?N="null":Array.isArray(e)?N="array":e!==void 0&&e.$$typeof===v?(N="<"+(a(e.type)||"Unknown")+" />",s=" Did you accidentally export a JSX literal instead of a component?"):N=typeof e,S("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",N,s)}var F=Ze(e,t,r,y,_);if(F==null)return F;if(f){var X=t.children;if(X!==void 0)if(o)if(Array.isArray(X)){for(var pe=0;pe<X.length;pe++)Ce(X[pe],e);Object.freeze&&Object.freeze(X)}else S("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Ce(X,e)}return e===n.Fragment?$e(F):Qe(F),F}}function et(e,t,r){return je(e,t,r,!0)}function tt(e,t,r){return je(e,t,r,!1)}var rt=tt,nt=et;n.jsx=rt,n.jsxs=nt}()}(ie)),ie}process.env.NODE_ENV==="production"?ae.exports=Oe():ae.exports=Pe();var k=ae.exports;const oe=({self:n,UserAvatar:i,AgentAvatar:v,loading:g,loadingText:w,emptyText:E,content:j,children:R})=>k.jsxs("div",{className:`message-container message-spacing-small message-spacing-medium ${n?"message-align-right":"message-align-left"}`,children:[!n&&k.jsx("img",{src:v,className:"chat-avatar",alt:"Agent Avatar"}),k.jsxs("div",{className:`message-bubble ${n?"chat-message":""}`,children:[!j&&!g&&k.jsx("div",{className:"message-empty",children:E}),R,g&&k.jsx("div",{className:"message-loading",children:w})]}),n&&k.jsx("img",{src:i,className:"chat-avatar",alt:"User Avatar"})]}),Ae=n=>{n.renderer.rules.fence=(i,v)=>{const g=i[v],w=g.info?g.info.trim():"";let E="";if(w&&$.getLanguage(w))try{E=$.highlight(g.content,{language:w}).value}catch{E=n.utils.escapeHtml(g.content)}else E=n.utils.escapeHtml(g.content);return`
+      <div class="code-block-element">
+        <div class="code-area">
+          <div class="header">
+            <div class="text">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <path fill="#fff" fill-opacity="0.55" fill-rule="evenodd" d="M7 9v6H5.2V9H7Zm0-1v8H5c-.552 0-1-.299-1-.667V8.667C4 8.298 4.448 8 5 8h2Z" clip-rule="evenodd"/>
+                <path stroke="#fff" stroke-linejoin="bevel" stroke-opacity="0.55" d="m8.5 10 3 2-3 2M15.5 15h-4"/>
+                <path fill="#fff" fill-opacity="0.55" fill-rule="evenodd" d="M17 9v6h1.8V9H17Zm0-1v8h2c.552 0 1-.299 1-.667V8.667C20 8.298 19.552 8 19 8h-2Z" clip-rule="evenodd"/>
+              </svg>
+              <span class="code-area-language">${w}</span>
+            </div>
+            <div class="copy">
+              <button class="copy-btn" onclick="copyCodeToClipboard(this)">Copy</button>
+            </div>
+          </div>
+          <div class="content">
+            <pre><code class="hljs language-${n.utils.escapeHtml(w)}">${E}</code></pre>
+          </div>
+        </div>
+      </div>
+    `}},Ie=new Se({highlight:(n,i)=>{if(i&&$.getLanguage(i))try{return $.highlight(n,{language:i}).value}catch{}return""}}).use(Ae),Le=(n,i=!1)=>Ie.render(n,i);function te(n={}){const{prefix:i="0xbot-chat"}=n,v=l=>i?`${i}_${l}`:l,g=ee.createInstance({name:i,storeName:i,driver:[ee.INDEXEDDB,ee.LOCALSTORAGE,ee.WEBSQL]}),w=async l=>{try{const c=v(l),p=await g.getItem(c);if(p===null)return null;try{return JSON.parse(p)}catch{return p}}catch(c){return console.error("Error getting value from storage:",c),null}},E=async(l,c)=>{try{const p=v(l),C=typeof c=="string"?c:JSON.stringify(c);await g.setItem(p,C)}catch(p){console.error("Error setting value in storage:",p)}};return{getStorage:w,setStorage:E,removeStorage:async l=>{try{const c=v(l);await g.removeItem(c)}catch(c){console.error("Error removing value from storage:",c)}},clearStorage:async()=>{try{await g.clear()}catch(l){console.error("Error clearing storage:",l)}},useStorageState:(l,c)=>{const[p,C]=x.useState(c);return x.useEffect(()=>{w(l).then(A=>{A!==null&&C(A)})},[l]),x.useEffect(()=>{E(l,p)},[l,p]),[p,C]}}}const{getStorage:Me}=te();let se="https://sdk.dorylus.chat/apis";const De=n=>{n&&(se=n)},be=Te.create({baseURL:se,timeout:6e4});be.interceptors.request.use(async n=>{const i=await Me("auth");return i&&(n.headers.Token=(i==null?void 0:i.token)||""),n},n=>Promise.reject(n));const re=async(n,i)=>(await be.post(n,i)).data,Ne=n=>{const{setStorage:i}=te();return n.unique_id||he.load().then(v=>v.get()).then(v=>{const g=v.visitorId;n.unique_id=g,i("visitorId",g)}),re("/sdk/sdk_get_token",n)},Ye=n=>re("/app/conversation_history",n),ze=n=>re("/app/upsert_conversation",n),Ve=n=>re("/app/delete_one_conversation_history",{id:n}),We=()=>{const[n,i]=x.useState(null),[v,g]=x.useState(!0),[w,E]=x.useState(null),j=async(m,l,c)=>new Promise(async(p,C)=>{var A;try{const{getStorage:I}=te(),M=await I("auth"),V=await fetch(l,{method:"POST",headers:{"Content-Type":"application/json",token:(M==null?void 0:M.token)||""},body:JSON.stringify(m)});if(!V.ok)throw new Error(`Server responded with status: ${V.status}`);const T=(A=V.body)==null?void 0:A.getReader();if(!T)throw new Error("Failed to get response reader");E(T);const u=new TextDecoder;let W="";(async()=>{try{for(;;){const{done:D,value:Y}=await T.read();if(D){g(!1),p();break}W+=u.decode(Y,{stream:!0});const S=W.split(`
+`);W=S.pop()||"";for(const L of S)try{if(L.startsWith("data:")){const B=L.substring(5).trim();if(B){const K=JSON.parse(B);c(K)}}}catch(B){console.error("Error parsing message:",B)}}}catch(D){C(D)}})()}catch(I){i(I),C(I)}}),R=()=>{w&&(w.cancel(),E(null))};return x.useEffect(()=>()=>{R()},[]),{loading:v,error:n,connect:j,close:R}},Ue=n=>n.map(i=>({self:i.is_user,content:i.message})),_e=({apiKey:n,serverUrl:i,UserAvatar:v,AgentAvatar:g,loadingText:w="AI is thinking...",emptyText:E="No messages yet",theme:j={}})=>{const[R,m]=x.useState([]),[l,c]=x.useState(""),[p,C]=x.useState(!1),[A,I]=x.useState(!1),[M,V]=x.useState(""),[T,u]=x.useState(null),W=x.useRef(null),{getStorage:U,setStorage:D}=te(),{connect:Y}=We(),S=x.useRef(null),L={padding:j.padding||20,borderRadius:j.borderRadius||20,bgColor:j.bgColor||"#151515",primary:j.primary||"#AFAFFE",textColor:j.textColor||"#fff"},B=a=>{a.type==="text"?m(h=>{const d=[...h],b=T!==null?T:d.length-1;if(b>=0&&b<d.length){const z={...d[b]};z.content.endsWith(a.content)||(z.content+=a.content),z.loading&&(z.loading=!1,I(!1)),d[b]=z}return d}):a.type==="complete"&&(console.log("Message complete"),T!==null&&m(h=>{const d=[...h],b={...d[T]};return b.loading=!1,a.content.text||(b.content=E),d[T]=b,d}),u(null),C(!1),I(!1))},K=async()=>{if(!l.trim())return;C(!0),I(!0),u(null);const a={self:!0,content:l,loading:!1},h={self:!1,content:"",loading:!0};m(G=>[...G,a,h]),u(R.length+1);const d=await U("conversation"),b=await U("agent"),z={q:l,app_id:(b==null?void 0:b.app_id)||"",conversation_id:d||"",is_debug:!1,medias:[]};c("");try{console.log("Connecting to stream..."),await Y(z,`${se}/app/stream_chat`,B)}catch(G){console.error("Error sending message:",G),T!==null&&m(q=>{const Q=[...q];return Q[T].loading=!1,Q[T].content="Error: Failed to get response",Q}),u(null),I(!1)}finally{C(!1)}},H=()=>{var a;(a=S.current)==null||a.scrollIntoView({behavior:"smooth"})},ce=async a=>{const d=await Ne({api_key:n,unique_id:a});d.code==0&&(D("auth",d.data.auth),D("agent",d.data.agent),fe(d.data.agent))},le=async()=>{const a=await U("conversation");a&&(await Ve(a)).code==0&&m([])},ne=async a=>{const h=await U("agent"),d={page:1,pagesize:2e6,app_id:(h==null?void 0:h.app_id)||"",conversation_id:a||""},b=await Ye(d);b.code==0&&(m(Ue(b.data.list).reverse()),!R.length&&(h!=null&&h.opening_text)&&V(h.opening_text),H())},fe=async a=>{const h=await U("conversation");if(h)ne(h);else{const d={id:"",app_id:(a==null?void 0:a.app_id)||"",name:"Unnamed"},b=await ze(d);b.code==0&&(await D("conversation",b.data.id||""),ne(b.data.id||""))}};return x.useEffect(()=>{H(),n&&he.load().then(a=>a.get()).then(async a=>{const h=a.visitorId;await D("visitorId",h),ce(h)})},[]),x.useEffect(()=>{De(i)},[i]),x.useEffect(()=>{H()},[R]),k.jsxs("div",{className:"chat-library",style:{backgroundColor:L.bgColor,color:L.textColor,borderRadius:`${L.borderRadius}px`,padding:`${L.padding}px`},children:[k.jsx("div",{className:"chat-container",ref:W,children:k.jsxs("div",{className:"chat-container-list",children:[R.map((a,h)=>k.jsx(oe,{self:a.self,UserAvatar:v,AgentAvatar:g,loading:a.loading,loadingText:w,emptyText:E,content:a.content,children:k.jsx("div",{dangerouslySetInnerHTML:{__html:Le(a.content)}})},h)),!R.length&&M&&k.jsx(oe,{self:!1,AgentAvatar:g,loading:!1,content:M,children:k.jsx("div",{dangerouslySetInnerHTML:{__html:M}})}),k.jsx("div",{ref:S})]})}),k.jsxs("div",{className:"chat-bar",children:[k.jsx("svg",{onClick:le,className:"chat-bar-trash",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:k.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"})}),k.jsx("input",{className:"chat-bar-input",disabled:p,placeholder:"Ask anything...",value:l,onChange:a=>c(a.target.value),onKeyUp:a=>a.key==="Enter"&&K()}),k.jsx("button",{className:"chat-bar-send",disabled:p,style:{borderColor:L.primary,color:L.primary,"--primary-color":L.primary},onClick:K,children:"Send"})]})]})};O.ChatLibrary=_e,O.MessageItem=oe,O.default=_e,Object.defineProperties(O,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/{style.css → index.css}

@@ -1 +1 @@
-.message-container{display:flex}.message-align-right{justify-content:flex-end}.message-align-left{justify-content:flex-start}.chat-avatar{width:44px;height:44px;max-width:44px;max-height:44px;min-width:44px;min-height:44px;border-radius:8px;overflow:hidden;flex-shrink:0}.chat-avatar img{width:100%;height:100%;object-fit:cover}.message-bubble{padding:12px 16px;border-radius:8px;max-width:90%;font-size:14px;word-break:break-all;line-height:24px;background:#ffffff0d;color:#fff}@media (min-width: 768px){.message-bubble{max-width:70%;font-size:13px}}.chat-message{background-color:#ffffff1a}.message-spacing-small{gap:.5rem}.message-spacing-medium{gap:1rem}.message-loading{color:#fff;font-style:italic}.message-empty{color:#fff;font-style:italic;text-align:center}.chat-library{box-sizing:border-box;height:100%;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px}.chat-container{flex:1;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.chat-container::-webkit-scrollbar{display:none}.chat-container-list{display:flex;flex-direction:column;gap:16px}.chat-bar{display:flex;align-items:center;gap:16px}.chat-bar-trash{width:24px;height:24px;min-width:24px;min-height:24px;color:#fff;cursor:pointer}.chat-bar-input{flex:1;height:44px;outline:none;border-radius:99999px;border:1px solid #ccc;background-color:transparent;color:#fff;padding:0 16px;min-width:0}.chat-bar-send{flex:none;width:auto;border:1px solid;height:48px;padding:0 32px;border-radius:99999px;cursor:pointer;background-color:transparent;transition:all .2s ease-in-out}.chat-bar-send:hover{background-color:var(--primary-color);color:#fff!important}.message{display:flex;gap:12px;max-width:80%}.message-self{align-self:flex-end;flex-direction:row-reverse}.message-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.message-avatar img{width:100%;height:100%;object-fit:cover}.message-content{flex:1;padding:12px 16px;border-radius:12px;background:#ffffff0d;color:#fff;font-size:14px;line-height:1.5}.message-self .message-content{background:var(--primary-color)}.message-loading{display:flex;align-items:center;gap:8px;color:#ffffff8c}.message-loading-dot{width:8px;height:8px;border-radius:50%;background:#ffffff8c;animation:loading 1.4s infinite ease-in-out}.message-loading-dot:nth-child(2){animation-delay:.2s}.message-loading-dot:nth-child(3){animation-delay:.4s}@keyframes loading{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}
+.message-container{display:flex}.message-align-right{justify-content:flex-end}.message-align-left{justify-content:flex-start}.chat-avatar{width:44px;height:44px;max-width:44px;max-height:44px;min-width:44px;min-height:44px;border-radius:8px;overflow:hidden;flex-shrink:0}.chat-avatar img{width:100%;height:100%;object-fit:cover}.message-bubble{padding:12px 16px;border-radius:8px;max-width:90%;font-size:14px;word-break:break-all;line-height:24px;background:#ffffff0d;color:#fff}@media (min-width: 768px){.message-bubble{max-width:70%;font-size:13px}}.chat-message{background-color:#ffffff1a}.message-spacing-small{gap:.5rem}.message-spacing-medium{gap:1rem}.message-loading{color:#fff;font-style:italic}.message-empty{color:#fff;font-style:italic;text-align:center}.chat-library{box-sizing:border-box;height:100%;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px}.chat-container{flex:1;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.chat-container::-webkit-scrollbar{display:none}.chat-container-list{display:flex;flex-direction:column;gap:16px}.chat-bar{display:flex;align-items:center;gap:16px}.chat-bar-trash{width:24px;height:24px;min-width:24px;min-height:24px;color:#fff;cursor:pointer}.chat-bar-input{flex:1;height:44px;outline:none;border-radius:99999px;border:1px solid #ccc;background-color:transparent;color:#fff;padding:0 16px;min-width:0}.chat-bar-send{flex:none;width:auto;border:1px solid;height:48px;padding:0 32px;border-radius:99999px;cursor:pointer;background-color:transparent;transition:all .2s ease-in-out}.chat-bar-send:hover{background-color:var(--primary-color);color:#fff!important}.message{display:flex;gap:12px;max-width:80%}.message-self{align-self:flex-end;flex-direction:row-reverse}.message-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}.message-avatar img{width:100%;height:100%;object-fit:cover}.message-content{flex:1;padding:12px 16px;border-radius:12px;background:#ffffff0d;color:#fff;font-size:14px;line-height:1.5}.message-self .message-content{background:var(--primary-color)}.message-loading{display:flex;align-items:center;gap:8px;color:#ffffff8c}.message-loading-dot{width:8px;height:8px;border-radius:50%;background:#ffffff8c;animation:loading 1.4s infinite ease-in-out}.message-loading-dot:nth-child(2){animation-delay:.2s}.message-loading-dot:nth-child(3){animation-delay:.4s}@keyframes loading{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--un-default-border-color, #e5e7eb)}:before,:after{--un-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}

package/package.json

@@ -1,50 +1,42 @@
 {
   "name": "@0xbot/chat-react",
-  "version": "1.0.8",
-  "private": false,
-  "type": "module",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
+  "version": "1.0.9",
+  "description": "A React component for building chat interfaces with streaming support",
+  "main": "dist/chat-library.umd.js",
+  "module": "dist/chat-library.es.js",
+  "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^4.2.1",
-    "@types/node": "^22.14.1",
     "@unocss/reset": "^0.63.3",
     "axios": "^1.6.7",
     "highlight.js": "^11.9.0",
     "localforage": "^1.10.0",
     "markdown-it": "^14.0.0"
   },
-  "peerDependencies": {
-    "@fingerprintjs/fingerprintjs": "^4.2.1",
-    "@unocss/reset": "^0.58.5",
-    "axios": "^1.6.7",
-    "highlight.js": "^11.9.0",
-    "localforage": "^1.10.0",
-    "markdown-it": "^14.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.0",
-    "vite-plugin-dts": "^3.7.1"
-  }
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
 }