wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: simplify bottom panel layout and improve responsiveness in ChatPanel

Browse Source
This commit is contained in:
mlogclub
2026-04-11 14:14:06 +08:00
parent 945d0d38cf
commit 349de4cd0b
1 changed files with 31 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/(console)/conversations/_components/chat-panel.tsx
+31 -33
View File
@@ -386,24 +386,18 @@ export function ChatPanel() {
); );
const bottomPanel = ( const bottomPanel = (
<div <div className="h-full overflow-auto border-t border-border bg-background">
className={
showMessageEditor
? "h-full overflow-auto border-t border-border bg-background"
: "shrink-0 overflow-auto border-t border-border bg-background"
}
>
{isClosedConversation ? ( {isClosedConversation ? (
<div className="bg-amber-500/10 px-4 py-3 text-sm text-amber-950 dark:bg-amber-500/15 dark:text-amber-100"> <div className="bg-amber-500/10 px-4 py-3 text-sm text-amber-950 dark:bg-amber-500/15 dark:text-amber-100 h-full flex justify-center items-center">
当前会话已关闭 当前会话已关闭
</div> </div>
) : conversation?.status === 1 ? ( ) : conversation?.status === 1 ? (
<div className="bg-violet-500/10 px-4 py-3 text-sm text-violet-950 dark:bg-violet-500/15 dark:text-violet-100"> <div className="bg-violet-500/10 px-4 py-3 text-sm text-violet-950 dark:bg-violet-500/15 dark:text-violet-100 h-full flex justify-center items-center">
当前会话由 AI 接待中，转人工后才能由客服发送消息 当前会话由 AI 接待中，转人工后才能由客服发送消息
</div> </div>
) : isPendingConversation ? ( ) : isPendingConversation ? (
<div className="bg-blue-500/10 px-4 py-3 dark:bg-blue-500/15"> <div className="bg-blue-500/10 px-4 py-3 dark:bg-blue-500/15 h-full">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 h-full">
<Button <Button
onClick={() => setClaimDialogOpen(true)} onClick={() => setClaimDialogOpen(true)}
disabled={claiming} disabled={claiming}
@@ -444,31 +438,35 @@ export function ChatPanel() {
return ( return (
<div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden"> <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
{showMessageEditor ? ( {isLgUp ? (
isLgUp ? ( <ResizablePanelGroup
<ResizablePanelGroup orientation="vertical"
orientation="vertical" className="flex min-h-0 flex-1 flex-col"
className="flex min-h-0 flex-1 flex-col" >
<ResizablePanel
defaultSize={showMessageEditor ? "72%" : "82%"}
minSize="35%"
className="min-h-0"
> >
<ResizablePanel defaultSize="72%" minSize="35%" className="min-h-0"> {messagesScroll}
{messagesScroll} </ResizablePanel>
</ResizablePanel> <ResizableHandle withHandle />
<ResizableHandle withHandle /> <ResizablePanel
<ResizablePanel defaultSize="28%" minSize="18%" maxSize="55%" className="min-h-0"> defaultSize={showMessageEditor ? "28%" : "18%"}
{bottomPanel} minSize={showMessageEditor ? "18%" : "12%"}
</ResizablePanel> maxSize={showMessageEditor ? "55%" : "30%"}
</ResizablePanelGroup> className="min-h-0"
) : ( >
<div className="flex min-h-0 flex-1 flex-col overflow-hidden"> {bottomPanel}
<div className="min-h-0 flex-1">{messagesScroll}</div> </ResizablePanel>
<div className="shrink-0 pb-[env(safe-area-inset-bottom)]">{bottomPanel}</div> </ResizablePanelGroup>
</div>
)
) : ( ) : (
<> <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
<div className="min-h-0 flex-1">{messagesScroll}</div> <div className="min-h-0 flex-1">{messagesScroll}</div>
<div className="shrink-0 pb-[env(safe-area-inset-bottom)] lg:pb-0">{bottomPanel}</div> <div className="shrink-0 pb-[env(safe-area-inset-bottom)] lg:pb-0">
</> {bottomPanel}
</div>
</div>
)} )}
<Dialog <Dialog
open={claimDialogOpen} open={claimDialogOpen}