sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Compare commits

base: sageTheDm:bf26e7c83c9eb3484567242ddac7fe8a5bd49533
Branches Tags
sageTheDm:main
React-Group:main
..
compare: sageTheDm:bf2931327694f023f2058df5f1cd5c6acfd9040f
Branches Tags
sageTheDm:main
React-Group:main

No commits in common. "bf26e7c83c9eb3484567242ddac7fe8a5bd49533" and "bf2931327694f023f2058df5f1cd5c6acfd9040f" have entirely different histories.
bf26e7c83c ... bf29313276

11 changed files with 288 additions and 408 deletions
Show stats Expand all files Collapse all files

3
app/backend/GetLocalStorage.ts
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,7 +10,6 @@ export const getAllLocalStorageItems = (): Record<string, string | null> => {
allData[key] = value; allData[key] = value;
} }
} }
}
return allData; return allData;
}; };

48
app/backend/InputOutputHandler.tsx
View file

@ -20,25 +20,23 @@ 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>(false); const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || 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 { // Fetch local storage values and update state on component mount
apiURL.hostname = "localhost" useEffect(() => {
} setPreferredCurrency(localStorage.getItem("preferredCurrency") || "USD");
setPreferredLanguage(localStorage.getItem("preferredLanguage") || "english");
setTimeFormat(localStorage.getItem("timeFormat") || "24-hour");
setPreferredMeasurement(localStorage.getItem("preferredMeasurement") || "metric");
setTimeZone(localStorage.getItem("timeZone") || "GMT");
setDateFormat(localStorage.getItem("dateFormat") || "DD-MM-YYYY");
setMyBoolean(localStorage.getItem('myBoolean') === 'true');
}, []);
// Update messages when any of the settings change // Update messages when any of the settings change
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') {
setPreferredCurrency(localStorage.getItem("preferredCurrency") || "USD");
setPreferredLanguage(localStorage.getItem("preferredLanguage") || "english");
setTimeFormat(localStorage.getItem("timeFormat") || "24-hour");
setPreferredMeasurement(localStorage.getItem("preferredMeasurement") || "metric");
setTimeZone(localStorage.getItem("timeZone") || "GMT");
setDateFormat(localStorage.getItem("dateFormat") || "DD-MM-YYYY");
setMyBoolean(localStorage.getItem('myBoolean') === 'true');
}
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.";
@ -115,12 +113,7 @@ 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))
let windowname = "localhost" const windowname = window.location.hostname
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 })
@ -176,15 +169,12 @@ const InputOutputBackend: React.FC = () => {
setInputDisabled(true) setInputDisabled(true)
if (postWorkerRef.current) { if (postWorkerRef.current) {
addMessage("user", inputValue) addMessage("user", inputValue)
let type:string = "local" const type = localStorage.getItem('type')
let api_key: string = "" let api_key: string = ""
if (typeof localStorage !== 'undefined') { if (type != null && type != 'local') {
type = localStorage.getItem('type') || "local" const try_key = localStorage.getItem(type)
if (type != null && type != 'local') { if (try_key) {
const try_key = localStorage.getItem(type) api_key = try_key
if (try_key) {
api_key = try_key
}
} }
} }
setInputMessage("") setInputMessage("")

8
app/backend/database.ts
View file

@ -125,11 +125,9 @@ 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
}; };

6
app/backend/voice_backend.ts
View file

@ -6,11 +6,7 @@ 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) => {

37
app/components/Login.tsx
View file

@ -23,27 +23,20 @@ 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(() => {
let savedAccountName:string|null; const savedAccountName = localStorage.getItem('accountName');
let savedAccountEmail:string|null; const savedAccountEmail = localStorage.getItem('accountEmail');
let savedAccountPassword:string|null; const savedAccountPassword = localStorage.getItem('accountPassword');
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) {
setAccountName(savedAccountName); setAccountName(savedAccountName);
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();
}
} }
}, []); }, []);
@ -64,9 +57,7 @@ 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 {

110
app/components/Models.tsx
View file

@ -173,72 +173,60 @@ 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, setIsOpenSourceMode] = useState<string|null>("false") const [isOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false")
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') { const temp = localStorage.getItem("activeSelectedAIFunction") || ""
setActiveSelectedAIFunction(temp)
setIsOpenSourceMode(localStorage.getItem("openSourceMode")) if (!localStorage.getItem('selectedModelDropdown')) {
const temp = localStorage.getItem("activeSelectedAIFunction") || "" localStorage.setItem("selectedModelDropdown", "Offline Fast")
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 handleStorageChange = () => {
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
};
// Update immediately when localStorage changes
if (typeof window !== 'undefined') {
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);
}
};
} }
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 handleStorageChange = () => {
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
};
// Update immediately when localStorage changes
window.addEventListener('storage', handleStorageChange);
setRadioSelection(localStorage.getItem('radioSelection') || '');
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
// Cleanup listener on component unmount
return () => {
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
@ -297,14 +285,12 @@ 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' const selectedAIFunction = modelDropdown as keyof typeof modelList;
const selectedAIFunction = modelDropdown as keyof typeof modelList; 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 (

2
app/components/settings/DropDownTheme.tsx
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' && typeof localStorage !== 'undefined') { if (theme !== 'default') {
setSelectedTheme(theme); setSelectedTheme(theme);
localStorage.setItem('selectedTheme', theme); localStorage.setItem('selectedTheme', theme);
} }

224
app/components/settings/Settings.tsx
View file

@ -19,12 +19,8 @@ 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) => {
if (typeof localStorage !== 'undefined') { const item = localStorage.getItem(key);
item = localStorage.getItem(key)
}
if (item) { if (item) {
try { try {
@ -39,48 +35,32 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
}; };
// Active section // Active section
const [activeSection, setActiveSection] = useState('general'); const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
// Language setting // Language setting
const [preferredLanguage, setPreferredLanguage] = useState("en"); const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');
// Currency setting // Currency setting
const [preferredCurrency, setPreferredCurrency] = useState('usd'); const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');
// Date and time format settings // Date and time format settings
const [dateFormat, setDateFormat] = useState('mm/dd/yyyy'); const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy');
const [timeFormat, setTimeFormat] = useState('12-hour'); const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour');
const [timeZone, setTimeZone] = useState('GMT'); const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || '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<boolean>(false); const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false); const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
const [openSourceMode, setOpenSourceMode] = useState<boolean>(false); const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
// User credentials // User credentials
const [newName, setNewName] = useState(''); const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
const [newEmail, setNewEmail] = useState(''); const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
const [newPassword, setNewPassword] = useState(''); const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');
// Measurement setting // Measurement setting
const [preferredMeasurement, setPreferredMeasurement] = useState('Metric'); const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || '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());
@ -119,40 +99,22 @@ 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("#dc8add"); const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
const [secondaryColor, setSecondaryColor] = useState("#c061cb"); const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
const [accentColor, setAccentColor] = useState("#9141ac"); const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
const [basicBackgroundColor, setBasicBackgroundColor] = useState("#813d9c"); const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
const [basicTextColor, setBasicTextColor] = useState("#fefefe"); const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#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<string>(""); const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
const [openai, setOpenai] = useState<string>(""); const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
const [anthropic, setAnthropic] = useState<string>(""); const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
const [google, setGoogle] = useState<string>(""); const [google, setGoogle] = useState(localStorage.getItem('google') || "");
const [myBoolean, setMyBoolean] = useState<boolean>(false); const [myBoolean, setMyBoolean] = useState<boolean>(() => getItemFromLocalStorage('myBoolean'));
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: {
@ -325,23 +287,17 @@ 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
@ -355,10 +311,8 @@ 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),
@ -368,50 +322,41 @@ 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 useEmail = localStorage.getItem("accountEmail")
let usePassword = localStorage.getItem("accountPassword")
if (useName && useEmail && usePassword) {
await deleteAccount(useName, usePassword)
let useName = localStorage.getItem("accountName") if (newName != "") {
let useEmail = localStorage.getItem("accountEmail") useName = newName
let usePassword = localStorage.getItem("accountPassword") } if (newEmail != "") {
if (useName && useEmail && usePassword) { useEmail = newEmail
await deleteAccount(useName, usePassword) } if (newPassword != "") {
usePassword = newPassword
}
if (newName != "") { if (await createAccount(useName, useEmail, usePassword)) {
useName = newName if (await changeData(useName, usePassword, settings)) {
} if (newEmail != "") { localStorage.setItem("currentName", useName)
useEmail = newEmail localStorage.setItem("currentPassword", usePassword)
} if (newPassword != "") { localStorage.setItem("currentEmail", useEmail)
usePassword = newPassword alert('Account successfully changed!')
} window.location.reload()
if (await createAccount(useName, useEmail, usePassword)) {
if (await changeData(useName, usePassword, settings)) {
if (typeof window !== 'undefined') {
localStorage.setItem("currentName", useName)
localStorage.setItem("currentPassword", usePassword)
localStorage.setItem("currentEmail", useEmail)
alert('Account successfully changed!')
window.location.reload()
}
}
} }
} }
} }
@ -419,25 +364,22 @@ 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 usePassword = localStorage.getItem("accountPassword")
const useName = localStorage.getItem("accountName") if (useName && usePassword) {
const usePassword = localStorage.getItem("accountPassword") const success = await deleteAccount(useName, usePassword);
if (useName && usePassword) { if (success) {
const success = await deleteAccount(useName, usePassword); localStorage.clear();
if (success && typeof window !== 'undefined' ) { alert('Account deleted successfully!');
localStorage.clear(); window.location.reload()
alert('Account deleted successfully!'); // Optionally, redirect or reset state here
window.location.reload() } else {
// Optionally, redirect or reset state here alert('Account deletion failed. Please check your password.');
} else {
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) {
@ -629,8 +571,6 @@ 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>
@ -639,14 +579,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
value={newName} value={newName}
type='text' type='text'
setValue={setNewName} setValue={setNewName}
placeholder={namePlaceholder} // Show current name or a default placeholder={localStorage.getItem("accountName") || "Current Name"} // 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={emailPlaceholder} // Show current email or a default placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
/> />
<TextSettings <TextSettings
label="New Password" label="New Password"
@ -674,10 +614,6 @@ 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
@ -685,7 +621,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={mistral_APIKey_PlaceHolder} placeholder={localStorage.getItem('mistral') || "Enter the API key"}
/> />
<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">
@ -697,7 +633,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={openai_APIKey_PlaceHolder} placeholder={localStorage.getItem('openai') || "Enter the API key"}
/> />
<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">
@ -709,7 +645,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={anthropic_APIKey_PlaceHolder} placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
/> />
<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">
@ -721,7 +657,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={google_APIKey_PlaceHolder} placeholder={localStorage.getItem('google') || "Enter the API key"}
/> />
<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">
@ -806,12 +742,8 @@ 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) // ???? window.location.reload();
}
if (typeof window !== 'undefined') {
window.location.reload();
}
}}> }}>
Apply Apply
</button> </button>

20
app/components/settings/settingUtils.ts
View file

@ -5,13 +5,11 @@ 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) { if (key !== "accountName" && key !== "accountPassword" && key !== "accountEmail") {
if (key !== "accountName" && key !== "accountPassword" && key !== "accountEmail") { settings[key] = localStorage.getItem(key) || "";
settings[key] = localStorage.getItem(key) || "";
}
} }
} }
} }
@ -26,11 +24,9 @@ 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) {

154
app/components/settings/theme.ts
View file

@ -114,82 +114,80 @@ 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'), headerTextColor: localStorage.getItem('headerTextColor'),
headerTextColor: localStorage.getItem('headerTextColor'), textColor: localStorage.getItem('textColor'),
textColor: localStorage.getItem('textColor'), inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
inputBackgroundColor: localStorage.getItem('inputBackgroundColor'), inputButtonColor: localStorage.getItem('inputButtonColor'),
inputButtonColor: localStorage.getItem('inputButtonColor'), inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'), userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'), userMessageTextColor: localStorage.getItem('userMessageTextColor'),
userMessageTextColor: localStorage.getItem('userMessageTextColor'), aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'), aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
aiMessageTextColor: localStorage.getItem('aiMessageTextColor'), buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'), buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'), modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'), historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
historyBackgroundColor: localStorage.getItem('historyBackgroundColor'), leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'), conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'), docBackgroundColor: localStorage.getItem('docBackgroundColor'),
docBackgroundColor: localStorage.getItem('docBackgroundColor'), closeButtonColor: localStorage.getItem('closeButtonColor'),
closeButtonColor: localStorage.getItem('closeButtonColor'), closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'), applyButtonColor: localStorage.getItem('applyButtonColor'),
applyButtonColor: localStorage.getItem('applyButtonColor'), applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'), burgerMenu: localStorage.getItem('burgerMenu'),
burgerMenu: localStorage.getItem('burgerMenu'), overlayTextColor: localStorage.getItem('overlayTextColor'),
overlayTextColor: localStorage.getItem('overlayTextColor'), faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'), faqHeadingColor: localStorage.getItem('faqHeadingColor'),
faqHeadingColor: localStorage.getItem('faqHeadingColor'), faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'), faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'), faqItemTextColor: localStorage.getItem('faqItemTextColor'),
faqItemTextColor: localStorage.getItem('faqItemTextColor'), faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'), popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
popupBackgroundColor: localStorage.getItem('popupBackgroundColor'), popUpText: localStorage.getItem('popUpText'),
popUpText: localStorage.getItem('popUpText'), inputBorderColor: localStorage.getItem('inputBorderColor'),
inputBorderColor: localStorage.getItem('inputBorderColor'), fontFamily: localStorage.getItem('fontFamily'),
fontFamily: localStorage.getItem('fontFamily'), fontSize: localStorage.getItem('fontSize'),
fontSize: localStorage.getItem('fontSize'),
};
document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
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-size', themeVariables.fontSize || '16px');
}; };
}
document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
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-size', themeVariables.fontSize || '16px');
};
// TypeScript types for color parameters // TypeScript types for color parameters
type Color = string; type Color = string;
@ -249,10 +247,8 @@ 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)

80
app/page.tsx
View file

@ -15,22 +15,20 @@ 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("#fefefe"); const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
const [secondaryColor, setSecondaryColor] = useState("#fefefe"); const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
const [accentColor, setAccentColor] = useState("#fefefe"); const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState("#fefefe"); const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
const [basicTextColor, setBasicTextColor] = useState("#fefefe"); const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#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);
@ -45,35 +43,33 @@ 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) { case 'IOMARKET':
case 'IOMARKET': applyIOMarketTheme();
applyIOMarketTheme(); break;
break; case 'WHITE':
case 'WHITE': applyWhiteTheme();
applyWhiteTheme(); break;
break; case 'BLACK':
case 'BLACK': applyBlackTheme();
applyBlackTheme(); break;
break; case 'CUSTOM':
case 'CUSTOM': applyCustomTheme();
applyCustomTheme(); break;
break; case 'BASIC-CUSTOM':
case 'BASIC-CUSTOM': applyBasicCustomTheme(
applyBasicCustomTheme( primaryColor,
primaryColor, secondaryColor,
secondaryColor, accentColor,
accentColor, basicBackgroundColor,
basicBackgroundColor, basicTextColor
basicTextColor );
); break;
break; default:
default: applyIOMarketTheme();
applyIOMarketTheme(); 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