Grok Message

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * GrokMessage — a Grok turn. User prompts carry the ❯ marker; the assistant
6 * reply is plain text. Optional wall-clock `time` (e.g. `4:38 PM`) pins to the
7 * right, matching the live CLI transcript.
8 */
9export function GrokMessage({
10  role = "assistant",
11  time,
12  className,
13  children,
14}: {
15  role?: "user" | "assistant";
16  time?: string;
17  className?: string;
18  children: React.ReactNode;
19}) {
20  if (role === "user") {
21    return (
22      <div
23        className={cn(
24          "flex min-w-0 gap-2 font-mono text-[13px] leading-[1.6] text-[#e8e8e8]",
25          className,
26        )}
27      >
28        <span aria-hidden className="shrink-0">
29          ❯
30        </span>
31        <span className="min-w-0 flex-1 break-words">{children}</span>
32        {time ? (
33          <span className="shrink-0 tabular-nums text-[#6c6c6c]">{time}</span>
34        ) : null}
35      </div>
36    );
37  }
38 
39  return (
40    <div
41      className={cn(
42        "flex min-w-0 gap-2 font-mono text-[13px] leading-[1.6] text-[#cfcfd2]",
43        className,
44      )}
45    >
46      <span className="min-w-0 flex-1 break-words">{children}</span>
47      {time ? (
48        <span className="shrink-0 tabular-nums text-[#6c6c6c]">{time}</span>
49      ) : null}
50    </div>
51  );
52}