@bytexbyte/nxtlinq-ai-agent-sdk 1.5.9 → 1.6.1

package/dist/components/ui/ChatBotUI.js

@@ -1,53 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
+import { css } from '@emotion/react';
 import { useChatBot } from '../context/ChatBotContext';
 import { PermissionForm } from './PermissionForm';
 import { MessageList } from './MessageList';
 import { MessageInput } from './MessageInput';
 import { PresetMessages } from './PresetMessages';
 import { ModelSelector } from './ModelSelector';
+import { sdkContainer, floatingButton, chatWindow, chatHeader, headerTitle, headerButton, closeButton, modalOverlay, idvBanner, idvBannerTitle, idvBannerText, idvVerifyButton, idvDismissButton, loadingSpinner, successToast, errorToast, warningToast, infoToast, toastCloseButton } from './styles/isolatedStyles';
 // Toast Notification Component
 const ToastNotification = ({ type, message, onClose, isChatOpen = false }) => {
-    const getStyles = () => {
-        const baseStyles = {
-            position: 'fixed',
-            padding: '12px 24px',
-            borderRadius: 8,
-            zIndex: 2000,
-            fontWeight: 600,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-            transition: 'all 0.3s ease',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-            minWidth: '300px',
-            maxWidth: '500px'
-        };
-        // Dynamically adjust position based on chat window state
-        if (isChatOpen) {
-            // When chat window is open, show notification above the chat window
-            Object.assign(baseStyles, {
-                top: 20,
-                right: 20, // Align with the right edge of chat window
-                maxWidth: '480px', // Slightly smaller than chat window width
-            });
-        }
-        else {
-            // When chat window is closed, show notification in bottom right corner
-            Object.assign(baseStyles, {
-                bottom: 20,
-                right: 20,
-            });
-        }
+    const getToastStyles = () => {
+        const baseStyles = css `
+      ${isChatOpen ? css `
+        top: 20px !important;
+        right: 20px !important;
+        max-width: 480px !important;
+      ` : css `
+        bottom: 20px !important;
+        right: 20px !important;
+      `}
+    `;
         switch (type) {
             case 'success':
-                return { ...baseStyles, background: '#4caf50', color: 'white' };
+                return css `${successToast} ${baseStyles}`;
             case 'error':
-                return { ...baseStyles, background: '#f44336', color: 'white' };
+                return css `${errorToast} ${baseStyles}`;
             case 'warning':
-                return { ...baseStyles, background: '#ff9800', color: 'white' };
+                return css `${warningToast} ${baseStyles}`;
             default:
-                return { ...baseStyles, background: '#2196f3', color: 'white' };
+                return css `${infoToast} ${baseStyles}`;
         }
     };
     const getIcon = () => {
@@ -62,19 +45,7 @@ const ToastNotification = ({ type, message, onClose, isChatOpen = false }) => {
                 return 'ℹ️';
         }
     };
-    return (_jsxs("div", { style: getStyles(), children: [_jsx("span", { style: { fontSize: '18px' }, children: getIcon() }), _jsx("span", { style: { flex: 1 }, children: message }), _jsx("button", { onClick: onClose, style: {
-                    background: 'none',
-                    border: 'none',
-                    color: 'white',
-                    fontSize: '18px',
-                    cursor: 'pointer',
-                    padding: '4px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    borderRadius: '4px',
-                    transition: 'background-color 0.2s'
-                }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseOut: (e) => e.currentTarget.style.backgroundColor = 'transparent', children: "\u00D7" })] }));
+    return (_jsxs("div", { css: getToastStyles(), children: [_jsx("span", { css: css `font-size: 18px !important;`, children: getIcon() }), _jsx("span", { css: css `flex: 1 !important;`, children: message }), _jsx("button", { onClick: onClose, css: toastCloseButton, children: "\u00D7" })] }));
 };
 export const ChatBotUI = () => {
     const { isOpen, setIsOpen, showPermissionForm, setShowPermissionForm, notification, setNotification, isAITLoading, hitAddress, walletInfo, onVerifyWallet, props } = useChatBot();
@@ -89,16 +60,13 @@ export const ChatBotUI = () => {
     const isWalletVerifiedWithBerifyme = walletInfo?.id && walletInfo?.method === 'berifyme';
     // Check if IDV suggestion should be shown
     React.useEffect(() => {
-        // Add delay to prevent flashing when wallet info is still loading
         // Only show suggestion when verification is not required and wallet is not verified with berifyme
         const shouldShowBanner = hitAddress &&
             !props.requireWalletIDVVerification &&
             !hasBerifymeToken &&
             !isWalletVerifiedWithBerifyme;
         if (shouldShowBanner) {
-            // Wait 1 second to allow wallet info to fully load
             const timer = setTimeout(() => {
-                // Re-check conditions after delay
                 const shouldShowBannerAfterDelay = hitAddress &&
                     !props.requireWalletIDVVerification &&
                     !hasBerifymeToken &&
@@ -110,10 +78,8 @@ export const ChatBotUI = () => {
                         const now = Date.now();
                         const timeLeft = dismissTime - now;
                         if (timeLeft > 0) {
-                            // Still within 24 hours, don't show
                             setShowIDVSuggestion(false);
                             setDismissUntil(dismissTime);
-                            // Start countdown timer
                             const countdownTimer = setInterval(() => {
                                 const remaining = dismissTime - Date.now();
                                 if (remaining > 0) {
@@ -122,7 +88,6 @@ export const ChatBotUI = () => {
                                     setTimeRemaining(`${hours}h ${minutes}m`);
                                 }
                                 else {
-                                    // 24 hours passed, show again
                                     setShowIDVSuggestion(true);
                                     setDismissUntil(null);
                                     setTimeRemaining('');
@@ -133,7 +98,6 @@ export const ChatBotUI = () => {
                             return () => clearInterval(countdownTimer);
                         }
                         else {
-                            // 24 hours passed, show again
                             localStorage.removeItem('idv-suggestion-dismissed');
                             setShowIDVSuggestion(true);
                             setDismissUntil(null);
@@ -141,14 +105,12 @@ export const ChatBotUI = () => {
                         }
                     }
                     else {
-                        // Never dismissed, show
                         setShowIDVSuggestion(true);
                         setDismissUntil(null);
                         setTimeRemaining('');
                     }
                 }
                 else {
-                    console.log('❌ After delay: conditions no longer met, hiding suggestion');
                     setShowIDVSuggestion(false);
                     setDismissUntil(null);
                     setTimeRemaining('');
@@ -215,177 +177,51 @@ export const ChatBotUI = () => {
     };
     // Show floating button when chat is closed
     if (!isOpen) {
-        return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleOpen, style: {
-                        position: 'fixed',
-                        bottom: '20px',
-                        right: '20px',
-                        backgroundColor: '#007bff',
-                        color: 'white',
-                        border: 'none',
-                        padding: '10px 20px',
-                        borderRadius: '20px',
-                        cursor: 'pointer',
-                        boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
-                        transition: 'all 0.3s ease',
-                        zIndex: 1000,
-                        fontSize: '14px',
-                        fontWeight: '500'
-                    }, onMouseOver: (e) => {
-                        e.currentTarget.style.backgroundColor = '#0056b3';
-                        e.currentTarget.style.transform = 'translateY(-2px)';
-                    }, onMouseOut: (e) => {
-                        e.currentTarget.style.backgroundColor = '#007bff';
-                        e.currentTarget.style.transform = 'translateY(0)';
-                    }, title: "Open AI Agent Chat", children: "AI Agent" }), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
+        return (_jsxs("div", { css: sdkContainer, children: [_jsx("button", { onClick: handleOpen, css: floatingButton, title: "Open AI Agent Chat", children: "AI Agent" }), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                    position: 'fixed',
-                    bottom: '20px',
-                    right: '20px',
-                    width: '500px',
-                    height: '600px',
-                    backgroundColor: 'white',
-                    borderRadius: '10px',
-                    boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    zIndex: 1001,
-                    overflow: 'hidden'
-                }, children: [_jsxs("div", { style: {
-                            padding: '15px',
-                            backgroundColor: '#007bff',
-                            color: 'white',
-                            borderRadius: '10px 10px 0 0',
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center'
-                        }, children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '10px'
-                                }, children: [_jsx("h3", { style: {
-                                            margin: 0,
-                                            fontSize: '16px',
-                                            fontWeight: '600'
-                                        }, children: "AI Agent" }), _jsx("div", { style: { position: 'relative' }, children: _jsx(ModelSelector, {}) }), isAITLoading && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '5px',
-                                            fontSize: '12px',
-                                            opacity: '0.8'
-                                        }, children: [_jsx("div", { style: {
-                                                    width: '12px',
-                                                    height: '12px',
-                                                    border: '2px solid rgba(255, 255, 255, 0.3)',
-                                                    borderTop: '2px solid white',
-                                                    borderRadius: '50%',
-                                                    animation: 'spin 1s linear infinite'
-                                                } }), "Loading..."] }))] }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '10px'
-                                }, children: [_jsx("button", { onClick: handleSettingsClick, style: {
-                                            background: 'none',
-                                            border: 'none',
-                                            color: 'white',
-                                            fontSize: '16px',
-                                            cursor: 'pointer',
-                                            padding: '4px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            borderRadius: '4px',
-                                            transition: 'background-color 0.2s'
-                                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseOut: (e) => e.currentTarget.style.backgroundColor = 'transparent', title: "AIT Settings", children: "\u2699\uFE0F" }), _jsx("button", { onClick: handleClose, style: {
-                                            background: 'none',
-                                            border: 'none',
-                                            color: 'white',
-                                            fontSize: '24px',
-                                            cursor: 'pointer',
-                                            padding: '0',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center'
-                                        }, children: "\u00D7" })] })] }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, style: {
-                            backgroundColor: '#fff3cd',
-                            border: '1px solid #ffeaa7',
-                            borderLeft: '4px solid #f39c12',
-                            margin: '16px',
-                            padding: '16px',
-                            borderRadius: '8px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '12px'
-                        }, children: [_jsx("div", { style: {
-                                    fontSize: '20px',
-                                    color: '#f39c12'
-                                }, children: "\uD83D\uDCA1" }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("h5", { style: {
-                                            margin: '0 0 8px 0',
-                                            fontSize: '14px',
-                                            fontWeight: '600',
-                                            color: '#856404'
-                                        }, children: "Recommended: Verify Your Wallet" }), _jsx("p", { style: {
-                                            margin: '0 0 12px 0',
-                                            fontSize: '13px',
-                                            color: '#856404',
-                                            lineHeight: '1.4'
-                                        }, children: "While not required, verifying your wallet with Berify.me provides additional security and trust for your AI agent interactions." }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), style: {
-                                            padding: '8px 16px',
-                                            backgroundColor: '#f39c12',
-                                            color: 'white',
-                                            border: 'none',
-                                            borderRadius: '6px',
-                                            cursor: 'pointer',
-                                            fontSize: '13px',
-                                            fontWeight: '500',
-                                            transition: 'background-color 0.2s'
-                                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = '#e67e22', onMouseOut: (e) => e.currentTarget.style.backgroundColor = '#f39c12', children: "Verify Wallet" })] }), _jsx("button", { onClick: handleDismissIDV, style: {
-                                    background: 'none',
-                                    border: 'none',
-                                    color: '#856404',
-                                    fontSize: '18px',
-                                    cursor: 'pointer',
-                                    padding: '4px',
-                                    borderRadius: '4px',
-                                    transition: 'background-color 0.2s'
-                                }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = 'rgba(133, 100, 4, 0.1)', onMouseOut: (e) => e.currentTarget.style.backgroundColor = 'transparent', title: `Hide for ${Math.floor((props.idvBannerDismissSeconds || 86400) / 3600)} hours`, children: "\u00D7" })] })), !showIDVSuggestion && dismissUntil && timeRemaining && (_jsxs("div", { style: {
-                            backgroundColor: '#f8f9fa',
-                            border: '1px solid #e9ecef',
-                            margin: '16px',
-                            padding: '12px',
-                            borderRadius: '8px',
-                            textAlign: 'center',
-                            fontSize: '13px',
-                            color: '#6c757d'
-                        }, children: [_jsxs("span", { children: ["\uD83D\uDCA1 IDV suggestion hidden. Will show again in ", timeRemaining] }), _jsx("button", { onClick: () => {
+    return (_jsxs("div", { css: sdkContainer, children: [_jsxs("div", { css: chatWindow, children: [_jsxs("div", { css: chatHeader, children: [_jsxs("div", { css: css `
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+          `, children: [_jsx("h3", { css: headerTitle, children: "AI Agent" }), _jsx("div", { css: css `position: relative !important;`, children: _jsx(ModelSelector, {}) }), isAITLoading && (_jsxs("div", { css: css `
+                display: flex !important;
+                align-items: center !important;
+                gap: 5px !important;
+                font-size: 12px !important;
+                opacity: 0.8 !important;
+              `, children: [_jsx("div", { css: loadingSpinner }), "Loading..."] }))] }), _jsxs("div", { css: css `
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+          `, children: [_jsx("button", { onClick: handleSettingsClick, css: headerButton, title: "AIT Settings", children: "\u2699\uFE0F" }), _jsx("button", { onClick: handleClose, css: closeButton, children: "\u00D7" })] })] }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, css: idvBanner, children: [_jsx("div", { css: css `
+              font-size: 20px !important;
+              color: #f39c12 !important;
+            `, children: "\uD83D\uDCA1" }), _jsxs("div", { css: css `flex: 1 !important;`, children: [_jsx("h5", { css: idvBannerTitle, children: "Recommended: Verify Your Wallet" }), _jsx("p", { css: idvBannerText, children: "While not required, verifying your wallet with Berify.me provides additional security and trust for your AI agent interactions." }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), css: idvVerifyButton, children: "Verify Wallet" })] }), _jsx("button", { onClick: handleDismissIDV, css: idvDismissButton, title: `Hide for ${Math.floor((props.idvBannerDismissSeconds || 86400) / 3600)} hours`, children: "\u00D7" })] })), !showIDVSuggestion && dismissUntil && timeRemaining && (_jsxs("div", { css: css `
+            background-color: #f8f9fa !important;
+            border: 1px solid #e9ecef !important;
+            margin: 16px !important;
+            padding: 12px !important;
+            border-radius: 8px !important;
+            text-align: center !important;
+            font-size: 13px !important;
+            color: #6c757d !important;
+          `, children: [_jsxs("span", { children: ["\uD83D\uDCA1 IDV suggestion hidden. Will show again in ", timeRemaining] }), _jsx("button", { onClick: () => {
                                     localStorage.removeItem('idv-suggestion-dismissed');
                                     setShowIDVSuggestion(true);
                                     setDismissUntil(null);
                                     setTimeRemaining('');
-                                }, style: {
-                                    background: 'none',
-                                    border: 'none',
-                                    color: '#007bff',
-                                    fontSize: '12px',
-                                    cursor: 'pointer',
-                                    marginLeft: '8px',
-                                    textDecoration: 'underline'
-                                }, title: "Show now", children: "Show now" })] })), _jsx(MessageList, {}), _jsx(PresetMessages, {}), _jsx(MessageInput, {})] }), showPermissionForm && (_jsx("div", { style: {
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    zIndex: 1002,
-                    padding: '20px'
-                }, onClick: (e) => {
+                                }, css: css `
+                background: none !important;
+                border: none !important;
+                color: #007bff !important;
+                font-size: 12px !important;
+                cursor: pointer !important;
+                margin-left: 8px !important;
+                text-decoration: underline !important;
+              `, title: "Show now", children: "Show now" })] })), _jsx(MessageList, {}), _jsx(PresetMessages, {}), _jsx(MessageInput, {})] }), showPermissionForm && (_jsx("div", { css: modalOverlay, onClick: (e) => {
                     // Close modal when clicking on background
                     if (e.target === e.currentTarget) {
                         setShowPermissionForm(false);
                     }
-                }, children: _jsx(PermissionForm, { onClose: () => setShowPermissionForm(false), onOpen: () => setShowPermissionForm(true) }) })), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
+                }, children: _jsx(PermissionForm, { onClose: () => setShowPermissionForm(false) }) })), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
 };

package/dist/components/ui/MessageInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAmGhC,CAAC"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAiGhC,CAAC"}

package/dist/components/ui/MessageInput.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import MicIcon from '@mui/icons-material/Mic';
 import MicOffIcon from '@mui/icons-material/MicOff';
 import { IconButton, InputBase } from '@mui/material';
+import { css } from '@emotion/react';
 import { useChatBot } from '../context/ChatBotContext';
+import { actionButton } from './styles/isolatedStyles';
 export const MessageInput = () => {
     const { inputValue, setInputValue, isLoading, isAITLoading, handleSubmit, isRecording, startRecording, stopRecording, textInputRef, props: { placeholder = 'Type a message...' } } = useChatBot();
     const isDisabled = isLoading || isAITLoading;
@@ -13,42 +16,42 @@ export const MessageInput = () => {
             handleSubmit(e);
         }
     };
-    return (_jsxs("div", { style: {
-            padding: '15px',
-            display: 'flex',
-            gap: '10px',
-            borderTop: '1px solid #eee'
-        }, children: [_jsx(InputBase, { value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyPress: handleKeyPress, placeholder: inputPlaceholder, disabled: isDisabled, fullWidth: true, inputProps: {
+    return (_jsxs("div", { css: css `
+      padding: 15px !important;
+      display: flex !important;
+      gap: 10px !important;
+      border-top: 1px solid #eee !important;
+    `, children: [_jsx(InputBase, { value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyPress: handleKeyPress, placeholder: inputPlaceholder, disabled: isDisabled, fullWidth: true, inputProps: {
                     ref: textInputRef
-                }, endAdornment: _jsx(IconButton, { onClick: () => isRecording ? stopRecording() : startRecording(), disabled: isDisabled, children: isRecording ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {}) }), onFocus: () => stopRecording(), style: {
-                    flex: 1,
-                    padding: '10px',
-                    border: '1px solid #ddd',
-                    borderRadius: '20px',
-                    outline: 'none',
-                    fontSize: '14px',
-                    backgroundColor: isDisabled ? '#f8f9fa' : '#fff'
-                } }), _jsxs("button", { onClick: (e) => handleSubmit(e), disabled: isDisabled || !inputValue.trim(), style: {
-                    backgroundColor: isDisabled || !inputValue.trim() ? '#e9ecef' : '#007bff',
-                    color: isDisabled || !inputValue.trim() ? '#6c757d' : 'white',
-                    border: 'none',
-                    padding: '10px 20px',
-                    borderRadius: '20px',
-                    cursor: isDisabled || !inputValue.trim() ? 'not-allowed' : 'pointer',
-                    fontSize: '14px',
-                    fontWeight: '500',
-                    transition: 'background-color 0.3s',
-                    position: 'relative',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                }, onMouseOver: (e) => {
-                    if (!isDisabled && inputValue.trim()) {
-                        e.currentTarget.style.backgroundColor = '#0056b3';
-                    }
-                }, onMouseOut: (e) => {
-                    if (!isDisabled && inputValue.trim()) {
-                        e.currentTarget.style.backgroundColor = '#007bff';
-                    }
-                }, children: ["Send", (isLoading || isAITLoading) && (_jsx("span", { style: { marginLeft: 8, display: 'flex', alignItems: 'center' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 50 50", children: _jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: "#fff", strokeWidth: "4", strokeDasharray: "31.4 31.4", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" }) }) }) }))] })] }));
+                }, endAdornment: _jsx(IconButton, { onClick: () => isRecording ? stopRecording() : startRecording(), disabled: isDisabled, children: isRecording ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {}) }), onFocus: () => stopRecording(), css: css `
+          flex: 1 !important;
+          padding: 10px !important;
+          border: 1px solid #ddd !important;
+          border-radius: 20px !important;
+          outline: none !important;
+          font-size: 14px !important;
+          background-color: ${isDisabled ? '#f8f9fa' : '#fff'} !important;
+        ` }), _jsxs("button", { onClick: (e) => handleSubmit(e), disabled: isDisabled || !inputValue.trim(), css: css `
+          ${actionButton}
+          padding: 10px 20px !important;
+          border-radius: 20px !important;
+          position: relative !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          
+          &:disabled {
+            background-color: #e9ecef !important;
+            color: #6c757d !important;
+            cursor: not-allowed !important;
+          }
+          
+          &:hover:not(:disabled) {
+            background-color: #0056b3 !important;
+          }
+        `, children: ["Send", (isLoading || isAITLoading) && (_jsx("span", { css: css `
+            margin-left: 8px !important;
+            display: flex !important;
+            align-items: center !important;
+          `, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 50 50", children: _jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: "#fff", strokeWidth: "4", strokeDasharray: "31.4 31.4", strokeLinecap: "round", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" }) }) }) }))] })] }));
 };

package/dist/components/ui/MessageList.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
 export declare const MessageList: React.FC;
 //# sourceMappingURL=MessageList.d.ts.map

package/dist/components/ui/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAuM/B,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAiI/B,CAAC"}

package/dist/components/ui/MessageList.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
+import { css } from '@emotion/react';
 import { convertUrlsToLinks } from '../../core/utils/urlUtils';
 import { useChatBot } from '../context/ChatBotContext';
 import { AI_MODEL_MAP } from '../types/ChatBotTypes';
+import { messageListContainer, messageBubble, userMessage, messageContent, userMessageContent, retryMessageContent, actionButton, connectedButton, loadingIndicator, modelIndicator, modelBadge, modelDot } from './styles/isolatedStyles';
 export const MessageList = () => {
-    const { messages, isLoading, connectWallet, signInWallet, hitAddress, ait, setShowPermissionForm, isWalletLoading, isAutoConnecting, isNeedSignInWithWallet, enableAIT, isAITLoading, isAITEnabling, sendMessage, permissions } = useChatBot();
+    const { messages, isLoading, connectWallet, signInWallet, hitAddress, isAutoConnecting, isNeedSignInWithWallet, enableAIT, isAITLoading, isAITEnabling, sendMessage, permissions } = useChatBot();
     const messagesEndRef = React.useRef(null);
     const scrollToBottom = () => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -46,28 +49,11 @@ export const MessageList = () => {
             return '';
         return AI_MODEL_MAP[modelValue] || modelValue;
     };
-    return (_jsxs("div", { style: {
-            flex: 1,
-            padding: '15px',
-            overflowY: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '10px'
-        }, children: [messages.map((message) => (_jsxs("div", { style: {
-                    alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
-                    maxWidth: '80%',
-                    marginBottom: '10px'
-                }, children: [_jsxs("div", { style: {
-                            backgroundColor: message.role === 'user' ? '#007bff' :
-                                message.metadata?.isRetry ? '#fff3cd' : '#f1f1f1',
-                            color: message.role === 'user' ? 'white' :
-                                message.metadata?.isRetry ? '#856404' : '#333',
-                            padding: '10px 15px',
-                            borderRadius: '15px',
-                            wordWrap: 'break-word',
-                            position: 'relative',
-                            border: message.metadata?.isRetry ? '1px solid #ffeaa7' : 'none'
-                        }, children: [message.metadata?.isRetry && (_jsx("span", { style: { marginRight: '8px', fontSize: '14px' }, children: "\uD83D\uDD04" })), message.role === 'assistant' ? convertUrlsToLinks(message.content) : message.content, message.button && (_jsx("div", { style: { marginTop: '10px' }, children: _jsx("button", { onClick: () => {
+    return (_jsxs("div", { css: messageListContainer, children: [messages.map((message) => (_jsxs("div", { css: message.role === 'user' ? userMessage : messageBubble, children: [_jsxs("div", { css: message.role === 'user'
+                            ? userMessageContent
+                            : message.metadata?.isRetry
+                                ? retryMessageContent
+                                : messageContent, children: [message.metadata?.isRetry && (_jsx("span", { css: css `margin-right: 8px !important; font-size: 14px !important;`, children: "\uD83D\uDD04" })), message.role === 'assistant' ? convertUrlsToLinks(message.content) : message.content, message.button && (_jsx("div", { css: css `margin-top: 10px !important;`, children: _jsx("button", { onClick: () => {
                                         if (message.button && message.button.trim()) {
                                             handleButtonClick(message.button, message);
                                         }
@@ -75,65 +61,16 @@ export const MessageList = () => {
                                         (message.button === 'connectWallet' && Boolean(hitAddress)) ||
                                         (message.button === 'signIn' && !isNeedSignInWithWallet) ||
                                         (message.button === 'enableAIT' && (isAITLoading || isAITEnabling ||
-                                            (message.metadata?.toolName && permissions.includes(message.metadata.toolName)))) || false, style: {
-                                        padding: '8px 16px',
-                                        backgroundColor: message.role === 'user' ? 'rgba(255, 255, 255, 0.2)' :
-                                            isAutoConnecting ? '#6c757d' :
-                                                (message.button === 'connectWallet' && Boolean(hitAddress)) ? '#28a745' :
-                                                    (message.button === 'signIn' && !isNeedSignInWithWallet) ? '#28a745' :
-                                                        (message.button === 'continue') ? '#28a745' :
-                                                            (message.button === 'enableAIT' && (isAITLoading || isAITEnabling ||
-                                                                (message.metadata?.toolName && permissions.includes(message.metadata.toolName)))) ?
-                                                                ((message.metadata?.toolName && permissions.includes(message.metadata.toolName)) ? '#28a745' : '#6c757d') : '#007bff',
-                                        color: message.role === 'user' ? 'white' : 'white',
-                                        border: 'none',
-                                        borderRadius: '5px',
-                                        cursor: (message.button !== 'continue' && (isAutoConnecting ||
-                                            (message.button === 'connectWallet' && Boolean(hitAddress)) ||
-                                            (message.button === 'signIn' && !isNeedSignInWithWallet) ||
-                                            (message.button === 'enableAIT' && (isAITLoading || isAITEnabling ||
-                                                (message.metadata?.toolName && permissions.includes(message.metadata.toolName)))))) ? 'not-allowed' : 'pointer',
-                                        fontSize: '14px',
-                                        opacity: (isAutoConnecting ||
-                                            (message.button === 'connectWallet' && Boolean(hitAddress)) ||
-                                            (message.button === 'signIn' && !isNeedSignInWithWallet) ||
-                                            (message.button === 'enableAIT' && (isAITLoading || isAITEnabling ||
-                                                (message.metadata?.toolName && permissions.includes(message.metadata.toolName))))) ? 0.8 : 1
-                                    }, children: isAutoConnecting ? 'Connecting...' :
+                                            (message.metadata?.toolName && permissions.includes(message.metadata.toolName)))) || false, css: (message.button === 'connectWallet' && Boolean(hitAddress)) ? connectedButton :
+                                        (message.button === 'signIn' && !isNeedSignInWithWallet) ? connectedButton :
+                                            (message.button === 'continue') ? connectedButton :
+                                                (message.button === 'enableAIT' && (message.metadata?.toolName && permissions.includes(message.metadata.toolName))) ? connectedButton :
+                                                    actionButton, children: isAutoConnecting ? 'Connecting...' :
                                         message.button === 'connectWallet' ? (Boolean(hitAddress) ? 'Connected' : 'Connect Wallet') :
                                             message.button === 'signIn' ? (!isNeedSignInWithWallet ? 'Signed In' : 'Sign In') :
                                                 message.button === 'continue' ? 'Continue' :
                                                     message.button === 'enableAIT' ?
                                                         ((isAITLoading || isAITEnabling) ? 'Enabling...' :
                                                             (message.metadata?.toolName && permissions.includes(message.metadata.toolName)) ? 'AIT Enabled' : 'Enable AIT Permissions') :
-                                                        message.button }) }))] }), message.role === 'assistant' && message.metadata?.model && (_jsx("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            marginTop: '4px',
-                            marginLeft: '8px'
-                        }, children: _jsxs("div", { style: {
-                                backgroundColor: '#e3f2fd',
-                                color: '#1976d2',
-                                padding: '2px 8px',
-                                borderRadius: '10px',
-                                fontSize: '10px',
-                                fontWeight: '500',
-                                border: '1px solid #bbdefb',
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: '4px'
-                            }, children: [_jsx("span", { style: {
-                                        width: '6px',
-                                        height: '6px',
-                                        backgroundColor: '#1976d2',
-                                        borderRadius: '50%',
-                                        display: 'inline-block'
-                                    } }), getModelDisplayName(message.metadata.model)] }) }))] }, message.id))), isLoading && (_jsx("div", { style: {
-                    alignSelf: 'flex-start',
-                    backgroundColor: '#f1f1f1',
-                    color: '#333',
-                    padding: '10px 15px',
-                    borderRadius: '15px',
-                    maxWidth: '80%'
-                }, children: "Thinking..." })), _jsx("div", { ref: messagesEndRef })] }));
+                                                        message.button }) }))] }), message.role === 'assistant' && message.metadata?.model && (_jsx("div", { css: modelIndicator, children: _jsxs("div", { css: modelBadge, children: [_jsx("span", { css: modelDot }), getModelDisplayName(message.metadata.model)] }) }))] }, message.id))), isLoading && (_jsx("div", { css: loadingIndicator, children: "Thinking..." })), _jsx("div", { ref: messagesEndRef })] }));
 };

package/dist/components/ui/ModelSelector.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
 export declare const ModelSelector: React.FC;
 //# sourceMappingURL=ModelSelector.d.ts.map