diff --git a/templates/components/ui/html/chat/chat-messages.tsx b/templates/components/ui/html/chat/chat-messages.tsx
index 37f00ecab27abe2a3bf3d4a9942e30947f026fbe..9728e8418fec82fc80925a784472cde3d662f5cd 100644
--- a/templates/components/ui/html/chat/chat-messages.tsx
+++ b/templates/components/ui/html/chat/chat-messages.tsx
@@ -24,6 +24,7 @@ export default function ChatMessages({
) => Promise<string | null | undefined>;
}) {
const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
+ const lastMessage = messages[messages.length - 1];
const scrollToBottom = () => {
if (scrollableChatContainerRef.current) {
@@ -34,14 +35,14 @@ export default function ChatMessages({
useEffect(() => {
scrollToBottom();
- }, [messages.length]);
+ }, [messages.length, lastMessage]);
return (
- <div className="w-full max-w-5xl p-4 bg-white rounded-xl shadow-xl">
- <div
- className="flex flex-col gap-5 divide-y h-[50vh] overflow-auto"
- ref={scrollableChatContainerRef}
- >
+ <div
+ className="flex-1 w-full max-w-5xl p-4 bg-white rounded-xl shadow-xl overflow-auto"
+ ref={scrollableChatContainerRef}
+ >
+ <div className="flex flex-col gap-5 divide-y">
{messages.map((m: Message) => (
<ChatItem key={m.id} {...m} />
))}
diff --git a/templates/types/streaming/nextjs/app/components/chat-section.tsx b/templates/types/streaming/nextjs/app/components/chat-section.tsx
index 5703660eebb09ae0b347f394eecc9d02d5893dd4..2a9991f0712e3002b1b29060264fd506488573a5 100644
--- a/templates/types/streaming/nextjs/app/components/chat-section.tsx
+++ b/templates/types/streaming/nextjs/app/components/chat-section.tsx
@@ -29,7 +29,7 @@ export default function ChatSection() {
});
return (
- <div className="space-y-4 max-w-5xl w-full">
+ <div className="space-y-4 w-full h-full flex flex-col">
<ChatMessages
messages={messages}
isLoading={isLoading}
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/chat-input.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/chat-input.tsx
index 8a377b494b80a7f9d2f414ea22d8009af4186052..f232769a2ba0b2b6ba1043196ef4da99b03ec4d4 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/chat-input.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/chat-input.tsx
@@ -134,7 +134,7 @@ export default function ChatInput(
return (
<form
onSubmit={onSubmit}
- className="rounded-xl bg-white p-4 shadow-xl space-y-4"
+ className="rounded-xl bg-white p-4 shadow-xl space-y-4 shrink-0"
>
{imageUrl && (
<UploadImagePreview url={imageUrl} onRemove={onRemovePreviewImage} />
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/chat-messages.tsx b/templates/types/streaming/nextjs/app/components/ui/chat/chat-messages.tsx
index 0fbdc30450125265557bc31d46fd9cdc04bdc70a..f12b56b2642bcda11d248bdf05195fc96960da10 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/chat-messages.tsx
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/chat-messages.tsx
@@ -41,11 +41,11 @@ export default function ChatMessages(
}, [messageLength, lastMessage]);
return (
- <div className="w-full rounded-xl bg-white p-4 shadow-xl pb-0 relative">
- <div
- className="flex h-[50vh] flex-col gap-5 divide-y overflow-y-auto pb-4"
- ref={scrollableChatContainerRef}
- >
+ <div
+ className="flex-1 w-full rounded-xl bg-white p-4 shadow-xl relative overflow-y-auto"
+ ref={scrollableChatContainerRef}
+ >
+ <div className="flex flex-col gap-5 divide-y">
{props.messages.map((m, i) => {
const isLoadingMessage = i === messageLength - 1 && props.isLoading;
return (
@@ -62,14 +62,16 @@ export default function ChatMessages(
</div>
)}
</div>
- <div className="flex justify-end py-4">
- <ChatActions
- reload={props.reload}
- stop={props.stop}
- showReload={showReload}
- showStop={showStop}
- />
- </div>
+ {(showReload || showStop) && (
+ <div className="flex justify-end py-4">
+ <ChatActions
+ reload={props.reload}
+ stop={props.stop}
+ showReload={showReload}
+ showStop={showStop}
+ />
+ </div>
+ )}
{!messageLength && starterQuestions?.length && props.append && (
<div className="absolute bottom-6 left-0 w-full">
<div className="grid grid-cols-2 gap-2 mx-20">
diff --git a/templates/types/streaming/nextjs/app/components/ui/chat/hooks/use-csv.ts b/templates/types/streaming/nextjs/app/components/ui/chat/hooks/use-csv.ts
index 56e1d0831acaeaddf70150d60410491e33cc0754..97469baddce1a99542de5ee0ab518b73888ac0e3 100644
--- a/templates/types/streaming/nextjs/app/components/ui/chat/hooks/use-csv.ts
+++ b/templates/types/streaming/nextjs/app/components/ui/chat/hooks/use-csv.ts
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
-import { CsvFile } from "../chat";
+import { CsvFile } from "../index";
export function useCsv() {
const [files, setFiles] = useState<CsvFile[]>([]);
diff --git a/templates/types/streaming/nextjs/app/globals.css b/templates/types/streaming/nextjs/app/globals.css
index 09b85ed2c912e25518ddebbfebaba69090f889f4..0c2b9bdfebaf33b35a58e4bf43d566db04750bab 100644
--- a/templates/types/streaming/nextjs/app/globals.css
+++ b/templates/types/streaming/nextjs/app/globals.css
@@ -74,8 +74,11 @@
* {
@apply border-border;
}
+ html {
+ @apply h-full;
+ }
body {
- @apply bg-background text-foreground;
+ @apply bg-background text-foreground h-full;
font-feature-settings:
"rlig" 1,
"calt" 1;
diff --git a/templates/types/streaming/nextjs/app/page.tsx b/templates/types/streaming/nextjs/app/page.tsx
index ef00262b4a80049c70d66d1ceaced4afaabfd587..135969437aaa31c9a53a9e4a209ec421008497b9 100644
--- a/templates/types/streaming/nextjs/app/page.tsx
+++ b/templates/types/streaming/nextjs/app/page.tsx
@@ -3,9 +3,13 @@ import ChatSection from "./components/chat-section";
export default function Home() {
return (
- <main className="flex min-h-screen flex-col items-center gap-10 p-24 background-gradient">
- <Header />
- <ChatSection />
+ <main className="h-full w-full flex justify-center items-center background-gradient">
+ <div className="space-y-2 lg:space-y-10 w-[90%] lg:w-[60rem]">
+ <Header />
+ <div className="h-[65vh] flex">
+ <ChatSection />
+ </div>
+ </div>
</main>
);
}