diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index 4fa0042..d4614fd 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -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>
+ </>
)
}
diff --git a/app/components/AI.tsx b/app/components/AI.tsx
index e1d244b..824f6d6 100644
--- a/app/components/AI.tsx
+++ b/app/components/AI.tsx
@@ -4,11 +4,9 @@ import InputOutputBackend from '../backend/InputOutputHandler';
const AI: React.FC = () => {
return (
- <div>
<div className="ai-container">
<InputOutputBackend />
</div>
- </div>
);
};
diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx
index 3294d09..fd17324 100644
--- a/app/components/ConversationFrontend.tsx
+++ b/app/components/ConversationFrontend.tsx
@@ -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);
diff --git a/app/layout.tsx b/app/layout.tsx
index 0425420..1d7d206 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -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">
diff --git a/app/page.tsx b/app/page.tsx
index aad4bee..9afccc2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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);
};
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index ece5047..b0aae8c 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -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;
}
diff --git a/app/styles/container.css b/app/styles/container.css
index 89e03fa..3f094b2 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -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 */
diff --git a/app/styles/global.css b/app/styles/global.css
index 8a4eae2..c9754e3 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,7 +1,7 @@
html,
body {
height: 100vh;
- /* overflow: hidden; */
+ overflow: hidden;
position: relative;
}
diff --git a/app/styles/header.css b/app/styles/header.css
index 99343f2..9e30bd8 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -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 {
diff --git a/app/styles/history.css b/app/styles/history.css
index 7bc9bcd..7537d3a 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -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%;
+}
diff --git a/app/styles/input.css b/app/styles/input.css
index ffbffeb..d04a2f1 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -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;
diff --git a/app/styles/models.css b/app/styles/models.css
index 0706c93..7369e40 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -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%;
diff --git a/app/styles/output.css b/app/styles/output.css
index 255715f..19507cd 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -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{
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index bcf54af..24f2950 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -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;
}
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index 524e730..c79b71c 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -25,3 +25,9 @@
margin-right: auto;
text-align: left;
}
+
+.ai-container{
+ height: min-content;
+ bottom: 0;
+ width: 100%;
+}
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 795b4fc..dab7cbe 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -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*/