forked from React-Group/interstellar_ai
main #18
14 changed files with 430 additions and 274 deletions
|
|
@ -2,78 +2,137 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import ConversationFrontend from "../components/ConversationFrontend";
|
||||
import InputFrontend from "../components/InputFrontend";
|
||||
|
||||
const handleMicClick = () => {
|
||||
console.log('Mic clicked!');
|
||||
// Do something when the mic button is clicked
|
||||
};
|
||||
|
||||
|
||||
const handleResendClick = () => {
|
||||
console.log('Resend button clicked');
|
||||
// Handle resend action
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
console.log('Edit button clicked');
|
||||
// Handle edit action
|
||||
};
|
||||
|
||||
const handleCopyClick = () => {
|
||||
console.log('Copy button clicked');
|
||||
// Handle copy action
|
||||
};
|
||||
import axios from "axios";
|
||||
import { log } from 'console';
|
||||
|
||||
const InputOutputBackend: React.FC = () => {
|
||||
const [accessToken, setAccessToken] = useState("")
|
||||
const workerRef = useRef<Worker | null>(null)
|
||||
type Message = {
|
||||
role: string
|
||||
content: string
|
||||
}
|
||||
type Message = {
|
||||
role: string
|
||||
content:string
|
||||
}
|
||||
|
||||
const handleSendClick = (message:string) => {
|
||||
var system:Message = {role:"system" ,content:"You are a helpful assistant."}
|
||||
const [accessToken, setAccessToken] = useState("")
|
||||
const postWorkerRef = useRef<Worker| null>(null)
|
||||
const getWorkerRef = useRef<Worker | null>(null)
|
||||
const [messages, setMessages] = useState<Message[]>([{role:"assistant", content:"Hello! How can I help you?"}])
|
||||
const [liveMessage, setLiveMessage] = useState("")
|
||||
|
||||
addMessage("user", message);
|
||||
console.log("added User Message")
|
||||
console.log(messages);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
console.log("getting access");
|
||||
axios.get("http://localhost:5000/interstellar/api/ai_create")
|
||||
.then(response => {
|
||||
setAccessToken(response.data.access_token)
|
||||
console.log(response.data.access_token);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("error:", error.message);
|
||||
|
||||
HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system);
|
||||
};
|
||||
})
|
||||
|
||||
const [messages, setMessages] = useState([
|
||||
{ role:"assistant", content:'Hello. I\'m Your AI Virtual Assistant' }
|
||||
]);
|
||||
postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url))
|
||||
|
||||
const addMessage = (role:string ,content: string) => {
|
||||
setMessages((prevMessages) => [...prevMessages, {role,content}]);
|
||||
};
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
workerRef.current = new Worker(new URL("./ProcessAPI.js", import.meta.url))
|
||||
workerRef.current.postMessage({})
|
||||
workerRef.current.onmessage = (e) => {
|
||||
setAccessToken(e.data)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.terminate()
|
||||
}
|
||||
}
|
||||
},[])
|
||||
|
||||
const HandlePostRequest = (messages: Message[], ai_model: string, system_prompt: Message) => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt })
|
||||
workerRef.current.onmessage = (e) => {
|
||||
addMessage("assistant",e.data)
|
||||
}
|
||||
postWorkerRef.current.onmessage = (event) => {
|
||||
const status = event.data.status
|
||||
if (status == 200) {
|
||||
endGetWorker()
|
||||
} else if (status == 500) {
|
||||
if (getWorkerRef.current) {
|
||||
addMessage("assistant", "There was an Error with the AI response")
|
||||
getWorkerRef.current.postMessage("terminate")
|
||||
getWorkerRef.current.terminate()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (postWorkerRef.current) {
|
||||
postWorkerRef.current.terminate()
|
||||
}
|
||||
if (getWorkerRef.current) {
|
||||
getWorkerRef.current.postMessage("terminate")
|
||||
getWorkerRef.current.terminate()
|
||||
}
|
||||
}
|
||||
},[])
|
||||
|
||||
const startGetWorker = () => {
|
||||
if (!getWorkerRef.current) {
|
||||
getWorkerRef.current = new Worker(new URL("./threads/GetWorker.js", import.meta.url))
|
||||
|
||||
getWorkerRef.current.postMessage({ action: "start", access_token:accessToken})
|
||||
|
||||
addMessage("assistant","")
|
||||
getWorkerRef.current.onmessage = (event) => {
|
||||
const data = event.data
|
||||
|
||||
if (event.data == "error") {
|
||||
setLiveMessage("error getting AI response: "+ data.error)
|
||||
} else {
|
||||
console.log("Received data:", data);
|
||||
editLastMessage(data.response)
|
||||
}
|
||||
}
|
||||
|
||||
getWorkerRef.current.onerror = (error) => {
|
||||
console.error("Worker error:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const endGetWorker = () => {
|
||||
if (getWorkerRef.current) {
|
||||
getWorkerRef.current.postMessage({action:"terminate"})
|
||||
getWorkerRef.current.terminate()
|
||||
console.log(messages);
|
||||
}
|
||||
}
|
||||
|
||||
const editLastMessage = (newContent: string) => {
|
||||
setMessages((prevMessages) => {
|
||||
const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages
|
||||
if (updatedMessages.length > 0) {
|
||||
const lastMessage = updatedMessages[updatedMessages.length - 1];
|
||||
updatedMessages[updatedMessages.length - 1] = {
|
||||
...lastMessage, // Keep the existing role and other properties
|
||||
content: newContent, // Update only the content
|
||||
};
|
||||
}
|
||||
return updatedMessages; // Return the updated array
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const addMessage = (role: string, content: string) => {
|
||||
setMessages(previous => [...previous,{role,content}])
|
||||
}
|
||||
const handleSendClick = (inputValue: string) => {
|
||||
if (postWorkerRef.current) {
|
||||
addMessage("user", inputValue)
|
||||
console.log("input:",inputValue);
|
||||
postWorkerRef.current.postMessage({messages:[...messages, { role: "user", content: inputValue }], ai_model:"phi3.5", access_token:accessToken})
|
||||
startGetWorker()
|
||||
}
|
||||
}
|
||||
|
||||
const handleMicClick = () => {
|
||||
// do stuff
|
||||
}
|
||||
|
||||
const handleResendClick = () => {
|
||||
// do stuff
|
||||
}
|
||||
|
||||
const handleEditClick = () => {
|
||||
// do stuff
|
||||
}
|
||||
|
||||
const handleCopyClick = () => {
|
||||
// do stuff
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ConversationFrontend
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
import axios from 'axios'
|
||||
import { type } from 'os';
|
||||
|
||||
onmessage = function (e) {
|
||||
const { functionName = "getAccess", access_token = "", messages = [], ai_model = "phi3.5", system_prompt = {role:"system" ,content: "You are a helpful assistant that gives short answers"}} = e.data
|
||||
|
||||
let data = {
|
||||
ai_model: ai_model,
|
||||
messages: messages,
|
||||
access_token: access_token
|
||||
};
|
||||
|
||||
const getResponse = () => {
|
||||
messageComplete:boolean = false
|
||||
while(!messageComplete)
|
||||
axios.get('https://localhost:5000/interstellar/api/ai_get?access_token=' + access_token)
|
||||
.then(Response => {
|
||||
postMessage(Response.data.response)
|
||||
if (Response.data.status == 200) {
|
||||
messageComplete = true
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error with GET response request:", error)
|
||||
})
|
||||
}
|
||||
|
||||
switch (functionName) {
|
||||
case "getAccess":
|
||||
console.log("getting access...")
|
||||
axios.get('https://localhost:5000/interstellar/api/ai_create')
|
||||
.then(Response => {
|
||||
postMessage(Response.data.access_token)
|
||||
}).catch(error => {
|
||||
console.error("Error with GET Token request:", error)
|
||||
})
|
||||
break
|
||||
case "postRequest":
|
||||
messages.unshift(system_prompt)
|
||||
console.log("sending...")
|
||||
console.log(messages)
|
||||
axios.post('https://localhost:5000/interstellar/api/ai_send', data)
|
||||
.then(Response => {
|
||||
getResponse()
|
||||
}).catch(error => {
|
||||
console.error("Error:", error)
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
34
app/backend/threads/GetWorker.js
Normal file
34
app/backend/threads/GetWorker.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import axios from "axios";
|
||||
|
||||
let accesstoken
|
||||
onmessage = (event) => {
|
||||
const { action, access_token } = event.data
|
||||
accesstoken=access_token
|
||||
|
||||
if (action === "start") {
|
||||
fetchData()
|
||||
} else if (action === "terminate") {
|
||||
}
|
||||
}
|
||||
|
||||
console.log('starting get loop');
|
||||
|
||||
const fetchData = () => {
|
||||
console.log(accesstoken);
|
||||
|
||||
|
||||
const apiURL = "http://localhost:5000/interstellar/api/ai_get?access_token="+accesstoken
|
||||
|
||||
axios.get(apiURL)
|
||||
.then(response => {
|
||||
const data = response.data
|
||||
console.log(data);
|
||||
postMessage(data)
|
||||
setTimeout(fetchData,100)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Error fetching data:', error);
|
||||
postMessage({error:"failed fetching data"})
|
||||
|
||||
})
|
||||
}
|
||||
29
app/backend/threads/PostWorker.js
Normal file
29
app/backend/threads/PostWorker.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import axios from "axios";
|
||||
|
||||
onmessage = (e) => {
|
||||
const { messages = [{ role: "assistant", content: "Hello! How can I help you?" }], ai_model = "phi3.5", access_token } = e.data
|
||||
messages.unshift({ role: "system", content: "You are a Helpful assistant" })
|
||||
|
||||
const Message = {
|
||||
messages: messages,
|
||||
ai_model: "phi3.5",
|
||||
model_type:"local",
|
||||
access_token:access_token
|
||||
}
|
||||
|
||||
console.log(Message);
|
||||
|
||||
|
||||
axios.post("http://localhost:5000/interstellar/api/ai_send",Message)
|
||||
.then(response => {
|
||||
const status = response.data.status
|
||||
console.log(status);
|
||||
postMessage({ status })
|
||||
console.log('message posted');
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Error calling API:", error)
|
||||
postMessage({status:500})
|
||||
})
|
||||
}
|
||||
|
|
@ -3,8 +3,8 @@ import Settings from './Settings'; // Import the Settings component
|
|||
|
||||
const Login: React.FC = () => {
|
||||
// State to handle popup visibility
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
const [showSignInPopup, setShowSignInPopup] = useState(false);
|
||||
const [showLoginPopup, setShowLoginPopup] = useState(false);
|
||||
const [showSignUpPopup, setShowSignUpPopup] = useState(false);
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [showSettingsPopup, setShowSettingsPopup] = useState(false);
|
||||
|
||||
|
|
@ -12,26 +12,40 @@ const Login: React.FC = () => {
|
|||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [accountName, setAccountName] = useState('Pluto'); // Set the account name
|
||||
const [newAccountEmail, setNewAccountEmail] = useState('');
|
||||
const [newAccountPassword, setNewAccountPassword] = useState('');
|
||||
|
||||
// Function to toggle the popup
|
||||
const togglePopup = () => setShowPopup(!showPopup);
|
||||
// Fixed credentials
|
||||
const fixedEmail = 'pluto@imareal.planet';
|
||||
const fixedPassword = 'fuckTheSun1234';
|
||||
const fixedAccount = 'Pluto';
|
||||
|
||||
// Function to toggle the sign-in popup
|
||||
const toggleSignInPopup = () => {
|
||||
setShowSignInPopup(!showSignInPopup);
|
||||
setShowPopup(false); // Hide login popup when opening the sign-in popup
|
||||
// Function to toggle the login popup
|
||||
const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup);
|
||||
|
||||
// Function to toggle the sign-up popup
|
||||
const toggleSignUpPopup = () => {
|
||||
setShowSignUpPopup(!showSignUpPopup);
|
||||
setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
|
||||
};
|
||||
|
||||
// Function to handle login
|
||||
const handleLogin = () => {
|
||||
if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') {
|
||||
if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) {
|
||||
setIsLoggedIn(true); // Successful login
|
||||
setShowSignInPopup(false); // Close the sign-in popup
|
||||
setShowLoginPopup(false); // Close the login popup
|
||||
} else {
|
||||
alert('Incorrect credentials');
|
||||
}
|
||||
};
|
||||
|
||||
// Function to handle account creation
|
||||
const handleCreateAccount = () => {
|
||||
console.log('New Account Created:', newAccountEmail, newAccountPassword);
|
||||
alert('Account created successfully! You can now log in.');
|
||||
toggleSignUpPopup(); // Close sign-up popup
|
||||
};
|
||||
|
||||
// Function to toggle the settings popup
|
||||
const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
|
||||
|
||||
|
|
@ -39,79 +53,38 @@ const Login: React.FC = () => {
|
|||
<div>
|
||||
{/* Login or Settings Button */}
|
||||
<div className="login-button">
|
||||
<button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}>
|
||||
{isLoggedIn ? 'Settings' : 'Register'}
|
||||
<button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
|
||||
{isLoggedIn ? 'Settings' : 'Log In'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Conditional rendering of the initial Popup */}
|
||||
{showPopup && (
|
||||
{/* Conditional rendering of the Login Popup */}
|
||||
{showLoginPopup && (
|
||||
<div className="popup-overlay">
|
||||
<div className="popup-content">
|
||||
<h2>Register</h2>
|
||||
|
||||
{/* Name or Email Input */}
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name or Email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password Input (displayed as asterisks) */}
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Create Account and Sign In buttons */}
|
||||
<div className="popup-footer">
|
||||
<button onClick={() => alert('Create Account clicked')}>
|
||||
Create Account
|
||||
</button>
|
||||
<p>
|
||||
Already have an account? Sign in {' '}
|
||||
<span
|
||||
style={{ color: 'blue', cursor: 'pointer' }}
|
||||
onClick={toggleSignInPopup}
|
||||
>
|
||||
here
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Log In</h2>
|
||||
|
||||
{/* Close Button */}
|
||||
<button className="close-popup" onClick={togglePopup}>
|
||||
<button className="close-popup" onClick={toggleLoginPopup} aria-label="Close popup">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Conditional rendering of the Sign-In Popup */}
|
||||
{showSignInPopup && (
|
||||
<div className="popup-overlay">
|
||||
<div className="popup-content">
|
||||
<h2>Sign In</h2>
|
||||
|
||||
{/* Name or Email Input */}
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name or Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password Input (displayed as asterisks) */}
|
||||
{/* Password Input */}
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -121,11 +94,56 @@ const Login: React.FC = () => {
|
|||
<button className="log-into-account" onClick={handleLogin}>Log In</button>
|
||||
</div>
|
||||
|
||||
{/* Text for creating an account */}
|
||||
<p>
|
||||
Don't have an account yet? Create one {' '}
|
||||
<span
|
||||
style={{ color: 'blue', cursor: 'pointer' }}
|
||||
onClick={toggleSignUpPopup}
|
||||
>
|
||||
here
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Conditional rendering of the Sign-Up Popup */}
|
||||
{showSignUpPopup && (
|
||||
<div className="popup-overlay">
|
||||
<div className="popup-content">
|
||||
<h2>Create Account</h2>
|
||||
|
||||
{/* New Account Email Input */}
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
value={newAccountEmail}
|
||||
onChange={(e) => setNewAccountEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* New Account Password Input */}
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={newAccountPassword}
|
||||
onChange={(e) => setNewAccountPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Create Account Button */}
|
||||
<div>
|
||||
<button className="create-account" onClick={handleCreateAccount}>Create Account</button>
|
||||
</div>
|
||||
|
||||
{/* Close Button */}
|
||||
<button className="close-popup" onClick={toggleSignInPopup}>
|
||||
<button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
const [newPassword, setNewPassword] = useState<string>('');
|
||||
|
||||
// Theme selection
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('default');
|
||||
|
||||
|
||||
// Effect to update CSS variables on theme state change
|
||||
|
|
@ -99,43 +99,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<h2>General Settings</h2>
|
||||
<div className="settings-option">
|
||||
<label>Preferred Language</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={preferredLanguage}
|
||||
onChange={(e) => setPreferredLanguage(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Spanish</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="zh">Chinese</option>
|
||||
<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">
|
||||
<label>Preferred Currency</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={preferredCurrency}
|
||||
onChange={(e) => setPreferredCurrency(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="usd">USD</option>
|
||||
<option value="eur">EUR</option>
|
||||
<option value="gbp">GBP</option>
|
||||
<option value="jpy">JPY</option>
|
||||
<option value="cad">CAD</option>
|
||||
<option value="aud">AUD</option>
|
||||
<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">
|
||||
<label>Date Format</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={dateFormat}
|
||||
onChange={(e) => setDateFormat(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="mm/dd/yyyy">MM/DD/YYYY</option>
|
||||
<option value="dd/mm/yyyy">DD/MM/YYYY</option>
|
||||
<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">
|
||||
<label>Time Format</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={timeFormat}
|
||||
onChange={(e) => setTimeFormat(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<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">
|
||||
<label>Time Zone</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={timeZone}
|
||||
onChange={(e) => setTimeZone(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="GMT">GMT</option>
|
||||
<option value="EST">EST</option>
|
||||
<option value="CST">CST</option>
|
||||
<option value="MST">MST</option>
|
||||
<option value="PST">PST</option>
|
||||
<option value="UTC">UTC</option>
|
||||
<option value="BST">BST</option>
|
||||
<option value="IST">IST</option>
|
||||
<option value="CET">CET</option>
|
||||
<option value="JST">JST</option>
|
||||
{/* Add more time zones as needed */}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -197,111 +239,110 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
// Apply the appropriate theme based on selection
|
||||
switch (theme) {
|
||||
case 'IOMARKET':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // New header background color
|
||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
|
||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
|
||||
document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
|
||||
document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
|
||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Background color for input fields
|
||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Text color for AI messages
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
|
||||
document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
|
||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Background for models section
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Text color for pop-ups
|
||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
break;
|
||||
case 'WHITE':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background color
|
||||
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
|
||||
document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
|
||||
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
|
||||
document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
|
||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Background color for input fields
|
||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Hover color for input buttons
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // Text color for AI messages
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
|
||||
document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
|
||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Background for models section
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Text color for pop-ups
|
||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
|
||||
break;
|
||||
case 'BLACK':
|
||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background color
|
||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
|
||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
|
||||
document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
|
||||
document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
|
||||
document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Background color for input fields
|
||||
document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // Text color for AI messages
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
|
||||
document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Background for models section
|
||||
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Text color for pop-ups
|
||||
document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
|
||||
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
|
||||
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
// Do nothing, CUSTOM will display the customization options
|
||||
// Handle custom theme logic here
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}} // Handle theme selection
|
||||
>
|
||||
<option value="default">Select your style...</option>
|
||||
<option value="IOMARKET">IOMARKET</option>
|
||||
<option value="WHITE">WHITE</option>
|
||||
<option value="BLACK">BLACK</option>
|
||||
<option value="CUSTOM">CUSTOM</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* Conditionally render theme settings only if "CUSTOM" is selected */}
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
/* Container for the login layout */
|
||||
.login-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
|
||||
grid-auto-flow: column;
|
||||
overflow-x: hidden;
|
||||
height: 100%; /* Ensure it takes full height */
|
||||
}
|
||||
|
||||
/* Button for login action */
|
||||
.login-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
|
|
@ -43,6 +53,7 @@
|
|||
width: 300px;
|
||||
text-align: center;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
position: relative; /* For positioning the close button */
|
||||
}
|
||||
|
||||
/* Input styles */
|
||||
|
|
@ -61,20 +72,28 @@
|
|||
outline: none; /* Remove default outline */
|
||||
}
|
||||
|
||||
/* Close button */
|
||||
/* Close button styles */
|
||||
.close-popup {
|
||||
background: var(--close-button-color); /* Use variable for close button color */
|
||||
color: var(--text-color);
|
||||
color: white; /* Use white for text color */
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
position: absolute; /* Position the button absolutely */
|
||||
top: 10px; /* Distance from the top */
|
||||
right: 10px; /* Distance from the right */
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.close-popup:hover {
|
||||
background: darkred; /* Optional hover effect */
|
||||
}
|
||||
|
||||
/* Log In button styles */
|
||||
.log-into-account {
|
||||
background: var(--login-button-color); /* Use variable for login button color */
|
||||
color: var(--text-color);
|
||||
background: green; /* Use variable for login button color */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
|
|
@ -82,7 +101,7 @@
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Footer section */
|
||||
/* Footer section for popups */
|
||||
.popup-footer {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
|
@ -110,6 +129,7 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Paragraph styles within popup */
|
||||
.popup-content p {
|
||||
color: var(--popup-text-color); /* Use variable for paragraph text color */
|
||||
margin: 10px;
|
||||
|
|
|
|||
|
|
@ -97,23 +97,23 @@
|
|||
|
||||
/* Close button positioning */
|
||||
.close-popup {
|
||||
background-color: var(--close-button-color);
|
||||
color: var(--user-message-text-color);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 10px 20px;
|
||||
background: var(--close-button-color); /* Use variable for close button color */
|
||||
color: white; /* Use white for text color */
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
position: absolute; /* Position absolute to top right */
|
||||
top: 20px; /* Distance from top */
|
||||
right: 20px; /* Distance from right */
|
||||
position: absolute; /* Position the button absolutely */
|
||||
top: 10px; /* Distance from the top */
|
||||
right: 10px; /* Distance from the right */
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.close-popup:hover {
|
||||
background-color: var(--close-button-hover-color); /* Darker red on hover */
|
||||
background: darkred; /* Optional hover effect */
|
||||
}
|
||||
|
||||
|
||||
/* Additional styles for inputs and options */
|
||||
.settings-option {
|
||||
margin-bottom: 20px; /* Adds space between each setting option */
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
|
||||
background-color: var(--left-panel-background-color); /* Use variable for background color */
|
||||
border-radius: 0 1em 0 0;
|
||||
margin-left: 0;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.left-panel.hidden {
|
||||
|
|
|
|||
|
|
@ -45,3 +45,7 @@ input {
|
|||
input:hover {
|
||||
border-color: var(--button-hover-background-color);
|
||||
}
|
||||
|
||||
select{
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.history-background {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/2;
|
||||
height: 40vh;
|
||||
height: 45vh;
|
||||
overflow: hidden;
|
||||
background-color: var(--history-background-color);
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@
|
|||
font-size: 1em;
|
||||
overflow-y: auto;
|
||||
width: calc(100% - 2em); /* Corrected calculation for width */
|
||||
height: 70vh;
|
||||
margin-bottom: 1vh;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
#conversation {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
color: var(--text-color);
|
||||
border-bottom-right-radius: 0;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
--left-panel-background-color: #79832e; /* Background color for left panel */
|
||||
--conversation-background-color: #79832e; /* Background color for conversation container */
|
||||
--doc-background-color: #ffffff; /* Background color for documents */
|
||||
--close-button-color: red;
|
||||
|
||||
/* FAQ Colors */
|
||||
--faq-background-color: #474D22; /* Background color for FAQ section */
|
||||
|
|
|
|||
Loading…
Reference in a new issue