@bytexbyte/nxtlinq-ai-agent-sdk 1.2.2 → 1.2.3
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.
- package/README.md +175 -221
- package/dist/api/nxtlinq-api.d.ts.map +1 -1
- package/dist/api/nxtlinq-api.js +121 -142
- package/dist/components/ChatBot.d.ts +2 -44
- package/dist/components/ChatBot.d.ts.map +1 -1
- package/dist/components/ChatBot.js +5 -1241
- package/dist/components/context/ChatBotContext.d.ts +5 -0
- package/dist/components/context/ChatBotContext.d.ts.map +1 -0
- package/dist/components/context/ChatBotContext.js +737 -0
- package/dist/components/types/ChatBotTypes.d.ts +98 -0
- package/dist/components/types/ChatBotTypes.d.ts.map +1 -0
- package/dist/components/types/ChatBotTypes.js +1 -0
- package/dist/components/ui/ChatBotUI.d.ts +3 -0
- package/dist/components/ui/ChatBotUI.d.ts.map +1 -0
- package/dist/components/ui/ChatBotUI.js +146 -0
- package/dist/components/ui/MessageInput.d.ts +3 -0
- package/dist/components/ui/MessageInput.d.ts.map +1 -0
- package/dist/components/ui/MessageInput.js +46 -0
- package/dist/components/ui/MessageList.d.ts +3 -0
- package/dist/components/ui/MessageList.d.ts.map +1 -0
- package/dist/components/ui/MessageList.js +54 -0
- package/dist/components/ui/NotificationModal.d.ts +14 -0
- package/dist/components/ui/NotificationModal.d.ts.map +1 -0
- package/dist/components/ui/NotificationModal.js +79 -0
- package/dist/components/ui/PermissionForm.d.ts +8 -0
- package/dist/components/ui/PermissionForm.d.ts.map +1 -0
- package/dist/components/ui/PermissionForm.js +299 -0
- package/dist/components/ui/PresetMessages.d.ts +3 -0
- package/dist/components/ui/PresetMessages.d.ts.map +1 -0
- package/dist/components/ui/PresetMessages.js +35 -0
- package/dist/core/utils/aitUtils.d.ts +28 -0
- package/dist/core/utils/aitUtils.d.ts.map +1 -0
- package/dist/core/utils/aitUtils.js +34 -0
- package/dist/core/utils/notificationUtils.d.ts +29 -0
- package/dist/core/utils/notificationUtils.d.ts.map +1 -0
- package/dist/core/utils/notificationUtils.js +47 -0
- package/dist/core/utils/walletUtils.d.ts +10 -0
- package/dist/core/utils/walletUtils.d.ts.map +1 -0
- package/dist/core/utils/walletUtils.js +38 -0
- package/dist/index.d.ts +13 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +17 -0
- package/package.json +1 -1
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { Message, AIT, ServicePermission, AITApi } from '../../types/ait-api';
|
|
2
|
+
export interface PresetMessage {
|
|
3
|
+
text: string;
|
|
4
|
+
autoSend?: boolean;
|
|
5
|
+
}
|
|
6
|
+
export interface ToolUse {
|
|
7
|
+
name: string;
|
|
8
|
+
input: Record<string, any>;
|
|
9
|
+
}
|
|
10
|
+
export interface ToolCall {
|
|
11
|
+
toolUse: ToolUse;
|
|
12
|
+
}
|
|
13
|
+
export interface NovaResponse {
|
|
14
|
+
result: string;
|
|
15
|
+
reply: Array<{
|
|
16
|
+
text: string;
|
|
17
|
+
}>;
|
|
18
|
+
toolCall?: ToolCall;
|
|
19
|
+
}
|
|
20
|
+
export interface NovaError {
|
|
21
|
+
error: string;
|
|
22
|
+
}
|
|
23
|
+
export interface AITMetadata {
|
|
24
|
+
model: string;
|
|
25
|
+
permissions: string[];
|
|
26
|
+
issuedBy: string;
|
|
27
|
+
}
|
|
28
|
+
export interface ChatBotProps {
|
|
29
|
+
onMessage?: (message: Message) => void;
|
|
30
|
+
onError?: (error: Error) => void;
|
|
31
|
+
onToolUse?: (toolUse: ToolUse) => Promise<Message | void>;
|
|
32
|
+
presetMessages?: PresetMessage[];
|
|
33
|
+
placeholder?: string;
|
|
34
|
+
className?: string;
|
|
35
|
+
maxRetries?: number;
|
|
36
|
+
retryDelay?: number;
|
|
37
|
+
serviceId: string;
|
|
38
|
+
apiKey: string;
|
|
39
|
+
apiSecret: string;
|
|
40
|
+
onVerifyWallet?: () => Promise<{
|
|
41
|
+
token: string;
|
|
42
|
+
} | undefined>;
|
|
43
|
+
permissionGroup?: string;
|
|
44
|
+
children?: React.ReactNode;
|
|
45
|
+
}
|
|
46
|
+
export interface ChatBotContextType {
|
|
47
|
+
messages: Message[];
|
|
48
|
+
inputValue: string;
|
|
49
|
+
isLoading: boolean;
|
|
50
|
+
isOpen: boolean;
|
|
51
|
+
hitAddress: string | null;
|
|
52
|
+
ait: AIT | null;
|
|
53
|
+
permissions: string[];
|
|
54
|
+
availablePermissions: ServicePermission[];
|
|
55
|
+
showPermissionForm: boolean;
|
|
56
|
+
isPermissionFormOpen: boolean;
|
|
57
|
+
isAITLoading: boolean;
|
|
58
|
+
isDisabled: boolean;
|
|
59
|
+
walletInfo: any;
|
|
60
|
+
isWalletLoading: boolean;
|
|
61
|
+
notification: {
|
|
62
|
+
show: boolean;
|
|
63
|
+
type: 'success' | 'error' | 'warning' | 'info';
|
|
64
|
+
message: string;
|
|
65
|
+
autoHide?: boolean;
|
|
66
|
+
duration?: number;
|
|
67
|
+
};
|
|
68
|
+
setInputValue: (value: string) => void;
|
|
69
|
+
setIsOpen: (open: boolean) => void;
|
|
70
|
+
setShowPermissionForm: (show: boolean) => void;
|
|
71
|
+
setIsPermissionFormOpen: (open: boolean) => void;
|
|
72
|
+
setPermissions: (permissions: string[]) => void;
|
|
73
|
+
setIsDisabled: (disabled: boolean) => void;
|
|
74
|
+
setIsWalletLoading: (loading: boolean) => void;
|
|
75
|
+
setNotification: (notification: any) => void;
|
|
76
|
+
connectWallet: (autoShowSignInMessage?: boolean) => Promise<string | undefined>;
|
|
77
|
+
signInWallet: (autoShowSuccessMessage?: boolean) => Promise<void>;
|
|
78
|
+
sendMessage: (content: string, retryCount?: number) => Promise<void>;
|
|
79
|
+
handleSubmit: (e: React.FormEvent) => Promise<void>;
|
|
80
|
+
handlePresetMessage: (message: PresetMessage) => void;
|
|
81
|
+
savePermissions: () => Promise<void>;
|
|
82
|
+
handleVerifyWalletClick: () => Promise<void>;
|
|
83
|
+
showSuccess: (message: string) => void;
|
|
84
|
+
showError: (message: string) => void;
|
|
85
|
+
showWarning: (message: string) => void;
|
|
86
|
+
showInfo: (message: string) => void;
|
|
87
|
+
refreshAIT: (forceUpdatePermissions?: boolean) => Promise<void>;
|
|
88
|
+
onSave: () => Promise<void>;
|
|
89
|
+
onConnectWallet: () => Promise<string | undefined>;
|
|
90
|
+
onSignIn: () => Promise<void>;
|
|
91
|
+
isNeedSignInWithWallet: boolean;
|
|
92
|
+
onVerifyWallet: () => Promise<void>;
|
|
93
|
+
serviceId: string;
|
|
94
|
+
permissionGroup?: string;
|
|
95
|
+
props: ChatBotProps;
|
|
96
|
+
nxtlinqApi: AITApi;
|
|
97
|
+
}
|
|
98
|
+
//# sourceMappingURL=ChatBotTypes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChatBotTypes.d.ts","sourceRoot":"","sources":["../../../src/components/types/ChatBotTypes.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChatBotUI.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ChatBotUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAkP7B,CAAC"}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useChatBot } from '../context/ChatBotContext';
|
|
4
|
+
import { NotificationModal } from './NotificationModal';
|
|
5
|
+
import { PermissionForm } from './PermissionForm';
|
|
6
|
+
import { MessageList } from './MessageList';
|
|
7
|
+
import { MessageInput } from './MessageInput';
|
|
8
|
+
import { PresetMessages } from './PresetMessages';
|
|
9
|
+
export const ChatBotUI = () => {
|
|
10
|
+
const { isOpen, setIsOpen, showPermissionForm, setShowPermissionForm, notification, setNotification, isAITLoading, props: { className = '' } } = useChatBot();
|
|
11
|
+
// Add CSS animation for loading spinner
|
|
12
|
+
React.useEffect(() => {
|
|
13
|
+
const style = document.createElement('style');
|
|
14
|
+
style.textContent = `
|
|
15
|
+
@keyframes spin {
|
|
16
|
+
0% { transform: rotate(0deg); }
|
|
17
|
+
100% { transform: rotate(360deg); }
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
20
|
+
document.head.appendChild(style);
|
|
21
|
+
return () => {
|
|
22
|
+
document.head.removeChild(style);
|
|
23
|
+
};
|
|
24
|
+
}, []);
|
|
25
|
+
const handleClose = () => {
|
|
26
|
+
setIsOpen(false);
|
|
27
|
+
};
|
|
28
|
+
const handleOpen = () => {
|
|
29
|
+
setIsOpen(true);
|
|
30
|
+
};
|
|
31
|
+
const handleCloseNotification = () => {
|
|
32
|
+
setNotification((prev) => ({ ...prev, show: false }));
|
|
33
|
+
};
|
|
34
|
+
const handleSettingsClick = () => {
|
|
35
|
+
setShowPermissionForm(true);
|
|
36
|
+
};
|
|
37
|
+
// Show floating button when chat is closed
|
|
38
|
+
if (!isOpen) {
|
|
39
|
+
return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleOpen, style: {
|
|
40
|
+
position: 'fixed',
|
|
41
|
+
bottom: '20px',
|
|
42
|
+
right: '20px',
|
|
43
|
+
backgroundColor: '#007bff',
|
|
44
|
+
color: 'white',
|
|
45
|
+
border: 'none',
|
|
46
|
+
padding: '10px 20px',
|
|
47
|
+
borderRadius: '20px',
|
|
48
|
+
cursor: 'pointer',
|
|
49
|
+
boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
|
|
50
|
+
transition: 'all 0.3s ease',
|
|
51
|
+
zIndex: 1000,
|
|
52
|
+
fontSize: '14px',
|
|
53
|
+
fontWeight: '500'
|
|
54
|
+
}, onMouseOver: (e) => {
|
|
55
|
+
e.currentTarget.style.backgroundColor = '#0056b3';
|
|
56
|
+
e.currentTarget.style.transform = 'translateY(-2px)';
|
|
57
|
+
}, onMouseOut: (e) => {
|
|
58
|
+
e.currentTarget.style.backgroundColor = '#007bff';
|
|
59
|
+
e.currentTarget.style.transform = 'translateY(0)';
|
|
60
|
+
}, title: "Open AI Agent Chat", children: "AI Agent" }), notification.show && (_jsx(NotificationModal, { type: notification.type, title: notification.type === 'success' ? 'Success' :
|
|
61
|
+
notification.type === 'error' ? 'Error' :
|
|
62
|
+
notification.type === 'warning' ? 'Warning' : 'Info', message: notification.message, onClose: handleCloseNotification }))] }));
|
|
63
|
+
}
|
|
64
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
|
|
65
|
+
position: 'fixed',
|
|
66
|
+
bottom: '20px',
|
|
67
|
+
right: '20px',
|
|
68
|
+
width: '500px',
|
|
69
|
+
height: '600px',
|
|
70
|
+
backgroundColor: 'white',
|
|
71
|
+
borderRadius: '10px',
|
|
72
|
+
boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
|
|
73
|
+
display: 'flex',
|
|
74
|
+
flexDirection: 'column',
|
|
75
|
+
zIndex: 1001,
|
|
76
|
+
overflow: 'hidden'
|
|
77
|
+
}, className: className, children: [_jsxs("div", { style: {
|
|
78
|
+
padding: '15px',
|
|
79
|
+
backgroundColor: '#007bff',
|
|
80
|
+
color: 'white',
|
|
81
|
+
borderRadius: '10px 10px 0 0',
|
|
82
|
+
display: 'flex',
|
|
83
|
+
justifyContent: 'space-between',
|
|
84
|
+
alignItems: 'center'
|
|
85
|
+
}, children: [_jsxs("div", { style: {
|
|
86
|
+
display: 'flex',
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
gap: '10px'
|
|
89
|
+
}, children: [_jsx("h3", { style: {
|
|
90
|
+
margin: 0,
|
|
91
|
+
fontSize: '16px',
|
|
92
|
+
fontWeight: '600'
|
|
93
|
+
}, children: "AI Agent" }), isAITLoading && (_jsxs("div", { style: {
|
|
94
|
+
display: 'flex',
|
|
95
|
+
alignItems: 'center',
|
|
96
|
+
gap: '5px',
|
|
97
|
+
fontSize: '12px',
|
|
98
|
+
opacity: '0.8'
|
|
99
|
+
}, children: [_jsx("div", { style: {
|
|
100
|
+
width: '12px',
|
|
101
|
+
height: '12px',
|
|
102
|
+
border: '2px solid rgba(255, 255, 255, 0.3)',
|
|
103
|
+
borderTop: '2px solid white',
|
|
104
|
+
borderRadius: '50%',
|
|
105
|
+
animation: 'spin 1s linear infinite'
|
|
106
|
+
} }), "Loading..."] }))] }), _jsxs("div", { style: {
|
|
107
|
+
display: 'flex',
|
|
108
|
+
alignItems: 'center',
|
|
109
|
+
gap: '10px'
|
|
110
|
+
}, children: [_jsx("button", { onClick: handleSettingsClick, style: {
|
|
111
|
+
background: 'none',
|
|
112
|
+
border: 'none',
|
|
113
|
+
color: 'white',
|
|
114
|
+
fontSize: '16px',
|
|
115
|
+
cursor: 'pointer',
|
|
116
|
+
padding: '4px',
|
|
117
|
+
display: 'flex',
|
|
118
|
+
alignItems: 'center',
|
|
119
|
+
justifyContent: 'center',
|
|
120
|
+
borderRadius: '4px',
|
|
121
|
+
transition: 'background-color 0.2s'
|
|
122
|
+
}, 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: {
|
|
123
|
+
background: 'none',
|
|
124
|
+
border: 'none',
|
|
125
|
+
color: 'white',
|
|
126
|
+
fontSize: '24px',
|
|
127
|
+
cursor: 'pointer',
|
|
128
|
+
padding: '0',
|
|
129
|
+
display: 'flex',
|
|
130
|
+
alignItems: 'center',
|
|
131
|
+
justifyContent: 'center'
|
|
132
|
+
}, children: "\u00D7" })] })] }), _jsx(MessageList, {}), _jsx(PresetMessages, {}), _jsx(MessageInput, {})] }), showPermissionForm && (_jsx("div", { style: {
|
|
133
|
+
position: 'fixed',
|
|
134
|
+
top: 0,
|
|
135
|
+
left: 0,
|
|
136
|
+
right: 0,
|
|
137
|
+
bottom: 0,
|
|
138
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
139
|
+
display: 'flex',
|
|
140
|
+
alignItems: 'center',
|
|
141
|
+
justifyContent: 'center',
|
|
142
|
+
zIndex: 1002
|
|
143
|
+
}, children: _jsx(PermissionForm, { onClose: () => setShowPermissionForm(false), onOpen: () => setShowPermissionForm(true) }) })), notification.show && (_jsx(NotificationModal, { type: notification.type, title: notification.type === 'success' ? 'Success' :
|
|
144
|
+
notification.type === 'error' ? 'Error' :
|
|
145
|
+
notification.type === 'warning' ? 'Warning' : 'Info', message: notification.message, onClose: handleCloseNotification }))] }));
|
|
146
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EA0EhC,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useChatBot } from '../context/ChatBotContext';
|
|
3
|
+
export const MessageInput = () => {
|
|
4
|
+
const { inputValue, setInputValue, isLoading, isAITLoading, handleSubmit, props: { placeholder = 'Type a message...' } } = useChatBot();
|
|
5
|
+
const isDisabled = isLoading || isAITLoading;
|
|
6
|
+
const buttonText = isLoading ? 'Sending...' : isAITLoading ? 'Loading...' : 'Send';
|
|
7
|
+
const inputPlaceholder = isAITLoading ? 'Loading wallet configuration...' : placeholder;
|
|
8
|
+
const handleKeyPress = (e) => {
|
|
9
|
+
if (e.key === 'Enter' && !e.shiftKey) {
|
|
10
|
+
e.preventDefault();
|
|
11
|
+
handleSubmit(e);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
return (_jsxs("div", { style: {
|
|
15
|
+
padding: '15px',
|
|
16
|
+
display: 'flex',
|
|
17
|
+
gap: '10px',
|
|
18
|
+
borderTop: '1px solid #eee'
|
|
19
|
+
}, children: [_jsx("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyPress: handleKeyPress, placeholder: inputPlaceholder, disabled: isDisabled, style: {
|
|
20
|
+
flex: 1,
|
|
21
|
+
padding: '10px',
|
|
22
|
+
border: '1px solid #ddd',
|
|
23
|
+
borderRadius: '20px',
|
|
24
|
+
outline: 'none',
|
|
25
|
+
fontSize: '14px',
|
|
26
|
+
backgroundColor: isDisabled ? '#f8f9fa' : '#fff'
|
|
27
|
+
} }), _jsx("button", { onClick: (e) => handleSubmit(e), disabled: isDisabled || !inputValue.trim(), style: {
|
|
28
|
+
backgroundColor: isDisabled || !inputValue.trim() ? '#e9ecef' : '#007bff',
|
|
29
|
+
color: isDisabled || !inputValue.trim() ? '#6c757d' : 'white',
|
|
30
|
+
border: 'none',
|
|
31
|
+
padding: '10px 20px',
|
|
32
|
+
borderRadius: '20px',
|
|
33
|
+
cursor: isDisabled || !inputValue.trim() ? 'not-allowed' : 'pointer',
|
|
34
|
+
fontSize: '14px',
|
|
35
|
+
fontWeight: '500',
|
|
36
|
+
transition: 'background-color 0.3s'
|
|
37
|
+
}, onMouseOver: (e) => {
|
|
38
|
+
if (!isDisabled && inputValue.trim()) {
|
|
39
|
+
e.currentTarget.style.backgroundColor = '#0056b3';
|
|
40
|
+
}
|
|
41
|
+
}, onMouseOut: (e) => {
|
|
42
|
+
if (!isDisabled && inputValue.trim()) {
|
|
43
|
+
e.currentTarget.style.backgroundColor = '#007bff';
|
|
44
|
+
}
|
|
45
|
+
}, children: buttonText })] }));
|
|
46
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA6F/B,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useChatBot } from '../context/ChatBotContext';
|
|
4
|
+
export const MessageList = () => {
|
|
5
|
+
const { messages, isLoading, connectWallet, signInWallet, hitAddress, ait, setShowPermissionForm, isWalletLoading } = useChatBot();
|
|
6
|
+
const messagesEndRef = React.useRef(null);
|
|
7
|
+
const scrollToBottom = () => {
|
|
8
|
+
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
9
|
+
};
|
|
10
|
+
React.useEffect(() => {
|
|
11
|
+
scrollToBottom();
|
|
12
|
+
}, [messages]);
|
|
13
|
+
const handleButtonClick = (buttonType) => {
|
|
14
|
+
if (buttonType === 'connect') {
|
|
15
|
+
connectWallet(true);
|
|
16
|
+
}
|
|
17
|
+
else if (buttonType === 'signIn') {
|
|
18
|
+
signInWallet(true);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
return (_jsxs("div", { style: {
|
|
22
|
+
flex: 1,
|
|
23
|
+
padding: '15px',
|
|
24
|
+
overflowY: 'auto',
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'column',
|
|
27
|
+
gap: '10px'
|
|
28
|
+
}, children: [messages.map((message) => (_jsxs("div", { style: {
|
|
29
|
+
alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
|
|
30
|
+
backgroundColor: message.role === 'user' ? '#007bff' : '#f1f1f1',
|
|
31
|
+
color: message.role === 'user' ? 'white' : '#333',
|
|
32
|
+
padding: '10px 15px',
|
|
33
|
+
borderRadius: '15px',
|
|
34
|
+
maxWidth: '80%',
|
|
35
|
+
marginBottom: '10px',
|
|
36
|
+
wordWrap: 'break-word'
|
|
37
|
+
}, children: [message.content, message.button && (_jsx("div", { style: { marginTop: '10px' }, children: _jsx("button", { onClick: () => handleButtonClick(message.button), style: {
|
|
38
|
+
padding: '8px 16px',
|
|
39
|
+
backgroundColor: message.role === 'user' ? 'rgba(255, 255, 255, 0.2)' : '#007bff',
|
|
40
|
+
color: message.role === 'user' ? 'white' : 'white',
|
|
41
|
+
border: 'none',
|
|
42
|
+
borderRadius: '5px',
|
|
43
|
+
cursor: 'pointer',
|
|
44
|
+
fontSize: '14px'
|
|
45
|
+
}, children: message.button === 'connect' ? 'Connect Wallet' :
|
|
46
|
+
message.button === 'signIn' ? 'Sign In' : message.button }) }))] }, message.id))), isLoading && (_jsx("div", { style: {
|
|
47
|
+
alignSelf: 'flex-start',
|
|
48
|
+
backgroundColor: '#f1f1f1',
|
|
49
|
+
color: '#333',
|
|
50
|
+
padding: '10px 15px',
|
|
51
|
+
borderRadius: '15px',
|
|
52
|
+
maxWidth: '80%'
|
|
53
|
+
}, children: "Thinking..." })), _jsx("div", { ref: messagesEndRef })] }));
|
|
54
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface NotificationModalProps {
|
|
3
|
+
type: 'success' | 'error' | 'info' | 'warning';
|
|
4
|
+
title: string;
|
|
5
|
+
message: string;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
onConfirm?: () => void;
|
|
8
|
+
showConfirm?: boolean;
|
|
9
|
+
confirmText?: string;
|
|
10
|
+
cancelText?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const NotificationModal: React.FC<NotificationModalProps>;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=NotificationModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NotificationModal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/NotificationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,UAAU,sBAAsB;IAC9B,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0H9D,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createNotification, getNotificationIcon } from '../../core/utils/notificationUtils';
|
|
3
|
+
export const NotificationModal = ({ type, title, message, onClose, onConfirm, showConfirm = false, confirmText = 'Confirm', cancelText = 'Cancel' }) => {
|
|
4
|
+
const icon = getNotificationIcon(type);
|
|
5
|
+
const notification = createNotification(type, message);
|
|
6
|
+
return (_jsx("div", { style: {
|
|
7
|
+
position: 'fixed',
|
|
8
|
+
top: 0,
|
|
9
|
+
left: 0,
|
|
10
|
+
right: 0,
|
|
11
|
+
bottom: 0,
|
|
12
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
13
|
+
display: 'flex',
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
justifyContent: 'center',
|
|
16
|
+
zIndex: 1000
|
|
17
|
+
}, children: _jsxs("div", { style: {
|
|
18
|
+
backgroundColor: 'white',
|
|
19
|
+
padding: '24px',
|
|
20
|
+
borderRadius: '12px',
|
|
21
|
+
width: '400px',
|
|
22
|
+
maxWidth: '90%',
|
|
23
|
+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
|
|
24
|
+
textAlign: 'center'
|
|
25
|
+
}, children: [_jsx("div", { style: {
|
|
26
|
+
fontSize: '48px',
|
|
27
|
+
marginBottom: '16px'
|
|
28
|
+
}, children: icon }), _jsx("h3", { style: {
|
|
29
|
+
margin: '0 0 12px 0',
|
|
30
|
+
fontSize: '20px',
|
|
31
|
+
fontWeight: '600',
|
|
32
|
+
color: '#1a1a1a'
|
|
33
|
+
}, children: title }), _jsx("p", { style: {
|
|
34
|
+
margin: '0 0 24px 0',
|
|
35
|
+
fontSize: '16px',
|
|
36
|
+
color: '#666',
|
|
37
|
+
lineHeight: '1.5'
|
|
38
|
+
}, children: message }), _jsxs("div", { style: {
|
|
39
|
+
display: 'flex',
|
|
40
|
+
justifyContent: 'center',
|
|
41
|
+
gap: '12px'
|
|
42
|
+
}, children: [showConfirm && onConfirm && (_jsx("button", { onClick: onConfirm, style: {
|
|
43
|
+
padding: '10px 20px',
|
|
44
|
+
backgroundColor: type === 'error' ? '#dc3545' : '#007bff',
|
|
45
|
+
color: 'white',
|
|
46
|
+
border: 'none',
|
|
47
|
+
borderRadius: '8px',
|
|
48
|
+
cursor: 'pointer',
|
|
49
|
+
fontSize: '14px',
|
|
50
|
+
fontWeight: '500',
|
|
51
|
+
transition: 'background-color 0.2s'
|
|
52
|
+
}, onMouseOver: (e) => e.currentTarget.style.backgroundColor = type === 'error' ? '#c82333' : '#0056b3', onMouseOut: (e) => e.currentTarget.style.backgroundColor = type === 'error' ? '#dc3545' : '#007bff', children: confirmText })), _jsx("button", { onClick: onClose, style: {
|
|
53
|
+
padding: '10px 20px',
|
|
54
|
+
backgroundColor: showConfirm ? '#f8f9fa' : '#007bff',
|
|
55
|
+
color: showConfirm ? '#666' : 'white',
|
|
56
|
+
border: showConfirm ? '1px solid #dee2e6' : 'none',
|
|
57
|
+
borderRadius: '8px',
|
|
58
|
+
cursor: 'pointer',
|
|
59
|
+
fontSize: '14px',
|
|
60
|
+
fontWeight: '500',
|
|
61
|
+
transition: 'all 0.2s'
|
|
62
|
+
}, onMouseOver: (e) => {
|
|
63
|
+
if (showConfirm) {
|
|
64
|
+
e.currentTarget.style.backgroundColor = '#e9ecef';
|
|
65
|
+
e.currentTarget.style.borderColor = '#ced4da';
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
e.currentTarget.style.backgroundColor = '#0056b3';
|
|
69
|
+
}
|
|
70
|
+
}, onMouseOut: (e) => {
|
|
71
|
+
if (showConfirm) {
|
|
72
|
+
e.currentTarget.style.backgroundColor = '#f8f9fa';
|
|
73
|
+
e.currentTarget.style.borderColor = '#dee2e6';
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
e.currentTarget.style.backgroundColor = '#007bff';
|
|
77
|
+
}
|
|
78
|
+
}, children: cancelText })] })] }) }));
|
|
79
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PermissionForm.d.ts","sourceRoot":"","sources":["../../../src/components/ui/PermissionForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwcxD,CAAC"}
|