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

package/dist/components/ui/PermissionForm.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
+import { css } from '@emotion/react';
 import { useChatBot } from '../context/ChatBotContext';
-export const PermissionForm = ({ onClose, onOpen }) => {
+import { actionButton } from './styles/isolatedStyles';
+export const PermissionForm = ({ onClose }) => {
     const { hitAddress, permissions, setPermissions, setIsDisabled, onSave, onConnectWallet, onSignIn, isNeedSignInWithWallet, walletInfo, onVerifyWallet, serviceId, nxtlinqApi, permissionGroup, isAITLoading, isWalletLoading = false, refreshAIT, props } = useChatBot();
     const [availablePermissions, setAvailablePermissions] = React.useState([]);
     const [isSaving, setIsSaving] = React.useState(false);
@@ -50,7 +53,11 @@ export const PermissionForm = ({ onClose, onOpen }) => {
     // Check if wallet IDV verification is required based on configuration
     const requireWalletIDVVerification = props.requireWalletIDVVerification ?? true; // Default to true
     const isWalletVerified = Boolean(walletInfo?.id);
-    const shouldShowVerificationPrompt = requireWalletIDVVerification && !isWalletVerified;
+    const isWalletVerifiedWithBerifyme = walletInfo?.method === 'berifyme';
+    // Show verification prompt if:
+    // 1. IDV verification is required AND wallet is not verified, OR
+    // 2. IDV verification is required AND wallet is verified but not with Berifyme
+    const shouldShowVerificationPrompt = requireWalletIDVVerification && (!isWalletVerified || !isWalletVerifiedWithBerifyme);
     const handleSave = async () => {
         setIsSaving(true);
         try {
@@ -76,251 +83,257 @@ export const PermissionForm = ({ onClose, onOpen }) => {
     };
     // Show loading state while checking wallet status
     if (isWalletLoading) {
-        return (_jsxs("div", { style: {
-                backgroundColor: 'white',
-                padding: '24px',
-                borderRadius: '12px',
-                width: '480px',
-                maxWidth: '90%',
-                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
-            }, children: [_jsxs("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        marginBottom: '24px'
-                    }, children: [_jsx("h3", { style: {
-                                margin: 0,
-                                fontSize: '20px',
-                                fontWeight: '600',
-                                color: '#1a1a1a'
-                            }, children: "AIT Settings" }), _jsx("button", { onClick: onClose, style: {
-                                background: 'none',
-                                border: 'none',
-                                fontSize: '24px',
-                                cursor: 'pointer',
-                                color: '#666',
-                                padding: '4px',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center'
-                            }, children: "\u00D7" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsx("div", { style: {
-                                width: '64px',
-                                height: '64px',
-                                margin: '0 auto 16px',
-                                backgroundColor: '#f5f5f5',
-                                borderRadius: '50%',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center'
-                            }, children: _jsx("div", { style: {
-                                    width: '32px',
-                                    height: '32px',
-                                    border: '3px solid #e3e3e3',
-                                    borderTop: '3px solid #007bff',
-                                    borderRadius: '50%',
-                                    animation: 'spin 1s linear infinite'
-                                } }) }), _jsx("p", { style: {
-                                marginBottom: '24px',
-                                fontSize: '16px',
-                                color: '#666'
-                            }, children: "Checking wallet status..." })] }), _jsx("style", { children: `
+        return (_jsxs("div", { css: css `
+        background-color: white !important;
+        padding: 24px !important;
+        border-radius: 12px !important;
+        width: 480px !important;
+        max-width: 90% !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+      `, children: [_jsxs("div", { css: css `
+          display: flex !important;
+          justify-content: space-between !important;
+          align-items: center !important;
+          margin-bottom: 24px !important;
+        `, children: [_jsx("h3", { css: css `
+            margin: 0 !important;
+            font-size: 20px !important;
+            font-weight: 600 !important;
+            color: #1a1a1a !important;
+          `, children: "AIT Settings" }), _jsx("button", { onClick: onClose, css: css `
+              background: none !important;
+              border: none !important;
+              font-size: 24px !important;
+              cursor: pointer !important;
+              color: #666 !important;
+              padding: 4px !important;
+              display: flex !important;
+              align-items: center !important;
+              justify-content: center !important;
+              
+              &:hover {
+                background-color: #f0f0f0 !important;
+                color: #333 !important;
+              }
+            `, children: "\u00D7" })] }), _jsxs("div", { css: css `
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `, children: [_jsx("div", { css: css `
+            width: 64px !important;
+            height: 64px !important;
+            margin: 0 auto 16px !important;
+            background-color: #f5f5f5 !important;
+            border-radius: 50% !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+          `, children: _jsx("div", { css: css `
+              width: 32px !important;
+              height: 32px !important;
+              border: 3px solid #e3e3e3 !important;
+              border-top: 3px solid #007bff !important;
+              border-radius: 50% !important;
+              animation: spin 1s linear infinite !important;
+            ` }) }), _jsx("p", { css: css `
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `, children: "Checking wallet status..." })] }), _jsx("style", { children: `
           @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
           }
         ` })] }));
     }
-    return (_jsxs("div", { style: {
-            backgroundColor: 'white',
-            padding: '24px',
-            borderRadius: '12px',
-            width: '480px',
-            maxWidth: '90%',
-            maxHeight: '90vh',
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden'
-        }, children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: '24px'
-                }, children: [_jsx("h3", { style: {
-                            margin: 0,
-                            fontSize: '20px',
-                            fontWeight: '600',
-                            color: '#1a1a1a'
-                        }, children: "AIT Settings" }), _jsx("button", { onClick: onClose, style: {
-                            background: 'none',
-                            border: 'none',
-                            fontSize: '24px',
-                            cursor: 'pointer',
-                            color: '#666',
-                            padding: '8px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            borderRadius: '4px',
-                            transition: 'background-color 0.2s',
-                            minWidth: '32px',
-                            minHeight: '32px'
-                        }, onMouseOver: (e) => {
-                            e.currentTarget.style.backgroundColor = '#f0f0f0';
-                            e.currentTarget.style.color = '#333';
-                        }, onMouseOut: (e) => {
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                            e.currentTarget.style.color = '#666';
-                        }, title: "Close", children: "\u00D7" })] }), !hitAddress ? (_jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsx("div", { style: {
-                            width: '64px',
-                            height: '64px',
-                            margin: '0 auto 16px',
-                            backgroundColor: '#f5f5f5',
-                            borderRadius: '50%',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center'
-                        }, children: _jsx("span", { style: { fontSize: '32px' }, children: "\uD83D\uDC5B" }) }), _jsx("p", { style: {
-                            marginBottom: '24px',
-                            fontSize: '16px',
-                            color: '#666'
-                        }, children: "Please connect your wallet first" }), _jsx("button", { onClick: onConnectWallet, disabled: Boolean(hitAddress), style: {
-                            padding: '12px 24px',
-                            backgroundColor: Boolean(hitAddress) ? '#28a745' : '#007bff',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '8px',
-                            cursor: Boolean(hitAddress) ? 'not-allowed' : 'pointer',
-                            fontSize: '16px',
-                            fontWeight: '500',
-                            transition: 'background-color 0.2s',
-                            opacity: Boolean(hitAddress) ? 0.8 : 1
-                        }, onMouseOver: (e) => {
-                            if (!Boolean(hitAddress)) {
-                                e.currentTarget.style.backgroundColor = '#0056b3';
-                            }
-                        }, onMouseOut: (e) => {
-                            if (!Boolean(hitAddress)) {
-                                e.currentTarget.style.backgroundColor = '#007bff';
-                            }
-                        }, children: Boolean(hitAddress) ? 'Connected' : 'Connect Wallet' })] })) : isNeedSignInWithWallet ? (_jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: {
-                                    marginBottom: '12px',
-                                    fontSize: '16px',
-                                    color: '#666'
-                                }, children: "Connected Wallet" }), _jsx("p", { style: {
-                                    wordBreak: 'break-all',
-                                    backgroundColor: '#f8f9fa',
-                                    padding: '12px',
-                                    borderRadius: '8px',
-                                    fontSize: '14px',
-                                    color: '#333',
-                                    border: '1px solid #e9ecef'
-                                }, children: hitAddress })] }), _jsx("p", { style: {
-                            marginBottom: '24px',
-                            fontSize: '16px',
-                            color: '#666'
-                        }, children: "Please sign in to continue" }), _jsx("button", { onClick: onSignIn, disabled: !isNeedSignInWithWallet, style: {
-                            padding: '12px 24px',
-                            backgroundColor: !isNeedSignInWithWallet ? '#28a745' : '#007bff',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '8px',
-                            cursor: !isNeedSignInWithWallet ? 'not-allowed' : 'pointer',
-                            fontSize: '16px',
-                            fontWeight: '500',
-                            transition: 'background-color 0.2s',
-                            opacity: !isNeedSignInWithWallet ? 0.8 : 1
-                        }, onMouseOver: (e) => {
-                            if (isNeedSignInWithWallet) {
-                                e.currentTarget.style.backgroundColor = '#0056b3';
-                            }
-                        }, onMouseOut: (e) => {
-                            if (isNeedSignInWithWallet) {
-                                e.currentTarget.style.backgroundColor = '#007bff';
-                            }
-                        }, children: !isNeedSignInWithWallet ? 'Signed In' : 'Sign In' })] })) : shouldShowVerificationPrompt ? (_jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: {
-                                    marginBottom: '12px',
-                                    fontSize: '16px',
-                                    color: '#666'
-                                }, children: "Connected Wallet" }), _jsx("p", { style: {
-                                    wordBreak: 'break-all',
-                                    backgroundColor: '#f8f9fa',
-                                    padding: '12px',
-                                    borderRadius: '8px',
-                                    fontSize: '14px',
-                                    color: '#333',
-                                    border: '1px solid #e9ecef'
-                                }, children: hitAddress })] }), _jsx("p", { style: {
-                            marginBottom: '24px',
-                            fontSize: '16px',
-                            color: '#666'
-                        }, children: "Please verify your wallet to continue" }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), style: {
-                            padding: '12px 24px',
-                            backgroundColor: '#007bff',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '8px',
-                            cursor: 'pointer',
-                            fontSize: '16px',
-                            fontWeight: '500',
-                            transition: 'background-color 0.2s'
-                        }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = '#0056b3', onMouseOut: (e) => e.currentTarget.style.backgroundColor = '#007bff', children: "Verify your wallet" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: {
-                                    marginBottom: '12px',
-                                    fontSize: '16px',
-                                    color: '#666'
-                                }, children: "Connected Wallet" }), _jsx("p", { style: {
-                                    wordBreak: 'break-all',
-                                    backgroundColor: '#f8f9fa',
-                                    padding: '12px',
-                                    borderRadius: '8px',
-                                    fontSize: '14px',
-                                    color: '#333',
-                                    border: '1px solid #e9ecef'
-                                }, children: hitAddress })] }), _jsxs("div", { style: {
-                            marginBottom: '24px',
-                            flex: 1,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            minHeight: 0
-                        }, children: [_jsx("h4", { style: {
-                                    marginBottom: '12px',
-                                    fontSize: '16px',
-                                    color: '#666',
-                                    flexShrink: 0
-                                }, children: "Permissions" }), isAITLoading ? (_jsx("div", { style: {
-                                    backgroundColor: '#f8f9fa',
-                                    padding: '16px',
-                                    borderRadius: '8px',
-                                    border: '1px solid #e9ecef',
-                                    textAlign: 'center',
-                                    color: '#666'
-                                }, children: "Loading permissions..." })) : (_jsx("div", { style: {
-                                    backgroundColor: '#f8f9fa',
-                                    padding: '16px',
-                                    borderRadius: '8px',
-                                    border: '1px solid #e9ecef',
-                                    flex: 1,
-                                    overflowY: 'auto',
-                                    overflowX: 'hidden',
-                                    minHeight: 0
-                                }, children: availablePermissions.map((permission) => (_jsx("div", { style: { marginBottom: '12px' }, children: _jsxs("label", { style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '12px',
-                                            cursor: isAITLoading ? 'not-allowed' : 'pointer',
-                                            padding: '8px',
-                                            borderRadius: '6px',
-                                            transition: 'background-color 0.2s',
-                                            opacity: isAITLoading ? 0.6 : 1
-                                        }, onMouseOver: (e) => {
-                                            if (!isAITLoading) {
-                                                e.currentTarget.style.backgroundColor = '#e9ecef';
-                                            }
-                                        }, onMouseOut: (e) => {
-                                            if (!isAITLoading) {
-                                                e.currentTarget.style.backgroundColor = 'transparent';
-                                            }
-                                        }, children: [_jsx("input", { type: "checkbox", checked: tempPermissions.includes(permission.label), onChange: () => {
+    return (_jsxs("div", { css: css `
+      background-color: white !important;
+      padding: 24px !important;
+      border-radius: 12px !important;
+      width: 480px !important;
+      max-width: 90% !important;
+      max-height: 90vh !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+      display: flex !important;
+      flex-direction: column !important;
+      overflow: hidden !important;
+    `, children: [_jsxs("div", { css: css `
+        display: flex !important;
+        justify-content: space-between !important;
+        align-items: center !important;
+        margin-bottom: 24px !important;
+      `, children: [_jsx("h3", { css: css `
+          margin: 0 !important;
+          font-size: 20px !important;
+          font-weight: 600 !important;
+          color: #1a1a1a !important;
+        `, children: "AIT Settings" }), _jsx("button", { onClick: onClose, css: css `
+            background: none !important;
+            border: none !important;
+            font-size: 24px !important;
+            cursor: pointer !important;
+            color: #666 !important;
+            padding: 8px !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            border-radius: 4px !important;
+            transition: background-color 0.2s !important;
+            min-width: 32px !important;
+            min-height: 32px !important;
+            
+            &:hover {
+              background-color: #f0f0f0 !important;
+              color: #333 !important;
+            }
+          `, title: "Close", children: "\u00D7" })] }), !hitAddress ? (_jsxs("div", { css: css `
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `, children: [_jsx("div", { css: css `
+            width: 64px !important;
+            height: 64px !important;
+            margin: 0 auto 16px !important;
+            background-color: #f5f5f5 !important;
+            border-radius: 50% !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+          `, children: _jsx("span", { css: css `font-size: 32px !important;`, children: "\uD83D\uDC5B" }) }), _jsx("p", { css: css `
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `, children: "Please connect your wallet first" }), _jsx("button", { onClick: onConnectWallet, disabled: Boolean(hitAddress), css: css `
+              ${actionButton}
+              padding: 12px 24px !important;
+              background-color: ${Boolean(hitAddress) ? '#28a745' : '#007bff'} !important;
+              border-radius: 8px !important;
+              font-size: 16px !important;
+              opacity: ${Boolean(hitAddress) ? 0.8 : 1} !important;
+              
+              &:disabled {
+                cursor: not-allowed !important;
+              }
+              
+              &:hover:not(:disabled) {
+                background-color: #0056b3 !important;
+              }
+            `, children: Boolean(hitAddress) ? 'Connected' : 'Connect Wallet' })] })) : isNeedSignInWithWallet ? (_jsxs("div", { css: css `
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `, children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `, children: "Connected Wallet" }), _jsx("p", { css: css `
+              word-break: break-all !important;
+              background-color: #f8f9fa !important;
+              padding: 12px !important;
+              border-radius: 8px !important;
+              font-size: 14px !important;
+              color: #333 !important;
+              border: 1px solid #e9ecef !important;
+            `, children: hitAddress })] }), _jsx("p", { css: css `
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `, children: "Please sign in to continue" }), _jsx("button", { onClick: onSignIn, disabled: !isNeedSignInWithWallet, css: css `
+              ${actionButton}
+              padding: 12px 24px !important;
+              background-color: ${!isNeedSignInWithWallet ? '#28a745' : '#007bff'} !important;
+              border-radius: 8px !important;
+              font-size: 16px !important;
+              opacity: ${!isNeedSignInWithWallet ? 0.8 : 1} !important;
+              
+              &:disabled {
+                cursor: not-allowed !important;
+              }
+              
+              &:hover:not(:disabled) {
+                background-color: #0056b3 !important;
+              }
+            `, children: !isNeedSignInWithWallet ? 'Signed In' : 'Sign In' })] })) : shouldShowVerificationPrompt ? (_jsxs("div", { css: css `
+          text-align: center !important;
+          padding: 32px 0 !important;
+        `, children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `, children: "Connected Wallet" }), _jsx("p", { css: css `
+              word-break: break-all !important;
+              background-color: #f8f9fa !important;
+              padding: 12px !important;
+              border-radius: 8px !important;
+              font-size: 14px !important;
+              color: #333 !important;
+              border: 1px solid #e9ecef !important;
+            `, children: hitAddress })] }), _jsx("p", { css: css `
+            margin-bottom: 24px !important;
+            font-size: 16px !important;
+            color: #666 !important;
+          `, children: isWalletVerified && !isWalletVerifiedWithBerifyme
+                            ? 'Your wallet is verified with custom method, but Berify.me verification is required to continue.'
+                            : 'Please verify your wallet with Berify.me to continue' }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), css: css `
+              ${actionButton}
+              padding: 12px 24px !important;
+              background-color: #007bff !important;
+              border-radius: 8px !important;
+              font-size: 16px !important;
+              
+              &:hover {
+                background-color: #0056b3 !important;
+              }
+            `, children: "Verify your wallet" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+            `, children: "Connected Wallet" }), _jsx("p", { css: css `
+              word-break: break-all !important;
+              background-color: #f8f9fa !important;
+              padding: 12px !important;
+              border-radius: 8px !important;
+              font-size: 14px !important;
+              color: #333 !important;
+              border: 1px solid #e9ecef !important;
+            `, children: hitAddress })] }), _jsxs("div", { css: css `
+            margin-bottom: 24px !important;
+            flex: 1 !important;
+            display: flex !important;
+            flex-direction: column !important;
+            min-height: 0 !important;
+          `, children: [_jsx("h4", { css: css `
+              margin-bottom: 12px !important;
+              font-size: 16px !important;
+              color: #666 !important;
+              flex-shrink: 0 !important;
+            `, children: "Permissions" }), isAITLoading ? (_jsx("div", { css: css `
+                background-color: #f8f9fa !important;
+                padding: 16px !important;
+                border-radius: 8px !important;
+                border: 1px solid #e9ecef !important;
+                text-align: center !important;
+                color: #666 !important;
+              `, children: "Loading permissions..." })) : (_jsx("div", { css: css `
+                background-color: #f8f9fa !important;
+                padding: 16px !important;
+                border-radius: 8px !important;
+                border: 1px solid #e9ecef !important;
+                flex: 1 !important;
+                overflow-y: auto !important;
+                overflow-x: hidden !important;
+                min-height: 0 !important;
+              `, children: availablePermissions.map((permission) => (_jsx("div", { css: css `margin-bottom: 12px !important;`, children: _jsxs("label", { css: css `
+                      display: flex !important;
+                      align-items: center !important;
+                      gap: 12px !important;
+                      cursor: ${isAITLoading ? 'not-allowed' : 'pointer'} !important;
+                      padding: 8px !important;
+                      border-radius: 6px !important;
+                      transition: background-color 0.2s !important;
+                      opacity: ${isAITLoading ? 0.6 : 1} !important;
+                      
+                      &:hover {
+                        background-color: ${!isAITLoading ? '#e9ecef' : 'transparent'} !important;
+                      }
+                    `, children: [_jsx("input", { type: "checkbox", checked: tempPermissions.includes(permission.label), onChange: () => {
                                                     if (!isAITLoading) {
                                                         const newPermissions = tempPermissions.includes(permission.label)
                                                             ? tempPermissions.filter(p => p !== permission.label)
@@ -328,55 +341,51 @@ export const PermissionForm = ({ onClose, onOpen }) => {
                                                         setTempPermissions(newPermissions);
                                                         setIsDisabled(false);
                                                     }
-                                                }, disabled: isAITLoading, style: {
-                                                    margin: 0,
-                                                    width: '18px',
-                                                    height: '18px',
-                                                    cursor: isAITLoading ? 'not-allowed' : 'pointer'
-                                                } }), _jsx("span", { style: {
-                                                    fontSize: '14px',
-                                                    color: '#333'
-                                                }, children: permission.label })] }) }, permission.id))) }))] }), _jsxs("div", { style: {
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            gap: '12px',
-                            borderTop: '1px solid #e9ecef',
-                            paddingTop: '24px',
-                            flexShrink: 0,
-                            marginTop: 'auto'
-                        }, children: [_jsx("button", { onClick: handleCancel, style: {
-                                    padding: '10px 20px',
-                                    backgroundColor: '#f8f9fa',
-                                    color: '#666',
-                                    border: '1px solid #dee2e6',
-                                    borderRadius: '8px',
-                                    cursor: 'pointer',
-                                    fontSize: '14px',
-                                    fontWeight: '500',
-                                    transition: 'all 0.2s'
-                                }, onMouseOver: (e) => {
-                                    e.currentTarget.style.backgroundColor = '#e9ecef';
-                                    e.currentTarget.style.borderColor = '#ced4da';
-                                }, onMouseOut: (e) => {
-                                    e.currentTarget.style.backgroundColor = '#f8f9fa';
-                                    e.currentTarget.style.borderColor = '#dee2e6';
-                                }, children: "Cancel" }), _jsx("button", { onClick: handleSave, disabled: !hasPermissionChanges() || isSaving || isAITLoading, style: {
-                                    padding: '10px 20px',
-                                    backgroundColor: !hasPermissionChanges() || isSaving || isAITLoading ? '#e9ecef' : '#007bff',
-                                    color: !hasPermissionChanges() || isSaving || isAITLoading ? '#6c757d' : 'white',
-                                    border: 'none',
-                                    borderRadius: '8px',
-                                    cursor: !hasPermissionChanges() || isSaving || isAITLoading ? 'not-allowed' : 'pointer',
-                                    fontSize: '14px',
-                                    fontWeight: '500',
-                                    transition: 'background-color 0.2s'
-                                }, onMouseOver: (e) => {
-                                    if (hasPermissionChanges() && !isSaving && !isAITLoading) {
-                                        e.currentTarget.style.backgroundColor = '#0056b3';
-                                    }
-                                }, onMouseOut: (e) => {
-                                    if (hasPermissionChanges() && !isSaving && !isAITLoading) {
-                                        e.currentTarget.style.backgroundColor = '#007bff';
-                                    }
-                                }, children: isSaving ? 'Saving...' : 'Save' })] })] }))] }));
+                                                }, disabled: isAITLoading, css: css `
+                          margin: 0 !important;
+                          width: 18px !important;
+                          height: 18px !important;
+                          cursor: ${isAITLoading ? 'not-allowed' : 'pointer'} !important;
+                        ` }), _jsx("span", { css: css `
+                        font-size: 14px !important;
+                        color: #333 !important;
+                      `, children: permission.label })] }) }, permission.id))) }))] }), _jsxs("div", { css: css `
+            display: flex !important;
+            justify-content: flex-end !important;
+            gap: 12px !important;
+            border-top: 1px solid #e9ecef !important;
+            padding-top: 24px !important;
+            flex-shrink: 0 !important;
+            margin-top: auto !important;
+          `, children: [_jsx("button", { onClick: handleCancel, css: css `
+                padding: 10px 20px !important;
+                background-color: #f8f9fa !important;
+                color: #666 !important;
+                border: 1px solid #dee2e6 !important;
+                border-radius: 8px !important;
+                cursor: pointer !important;
+                font-size: 14px !important;
+                font-weight: 500 !important;
+                transition: all 0.2s !important;
+                
+                &:hover {
+                  background-color: #e9ecef !important;
+                  border-color: #ced4da !important;
+                }
+              `, children: "Cancel" }), _jsx("button", { onClick: handleSave, disabled: !hasPermissionChanges() || isSaving || isAITLoading, css: css `
+                ${actionButton}
+                padding: 10px 20px !important;
+                background-color: ${!hasPermissionChanges() || isSaving || isAITLoading ? '#e9ecef' : '#007bff'} !important;
+                color: ${!hasPermissionChanges() || isSaving || isAITLoading ? '#6c757d' : 'white'} !important;
+                border-radius: 8px !important;
+                font-size: 14px !important;
+                
+                &:disabled {
+                  cursor: not-allowed !important;
+                }
+                
+                &:hover:not(:disabled) {
+                  background-color: #0056b3 !important;
+                }
+              `, children: isSaving ? 'Saving...' : 'Save' })] })] }))] }));
 };