From d75c08e7d83841e7bfc8f81c86452f5989d583e4 Mon Sep 17 00:00:00 2001
From: Thuc Pham <51660321+thucpn@users.noreply.github.com>
Date: Wed, 12 Jun 2024 19:02:58 +0700
Subject: [PATCH] feat: make chat-session component independence from container
(#124)
---
.../components/ui/html/chat/chat-messages.tsx | 13 +++++----
.../nextjs/app/components/chat-section.tsx | 2 +-
.../app/components/ui/chat/chat-input.tsx | 2 +-
.../app/components/ui/chat/chat-messages.tsx | 28 ++++++++++---------
.../app/components/ui/chat/hooks/use-csv.ts | 2 +-
.../types/streaming/nextjs/app/globals.css | 5 +++-
templates/types/streaming/nextjs/app/page.tsx | 10 +++++--
7 files changed, 36 insertions(+), 26 deletions(-)
diff --git a/templates/components/ui/html/chat/chat-messages.tsx b/templates/components/ui/html/chat/chat-messages.tsx
index 37f00eca..9728e841 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 5703660e..2a9991f0 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 8a377b49..f232769a 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 0fbdc304..f12b56b2 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 56e1d083..97469bad 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 09b85ed2..0c2b9bdf 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 ef00262b..13596943 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>
);
}
--
GitLab