Merge pull request 'main' (#109) from YasinOnm08/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/109
This commit is contained in:
Patrick 2024-10-07 11:51:49 +02:00
commit 93ad87b892
11 changed files with 408 additions and 288 deletions

View file

@ -2,7 +2,7 @@
export const getAllLocalStorageItems = (): Record<string, string | null> => { export const getAllLocalStorageItems = (): Record<string, string | null> => {
const allData: Record<string, string | null> = {}; const allData: Record<string, string | null> = {};
if (typeof localStorage !== 'undefined') {
for (let i = 0; i < localStorage.length; i++) { for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i); const key = localStorage.key(i);
if (key) { if (key) {
@ -10,6 +10,7 @@ export const getAllLocalStorageItems = (): Record<string, string | null> => {
allData[key] = value; allData[key] = value;
} }
} }
}
return allData; return allData;
}; };

View file

@ -20,12 +20,17 @@ const InputOutputBackend: React.FC = () => {
const [timeZone, setTimeZone] = useState<string>("GMT"); const [timeZone, setTimeZone] = useState<string>("GMT");
const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY"); const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || false; const [myBoolean, setMyBoolean] = useState<boolean>(false);
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_create") const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_create")
if (typeof window !== 'undefined') {
apiURL.hostname = window.location.hostname; apiURL.hostname = window.location.hostname;
} else {
apiURL.hostname = "localhost"
}
// Fetch local storage values and update state on component mount // Update messages when any of the settings change
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') {
setPreferredCurrency(localStorage.getItem("preferredCurrency") || "USD"); setPreferredCurrency(localStorage.getItem("preferredCurrency") || "USD");
setPreferredLanguage(localStorage.getItem("preferredLanguage") || "english"); setPreferredLanguage(localStorage.getItem("preferredLanguage") || "english");
setTimeFormat(localStorage.getItem("timeFormat") || "24-hour"); setTimeFormat(localStorage.getItem("timeFormat") || "24-hour");
@ -33,10 +38,7 @@ const InputOutputBackend: React.FC = () => {
setTimeZone(localStorage.getItem("timeZone") || "GMT"); setTimeZone(localStorage.getItem("timeZone") || "GMT");
setDateFormat(localStorage.getItem("dateFormat") || "DD-MM-YYYY"); setDateFormat(localStorage.getItem("dateFormat") || "DD-MM-YYYY");
setMyBoolean(localStorage.getItem('myBoolean') === 'true'); setMyBoolean(localStorage.getItem('myBoolean') === 'true');
}, []); }
// Update messages when any of the settings change
useEffect(() => {
const measurementString = (preferredMeasurement == "Metric") const measurementString = (preferredMeasurement == "Metric")
? "All measurements follow the metric system. Refuse to use any other measurement system." ? "All measurements follow the metric system. Refuse to use any other measurement system."
: "All measurements follow the imperial system. Refuse to use any other measurement system."; : "All measurements follow the imperial system. Refuse to use any other measurement system.";
@ -113,7 +115,12 @@ const InputOutputBackend: React.FC = () => {
if (!getWorkerRef.current) { if (!getWorkerRef.current) {
getWorkerRef.current = new Worker(new URL("./threads/GetWorker.ts", import.meta.url)) getWorkerRef.current = new Worker(new URL("./threads/GetWorker.ts", import.meta.url))
const windowname = window.location.hostname let windowname = "localhost"
if (typeof window !== 'undefined') {
windowname = window.location.hostname
} else {
windowname = "localhost"
}
getWorkerRef.current.postMessage({ action: "start", access_token: accessToken, windowname }) getWorkerRef.current.postMessage({ action: "start", access_token: accessToken, windowname })
@ -169,14 +176,17 @@ const InputOutputBackend: React.FC = () => {
setInputDisabled(true) setInputDisabled(true)
if (postWorkerRef.current) { if (postWorkerRef.current) {
addMessage("user", inputValue) addMessage("user", inputValue)
const type = localStorage.getItem('type') let type:string = "local"
let api_key: string = "" let api_key: string = ""
if (typeof localStorage !== 'undefined') {
type = localStorage.getItem('type') || "local"
if (type != null && type != 'local') { if (type != null && type != 'local') {
const try_key = localStorage.getItem(type) const try_key = localStorage.getItem(type)
if (try_key) { if (try_key) {
api_key = try_key api_key = try_key
} }
} }
}
setInputMessage("") setInputMessage("")
const windowname = window.location.hostname const windowname = window.location.hostname
postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key, windowname }) postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key, windowname })

View file

@ -125,10 +125,12 @@ export const checkCredentials = async (usernameOrEmail: string, password: string
}; };
const sendBack = await sendToDatabase(data); const sendBack = await sendToDatabase(data);
if (sendBack) { if (sendBack) {
if (typeof localStorage !== 'undefined') {
localStorage.setItem("accountEmail", await getEmail(usernameOrEmail, password)) localStorage.setItem("accountEmail", await getEmail(usernameOrEmail, password))
localStorage.setItem("accountName", await getName(usernameOrEmail, password)) localStorage.setItem("accountName", await getName(usernameOrEmail, password))
localStorage.setItem("accountPassword", password) localStorage.setItem("accountPassword", password)
} }
}
return sendBack return sendBack
}; };

View file

@ -6,7 +6,11 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
formdata.append("audio", audio_data) formdata.append("audio", audio_data)
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/voice_recognition") const apiURL = new URL("http://localhost:5000/interstellar_ai/api/voice_recognition")
if (typeof window !== 'undefined') {
apiURL.hostname = window.location.hostname; apiURL.hostname = window.location.hostname;
} else {
apiURL.hostname = "localhost"
}
return axios.post(apiURL.href, formdata) return axios.post(apiURL.href, formdata)
.then((response) => { .then((response) => {

View file

@ -23,9 +23,13 @@ const Login: React.FC = () => {
// On component mount, check if there are credentials in localStorage // On component mount, check if there are credentials in localStorage
useEffect(() => { useEffect(() => {
const savedAccountName = localStorage.getItem('accountName'); let savedAccountName:string|null;
const savedAccountEmail = localStorage.getItem('accountEmail'); let savedAccountEmail:string|null;
const savedAccountPassword = localStorage.getItem('accountPassword'); let savedAccountPassword:string|null;
if (typeof localStorage !== 'undefined') {
savedAccountName = localStorage.getItem('accountName');
savedAccountEmail = localStorage.getItem('accountEmail');
savedAccountPassword = localStorage.getItem('accountPassword');
// If credentials are found in localStorage, log the user in // If credentials are found in localStorage, log the user in
if (savedAccountName && savedAccountEmail && savedAccountPassword) { if (savedAccountName && savedAccountEmail && savedAccountPassword) {
@ -33,11 +37,14 @@ const Login: React.FC = () => {
setEmail(savedAccountEmail); setEmail(savedAccountEmail);
setPassword(savedAccountPassword); setPassword(savedAccountPassword);
const check = async () => { const check = async () => {
if (savedAccountName !== null && savedAccountPassword !== null) {
const success = await checkCredentials(savedAccountName, savedAccountPassword); const success = await checkCredentials(savedAccountName, savedAccountPassword);
setIsLoggedIn(success); // Automatically log in setIsLoggedIn(success); // Automatically log in
}
}; };
check(); check();
} }
}
}, []); }, []);
// Function to toggle the login popup // Function to toggle the login popup
@ -57,8 +64,10 @@ const Login: React.FC = () => {
setIsLoggedIn(true); // Successful login setIsLoggedIn(true); // Successful login
const data = await getData(accountName, password) const data = await getData(accountName, password)
if (data) { if (data) {
if (typeof localStorage !== 'undefined') {
localStorage.setItem("dataFromServer", data) localStorage.setItem("dataFromServer", data)
} }
}
setShowLoginPopup(false); // Close the login popup setShowLoginPopup(false); // Close the login popup
} else { } else {
alert('Incorrect credentials'); alert('Incorrect credentials');

View file

@ -173,9 +173,12 @@ const ModelSection: React.FC = () => {
const [radioSelection, setRadioSelection] = useState<string | null>("") const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>(""); const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
const [isOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false") const [isOpenSourceMode, setIsOpenSourceMode] = useState<string|null>("false")
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') {
setIsOpenSourceMode(localStorage.getItem("openSourceMode"))
const temp = localStorage.getItem("activeSelectedAIFunction") || "" const temp = localStorage.getItem("activeSelectedAIFunction") || ""
setActiveSelectedAIFunction(temp) setActiveSelectedAIFunction(temp)
if (!localStorage.getItem('selectedModelDropdown')) { if (!localStorage.getItem('selectedModelDropdown')) {
@ -204,29 +207,38 @@ const ModelSection: React.FC = () => {
}; };
// Update immediately when localStorage changes // Update immediately when localStorage changes
if (typeof window !== 'undefined') {
window.addEventListener('storage', handleStorageChange); window.addEventListener('storage', handleStorageChange);
}
setRadioSelection(localStorage.getItem('radioSelection') || ''); setRadioSelection(localStorage.getItem('radioSelection') || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
// Cleanup listener on component unmount // Cleanup listener on component unmount
return () => { 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 }, []); // Dependency array can remain empty if you only want this to run on mount
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') {
const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || ""; const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) { if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction); setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
} }
}
}, [activeSelectedAIFunction]); }, [activeSelectedAIFunction]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value; const newModel = event.target.value;
setSelectedModelDropdown(newModel); setSelectedModelDropdown(newModel);
if (typeof localStorage !== 'undefined') {
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
const model = localStorage.getItem('activeSelectedAIFunction') || "Code" const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
modelClicked(model) modelClicked(model)
}
}; };
// Determine the filtered models based on current radioSelection // Determine the filtered models based on current radioSelection
@ -285,6 +297,7 @@ const ModelSection: React.FC = () => {
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model); modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
const modelClicked = (model: string) => { const modelClicked = (model: string) => {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('activeSelectedAIFunction', model) localStorage.setItem('activeSelectedAIFunction', model)
setActiveSelectedAIFunction(model) setActiveSelectedAIFunction(model)
const modelDropdown = localStorage.getItem('selectedModelDropdown') || 'Offline Fast' const modelDropdown = localStorage.getItem('selectedModelDropdown') || 'Offline Fast'
@ -292,6 +305,7 @@ const ModelSection: React.FC = () => {
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]]) localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]]) localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
} }
}
return ( return (
<div className="model-background"> <div className="model-background">

View file

@ -20,7 +20,7 @@ const ThemeDropdown: React.FC<{
value={selectedTheme} value={selectedTheme}
onChange={(e) => { onChange={(e) => {
const theme = e.target.value; const theme = e.target.value;
if (theme !== 'default') { if (theme !== 'default' && typeof localStorage !== 'undefined') {
setSelectedTheme(theme); setSelectedTheme(theme);
localStorage.setItem('selectedTheme', theme); localStorage.setItem('selectedTheme', theme);
} }

View file

@ -19,8 +19,12 @@ import ThemeDropdown from './DropDownTheme';
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
//#region initialize Variables
let item:string|null;
const getItemFromLocalStorage = (key: string) => { const getItemFromLocalStorage = (key: string) => {
const item = localStorage.getItem(key); if (typeof localStorage !== 'undefined') {
item = localStorage.getItem(key)
}
if (item) { if (item) {
try { try {
@ -35,32 +39,48 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
}; };
// Active section // Active section
const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general'); const [activeSection, setActiveSection] = useState('general');
// Language setting // Language setting
const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en'); const [preferredLanguage, setPreferredLanguage] = useState("en");
// Currency setting // Currency setting
const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd'); const [preferredCurrency, setPreferredCurrency] = useState('usd');
// Date and time format settings // Date and time format settings
const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy'); const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour'); const [timeFormat, setTimeFormat] = useState('12-hour');
const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT'); const [timeZone, setTimeZone] = useState('GMT');
// Online AI and chat history settings // Online AI and chat history settings
const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline' const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory')); const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory')); const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode')); const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
// User credentials // User credentials
const [newName, setNewName] = useState(() => localStorage.getItem('newName') || ''); const [newName, setNewName] = useState('');
const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || ''); const [newEmail, setNewEmail] = useState('');
const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || ''); const [newPassword, setNewPassword] = useState('');
// Measurement setting // Measurement setting
const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric'); const [preferredMeasurement, setPreferredMeasurement] = useState('Metric');
useEffect(() => {
setActiveSection(getItemFromLocalStorage("activeSection") || "general")
setPreferredLanguage(getItemFromLocalStorage("preferredLanguage") || 'en')
setPreferredCurrency(getItemFromLocalStorage("preferredCurrency") || "usd")
setDateFormat(getItemFromLocalStorage("dateFormat") || "mm/dd/yyyy")
setTimeFormat(getItemFromLocalStorage("timeFormat") || "12-hour")
setTimeZone(getItemFromLocalStorage("timeZone") || "GMT")
setDisableChatHistory(getItemFromLocalStorage('disableChatHistory').toLowerCase()==="true") //#TODO Idk if it works
setDisableAIMemory(getItemFromLocalStorage('disableAIMemory').toLowerCase()==="true")
setOpenSourceMode(getItemFromLocalStorage('openSourceMode').toLowerCase() === "true")
setNewName(getItemFromLocalStorage("newName") || "")
setNewEmail(getItemFromLocalStorage("newEmail") || "")
setNewPassword(getItemFromLocalStorage("newPassword") || "")
setPreferredMeasurement(getItemFromLocalStorage("preferredMeasurement") || "Metric")
},[])
// Theme settings // Theme settings
const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim()); const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
@ -99,22 +119,40 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim()); const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
// Per default a purple color gradient // Per default a purple color gradient
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add"); const [primaryColor, setPrimaryColor] = useState("#dc8add");
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb"); const [secondaryColor, setSecondaryColor] = useState("#c061cb");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac"); const [accentColor, setAccentColor] = useState("#9141ac");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c"); const [basicBackgroundColor, setBasicBackgroundColor] = useState("#813d9c");
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); const [basicTextColor, setBasicTextColor] = useState("#fefefe");
useEffect(() => {
setPrimaryColor(getItemFromLocalStorage("primaryColor"))
setSecondaryColor(getItemFromLocalStorage("secondaryColor"))
setAccentColor(getItemFromLocalStorage("accentColor"))
setBasicBackgroundColor(getItemFromLocalStorage("basicBackgroundColor"))
setBasicTextColor(getItemFromLocalStorage("basicTextColor"))
},[])
// Theme selection // Theme selection
const [selectedTheme, setSelectedTheme] = useState<string>(''); const [selectedTheme, setSelectedTheme] = useState<string>('');
// API Keys // API Keys
const [mistral, setMistral] = useState(localStorage.getItem('mistral') || ""); const [mistral, setMistral] = useState<string>("");
const [openai, setOpenai] = useState(localStorage.getItem('openai') || ""); const [openai, setOpenai] = useState<string>("");
const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || ""); const [anthropic, setAnthropic] = useState<string>("");
const [google, setGoogle] = useState(localStorage.getItem('google') || ""); const [google, setGoogle] = useState<string>("");
const [myBoolean, setMyBoolean] = useState<boolean>(() => getItemFromLocalStorage('myBoolean')); const [myBoolean, setMyBoolean] = useState<boolean>(false);
useEffect(() => {
setMistral(getItemFromLocalStorage("mistral") || "")
setOpenai(getItemFromLocalStorage("openai") || "")
setAnthropic(getItemFromLocalStorage("anthropic") || "")
setGoogle(getItemFromLocalStorage("google") || "")
setMyBoolean(getItemFromLocalStorage("myBoolean").toLowerCase() === "true")
},[])
//#region set Settings
const settings = { const settings = {
userPreferences: { userPreferences: {
@ -287,18 +325,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
{ value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' }, { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
]; ];
//#region functions for changing Settings
const handleLogout = () => { const handleLogout = () => {
if (typeof window !!== "undefined" && typeof localStorage !== 'undefined') {
localStorage.clear(); localStorage.clear();
alert('Successfully logged out!'); alert('Successfully logged out!');
window.location.reload(); window.location.reload();
}
}; };
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') {
const savedTheme = localStorage.getItem('selectedTheme'); const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) { if (savedTheme) {
setSelectedTheme(savedTheme); setSelectedTheme(savedTheme);
applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor); applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
} }
}
}, []); // Runs only once when the component mounts }, []); // Runs only once when the component mounts
// Effect hooks to update localStorage whenever any state changes // Effect hooks to update localStorage whenever any state changes
@ -311,9 +355,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
...settings.generalSettings, ...settings.generalSettings,
}; };
// Update localStorage for all settings // Update localStorage for all settings
if (typeof localStorage !== 'undefined') {
for (const [key, value] of Object.entries(flattenedSettings)) { for (const [key, value] of Object.entries(flattenedSettings)) {
localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value); localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
} }
}
}, [ }, [
...Object.values(settings.userPreferences), ...Object.values(settings.userPreferences),
...Object.values(settings.theme), ...Object.values(settings.theme),
@ -322,20 +368,26 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
]); ]);
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') {
const savedOption = localStorage.getItem('radioSelection'); const savedOption = localStorage.getItem('radioSelection');
if (savedOption) { if (savedOption) {
savedOption.replace(" (FOSS)", ""); savedOption.replace(" (FOSS)", "");
setSelectedOption(savedOption); // Set saved selection setSelectedOption(savedOption); // Set saved selection
} }
}
}, []); }, []);
const handleRadioChange = (newValue: string) => { const handleRadioChange = (newValue: string) => {
if (typeof localStorage !== 'undefined') {
setSelectedOption(newValue); // Update the state with the selected option setSelectedOption(newValue); // Update the state with the selected option
localStorage.setItem('radioSelection', newValue); // Save the selection for persistence localStorage.setItem('radioSelection', newValue); // Save the selection for persistence
}
}; };
// Function to handle updating all credentials // Function to handle updating all credentials
const handleUpdateCredentials = async () => { const handleUpdateCredentials = async () => {
if (typeof localStorage !== 'undefined') {
let useName = localStorage.getItem("accountName") let useName = localStorage.getItem("accountName")
let useEmail = localStorage.getItem("accountEmail") let useEmail = localStorage.getItem("accountEmail")
let usePassword = localStorage.getItem("accountPassword") let usePassword = localStorage.getItem("accountPassword")
@ -352,6 +404,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
if (await createAccount(useName, useEmail, usePassword)) { if (await createAccount(useName, useEmail, usePassword)) {
if (await changeData(useName, usePassword, settings)) { if (await changeData(useName, usePassword, settings)) {
if (typeof window !== 'undefined') {
localStorage.setItem("currentName", useName) localStorage.setItem("currentName", useName)
localStorage.setItem("currentPassword", usePassword) localStorage.setItem("currentPassword", usePassword)
localStorage.setItem("currentEmail", useEmail) localStorage.setItem("currentEmail", useEmail)
@ -360,15 +413,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
} }
} }
} }
}
}
}; };
// Function to handle account deletion // Function to handle account deletion
const handleDeleteAccount = async () => { const handleDeleteAccount = async () => {
if (typeof localStorage !== 'undefined') {
const useName = localStorage.getItem("accountName") const useName = localStorage.getItem("accountName")
const usePassword = localStorage.getItem("accountPassword") const usePassword = localStorage.getItem("accountPassword")
if (useName && usePassword) { if (useName && usePassword) {
const success = await deleteAccount(useName, usePassword); const success = await deleteAccount(useName, usePassword);
if (success) { if (success && typeof window !== 'undefined' ) {
localStorage.clear(); localStorage.clear();
alert('Account deleted successfully!'); alert('Account deleted successfully!');
window.location.reload() window.location.reload()
@ -377,9 +434,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
alert('Account deletion failed. Please check your password.'); alert('Account deletion failed. Please check your password.');
} }
} }
}
}; };
//#region rendering
// Render settings content based on the active section // Render settings content based on the active section
const renderSettingsContent = () => { const renderSettingsContent = () => {
switch (activeSection) { switch (activeSection) {
@ -571,6 +629,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
case 'account': case 'account':
const namePlaceholder = getItemFromLocalStorage("accountName") || "Current Name"
const emailPlaceholder = getItemFromLocalStorage("accountEmail") || "Current Email"
return ( return (
<div className="settings-section"> <div className="settings-section">
<h2>Account Settings</h2> <h2>Account Settings</h2>
@ -579,14 +639,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={newName} value={newName}
type='text' type='text'
setValue={setNewName} setValue={setNewName}
placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default placeholder={namePlaceholder} // Show current name or a default
/> />
<TextSettings <TextSettings
label="New Email" label="New Email"
value={newEmail} value={newEmail}
setValue={setNewEmail} setValue={setNewEmail}
type="email" // Input type is email type="email" // Input type is email
placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default placeholder={emailPlaceholder} // Show current email or a default
/> />
<TextSettings <TextSettings
label="New Password" label="New Password"
@ -614,6 +674,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
); );
case 'api': case 'api':
const mistral_APIKey_PlaceHolder = getItemFromLocalStorage("mistral") || "Enter the API key"
const openai_APIKey_PlaceHolder = getItemFromLocalStorage("openai") || "Enter the API key"
const anthropic_APIKey_PlaceHolder = getItemFromLocalStorage("anthropic") || "Enter the API key"
const google_APIKey_PlaceHolder = getItemFromLocalStorage("google") || "Enter the API key"
return ( return (
<div className="settings-section"> <div className="settings-section">
<TextSettings <TextSettings
@ -621,7 +685,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={mistral} // State variable for the input value={mistral} // State variable for the input
setValue={setMistral} // State updater function setValue={setMistral} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('mistral') || "Enter the API key"} placeholder={mistral_APIKey_PlaceHolder}
/> />
<div className="settings-option"> <div className="settings-option">
<a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer"> <a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
@ -633,7 +697,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={openai} // State variable for the input value={openai} // State variable for the input
setValue={setOpenai} // State updater function setValue={setOpenai} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('openai') || "Enter the API key"} placeholder={openai_APIKey_PlaceHolder}
/> />
<div className="settings-option"> <div className="settings-option">
<a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer"> <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
@ -645,7 +709,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={anthropic} // State variable for the input value={anthropic} // State variable for the input
setValue={setAnthropic} // State updater function setValue={setAnthropic} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('anthropic') || "Enter the API key"} placeholder={anthropic_APIKey_PlaceHolder}
/> />
<div className="settings-option"> <div className="settings-option">
<a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer"> <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
@ -657,7 +721,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={google} // State variable for the input value={google} // State variable for the input
setValue={setGoogle} // State updater function setValue={setGoogle} // State updater function
type="text" // Input type type="text" // Input type
placeholder={localStorage.getItem('google') || "Enter the API key"} placeholder={google_APIKey_PlaceHolder}
/> />
<div className="settings-option"> <div className="settings-option">
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer"> <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
@ -742,8 +806,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<button className="apply" onClick={async () => { <button className="apply" onClick={async () => {
getAllLocalStorageItems(); getAllLocalStorageItems();
closeSettings(); closeSettings();
if (typeof localStorage !== 'undefined') {
await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ???? await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
}
if (typeof window !== 'undefined') {
window.location.reload(); window.location.reload();
}
}}> }}>
Apply Apply
</button> </button>

View file

@ -5,6 +5,7 @@ export function exportSettings(): string {
const settings: { [key: string]: string } = {}; const settings: { [key: string]: string } = {};
// Loop through all keys in localStorage and add them to the settings object // Loop through all keys in localStorage and add them to the settings object
if (typeof localStorage !== 'undefined') {
for (let i = 0; i < localStorage.length; i++) { for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i); const key = localStorage.key(i);
if (key) { if (key) {
@ -13,6 +14,7 @@ export function exportSettings(): string {
} }
} }
} }
}
// Convert settings object to JSON string // Convert settings object to JSON string
return JSON.stringify(settings, null, 2); return JSON.stringify(settings, null, 2);
@ -24,9 +26,11 @@ export function importSettings(jsonData: string): void {
const parsedSettings = JSON.parse(jsonData); const parsedSettings = JSON.parse(jsonData);
// Loop through parsed settings and save them in localStorage // Loop through parsed settings and save them in localStorage
if (typeof localStorage !== 'undefined') {
Object.keys(parsedSettings).forEach((key) => { Object.keys(parsedSettings).forEach((key) => {
localStorage.setItem(key, parsedSettings[key]); localStorage.setItem(key, parsedSettings[key]);
}); });
}
console.log("Settings imported successfully!"); console.log("Settings imported successfully!");
} catch (error) { } catch (error) {

View file

@ -114,6 +114,7 @@ export const applyBlackTheme = () => {
}; };
export const applyCustomTheme = () => { export const applyCustomTheme = () => {
if (typeof localStorage !== 'undefined') {
const themeVariables = { const themeVariables = {
backgroundColor: localStorage.getItem('backgroundColor'), backgroundColor: localStorage.getItem('backgroundColor'),
headerBackground: localStorage.getItem('headerBackground'), headerBackground: localStorage.getItem('headerBackground'),
@ -187,7 +188,8 @@ export const applyCustomTheme = () => {
document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
}; };
}
// TypeScript types for color parameters // TypeScript types for color parameters
type Color = string; type Color = string;
@ -247,8 +249,10 @@ export const applyBasicCustomTheme = (
document.documentElement.style.setProperty('--popup-background-color', accentColor); document.documentElement.style.setProperty('--popup-background-color', accentColor);
document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80)); document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80));
document.documentElement.style.setProperty('--input-border-color', primaryColor); document.documentElement.style.setProperty('--input-border-color', primaryColor);
if (typeof localStorage !== 'undefined') {
document.documentElement.style.setProperty('--font-family', localStorage.getItem("fontFamily") || "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--font-family', localStorage.getItem("fontFamily") || "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--font-size', localStorage.getItem("fontSize") || '16px'); document.documentElement.style.setProperty('--font-size', localStorage.getItem("fontSize") || '16px');
}
}; };
// Helper function to darken a color (returns a darker version of the provided color) // Helper function to darken a color (returns a darker version of the provided color)

View file

@ -15,20 +15,22 @@ const LandingPage: React.FC = () => {
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
const conversationRef = useRef<HTMLDivElement>(null); const conversationRef = useRef<HTMLDivElement>(null);
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe"); const [primaryColor, setPrimaryColor] = useState("#fefefe");
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe"); const [secondaryColor, setSecondaryColor] = useState("#fefefe");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe"); const [accentColor, setAccentColor] = useState("#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe"); const [basicBackgroundColor, setBasicBackgroundColor] = useState("#fefefe");
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); const [basicTextColor, setBasicTextColor] = useState("#fefefe");
// Synchronize state with local storage on mount // Synchronize state with local storage on mount
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') {
setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe"); setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe"); setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe");
setAccentColor(localStorage.getItem("accentColor") || "#fefefe"); setAccentColor(localStorage.getItem("accentColor") || "#fefefe");
setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe"); setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe");
setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe"); setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe");
}, []); }
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]);
const toggleDivs = () => { const toggleDivs = () => {
setShowDivs(prevState => !prevState); setShowDivs(prevState => !prevState);
@ -43,6 +45,7 @@ const LandingPage: React.FC = () => {
// Apply theme based on selectedTheme and color settings // Apply theme based on selectedTheme and color settings
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') {
const savedTheme = localStorage.getItem('selectedTheme'); const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) { if (savedTheme) {
switch (savedTheme) { switch (savedTheme) {
@ -72,6 +75,7 @@ const LandingPage: React.FC = () => {
break; break;
} }
} }
}
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly
return ( return (