feat: show toneStyle in conversation title bar

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

View file

@ -20,7 +20,7 @@ export default function Messages({ isSearchView = false }) {
const _messagesTree = isSearchView ? searchResultMessagesTree : messagesTree;
const conversation = useRecoilValue(store.conversation) || {};
const { conversationId, model, chatGptLabel } = conversation;
const { conversationId, model, chatGptLabel, toneStyle } = conversation;
const models = useRecoilValue(store.models) || [];
const modelName = models.find(element => element.model == model)?.name;
@ -79,18 +79,26 @@ export default function Messages({ isSearchView = false }) {
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 (
<div
className="flex-1 overflow-y-auto pt-10 md:pt-0"
className="flex-1 overflow-y-auto pt-0"
ref={scrollableRef}
onScroll={debouncedHandleScroll}
>
<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="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
? `Search: ${searchQuery}`
: `Model: ${modelName} ${chatGptLabel ? `(${chatGptLabel})` : ''}`}
{getConversationTitle()}
</div>
{_messagesTree === null ? (
<Spinner />

View file

@ -30,9 +30,9 @@ export default function Landing() {
};
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">
<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
</h1>
<div className="items-start gap-3.5 text-center md:flex">