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

Compare commits

base: React-Group:a268a4ddc23c87b080b9ad87dc6cb9837ad2f716
Branches Tags
React-Group:main
..
compare: React-Group:34aabc7867be8bebd6aa753a231420040a9e767a
Branches Tags
React-Group:main

No commits in common. "a268a4ddc23c87b080b9ad87dc6cb9837ad2f716" and "34aabc7867be8bebd6aa753a231420040a9e767a" have entirely different histories.
a268a4ddc2 ... 34aabc7867

16 changed files with 86 additions and 61 deletions
Show stats Expand all files Collapse all files

12
app/backend/InputOutputHandler.tsx
View file

@ -11,7 +11,6 @@ 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
@ -32,7 +31,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("")
@ -152,6 +151,11 @@ 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 }])
} }
@ -249,7 +253,7 @@ const InputOutputBackend: React.FC = () => {
return ( return (
<> <div>
<ConversationFrontend <ConversationFrontend
messages={messages} messages={messages}
onResendClick={handleResendClick} onResendClick={handleResendClick}
@ -264,7 +268,7 @@ const InputOutputBackend: React.FC = () => {
inputDisabled={inputDisabled} inputDisabled={inputDisabled}
isRecording={isRecording} isRecording={isRecording}
/> />
</> </div>
) )
} }

2
app/components/AI.tsx
View file

@ -4,9 +4,11 @@ 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,6 +17,13 @@ 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,9 +5,6 @@ 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,6 +15,31 @@ 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,6 +9,7 @@
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 {
@ -103,14 +104,14 @@
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
position: absolute; /* Position the button absolutely */ position: absolute; /* Position the button absolutely */
top: 15px; /* Distance from the top */ top: 10px; /* Distance from the top */
right: 40px; /* Distance from the right */ right: 10px; /* Distance from the right */
transition: background 0.3s; transition: background 0.3s;
} }
/* Close button positioning */ /* Close button positioning */
.apply { .apply {
background: var(--apply-button-color); /* Use variable for close button color */ background: var(--close-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;
@ -118,7 +119,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: 40px; /* Distance from the right */ right: 10px; /* 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;
height: 100vh; padding-top: 0.025vh;
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,11 +23,12 @@
} }
.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: 100%; height: min-content;
} }
/* 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,7 +8,6 @@ header{
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1em; font-size: 1em;
z-index: 999;
} }
.hamburger{ .hamburger{
@ -40,10 +39,9 @@ header{
.nav-links{ .nav-links{
position: absolute; position: absolute;
left: 1vw;
display: flex; display: flex;
gap: 0.5vw; gap: 1em;
width:max-content; width: 35vw;
height: 100%; height: 100%;
align-items: center; align-items: center;
} }
@ -54,8 +52,7 @@ header{
font-size: 0.9em; font-size: 0.9em;
height: 50%; height: 50%;
border-radius: 5px; border-radius: 5px;
padding: 0.2em 15px; padding: 1px 15px;
font-family: var(--font-family);
} }
.nav-btn:hover{ .nav-btn:hover{
@ -75,19 +72,16 @@ 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: var(--font-size); font-size: 2vh;
/* 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);
@ -95,7 +89,6 @@ 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: 45%; height: 40vh;
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: 1em; border-radius: 2em;
} }
.history { .history {
@ -37,7 +37,3 @@
.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,8 +5,7 @@
border-radius: 20px; border-radius: 20px;
background-color: var(--input-background-color); background-color: var(--input-background-color);
padding: 1em; padding: 1em;
margin: 0 1em; margin: 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: 45%; height: 45vh;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;
margin: 0 1em; margin: 1em;
margin-right: 0; margin-right: 0;
border-radius: 1em; border-radius: 2em;
} }
.models { .models {
@ -17,12 +17,12 @@
overflow-y: scroll; overflow-y: scroll;
} }
.models .title { .models .titel {
padding-bottom: 1em;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1.5em; font-size: 0.7em;
margin-bottom: 0;
} }
.model-dropdown { .model-dropdown {
@ -56,6 +56,7 @@
} }
.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,21 +2,24 @@
.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: 70vh; height: 75vh;
} }
#conversation { #conversation {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 10px; padding: 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);
@ -48,17 +51,16 @@
/* 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: 100%; border-radius: 50%;
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 {
@ -66,8 +68,7 @@
} }
.button-container img { .button-container img {
height: 20px; height: 1.5em;
width: 20px;
} }
#copiedText{ #copiedText{

10
app/styles/responsive.css
View file

@ -27,6 +27,13 @@
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 */
@ -36,7 +43,6 @@
.left-panel.visible { .left-panel.visible {
display: block; display: block;
height: min-content;
} }
/* Conversation container styles */ /* Conversation container styles */
@ -128,7 +134,7 @@
.nav-btn{ .nav-btn{
width: 100%; width: 100%;
text-align: center; text-align: left;
padding: 10px; padding: 10px;
} }

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

@ -25,9 +25,3 @@
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,8 +20,6 @@
--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*/