mirror of
https://github.com/StanGirard/quivr.git
synced 2024-12-25 20:32:11 +03:00
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
This commit is contained in:
parent
e0cf37791b
commit
fbb841393a
@ -47,7 +47,7 @@ export default function Login() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main>
|
<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" />
|
<PageHeading title="Login" subtitle="Welcome back" />
|
||||||
<Card className="max-w-md w-full p-5 sm:p-10 text-left">
|
<Card className="max-w-md w-full p-5 sm:p-10 text-left">
|
||||||
<form
|
<form
|
||||||
|
@ -37,7 +37,7 @@ export default function Logout() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main>
|
<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" />
|
<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">
|
<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>
|
<h2 className="text-lg">Are you sure you want to sign out?</h2>
|
||||||
|
@ -39,7 +39,7 @@ export default function SignUp() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main>
|
<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" />
|
<PageHeading title="Sign Up" subtitle="Create your account" />
|
||||||
<Card className="max-w-md w-full p-5 sm:p-10 text-left">
|
<Card className="max-w-md w-full p-5 sm:p-10 text-left">
|
||||||
<form
|
<form
|
||||||
|
@ -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",
|
"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"
|
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>
|
<span className={cn("capitalize text-xs")}>{speaker}</span>
|
||||||
<>
|
<>
|
||||||
|
@ -15,7 +15,7 @@ const ChatMessages: FC<ChatMessagesProps> = ({ history }) => {
|
|||||||
}, [history]);
|
}, [history]);
|
||||||
|
|
||||||
return (
|
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 ? (
|
{history.length === 0 ? (
|
||||||
<div className="text-center opacity-50">
|
<div className="text-center opacity-50">
|
||||||
Ask a question, or describe a task.
|
Ask a question, or describe a task.
|
||||||
|
@ -14,16 +14,17 @@ export default function ChatPage() {
|
|||||||
const { isListening, speechSupported, startListening } = useSpeech();
|
const { isListening, speechSupported, startListening } = useSpeech();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="min-h-screen w-full flex flex-col pt-32">
|
<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 flex-1 gap-5 h-full">
|
<section className="flex flex-col justify-center items-center gap-5 h-full overflow-auto style={{ marginBottom: '20px'}}">
|
||||||
<PageHeading
|
<PageHeading
|
||||||
title="Chat with your brain"
|
title="Chat with your brain"
|
||||||
subtitle="Talk to a language model about your uploaded data"
|
subtitle="Talk to a language model about your uploaded data"
|
||||||
/>
|
/>
|
||||||
{/* Chat */}
|
{/* 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} />
|
<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">
|
</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
|
<form
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -31,11 +32,16 @@ export default function ChatPage() {
|
|||||||
}}
|
}}
|
||||||
className="w-full flex items-center justify-center gap-2"
|
className="w-full flex items-center justify-center gap-2"
|
||||||
>
|
>
|
||||||
<input
|
<textarea
|
||||||
autoFocus
|
autoFocus
|
||||||
type="text"
|
|
||||||
value={question}
|
value={question}
|
||||||
onChange={(e) => setQuestion(e.target.value)}
|
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 p-2 border border-gray-300 dark:border-gray-500 outline-none rounded dark:bg-gray-800"
|
className="w-full p-2 border border-gray-300 dark:border-gray-500 outline-none rounded dark:bg-gray-800"
|
||||||
placeholder="Begin conversation here..."
|
placeholder="Begin conversation here..."
|
||||||
/>
|
/>
|
||||||
@ -63,7 +69,6 @@ export default function ChatPage() {
|
|||||||
</Link>
|
</Link>
|
||||||
</form>
|
</form>
|
||||||
</Card>
|
</Card>
|
||||||
</Card>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
return (
|
return (
|
||||||
<footer className="bg-white dark:bg-black border-t dark:border-white/10 py-4 mt-auto">
|
<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"
|
rel="noopener noreferrer"
|
||||||
aria-label="Quivr GitHub"
|
aria-label="Quivr GitHub"
|
||||||
>
|
>
|
||||||
<img
|
<img className="h-8 w-auto" src="/github.svg" alt="GitHub" />
|
||||||
className="h-8 w-auto"
|
|
||||||
src="/github.svg"
|
|
||||||
alt="GitHub"
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://twitter.com/Quivr_app"
|
href="https://twitter.com/Quivr_app"
|
||||||
@ -21,11 +16,7 @@ const Footer = () => {
|
|||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label="Quivr Twitter"
|
aria-label="Quivr Twitter"
|
||||||
>
|
>
|
||||||
<img
|
<img className="h-8 w-auto" src="/twitter.svg" alt="Twitter" />
|
||||||
className="h-8 w-auto"
|
|
||||||
src="/twitter.svg"
|
|
||||||
alt="Twitter"
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
@ -28,7 +28,7 @@ export default function ExplorePage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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">
|
<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">
|
<div className="flex flex-col items-center justify-center">
|
||||||
<h1 className="text-3xl font-bold text-center">Configuration</h1>
|
<h1 className="text-3xl font-bold text-center">Configuration</h1>
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
|
|
||||||
main {
|
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 {
|
header, section {
|
||||||
|
@ -34,14 +34,17 @@ export default async function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body
|
<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>
|
<ToastProvider>
|
||||||
<SupabaseProvider session={session}>
|
<SupabaseProvider session={session}>
|
||||||
<BrainConfigProvider>
|
<BrainConfigProvider>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
{children}
|
<div style={{ flex: "1 0 auto" }}>{children}</div>
|
||||||
|
<div style={{ position: "sticky", bottom: 0 }}>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
</div>
|
||||||
</BrainConfigProvider>
|
</BrainConfigProvider>
|
||||||
</SupabaseProvider>
|
</SupabaseProvider>
|
||||||
</ToastProvider>
|
</ToastProvider>
|
||||||
|
@ -39,7 +39,7 @@ export default function UserPage() {
|
|||||||
}, [session.access_token]);
|
}, [session.access_token]);
|
||||||
|
|
||||||
return (
|
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">
|
<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">
|
<Card className="p-5 max-w-3xl w-full min-h-full flex-1 mb-24">
|
||||||
{userStats && (
|
{userStats && (
|
||||||
|
Loading…
Reference in New Issue
Block a user