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

feat: complete bing styles (view)

Browse source
This commit is contained in:
Daniel Avila 2023-03-25 09:34:00 -04:00
parent b8720eec3d
commit b07b74ba54
4 changed files with 102 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

9
client/src/components/Main/BingStyles.jsx
View file

@ -1,16 +1,16 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, forwardRef } from 'react';
import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx'; import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { setConversation } from '~/store/convoSlice'; import { setConversation } from '~/store/convoSlice';
export default function BingStyles() { function BingStyles(props, ref) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [value, setValue] = useState('fast'); const [value, setValue] = useState('fast');
const { model } = useSelector((state) => state.submit); const { model } = useSelector((state) => state.submit);
const { conversationId } = useSelector((state) => state.convo); const { conversationId } = useSelector((state) => state.convo);
const { messages } = useSelector((state) => state.messages); const { messages } = useSelector((state) => state.messages);
const isBing = model === 'bingai' || model === 'sydney';
const isBing = model === 'bingai' || model === 'sydney';
useEffect(() => { useEffect(() => {
if (isBing && !conversationId) { if (isBing && !conversationId) {
dispatch(setConversation({ toneStyle: value })); dispatch(setConversation({ toneStyle: value }));
@ -32,6 +32,7 @@ export default function BingStyles() {
defaultValue={value} defaultValue={value}
className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`} className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`}
onValueChange={changeHandler} onValueChange={changeHandler}
ref={ref}
> >
<TabsList className="bg-white/[.60] dark:bg-gray-700"> <TabsList className="bg-white/[.60] dark:bg-gray-700">
<TabsTrigger <TabsTrigger
@ -56,3 +57,5 @@ export default function BingStyles() {
</Tabs> </Tabs>
); );
} }
export default forwardRef(BingStyles);

165
client/src/components/Main/TextChat.jsx
View file

@ -10,11 +10,7 @@ import TextareaAutosize from 'react-textarea-autosize';
import createPayload from '~/utils/createPayload'; import createPayload from '~/utils/createPayload';
import RegenerateIcon from '../svg/RegenerateIcon'; import RegenerateIcon from '../svg/RegenerateIcon';
import StopGeneratingIcon from '../svg/StopGeneratingIcon'; import StopGeneratingIcon from '../svg/StopGeneratingIcon';
import { import { setConversation, setError, refreshConversation } from '~/store/convoSlice';
setConversation,
setError,
refreshConversation
} from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice'; import { setMessages } from '~/store/messageSlice';
import { setSubmitState, toggleCursor } from '~/store/submitSlice'; import { setSubmitState, toggleCursor } from '~/store/submitSlice';
import { setText } from '~/store/textSlice'; import { setText } from '~/store/textSlice';
@ -22,12 +18,12 @@ import { useMessageHandler } from '../../utils/handleSubmit';
export default function TextChat({ messages }) { export default function TextChat({ messages }) {
const inputRef = useRef(null); const inputRef = useRef(null);
const bingStylesRef = useRef(null);
const isComposing = useRef(false); const isComposing = useRef(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const convo = useSelector((state) => state.convo); const convo = useSelector(state => state.convo);
const { isSubmitting, stopStream, submission, disabled } = const { isSubmitting, stopStream, submission, disabled } = useSelector(state => state.submit);
useSelector((state) => state.submit); const { text } = useSelector(state => state.text);
const { text } = useSelector((state) => state.text);
const { latestMessage } = convo; const { latestMessage } = convo;
const { ask, regenerate, stopGenerating } = useMessageHandler(); const { ask, regenerate, stopGenerating } = useMessageHandler();
@ -38,6 +34,22 @@ export default function TextChat({ messages }) {
inputRef.current?.focus(); inputRef.current?.focus();
}, [convo?.conversationId]); }, [convo?.conversationId]);
// 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 messageHandler = (data, currentState, currentMsg) => { const messageHandler = (data, currentState, currentMsg) => {
const { messages, message, sender, isRegenerate } = currentState; const { messages, message, sender, isRegenerate } = currentState;
@ -114,8 +126,7 @@ export default function TextChat({ messages }) {
const convoHandler = (data, currentState) => { const convoHandler = (data, currentState) => {
const { requestMessage, responseMessage } = data; const { requestMessage, responseMessage } = data;
const { messages, message, isCustomModel, isRegenerate } = const { messages, message, isCustomModel, isRegenerate } = currentState;
currentState;
const { model, chatGptLabel, promptPrefix } = message; const { model, chatGptLabel, promptPrefix } = message;
if (isRegenerate) dispatch(setMessages([...messages, responseMessage])); if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
else dispatch(setMessages([...messages, requestMessage, responseMessage])); else dispatch(setMessages([...messages, requestMessage, responseMessage]));
@ -194,7 +205,7 @@ export default function TextChat({ messages }) {
}; };
const errorHandler = (data, currentState, currentMsg) => { const errorHandler = (data, currentState, currentMsg) => {
const {messages, message } = currentState; const { messages, message } = currentState;
console.log('Error:', data); console.log('Error:', data);
const errorResponse = { const errorResponse = {
...data, ...data,
@ -223,7 +234,7 @@ export default function TextChat({ messages }) {
let latestResponseText = ''; let latestResponseText = '';
const { server, payload } = createPayload(submission); const { server, payload } = createPayload(submission);
const onMessage = (e) => { const onMessage = e => {
if (stopStream) { if (stopStream) {
return; return;
} }
@ -298,7 +309,7 @@ export default function TextChat({ messages }) {
stopGenerating(); stopGenerating();
}; };
const handleKeyDown = (e) => { const handleKeyDown = e => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
} }
@ -308,7 +319,11 @@ export default function TextChat({ messages }) {
} }
}; };
const handleKeyUp = (e) => { const handleKeyUp = e => {
if (e.keyCode === 8 && e.target.value.trim() === '') {
dispatch(setText(e.target.value));
}
if (e.key === 'Enter' && e.shiftKey) { if (e.key === 'Enter' && e.shiftKey) {
return console.log('Enter + Shift'); return console.log('Enter + Shift');
} }
@ -326,7 +341,7 @@ export default function TextChat({ messages }) {
isComposing.current = false; isComposing.current = false;
}; };
const changeHandler = (e) => { const changeHandler = e => {
const { value } = e.target; const { value } = e.target;
// if (isSubmitting && (value === '' || value === '\n')) { // if (isSubmitting && (value === '' || value === '\n')) {
@ -343,7 +358,7 @@ export default function TextChat({ messages }) {
const isSearchView = messages?.[0]?.searchResult === true; const isSearchView = messages?.[0]?.searchResult === true;
const getPlaceholderText = () => { const getPlaceholderText = () => {
if (isSearchView) { if (isSearchView) {
return 'Click a message title to open its conversation.' return 'Click a message title to open its conversation.';
} }
if (disabled) { if (disabled) {
@ -351,7 +366,7 @@ export default function TextChat({ messages }) {
} }
if (isNotAppendable) { if (isNotAppendable) {
return 'Edit your message or Regenerate.' return 'Edit your message or Regenerate.';
} }
return ''; return '';
@ -359,64 +374,64 @@ export default function TextChat({ messages }) {
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"> <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"> <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 h-full flex-1 md:flex-col">
<span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2"> <span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
<BingStyles /> <BingStyles ref={bingStylesRef}/>
{isSubmitting && !isSearchView ? ( {isSubmitting && !isSearchView ? (
<button <button
onClick={handleStopGenerating} onClick={handleStopGenerating}
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border" className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button" type="button"
> >
<StopGeneratingIcon /> <StopGeneratingIcon />
<span className="hidden md:block">Stop generating</span> <span className="hidden md:block">Stop generating</span>
</button> </button>
) : latestMessage && !latestMessage?.isCreatedByUser && !isSearchView ? ( ) : latestMessage && !latestMessage?.isCreatedByUser && !isSearchView ? (
<button <button
onClick={handleRegenerate} onClick={handleRegenerate}
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border" className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button" type="button"
> >
<RegenerateIcon /> <RegenerateIcon />
<span className="hidden md:block">Regenerate response</span> <span className="hidden md:block">Regenerate response</span>
</button> </button>
) : null} ) : null}
</span> </span>
<div <div
className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${ className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
disabled ? 'bg-gray-100' : 'bg-white' disabled ? 'bg-gray-100' : 'bg-white'
} py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${ } 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' 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`} } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
> >
<ModelMenu /> <ModelMenu />
<TextareaAutosize <TextareaAutosize
tabIndex="0" tabIndex="0"
autoFocus autoFocus
ref={inputRef} ref={inputRef}
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}} // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
rows="1" rows="1"
value={disabled || isNotAppendable ? '' : text} value={disabled || isNotAppendable ? '' : text}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onChange={changeHandler} onChange={changeHandler}
onCompositionStart={handleCompositionStart} onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd} onCompositionEnd={handleCompositionEnd}
placeholder={getPlaceholderText()} placeholder={getPlaceholderText()}
disabled={disabled || isNotAppendable} 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 dark:placeholder:text-gray-500 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8" 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 <SubmitButton
submitMessage={submitMessage} submitMessage={submitMessage}
disabled={disabled || isNotAppendable} disabled={disabled || isNotAppendable}
/> />
</div>
</div> </div>
</div> </form>
</form> <Footer />
<Footer /> </div>
</div>
</> </>
); );
} }

4
client/src/components/Messages/Content/TextWrapper.jsx
View file

@ -46,7 +46,7 @@ const inLineWrap = (parts) => {
}); });
}; };
export default function TextWrapper({ text, generateCursor }) { function TextWrapper({ text, generateCursor }) {
let embedTest = false; let embedTest = false;
let result = null; let result = null;
@ -158,3 +158,5 @@ export default function TextWrapper({ text, generateCursor }) {
</> </>
); );
} }
export default React.memo(TextWrapper);

2
client/src/style.css
View file

@ -33,7 +33,7 @@ position: absolute;
left: 0; left: 0;
right: 0; right: 0;
opacity: 0; opacity: 0;
bottom: 35px; bottom: 39px;
z-index: 995; z-index: 995;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;