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 (
);
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
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 89c550c..ea61e8c 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -152,6 +152,11 @@
top: 10px;
display: block;
}
+
+ .slider-option{
+ width: fit-content;
+ margin: 10px 10px 0 0;
+ }
}
/* Responsive adjustments for the settings */