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

Msg Clipboard to checkmark (optimistic UX) (#247)

Browse source 
* revert unintended package-lock.json change

* used default checkmark which is included in project

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
This commit is contained in:
Anirudh 2023-05-14 18:30:20 +05:30 • committed by GitHub
parent 25d4529ff9
commit bf31b1fea0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/components/Messages/HoverButtons.jsx
View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import Clipboard from '../svg/Clipboard'; import Clipboard from '../svg/Clipboard';
import CheckMark from '../svg/CheckMark';
import EditIcon from '../svg/EditIcon'; import EditIcon from '../svg/EditIcon';
import RegenerateIcon from '../svg/RegenerateIcon'; import RegenerateIcon from '../svg/RegenerateIcon';
@ -13,6 +14,7 @@ export default function HoverButtons({
regenerate regenerate
}) { }) {
const { endpoint, jailbreak = false } = conversation; const { endpoint, jailbreak = false } = conversation;
const [isCopied, setIsCopied] = React.useState(false);
const branchingSupported = const branchingSupported =
// azureOpenAI, openAI, chatGPTBrowser support branching, so edit enabled // azureOpenAI, openAI, chatGPTBrowser support branching, so edit enabled
@ -59,11 +61,11 @@ export default function HoverButtons({
<button <button
className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible" className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
onClick={copyToClipboard} onClick={() => copyToClipboard(setIsCopied)}
type="button" type="button"
title="copy to clipboard" title={isCopied ? 'Copied to clipboard' : 'Copy to clipboard'}
> >
<Clipboard /> {isCopied ? <CheckMark /> : <Clipboard />}
</button> </button>
</div> </div>
); );

9
client/src/components/Messages/Message.jsx
View file

@ -98,8 +98,13 @@ export default function Message({
if (!isSubmitting && !message?.isCreatedByUser) regenerate(message); if (!isSubmitting && !message?.isCreatedByUser) regenerate(message);
}; };
const copyToClipboard = () => { const copyToClipboard = (setIsCopied) => {
setIsCopied(true);
copy(message?.text); copy(message?.text);
setTimeout(() => {
setIsCopied(false);
}, 3000);
}; };
const clickSearchResult = async () => { const clickSearchResult = async () => {
@ -217,7 +222,7 @@ export default function Message({
conversation={conversation} conversation={conversation}
enterEdit={() => enterEdit()} enterEdit={() => enterEdit()}
regenerate={() => regenerateMessage()} regenerate={() => regenerateMessage()}
copyToClipboard={() => copyToClipboard()} copyToClipboard={copyToClipboard}
/> />
<SubRow subclasses="switch-container"> <SubRow subclasses="switch-container">
<SiblingSwitch <SiblingSwitch