feat: chat panel header absolute
This commit is contained in:
parent
37cc87531c
commit
4a5465f884
|
@ -17,7 +17,7 @@ export interface MenuWrapperInspectProps {
|
||||||
showPanel?: boolean;
|
showPanel?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function MenuWrapper<
|
export default function MenuLayout<
|
||||||
ListComponentProps extends MenuWrapperInspectProps,
|
ListComponentProps extends MenuWrapperInspectProps,
|
||||||
PanelComponentProps extends MenuWrapperInspectProps,
|
PanelComponentProps extends MenuWrapperInspectProps,
|
||||||
>(
|
>(
|
|
@ -44,7 +44,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<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}`}
|
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
|
data-tauri-drag-region
|
||||||
>
|
>
|
||||||
{isMobileScreen ? (
|
{isMobileScreen ? (
|
||||||
|
|
|
@ -141,7 +141,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<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}
|
ref={scrollRef}
|
||||||
onScroll={(e) => onChatBodyScroll(e.currentTarget)}
|
onScroll={(e) => onChatBodyScroll(e.currentTarget)}
|
||||||
onMouseDown={() => inputRef.current?.blur()}
|
onMouseDown={() => inputRef.current?.blur()}
|
||||||
|
|
|
@ -263,7 +263,7 @@ function _Chat() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`flex flex-col ${
|
className={`relative flex flex-col ${
|
||||||
isMobileScreen
|
isMobileScreen
|
||||||
? "absolute h-[100vh] w-[100%]"
|
? "absolute h-[100vh] w-[100%]"
|
||||||
: "h-[calc(100%-1.25rem)]"
|
: "h-[calc(100%-1.25rem)]"
|
||||||
|
|
|
@ -22,9 +22,9 @@ import { getTime } from "@/app/utils";
|
||||||
import DeleteIcon from "@/app/icons/deleteIcon.svg";
|
import DeleteIcon from "@/app/icons/deleteIcon.svg";
|
||||||
import LogIcon from "@/app/icons/logIcon.svg";
|
import LogIcon from "@/app/icons/logIcon.svg";
|
||||||
|
|
||||||
import MenuWrapper, {
|
import MenuLayout, {
|
||||||
MenuWrapperInspectProps,
|
MenuWrapperInspectProps,
|
||||||
} from "@/app/components/MenuWrapper";
|
} from "@/app/components/MenuLayout";
|
||||||
import Panel from "./ChatPanel";
|
import Panel from "./ChatPanel";
|
||||||
|
|
||||||
export function SessionItem(props: {
|
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 { setShowPanel } = props;
|
||||||
|
|
||||||
const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
|
const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
|
||||||
|
|
|
@ -72,7 +72,7 @@ import { useMaskStore } from "@/app/store/mask";
|
||||||
import { ProviderType } from "@/app/utils/cloud";
|
import { ProviderType } from "@/app/utils/cloud";
|
||||||
import SettingHeader from "./SettingHeader";
|
import SettingHeader from "./SettingHeader";
|
||||||
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
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 }) {
|
function EditPromptModal(props: { id: string; onClose: () => void }) {
|
||||||
const promptStore = usePromptStore();
|
const promptStore = usePromptStore();
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import Locale from "@/app/locales";
|
import Locale from "@/app/locales";
|
||||||
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
||||||
import MenuWrapper from "@/app/components/MenuWrapper";
|
import MenuLayout from "@/app/components/MenuLayout";
|
||||||
|
|
||||||
import Panel from "./SettingPanel";
|
import Panel from "./SettingPanel";
|
||||||
|
|
||||||
import GotoIcon from "@/app/icons/goto.svg";
|
import GotoIcon from "@/app/icons/goto.svg";
|
||||||
|
|
||||||
export default MenuWrapper(function SettingList(props) {
|
export default MenuLayout(function SettingList(props) {
|
||||||
const { setShowPanel } = props;
|
const { setShowPanel } = props;
|
||||||
const isMobileScreen = useMobileScreen();
|
const isMobileScreen = useMobileScreen();
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue