Function ChatMessage

components/chat/message.tsx:103–166

({ message, className }: ChatMessageProps)

}

export function ChatMessage({ message, className }: ChatMessageProps) {
  const role = message.role;

  const isUser = role === "user";
  const isAssistant = role === "assistant";
  const isAction = role === "action";
  const isSystem = role === "system";
  const isError = "isError" in message && message.isError;

  if (isSystem) {
    return (
      <div className={cn("w-full flex justify-center", className)}>
        <Badge variant={isError ? "error" : "muted"}>{message.content}</Badge>
      </div>
    );
  }

  if (isAction) {
    return (
      <ActionMessageDisplay
        message={message as ActionChatMessage}
        className={className}
      />
    );
  }

  const getRoleIcon = () => {
    if (isUser) return <User className="h-3 w-3" />;
    if (isAssistant) {
      return <OpenAiLogo className="h-3 w-3" />;
    }
    return <Info className="h-3 w-3" />;
  };

  const roleLabel = isUser ? "You" : isAssistant ? "Assistant" : "System";

  return (
    <div
      className={cn(
        "flex",
        isUser ? "justify-end" : "justify-start",
        className
      )}
    >
      <Card
        className={cn(
          "max-w-[85%] overflow-hidden border",
          messageVariants({ role })
        )}
        variant="slate"
      >
        <CardContent className="p-3">
          <div className="text-xs mb-2 font-mono uppercase tracking-wider text-fg-300 flex items-center gap-1">
            {getRoleIcon()}
            <span>{roleLabel}</span>
          </div>
          <div className="whitespace-pre-wrap break-words font-sans text-sm tracking-wide">
            {message.content}