Claude Message

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * ClaudeMessage — a conversation turn. User turns render as Claude Code's
6 * full-width prompt row (`❯` + one cell of space, dark background across the
7 * row, white text); assistant turns are plain text.
8 */
9export function ClaudeMessage({
10  role = "assistant",
11  className,
12  children,
13}: {
14  role?: "user" | "assistant";
15  className?: string;
16  children: React.ReactNode;
17}) {
18  if (role === "user") {
19    return (
20      <div
21        className={cn(
22          "flex w-full min-w-0 items-baseline font-mono text-[13px] leading-[1.55]",
23          className,
24        )}
25        style={{ background: "#3a3a3a" }}
26      >
27        <span aria-hidden className="shrink-0" style={{ color: "#4e4e4e" }}>
28          ❯
29        </span>
30        {/* one terminal cell between caret and text — a trailing space inside
31            a flex child collapses, so use an explicit width */}
32        <span aria-hidden className="shrink-0" style={{ display: "inline-block", width: "1ch" }} />
33        <span className="min-w-0 flex-1 break-words" style={{ color: "#ffffff" }}>
34          {children}
35        </span>
36      </div>
37    );
38  }
39  return (
40    <div
41      className={cn("font-mono text-[13px] leading-[1.6] text-[#c0caf5]", className)}
42    >
43      {children}
44    </div>
45  );
46}