Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 01:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

optimistic ui for message sending and submit state

Browse source
This commit is contained in:
Danny Avila 2023-02-07 16:22:35 -05:00
parent 9d41ed4615
commit 6842ac880c
19 changed files with 430 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/main/Message.jsx
View file

@ -1,6 +1,8 @@
import React from 'react';
import { useSelector } from 'react-redux';
export default function Message({ sender, text }) {
export default function Message({ sender, text, last = false}) {
const { isSubmitting } = useSelector((state) => state.submit);
const props = {
className:
'group w-full border-b border-black/10 text-gray-800 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-100'
@ -16,7 +18,10 @@ export default function Message({ sender, text }) {
<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">{sender}:</strong>
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
{text}
<span>
{text}
{isSubmitting && last && sender === 'GPT' && <span className="blink">█</span>}
</span>
</div>
</div>
</div>