feat: chat

components/chat/message-ticks.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+/**
+ * Delivery ticks for your own messages: one for sent, two for delivered, two
+ * in blue for read.
+ *
+ * "Read" means read by everyone — the cursors behind it are the minimum across
+ * the other participants, so a group only turns blue once the last member has
+ * caught up.
+ */
+
+import { Check, CheckCheck } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { TickState } from "@/lib/chat-format";
+
+const LABEL: Record<TickState, string> = {
+  sent: "Sent",
+  delivered: "Delivered",
+  read: "Read by everyone",
+};
+
+export function MessageTicks({
+  state,
+  className,
+}: {
+  state: TickState;
+  className?: string;
+}) {
+  const Icon = state === "sent" ? Check : CheckCheck;
+  return (
+    <Icon
+      role="img"
+      aria-label={LABEL[state]}
+      className={cn(
+        "size-3.5 shrink-0",
+        state === "read" ? "text-sky-500" : "text-muted-foreground",
+        className,
+      )}
+    />
+  );
+}