Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

⚡Improve: Codebase and popup modal UI #6

Merged
merged 1 commit into from
Apr 15, 2024
Merged

⚡Improve: Codebase and popup modal UI #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 21 additions & 13 deletions src/common/App.tsx
View file
Open in desktop
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
Open in desktop
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