prime-ui-kit 0.21.4 → 0.21.5

package/src/components/chat/examples/events.tsx

@@ -0,0 +1,129 @@
+/** What happened to the client, right in the dialog: who took it, a stage it moved to, a manager who joined; events in a row stand as one group, a new one rises in at the end — `isService`, `Chat.Service`, `Chat.ServiceIcon`, `Chat.ServiceChange`, `time`. */
+import { Badge, Button, Card, Chat, Icon, Message } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const NOW = new Date(2026, 9, 15, 11, 0);
+const at = (hour: number, minute: number) => new Date(2026, 9, 15, hour, minute);
+
+type DialogItem =
+  | { id: string; kind: "message"; author: "client" | "agent"; sentAt: Date; text: string }
+  | { id: string; kind: "taken"; sentAt: Date }
+  | { id: string; kind: "stage"; sentAt: Date; from: string; to: string }
+  | { id: string; kind: "joined"; sentAt: Date; manager: string };
+
+const DIALOG: DialogItem[] = [
+  {
+    id: "ev-1",
+    kind: "message",
+    author: "client",
+    sentAt: at(10, 12),
+    text: "Здравствуйте! Ищу склад под аренду, 100–150 м², с 1 ноября.",
+  },
+  { id: "ev-2", kind: "taken", sentAt: at(10, 12) },
+  { id: "ev-3", kind: "stage", sentAt: at(10, 12), from: "Лид", to: "Арендатор" },
+  {
+    id: "ev-4",
+    kind: "message",
+    author: "agent",
+    sentAt: at(10, 13),
+    text: "Добрый день! Есть склад 120 м² на Складской, 4, свободен с 25 октября. Прислать планировку?",
+  },
+  {
+    id: "ev-5",
+    kind: "message",
+    author: "client",
+    sentAt: at(10, 15),
+    text: "Да, и хотелось бы обсудить скидку за год вперёд.",
+  },
+];
+
+const JOINED: DialogItem = {
+  id: "ev-6",
+  kind: "joined",
+  sentAt: at(10, 16),
+  manager: "Анна Котова",
+};
+
+function renderItem(item: DialogItem) {
+  if (item.kind === "taken") {
+    return (
+      <Chat.Service time={item.sentAt}>
+        <Chat.ServiceIcon>
+          <Icon name="object.bot" />
+        </Chat.ServiceIcon>
+        ИИ-агент взял клиента
+      </Chat.Service>
+    );
+  }
+  if (item.kind === "stage") {
+    return (
+      <Chat.Service time={item.sentAt}>
+        <Chat.ServiceIcon>
+          <Icon name="object.funnel" />
+        </Chat.ServiceIcon>
+        ИИ-агент перевёл клиента
+        <Chat.ServiceChange
+          from={<Badge.Root color="gray">{item.from}</Badge.Root>}
+          to={<Badge.Root color="green">{item.to}</Badge.Root>}
+        />
+      </Chat.Service>
+    );
+  }
+  if (item.kind === "joined") {
+    return (
+      <Chat.Service time={item.sentAt}>
+        <Chat.ServiceIcon>
+          <Icon name="object.user" />
+        </Chat.ServiceIcon>
+        Менеджер {item.manager} подключилась к диалогу
+      </Chat.Service>
+    );
+  }
+  return (
+    <Message.Root
+      direction={item.author === "agent" ? "outgoing" : "incoming"}
+      time={item.sentAt}
+      status={item.author === "agent" ? "read" : undefined}
+    >
+      <Message.Text>{item.text}</Message.Text>
+    </Message.Root>
+  );
+}
+
+export default function ChatEventsExample() {
+  const [items, setItems] = React.useState(DIALOG);
+  const joined = items.includes(JOINED);
+
+  return (
+    <div className={styles.live}>
+      <div className={styles.liveBar}>
+        <Button.Root
+          variant="soft"
+          disabled={joined}
+          onClick={() => setItems((current) => [...current, JOINED])}
+        >
+          <Button.Icon>
+            <Icon name="action.addContact" />
+          </Button.Icon>
+          Подключить менеджера
+        </Button.Root>
+      </div>
+      <Card.Root className={styles.short}>
+        <Chat.Root>
+          <Chat.Messages
+            aria-label="Диалог с клиентом «Склад на Складской»"
+            now={NOW}
+            items={items}
+            getKey={(item: DialogItem) => item.id}
+            getAuthor={(item: DialogItem) => (item.kind === "message" ? item.author : "system")}
+            getDate={(item: DialogItem) => item.sentAt}
+            isService={(item: DialogItem) => item.kind !== "message"}
+            renderMessage={renderItem}
+          />
+        </Chat.Root>
+      </Card.Root>
+    </div>
+  );
+}

package/src/components/chat/examples/screen.tsx

@@ -1,6 +1,7 @@
-/** A support messenger as a work screen: the title and the unread count in its top bar, 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`. */
+/** A support messenger as a work screen: the title and the unread count in its top bar, 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, the request's events (an agent took it, its status moved, you joined) between the messages, unread counts from what was seen, and the Composer whose messages rise into the list while the client answers — `items`, `renderMessage`, `isService`, `hasOlder`, `onLoadOlder`, `typing`. */
 import {
   Avatar,
+  Badge,
   Card,
   Chat,
   ChatList,
@@ -28,7 +29,13 @@ type Content =
   | { kind: "text"; text: string }
   | { kind: "media"; items: GalleryItem[]; caption?: string }
   | { kind: "voice"; src: string; waveform: number[]; duration: number }
-  | { kind: "file"; name: string; size: number; href: string };
+  | { kind: "file"; name: string; size: number; href: string }
+  | {
+      kind: "event";
+      icon: "object.bot" | "object.funnel" | "object.user";
+      text: string;
+      change?: { from: string; to: string };
+    };
 
 type ChatMessage = Content & {
   id: string;
@@ -129,6 +136,31 @@ const HISTORY: ChatMessage[] = [
     ],
     caption: "Вот так выглядит",
   },
+  {
+    id: "e1",
+    from: "client",
+    sentAt: at(7, 10, 14),
+    kind: "event",
+    icon: "object.bot",
+    text: "ИИ-агент взял обращение",
+  },
+  {
+    id: "e2",
+    from: "client",
+    sentAt: at(7, 10, 14),
+    kind: "event",
+    icon: "object.funnel",
+    text: "ИИ-агент перевёл обращение",
+    change: { from: "Новое", to: "В работе" },
+  },
+  {
+    id: "e3",
+    from: "me",
+    sentAt: at(7, 10, 19),
+    kind: "event",
+    icon: "object.user",
+    text: "Вы подключились к диалогу",
+  },
   {
     id: "m3",
     from: "me",
@@ -228,6 +260,8 @@ const excerpt = (message: ChatMessage) => {
       );
     case "file":
       return message.name;
+    case "event":
+      return message.text;
   }
 };
 
@@ -260,6 +294,8 @@ const renderContent = (message: ChatMessage) => {
       );
     case "file":
       return <Message.File name={message.name} fileSize={message.size} href={message.href} />;
+    case "event":
+      return null;
   }
 };
 
@@ -522,6 +558,23 @@ export default function ChatScreenExample() {
   // re-renders the one message it touches. A dialog loads its own messages, so a row never
   // outlives the contact it names; a reply's original comes from the list (`entry.find`).
   const renderMessage = (message: ChatMessage, entry: ChatMessageEntry<ChatMessage>) => {
+    // What happened to the request (an agent took it, its status moved, you joined): a row.
+    if (message.kind === "event") {
+      return (
+        <Chat.Service time={message.sentAt}>
+          <Chat.ServiceIcon>
+            <Icon name={message.icon} />
+          </Chat.ServiceIcon>
+          {message.text}
+          {message.change ? (
+            <Chat.ServiceChange
+              from={<Badge.Root color="gray">{message.change.from}</Badge.Root>}
+              to={<Badge.Root color="blue">{message.change.to}</Badge.Root>}
+            />
+          ) : null}
+        </Chat.Service>
+      );
+    }
     const own = message.from === "me";
     const original = message.replyTo ? entry.find(message.replyTo) : undefined;
     return (
@@ -645,6 +698,7 @@ export default function ChatScreenExample() {
                   getKey={(message) => message.id}
                   getAuthor={(message) => message.from}
                   getDate={(message) => message.sentAt}
+                  isService={(message) => message.kind === "event"}
                   renderMessage={renderMessage}
                   unread={FIRST_UNREAD}
                   now={NOW}