Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-09 02:54:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

merge latest

Browse source
This commit is contained in:
Danny Avila 2023-03-31 16:09:45 -04:00
commit b5541903e4
11 changed files with 344 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,69 @@
import React from 'react';
import { useRecoilValue, useRecoilState } from 'recoil';
import { cn } from '~/utils';
import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
import store from '~/store';
function BingAIOptions() {
const [conversation, setConversation] = useRecoilState(store.conversation) || {};
const { endpoint, conversationId } = conversation;
if (endpoint !== 'bingAI') return null;
if (conversationId !== 'new') return null;
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;
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}
>
<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;

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

@ -1,15 +1,15 @@
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 Settings from './Settings.jsx';
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, conversationId } = conversation;
const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
@ -48,6 +48,7 @@ function OpenAIOptions({ conversation = {} }) {
}, [conversation, advancedMode]);
if (endpoint !== 'openAI') return null;
if (conversationId !== 'new') return null;
const { model } = conversation;
@ -84,22 +85,28 @@ function OpenAIOptions({ conversation = {} }) {
</div>
<div
className={
cardStyle +
' p-b-[40px] openAIOptions-advanced-container absolute left-4 right-4 bottom-[40px] flex flex-col overflow-hidden rounded-md bg-slate-100 bg-white px-0' +
' openAIOptions-advanced-container absolute bottom-[-10px] flex w-full flex-col items-center justify-center px-4' +
(advancedMode ? ' show' : '')
}
>
<div className="flex w-full items-center justify-between bg-slate-100 px-4 py-2 dark:bg-white/10">
<span className="text-xs font-medium font-normal">Advanced settings for OpenAI endpoint</span>
<Button
type="button"
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
onClick={switchToSimpleMode}
>
Switch to simple mode
</Button>
<div
className={
cardStyle +
' flex w-full flex-col overflow-hidden rounded-md border bg-slate-200 px-0 pb-[10px] dark:border-white/10 lg:w-[736px]'
}
>
<div className="flex w-full items-center justify-between bg-slate-100 px-4 py-2 dark:bg-gray-800/60">
<span className="text-xs font-medium font-normal">Advanced settings for OpenAI endpoint</span>
<Button
type="button"
className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
onClick={switchToSimpleMode}
>
Switch to simple mode
</Button>
</div>
<div className="h-[375px] p-5"><Settings/></div>
</div>
<div className="h-[375px] p-5"><Settings/></div>
</div>
</>
);

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

161
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,62 @@ 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
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}
<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="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 />
</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>
</>
);