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

css progress 1

Browse source
This commit is contained in:
YasinOnm08 2024-09-30 10:46:03 +02:00
parent bd4e3af47f
commit 3e32ed6e0c
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 = () => {
// # variables
type Message = {
role: string
content: string
@ -31,7 +32,7 @@ const InputOutputBackend: React.FC = () => {
setPreferredMeasurement(localStorage.getItem("preferredMeasurement"))
setTimeZone(localStorage.getItem("timeZone"))
setDateFormat(localStorage.getItem("dateFormat"))
})
}, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
const [copyClicked, setCopyClicked] = useState(false)
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) => {
setMessages(previous => [...previous, { role, content }])
}
@ -253,7 +249,7 @@ const InputOutputBackend: React.FC = () => {
return (
<div>
<>
<ConversationFrontend
messages={messages}
onResendClick={handleResendClick}
@ -268,7 +264,7 @@ const InputOutputBackend: React.FC = () => {
inputDisabled={inputDisabled}
isRecording={isRecording}
/>
</div>
</>
)
}

2
app/components/AI.tsx
View file

@ -4,11 +4,9 @@ import InputOutputBackend from '../backend/InputOutputHandler';
const AI: React.FC = () => {
return (
<div>
<div className="ai-container">
<InputOutputBackend />
</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>) => {
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(() => {
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',
};
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<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 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 = () => {
setShowDivs(prevState => !prevState);
};

9
app/styles/Settings.css
View file

@ -9,7 +9,6 @@
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
}
.settings-main h2 {
@ -104,14 +103,14 @@
padding: 5px 10px;
cursor: pointer;
position: absolute; /* Position the button absolutely */
top: 10px; /* Distance from the top */
right: 10px; /* Distance from the right */
top: 15px; /* Distance from the top */
right: 40px; /* Distance from the right */
transition: background 0.3s;
}
/* Close button positioning */
.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 */
border: none;
border-radius: 5px;
@ -119,7 +118,7 @@
cursor: pointer;
position: absolute; /* Position the button absolutely */
top: 50px; /* Distance from the top */
right: 10px; /* Distance from the right */
right: 40px; /* Distance from the right */
transition: background 0.3s;
}

11
app/styles/container.css
View file

@ -1,19 +1,19 @@
/* container.css */
.container,
.content {
.container{
display: flex;
width: 100vw;
padding-top: 0.025vh;
height: 100vh;
padding-top: 12vh;
}
.left-panel {
margin-top: 5em;
width: 25vw; /* Adjust as needed */
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 */
border-radius: 0 1em 0 0;
margin-left: 0;
padding-right: 1em;
height: 100%;
}
.left-panel.hidden {
@ -23,12 +23,11 @@
}
.conversation-container {
margin-top: 5em;
flex: 1;
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: min-content;
height: 100%;
}
/* Adjust margin-left when panel is shown or hidden */

2
app/styles/global.css
View file

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

19
app/styles/header.css
View file

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

8
app/styles/history.css
View file

@ -1,13 +1,13 @@
.history-background {
grid-column: 1/2;
grid-row: 1/2;
height: 40vh;
height: 45%;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
margin: 1em;
margin-right: 0;
border-radius: 2em;
border-radius: 1em;
}
.history {
@ -37,3 +37,7 @@
.history ul li a:hover {
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;
background-color: var(--input-background-color);
padding: 1em;
margin: 1em;
margin: 0 1em;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
align-items: center;

13
app/styles/models.css
View file

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

15
app/styles/output.css
View file

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

10
app/styles/responsive.css
View file

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

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

@ -25,3 +25,9 @@
margin-right: auto;
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 */
--close-button-color: red;
--close-button-hover-color: #9e0101; /*NEW*/
--apply-button-color:#8B9635;
--apply-button-hover-color:#6b7c2b;
--burger-menu-background-color: #79832e; /*NEW*/
--overlay-text-color:white; /*NEW*/