diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index ed09bb4..bf8a191 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -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(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(null) + const getWorkerRef = useRef(null) + const [messages, setMessages] = useState([{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 (
{ - 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 - } - - -} \ No newline at end of file diff --git a/app/backend/threads/GetWorker.js b/app/backend/threads/GetWorker.js new file mode 100644 index 0000000..23d8e63 --- /dev/null +++ b/app/backend/threads/GetWorker.js @@ -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"}) + + }) +} \ No newline at end of file diff --git a/app/backend/threads/PostWorker.js b/app/backend/threads/PostWorker.js new file mode 100644 index 0000000..730c852 --- /dev/null +++ b/app/backend/threads/PostWorker.js @@ -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}) + }) +} \ No newline at end of file diff --git a/app/components/Login.tsx b/app/components/Login.tsx index c37a1fa..d98896e 100644 --- a/app/components/Login.tsx +++ b/app/components/Login.tsx @@ -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 = () => {
{/* Login or Settings Button */}
-
- {/* Conditional rendering of the initial Popup */} - {showPopup && ( + {/* Conditional rendering of the Login Popup */} + {showLoginPopup && (
-

Register

- - {/* Name or Email Input */} -
- setEmail(e.target.value)} - /> -
- - {/* Password Input (displayed as asterisks) */} -
- setPassword(e.target.value)} - /> -
- - {/* Create Account and Sign In buttons */} -
- -

- Already have an account? Sign in {' '} - - here - -

-
+

Log In

{/* Close Button */} - -
-
- )} - - {/* Conditional rendering of the Sign-In Popup */} - {showSignInPopup && ( -
-
-

Sign In

{/* Name or Email Input */}
setEmail(e.target.value)} />
- {/* Password Input (displayed as asterisks) */} + {/* Password Input */}
setPassword(e.target.value)} />
@@ -121,11 +94,56 @@ const Login: React.FC = () => {
+ {/* Text for creating an account */} +

+ Don't have an account yet? Create one {' '} + + here + +

+
+
+ )} + + {/* Conditional rendering of the Sign-Up Popup */} + {showSignUpPopup && ( +
+
+

Create Account

+ + {/* New Account Email Input */} +
+ setNewAccountEmail(e.target.value)} + /> +
+ + {/* New Account Password Input */} +
+ setNewAccountPassword(e.target.value)} + /> +
+ + {/* Create Account Button */} +
+ +
+ {/* Close Button */} - -
+
)} diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index ea1a818..2f8b5d8 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -45,7 +45,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [newPassword, setNewPassword] = useState(''); // Theme selection - const [selectedTheme, setSelectedTheme] = useState('IOMARKET'); // Default value can be 'IOMARKET' + const [selectedTheme, setSelectedTheme] = useState('default'); // Effect to update CSS variables on theme state change @@ -99,43 +99,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (

General Settings

- setPreferredLanguage(e.target.value)} - /> + > + + + + + + + + + + + {/* Add more languages as needed */} +
- setPreferredCurrency(e.target.value)} - /> + > + + + + + + + + + + {/* Add more currencies as needed */} +
- setDateFormat(e.target.value)} - /> + > + + + + + + {/* Add more formats as needed */} +
- setTimeFormat(e.target.value)} - /> + > + + + + {/* Add more formats if necessary */} +
- setTimeZone(e.target.value)} - /> + > + + + + + + + + + + + {/* Add more time zones as needed */} +
); @@ -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 > + - - + {/* Conditionally render theme settings only if "CUSTOM" is selected */} {selectedTheme === 'CUSTOM' && ( <> diff --git a/app/styles/Login.css b/app/styles/Login.css index c8c559e..8c77229 100644 --- a/app/styles/Login.css +++ b/app/styles/Login.css @@ -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; diff --git a/app/styles/Settings.css b/app/styles/Settings.css index 014a3a8..bf88759 100644 --- a/app/styles/Settings.css +++ b/app/styles/Settings.css @@ -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 */ diff --git a/app/styles/container.css b/app/styles/container.css index 08f254a..e281216 100644 --- a/app/styles/container.css +++ b/app/styles/container.css @@ -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 { diff --git a/app/styles/global.css b/app/styles/global.css index f1bcfdf..1db5ccb 100644 --- a/app/styles/global.css +++ b/app/styles/global.css @@ -45,3 +45,7 @@ input { input:hover { border-color: var(--button-hover-background-color); } + +select{ + background-color: var(--input-background-color); +} diff --git a/app/styles/history.css b/app/styles/history.css index 7bc9bcd..83e5271 100644 --- a/app/styles/history.css +++ b/app/styles/history.css @@ -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; diff --git a/app/styles/output.css b/app/styles/output.css index f5d7924..2abde1d 100644 --- a/app/styles/output.css +++ b/app/styles/output.css @@ -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 { diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css index ebb9da1..524e730 100644 --- a/app/styles/user-ai-messages.css +++ b/app/styles/user-ai-messages.css @@ -15,7 +15,7 @@ color: var(--text-color); border-bottom-right-radius: 0; margin-left: auto; - text-align: right; + text-align: left; } .ai-message { diff --git a/app/styles/variables.css b/app/styles/variables.css index e5b3bbc..a051e6d 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -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 */