mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 08:52:10 +01:00
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:
@ -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>
|
||||
);
|
||||
|
||||
171
components/SessionDetails.tsx.new
Normal file
171
components/SessionDetails.tsx.new
Normal file
@ -0,0 +1,171 @@
|
||||
"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"
|
||||
}`}
|
||||
>
|
||||
{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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
137
components/TranscriptViewer.tsx
Normal file
137
components/TranscriptViewer.tsx
Normal file
@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
interface TranscriptViewerProps {
|
||||
transcriptContent: string;
|
||||
transcriptUrl?: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format the transcript content into a more readable format with styling
|
||||
*/
|
||||
function formatTranscript(content: string): React.ReactNode[] {
|
||||
if (!content.trim()) {
|
||||
return [<p key="empty">No transcript content available.</p>];
|
||||
}
|
||||
|
||||
// Split the transcript by lines
|
||||
const lines = content.split("\n");
|
||||
|
||||
const elements: React.ReactNode[] = [];
|
||||
let currentSpeaker: string | null = null;
|
||||
let currentMessages: string[] = [];
|
||||
|
||||
// Process each line
|
||||
lines.forEach((line) => {
|
||||
line = line.trim();
|
||||
if (!line) {
|
||||
// Empty line, ignore
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if this is a new speaker line
|
||||
if (line.startsWith("User:") || line.startsWith("Assistant:")) {
|
||||
// If we have accumulated messages for a previous speaker, add them
|
||||
if (currentSpeaker && currentMessages.length > 0) {
|
||||
elements.push(
|
||||
<div
|
||||
key={`message-${elements.length}`}
|
||||
className={`mb-3 ${currentSpeaker === "User" ? "text-right" : ""}`}
|
||||
>
|
||||
<div
|
||||
className={`inline-block px-4 py-2 rounded-lg ${
|
||||
currentSpeaker === "User"
|
||||
? "bg-blue-100 text-blue-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{currentMessages.map((msg, i) => (
|
||||
<p key={i}>{msg}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
currentMessages = [];
|
||||
}
|
||||
|
||||
// Set the new current speaker
|
||||
currentSpeaker = line.startsWith("User:") ? "User" : "Assistant";
|
||||
// Add the content after "User:" or "Assistant:"
|
||||
const messageContent = line.substring(line.indexOf(":") + 1).trim();
|
||||
if (messageContent) {
|
||||
currentMessages.push(messageContent);
|
||||
}
|
||||
} else if (currentSpeaker) {
|
||||
// This is a continuation of the current speaker's message
|
||||
currentMessages.push(line);
|
||||
}
|
||||
});
|
||||
|
||||
// Add any remaining messages
|
||||
if (currentSpeaker && currentMessages.length > 0) {
|
||||
elements.push(
|
||||
<div
|
||||
key={`message-${elements.length}`}
|
||||
className={`mb-3 ${currentSpeaker === "User" ? "text-right" : ""}`}
|
||||
>
|
||||
<div
|
||||
className={`inline-block px-4 py-2 rounded-lg ${
|
||||
currentSpeaker === "User"
|
||||
? "bg-blue-100 text-blue-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{currentMessages.map((msg, i) => (
|
||||
<p key={i}>{msg}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component to display a chat transcript
|
||||
*/
|
||||
export default function TranscriptViewer({
|
||||
transcriptContent,
|
||||
transcriptUrl,
|
||||
}: TranscriptViewerProps) {
|
||||
const [showTranscript, setShowTranscript] = useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between pt-2">
|
||||
<span className="text-gray-600">Transcript:</span>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowTranscript(!showTranscript)}
|
||||
className="text-blue-500 hover:text-blue-700 underline"
|
||||
>
|
||||
{showTranscript ? "Hide Transcript" : "Show Transcript"}
|
||||
</button>
|
||||
{transcriptUrl && (
|
||||
<a
|
||||
href={transcriptUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:text-blue-700 underline"
|
||||
>
|
||||
View Source
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Display transcript content if expanded */}
|
||||
{showTranscript && (
|
||||
<div className="mt-4 p-4 bg-gray-50 rounded-lg max-h-96 overflow-auto">
|
||||
<div className="space-y-2">{formatTranscript(transcriptContent)}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user