@rt-tools/ui-kit-v2 0.35.1 → 0.37.0

package/src/rich-editor/lib/components/chat/rt-chat-messenger.scss

@@ -0,0 +1,146 @@
+// Вид мессенджера чата: метки дней, ряд кнопок под полем, пузыри мягкие, свой — цвета действия.
+// Лежит отдельно от стилей чата, чтобы оба файла уместились в предел длины.
+@layer rt-kit.components {
+    .rt-chat {
+        &__day[hidden] {
+            display: none;
+        }
+
+        // Поле ответа мессенджера — рамка кита с рядом действий внутри, по ширине колонки
+        &__composer-prompt {
+            flex: 0 0 auto;
+        }
+
+        &__day {
+            display: flex;
+            justify-content: center;
+            padding-block-end: var(--rt-space-2);
+        }
+
+        &__day-label {
+            padding: var(--rt-space-1) calc(var(--rt-space-2) + var(--rt-space-1));
+            border-radius: var(--rt-radius-full);
+            background: var(--rt-color-bg-surface);
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-medium);
+
+            &:first-letter {
+                text-transform: uppercase;
+            }
+        }
+
+        // Вид мессенджера: пузырь мягкий, свой — цвета действия, пузырь гостя серый на белой ленте,
+        // время и знак доставки справа внизу
+        &--messenger {
+            --rt-chat-bubble-radius: var(--rt-radius-xl);
+            --rt-chat-bubble-own-bg: var(--rt-color-action-primary);
+            --rt-chat-bubble-in-bg: var(--rt-color-bg-subtle);
+
+            box-sizing: border-box;
+            padding: var(--rt-space-4);
+
+            // Высоту шапке дают имя и строка под ним, плотная полоса панели здесь не нужна
+            .rt-chat__header {
+                --rt-toolbar-height: auto;
+                --rt-toolbar-padding-top: 0;
+                --rt-toolbar-padding-bottom: calc(var(--rt-space-2) + var(--rt-space-1));
+
+                border-block-end: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+
+                .rt-toolbar__bar--left {
+                    gap: calc(var(--rt-space-2) + var(--rt-space-1));
+                }
+            }
+
+            // Реплики прижаты к низу ленты, к полю ответа: короткий разговор не висит под шапкой
+            .rt-chat__thread {
+                padding: var(--rt-space-5) var(--rt-space-6);
+                border-radius: var(--rt-radius-lg);
+                background: var(--rt-color-bg-surface);
+                gap: var(--rt-space-1);
+
+                > :first-child {
+                    margin-block-start: auto;
+                }
+            }
+
+            .rt-chat__message {
+                padding: var(--rt-space-2) calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-1);
+                border-radius: var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-radius-sm);
+                gap: var(--rt-space-0-5);
+            }
+
+            // Смена стороны отбита сильнее, чем реплики одного автора подряд. Между репликами
+            // стоит скрытая метка дня, поэтому сосед ищется через неё
+            .rt-chat__message-row--own + .rt-chat__day[hidden] + .rt-chat__message-row:not(.rt-chat__message-row--own),
+            .rt-chat__message-row:not(.rt-chat__message-row--own) + .rt-chat__day[hidden] + .rt-chat__message-row--own {
+                margin-block-start: calc(var(--rt-space-2) + var(--rt-space-1));
+            }
+
+            .rt-chat__message--own {
+                border-radius: var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-radius-sm) var(--rt-chat-bubble-radius);
+                box-shadow: none;
+            }
+
+            .rt-chat__title {
+                line-height: var(--rt-leading-normal);
+            }
+
+            // Высота строки округлена до целого пикселя, как у текстового блока макета: иначе дробные
+            // доли копятся от строки к строке и сдвигают всё ниже
+            .rt-chat__subtitle {
+                line-height: round(1em * var(--rt-leading-tight), 1px);
+            }
+
+            .rt-chat__message-text {
+                font-size: var(--rt-text-sm);
+                line-height: round(1em * var(--rt-leading-tight), 1px);
+            }
+
+            .rt-chat__message--own .rt-chat__message-text,
+            .rt-chat__message--own .rt-chat__message-date,
+            .rt-chat__message--own .rt-chat__message-status {
+                color: var(--rt-color-action-on-primary);
+            }
+
+            // На своём пузыре время и галочки тише текста: время прозрачнее, галочки чуть плотнее
+            .rt-chat__message--own .rt-chat__message-date {
+                opacity: 0.75;
+            }
+
+            .rt-chat__message--own .rt-chat__message-status {
+                opacity: 0.85;
+            }
+
+            .rt-chat__message-footer {
+                justify-content: flex-end;
+            }
+
+            // Кнопки у реплики стоят одной панелью: у входящей справа от пузыря, у своей слева
+            .rt-chat__message-actions {
+                display: flex;
+                align-items: center;
+                padding: var(--rt-space-0-5);
+                border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+                border-radius: var(--rt-radius-lg);
+                background: var(--rt-color-bg-surface);
+                box-shadow: var(--rt-shadow-sm);
+                gap: var(--rt-space-0-5);
+            }
+
+            .rt-chat__message-row:not(.rt-chat__message-row--own) .rt-chat__message-actions {
+                order: 1;
+            }
+
+            .rt-chat__message-date {
+                font-size: var(--rt-text-2xs);
+                line-height: round(1em * var(--rt-leading-tight), 1px);
+            }
+
+            .rt-chat__message-author {
+                display: none;
+            }
+        }
+    }
+}

package/src/rich-editor/lib/components/chat/rt-chat.component.scss

@@ -72,12 +72,15 @@
             max-height: none;
         }
 
-        // Знак канала стоит перед заголовком и не сжимается, когда длинный заголовок переносится.
+        // Знак канала стоит перед заголовком и не сжимается рядом с длинным заголовком.
         &__sign {
             flex: none;
         }
 
+        // Шапка — плотная полоса постоянной высоты: перенесённый заголовок вышел бы из неё вверх
+        // и вниз, поэтому длинный режется многоточием, а целиком виден в подсказке
         &__title {
+            overflow: hidden;
             margin: 0;
             color: var(--rt-color-text-primary);
             font-family: var(--rt-font-family-sans);
@@ -85,6 +88,8 @@
             font-weight: var(--rt-font-weight-bold);
             letter-spacing: var(--rt-letter-spacing-wide);
             line-height: var(--rt-leading-snug);
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         // Заголовок и строка под ним стоят столбцом; длинный контакт режется многоточием,

package/src/rich-editor/lib/components/message-composer/rt-message-composer.component.scss

@@ -80,8 +80,13 @@
             min-inline-size: 0;
             outline: 0;
 
-            /* Одна строка текста по высоте равна круглой кнопке: отступ добирает разницу. */
-            padding-block: calc((var(--rt-control-height-md) - 1lh) / 2);
+            /* Отступ 7 сверху и снизу, как в компоненте Message Composer дизайн-системы: поле в одну
+               строку ниже кнопки и прижато к низу строки, текст стоит ниже середины кнопки. */
+            padding-block: 7px;
+
+            /* Боковой отступ браузера у textarea снят: текст стоит на внешнем отступе, как в макете,
+               и замер автовысоты видит ту же ширину, что и экран. */
+            padding-inline: 0;
             resize: none;
 
             /* Место под ползунок держится всегда, и на замере автовысоты тоже: иначе появившийся

package/types/rt-tools-ui-kit-v2-ai-prompt-input.d.ts

@@ -25,6 +25,19 @@ export declare function rtPromptCanSend(text: string, files: number, busy: boole
  * элемент ряда включается своим входом: без значения его нет. Что открывает нажатие на модель,
  * усилие и режим, решает приложение: поле сообщает, какую кнопку нажали.
  *
+ * Свои элементы ряда приложение кладёт проекцией: с меткой `rtPromptInputStart` они встают слева
+ * после «+», с меткой `rtPromptInputEnd` справа перед моделью и отправкой. Подходит любой
+ * элемент высотой с кнопку sm: кнопка-иконка, кнопка с текстом, выпадающий список.
+ *
+ * @example
+ * ```html
+ * <rt-ai-prompt-input attachments>
+ *     <rt-icon-button rtPromptInputStart icon="bolt" variant="ghost" size="sm" ariaLabel="Быстрые ответы" />
+ *     <button rtButton rtPromptInputStart appearance="text" size="sm" label="Отправить позже"></button>
+ *     <rt-icon-button rtPromptInputEnd icon="mic" variant="ghost" size="sm" ariaLabel="Голос" />
+ * </rt-ai-prompt-input>
+ * ```
+ *
  * Подсказка стоит отдельной строкой под полем или над ним, в ряд действий она не входит.
  *
  * Отправка — `Enter` без Shift или кнопка со стрелкой; `Shift+Enter` переносит строку. Со
@@ -189,5 +202,5 @@ export declare class RtAiPromptInputComponent {
     "submitted": "submitted";
     "stopped": "stopped";
     "controlPicked": "controlPicked";
-  }, never, never, true, never>;
+  }, never, ["[rtPromptInputStart]", "[rtPromptInputEnd]"], true, never>;
 }

package/types/rt-tools-ui-kit-v2-popover.d.ts

@@ -57,6 +57,12 @@ export declare class RtPopoverDirective implements OnDestroy {
   readonly fitViewport: InputSignalWithTransform<boolean, BooleanInput>;
   readonly context: InputSignal<unknown>;
   readonly panelClass: InputSignal<string>;
+  /**
+   * Класс подложки под панелью. Пусто — подложки нет, и страница рядом с панелью остаётся
+   * открытой. Заданный ставит подложку на весь экран: её вид задаёт класс, а нажатие по ней
+   * закрывает панель так же, как нажатие снаружи. Читается при первом открытии.
+   */
+  readonly backdropClass: InputSignal<string>;
   readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
   readonly offsetY: InputSignalWithTransform<number, NumberInput>;
   readonly offsetX: InputSignalWithTransform<number, NumberInput>;
@@ -113,6 +119,11 @@ export declare class RtPopoverDirective implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "backdropClass": {
+      "alias": "rtPopoverBackdropClass";
+      "required": false;
+      "isSignal": true;
+    };
     "disabled": {
       "alias": "rtPopoverDisabled";
       "required": false;

package/types/rt-tools-ui-kit-v2-rich-editor.d.ts

@@ -357,6 +357,27 @@ export declare class RtChatMessageActionsDirective {
   static ɵfac: i0.ɵɵFactoryDeclaration<RtChatMessageActionsDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<RtChatMessageActionsDirective, "ng-template[rtChatMessageActions]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Захватывает `<ng-template rtChatMessageButtons let-message>` — кнопки у реплики перед «…»-меню.
+ * Частое действие, например «ответить», стоит кнопкой и не прячется в меню. В виде мессенджера
+ * кнопки и меню стоят одной панелью у пузыря.
+ *
+ * @example
+ * ```html
+ * <rt-chat messenger [messages]="messages()">
+ *     <ng-template rtChatMessageButtons let-message>
+ *         <rt-icon-button icon="reply" variant="ghost" size="sm" ariaLabel="Ответить" (clicked)="reply(message)" />
+ *     </ng-template>
+ * </rt-chat>
+ * ```
+ */
+export declare class RtChatMessageButtonsDirective {
+  readonly template: TemplateRef<IRtChatMessageActionsContext>;
+  /** Type-guard: сужает контекст шаблона до реплики при проверке шаблонов. */
+  static ngTemplateContextGuard(_directive: RtChatMessageButtonsDirective, context: unknown): context is IRtChatMessageActionsContext;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtChatMessageButtonsDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<RtChatMessageButtonsDirective, "ng-template[rtChatMessageButtons]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Общий презентационный чат: тред сообщений + композер. История приходит готовым массивом
  * `IRtChat.Message[]`, отправка, обновление, скачивание и набор текста уходят наружу выходами;
@@ -396,36 +417,24 @@ export declare class RtChatComponent {
   }>;
   /** Композер заблокирован при загрузке/рефреше треда или отправке in-flight. */
   protected readonly composerDisabled: Signal<boolean>;
-  /**
-   * Можно ли отправить: композер активен и есть содержимое — непустой текст или
-   * (при включённых вложениях) хотя бы один файл. Сообщение само по себе не
-   * бывает «невалидным» — пустоту гасим дизейблом кнопки, а не подсветкой поля.
-   */
+  /** Можно ли отправить: пустоту гасит выключенная кнопка, поле не подсвечивается ошибкой */
   protected readonly canSend: Signal<boolean>;
+  /** Подписи дней над первым сообщением каждого дня — только в виде мессенджера */
+  protected readonly dayLabels: Signal<ReadonlyMap<number | string, string>>;
   /** Показывать ли шапку: только когда включена хотя бы одна иконка. */
   protected readonly showHeader: Signal<boolean>;
   /** Подпись кнопки fullscreen: тернарник в шаблоне переводом не покрыть. */
   protected readonly expandLabel: Signal<string>;
   /** Выбранные, но ещё не отправленные файлы — карточки над полем ввода. */
   protected readonly selectedFiles: Signal<File[]>;
-  /**
-   * Drop-зона активна только когда вложения включены, ответ доступен и композер
-   * не занят (загрузка/рефреш/отправка). Иначе обёртка `rt-file-drop` просто
-   * пропускает контент без оверлея.
-   */
+  /** Drop-зона активна при включённых вложениях, доступном ответе и свободном композере */
   protected readonly dropDisabled: Signal<boolean>;
-  /**
-   * Файл из drag-n-drop для rich-композера: каждый drop кладёт новый `File`,
-   * пробрасывается в `rt-message-composer` через input. Классический композер
-   * принимает drop напрямую в свой `replyForm`.
-   */
+  /** Файлы drop для rich-композера; классический композер принимает drop в свой `replyForm` */
   protected readonly droppedFiles: WritableSignal<File[] | null>;
-  /**
-   * Шаблон действий у реплики: `<ng-template rtChatMessageActions let-message>`.
-   *
-   * Не объявлен — разметка реплики прежняя, и лишней кнопки у неё не появляется.
-   */
+  /** Шаблон действий у реплики `<ng-template rtChatMessageActions>`; не объявлен — кнопки нет */
   protected readonly messageActions: Signal<RtChatMessageActionsDirective | undefined>;
+  /** Кнопки у реплики перед меню `<ng-template rtChatMessageButtons>`; не объявлены — кнопок нет */
+  protected readonly messageButtons: Signal<RtChatMessageButtonsDirective | undefined>;
   /** История сообщений (consumer уже смаппил из доменной модели). */
   readonly messages: InputSignal<readonly IRtChat.Message[]>;
   /** Первичная загрузка — скелетоны вместо треда. */
@@ -480,6 +489,11 @@ export declare class RtChatComponent {
    */
   readonly fill: InputSignalWithTransform<boolean, BooleanInput>;
   /** Показать иконку refresh в шапке. */
+  /**
+   * Вид мессенджера: без подписи автора, свой пузырь цвета действия, время без даты, над
+   * сообщениями дня — его подпись, поле ответа в одну строку с рядом кнопок под ним.
+   */
+  readonly messenger: InputSignalWithTransform<boolean, BooleanInput>;
   readonly showRefresh: InputSignalWithTransform<boolean, BooleanInput>;
   /** Показать иконку expand (fullscreen) в шапке. */
   readonly showExpand: InputSignalWithTransform<boolean, BooleanInput>;
@@ -617,6 +631,11 @@ export declare class RtChatComponent {
       "required": false;
       "isSignal": true;
     };
+    "messenger": {
+      "alias": "messenger";
+      "required": false;
+      "isSignal": true;
+    };
     "showRefresh": {
       "alias": "showRefresh";
       "required": false;
@@ -646,7 +665,7 @@ export declare class RtChatComponent {
     "expandedChange": "expandedChange";
     "deleteMessage": "deleteMessage";
     "retryMessage": "retryMessage";
-  }, ["messageActions"], ["[rtChatHeaderActions]", "[rtChatFooter]"], true, never>;
+  }, ["messageActions", "messageButtons"], ["[rtChatHeaderActions]", "[rtChatComposerTools]", "[rtChatFooter]"], true, never>;
 }
 /**
  * Есть ли у реплики хотя бы одно доступное действие потребителя.

package/types/rt-tools-ui-kit-v2-tabs.d.ts

@@ -454,6 +454,8 @@ export declare class RtTabsComponent {
   readonly direction: InputSignal<IRtTabs.Direction>;
   /** Растягивать вкладки на всю ширину полосы. */
   readonly stretch: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Плотные вкладки: отступ 8 по бокам, чтобы в узкую панель влезло больше вкладок */
+  readonly dense: InputSignalWithTransform<boolean, BooleanInput>;
   /** Скроллить область контента при переполнении. */
   readonly contentScrollable: InputSignalWithTransform<boolean, BooleanInput>;
   /**
@@ -519,6 +521,11 @@ export declare class RtTabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "dense": {
+      "alias": "dense";
+      "required": false;
+      "isSignal": true;
+    };
     "contentScrollable": {
       "alias": "contentScrollable";
       "required": false;

package/types/rt-tools-ui-kit-v2-thread-list.d.ts

@@ -130,6 +130,8 @@ export declare class RtThreadListComponent<TRow extends IRtThreadList.Row> imple
   readonly fetching: InputSignalWithTransform<boolean, boolean | string>;
   readonly hasMore: InputSignalWithTransform<boolean, boolean | string>;
   readonly filtersActive: InputSignalWithTransform<boolean, boolean | string>;
+  /** Вид мессенджера: колонка с полями, строки карточками со скруглением, без левой полосы */
+  readonly messenger: InputSignalWithTransform<boolean, boolean | string>;
   readonly selectRow: OutputEmitterRef<IRtThreadList.TRowId>;
   readonly openInNewTab: OutputEmitterRef<IRtThreadList.TRowId>;
   readonly searchChange: OutputEmitterRef<string>;
@@ -184,6 +186,11 @@ export declare class RtThreadListComponent<TRow extends IRtThreadList.Row> imple
       "required": false;
       "isSignal": true;
     };
+    "messenger": {
+      "alias": "messenger";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "selectRow": "selectRow";
     "openInNewTab": "openInNewTab";

package/types/rt-tools-ui-kit-v2-workspace-details.d.ts

@@ -5,8 +5,15 @@ import { FormControl, FormGroup } from "@angular/forms";
 import { IButton, TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
 import { IRtConfirmPopover } from "@rt-tools/ui-kit-v2/confirm-popover";
 import { IRtSelect } from "@rt-tools/ui-kit-v2/select";
+import { IRtServiceLogo } from "@rt-tools/ui-kit-v2/service-logo";
 import { IRtTimeline } from "@rt-tools/ui-kit-v2/timeline";
 export declare namespace IRtWorkspaceDetails {
+  /** Верх сведений о человеке: знак канала, имя и контакт по центру над строками */
+  interface Profile {
+    sign: IRtServiceLogo.Item | null;
+    name: string;
+    contact: string;
+  }
   interface Row {
     label: string;
     value: string;
@@ -95,6 +102,8 @@ export declare class RtWorkspaceDetailsComponent {
   readonly loading: InputSignalWithTransform<boolean, BooleanInput>;
   readonly busy: InputSignalWithTransform<boolean, BooleanInput>;
   readonly rows: InputSignal<readonly IRtWorkspaceDetails.Row[]>;
+  /** Верх сведений о человеке над строками: без него сведения начинаются со строк */
+  readonly profile: InputSignal<IRtWorkspaceDetails.Profile | null>;
   readonly agentEdit: InputSignal<IRtWorkspaceDetails.AgentEdit | null>;
   readonly money: InputSignal<readonly IRtWorkspaceDetails.MoneyRow[]>;
   readonly toggles: InputSignal<readonly IRtWorkspaceDetails.Toggle[]>;
@@ -146,6 +155,11 @@ export declare class RtWorkspaceDetailsComponent {
       "required": false;
       "isSignal": true;
     };
+    "profile": {
+      "alias": "profile";
+      "required": false;
+      "isSignal": true;
+    };
     "agentEdit": {
       "alias": "agentEdit";
       "required": false;

package/types/rt-tools-ui-kit-v2-workspace.d.ts

@@ -53,6 +53,8 @@ export declare class RtWorkspaceComponent implements IRtWorkspace.PanelApi {
   protected readonly slotContext: IRtWorkspace.SlotContext;
   readonly storageKey: InputSignal<string | null>;
   readonly hasActive: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Колонки стоят отдельными карточками с зазором, без линий между ними */
+  readonly cards: InputSignalWithTransform<boolean, BooleanInput>;
   readonly listMinWidth: InputSignalWithTransform<number, number | string>;
   readonly listMaxWidth: InputSignalWithTransform<number, number | string>;
   readonly listDefaultWidth: InputSignalWithTransform<number, number | string>;
@@ -86,6 +88,11 @@ export declare class RtWorkspaceComponent implements IRtWorkspace.PanelApi {
       "required": false;
       "isSignal": true;
     };
+    "cards": {
+      "alias": "cards";
+      "required": false;
+      "isSignal": true;
+    };
     "listMinWidth": {
       "alias": "listMinWidth";
       "required": false;