@happiest-team/ai-chat-elements 1.0.1

package/dist/index.d.mts

@@ -0,0 +1,28 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class TypingIndicator extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare class ChatPanel extends LitElement {
+    publishableKey: string;
+    gatewayUrl: string;
+    private _messages;
+    private _isTyping;
+    private _inputValue;
+    private _client;
+    private _unsubscribe?;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private scrollToBottom;
+    private handleInput;
+    private handleKeydown;
+    private sendMessage;
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { ChatPanel, TypingIndicator };

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class TypingIndicator extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare class ChatPanel extends LitElement {
+    publishableKey: string;
+    gatewayUrl: string;
+    private _messages;
+    private _isTyping;
+    private _inputValue;
+    private _client;
+    private _unsubscribe?;
+    static styles: lit.CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private scrollToBottom;
+    private handleInput;
+    private handleKeydown;
+    private sendMessage;
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { ChatPanel, TypingIndicator };

package/dist/index.js

@@ -0,0 +1,247 @@
+"use strict";var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var x=(t,s)=>{for(var e in s)u(t,e,{get:s[e],enumerable:!0})},w=(t,s,e,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of y(s))!m.call(t,a)&&a!==e&&u(t,a,{get:()=>s[a],enumerable:!(i=g(s,a))||i.enumerable});return t};var v=t=>w(u({},"__esModule",{value:!0}),t),n=(t,s,e,i)=>{for(var a=i>1?void 0:i?g(s,e):s,o=t.length-1,p;o>=0;o--)(p=t[o])&&(a=(i?p(s,e,a):p(a))||a);return i&&a&&u(s,e,a),a};var k={};x(k,{ChatPanel:()=>r,TypingIndicator:()=>h});module.exports=v(k);var c=require("lit"),f=require("lit/decorators.js");var h=class extends c.LitElement{render(){return c.html`
+      <div class="typing-indicator">
+        <div class="dot"></div>
+        <div class="dot"></div>
+        <div class="dot"></div>
+      </div>
+    `}};h.styles=c.css`
+    .typing-indicator {
+      display: inline-flex;
+      align-items: center;
+      padding: 12px 16px;
+      background-color: #f1f5f9;
+      border-radius: 16px;
+      gap: 4px;
+    }
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      background-color: #64748b;
+      border-radius: 50%;
+      animation: bounce 1.4s infinite ease-in-out both;
+    }
+
+    .dot:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+
+    .dot:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+
+    @keyframes bounce {
+      0%, 80%, 100% { 
+        transform: translateY(0);
+      } 
+      40% { 
+        transform: translateY(-6px);
+      }
+    }
+  `,h=n([(0,f.customElement)("happiest-typing-indicator")],h);var l=require("lit"),d=require("lit/decorators.js");var b=class{config;state;listeners=new Set;apiUrl;conversationId;constructor(t){this.config=t,this.apiUrl=t.gatewayUrl||"https://www.happiest.team/api";let s=this.getCache("token"),e=this.getCache("messages")||[];this.state={status:s?"connected":"idle",isTyping:!1,messages:e,sessionToken:s,widgetConfig:{},error:null}}updateState(t){this.state={...this.state,...t},this.notifyListeners()}subscribe(t){return this.listeners.add(t),t(this.state),()=>this.listeners.delete(t)}notifyListeners(){this.listeners.forEach(t=>t(this.state))}getState(){return this.state}getCacheKey(t){return`happiest_${t}_${this.config.publishableKey}`}getCache(t){if(typeof window>"u")return null;try{let s=localStorage.getItem(this.getCacheKey(t));return s?JSON.parse(s):null}catch{return null}}setCache(t,s){if(!(typeof window>"u"))try{localStorage.setItem(this.getCacheKey(t),JSON.stringify(s))}catch(e){console.warn("[Happiest] Failed to persist state",e)}}clearSession(){typeof window<"u"&&(localStorage.removeItem(this.getCacheKey("token")),localStorage.removeItem(this.getCacheKey("messages"))),this.updateState({status:"idle",sessionToken:null,messages:[],error:null}),this.conversationId=void 0}async initSession(){if(!(this.state.status==="connected"&&this.state.sessionToken)){this.updateState({status:"connecting",error:null});try{let t=await fetch(`${this.apiUrl}/widget/v1/init`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({publishableKey:this.config.publishableKey})}),s=await t.json();if(!t.ok)throw new Error(s.error||"Failed to initialize session");let e=s.sessionToken||s.embedToken,i=s.widgetConfig||s.config||{};this.setCache("token",e),this.updateState({status:"connected",sessionToken:e,widgetConfig:i})}catch(t){let s=t instanceof Error?t.message:"Network error";this.updateState({status:"error",error:s})}}}async sendMessage(t){let s=t.trim();if(!s||!this.state.sessionToken)return;let e={id:Date.now().toString(),text:s,isUser:!0,createdAt:Date.now(),status:"sending"},i=[...this.state.messages,e];this.setCache("messages",i),this.updateState({messages:i,isTyping:!0,error:null}),await this._sendToNetwork(e.id,s)}async retryMessage(t){let s=this.state.messages.find(i=>i.id===t);if(!s||s.status!=="failed")return;let e=this.state.messages.map(i=>i.id===t?{...i,status:"sending"}:i);this.setCache("messages",e),this.updateState({messages:e,isTyping:!0,error:null}),await this._sendToNetwork(t,s.text)}async _sendToNetwork(t,s){try{let e=await fetch(`${this.apiUrl}/widget/v1/chat`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.state.sessionToken}`},body:JSON.stringify({message:s,conversationId:this.conversationId})}),i=await e.json();if(!e.ok)throw new Error(i.error||"Failed to send message");i.conversationId&&(this.conversationId=i.conversationId);let a={id:(Date.now()+1).toString(),text:i.message||i.reply||"Thanks for your message.",isUser:!1,createdAt:Date.now()},o=[...this.state.messages.map(p=>p.id===t?{...p,status:"delivered"}:p),a];this.setCache("messages",o),this.updateState({messages:o,isTyping:!1})}catch(e){let i=e instanceof Error?e.message:"Message failed",a=this.state.messages.map(o=>o.id===t?{...o,status:"failed"}:o);this.setCache("messages",a),this.updateState({messages:a,isTyping:!1,error:i})}}};var r=class extends l.LitElement{constructor(){super(...arguments);this.publishableKey="";this.gatewayUrl="https://www.happiest.team/api";this._messages=[];this._isTyping=!1;this._inputValue=""}connectedCallback(){if(super.connectedCallback(),!this.publishableKey){console.error("[Happiest] publishable-key attribute is missing!");return}this._client=new b({publishableKey:this.publishableKey,gatewayUrl:this.gatewayUrl}),this._client.initSession(),this._unsubscribe=this._client.subscribe(e=>{this._messages=[...e.messages],this._isTyping=e.isTyping,this.scrollToBottom()})}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribe&&this._unsubscribe()}async scrollToBottom(){await this.updateComplete;let e=this.shadowRoot?.querySelector(".messages");e&&(e.scrollTop=e.scrollHeight)}handleInput(e){this._inputValue=e.target.value}handleKeydown(e){e.key==="Enter"&&this.sendMessage()}sendMessage(){let e=this._inputValue.trim();e&&(this._client.sendMessage(e),this._inputValue="")}render(){return l.html`
+      <div class="header">
+        <div class="avatar">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2a2 2 0 0 1 2 2v2.5a2.5 2.5 0 0 1-5 0V4a2 2 0 0 1 2-2Z"/>
+            <path d="M6 13a6 6 0 0 0 12 0v-2a6 6 0 0 0-12 0v2Z"/>
+            <path d="M15 13a3 3 0 0 1-6 0"/>
+            <path d="M12 22v-3"/>
+            <path d="M8 22h8"/>
+          </svg>
+        </div>
+        <div class="header-text">
+          <h3>Happiest Support</h3>
+          <p>We typically reply in minutes</p>
+        </div>
+      </div>
+
+      <div class="messages">
+        ${this._messages.map(e=>l.html`
+          <div style="display: flex; flex-direction: column; align-items: ${e.isUser?"flex-end":"flex-start"}; width: 100%;">
+            <div class="message ${e.isUser?"user":"ai"} ${e.status==="failed"?"failed":""}">
+              ${e.text}
+            </div>
+            ${e.status==="failed"?l.html`
+              <button class="retry-btn" @click=${()=>this._client.retryMessage(e.id)}>
+                ⚠️ Failed to send. Tap to retry
+              </button>
+            `:""}
+          </div>
+        `)}
+        
+        ${this._isTyping?l.html`
+          <div class="message ai" style="background: transparent; padding: 0;">
+            <happiest-typing-indicator></happiest-typing-indicator>
+          </div>
+        `:""}
+      </div>
+
+      <div class="input-area">
+        <input 
+          type="text" 
+          placeholder="Type your message..." 
+          .value=${this._inputValue}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeydown}
+        >
+        <button 
+          @click=${this.sendMessage} 
+          ?disabled=${!this._inputValue.trim()}
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+          </svg>
+        </button>
+      </div>
+    `}};r.styles=l.css`
+    :host {
+      display: block;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+      background: white;
+      border-radius: 24px 24px 0 0;
+      box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    * { box-sizing: inherit; }
+
+    .header {
+      padding: 16px;
+      border-bottom: 1px solid #e2e8f0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      background: #3b82f6;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    }
+
+    .header-text h3 {
+      margin: 0;
+      font-size: 16px;
+      color: #0f172a;
+    }
+
+    .header-text p {
+      margin: 2px 0 0;
+      font-size: 12px;
+      color: #64748b;
+    }
+
+    .messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .message {
+      max-width: 80%;
+      padding: 12px 16px;
+      border-radius: 16px;
+      font-size: 14px;
+      line-height: 1.4;
+      word-break: break-word;
+    }
+
+    .message.user {
+      align-self: flex-end;
+      background: #3b82f6;
+      color: white;
+      border-bottom-right-radius: 4px;
+    }
+
+    .message.failed {
+      opacity: 0.9;
+      background: #ef4444;
+    }
+
+    .retry-btn {
+      align-self: flex-end;
+      background: transparent;
+      border: none;
+      color: #ef4444;
+      font-size: 11px;
+      font-weight: 500;
+      margin-top: 4px;
+      cursor: pointer;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      width: auto;
+      height: auto;
+    }
+    
+    .retry-btn:hover {
+      text-decoration: underline;
+      opacity: 1;
+    }
+
+    .message.ai {
+      align-self: flex-start;
+      background: #f1f5f9;
+      color: #0f172a;
+      border-bottom-left-radius: 4px;
+    }
+
+    .input-area {
+      padding: 16px;
+      border-top: 1px solid #e2e8f0;
+      display: flex;
+      gap: 8px;
+    }
+
+    input {
+      flex: 1;
+      padding: 12px 20px;
+      border-radius: 24px;
+      border: none;
+      background: #f1f5f9;
+      font-size: 14px;
+      outline: none;
+    }
+
+    input:focus {
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+    }
+
+    button {
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      border: none;
+      background: #3b82f6;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.2s;
+    }
+
+    button:hover {
+      opacity: 0.9;
+    }
+
+    button:disabled {
+      background: #94a3b8;
+      cursor: not-allowed;
+    }
+  `,n([(0,d.property)({type:String,attribute:"publishable-key"})],r.prototype,"publishableKey",2),n([(0,d.property)({type:String,attribute:"gateway-url"})],r.prototype,"gatewayUrl",2),n([(0,d.state)()],r.prototype,"_messages",2),n([(0,d.state)()],r.prototype,"_isTyping",2),n([(0,d.state)()],r.prototype,"_inputValue",2),r=n([(0,d.customElement)("happiest-chat-panel")],r);0&&(module.exports={ChatPanel,TypingIndicator});

package/dist/index.mjs

@@ -0,0 +1,247 @@
+var g=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var n=(t,s,e,i)=>{for(var a=i>1?void 0:i?f(s,e):s,r=t.length-1,l;r>=0;r--)(l=t[r])&&(a=(i?l(s,e,a):l(a))||a);return i&&a&&g(s,e,a),a};import{LitElement as b,html as y,css as m}from"lit";import{customElement as x}from"lit/decorators.js";var d=class extends b{render(){return y`
+      <div class="typing-indicator">
+        <div class="dot"></div>
+        <div class="dot"></div>
+        <div class="dot"></div>
+      </div>
+    `}};d.styles=m`
+    .typing-indicator {
+      display: inline-flex;
+      align-items: center;
+      padding: 12px 16px;
+      background-color: #f1f5f9;
+      border-radius: 16px;
+      gap: 4px;
+    }
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      background-color: #64748b;
+      border-radius: 50%;
+      animation: bounce 1.4s infinite ease-in-out both;
+    }
+
+    .dot:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+
+    .dot:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+
+    @keyframes bounce {
+      0%, 80%, 100% { 
+        transform: translateY(0);
+      } 
+      40% { 
+        transform: translateY(-6px);
+      }
+    }
+  `,d=n([x("happiest-typing-indicator")],d);import{LitElement as w,html as p,css as v}from"lit";import{customElement as k,property as u,state as h}from"lit/decorators.js";var c=class{config;state;listeners=new Set;apiUrl;conversationId;constructor(t){this.config=t,this.apiUrl=t.gatewayUrl||"https://www.happiest.team/api";let s=this.getCache("token"),e=this.getCache("messages")||[];this.state={status:s?"connected":"idle",isTyping:!1,messages:e,sessionToken:s,widgetConfig:{},error:null}}updateState(t){this.state={...this.state,...t},this.notifyListeners()}subscribe(t){return this.listeners.add(t),t(this.state),()=>this.listeners.delete(t)}notifyListeners(){this.listeners.forEach(t=>t(this.state))}getState(){return this.state}getCacheKey(t){return`happiest_${t}_${this.config.publishableKey}`}getCache(t){if(typeof window>"u")return null;try{let s=localStorage.getItem(this.getCacheKey(t));return s?JSON.parse(s):null}catch{return null}}setCache(t,s){if(!(typeof window>"u"))try{localStorage.setItem(this.getCacheKey(t),JSON.stringify(s))}catch(e){console.warn("[Happiest] Failed to persist state",e)}}clearSession(){typeof window<"u"&&(localStorage.removeItem(this.getCacheKey("token")),localStorage.removeItem(this.getCacheKey("messages"))),this.updateState({status:"idle",sessionToken:null,messages:[],error:null}),this.conversationId=void 0}async initSession(){if(!(this.state.status==="connected"&&this.state.sessionToken)){this.updateState({status:"connecting",error:null});try{let t=await fetch(`${this.apiUrl}/widget/v1/init`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({publishableKey:this.config.publishableKey})}),s=await t.json();if(!t.ok)throw new Error(s.error||"Failed to initialize session");let e=s.sessionToken||s.embedToken,i=s.widgetConfig||s.config||{};this.setCache("token",e),this.updateState({status:"connected",sessionToken:e,widgetConfig:i})}catch(t){let s=t instanceof Error?t.message:"Network error";this.updateState({status:"error",error:s})}}}async sendMessage(t){let s=t.trim();if(!s||!this.state.sessionToken)return;let e={id:Date.now().toString(),text:s,isUser:!0,createdAt:Date.now(),status:"sending"},i=[...this.state.messages,e];this.setCache("messages",i),this.updateState({messages:i,isTyping:!0,error:null}),await this._sendToNetwork(e.id,s)}async retryMessage(t){let s=this.state.messages.find(i=>i.id===t);if(!s||s.status!=="failed")return;let e=this.state.messages.map(i=>i.id===t?{...i,status:"sending"}:i);this.setCache("messages",e),this.updateState({messages:e,isTyping:!0,error:null}),await this._sendToNetwork(t,s.text)}async _sendToNetwork(t,s){try{let e=await fetch(`${this.apiUrl}/widget/v1/chat`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.state.sessionToken}`},body:JSON.stringify({message:s,conversationId:this.conversationId})}),i=await e.json();if(!e.ok)throw new Error(i.error||"Failed to send message");i.conversationId&&(this.conversationId=i.conversationId);let a={id:(Date.now()+1).toString(),text:i.message||i.reply||"Thanks for your message.",isUser:!1,createdAt:Date.now()},r=[...this.state.messages.map(l=>l.id===t?{...l,status:"delivered"}:l),a];this.setCache("messages",r),this.updateState({messages:r,isTyping:!1})}catch(e){let i=e instanceof Error?e.message:"Message failed",a=this.state.messages.map(r=>r.id===t?{...r,status:"failed"}:r);this.setCache("messages",a),this.updateState({messages:a,isTyping:!1,error:i})}}};var o=class extends w{constructor(){super(...arguments);this.publishableKey="";this.gatewayUrl="https://www.happiest.team/api";this._messages=[];this._isTyping=!1;this._inputValue=""}connectedCallback(){if(super.connectedCallback(),!this.publishableKey){console.error("[Happiest] publishable-key attribute is missing!");return}this._client=new c({publishableKey:this.publishableKey,gatewayUrl:this.gatewayUrl}),this._client.initSession(),this._unsubscribe=this._client.subscribe(e=>{this._messages=[...e.messages],this._isTyping=e.isTyping,this.scrollToBottom()})}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribe&&this._unsubscribe()}async scrollToBottom(){await this.updateComplete;let e=this.shadowRoot?.querySelector(".messages");e&&(e.scrollTop=e.scrollHeight)}handleInput(e){this._inputValue=e.target.value}handleKeydown(e){e.key==="Enter"&&this.sendMessage()}sendMessage(){let e=this._inputValue.trim();e&&(this._client.sendMessage(e),this._inputValue="")}render(){return p`
+      <div class="header">
+        <div class="avatar">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2a2 2 0 0 1 2 2v2.5a2.5 2.5 0 0 1-5 0V4a2 2 0 0 1 2-2Z"/>
+            <path d="M6 13a6 6 0 0 0 12 0v-2a6 6 0 0 0-12 0v2Z"/>
+            <path d="M15 13a3 3 0 0 1-6 0"/>
+            <path d="M12 22v-3"/>
+            <path d="M8 22h8"/>
+          </svg>
+        </div>
+        <div class="header-text">
+          <h3>Happiest Support</h3>
+          <p>We typically reply in minutes</p>
+        </div>
+      </div>
+
+      <div class="messages">
+        ${this._messages.map(e=>p`
+          <div style="display: flex; flex-direction: column; align-items: ${e.isUser?"flex-end":"flex-start"}; width: 100%;">
+            <div class="message ${e.isUser?"user":"ai"} ${e.status==="failed"?"failed":""}">
+              ${e.text}
+            </div>
+            ${e.status==="failed"?p`
+              <button class="retry-btn" @click=${()=>this._client.retryMessage(e.id)}>
+                ⚠️ Failed to send. Tap to retry
+              </button>
+            `:""}
+          </div>
+        `)}
+        
+        ${this._isTyping?p`
+          <div class="message ai" style="background: transparent; padding: 0;">
+            <happiest-typing-indicator></happiest-typing-indicator>
+          </div>
+        `:""}
+      </div>
+
+      <div class="input-area">
+        <input 
+          type="text" 
+          placeholder="Type your message..." 
+          .value=${this._inputValue}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeydown}
+        >
+        <button 
+          @click=${this.sendMessage} 
+          ?disabled=${!this._inputValue.trim()}
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+          </svg>
+        </button>
+      </div>
+    `}};o.styles=v`
+    :host {
+      display: block;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+      background: white;
+      border-radius: 24px 24px 0 0;
+      box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    * { box-sizing: inherit; }
+
+    .header {
+      padding: 16px;
+      border-bottom: 1px solid #e2e8f0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      background: #3b82f6;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    }
+
+    .header-text h3 {
+      margin: 0;
+      font-size: 16px;
+      color: #0f172a;
+    }
+
+    .header-text p {
+      margin: 2px 0 0;
+      font-size: 12px;
+      color: #64748b;
+    }
+
+    .messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .message {
+      max-width: 80%;
+      padding: 12px 16px;
+      border-radius: 16px;
+      font-size: 14px;
+      line-height: 1.4;
+      word-break: break-word;
+    }
+
+    .message.user {
+      align-self: flex-end;
+      background: #3b82f6;
+      color: white;
+      border-bottom-right-radius: 4px;
+    }
+
+    .message.failed {
+      opacity: 0.9;
+      background: #ef4444;
+    }
+
+    .retry-btn {
+      align-self: flex-end;
+      background: transparent;
+      border: none;
+      color: #ef4444;
+      font-size: 11px;
+      font-weight: 500;
+      margin-top: 4px;
+      cursor: pointer;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      width: auto;
+      height: auto;
+    }
+    
+    .retry-btn:hover {
+      text-decoration: underline;
+      opacity: 1;
+    }
+
+    .message.ai {
+      align-self: flex-start;
+      background: #f1f5f9;
+      color: #0f172a;
+      border-bottom-left-radius: 4px;
+    }
+
+    .input-area {
+      padding: 16px;
+      border-top: 1px solid #e2e8f0;
+      display: flex;
+      gap: 8px;
+    }
+
+    input {
+      flex: 1;
+      padding: 12px 20px;
+      border-radius: 24px;
+      border: none;
+      background: #f1f5f9;
+      font-size: 14px;
+      outline: none;
+    }
+
+    input:focus {
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+    }
+
+    button {
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      border: none;
+      background: #3b82f6;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.2s;
+    }
+
+    button:hover {
+      opacity: 0.9;
+    }
+
+    button:disabled {
+      background: #94a3b8;
+      cursor: not-allowed;
+    }
+  `,n([u({type:String,attribute:"publishable-key"})],o.prototype,"publishableKey",2),n([u({type:String,attribute:"gateway-url"})],o.prototype,"gatewayUrl",2),n([h()],o.prototype,"_messages",2),n([h()],o.prototype,"_isTyping",2),n([h()],o.prototype,"_inputValue",2),o=n([k("happiest-chat-panel")],o);export{o as ChatPanel,d as TypingIndicator};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@happiest-team/ai-chat-elements",
+  "version": "1.0.1",
+  "description": "Universal Web Components for Happiest Chat (Lit framework)",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@happiest-team/ai-chat-core": "*",
+    "lit": "^3.2.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Happiest",
+  "license": "MIT"
+}