transcript toggle

src/app/components/chat/MessageList.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import type { ChatMessage } from '../../types/chat.types.ts';
 import { Loader2, AlertCircle, RotateCcw } from 'lucide-react';
 import AudioPlayer from './AudioPlayer.tsx';
+import TranscriptToggle from './TranscriptToggle.tsx';
 
 type MessageListProps = {
   messages: ChatMessage[];
@@ -61,15 +62,12 @@ const MessageList = ({ messages, isLoading = false, error = null, onRetry }: Mes
             }`}
           >
             {message.audioUrl ? (
-              // Audio message display - show both audio player and text
+              // Audio message display with toggleable text transcript
               <div>
                 <AudioPlayer
                   src={message.audioUrl}
                 />
-                {/* Display the text content under the audio player */}
-                <div className="mt-2 whitespace-pre-wrap break-words">
-                  {message.content}
-                </div>
+                <TranscriptToggle content={message.content} />
               </div>
             ) : (
               // Regular text message

src/app/components/chat/TranscriptToggle.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+type TranscriptToggleProps = {
+  content: string;
+};
+
+const TranscriptToggle: React.FC<TranscriptToggleProps> = ({ content }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleTranscript = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className="mt-3">
+      <button
+        onClick={toggleTranscript}
+        className="flex items-center space-x-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500 rounded"
+        aria-expanded={isExpanded}
+        aria-label={isExpanded ? "Hide transcript" : "Show transcript"}
+      >
+        <span>{isExpanded ? "Hide transcript" : "Show transcript"}</span>
+        {isExpanded ? (
+          <ChevronUp className="w-4 h-4" />
+        ) : (
+          <ChevronDown className="w-4 h-4" />
+        )}
+      </button>
+      {isExpanded && (
+        <div 
+          className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 whitespace-pre-wrap break-words text-gray-800 dark:text-gray-200"
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TranscriptToggle;