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

feat: complete frontend/backend tone handling

Browse source
This commit is contained in:
Danny Avila 2023-03-24 16:21:10 -04:00
parent 83b88bd759
commit 89ab74a913
8 changed files with 105 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

4
api/app/clients/sydney.js
View file

@ -22,6 +22,10 @@ const askSydney = async ({ text, onProgress, convo }) => {
options = { ...options, jailbreakConversationId: convo.jailbreakConversationId, parentMessageId: convo.parentMessageId }; options = { ...options, jailbreakConversationId: convo.jailbreakConversationId, parentMessageId: convo.parentMessageId };
} }
if (convo.toneStyle) {
options.toneStyle = convo.toneStyle;
}
console.log('sydney options', options); console.log('sydney options', options);
const res = await sydneyClient.sendMessage(text, options const res = await sydneyClient.sendMessage(text, options

4
api/models/schema/convoSchema.js
View file

@ -32,6 +32,10 @@ const convoSchema = mongoose.Schema(
invocationId: { invocationId: {
type: String type: String
}, },
toneStyle: {
type: String,
default: null
},
chatGptLabel: { chatGptLabel: {
type: String, type: String,
default: null default: null

13
client/src/components/Conversations/Conversation.jsx
View file

@ -23,7 +23,6 @@ export default function Conversation({
}) { }) {
const [renaming, setRenaming] = useState(false); const [renaming, setRenaming] = useState(false);
const [titleInput, setTitleInput] = useState(title); const [titleInput, setTitleInput] = useState(title);
const { modelMap } = useSelector((state) => state.models);
const { stopStream } = useSelector((state) => state.submit); const { stopStream } = useSelector((state) => state.submit);
const inputRef = useRef(null); const inputRef = useRef(null);
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -49,7 +48,8 @@ export default function Conversation({
conversationSignature, conversationSignature,
jailbreakConversationId, jailbreakConversationId,
clientId, clientId,
invocationId invocationId,
toneStyle,
} = bingData; } = bingData;
dispatch( dispatch(
setConversation({ setConversation({
@ -59,6 +59,7 @@ export default function Conversation({
conversationSignature, conversationSignature,
clientId, clientId,
invocationId, invocationId,
toneStyle,
latestMessage: null latestMessage: null
}) })
); );
@ -71,6 +72,7 @@ export default function Conversation({
conversationSignature: null, conversationSignature: null,
clientId: null, clientId: null,
invocationId: null, invocationId: null,
toneStyle: null,
latestMessage: null latestMessage: null
}) })
); );
@ -85,13 +87,6 @@ export default function Conversation({
dispatch(setCustomModel(null)); dispatch(setCustomModel(null));
} }
// if (modelMap[chatGptLabel.toLowerCase()]) {
// console.log('custom model', chatGptLabel);
// dispatch(setCustomModel(chatGptLabel.toLowerCase()));
// } else {
// dispatch(setCustomModel(null));
// }
dispatch(setMessages(data)); dispatch(setMessages(data));
dispatch(setCustomGpt(convo)); dispatch(setCustomGpt(convo));
dispatch(setText('')); dispatch(setText(''));

3
client/src/components/Conversations/index.jsx
View file

@ -14,7 +14,8 @@ export default function Conversations({ conversations, conversationId, moveToTop
conversationSignature: convo.conversationSignature, conversationSignature: convo.conversationSignature,
parentMessageId: convo.parentMessageId || null, parentMessageId: convo.parentMessageId || null,
clientId: convo.clientId, clientId: convo.clientId,
invocationId: convo.invocationId invocationId: convo.invocationId,
toneStyle: convo.toneStyle,
} }
: null; : null;

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

@ -1,14 +1,23 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
// import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/Tabs";
import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx'; import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx';
import { useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
// import RowButton from './RowButton'; import { setConversation } from '~/store/convoSlice';
export default function BingStyles() { export default function BingStyles() {
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 { messages } = useSelector((state) => state.messages);
const isBing = model === 'bingai' || model === 'sydney';
const show = model === 'bingai' || model === 'sydney'; useEffect(() => {
if (isBing && !conversationId) {
dispatch(setConversation({ toneStyle: value }));
}
}, [isBing, conversationId, model, value, dispatch]);
const show = isBing && (!conversationId || messages?.length === 0);
const defaultClasses = 'p-2 rounded-md font-normal bg-white/[.60] text-black'; const defaultClasses = 'p-2 rounded-md font-normal bg-white/[.60] text-black';
const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white'; const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white';
@ -16,9 +25,9 @@ export default function BingStyles() {
const changeHandler = value => { const changeHandler = value => {
setValue(value); setValue(value);
dispatch(setConversation({ toneStyle: value }));
}; };
return ( return (
// <div className='styles-container w-full'>
<Tabs <Tabs
defaultValue={value} defaultValue={value}
className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`} className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`}
@ -29,7 +38,6 @@ export default function BingStyles() {
value="creative" value="creative"
className={`${value === 'creative' ? selectedClass(value) : defaultClasses}`} className={`${value === 'creative' ? selectedClass(value) : defaultClasses}`}
> >
{/* <RowButton text="creative" /> */}
{'Creative'} {'Creative'}
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
@ -46,6 +54,5 @@ export default function BingStyles() {
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</Tabs> </Tabs>
// </div>
); );
} }

2
client/src/store/convoSlice.js
View file

@ -9,6 +9,7 @@ const initialState = {
conversationSignature: null, conversationSignature: null,
clientId: null, clientId: null,
invocationId: null, invocationId: null,
toneStyle: null,
chatGptLabel: null, chatGptLabel: null,
promptPrefix: null, promptPrefix: null,
convosLoading: false, convosLoading: false,
@ -58,6 +59,7 @@ const currentSlice = createSlice({
state.conversationSignature = null; state.conversationSignature = null;
state.clientId = null; state.clientId = null;
state.invocationId = null; state.invocationId = null;
state.toneStyle = null;
state.chatGptLabel = null; state.chatGptLabel = null;
state.promptPrefix = null; state.promptPrefix = null;
state.convosLoading = false; state.convosLoading = false;

9
client/src/utils/createPayload.js
View file

@ -13,6 +13,10 @@ export default function createPayload({ convo, message }) {
} }
const isBing = model === 'bingai' || model === 'sydney'; const isBing = model === 'bingai' || model === 'sydney';
if (isBing && !convo?.conversationId) {
payload.toneStyle = convo.toneStyle || 'fast';
}
if (isBing && convo?.conversationId) { if (isBing && convo?.conversationId) {
payload = { payload = {
...payload, ...payload,
@ -20,7 +24,8 @@ export default function createPayload({ convo, message }) {
conversationId: convo.conversationId, conversationId: convo.conversationId,
conversationSignature: convo.conversationSignature, conversationSignature: convo.conversationSignature,
clientId: convo.clientId, clientId: convo.clientId,
invocationId: convo.invocationId invocationId: convo.invocationId,
toneStyle: convo.toneStyle,
}; };
} }
@ -28,4 +33,4 @@ export default function createPayload({ convo, message }) {
server = model === 'bingai' ? server + '/bing' : server; server = model === 'bingai' ? server + '/bing' : server;
server = model === 'sydney' ? server + '/sydney' : server; server = model === 'sydney' ? server + '/sydney' : server;
return { server, payload }; return { server, payload };
}; }

135
client/src/utils/handleSubmit.js
View file

@ -1,4 +1,3 @@
import { SSE } from './sse';
import resetConvo from './resetConvo'; import resetConvo from './resetConvo';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { setNewConvo } from '~/store/convoSlice'; import { setNewConvo } from '~/store/convoSlice';
@ -14,7 +13,6 @@ const useMessageHandler = () => {
const { initial } = useSelector((state) => state.models); const { initial } = useSelector((state) => state.models);
const { messages } = useSelector((state) => state.messages); const { messages } = useSelector((state) => state.messages);
const { model, chatGptLabel, promptPrefix, isSubmitting } = useSelector((state) => state.submit); const { model, chatGptLabel, promptPrefix, isSubmitting } = useSelector((state) => state.submit);
const { text } = useSelector((state) => state.text);
const { latestMessage, error } = convo; const { latestMessage, error } = convo;
const ask = ({ text, parentMessageId=null, conversationId=null, messageId=null}, { isRegenerate=false }={}) => { const ask = ({ text, parentMessageId=null, conversationId=null, messageId=null}, { isRegenerate=false }={}) => {
@ -76,7 +74,7 @@ const useMessageHandler = () => {
if (parentMessage && parentMessage.isCreatedByUser) if (parentMessage && parentMessage.isCreatedByUser)
ask({ ...parentMessage }, { isRegenerate: true }) ask({ ...parentMessage }, { isRegenerate: true })
else else
console.error('Failed to regenerate the message: parentMessage not found or not created by user.', message); console.error('Failed to regenerate the message: parentMessage not found or not created by user.');
} }
const stopGenerating = () => { const stopGenerating = () => {
@ -88,78 +86,79 @@ const useMessageHandler = () => {
export { useMessageHandler }; export { useMessageHandler };
export default function handleSubmit({ // deprecated
model, // export default function handleSubmit({
text, // model,
convo, // text,
messageHandler, // convo,
convoHandler, // messageHandler,
errorHandler, // convoHandler,
chatGptLabel, // errorHandler,
promptPrefix // chatGptLabel,
}) { // promptPrefix
const endpoint = `/api/ask`; // }) {
let payload = { model, text, chatGptLabel, promptPrefix }; // const endpoint = `/api/ask`;
if (convo.conversationId && convo.parentMessageId) { // let payload = { model, text, chatGptLabel, promptPrefix };
payload = { // if (convo.conversationId && convo.parentMessageId) {
...payload, // payload = {
conversationId: convo.conversationId, // ...payload,
parentMessageId: convo.parentMessageId // conversationId: convo.conversationId,
}; // parentMessageId: convo.parentMessageId
} // };
// }
const isBing = model === 'bingai' || model === 'sydney'; // const isBing = model === 'bingai' || model === 'sydney';
if (isBing && convo.conversationId) { // if (isBing && convo.conversationId) {
payload = { // payload = {
...payload, // ...payload,
jailbreakConversationId: convo.jailbreakConversationId, // jailbreakConversationId: convo.jailbreakConversationId,
conversationId: convo.conversationId, // conversationId: convo.conversationId,
conversationSignature: convo.conversationSignature, // conversationSignature: convo.conversationSignature,
clientId: convo.clientId, // clientId: convo.clientId,
invocationId: convo.invocationId, // invocationId: convo.invocationId,
}; // };
} // }
let server = endpoint; // let server = endpoint;
server = model === 'bingai' ? server + '/bing' : server; // server = model === 'bingai' ? server + '/bing' : server;
server = model === 'sydney' ? server + '/sydney' : server; // server = model === 'sydney' ? server + '/sydney' : server;
const events = new SSE(server, { // const events = new SSE(server, {
payload: JSON.stringify(payload), // payload: JSON.stringify(payload),
headers: { 'Content-Type': 'application/json' } // headers: { 'Content-Type': 'application/json' }
}); // });
events.onopen = function () { // events.onopen = function () {
console.log('connection is opened'); // console.log('connection is opened');
}; // };
events.onmessage = function (e) { // events.onmessage = function (e) {
const data = JSON.parse(e.data); // const data = JSON.parse(e.data);
let text = data.text || data.response; // let text = data.text || data.response;
if (data.message) { // if (data.message) {
messageHandler(text, events); // messageHandler(text, events);
} // }
if (data.final) { // if (data.final) {
convoHandler(data); // convoHandler(data);
console.log('final', data); // console.log('final', data);
} else { // } else {
// console.log('dataStream', data); // // console.log('dataStream', data);
} // }
}; // };
events.onerror = function (e) { // events.onerror = function (e) {
console.log('error in opening conn.'); // console.log('error in opening conn.');
events.close(); // events.close();
errorHandler(e); // errorHandler(e);
}; // };
events.addEventListener('stop', () => { // events.addEventListener('stop', () => {
// Close the SSE stream // // Close the SSE stream
console.log('stop event received'); // console.log('stop event received');
events.close(); // events.close();
}); // });
events.stream(); // events.stream();
} // }