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

Merge branch 'main' of interstellardevelopment.org:React-Group/interstellar_ai

Browse source
This commit is contained in:
Patrick_Pluto 2024-09-30 16:13:09 +02:00
commit 238e82bb95
15 changed files with 806 additions and 501 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1075
app/components/Settings.tsx
View file

File diff suppressed because it is too large Load diff

63
app/components/theme.ts
View file

@ -92,5 +92,66 @@ export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
};
export const applyCustomTheme = () => {
// Theme variables
const themeVariables = {
backgroundColor: localStorage.getItem('backgroundColor'),
textColor: localStorage.getItem('textColor'),
inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
inputButtonColor: localStorage.getItem('inputButtonColor'),
inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
userMessageTextColor: localStorage.getItem('userMessageTextColor'),
aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
popUpTextColor: localStorage.getItem('popUpTextColor'),
inputBorderColor: localStorage.getItem('inputBorderColor'),
fontFamily: localStorage.getItem('fontFamily'),
fontSize: localStorage.getItem('fontSize'),
burgerMenu: localStorage.getItem('burgerMenu'),
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
faqHeadingColor: localStorage.getItem('faqHeadingColor'),
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
faqItemTextColor: localStorage.getItem('faqItemTextColor'),
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
overlayTextColor: localStorage.getItem('overlayTextColor'),
};
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
}

29
app/page.tsx
View file

@ -7,6 +7,8 @@ import Documentation from './components/Documentation'; // Ensure the import pat
import History from './components/History';
import Models from './components/Models';
import Credits from './components/Credits';
import Settings from './components/Settings';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
import Head from 'next/head';
import './styles/master.css';
@ -26,6 +28,33 @@ const LandingPage: React.FC = () => {
}
};
const [selectedTheme, setSelectedTheme] = useState<string>('');
useEffect(() => {
const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) {
setSelectedTheme(savedTheme);
// Apply the saved theme on initial load
switch (savedTheme) {
case 'IOMARKET':
applyIOMarketTheme();
break;
case 'WHITE':
applyWhiteTheme();
break;
case 'BLACK':
applyBlackTheme();
break;
case 'CUSTOM':
applyCustomTheme();
break;
default:
applyIOMarketTheme();
break;
}
}
}, []); // Runs only once when the component mounts
return (
<>
<Header

13
app/styles/container.css
View file

@ -2,8 +2,8 @@
.container{
display: flex;
width: 100vw;
height: 100vh;
padding-top: 12vh;
height: 90dvh;
padding-top: 1dvh;
}
.left-panel {
@ -13,13 +13,13 @@
border-radius: 0 1em 0 0;
margin-left: 0;
padding-right: 1em;
height: 100%;
}
.left-panel.hidden {
opacity: 0; /* Fade out when hidden */
width: 0; /* Collapse width to 0 */
visibility: hidden; /* Hide visibility while collapsing */
}
.conversation-container {
@ -27,15 +27,10 @@
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */
border-radius: 1em 0 0 0;
height: 100%;
}
/* Adjust margin-left when panel is shown or hidden */
.conversation-container.expanded {
margin-left: 1vw;
}
.conversation-container.collapsed {
margin-left: 1vw; /* Space for the left panel */
bottom: 0;
}

10
app/styles/credit.css
View file

@ -5,8 +5,8 @@
.credits-section {
max-width: 900px;
height: 80vh;
margin: 0 auto;
height: 80dvh;
margin: auto;
background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
@ -15,20 +15,20 @@
}
.title {
font-size: 2rem;
font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
.subtitle {
font-size: 1.5rem;
font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
.paragraph {
font-size: 1rem;
font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;

12
app/styles/doc.css
View file

@ -7,8 +7,8 @@
.documentation-section {
max-width: 900px;
height: 80vh;
margin: 0 auto;
height: 80dvh;
margin: auto;
background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
@ -17,27 +17,27 @@
}
.title {
font-size: 2rem;
font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
.subtitle {
font-size: 1.5rem;
font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
.subsection-title {
font-size: 1.25rem;
font-size: calc(var(--font-size)*1.25);
color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.paragraph {
font-size: 1rem;
font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;

11
app/styles/global.css
View file

@ -1,14 +1,10 @@
html,
body {
height: 100vh;
height: 100dvh;
overflow: hidden;
position: relative;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
@ -19,11 +15,6 @@ body {
header {
background-color: var(--header-background-color);
color: var(--header-text-color);
padding: 1rem; /* Adjust padding as needed */
}
main{
height: 100%;
}
button {

6
app/styles/header.css
View file

@ -1,10 +1,8 @@
header{
position: absolute;
position: relative;
padding: 0 20px;
top: 0;
left: 0;
width: 100%;
height: 10vh;
height: 10dvh;
display: flex;
align-items: center;
justify-content: center;

6
app/styles/history.css
View file

@ -1,7 +1,7 @@
.history-background {
grid-column: 1/2;
grid-row: 1/2;
height: 45%;
height: 40dvh;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
@ -39,5 +39,7 @@
}
.history-models{
height: 100%;
position: relative;
height: 90dvh;
/* padding-bottom: 3dvh; */
}

13
app/styles/input.css
View file

@ -1,7 +1,5 @@
/* Input Section */
.input {
grid-column: 2/3;
grid-row: 4/5;
border-radius: 8px;
background-color: var(--input-background-color);
padding: 1em;
@ -13,7 +11,12 @@
justify-content: space-between;
align-items: center;
height: auto;
height: 10vh;
height: 10dvh;
position: absolute;
left: 0.25vw;
bottom: 3dvh;
right: 0.25vw;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
}
.input input {
@ -44,8 +47,8 @@
border-radius: 8px;
font-size: 1.5em;
cursor: pointer;
height: 50px;
width: 75px;
height: 8dvh;
width: 8vw;
display: flex;
justify-content: center;
align-items: center;

10
app/styles/models.css
View file

@ -1,13 +1,18 @@
.model-background {
position: absolute;
left: 1em;
bottom: 4dvh;
right: 0;
grid-column: 1/2;
grid-row: 1/2;
height: 45%;
padding-bottom: 1px;
overflow: scroll;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
margin: 0 1em;
margin-right: 0;
border-radius: 1em;
height: 45dvh;
}
.models {
@ -69,6 +74,7 @@
transition: opacity 0.5s ease;
pointer-events: none;
opacity: 0;
border-radius: 5%;
}
.overlay img {

3
app/styles/output.css
View file

@ -4,13 +4,14 @@
grid-row: 1 / 4;
background-color: var(--output-background-color);
margin: 1em;
padding-bottom: 14dvh;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 1em;
overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */
height: 70vh;
height: 90dvh;
}
#conversation {

2
app/styles/reset.css
View file

@ -2,4 +2,6 @@
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
transition: all 0.2s ease-in-out;
}

8
app/styles/responsive.css
View file

@ -8,7 +8,6 @@
/* Header styles */
header {
position: fixed;
top: 0;
left: 0;
margin-top: 0px;
@ -20,11 +19,10 @@
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
overflow: scroll;
overflow: hidden;
margin: 0;
padding: 7em 0 0 0 ;
padding: 1dvh 0 0 0 ;
}
/* Left panel styles */
@ -58,6 +56,7 @@
min-width: 100%;
margin-left: 0;
border-radius: none;
height: 10vh;
}
/* Grid styles */
@ -79,6 +78,7 @@
margin: 0 auto;
align-items: center;
width: 90%;
bottom: 10dvh
}
.input input {

2
app/styles/user-ai-messages.css
View file

@ -16,6 +16,7 @@
border-bottom-right-radius: 0;
margin-left: auto;
text-align: left;
margin-right: 1.5vw;
}
.ai-message {
@ -27,6 +28,7 @@
}
.ai-container{
position: relative;
height: min-content;
bottom: 0;
width: 100%;