diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index d4614fd..4fa0042 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -11,7 +11,6 @@ import { fetchFile, toBlobURL } from "@ffmpeg/util"
const InputOutputBackend: React.FC = () => {
- // # variables
type Message = {
role: string
content: string
@@ -32,7 +31,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("")
@@ -152,6 +151,11 @@ const InputOutputBackend: React.FC = () => {
});
};
+
+ useEffect(() => {
+
+ },[preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
+
const addMessage = (role: string, content: string) => {
setMessages(previous => [...previous, { role, content }])
}
@@ -249,7 +253,7 @@ const InputOutputBackend: React.FC = () => {
return (
- <>
+
{
inputDisabled={inputDisabled}
isRecording={isRecording}
/>
-
+
)
}
diff --git a/app/components/AI.tsx b/app/components/AI.tsx
index 824f6d6..e1d244b 100644
--- a/app/components/AI.tsx
+++ b/app/components/AI.tsx
@@ -4,9 +4,11 @@ import InputOutputBackend from '../backend/InputOutputHandler';
const AI: React.FC = () => {
return (
+
);
};
diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx
index fd17324..3294d09 100644
--- a/app/components/ConversationFrontend.tsx
+++ b/app/components/ConversationFrontend.tsx
@@ -17,6 +17,13 @@ const ConversationFrontend = React.forwardRef
({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef) => {
const endOfMessagesRef = useRef(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 1d7d206..0425420 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,9 +5,6 @@ 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 (
diff --git a/app/page.tsx b/app/page.tsx
index 9afccc2..aad4bee 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,6 +15,31 @@ const LandingPage: React.FC = () => {
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
const conversationRef = useRef(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 b0aae8c..ece5047 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -9,6 +9,7 @@
display: flex;
justify-content: center;
align-items: center;
+ z-index: 10000;
}
.settings-main h2 {
@@ -103,14 +104,14 @@
padding: 5px 10px;
cursor: pointer;
position: absolute; /* Position the button absolutely */
- top: 15px; /* Distance from the top */
- right: 40px; /* Distance from the right */
+ top: 10px; /* Distance from the top */
+ right: 10px; /* Distance from the right */
transition: background 0.3s;
}
/* Close button positioning */
.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 */
border: none;
border-radius: 5px;
@@ -118,7 +119,7 @@
cursor: pointer;
position: absolute; /* Position the button absolutely */
top: 50px; /* Distance from the top */
- right: 40px; /* Distance from the right */
+ right: 10px; /* Distance from the right */
transition: background 0.3s;
}
diff --git a/app/styles/container.css b/app/styles/container.css
index 3f094b2..89e03fa 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -1,19 +1,19 @@
/* container.css */
-.container{
+.container,
+.content {
display: flex;
width: 100vw;
- height: 100vh;
- padding-top: 12vh;
+ padding-top: 0.025vh;
}
.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,11 +23,12 @@
}
.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: 100%;
+ height: min-content;
}
/* Adjust margin-left when panel is shown or hidden */
diff --git a/app/styles/global.css b/app/styles/global.css
index c9754e3..8a4eae2 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 9e30bd8..99343f2 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -8,7 +8,6 @@ header{
display: flex;
align-items: center;
font-size: 1em;
- z-index: 999;
}
.hamburger{
@@ -40,10 +39,9 @@ header{
.nav-links{
position: absolute;
- left: 1vw;
display: flex;
- gap: 0.5vw;
- width:max-content;
+ gap: 1em;
+ width: 35vw;
height: 100%;
align-items: center;
}
@@ -54,8 +52,7 @@ header{
font-size: 0.9em;
height: 50%;
border-radius: 5px;
- padding: 0.2em 15px;
- font-family: var(--font-family);
+ padding: 1px 15px;
}
.nav-btn:hover{
@@ -75,19 +72,16 @@ header{
}
.login-button-container{
- position: absolute;
- top: 0.2vh;
- right: 1vw;
height: 100%;
display: flex;
align-items: center;
}
.header-login-button{
- font-size: var(--font-size);
- /* position: absolute;
+ font-size: 2vh;
+ position: absolute;
top: 1.5vh;
- right: 1vw; */
+ right: 1vw;
padding: 10px 20px;
background-color: var(--input-button-color);
color: var(--text-color);
@@ -95,7 +89,6 @@ 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 7537d3a..7bc9bcd 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: 45%;
+ height: 40vh;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
margin: 1em;
margin-right: 0;
- border-radius: 1em;
+ border-radius: 2em;
}
.history {
@@ -37,7 +37,3 @@
.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 d04a2f1..ffbffeb 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -5,8 +5,7 @@
border-radius: 20px;
background-color: var(--input-background-color);
padding: 1em;
- margin: 0 1em;
- margin-bottom: 1em;
+ margin: 1em;
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/app/styles/models.css b/app/styles/models.css
index 7369e40..0706c93 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: 45%;
+ height: 45vh;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
- margin: 0 1em;
+ margin: 1em;
margin-right: 0;
- border-radius: 1em;
+ border-radius: 2em;
}
.models {
@@ -17,12 +17,12 @@
overflow-y: scroll;
}
-.models .title {
+.models .titel {
+ padding-bottom: 1em;
display: flex;
justify-content: center;
align-items: center;
- font-size: 1.5em;
- margin-bottom: 0;
+ font-size: 0.7em;
}
.model-dropdown {
@@ -56,6 +56,7 @@
}
.overlay {
+ z-index: 900;
position: absolute;
left: 0;
width: 100%;
diff --git a/app/styles/output.css b/app/styles/output.css
index 19507cd..255715f 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -2,21 +2,24 @@
.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: 70vh;
+ height: 75vh;
}
#conversation {
display: flex;
flex-direction: column;
- padding-left: 10px;
+ padding: 10px;
overflow-y: auto;
max-height: 80vh;
background-color: var(--output-background-color);
@@ -48,17 +51,16 @@
/* Button Container */
.button-container {
display: flex;
+ padding: 10px 0;
}
.button-container button {
background: none;
border: none;
cursor: pointer;
- border-radius: 100%;
+ border-radius: 50%;
padding: 10px;
transition: background-color 0.3s ease;
- height: 40px;
- width: 40px;
}
.button-container button:hover {
@@ -66,8 +68,7 @@
}
.button-container img {
- height: 20px;
- width: 20px;
+ height: 1.5em;
}
#copiedText{
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 24f2950..bcf54af 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -27,6 +27,13 @@
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 */
@@ -36,7 +43,6 @@
.left-panel.visible {
display: block;
- height: min-content;
}
/* Conversation container styles */
@@ -128,7 +134,7 @@
.nav-btn{
width: 100%;
- text-align: center;
+ text-align: left;
padding: 10px;
}
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index c79b71c..524e730 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -25,9 +25,3 @@
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 dab7cbe..795b4fc 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -20,8 +20,6 @@
--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*/