From 36c126e7a568256dd254aed909f6c42f966bce64 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Thu, 30 Mar 2023 18:18:06 +0800
Subject: [PATCH] feat: show toneStyle in conversation title bar

---
 client/src/components/Messages/index.jsx | 18 +++++++++++++-----
 client/src/components/ui/Landing.jsx     |  4 ++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index ae11d090ad..b112fff57e 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -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 />
diff --git a/client/src/components/ui/Landing.jsx b/client/src/components/ui/Landing.jsx
index 617e6903f1..f2400f72b5 100644
--- a/client/src/components/ui/Landing.jsx
+++ b/client/src/components/ui/Landing.jsx
@@ -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">