vocero-client/vocero-frontend/src/components/Bubbles.tsx

import { memo, useEffect, useState } from "react";

import { renderMarkdown, type Message } from "../lib/messages";

function Bubble({ message, userName }: { message: Message; userName: string }) {
  const [expiredText, setExpiredText] = useState<string | null>(null);
  useEffect(() => {
    if (message.partial) {
      return;
    }
    const timer = setTimeout(() => {
      setExpiredText(message.text);
    }, 5000);
    return () => {
      clearTimeout(timer);
    };
  }, [message.text, message.partial]);
  if (expiredText === message.text) {
    return null;
  }
  return (
    <div className={`bubble ${message.role} in`}>
      <div className="bubble-role">
        {message.role === "user" ? userName : message.role === "tool" ? "Herramienta" : "Vocero"}
      </div>
      {message.role === "assistant" ? (
        <div
          className="bubble-body markdown-content"
          dangerouslySetInnerHTML={{ __html: renderMarkdown(message.text) }}
        />
      ) : (
        <div className="bubble-body">{message.role === "tool" ? message.toolName : message.text}</div>
      )}
    </div>
  );
}
export const Bubbles = memo(function Bubbles({ messages, userName }: { messages: Message[]; userName: string }) {
  return (
    <div className="bubble-stack" aria-hidden="true">
      {messages.slice(-3).map((message) => (
        <Bubble key={message.id} message={message} userName={userName} />
      ))}
    </div>
  );
});