prime-ui-kit 0.10.0 → 0.11.0

package/src/components/message/examples/author.tsx

@@ -0,0 +1,74 @@
+/** A group chat's run of one author: the first message opens with the name in the author's hue, a crown and the member's tag, the last one shows the avatar in the gutter; another author with initials only, a long name that ellipsizes before its tag, a header on a pill over a photo, and your own reply — `Message.Author`, `tag`, `Message.AuthorIcon`, `Message.Avatar`, `position`, `hueOf`. */
+import { Avatar, hueOf, Icon, Message } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const OLEG_PHOTO =
+  "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop";
+const ANNA_PHOTO =
+  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";
+
+const OLEG_RUN = [
+  { position: "first", time: "09:15", text: "Релиз 2.4 переносим на четверг." },
+  { position: "middle", time: "09:16", text: "Шаблон письма клиентам уже в базе знаний." },
+  { position: "last", time: "09:17", text: "Отправлю до обеда." },
+] as const;
+
+export default function MessageAuthorExample() {
+  return (
+    <div className={styles.thread}>
+      {OLEG_RUN.map((message) => (
+        <Message.Root key={message.time} position={message.position} time={message.time}>
+          <Message.Avatar>
+            <Avatar.Root color={hueOf("oleg")}>
+              <Avatar.Image src={OLEG_PHOTO} alt="" />
+              <Avatar.Fallback>ОС</Avatar.Fallback>
+            </Avatar.Root>
+          </Message.Avatar>
+          <Message.Author color={hueOf("oleg")} tag="Админ">
+            Олег Смирнов
+            <Message.AuthorIcon>
+              <Icon name="object.crown" />
+            </Message.AuthorIcon>
+          </Message.Author>
+          <Message.Text>{message.text}</Message.Text>
+        </Message.Root>
+      ))}
+      <Message.Root time="09:20">
+        <Message.Avatar>
+          <Avatar.Root color={hueOf("irina")}>
+            <Avatar.Fallback>ИБ</Avatar.Fallback>
+          </Avatar.Root>
+        </Message.Avatar>
+        <Message.Author color={hueOf("irina")} tag="Бухгалтерия">
+          Ирина Белова-Константинопольская, главный бухгалтер
+        </Message.Author>
+        <Message.Text>Акты сверки после релиза.</Message.Text>
+      </Message.Root>
+      <Message.Root time="09:24">
+        <Message.Avatar>
+          <Avatar.Root color={hueOf("anna")}>
+            <Avatar.Image src={ANNA_PHOTO} alt="" />
+            <Avatar.Fallback>АК</Avatar.Fallback>
+          </Avatar.Root>
+        </Message.Avatar>
+        <Message.Author color={hueOf("anna")} tag="Логистика">
+          Анна Котова
+        </Message.Author>
+        <Message.Media
+          items={[
+            {
+              src: "https://picsum.photos/seed/dock-gate/800/600",
+              width: 800,
+              height: 600,
+              alt: "Ворота рампы",
+            },
+          ]}
+        />
+      </Message.Root>
+      <Message.Root direction="outgoing" time="09:30" status="read">
+        <Message.Text>Принято, обновлю календарь релизов.</Message.Text>
+      </Message.Root>
+    </div>
+  );
+}

package/src/components/message/examples/contact.tsx

@@ -0,0 +1,24 @@
+/** A shared contact: initials or a photo, name and phone, with the actions to write or save — `Message.Contact`, `phone`. */
+import { Button, Message } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function MessageContactExample() {
+  return (
+    <div className={styles.thread}>
+      <Message.Root direction="incoming" time="11:20">
+        <Message.Text>Вот контакт бухгалтера, она пришлёт акты.</Message.Text>
+      </Message.Root>
+      <Message.Root direction="incoming" time="11:20">
+        <Message.Contact name="Ирина Белова" phone="+7 916 204-18-77" color="pink">
+          <Button.Root variant="soft" tone="neutral" size="s">
+            Написать
+          </Button.Root>
+          <Button.Root variant="ghost" tone="neutral" size="s">
+            Добавить
+          </Button.Root>
+        </Message.Contact>
+      </Message.Root>
+    </div>
+  );
+}

package/src/components/message/examples/context-menu.tsx

@@ -0,0 +1,71 @@
+/** Long press: the reaction bar above the message and its menu below — a right click opens the menu, a long hover only the bar, `R` and Shift+F10 from the keyboard — `Message.Menu`, `onReactionToggle`. */
+import { Dropdown, Icon, Message, type MessageReaction } from "prime-ui-kit";
+import * as React from "react";
+
+const REACTIONS: MessageReaction[] = [{ emoji: "🔥", count: 2 }];
+
+export default function MessageContextMenuExample() {
+  const [reactions, setReactions] = React.useState(REACTIONS);
+
+  const toggle = (emoji: string) =>
+    setReactions((current) => {
+      const own = current.find((reaction) => reaction.emoji === emoji);
+      if (!own) return [...current, { emoji, count: 1, selected: true }];
+      return current
+        .map((reaction) =>
+          reaction.emoji === emoji
+            ? {
+                ...reaction,
+                selected: !reaction.selected,
+                count: reaction.count + (reaction.selected ? -1 : 1),
+              }
+            : reaction,
+        )
+        .filter((reaction) => reaction.count > 0);
+    });
+
+  return (
+    <Message.Root value="m1" time="20:19" onReactionToggle={toggle}>
+      <Message.Text>Сентябрь и декабрь — самые продающие месяцы</Message.Text>
+      <Message.Reactions items={reactions} />
+      <Message.Menu>
+        <Dropdown.Item>
+          <Dropdown.ItemIcon>
+            <Icon name="action.reply" />
+          </Dropdown.ItemIcon>
+          Ответить
+        </Dropdown.Item>
+        <Dropdown.Item>
+          <Dropdown.ItemIcon>
+            <Icon name="action.copy" />
+          </Dropdown.ItemIcon>
+          Скопировать
+        </Dropdown.Item>
+        <Dropdown.Item>
+          <Dropdown.ItemIcon>
+            <Icon name="action.pin" />
+          </Dropdown.ItemIcon>
+          Закрепить
+        </Dropdown.Item>
+        <Dropdown.Item>
+          <Dropdown.ItemIcon>
+            <Icon name="action.forward" />
+          </Dropdown.ItemIcon>
+          Переслать
+        </Dropdown.Item>
+        <Dropdown.Item>
+          <Dropdown.ItemIcon>
+            <Icon name="action.report" />
+          </Dropdown.ItemIcon>
+          Пожаловаться
+        </Dropdown.Item>
+        <Dropdown.Item tone="danger">
+          <Dropdown.ItemIcon>
+            <Icon name="action.delete" />
+          </Dropdown.ItemIcon>
+          Удалить
+        </Dropdown.Item>
+      </Message.Menu>
+    </Message.Root>
+  );
+}

package/src/components/message/examples/examples.module.css

@@ -0,0 +1,18 @@
+/* A conversation column: messages are rows as wide as the column. */
+.thread {
+  inline-size: 100%;
+}
+
+/* A phone-width stage: the messages at 320px. */
+.phone {
+  inline-size: min(100%, calc(var(--prime-space-20) * 4));
+}
+
+/* typing.tsx: the conversation, and its control apart under it. */
+.stage {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--prime-space-4);
+  inline-size: 100%;
+}

package/src/components/message/examples/file.tsx

@@ -0,0 +1,79 @@
+/** Documents in a chat: a download link, a file with a picture, a large file fetched from its tile, an upload in flight with its share and cancel, and a failed one with a retry — `Message.File`, `href`, `preview`, `transfer`, `transferProgress`, `transferDirection`, `onDownload`. */
+import { Message, type TransferState } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function MessageFileExample() {
+  const [progress, setProgress] = React.useState(0.1);
+  const [failed, setFailed] = React.useState(true);
+  const [estimate, setEstimate] = React.useState<TransferState>("remote");
+
+  React.useEffect(() => {
+    const timer = window.setInterval(
+      () => setProgress((current) => (current >= 1 ? 0.1 : current + 0.15)),
+      700,
+    );
+    return () => window.clearInterval(timer);
+  }, []);
+
+  // The stand-in fetch of the estimate: in flight for a moment, then through.
+  React.useEffect(() => {
+    if (estimate !== "loading") return;
+    const timer = window.setTimeout(() => setEstimate("done"), 2400);
+    return () => window.clearTimeout(timer);
+  }, [estimate]);
+
+  return (
+    <div className={styles.thread}>
+      <Message.Root direction="incoming" time="15:02">
+        <Message.File
+          name="Договор поставки №418.pdf"
+          fileSize={1_258_291}
+          href="https://prime.app/files/contract-418.pdf"
+        />
+      </Message.Root>
+      <Message.Root direction="incoming" time="15:03">
+        <Message.File
+          name="Схема проезда.png"
+          fileSize={482_000}
+          href="https://prime.app/files/route.png"
+          preview="https://picsum.photos/seed/route-map/160/160"
+        />
+      </Message.Root>
+      <Message.Root direction="incoming" time="15:05">
+        <Message.File
+          name="Смета на монтаж.xlsx"
+          fileSize={24_117_248}
+          href={estimate === "done" ? "https://prime.app/files/estimate.xlsx" : undefined}
+          transfer={estimate}
+          transferDirection="download"
+          onDownload={() => setEstimate("loading")}
+          onCancel={() => setEstimate("remote")}
+        />
+      </Message.Root>
+      <Message.Root direction="outgoing" position="first" time="15:10" status="sending">
+        <Message.File
+          name="Спецификация к договору.xlsx"
+          fileSize={3_670_016}
+          transfer="loading"
+          transferProgress={Math.min(progress, 1)}
+          onCancel={() => setProgress(0.1)}
+        />
+      </Message.Root>
+      <Message.Root
+        direction="outgoing"
+        position="last"
+        time="15:11"
+        status={failed ? "failed" : "sent"}
+      >
+        <Message.File
+          name="Акт приёмки.docx"
+          fileSize={96_000}
+          transfer={failed ? "failed" : "done"}
+          onRetry={() => setFailed(false)}
+        />
+      </Message.Root>
+    </div>
+  );
+}

package/src/components/message/examples/kinds.tsx

@@ -0,0 +1,93 @@
+/** Every kind of message in its shell, both directions, single and in runs: text bubbles, pictures and circles as blocks, a caption bubble, voice, file, contact, place and link cards, reactions inside a bubble and under a picture — `Message.Media`, `VideoNote`, `Message.File`, `Message.Contact`, `Message.Location`, `Message.LinkPreview`, `VoicePlayer`. */
+import { Button, Message, type MessageReaction, VideoNote, VoicePlayer } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const AUDIO = "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3";
+const VIDEO = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+const MAP = "https://tile.openstreetmap.org/15/19808/10244.png";
+const WAVE = [0.3, 0.6, 0.4, 0.8, 0.5, 0.9, 0.6, 0.35, 0.7, 0.5, 0.3, 0.6, 0.8, 0.45, 0.25, 0.5];
+
+const LIKED: MessageReaction[] = [{ emoji: "👍", count: 2, selected: true }];
+const FIRE: MessageReaction[] = [{ emoji: "🔥", count: 1 }];
+
+const photo = (seed: string, width: number, height: number, alt: string) => ({
+  src: `https://picsum.photos/seed/${seed}/${width}/${height}`,
+  width,
+  height,
+  alt,
+});
+
+export default function MessageKindsExample() {
+  return (
+    <div className={styles.thread}>
+      <Message.Root direction="incoming" position="first" time="09:10">
+        <Message.Text>Привет! Пришлю всё по складу одним заходом.</Message.Text>
+      </Message.Root>
+      <Message.Root direction="incoming" position="middle" time="09:10">
+        <Message.Media items={[photo("rack-front", 800, 600, "Стеллажи, вид спереди")]} />
+      </Message.Root>
+      <Message.Root direction="incoming" position="last" time="09:11">
+        <Message.Media
+          items={[
+            photo("rack-a", 600, 800, "Ряд А"),
+            photo("rack-b", 800, 600, "Ряд Б"),
+            photo("rack-c", 800, 600, "Ряд В"),
+          ]}
+        />
+        <Message.Reactions items={FIRE} />
+      </Message.Root>
+      <Message.Root direction="outgoing" position="first" time="09:12" status="read">
+        <Message.Media items={[photo("dock-gate", 800, 600, "Ворота рампы")]} />
+        <Message.Text>Это ворота рампы после ремонта — подпись под фото.</Message.Text>
+      </Message.Root>
+      <Message.Root direction="outgoing" position="last" time="09:12" status="read">
+        <Message.Text>Ок</Message.Text>
+        <Message.Reactions items={LIKED} />
+      </Message.Root>
+      <Message.Root direction="incoming" time="09:14">
+        <VideoNote src={VIDEO} duration={6} />
+      </Message.Root>
+      <Message.Root direction="outgoing" time="09:15" status="read">
+        <VideoNote src={VIDEO} duration={6} />
+      </Message.Root>
+      <Message.Root direction="incoming" time="09:16">
+        <VoicePlayer src={AUDIO} waveform={WAVE} duration={21} unplayed />
+      </Message.Root>
+      <Message.Root direction="outgoing" time="09:17" status="sent">
+        <VoicePlayer src={AUDIO} waveform={WAVE} duration={9} />
+      </Message.Root>
+      <Message.Root direction="incoming" time="09:18">
+        <Message.File
+          name="Акт приёмки №52.pdf"
+          fileSize={845_000}
+          href="https://prime.app/files/act-52.pdf"
+        />
+      </Message.Root>
+      <Message.Root direction="outgoing" time="09:19" status="read">
+        <Message.Contact name="Дмитрий Орлов" phone="+7 916 204-18-77" color="teal">
+          <Button.Root variant="soft" tone="neutral" size="s">
+            Написать
+          </Button.Root>
+        </Message.Contact>
+      </Message.Root>
+      <Message.Root direction="incoming" time="09:20">
+        <Message.Location
+          src={MAP}
+          href="https://www.openstreetmap.org/#map=16/55.7512/37.6184"
+          title="Склад «Центральный»"
+          address="Москва, ул. Складочная, 1, стр. 6"
+        />
+      </Message.Root>
+      <Message.Root direction="outgoing" time="09:21" status="sending">
+        <Message.Text>Регламент приёмки: https://prime.app/wiki/warehouse-intake</Message.Text>
+        <Message.LinkPreview
+          href="https://prime.app/wiki/warehouse-intake"
+          site="База знаний"
+          title="Регламент приёмки на складе"
+          description="Сроки разгрузки, акты расхождений и фотофиксация паллет."
+        />
+      </Message.Root>
+    </div>
+  );
+}

package/src/components/message/examples/link-preview.tsx

@@ -0,0 +1,17 @@
+/** A message with a link and the card of the page under it: site, title, description and picture — `Message.LinkPreview`, `site`, `image`. */
+import { Message } from "prime-ui-kit";
+
+export default function MessageLinkPreviewExample() {
+  return (
+    <Message.Root direction="outgoing" time="18:02" status="read">
+      <Message.Text>Наш кейс опубликовали: https://prime.app/blog/vector-case</Message.Text>
+      <Message.LinkPreview
+        href="https://prime.app/blog/vector-case"
+        site="Блог Prime"
+        title="Как «Вектор» сократил закрытие месяца до двух дней"
+        description="Автоматическая сверка счетов, выгрузка в 1С и отчёты для финансового директора."
+        image="https://picsum.photos/seed/vector-case/640/360"
+      />
+    </Message.Root>
+  );
+}

package/src/components/message/examples/location.tsx

@@ -0,0 +1,30 @@
+/** A place on a map picture from your map service with a pin, the place and its address, and a live location of a courier on its way — `Message.Location`, `href`, `live`. */
+import { Message } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const MAP = "https://tile.openstreetmap.org/15/19808/10244.png";
+
+export default function MessageLocationExample() {
+  return (
+    <div className={styles.thread}>
+      <Message.Root direction="incoming" time="08:55">
+        <Message.Location
+          src={MAP}
+          href="https://www.openstreetmap.org/#map=16/55.7512/37.6184"
+          title="Склад «Центральный»"
+          address="Москва, ул. Складочная, 1, стр. 6"
+        />
+      </Message.Root>
+      <Message.Root direction="incoming" time="09:30">
+        <Message.Location
+          src={MAP}
+          href="https://www.openstreetmap.org/#map=16/55.7512/37.6184"
+          title="Курьер Дмитрий"
+          address="Обновлено минуту назад"
+          live
+        />
+      </Message.Root>
+    </div>
+  );
+}

package/src/components/message/examples/media.tsx

@@ -0,0 +1,93 @@
+/** Captions under a photo, a tall portrait, an album and a video, each as wide as its media; an album with a video laid out as tiles, an outgoing album with neutral gaps and a photo still uploading with its ring and cancel; a tile opens the album in the viewer — `Message.Media`, `items`, `onCancel`. */
+import { type GalleryItem, Message } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const photo = (seed: string, width: number, height: number, alt: string): GalleryItem => ({
+  src: `https://picsum.photos/seed/${seed}/${width}/${height}`,
+  width,
+  height,
+  alt,
+});
+
+const GATE = [photo("warehouse-gate", 800, 600, "Ворота склада после ремонта")];
+
+const ALBUM: GalleryItem[] = [
+  photo("shelf-a", 600, 800, "Стеллаж А"),
+  photo("shelf-b", 800, 600, "Стеллаж Б"),
+  {
+    type: "video",
+    src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+    width: 1280,
+    height: 720,
+    duration: 6,
+    alt: "Проезд к рампе",
+  },
+  photo("loading-bay", 800, 500, "Зона погрузки"),
+  photo("office-desk", 600, 600, "Рабочее место кладовщика"),
+];
+
+const SEAL = [photo("seal-portrait", 600, 1000, "Пломба на воротах")];
+
+const CLIP: GalleryItem[] = [
+  {
+    type: "video",
+    src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+    width: 1280,
+    height: 720,
+    duration: 6,
+    alt: "Обход рампы",
+  },
+];
+
+const REPORT = [
+  photo("pallet-a", 800, 600, "Паллета 1"),
+  photo("pallet-b", 800, 600, "Паллета 2"),
+  photo("pallet-c", 600, 800, "Паллета 3"),
+];
+
+export default function MessageMediaExample() {
+  const [uploading, setUploading] = React.useState(true);
+
+  return (
+    <div className={styles.thread}>
+      <Message.Root direction="incoming" time="09:12">
+        <Message.Media items={GATE} />
+        <Message.Text>Ворота отремонтировали, можно принимать фуры.</Message.Text>
+      </Message.Root>
+      <Message.Root direction="incoming" time="09:15">
+        <Message.Media items={ALBUM} />
+      </Message.Root>
+      <Message.Root direction="outgoing" time="09:16" status="read">
+        <Message.Media items={SEAL} />
+        <Message.Text>Пломба цела.</Message.Text>
+      </Message.Root>
+      <Message.Root direction="incoming" time="09:17">
+        <Message.Media items={CLIP} />
+        <Message.Text>
+          Обход рампы перед приёмкой: третья секция стеллажей свободна, паллеты можно ставить сразу
+          после разгрузки, накладные я уже подписала и отправила в бухгалтерию.
+        </Message.Text>
+      </Message.Root>
+      <Message.Root direction="outgoing" time="09:18" status="read">
+        <Message.Media items={REPORT} />
+        <Message.Text>Фотоотчёт по паллетам для «ТехноСнаб».</Message.Text>
+      </Message.Root>
+      {uploading ? (
+        <Message.Root direction="outgoing" time="09:20" status="sending">
+          <Message.Media
+            items={[
+              {
+                ...photo("invoice-scan", 600, 800, "Скан накладной"),
+                transfer: "loading",
+                transferProgress: 0.42,
+              },
+            ]}
+            onCancel={() => setUploading(false)}
+          />
+        </Message.Root>
+      ) : null}
+    </div>
+  );
+}

package/src/components/message/examples/narrow.tsx

@@ -0,0 +1,29 @@
+/** At phone width bubbles take up to 85% of the chat, long words and links wrap inside, an album keeps its rows — `Message.Root`, `Message.Media`. */
+import { Message } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const ALBUM = [
+  { src: "https://picsum.photos/seed/pallet-1/600/600", width: 600, height: 600, alt: "Паллета 1" },
+  { src: "https://picsum.photos/seed/pallet-2/600/600", width: 600, height: 600, alt: "Паллета 2" },
+  { src: "https://picsum.photos/seed/pallet-3/600/600", width: 600, height: 600, alt: "Паллета 3" },
+];
+
+export default function MessageNarrowExample() {
+  return (
+    <div className={styles.phone}>
+      <Message.Root direction="incoming" time="07:58">
+        <Message.Text>
+          Паллеты для «ТехноСнаб» собраны, накладная
+          https://prime.app/warehouse/waybills/2026-10-08/TS-00418 в системе.
+        </Message.Text>
+      </Message.Root>
+      <Message.Root direction="incoming" time="07:59">
+        <Message.Media items={ALBUM} />
+      </Message.Root>
+      <Message.Root direction="outgoing" time="08:03" status="read">
+        <Message.Text>Отлично, машина будет к девяти.</Message.Text>
+      </Message.Root>
+    </div>
+  );
+}

package/src/components/message/examples/overview.tsx

@@ -0,0 +1,52 @@
+/** A short exchange with a client: an incoming bubble and a run of two outgoing ones ending in the tail, the time and delivery ticks in the corner, a reply quote and a reaction you can toggle — `Message.Root`, `direction`, `position`, `time`, `status`, `Message.Text`, `Message.Reply`, `Message.Reactions`. */
+import { Message, type MessageReaction } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const LIKED: MessageReaction[] = [{ emoji: "👍", count: 1 }];
+
+export default function MessageOverviewExample() {
+  const [reactions, setReactions] = React.useState(LIKED);
+
+  const toggle = (emoji: string) =>
+    setReactions((current) => {
+      const own = current.find((reaction) => reaction.emoji === emoji);
+      if (!own) return [...current, { emoji, count: 1, selected: true }];
+      return current
+        .map((reaction) =>
+          reaction.emoji === emoji
+            ? {
+                ...reaction,
+                selected: !reaction.selected,
+                count: reaction.count + (reaction.selected ? -1 : 1),
+              }
+            : reaction,
+        )
+        .filter((reaction) => reaction.count > 0);
+    });
+
+  return (
+    <div className={styles.thread}>
+      <Message.Root direction="incoming" time="14:02">
+        <Message.Text>Добрый день! Счёт INV-2048 по заказу № 4821 пришёл без НДС.</Message.Text>
+      </Message.Root>
+      <Message.Root direction="outgoing" position="first" time="14:05" status="read">
+        <Message.Reply author="Игорь Петров" color="orange">
+          Счёт INV-2048 по заказу № 4821 пришёл без НДС.
+        </Message.Reply>
+        <Message.Text>Проверили — исправленный счёт уже у вас на почте.</Message.Text>
+      </Message.Root>
+      <Message.Root
+        direction="outgoing"
+        position="last"
+        time="14:05"
+        status="sent"
+        onReactionToggle={toggle}
+      >
+        <Message.Text>Если нужно, пришлю акт сверки.</Message.Text>
+        <Message.Reactions items={reactions} />
+      </Message.Root>
+    </div>
+  );
+}

package/src/components/message/examples/reactions.tsx

@@ -0,0 +1,73 @@
+/** Reactions under a message: each chip shows who reacted — up to three avatars, from four on two and «+N» — and a press on a chip, or a double tap on the message, puts or takes back your own at once while the request runs behind it — `Message.Reactions`, `users`, `onReactionToggle`. */
+import { Message, type MessageReaction, type MessageUser } from "prime-ui-kit";
+import * as React from "react";
+
+const ME: MessageUser = {
+  id: "me",
+  name: "Вы",
+  src: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=128&h=128&fit=crop",
+};
+
+const PETR: MessageUser = {
+  id: "petr",
+  name: "Пётр Соколов",
+  src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop",
+};
+const DMITRY: MessageUser = {
+  id: "dmitry",
+  name: "Дмитрий Орлов",
+  src: "https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=128&h=128&fit=crop",
+};
+const ANNA: MessageUser = {
+  id: "anna",
+  name: "Анна Котова",
+  src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop",
+};
+const OLGA: MessageUser = { id: "olga", name: "Ольга Миронова", color: "pink" };
+
+const INITIAL: MessageReaction[] = [
+  { emoji: "🎉", count: 5, selected: true, users: [ME, PETR, ANNA, DMITRY, OLGA] },
+  { emoji: "👍", count: 3, users: [DMITRY, ANNA, PETR] },
+  { emoji: "🚀", count: 1, users: [OLGA] },
+];
+
+const SAVE_MS = 400;
+
+/** The reader's reaction put or taken back: the count, the flag and the reader among `users`. */
+const toggleOwn = (reactions: MessageReaction[], emoji: string): MessageReaction[] => {
+  const own = reactions.find((reaction) => reaction.emoji === emoji);
+  if (!own) return [...reactions, { emoji, count: 1, selected: true, users: [ME] }];
+  return reactions
+    .map((reaction) => {
+      if (reaction.emoji !== emoji) return reaction;
+      const others = (reaction.users ?? []).filter((user) => user.id !== ME.id);
+      return {
+        ...reaction,
+        selected: !reaction.selected,
+        count: reaction.count + (reaction.selected ? -1 : 1),
+        users: reaction.selected ? others : [...others, ME],
+      };
+    })
+    .filter((reaction) => reaction.count > 0);
+};
+
+export default function MessageReactionsExample() {
+  const [reactions, setReactions] = React.useState(INITIAL);
+
+  // The server confirms after a moment; the chip has shown the new state since the press.
+  const toggle = (emoji: string) =>
+    new Promise<void>((resolve) => {
+      window.setTimeout(() => {
+        setReactions((current) => toggleOwn(current, emoji));
+        resolve();
+      }, SAVE_MS);
+    });
+
+  return (
+    <Message.Root time="17:40" onReactionToggle={toggle}>
+      <Message.Author color="orange">Мария Лебедева</Message.Author>
+      <Message.Text>Закрыли сделку с «Северным ветром» — 4,2 млн ₽ за год!</Message.Text>
+      <Message.Reactions items={reactions} />
+    </Message.Root>
+  );
+}