Enhances session details with transcript viewer

Adds a transcript viewer component to display transcript content within the session details page.

This change introduces a new `TranscriptViewer` component that renders the transcript content if available. It also adds logic to fetch and store transcript content from the provided URL during session data refresh. The existing link-based transcript view is now used as a fallback when only the transcript URL is available. It also fixes an issue where session ID was not properly displayed.
This commit is contained in:
2025-05-22 05:44:09 +02:00
parent ac7cafd7b2
commit 8ce0b8be37
11 changed files with 620 additions and 14 deletions

View File

@ -3,6 +3,7 @@
import { ChatSession } from "../lib/types";
import LanguageDisplay from "./LanguageDisplay";
import CountryDisplay from "./CountryDisplay";
import TranscriptViewer from "./TranscriptViewer";
interface SessionDetailsProps {
session: ChatSession;
@ -19,7 +20,7 @@ export default function SessionDetails({ session }: SessionDetailsProps) {
<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}</span>
<span className="font-medium">{session.sessionId || session.id}</span>
</div>
<div className="flex justify-between border-b pb-2">
@ -142,19 +143,30 @@ export default function SessionDetails({ session }: SessionDetailsProps) {
</div>
)}
{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>
{/* 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>
);