diff --git a/src/app/(session)/chat/page.tsx b/src/app/(session)/chat/page.tsx index 5e4f53b..0e6a9df 100644 --- a/src/app/(session)/chat/page.tsx +++ b/src/app/(session)/chat/page.tsx @@ -4,13 +4,14 @@ import { useEffect, Suspense } from 'react'; import { useSearchParams, useRouter } from 'next/navigation'; import { ChatWindow } from '@/components/features/chat/chat-window'; import { ChatInput } from '@/components/features/chat/chat-input'; +import { ThinkingOverlay } from '@/components/features/chat/thinking-overlay'; import { DraftSheet } from '@/components/features/journal/draft-sheet'; import { useChatStore } from '@/store/use-chat'; import { Loader2 } from "lucide-react"; import { AppHeader } from '@/components/layout'; function ChatPageContent() { - const { resetSession } = useChatStore(); + const { resetSession, phase } = useChatStore(); const searchParams = useSearchParams(); const router = useRouter(); @@ -28,6 +29,9 @@ function ChatPageContent() { {/* Header */} + {/* Drafting Overlay */} + {phase === 'drafting' && } + {/* Chat Messages - Scrollable Area */}
diff --git a/src/components/features/chat/chat-window.tsx b/src/components/features/chat/chat-window.tsx index f808e56..7d99b3e 100644 --- a/src/components/features/chat/chat-window.tsx +++ b/src/components/features/chat/chat-window.tsx @@ -41,12 +41,11 @@ export function ChatWindow() { checkConnection(); }, []); - // Auto-scroll to bottom only when new messages arrive useEffect(() => { if (!isUserScrolling) { - bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); + bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' }); } - }, [messages.length, isUserScrolling]); + }, [messages.length, isUserScrolling, isTyping]); // Detect when user is manually scrolling useEffect(() => { @@ -82,10 +81,9 @@ export function ChatWindow() {