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

package/src/lib/components/ai-prompt-input/rt-ai-prompt-input.component.scss

@@ -0,0 +1,113 @@
+@layer rt-kit.components {
+    .rt-ai-prompt-input {
+        --rt-ai-prompt-input-radius: var(--rt-radius-xl);
+        --rt-ai-prompt-input-border-width: var(--rt-border-width-thin);
+        --rt-ai-prompt-input-shadow: var(--rt-shadow-sm);
+
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--rt-space-1) * 1.5);
+
+        /* Ширина приходит от хозяина: textarea без объявленной ширины считает её от знака. */
+        inline-size: 100%;
+
+        &__box {
+            display: flex;
+            flex-direction: column;
+            border: var(--rt-ai-prompt-input-border-width) solid var(--rt-input-color-border);
+            border-radius: var(--rt-ai-prompt-input-radius);
+            background: var(--rt-color-bg-surface);
+            box-shadow: var(--rt-ai-prompt-input-shadow);
+            padding-block-start: var(--rt-space-1);
+
+            // Фокус — как у полей кита: рамка фокуса и кольцо.
+            &:focus-within {
+                border-color: var(--rt-input-color-border-focus);
+                box-shadow: var(--rt-input-focus-shadow);
+            }
+
+            &--disabled {
+                background: var(--rt-input-color-bg-disabled);
+            }
+        }
+
+        &__files {
+            display: flex;
+            flex-direction: column;
+            padding: var(--rt-space-2) var(--rt-space-2) 0;
+            gap: var(--rt-space-1);
+        }
+
+        &__input {
+            /* Автовысота CDK пишет в height высоту самого текста: при border-box её съели бы
+               отступы, и вторая строка уезжала бы под верхний край. */
+            box-sizing: content-box;
+            padding: calc(var(--rt-space-1) * 3) calc(var(--rt-space-1) * 3) var(--rt-space-2) var(--rt-space-4);
+            border: 0;
+            margin: 0;
+            background: transparent;
+            color: var(--rt-input-color-text);
+            font: inherit;
+            font-size: var(--rt-text-base);
+            inline-size: auto;
+            line-height: var(--rt-leading-normal);
+            min-inline-size: 0;
+            outline: 0;
+            resize: none;
+            scrollbar-color: var(--rt-color-border-default) transparent;
+            scrollbar-gutter: stable;
+            scrollbar-width: thin;
+
+            &::placeholder {
+                color: var(--rt-input-color-text-placeholder);
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+
+                &::placeholder {
+                    color: var(--rt-color-text-disabled);
+                }
+            }
+        }
+
+        // Ряд действий стоит внутри рамки снизу: слева «+», справа контролы и отправка.
+        &__actions {
+            display: flex;
+            align-items: center;
+            padding: 0 var(--rt-space-2) var(--rt-space-2);
+            gap: var(--rt-space-1);
+        }
+
+        &__controls {
+            display: flex;
+            align-items: center;
+            gap: var(--rt-space-1);
+            margin-inline-start: auto;
+            min-inline-size: 0;
+        }
+
+        &__control {
+            padding-inline: calc(var(--rt-space-1) * 1.5);
+
+            // Текстовая кнопка кита по умолчанию приглушена и красит подпись своим свойством
+            // двумя классами. Модель поднимается до основного тона, усилие и режим остаются
+            // приглушёнными.
+            &.rt-button {
+                --rt-btn-color: var(--rt-color-text-primary);
+            }
+
+            &--muted.rt-button {
+                --rt-btn-color: var(--rt-color-text-muted);
+            }
+        }
+
+        &__hint {
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+            text-align: center;
+        }
+    }
+}

package/src/lib/components/markdown-text/rt-markdown-text.component.scss

@@ -17,6 +17,9 @@
         letter-spacing: var(--rt-letter-spacing-wide);
         line-height: var(--rt-leading-snug);
 
+        /* Длинное слово и адрес переносятся: иначе текст шире своего места и тянет ленту вширь. */
+        overflow-wrap: anywhere;
+
         &__heading {
             margin: 0;
             color: var(--rt-color-text-primary);

package/src/lib/components/thread-list/rt-thread-list.component.scss

@@ -38,6 +38,13 @@
             flex: 0 0 auto;
         }
 
+        // Полоса вкладок стоит под шапкой во всю ширину колонки; отступ по краям держит её
+        // содержимое на одной линии с полем поиска
+        &__tabs {
+            flex: 0 0 auto;
+            padding: var(--rt-space-0-5) var(--rt-space-2) 0;
+        }
+
         &__filters-panel {
             display: flex;
             flex-direction: column;
@@ -52,6 +59,7 @@
             flex-direction: column;
             min-block-size: 0;
             overflow-y: auto;
+            overscroll-behavior: contain;
         }
 
         &__row {
@@ -130,15 +138,6 @@
         // кнопка в `<button>` недопустима. Подложка повторяет фон строки, чтобы закрыть время.
         &__row-wrap {
             position: relative;
-
-            // Открытое меню действий держит их видимыми: фокус ушёл в панель поверх страницы, и без
-            // этого кнопка меню гасла под своей же панелью, когда указатель покидал строку.
-            &:hover .rt-thread-list__row-actions,
-            &:focus-within .rt-thread-list__row-actions,
-            &:has(.rt-menu--open) .rt-thread-list__row-actions {
-                opacity: 1;
-                pointer-events: auto;
-            }
         }
 
         &__row-actions {
@@ -149,9 +148,25 @@
             gap: var(--rt-space-1);
             inset-block: 0;
             inset-inline-end: 0;
-            opacity: 0;
             padding-inline: var(--rt-space-2) var(--rt-space-4);
-            pointer-events: none;
+        }
+
+        // Действия прячутся только там, где есть наведение. На сенсорном экране наведения нет,
+        // и кнопка меню видна всегда: иначе беседу не переименовать и не удалить.
+        @media (hover: hover) {
+            &__row-actions {
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            // Открытое меню действий держит их видимыми: фокус ушёл в панель поверх страницы, и без
+            // этого кнопка меню гасла под своей же панелью, когда указатель покидал строку.
+            &__row-wrap:hover .rt-thread-list__row-actions,
+            &__row-wrap:focus-within .rt-thread-list__row-actions,
+            &__row-wrap:has(.rt-menu--open) .rt-thread-list__row-actions {
+                opacity: 1;
+                pointer-events: auto;
+            }
         }
 
         &__row--active + .rt-thread-list__row-actions {

package/src/lib/components/tooltip/CONTEXT.md

@@ -12,6 +12,7 @@
 | `rtTooltipWhenTruncated` | `boolean`                                        | `false` — подсказка только у обрезанного текста |
 | `rtTooltipHideOnClick`   | `boolean`                                        | `true` — клик прячет открытую подсказку         |
 | `rtTooltipShowDelay`     | `number \| null`                                 | `null` — задержка из настроек кита, без них 300 |
+| `rtTooltipShowOnTap`     | `boolean`                                        | `false` — касание подсказку не показывает       |
 
 Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
 
@@ -36,6 +37,9 @@ no-op, а не пустая панель под курсором. Поэтому
 - У переключателя ставят `rtTooltipHideOnClick="false"`: клик оставляет подсказку, а новый текст
   `[rtTooltip]` («Включить» → «Выключить») появляется в открытой панели на месте. Отложенный показ клик
   снимает при любом значении, поэтому касание на тач-экране подсказку не показывает.
+- У хоста без своего действия — значка или кольца расхода — ставят `rtTooltipShowOnTap`: касание
+  открывает подсказку сразу, повторное касание или касание вне хоста закрывает. У кнопки вход не
+  ставят: её касание выполняет действие. `rt-usage-ring` ставит его сам.
 - Приложение, которому клик не должен прятать ни одну подсказку, задаёт это один раз:
   `provideRtKit({ components: { tooltip: { hideOnClick: false } } })`. Там же `placement` и
   `showDelay`. Вход на элементе перебивает настройку. Сторона из настроек применяется и тогда, когда

package/src/lib/components/usage-ring/CONTEXT.md

@@ -0,0 +1,33 @@
+# `rt-usage-ring`
+
+```html
+<rt-usage-ring [value]="usedPercent()" [hint]="usageHint()" />
+```
+
+| вход     | тип      | умолчание |
+| -------- | -------- | --------- |
+| `value`  | `number` | `0`       |
+| `warnAt` | `number` | `80`      |
+| `hint`   | `string` | `''`      |
+
+Выходов нет.
+
+Спек — `docs/specs/ui-kit-v2/ai-chat/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Кольцо рисует только долю.** Что за лимит и когда сброс, говорит подсказка `hint`: её текст
+собирает приложение, кит не знает ни лимита, ни дат.
+
+**С порога `warnAt` дуга оранжевая.** Доля прижимается к 0…100 и округляется до целого.
+
+## Края
+
+- С подсказкой кольцо берёт фокус: подсказку видно и с клавиатуры. Без подсказки кольцо в обход
+  фокуса не входит.
+- Скринридер слышит долю подписью кита `aiUsageAria`.
+
+## Рядом
+
+- [`rt-ai-prompt-input`](../ai-prompt-input/CONTEXT.md) — поле ввода ИИ-чата, где кольцо стоит в
+  ряду действий.

package/src/lib/components/usage-ring/rt-usage-ring.component.scss

@@ -0,0 +1,64 @@
+@layer rt-kit.components {
+    .rt-usage-ring {
+        --rt-usage-ring-size: var(--rt-control-height-sm);
+        --rt-usage-ring-mark-size: var(--rt-space-4);
+        --rt-usage-ring-stroke: 2.5;
+        --rt-usage-ring-color: var(--rt-color-action-primary);
+        --rt-usage-ring-track: var(--rt-color-border-default);
+        --rt-usage-ring-radius: var(--rt-radius-md);
+        --rt-usage-ring-focus-shadow: var(--rt-shadow-focus-ring);
+        --rt-usage-ring-duration: var(--rt-duration-fast);
+        --rt-usage-ring-arc-duration: var(--rt-duration-base);
+
+        display: inline-flex;
+        flex: none;
+
+        &__ring {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-usage-ring-radius);
+            block-size: var(--rt-usage-ring-size);
+            inline-size: var(--rt-usage-ring-size);
+            outline: 0;
+            transition: background var(--rt-usage-ring-duration) ease;
+
+            &:hover,
+            &:focus-visible {
+                background: var(--rt-color-bg-subtle);
+            }
+
+            &:focus-visible {
+                box-shadow: var(--rt-usage-ring-focus-shadow);
+            }
+
+            &--warning {
+                --rt-usage-ring-color: var(--rt-color-state-warning);
+            }
+        }
+
+        &__svg {
+            block-size: var(--rt-usage-ring-mark-size);
+            inline-size: var(--rt-usage-ring-mark-size);
+
+            /* Дуга начинается сверху и идёт по часовой стрелке. */
+            transform: rotate(-90deg);
+        }
+
+        &__track,
+        &__arc {
+            fill: none;
+            stroke-width: var(--rt-usage-ring-stroke);
+        }
+
+        &__track {
+            stroke: var(--rt-usage-ring-track);
+        }
+
+        &__arc {
+            stroke: var(--rt-usage-ring-color);
+            stroke-linecap: round;
+            transition: stroke-dashoffset var(--rt-usage-ring-arc-duration) ease;
+        }
+    }
+}

package/src/rich-editor/lib/components/ai-chat/CONTEXT.md

@@ -31,7 +31,7 @@
 **Организм презентационный.** Сообщения с ходом работы, беседы и ошибка приходят входами, действия
 уходят выходами. Поток событий модели разбирает приложение и отдаёт готовый `IRtAiChat.Message[]`.
 
-**Живёт во входе `rich-editor`**: держит `rt-message-composer`, а тот тянет quill.
+**Живёт во входе `rich-editor`**: держит разметку ответа и общую с `rt-chat` логику ленты. Поле ввода — `rt-ai-prompt-input` основного входа: ряд действий с моделью, усилием, режимом и кольцом расхода.
 
 **Высоту задаёт родитель.** Хост — колонка на `block-size: 100%`; без высоты у родителя лента
 меряется по содержимому и не прокручивается.

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

@@ -1,6 +1,7 @@
 @layer rt-kit.components {
     .rt-ai-chat-answer {
         display: flex;
+        min-width: 0;
         flex-direction: column;
         gap: var(--rt-space-sm);
 

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

@@ -96,6 +96,7 @@
             gap: var(--rt-space-md);
             min-block-size: 0;
             overflow-y: auto;
+            overscroll-behavior: contain;
             padding-block: var(--rt-space-md);
             padding-inline: max(var(--rt-space-md), calc((100% - var(--rt-ai-chat-content-max-width)) / 2));
         }
@@ -186,6 +187,11 @@
             padding-block: var(--rt-space-xs) var(--rt-space-sm);
             padding-inline: max(var(--rt-space-md), calc((100% - var(--rt-ai-chat-content-max-width)) / 2));
             text-align: center;
+
+            // Над полем подпись отходит от ленты и прижимается к полю.
+            &--above {
+                padding-block: var(--rt-space-sm) 0;
+            }
         }
 
         &__threads {

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

@@ -87,6 +87,31 @@
             line-height: var(--rt-leading-snug);
         }
 
+        // Заголовок и строка под ним стоят столбцом; длинный контакт режется многоточием,
+        // кнопки шапки остаются на месте
+        &__names {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-0-5);
+            min-inline-size: 0;
+        }
+
+        &__subtitle {
+            overflow: hidden;
+            margin: 0;
+            color: var(--rt-color-text-muted);
+            font-family: var(--rt-font-family-sans);
+            font-size: var(--rt-text-xs);
+            line-height: var(--rt-leading-snug);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            // Пустая строка скрыта признаком `hidden`, и шапка без неё прежней высоты
+            &[hidden] {
+                display: none;
+            }
+        }
+
         &__thread-viewport {
             position: relative;
             display: flex;

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

@@ -0,0 +1,193 @@
+import { BooleanInput, NumberInput } from "@angular/cdk/coercion";
+import * as i0 from "@angular/core";
+import { ElementRef, InputSignal, InputSignalWithTransform, ModelSignal, OutputEmitterRef, Signal, WritableSignal } from "@angular/core";
+import { TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
+/**
+ * Модель `<rt-ai-prompt-input>`: один корневой неймспейс с префиксом `I`.
+ */
+export declare namespace IRtAiPromptInput {
+  /** Отправка: текст вопроса и приложенные файлы. */
+  interface SubmitPayload {
+    text: string;
+    files: File[];
+  }
+  /** Где стоит подсказка: под полем или над ним. */
+  type HintPosition = 'below' | 'above';
+  /** Кнопка строки действий, которую нажали: что она открывает, решает приложение. */
+  type Control = 'model' | 'effort' | 'mode';
+}
+/** Можно ли отправить: есть непустой текст или файл, поле свободно. */
+export declare function rtPromptCanSend(text: string, files: number, busy: boolean): boolean;
+/**
+ * Поле ввода ИИ-чата: одна рамка, текст сверху, ряд действий внутри рамки снизу.
+ *
+ * Слева в ряду «+» для файлов, справа модель, усилие, режим, кольцо расхода и отправка. Каждый
+ * элемент ряда включается своим входом: без значения его нет. Что открывает нажатие на модель,
+ * усилие и режим, решает приложение: поле сообщает, какую кнопку нажали.
+ *
+ * Подсказка стоит отдельной строкой под полем или над ним, в ряд действий она не входит.
+ *
+ * Отправка — `Enter` без Shift или кнопка со стрелкой; `Shift+Enter` переносит строку. Со
+ * `stoppable` во время `sending` стрелку сменяет «Стоп», а поле остаётся открытым.
+ */
+export declare class RtAiPromptInputComponent {
+  #private;
+  protected readonly t: Signal<TRtKitLabelMap>;
+  protected readonly fileInput: Signal<ElementRef<HTMLInputElement> | undefined>;
+  protected readonly textInput: Signal<ElementRef<HTMLTextAreaElement> | undefined>;
+  protected readonly files: WritableSignal<File[]>;
+  protected readonly placeholderText: Signal<string>;
+  /** Текст подсказки: `null` — английское умолчание кита, пустая строка — подсказки нет. */
+  protected readonly hintText: Signal<string>;
+  protected readonly hintAbove: Signal<boolean>;
+  protected readonly hintBelow: Signal<boolean>;
+  /** Поле закрыто для набора: выключено или идёт ответ, который нельзя остановить. */
+  protected readonly locked: Signal<boolean>;
+  protected readonly canSend: Signal<boolean>;
+  /** Идёт ответ, который можно остановить: вместо стрелки стоит «Стоп». */
+  protected readonly isStoppable: Signal<boolean>;
+  protected readonly hasUsage: Signal<boolean>;
+  protected readonly boxMods: Signal<Record<string, boolean>>;
+  /** Текст-подсказка поля. Пусто — переведённое умолчание кита. */
+  readonly placeholder: InputSignal<string>;
+  /** Подсказка отдельной строкой. `null` — английское умолчание кита, пустая строка убирает её. */
+  readonly hint: InputSignal<string | null>;
+  /** Где стоит подсказка: под полем, а где места под ним нет — над полем. */
+  readonly hintPosition: InputSignal<IRtAiPromptInput.HintPosition>;
+  /** Кнопка «+» и карточки приложенных файлов. */
+  readonly attachments: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Фильтр типов файлов (`.pdf,.png`). */
+  readonly accept: InputSignal<string>;
+  /** Подпись модели. Пусто — кнопки модели нет. */
+  readonly model: InputSignal<string>;
+  /** Подпись усилия. Пусто — кнопки усилия нет. */
+  readonly effort: InputSignal<string>;
+  /** Подпись режима. Пусто — кнопки режима нет. */
+  readonly mode: InputSignal<string>;
+  /** Потраченная доля лимита в процентах. `null` — кольца нет. */
+  readonly usage: InputSignal<number | null>;
+  /** Подсказка кольца по наведению: доля и дата сброса словами приложения. */
+  readonly usageHint: InputSignal<string>;
+  /** С этой доли кольцо оранжевое. */
+  readonly usageWarnAt: InputSignalWithTransform<number, NumberInput>;
+  /** Отправка идёт: кнопка крутит индикатор, без `stoppable` поле закрыто. */
+  readonly sending: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Ответ можно остановить: во время `sending` стрелку сменяет «Стоп», поле открыто. */
+  readonly stoppable: InputSignalWithTransform<boolean, BooleanInput>;
+  readonly disabled: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Наименьшая высота поля в строках. */
+  readonly minRows: InputSignalWithTransform<number, NumberInput>;
+  /** Наибольшая высота поля в строках, дальше текст прокручивается. */
+  readonly maxRows: InputSignalWithTransform<number, NumberInput>;
+  /** Черновик: задаётся снаружи, правки уходят наружу, после отправки пуст. */
+  readonly text: ModelSignal<string>;
+  /** Отправка вопроса. */
+  readonly submitted: OutputEmitterRef<IRtAiPromptInput.SubmitPayload>;
+  /** Нажата «Стоп» во время ответа. */
+  readonly stopped: OutputEmitterRef<void>;
+  /** Нажата кнопка модели, усилия или режима. */
+  readonly controlPicked: OutputEmitterRef<IRtAiPromptInput.Control>;
+  /** Ставит фокус в поле. */
+  focus(): void;
+  protected onInput(event: Event): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected pick(control: IRtAiPromptInput.Control): void;
+  protected stop(): void;
+  protected openPicker(): void;
+  protected onFilesPicked(event: Event): void;
+  protected removeFile(index: number): void;
+  protected submit(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtAiPromptInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtAiPromptInputComponent, "rt-ai-prompt-input", never, {
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "hintPosition": {
+      "alias": "hintPosition";
+      "required": false;
+      "isSignal": true;
+    };
+    "attachments": {
+      "alias": "attachments";
+      "required": false;
+      "isSignal": true;
+    };
+    "accept": {
+      "alias": "accept";
+      "required": false;
+      "isSignal": true;
+    };
+    "model": {
+      "alias": "model";
+      "required": false;
+      "isSignal": true;
+    };
+    "effort": {
+      "alias": "effort";
+      "required": false;
+      "isSignal": true;
+    };
+    "mode": {
+      "alias": "mode";
+      "required": false;
+      "isSignal": true;
+    };
+    "usage": {
+      "alias": "usage";
+      "required": false;
+      "isSignal": true;
+    };
+    "usageHint": {
+      "alias": "usageHint";
+      "required": false;
+      "isSignal": true;
+    };
+    "usageWarnAt": {
+      "alias": "usageWarnAt";
+      "required": false;
+      "isSignal": true;
+    };
+    "sending": {
+      "alias": "sending";
+      "required": false;
+      "isSignal": true;
+    };
+    "stoppable": {
+      "alias": "stoppable";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "minRows": {
+      "alias": "minRows";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxRows": {
+      "alias": "maxRows";
+      "required": false;
+      "isSignal": true;
+    };
+    "text": {
+      "alias": "text";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "text": "textChange";
+    "submitted": "submitted";
+    "stopped": "stopped";
+    "controlPicked": "controlPicked";
+  }, never, never, true, never>;
+}

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

@@ -487,12 +487,16 @@ export declare const RT_KIT_LABELS_EN: {
   readonly aiLike: "Good answer";
   readonly aiNewThread: "New conversation";
   readonly aiNoThreads: "No conversations yet";
+  readonly aiPromptEffortAria: "Effort";
+  readonly aiPromptModeAria: "Mode";
+  readonly aiPromptModelAria: "Model";
   readonly aiReference: "Reference";
   readonly aiRetry: "Ask again";
   readonly aiSearchThreads: "Search conversations";
   readonly aiShowSteps: "Show steps";
   readonly aiThreads: "Conversations";
   readonly aiTitle: "Assistant";
+  readonly aiUsageAria: "Used {{percent}}% of the limit";
   readonly aiYou: "You";
   readonly asideCopyErrorInfo: "Copy error info";
   readonly asideRequestError: "Request Error";