function ExpandableMessage()

in src/components/reasoning-trace.tsx [35:69]

33 lines of code
6 McCabe index (conditional complexity)


function ExpandableMessage({ message }: { message: Message }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const isLongMessage = message.content.length > MAX_MESSAGE_LENGTH;

  const toggleExpand = () => setIsExpanded(!isExpanded);

  return (
    <div
      className={`p-3 rounded-lg max-w-[80%] ${
        message.role === "user"
          ? "bg-primary/10 ml-auto"
          : "bg-secondary/10 mr-auto"
      }`}
    >
      <p className="text-xs font-semibold mb-1 capitalize text-muted-foreground">
        {message.role}
      </p>
      <p className="text-sm whitespace-pre-wrap">
        {isLongMessage && !isExpanded
          ? `${message.content.substring(0, MAX_MESSAGE_LENGTH)}...`
          : message.content}
      </p>
      {isLongMessage && (
        <Button
          variant="link"
          size="sm"
          className="p-0 h-auto text-xs mt-1"
          onClick={toggleExpand}
        >
          {isExpanded ? "Show Less" : "Show More"}
        </Button>
      )}
    </div>
  );
}