forked from React-Group/interstellar_ai
main (#137)
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/137 Reviewed-by: Patrick <patrick_pluto@noreply.localhost> Co-authored-by: sageTheDM <info@photofuel.tech> Co-committed-by: sageTheDM <info@photofuel.tech>
This commit is contained in:
parent
f9bce3b22a
commit
91353bd051
34 changed files with 682 additions and 567 deletions
|
|
@ -5,9 +5,10 @@ import InputOutputBackend from '../backend/InputOutputHandler';
|
|||
const AI: React.FC = () => {
|
||||
return (
|
||||
<div className="ai-container">
|
||||
{/* Render the InputOutputBackend component for AI input/output handling */}
|
||||
<InputOutputBackend />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AI;
|
||||
export default AI;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,45 @@
|
|||
import React from 'react';
|
||||
|
||||
// Main Credits Component
|
||||
const Credits: React.FC = () => (
|
||||
<div className="credits-container">
|
||||
<section id="credits" className="credits-section">
|
||||
<h1 className="title">Credits</h1>
|
||||
|
||||
<h2 className="subtitle">Icons</h2>
|
||||
<p className="paragraph">This project utilizes the following icon resources:</p>
|
||||
<CreditLink href="https://fontawesome.com/v4/license/" label="fontawesome" />
|
||||
<CreditLink href="https://fontawesome.com/v4/license/" label="FontAwesome" />
|
||||
|
||||
<h2 className="subtitle">Fonts</h2>
|
||||
<p className="paragraph">The fonts used in this project are provided by:</p>
|
||||
<CreditLink href="https://github.com/itfoundry/Poppins" label="Poppins" />
|
||||
<CreditLink href="https://openfontlicense.org" label="Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight" />
|
||||
<CreditLink href="http://www.apache.org/licenses/LICENSE-2.0" label="Roboto, Rock Salt" />
|
||||
<CreditLink
|
||||
href="https://openfontlicense.org"
|
||||
label="Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight"
|
||||
/>
|
||||
<CreditLink
|
||||
href="http://www.apache.org/licenses/LICENSE-2.0"
|
||||
label="Roboto, Rock Salt"
|
||||
/>
|
||||
<CreditLink href="https://ubuntu.com/legal/font-licence" label="Ubuntu" />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CreditLink = ({ href, label }: { href: string; label: string }) => (
|
||||
<a href={href} className="credit-btn" target="_blank" rel="noopener noreferrer">{label}</a>
|
||||
// CreditLink Component for rendering individual credit links
|
||||
const CreditLink: React.FC<{ href: string; label: string }> = ({ href, label }) => (
|
||||
<a
|
||||
href={href}
|
||||
className="credit-btn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`Visit ${label} license page`} // Improve accessibility
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
|
||||
export default Credits;
|
||||
|
||||
// also thank you Leart and Tristan without you two we would not have come this far
|
||||
// and a special thanks and why are you so annoying to Eslint
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
const Documentation = () => {
|
||||
// Documentation Component
|
||||
const Documentation: React.FC = () => {
|
||||
return (
|
||||
<section id="documentation" className="documentation-section">
|
||||
<div className='docDiv'>
|
||||
|
|
|
|||
|
|
@ -1,107 +1,62 @@
|
|||
import React from 'react';
|
||||
|
||||
// FAQ Component
|
||||
const FAQ: React.FC = () => {
|
||||
return (
|
||||
<section id="faq">
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
|
||||
<section id="faq"> {/* Main section for FAQs */}
|
||||
<h2>Frequently Asked Questions</h2> {/* Title for the FAQ section */}
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>What is this AI assistant for?</h3>
|
||||
<p>This AI assistant helps you with various tasks such as answering questions, generating text, and even helping with code or writing tasks.</p>
|
||||
<h3>Why doesn't my selection in the category dropdown menu apply?</h3>
|
||||
<p>Currently, the dropdown menu for selecting AI models does not retain your choice after a website refresh.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>How does the AI assistant work?</h3>
|
||||
<p>The assistant uses machine learning algorithms to understand your input and provide contextually relevant answers or generate content based on the task you've described.</p>
|
||||
<h3>Why is the AI suddenly talking about the weather when I didn't select that option?</h3>
|
||||
<p>The AI is programmed to provide weather information even if you haven't specifically selected the weather option.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>Can I trust the answers given by the AI assistant?</h3>
|
||||
<p>While the AI strives to give accurate and helpful answers, it is important to verify critical information, especially for complex or sensitive queries.</p>
|
||||
<h3>Why isn't the online API working?</h3>
|
||||
<p>At the moment, the online APIs for Google and La Plateforme are not operational. However, the OpenAI and Anthropic APIs may still function.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>What kind of questions can I ask?</h3>
|
||||
<p>You can ask a wide range of questions from simple factual queries to more complex requests like generating creative writing or code snippets.</p>
|
||||
<h3>Why is the AI discussing unrelated topics?</h3>
|
||||
<p>Try disabling the AI system prompt settings, as the AI sometimes tends to focus on those topics excessively.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>Is my data secure when using the AI assistant?</h3>
|
||||
<p>We take privacy seriously. Your data is handled according to our privacy policy, ensuring that any personal information shared is securely processed and not misused.</p>
|
||||
<h3>Why isn't the AI responding in the format I specified in the settings?</h3>
|
||||
<p>Please check if the system prompt settings are enabled. If the issue persists, it may be because the AI is unable to fully adhere to the command.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>How can I provide feedback about the AI assistant?</h3>
|
||||
<p>Feedback can be provided through our feedback form, available on our website. We appreciate your input and use it to improve the AI assistant's performance.</p>
|
||||
<h3>Does this AI have the ability to know my location or search the web?</h3>
|
||||
<p>No, this AI does not possess any capabilities to access your location or browse the web.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>Can I customize the AI assistant's responses?</h3>
|
||||
<p>Customization options are limited in the current version, but we are working on features that will allow users to tailor responses to better suit their needs.</p>
|
||||
<h3>Does the AI really work offline?</h3>
|
||||
<p>Yes! Once you download the necessary models, it can operate fully offline, with the exception of the weather API.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>How frequently is the AI assistant updated?</h3>
|
||||
<p>The AI assistant is updated regularly to improve its functionality and incorporate new features. Stay tuned to our update logs for information on the latest improvements.</p>
|
||||
<h3>Are my messages encrypted?</h3>
|
||||
<p>Unfortunately, not at this time. We recommend keeping your messages as anonymous as possible.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>What should I do if the AI assistant is not working properly?</h3>
|
||||
<p>If you encounter any issues with the AI assistant, please contact our support team for assistance. Provide details about the problem to help us resolve it quickly.</p>
|
||||
<h3>Where is my data saved?</h3>
|
||||
<p>All data, including accounts, settings, and chats, is stored locally on your computer.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>Will the AI assistant be available in multiple languages?</h3>
|
||||
<p>Yes, the AI assistant is designed to support multiple languages. You can specify your language preference in the settings to receive responses in your chosen language.</p>
|
||||
<h3>Is this a virus?</h3>
|
||||
<p>No, this is not a virus. The warning appears because the application is not officially signed.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>How can I integrate the AI assistant into my own application?</h3>
|
||||
<p>Integration guidelines are available in our developer documentation. Follow the instructions to incorporate the AI assistant into your application via our API.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>Is there a mobile version of the AI assistant?</h3>
|
||||
<p>Currently, the AI assistant is optimized for desktop use. We are working on a mobile version to provide a seamless experience on smartphones and tablets.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>Can the AI assistant handle multiple simultaneous conversations?</h3>
|
||||
<p>Yes, the AI assistant is capable of managing multiple conversations at once, ensuring that each interaction is handled efficiently.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>What are the system requirements to use the AI assistant?</h3>
|
||||
<p>The AI assistant can be accessed through most modern web browsers. Ensure your browser is up-to-date for the best experience.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>How can I access previous conversations?</h3>
|
||||
<p>Previous conversations can be accessed through the chat history feature available in the assistant's interface.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>What are the limitations of the current AI assistant?</h3>
|
||||
<p>The AI assistant may have limitations in understanding highly specialized or nuanced topics. We are continuously working to expand its capabilities.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>How do I update my profile or settings?</h3>
|
||||
<p>Profile and settings updates can be made through the account management section of the application. Ensure you save your changes before exiting.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>Can the AI assistant be used offline?</h3>
|
||||
<p>Currently, the AI assistant requires an internet connection to function. Offline capabilities are being explored for future updates.</p>
|
||||
</div>
|
||||
|
||||
<div className="faq-item">
|
||||
<h3>Who can I contact for technical support?</h3>
|
||||
<p>Technical support can be reached through our support contact page on the website. Our team is available to help with any technical issues you may encounter.</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQ;
|
||||
export default FAQ; // Exporting the FAQ component
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import Login from './Login';
|
||||
import Login from './Login'; // Importing the Login component
|
||||
|
||||
// Define the props for the Header component
|
||||
interface HeaderProps {
|
||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void;
|
||||
showDivs: boolean;
|
||||
toggleDivs: () => void;
|
||||
showHistoryModelsToggle: boolean;
|
||||
showToggle: boolean;
|
||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Function to change views
|
||||
showDivs: boolean; // State to show/hide divs
|
||||
toggleDivs: () => void; // Function to toggle divs
|
||||
showHistoryModelsToggle: boolean; // State to show/hide history models
|
||||
showToggle: boolean; // State to show/hide toggle button
|
||||
}
|
||||
|
||||
const Header: React.FC<HeaderProps> = ({
|
||||
|
|
@ -16,50 +17,53 @@ const Header: React.FC<HeaderProps> = ({
|
|||
showHistoryModelsToggle,
|
||||
showToggle,
|
||||
}) => {
|
||||
// State to manage menu open/closed state
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement | null>(null);
|
||||
const toggleRef = useRef<HTMLDivElement | null>(null);
|
||||
const dropdownRef = useRef<HTMLDivElement | null>(null); // Ref for dropdown menu
|
||||
const toggleRef = useRef<HTMLDivElement | null>(null); // Ref for hamburger toggle
|
||||
|
||||
// Pages that will be displayed in the menu
|
||||
// Pages to be displayed in the navigation menu
|
||||
const pages: ('AI' | 'FAQ' | 'Documentation' | 'Credits')[] = ['AI', 'FAQ', 'Documentation', 'Credits'];
|
||||
|
||||
// Toggle menu state
|
||||
// Function to toggle the dropdown menu state
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen((prevMenuOpen) => !prevMenuOpen);
|
||||
};
|
||||
|
||||
// Handle button click
|
||||
// Function to handle view change when a menu item is clicked
|
||||
const handleViewChange = (page: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
|
||||
onViewChange(page);
|
||||
setMenuOpen(false); // Close the menu when a button is clicked
|
||||
onViewChange(page); // Call the onViewChange function with the selected page
|
||||
setMenuOpen(false); // Close the menu after selection
|
||||
};
|
||||
|
||||
// Effect to handle clicks outside of the dropdown
|
||||
// Effect to handle clicks outside the dropdown to close it
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
// Check if the click is outside the dropdown and toggle elements
|
||||
if (
|
||||
dropdownRef.current &&
|
||||
!dropdownRef.current.contains(event.target as Node) &&
|
||||
toggleRef.current &&
|
||||
!toggleRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setMenuOpen(false);
|
||||
setMenuOpen(false); // Close the menu if the click is outside
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
document.addEventListener('mousedown', handleClickOutside); // Listen for clicks
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
document.removeEventListener('mousedown', handleClickOutside); // Cleanup listener on unmount
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
{/* Show the toggle button for divs if conditions are met */}
|
||||
{showToggle && showHistoryModelsToggle && (
|
||||
<button onClick={toggleDivs} className="nav-btn show-hide-btn">
|
||||
{showDivs ? (
|
||||
{showDivs ? ( // Conditional rendering of icon based on showDivs state
|
||||
<>
|
||||
<svg style={{ fill: "var(--text-color)" }} width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
||||
<path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/>
|
||||
|
|
@ -74,27 +78,32 @@ const Header: React.FC<HeaderProps> = ({
|
|||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Navigation menu */}
|
||||
<nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
|
||||
{pages.map(page => (
|
||||
{pages.map(page => ( // Map through pages to create buttons
|
||||
<button key={page} onClick={() => handleViewChange(page)} className="nav-btn">
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Hamburger menu toggle */}
|
||||
<div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span> {/* Top bar of the hamburger */}
|
||||
<span></span> {/* Middle bar of the hamburger */}
|
||||
<span></span> {/* Bottom bar of the hamburger */}
|
||||
</div>
|
||||
|
||||
<div className="header-logo">
|
||||
{/* AI logo or text */}
|
||||
{/* Placeholder for AI logo or text */}
|
||||
</div>
|
||||
<div className="login-button-container">
|
||||
<Login />
|
||||
<Login /> {/* Include the Login component */}
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
export default Header; // Exporting the Header component
|
||||
|
|
|
|||
|
|
@ -1,96 +1,114 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useChatHistory } from '../hooks/useChatHistory';
|
||||
import { useChatHistory } from '../hooks/useChatHistory'; // Importing the custom hook for chat history
|
||||
|
||||
const History: React.FC = () => {
|
||||
const [chatHistory, setSelectedIndex, setChatHistory] = useChatHistory()
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [inputValue, setInputValue] = useState<string>('');
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
|
||||
|
||||
// Destructuring values from the useChatHistory hook
|
||||
const [chatHistory, setSelectedIndex, setChatHistory] = useChatHistory();
|
||||
const [isEditing, setIsEditing] = useState(false); // State to manage edit mode
|
||||
const [inputValue, setInputValue] = useState<string>(''); // State for input field
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); // State to track hovered chat index
|
||||
|
||||
// Function to activate editing mode
|
||||
const handleEditButtonClick = () => {
|
||||
setIsEditing(true);
|
||||
};
|
||||
|
||||
// Function to update input value as the user types
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setInputValue(e.target.value);
|
||||
};
|
||||
|
||||
// Function to save the new chat
|
||||
const handleSaveButtonClick = () => {
|
||||
setIsEditing(false);
|
||||
chatHistory.chats.push({ name: inputValue, messages: [], timestamp: 5 })
|
||||
setInputValue("")
|
||||
setIsEditing(false); // Exit edit mode
|
||||
// Add a new chat entry to the history
|
||||
chatHistory.chats.push({ name: inputValue, messages: [], timestamp: 5 });
|
||||
setInputValue(''); // Reset input value
|
||||
};
|
||||
|
||||
// Function to select a chat from the history
|
||||
const handleHistoryClick = (index: number) => {
|
||||
setSelectedIndex(index)
|
||||
console.log("index",index);
|
||||
}
|
||||
setSelectedIndex(index); // Set the selected index to the clicked chat
|
||||
console.log("index", index);
|
||||
};
|
||||
|
||||
const handleHistoryHover = (index:number) => {
|
||||
setHoveredIndex(index)
|
||||
}
|
||||
// Function to handle hover over a chat entry
|
||||
const handleHistoryHover = (index: number) => {
|
||||
setHoveredIndex(index); // Set hovered index
|
||||
};
|
||||
|
||||
// Function to reset hovered index when not hovering
|
||||
const handleHistoryNotHover = () => {
|
||||
setHoveredIndex(null)
|
||||
}
|
||||
|
||||
console.log("chat length",chatHistory.chats.length)
|
||||
console.log("index",chatHistory.selectedIndex)
|
||||
setHoveredIndex(null); // Reset hovered index
|
||||
};
|
||||
|
||||
// Debugging information for chat history length and selected index
|
||||
console.log("chat length", chatHistory.chats.length);
|
||||
console.log("index", chatHistory.selectedIndex);
|
||||
|
||||
// Function to delete a chat entry
|
||||
const handleHistoryDeletion = (index: number) => {
|
||||
const currentIndex = chatHistory.selectedIndex;
|
||||
const currentIndex = chatHistory.selectedIndex; // Get the currently selected index
|
||||
|
||||
// Create a new copy of the current chat history
|
||||
// Create a new copy of the chat history
|
||||
const copyChats = { ...chatHistory };
|
||||
copyChats.chats = [...chatHistory.chats]
|
||||
|
||||
// Remove the chat at the specified index
|
||||
copyChats.chats.splice(index,1)
|
||||
copyChats.chats = [...chatHistory.chats];
|
||||
|
||||
// Determine new selectedIndex
|
||||
let newSelectedIndex = currentIndex;
|
||||
// Remove the chat at the specified index
|
||||
copyChats.chats.splice(index, 1);
|
||||
|
||||
// Adjust selectedIndex based on the deletion
|
||||
if (index === currentIndex) {
|
||||
// If the deleted index is the currently selected one, reset the selected index
|
||||
newSelectedIndex = copyChats.chats.length > 0 ? (index > 0 ? index - 1 : 0) : -1; // Set to previous or first chat or -1 if no chats left
|
||||
} else if (index < currentIndex) {
|
||||
// If the deleted chat is before the current selected index, decrement the selected index
|
||||
newSelectedIndex = currentIndex - 1;
|
||||
// Determine the new selectedIndex
|
||||
let newSelectedIndex = currentIndex;
|
||||
|
||||
// Adjust selectedIndex based on the deletion
|
||||
if (index === currentIndex) {
|
||||
// If the deleted index is currently selected, reset the selected index
|
||||
newSelectedIndex = copyChats.chats.length > 0 ? (index > 0 ? index - 1 : 0) : -1; // Set to previous or first chat or -1 if no chats left
|
||||
} else if (index < currentIndex) {
|
||||
// If the deleted chat is before the current selected index, decrement the selected index
|
||||
newSelectedIndex = currentIndex - 1;
|
||||
}
|
||||
|
||||
copyChats.selectedIndex = newSelectedIndex
|
||||
|
||||
console.log(copyChats)
|
||||
|
||||
// Set the updated chat history
|
||||
setChatHistory(copyChats);
|
||||
};
|
||||
|
||||
copyChats.selectedIndex = newSelectedIndex; // Update the selected index
|
||||
|
||||
// Debugging information to inspect the modified chat history
|
||||
console.log(copyChats);
|
||||
|
||||
// Set the updated chat history
|
||||
setChatHistory(copyChats);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="history-background">
|
||||
<div className="history">
|
||||
<ul>
|
||||
{/* Populate with history items */}
|
||||
{chatHistory.chats.map((chats, index) => (
|
||||
<li key={index} onMouseOver={()=>handleHistoryHover(index)} onMouseOut={handleHistoryNotHover} >
|
||||
<a href="#" onClick={() => handleHistoryClick(index)} style={{
|
||||
backgroundColor: chatHistory.selectedIndex == index ? "var(--input-button-color)" : "",
|
||||
borderRadius: "5px",
|
||||
width: index==hoveredIndex && chatHistory.chats.length >1 ? "85%":"100%"
|
||||
}}>
|
||||
{chatHistory.chats[index].name}
|
||||
</a>
|
||||
<button id="delete-chat-button"
|
||||
onClick={()=>handleHistoryDeletion(index)}
|
||||
disabled={(index == hoveredIndex && chatHistory.chats.length >1) ? false : true}
|
||||
{/* Render chat history items */}
|
||||
{chatHistory.chats.map((chat, index) => (
|
||||
<li key={index} onMouseOver={() => handleHistoryHover(index)} onMouseOut={handleHistoryNotHover}>
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleHistoryClick(index)} // Handle click to select chat
|
||||
style={{
|
||||
width: index == hoveredIndex && chatHistory.chats.length >1 ? "15%" : "0",
|
||||
visibility: index == hoveredIndex && chatHistory.chats.length >1 ? "visible" : "hidden",
|
||||
marginLeft: index == hoveredIndex && chatHistory.chats.length >1? "0.5em":0
|
||||
}}>
|
||||
<svg viewBox="0 0 448 512"><path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
|
||||
backgroundColor: chatHistory.selectedIndex === index ? "var(--input-button-color)" : "",
|
||||
borderRadius: "5px",
|
||||
width: index === hoveredIndex && chatHistory.chats.length > 1 ? "85%" : "100%"
|
||||
}}
|
||||
>
|
||||
{chat.name} {/* Display chat name */}
|
||||
</a>
|
||||
<button
|
||||
id="delete-chat-button"
|
||||
onClick={() => handleHistoryDeletion(index)} // Handle chat deletion
|
||||
disabled={!(index === hoveredIndex && chatHistory.chats.length > 1)} // Disable if not hovered
|
||||
style={{
|
||||
width: index === hoveredIndex && chatHistory.chats.length > 1 ? "15%" : "0",
|
||||
visibility: index === hoveredIndex && chatHistory.chats.length > 1 ? "visible" : "hidden",
|
||||
marginLeft: index === hoveredIndex && chatHistory.chats.length > 1 ? "0.5em" : 0
|
||||
}}
|
||||
>
|
||||
<svg viewBox="0 0 448 512">
|
||||
<path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z" />
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -100,17 +118,17 @@ const History: React.FC = () => {
|
|||
<input
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onChange={handleInputChange} // Update input value as user types
|
||||
placeholder="Enter text"
|
||||
className="chat-input"
|
||||
/>
|
||||
/>
|
||||
<button onClick={handleSaveButtonClick} className="save-btn">
|
||||
Save
|
||||
Save {/* Button to save new chat */}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button onClick={handleEditButtonClick} className="newChat-btn">
|
||||
New Chat
|
||||
New Chat {/* Button to initiate a new chat */}
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
|
|
@ -120,4 +138,4 @@ const History: React.FC = () => {
|
|||
);
|
||||
}
|
||||
|
||||
export default History;
|
||||
export default History; // Exporting the History component
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
// Define all models that should be available.
|
||||
//#region modelist
|
||||
const modelList = {
|
||||
'Offline Fast': {
|
||||
model_type: 'local',
|
||||
|
|
@ -112,7 +113,7 @@ const selectedAIFunction = [
|
|||
'Language',
|
||||
'Weather'
|
||||
]
|
||||
|
||||
//#region variables
|
||||
const ModelSection: React.FC = () => {
|
||||
// Initialize state with value from localStorage or default to ''
|
||||
const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
|
||||
|
|
@ -120,7 +121,7 @@ const ModelSection: React.FC = () => {
|
|||
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
||||
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
||||
const [isOpenSourceMode, setIsOpenSourceMode] = useState<string|null>("false")
|
||||
|
||||
//#region functions
|
||||
useEffect(() => {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
const defaultValues = {
|
||||
|
|
@ -175,7 +176,7 @@ const ModelSection: React.FC = () => {
|
|||
modelClicked(model)
|
||||
}
|
||||
};
|
||||
|
||||
//#region dropdown
|
||||
// Determine the filtered models based on current radioSelection
|
||||
const filteredModels = (() => {
|
||||
let models = [];
|
||||
|
|
@ -241,7 +242,7 @@ const ModelSection: React.FC = () => {
|
|||
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
|
||||
}
|
||||
}
|
||||
|
||||
//#region return "html"
|
||||
return (
|
||||
<div className="model-background">
|
||||
<div className="models">
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import React from 'react';
|
||||
|
||||
// Define the props for the ButtonSetting component
|
||||
interface ButtonSettingProps {
|
||||
label: string; // The label to display on the button
|
||||
onClick: () => void; // The function to call when the button is clicked
|
||||
className?: string; // Optional additional classes for styling
|
||||
}
|
||||
|
||||
const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick }) => {
|
||||
// Functional component definition
|
||||
const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick, className }) => {
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<div className="settings-option"> {/* Container for the button */}
|
||||
<button
|
||||
onClick={onClick} // Call the onClick function when the button is clicked
|
||||
className={"export-button"} // Apply any additional classes
|
||||
className={`export-button ${className || ''}`} // Apply any additional classes, default to empty if not provided
|
||||
>
|
||||
{label} {/* Display the label on the button */}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,28 @@
|
|||
import React from 'react';
|
||||
|
||||
// Define the props for the CheckboxSetting component
|
||||
interface CheckboxSettingProps {
|
||||
label: string; // The label to display
|
||||
checked: boolean; // The checked state of the checkbox
|
||||
setChecked: (value: boolean) => void; // Method to update the state
|
||||
}
|
||||
|
||||
// Functional component definition
|
||||
const CheckboxSetting: React.FC<CheckboxSettingProps> = ({ label, checked, setChecked }) => {
|
||||
// Handler to toggle the checkbox state
|
||||
const handleCheckboxChange = () => {
|
||||
setChecked(!checked);
|
||||
setChecked(!checked); // Toggle the checked state
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<div className="settings-option"> {/* Container for the checkbox setting */}
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={handleCheckboxChange}
|
||||
type="checkbox" // Checkbox input type
|
||||
checked={checked} // Set the checked state based on the prop
|
||||
onChange={handleCheckboxChange} // Call the handler on change
|
||||
/>
|
||||
{label}
|
||||
{label} {/* Display the label next to the checkbox */}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,29 +1,32 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
|
||||
interface ColorSettingProps {
|
||||
// Define the props for the ColorSetting component
|
||||
interface ColorSettingProps {
|
||||
name: string; // The name to display in the <p> tag
|
||||
value: string; // The current color value
|
||||
setValue: (newColor: string) => void; // The method to update the state
|
||||
cssVariable: string; // The CSS variable name to set
|
||||
}
|
||||
}
|
||||
|
||||
const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
|
||||
// Functional component definition
|
||||
const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
|
||||
// Handler to change the color value
|
||||
const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newColor = e.target.value;
|
||||
setValue(newColor);
|
||||
document.documentElement.style.setProperty(cssVariable, newColor);
|
||||
const newColor = e.target.value; // Get the new color from the input
|
||||
setValue(newColor); // Update the state with the new color
|
||||
document.documentElement.style.setProperty(cssVariable, newColor); // Set the CSS variable
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<p>{name}</p>
|
||||
<input
|
||||
type="color"
|
||||
value={value}
|
||||
onChange={handleColorChange}
|
||||
/>
|
||||
<div className="settings-option"> {/* Container for the color setting */}
|
||||
<p>{name}</p> {/* Display the name */}
|
||||
<input
|
||||
type="color" // Input type for color picker
|
||||
value={value} // Set the input value to the current color
|
||||
onChange={handleColorChange} // Call the handler on change
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
export default ColorSetting;
|
||||
export default ColorSetting;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,39 @@
|
|||
import React from 'react';
|
||||
|
||||
// Define the structure of each option in the dropdown
|
||||
interface Option {
|
||||
value: string; // The actual value to be used
|
||||
label: string; // The label to display for the option
|
||||
value: string; // The actual value to be used
|
||||
label: string; // The label to display for the option
|
||||
}
|
||||
|
||||
// Define the props for the DropdownSetting component
|
||||
interface DropdownSettingProps {
|
||||
label: string; // The label to display
|
||||
value: string; // The current selected value
|
||||
setValue: (newValue: string) => void; // The method to update the state
|
||||
options: Option[]; // List of options for the dropdown
|
||||
label: string; // The label to display above the dropdown
|
||||
value: string; // The currently selected value
|
||||
setValue: (newValue: string) => void; // Method to update the state with the new value
|
||||
options: Option[]; // List of options for the dropdown
|
||||
}
|
||||
|
||||
// Functional component definition
|
||||
const DropdownSetting: React.FC<DropdownSettingProps> = ({ label, value, setValue, options }) => {
|
||||
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newValue = e.target.value;
|
||||
setValue(newValue);
|
||||
};
|
||||
// Handler to change the selected option
|
||||
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newValue = e.target.value; // Get the new selected value
|
||||
setValue(newValue); // Update the state with the new value
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<label>{label}</label>
|
||||
<select value={value} onChange={handleSelectChange}>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="settings-option"> {/* Container for the dropdown setting */}
|
||||
<label>{label}</label> {/* Display the label */}
|
||||
<select value={value} onChange={handleSelectChange}> {/* Dropdown selection */}
|
||||
{options.map((option) => ( // Map through options to create <option> elements
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label} {/* Display the label for the option */}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownSetting;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
import React from 'react';
|
||||
|
||||
const ThemeDropdown: React.FC<{
|
||||
selectedTheme: string;
|
||||
setSelectedTheme: (theme: string) => void;
|
||||
selectedTheme: string; // Currently selected theme
|
||||
setSelectedTheme: (theme: string) => void; // Function to update the selected theme
|
||||
}> = ({ selectedTheme, setSelectedTheme }) => {
|
||||
// Define available theme options
|
||||
const themeOptions = [
|
||||
{ value: 'IOMARKET', label: 'IOMARKET' },
|
||||
{ value: 'WHITE', label: 'WHITE' },
|
||||
|
|
@ -14,22 +15,22 @@ const ThemeDropdown: React.FC<{
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<p>Select Theme</p>
|
||||
<div className="settings-option"> {/* Container for the dropdown */}
|
||||
<p>Select Theme</p> {/* Label for the dropdown */}
|
||||
<select
|
||||
value={selectedTheme}
|
||||
onChange={(e) => {
|
||||
const theme = e.target.value;
|
||||
value={selectedTheme} // Current selected theme
|
||||
onChange={(e) => { // Handler for dropdown changes
|
||||
const theme = e.target.value; // Get the selected value
|
||||
if (theme !== 'default' && typeof localStorage !== 'undefined') {
|
||||
setSelectedTheme(theme);
|
||||
localStorage.setItem('selectedTheme', theme);
|
||||
setSelectedTheme(theme); // Update the selected theme state
|
||||
localStorage.setItem('selectedTheme', theme); // Save the theme to localStorage
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="default">Select your style...</option>
|
||||
{themeOptions.map((option) => (
|
||||
<option value="default">Select your style...</option> {/* Default option */}
|
||||
{themeOptions.map((option) => ( // Map through theme options to create <option> elements
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
{option.label} {/* Display the label for the option */}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -2,28 +2,29 @@
|
|||
import React from 'react';
|
||||
|
||||
interface FontSizeSettingProps {
|
||||
fontSize: string; // The current font size
|
||||
fontSize: string; // The current font size as a string (e.g., "16px")
|
||||
setFontSize: (newSize: string) => void; // Function to update the font size
|
||||
}
|
||||
|
||||
const FontSizeSetting: React.FC<FontSizeSettingProps> = ({ fontSize, setFontSize }) => {
|
||||
// Handle changes to the font size input
|
||||
const handleFontSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newSize = `${e.target.value}px`;
|
||||
setFontSize(newSize);
|
||||
document.documentElement.style.setProperty('--font-size', newSize);
|
||||
const newSize = `${e.target.value}px`; // Create the new font size string
|
||||
setFontSize(newSize); // Update the font size state
|
||||
document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<p>Font Size</p>
|
||||
<div className="settings-option"> {/* Container for the font size setting */}
|
||||
<p>Font Size</p> {/* Label for the setting */}
|
||||
<input
|
||||
type="range"
|
||||
min="12"
|
||||
max="30"
|
||||
value={parseInt(fontSize, 10)} // Ensure value is a number
|
||||
onChange={handleFontSizeChange}
|
||||
type="range" // Range input for selecting font size
|
||||
min="12" // Minimum font size
|
||||
max="30" // Maximum font size
|
||||
value={parseInt(fontSize, 10)} // Ensure value is a number for the slider
|
||||
onChange={handleFontSizeChange} // Update font size on change
|
||||
/>
|
||||
<span>{fontSize}</span>
|
||||
<span>{fontSize}</span> {/* Display the current font size */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,25 +12,26 @@ const OpenSourceModeToggle: React.FC<OpenSourceModeToggleProps> = ({
|
|||
setOpenSourceMode,
|
||||
setSelectedOption
|
||||
}) => {
|
||||
// Handle toggle change event
|
||||
const handleToggleChange = () => {
|
||||
const newValue = !openSourceMode;
|
||||
setOpenSourceMode(newValue);
|
||||
const newValue = !openSourceMode; // Toggle the current state
|
||||
setOpenSourceMode(newValue); // Update the open source mode state
|
||||
|
||||
// Update radio selection based on the new openSourceMode value
|
||||
if (newValue) {
|
||||
setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
|
||||
} else {
|
||||
setSelectedOption('None'); // Or any other default value when disabling
|
||||
setSelectedOption('None'); // Set to a default value when disabling
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<div className="settings-option"> {/* Container for the toggle setting */}
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={openSourceMode}
|
||||
onChange={handleToggleChange}
|
||||
type="checkbox" // Checkbox for toggling open source mode
|
||||
checked={openSourceMode} // Check if the mode is currently enabled
|
||||
onChange={handleToggleChange} // Handle changes to the checkbox
|
||||
/>
|
||||
Enable Open Source Mode
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -14,28 +14,28 @@ const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handl
|
|||
<div className="settings-option">
|
||||
<p>Disable Options:</p>
|
||||
<div className="slider">
|
||||
{/* Offline */}
|
||||
{/* Offline Option */}
|
||||
<div
|
||||
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
|
||||
onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
|
||||
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`} // Active class based on selection
|
||||
onClick={() => handleRadioChange('Offline')} // Handle selection change
|
||||
>
|
||||
Offline tools{openSourceMode ? ' (FOSS)' : ''}
|
||||
Offline tools{openSourceMode ? ' (FOSS)' : ''} {/* Display FOSS label if applicable */}
|
||||
</div>
|
||||
|
||||
{/* Online */}
|
||||
{/* Online Option */}
|
||||
<div
|
||||
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
|
||||
onClick={() => handleRadioChange('Online')}
|
||||
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`} // Active class based on selection
|
||||
onClick={() => handleRadioChange('Online')} // Handle selection change
|
||||
>
|
||||
Online tools{openSourceMode ? ' (FOSS)' : ''}
|
||||
Online tools{openSourceMode ? ' (FOSS)' : ''} {/* Display FOSS label if applicable */}
|
||||
</div>
|
||||
|
||||
{/* None */}
|
||||
{/* None Option */}
|
||||
<div
|
||||
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
|
||||
onClick={() => handleRadioChange('None')}
|
||||
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`} // Active class based on selection
|
||||
onClick={() => handleRadioChange('None')} // Handle selection change
|
||||
>
|
||||
None{openSourceMode ? ' (FOSS)' : ''}
|
||||
None{openSourceMode ? ' (FOSS)' : ''} {/* Display FOSS label if applicable */}
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
// Measurement setting
|
||||
const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');
|
||||
|
||||
// Theme settings
|
||||
//#region Theme settings
|
||||
const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
|
||||
const [headerBackground, setHeaderBackground] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--header-background-color').trim());
|
||||
const [textColor, setTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
|
||||
|
|
@ -122,6 +122,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
const [google, setGoogle] = useState(localStorage.getItem('google') || "");
|
||||
const [myBoolean, setMyBoolean] = useState<boolean>(() => getItemFromLocalStorage('myBoolean'));
|
||||
|
||||
//#region Json
|
||||
const settings = {
|
||||
userPreferences: {
|
||||
activeSection,
|
||||
|
|
@ -185,6 +186,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
},
|
||||
};
|
||||
|
||||
//#region color settings
|
||||
const colorSettings = [
|
||||
{ name: "Background Color", value: backgroundColor, setValue: setBackgroundColor, cssVariable: "--background-color" },
|
||||
{ name: "Header Background Color", value: headerBackground, setValue: setHeaderBackground, cssVariable: "--header-background-color" },
|
||||
|
|
@ -219,7 +221,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
{ name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
|
||||
];
|
||||
|
||||
|
||||
//#region time settings
|
||||
const timeZoneOptions = [
|
||||
{ value: 'GMT', label: 'GMT' },
|
||||
{ value: 'EST', label: 'EST' },
|
||||
|
|
@ -233,7 +235,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
{ value: 'JST', label: 'JST' },
|
||||
];
|
||||
|
||||
|
||||
//#region language settings
|
||||
const languageOptions = [
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'es', name: 'Spanish' },
|
||||
|
|
@ -246,7 +248,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
{ code: 'ru', name: 'Russian' },
|
||||
{ code: 'ar', name: 'Arabic' },
|
||||
];
|
||||
|
||||
//#region currency settings
|
||||
const currencyOptions = [
|
||||
{ code: 'usd', name: 'USD' },
|
||||
{ code: 'eur', name: 'EUR' },
|
||||
|
|
@ -258,7 +260,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
{ code: 'cny', name: 'CNY' },
|
||||
{ code: 'inr', name: 'INR' },
|
||||
];
|
||||
|
||||
//#region date settings
|
||||
const dateFormatOptions = [
|
||||
{ value: 'mm/dd/yyyy', label: 'MM/DD/YYYY' },
|
||||
{ value: 'dd/mm/yyyy', label: 'DD/MM/YYYY' },
|
||||
|
|
@ -276,7 +278,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
{ value: 'Metric', label: 'Metric' },
|
||||
{ value: 'Imperial', label: 'Imperial' },
|
||||
];
|
||||
|
||||
//#region text settings
|
||||
const fontOptions = [
|
||||
{ value: "'Poppins', sans-serif", label: 'Poppins' },
|
||||
{ value: "'Inconsolata', monospace", label: 'Inconsolata' },
|
||||
|
|
@ -294,7 +296,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
{ value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
|
||||
];
|
||||
|
||||
//#region Start of the code
|
||||
//#region Function
|
||||
const handleLogout = () => {
|
||||
localStorage.clear();
|
||||
alert('Successfully logged out!');
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export function exportSettings(): string {
|
|||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
if (key) {
|
||||
// Exclude sensitive information
|
||||
if (key !== "accountName" && key !== "accountPassword" && key !== "accountEmail") {
|
||||
settings[key] = localStorage.getItem(key) || "";
|
||||
}
|
||||
|
|
@ -39,25 +40,28 @@ export function importSettings(jsonData: string): void {
|
|||
}
|
||||
}
|
||||
|
||||
// Send current settings to the database
|
||||
export const sendToDatabase = async () => {
|
||||
const useName = localStorage.getItem("accountName")
|
||||
const usePassword = localStorage.getItem("accountPassword")
|
||||
const useName = localStorage.getItem("accountName");
|
||||
const usePassword = localStorage.getItem("accountPassword");
|
||||
|
||||
if (useName && usePassword) {
|
||||
const result = await changeSettings(useName, usePassword, JSON.parse(exportSettings()))
|
||||
if (result == true) {
|
||||
const result = await changeSettings(useName, usePassword, JSON.parse(exportSettings()));
|
||||
if (result === true) {
|
||||
// Only reload if the settings change was successful
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
// Import settings from the database based on username and password
|
||||
export const importDatabase = async (useName: string, usePassword: string) => {
|
||||
const databaseSettings = await getSettings(useName, usePassword);
|
||||
|
||||
// Ensure user settings exist before flattening and storing
|
||||
if (typeof databaseSettings == 'object' && databaseSettings) {
|
||||
if (typeof databaseSettings === 'object' && databaseSettings) {
|
||||
importSettings(JSON.stringify(databaseSettings, null, 2)); // Pass only the current user's settings
|
||||
} else {
|
||||
console.error('Database settings are not in the expected format.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
//#region IOMARKET
|
||||
export const applyIOMarketTheme = () => {
|
||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e');
|
||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff');
|
||||
|
|
@ -35,7 +36,7 @@ export const applyIOMarketTheme = () => {
|
|||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
|
||||
document.documentElement.style.setProperty('--font-size', '16px');
|
||||
};
|
||||
|
||||
//#region WHITE
|
||||
export const applyWhiteTheme = () => {
|
||||
document.documentElement.style.setProperty('--header-background-color', '#f0f0f0'); // Lighter header background
|
||||
document.documentElement.style.setProperty('--header-text-color', '#333'); // Dark text for contrast
|
||||
|
|
@ -73,7 +74,7 @@ export const applyWhiteTheme = () => {
|
|||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Same font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Same font size
|
||||
};
|
||||
|
||||
//#region BLACK
|
||||
export const applyBlackTheme = () => {
|
||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
|
||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // White text for header
|
||||
|
|
@ -112,7 +113,7 @@ export const applyBlackTheme = () => {
|
|||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
|
||||
};
|
||||
|
||||
//#region CUSTOM
|
||||
export const applyCustomTheme = () => {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
const themeVariables = {
|
||||
|
|
@ -191,6 +192,8 @@ export const applyCustomTheme = () => {
|
|||
};
|
||||
}
|
||||
|
||||
//#region BASIC-CUSTOM
|
||||
|
||||
// TypeScript types for color parameters
|
||||
type Color = string;
|
||||
|
||||
|
|
@ -277,6 +280,7 @@ const lightenColor = (color: Color, percent: number): Color => {
|
|||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
|
||||
};
|
||||
|
||||
//#region APPLY-THEME
|
||||
// This is the new function that calls the appropriate theme application
|
||||
export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => {
|
||||
switch (theme) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue