React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

css progress 1 #66

Merged
Patrick_Pluto merged 2 commits from YasinOnm08/interstellar_ai:main into main 2024-09-30 11:39:33 +02:00
Conversation 0 Commits 2 Files changed 16 +61 -86
16 changed files with 61 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/backend/InputOutputHandler.tsx
View file

@ -11,6 +11,7 @@ import { fetchFile, toBlobURL } from "@ffmpeg/util"
const InputOutputBackend: React.FC = () => { const InputOutputBackend: React.FC = () => {
// # variables
type Message = { type Message = {
role: string role: string
content: string content: string
@ -31,7 +32,7 @@ const InputOutputBackend: React.FC = () => {
setPreferredMeasurement(localStorage.getItem("preferredMeasurement")) setPreferredMeasurement(localStorage.getItem("preferredMeasurement"))
setTimeZone(localStorage.getItem("timeZone")) setTimeZone(localStorage.getItem("timeZone"))
setDateFormat(localStorage.getItem("dateFormat")) setDateFormat(localStorage.getItem("dateFormat"))
}) }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
const [copyClicked, setCopyClicked] = useState(false) const [copyClicked, setCopyClicked] = useState(false)
const [accessToken, setAccessToken] = useState("") const [accessToken, setAccessToken] = useState("")
@ -151,11 +152,6 @@ const InputOutputBackend: React.FC = () => {
}); });
}; };
useEffect(() => {
},[preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
const addMessage = (role: string, content: string) => { const addMessage = (role: string, content: string) => {
setMessages(previous => [...previous, { role, content }]) setMessages(previous => [...previous, { role, content }])
} }
@ -253,7 +249,7 @@ const InputOutputBackend: React.FC = () => {
return ( return (
<div> <>
<ConversationFrontend <ConversationFrontend
messages={messages} messages={messages}
onResendClick={handleResendClick} onResendClick={handleResendClick}
@ -268,7 +264,7 @@ const InputOutputBackend: React.FC = () => {
inputDisabled={inputDisabled} inputDisabled={inputDisabled}
isRecording={isRecording} isRecording={isRecording}
/> />
</div> </>
) )
} }

2
app/components/AI.tsx
View file

@ -4,11 +4,9 @@ import InputOutputBackend from '../backend/InputOutputHandler';
const AI: React.FC = () => { const AI: React.FC = () => {
return ( return (
<div>
<div className="ai-container"> <div className="ai-container">
<InputOutputBackend /> <InputOutputBackend />
</div> </div>
</div>
); );
}; };

7
app/components/ConversationFrontend.tsx
View file

@ -17,13 +17,6 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => { ({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
const endOfMessagesRef = useRef<HTMLDivElement>(null); const endOfMessagesRef = useRef<HTMLDivElement>(null);
// Auto-scroll to the bottom of the conversation whenever a new message is added
useEffect(() => {
if (endOfMessagesRef.current) {
endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, [messages]); // Triggers the effect whenever the 'messages' array changes
useEffect(() => { useEffect(() => {
console.log(isClicked); console.log(isClicked);

3
app/layout.tsx
View file

@ -5,6 +5,9 @@ export const metadata = {
description: 'A little AI chat that is able to assist you in little tasks', description: 'A little AI chat that is able to assist you in little tasks',
}; };
export default function RootLayout({ children }: { children: ReactNode }) { export default function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="en"> <html lang="en">

25
app/page.tsx
View file

@ -15,31 +15,6 @@ const LandingPage: React.FC = () => {
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
const conversationRef = useRef<HTMLDivElement>(null); const conversationRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const scrollToBottom = () => {
const conversation = conversationRef.current;
if (conversation) {
conversation.scrollTop = conversation.scrollHeight;
}
};
scrollToBottom();
const observer = new MutationObserver(scrollToBottom);
if (conversationRef.current) {
observer.observe(conversationRef.current, {
childList: true,
subtree: true,
});
}
return () => {
if (conversationRef.current) {
observer.disconnect();
}
};
}, []);
const toggleDivs = () => { const toggleDivs = () => {
setShowDivs(prevState => !prevState); setShowDivs(prevState => !prevState);
}; };

9
app/styles/Settings.css
View file

@ -9,7 +9,6 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10000;
} }
.settings-main h2 { .settings-main h2 {
@ -104,14 +103,14 @@
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
position: absolute; /* Position the button absolutely */ position: absolute; /* Position the button absolutely */
top: 10px; /* Distance from the top */ top: 15px; /* Distance from the top */
right: 10px; /* Distance from the right */ right: 40px; /* Distance from the right */
transition: background 0.3s; transition: background 0.3s;
} }
/* Close button positioning */ /* Close button positioning */
.apply { .apply {
background: var(--close-button-color); /* Use variable for close button color */ background: var(--apply-button-color); /* Use variable for close button color */
color: white; /* Use white for text color */ color: white; /* Use white for text color */
border: none; border: none;
border-radius: 5px; border-radius: 5px;
@ -119,7 +118,7 @@
cursor: pointer; cursor: pointer;
position: absolute; /* Position the button absolutely */ position: absolute; /* Position the button absolutely */
top: 50px; /* Distance from the top */ top: 50px; /* Distance from the top */
right: 10px; /* Distance from the right */ right: 40px; /* Distance from the right */
transition: background 0.3s; transition: background 0.3s;
} }

11
app/styles/container.css
View file

@ -1,19 +1,19 @@
/* container.css */ /* container.css */
.container, .container{
.content {
display: flex; display: flex;
width: 100vw; width: 100vw;
padding-top: 0.025vh; height: 100vh;
padding-top: 12vh;
} }
.left-panel { .left-panel {
margin-top: 5em;
width: 25vw; /* Adjust as needed */ width: 25vw; /* Adjust as needed */
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */ 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 */ background-color: var(--left-panel-background-color); /* Use variable for background color */
border-radius: 0 1em 0 0; border-radius: 0 1em 0 0;
margin-left: 0; margin-left: 0;
padding-right: 1em; padding-right: 1em;
height: 100%;
} }
.left-panel.hidden { .left-panel.hidden {
@ -23,12 +23,11 @@
} }
.conversation-container { .conversation-container {
margin-top: 5em;
flex: 1; flex: 1;
transition: margin-left 0.3s ease; /* Smooth margin adjustment */ transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */ background-color: var(--conversation-background-color); /* Use variable for background color */
border-radius: 1em 0 0 0; border-radius: 1em 0 0 0;
height: min-content; height: 100%;
} }
/* Adjust margin-left when panel is shown or hidden */ /* Adjust margin-left when panel is shown or hidden */

2
app/styles/global.css
View file

@ -1,7 +1,7 @@
html, html,
body { body {
height: 100vh; height: 100vh;
/* overflow: hidden; */ overflow: hidden;
position: relative; position: relative;
} }

19
app/styles/header.css
View file

@ -8,6 +8,7 @@ header{
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1em; font-size: 1em;
z-index: 999;
} }
.hamburger{ .hamburger{
@ -39,9 +40,10 @@ header{
.nav-links{ .nav-links{
position: absolute; position: absolute;
left: 1vw;
display: flex; display: flex;
gap: 1em; gap: 0.5vw;
width: 35vw; width:max-content;
height: 100%; height: 100%;
align-items: center; align-items: center;
} }
@ -52,7 +54,8 @@ header{
font-size: 0.9em; font-size: 0.9em;
height: 50%; height: 50%;
border-radius: 5px; border-radius: 5px;
padding: 1px 15px; padding: 0.2em 15px;
font-family: var(--font-family);
} }
.nav-btn:hover{ .nav-btn:hover{
@ -72,16 +75,19 @@ header{
} }
.login-button-container{ .login-button-container{
position: absolute;
top: 0.2vh;
right: 1vw;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.header-login-button{ .header-login-button{
font-size: 2vh; font-size: var(--font-size);
position: absolute; /* position: absolute;
top: 1.5vh; top: 1.5vh;
right: 1vw; right: 1vw; */
padding: 10px 20px; padding: 10px 20px;
background-color: var(--input-button-color); background-color: var(--input-button-color);
color: var(--text-color); color: var(--text-color);
@ -89,6 +95,7 @@ header{
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
font-family: var(--font-family);
} }
.header-login-button:hover { .header-login-button:hover {

8
app/styles/history.css
View file

@ -1,13 +1,13 @@
.history-background { .history-background {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
height: 40vh; height: 45%;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
margin: 1em; margin: 1em;
margin-right: 0; margin-right: 0;
border-radius: 2em; border-radius: 1em;
} }
.history { .history {
@ -37,3 +37,7 @@
.history ul li a:hover { .history ul li a:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
} }
.history-models{
height: 100%;
}

3
app/styles/input.css
View file

@ -5,7 +5,8 @@
border-radius: 20px; border-radius: 20px;
background-color: var(--input-background-color); background-color: var(--input-background-color);
padding: 1em; padding: 1em;
margin: 1em; margin: 0 1em;
margin-bottom: 1em;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;

13
app/styles/models.css
View file

@ -1,13 +1,13 @@
.model-background { .model-background {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
height: 45vh; height: 45%;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
margin: 1em; margin: 0 1em;
margin-right: 0; margin-right: 0;
border-radius: 2em; border-radius: 1em;
} }
.models { .models {
@ -17,12 +17,12 @@
overflow-y: scroll; overflow-y: scroll;
} }
.models .titel { .models .title {
padding-bottom: 1em;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 0.7em; font-size: 1.5em;
margin-bottom: 0;
} }
.model-dropdown { .model-dropdown {
@ -56,7 +56,6 @@
} }
.overlay { .overlay {
z-index: 900;
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;

15
app/styles/output.css
View file

@ -2,24 +2,21 @@
.output { .output {
grid-column: 2; grid-column: 2;
grid-row: 1 / 4; grid-row: 1 / 4;
border-radius: 2em;
background-color: var(--output-background-color); background-color: var(--output-background-color);
padding: 1em;
margin: 1em; margin: 1em;
margin-top: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
font-size: 1em; font-size: 1em;
overflow-y: auto; overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */ width: calc(100% - 2em); /* Corrected calculation for width */
height: 75vh; height: 70vh;
} }
#conversation { #conversation {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px; padding-left: 10px;
overflow-y: auto; overflow-y: auto;
max-height: 80vh; max-height: 80vh;
background-color: var(--output-background-color); background-color: var(--output-background-color);
@ -51,16 +48,17 @@
/* Button Container */ /* Button Container */
.button-container { .button-container {
display: flex; display: flex;
padding: 10px 0;
} }
.button-container button { .button-container button {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 100%;
padding: 10px; padding: 10px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
height: 40px;
width: 40px;
} }
.button-container button:hover { .button-container button:hover {
@ -68,7 +66,8 @@
} }
.button-container img { .button-container img {
height: 1.5em; height: 20px;
width: 20px;
} }
#copiedText{ #copiedText{

10
app/styles/responsive.css
View file

@ -27,13 +27,6 @@
padding: 7em 0 0 0 ; padding: 7em 0 0 0 ;
} }
header li {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
}
/* Left panel styles */ /* Left panel styles */
.left-panel { .left-panel {
display: hidden; /* Initially hidden */ display: hidden; /* Initially hidden */
@ -43,6 +36,7 @@
.left-panel.visible { .left-panel.visible {
display: block; display: block;
height: min-content;
} }
/* Conversation container styles */ /* Conversation container styles */
@ -134,7 +128,7 @@
.nav-btn{ .nav-btn{
width: 100%; width: 100%;
text-align: left; text-align: center;
padding: 10px; padding: 10px;
} }

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

@ -25,3 +25,9 @@
margin-right: auto; margin-right: auto;
text-align: left; text-align: left;
} }
.ai-container{
height: min-content;
bottom: 0;
width: 100%;
}

2
app/styles/variables.css
View file

@ -20,6 +20,8 @@
--doc-background-color: #ffffff; /* Background color for documents */ --doc-background-color: #ffffff; /* Background color for documents */
--close-button-color: red; --close-button-color: red;
--close-button-hover-color: #9e0101; /*NEW*/ --close-button-hover-color: #9e0101; /*NEW*/
--apply-button-color:#8B9635;
--apply-button-hover-color:#6b7c2b;
--burger-menu-background-color: #79832e; /*NEW*/ --burger-menu-background-color: #79832e; /*NEW*/
--overlay-text-color:white; /*NEW*/ --overlay-text-color:white; /*NEW*/