Brachnha/brachnha-insight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve chat UI, refine teacher prompt, and add drafting animation

Browse Source
This commit is contained in:
Max
2026-01-27 15:44:51 +07:00
parent 6f365adfd7
commit d4625e0b65
5 changed files with 66 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/features/chat/chat-window.tsx
View File

@@ -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() {
<Sparkles className="w-8 h-8 text-amber-400 absolute -top-2 -right-2" aria-hidden="true" />
{/* Connection Status Indicator */}
<div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${
connectionStatus === 'connected' ? 'bg-green-500' :
<div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${connectionStatus === 'connected' ? 'bg-green-500' :
connectionStatus === 'checking' ? 'bg-yellow-400 animate-pulse' : 'bg-red-500'
}`} />
}`} />
</div>
<div className="space-y-2 max-w-md">
@@ -111,7 +109,7 @@ export function ChatWindow() {
}
return (
<div ref={containerRef} className="h-full flex-1 overflow-y-auto px-4 py-6 scroll-smooth">
<div ref={containerRef} className="w-full h-full flex-1 min-h-0 overflow-y-auto px-4 py-6">
<div className="max-w-3xl mx-auto space-y-4">
{messages.map((msg) => (
<ChatBubble key={msg.id} role={msg.role} content={msg.content} />

32
src/components/features/chat/thinking-overlay.tsx Normal file
View File

@@ -0,0 +1,32 @@
"use client";
import { PenTool, Sparkles } from "lucide-react";
export function ThinkingOverlay() {
return (
<div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-background/60 backdrop-blur-md transition-all duration-500 animate-in fade-in">
<div className="relative">
{/* Pulsing Background Circle */}
<div className="absolute inset-0 bg-indigo-500/20 rounded-full animate-ping [animation-duration:3s]" />
{/* Icon Container */}
<div className="relative bg-card border border-border p-6 rounded-full shadow-lg flex items-center justify-center">
<PenTool className="w-10 h-10 text-indigo-500 animate-bounce [animation-duration:2s]" />
</div>
{/* Sparkles Decoration */}
<Sparkles className="absolute -top-2 -right-2 w-6 h-6 text-amber-400 animate-pulse" />
<Sparkles className="absolute -bottom-1 -left-2 w-4 h-4 text-blue-400 animate-pulse [animation-delay:0.5s]" />
</div>
<div className="mt-8 space-y-2 text-center">
<h3 className="text-xl font-serif font-medium text-foreground">
Crafting your draft
</h3>
<p className="text-sm text-muted-foreground animate-pulse">
Synthesizing insights...
</p>
</div>
</div>
);
}