From 0edc5ad5ff9ef9d7320f86c54d03e3708668c418 Mon Sep 17 00:00:00 2001
From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
Date: Mon, 15 Apr 2024 12:48:52 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1Improve:=20Codebase=20and=20popup=20mo?=
 =?UTF-8?q?dal=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/App.tsx                     |  34 +--
 src/common/ChatUI.tsx                  | 205 ++++++++++--------
 src/common/CredentialsComponent.tsx    |  39 ++--
 src/common/FileUploadComponent.tsx     |  36 ++--
 src/common/PasswordComponent.tsx       |  87 ++++----
 src/common/UpdatePasswordComponent.tsx |  34 ++-
 src/context/ModalContext.tsx           |  10 +-
 src/state/chat.ts                      | 280 ++++++++++++-------------
 8 files changed, 376 insertions(+), 349 deletions(-)

diff --git a/src/common/App.tsx b/src/common/App.tsx
index f85d497..9a49e82 100644
--- a/src/common/App.tsx
+++ b/src/common/App.tsx
@@ -1,5 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Box, ChakraProvider, Heading, HStack, Tabs, TabList, Tab, TabPanels, TabPanel, Button, Input } from '@chakra-ui/react';
+import {
+  Box,
+  ChakraProvider,
+  Heading,
+  HStack,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Button,
+  Input,
+} from '@chakra-ui/react';
 import { useAppState } from '../state/store';
 import ModelDropdown from './ModelDropdown';
 import SetAPIKey from './SetAPIKey';
@@ -15,15 +27,14 @@ const App: React.FC = () => {
   const [loggedIn, setLoggedIn] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
-
   useEffect(() => {
     // Check local storage to see if the user has already logged in
     const isUserLoggedIn = localStorage.getItem('userLoggedIn');
     if (isUserLoggedIn === 'true') {
-      console.log(isUserLoggedIn)
+      console.log(isUserLoggedIn);
       setLoggedIn(true);
     } else {
-      setLoggedIn(false)
+      setLoggedIn(false);
     }
   }, []);
 
@@ -43,10 +54,8 @@ const App: React.FC = () => {
     }
 
     // Call the parent component callback with the selected file and message
-
   };
 
-
   return (
     <ChakraProvider>
       <Box p="8" fontSize="lg" w="full">
@@ -62,13 +71,13 @@ const App: React.FC = () => {
             <Heading as="h1" size="lg" flex={1}>
               ZkSurf
             </Heading>
-            {/* {loggedIn ?(
+            {loggedIn ?(
             <Button
       onClick={handleLogout}
       colorScheme="red"
     >
       Logout
-    </Button>):NaN} */}
+    </Button>):NaN}
             <HStack spacing={2}>
               <ModelDropdown />
               <OptionsDropdown />
@@ -76,7 +85,7 @@ const App: React.FC = () => {
           </HStack>
         </Box>
 
-        {/* {loggedIn ? ( */}
+        {loggedIn ? (
         <Tabs>
           <TabList>
             <Tab>Browser Automation</Tab>
@@ -89,16 +98,15 @@ const App: React.FC = () => {
 
             <TabPanel>
               <ModalProvider>
-              <ChatUI />
+                <ChatUI />
               </ModalProvider>
             </TabPanel>
           </TabPanels>
         </Tabs>
 
-        {/* ) : (
+        ) : (
   <LoginComponent />
-)} */}
-
+)} 
       </Box>
     </ChakraProvider>
   );
diff --git a/src/common/ChatUI.tsx b/src/common/ChatUI.tsx
index 622e4c2..66e2f77 100644
--- a/src/common/ChatUI.tsx
+++ b/src/common/ChatUI.tsx
@@ -1,5 +1,19 @@
 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 {
+  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';
 import ChatHistory from './ChatHistory';
@@ -11,22 +25,33 @@ 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 [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 { file, setFile, userPass, currentPassword, newPassword, password, privateKey } = useContext(ModalContext);
-  const { history, addMessage, generateChat, showPasswordModal, setShowPasswordModal,showCredentialsModal,setShowCredentialsModal,showUpdatePasswordModal,setShowUpdatePasswordModal ,showFileUploadModal,setShowFileUploadModal,} = useChatStore();
+
+  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();
 
   useEffect(() => {
@@ -53,28 +78,60 @@ const ChatUI = () => {
   );
 
   useEffect(() => {
-    if(password){
-      generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    if (password) {
+      generateChat(
+        message.trim(),
+        file,
+        userPass,
+        currentPassword,
+        newPassword,
+        password,
+        privateKey
+      );
     }
-  },[showCredentialsModal])
+  }, [showCredentialsModal]);
 
   useEffect(() => {
-    if(currentPassword){
-      generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    if (currentPassword) {
+      generateChat(
+        message.trim(),
+        file,
+        userPass,
+        currentPassword,
+        newPassword,
+        password,
+        privateKey
+      );
     }
-  },[showUpdatePasswordModal])
+  }, [showUpdatePasswordModal]);
 
   useEffect(() => {
-    if(file){
-      generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    if (file) {
+      generateChat(
+        message.trim(),
+        file,
+        userPass,
+        currentPassword,
+        newPassword,
+        password,
+        privateKey
+      );
     }
-  },[showFileUploadModal])
+  }, [showFileUploadModal]);
 
   useEffect(() => {
-    if(password){
-      generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    if (password) {
+      generateChat(
+        message.trim(),
+        file,
+        userPass,
+        currentPassword,
+        newPassword,
+        password,
+        privateKey
+      );
     }
-  },[showPasswordModal])
+  }, [showPasswordModal]);
 
   const handleSendMessage = () => {
     if (message.trim() === '') return;
@@ -87,7 +144,15 @@ const ChatUI = () => {
     };
 
     addMessage(newMessage);
-    generateChat(message.trim(), file, userPass, currentPassword, newPassword, password, privateKey);
+    generateChat(
+      message.trim(),
+      file,
+      userPass,
+      currentPassword,
+      newPassword,
+      password,
+      privateKey
+    );
     setMessage('');
     setFile(null);
     setFileName('');
@@ -101,15 +166,6 @@ 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
-  //   }
-  // };
-
   useEffect(() => {
     const chatHistoryElement = document.getElementById('chat-history');
     if (chatHistoryElement) {
@@ -129,76 +185,60 @@ const ChatUI = () => {
           <ModalHeader>Enter Password</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <PasswordComponent 
-          // onSubmit={setUserPass} 
-           //onFileSelect={handleFileChange} 
-           />
+            <PasswordComponent />
           </ModalBody>
-          <ModalFooter>
-            <Button colorScheme="blue" onClick={hidePasswordInput}>Submit</Button>
-          </ModalFooter>
         </ModalContent>
       </Modal>
 
       {/* Update Password Modal */}
-      <Modal isOpen={showUpdatePasswordModal} onClose={() => setShowUpdatePasswordModal(false)}>
+      <Modal
+        isOpen={showUpdatePasswordModal}
+        onClose={() => setShowUpdatePasswordModal(false)}
+      >
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>Update Password</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <UpdatePasswordComponent 
-            // onSubmit={(currentPassword, newPassword) => {
-            //   setCurrentPassword(currentPassword);
-            //   setNewPassword(newPassword);
-            // }} 
-            />
+            <UpdatePasswordComponent />
           </ModalBody>
-          <ModalFooter>
-            <Button colorScheme="blue" onClick={() => setShowUpdatePasswordModal(false)}>Close</Button>
-          </ModalFooter>
         </ModalContent>
       </Modal>
 
       {/* Credentials Modal */}
-      <Modal isOpen={showCredentialsModal} onClose={() => setShowCredentialsModal(false)}>
+      <Modal
+        isOpen={showCredentialsModal}
+        onClose={() => setShowCredentialsModal(false)}
+      >
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>Manage Credentials</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <CredentialsComponent 
-            // onSubmit={(password, privateKey) => {
-            //   setPassword(password);
-            //   setPrivateKey(privateKey);
-            // }} 
-            />
+            <CredentialsComponent />
           </ModalBody>
-          <ModalFooter>
-            <Button colorScheme="blue" onClick={() => setShowCredentialsModal(false)}>Close</Button>
-          </ModalFooter>
         </ModalContent>
       </Modal>
 
       {/* File Upload Modal */}
-<Modal isOpen={showFileUploadModal} onClose={() => setShowFileUploadModal(false)}>
-  <ModalOverlay />
-  <ModalContent>
-    <ModalHeader>Upload File</ModalHeader>
-    <ModalCloseButton />
-    <ModalBody>
-      <FileUploadComponent onFileSelect={(file) => {
-        //setFile(file);
-        setFileName(file.name);
-        setIsFileAttached(true);
-        //setShowFileUploadModal(false);
-      }} />
-    </ModalBody>
-    <ModalFooter>
-      <Button colorScheme="blue" onClick={() => setShowFileUploadModal(false)}>Close</Button>
-    </ModalFooter>
-  </ModalContent>
-</Modal>
+      <Modal
+        isOpen={showFileUploadModal}
+        onClose={() => setShowFileUploadModal(false)}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Upload File</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <FileUploadComponent
+              onFileSelect={(file) => {
+                setFileName(file.name);
+                setIsFileAttached(true);
+              }}
+            />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
 
       <ChatHistory messages={history} />
       <Textarea
@@ -210,15 +250,12 @@ const ChatUI = () => {
         mb={2}
         onKeyDown={onKeyDown}
       />
-      <HStack mt={2}>
-        {isFileAttached && <span>{fileName}</span>}
-      </HStack>
+      <HStack mt={2}>{isFileAttached && <span>{fileName}</span>}</HStack>
       <HStack mt={2}>
         <RunChatButton sendMessage={handleSendMessage} />
         <Spacer />
         {debugMode && <TaskStatus />}
       </HStack>
-
     </>
   );
 };
diff --git a/src/common/CredentialsComponent.tsx b/src/common/CredentialsComponent.tsx
index 294e8a9..8cdcd2b 100644
--- a/src/common/CredentialsComponent.tsx
+++ b/src/common/CredentialsComponent.tsx
@@ -5,16 +5,11 @@ import useChatStore from '../state/chat';
 import { taikoNodeEnvironmentSetup } from '../api/taikoNodeCreation';
 import { ChatMessage } from '../state/chat';
 
-// interface CredentialsComponentProps {
-//   onSubmit: (password: string, privateKey: string) => void;
-// }
-
-//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 CredentialsComponent = () => {
+  const { password, setPassword, privateKey, setPrivateKey } =
+    useContext(ModalContext);
+  const { setShowCredentialsModal, addMessage, currentFunctionArguments } =
+    useChatStore((state) => state);
 
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value);
@@ -26,39 +21,39 @@ const {setShowCredentialsModal, addMessage, currentFunctionArguments} = useChatS
 
   const handleSubmit = async () => {
     if (password.trim() !== '' && privateKey.trim() !== '') {
-      //onSubmit(password, privateKey);
-      // setPassword(password);
-      // setPrivateKey(privateKey);
-      //console.log("showtest",currentFunctionArguments)
-      const res = await taikoNodeEnvironmentSetup({ host: currentFunctionArguments.host, username: currentFunctionArguments.username, password: password });
+      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)
+      addMessage(newMessage);
+      setShowCredentialsModal(false);
     }
   };
 
   return (
-    <Flex>
+    <Flex direction="column" align="center" w="full" maxW="md" mx="auto">
       <Input
         type="password"
         placeholder="Enter password"
         value={password}
         onChange={handlePasswordChange}
+        mb={4}
       />
-      <Spacer />
       <Input
         type="password"
         placeholder="Enter private key"
         value={privateKey}
         onChange={handlePrivateKeyChange}
-      /><Spacer/>
-      <Button colorScheme="blue" onClick={handleSubmit}>
+        mb={6}
+      />
+      <Button colorScheme="blue" onClick={handleSubmit} w="full" maxW="sm" mb={6}>
         Submit
       </Button>
     </Flex>
diff --git a/src/common/FileUploadComponent.tsx b/src/common/FileUploadComponent.tsx
index b649a6e..cd5513f 100644
--- a/src/common/FileUploadComponent.tsx
+++ b/src/common/FileUploadComponent.tsx
@@ -9,41 +9,44 @@ interface FileUploadComponentProps {
   onFileSelect: (file: File) => void;
 }
 
- 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 FileUploadComponent: React.FC<FileUploadComponentProps> = ({
+  onFileSelect,
+}) => {
+  const { file, setFile, userPass } = useContext(ModalContext);
+  const { setShowFileUploadModal, addMessage, currentFunctionArguments } =
+    useChatStore((state) => state);
 
   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 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)
+      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",
+        content: 'Messages Send Successfully',
         timestamp: Date.now(),
       };
       addMessage(newMessage);
-      setShowFileUploadModal(false)
+      setShowFileUploadModal(false);
     }
   };
 
   return (
-    <Flex align="center">
+    <Flex align="center" direction="column" w="full" maxW="md" mx="auto">
       <Box>
-        {/* {selectedFile ? (
-          <Text>{selectedFile.name}</Text> */}
         {file ? (
-          <Text>{file.name}</Text>  
+          <Text>{file.name}</Text>
         ) : (
           <Button as="label" htmlFor="file-input" colorScheme="blue">
             Choose File
@@ -56,9 +59,10 @@ interface FileUploadComponentProps {
         display="none"
         onChange={handleFileChange}
         accept=".pdf,.doc,.docx,.jpg,.png,.csv"
+        mb={4}
       />
     </Flex>
   );
 };
 
-export default FileUploadComponent;
\ No newline at end of file
+export default FileUploadComponent;
diff --git a/src/common/PasswordComponent.tsx b/src/common/PasswordComponent.tsx
index a633d79..21e0ea5 100644
--- a/src/common/PasswordComponent.tsx
+++ b/src/common/PasswordComponent.tsx
@@ -1,53 +1,49 @@
-import React, { useState ,useContext} from 'react';
-import { Input, Button, Flex, Spacer } from '@chakra-ui/react';
+import React, { useState, useContext } from 'react';
+import { Input, Button, Flex, Spacer, Box } 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
-// }
+const PasswordComponent = () => {
+  const { password, setPassword, setUserPass, setFile, file } =
+    useContext(ModalContext);
+  const { setShowPasswordModal, addMessage, currentFunctionArguments } =
+    useChatStore((state) => state);
+  const [isLoading, setIsLoading] = useState(false);
 
-//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)
+    setUserPass(password);
     const csv_file = file;
-    console.log("csv check",csv_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'",
+        content:
+          "Please attach the csv file with Email field, then type 'Confirm Action'",
         timestamp: Date.now(),
       };
-      addMessage(newMessage)
+      addMessage(newMessage);
     }
-    if(!file) throw Error("No file passed!")
+    if (!file) throw Error('No file passed!');
+    setIsLoading(true);
+    try{
       const res = await sendEmail({
         user_id: currentFunctionArguments.user_id,
         subject: currentFunctionArguments.subject,
         user_pass: password,
         msg: currentFunctionArguments.msg,
-        csv_file: file 
+        csv_file: file,
       });
-
+  
       const newMessage: ChatMessage = {
         id: Date.now(),
         sender: 'AI assistant',
@@ -55,33 +51,42 @@ import { sendEmail } from '../api/sendEmail';
         timestamp: Date.now(),
       };
       addMessage(newMessage);
-    setShowPasswordModal(false)
+    }catch(error){
+      console.error(error)
+    }finally{
+      setIsLoading(false); 
+      setShowPasswordModal(false);
+    }
   };
 
   return (
-    <Flex>
+    <Flex direction="column" align="center" w="full" maxW="md" mx="auto">
       <Input
         type="password"
         placeholder="Enter password"
         value={password}
-        onChange={e => setPassword(e.target.value)}
-      />
-      <Spacer />
-      {/* Attach File button */}
-      <input
-        type="file"
-        style={{ display: 'none' }}
-        onChange={handleFileChange} // Update the event handler here
-        id="attach-file-input"
+        onChange={(e) => setPassword(e.target.value)}
+        mb={4}
       />
-      <label htmlFor="attach-file-input">
-        <Button colorScheme="blue" as="span">
-          Attach File
-        </Button>
-      </label>
-      <Spacer />
-      {/* Submit button */}
-      <Button colorScheme="blue" onClick={handleChange as any} >
+      <Box w="full" mb={6}>
+        <Flex>
+          <input
+            type="file"
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+            id="attach-file-input"
+          />
+          <Button
+            colorScheme="blue"
+            as="label"
+            htmlFor="attach-file-input"
+            flex="1"
+          >
+            Attach File
+          </Button>
+        </Flex>
+      </Box>
+      <Button colorScheme="blue" onClick={handleChange as any} mb={4} isLoading={isLoading}  loadingText="Sending email...">
         Submit
       </Button>
     </Flex>
diff --git a/src/common/UpdatePasswordComponent.tsx b/src/common/UpdatePasswordComponent.tsx
index 5c4531a..2fd3f7f 100644
--- a/src/common/UpdatePasswordComponent.tsx
+++ b/src/common/UpdatePasswordComponent.tsx
@@ -5,20 +5,15 @@ import useChatStore from '../state/chat';
 import { changeNodePassword } from '../api/changeNodePassword';
 import { ChatMessage } from '../state/chat';
 
-// interface UpdatePasswordComponentProps {
-//   onSubmit: (currentPassword: string, newPassword: string) => void;
-// }
-
-//const UpdatePasswordComponent: React.FC<UpdatePasswordComponentProps> = ({ onSubmit }) => {
 const UpdatePasswordComponent = () => {
+  const { currentPassword, setCurrentPassword, newPassword, setNewPassword } =
+    useContext(ModalContext);
 
-  const { currentPassword, setCurrentPassword, newPassword, setNewPassword } = useContext(ModalContext);
-
-  // const [currentPassword, setCurrentPassword] = useState('');
-  // const [newPassword, setNewPassword] = useState('');
-
-  const {setShowUpdatePasswordModal, addMessage, currentFunctionArguments} = useChatStore((state) => state)
-  const handleCurrentPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const { setShowUpdatePasswordModal, addMessage, currentFunctionArguments } =
+    useChatStore((state) => state);
+  const handleCurrentPasswordChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
     setCurrentPassword(e.target.value);
   };
 
@@ -28,9 +23,6 @@ const UpdatePasswordComponent = () => {
 
   const handleSubmit = async () => {
     if (currentPassword.trim() !== '' && newPassword.trim() !== '') {
-      //onSubmit(currentPassword, newPassword);
-      //setCurrentPassword(currentPassword);
-      //setNewPassword(newPassword);
       const res = await changeNodePassword({
         host: currentFunctionArguments.host,
         username: currentFunctionArguments.username,
@@ -44,28 +36,28 @@ const UpdatePasswordComponent = () => {
         content: res,
         timestamp: Date.now(),
       };
-      addMessage(newMessage)
-      setShowUpdatePasswordModal(false)
+      addMessage(newMessage);
+      setShowUpdatePasswordModal(false);
     }
   };
 
   return (
-    <Flex>
+    <Flex direction="column" align="center" w="full" maxW="md" mx="auto">
       <Input
         type="password"
         placeholder="Enter current password"
         value={currentPassword}
         onChange={handleCurrentPasswordChange}
+        mb={4}
       />
-      <Spacer />
       <Input
         type="password"
         placeholder="Enter new password"
         value={newPassword}
         onChange={handleNewPasswordChange}
+        mb={6}
       />
-      <Spacer />
-      <Button colorScheme="blue" onClick={handleSubmit}>
+      <Button colorScheme="blue" onClick={handleSubmit} mb={4}>
         Update Password
       </Button>
     </Flex>
diff --git a/src/context/ModalContext.tsx b/src/context/ModalContext.tsx
index 6ca73ef..da16022 100644
--- a/src/context/ModalContext.tsx
+++ b/src/context/ModalContext.tsx
@@ -30,7 +30,9 @@ export const ModalContext = createContext<ModalContextValue>({
   setPrivateKey: () => {},
 });
 
-export const ModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const ModalProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const [file, setFile] = useState<File | null>(null);
   const [userPass, setUserPass] = useState('');
   const [currentPassword, setCurrentPassword] = useState('');
@@ -53,5 +55,7 @@ export const ModalProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     setPrivateKey,
   };
 
-  return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
-};
\ No newline at end of file
+  return (
+    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
+  );
+};
diff --git a/src/state/chat.ts b/src/state/chat.ts
index 4c96a54..3b7b35f 100644
--- a/src/state/chat.ts
+++ b/src/state/chat.ts
@@ -1,7 +1,10 @@
 import { create } from 'zustand';
 import { determineNextChat } from '../helpers/determineNextChat';
 import getLastUserMessage from '../helpers/getLastUserMessage';
-import { taikoNodeEnvironmentSetup, taikoNodeAndDashboardSetup } from "../api/taikoNodeCreation";
+import {
+  taikoNodeEnvironmentSetup,
+  taikoNodeAndDashboardSetup,
+} from '../api/taikoNodeCreation';
 import { changeNodePassword } from '../api/changeNodePassword';
 import { sendEmail } from '../api/sendEmail';
 import { authenticateCode, requestCode } from '../api/telegram_auth';
@@ -49,10 +52,11 @@ const useChatStore = create<ChatState>((set) => ({
   setShowUpdatePasswordModal: (show) => set({ showUpdatePasswordModal: show }),
   showCredentialsModal: false,
   setShowCredentialsModal: (show) => set({ showCredentialsModal: show }),
-  showFileUploadModal :false,
-  setShowFileUploadModal:(show) =>set({showFileUploadModal:show}),
+  showFileUploadModal: false,
+  setShowFileUploadModal: (show) => set({ showFileUploadModal: show }),
   currentFunctionArguments: null, // Add this line
-  setCurrentFunctionArguments: (args) => set({ currentFunctionArguments: args }), // Add this line
+  setCurrentFunctionArguments: (args) =>
+    set({ currentFunctionArguments: args }), // Add this line
 
   addMessage: (message) =>
     set((state) => ({ ...state, history: [...state.history, message] })),
@@ -66,101 +70,88 @@ const useChatStore = create<ChatState>((set) => ({
     password,
     privateKey
   ) => {
-
     try {
-      const lastUserMessage = getLastUserMessage(useChatStore.getState().history);
+      const lastUserMessage = getLastUserMessage(
+        useChatStore.getState().history
+      );
       if (!lastUserMessage) {
         console.error('No user message found in history.');
         return;
       }
 
-      const parseToolCallFromResponse = (response: string): { functionName: string; functionArguments: any } | null => {
+      const parseToolCallFromResponse = (
+        response: string
+      ): { functionName: string; functionArguments: any } | null => {
         try {
-            const matches = response.match(/<tool_call>(.*?)<\/tool_call>/s);
-            
-            if (matches && matches[1]) {
-                let toolCallJson = matches[1].trim();
-                
-                // Attempt to make the JSON valid by replacing single quotes with double quotes
-                // This is simplistic and may not handle all edge cases
-                toolCallJson = toolCallJson.replace(/'/g, '"');
-                
-                // Attempt to handle escaped single quotes in values
-                toolCallJson = toolCallJson.replace(/\\\\"/g, '\'');
-    
-                const toolCall = JSON.parse(toolCallJson);
-    
-                return {
-                    functionName: toolCall.name,
-                    functionArguments: toolCall.arguments,
-                };
-            }
+          const matches = response.match(/<tool_call>(.*?)<\/tool_call>/s);
+
+          if (matches && matches[1]) {
+            let toolCallJson = matches[1].trim();
+
+            // Attempt to make the JSON valid by replacing single quotes with double quotes
+            // This is simplistic and may not handle all edge cases
+            toolCallJson = toolCallJson.replace(/'/g, '"');
+
+            // Attempt to handle escaped single quotes in values
+            toolCallJson = toolCallJson.replace(/\\\\"/g, "'");
+
+            const toolCall = JSON.parse(toolCallJson);
+
+            return {
+              functionName: toolCall.name,
+              functionArguments: toolCall.arguments,
+            };
+          }
         } catch (error) {
-            console.error('Error parsing tool call:', error);
+          console.error('Error parsing tool call:', error);
         }
         return null;
-    };
-    
-    
-    
-    
-    const chatResponse = await determineNextChat(message);
-    if (chatResponse) {
-      const { response } = chatResponse;
-      // const { messages } = chatResponse
-      const toolCallInfo = parseToolCallFromResponse(response);
-      let contentWithoutActionTag = response.replace(/<tool_call>(.*?)<\/tool_call>/s, '');
+      };
+
+      const chatResponse = await determineNextChat(message);
+      if (chatResponse) {
+        const { response } = chatResponse;
+        // const { messages } = chatResponse
+        const toolCallInfo = parseToolCallFromResponse(response);
+        let contentWithoutActionTag = response.replace(
+          /<tool_call>(.*?)<\/tool_call>/s,
+          ''
+        );
         if (contentWithoutActionTag.length === 0) {
-          // const newMessage: ChatMessage = {
-          //   id: Date.now(),
-          //   sender: 'AI assistant',
-          //   content: response,
-          //   timestamp: Date.now(),
-          //     };
-          // set((state) => ({ ...state, history: [...state.history, newMessage] }));
           // contentWithoutActionTag = 'Once given all details just say call tool with given details or if tool is called then wait for some time';
-        }else{
-        const newMessage: ChatMessage = {
-          id: Date.now(),
-          sender: 'AI assistant',
-          content: contentWithoutActionTag,
-          timestamp: Date.now(),
-            };
-        set((state) => ({ ...state, history: [...state.history, newMessage] }));
-          }
-        // const waitForDetails = async (variable: any) => {
-        //   while (!variable) {
-        //     // Do nothing and keep looping until the variable is provided
-        //     await new Promise(resolve => setTimeout(resolve, 100)); // Wait for 100 milliseconds before checking again
-        //   }
-        // };
+        } else {
+          const newMessage: ChatMessage = {
+            id: Date.now(),
+            sender: 'AI assistant',
+            content: contentWithoutActionTag,
+            timestamp: Date.now(),
+          };
+          set((state) => ({
+            ...state,
+            history: [...state.history, newMessage],
+          }));
+        }
 
         // const toolCallInfo = parseToolCallFromResponse(response);
         if (toolCallInfo) {
           const { functionName, functionArguments } = toolCallInfo;
 
-          console.log(functionName,functionArguments.host)
+          console.log(functionName, functionArguments.host);
           // Check if all parameters are not null
-          const allParametersNotNull = Object.values(functionArguments).every(value => value !== 'null');
+          const allParametersNotNull = Object.values(functionArguments).every(
+            (value) => value !== 'null'
+          );
           if (allParametersNotNull) {
             if (functionName === 'TaikoNodeEnvironmentSetup') {
               if (!password || !privateKey) {
                 set((state) => ({ ...state, showCredentialsModal: true }));
-                set((state) => ({ ...state, currentFunctionArguments: functionArguments }));
-                //await waitForDetails(password);
+                set((state) => ({
+                  ...state,
+                  currentFunctionArguments: functionArguments,
+                }));
               }
-              //const res = await taikoNodeEnvironmentSetup({ host: functionArguments.host, username: functionArguments.username, password: password });
-              //set((state) => ({ ...state, showCredentialsModal: false }));
-              //console.log("logging",res)
-              // const newMessage: ChatMessage = {
-              //   id: Date.now(),
-              //   sender: 'AI assistant',
-              //   content: res,
-              //   timestamp: Date.now(),
-              // };
-             // set((state) => ({ ...state, history: [...state.history, newMessage] }));
             }
-            if (functionName === "TaikoNodeDashboardSetup") {
+            if (functionName === 'TaikoNodeDashboardSetup') {
               const res = await taikoNodeAndDashboardSetup({
                 host: functionArguments.host,
                 username: functionArguments.username,
@@ -169,7 +160,7 @@ const useChatStore = create<ChatState>((set) => ({
                 L1_ENDPOINT_WS: functionArguments.ws_endpoint,
                 L1_PROPOSER_PRIVATE_KEY: privateKey,
                 PROPOSE_BLOCK_TX_GAS_LIMIT: functionArguments.gas_limit,
-                BLOCK_PROPOSAL_FEE: functionArguments.block_fee
+                BLOCK_PROPOSAL_FEE: functionArguments.block_fee,
               });
               const newMessage: ChatMessage = {
                 id: Date.now(),
@@ -177,111 +168,95 @@ const useChatStore = create<ChatState>((set) => ({
                 content: res,
                 timestamp: Date.now(),
               };
-              set((state) => ({ ...state, history: [...state.history, newMessage] }));
+              set((state) => ({
+                ...state,
+                history: [...state.history, newMessage],
+              }));
             }
-            if (functionName === "ChangeNodePassword") {
+            if (functionName === 'ChangeNodePassword') {
               if (!currentPassword || !newPassword) {
                 set((state) => ({ ...state, showUpdatePasswordModal: true }));
-                set((state) => ({ ...state, currentFunctionArguments: functionArguments }));
-                //await waitForDetails(currentPassword);
+                set((state) => ({
+                  ...state,
+                  currentFunctionArguments: functionArguments,
+                }));
               }
-              // const res = await changeNodePassword({
-              //   host: functionArguments.host,
-              //   username: functionArguments.username,
-              //   currentPassword: currentPassword,
-              //   newPassword: newPassword,
-              // });
-             //set((state) => ({ ...state, showUpdatePasswordModal: false }));
-              // const newMessage: ChatMessage = {
-              //   id: Date.now(),
-              //   sender: 'AI assistant',
-              //   content: res,
-              //   timestamp: Date.now(),
-              // };
-              //set((state) => ({ ...state, history: [...state.history, newMessage] }));
             }
-            if (functionName === "sendEmail") {
+            if (functionName === 'sendEmail') {
               if (!password || !file) {
                 set((state) => ({ ...state, showPasswordModal: true }));
-                set((state) => ({ ...state, currentFunctionArguments: functionArguments }));
-                //await waitForDetails(userPass);
+                set((state) => ({
+                  ...state,
+                  currentFunctionArguments: functionArguments,
+                }));
               }
-              // const csv_file = 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(),
-              //   };
-              //   set((state) => ({ ...state, history: [...state.history, newMessage] }));
-              //   console.error('No file attached.');
-              //   return;
-              // }
-             // await waitForDetails(csv_file);
-              // const res = await sendEmail({
-              //   user_id: functionArguments.user_id,
-              //   subject: functionArguments.subject,
-              //   user_pass: userPass,
-              //   msg: functionArguments.msg,
-              //   csv_file: csv_file
-              // });
-             // set((state) => ({ ...state, showPasswordModal: false }));
-              // const newMessage: ChatMessage = {
-              //   id: Date.now(),
-              //   sender: 'AI assistant',
-              //   content: res,
-              //   timestamp: Date.now(),
-              // };
-              // set((state) => ({ ...state, history: [...state.history, newMessage] }));
             }
             if (functionName === 'AuthenticateTelegram') {
               if (!localStorage.getItem('telegramApiKey')) {
-                const res = await requestCode(functionArguments.api_id, functionArguments.api_hash, functionArguments.phone)
-                console.log("otp response", res)
-                const otp = prompt("Enter the OTP:")
+                const res = await requestCode(
+                  functionArguments.api_id,
+                  functionArguments.api_hash,
+                  functionArguments.phone
+                );
+                console.log('otp response', res);
+                const otp = prompt('Enter the OTP:');
                 if (otp === null) {
                   console.error('User canceled OTP input.');
                   return;
                 }
-                const res1 = await authenticateCode(functionArguments.phone, otp)
+                const res1 = await authenticateCode(
+                  functionArguments.phone,
+                  otp
+                );
                 const newMessage: ChatMessage = {
                   id: Date.now(),
                   sender: 'AI assistant',
                   content: res1,
                   timestamp: Date.now(),
                 };
-                set((state) => ({ ...state, history: [...state.history, newMessage] }));
-              }
-              else {
+                set((state) => ({
+                  ...state,
+                  history: [...state.history, newMessage],
+                }));
+              } else {
                 const newMessage: ChatMessage = {
                   id: Date.now(),
                   sender: 'AI assistant',
-                  content: "You are Already Signed-In use the Scrape members or Send DM functionality",
+                  content:
+                    'You are Already Signed-In use the Scrape members or Send DM functionality',
                   timestamp: Date.now(),
                 };
-                set((state) => ({ ...state, history: [...state.history, newMessage] }));
+                set((state) => ({
+                  ...state,
+                  history: [...state.history, newMessage],
+                }));
               }
             }
-            if (functionName === "dmTelegramMembers") {
+            if (functionName === 'dmTelegramMembers') {
               const isUserLoggedIn = localStorage.getItem('telegramlogin');
               if (isUserLoggedIn === 'true') {
                 const csv_file = file;
                 if (!csv_file) {
                   set((state) => ({ ...state, showFileUploadModal: true }));
-                  set((state) => ({ ...state, currentFunctionArguments: functionArguments }));
+                  set((state) => ({
+                    ...state,
+                    currentFunctionArguments: functionArguments,
+                  }));
                 }
               } else {
                 const newMessage: ChatMessage = {
                   id: Date.now(),
                   sender: 'AI assistant',
-                  content: "Please use authenticate telegram to login",
+                  content: 'Please use authenticate telegram to login',
                   timestamp: Date.now(),
                 };
-                set((state) => ({ ...state, history: [...state.history, newMessage] }));
+                set((state) => ({
+                  ...state,
+                  history: [...state.history, newMessage],
+                }));
               }
             }
-            if (functionName === "scrapeMembers") {
+            if (functionName === 'scrapeMembers') {
               const isUserLoggedIn = localStorage.getItem('telegramlogin');
               if (isUserLoggedIn === 'true') {
                 const apikey = localStorage.getItem('telegramApiKey') || '';
@@ -295,33 +270,40 @@ const useChatStore = create<ChatState>((set) => ({
                   content: res,
                   timestamp: Date.now(),
                 };
-                set((state) => ({ ...state, history: [...state.history, newMessage] }));
-              }
-              else {
+                set((state) => ({
+                  ...state,
+                  history: [...state.history, newMessage],
+                }));
+              } else {
                 const newMessage: ChatMessage = {
                   id: Date.now(),
                   sender: 'AI assistant',
-                  content: "Please use authenticate telegram to login",
+                  content: 'Please use authenticate telegram to login',
                   timestamp: Date.now(),
                 };
-                set((state) => ({ ...state, history: [...state.history, newMessage] }));
+                set((state) => ({
+                  ...state,
+                  history: [...state.history, newMessage],
+                }));
               }
             }
-            if(functionName==='getLeoCodeSolution'){
-              const res=await LeofetchData(functionArguments.query);
+            if (functionName === 'getLeoCodeSolution') {
+              const res = await LeofetchData(functionArguments.query);
               const newMessage: ChatMessage = {
                 id: Date.now(),
                 sender: 'AI assistant',
                 content: res,
                 timestamp: Date.now(),
               };
-              set((state) => ({ ...state, history: [...state.history, newMessage] }));
+              set((state) => ({
+                ...state,
+                history: [...state.history, newMessage],
+              }));
             }
           }
         }
       }
-    }
-    catch (error) {
+    } catch (error) {
       console.error('Error generating chat:', error);
     }
   },