src/app/components/chat/TranscriptToggle.tsx

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { ChevronDown, ChevronUp } from 'lucide-react';

type TranscriptToggleProps = {
  content: string;
};

const TranscriptToggle = ({ content }: TranscriptToggleProps) => {
  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 text-gray-800 dark:text-gray-200 text-sm leading-relaxed break-words"
        >
          <ReactMarkdown
            components={{
              p: ({ node, ...props }) => (
                <p {...props} className="whitespace-pre-wrap mb-2 last:mb-0" />
              ),
              ul: ({ node, ...props }) => (
                <ul
                  {...props}
                  className="list-disc ml-5 space-y-1 mb-2 last:mb-0"
                />
              ),
              ol: ({ node, ...props }) => (
                <ol
                  {...props}
                  className="list-decimal ml-5 space-y-1 mb-2 last:mb-0"
                />
              ),
              li: ({ node, ...props }) => (
                <li {...props} className="ml-1" />
              ),
            }}
          >
            {content}
          </ReactMarkdown>
        </div>
      )}
    </div>
  );
};

export default TranscriptToggle;