From 44e9631fc98d7eb45c860b113ada49fdf155d611 Mon Sep 17 00:00:00 2001
From: Kaj Kowalski <dev@kajkowalski.nl>
Date: Thu, 22 May 2025 10:17:54 +0200
Subject: [PATCH] Refactor SessionDetails component: remove TranscriptViewer
 and update transcript handling comments

---
 components/SessionDetails.tsx     |  12 +-
 components/SessionDetails.tsx.new | 175 ------------------------------
 2 files changed, 2 insertions(+), 185 deletions(-)
 delete mode 100644 components/SessionDetails.tsx.new

diff --git a/components/SessionDetails.tsx b/components/SessionDetails.tsx
index 36b994a..16172e4 100644
--- a/components/SessionDetails.tsx
+++ b/components/SessionDetails.tsx
@@ -3,7 +3,6 @@
 import { ChatSession } from "../lib/types";
 import LanguageDisplay from "./LanguageDisplay";
 import CountryDisplay from "./CountryDisplay";
-import TranscriptViewer from "./TranscriptViewer";
 
 interface SessionDetailsProps {
   session: ChatSession;
@@ -143,15 +142,8 @@ export default function SessionDetails({ session }: SessionDetailsProps) {
           </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 */}
+        {/* Transcript rendering is now handled by the parent page (app/dashboard/sessions/[id]/page.tsx) */}
+        {/* Fallback to link only if we only have the URL but no content - this might also be redundant if parent handles all transcript display */}
         {(!session.transcriptContent ||
           session.transcriptContent.length === 0) &&
           session.fullTranscriptUrl && (
diff --git a/components/SessionDetails.tsx.new b/components/SessionDetails.tsx.new
deleted file mode 100644
index 2acaa7b..0000000
--- a/components/SessionDetails.tsx.new
+++ /dev/null
@@ -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.