Merge pull request #17 from ZkAGI/ui_fixes

♻️ Refactor code:Change UI

src/common/ChatUI.tsx

@@ -177,9 +177,93 @@ const ChatUI = () => {
     setShowPasswordModal(false);
   };
 
+ {/* Credentials Logic */}
+  const addCredentialsMessage = () => {
+    const newMessage: ChatMessage = {
+      id: Date.now(),
+      sender: 'user',
+      content: (
+        <CredentialsComponent
+        />
+      ),
+      timestamp: Date.now(),
+    };
+    addMessage(newMessage);
+  };
+
+  useEffect(() => {
+    if (showCredentialsModal) {
+      addCredentialsMessage();
+    }
+  }, [showCredentialsModal]);
+
+  {/* Update Password Logic */}
+  const addUpdatePasswordMessage = () => {
+    const newMessage: ChatMessage = {
+      id: Date.now(),
+      sender: 'user',
+      content: (
+        <UpdatePasswordComponent
+        />
+      ),
+      timestamp: Date.now(),
+    };
+    addMessage(newMessage);
+  };
+
+  useEffect(() => {
+    if (showUpdatePasswordModal) {
+      addUpdatePasswordMessage();
+    }
+  }, [showUpdatePasswordModal]);
+
+  {/* Send Email Logic */}
+  const addPasswordMessage = () => {
+    const newMessage: ChatMessage = {
+      id: Date.now(),
+      sender: 'user',
+      content: (
+        <PasswordComponent
+        />
+      ),
+      timestamp: Date.now(),
+    };
+    addMessage(newMessage);
+  };
+
+  useEffect(() => {
+    if (showPasswordModal) {
+      addPasswordMessage();
+    }
+  }, [showPasswordModal]);
+
+  {/* File Upload Modal */}
+const addTelegramMessage = () => {
+    const newMessage: ChatMessage = {
+      id: Date.now(),
+      sender: 'user',
+      content: (
+        <FileUploadComponent
+        onFileSelect={(file) => {
+          setFileName(file.name);
+          setIsFileAttached(true);
+        }}
+        />
+      ),
+      timestamp: Date.now(),
+    };
+    addMessage(newMessage);
+  };
+
+  useEffect(() => {
+    if (showFileUploadModal) {
+      addTelegramMessage();
+    }
+  }, [showFileUploadModal]);
+
   return (
     <>
-      <Modal isOpen={showPasswordModal} onClose={hidePasswordInput}>
+      {/* <Modal isOpen={showPasswordModal} onClose={hidePasswordInput}>
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>Enter Password</ModalHeader>
@@ -188,10 +272,10 @@ const ChatUI = () => {
             <PasswordComponent />
           </ModalBody>
         </ModalContent>
-      </Modal>
+      </Modal> */}
 
       {/* Update Password Modal */}
-      <Modal
+      {/* <Modal
         isOpen={showUpdatePasswordModal}
         onClose={() => setShowUpdatePasswordModal(false)}
       >
@@ -203,10 +287,10 @@ const ChatUI = () => {
             <UpdatePasswordComponent />
           </ModalBody>
         </ModalContent>
-      </Modal>
+      </Modal> */}
 
       {/* Credentials Modal */}
-      <Modal
+      {/* <Modal
         isOpen={showCredentialsModal}
         onClose={() => setShowCredentialsModal(false)}
       >
@@ -218,10 +302,10 @@ const ChatUI = () => {
             <CredentialsComponent />
           </ModalBody>
         </ModalContent>
-      </Modal>
+      </Modal> */}
 
       {/* File Upload Modal */}
-      <Modal
+      {/* <Modal
         isOpen={showFileUploadModal}
         onClose={() => setShowFileUploadModal(false)}
       >
@@ -238,7 +322,7 @@ const ChatUI = () => {
             />
           </ModalBody>
         </ModalContent>
-      </Modal>
+      </Modal> */}
 
       <ChatHistory messages={history} />
       <Textarea

src/common/CredentialsComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react';
-import { Input, Button, Flex, Spacer } from '@chakra-ui/react';
+import { Input, Button, Flex, Box, Text } from '@chakra-ui/react';
 import { ModalContext } from '../context/ModalContext';
 import useChatStore from '../state/chat';
 import { taikoNodeEnvironmentSetup } from '../api/taikoNodeCreation';
@@ -11,6 +11,7 @@ const CredentialsComponent = () => {
   const { setShowCredentialsModal, addMessage, currentFunctionArguments } =
     useChatStore((state) => state);
     const [isLoading, setIsLoading] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
 
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value);
@@ -35,29 +36,50 @@ const CredentialsComponent = () => {
         timestamp: Date.now(),
       };
       addMessage(newMessage);
+      setIsLoading(false);
+      setSubmitted(true);
       setShowCredentialsModal(false);
     }
   };
 
   return (
     <Flex direction="column" align="center" w="full" maxW="md" mx="auto">
-      <Input
-        type="password"
-        placeholder="Enter password"
-        value={password}
-        onChange={handlePasswordChange}
-        mb={4}
-      />
-      <Input
-        type="password"
-        placeholder="Enter private key"
-        value={privateKey}
-        onChange={handlePrivateKeyChange}
-        mb={6}
-      />
-      <Button colorScheme="blue" onClick={handleSubmit} w="full" maxW="sm" mb={6} isLoading={isLoading}  loadingText="Setting environment...">
-        Submit
-      </Button>
+      {submitted ? (
+        <div>Submitted</div> 
+      ) : (
+        <Box p={4}
+        backgroundColor="gray.100"
+        borderRadius="md"
+        boxShadow="md"
+        mb={4}>
+          <Text mb={4}>Manage Credentials</Text>
+          <Input
+            type="password"
+            placeholder="Enter password"
+            value={password}
+            onChange={handlePasswordChange}
+            mb={4}
+          />
+          <Input
+            type="password"
+            placeholder="Enter private key"
+            value={privateKey}
+            onChange={handlePrivateKeyChange}
+            mb={6}
+          />
+          <Button
+            colorScheme="blue"
+            onClick={handleSubmit}
+            w="full"
+            maxW="sm"
+            mb={6}
+            isLoading={isLoading}
+            loadingText="Setting environment..."
+          >
+            Submit
+          </Button>
+        </Box>
+      )}
     </Flex>
   );
 };

src/common/FileUploadComponent.tsx

@@ -46,7 +46,7 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
     <Flex align="center" direction="column" w="full" maxW="md" mx="auto">
       <Box>
         {file ? (
-          <Text>{file.name}</Text>
+          <Text>{file.name} uploaded successfully</Text>
         ) : (
           <Button as="label" htmlFor="file-input" colorScheme="blue">
             Choose File

src/common/OTP.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Input, Button, Box, Flex } from '@chakra-ui/react';
+import { authenticateCode } from '../api/telegram_auth';
+import useChatStore, { ChatMessage } from '../state/chat';
+
+interface OTPProps {
+  functionArguments: any;
+}
+
+const OTP: React.FC<OTPProps> = ({ functionArguments }) => {
+  const [otp, setOTP] = useState('');
+  const { addMessage } = useChatStore();
+  const [submitted, setSubmitted] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleOTPChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOTP(e.target.value);
+  };
+
+  const handleSubmit = async () => {
+    setIsLoading(true)
+    if (otp.trim() !== '') {
+      const res1 = await authenticateCode(functionArguments.phone, otp);
+      const authMessage: ChatMessage = {
+        id: Date.now(),
+        sender: 'AI assistant',
+        content: res1,
+        timestamp: Date.now(),
+      };
+      addMessage(authMessage);
+      setSubmitted(true)
+    }
+  };
+
+  return (
+    <Flex direction="column" align="center" w="full" maxW="md" mx="auto">
+        {submitted ? (
+        <div>OTP Submitted</div> 
+      ) : (
+        <Box  backgroundColor="gray.100"
+        borderRadius="md"
+        boxShadow="md"
+        p={5}>
+      <Input
+        type="text"
+        placeholder="Enter OTP"
+        value={otp}
+        onChange={handleOTPChange}
+        mb={6}
+      />
+      <Button colorScheme="blue" onClick={handleSubmit} mb={4} isLoading={isLoading} loadingText="Sending otp..." width="full">
+        Submit OTP
+      </Button>
+      </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default OTP;
+

src/common/PasswordComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react';
-import { Input, Button, Flex, Spacer, Box } from '@chakra-ui/react';
+import { Input, Button, Flex, Text, Box } from '@chakra-ui/react';
 import { ModalContext } from '../context/ModalContext';
 import useChatStore from '../state/chat';
 import { ChatMessage } from '../state/chat';
@@ -11,6 +11,7 @@ const PasswordComponent = () => {
   const { setShowPasswordModal, addMessage, currentFunctionArguments } =
     useChatStore((state) => state);
   const [isLoading, setIsLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
@@ -55,15 +56,25 @@ const PasswordComponent = () => {
       console.error(error)
     }finally{
       setIsLoading(false); 
+      setSubmitted(true);
       setShowPasswordModal(false);
     }
   };
 
   return (
     <Flex direction="column" align="center" w="full" maxW="md" mx="auto">
+      {submitted ? (
+        <div>Email Sent</div> 
+      ) : (
+        <Box p={4}
+        backgroundColor="gray.100"
+        borderRadius="md"
+        boxShadow="md"
+        mb={4}>
+          <Text mb={4}>Attach File</Text>
       <Input
         type="password"
-        placeholder="Enter password"
+        placeholder="Enter app password "
         value={password}
         onChange={(e) => setPassword(e.target.value)}
         mb={4}
@@ -82,13 +93,15 @@ const PasswordComponent = () => {
             htmlFor="attach-file-input"
             flex="1"
           >
-            Attach File
+            Attach Mailing List
           </Button>
         </Flex>
       </Box>
-      <Button colorScheme="blue" onClick={handleChange as any} mb={4} isLoading={isLoading}  loadingText="Sending email...">
+      <Button colorScheme="blue" onClick={handleChange as any} mb={4} isLoading={isLoading}  loadingText="Sending email..." width="full">
         Submit
       </Button>
+      </Box>
+      )}
     </Flex>
   );
 };