feat: chat panel header absolute

This commit is contained in:
butterfly 2024-04-22 11:02:25 +08:00
parent 37cc87531c
commit 4a5465f884
7 changed files with 10 additions and 10 deletions

View File

@ -17,7 +17,7 @@ export interface MenuWrapperInspectProps {
showPanel?: boolean;
}
export default function MenuWrapper<
export default function MenuLayout<
ListComponentProps extends MenuWrapperInspectProps,
PanelComponentProps extends MenuWrapperInspectProps,
>(

View File

@ -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 ? (

View File

@ -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()}

View File

@ -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)]"

View File

@ -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(

View File

@ -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();

View File

@ -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();