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

refactor: bing button

Browse source 
THIS IS NOT FINISHED. DONT USE THIS
This commit is contained in:
Wentao Lyu 2023-03-28 23:00:29 +08:00
parent c7c30d8bb5
commit 8ea98cca5d
5 changed files with 32 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/Input/AdjustToneButton.jsx
View file

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
export default function AdjustButton({ onClick }) { export default function AdjustButton({ onClick }) {
const clickHandler = (e) => { const clickHandler = e => {
e.preventDefault(); e.preventDefault();
onClick(); onClick();
}; };
return ( return (
<button <button
onClick={clickHandler} onClick={clickHandler}
className="group absolute bottom-11 md:bottom-0 -right-11 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500" className="group absolute bottom-11 -right-11 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500 md:bottom-0"
> >
<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"> <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 <svg
@ -18,11 +18,13 @@ export default function AdjustButton({ onClick }) {
width="1em" width="1em"
strokeWidth="2" strokeWidth="2"
stroke="currentColor" stroke="currentColor"
className="mr-1 h-4 w-4"> className="mr-1 h-4 w-4"
>
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /> d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"
/>
</svg> </svg>
</div> </div>
</button> </button>

28
client/src/components/Input/BingStyles.jsx
View file

@ -1,36 +1,38 @@
import React, { useState, useEffect, forwardRef } 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 { useRecoilValue, useRecoilState } from 'recoil';
import { setConversation } from '~/store/convoSlice'; // import { setConversation } from '~/store/convoSlice';
import store from '~/store';
function BingStyles(props, ref) { function BingStyles(props, ref) {
const dispatch = useDispatch();
const [value, setValue] = useState('fast'); const [value, setValue] = useState('fast');
const { model } = useSelector((state) => state.submit);
const { conversationId } = useSelector((state) => state.convo); const [conversation, setConversation] = useRecoilState(store.conversation) || {};
const { messages } = useSelector((state) => state.messages); const { model, conversationId } = conversation;
const messages = useRecoilValue(store.messages);
const isBing = model === 'bingai' || model === 'sydney'; const isBing = model === 'bingai' || model === 'sydney';
useEffect(() => { useEffect(() => {
if (model === 'bingai' && !conversationId || model === 'sydney') { if ((model === 'bingai' && !conversationId) || model === 'sydney') {
dispatch(setConversation({ toneStyle: value })); setConversation(prevState => ({ ...prevState, toneStyle: value }));
} }
}, [conversationId, model, value, dispatch]); }, [conversationId, model, value]);
const show = isBing && ((!conversationId || messages?.length === 0) || props.show); const show = isBing && (!conversationId || messages?.length === 0 || props.show);
const defaultClasses = 'p-2 rounded-md font-normal bg-white/[.60] dark:bg-gray-700 text-black'; const defaultClasses = 'p-2 rounded-md font-normal bg-white/[.60] dark:bg-gray-700 text-black';
const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white'; const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white';
const selectedClass = (val) => val + '-tab ' + defaultSelected; const selectedClass = val => val + '-tab ' + defaultSelected;
const changeHandler = value => { const changeHandler = value => {
setValue(value); setValue(value);
dispatch(setConversation({ toneStyle: value })); setConversation(prevState => ({ ...prevState, toneStyle: value }));
}; };
return ( return (
<Tabs <Tabs
defaultValue={value} defaultValue={value}
className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`} className={`bing-styles mb-1 shadow-md ${show ? 'show' : ''}`}
onValueChange={changeHandler} onValueChange={changeHandler}
ref={ref} ref={ref}
> >

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

@ -1,19 +1,14 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { useRecoilValue, useRecoilState } from 'recoil'; import { useRecoilValue, useRecoilState } from 'recoil';
// import { SSE } from '~/utils/sse';
import SubmitButton from './SubmitButton'; import SubmitButton from './SubmitButton';
// import AdjustToneButton from './AdjustToneButton'; import AdjustToneButton from './AdjustToneButton';
// import BingStyles from './BingStyles'; import BingStyles from './BingStyles';
import ModelMenu from './Models/ModelMenu'; import ModelMenu from './Models/ModelMenu';
import Footer from './Footer'; import Footer from './Footer';
import TextareaAutosize from 'react-textarea-autosize'; 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 { setConversation, setError, refreshConversation } from '~/store/convoSlice';
// import { setMessages } from '~/store/messageSlice';
// import { setSubmitState, toggleCursor } from '~/store/submitSlice';
// import { setText } from '~/store/textSlice';
import { useMessageHandler } from '../../utils/handleSubmit'; import { useMessageHandler } from '../../utils/handleSubmit';
import store from '~/store'; import store from '~/store';
@ -62,258 +57,11 @@ export default function TextChat() {
return () => resizeObserver.disconnect(); return () => resizeObserver.disconnect();
}, [inputRef]); }, [inputRef]);
// const messageHandler = (data, currentState, currentMsg) => {
// const { messages, message, sender, isRegenerate } = currentState;
// if (isRegenerate)
// dispatch(
// setMessages([
// ...messages,
// {
// sender,
// text: data,
// parentMessageId: message?.overrideParentMessageId,
// messageId: message?.overrideParentMessageId + '_',
// submitting: true
// }
// ])
// );
// else
// dispatch(
// setMessages([
// ...messages,
// currentMsg,
// {
// sender,
// text: data,
// parentMessageId: currentMsg?.messageId,
// messageId: currentMsg?.messageId + '_',
// submitting: true
// }
// ])
// );
// };
// const cancelHandler = (data, currentState, currentMsg) => {
// const { messages, message, sender, isRegenerate } = currentState;
// if (isRegenerate)
// dispatch(
// setMessages([
// ...messages,
// {
// sender,
// text: data,
// parentMessageId: message?.overrideParentMessageId,
// messageId: message?.overrideParentMessageId + '_',
// cancelled: true
// }
// ])
// );
// else
// dispatch(
// setMessages([
// ...messages,
// currentMsg,
// {
// sender,
// text: data,
// parentMessageId: currentMsg?.messageId,
// messageId: currentMsg?.messageId + '_',
// cancelled: true
// }
// ])
// );
// };
// const createdHandler = (data, currentState, currentMsg) => {
// const { conversationId } = currentMsg;
// dispatch(
// setConversation({
// conversationId,
// latestMessage: null
// })
// );
// };
// const convoHandler = (data, currentState) => {
// const { requestMessage, responseMessage } = data;
// const { messages, message, isCustomModel, isRegenerate } = currentState;
// const { model, chatGptLabel, promptPrefix } = message;
// if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
// else dispatch(setMessages([...messages, requestMessage, responseMessage]));
// dispatch(setSubmitState(false));
// const isBing = model === 'bingai' || model === 'sydney';
// // refresh title
// if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
// setTimeout(() => {
// dispatch(refreshConversation());
// }, 2000);
// // in case it takes too long.
// setTimeout(() => {
// dispatch(refreshConversation());
// }, 5000);
// }
// if (!isBing && convo.conversationId === null && convo.parentMessageId === null) {
// const { title } = data;
// const { conversationId, messageId } = responseMessage;
// dispatch(
// setConversation({
// title,
// conversationId,
// parentMessageId: messageId,
// jailbreakConversationId: null,
// conversationSignature: null,
// clientId: null,
// invocationId: null,
// chatGptLabel: model === isCustomModel ? chatGptLabel : null,
// promptPrefix: model === isCustomModel ? promptPrefix : null,
// latestMessage: null
// })
// );
// } else if (model === 'bingai') {
// console.log('Bing data:', data);
// const { title } = data;
// const { conversationSignature, clientId, conversationId, invocationId, parentMessageId } =
// responseMessage;
// dispatch(
// setConversation({
// title,
// parentMessageId,
// conversationSignature,
// clientId,
// conversationId,
// invocationId,
// latestMessage: null
// })
// );
// } else if (model === 'sydney') {
// const { title } = data;
// const {
// jailbreakConversationId,
// parentMessageId,
// conversationSignature,
// clientId,
// conversationId,
// invocationId
// } = responseMessage;
// dispatch(
// setConversation({
// title,
// jailbreakConversationId,
// parentMessageId,
// conversationSignature,
// clientId,
// conversationId,
// invocationId,
// latestMessage: null
// })
// );
// }
// };
// const errorHandler = (data, currentState, currentMsg) => {
// const { messages, message } = currentState;
// console.log('Error:', data);
// const errorResponse = {
// ...data,
// error: true,
// parentMessageId: currentMsg?.messageId
// };
// dispatch(setSubmitState(false));
// dispatch(setMessages([...messages, currentMsg, errorResponse]));
// dispatch(setText(message?.text));
// dispatch(setError(true));
// return;
// };
const submitMessage = () => { const submitMessage = () => {
ask({ text }); ask({ text });
setText(''); setText('');
}; };
// useEffect(() => {
// inputRef.current?.focus();
// if (Object.keys(submission).length === 0) {
// return;
// }
// const currentState = submission;
// let currentMsg = { ...currentState.message };
// let latestResponseText = '';
// const { server, payload } = createPayload(submission);
// const onMessage = e => {
// if (stopStream) {
// return;
// }
// const data = JSON.parse(e.data);
// if (data.final) {
// convoHandler(data, currentState);
// dispatch(toggleCursor());
// console.log('final', data);
// }
// if (data.created) {
// currentMsg = data.message;
// createdHandler(data, currentState, currentMsg);
// } else {
// let text = data.text || data.response;
// if (data.initial) {
// dispatch(toggleCursor());
// }
// if (data.message) {
// latestResponseText = text;
// messageHandler(text, currentState, currentMsg);
// }
// // console.log('dataStream', data);
// }
// };
// const events = new SSE(server, {
// payload: JSON.stringify(payload),
// headers: { 'Content-Type': 'application/json' }
// });
// events.onopen = function () {
// console.log('connection is opened');
// };
// events.onmessage = onMessage;
// events.oncancel = () => {
// dispatch(toggleCursor(true));
// cancelHandler(latestResponseText, currentState, currentMsg);
// };
// events.onerror = function (e) {
// console.log('error in opening conn.');
// events.close();
// const data = JSON.parse(e.data);
// dispatch(toggleCursor(true));
// errorHandler(data, currentState, currentMsg);
// };
// events.stream();
// return () => {
// events.removeEventListener('message', onMessage);
// dispatch(toggleCursor(true));
// const isCancelled = events.readyState <= 1;
// events.close();
// if (isCancelled) {
// const e = new Event('cancel');
// events.dispatchEvent(e);
// }
// };
// }, [submission]);
const handleRegenerate = () => { const handleRegenerate = () => {
if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage); if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
}; };
@ -389,10 +137,10 @@ export default function TextChat() {
<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} ref={bingStylesRef}
show={showBingToneSetting} show={showBingToneSetting}
/> */} />
{isSubmitting ? ( {isSubmitting ? (
<button <button
onClick={handleStopGenerating} onClick={handleStopGenerating}
@ -441,9 +189,9 @@ export default function TextChat() {
submitMessage={submitMessage} submitMessage={submitMessage}
disabled={disabled || isNotAppendable} disabled={disabled || isNotAppendable}
/> />
{/* {messages?.length && model === 'sydney' ? ( {messages?.length && conversation?.model === 'sydney' ? (
<AdjustToneButton onClick={handleBingToneSetting} /> <AdjustToneButton onClick={handleBingToneSetting} />
) : null} */} ) : null}
</div> </div>
</div> </div>
</form> </form>

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

@ -83,7 +83,7 @@ export default function Message({
if (message.bg && searchResult) { if (message.bg && searchResult) {
props.className = message.bg.split('hover')[0]; props.className = message.bg.split('hover')[0];
props.titleClass = message.bg.split(props.className)[1] + ' cursor-pointer'; props.titleclass = message.bg.split(props.className)[1] + ' cursor-pointer';
} }
const resubmitMessage = () => { const resubmitMessage = () => {
@ -144,7 +144,7 @@ export default function Message({
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]"> <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
{searchResult && ( {searchResult && (
<SubRow <SubRow
classes={props.titleClass + ' rounded'} classes={props.titleclass + ' rounded'}
subclasses="switch-result pl-2 pb-2" subclasses="switch-result pl-2 pb-2"
onClick={clickSearchResult} onClick={clickSearchResult}
> >

4
client/src/store/conversation.js
View file

@ -42,7 +42,9 @@ const messages = atom({
const messagesTree = selector({ const messagesTree = selector({
key: 'messagesTree', key: 'messagesTree',
get: ({ get }) => { get: ({ get }) => {
return buildTree(get(messages)); const _messages = get(messages);
const groupAll = _messages?.[0]?.searchResult;
return buildTree(_messages, groupAll);
} }
}); });