Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-08 18:44:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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

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);

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

@ -1,65 +1,78 @@
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}
disabled={disabled}
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="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">
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-1 h-4 w-4 "
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="22"
y1="2"
x2="11"
y2="13"
/>
<polygon points="22 2 15 22 11 13 2 9 22 2" />
</svg>
</div>
</button>
);
}
return (
<button
onClick={clickHandler}
disabled={disabled}
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="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">
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-1 h-4 w-4 "
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="22"
y1="2"
x2="11"
y2="13"
/>
<polygon points="22 2 15 22 11 13 2 9 22 2" />
</svg>
</div>
</button>
);
}
{

173
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,78 +120,78 @@ 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 ? (
<button
onClick={handleRegenerate}
className="input-panel-button btn btn-neutral flex w-fit justify-center gap-2 border-0 md:border"
type="button"
>
<RegenerateIcon />
<span className="hidden md:block">Regenerate response</span>
</button>
) : null}
<OpenAIOptions conversation={conversation} />
<BingStyles
<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"
type="button"
>
<RegenerateIcon />
<span className="hidden md:block">Regenerate response</span>
</button>
) : null}
</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
className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
disabled ? 'bg-gray-100' : 'bg-white'
} py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
} dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
>
<EndpointMenu />
<TextareaAutosize
tabIndex="0"
autoFocus
ref={inputRef}
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
rows="1"
value={disabled || isNotAppendable ? '' : text}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
onChange={changeHandler}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
placeholder={getPlaceholderText()}
disabled={disabled || isNotAppendable}
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-8"
/>
<SubmitButton
submitMessage={submitMessage}
disabled={disabled || isNotAppendable}
/>
{messages?.length && conversation?.model === 'sydney' ? (
<AdjustToneButton onClick={handleBingToneSetting} />
) : null}
/> */}
</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'
} py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
} dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
>
<EndpointMenu />
<TextareaAutosize
tabIndex="0"
autoFocus
ref={inputRef}
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
rows="1"
value={disabled || isNotAppendable ? '' : text}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
onChange={changeHandler}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
placeholder={getPlaceholderText()}
disabled={disabled || isNotAppendable}
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-8"
/>
<SubmitButton
submitMessage={submitMessage}
handleStopGenerating={handleStopGenerating}
disabled={disabled || isNotAppendable}
isSubmitting={isSubmitting}
/>
{/* {messages?.length && conversation?.model === 'sydney' ? (
<AdjustToneButton onClick={handleBingToneSetting} />
) : null} */}
</div>
</div>
</div>
</form>
<Footer />
</form>
<Footer />
</div>
</div>
</>
);