Skip to content

Commit

Permalink
Merge pull request #6 from Bitbaza-Org/codebase_cleanup
Browse files Browse the repository at this point in the history 
⚡Improve: Codebase and popup modal UI
  • Loading branch information
@SAHU-01
SAHU-01 authored Apr 15, 2024
2 parents 32bce43 + 0edc5ad commit 94052cd
Show file tree
Hide file tree
Showing 8 changed files with 376 additions and 349 deletions.
34 changes: 21 additions & 13 deletions src/common/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
}
}, []);

Expand All @@ -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">
Expand All @@ -62,21 +71,21 @@ 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 />
</HStack>
</HStack>
</Box>

{/* {loggedIn ? ( */}
{loggedIn ? (
<Tabs>
<TabList>
<Tab>Browser Automation</Tab>
Expand All @@ -89,16 +98,15 @@ const App: React.FC = () => {

<TabPanel>
<ModalProvider>
<ChatUI />
<ChatUI />
</ModalProvider>
</TabPanel>
</TabPanels>
</Tabs>

{/* ) : (
) : (
<LoginComponent />
)} */}

)}
</Box>
</ChakraProvider>
);
Expand Down
205 changes: 121 additions & 84 deletions src/common/ChatUI.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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(() => {
Expand All @@ -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;
Expand All @@ -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('');
Expand All @@ -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) {
Expand All @@ -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
Expand All @@ -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>

</>
);
};
Expand Down
Loading

0 comments on commit 94052cd

Please sign in to comment.