From bc29dab968fa40022c36aa2701ed23db1b4fb1a2 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Tue, 24 Sep 2024 07:42:39 +0200
Subject: [PATCH 1/4] Fixed the responsive design
---
app/components/Settings.tsx | 1 +
app/styles/responsive.css | 8 ++++++--
2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 2f8b5d8..220e34f 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -579,6 +579,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li>
+ {/* Make something that can export and import all settings */}
</ul>
</div>
<div className="settings-main">
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 31f563d..08818cf 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -12,7 +12,7 @@
position: relative;
top: 0;
left: 0;
- margin-top: 5px;
+ margin-top: 0px;
padding-top: 0;
width: 100%;
}
@@ -23,7 +23,7 @@
flex-direction: column;
align-items: center;
width: 100vw;
- overflow: hidden;
+ overflow: scroll;
margin: 0;
padding: 0;
}
@@ -111,6 +111,10 @@
background-color: var(--input-button-color); /* Use variable for button color */
color: var(--user-message-text-color); /* Use variable for button text color */
}
+
+ .login-button button{
+ margin: 20px 0;
+ }
}
/* Responsive adjustments for the settings */
From 7010be84ea7cb1569105b5e27e616c23d0524398 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.codeberg.org>
Date: Tue, 24 Sep 2024 09:24:31 +0200
Subject: [PATCH 2/4] Uhmm fixed
---
py/ai.py | 29 +++++++++++++++++++++++++++++
py/api.py | 13 ++++++++++---
py/requirements.txt | 3 +--
py/run.py | 7 -------
py/webapp.py | 1 -
5 files changed, 40 insertions(+), 13 deletions(-)
delete mode 100644 py/run.py
delete mode 100644 py/webapp.py
diff --git a/py/ai.py b/py/ai.py
index a8c5537..f78b3b7 100644
--- a/py/ai.py
+++ b/py/ai.py
@@ -1,5 +1,6 @@
from mistralai import Mistral
from openai import OpenAI
+import google.generativeai as genai
import anthropic
import ollama
@@ -72,3 +73,31 @@ class AI:
for text in stream.text_stream:
with return_class.ai_response_lock:
return_class.ai_response[access_token] += text
+
+ @staticmethod
+ def process_google(model, messages, return_class, access_token, api_key):
+
+ message = messages[-1]['content']
+ messages.pop()
+
+ system = None
+ if messages and messages[0]['role'] == 'system':
+ system = messages[0]['content']
+ messages.pop(0)
+
+ for msg in messages:
+ msg['parts'] = msg.pop('content')
+
+ for msg in messages:
+ if msg['role'] == 'assistant':
+ msg['role'] = 'model'
+
+ genai.configure(api_key=api_key)
+ model = genai.GenerativeModel("gemini-1.5-flash")
+ chat = model.start_chat(
+ system_instruction=system,
+ history=[
+ {"role": "user", "parts": "Hello"},
+ {"role": "model", "parts": "Great to meet you. What would you like to know?"},
+ ]
+ )
diff --git a/py/api.py b/py/api.py
index be44561..6c2d243 100644
--- a/py/api.py
+++ b/py/api.py
@@ -42,19 +42,22 @@ class API:
return jsonify({'status': 200})
elif model_type == "mistral":
api_key = data.get('api_key')
- thread = threading.Thread(target=self.ai.process_mistralai, args=(ai_model, messages, self, access_token, api_key))
+ thread = threading.Thread(target=self.ai.process_mistralai,
+ args=(ai_model, messages, self, access_token, api_key))
thread.start()
thread.join()
return jsonify({'status': 200})
elif model_type == "openai":
api_key = data.get('api_key')
- thread = threading.Thread(target=self.ai.process_openai, args=(ai_model, messages, self, access_token, api_key))
+ thread = threading.Thread(target=self.ai.process_openai,
+ args=(ai_model, messages, self, access_token, api_key))
thread.start()
thread.join()
return jsonify({'status': 200})
elif model_type == "anthropic":
api_key = data.get('api_key')
- thread = threading.Thread(target=self.ai.process_anthropic, args=(ai_model, messages, self, access_token, api_key))
+ thread = threading.Thread(target=self.ai.process_anthropic,
+ args=(ai_model, messages, self, access_token, api_key))
thread.start()
thread.join()
return jsonify({'status': 200})
@@ -118,3 +121,7 @@ class API:
ssl_context = ("cert.pem", "key.pem")
self.app.run(debug=True, host='0.0.0.0', port=5000)
+
+
+api = API()
+api.run()
diff --git a/py/requirements.txt b/py/requirements.txt
index 8a79dc1..bd93ad7 100644
--- a/py/requirements.txt
+++ b/py/requirements.txt
@@ -4,5 +4,4 @@ ollama
mistralai
openai
anthropic
-pyOpenSSL
-pywebview
\ No newline at end of file
+pyOpenSSL
\ No newline at end of file
diff --git a/py/run.py b/py/run.py
deleted file mode 100644
index 612d72e..0000000
--- a/py/run.py
+++ /dev/null
@@ -1,7 +0,0 @@
-import os
-import webview
-
-os.system("python api.py")
-webview.create_window('Hello world', 'http://localhost:3000')
-webview.start()
-
diff --git a/py/webapp.py b/py/webapp.py
deleted file mode 100644
index 8b13789..0000000
--- a/py/webapp.py
+++ /dev/null
@@ -1 +0,0 @@
-
From 778bfd632e8a7ae4d1595237d88edd7d33780716 Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.codeberg.org>
Date: Tue, 24 Sep 2024 09:27:36 +0200
Subject: [PATCH 3/4] Thanks Google for not using standards.
---
py/ai.py | 13 ++++++++-----
1 file changed, 8 insertions(+), 5 deletions(-)
diff --git a/py/ai.py b/py/ai.py
index f78b3b7..5879e9d 100644
--- a/py/ai.py
+++ b/py/ai.py
@@ -93,11 +93,14 @@ class AI:
msg['role'] = 'model'
genai.configure(api_key=api_key)
- model = genai.GenerativeModel("gemini-1.5-flash")
+
+ model = genai.GenerativeModel(model)
+
chat = model.start_chat(
system_instruction=system,
- history=[
- {"role": "user", "parts": "Hello"},
- {"role": "model", "parts": "Great to meet you. What would you like to know?"},
- ]
+ history=messages
)
+
+ response = chat.send_message(message, stream=True)
+ for chunk in response:
+ return_class.ai_response[access_token] += chunk.text
From bb4095a3360591933e32da17b8887dd757381665 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Tue, 24 Sep 2024 09:27:49 +0200
Subject: [PATCH 4/4] Broke the responsive once again and edited the settings
---
app/components/Settings.tsx | 390 ++++++++++++++++++++++++---------
app/components/settingUtils.ts | 22 ++
tailwind.config.ts | 21 --
3 files changed, 311 insertions(+), 122 deletions(-)
create mode 100644 app/components/settingUtils.ts
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 220e34f..ecc8a34 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -1,9 +1,22 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
const [activeSection, setActiveSection] = useState('general');
+ const [preferredLanguage, setPreferredLanguage] = useState('en');
+ const [preferredCurrency, setPreferredCurrency] = useState('usd');
+ const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
+ const [timeFormat, setTimeFormat] = useState('12-hour');
+ const [timeZone, setTimeZone] = useState('GMT');
+ const [disableOnlineAI, setDisableOnlineAI] = useState(false);
+ const [disableChatHistory, setDisableChatHistory] = useState(false);
+ const [disableAIMemory, setDisableAIMemory] = useState(false);
+ const [openSourceMode, setOpenSourceMode] = useState(false);
+ const [newName, setNewName] = useState('');
+ const [newEmail, setNewEmail] = useState('');
+ const [newPassword, setNewPassword] = useState('');
- // Theme settings state
+ // Theme settings state
const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
@@ -24,73 +37,111 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
- // General settings state
- const [preferredLanguage, setPreferredLanguage] = useState<string>('English');
- const [preferredCurrency, setPreferredCurrency] = useState<string>('USD');
- const [dateFormat, setDateFormat] = useState<string>('MM/DD/YYYY');
- const [timeFormat, setTimeFormat] = useState<string>('12-hour');
- const [timeZone, setTimeZone] = useState<string>('UTC');
+ // Theme selection
+ const [selectedTheme, setSelectedTheme] = useState<string>('default');
- // Privacy settings state
- const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
- const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
- const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
+ // Apply imported settings to the CSS variables
+ const applySettings = (settings: any) => {
+ if (settings.backgroundColor) {
+ setBackgroundColor(settings.backgroundColor);
+ document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
+ }
+
+ if (settings.textColor) {
+ setTextColor(settings.textColor);
+ document.documentElement.style.setProperty('--text-color', settings.textColor);
+ }
+
+ if (settings.inputBackgroundColor) {
+ setInputBackgroundColor(settings.inputBackgroundColor);
+ document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
+ }
+
+ if (settings.inputButtonColor) {
+ setInputButtonColor(settings.inputButtonColor);
+ document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
+ }
+
+ if (settings.inputButtonHoverColor) {
+ setInputButtonHoverColor(settings.inputButtonHoverColor);
+ document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
+ }
+
+ if (settings.userMessageBackgroundColor) {
+ setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
+ document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
+ }
+
+ if (settings.userMessageTextColor) {
+ setUserMessageTextColor(settings.userMessageTextColor);
+ document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
+ }
+
+ if (settings.aiMessageBackgroundColor) {
+ setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
+ document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
+ }
+
+ if (settings.aiMessageTextColor) {
+ setAiMessageTextColor(settings.aiMessageTextColor);
+ document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
+ }
+
+ if (settings.buttonBackgroundColor) {
+ setButtonBackgroundColor(settings.buttonBackgroundColor);
+ document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
+ }
+
+ if (settings.buttonHoverBackgroundColor) {
+ setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
+ document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
+ }
+
+ if (settings.modelsBackgroundColor) {
+ setModelsBackgroundColor(settings.modelsBackgroundColor);
+ document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
+ }
+
+ if (settings.historyBackgroundColor) {
+ setHistoryBackgroundColor(settings.historyBackgroundColor);
+ document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
+ }
+
+ if (settings.leftPanelBackgroundColor) {
+ setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
+ document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
+ }
+
+ if (settings.conversationBackgroundColor) {
+ setConversationBackgroundColor(settings.conversationBackgroundColor);
+ document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
+ }
+
+ if (settings.popUpTextColor) {
+ setPopUpTextColor(settings.popUpTextColor);
+ document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
+ }
+
+ if (settings.inputBorderColor) {
+ setInputBorderColor(settings.inputBorderColor);
+ document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
+ }
+
+ if (settings.fontFamily) {
+ setFontFamily(settings.fontFamily);
+ document.documentElement.style.setProperty('--font-family', settings.fontFamily);
+ }
+
+ if (settings.fontSize) {
+ setFontSize(settings.fontSize);
+ document.documentElement.style.setProperty('--font-size', settings.fontSize);
+ }
+ };
- // FOSS settings state
- const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
-
- // Account settings state
- const [newName, setNewName] = useState<string>('');
- const [newEmail, setNewEmail] = useState<string>('');
- const [newPassword, setNewPassword] = useState<string>('');
-
- // Theme selection
- const [selectedTheme, setSelectedTheme] = useState<string>('default');
+
- // Effect to update CSS variables on theme state change
- useEffect(() => {
- document.documentElement.style.setProperty('--background-color', backgroundColor);
- document.documentElement.style.setProperty('--text-color', textColor);
- document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor);
- document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
- document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor);
- document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
- document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor);
- document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
- document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor);
- document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor);
- document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
- document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor);
- document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor);
- document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor);
- document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor);
- document.documentElement.style.setProperty('--pop-up-text', popUpTextColor);
- document.documentElement.style.setProperty('--input-border-color', inputBorderColor);
- document.documentElement.style.setProperty('--font-family', fontFamily);
- document.documentElement.style.setProperty('--font-size', fontSize);
- }, [
- backgroundColor,
- textColor,
- inputBackgroundColor,
- inputButtonColor,
- inputButtonHoverColor,
- userMessageBackgroundColor,
- userMessageTextColor,
- aiMessageBackgroundColor,
- aiMessageTextColor,
- buttonBackgroundColor,
- buttonHoverBackgroundColor,
- modelsBackgroundColor,
- historyBackgroundColor,
- leftPanelBackgroundColor,
- conversationBackgroundColor,
- popUpTextColor,
- inputBorderColor,
- fontFamily,
- fontSize,
- ]);
-
+ // Render settings content based on the active section
const renderSettingsContent = () => {
switch (activeSection) {
case 'general':
@@ -113,7 +164,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<option value="ja">Japanese</option>
<option value="ru">Russian</option>
<option value="ar">Arabic</option>
- {/* Add more languages as needed */}
</select>
</div>
<div className="settings-option">
@@ -131,7 +181,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<option value="chf">CHF</option>
<option value="cny">CNY</option>
<option value="inr">INR</option>
- {/* Add more currencies as needed */}
</select>
</div>
<div className="settings-option">
@@ -145,7 +194,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<option value="yyyy-mm-dd">YYYY-MM-DD</option>
<option value="mm-dd-yyyy">MM-DD-YYYY</option>
<option value="dd-mm-yyyy">DD-MM-YYYY</option>
- {/* Add more formats as needed */}
</select>
</div>
<div className="settings-option">
@@ -156,8 +204,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
>
<option value="12-hour">12 Hour</option>
<option value="24-hour">24 Hour</option>
- <option value="am-pm">AM/PM Format</option>
- {/* Add more formats if necessary */}
</select>
</div>
<div className="settings-option">
@@ -176,7 +222,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<option value="IST">IST</option>
<option value="CET">CET</option>
<option value="JST">JST</option>
- {/* Add more time zones as needed */}
</select>
</div>
</div>
@@ -203,7 +248,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
checked={disableChatHistory}
onChange={() => setDisableChatHistory(!disableChatHistory)}
/>
- Disable Chat History Save
+ Disable Chat History
</label>
</div>
<div className="settings-option">
@@ -216,9 +261,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
Disable AI Memory
</label>
</div>
- <div className="settings-option">
- <button onClick={() => { /* Export data logic */ }}>Export My Data</button>
- </div>
</div>
);
@@ -356,152 +398,242 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
onChange={(e) => {
const newSize = `${e.target.value}px`;
setFontSize(newSize);
- document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
+ document.documentElement.style.setProperty('--font-size', newSize);
}}
/>
<span>{fontSize}</span>
</div>
+
<div className="settings-option">
<p>Background Color</p>
<input
type="color"
value={backgroundColor}
- onChange={(e) => setBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Text Color</p>
<input
type="color"
value={textColor}
- onChange={(e) => setTextColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setTextColor(newColor);
+ document.documentElement.style.setProperty('--text-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Input Background Color</p>
<input
type="color"
value={inputBackgroundColor}
- onChange={(e) => setInputBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setInputBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--input-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Input Button Color</p>
<input
type="color"
value={inputButtonColor}
- onChange={(e) => setInputButtonColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setInputButtonColor(newColor);
+ document.documentElement.style.setProperty('--input-button-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Input Button Hover Color</p>
<input
type="color"
value={inputButtonHoverColor}
- onChange={(e) => setInputButtonHoverColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setInputButtonHoverColor(newColor);
+ document.documentElement.style.setProperty('--input-button-hover-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>User Message Background Color</p>
<input
type="color"
value={userMessageBackgroundColor}
- onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setUserMessageBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--user-message-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>User Message Text Color</p>
<input
type="color"
value={userMessageTextColor}
- onChange={(e) => setUserMessageTextColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setUserMessageTextColor(newColor);
+ document.documentElement.style.setProperty('--user-message-text-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>AI Message Background Color</p>
<input
type="color"
value={aiMessageBackgroundColor}
- onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setAiMessageBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--ai-message-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>AI Message Text Color</p>
<input
type="color"
value={aiMessageTextColor}
- onChange={(e) => setAiMessageTextColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setAiMessageTextColor(newColor);
+ document.documentElement.style.setProperty('--ai-message-text-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Button Background Color</p>
<input
type="color"
value={buttonBackgroundColor}
- onChange={(e) => setButtonBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setButtonBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--button-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Button Hover Background Color</p>
<input
type="color"
value={buttonHoverBackgroundColor}
- onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setButtonHoverBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--button-hover-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Models Background Color</p>
<input
type="color"
value={modelsBackgroundColor}
- onChange={(e) => setModelsBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setModelsBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--models-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>History Background Color</p>
<input
type="color"
value={historyBackgroundColor}
- onChange={(e) => setHistoryBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setHistoryBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--history-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Left Panel Background Color</p>
<input
type="color"
value={leftPanelBackgroundColor}
- onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setLeftPanelBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--left-panel-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Conversation Background Color</p>
<input
type="color"
value={conversationBackgroundColor}
- onChange={(e) => setConversationBackgroundColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setConversationBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--conversation-background-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Pop-up Text Color</p>
<input
type="color"
value={popUpTextColor}
- onChange={(e) => setPopUpTextColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setPopUpTextColor(newColor);
+ document.documentElement.style.setProperty('--pop-up-text', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Input Border Color</p>
<input
type="color"
value={inputBorderColor}
- onChange={(e) => setInputBorderColor(e.target.value)}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setInputBorderColor(newColor);
+ document.documentElement.style.setProperty('--input-border-color', newColor);
+ }}
/>
</div>
+
<div className="settings-option">
<p>Font Family</p>
<select
value={fontFamily}
- onChange={(e) => setFontFamily(e.target.value)}
+ onChange={(e) => {
+ const newFont = e.target.value;
+ setFontFamily(newFont);
+ document.documentElement.style.setProperty('--font-family', newFont);
+ }}
>
<option value="'Poppins', sans-serif">Poppins</option>
<option value="'Arial', sans-serif">Arial</option>
@@ -510,15 +642,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<option value="'Times New Roman', serif">Times New Roman</option>
</select>
</div>
+
</>
)}
</div>
);
-
+
+
case 'foss':
return (
<div className="settings-section">
- <h2>Free and Open Source Software (FOSS) Settings</h2>
+ <h2>Open Source Settings</h2>
<div className="settings-option">
<label>
<input
@@ -537,7 +671,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<div className="settings-section">
<h2>Account Settings</h2>
<div className="settings-option">
- <label>Change Name</label>
+ <label>New Name</label>
<input
type="text"
value={newName}
@@ -545,7 +679,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
/>
</div>
<div className="settings-option">
- <label>Change Email</label>
+ <label>New Email</label>
<input
type="email"
value={newEmail}
@@ -553,7 +687,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
/>
</div>
<div className="settings-option">
- <label>Change Password</label>
+ <label>New Password</label>
<input
type="password"
value={newPassword}
@@ -563,11 +697,66 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</div>
);
+ case 'im/export':
+ return (
+ <div className="settings-section">
+ <h2>Import & Export</h2>
+ <div className="settings-option">
+ <h3>Export the settings</h3>
+ <button onClick={() => exportSettings(currentSettings)}>Export Settings</button>
+ </div>
+ <div className="settings-option">
+ <h3>Import the settings</h3>
+ <input type="file" onChange={handleImport} accept=".json" />
+ </div>
+ </div>
+ );
+
default:
return null;
}
};
+ // Handle file import
+ const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+ if (event.target.files && event.target.files.length > 0) {
+ const file = event.target.files[0];
+ importSettings(file, applySettings);
+ }
+ };
+
+ // Gather all settings into an object
+ const currentSettings = {
+ backgroundColor,
+ textColor,
+ inputBackgroundColor,
+ inputButtonColor,
+ inputButtonHoverColor,
+ userMessageBackgroundColor,
+ userMessageTextColor,
+ aiMessageBackgroundColor,
+ aiMessageTextColor,
+ buttonBackgroundColor,
+ buttonHoverBackgroundColor,
+ modelsBackgroundColor,
+ historyBackgroundColor,
+ leftPanelBackgroundColor,
+ conversationBackgroundColor,
+ popUpTextColor,
+ inputBorderColor,
+ fontFamily,
+ fontSize,
+ preferredLanguage,
+ preferredCurrency,
+ dateFormat,
+ timeFormat,
+ timeZone,
+ disableOnlineAI,
+ disableChatHistory,
+ disableAIMemory,
+ openSourceMode,
+ };
+
return (
<div className="popup-overlay">
<div className="settings-content">
@@ -579,7 +768,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li>
- {/* Make something that can export and import all settings */}
+ <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</ul>
</div>
<div className="settings-main">
@@ -590,7 +779,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</div>
</div>
</div>
-
);
};
diff --git a/app/components/settingUtils.ts b/app/components/settingUtils.ts
new file mode 100644
index 0000000..e327524
--- /dev/null
+++ b/app/components/settingUtils.ts
@@ -0,0 +1,22 @@
+// settingsUtils.ts
+
+// Export the current settings as a JSON file
+export const exportSettings = (settings: any) => {
+ const blob = new Blob([JSON.stringify(settings)], { type: 'application/json' });
+ const link = document.createElement('a');
+ link.href = URL.createObjectURL(blob);
+ link.download = 'settings.json';
+ link.click();
+ };
+
+ // Import settings from a JSON file
+ export const importSettings = (file: File, applySettings: (settings: any) => void) => {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const content = e.target?.result as string;
+ const importedSettings = JSON.parse(content);
+ applySettings(importedSettings);
+ };
+ reader.readAsText(file);
+ };
+
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a883ff7..e69de29 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,21 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
- content: [
- "./pages/**/*.{js,ts,jsx,tsx,mdx}",
- "./components/**/*.{js,ts,jsx,tsx,mdx}",
- "./app/**/*.{js,ts,jsx,tsx,mdx}",
- ],
- theme: {
- extend: {
- colors: {
- 'history-background': 'var(--history-background-color)',
- 'text-color': 'var(--text-color)',
- 'input-button-hover-color': 'var(--input-button-hover-color)',
- },
- },
- },
- plugins: [],
-};
-
-export default config;