From 853967f8e7ef0e1182494cfa1987d39b734636ed Mon Sep 17 00:00:00 2001 From: YasinOnm08 <onmazyasin4@gmail.com> Date: Tue, 1 Oct 2024 10:39:21 +0200 Subject: [PATCH 1/2] chat scroll trial 1 --- app/backend/InputOutputHandler.tsx | 4 +++- app/components/ConversationFrontend.tsx | 28 +++++++++++++------------ 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index 646e924..b4a59b7 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -1,6 +1,6 @@ "use client" import React, { use, useEffect, useRef, useState } from "react"; -import ConversationFrontend from "../components/ConversationFrontend"; +import ConversationFrontend from '../components/ConversationFrontend'; import InputFrontend from "../components/InputFrontend"; import { sendToVoiceRecognition } from "./voice_backend" import axios from "axios"; @@ -52,6 +52,7 @@ const InputOutputBackend: React.FC = () => { }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]); + const conversationRef = useRef<HTMLDivElement>(null) const [copyClicked, setCopyClicked] = useState(false) const [accessToken, setAccessToken] = useState("") const postWorkerRef = useRef<Worker | null>(null) @@ -266,6 +267,7 @@ const InputOutputBackend: React.FC = () => { return ( <> <ConversationFrontend + ref={conversationRef} messages={messages} onResendClick={handleResendClick} onEditClick={handleEditClick} diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx index f32e19a..4d15d20 100644 --- a/app/components/ConversationFrontend.tsx +++ b/app/components/ConversationFrontend.tsx @@ -14,32 +14,34 @@ interface ConversationProps { } const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>( - ({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => { - const endOfMessagesRef = useRef<HTMLDivElement>(null); - + ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => { + + useEffect(() => { + if (ref && typeof ref !== 'function') { + const element = ref as React.RefObject<HTMLDivElement>; + if (element.current) { + element.current.scrollTop = element.current.scrollHeight; + } + } + }, [messages, ref]); + return ( - <div className="output"> - <div className="conversation resize" id="conversation" ref={ref}> + <div className="output" ref={ref}> + <div className="conversation resize" id="conversation"> {messages.map((message, index) => { - let isUserMessage - if (message.role == "user") { - isUserMessage = message - } if (index >= 1){ return ( <div key={index} - className={isUserMessage ? 'user-message' : 'ai-message'} + className={message.role === "user" ? 'user-message' : 'ai-message'} > <p> {message.content}</p> </div> ); } })} - - {/* Dummy div to mark the end of the conversation for auto-scrolling */} - <div ref={endOfMessagesRef} /> + <div className="button-container"> <button type="button" onClick={onResendClick}> <img src="/img/resend.svg" alt="resend" /> From b12eb25d7891117b44c95f49f6b380d832787069 Mon Sep 17 00:00:00 2001 From: YasinOnm08 <onmazyasin4@gmail.com> Date: Tue, 1 Oct 2024 11:37:53 +0200 Subject: [PATCH 2/2] chat scroll trial 2 / css tweaks --- app/components/ConversationFrontend.tsx | 14 ++++++-------- app/styles/history.css | 4 ++-- app/styles/output.css | 3 ++- app/styles/responsive.css | 16 +++++++++------- 4 files changed, 19 insertions(+), 18 deletions(-) diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx index 4d15d20..e6b2684 100644 --- a/app/components/ConversationFrontend.tsx +++ b/app/components/ConversationFrontend.tsx @@ -16,14 +16,11 @@ interface ConversationProps { const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>( ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => { - useEffect(() => { - if (ref && typeof ref !== 'function') { - const element = ref as React.RefObject<HTMLDivElement>; - if (element.current) { - element.current.scrollTop = element.current.scrollHeight; - } - } - }, [messages, ref]); + const messagesEndRef = useRef<HTMLDivElement|null>(null) + + useEffect(() => { + messagesEndRef.current?.scrollIntoView() + },[messages]) return ( <div className="output" ref={ref}> @@ -55,6 +52,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps> <p id="copiedText" style={{opacity:isClicked?"1":"0", transition:"all 0.3s ease-in-out"}}>Copied!</p> </div> </div> + <div ref={messagesEndRef} /> </div> ); } diff --git a/app/styles/history.css b/app/styles/history.css index 8133955..14c8428 100644 --- a/app/styles/history.css +++ b/app/styles/history.css @@ -1,7 +1,7 @@ .history-background { grid-column: 1/2; grid-row: 1/2; - height: 40dvh; + height: 35dvh; overflow: hidden; background-color: var(--history-background-color); padding: 1em; @@ -40,6 +40,6 @@ .history-models{ position: relative; - height: 90dvh; + height: 86dvh; /* padding-bottom: 3dvh; */ } diff --git a/app/styles/output.css b/app/styles/output.css index 0f9ed42..179f174 100644 --- a/app/styles/output.css +++ b/app/styles/output.css @@ -4,6 +4,7 @@ grid-row: 1 / 4; background-color: var(--output-background-color); margin: 1em; + margin-bottom: 0; padding-bottom: 14dvh; display: flex; flex-direction: column; @@ -11,7 +12,7 @@ font-size: 1em; overflow-y: auto; width: calc(100% - 2em); /* Corrected calculation for width */ - height: 90dvh; + height: 86dvh; } #conversation { diff --git a/app/styles/responsive.css b/app/styles/responsive.css index 57ec871..ae65dfd 100644 --- a/app/styles/responsive.css +++ b/app/styles/responsive.css @@ -73,29 +73,31 @@ /* Input styles */ .input { grid-column: 1 / -1; - gap: 10px; + gap: 5px; padding: 0.5em; margin: 0 auto; align-items: center; - width: 90%; - bottom: 10dvh + bottom: 3dvh; + right: 2vw; + left: 2vw; + justify-content: flex-start; } .input input { font-size: 1em; /* Adjust font size */ - max-width: 65%; + max-width: 70%; margin-right: 0; border-color: var(--input-border-color); /* Use variable for input border */ color: var(--text-color); /* Use variable for text color */ } .input button { - height: 40px; /* Adjust button height */ - width: 40px; /* Adjust button width */ + height: 100%; /* Adjust button height */ + width: 15%; /* Adjust button width */ font-size: 1.2em; /* Adjust button font size */ - margin: auto; background-color: var(--input-button-color); /* Use variable for button color */ color: var(--user-message-text-color); /* Use variable for button text color */ + margin: 0; } .header-logo{