From e0e711f1a9559fd5078f219639015c0466739f9d Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Wed, 9 Oct 2024 08:11:40 +0200 Subject: [PATCH] Database first tries --- app/components/Credits.tsx | 76 +++++++--------------------- app/components/Header.tsx | 18 ++++--- app/components/InputFrontend.tsx | 36 ++++++++----- app/components/Models.tsx | 60 +++++++++------------- app/components/settings/Settings.tsx | 22 ++++++-- app/styles/responsive.css | 5 ++ 6 files changed, 100 insertions(+), 117 deletions(-) diff --git a/app/components/Credits.tsx b/app/components/Credits.tsx index 5144603..5c94887 100644 --- a/app/components/Credits.tsx +++ b/app/components/Credits.tsx @@ -1,62 +1,24 @@ import React from 'react'; -const Credits: React.FC = () => { - return ( -
-
-

Credits

+const Credits: React.FC = () => ( +
+
+

Credits

+

Icons

+

This project utilizes the following icon resources:

+ +

Fonts

+

The fonts used in this project are provided by:

+ + + + +
+
+); -

Icons

-

- This project utilizes the following icon resources: -

- - fontawesome - -

Fonts

-

- The fonts used in this project are provided by: -

- - Poppins - - - Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight - - - Roboto, Rock Salt - - - Ubuntu - -
-
- ); -}; +const CreditLink = ({ href, label }: { href: string; label: string }) => ( + {label} +); export default Credits; diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 63d0b87..e477a80 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -20,13 +20,16 @@ const Header: React.FC = ({ const dropdownRef = useRef(null); const toggleRef = useRef(null); + // Pages that will be displayed in the menu + const pages: ('AI' | 'FAQ' | 'Documentation' | 'Credits')[] = ['AI', 'FAQ', 'Documentation', 'Credits']; + // Toggle menu state const toggleMenu = () => { setMenuOpen((prevMenuOpen) => !prevMenuOpen); }; // Handle button click - const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { + const handleViewChange = (page: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { onViewChange(page); setMenuOpen(false); // Close the menu when a button is clicked }; @@ -35,9 +38,9 @@ const Header: React.FC = ({ useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( - dropdownRef.current && + dropdownRef.current && !dropdownRef.current.contains(event.target as Node) && - toggleRef.current && + toggleRef.current && !toggleRef.current.contains(event.target as Node) ) { setMenuOpen(false); @@ -72,10 +75,11 @@ const Header: React.FC = ({ )}
diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx index fec7713..3c8295c 100644 --- a/app/components/InputFrontend.tsx +++ b/app/components/InputFrontend.tsx @@ -1,5 +1,5 @@ import React, { useState, ForwardedRef, useEffect } from 'react'; -import "../styles/variables.css" +import "../styles/variables.css"; interface InputProps { message: string; @@ -13,33 +13,36 @@ const InputFrontend = React.forwardRef( ({ message, onSendClick, onMicClick, inputDisabled, isRecording }, ref: ForwardedRef) => { const [inputValue, setInputValue] = useState(''); + // Sync the inputValue state with the message prop useEffect(() => { setInputValue(message); }, [message]); + // Handle the input change const handleInputChange = (e: React.ChangeEvent) => { setInputValue(e.target.value); }; + // Handle 'Enter' key press const handleKeyDown = (event: React.KeyboardEvent) => { - if (!inputDisabled) { - if (event.key === 'Enter') { - onSendClick(inputValue, false); // Call the function passed via props - setInputValue(''); // Optionally clear input after submission - event.preventDefault(); // Prevent default action (e.g., form submission) - } + if (!inputDisabled && event.key === 'Enter') { + onSendClick(inputValue, false); // Send the message on Enter + setInputValue(''); // Clear the input after submission + event.preventDefault(); // Prevent the default Enter action } }; + // Handle the Send button click const handleSendClick = () => { if (inputValue.trim() !== "") { - onSendClick(inputValue, false); // Send message to parent component + onSendClick(inputValue, false); // Send message setInputValue(''); // Clear input after sending } }; return (
+ {/* Input field for typing messages */} ( value={inputValue} onChange={handleInputChange} onKeyDown={handleKeyDown} - className='textInputField' + className="textInputField" + disabled={inputDisabled} // Disable when inputDisabled is true /> - + + {/* Microphone button */}
); diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 30c427c..469d9cb 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -123,50 +123,39 @@ const ModelSection: React.FC = () => { useEffect(() => { if (typeof localStorage !== 'undefined') { - - setIsOpenSourceMode(localStorage.getItem("openSourceMode")) - const temp = localStorage.getItem("activeSelectedAIFunction") || "" - setActiveSelectedAIFunction(temp) - if (!localStorage.getItem('selectedModelDropdown')) { - localStorage.setItem("selectedModelDropdown", "Offline Fast") - } - - if (!localStorage.getItem("activeSelectedAIFunction")) { - setActiveSelectedAIFunction('Code') - localStorage.setItem('activeSelectedAIFunction', 'Code') - } - - if (!localStorage.getItem("model")) { - localStorage.setItem("model", 'starcoder2') - } - - if (!localStorage.getItem("radioSelection")) { - localStorage.setItem("radioSelection", 'None') - } - - if (!localStorage.getItem("type")) { - localStorage.setItem("type", 'local') - } - + const defaultValues = { + selectedModelDropdown: 'Offline Fast', + activeSelectedAIFunction: 'Code', + model: 'starcoder2', + radioSelection: 'None', + type: 'local', + }; + + Object.entries(defaultValues).forEach(([key, value]) => { + if (!localStorage.getItem(key)) { + localStorage.setItem(key, value); + } + }); + + setIsOpenSourceMode(localStorage.getItem("openSourceMode")); + setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || ''); + setRadioSelection(localStorage.getItem("radioSelection") || ''); + setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); + const handleStorageChange = () => { setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); }; - + // Update immediately when localStorage changes - if (typeof window !== 'undefined') { - window.addEventListener('storage', handleStorageChange); - } + window.addEventListener('storage', handleStorageChange); - setRadioSelection(localStorage.getItem('radioSelection') || ''); - setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); // Cleanup listener on component unmount return () => { - if (typeof window !== 'undefined') { - window.removeEventListener('storage', handleStorageChange); - } + window.removeEventListener('storage', handleStorageChange); }; } - }, []); // Dependency array can remain empty if you only want this to run on mount + }, []); + useEffect(() => { if (typeof localStorage !== 'undefined') { @@ -271,7 +260,6 @@ const ModelSection: React.FC = () => { ))}
- {/* Model Grid with Cards */}
{selectedAIFunction.map( diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 295c318..d1adb30 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -15,6 +15,7 @@ import { changeSettings, createAccount, deleteAccount, + getSettings } from '../../backend/database'; import ThemeDropdown from './DropDownTheme'; @@ -298,6 +299,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( }; useEffect(() => { + let useName = localStorage.getItem("accountName") + let usePassword = localStorage.getItem("accountPassword") + if (useName && usePassword) { + importDatabase(useName, usePassword) + } const savedTheme = localStorage.getItem('selectedTheme'); if (savedTheme) { setSelectedTheme(savedTheme); @@ -305,6 +311,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( } }, []); // Runs only once when the component mounts + const importDatabase = async (useName : string, usePassword : string) => { + const databaseSettings = await getSettings(useName, usePassword) + importSettings(databaseSettings) + } // Effect hooks to update localStorage whenever any state changes useEffect(() => { // Flatten nested objects @@ -355,7 +365,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( } if (await createAccount(useName, useEmail, usePassword)) { - if (await changeSettings(useName, usePassword, settings)) { + if (await changeSettings(useName, usePassword, handleExport)) { localStorage.setItem("currentName", useName) localStorage.setItem("currentPassword", usePassword) localStorage.setItem("currentEmail", useEmail) @@ -714,7 +724,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const handleExport = () => { const settingsData = exportSettings(); - // Create a blob and download the exported settings const blob = new Blob([settingsData], { type: 'application/json' }); const url = URL.createObjectURL(blob); @@ -748,7 +757,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
{/* Dropdown for selections in responsive mode */}
-

Select a Setting

+

Select a Setting