hailin
/
iconsulting
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(web): integrate menu toggle into ChatWindow header, remove duplicate headers

This commit is contained in:
hailin 2026-01-09 22:09:52 -08:00
parent 4718d60bff
commit f8fcf7c74b
2 changed files with 13 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/web-client/src/features/chat/presentation/components/ChatWindow.tsx
View File

@ -4,11 +4,11 @@ import { InputArea } from './InputArea';
import { TypingIndicator } from './TypingIndicator';
import { useChatStore } from '../stores/chatStore';
import { useChat } from '../hooks/useChat';
import { MessageSquare } from 'lucide-react';
import { MessageSquare, Menu } from 'lucide-react';
export function ChatWindow() {
const messagesEndRef = useRef<HTMLDivElement>(null);
const { messages, currentConversationId, isStreaming, streamContent } = useChatStore();
const { messages, currentConversationId, isStreaming, streamContent, sidebarOpen, toggleSidebar } = useChatStore();
const { sendMessage } = useChat();
// Auto-scroll to bottom
@ -23,8 +23,17 @@ export function ChatWindow() {
return (
<div className="flex flex-col h-full">
{/* Header */}
<header className="flex items-center justify-between px-6 py-4 border-b border-secondary-200 bg-white">
<header className="flex items-center justify-between px-4 py-4 border-b border-secondary-200 bg-white">
<div className="flex items-center gap-3">
{/* Menu toggle button - shown when sidebar is closed */}
{!sidebarOpen && (
<button
onClick={toggleSidebar}
className="p-2 hover:bg-secondary-100 rounded-lg transition-colors"
>
<Menu className="w-5 h-5 text-secondary-600" />
</button>
)}
<div className="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
<MessageSquare className="w-5 h-5 text-primary-600" />
</div>

28
packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx
View File

@ -1,6 +1,5 @@
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { Menu, X } from 'lucide-react';
import { clsx } from 'clsx';
import { ChatWindow } from '../components/ChatWindow';
import { ChatSidebar } from '../components/ChatSidebar';
@ -10,7 +9,7 @@ import { useAnonymousAuth } from '@/shared/hooks/useAnonymousAuth';
export default function ChatPage() {
const { conversationId } = useParams();
const { userId, isLoading: authLoading } = useAnonymousAuth();
const { setCurrentConversation, loadConversations, sidebarOpen, toggleSidebar, setSidebarOpen } = useChatStore();
const { setCurrentConversation, loadConversations, sidebarOpen, setSidebarOpen } = useChatStore();
useEffect(() => {
if (userId) {
@ -64,31 +63,6 @@ export default function ChatPage() {
{/* Main chat area */}
<div className="flex-1 flex flex-col min-w-0">
{/* Mobile header with menu button */}
<div className="flex items-center gap-3 p-3 border-b border-secondary-200 md:hidden">
<button
onClick={toggleSidebar}
className="p-2 hover:bg-secondary-100 rounded-lg transition-colors"
>
{sidebarOpen ? (
<X className="w-5 h-5 text-secondary-600" />
) : (
<Menu className="w-5 h-5 text-secondary-600" />
)}
</button>
<span className="font-medium text-secondary-800">香港移民咨询</span>
</div>
{/* Desktop toggle button */}
{!sidebarOpen && (
<button
onClick={toggleSidebar}
className="hidden md:flex absolute left-0 top-4 z-10 p-2 bg-white border border-secondary-200 rounded-r-lg shadow-sm hover:bg-secondary-50 transition-colors"
>
<Menu className="w-5 h-5 text-secondary-600" />
</button>
)}
<ChatWindow />
</div>
</div>