mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-28 05:06:13 +01:00
handles in-line code in model response text (not multi-line yet)
This commit is contained in:
Daniel Avila
parent
1a6cddb8bb
commit
187f7b5b03
7 changed files with 52 additions and 7 deletions
|
|
@ -1,81 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import GPTIcon from '../svg/GPTIcon';
|
||||
import BingIcon from '../svg/BingIcon';
|
||||
|
||||
export default function Message({
|
||||
sender,
|
||||
text,
|
||||
last = false,
|
||||
error = false,
|
||||
scrollToBottom
|
||||
}) {
|
||||
const { isSubmitting } = useSelector((state) => state.submit);
|
||||
const [abortScroll, setAbort] = useState(false);
|
||||
const blinker = isSubmitting && last && sender.toLowerCase() !== 'user';
|
||||
|
||||
useEffect(() => {
|
||||
if (blinker && !abortScroll) {
|
||||
scrollToBottom();
|
||||
}
|
||||
}, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
|
||||
|
||||
const handleWheel = () => {
|
||||
if (blinker) {
|
||||
setAbort(true);
|
||||
} else {
|
||||
setAbort(false);
|
||||
}
|
||||
};
|
||||
|
||||
const props = {
|
||||
className:
|
||||
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800'
|
||||
};
|
||||
|
||||
if (sender.toLowerCase() !== 'user') {
|
||||
props.className =
|
||||
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
|
||||
}
|
||||
|
||||
let icon = `${sender}:`;
|
||||
const isGPT = sender === 'chatgpt' || sender === 'davinci' || sender === 'GPT';
|
||||
|
||||
if (sender.toLowerCase() !== 'user') {
|
||||
icon = (
|
||||
<div
|
||||
style={isGPT ? { backgroundColor: 'rgb(16, 163, 127)' } : {}}
|
||||
className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
|
||||
>
|
||||
{sender === 'bingai' ? <BingIcon /> : <GPTIcon />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
onWheel={handleWheel}
|
||||
>
|
||||
<div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
|
||||
<strong className="relative flex w-[30px] flex-col items-end">{icon}</strong>
|
||||
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
|
||||
<div className="flex flex-grow flex-col gap-3">
|
||||
{error ? (
|
||||
<div className="flex flex min-h-[20px] flex-row flex-col items-start gap-4 gap-2 whitespace-pre-wrap text-red-500">
|
||||
<div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
|
||||
{text}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span>
|
||||
{text}
|
||||
{blinker && <span className="result-streaming">█</span>}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import ScrollToBottom from './ScrollToBottom';
|
||||
import Message from './Message';
|
||||
|
||||
const Messages = ({ messages }) => {
|
||||
const [showScrollButton, setShowScrollButton] = useState(false);
|
||||
const scrollableRef = useRef(null);
|
||||
const messagesEndRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
const scrollable = scrollableRef.current;
|
||||
const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
|
||||
setShowScrollButton(hasScrollbar);
|
||||
}, 650);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}, [messages]);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
setShowScrollButton(false);
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
|
||||
const diff = Math.abs(scrollHeight - scrollTop);
|
||||
const bottom =
|
||||
diff === clientHeight || (diff <= clientHeight + 25 && diff >= clientHeight - 25);
|
||||
if (bottom) {
|
||||
setShowScrollButton(false);
|
||||
} else {
|
||||
setShowScrollButton(true);
|
||||
}
|
||||
};
|
||||
|
||||
let timeoutId = null;
|
||||
const debouncedHandleScroll = () => {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(handleScroll, 100);
|
||||
};
|
||||
|
||||
const scrollHandler = (e) => {
|
||||
e.preventDefault();
|
||||
scrollToBottom();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex-1 overflow-y-auto "
|
||||
ref={scrollableRef}
|
||||
onScroll={debouncedHandleScroll}
|
||||
>
|
||||
{/* <div className="flex-1 overflow-hidden"> */}
|
||||
<div className="h-full dark:bg-gray-800">
|
||||
<div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
|
||||
{messages.map((message, i) => (
|
||||
<Message
|
||||
key={i}
|
||||
sender={message.sender}
|
||||
text={message.text}
|
||||
last={i === messages.length - 1}
|
||||
error={message.error ? true : false}
|
||||
scrollToBottom={i === messages.length - 1 ? scrollToBottom : null}
|
||||
/>
|
||||
))}
|
||||
<CSSTransition
|
||||
in={showScrollButton}
|
||||
timeout={400}
|
||||
classNames="scroll-down"
|
||||
unmountOnExit={false}
|
||||
// appear
|
||||
>
|
||||
{() => showScrollButton && <ScrollToBottom scrollHandler={scrollHandler} />}
|
||||
</CSSTransition>
|
||||
|
||||
<div
|
||||
className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48"
|
||||
ref={messagesEndRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Messages;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function ScrollToBottom({ scrollHandler}) {
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={scrollHandler}
|
||||
className="absolute right-6 bottom-[124px] z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px]"
|
||||
>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="m-1 h-4 w-4"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line
|
||||
x1="12"
|
||||
y1="5"
|
||||
x2="12"
|
||||
y2="19"
|
||||
/>
|
||||
<polyline points="19 12 12 19 5 12" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -160,7 +160,7 @@ export default function TextChat({ messages }) {
|
|||
onKeyDown={handleKeyDown}
|
||||
onChange={changeHandler}
|
||||
placeholder=""
|
||||
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-9 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
|
||||
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
|
||||
/>
|
||||
<SubmitButton submitMessage={submitMessage} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue