Fix/footer (#268)

* 🐛 fix footer for pages (not chat page)

* 💄 make footer sticky at bottom

* 💄 fix display of chat over footer

* ✨ multiple lines chat message input

frontend/app/(auth)/login/page.tsx

@@ -47,7 +47,7 @@ export default function Login() {
 
   return (
     <main>
-      <section className="w-full min-h-screen h-full outline-none flex flex-col gap-5 items-center justify-center p-6">
+      <section className="w-full h-full outline-none flex flex-col gap-5 items-center justify-center p-6">
         <PageHeading title="Login" subtitle="Welcome back" />
         <Card className="max-w-md w-full p-5 sm:p-10 text-left">
           <form

frontend/app/(auth)/logout/page.tsx

@@ -37,7 +37,7 @@ export default function Logout() {
 
   return (
     <main>
-      <section className="w-full min-h-screen h-full outline-none flex flex-col gap-5 items-center justify-center p-6">
+      <section className="w-full h-full outline-none flex flex-col gap-5 items-center justify-center p-6">
         <PageHeading title="Logout" subtitle="See you next time" />
         <Card className="max-w-md w-full p-5 sm:p-10 text-center flex flex-col items-center gap-5">
           <h2 className="text-lg">Are you sure you want to sign out?</h2>

frontend/app/(auth)/signup/page.tsx

@@ -39,7 +39,7 @@ export default function SignUp() {
 
   return (
     <main>
-      <section className="w-full min-h-screen h-full outline-none flex flex-col gap-5 items-center justify-center p-6">
+      <section className="w-full h-full outline-none flex flex-col gap-5 items-center justify-center p-6">
         <PageHeading title="Sign Up" subtitle="Create your account" />
         <Card className="max-w-md w-full p-5 sm:p-10 text-left">
           <form

frontend/app/chat/components/ChatMessage.tsx

@@ -30,6 +30,7 @@ const ChatMessage = forwardRef(
           "py-3 px-3 rounded-lg border border-black/10 dark:border-white/25 flex flex-col max-w-4xl overflow-hidden scroll-pt-32",
           left ? "self-start mr-20" : "self-end ml-20"
         )}
+        style={speaker === "user" ? { whiteSpace: "pre-line" } : {}} // Add this line to preserve line breaks
       >
         <span className={cn("capitalize text-xs")}>{speaker}</span>
         <>

frontend/app/chat/components/ChatMessages.tsx

@@ -15,7 +15,7 @@ const ChatMessages: FC<ChatMessagesProps> = ({ history }) => {
   }, [history]);
 
   return (
-    <div className="overflow-hidden flex flex-col gap-5 scrollbar scroll-smooth">
+    <div className="overflow-hidden flex flex-col gap-5 scrollbar scroll-smooth flex-1">
       {history.length === 0 ? (
         <div className="text-center opacity-50">
           Ask a question, or describe a task.

frontend/app/chat/page.tsx

@@ -14,55 +14,60 @@ export default function ChatPage() {
   const { isListening, speechSupported, startListening } = useSpeech();
 
   return (
-    <main className="min-h-screen w-full flex flex-col pt-32">
-      <section className="flex flex-col justify-center items-center flex-1 gap-5 h-full">
+    <main className="min-h-0 w-full flex flex-col pt-32 flex-1 overflow-hidden">
+      <section className="flex flex-col justify-center items-center gap-5 h-full overflow-auto style={{ marginBottom: '20px'}}">
         <PageHeading
           title="Chat with your brain"
           subtitle="Talk to a language model about your uploaded data"
         />
         {/* Chat */}
-        <Card className="p-5 max-w-3xl w-full min-h-full flex-1 mb-24">
+        <Card className="p-5 max-w-3xl w-full flex-1 mb-24 overflow-auto flex flex-col">
           <ChatMessages history={history} />
-          <Card className="fixed left-1/2 w-full max-w-3xl bg-gray-100 dark:bg-gray-800 rounded-b-none -translate-x-1/2 bottom-0 px-5 py-5">
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                if (!isPending) askQuestion();
+        </Card>
+        <Card className="fixed left-1/2 w-full max-w-3xl bg-gray-100 dark:bg-gray-800 rounded-b-none -translate-x-1/2 bottom-16 px-5 py-5">
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (!isPending) askQuestion();
+            }}
+            className="w-full flex items-center justify-center gap-2"
+          >
+            <textarea
+              autoFocus
+              value={question}
+              onChange={(e) => setQuestion(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault(); // Prevents the newline from being entered in the textarea
+                  if (!isPending) askQuestion(); // Call the submit function here
+                }
               }}
-              className="w-full flex items-center justify-center gap-2"
+              className="w-full p-2 border border-gray-300 dark:border-gray-500 outline-none rounded dark:bg-gray-800"
+              placeholder="Begin conversation here..."
+            />
+            <Button type="submit" isLoading={isPending}>
+              {isPending ? "Thinking..." : "Chat"}
+            </Button>
+            {/* Mic Button */}
+            <Button
+              className="px-3"
+              variant={"tertiary"}
+              type="button"
+              onClick={startListening}
+              disabled={!speechSupported}
             >
-              <input
-                autoFocus
-                type="text"
-                value={question}
-                onChange={(e) => setQuestion(e.target.value)}
-                className="w-full p-2 border border-gray-300 dark:border-gray-500 outline-none rounded dark:bg-gray-800"
-                placeholder="Begin conversation here..."
-              />
-              <Button type="submit" isLoading={isPending}>
-                {isPending ? "Thinking..." : "Chat"}
+              {isListening ? (
+                <MdMicOff className="text-2xl" />
+              ) : (
+                <MdMic className="text-2xl" />
+              )}
+            </Button>
+            <Link href={"/config"}>
+              <Button className="px-3" variant={"tertiary"}>
+                <MdSettings className="text-2xl" />
               </Button>
-              {/* Mic Button */}
-              <Button
-                className="px-3"
-                variant={"tertiary"}
-                type="button"
-                onClick={startListening}
-                disabled={!speechSupported}
-              >
-                {isListening ? (
-                  <MdMicOff className="text-2xl" />
-                ) : (
-                  <MdMic className="text-2xl" />
-                )}
-              </Button>
-              <Link href={"/config"}>
-                <Button className="px-3" variant={"tertiary"}>
-                  <MdSettings className="text-2xl" />
-                </Button>
-              </Link>
-            </form>
-          </Card>
+            </Link>
+          </form>
         </Card>
       </section>
     </main>

frontend/app/components/Footer/index.tsx

@@ -1,4 +1,3 @@
-
 const Footer = () => {
   return (
     <footer className="bg-white dark:bg-black border-t dark:border-white/10 py-4 mt-auto">
@@ -9,11 +8,7 @@ const Footer = () => {
           rel="noopener noreferrer"
           aria-label="Quivr GitHub"
         >
-          <img
-            className="h-8 w-auto"
-            src="/github.svg"
-            alt="GitHub"
-          />
+          <img className="h-8 w-auto" src="/github.svg" alt="GitHub" />
         </a>
         <a
           href="https://twitter.com/Quivr_app"
@@ -21,15 +16,11 @@ const Footer = () => {
           rel="noopener noreferrer"
           aria-label="Quivr Twitter"
         >
-          <img
-            className="h-8 w-auto"
-            src="/twitter.svg"
-            alt="Twitter"
-          />
+          <img className="h-8 w-auto" src="/twitter.svg" alt="Twitter" />
         </a>
       </div>
     </footer>
   );
 };
 
-export default Footer;
+export default Footer;

frontend/app/config/page.tsx

@@ -28,7 +28,7 @@ export default function ExplorePage() {
   }
 
   return (
-    <main className="min-h-screen w-full flex flex-col">
+    <main className="w-full flex flex-col">
       <section className="w-full outline-none pt-32 flex flex-col gap-5 items-center justify-center p-6">
         <div className="flex flex-col items-center justify-center">
           <h1 className="text-3xl font-bold text-center">Configuration</h1>

frontend/app/globals.css

@@ -4,7 +4,7 @@
 
 
 main {
-  @apply max-w-screen-xl mx-auto flex flex-col min-h-screen;
+  @apply max-w-screen-xl mx-auto flex flex-col;
 }
 
 header, section {

frontend/app/layout.tsx

@@ -34,14 +34,17 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`bg-white text-black dark:bg-black dark:text-white min-h-screen w-full ${inter.className}`}
+        className={`bg-white text-black dark:bg-black dark:text-white w-full ${inter.className}`}
+        style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
       >
         <ToastProvider>
           <SupabaseProvider session={session}>
             <BrainConfigProvider>
               <NavBar />
-              {children}
-              <Footer />
+              <div style={{ flex: "1 0 auto" }}>{children}</div>
+              <div style={{ position: "sticky", bottom: 0 }}>
+                <Footer />
+              </div>
             </BrainConfigProvider>
           </SupabaseProvider>
         </ToastProvider>

frontend/app/user/page.tsx

@@ -39,7 +39,7 @@ export default function UserPage() {
   }, [session.access_token]);
 
   return (
-    <main className="min-h-screen w-full flex flex-col pt-32">
+    <main className="w-full flex flex-col pt-32">
       <section className="flex flex-col justify-center items-center flex-1 gap-5 h-full">
         <Card className="p-5 max-w-3xl w-full min-h-full flex-1 mb-24">
           {userStats && (