github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2026-03-22 13:47:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): conversation main (#10985)

Browse Source
This commit is contained in:
Hiep Le
2025-09-18 20:23:13 +07:00
committed by GitHub
parent faeec48365
commit b393d52439
6 changed files with 102 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/components/features/conversation/conversation-main.tsx
View File

@@ -1,86 +0,0 @@
import { useSelector } from "react-redux";
import { useWindowSize } from "@uidotdev/usehooks";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import { ChatInterface } from "../chat/chat-interface";
import { ConversationTabContent } from "./conversation-tabs/conversation-tab-content/conversation-tab-content";
import { cn } from "#/utils/utils";
import { RootState } from "#/store";
interface ChatInterfaceWrapperProps {
isRightPanelShown: boolean;
}
export function ChatInterfaceWrapper({
isRightPanelShown,
}: ChatInterfaceWrapperProps) {
if (!isRightPanelShown) {
return (
<div className="flex justify-center w-full h-full">
<div className="w-full max-w-[768px]">
<ChatInterface />
</div>
</div>
);
}
return <ChatInterface />;
}
export function ConversationMain() {
const { width } = useWindowSize();
const isRightPanelShown = useSelector(
(state: RootState) => state.conversation.isRightPanelShown,
);
if (width && width <= 1024) {
return (
<div className="flex flex-col gap-3 overflow-auto w-full">
<div
className={cn(
"overflow-hidden w-full bg-base min-h-[600px]",
!isRightPanelShown && "h-full",
)}
>
<ChatInterface />
</div>
{isRightPanelShown && (
<div className="h-full w-full min-h-[494px] flex flex-col gap-3">
<ConversationTabContent />
</div>
)}
</div>
);
}
if (isRightPanelShown) {
return (
<PanelGroup
direction="horizontal"
className="grow h-full min-h-0 min-w-0"
autoSaveId="react-resizable-panels:layout"
>
<Panel minSize={30} maxSize={80} className="overflow-hidden bg-base">
<ChatInterfaceWrapper isRightPanelShown={isRightPanelShown} />
</Panel>
<PanelResizeHandle className="cursor-ew-resize" />
<Panel
minSize={20}
maxSize={70}
className="flex flex-col overflow-hidden"
>
<div className="flex flex-col flex-1 gap-3">
<ConversationTabContent />
</div>
</Panel>
</PanelGroup>
);
}
return (
<div className="flex flex-col gap-3 overflow-auto w-full h-full">
<div className="overflow-hidden w-full h-full bg-base">
<ChatInterfaceWrapper isRightPanelShown={isRightPanelShown} />
</div>
</div>
);
}

21
frontend/src/components/features/conversation/conversation-main/chat-interface-wrapper.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { ChatInterface } from "../../chat/chat-interface";
interface ChatInterfaceWrapperProps {
isRightPanelShown: boolean;
}
export function ChatInterfaceWrapper({
isRightPanelShown,
}: ChatInterfaceWrapperProps) {
if (!isRightPanelShown) {
return (
<div className="flex justify-center w-full h-full">
<div className="w-full max-w-[768px]">
<ChatInterface />
</div>
</div>
);
}
return <ChatInterface />;
}

18
frontend/src/components/features/conversation/conversation-main/conversation-main.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { useSelector } from "react-redux";
import { useWindowSize } from "@uidotdev/usehooks";
import { RootState } from "#/store";
import { MobileLayout } from "./mobile-layout";
import { DesktopLayout } from "./desktop-layout";
export function ConversationMain() {
const { width } = useWindowSize();
const isRightPanelShown = useSelector(
(state: RootState) => state.conversation.isRightPanelShown,
);
if (width && width <= 1024) {
return <MobileLayout isRightPanelShown={isRightPanelShown} />;
}
return <DesktopLayout isRightPanelShown={isRightPanelShown} />;
}

35
frontend/src/components/features/conversation/conversation-main/desktop-layout.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import { ChatInterfaceWrapper } from "./chat-interface-wrapper";
import { ConversationTabContent } from "../conversation-tabs/conversation-tab-content/conversation-tab-content";
interface DesktopLayoutProps {
isRightPanelShown: boolean;
}
export function DesktopLayout({ isRightPanelShown }: DesktopLayoutProps) {
return (
<PanelGroup
direction="horizontal"
className="grow h-full min-h-0 min-w-0"
autoSaveId="react-resizable-panels:layout"
>
<Panel minSize={30} maxSize={80} className="overflow-hidden bg-base">
<ChatInterfaceWrapper isRightPanelShown={isRightPanelShown} />
</Panel>
{isRightPanelShown && (
<>
<PanelResizeHandle className="cursor-ew-resize" />
<Panel
minSize={20}
maxSize={70}
className="flex flex-col overflow-hidden"
>
<div className="flex flex-col flex-1 gap-3">
<ConversationTabContent />
</div>
</Panel>
</>
)}
</PanelGroup>
);
}

27
frontend/src/components/features/conversation/conversation-main/mobile-layout.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { ChatInterface } from "../../chat/chat-interface";
import { ConversationTabContent } from "../conversation-tabs/conversation-tab-content/conversation-tab-content";
import { cn } from "#/utils/utils";
interface MobileLayoutProps {
isRightPanelShown: boolean;
}
export function MobileLayout({ isRightPanelShown }: MobileLayoutProps) {
return (
<div className="flex flex-col gap-3 overflow-auto w-full">
<div
className={cn(
"overflow-hidden w-full bg-base min-h-[600px]",
!isRightPanelShown && "h-full",
)}
>
<ChatInterface />
</div>
{isRightPanelShown && (
<div className="h-full w-full min-h-[494px] flex flex-col gap-3">
<ConversationTabContent />
</div>
)}
</div>
);
}

2
frontend/src/routes/conversation.tsx
View File

@@ -24,7 +24,7 @@ import { useIsAuthed } from "#/hooks/query/use-is-authed";
import { ConversationSubscriptionsProvider } from "#/context/conversation-subscriptions-provider";
import { useUserProviders } from "#/hooks/use-user-providers";
import { ConversationMain } from "#/components/features/conversation/conversation-main";
import { ConversationMain } from "#/components/features/conversation/conversation-main/conversation-main";
import { ConversationName } from "#/components/features/conversation/conversation-name";
import { ConversationTabs } from "#/components/features/conversation/conversation-tabs/conversation-tabs";