prime-ui-kit 0.14.0 → 0.15.0

package/dist/skill/{patterns/chat.tsx → reference/components/chat/examples/screen.tsx}

@@ -1,7 +1,7 @@
-/** A support messenger on `Chat`: dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, dates and runs from data, every kind of message, search, pinned messages, replies and edits from the menu with a jump to the quoted message, read receipts and unread counts from what was seen, the typing signal both ways, and the Composer whose messages rise into the list while the client answers. */
+/** A support messenger as a work screen: the title and the unread count in the app header, the dialogs with a search over them beside the conversation (one pane at a time on a phone), history that loads above as you scroll up, the unread band, reply and edit from the menu, the typing signal both ways, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `hasOlder`, `onLoadOlder`, `typing`. */
 import {
+  AppHeader,
   Avatar,
-  Button,
   Card,
   Chat,
   ChatList,
@@ -15,29 +15,21 @@ import {
   hueOf,
   Icon,
   Message,
-  type MessageReaction,
   type MessageStatus,
-  type MessageUser,
   PageContent,
   type UploadContext,
   useUploadQueue,
-  VideoNote,
   VoicePlayer,
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./chat.module.css";
+import styles from "./screen.module.css";
 
 type Content =
   | { kind: "text"; text: string }
   | { kind: "media"; items: GalleryItem[]; caption?: string }
-  | { kind: "voice"; src: string; waveform: number[]; duration: number; transcribable?: boolean }
-  | { kind: "videoNote"; src: string; duration: number; transcript?: string }
-  | { kind: "file"; name: string; size: number; href: string }
-  | { kind: "location"; title: string; address: string }
-  | { kind: "contact"; name: string; phone: string }
-  | { kind: "link"; text: string; href: string; site: string; title: string; description: string }
-  | { kind: "service"; text: string };
+  | { kind: "voice"; src: string; waveform: number[]; duration: number }
+  | { kind: "file"; name: string; size: number; href: string };
 
 type ChatMessage = Content & {
   id: string;
@@ -45,14 +37,15 @@ type ChatMessage = Content & {
   sentAt: Date;
   status?: MessageStatus;
   edited?: boolean;
-  forwardedFrom?: string;
   replyTo?: string;
-  reactions?: MessageReaction[];
 };
 
 type Dialog = {
   id: string;
   name: string;
+  contact: string;
+  /** The contact in the dative, for «Ответ Ирине Беловой». */
+  contactTo: string;
   initials: string;
   unread: number;
   preview: string;
@@ -62,40 +55,12 @@ type Dialog = {
 const NOW = new Date(2026, 9, 8, 15, 0);
 const at = (day: number, hour: number, minute: number) => new Date(2026, 9, day, hour, minute);
 
-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.2, 0.4, 0.7, 0.5, 0.9, 0.6, 0.3, 0.5, 0.8, 0.6, 0.35, 0.55, 0.75, 0.4, 0.25, 0.6, 0.85, 0.5,
-  0.3, 0.45, 0.65, 0.4, 0.2,
-];
-
-/** The reader (the support agent) and the client's contact, as reactors of a chip. */
-const ME: MessageUser = {
-  id: "me",
-  name: "Вы",
-  src: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=128&h=128&fit=crop",
-};
-const CLIENT: MessageUser = {
-  id: "irina",
-  name: "Ирина Белова",
-  src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=128&h=128&fit=crop",
-};
-
-/** The client's reaction to the reply. */
-const LIKE: MessageReaction = { emoji: "👍", count: 1, users: [CLIENT] };
-
-const photo = (seed: string, width: number, height: number, alt: string): GalleryItem => ({
-  src: `https://picsum.photos/seed/${seed}/${width}/${height}`,
-  width,
-  height,
-  alt,
-});
-
 const DIALOGS: Dialog[] = [
   {
     id: "vector",
     name: "ООО «Вектор»",
+    contact: "Ирина Белова",
+    contactTo: "Ирине Беловой",
     initials: "ВК",
     unread: 2,
     preview: "Ок, жду акт",
@@ -104,6 +69,8 @@ const DIALOGS: Dialog[] = [
   {
     id: "granit",
     name: "ООО «Гранит»",
+    contact: "Олег Савин",
+    contactTo: "Олегу Савину",
     initials: "ГР",
     unread: 0,
     preview: "Акт сверки подписан",
@@ -112,6 +79,8 @@ const DIALOGS: Dialog[] = [
   {
     id: "kozlov",
     name: "ИП Козлов",
+    contact: "Андрей Козлов",
+    contactTo: "Андрею Козлову",
     initials: "ИК",
     unread: 1,
     preview: "Подключите ЭДО",
@@ -145,14 +114,20 @@ const HISTORY: ChatMessage[] = [
     sentAt: at(7, 10, 12),
     kind: "text",
     text: "Не можем выгрузить счёт **INV-2048** в 1С, ошибка после «Экспорт».",
-    reactions: [{ emoji: "👀", count: 1, selected: true, users: [ME] }],
   },
   {
     id: "m2",
     from: "client",
     sentAt: at(7, 10, 13),
     kind: "media",
-    items: [photo("export-error", 800, 520, "Окно с ошибкой экспорта")],
+    items: [
+      {
+        src: "https://picsum.photos/seed/export-error/800/520",
+        width: 800,
+        height: 520,
+        alt: "Окно с ошибкой экспорта",
+      },
+    ],
     caption: "Вот так выглядит",
   },
   {
@@ -161,69 +136,26 @@ const HISTORY: ChatMessage[] = [
     sentAt: at(7, 10, 20),
     status: "read",
     kind: "text",
-    text: "Похоже, в карточке не заполнен ИНН. Инструкция: https://prime.app/wiki/requisites",
+    text: "Похоже, в карточке контрагента не заполнен ИНН. Инструкция: https://prime.app/wiki/requisites",
   },
   {
     id: "m4",
-    from: "me",
-    sentAt: at(7, 10, 21),
-    status: "read",
-    kind: "link",
-    text: "И статья о выгрузке:",
-    href: "https://prime.app/blog/export-1c",
-    site: "Блог Prime",
-    title: "Выгрузка счетов в 1С за пять минут",
-    description: "Настройка обмена, реквизиты контрагента и типичные ошибки экспорта.",
-  },
-  {
-    id: "s1",
-    from: "me",
-    sentAt: at(8, 9, 0),
-    kind: "service",
-    text: "Ирина Белова добавила Дмитрия Орлова",
-  },
-  {
-    id: "m5",
     from: "client",
     sentAt: at(8, 9, 40),
-    kind: "media",
-    items: [
-      photo("dock-1", 600, 800, "Рампа 1"),
-      photo("dock-2", 800, 600, "Рампа 2"),
-      photo("dock-3", 800, 600, "Рампа 3"),
-    ],
-  },
-  {
-    id: "m6",
-    from: "client",
-    sentAt: at(8, 9, 41),
-    kind: "videoNote",
-    src: VIDEO,
-    duration: 6,
-    transcript: "Вот рампа номер два, машина встанет сюда задним ходом.",
-  },
-  {
-    id: "m7",
-    from: "client",
-    sentAt: at(8, 9, 43),
-    kind: "voice",
-    src: AUDIO,
-    waveform: WAVE,
-    duration: 18,
-    transcribable: true,
+    kind: "text",
+    text: "Заполнили, счёт выгрузился. Пришлите, пожалуйста, договор на второй склад.",
   },
   {
-    id: "m8",
+    id: "m5",
     from: "me",
     sentAt: at(8, 10, 5),
     status: "read",
-    replyTo: "m7",
+    replyTo: "m4",
     kind: "text",
-    text: "Понял про вторую рампу. Высылаю договор и адрес склада.",
-    reactions: [LIKE],
+    text: "Высылаю договор, акт подготовлю до пятницы.",
   },
   {
-    id: "m9",
+    id: "m6",
     from: "me",
     sentAt: at(8, 10, 6),
     status: "read",
@@ -233,28 +165,16 @@ const HISTORY: ChatMessage[] = [
     href: "https://prime.app/files/contract-418.pdf",
   },
   {
-    id: "m10",
-    from: "me",
-    sentAt: at(8, 10, 6),
-    status: "read",
-    kind: "location",
-    title: "Склад «Центральный»",
-    address: "Москва, ул. Складочная, 1, стр. 6",
-  },
-  {
-    id: "m11",
+    id: "m7",
     from: "client",
     sentAt: at(8, 14, 30),
-    forwardedFrom: "Дмитрий Орлов",
-    kind: "contact",
-    name: "Дмитрий Орлов",
-    phone: "+7 916 204-18-77",
+    kind: "text",
+    text: "Подписали, скан у бухгалтерии.",
   },
-  { id: "m12", from: "client", sentAt: at(8, 14, 31), kind: "text", text: "Ок, жду акт" },
+  { id: "m8", from: "client", sentAt: at(8, 14, 31), kind: "text", text: "Ок, жду акт" },
 ];
 
-const FIRST_UNREAD = "m11";
-const PINNED = ["m9"];
+const FIRST_UNREAD = "m7";
 
 /** What the client answers, one after another. */
 const CLIENT_REPLIES = [
@@ -268,7 +188,6 @@ const MESSAGE_READ_MS = 1500;
 const CLIENT_TYPING_MS = 1800;
 const HISTORY_MS = 900;
 const DIALOG_MS = 800;
-const TRANSCRIBE_MS = 1400;
 
 /** A stand-in for the file server: sends an attachment in a few steps. */
 function sendFile(file: File, { signal, onProgress }: UploadContext): Promise<string> {
@@ -290,29 +209,26 @@ function sendFile(file: File, { signal, onProgress }: UploadContext): Promise<st
 
 const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms));
 
-/** A stand-in for the speech service: the voice message's text, asked for on its first open. */
-const transcribeVoice = () =>
-  wait(TRANSCRIBE_MS).then(
-    () => "Машина будет в девять, водитель позвонит за полчаса. Пропуск заказан на рампу два.",
-  );
+/** «1 непрочитанный», «3 непрочитанных». */
+const unreadLabel = (count: number) => {
+  const tens = count % 100;
+  const ones = count % 10;
+  const word = ones === 1 && tens !== 11 ? "непрочитанный" : "непрочитанных";
+  return count === 0 ? "Всё прочитано" : `${count} ${word}`;
+};
 
 const excerpt = (message: ChatMessage) => {
   switch (message.kind) {
     case "text":
-    case "link":
       return message.text;
     case "voice":
       return "Голосовое сообщение";
-    case "videoNote":
-      return "Видеосообщение";
     case "media":
       return (
         message.caption ?? (message.items.every((item) => item.type === "video") ? "Видео" : "Фото")
       );
     case "file":
       return message.name;
-    default:
-      return "Сообщение";
   }
 };
 
@@ -327,44 +243,15 @@ const albumsOf = (media: readonly ComposerMediaItem[]) =>
 const localSourcesOf = (message: Content): string[] =>
   (message.kind === "media"
     ? message.items.map((item) => item.src)
-    : message.kind === "voice" || message.kind === "videoNote"
+    : message.kind === "voice"
       ? [message.src]
       : []
   ).filter((src) => src.startsWith("blob:"));
 
-/** Puts the reader's reaction or takes it back, with the reader among its `users`. */
-const toggleReactions = (reactions: MessageReaction[], emoji: string): MessageReaction[] =>
-  reactions.some((reaction) => reaction.emoji === emoji)
-    ? 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)
-    : [...reactions, { emoji, count: 1, selected: true, users: [ME] }];
-
 const renderContent = (message: ChatMessage) => {
   switch (message.kind) {
     case "text":
       return <Message.Text>{message.text}</Message.Text>;
-    case "link":
-      return (
-        <>
-          <Message.Text>{message.text}</Message.Text>
-          <Message.LinkPreview
-            href={message.href}
-            site={message.site}
-            title={message.title}
-            description={message.description}
-          />
-        </>
-      );
     case "media":
       return (
         <>
@@ -374,43 +261,16 @@ const renderContent = (message: ChatMessage) => {
       );
     case "voice":
       return (
-        <VoicePlayer
-          src={message.src}
-          waveform={message.waveform}
-          duration={message.duration}
-          onTranscribe={message.transcribable ? transcribeVoice : undefined}
-        />
-      );
-    case "videoNote":
-      return (
-        <VideoNote src={message.src} duration={message.duration} transcript={message.transcript} />
+        <VoicePlayer src={message.src} waveform={message.waveform} duration={message.duration} />
       );
     case "file":
       return <Message.File name={message.name} fileSize={message.size} href={message.href} />;
-    case "location":
-      return (
-        <Message.Location
-          src={MAP}
-          href="https://www.openstreetmap.org/#map=16/55.7512/37.6184"
-          title={message.title}
-          address={message.address}
-        />
-      );
-    case "contact":
-      return (
-        <Message.Contact name={message.name} phone={message.phone} color="teal">
-          <Button.Root variant="soft" tone="neutral" size="s">
-            Написать
-          </Button.Root>
-        </Message.Contact>
-      );
-    default:
-      return null;
   }
 };
 
 type ChatComposerProps = {
   replyTo: ChatMessage | null;
+  replyAuthor: string;
   editing: ChatMessage | null;
   onReplyDismiss: () => void;
   onEditDismiss: () => void;
@@ -424,6 +284,7 @@ type ChatComposerProps = {
 /** The Composer with its upload queue: an upload tick re-renders the composer, not the thread. */
 const ChatComposer = React.memo(function ChatComposer({
   replyTo,
+  replyAuthor,
   editing,
   onReplyDismiss,
   onEditDismiss,
@@ -444,9 +305,8 @@ const ChatComposer = React.memo(function ChatComposer({
 
   // Optimistic: every message is in the list at once with `sending`, so the send returns at once
   // and the field is free for the next one. The bar's `value` says what it answers or edits.
-  // Photos and videos go as albums in the tray's order with the text as their caption, other
-  // files as file messages. The tray's previews are revoked after the send, so an album plays from
-  // its own URLs of the files (the thread lets them go with the message).
+  // Photos and videos go as albums with the text as their caption, other files as file messages.
+  // The tray's previews are revoked after the send, so an album plays from its own URLs.
   const send = ({ text, media, files, replyTo: reply, editOf }: ComposerMessage) => {
     if (editOf) {
       onSave(editOf, text);
@@ -496,7 +356,7 @@ const ChatComposer = React.memo(function ChatComposer({
       <Composer.Attach />
       {replyTo ? (
         <Composer.Context value={replyTo.id} onDismiss={onReplyDismiss}>
-          <Composer.Title>Ответ {replyTo.from === "me" ? "себе" : "Ирине Беловой"}</Composer.Title>
+          <Composer.Title>Ответ {replyTo.from === "me" ? "себе" : replyAuthor}</Composer.Title>
           <Composer.Description>{excerpt(replyTo)}</Composer.Description>
         </Composer.Context>
       ) : null}
@@ -517,14 +377,12 @@ const ChatComposer = React.memo(function ChatComposer({
   );
 });
 
-export default function ChatPattern() {
+export default function ChatScreenExample() {
   const [dialogId, setDialogId] = React.useState<string | null>("vector");
   const [messages, setMessages] = React.useState<ChatMessage[]>(HISTORY);
   const [hasOlder, setHasOlder] = React.useState(true);
   const [replyTo, setReplyTo] = React.useState<ChatMessage | null>(null);
   const [editing, setEditing] = React.useState<ChatMessage | null>(null);
-  const [selected, setSelected] = React.useState<readonly string[] | null>(null);
-  const [pinned, setPinned] = React.useState<readonly string[]>(PINNED);
   const [clientTyping, setClientTyping] = React.useState(false);
   const [unread, setUnread] = React.useState<Record<string, number>>(() =>
     Object.fromEntries(DIALOGS.map((item) => [item.id, item.unread])),
@@ -550,6 +408,7 @@ export default function ChatPattern() {
     };
   }, []);
   const dialog = DIALOGS.find((item) => item.id === dialogId) ?? DIALOGS[0];
+  const unreadTotal = Object.values(unread).reduce((sum, count) => sum + count, 0);
   /** The search over the dialogs: by name and by the last message a row shows. */
   const [dialogQuery, setDialogQuery] = React.useState("");
   // The open dialog shows its live last message; the others their stored one.
@@ -660,25 +519,11 @@ export default function ChatPattern() {
     setReplyTo(message);
   }, []);
 
-  const togglePin = React.useCallback(
-    (id: string) =>
-      setPinned((current) =>
-        current.includes(id) ? current.filter((item) => item !== id) : [...current, id],
-      ),
-    [],
-  );
-
   const reportActivity = React.useCallback((activity: ComposerActivity | null) => {
     // A real chat sends it over its socket; here the simulated client reads it.
     myActivity.current = activity;
   }, []);
 
-  const toggleReaction = React.useCallback(
-    (id: string, emoji: string) =>
-      patch(id, (message) => ({ reactions: toggleReactions(message.reactions ?? [], emoji) })),
-    [patch],
-  );
-
   const remove = React.useCallback(
     (id: string) => setMessages((current) => current.filter((item) => item.id !== id)),
     [],
@@ -687,21 +532,16 @@ export default function ChatPattern() {
   const dismissReply = React.useCallback(() => setReplyTo(null), []);
   const dismissEdit = React.useCallback(() => setEditing(null), []);
 
-  const pinnedItems = pinned.flatMap((id) => {
-    const message = messages.find((item) => item.id === id);
-    return message ? [{ value: id, text: excerpt(message) }] : [];
-  });
-
   // The newest messages for what a row looks up (a reply's original), without making every row
   // render again when one message changes.
   const messagesRef = React.useRef(messages);
   messagesRef.current = messages;
+  const contact = dialog.contact;
 
-  // A message renders again only when its data, its place or this function change: a reaction, a
-  // status or an upload tick re-renders the one message it touches.
+  // A message renders again only when its data, its place or this function change: a status or an
+  // upload tick re-renders the one message it touches.
   const renderMessage = React.useCallback(
     (message: ChatMessage) => {
-      if (message.kind === "service") return <Chat.Service>{message.text}</Chat.Service>;
       const own = message.from === "me";
       const original = message.replyTo
         ? messagesRef.current.find((item) => item.id === message.replyTo)
@@ -712,19 +552,13 @@ export default function ChatPattern() {
           time={message.sentAt}
           status={message.status}
           edited={message.edited}
-          onReactionToggle={(emoji) => toggleReaction(message.id, emoji)}
         >
-          {message.forwardedFrom ? <Message.Forwarded from={message.forwardedFrom} /> : null}
           {original ? (
-            <Message.Reply
-              author={original.from === "me" ? "Вы" : "Ирина Белова"}
-              target={original.id}
-            >
+            <Message.Reply author={original.from === "me" ? "Вы" : contact} target={original.id}>
               {excerpt(original)}
             </Message.Reply>
           ) : null}
           {renderContent(message)}
-          {message.reactions?.length ? <Message.Reactions items={message.reactions} /> : null}
           <Message.Menu>
             <Dropdown.Item onSelect={() => startReply(message)}>
               <Dropdown.ItemIcon>
@@ -746,12 +580,6 @@ export default function ChatPattern() {
               </Dropdown.ItemIcon>
               Скопировать
             </Dropdown.Item>
-            <Dropdown.Item onSelect={() => togglePin(message.id)}>
-              <Dropdown.ItemIcon>
-                <Icon name="action.pin" />
-              </Dropdown.ItemIcon>
-              {pinned.includes(message.id) ? "Открепить" : "Закрепить"}
-            </Dropdown.Item>
             {own ? (
               <Dropdown.Item tone="danger" onSelect={() => remove(message.id)}>
                 <Dropdown.ItemIcon>
@@ -764,136 +592,127 @@ export default function ChatPattern() {
         </Message.Root>
       );
     },
-    [pinned, toggleReaction, startReply, startEdit, togglePin, remove],
+    [contact, startReply, startEdit, remove],
   );
 
   return (
-    <PageContent.Root fill>
-      <PageContent.Header>
-        <PageContent.Title>Поддержка</PageContent.Title>
-      </PageContent.Header>
-      <PageContent.Body>
-        <PageContent.Split
-          open={dialogId !== null}
-          onOpenChange={(next) => {
-            if (!next) setDialogId(null);
-          }}
-        >
-          <PageContent.List aria-label="Диалоги">
-            <Card.Root className={styles.paneCard}>
-              <ChatList.Root
-                items={foundDialogs}
-                getKey={(item) => item.id}
-                value={dialogId}
-                onValueChange={setDialogId}
-                search={dialogQuery}
-                onSearchChange={setDialogQuery}
-                now={NOW}
-                renderItem={(item) => {
-                  const last = lastOf(item);
-                  return (
-                    <ChatList.Item
-                      time={last?.sentAt ?? item.at}
-                      status={last?.from === "me" ? last.status : undefined}
-                      unread={unread[item.id] ?? 0}
-                      typing={item.id === dialogId && clientTyping}
-                    >
-                      <ChatList.ItemIcon>
-                        <Avatar.Root color={hueOf(item.id)}>
-                          <Avatar.Fallback>{item.initials}</Avatar.Fallback>
-                          {item.id === "vector" ? <Avatar.Status status="online" /> : null}
-                        </Avatar.Root>
-                      </ChatList.ItemIcon>
-                      <ChatList.ItemText>{item.name}</ChatList.ItemText>
-                      <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
-                        {previewOf(item)}
-                      </ChatList.ItemDescription>
-                    </ChatList.Item>
-                  );
-                }}
-              />
-            </Card.Root>
-          </PageContent.List>
-
-          <PageContent.Detail aria-label="Переписка">
-            <Card.Root className={styles.paneCard}>
-              <Chat.Root typing={clientTyping} selected={selected} onSelectedChange={setSelected}>
-                <Chat.Header>
-                  <PageContent.BackButton />
-                  <Avatar.Root color={hueOf(dialog.id)}>
-                    <Avatar.Fallback>{dialog.initials}</Avatar.Fallback>
-                    <Avatar.Status status="online" />
-                  </Avatar.Root>
-                  <Chat.Title>{dialog.name}</Chat.Title>
-                  <Chat.Description>Ирина Белова · в сети</Chat.Description>
-                  <Chat.Actions>
-                    <Chat.SearchButton />
-                  </Chat.Actions>
-                </Chat.Header>
-                <Chat.Search />
-                <Chat.Pinned items={pinnedItems} onRemove={togglePin} />
-                <Chat.Messages
-                  loading={loadedId !== dialogId}
-                  reader={ME}
-                  items={messages}
-                  getKey={(message) => message.id}
-                  getAuthor={(message) => message.from}
-                  getDate={(message) => message.sentAt}
-                  isService={(message) => message.kind === "service"}
-                  renderMessage={renderMessage}
-                  unread={FIRST_UNREAD}
+    <>
+      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
+          the only h1 and one line of data; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Поддержка
+            <AppHeader.Description>{unreadLabel(unreadTotal)}</AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+      </AppHeader.Root>
+
+      <PageContent.Root fill>
+        <PageContent.Body>
+          <PageContent.Split
+            open={dialogId !== null}
+            onOpenChange={(next) => {
+              if (!next) setDialogId(null);
+            }}
+          >
+            <PageContent.List aria-label="Диалоги">
+              <Card.Root className={styles.paneCard}>
+                <ChatList.Root
+                  items={foundDialogs}
+                  getKey={(item) => item.id}
+                  value={dialogId}
+                  onValueChange={setDialogId}
+                  search={dialogQuery}
+                  onSearchChange={setDialogQuery}
                   now={NOW}
-                  hasOlder={hasOlder}
-                  onLoadOlder={loadOlder}
-                  onNewMessage={(_, { direction }) => {
-                    if (direction !== "incoming" || !dialogId) return;
-                    setUnread((current) => ({
-                      ...current,
-                      [dialogId]: (current[dialogId] ?? 0) + 1,
-                    }));
-                  }}
-                  onRead={(values) => {
-                    if (!dialogId) return;
-                    setUnread((current) => ({
-                      ...current,
-                      [dialogId]: Math.max(0, (current[dialogId] ?? 0) - values.length),
-                    }));
+                  renderItem={(item) => {
+                    const last = lastOf(item);
+                    return (
+                      <ChatList.Item
+                        time={last?.sentAt ?? item.at}
+                        status={last?.from === "me" ? last.status : undefined}
+                        unread={unread[item.id] ?? 0}
+                        typing={item.id === dialogId && clientTyping}
+                      >
+                        <ChatList.ItemIcon>
+                          <Avatar.Root color={hueOf(item.id)}>
+                            <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                            {item.id === "vector" ? <Avatar.Status status="online" /> : null}
+                          </Avatar.Root>
+                        </ChatList.ItemIcon>
+                        <ChatList.ItemText>{item.name}</ChatList.ItemText>
+                        <ChatList.ItemDescription author={last?.from === "me" ? "Вы" : undefined}>
+                          {previewOf(item)}
+                        </ChatList.ItemDescription>
+                      </ChatList.Item>
+                    );
                   }}
-                >
-                  <Chat.SelectionBar>
-                    <Button.Root
-                      variant="soft"
-                      tone="danger"
-                      size="s"
-                      disabled={!selected?.length}
-                      onClick={() => {
-                        setMessages((current) =>
-                          current.filter((item) => !selected?.includes(item.id)),
-                        );
-                        setSelected(null);
-                      }}
-                    >
-                      Удалить
-                    </Button.Root>
-                  </Chat.SelectionBar>
-                </Chat.Messages>
-                <Chat.Footer>
-                  <ChatComposer
-                    replyTo={replyTo}
-                    editing={editing}
-                    onReplyDismiss={dismissReply}
-                    onEditDismiss={dismissEdit}
-                    onEditLast={editLast}
-                    onPost={post}
-                    onSave={save}
-                    onActivityChange={reportActivity}
+                />
+              </Card.Root>
+            </PageContent.List>
+
+            <PageContent.Detail aria-label="Переписка">
+              <Card.Root className={styles.paneCard}>
+                <Chat.Root typing={clientTyping}>
+                  <Chat.Header>
+                    <PageContent.BackButton />
+                    <Avatar.Root color={hueOf(dialog.id)}>
+                      <Avatar.Fallback>{dialog.initials}</Avatar.Fallback>
+                      {dialog.id === "vector" ? <Avatar.Status status="online" /> : null}
+                    </Avatar.Root>
+                    <Chat.Title>{dialog.name}</Chat.Title>
+                    <Chat.Description>{dialog.contact}</Chat.Description>
+                    <Chat.Actions>
+                      <Chat.SearchButton />
+                    </Chat.Actions>
+                  </Chat.Header>
+                  <Chat.Search />
+                  <Chat.Messages
+                    loading={loadedId !== dialogId}
+                    items={messages}
+                    getKey={(message) => message.id}
+                    getAuthor={(message) => message.from}
+                    getDate={(message) => message.sentAt}
+                    renderMessage={renderMessage}
+                    unread={FIRST_UNREAD}
+                    now={NOW}
+                    hasOlder={hasOlder}
+                    onLoadOlder={loadOlder}
+                    onNewMessage={(_, { direction }) => {
+                      if (direction !== "incoming" || !dialogId) return;
+                      setUnread((current) => ({
+                        ...current,
+                        [dialogId]: (current[dialogId] ?? 0) + 1,
+                      }));
+                    }}
+                    onRead={(values) => {
+                      if (!dialogId) return;
+                      setUnread((current) => ({
+                        ...current,
+                        [dialogId]: Math.max(0, (current[dialogId] ?? 0) - values.length),
+                      }));
+                    }}
                   />
-                </Chat.Footer>
-              </Chat.Root>
-            </Card.Root>
-          </PageContent.Detail>
-        </PageContent.Split>
-      </PageContent.Body>
-    </PageContent.Root>
+                  <Chat.Footer>
+                    <ChatComposer
+                      replyTo={replyTo}
+                      replyAuthor={dialog.contactTo}
+                      editing={editing}
+                      onReplyDismiss={dismissReply}
+                      onEditDismiss={dismissEdit}
+                      onEditLast={editLast}
+                      onPost={post}
+                      onSave={save}
+                      onActivityChange={reportActivity}
+                    />
+                  </Chat.Footer>
+                </Chat.Root>
+              </Card.Root>
+            </PageContent.Detail>
+          </PageContent.Split>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
   );
 }