sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

chat scroll trial 1

Browse source
This commit is contained in:
YasinOnm08 2024-10-01 10:39:21 +02:00
parent 8c14760027
commit 853967f8e7
2 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/backend/InputOutputHandler.tsx
View file

@ -1,6 +1,6 @@
"use client" "use client"
import React, { use, useEffect, useRef, useState } from "react"; import React, { use, useEffect, useRef, useState } from "react";
import ConversationFrontend from "../components/ConversationFrontend"; import ConversationFrontend from '../components/ConversationFrontend';
import InputFrontend from "../components/InputFrontend"; import InputFrontend from "../components/InputFrontend";
import { sendToVoiceRecognition } from "./voice_backend" import { sendToVoiceRecognition } from "./voice_backend"
import axios from "axios"; import axios from "axios";
@ -52,6 +52,7 @@ const InputOutputBackend: React.FC = () => {
}, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]); }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]);
const conversationRef = useRef<HTMLDivElement>(null)
const [copyClicked, setCopyClicked] = useState(false) const [copyClicked, setCopyClicked] = useState(false)
const [accessToken, setAccessToken] = useState("") const [accessToken, setAccessToken] = useState("")
const postWorkerRef = useRef<Worker | null>(null) const postWorkerRef = useRef<Worker | null>(null)
@ -266,6 +267,7 @@ const InputOutputBackend: React.FC = () => {
return ( return (
<> <>
<ConversationFrontend <ConversationFrontend
ref={conversationRef}
messages={messages} messages={messages}
onResendClick={handleResendClick} onResendClick={handleResendClick}
onEditClick={handleEditClick} onEditClick={handleEditClick}

28
app/components/ConversationFrontend.tsx
View file

@ -14,32 +14,34 @@ interface ConversationProps {
} }
const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>( const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => { ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
const endOfMessagesRef = useRef<HTMLDivElement>(null);
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 ( return (
<div className="output"> <div className="output" ref={ref}>
<div className="conversation resize" id="conversation" ref={ref}> <div className="conversation resize" id="conversation">
{messages.map((message, index) => { {messages.map((message, index) => {
let isUserMessage
if (message.role == "user") {
isUserMessage = message
}
if (index >= 1){ if (index >= 1){
return ( return (
<div <div
key={index} key={index}
className={isUserMessage ? 'user-message' : 'ai-message'} className={message.role === "user" ? 'user-message' : 'ai-message'}
> >
<p> {message.content}</p> <p> {message.content}</p>
</div> </div>
); );
} }
})} })}
{/* Dummy div to mark the end of the conversation for auto-scrolling */}
<div ref={endOfMessagesRef} />
<div className="button-container"> <div className="button-container">
<button type="button" onClick={onResendClick}> <button type="button" onClick={onResendClick}>
<img src="/img/resend.svg" alt="resend" /> <img src="/img/resend.svg" alt="resend" />