feat: chat panel redesigned ui

app/containers/Chat/ChatHeader.tsx

@@ -1,75 +1,88 @@
 import { useNavigate } from "react-router-dom";
-import { IconButton } from "@/app/components/button";
 import Locale from "@/app/locales";
 import { Path } from "@/app/constant";
 import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat";
 
-import RenameIcon from "@/app/icons/rename.svg";
-import ExportIcon from "@/app/icons/share.svg";
-import ReturnIcon from "@/app/icons/return.svg";
-
-import styles from "./index.module.scss";
+import LogIcon from "@/app/icons/logIcon.svg";
+import GobackIcon from "@/app/icons/goback.svg";
+import ShareIcon from "@/app/icons/shareIcon.svg";
+import BottomArrow from "@/app/icons/bottomArrow.svg";
 
 export interface ChatHeaderProps {
   isMobileScreen: boolean;
   setIsEditingMessage: (v: boolean) => void;
   setShowExport: (v: boolean) => void;
+  showModelSelector: (v: boolean) => void;
 }
 
 export default function ChatHeader(props: ChatHeaderProps) {
-  const { isMobileScreen, setIsEditingMessage, setShowExport } = props;
+  const {
+    isMobileScreen,
+    setIsEditingMessage,
+    setShowExport,
+    showModelSelector,
+  } = props;
 
   const navigate = useNavigate();
 
   const chatStore = useChatStore();
   const session = chatStore.currentSession();
 
+  const currentModel = chatStore.currentSession().mask.modelConfig.model;
+
+  let containerClassName = "";
+  let titleClassName = "mr-4";
+  let mainTitleClassName = "";
+  let subTitleClassName = "";
+
+  if (isMobileScreen) {
+    containerClassName = "h-menu-title-mobile";
+    titleClassName = "flex flex-col items-center justify-center gap-0.5 text";
+    mainTitleClassName = "text-sm-title h-[19px] leading-5";
+    subTitleClassName = "text-sm-mobile-tab leading-4";
+  }
+
   return (
-    <div className="window-header" data-tauri-drag-region>
-      {isMobileScreen && (
-        <div className="window-actions">
-          <div className={"window-action-button"}>
-            <IconButton
-              icon={<ReturnIcon />}
-              bordered
-              title={Locale.Chat.Actions.ChatList}
-              onClick={() => navigate(Path.Home)}
-            />
-          </div>
+    <div
+      className={`flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b-[1px] border-gray-200 ${containerClassName}`}
+      data-tauri-drag-region
+    >
+      {isMobileScreen ? (
+        <div onClick={() => navigate(Path.Home)}>
+          <GobackIcon />
         </div>
+      ) : (
+        <LogIcon />
       )}
 
-      <div className={`window-header-title ${styles["chat-body-title"]}`}>
+      <div className={`flex-1 ${titleClassName}`}>
         <div
-          className={`window-header-main-title ${styles["chat-body-main-title"]}`}
+          className={`line-clamp-1 cursor-pointer text-black text-chat-header-title font-common ${mainTitleClassName}`}
           onClickCapture={() => setIsEditingMessage(true)}
         >
           {!session.topic ? DEFAULT_TOPIC : session.topic}
         </div>
-        <div className="window-header-sub-title">
-          {Locale.Chat.SubTitle(session.messages.length)}
+        <div className={`text-gray-500 text-sm ${subTitleClassName}`}>
+          {isMobileScreen ? (
+            <div
+              className="flex items-center gap-1"
+              onClick={() => showModelSelector(true)}
+            >
+              {currentModel}
+              <BottomArrow />
+            </div>
+          ) : (
+            Locale.Chat.SubTitle(session.messages.length)
+          )}
         </div>
       </div>
-      <div className="window-actions">
-        {!isMobileScreen && (
-          <div className="window-action-button">
-            <IconButton
-              icon={<RenameIcon />}
-              bordered
-              onClick={() => setIsEditingMessage(true)}
-            />
-          </div>
-        )}
-        <div className="window-action-button">
-          <IconButton
-            icon={<ExportIcon />}
-            bordered
-            title={Locale.Chat.Actions.Export}
-            onClick={() => {
-              setShowExport(true);
-            }}
-          />
-        </div>
+
+      <div
+        onClick={() => {
+          setShowExport(true);
+        }}
+      >
+        <ShareIcon />
       </div>
     </div>
   );