36:T4b87,
/** THE ACCOUNTS, ONCE. Define a person or a bot as a profile and use it anywhere a chat
 *  names someone: `from: ADRIAN` in a group, `chatName: ADRIAN` for a private chat with
 *  him, the bot's DM, the afterlife. The label, the mini avatar, the header, the handle
 *  all come from the one definition. A script can also carry a `people` map and name
 *  them by key (`from: "melon"`), which is what the story below does. */
const ADRIAN: ChatProfile = {
  name: "Adrian",
  handle: "@adriangalilea",
  avatar: "/adriangalilea.jpg",
  avatarVideo: "/adriangalilea.mp4",
}
const XTLDR: ChatProfile = {
  name: "xtldr",
  handle: "@xtldrbot",
  avatar: "/xtldr-bot.jpg",
  bot: true,
}
const PEOPLE: Record<string, ChatProfile> = {
  adrian: ADRIAN,
  melon: { name: "Melon", handle: "@melonflip" },
  xtldr: XTLDR,
}

/** THE SAME TWO DEFINITIONS, TWO CHATS. A private chat WITH Adrian: `chatName: ADRIAN`
 *  puts his photo and profile video in the header. A group where Adrian and the bot are
 *  both senders: `from: ADRIAN`, `from: XTLDR` give each their label and mini avatar, the
 *  bot answering the way it does in a group (someone drops a link, it reacts 👀, types,
 *  summarizes). Nothing about either of them was written twice. */
const PEER: ChatScript = {
  kind: "peer",
  chatName: ADRIAN,
  chatTag: "online",
  messages: [
    { from: ADRIAN, text: "the frameless telegram shipped" },
    {
      from: "me",
      text: "finally",
      reactions: [{ emoji: "🔥", when: "timeline" }],
    },
  ],
  alt: "A private chat with Adrian.",
}
const MANAGED: ChatScript = {
  ...PEER,
  chatTag: "last seen 2 hours ago",
  managedBy: XTLDR,
  messages: [
    ...PEER.messages,
    {
      from: ADRIAN,
      text: "My new keyboard.",
      reactions: [{ emoji: "❤️", count: 1, when: "timeline" }],
    },
    { from: ADRIAN, text: "The old split finally gave out." },
    {
      from: "me",
      text: "That looks so comfortable",
      reply: { from: ADRIAN, text: "My new keyboard." },
    },
    { from: "me", text: "I need to try it sometime" },
    {
      from: ADRIAN,
      text: "It took a little practice, but now I can keep my shoulders relaxed while I work.",
      reactions: [{ emoji: "🔥", count: 2, when: "timeline" }],
    },
    {
      from: ADRIAN,
      text: "Come over and try it. Bring the old one too — we might be able to fix it.",
    },
    { from: "me", text: "Saturday?" },
    {
      from: ADRIAN,
      text: "Perfect. Coffee and keyboards.",
      reactions: [{ emoji: "❤️", count: 1, when: "timeline" }],
    },
  ],
  alt: "A private chat with Adrian, with a management bar and compact message reactions.",
}
const RICK = "youtube.com/watch?v=dQw4w9WgXcQ"
const GROUP: ChatScript = {
  kind: "group",
  chatName: "the garden",
  chatTag: "3 members",
  messages: [
    {
      from: ADRIAN,
      text: RICK,
      preview: {
        site: "YouTube",
        title:
          "Rick Astley - Never Gonna Give You Up (Official Video) (4K Remaster)",
        description: "Rick Astley",
        image: "/xtldr-preview-rick.jpg",
      },
      reactions: [{ emoji: "👀", when: "timeline" }],
    },
    {
      from: XTLDR,
      typing: "xtldr is typing",
      source: RICK,
      blocks: [
        {
          kind: "heading",
          text: "Never Gonna Give You Up: The Eternal Rickroll",
          emoji: "🎵",
        },
        {
          kind: "item",
          text: "Rick Astley's 1987 debut single, a synth-pop classic that became the internet's most famous prank.",
        },
        {
          kind: "item",
          text: "The chorus is a list of promises: never give up, never let down, never run around and desert you.",
          cite: "0:43",
        },
      ],
      meta: {
        label: "🔗 YouTube",
        href: `https://${RICK}`,
        time: "⏱️ 3m 33s saved",
      },
      reactions: [{ emoji: "😂", count: 1 }],
    },
  ],
  alt: "A group: Adrian drops a link, the bot reacts, types, and summarizes it.",
}

<div className="flex flex-wrap items-start justify-center gap-10">
  <Playback clip={chatClip(PEER)} className="w-full max-w-[18rem]">
    <TelegramChat script={PEER} wallpaper={WALL} theme="dark" />
  </Playback>
  <Playback clip={chatClip(GROUP)} className="w-full max-w-[18rem]">
    <TelegramChat script={GROUP} wallpaper={WALL} theme="dark" />
  </Playback>
</div>
35:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$36"}}]