| import React, { useRef, useEffect } from 'react'; |
| import { MessageCard } from './MessageCard'; |
| import type { Message } from '../types/chat'; |
| import { Scale, Sparkles, Code, FileText, Shield, Loader2 } from 'lucide-react'; |
|
|
| interface ChatAreaProps { |
| messages: Message[]; |
| onSendMessage: (text: string) => void; |
| onRegenerate: () => void; |
| onOpenPDFPreview: (pdf: NonNullable<Message['pdfPreview']>) => void; |
| onEditMessage?: (id: string, text: string) => void; |
| onDeleteMessage?: (id: string) => void; |
| isGenerating?: boolean; |
| } |
|
|
| export const ChatArea: React.FC<ChatAreaProps> = ({ |
| messages, |
| onSendMessage, |
| onRegenerate, |
| onOpenPDFPreview, |
| onEditMessage, |
| onDeleteMessage, |
| isGenerating |
| }) => { |
| const bottomRef = useRef<HTMLDivElement>(null); |
|
|
| useEffect(() => { |
| bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); |
| }, [messages, isGenerating]); |
|
|
| if (messages.length === 0) { |
| return ( |
| <div className="flex-1 overflow-y-auto p-6 sm:p-12 flex flex-col items-center justify-center text-center"> |
| <div className="max-w-[900px] w-full mx-auto space-y-8"> |
| {/* Logo & Header */} |
| <div className="space-y-3"> |
| <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white mx-auto shadow-2xl shadow-blue-500/30 animate-pulse"> |
| <Scale className="w-10 h-10" /> |
| </div> |
| |
| <h2 className="text-3xl font-extrabold text-white tracking-tight"> |
| Welcome to LawSLM |
| </h2> |
| <p className="text-sm text-slate-400 max-w-lg mx-auto"> |
| Your Intelligent AI Legal and General Assistant — Built completely from scratch by Amit Kumar. |
| </p> |
| </div> |
| |
| {/* 4 Feature Suggestion Cards */} |
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-left max-w-2xl mx-auto"> |
| <SuggestionCard |
| icon={<Shield className="w-6 h-6 text-blue-400" />} |
| title="Legal Information" |
| subtitle="Explain statutes, IPC section provisions & legal procedures" |
| onClick={() => onSendMessage("Explain Section 420 of IPC in simple terms")} |
| /> |
| <SuggestionCard |
| icon={<FileText className="w-6 h-6 text-amber-400" />} |
| title="PDF Report Export" |
| subtitle="Generate & export formal legal notices & affidavit documents" |
| onClick={() => onSendMessage("Generate formal legal notice PDF report")} |
| /> |
| <SuggestionCard |
| icon={<Code className="w-6 h-6 text-emerald-400" />} |
| title="Programming & AI" |
| subtitle="Write & debug Python, PyTorch, C++, Java & SQL code" |
| onClick={() => onSendMessage("Write a Python script to train a Transformer in PyTorch")} |
| /> |
| <SuggestionCard |
| icon={<Sparkles className="w-6 h-6 text-purple-400" />} |
| title="Model Creator" |
| subtitle="Learn about LawSLM's architecture and developer" |
| onClick={() => onSendMessage("Who created you?")} |
| /> |
| </div> |
| </div> |
| </div> |
| ); |
| } |
|
|
| return ( |
| <div className="flex-1 overflow-y-auto py-6"> |
| <div className="max-w-[900px] mx-auto space-y-4"> |
| {messages.map((msg, idx) => ( |
| <MessageCard |
| key={msg.id || idx} |
| message={msg} |
| onRegenerate={idx === messages.length - 1 && msg.role === 'assistant' ? onRegenerate : undefined} |
| onOpenPDFPreview={onOpenPDFPreview} |
| onEditMessage={onEditMessage} |
| onDeleteMessage={onDeleteMessage} |
| /> |
| ))} |
| |
| {/* Animated Thinking Indicator */} |
| {isGenerating && messages[messages.length - 1]?.role === 'user' && ( |
| <div className="flex items-center space-x-3 px-6 py-4 rounded-2xl glass-card-ai max-w-xs mx-6"> |
| <Loader2 className="w-4 h-4 text-blue-400 animate-spin" /> |
| <span className="text-xs font-semibold text-slate-300">LawSLM is thinking...</span> |
| </div> |
| )} |
| |
| <div ref={bottomRef} /> |
| </div> |
| </div> |
| ); |
| }; |
|
|
| interface SuggestionCardProps { |
| icon: React.ReactNode; |
| title: string; |
| subtitle: string; |
| onClick: () => void; |
| } |
|
|
| const SuggestionCard: React.FC<SuggestionCardProps> = ({ icon, title, subtitle, onClick }) => ( |
| <button |
| onClick={onClick} |
| className="p-5 rounded-2xl bg-slate-800/80 border border-slate-700/80 text-left flex flex-col justify-between space-y-3 hover:bg-slate-750 hover:border-blue-500/50 transition-all shadow-lg group" |
| > |
| <div className="p-2.5 rounded-xl bg-slate-900 w-fit group-hover:bg-blue-500/20 transition-colors"> |
| {icon} |
| </div> |
| <div> |
| <h3 className="text-sm font-bold text-slate-200 group-hover:text-blue-400 transition-colors"> |
| {title} |
| </h3> |
| <p className="text-xs text-slate-400 mt-1 leading-snug"> |
| {subtitle} |
| </p> |
| </div> |
| </button> |
| ); |
|
|
