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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/components/context/ChatBotContext.d.ts.map +1 -1
  2. package/dist/components/context/ChatBotContext.js +8 -4
  3. package/dist/components/ui/BerifyMeModal.d.ts +1 -0
  4. package/dist/components/ui/BerifyMeModal.d.ts.map +1 -1
  5. package/dist/components/ui/BerifyMeModal.js +8 -10
  6. package/dist/components/ui/ChatBotUI.d.ts +1 -0
  7. package/dist/components/ui/ChatBotUI.d.ts.map +1 -1
  8. package/dist/components/ui/ChatBotUI.js +58 -213
  9. package/dist/components/ui/MessageInput.d.ts.map +1 -1
  10. package/dist/components/ui/MessageInput.js +41 -38
  11. package/dist/components/ui/MessageList.d.ts +1 -0
  12. package/dist/components/ui/MessageList.d.ts.map +1 -1
  13. package/dist/components/ui/MessageList.js +16 -79
  14. package/dist/components/ui/ModelSelector.d.ts +1 -0
  15. package/dist/components/ui/ModelSelector.d.ts.map +1 -1
  16. package/dist/components/ui/ModelSelector.js +51 -45
  17. package/dist/components/ui/NotificationModal.d.ts +1 -0
  18. package/dist/components/ui/NotificationModal.d.ts.map +1 -1
  19. package/dist/components/ui/NotificationModal.js +48 -74
  20. package/dist/components/ui/PermissionForm.d.ts +1 -1
  21. package/dist/components/ui/PermissionForm.d.ts.map +1 -1
  22. package/dist/components/ui/PermissionForm.js +296 -293
  23. package/dist/components/ui/PresetMessages.d.ts +1 -0
  24. package/dist/components/ui/PresetMessages.d.ts.map +1 -1
  25. package/dist/components/ui/PresetMessages.js +26 -27
  26. package/dist/components/ui/styles/isolatedStyles.d.ts +34 -0
  27. package/dist/components/ui/styles/isolatedStyles.d.ts.map +1 -0
  28. package/dist/components/ui/styles/isolatedStyles.js +449 -0
  29. package/package.json +1 -1
  30. package/umd/nxtlinq-ai-agent.umd.js +882 -19
package/dist/components/ui/PermissionForm.js CHANGED
@@ -1,7 +1,10 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
2
+ /** @jsxImportSource @emotion/react */
2
3
  import * as React from 'react';
4
+ import { css } from '@emotion/react';
3
5
  import { useChatBot } from '../context/ChatBotContext';
4
- export const PermissionForm = ({ onClose, onOpen }) => {
6
+ import { actionButton } from './styles/isolatedStyles';
7
+ export const PermissionForm = ({ onClose }) => {
5
8
  const { hitAddress, permissions, setPermissions, setIsDisabled, onSave, onConnectWallet, onSignIn, isNeedSignInWithWallet, walletInfo, onVerifyWallet, serviceId, nxtlinqApi, permissionGroup, isAITLoading, isWalletLoading = false, refreshAIT, props } = useChatBot();
6
9
  const [availablePermissions, setAvailablePermissions] = React.useState([]);
7
10
  const [isSaving, setIsSaving] = React.useState(false);
@@ -80,253 +83,257 @@ export const PermissionForm = ({ onClose, onOpen }) => {
80
83
  };
81
84
  // Show loading state while checking wallet status
82
85
  if (isWalletLoading) {
83
- return (_jsxs("div", { style: {
84
- backgroundColor: 'white',
85
- padding: '24px',
86
- borderRadius: '12px',
87
- width: '480px',
88
- maxWidth: '90%',
89
- boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
90
- }, children: [_jsxs("div", { style: {
91
- display: 'flex',
92
- justifyContent: 'space-between',
93
- alignItems: 'center',
94
- marginBottom: '24px'
95
- }, children: [_jsx("h3", { style: {
96
- margin: 0,
97
- fontSize: '20px',
98
- fontWeight: '600',
99
- color: '#1a1a1a'
100
- }, children: "AIT Settings" }), _jsx("button", { onClick: onClose, style: {
101
- background: 'none',
102
- border: 'none',
103
- fontSize: '24px',
104
- cursor: 'pointer',
105
- color: '#666',
106
- padding: '4px',
107
- display: 'flex',
108
- alignItems: 'center',
109
- justifyContent: 'center'
110
- }, children: "\u00D7" })] }), _jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsx("div", { style: {
111
- width: '64px',
112
- height: '64px',
113
- margin: '0 auto 16px',
114
- backgroundColor: '#f5f5f5',
115
- borderRadius: '50%',
116
- display: 'flex',
117
- alignItems: 'center',
118
- justifyContent: 'center'
119
- }, children: _jsx("div", { style: {
120
- width: '32px',
121
- height: '32px',
122
- border: '3px solid #e3e3e3',
123
- borderTop: '3px solid #007bff',
124
- borderRadius: '50%',
125
- animation: 'spin 1s linear infinite'
126
- } }) }), _jsx("p", { style: {
127
- marginBottom: '24px',
128
- fontSize: '16px',
129
- color: '#666'
130
- }, children: "Checking wallet status..." })] }), _jsx("style", { children: `
86
+ return (_jsxs("div", { css: css `
87
+ background-color: white !important;
88
+ padding: 24px !important;
89
+ border-radius: 12px !important;
90
+ width: 480px !important;
91
+ max-width: 90% !important;
92
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
93
+ `, children: [_jsxs("div", { css: css `
94
+ display: flex !important;
95
+ justify-content: space-between !important;
96
+ align-items: center !important;
97
+ margin-bottom: 24px !important;
98
+ `, children: [_jsx("h3", { css: css `
99
+ margin: 0 !important;
100
+ font-size: 20px !important;
101
+ font-weight: 600 !important;
102
+ color: #1a1a1a !important;
103
+ `, children: "AIT Settings" }), _jsx("button", { onClick: onClose, css: css `
104
+ background: none !important;
105
+ border: none !important;
106
+ font-size: 24px !important;
107
+ cursor: pointer !important;
108
+ color: #666 !important;
109
+ padding: 4px !important;
110
+ display: flex !important;
111
+ align-items: center !important;
112
+ justify-content: center !important;
113
+
114
+ &:hover {
115
+ background-color: #f0f0f0 !important;
116
+ color: #333 !important;
117
+ }
118
+ `, children: "\u00D7" })] }), _jsxs("div", { css: css `
119
+ text-align: center !important;
120
+ padding: 32px 0 !important;
121
+ `, children: [_jsx("div", { css: css `
122
+ width: 64px !important;
123
+ height: 64px !important;
124
+ margin: 0 auto 16px !important;
125
+ background-color: #f5f5f5 !important;
126
+ border-radius: 50% !important;
127
+ display: flex !important;
128
+ align-items: center !important;
129
+ justify-content: center !important;
130
+ `, children: _jsx("div", { css: css `
131
+ width: 32px !important;
132
+ height: 32px !important;
133
+ border: 3px solid #e3e3e3 !important;
134
+ border-top: 3px solid #007bff !important;
135
+ border-radius: 50% !important;
136
+ animation: spin 1s linear infinite !important;
137
+ ` }) }), _jsx("p", { css: css `
138
+ margin-bottom: 24px !important;
139
+ font-size: 16px !important;
140
+ color: #666 !important;
141
+ `, children: "Checking wallet status..." })] }), _jsx("style", { children: `
131
142
  @keyframes spin {
132
143
  0% { transform: rotate(0deg); }
133
144
  100% { transform: rotate(360deg); }
134
145
  }
135
146
  ` })] }));
136
147
  }
137
- return (_jsxs("div", { style: {
138
- backgroundColor: 'white',
139
- padding: '24px',
140
- borderRadius: '12px',
141
- width: '480px',
142
- maxWidth: '90%',
143
- maxHeight: '90vh',
144
- boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
145
- display: 'flex',
146
- flexDirection: 'column',
147
- overflow: 'hidden'
148
- }, children: [_jsxs("div", { style: {
149
- display: 'flex',
150
- justifyContent: 'space-between',
151
- alignItems: 'center',
152
- marginBottom: '24px'
153
- }, children: [_jsx("h3", { style: {
154
- margin: 0,
155
- fontSize: '20px',
156
- fontWeight: '600',
157
- color: '#1a1a1a'
158
- }, children: "AIT Settings" }), _jsx("button", { onClick: onClose, style: {
159
- background: 'none',
160
- border: 'none',
161
- fontSize: '24px',
162
- cursor: 'pointer',
163
- color: '#666',
164
- padding: '8px',
165
- display: 'flex',
166
- alignItems: 'center',
167
- justifyContent: 'center',
168
- borderRadius: '4px',
169
- transition: 'background-color 0.2s',
170
- minWidth: '32px',
171
- minHeight: '32px'
172
- }, onMouseOver: (e) => {
173
- e.currentTarget.style.backgroundColor = '#f0f0f0';
174
- e.currentTarget.style.color = '#333';
175
- }, onMouseOut: (e) => {
176
- e.currentTarget.style.backgroundColor = 'transparent';
177
- e.currentTarget.style.color = '#666';
178
- }, title: "Close", children: "\u00D7" })] }), !hitAddress ? (_jsxs("div", { style: { textAlign: 'center', padding: '32px 0' }, children: [_jsx("div", { style: {
179
- width: '64px',
180
- height: '64px',
181
- margin: '0 auto 16px',
182
- backgroundColor: '#f5f5f5',
183
- borderRadius: '50%',
184
- display: 'flex',
185
- alignItems: 'center',
186
- justifyContent: 'center'
187
- }, children: _jsx("span", { style: { fontSize: '32px' }, children: "\uD83D\uDC5B" }) }), _jsx("p", { style: {
188
- marginBottom: '24px',
189
- fontSize: '16px',
190
- color: '#666'
191
- }, children: "Please connect your wallet first" }), _jsx("button", { onClick: onConnectWallet, disabled: Boolean(hitAddress), style: {
192
- padding: '12px 24px',
193
- backgroundColor: Boolean(hitAddress) ? '#28a745' : '#007bff',
194
- color: 'white',
195
- border: 'none',
196
- borderRadius: '8px',
197
- cursor: Boolean(hitAddress) ? 'not-allowed' : 'pointer',
198
- fontSize: '16px',
199
- fontWeight: '500',
200
- transition: 'background-color 0.2s',
201
- opacity: Boolean(hitAddress) ? 0.8 : 1
202
- }, onMouseOver: (e) => {
203
- if (!Boolean(hitAddress)) {
204
- e.currentTarget.style.backgroundColor = '#0056b3';
205
- }
206
- }, onMouseOut: (e) => {
207
- if (!Boolean(hitAddress)) {
208
- e.currentTarget.style.backgroundColor = '#007bff';
209
- }
210
- }, 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: {
211
- marginBottom: '12px',
212
- fontSize: '16px',
213
- color: '#666'
214
- }, children: "Connected Wallet" }), _jsx("p", { style: {
215
- wordBreak: 'break-all',
216
- backgroundColor: '#f8f9fa',
217
- padding: '12px',
218
- borderRadius: '8px',
219
- fontSize: '14px',
220
- color: '#333',
221
- border: '1px solid #e9ecef'
222
- }, children: hitAddress })] }), _jsx("p", { style: {
223
- marginBottom: '24px',
224
- fontSize: '16px',
225
- color: '#666'
226
- }, children: "Please sign in to continue" }), _jsx("button", { onClick: onSignIn, disabled: !isNeedSignInWithWallet, style: {
227
- padding: '12px 24px',
228
- backgroundColor: !isNeedSignInWithWallet ? '#28a745' : '#007bff',
229
- color: 'white',
230
- border: 'none',
231
- borderRadius: '8px',
232
- cursor: !isNeedSignInWithWallet ? 'not-allowed' : 'pointer',
233
- fontSize: '16px',
234
- fontWeight: '500',
235
- transition: 'background-color 0.2s',
236
- opacity: !isNeedSignInWithWallet ? 0.8 : 1
237
- }, onMouseOver: (e) => {
238
- if (isNeedSignInWithWallet) {
239
- e.currentTarget.style.backgroundColor = '#0056b3';
240
- }
241
- }, onMouseOut: (e) => {
242
- if (isNeedSignInWithWallet) {
243
- e.currentTarget.style.backgroundColor = '#007bff';
244
- }
245
- }, 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: {
246
- marginBottom: '12px',
247
- fontSize: '16px',
248
- color: '#666'
249
- }, children: "Connected Wallet" }), _jsx("p", { style: {
250
- wordBreak: 'break-all',
251
- backgroundColor: '#f8f9fa',
252
- padding: '12px',
253
- borderRadius: '8px',
254
- fontSize: '14px',
255
- color: '#333',
256
- border: '1px solid #e9ecef'
257
- }, children: hitAddress })] }), _jsx("p", { style: {
258
- marginBottom: '24px',
259
- fontSize: '16px',
260
- color: '#666'
261
- }, children: isWalletVerified && !isWalletVerifiedWithBerifyme
148
+ return (_jsxs("div", { css: css `
149
+ background-color: white !important;
150
+ padding: 24px !important;
151
+ border-radius: 12px !important;
152
+ width: 480px !important;
153
+ max-width: 90% !important;
154
+ max-height: 90vh !important;
155
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
156
+ display: flex !important;
157
+ flex-direction: column !important;
158
+ overflow: hidden !important;
159
+ `, children: [_jsxs("div", { css: css `
160
+ display: flex !important;
161
+ justify-content: space-between !important;
162
+ align-items: center !important;
163
+ margin-bottom: 24px !important;
164
+ `, children: [_jsx("h3", { css: css `
165
+ margin: 0 !important;
166
+ font-size: 20px !important;
167
+ font-weight: 600 !important;
168
+ color: #1a1a1a !important;
169
+ `, children: "AIT Settings" }), _jsx("button", { onClick: onClose, css: css `
170
+ background: none !important;
171
+ border: none !important;
172
+ font-size: 24px !important;
173
+ cursor: pointer !important;
174
+ color: #666 !important;
175
+ padding: 8px !important;
176
+ display: flex !important;
177
+ align-items: center !important;
178
+ justify-content: center !important;
179
+ border-radius: 4px !important;
180
+ transition: background-color 0.2s !important;
181
+ min-width: 32px !important;
182
+ min-height: 32px !important;
183
+
184
+ &:hover {
185
+ background-color: #f0f0f0 !important;
186
+ color: #333 !important;
187
+ }
188
+ `, title: "Close", children: "\u00D7" })] }), !hitAddress ? (_jsxs("div", { css: css `
189
+ text-align: center !important;
190
+ padding: 32px 0 !important;
191
+ `, children: [_jsx("div", { css: css `
192
+ width: 64px !important;
193
+ height: 64px !important;
194
+ margin: 0 auto 16px !important;
195
+ background-color: #f5f5f5 !important;
196
+ border-radius: 50% !important;
197
+ display: flex !important;
198
+ align-items: center !important;
199
+ justify-content: center !important;
200
+ `, children: _jsx("span", { css: css `font-size: 32px !important;`, children: "\uD83D\uDC5B" }) }), _jsx("p", { css: css `
201
+ margin-bottom: 24px !important;
202
+ font-size: 16px !important;
203
+ color: #666 !important;
204
+ `, children: "Please connect your wallet first" }), _jsx("button", { onClick: onConnectWallet, disabled: Boolean(hitAddress), css: css `
205
+ ${actionButton}
206
+ padding: 12px 24px !important;
207
+ background-color: ${Boolean(hitAddress) ? '#28a745' : '#007bff'} !important;
208
+ border-radius: 8px !important;
209
+ font-size: 16px !important;
210
+ opacity: ${Boolean(hitAddress) ? 0.8 : 1} !important;
211
+
212
+ &:disabled {
213
+ cursor: not-allowed !important;
214
+ }
215
+
216
+ &:hover:not(:disabled) {
217
+ background-color: #0056b3 !important;
218
+ }
219
+ `, children: Boolean(hitAddress) ? 'Connected' : 'Connect Wallet' })] })) : isNeedSignInWithWallet ? (_jsxs("div", { css: css `
220
+ text-align: center !important;
221
+ padding: 32px 0 !important;
222
+ `, children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
223
+ margin-bottom: 12px !important;
224
+ font-size: 16px !important;
225
+ color: #666 !important;
226
+ `, children: "Connected Wallet" }), _jsx("p", { css: css `
227
+ word-break: break-all !important;
228
+ background-color: #f8f9fa !important;
229
+ padding: 12px !important;
230
+ border-radius: 8px !important;
231
+ font-size: 14px !important;
232
+ color: #333 !important;
233
+ border: 1px solid #e9ecef !important;
234
+ `, children: hitAddress })] }), _jsx("p", { css: css `
235
+ margin-bottom: 24px !important;
236
+ font-size: 16px !important;
237
+ color: #666 !important;
238
+ `, children: "Please sign in to continue" }), _jsx("button", { onClick: onSignIn, disabled: !isNeedSignInWithWallet, css: css `
239
+ ${actionButton}
240
+ padding: 12px 24px !important;
241
+ background-color: ${!isNeedSignInWithWallet ? '#28a745' : '#007bff'} !important;
242
+ border-radius: 8px !important;
243
+ font-size: 16px !important;
244
+ opacity: ${!isNeedSignInWithWallet ? 0.8 : 1} !important;
245
+
246
+ &:disabled {
247
+ cursor: not-allowed !important;
248
+ }
249
+
250
+ &:hover:not(:disabled) {
251
+ background-color: #0056b3 !important;
252
+ }
253
+ `, children: !isNeedSignInWithWallet ? 'Signed In' : 'Sign In' })] })) : shouldShowVerificationPrompt ? (_jsxs("div", { css: css `
254
+ text-align: center !important;
255
+ padding: 32px 0 !important;
256
+ `, children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
257
+ margin-bottom: 12px !important;
258
+ font-size: 16px !important;
259
+ color: #666 !important;
260
+ `, children: "Connected Wallet" }), _jsx("p", { css: css `
261
+ word-break: break-all !important;
262
+ background-color: #f8f9fa !important;
263
+ padding: 12px !important;
264
+ border-radius: 8px !important;
265
+ font-size: 14px !important;
266
+ color: #333 !important;
267
+ border: 1px solid #e9ecef !important;
268
+ `, children: hitAddress })] }), _jsx("p", { css: css `
269
+ margin-bottom: 24px !important;
270
+ font-size: 16px !important;
271
+ color: #666 !important;
272
+ `, children: isWalletVerified && !isWalletVerifiedWithBerifyme
262
273
  ? 'Your wallet is verified with custom method, but Berify.me verification is required to continue.'
263
- : 'Please verify your wallet with Berify.me to continue' }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), style: {
264
- padding: '12px 24px',
265
- backgroundColor: '#007bff',
266
- color: 'white',
267
- border: 'none',
268
- borderRadius: '8px',
269
- cursor: 'pointer',
270
- fontSize: '16px',
271
- fontWeight: '500',
272
- transition: 'background-color 0.2s'
273
- }, 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: {
274
- marginBottom: '12px',
275
- fontSize: '16px',
276
- color: '#666'
277
- }, children: "Connected Wallet" }), _jsx("p", { style: {
278
- wordBreak: 'break-all',
279
- backgroundColor: '#f8f9fa',
280
- padding: '12px',
281
- borderRadius: '8px',
282
- fontSize: '14px',
283
- color: '#333',
284
- border: '1px solid #e9ecef'
285
- }, children: hitAddress })] }), _jsxs("div", { style: {
286
- marginBottom: '24px',
287
- flex: 1,
288
- display: 'flex',
289
- flexDirection: 'column',
290
- minHeight: 0
291
- }, children: [_jsx("h4", { style: {
292
- marginBottom: '12px',
293
- fontSize: '16px',
294
- color: '#666',
295
- flexShrink: 0
296
- }, children: "Permissions" }), isAITLoading ? (_jsx("div", { style: {
297
- backgroundColor: '#f8f9fa',
298
- padding: '16px',
299
- borderRadius: '8px',
300
- border: '1px solid #e9ecef',
301
- textAlign: 'center',
302
- color: '#666'
303
- }, children: "Loading permissions..." })) : (_jsx("div", { style: {
304
- backgroundColor: '#f8f9fa',
305
- padding: '16px',
306
- borderRadius: '8px',
307
- border: '1px solid #e9ecef',
308
- flex: 1,
309
- overflowY: 'auto',
310
- overflowX: 'hidden',
311
- minHeight: 0
312
- }, children: availablePermissions.map((permission) => (_jsx("div", { style: { marginBottom: '12px' }, children: _jsxs("label", { style: {
313
- display: 'flex',
314
- alignItems: 'center',
315
- gap: '12px',
316
- cursor: isAITLoading ? 'not-allowed' : 'pointer',
317
- padding: '8px',
318
- borderRadius: '6px',
319
- transition: 'background-color 0.2s',
320
- opacity: isAITLoading ? 0.6 : 1
321
- }, onMouseOver: (e) => {
322
- if (!isAITLoading) {
323
- e.currentTarget.style.backgroundColor = '#e9ecef';
324
- }
325
- }, onMouseOut: (e) => {
326
- if (!isAITLoading) {
327
- e.currentTarget.style.backgroundColor = 'transparent';
328
- }
329
- }, children: [_jsx("input", { type: "checkbox", checked: tempPermissions.includes(permission.label), onChange: () => {
274
+ : 'Please verify your wallet with Berify.me to continue' }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), css: css `
275
+ ${actionButton}
276
+ padding: 12px 24px !important;
277
+ background-color: #007bff !important;
278
+ border-radius: 8px !important;
279
+ font-size: 16px !important;
280
+
281
+ &:hover {
282
+ background-color: #0056b3 !important;
283
+ }
284
+ `, children: "Verify your wallet" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `margin-bottom: 24px !important;`, children: [_jsx("h4", { css: css `
285
+ margin-bottom: 12px !important;
286
+ font-size: 16px !important;
287
+ color: #666 !important;
288
+ `, children: "Connected Wallet" }), _jsx("p", { css: css `
289
+ word-break: break-all !important;
290
+ background-color: #f8f9fa !important;
291
+ padding: 12px !important;
292
+ border-radius: 8px !important;
293
+ font-size: 14px !important;
294
+ color: #333 !important;
295
+ border: 1px solid #e9ecef !important;
296
+ `, children: hitAddress })] }), _jsxs("div", { css: css `
297
+ margin-bottom: 24px !important;
298
+ flex: 1 !important;
299
+ display: flex !important;
300
+ flex-direction: column !important;
301
+ min-height: 0 !important;
302
+ `, children: [_jsx("h4", { css: css `
303
+ margin-bottom: 12px !important;
304
+ font-size: 16px !important;
305
+ color: #666 !important;
306
+ flex-shrink: 0 !important;
307
+ `, children: "Permissions" }), isAITLoading ? (_jsx("div", { css: css `
308
+ background-color: #f8f9fa !important;
309
+ padding: 16px !important;
310
+ border-radius: 8px !important;
311
+ border: 1px solid #e9ecef !important;
312
+ text-align: center !important;
313
+ color: #666 !important;
314
+ `, children: "Loading permissions..." })) : (_jsx("div", { css: css `
315
+ background-color: #f8f9fa !important;
316
+ padding: 16px !important;
317
+ border-radius: 8px !important;
318
+ border: 1px solid #e9ecef !important;
319
+ flex: 1 !important;
320
+ overflow-y: auto !important;
321
+ overflow-x: hidden !important;
322
+ min-height: 0 !important;
323
+ `, children: availablePermissions.map((permission) => (_jsx("div", { css: css `margin-bottom: 12px !important;`, children: _jsxs("label", { css: css `
324
+ display: flex !important;
325
+ align-items: center !important;
326
+ gap: 12px !important;
327
+ cursor: ${isAITLoading ? 'not-allowed' : 'pointer'} !important;
328
+ padding: 8px !important;
329
+ border-radius: 6px !important;
330
+ transition: background-color 0.2s !important;
331
+ opacity: ${isAITLoading ? 0.6 : 1} !important;
332
+
333
+ &:hover {
334
+ background-color: ${!isAITLoading ? '#e9ecef' : 'transparent'} !important;
335
+ }
336
+ `, children: [_jsx("input", { type: "checkbox", checked: tempPermissions.includes(permission.label), onChange: () => {
330
337
  if (!isAITLoading) {
331
338
  const newPermissions = tempPermissions.includes(permission.label)
332
339
  ? tempPermissions.filter(p => p !== permission.label)
@@ -334,55 +341,51 @@ export const PermissionForm = ({ onClose, onOpen }) => {
334
341
  setTempPermissions(newPermissions);
335
342
  setIsDisabled(false);
336
343
  }
337
- }, disabled: isAITLoading, style: {
338
- margin: 0,
339
- width: '18px',
340
- height: '18px',
341
- cursor: isAITLoading ? 'not-allowed' : 'pointer'
342
- } }), _jsx("span", { style: {
343
- fontSize: '14px',
344
- color: '#333'
345
- }, children: permission.label })] }) }, permission.id))) }))] }), _jsxs("div", { style: {
346
- display: 'flex',
347
- justifyContent: 'flex-end',
348
- gap: '12px',
349
- borderTop: '1px solid #e9ecef',
350
- paddingTop: '24px',
351
- flexShrink: 0,
352
- marginTop: 'auto'
353
- }, children: [_jsx("button", { onClick: handleCancel, style: {
354
- padding: '10px 20px',
355
- backgroundColor: '#f8f9fa',
356
- color: '#666',
357
- border: '1px solid #dee2e6',
358
- borderRadius: '8px',
359
- cursor: 'pointer',
360
- fontSize: '14px',
361
- fontWeight: '500',
362
- transition: 'all 0.2s'
363
- }, onMouseOver: (e) => {
364
- e.currentTarget.style.backgroundColor = '#e9ecef';
365
- e.currentTarget.style.borderColor = '#ced4da';
366
- }, onMouseOut: (e) => {
367
- e.currentTarget.style.backgroundColor = '#f8f9fa';
368
- e.currentTarget.style.borderColor = '#dee2e6';
369
- }, children: "Cancel" }), _jsx("button", { onClick: handleSave, disabled: !hasPermissionChanges() || isSaving || isAITLoading, style: {
370
- padding: '10px 20px',
371
- backgroundColor: !hasPermissionChanges() || isSaving || isAITLoading ? '#e9ecef' : '#007bff',
372
- color: !hasPermissionChanges() || isSaving || isAITLoading ? '#6c757d' : 'white',
373
- border: 'none',
374
- borderRadius: '8px',
375
- cursor: !hasPermissionChanges() || isSaving || isAITLoading ? 'not-allowed' : 'pointer',
376
- fontSize: '14px',
377
- fontWeight: '500',
378
- transition: 'background-color 0.2s'
379
- }, onMouseOver: (e) => {
380
- if (hasPermissionChanges() && !isSaving && !isAITLoading) {
381
- e.currentTarget.style.backgroundColor = '#0056b3';
382
- }
383
- }, onMouseOut: (e) => {
384
- if (hasPermissionChanges() && !isSaving && !isAITLoading) {
385
- e.currentTarget.style.backgroundColor = '#007bff';
386
- }
387
- }, children: isSaving ? 'Saving...' : 'Save' })] })] }))] }));
344
+ }, disabled: isAITLoading, css: css `
345
+ margin: 0 !important;
346
+ width: 18px !important;
347
+ height: 18px !important;
348
+ cursor: ${isAITLoading ? 'not-allowed' : 'pointer'} !important;
349
+ ` }), _jsx("span", { css: css `
350
+ font-size: 14px !important;
351
+ color: #333 !important;
352
+ `, children: permission.label })] }) }, permission.id))) }))] }), _jsxs("div", { css: css `
353
+ display: flex !important;
354
+ justify-content: flex-end !important;
355
+ gap: 12px !important;
356
+ border-top: 1px solid #e9ecef !important;
357
+ padding-top: 24px !important;
358
+ flex-shrink: 0 !important;
359
+ margin-top: auto !important;
360
+ `, children: [_jsx("button", { onClick: handleCancel, css: css `
361
+ padding: 10px 20px !important;
362
+ background-color: #f8f9fa !important;
363
+ color: #666 !important;
364
+ border: 1px solid #dee2e6 !important;
365
+ border-radius: 8px !important;
366
+ cursor: pointer !important;
367
+ font-size: 14px !important;
368
+ font-weight: 500 !important;
369
+ transition: all 0.2s !important;
370
+
371
+ &:hover {
372
+ background-color: #e9ecef !important;
373
+ border-color: #ced4da !important;
374
+ }
375
+ `, children: "Cancel" }), _jsx("button", { onClick: handleSave, disabled: !hasPermissionChanges() || isSaving || isAITLoading, css: css `
376
+ ${actionButton}
377
+ padding: 10px 20px !important;
378
+ background-color: ${!hasPermissionChanges() || isSaving || isAITLoading ? '#e9ecef' : '#007bff'} !important;
379
+ color: ${!hasPermissionChanges() || isSaving || isAITLoading ? '#6c757d' : 'white'} !important;
380
+ border-radius: 8px !important;
381
+ font-size: 14px !important;
382
+
383
+ &:disabled {
384
+ cursor: not-allowed !important;
385
+ }
386
+
387
+ &:hover:not(:disabled) {
388
+ background-color: #0056b3 !important;
389
+ }
390
+ `, children: isSaving ? 'Saving...' : 'Save' })] })] }))] }));
388
391
  };