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

page comments

Browse source
This commit is contained in:
sageTheDM 2024-10-11 10:10:12 +02:00
parent 5e962c1020
commit 8a20c3f22f
1 changed files with 29 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/page.tsx
View file

@ -7,21 +7,30 @@ import Documentation from './components/Documentation'; // Ensure the import pat
import History from './components/History'; import History from './components/History';
import Models from './components/Models'; import Models from './components/Models';
import Credits from './components/Credits'; import Credits from './components/Credits';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'; import {
applyIOMarketTheme,
applyWhiteTheme,
applyBlackTheme,
applyCustomTheme,
applyBasicCustomTheme
} from './components/settings/theme';
import './styles/master.css'; import './styles/master.css';
const LandingPage: React.FC = () => { const LandingPage: React.FC = () => {
// State to control visibility of the left panels
const [showDivs, setShowDivs] = useState(true); const [showDivs, setShowDivs] = useState(true);
// State to track which view is currently displayed
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
const conversationRef = useRef<HTMLDivElement>(null); const conversationRef = useRef<HTMLDivElement>(null);
const [primaryColor, setPrimaryColor] = useState("#fefefe"); // State for theme colors
const [secondaryColor, setSecondaryColor] = useState("#fefefe"); const [primaryColor, setPrimaryColor] = useState("#fefefe");
const [accentColor, setAccentColor] = useState("#fefefe"); const [secondaryColor, setSecondaryColor] = useState("#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState("#fefefe"); const [accentColor, setAccentColor] = useState("#fefefe");
const [basicTextColor, setBasicTextColor] = useState("#fefefe"); const [basicBackgroundColor, setBasicBackgroundColor] = useState("#fefefe");
const [basicTextColor, setBasicTextColor] = useState("#fefefe");
// Synchronize state with local storage on mount // Synchronize theme colors with local storage on component mount
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== 'undefined') {
setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe"); setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
@ -32,18 +41,21 @@ const LandingPage: React.FC = () => {
} }
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]);
// Toggle visibility of the left panels
const toggleDivs = () => { const toggleDivs = () => {
setShowDivs(prevState => !prevState); setShowDivs(prevState => !prevState);
}; };
// Change the current view based on user selection
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
setView(view); setView(view);
// Hide left panels if the selected view is not 'AI'
if (view !== 'AI') { if (view !== 'AI') {
setShowDivs(false); setShowDivs(false);
} }
}; };
// Apply theme based on selectedTheme and color settings // Apply the selected theme and color settings based on local storage
useEffect(() => { useEffect(() => {
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== 'undefined') {
const savedTheme = localStorage.getItem('selectedTheme'); const savedTheme = localStorage.getItem('selectedTheme');
@ -52,8 +64,8 @@ const LandingPage: React.FC = () => {
case 'IOMARKET': case 'IOMARKET':
applyIOMarketTheme(); applyIOMarketTheme();
break; break;
case 'WHITE': case 'WHITE':
applyWhiteTheme(); applyWhiteTheme();
break; break;
case 'BLACK': case 'BLACK':
applyBlackTheme(); applyBlackTheme();
@ -61,8 +73,8 @@ const LandingPage: React.FC = () => {
case 'CUSTOM': case 'CUSTOM':
applyCustomTheme(); applyCustomTheme();
break; break;
case 'BASIC-CUSTOM': case 'BASIC-CUSTOM':
applyBasicCustomTheme( applyBasicCustomTheme(
primaryColor, primaryColor,
secondaryColor, secondaryColor,
accentColor, accentColor,
@ -71,15 +83,16 @@ const LandingPage: React.FC = () => {
); );
break; break;
default: default:
applyIOMarketTheme(); applyIOMarketTheme(); // Fallback theme
break; break;
} }
} }
} }
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Apply themes whenever color states change
return ( return (
<> <>
{/* Header component with props for toggling and view change */}
<Header <Header
toggleDivs={toggleDivs} toggleDivs={toggleDivs}
showDivs={showDivs} showDivs={showDivs}
@ -91,12 +104,14 @@ const LandingPage: React.FC = () => {
<div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}> <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
{showDivs && ( {showDivs && (
<div className="history-models"> <div className="history-models">
{/* Show History and Models components if left panels are visible */}
<History /> <History />
<Models /> <Models />
</div> </div>
)} )}
</div> </div>
<div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}> <div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
{/* Render the selected view based on the current state */}
{view === 'AI' && <AI />} {view === 'AI' && <AI />}
{view === 'FAQ' && <FAQ />} {view === 'FAQ' && <FAQ />}
{view === 'Documentation' && <Documentation />} {view === 'Documentation' && <Documentation />}