Function PreviewMessage

lib/chat/components/message.jsx:250–534

({ message, isLoading, onRetry, onEdit })

}

export function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
  const isUser = message.role === 'user';
  const isSystem = message.role === 'system';
  const [copied, setCopied] = useState(false);
  const [editing, setEditing] = useState(false);
  const [editText, setEditText] = useState('');
  const textareaRef = useRef(null);
  const [showWorking, setShowWorking] = useState(false);

  // Extract text from parts (AI SDK v5+) or fall back to content
  const text =
    message.parts
      ?.filter((p) => p.type === 'text')
      .map((p) => p.text)
      .join('\n') ||
    message.content ||
    '';

  const partsLength = message.parts?.length || 0;
  const textLength = text.length;
  let lastToolPart;
  for (let i = (message.parts?.length || 0) - 1; i >= 0; i--) {
    if (message.parts[i].type?.startsWith('tool-')) { lastToolPart = message.parts[i]; break; }
  }
  const hasRunningTool = (lastToolPart?.state === 'input-streaming' || lastToolPart?.state === 'input-available') || false;

  useEffect(() => {
    if (!isLoading || hasRunningTool) {
      setShowWorking(false);
      return;
    }
    setShowWorking(false);
    const timer = setTimeout(() => setShowWorking(true), 500);
    return () => clearTimeout(timer);
  }, [isLoading, partsLength, textLength, hasRunningTool]);

  // Extract file parts
  const fileParts = message.parts?.filter((p) => p.type === 'file') || [];
  const imageParts = fileParts.filter((p) => p.mediaType?.startsWith('image/'));
  const otherFileParts = fileParts.filter((p) => !p.mediaType?.startsWith('image/'));
  const hasToolParts = message.parts?.some((p) => p.type?.startsWith('tool-')) || false;

  // System messages render as a subtle info banner
  if (isSystem) {
    return (
      <div className="w-full px-4 py-2 rounded-md bg-muted/50 border border-border/50">
        <p className="text-xs text-muted-foreground whitespace-pre-wrap">{text}</p>
      </div>
    );
  }

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  };