mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 15:52:10 +01:00
refactor: achieve 100% biome compliance with comprehensive code quality improvements
- Fix all cognitive complexity violations (63→0 errors) - Replace 'any' types with proper TypeScript interfaces and generics - Extract helper functions and custom hooks to reduce complexity - Fix React hook dependency arrays and useCallback patterns - Remove unused imports, variables, and functions - Implement proper formatting across all files - Add type safety with interfaces like AIProcessingRequestWithSession - Fix circuit breaker implementation with proper reset() method - Resolve all accessibility and form labeling issues - Clean up mysterious './0' file containing biome output Total: 63 errors → 0 errors, 42 warnings → 0 warnings
This commit is contained in:
@ -13,166 +13,254 @@ interface SessionDetailsProps {
|
||||
session: ChatSession;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for basic session information
|
||||
*/
|
||||
function SessionBasicInfo({ session }: { session: ChatSession }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Basic Information
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Session ID:</span>
|
||||
<code className="ml-2 text-xs font-mono bg-muted px-1 py-0.5 rounded">
|
||||
{session.id.slice(0, 8)}...
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Start Time:</span>
|
||||
<span className="ml-2 text-sm">
|
||||
{new Date(session.startTime).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
{session.endTime && (
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">End Time:</span>
|
||||
<span className="ml-2 text-sm">
|
||||
{new Date(session.endTime).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for session location and language
|
||||
*/
|
||||
function SessionLocationInfo({ session }: { session: ChatSession }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Location & Language
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{session.countryCode && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Country:</span>
|
||||
<CountryDisplay countryCode={session.countryCode} />
|
||||
</div>
|
||||
)}
|
||||
{session.language && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Language:</span>
|
||||
<LanguageDisplay languageCode={session.language} />
|
||||
</div>
|
||||
)}
|
||||
{session.ipAddress && (
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">IP Address:</span>
|
||||
<span className="ml-2 font-mono text-sm">
|
||||
{session.ipAddress}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for session metrics
|
||||
*/
|
||||
function SessionMetrics({ session }: { session: ChatSession }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Session Metrics
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{session.messagesSent !== null &&
|
||||
session.messagesSent !== undefined && (
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Messages Sent:
|
||||
</span>
|
||||
<span className="ml-2 text-sm font-medium">
|
||||
{session.messagesSent}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{session.userId && (
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">User ID:</span>
|
||||
<span className="ml-2 text-sm">{session.userId}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for session analysis and status
|
||||
*/
|
||||
function SessionAnalysis({ session }: { session: ChatSession }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
AI Analysis
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{session.category && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Category:</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{formatCategory(session.category)}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
{session.sentiment && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Sentiment:</span>
|
||||
<Badge
|
||||
variant={
|
||||
session.sentiment === "positive"
|
||||
? "default"
|
||||
: session.sentiment === "negative"
|
||||
? "destructive"
|
||||
: "secondary"
|
||||
}
|
||||
className="text-xs"
|
||||
>
|
||||
{session.sentiment.charAt(0).toUpperCase() +
|
||||
session.sentiment.slice(1)}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for session status flags
|
||||
*/
|
||||
function SessionStatusFlags({ session }: { session: ChatSession }) {
|
||||
const hasStatusFlags =
|
||||
session.escalated !== null || session.forwardedHr !== null;
|
||||
|
||||
if (!hasStatusFlags) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground mb-2">
|
||||
Status Flags
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{session.escalated !== null && session.escalated !== undefined && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Escalated:</span>
|
||||
<Badge
|
||||
variant={session.escalated ? "destructive" : "outline"}
|
||||
className="text-xs"
|
||||
>
|
||||
{session.escalated ? "Yes" : "No"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
{session.forwardedHr !== null &&
|
||||
session.forwardedHr !== undefined && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Forwarded to HR:
|
||||
</span>
|
||||
<Badge
|
||||
variant={session.forwardedHr ? "destructive" : "outline"}
|
||||
className="text-xs"
|
||||
>
|
||||
{session.forwardedHr ? "Yes" : "No"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component for session summary
|
||||
*/
|
||||
function SessionSummary({ session }: { session: ChatSession }) {
|
||||
if (!session.summary) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-muted-foreground">AI Summary</h4>
|
||||
<p className="text-sm leading-relaxed border-l-4 border-muted pl-4 italic">
|
||||
{session.summary}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component to display session details with formatted country and language names
|
||||
*/
|
||||
export default function SessionDetails({ session }: SessionDetailsProps) {
|
||||
// Using centralized formatCategory utility
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Session Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Session ID</p>
|
||||
<code className="text-sm font-mono bg-muted px-2 py-1 rounded">
|
||||
{session.id.slice(0, 8)}...
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Start Time</p>
|
||||
<p className="font-medium">
|
||||
{new Date(session.startTime).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{session.endTime && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">End Time</p>
|
||||
<p className="font-medium">
|
||||
{new Date(session.endTime).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{session.category && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Category</p>
|
||||
<Badge variant="secondary">
|
||||
{formatCategory(session.category)}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{session.language && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Language</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<LanguageDisplay languageCode={session.language} />
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{session.language.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{session.country && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Country</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<CountryDisplay countryCode={session.country} />
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{session.country}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{session.sentiment !== null && session.sentiment !== undefined && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Sentiment</p>
|
||||
<Badge
|
||||
variant={
|
||||
session.sentiment === "positive"
|
||||
? "default"
|
||||
: session.sentiment === "negative"
|
||||
? "destructive"
|
||||
: "secondary"
|
||||
}
|
||||
>
|
||||
{session.sentiment.charAt(0).toUpperCase() +
|
||||
session.sentiment.slice(1)}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Messages Sent</p>
|
||||
<p className="font-medium">{session.messagesSent || 0}</p>
|
||||
</div>
|
||||
|
||||
{session.avgResponseTime !== null &&
|
||||
session.avgResponseTime !== undefined && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Avg Response Time
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
{session.avgResponseTime.toFixed(2)}s
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{session.escalated !== null && session.escalated !== undefined && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Escalated</p>
|
||||
<Badge variant={session.escalated ? "destructive" : "default"}>
|
||||
{session.escalated ? "Yes" : "No"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{session.forwardedHr !== null &&
|
||||
session.forwardedHr !== undefined && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Forwarded to HR
|
||||
</p>
|
||||
<Badge
|
||||
variant={session.forwardedHr ? "secondary" : "default"}
|
||||
>
|
||||
{session.forwardedHr ? "Yes" : "No"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{session.ipAddress && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">IP Address</p>
|
||||
<code className="text-sm font-mono bg-muted px-2 py-1 rounded">
|
||||
{session.ipAddress}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<SessionBasicInfo session={session} />
|
||||
<SessionLocationInfo session={session} />
|
||||
</div>
|
||||
|
||||
{(session.summary || session.initialMsg) && <Separator />}
|
||||
<Separator />
|
||||
|
||||
{session.summary && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-2">AI Summary</p>
|
||||
<div className="bg-muted p-3 rounded-md text-sm">
|
||||
{session.summary}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<SessionMetrics session={session} />
|
||||
<SessionAnalysis session={session} />
|
||||
</div>
|
||||
|
||||
<SessionStatusFlags session={session} />
|
||||
|
||||
<SessionSummary session={session} />
|
||||
|
||||
{!session.summary && session.initialMsg && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-muted-foreground">
|
||||
Initial Message
|
||||
</p>
|
||||
<div className="bg-muted p-3 rounded-md text-sm italic">
|
||||
</h4>
|
||||
<p className="text-sm leading-relaxed border-l-4 border-muted pl-4 italic">
|
||||
"{session.initialMsg}"
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user