From 4a5465f8840639987bfae52babfe0596bd4b8254 Mon Sep 17 00:00:00 2001
From: butterfly <butterfly@bogon.com>
Date: Mon, 22 Apr 2024 11:02:25 +0800
Subject: [PATCH] feat: chat panel header absolute

---
 app/components/{MenuWrapper => MenuLayout}/index.tsx | 2 +-
 app/containers/Chat/ChatHeader.tsx                   | 2 +-
 app/containers/Chat/ChatMessagePanel.tsx             | 2 +-
 app/containers/Chat/ChatPanel.tsx                    | 2 +-
 app/containers/Chat/index.tsx                        | 6 +++---
 app/containers/Settings/SettingPanel.tsx             | 2 +-
 app/containers/Settings/index.tsx                    | 4 ++--
 7 files changed, 10 insertions(+), 10 deletions(-)
 rename app/components/{MenuWrapper => MenuLayout}/index.tsx (98%)

diff --git a/app/components/MenuWrapper/index.tsx b/app/components/MenuLayout/index.tsx
similarity index 98%
rename from app/components/MenuWrapper/index.tsx
rename to app/components/MenuLayout/index.tsx
index 79ab3d088..fff0b38f9 100644
--- a/app/components/MenuWrapper/index.tsx
+++ b/app/components/MenuLayout/index.tsx
@@ -17,7 +17,7 @@ export interface MenuWrapperInspectProps {
   showPanel?: boolean;
 }
 
-export default function MenuWrapper<
+export default function MenuLayout<
   ListComponentProps extends MenuWrapperInspectProps,
   PanelComponentProps extends MenuWrapperInspectProps,
 >(
diff --git a/app/containers/Chat/ChatHeader.tsx b/app/containers/Chat/ChatHeader.tsx
index f99152559..412d91226 100644
--- a/app/containers/Chat/ChatHeader.tsx
+++ b/app/containers/Chat/ChatHeader.tsx
@@ -44,7 +44,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
 
   return (
     <div
-      className={`flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b-[1px] border-gray-200 ${containerClassName}`}
+      className={`absolute w-[100%] bg-gray-50 z-10 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 ? (
diff --git a/app/containers/Chat/ChatMessagePanel.tsx b/app/containers/Chat/ChatMessagePanel.tsx
index f8b9d217e..b4eda94a8 100644
--- a/app/containers/Chat/ChatMessagePanel.tsx
+++ b/app/containers/Chat/ChatMessagePanel.tsx
@@ -141,7 +141,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
 
   return (
     <div
-      className={`relative flex-1 overscroll-y-none overflow-y-auto overflow-x-hidden px-3 pb-6`}
+      className={`pt-[80px] relative flex-1 overscroll-y-none overflow-y-auto overflow-x-hidden px-3 pb-6`}
       ref={scrollRef}
       onScroll={(e) => onChatBodyScroll(e.currentTarget)}
       onMouseDown={() => inputRef.current?.blur()}
diff --git a/app/containers/Chat/ChatPanel.tsx b/app/containers/Chat/ChatPanel.tsx
index 50933e63e..b1defa72a 100644
--- a/app/containers/Chat/ChatPanel.tsx
+++ b/app/containers/Chat/ChatPanel.tsx
@@ -263,7 +263,7 @@ function _Chat() {
 
   return (
     <div
-      className={`flex flex-col ${
+      className={`relative flex flex-col ${
         isMobileScreen
           ? "absolute h-[100vh] w-[100%]"
           : "h-[calc(100%-1.25rem)]"
diff --git a/app/containers/Chat/index.tsx b/app/containers/Chat/index.tsx
index b8f756241..b8a3a6ee9 100644
--- a/app/containers/Chat/index.tsx
+++ b/app/containers/Chat/index.tsx
@@ -22,9 +22,9 @@ import { getTime } from "@/app/utils";
 import DeleteIcon from "@/app/icons/deleteIcon.svg";
 import LogIcon from "@/app/icons/logIcon.svg";
 
-import MenuWrapper, {
+import MenuLayout, {
   MenuWrapperInspectProps,
-} from "@/app/components/MenuWrapper";
+} from "@/app/components/MenuLayout";
 import Panel from "./ChatPanel";
 
 export function SessionItem(props: {
@@ -108,7 +108,7 @@ export function SessionItem(props: {
   );
 }
 
-export default MenuWrapper(function SessionList(props) {
+export default MenuLayout(function SessionList(props) {
   const { setShowPanel } = props;
 
   const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
diff --git a/app/containers/Settings/SettingPanel.tsx b/app/containers/Settings/SettingPanel.tsx
index 8e1c19631..895ec265d 100644
--- a/app/containers/Settings/SettingPanel.tsx
+++ b/app/containers/Settings/SettingPanel.tsx
@@ -72,7 +72,7 @@ import { useMaskStore } from "@/app/store/mask";
 import { ProviderType } from "@/app/utils/cloud";
 import SettingHeader from "./SettingHeader";
 import useMobileScreen from "@/app/hooks/useMobileScreen";
-import { MenuWrapperInspectProps } from "@/app/components/MenuWrapper";
+import { MenuWrapperInspectProps } from "@/app/components/MenuLayout";
 
 function EditPromptModal(props: { id: string; onClose: () => void }) {
   const promptStore = usePromptStore();
diff --git a/app/containers/Settings/index.tsx b/app/containers/Settings/index.tsx
index e80789a47..9914a6e76 100644
--- a/app/containers/Settings/index.tsx
+++ b/app/containers/Settings/index.tsx
@@ -1,12 +1,12 @@
 import Locale from "@/app/locales";
 import useMobileScreen from "@/app/hooks/useMobileScreen";
-import MenuWrapper from "@/app/components/MenuWrapper";
+import MenuLayout from "@/app/components/MenuLayout";
 
 import Panel from "./SettingPanel";
 
 import GotoIcon from "@/app/icons/goto.svg";
 
-export default MenuWrapper(function SettingList(props) {
+export default MenuLayout(function SettingList(props) {
   const { setShowPanel } = props;
   const isMobileScreen = useMobileScreen();