IMessageGlass

"use client";

import { useState } from "react";
import { IMessageGlass, type GlassGroup, type GlassMessage } from "imessage-ui";

const GROUP: GlassGroup = {
  name: "Weekend Plans",
  members: [
    { name: "April", avatar: { initial: "A", gradient: ["#E8B7D4", "#A5BFE1"] as [string, string] } },
    { name: "Michael", avatar: { initial: "M", gradient: ["#B7E1C0", "#6FA97E"] as [string, string] } },
    { name: "Evan", avatar: { initial: "E", gradient: ["#E1CBA5", "#B08D57"] as [string, string] } },
  ],
};

export default function IMessageGlassGroup() {
  const [messages, setMessages] = useState<GlassMessage[]>([
    { id: 0, from: "them", sender: "April", text: "ok so who's actually in for Saturday" },
    { id: 1, from: "them", sender: "Michael", text: "in. what time" },
    { id: 2, from: "me", text: "I can do after 2", replies: 1 },
    // `replyTo` draws iOS's inline-reply connector from message 2 down the
    // gutter to this one (chains of 3+ upgrade to the thread spine).
    { id: 3, from: "them", sender: "Evan", replyTo: 2, text: "same, 2 works" },
    // `burst: true` splits a same-sender run the way iOS does when messages
    // land minutes apart — fresh sender label + its own gutter avatar.
    { id: 4, from: "them", sender: "Evan", text: "wait actually make it 3, I have a thing", burst: true },
  ]);
  const [draft, setDraft] = useState("");
  return (
    <div style={{ width: 390, height: 660, maxWidth: "100%", borderRadius: 28, overflow: "hidden" }}>
      <IMessageGlass
        theme="light"
        group={GROUP}
        messages={messages}
        // In groups, typing carries that member's gutter avatar (no label —
        // iOS shows avatar + thought-bubble only).
        typing={{ sender: "April" }}
        value={draft}
        onChange={setDraft}
        onSend={(text) =>
          setMessages((m) => [...m, { id: Date.now(), from: "me", text }])
        }
        safeTop={24}
        safeBottom={20}
      />
    </div>
  );
}