mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 08:50:15 +01:00
feat: complete bing styles (view)
This commit is contained in:
Daniel Avila
parent
b8720eec3d
commit
b07b74ba54
4 changed files with 102 additions and 82 deletions
|
|
@ -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 { useDispatch, useSelector } from 'react-redux';
|
||||
import { setConversation } from '~/store/convoSlice';
|
||||
|
||||
export default function BingStyles() {
|
||||
function BingStyles(props, ref) {
|
||||
const dispatch = useDispatch();
|
||||
const [value, setValue] = useState('fast');
|
||||
const { model } = useSelector((state) => state.submit);
|
||||
const { conversationId } = useSelector((state) => state.convo);
|
||||
const { messages } = useSelector((state) => state.messages);
|
||||
const isBing = model === 'bingai' || model === 'sydney';
|
||||
|
||||
const isBing = model === 'bingai' || model === 'sydney';
|
||||
useEffect(() => {
|
||||
if (isBing && !conversationId) {
|
||||
dispatch(setConversation({ toneStyle: value }));
|
||||
|
|
@ -32,6 +32,7 @@ export default function BingStyles() {
|
|||
defaultValue={value}
|
||||
className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`}
|
||||
onValueChange={changeHandler}
|
||||
ref={ref}
|
||||
>
|
||||
<TabsList className="bg-white/[.60] dark:bg-gray-700">
|
||||
<TabsTrigger
|
||||
|
|
@ -56,3 +57,5 @@ export default function BingStyles() {
|
|||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
export default forwardRef(BingStyles);
|
||||
|
|
|
|||
|
|
@ -10,11 +10,7 @@ import TextareaAutosize from 'react-textarea-autosize';
|
|||
import createPayload from '~/utils/createPayload';
|
||||
import RegenerateIcon from '../svg/RegenerateIcon';
|
||||
import StopGeneratingIcon from '../svg/StopGeneratingIcon';
|
||||
import {
|
||||
setConversation,
|
||||
setError,
|
||||
refreshConversation
|
||||
} from '~/store/convoSlice';
|
||||
import { setConversation, setError, refreshConversation } from '~/store/convoSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { setSubmitState, toggleCursor } from '~/store/submitSlice';
|
||||
import { setText } from '~/store/textSlice';
|
||||
|
|
@ -22,12 +18,12 @@ import { useMessageHandler } from '../../utils/handleSubmit';
|
|||
|
||||
export default function TextChat({ messages }) {
|
||||
const inputRef = useRef(null);
|
||||
const bingStylesRef = useRef(null);
|
||||
const isComposing = useRef(false);
|
||||
const dispatch = useDispatch();
|
||||
const convo = useSelector((state) => state.convo);
|
||||
const { isSubmitting, stopStream, submission, disabled } =
|
||||
useSelector((state) => state.submit);
|
||||
const { text } = useSelector((state) => state.text);
|
||||
const convo = useSelector(state => state.convo);
|
||||
const { isSubmitting, stopStream, submission, disabled } = useSelector(state => state.submit);
|
||||
const { text } = useSelector(state => state.text);
|
||||
const { latestMessage } = convo;
|
||||
const { ask, regenerate, stopGenerating } = useMessageHandler();
|
||||
|
||||
|
|
@ -38,6 +34,22 @@ export default function TextChat({ messages }) {
|
|||
inputRef.current?.focus();
|
||||
}, [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 { messages, message, sender, isRegenerate } = currentState;
|
||||
|
||||
|
|
@ -114,8 +126,7 @@ export default function TextChat({ messages }) {
|
|||
|
||||
const convoHandler = (data, currentState) => {
|
||||
const { requestMessage, responseMessage } = data;
|
||||
const { messages, message, isCustomModel, isRegenerate } =
|
||||
currentState;
|
||||
const { messages, message, isCustomModel, isRegenerate } = currentState;
|
||||
const { model, chatGptLabel, promptPrefix } = message;
|
||||
if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
|
||||
else dispatch(setMessages([...messages, requestMessage, responseMessage]));
|
||||
|
|
@ -194,7 +205,7 @@ export default function TextChat({ messages }) {
|
|||
};
|
||||
|
||||
const errorHandler = (data, currentState, currentMsg) => {
|
||||
const {messages, message } = currentState;
|
||||
const { messages, message } = currentState;
|
||||
console.log('Error:', data);
|
||||
const errorResponse = {
|
||||
...data,
|
||||
|
|
@ -223,7 +234,7 @@ export default function TextChat({ messages }) {
|
|||
let latestResponseText = '';
|
||||
|
||||
const { server, payload } = createPayload(submission);
|
||||
const onMessage = (e) => {
|
||||
const onMessage = e => {
|
||||
if (stopStream) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -298,7 +309,7 @@ export default function TextChat({ messages }) {
|
|||
stopGenerating();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
const handleKeyDown = e => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
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) {
|
||||
return console.log('Enter + Shift');
|
||||
}
|
||||
|
|
@ -326,7 +341,7 @@ export default function TextChat({ messages }) {
|
|||
isComposing.current = false;
|
||||
};
|
||||
|
||||
const changeHandler = (e) => {
|
||||
const changeHandler = e => {
|
||||
const { value } = e.target;
|
||||
|
||||
// if (isSubmitting && (value === '' || value === '\n')) {
|
||||
|
|
@ -343,7 +358,7 @@ export default function TextChat({ messages }) {
|
|||
const isSearchView = messages?.[0]?.searchResult === true;
|
||||
const getPlaceholderText = () => {
|
||||
if (isSearchView) {
|
||||
return 'Click a message title to open its conversation.'
|
||||
return 'Click a message title to open its conversation.';
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
|
|
@ -351,7 +366,7 @@ export default function TextChat({ messages }) {
|
|||
}
|
||||
|
||||
if (isNotAppendable) {
|
||||
return 'Edit your message or Regenerate.'
|
||||
return 'Edit your message or Regenerate.';
|
||||
}
|
||||
|
||||
return '';
|
||||
|
|
@ -359,64 +374,64 @@ export default function TextChat({ messages }) {
|
|||
|
||||
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 justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
|
||||
<BingStyles />
|
||||
{isSubmitting && !isSearchView ? (
|
||||
<button
|
||||
onClick={handleStopGenerating}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
type="button"
|
||||
>
|
||||
<StopGeneratingIcon />
|
||||
<span className="hidden md:block">Stop generating</span>
|
||||
</button>
|
||||
) : latestMessage && !latestMessage?.isCreatedByUser && !isSearchView ? (
|
||||
<button
|
||||
onClick={handleRegenerate}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
type="button"
|
||||
>
|
||||
<RegenerateIcon />
|
||||
<span className="hidden md:block">Regenerate response</span>
|
||||
</button>
|
||||
) : null}
|
||||
</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`}
|
||||
>
|
||||
<ModelMenu />
|
||||
<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 dark:placeholder:text-gray-500 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
|
||||
/>
|
||||
<SubmitButton
|
||||
submitMessage={submitMessage}
|
||||
disabled={disabled || isNotAppendable}
|
||||
/>
|
||||
<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 justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
|
||||
<BingStyles ref={bingStylesRef}/>
|
||||
{isSubmitting && !isSearchView ? (
|
||||
<button
|
||||
onClick={handleStopGenerating}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
type="button"
|
||||
>
|
||||
<StopGeneratingIcon />
|
||||
<span className="hidden md:block">Stop generating</span>
|
||||
</button>
|
||||
) : latestMessage && !latestMessage?.isCreatedByUser && !isSearchView ? (
|
||||
<button
|
||||
onClick={handleRegenerate}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
type="button"
|
||||
>
|
||||
<RegenerateIcon />
|
||||
<span className="hidden md:block">Regenerate response</span>
|
||||
</button>
|
||||
) : null}
|
||||
</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`}
|
||||
>
|
||||
<ModelMenu />
|
||||
<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}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<Footer />
|
||||
</div>
|
||||
</form>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const inLineWrap = (parts) => {
|
|||
});
|
||||
};
|
||||
|
||||
export default function TextWrapper({ text, generateCursor }) {
|
||||
function TextWrapper({ text, generateCursor }) {
|
||||
let embedTest = false;
|
||||
let result = null;
|
||||
|
||||
|
|
@ -158,3 +158,5 @@ export default function TextWrapper({ text, generateCursor }) {
|
|||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(TextWrapper);
|
||||
|
|
@ -33,7 +33,7 @@ position: absolute;
|
|||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
bottom: 35px;
|
||||
bottom: 39px;
|
||||
z-index: 995;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue