kjanat/livedash-node
1
0
Fork 0
mirror of https://github.com/kjanat/livedash-node.git synced 2026-01-16 12:52:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor SessionDetails component: remove TranscriptViewer and update transcript handling comments

Browse Source
This commit is contained in:
Kaj Kowalski
2025-05-22 10:17:54 +02:00
parent 4d29e444ef
commit 44e9631fc9
2 changed files with 2 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/SessionDetails.tsx
View File

@ -3,7 +3,6 @@
import { ChatSession } from "../lib/types"; import { ChatSession } from "../lib/types";
import LanguageDisplay from "./LanguageDisplay"; import LanguageDisplay from "./LanguageDisplay";
import CountryDisplay from "./CountryDisplay"; import CountryDisplay from "./CountryDisplay";
import TranscriptViewer from "./TranscriptViewer";
interface SessionDetailsProps { interface SessionDetailsProps {
session: ChatSession; session: ChatSession;
@ -143,15 +142,8 @@ export default function SessionDetails({ session }: SessionDetailsProps) {
</div> </div>
)} )}
{/* Display transcript using TranscriptViewer if content is available */} {/* Transcript rendering is now handled by the parent page (app/dashboard/sessions/[id]/page.tsx) */}
{session.transcriptContent && session.transcriptContent.length > 0 && ( {/* Fallback to link only if we only have the URL but no content - this might also be redundant if parent handles all transcript display */}
<TranscriptViewer
transcriptContent={session.transcriptContent}
transcriptUrl={session.fullTranscriptUrl}
/>
)}
{/* Fallback to link only if we only have the URL but no content */}
{(!session.transcriptContent || {(!session.transcriptContent ||
session.transcriptContent.length === 0) && session.transcriptContent.length === 0) &&
session.fullTranscriptUrl && ( session.fullTranscriptUrl && (

175
components/SessionDetails.tsx.new
View File

@ -1,175 +0,0 @@
"use client";
import { ChatSession } from "../lib/types";
import LanguageDisplay from "./LanguageDisplay";
import CountryDisplay from "./CountryDisplay";
import TranscriptViewer from "./TranscriptViewer";
interface SessionDetailsProps {
session: ChatSession;
}
/**
* Component to display session details with formatted country and language names
*/
export default function SessionDetails({ session }: SessionDetailsProps) {
return (
<div className="bg-white p-4 rounded-lg shadow">
<h3 className="font-bold text-lg mb-3">Session Details</h3>
<div className="space-y-2">
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Session ID:</span>
<span className="font-medium">{session.sessionId || session.id}</span>
</div>
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Start Time:</span>
<span className="font-medium">
{new Date(session.startTime).toLocaleString()}
</span>
</div>
{session.endTime && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">End Time:</span>
<span className="font-medium">
{new Date(session.endTime).toLocaleString()}
</span>
</div>
)}
{session.category && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Category:</span>
<span className="font-medium">{session.category}</span>
</div>
)}
{session.language && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Language:</span>
<span className="font-medium">
<LanguageDisplay languageCode={session.language} />
<span className="text-gray-400 text-xs ml-1">
({session.language.toUpperCase()})
</span>
</span>
</div>
)}
{session.country && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Country:</span>
<span className="font-medium">
<CountryDisplay countryCode={session.country} />
<span className="text-gray-400 text-xs ml-1">
({session.country})
</span>
</span>
</div>
)}
{session.sentiment !== null && session.sentiment !== undefined && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Sentiment:</span>
<span
className={`font-medium ${
session.sentiment > 0.3
? "text-green-500"
: session.sentiment < -0.3
? "text-red-500"
: "text-orange-500"
}`}
>
{/* TODO: Ensure sentiment display is accurate and potentially use icons/color-coding more explicitly */}
{session.sentiment > 0.3
? "Positive"
: session.sentiment < -0.3
? "Negative"
: "Neutral"}{" "}
({session.sentiment.toFixed(2)})
</span>
</div>
)}
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Messages Sent:</span>
<span className="font-medium">{session.messagesSent || 0}</span>
</div>
{typeof session.tokens === "number" && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Tokens:</span>
<span className="font-medium">{session.tokens}</span>
</div>
)}
{typeof session.tokensEur === "number" && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Cost:</span>
<span className="font-medium">€{session.tokensEur.toFixed(4)}</span>
</div>
)}
{session.avgResponseTime !== null &&
session.avgResponseTime !== undefined && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Avg Response Time:</span>
{/* TODO: Populate average response time, ensure formatting (e.g., "s" or "ms") */}
<span className="font-medium">
{session.avgResponseTime.toFixed(2)}s
</span>
</div>
)}
{session.escalated !== null && session.escalated !== undefined && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Escalated:</span>
<span
className={`font-medium ${session.escalated ? "text-red-500" : "text-green-500"}`}
>
{session.escalated ? "Yes" : "No"}
</span>
</div>
)}
{session.forwardedHr !== null && session.forwardedHr !== undefined && (
<div className="flex justify-between border-b pb-2">
<span className="text-gray-600">Forwarded to HR:</span>
<span
className={`font-medium ${session.forwardedHr ? "text-amber-500" : "text-green-500"}`}
>
{session.forwardedHr ? "Yes" : "No"}
</span>
</div>
)}
{/* Display transcript using TranscriptViewer if content is available */}
{session.transcriptContent && session.transcriptContent.length > 0 && (
<TranscriptViewer
transcriptContent={session.transcriptContent}
transcriptUrl={session.fullTranscriptUrl}
/>
)}
{/* Fallback to link only if we only have the URL but no content */}
{(!session.transcriptContent || session.transcriptContent.length === 0) && session.fullTranscriptUrl && (
<div className="flex justify-between pt-2">
<span className="text-gray-600">Transcript:</span>
<a
href={session.fullTranscriptUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:text-blue-700 underline"
>
View Full Transcript
</a>
</div>
)}
</div>
</div>
);
}
// TODO: Review and finalize this component. Consider renaming to SessionDetails.tsx and removing/archiving SessionDetails.tsx and SessionDetails.tsx.bak.