310 lines
12 KiB
TypeScript
310 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
MessageSquare,
|
|
Briefcase,
|
|
Scale,
|
|
Bot,
|
|
User,
|
|
Loader2,
|
|
Send,
|
|
Network,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { askContractQuestionAction } from "@/features/contracts/api/contract.action";
|
|
|
|
interface Contract {
|
|
id: string;
|
|
fileName: string;
|
|
}
|
|
|
|
interface ChatMessage {
|
|
role: "user" | "assistant";
|
|
content: string;
|
|
}
|
|
|
|
interface RagDiagnosticEntry {
|
|
chunkIndex: number;
|
|
score: number;
|
|
preview: string;
|
|
}
|
|
|
|
interface ContractChatModalProps {
|
|
isOpen: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
contract: Contract | null;
|
|
renderRichParagraphs: (text: string, prefix: string) => React.ReactNode[];
|
|
}
|
|
|
|
export function ContractChatModal({
|
|
isOpen,
|
|
onOpenChange,
|
|
contract,
|
|
renderRichParagraphs,
|
|
}: ContractChatModalProps) {
|
|
const [question, setQuestion] = useState("");
|
|
const [isAsking, setIsAsking] = useState(false);
|
|
const [ragDiagnostics, setRagDiagnostics] = useState<RagDiagnosticEntry[]>(
|
|
[],
|
|
);
|
|
const [messages, setMessages] = useState<ChatMessage[]>([
|
|
{
|
|
role: "assistant",
|
|
content:
|
|
"Ask me anything about this contract. I will answer based on the file analysis.",
|
|
},
|
|
]);
|
|
|
|
const quickQuestions = [
|
|
"What are the main obligations and deadlines?",
|
|
"What are the non-compliance risks under general EU/US principles?",
|
|
"What are the most important exclusions and liabilities?",
|
|
];
|
|
|
|
const handleAskQuestion = async () => {
|
|
if (!contract) return;
|
|
|
|
const trimmedQuestion = question.trim();
|
|
if (!trimmedQuestion) return;
|
|
|
|
setMessages((prev) => [
|
|
...prev,
|
|
{ role: "user", content: trimmedQuestion },
|
|
]);
|
|
setQuestion("");
|
|
setIsAsking(true);
|
|
|
|
try {
|
|
const result = await askContractQuestionAction(
|
|
contract.id,
|
|
trimmedQuestion,
|
|
);
|
|
|
|
if (result.success && result.answer) {
|
|
const diagnostics = Array.isArray(
|
|
(result as { ragDiagnostics?: RagDiagnosticEntry[] }).ragDiagnostics,
|
|
)
|
|
? ((result as { ragDiagnostics?: RagDiagnosticEntry[] })
|
|
.ragDiagnostics ?? [])
|
|
: [];
|
|
setRagDiagnostics(diagnostics);
|
|
setMessages((prev) => [
|
|
...prev,
|
|
{ role: "assistant", content: result.answer as string },
|
|
]);
|
|
} else {
|
|
const errorMessage = result.error || "Failed to get AI response";
|
|
setMessages((prev) => [
|
|
...prev,
|
|
{ role: "assistant", content: `Error: ${errorMessage}` },
|
|
]);
|
|
}
|
|
} catch (error) {
|
|
const fallbackMessage =
|
|
error instanceof Error ? error.message : "Unknown error occurred";
|
|
setMessages((prev) => [
|
|
...prev,
|
|
{ role: "assistant", content: `Error: ${fallbackMessage}` },
|
|
]);
|
|
} finally {
|
|
setIsAsking(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto border-border/60 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary)/0.18),transparent_40%),radial-gradient(circle_at_bottom_left,hsl(var(--secondary)/0.12),transparent_45%)]">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<MessageSquare className="w-5 h-5" />
|
|
Ask About This File
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{contract && (
|
|
<div className="space-y-4">
|
|
<div className="rounded-2xl border border-white/20 dark:border-white/10 bg-background/40 p-4 shadow-xl backdrop-blur-xl ring-1 ring-black/5 dark:ring-white/5 transition-all duration-500 hover:shadow-primary/5 hover:border-primary/20">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="min-w-0">
|
|
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">
|
|
Contract Intelligence Assistant
|
|
</p>
|
|
<p className="text-sm font-medium truncate mt-1">
|
|
{contract.fileName}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-muted/30 px-2 py-1">
|
|
<Briefcase className="w-3.5 h-3.5" />
|
|
Business
|
|
</span>
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-muted/30 px-2 py-1">
|
|
<Scale className="w-3.5 h-3.5" />
|
|
Legal Context
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-xs text-muted-foreground">Quick prompts</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{quickQuestions.map((quickQuestion) => (
|
|
<Button
|
|
key={quickQuestion}
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={isAsking}
|
|
onClick={() => setQuestion(quickQuestion)}
|
|
className="border-primary/25 bg-background/80 text-xs hover:border-primary/50 hover:bg-primary/10"
|
|
>
|
|
{quickQuestion}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-cyan-500/20 bg-cyan-500/5 p-3">
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<Network className="h-4 w-4 text-cyan-600 dark:text-cyan-300" />
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-cyan-700 dark:text-cyan-300">
|
|
RAG Diagnostics
|
|
</p>
|
|
</div>
|
|
|
|
{ragDiagnostics.length === 0 ? (
|
|
<p className="text-xs text-muted-foreground">
|
|
Ask a question to inspect top retrieved chunks and relevance
|
|
scores.
|
|
</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{ragDiagnostics.map((item) => (
|
|
<div
|
|
key={`${item.chunkIndex}-${item.score}`}
|
|
className="rounded-xl border border-border/50 bg-background/70 p-2"
|
|
>
|
|
<div className="mb-1 flex items-center justify-between text-[11px]">
|
|
<span className="font-medium text-foreground">
|
|
Chunk {item.chunkIndex}
|
|
</span>
|
|
<span className="rounded-full border border-cyan-500/30 bg-cyan-500/10 px-2 py-0.5 text-cyan-700 dark:text-cyan-300">
|
|
score {item.score.toFixed(4)}
|
|
</span>
|
|
</div>
|
|
<p className="text-[11px] leading-relaxed text-muted-foreground">
|
|
{item.preview}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="h-80 space-y-3 overflow-y-auto rounded-2xl border border-white/10 bg-black/5 dark:bg-white/5 p-4 shadow-inner backdrop-blur-md">
|
|
{messages.map((message, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
|
|
>
|
|
<div className="flex max-w-[88%] items-start gap-2">
|
|
{message.role === "assistant" && (
|
|
<span className="mt-1 inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/60 bg-muted/40 text-muted-foreground">
|
|
<Bot className="h-4 w-4" />
|
|
</span>
|
|
)}
|
|
<div
|
|
className={`rounded-2xl px-3 py-2 text-sm whitespace-pre-wrap break-words shadow-sm transition-all duration-300 hover:shadow-md ${
|
|
message.role === "user"
|
|
? "bg-gradient-to-r from-primary to-accent text-primary-foreground shadow-primary/25"
|
|
: "border border-white/20 dark:border-white/10 bg-white/50 dark:bg-black/50 backdrop-blur-md shadow-[0_4px_30px_rgba(0,0,0,0.05)]"
|
|
}`}
|
|
>
|
|
{message.role === "assistant"
|
|
? renderRichParagraphs(
|
|
message.content,
|
|
`chat-assistant-${index}`,
|
|
)
|
|
: message.content}
|
|
</div>
|
|
{message.role === "user" && (
|
|
<span className="mt-1 inline-flex h-7 w-7 items-center justify-center rounded-full border border-primary/25 bg-primary/10 text-primary">
|
|
<User className="h-4 w-4" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{isAsking && (
|
|
<div className="flex justify-start">
|
|
<div className="flex items-center gap-2 rounded-2xl border border-border/70 bg-background px-3 py-2 text-sm shadow-sm">
|
|
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full border border-border/60 bg-muted/30 text-muted-foreground">
|
|
<Bot className="h-3.5 w-3.5" />
|
|
</span>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Preparing a professional legal-business answer...
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Textarea
|
|
value={question}
|
|
onChange={(event) => setQuestion(event.target.value)}
|
|
placeholder="Ask about obligations, liabilities, legal exposure, compliance risks, or business impact..."
|
|
rows={3}
|
|
disabled={isAsking}
|
|
className="rounded-2xl border-white/20 dark:border-white/10 bg-background/50 backdrop-blur-md focus:bg-background/80 transition-all duration-300 shadow-inner"
|
|
onKeyDown={(event) => {
|
|
if (
|
|
event.key === "Enter" &&
|
|
!event.shiftKey &&
|
|
!isAsking &&
|
|
question.trim()
|
|
) {
|
|
event.preventDefault();
|
|
void handleAskQuestion();
|
|
}
|
|
}}
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={handleAskQuestion}
|
|
disabled={isAsking || !question.trim()}
|
|
className="gap-2 bg-gradient-to-r from-primary to-accent text-white shadow-md hover:from-primary/90 hover:to-accent/90"
|
|
>
|
|
{isAsking ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Sending...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Send className="w-4 h-4" />
|
|
Send
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-[11px] text-muted-foreground">
|
|
Tip: press Enter to send, Shift+Enter for a new line.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|