@yaebal/preview

pnpm add @yaebal/preview

import { renderChat } from "@yaebal/preview";
import { md } from "@yaebal/fmt"; // optional — produces { text, entities }
import { writeFile } from "node:fs/promises";

const svg = renderChat(
  [
    { from: "user", text: "/start", time: "23:33", status: "read" },
    { from: "bot", name: "yaebal", ...md`Hello, **unknown** person`, time: "23:33" },
    { from: "bot", name: "yaebal", photo: [], src: "cat.jpg", caption: "a cat" },
    { from: "bot", name: "yaebal", voice: { duration: 7 } },
    { from: "bot", name: "yaebal", buttons: [["Useless button"]] },
  ],
  { theme: "light", width: 400 },
);

await writeFile("chat.svg", svg); // it's just a string

import { chat } from "@yaebal/preview";

// a chainable alternative to a raw array literal — handy for quick docs/examples
const svg = chat({ theme: "dark" })
  .user("/start", { time: "23:33", status: "read" })
  .bot("hello, unknown person", { name: "yaebal", time: "23:33" })
  .system("today")
  .render();

// real @yaebal/types shapes — hand it a ctx.message almost verbatim, or write a
// minimal fixture by hand: media fields accept a Partial<T>, so { duration: 7 }
// is just as valid as a full Voice object.
// for picture-like media add `src` (URL/data-URI) to show real pixels;
// a file_id has none, so without `src` you get a clean, deterministically-coloured
// placeholder (seeded by the media's own file_unique_id, not by message order).
renderChat([
  { from: "bot", name: "yaebal", photo: [], src: "cat.jpg", spoiler: true },
  { from: "bot", name: "yaebal", video: { width: 640, height: 360, duration: 42 } },
  { from: "bot", name: "yaebal", sticker: { emoji: "🎈" } },
  { from: "bot", name: "yaebal", document: { file_name: "report.pdf", file_size: 81920 } },
  { from: "bot", name: "yaebal", contact: { first_name: "Ann", phone_number: "+1 555" } },
  {
    from: "bot",
    name: "yaebal",
    poll: {
      question: "tabs?",
      options: [
        { text: "yes", voter_count: 7 },
        { text: "no", voter_count: 1 },
      ],
    },
  },
]);

// reply quotes, forwarded headers, reactions, and a link-preview card — all plain
// fields on ChatMessage, no bot required to produce them
renderChat([
  {
    from: "bot",
    name: "yaebal",
    forward: { from: "release notes" },
    text: "@yaebal/preview now speaks reply quotes, reactions, and link previews.",
  },
  {
    from: "bot",
    name: "yaebal",
    reply: { name: "yaebal", text: "@yaebal/preview now speaks reply quotes..." },
    text: "here's the whole tour in one message.",
    reactions: [
      { emoji: "🔥", count: 3, chosen: true },
      { emoji: "👍", count: 1 },
    ],
  },
  {
    from: "bot",
    name: "yaebal",
    webpage: {
      site: "yaebal.mom",
      title: "@yaebal/preview",
      description: "render a telegram-style chat to an svg string — zero deps, zero runtime.",
    },
    text: "docs are here:",
  },
]);

// consecutive messages from the same sender (same "from" + "name") group like
// telegram does: one avatar and one name label for the whole run, and only the
// last bubble in the run gets the pointed tail corner
renderChat([
  { from: "bot", name: "yaebal", text: "first" },
  { from: "bot", name: "yaebal", text: "second" },
  { from: "bot", name: "yaebal", avatar: "🐸", text: "override just this message's avatar" },
]);

// theme accepts a preset name, a full custom Palette, or a preset + point overrides
renderChat(messages, { theme: "dark" });
renderChat(messages, { theme: { in: "#202830", inText: "#e8e8e8" } }); // fully custom palette
renderChat(messages, { theme: "dark", palette: { out: "#204020" } }); // preset + overrides
renderChat(messages, { wallpaper: "#0b0b0b" }); // solid background instead of the two-tone gradient
renderChat(messages, { scale: 2 }); // crisp @2x rasterization (viewBox stays 1x)