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

feat: support copy to clipboard

Browse source 
feat: move regenerate to all messages
feat: move stop generate to replace submit button
feat: make options' position more clear
This commit is contained in:
Wentao Lyu 2023-04-01 02:12:15 +08:00
parent bb1f8d731b
commit b67af67433
10 changed files with 372 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/package.json
View file

@ -31,6 +31,7 @@
"axios": "^1.3.4",
"class-variance-authority": "^0.4.0",
"clsx": "^1.2.1",
"copy-to-clipboard": "^3.3.3",
"crypto-browserify": "^3.12.0",
"lodash": "^4.17.21",
"lucide-react": "^0.113.0",

102
client/src/components/Input/BingAIOptions/index.jsx Normal file
View file

@ -0,0 +1,102 @@
import React, { useState, useEffect, forwardRef } from 'react';
import { useRecoilValue, useRecoilState } from 'recoil';
import { cn } from '~/utils';
import { Button } from '../../ui/Button.tsx';
import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
import store from '~/store';
// function BingStyles(props, ref) {
// const [conversation, setConversation] = useRecoilState(store.conversation) || {};
// const { endpoint, conversationId, jailbreak, toneStyle } = conversation;
// const messages = useRecoilValue(store.messages);
// const isBing = endpoint === 'bingAI';
// const show = isBing && (!conversationId || messages?.length === 0 || props.show);
// const defaultClasses =
// 'p-2 rounded-md min-w-[75px] font-normal bg-white/[.60] dark:bg-gray-700 text-black text-xs';
// const defaultSelected = cn(defaultClasses, 'font-medium data-[state=active]:text-white text-xs text-white');
// const selectedClass = val => val + '-tab ' + defaultSelected;
// const changeHandler = value => {
// setConversation(prevState => ({ ...prevState, toneStyle: value }));
// };
function BingAIOptions({ ref }) {
const [conversation, setConversation] = useRecoilState(store.conversation) || {};
const messages = useRecoilValue(store.messages);
const { endpoint, conversationId } = conversation;
if (endpoint !== 'bingAI') return null;
const isBing = endpoint === 'bingAI';
const show = isBing && (!conversationId || messages?.length === 0);
const changeHandler = value => {
setConversation(prevState => ({ ...prevState, toneStyle: value }));
};
const { toneStyle } = conversation;
const cardStyle =
'shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
const defaultClasses =
'p-2 rounded-md min-w-[75px] font-normal bg-white/[.60] dark:bg-gray-700 text-black text-xs';
const defaultSelected = cn(defaultClasses, 'font-medium data-[state=active]:text-white text-xs text-white');
const selectedClass = val => val + '-tab ' + defaultSelected;
// <Button
// type="button"
// className={
// cardStyle +
// ' flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 dark:hover:bg-gray-600'
// }
// onClick={triggerAdvancedMode}
// >
// <span className="w-full text-center text-xs font-medium font-normal">More</span>
// </Button>
return (
<div className={' flex w-full items-center justify-center gap-2'}>
<Tabs
value={toneStyle}
className={
cardStyle +
' flex h-[40px] items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-600'
}
onValueChange={changeHandler}
// ref={ref}
>
<TabsList className="bg-white/[.60] dark:bg-gray-700">
<TabsTrigger
value="creative"
className={`${toneStyle === 'creative' ? selectedClass('creative') : defaultClasses}`}
>
{'Creative'}
</TabsTrigger>
<TabsTrigger
value="fast"
className={`${toneStyle === 'fast' ? selectedClass('fast') : defaultClasses}`}
>
{'Fast'}
</TabsTrigger>
<TabsTrigger
value="balanced"
className={`${toneStyle === 'balanced' ? selectedClass('balanced') : defaultClasses}`}
>
{'Balanced'}
</TabsTrigger>
<TabsTrigger
value="precise"
className={`${toneStyle === 'precise' ? selectedClass('precise') : defaultClasses}`}
>
{'Precise'}
</TabsTrigger>
</TabsList>
</Tabs>
</div>
);
}
export default BingAIOptions;

8
client/src/components/Input/OpenAIOptions/index.jsx
View file

@ -1,14 +1,14 @@
import React, { useEffect, useState } from 'react';
import { useSetRecoilState } from 'recoil';
import { useRecoilState } from 'recoil';
import ModelSelect from './ModelSelect';
import { Button } from '../../ui/Button.tsx';
import store from '~/store';
function OpenAIOptions({ conversation = {} }) {
const { endpoint } = conversation;
function OpenAIOptions() {
const [advancedMode, setAdvancedMode] = useState(false);
const setConversation = useSetRecoilState(store.conversation);
const [conversation, setConversation] = useRecoilState(store.conversation) || {};
const { endpoint } = conversation;
const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);

51
client/src/components/Input/SubmitButton.jsx
View file

@ -1,35 +1,48 @@
import React from 'react';
import StopGeneratingIcon from '../svg/StopGeneratingIcon';
export default function SubmitButton({ submitMessage, disabled, isSubmitting }) {
export default function SubmitButton({ submitMessage, handleStopGenerating, disabled, isSubmitting }) {
const clickHandler = e => {
e.preventDefault();
submitMessage();
};
if (isSubmitting) {
if (isSubmitting)
return (
<button
className="absolute bottom-0 right-1 h-[100%] w-[40px] 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:right-2"
disabled
onClick={handleStopGenerating}
type="button"
className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
>
<div className="text-2xl">
<span style={{ maxWidth: 5.5, display: 'inline-grid' }}>·</span>
<span
className="blink"
style={{ maxWidth: 5.5, display: 'inline-grid' }}
>
·
</span>
<span
className="blink2"
style={{ maxWidth: 5.5, display: 'inline-grid' }}
>
·
</span>
<div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
<StopGeneratingIcon />
</div>
</button>
);
}
// // previous three dot animation
// return (
// <button
// className="absolute bottom-0 right-1 h-[100%] w-[40px] 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:right-2"
// disabled
// >
// <div className="text-2xl">
// <span style={{ maxWidth: 5.5, display: 'inline-grid' }}>·</span>
// <span
// className="blink"
// style={{ maxWidth: 5.5, display: 'inline-grid' }}
// >
// ·
// </span>
// <span
// className="blink2"
// style={{ maxWidth: 5.5, display: 'inline-grid' }}
// >
// ·
// </span>
// </div>
// </button>
// );
else
return (
<button
onClick={clickHandler}

89
client/src/components/Input/index.jsx
View file

@ -3,12 +3,11 @@ import { useRecoilValue, useRecoilState } from 'recoil';
import SubmitButton from './SubmitButton';
import AdjustToneButton from './AdjustToneButton';
import OpenAIOptions from './OpenAIOptions';
import BingStyles from './BingStyles';
import BingAIOptions from './BingAIOptions';
// import BingStyles from './BingStyles';
import EndpointMenu from './Endpoints/EndpointMenu';
import Footer from './Footer';
import TextareaAutosize from 'react-textarea-autosize';
import RegenerateIcon from '../svg/RegenerateIcon';
import StopGeneratingIcon from '../svg/StopGeneratingIcon';
import { useMessageHandler } from '../../utils/handleSubmit';
import store from '~/store';
@ -28,10 +27,10 @@ export default function TextChat({ isSearchView = false }) {
// TODO: do we need this?
const disabled = false;
const { ask, regenerate, stopGenerating } = useMessageHandler();
const { ask, stopGenerating } = useMessageHandler();
const bingStylesRef = useRef(null);
const [showBingToneSetting, setShowBingToneSetting] = useState(false);
// const bingStylesRef = useRef(null);
// const [showBingToneSetting, setShowBingToneSetting] = useState(false);
const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
@ -41,32 +40,28 @@ export default function TextChat({ isSearchView = false }) {
setText('');
}, [conversation?.conversationId]);
// controls the height of Bing tone style tabs
useEffect(() => {
if (!inputRef.current) {
return; // wait for the ref to be available
}
// // controls the height of Bing tone style tabs
// useEffect(() => {
// if (!inputRef.current) {
// return; // wait for the ref to be available
// }
const resizeObserver = new ResizeObserver(() => {
const newHeight = inputRef.current.clientHeight;
if (newHeight >= 24) {
// 24 is the default height of the input
bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
}
});
resizeObserver.observe(inputRef.current);
return () => resizeObserver.disconnect();
}, [inputRef]);
// const resizeObserver = new ResizeObserver(() => {
// const newHeight = inputRef.current.clientHeight;
// if (newHeight >= 24) {
// // 24 is the default height of the input
// // bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
// }
// });
// resizeObserver.observe(inputRef.current);
// return () => resizeObserver.disconnect();
// }, [inputRef]);
const submitMessage = () => {
ask({ text });
setText('');
};
const handleRegenerate = () => {
if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
};
const handleStopGenerating = () => {
stopGenerating();
};
@ -125,28 +120,18 @@ export default function TextChat({ isSearchView = false }) {
return '';
};
const handleBingToneSetting = () => {
setShowBingToneSetting(show => !show);
};
// const handleBingToneSetting = () => {
// setShowBingToneSetting(show => !show);
// };
if (isSearchView) return <></>;
return (
<>
<div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
<form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
<div className="relative flex h-full flex-1 md:flex-col">
<span className="order-last ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
{isSubmitting ? (
<button
onClick={handleStopGenerating}
className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
type="button"
>
<StopGeneratingIcon />
<span className="hidden md:block">Stop generating</span>
</button>
) : latestMessage && !latestMessage?.isCreatedByUser ? (
<div className="fixed bottom-0 left-0 w-full md:absolute">
<div className="relative py-2 md:mb-[-16px] md:py-4 lg:mb-[-32px]">
{/* <span className="order-last ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:w-full md:gap-2">
{ : latestMessage && !latestMessage?.isCreatedByUser ? (
<button
onClick={handleRegenerate}
className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
@ -156,12 +141,19 @@ export default function TextChat({ isSearchView = false }) {
<span className="hidden md:block">Regenerate response</span>
</button>
) : null}
<OpenAIOptions conversation={conversation} />
<BingStyles
</span> */}
<span className="ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:w-full md:gap-2">
<OpenAIOptions />
<BingAIOptions />
{/* <BingStyles
ref={bingStylesRef}
show={showBingToneSetting}
/>
/> */}
</span>
</div>
<div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient relative w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
<form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
<div className="relative flex h-full flex-1 md:flex-col">
<div
className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
disabled ? 'bg-gray-100' : 'bg-white'
@ -188,16 +180,19 @@ export default function TextChat({ isSearchView = false }) {
/>
<SubmitButton
submitMessage={submitMessage}
handleStopGenerating={handleStopGenerating}
disabled={disabled || isNotAppendable}
isSubmitting={isSubmitting}
/>
{messages?.length && conversation?.model === 'sydney' ? (
{/* {messages?.length && conversation?.model === 'sydney' ? (
<AdjustToneButton onClick={handleBingToneSetting} />
) : null}
) : null} */}
</div>
</div>
</form>
<Footer />
</div>
</div>
</>
);
}

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

@ -1,26 +1,74 @@
import React from 'react';
// import Clipboard from '../svg/Clipboard';
import Clipboard from '../svg/Clipboard';
import EditIcon from '../svg/EditIcon';
import RegenerateIcon from '../svg/RegenerateIcon';
export default function HoverButtons({
isEditting,
enterEdit,
copyToClipboard,
conversation,
isSubmitting,
message,
regenerate
}) {
const { endpoint, jailbreak = false } = conversation;
const branchingSupported =
// azureOpenAI, openAI, chatGPTBrowser support branching, so edit enabled
!!['azureOpenAI', 'openAI', 'chatGPTBrowser'].find(e => e === endpoint) ||
// Sydney in bingAI supports branching, so edit enabled
(endpoint === 'bingAI' && jailbreak);
const editEnabled =
!message?.error &&
message?.isCreatedByUser &&
!message?.searchResult &&
!isEditting &&
branchingSupported;
// for now, once branching is supported, regerate will be enabled
const regenerateEnabled =
!message?.error &&
!message?.isCreatedByUser &&
!message?.searchResult &&
!isEditting &&
!isSubmitting &&
branchingSupported;
export default function HoverButtons({ visible, onClick, endpoint }) {
const enabled = !!['azureOpenAI', 'openAI', 'chatGPTBrowser'].find(e => e === endpoint);
console.log(enabled);
return (
<div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
{visible && enabled ? (
<>
{editEnabled ? (
<button
className="resubmit-edit-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={onClick}
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={enterEdit}
type="button"
title="edit"
>
{/* <button className="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"> */}
<EditIcon />
</button>
</>
) : null}
{/* <button className="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">
{regenerateEnabled ? (
<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"
onClick={regenerate}
type="button"
title="regenerate"
>
{/* <button className="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"> */}
<RegenerateIcon />
</button>
) : null}
<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"
onClick={copyToClipboard}
type="button"
title="copy to clipboard"
>
<Clipboard />
</button> */}
</button>
</div>
);
}

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

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { useRecoilValue, useSetRecoilState, useResetRecoilState } from 'recoil';
import copy from 'copy-to-clipboard';
import SubRow from './Content/SubRow';
import Content from './Content/Content';
import MultiMessage from './MultiMessage';
@ -29,7 +30,7 @@ export default function Message({
const textEditor = useRef(null);
const last = !message?.children?.length;
const edit = message.messageId == currentEditId;
const { ask } = useMessageHandler();
const { ask, regenerate } = useMessageHandler();
const { switchToConversation } = store.useConversation();
const blinker = submitting && isSubmitting;
@ -87,6 +88,14 @@ export default function Message({
enterEdit(true);
};
const regenerateMessage = () => {
if (!isSubmitting && !message?.isCreatedByUser) regenerate(message);
};
const copyToClipboard = () => {
copy(message?.text);
};
const clickSearchResult = async () => {
if (!searchResult) return;
const convoResponse = await fetchById('convos', message.conversationId);
@ -177,9 +186,13 @@ export default function Message({
)}
</div>
<HoverButtons
endpoint={conversation?.endpoint}
visible={!error && isCreatedByUser && !edit && !searchResult}
onClick={() => enterEdit()}
isEditting={edit}
isSubmitting={isSubmitting}
message={message}
conversation={conversation}
enterEdit={() => enterEdit()}
regenerate={() => regenerateMessage()}
copyToClipboard={() => copyToClipboard()}
/>
<SubRow subclasses="switch-container">
<SiblingSwitch

4
client/src/components/svg/RegenerateIcon.jsx
View file

@ -5,11 +5,11 @@ export default function Regenerate() {
<svg
stroke="currentColor"
fill="none"
strokeWidth="1.5"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-3 w-3"
className="h-4 w-4"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"

22
client/src/components/svg/StopGeneratingIcon.jsx
View file

@ -2,6 +2,26 @@ import React from 'react';
export default function StopGeneratingIcon() {
return (
<svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
<svg
stroke="currentColor"
fill="none"
strokeWidth="2.5"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-3 w-3"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="3"
y="3"
width="18"
height="18"
rx="2"
ry="2"
></rect>
</svg>
);
}

2
client/src/mobile.css
View file

@ -45,7 +45,7 @@
display: none;
}
.resubmit-edit-button {
.hover-button {
display: block;
visibility: visible;
}