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

feat: show toneStyle in conversation title bar

Browse source
This commit is contained in:
Wentao Lyu 2023-03-30 18:18:06 +08:00
parent 9b04ffabca
commit 36c126e7a5
2 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/Messages/index.jsx
View file

@ -20,7 +20,7 @@ export default function Messages({ isSearchView = false }) {
const _messagesTree = isSearchView ? searchResultMessagesTree : messagesTree; const _messagesTree = isSearchView ? searchResultMessagesTree : messagesTree;
const conversation = useRecoilValue(store.conversation) || {}; const conversation = useRecoilValue(store.conversation) || {};
const { conversationId, model, chatGptLabel } = conversation; const { conversationId, model, chatGptLabel, toneStyle } = conversation;
const models = useRecoilValue(store.models) || []; const models = useRecoilValue(store.models) || [];
const modelName = models.find(element => element.model == model)?.name; const modelName = models.find(element => element.model == model)?.name;
@ -79,18 +79,26 @@ export default function Messages({ isSearchView = false }) {
scrollToBottom(); scrollToBottom();
}; };
const getConversationTitle = () => {
if (isSearchView) return `Search: ${searchQuery}`;
else {
let _title = `Model: ${modelName}`;
if (chatGptLabel) _title += ` of ${chatGptLabel}`;
if (toneStyle) _title += ` (${toneStyle})`;
return _title;
}
};
return ( return (
<div <div
className="flex-1 overflow-y-auto pt-10 md:pt-0" className="flex-1 overflow-y-auto pt-0"
ref={scrollableRef} ref={scrollableRef}
onScroll={debouncedHandleScroll} onScroll={debouncedHandleScroll}
> >
<div className="dark:gpt-dark-gray h-full"> <div className="dark:gpt-dark-gray h-full">
<div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm"> <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
<div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300"> <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300">
{isSearchView {getConversationTitle()}
? `Search: ${searchQuery}`
: `Model: ${modelName} ${chatGptLabel ? `(${chatGptLabel})` : ''}`}
</div> </div>
{_messagesTree === null ? ( {_messagesTree === null ? (
<Spinner /> <Spinner />

4
client/src/components/ui/Landing.jsx
View file

@ -30,9 +30,9 @@ export default function Landing() {
}; };
return ( return (
<div className="flex h-full flex-col items-center overflow-y-auto pt-10 text-sm dark:bg-gray-800 md:pt-0"> <div className="flex h-full flex-col items-center overflow-y-auto pt-0 text-sm dark:bg-gray-800">
<div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl"> <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
<h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mb-16 md:mt-[20vh]"> <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mb-16 md:mt-[10vh]">
ChatGPT Clone ChatGPT Clone
</h1> </h1>
<div className="items-start gap-3.5 text-center md:flex"> <div className="items-start gap-3.5 text-center md:flex">