@traiyani/chatsdk-react 1.0.0

package/dist/chatsdk.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&family=Lato:wght@400;700&display=swap";:root{--color-primary: #2196F3;--color-on-primary: #FFFFFF;--color-primary-container: #BBDEFB;--color-on-primary-container: #0D47A1;--color-primary-dark: #1976D2;--color-secondary: #FF4081;--color-on-secondary: #FFFFFF;--color-secondary-container: #FCE4EC;--color-on-secondary-container: #880E4F;--color-accent: #FF4081;--color-surface: #FFFFFF;--color-on-surface: #212121;--color-surface-variant: #F5F5F5;--color-on-surface-variant: #757575;--color-surface-dark: #121212;--color-on-surface-dark: #FFFFFF;--color-surface-variant-dark: #1E1E1E;--color-on-surface-variant-dark: #BDBDBD;--color-background: #FFFFFF;--color-on-background: #212121;--color-background-dark: #121212;--color-on-background-dark: #FFFFFF;--color-error: #F44336;--color-on-error: #FFFFFF;--color-error-container: #FFEBEE;--color-on-error-container: #B71C1C;--message-sent-background: #2196F3;--message-received-background: #F5F5F5;--avatar-background: #E0E0E0;--avatar-border: #BDBDBD;--input-background: #FAFAFA;--input-border: #E0E0E0;--unread-badge-background: #F44336;--white: #FFFFFF;--black: #000000;--transparent: transparent;--success: #4CAF50;--warning: #FF9800;--error: #F44336;--info: #2196F3;--figma-background: #F0F0F0;--figma-text-primary: #1E1E1E;--figma-text-product: #95265B;--figma-text-timestamp: #878787;--figma-separator: #C4C4C4;--figma-online-indicator: #4CAF50;--chat-background: #F4F4F4;--chat-product-text: #923060;--chat-message-received: #FFFFFF;--chat-message-sent: #C4C4C4;--chat-input-background: #FBFBFB;--chat-input-placeholder: #C4C4C4;--chat-timestamp: #878787;--chat-primary-text: #1E1E1E;--mzad-brand: #932c5d;--mzad-brand-dark: #7c1445;--mzad-brand-light: #a46281;--mzad-brand-bg: #f9ebf1;--mzad-text-primary: #280f1c;--mzad-text-secondary: #696366;--mzad-text-time: #a4a4a4;--mzad-text-message-time: #adb5bd;--mzad-text-received: #0f1828;--mzad-bg-item: #f5f5fa;--mzad-bg-input: #f0f0f0;--mzad-border: #e5e5ef;--mzad-border-light: #ededed;--mzad-reply-bg: #e7e7ed;--mzad-divider-text: #bdadb7;--mzad-placeholder: #999;--primary-color: var(--color-primary);--primary-dark-color: var(--color-primary-dark);--accent-color: var(--success);--background-color: var(--figma-background);--text-color: var(--figma-text-primary);--border-color: var(--figma-separator)}.figma-conversation-list{background-color:var(--figma-background);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.figma-conversation-item{background-color:var(--figma-background);border-bottom:none;padding:12px 16px;cursor:pointer;transition:background-color .2s ease}.figma-conversation-item:hover{background-color:#0000000d}.figma-conversation-item.selected{background-color:var(--figma-text-primary);color:#fff}.figma-conversation-avatar{width:50px;height:50px;border-radius:50%;margin-right:16px;position:relative;flex-shrink:0}.figma-online-indicator{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background-color:var(--figma-online-indicator);border:2px solid white;border-radius:50%}.figma-conversation-name{font-size:16px;font-weight:600;color:var(--figma-text-primary);margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.figma-product-context{font-size:14px;color:var(--figma-text-product);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.figma-last-message{font-size:14px;color:var(--figma-text-timestamp);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.figma-timestamp{font-size:12px;color:var(--figma-text-timestamp);text-align:right;margin-left:8px;flex-shrink:0}.figma-separator{height:1px;background-color:var(--figma-separator);opacity:.5;margin-left:82px;margin-right:16px}.figma-chat-window{background-color:var(--chat-background);display:flex;flex-direction:column;height:100%}.figma-chat-header{background-color:var(--chat-background);border-bottom:1px solid var(--figma-separator);padding:12px 16px;display:flex;align-items:center;gap:12px}.figma-chat-back-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%}.figma-chat-back-button:hover{background-color:#0000001a}.figma-chat-user-avatar{width:40px;height:40px;border-radius:50%}.figma-chat-user-name{font-size:18px;font-weight:600;color:var(--chat-primary-text);flex:1}.figma-chat-call-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%}.figma-chat-call-button:hover{background-color:#0000001a}.figma-product-context-card{background-color:#fff;margin:12px 16px;padding:12px;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;gap:12px}.figma-product-image{width:56px;height:56px;border-radius:8px;object-fit:cover}.figma-product-info{flex:1}.figma-product-name{font-size:16px;font-weight:600;color:var(--chat-product-text);margin:0 0 4px;line-height:1.3}.figma-product-price{font-size:14px;color:var(--chat-timestamp);margin:0}.figma-messages-container{flex:1;overflow-y:auto;padding:16px}.figma-message-bubble{max-width:264px;margin-bottom:8px;padding:15px;border-radius:8px;word-wrap:break-word}.figma-message-received{background-color:var(--chat-message-received);color:var(--chat-primary-text);margin-right:90px;box-shadow:0 2px 4px #0000001a}.figma-message-sent{background-color:var(--chat-message-sent);color:var(--chat-primary-text);margin-left:auto}.figma-message-timestamp{font-size:14px;color:var(--chat-timestamp);margin-top:5px}.figma-input-container{background-color:var(--chat-input-background);border-top:1px solid var(--figma-separator);padding:12px 16px;display:flex;align-items:center;gap:12px}.figma-input-field{flex:1;border:none;background:transparent;outline:none;font-size:16px;color:var(--chat-primary-text);padding:8px 0}.figma-input-field::placeholder{color:var(--chat-input-placeholder)}.figma-input-button{background:none;border:none;color:var(--chat-primary-text);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center}.figma-input-button:hover{background-color:#0000001a}[data-theme=dark]{--color-primary: #90CAF9;--color-on-primary: #0D47A1;--color-primary-container: #1565C0;--color-on-primary-container: #E3F2FD;--color-primary-dark: #42A5F5;--color-secondary: #F8BBD9;--color-on-secondary: #4A148C;--color-secondary-container: #7B1FA2;--color-on-secondary-container: #FCE4EC;--color-accent: #F8BBD9;--color-surface: var(--color-surface-dark);--color-on-surface: var(--color-on-surface-dark);--color-surface-variant: var(--color-surface-variant-dark);--color-on-surface-variant: var(--color-on-surface-variant-dark);--color-background: var(--color-background-dark);--color-on-background: var(--color-on-background-dark);--color-error: #CF6679;--color-on-error: #000000;--color-error-container: #B00020;--color-on-error-container: #FECDD3;--message-sent-background: var(--color-primary);--message-received-background: #2C2C2C;--avatar-background: #424242;--avatar-border: #616161;--input-background: #1E1E1E;--input-border: #424242;--unread-badge-background: var(--color-error);--figma-background: #1E1E1E;--figma-text-primary: #FFFFFF;--figma-text-product: #F8BBD9;--figma-text-timestamp: #BDBDBD;--figma-separator: #424242;--figma-online-indicator: #4CAF50;--chat-background: #121212;--chat-product-text: #F8BBD9;--chat-message-received: #2C2C2C;--chat-message-sent: #424242;--chat-input-background: #1E1E1E;--chat-input-placeholder: #757575;--chat-timestamp: #BDBDBD;--chat-primary-text: #FFFFFF;--background-color: var(--figma-background);--text-color: var(--figma-text-primary);--border-color: var(--figma-separator)}[data-theme=dark] .figma-conversation-item:hover{background-color:#ffffff14}[data-theme=dark] .figma-conversation-item.selected{background-color:var(--color-primary);color:var(--color-on-primary)}[data-theme=dark] .figma-chat-back-button:hover,[data-theme=dark] .figma-chat-call-button:hover,[data-theme=dark] .figma-input-button:hover{background-color:#ffffff1a}[data-theme=dark] .figma-product-context-card{background-color:var(--color-surface);box-shadow:0 2px 4px #0000004d}[data-theme=dark] .figma-message-received{box-shadow:0 2px 4px #0000004d}.text-primary{color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.border-primary{border-color:var(--color-primary)}.text-on-primary{color:var(--color-on-primary)}.bg-on-primary{background-color:var(--color-on-primary)}.text-primary-container{color:var(--color-primary-container)}.bg-primary-container{background-color:var(--color-primary-container)}.text-secondary{color:var(--color-secondary)}.bg-secondary{background-color:var(--color-secondary)}.border-secondary{border-color:var(--color-secondary)}.text-on-secondary{color:var(--color-on-secondary)}.bg-on-secondary{background-color:var(--color-on-secondary)}.text-surface{color:var(--color-surface)}.bg-surface{background-color:var(--color-surface)}.border-surface{border-color:var(--color-surface)}.text-on-surface{color:var(--color-on-surface)}.bg-on-surface{background-color:var(--color-on-surface)}.text-surface-variant{color:var(--color-surface-variant)}.bg-surface-variant{background-color:var(--color-surface-variant)}.text-background{color:var(--color-background)}.bg-background{background-color:var(--color-background)}.text-on-background{color:var(--color-on-background)}.bg-on-background{background-color:var(--color-on-background)}.text-error{color:var(--color-error)}.bg-error{background-color:var(--color-error)}.border-error{border-color:var(--color-error)}.text-on-error{color:var(--color-on-error)}.bg-on-error{background-color:var(--color-on-error)}.text-success{color:var(--success)}.bg-success{background-color:var(--success)}.border-success{border-color:var(--success)}.text-warning{color:var(--warning)}.bg-warning{background-color:var(--warning)}.border-warning{border-color:var(--warning)}.text-info{color:var(--info)}.bg-info{background-color:var(--info)}.border-info{border-color:var(--info)}.text-figma-primary{color:var(--figma-text-primary)}.bg-figma-background{background-color:var(--figma-background)}.text-figma-product{color:var(--figma-text-product)}.text-figma-timestamp{color:var(--figma-text-timestamp)}.border-figma-separator{border-color:var(--figma-separator)}.bg-chat-background{background-color:var(--chat-background)}.text-chat-primary{color:var(--chat-primary-text)}.text-chat-product{color:var(--chat-product-text)}.bg-message-sent{background-color:var(--chat-message-sent)}.bg-message-received{background-color:var(--chat-message-received)}.bg-chat-input{background-color:var(--chat-input-background)}.text-chat-placeholder{color:var(--chat-input-placeholder)}.bg-avatar{background-color:var(--avatar-background)}.border-avatar{border-color:var(--avatar-border)}.bg-unread-badge{background-color:var(--unread-badge-background)}.text-white{color:var(--white)}.bg-white{background-color:var(--white)}.text-black{color:var(--black)}.bg-black{background-color:var(--black)}.bg-transparent{background-color:var(--transparent)}.theme-light{color-scheme:light}.theme-dark{color-scheme:dark}.elevation-1{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.elevation-2{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.elevation-3{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.elevation-4{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.elevation-5{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038}[data-theme=dark] .elevation-1{box-shadow:0 1px 3px #0000004d,0 1px 2px #00000080}[data-theme=dark] .elevation-2{box-shadow:0 3px 6px #0006,0 3px 6px #00000080}[data-theme=dark] .elevation-3{box-shadow:0 10px 20px #00000080,0 6px 6px #00000080}[data-theme=dark] .elevation-4{box-shadow:0 14px 28px #0009,0 10px 10px #00000080}[data-theme=dark] .elevation-5{box-shadow:0 19px 38px #000000b3,0 15px 12px #00000080}.conversations-section{height:calc(100vh - 200px)}.conversations-layout{display:flex;height:100%;background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000000f}.conversations-sidebar{width:375px;min-width:375px;border-right:1px solid var(--mzad-border, #e5e5ef);background-color:#fff;display:flex;flex-direction:column}.conversations-main{flex:1;display:flex;flex-direction:column;background-color:#fff;min-width:0}.conversation-list{display:flex;flex-direction:column;height:100%;font-family:Mulish,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.conversation-list-header{padding:8px 32px;height:75px;display:flex;align-items:center;background-color:#fff;border-bottom:1px solid var(--mzad-border, #e5e5ef);box-sizing:border-box}.conversation-list-header h3{margin:0;font-family:Mulish,sans-serif;font-size:22px;font-weight:600;color:var(--mzad-text-primary, #280f1c)}.conversation-search{padding:16px 16px 0}.conversation-search-input{display:flex;align-items:center;gap:10px;background-color:var(--mzad-bg-input, #f0f0f0);border-radius:8px;padding:6px 15px;height:44px;box-sizing:border-box}.conversation-search-input .search-icon{width:24px;height:24px;flex-shrink:0;color:#999;display:flex;align-items:center;justify-content:center}.conversation-search-input .search-icon svg{width:18px;height:18px}.conversation-search-input input{border:none;background:transparent;outline:none;font-family:Mulish,sans-serif;font-size:15px;font-weight:400;color:var(--mzad-text-primary, #280f1c);width:100%;line-height:24px}.conversation-search-input input::placeholder{color:var(--mzad-placeholder, #999)}.conversations{overflow-y:auto;flex:1;padding:16px;display:flex;flex-direction:column;gap:8px}.conversation-item{display:flex;align-items:flex-start;padding:8px;border-radius:15px;cursor:pointer;transition:background-color .2s ease;background-color:var(--mzad-bg-item, #f5f5fa);gap:12px;border:none}.conversation-item:hover{background-color:#eeeef5}.conversation-item.selected{background-color:#e8dce3}.conversation-item.has-unread{background-color:var(--mzad-bg-item, #f5f5fa)}.conversation-item.has-unread.selected{background-color:#e8dce3}.conversation-avatar{position:relative;flex-shrink:0;width:56px;height:56px}.conversation-avatar img{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px}.conversation-avatar .product-image{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px;border:none}.avatar-placeholder{width:48px;height:48px;border-radius:16px;background-color:var(--mzad-brand-dark, #7c1445);display:flex;align-items:center;justify-content:center;font-family:Lato,sans-serif;font-weight:700;font-size:14px;color:#fff;margin:4px}.avatar-online-status{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background-color:#4caf50;border:2px solid #ffffff}.conversation-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-self:stretch}.conversation-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2px}.conversation-title-wrapper{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.conversation-participant-name{margin:0;font-family:Mulish,sans-serif;font-size:16px;font-weight:600;color:var(--mzad-text-primary, #280f1c);line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-product-name{margin:0;font-family:Mulish,sans-serif;font-size:12px;font-weight:400;color:var(--mzad-brand, #932c5d);line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-time{font-family:Mulish,sans-serif;font-size:10px;font-weight:400;color:var(--mzad-text-time, #a4a4a4);flex-shrink:0;line-height:16px;text-align:right}.conversation-details{display:flex;align-items:center;justify-content:space-between;gap:2px}.conversation-last-message{margin:0;font-family:Mulish,sans-serif;font-size:12px;font-weight:400;color:var(--mzad-text-secondary, #696366);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;line-height:normal}.unread-badge{background-color:var(--mzad-brand, #932c5d);color:#fff;font-family:Mulish,sans-serif;font-size:10px;font-weight:600;padding:2px 6px;border-radius:40px;min-width:16px;text-align:center;line-height:16px;flex-shrink:0}.empty-conversations{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;color:var(--mzad-text-secondary, #696366)}.empty-conversations p{margin:.25rem 0}.loading-spinner{text-align:center;padding:2rem;opacity:.7;font-size:1rem;color:var(--mzad-text-secondary, #696366)}.conversation-list.loading{display:flex;justify-content:center;align-items:center;height:100%}.chat-window{display:flex;flex-direction:column;height:100%;background-color:#fff;font-family:Mulish,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chat-window.empty{justify-content:center;align-items:center;text-align:center;background-color:#fafafa}.empty-state{text-align:center;padding:2rem;max-width:400px}.empty-state h3{margin-bottom:.5rem;font-size:1.25rem;color:var(--mzad-text-primary, #280f1c);font-weight:600}.empty-state p{opacity:.7;font-size:.95rem;color:var(--mzad-text-secondary, #696366)}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;height:75px;border-bottom:1px solid var(--mzad-border, #e5e5ef);background-color:#fff;box-sizing:border-box}.chat-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.chat-back-btn{display:none;background:none;border:none;cursor:pointer;padding:4px;color:var(--mzad-text-primary, #280f1c);flex-shrink:0}.chat-back-btn svg{width:24px;height:24px}.chat-header-avatar{width:56px;height:56px;flex-shrink:0;position:relative}.chat-header-avatar .avatar-placeholder{width:48px;height:48px;border-radius:16px;background-color:var(--mzad-brand-dark, #7c1445);display:flex;align-items:center;justify-content:center;font-family:Lato,sans-serif;font-weight:700;font-size:14px;color:#fff;margin:4px}.chat-header-avatar img{width:48px;height:48px;border-radius:16px;object-fit:cover;margin:4px}.chat-header-info{display:flex;flex-direction:column;gap:2px;min-width:0}.chat-participant-name{margin:0;font-family:Mulish,sans-serif;font-size:20px;font-weight:600;color:var(--mzad-text-primary, #280f1c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:normal}.chat-header-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}.chat-action-btn{background:none;border:none;cursor:pointer;padding:4px;color:#222;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.chat-action-btn:hover{background-color:#0000000d}.chat-action-btn svg{width:24px;height:24px}.chat-options-wrapper{position:relative}.chat-options-menu{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border-radius:8px;box-shadow:0 4px 16px #0000001f;min-width:180px;z-index:100;overflow:hidden}.chat-options-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;border:none;background:none;cursor:pointer;font-family:Mulish,sans-serif;font-size:14px;color:#333;transition:background-color .15s}.chat-options-menu button:hover{background-color:#f5f5f5}.chat-options-menu button.danger{color:#dc3545}.chat-options-menu button.danger:hover{background-color:#fff5f5}.chat-product-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;background-color:#fff;border-bottom:1px solid var(--mzad-border-light, #ededed)}.chat-product-bar img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0}.chat-product-bar-info{display:flex;flex-direction:column;gap:3px;font-family:Mulish,sans-serif;font-size:14px;min-width:0}.chat-product-bar-name{margin:0;color:var(--mzad-brand, #932c5d);font-weight:400;line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-product-bar-price{margin:0;color:#878787;font-weight:400;line-height:normal}.chat-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;background-color:#fff;position:relative;overscroll-behavior:contain}.loading-messages{text-align:center;padding:2rem;opacity:.7;color:var(--mzad-text-secondary, #696366)}.sticky-date-header{position:sticky;top:0;z-index:10;display:flex;justify-content:center;align-items:center;pointer-events:none;padding:4px 0 8px;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease}.sticky-date-header.sticky-date-visible{opacity:1;transform:translateY(0)}.sticky-date-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 12px;background-color:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:.5px solid rgba(237,237,237,.7);border-radius:15px;font-family:Mulish,sans-serif;font-size:12px;font-weight:600;color:var(--mzad-text-primary, #280f1c);box-shadow:0 1px 4px #0000000f;white-space:nowrap;line-height:normal}.date-divider{display:flex;align-items:center;gap:16px;padding:12px 0;width:100%}.date-divider-line{flex:1;height:1px;background-color:#e5e5ef}.date-divider-text{font-family:Mulish,sans-serif;font-size:13px;font-weight:400;color:var(--mzad-divider-text, #bdadb7);white-space:nowrap;line-height:20px;padding:0 4px}.date-divider-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;background-color:#d3d3d333;border:.5px solid rgba(237,237,237,.5);border-radius:15px;font-family:Mulish,sans-serif;font-size:12px;font-weight:600;color:var(--mzad-text-primary, #280f1c);margin:8px auto}.message{display:flex;flex-direction:column;max-width:70%;margin-bottom:4px;width:fit-content}.message.sent{align-self:flex-end;align-items:flex-end;margin-left:auto;margin-right:0}.message.received{align-self:flex-start;align-items:flex-start;margin-right:auto;margin-left:0}.message-content{padding:8px;word-wrap:break-word;font-family:Mulish,sans-serif;font-size:14px;font-weight:400;line-height:normal;position:relative}.message.sent .message-content{background-color:var(--mzad-brand-dark, #7c1445);color:#fff;border-radius:16px 16px 0}.message.received .message-content{background-color:var(--mzad-bg-item, #f5f5fa);color:var(--mzad-text-received, #0f1828);border-radius:16px 16px 16px 0}.message-footer{display:flex;align-items:center;gap:10px;margin-top:5px}.message.sent .message-footer{justify-content:flex-end}.message.received .message-footer{justify-content:flex-start}.message-time{font-family:Lato,sans-serif;font-size:10px;font-weight:400;line-height:16px}.message.sent .message-time{color:#fffc}.message.received .message-time{color:var(--mzad-text-message-time, #adb5bd)}.message-status,.message-status .read-status{display:flex;align-items:center}.message-status .read-status svg{width:20px;height:20px}.message.sent .message-status .read-check{color:#ffffffb3}.message.sent .message-status .read-check.is-read{color:#fff}.message-attachment{margin:0;border-radius:8px;overflow:hidden}.image-attachment{display:flex;flex-direction:column;gap:4px}.image-attachment img{max-width:250px;max-height:250px;border-radius:8px;cursor:pointer;transition:opacity .2s ease}.image-attachment img:hover:not(.uploading-image){opacity:.9}.image-attachment img.uploading-image{cursor:default;opacity:.7}.attachment-info{font-size:11px;margin-top:2px;opacity:.8}.message.sent .attachment-info{color:#fffc}.message.received .attachment-info{color:var(--mzad-text-secondary, #696366)}.file-attachment{display:flex;align-items:center;padding:8px;border-radius:4px;gap:12px;max-width:280px}.message.sent .file-attachment{background-color:var(--mzad-brand-light, #a46281)}.message.received .file-attachment{background-color:#e7e7ed}.file-info{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.file-icon{font-size:20px;flex-shrink:0}.file-details{flex:1;min-width:0}.file-name{font-weight:500;font-size:13px;word-break:break-word}.message.sent .file-name{color:#fff}.message.received .file-name{color:var(--mzad-text-primary, #280f1c)}.file-size{font-size:11px;opacity:.7}.message.sent .file-size{color:#ffffffb3}.message.received .file-size{color:var(--mzad-text-secondary, #696366)}.download-btn{padding:6px 10px;background-color:#fff3;color:#fff;text-decoration:none;border-radius:4px;font-size:11px;font-weight:500;transition:background-color .2s;white-space:nowrap}.message.received .download-btn{background-color:var(--mzad-brand, #932c5d);color:#fff}.download-btn:hover{opacity:.85}.upload-progress-bar{width:100%;background-color:#ffffff4d;border-radius:4px;height:3px;margin-bottom:8px;overflow:hidden}.upload-progress-fill{height:100%;background-color:#fff;transition:width .3s ease}.message.received .upload-progress-fill{background-color:var(--mzad-brand, #932c5d)}.call-log-bubble{display:flex;align-items:center;gap:12px;padding:8px}.call-log-bubble .call-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.call-log-bubble .call-info{display:flex;flex-direction:column;gap:5px}.call-log-bubble .call-label{font-family:Mulish,sans-serif;font-size:14px;font-weight:600;line-height:16px}.call-log-bubble .call-time{font-family:Lato,sans-serif;font-size:14px;font-weight:400;line-height:16px}.message.sent .call-label{color:#fff}.message.sent .call-time{color:#ffffffb3}.message.received .call-label{color:var(--mzad-brand, #932c5d)}.message.received .call-time{color:var(--mzad-text-message-time, #adb5bd)}.chat-input{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--mzad-border, #e5e5ef);background:#fff;align-items:center;min-height:83px;box-sizing:border-box}.attachment-btn{background:none;border:none;cursor:pointer;padding:4px;font-size:20px;color:#666;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:opacity .2s}.attachment-btn:hover:not(:disabled){opacity:.7}.attachment-btn:disabled{opacity:.4;cursor:not-allowed}.chat-input input{flex:1;padding:12px 15px;border:none;border-radius:8px;background:var(--mzad-bg-input, #f0f0f0);color:var(--mzad-text-primary, #280f1c);font-family:Mulish,sans-serif;font-size:16px;font-weight:400;line-height:24px;outline:none}.chat-input input::placeholder{color:var(--mzad-text-message-time, #adb5bd)}.chat-input input:focus{box-shadow:0 0 0 2px #932c5d1a}.chat-input button[type=submit],.chat-input .send-btn{padding:10px 29px;background-color:var(--mzad-brand, #932c5d);border:none;border-radius:10px;color:#fff;font-family:Mulish,sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .2s;white-space:nowrap;min-width:100px;height:51px;line-height:24px}.chat-input button[type=submit]:hover:not(:disabled),.chat-input .send-btn:hover:not(:disabled){opacity:.85}.chat-input button[type=submit]:disabled,.chat-input .send-btn:disabled{opacity:.5;cursor:not-allowed}.blocked-ui{padding:20px;background-color:#fafafa;text-align:center;border-top:1px solid var(--mzad-border, #e5e5ef)}.blocked-title{margin-bottom:12px;font-family:Mulish,sans-serif;font-size:16px;font-weight:500;color:var(--mzad-text-primary, #280f1c)}.blocked-message{margin-bottom:20px;font-family:Mulish,sans-serif;font-size:14px;color:var(--mzad-text-secondary, #696366);line-height:1.5}.blocked-by-other .blocked-message{margin-bottom:0}.unblock-btn{width:100%;padding:12px 24px;background-color:var(--mzad-brand, #932c5d);color:#fff;border:none;border-radius:8px;font-family:Mulish,sans-serif;font-size:16px;font-weight:500;cursor:pointer;transition:opacity .2s}.unblock-btn:hover{opacity:.85}.block-user-btn{font-family:Mulish,sans-serif;font-size:12px;padding:6px 12px;background-color:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;white-space:nowrap;transition:background-color .2s}.block-user-btn:hover{background-color:#c82333}.close-button{background:none;border:none;color:#666;font-size:1.5rem;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.close-button:hover{background-color:#0000000d}@media(max-width:768px){.conversations-layout{flex-direction:column;position:relative}.conversations-sidebar{width:100%;min-width:100%;border-right:none;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:transform .3s ease}.conversations-sidebar.hidden-mobile{transform:translate(-100%);pointer-events:none}.conversations-main{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.conversations-main.active-mobile{z-index:3}.chat-back-btn{display:flex!important}.message{max-width:85%}.chat-participant-name{font-size:18px}.chat-header-avatar{width:48px;height:48px}.chat-header-avatar .avatar-placeholder{width:40px;height:40px;margin:4px}}

package/dist/index.d.ts

@@ -0,0 +1,439 @@
+import { FC, ReactNode } from 'react';
+
+// ============================================================
+// Core Types
+// ============================================================
+
+export interface ChatSDKConfig {
+  apiBaseUrl: string;
+  wsUrl?: string;
+  appId: string;
+  apiKey?: string;
+  environment: 'development' | 'staging' | 'production';
+  enableLogging?: boolean;
+  autoConnect?: boolean;
+  timeout?: number;
+}
+
+export interface ChatSDKError {
+  code: string;
+  message: string;
+  details?: any;
+}
+
+export interface ChatSDKUser {
+  id: string;
+  externalUserId: string;
+  appId: string;
+  name: string;
+  username?: string;
+  displayName?: string;
+  email: string;
+  avatar?: string;
+  avatarUrl?: string;
+  status: 'online' | 'offline' | 'away' | 'busy';
+  isOnline: boolean;
+  lastSeen?: string;
+  isRegistered: boolean;
+  token?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ChatSDKMessage {
+  id: string;
+  conversationId: string;
+  senderId: string;
+  senderExternalUserId?: string;
+  senderName?: string;
+  senderEmail?: string;
+  senderAvatarUrl?: string;
+  content: string;
+  type: 'text' | 'image' | 'video' | 'audio' | 'file' | 'system' | 'product';
+  fileUrl?: string;
+  fileName?: string;
+  fileSize?: number;
+  mimeType?: string;
+  timestamp: string;
+  createdAt?: string;
+  updatedAt?: string;
+  status?: 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+  isRead?: boolean;
+  isDelivered?: boolean;
+  replyToMessageId?: string;
+  replyToMessage?: ChatSDKMessage;
+  isUploading?: boolean;
+  uploadProgress?: number;
+  localFileUri?: string;
+  metadata?: Record<string, any>;
+}
+
+export interface ChatSDKConversation {
+  id: string;
+  conversationId?: string;
+  type: 'direct' | 'group' | 'marketplace' | 'product';
+  name?: string;
+  description?: string;
+  avatar?: string;
+  participants: ChatSDKUser[];
+  lastMessage?: ChatSDKMessage;
+  unreadCount: number;
+  isBlocked: boolean;
+  isArchived?: boolean;
+  isMuted?: boolean;
+  productContext?: ProductContext;
+  isProductConversation?: boolean;
+  createdAt: string;
+  updatedAt: string;
+  metadata?: Record<string, any>;
+}
+
+export interface ProductContext {
+  productId: string;
+  productName: string;
+  productImage?: string;
+  price?: number;
+  currency?: string;
+  category?: string;
+  productMetadata?: Record<string, any>;
+}
+
+export interface Product {
+  id: string;
+  name: string;
+  price: number;
+  description: string;
+  image: string;
+  imageUrl?: string;
+  category: string;
+  sellerId: string;
+  ownerId: string;
+  ownerName: string;
+  ownerEmail: string;
+  appId: string;
+  createdAt: string;
+  isAvailable: boolean;
+  product_metadata?: Record<string, any>;
+}
+
+export interface ChatState {
+  isLoggedIn: boolean;
+  currentUser: ChatSDKUser | null;
+  conversations: ChatSDKConversation[];
+  currentConversation: ChatSDKConversation | null;
+  messages: ChatSDKMessage[];
+  loading: boolean;
+  error: string | null;
+}
+
+export type User = ChatSDKUser;
+export type Message = ChatSDKMessage;
+export type Conversation = ChatSDKConversation;
+
+// ============================================================
+// Manager Options
+// ============================================================
+
+export interface UserSearchOptions {
+  query?: string;
+  limit?: number;
+  offset?: number;
+  role?: string;
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+export interface UserUpdateData {
+  name?: string;
+  avatar?: string;
+  status?: 'online' | 'offline' | 'away' | 'busy';
+  metadata?: Record<string, any>;
+}
+
+export interface SendMessageOptions {
+  conversationId: string;
+  content: string;
+  type?: 'text' | 'image' | 'video' | 'audio' | 'file' | 'location';
+  metadata?: Record<string, any>;
+  replyToMessageId?: string;
+}
+
+export interface MessageListOptions {
+  conversationId: string;
+  limit?: number;
+  offset?: number;
+  before?: string;
+  after?: string;
+}
+
+export interface MessageSearchOptions {
+  conversationId?: string;
+  query: string;
+  limit?: number;
+  offset?: number;
+  messageType?: 'text' | 'image' | 'video' | 'audio' | 'file' | 'location';
+}
+
+export interface MediaUploadOptions {
+  file: File;
+  type: 'image' | 'video' | 'audio' | 'document';
+  conversationId?: string;
+  caption?: string;
+  metadata?: Record<string, any>;
+  onProgress?: (progress: number) => void;
+}
+
+export interface MediaUploadResult {
+  fileUrl: string;
+  fileName: string;
+  fileSize: number;
+  mimeType: string;
+  thumbnailUrl?: string;
+}
+
+export interface MediaDownloadOptions {
+  mediaId: string;
+  quality?: 'original' | 'high' | 'medium' | 'low';
+}
+
+export type EventCallback = (data: any) => void;
+
+export interface ChatSDKEvent {
+  type: string;
+  data: any;
+  timestamp: number;
+}
+
+export interface CreateConversationOptions {
+  type: 'direct' | 'group';
+  participantIds: string[];
+  name?: string;
+  description?: string;
+  avatar?: string;
+  metadata?: Record<string, any>;
+  productContext?: ProductContext;
+}
+
+export interface ConversationListOptions {
+  limit?: number;
+  offset?: number;
+  type?: 'direct' | 'group';
+  unreadOnly?: boolean;
+}
+
+// ============================================================
+// Manager Classes
+// ============================================================
+
+export class AuthManager {
+  init(config: ChatSDKConfig): Promise<void>;
+  authenticate(externalUserId: string, appId: string, name: string, email: string): Promise<ChatSDKUser>;
+  login(email: string, password: string): Promise<ChatSDKUser>;
+  register(email: string, password: string, name: string, metadata?: any): Promise<ChatSDKUser>;
+  logout(): Promise<void>;
+  getCurrentUser(): Promise<ChatSDKUser>;
+  hasValidToken(): boolean;
+}
+
+export class UserManager {
+  init(config: ChatSDKConfig): Promise<void>;
+  getUser(userId: string): Promise<ChatSDKUser>;
+  searchUsers(options?: UserSearchOptions): Promise<ChatSDKUser[]>;
+  getAllUsers(limit?: number, offset?: number): Promise<ChatSDKUser[]>;
+  updateCurrentUser(updateData: UserUpdateData): Promise<ChatSDKUser>;
+  updateStatus(status: 'online' | 'offline' | 'away' | 'busy'): Promise<void>;
+  blockUser(userId: string): Promise<void>;
+  unblockUser(userId: string): Promise<void>;
+  getBlockedUsers(): Promise<ChatSDKUser[]>;
+}
+
+export class ConversationManager {
+  init(config: ChatSDKConfig): Promise<void>;
+  startChat(externalGroupId: string, userId: string): Promise<ChatSDKConversation>;
+  startChatWithProduct(
+    externalGroupId: string,
+    userId: string,
+    productContext: Omit<ProductContext, 'productMetadata'> & { productMetadata?: Record<string, any> },
+    chatMetadata?: Record<string, any>
+  ): Promise<ChatSDKConversation>;
+  createGroup(options: CreateConversationOptions): Promise<ChatSDKConversation>;
+  getConversations(options?: ConversationListOptions): Promise<ChatSDKConversation[]>;
+  getConversation(conversationId: string): Promise<ChatSDKConversation>;
+  updateConversation(
+    conversationId: string,
+    updateData: Partial<Pick<ChatSDKConversation, 'name' | 'description' | 'avatar' | 'metadata'>>
+  ): Promise<ChatSDKConversation>;
+  addParticipants(conversationId: string, userIds: string[]): Promise<ChatSDKConversation>;
+  removeParticipants(conversationId: string, userIds: string[]): Promise<ChatSDKConversation>;
+  leaveConversation(conversationId: string): Promise<void>;
+  deleteConversation(conversationId: string): Promise<void>;
+  markAsRead(conversationId: string): Promise<void>;
+  blockUserInChat(chatId: string, userId: string): Promise<void>;
+  unblockUserInChat(chatId: string, userId: string): Promise<void>;
+}
+
+export class MessageManager {
+  init(config: ChatSDKConfig): Promise<void>;
+  sendMessage(conversationId: string, content: string, metadata?: Record<string, any>): Promise<ChatSDKMessage>;
+  sendMessageWithOptions(options: SendMessageOptions): Promise<ChatSDKMessage>;
+  getMessages(options: MessageListOptions): Promise<ChatSDKMessage[]>;
+  getMessage(messageId: string): Promise<ChatSDKMessage>;
+  updateMessage(messageId: string, content: string, metadata?: Record<string, any>): Promise<ChatSDKMessage>;
+  deleteMessage(messageId: string, deleteForEveryone?: boolean): Promise<void>;
+  markAsRead(conversationId: string, messageIds?: string[]): Promise<void>;
+  searchMessages(options: MessageSearchOptions): Promise<ChatSDKMessage[]>;
+  sendTypingIndicator(conversationId: string, isTyping: boolean): Promise<void>;
+}
+
+export class MediaManager {
+  init(config: ChatSDKConfig): Promise<void>;
+  uploadMedia(options: MediaUploadOptions): Promise<MediaUploadResult>;
+  sendImage(conversationId: string, file: File, caption?: string): Promise<MediaUploadResult>;
+  sendVideo(conversationId: string, file: File, caption?: string): Promise<MediaUploadResult>;
+  sendAudio(conversationId: string, file: File, caption?: string): Promise<MediaUploadResult>;
+  sendDocument(conversationId: string, file: File, caption?: string): Promise<MediaUploadResult>;
+  formatFileSize(bytes: number): string;
+}
+
+export class EventManager {
+  init(config: ChatSDKConfig): Promise<void>;
+  connect(): Promise<void>;
+  disconnect(): Promise<void>;
+  on(event: string, callback: EventCallback): void;
+  off(event: string, callback?: EventCallback): void;
+  emit(event: string, data: any): void;
+}
+
+export class SocketManager {
+  init(config: ChatSDKConfig): Promise<void>;
+  connect(userId: string): Promise<void>;
+  disconnect(): void;
+  joinConversation(conversationId: string): void;
+  leaveConversation(conversationId: string): void;
+  sendTypingIndicator(conversationId: string, isTyping: boolean): void;
+  isConnected(): boolean;
+  emit(event: string, data: any): void;
+  on(event: string, callback: (data: any) => void): void;
+  off(event: string, callback?: (data: any) => void): void;
+}
+
+// ============================================================
+// ParseUtils
+// ============================================================
+
+export class ParseUtils {
+  static parseUser(data: any): ChatSDKUser;
+  static parseMessage(data: any): ChatSDKMessage;
+  static parseConversation(data: any): ChatSDKConversation;
+  static parseProductContext(data: any): ProductContext | undefined;
+  static parseMessages(messages: any[]): ChatSDKMessage[];
+  static parseConversations(conversations: any[]): ChatSDKConversation[];
+  static parseUsers(users: any[]): ChatSDKUser[];
+}
+
+// ============================================================
+// ChatSDK Main Class
+// ============================================================
+
+export class ChatSDK {
+  currentUser: ChatSDKUser | null;
+  auth: AuthManager;
+  chatUsers: any;
+  users: UserManager;
+  conversations: ConversationManager;
+  messages: MessageManager;
+  media: MediaManager;
+  events: EventManager;
+  socket: SocketManager;
+
+  static getInstance(): ChatSDK;
+  init(config: ChatSDKConfig): Promise<void>;
+  connect(userId?: string): Promise<ChatSDKUser>;
+  disconnect(): Promise<void>;
+  login(email: string, password: string): Promise<ChatSDKUser>;
+  register(email: string, password: string, name: string, metadata?: Record<string, any>): Promise<ChatSDKUser>;
+  logout(): Promise<void>;
+  getCurrentUser(): ChatSDKUser | null;
+  isSDKInitialized(): boolean;
+  getConfig(): ChatSDKConfig | null;
+  setLogging(enabled: boolean): void;
+  getVersion(): string;
+}
+
+// ============================================================
+// React Components
+// ============================================================
+
+export interface ChatWindowProps {
+  conversation: ChatSDKConversation | null;
+  currentUser: ChatSDKUser;
+  onClose?: () => void;
+  onBack?: () => void;
+}
+
+export interface ConversationListProps {
+  currentUser: ChatSDKUser;
+  onSelectConversation: (conversation: ChatSDKConversation) => void;
+  selectedConversationId?: string;
+}
+
+export interface ThemeToggleProps {
+  className?: string;
+  showLabel?: boolean;
+}
+
+export declare const ChatWindow: FC<ChatWindowProps>;
+export declare const ConversationList: FC<ConversationListProps>;
+export declare const ThemeToggle: FC<ThemeToggleProps>;
+
+// ============================================================
+// React Hooks - Theme
+// ============================================================
+
+export type Theme = 'light' | 'dark' | 'auto';
+
+export declare function useTheme(): {
+  theme: Theme;
+  actualTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+};
+
+export declare function useThemeContext(): {
+  theme: Theme;
+  actualTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+};
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export declare const ThemeProvider: FC<ThemeProviderProps>;
+
+// ============================================================
+// Theme System
+// ============================================================
+
+export declare function initializeTheme(): void;
+export declare const themeConfig: Record<string, Record<string, string>>;
+export declare const darkThemeConfig: Record<string, Record<string, string>>;
+
+// ============================================================
+// i18n Utilities
+// ============================================================
+
+export declare function changeLanguage(locale: string): void;
+export declare function getCurrentLanguage(): string;
+export declare function isRTL(): boolean;
+export declare function t(key: string, replacements?: Record<string, string | number>): string;
+
+// ============================================================
+// Helper Utilities
+// ============================================================
+
+export declare const ChatSDKHelpers: {
+  init(config: ChatSDKConfig): Promise<void>;
+  formatFileSize(bytes: number): string;
+  formatTimeAgo(timestamp: string | Date): string;
+};

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@traiyani/chatsdk-react",
+  "version": "1.0.0",
+  "description": "ChatSDK React SDK - Pre-built, plug-and-play real-time chat components for React",
+  "main": "dist/chatsdk-react.cjs",
+  "module": "dist/chatsdk-react.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/chatsdk-react.mjs",
+      "require": "./dist/chatsdk-react.cjs"
+    },
+    "./dist/chatsdk.css": "./dist/chatsdk.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "chat",
+    "messaging",
+    "react",
+    "real-time",
+    "websocket",
+    "socket.io",
+    "marketplace",
+    "chatsdk",
+    "instant-messaging",
+    "product-chat"
+  ],
+  "author": "ChatSDK Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "axios": ">=0.21.0",
+    "socket.io-client": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "axios": {
+      "optional": false
+    },
+    "socket.io-client": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "typescript": "~5.7.0",
+    "vite": "^6.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-hot-toast": "^2.5.2",
+    "axios": "^1.10.0",
+    "socket.io-client": "^4.8.1"
+  },
+  "scripts": {
+    "build": "vite build && node scripts/post-build.js",
+    "pack": "npm run build && npm pack"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}