Spaces:
Sleeping
Sleeping
File size: 6,213 Bytes
e7586f8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | 'use client';
import React from 'react';
import { RAGResponse } from '@/lib/types';
import { ExternalLink, FileText, MapPin } from 'lucide-react';
import RBACBlock from './RBACBlock';
import GuardrailBanner from './GuardrailBanner';
interface ChatMessageProps {
type: 'user' | 'assistant' | 'system';
content: string;
timestamp: Date;
response?: RAGResponse;
}
export default function ChatMessage({ type, content, timestamp, response }: ChatMessageProps) {
const formatTime = (date: Date) => {
return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
};
if (type === 'system') {
return (
<div className="flex justify-center my-4">
<div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm">
{content}
</div>
</div>
);
}
const isUser = type === 'user';
return (
<div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-6 animate-slideIn`}>
<div className={`max-w-2xl ${isUser ? 'mr-4' : 'ml-4'}`}>
{/* User Message */}
{isUser && (
<div>
<div className="bg-primary-600 text-white rounded-2xl rounded-tr-sm px-6 py-4 flex-1">
<p className="break-words">{content}</p>
</div>
<p className="text-xs text-gray-500 mt-1 text-right">{formatTime(timestamp)}</p>
</div>
)}
{/* Assistant Message */}
{!isUser && response && (
<div>
{/* RBAC Denial Block */}
{response.rbac_denied && (
<>
<RBACBlock
message="Your query targeted a collection you don't have access to."
denialReason={response.rbac_denial_reason}
/>
</>
)}
{/* Guardrail Warnings */}
{response.guardrail_flags && response.guardrail_flags.length > 0 && (
<div className="mb-4">
<GuardrailBanner flags={response.guardrail_flags} />
</div>
)}
{/* Main Answer */}
{!response.rbac_denied && (
<div>
<div className="bg-gray-50 border border-gray-200 rounded-2xl rounded-tl-sm px-6 py-4 mb-4">
<p className="text-gray-900 break-words leading-relaxed">{response.answer}</p>
</div>
{/* Metadata Section */}
<div className="space-y-3 text-sm">
{/* Route Information */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-start gap-3">
<div className="flex-shrink-0 text-blue-600 font-bold">🔄</div>
<div className="flex-1">
<p className="text-blue-900 font-semibold">Semantic Route</p>
<p className="text-blue-700">
{(response.route ?? '')
.replace(/_/g, ' ')
.replace(/route/i, '')
.trim()}
</p>
</div>
</div>
{/* User Role & Access */}
<div className="bg-purple-50 border border-purple-200 rounded-lg p-3 flex items-start gap-3">
<div className="flex-shrink-0 text-purple-600 font-bold">👤</div>
<div className="flex-1">
<p className="text-purple-900 font-semibold">Your Access</p>
<div className="flex flex-wrap gap-2 mt-1">
<span className="inline-block bg-purple-200 text-purple-800 px-2 py-1 rounded text-xs font-semibold">
{response.user_role}
</span>
{(response.accessible_collections ?? []).map((collection) => (
<span key={collection} className="inline-block bg-purple-100 text-purple-700 px-2 py-1 rounded text-xs">
{collection}
</span>
))}
</div>
</div>
</div>
{/* Sources */}
{(response.sources ?? []).length > 0 && (
<div className="bg-green-50 border border-green-200 rounded-lg p-3">
<p className="text-green-900 font-semibold mb-3 flex items-center gap-2">
<FileText size={16} /> Sources ({(response.sources ?? []).length})
</p>
<div className="space-y-2">
{(response.sources ?? []).map((source, idx) => (
<div key={idx} className="bg-white border border-green-100 rounded p-2 text-xs">
<div className="flex items-start gap-2">
<ExternalLink size={14} className="text-green-600 flex-shrink-0 mt-0.5" />
<div>
<p className="text-gray-800 font-semibold">{source.document}</p>
<div className="flex gap-4 text-gray-600 mt-1">
{source.page_number && (
<span className="flex items-center gap-1">
<MapPin size={12} />
Page {source.page_number}
</span>
)}
{source.section_title && (
<span className="italic text-gray-500">{source.section_title}</span>
)}
</div>
</div>
</div>
</div>
))}
</div>
</div>
)}
</div>
</div>
)}
<p className="text-xs text-gray-500 mt-3">{formatTime(timestamp)}</p>
</div>
)}
</div>
</div>
);
}
|