Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 18:00:15 +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

30
src/components/main/SubmitButton.jsx
View file

@ -1,8 +1,30 @@
import React from 'react';
import { useSelector } from 'react-redux';
import useDidMountEffect from '~/hooks/useDidMountEffect';
export default function SubmitButton({ onClick, disabled }) {
export default function SubmitButton({ submitMessage }) {
const { isSubmitting } = useSelector((state) => state.submit);
const clickHandler = (e) => {
e.preventDefault();
submitMessage();
};
if (isSubmitting) {
return (
<button className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:bottom-0.5 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2 md:disabled:bottom-1">
<div className="text-2xl">
<span >·</span>
<span className="blink">·</span>
<span className="blink2">·</span>
</div>
</button>
);
}
return (
<button onClick={onClick} className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2">
<button
onClick={clickHandler}
className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2"
>
<svg
stroke="currentColor"
fill="none"
@ -26,3 +48,7 @@ export default function SubmitButton({ onClick, disabled }) {
</button>
);
}
{
/* <div class="text-2xl"><span class="">·</span><span class="">·</span><span class="invisible">·</span></div> */
}