Merge pull request #4 from Bitbaza-Org/chat_popup_state_fix

fix popup modal state and debug api call issue for chat feature

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ZkSurf-ai-browser-extension",
+  "name": "ZkSurf",
   "version": "1.1.0",
   "description": "Web agent to do your bidding online",
   "scripts": {

src/common/App.tsx

@@ -8,6 +8,7 @@ import OptionsDropdown from './OptionsDropdown';
 import logo from '../assets/img/icon-128.png';
 import ChatUI from './ChatUI';
 import LoginComponent from '../Login/LoginComponent';
+import { ModalProvider } from '../context/ModalContext';
 
 const App: React.FC = () => {
   const openAIKey = useAppState((state) => state.settings.openAIKey);
@@ -87,7 +88,9 @@ const App: React.FC = () => {
             </TabPanel>
 
             <TabPanel>
+              <ModalProvider>
               <ChatUI />
+              </ModalProvider>
             </TabPanel>
           </TabPanels>
         </Tabs>

src/common/ChatUI.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useContext } from 'react';
 import { VStack, HStack, Textarea, useToast, Spacer, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton } from '@chakra-ui/react';
 import useChatStore, { ChatMessage } from '../state/chat';
 import RunChatButton from './RunChatButton';
@@ -9,21 +9,23 @@ import PasswordComponent from './PasswordComponent';
 import UpdatePasswordComponent from './UpdatePasswordComponent';
 import CredentialsComponent from './CredentialsComponent';
 import FileUploadComponent from './FileUploadComponent';
+import { ModalContext } from '../context/ModalContext';
 
 
 const ChatUI = () => {
   const [message, setMessage] = useState('');
-  const [file, setFile] = useState<File | null>(null);
-  const [userPass, setUserPass] = useState('');
+  // const [file, setFile] = useState<File | null>(null);
+  // const [userPass, setUserPass] = useState('');
   const [fileName, setFileName] = useState<string>('');
   const [isFileAttached, setIsFileAttached] = useState<boolean>(false); // Track if file is attached
   // const [showUpdatePasswordModal, setShowUpdatePasswordModal] = useState<boolean>(false); // State to control Update Password modal
   // const [showCredentialsModal, setShowCredentialsModal] = useState<boolean>(false); // State to control Credentials modal
-  const [currentPassword, setCurrentPassword] = useState<string>(''); // State to store current password
-  const [newPassword, setNewPassword] = useState<string>(''); // State to store new password
-  const [password, setPassword] = useState<string>(''); // State to store password
-  const [privateKey, setPrivateKey] = useState<string>(''); // State to store private key
+  // const [currentPassword, setCurrentPassword] = useState<string>(''); // State to store current password
+  // const [newPassword, setNewPassword] = useState<string>(''); // State to store new password
+  // const [password, setPassword] = useState<string>(''); // State to store password
+  // const [privateKey, setPrivateKey] = useState<string>(''); // State to store private key
 
+  const { file, setFile, userPass, currentPassword, newPassword, password, privateKey } = useContext(ModalContext);
   const { history, addMessage, generateChat, showPasswordModal, setShowPasswordModal,showCredentialsModal,setShowCredentialsModal,showUpdatePasswordModal,setShowUpdatePasswordModal ,showFileUploadModal,setShowFileUploadModal,} = useChatStore();
   const toast = useToast();
 
@@ -50,6 +52,30 @@ const ChatUI = () => {
     [toast]
   );
 
+  useEffect(() => {
+    if(password){
+      generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    }
+  },[showCredentialsModal])
+
+  useEffect(() => {
+    if(currentPassword){
+      generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    }
+  },[showUpdatePasswordModal])
+
+  useEffect(() => {
+    if(file){
+      generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    }
+  },[showFileUploadModal])
+
+  useEffect(() => {
+    if(password){
+      generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    }
+  },[showPasswordModal])
+
   const handleSendMessage = () => {
     if (message.trim() === '') return;
 
@@ -75,14 +101,14 @@ const ChatUI = () => {
     }
   };
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      const selectedFile = e.target.files[0];
-      setFile(selectedFile);
-      setFileName(selectedFile.name);
-      setIsFileAttached(true); // Set file attachment status
-    }
-  };
+  // const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   if (e.target.files && e.target.files.length > 0) {
+  //     const selectedFile = e.target.files[0];
+  //     setFile(selectedFile);
+  //     setFileName(selectedFile.name);
+  //     setIsFileAttached(true); // Set file attachment status
+  //   }
+  // };
 
   useEffect(() => {
     const chatHistoryElement = document.getElementById('chat-history');
@@ -103,7 +129,10 @@ const ChatUI = () => {
           <ModalHeader>Enter Password</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <PasswordComponent onSubmit={setUserPass} onFileSelect={handleFileChange} />
+            <PasswordComponent 
+          // onSubmit={setUserPass} 
+           //onFileSelect={handleFileChange} 
+           />
           </ModalBody>
           <ModalFooter>
             <Button colorScheme="blue" onClick={hidePasswordInput}>Submit</Button>
@@ -118,10 +147,12 @@ const ChatUI = () => {
           <ModalHeader>Update Password</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <UpdatePasswordComponent onSubmit={(currentPassword, newPassword) => {
-              setCurrentPassword(currentPassword);
-              setNewPassword(newPassword);
-            }} />
+            <UpdatePasswordComponent 
+            // onSubmit={(currentPassword, newPassword) => {
+            //   setCurrentPassword(currentPassword);
+            //   setNewPassword(newPassword);
+            // }} 
+            />
           </ModalBody>
           <ModalFooter>
             <Button colorScheme="blue" onClick={() => setShowUpdatePasswordModal(false)}>Close</Button>
@@ -136,10 +167,12 @@ const ChatUI = () => {
           <ModalHeader>Manage Credentials</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <CredentialsComponent onSubmit={(password, privateKey) => {
-              setPassword(password);
-              setPrivateKey(privateKey);
-            }} />
+            <CredentialsComponent 
+            // onSubmit={(password, privateKey) => {
+            //   setPassword(password);
+            //   setPrivateKey(privateKey);
+            // }} 
+            />
           </ModalBody>
           <ModalFooter>
             <Button colorScheme="blue" onClick={() => setShowCredentialsModal(false)}>Close</Button>
@@ -155,10 +188,10 @@ const ChatUI = () => {
     <ModalCloseButton />
     <ModalBody>
       <FileUploadComponent onFileSelect={(file) => {
-        setFile(file);
+        //setFile(file);
         setFileName(file.name);
         setIsFileAttached(true);
-        setShowFileUploadModal(false);
+        //setShowFileUploadModal(false);
       }} />
     </ModalBody>
     <ModalFooter>

src/common/CredentialsComponent.tsx

@@ -1,13 +1,20 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { Input, Button, Flex, Spacer } from '@chakra-ui/react';
+import { ModalContext } from '../context/ModalContext';
+import useChatStore from '../state/chat';
+import { taikoNodeEnvironmentSetup } from '../api/taikoNodeCreation';
+import { ChatMessage } from '../state/chat';
 
-interface CredentialsComponentProps {
-  onSubmit: (password: string, privateKey: string) => void;
-}
+// interface CredentialsComponentProps {
+//   onSubmit: (password: string, privateKey: string) => void;
+// }
 
-const CredentialsComponent: React.FC<CredentialsComponentProps> = ({ onSubmit }) => {
-  const [password, setPassword] = useState('');
-  const [privateKey, setPrivateKey] = useState('');
+//const CredentialsComponent: React.FC<CredentialsComponentProps> = ({ onSubmit }) => {
+  const CredentialsComponent = () => {
+  const { password, setPassword, privateKey, setPrivateKey } = useContext(ModalContext);
+const {setShowCredentialsModal, addMessage, currentFunctionArguments} = useChatStore((state) => state)
+  // const [password, setPassword] = useState('');
+  // const [privateKey, setPrivateKey] = useState('');
 
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value);
@@ -17,11 +24,22 @@ const CredentialsComponent: React.FC<CredentialsComponentProps> = ({ onSubmit })
     setPrivateKey(e.target.value);
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     if (password.trim() !== '' && privateKey.trim() !== '') {
-      onSubmit(password, privateKey);
-      setPassword('');
-      setPrivateKey('');
+      //onSubmit(password, privateKey);
+      // setPassword(password);
+      // setPrivateKey(privateKey);
+      //console.log("showtest",currentFunctionArguments)
+      const res = await taikoNodeEnvironmentSetup({ host: currentFunctionArguments.host, username: currentFunctionArguments.username, password: password });
+      const newMessage: ChatMessage = {
+        id: Date.now(),
+        sender: 'AI assistant',
+        content: res,
+        timestamp: Date.now(),
+      };
+     //set((state) => ({ ...state, history: [...state.history, newMessage] }));
+     addMessage(newMessage)
+      setShowCredentialsModal(false)
     }
   };
 

src/common/FileUploadComponent.tsx

@@ -1,26 +1,49 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { Box, Button, Flex, Input, Text } from '@chakra-ui/react';
+import { ModalContext } from '../context/ModalContext';
+import useChatStore from '../state/chat';
+import { ChatMessage } from '../state/chat';
+import { dmTelegramMembers } from '../api/dmtelegram';
 
 interface FileUploadComponentProps {
   onFileSelect: (file: File) => void;
 }
 
-const FileUploadComponent: React.FC<FileUploadComponentProps> = ({ onFileSelect }) => {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({ onFileSelect }) => {
+  const { file, setFile, userPass} = useContext(ModalContext);
+  // const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const {setShowFileUploadModal, addMessage, currentFunctionArguments} = useChatStore((state) => state)
 
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
-      const file = e.target.files[0];
-      setSelectedFile(file);
-      onFileSelect(file);
+      // const file = e.target.files[0];
+      // setSelectedFile(file);
+       //onFileSelect(file);
+      const selectedFile = e.target.files[0];
+      setFile(selectedFile);
+      const apikey = localStorage.getItem('telegramApiKey') || '';
+      const apihash = localStorage.getItem('telegramApiHash') || '';
+      const phone = localStorage.getItem('telegramPhoneNumber') || '';
+      if(!selectedFile) throw Error("No file passed!")
+      const res = await dmTelegramMembers(apikey, apihash, phone, currentFunctionArguments.msg,selectedFile)
+      const newMessage: ChatMessage = {
+        id: Date.now(),
+        sender: 'AI assistant',
+        content: "Messages Send Successfully",
+        timestamp: Date.now(),
+      };
+      addMessage(newMessage);
+      setShowFileUploadModal(false)
     }
   };
 
   return (
     <Flex align="center">
       <Box>
-        {selectedFile ? (
-          <Text>{selectedFile.name}</Text>
+        {/* {selectedFile ? (
+          <Text>{selectedFile.name}</Text> */}
+        {file ? (
+          <Text>{file.name}</Text>  
         ) : (
           <Button as="label" htmlFor="file-input" colorScheme="blue">
             Choose File
@@ -32,7 +55,7 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({ onFileSelect
         type="file"
         display="none"
         onChange={handleFileChange}
-        accept=".pdf,.doc,.docx,.jpg,.png"
+        accept=".pdf,.doc,.docx,.jpg,.png,.csv"
       />
     </Flex>
   );

src/common/PasswordComponent.tsx

@@ -1,16 +1,61 @@
-import React, { useState } from 'react';
+import React, { useState ,useContext} from 'react';
 import { Input, Button, Flex, Spacer } from '@chakra-ui/react';
+import { ModalContext } from '../context/ModalContext';
+import useChatStore from '../state/chat';
+import { ChatMessage } from '../state/chat';
+import { sendEmail } from '../api/sendEmail';
 
-interface PasswordComponentProps {
-  onSubmit: (password: string) => void;
-  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void; // Update the type
-}
+// interface PasswordComponentProps {
+//   //onSubmit: (password: string) => void;
+//   //onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void; // Update the type
+// }
 
-const PasswordComponent: React.FC<PasswordComponentProps> = ({ onSubmit, onFileSelect }) => {
-  const [password, setPassword] = useState('');
+//const PasswordComponent: React.FC<PasswordComponentProps> = ({ onSubmit, onFileSelect }) => {
+  const PasswordComponent = () => {
+  //const { setUserPass } = useContext(ModalContext);
+  //const [password, setPassword] = useState('');
+  const { password, setPassword, setUserPass, setFile, file } = useContext(ModalContext);
+  const {setShowPasswordModal,addMessage, currentFunctionArguments} = useChatStore((state) => state)
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const selectedFile = e.target.files[0];
+      setFile(selectedFile);
+      // setFileName(selectedFile.name);
+      // setIsFileAttached(true); // Set file attachment status
+    }
+  };
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUserPass(password)
+    const csv_file = file;
+    console.log("csv check",csv_file)
+    if (!csv_file) {
+      const newMessage: ChatMessage = {
+        id: Date.now(),
+        sender: 'AI assistant',
+        content: "Please attach the csv file with Email field, then type 'Confirm Action'",
+        timestamp: Date.now(),
+      };
+      addMessage(newMessage)
+    }
+    if(!file) throw Error("No file passed!")
+      const res = await sendEmail({
+        user_id: currentFunctionArguments.user_id,
+        subject: currentFunctionArguments.subject,
+        user_pass: password,
+        msg: currentFunctionArguments.msg,
+        csv_file: file 
+      });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPassword(e.target.value);
+      const newMessage: ChatMessage = {
+        id: Date.now(),
+        sender: 'AI assistant',
+        content: res,
+        timestamp: Date.now(),
+      };
+      addMessage(newMessage);
+    setShowPasswordModal(false)
   };
 
   return (
@@ -19,14 +64,14 @@ const PasswordComponent: React.FC<PasswordComponentProps> = ({ onSubmit, onFileS
         type="password"
         placeholder="Enter password"
         value={password}
-        onChange={handleChange}
+        onChange={e => setPassword(e.target.value)}
       />
       <Spacer />
       {/* Attach File button */}
       <input
         type="file"
         style={{ display: 'none' }}
-        onChange={onFileSelect} // Update the event handler here
+        onChange={handleFileChange} // Update the event handler here
         id="attach-file-input"
       />
       <label htmlFor="attach-file-input">
@@ -36,7 +81,7 @@ const PasswordComponent: React.FC<PasswordComponentProps> = ({ onSubmit, onFileS
       </label>
       <Spacer />
       {/* Submit button */}
-      <Button colorScheme="blue" onClick={() => onSubmit(password)}>
+      <Button colorScheme="blue" onClick={handleChange as any} >
         Submit
       </Button>
     </Flex>