@sequent-org/moodboard 1.4.44 → 1.4.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.44",
+  "version": "1.4.45",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/ui/chat/ChatWindow.js

@@ -504,7 +504,7 @@ export class ChatWindow {
                     worldY: existing.worldY
                 };
                 this._reserveAiImageLaneSlotForMessage(message.id, existing.worldX, existing.worldY);
-                this._applyPendingOverlayScreenLayout(existing.el, screenLayout, { animate: true, enterDistance });
+                this._applyPendingOverlayScreenLayout(existing.el, screenLayout, { animate: true, enterDistance, scale: s });
                 return;
             }
 
@@ -514,6 +514,16 @@ export class ChatWindow {
             const overlay = document.createElement('div');
             overlay.className = 'moodboard-chat__pending-overlay moodboard-chat__pending-overlay--enter';
             overlay.style.cssText = `left:${layout.left}px;top:${layout.top}px;width:${layout.width}px;height:${layout.height}px`;
+
+            overlay.style.borderRadius = `${Math.max(2, Math.round(12 * s))}px`;
+
+            const fontSize = Math.round(20 * s);
+            const labelLeft = 12 * Math.min(1, s);
+            const labelBottom = 10 * Math.min(1, s);
+            overlay.style.setProperty('--moodboard-chat-pending-label-font-size', `${fontSize}px`);
+            overlay.style.setProperty('--moodboard-chat-pending-label-left', `${labelLeft}px`);
+            overlay.style.setProperty('--moodboard-chat-pending-label-bottom', `${labelBottom}px`);
+
             overlay.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
             overlay.style.setProperty('--moodboard-chat-pending-enter-x', `${enterDistance}px`);
 
@@ -695,7 +705,7 @@ export class ChatWindow {
             record.worldX = layout.worldX;
             record.worldY = layout.worldY;
             this._reserveAiImageLaneSlotForMessage(messageId, layout.worldX, layout.worldY);
-            this._applyPendingOverlayScreenLayout(record.el, layout, { animate: true });
+            this._applyPendingOverlayScreenLayout(record.el, layout, { animate: true, scale });
             existingOverlaysShifted = true;
         }
 
@@ -777,11 +787,20 @@ export class ChatWindow {
         };
     }
 
-    _applyPendingOverlayScreenLayout(el, layout, { animate = false, enterDistance } = {}) {
+    _applyPendingOverlayScreenLayout(el, layout, { animate = false, enterDistance, scale = 1 } = {}) {
         el.style.left = `${layout.left}px`;
         el.style.top = `${layout.top}px`;
         el.style.width = `${layout.width}px`;
         el.style.height = `${layout.height}px`;
+        el.style.borderRadius = `${Math.max(2, Math.round(12 * scale))}px`;
+
+        const fontSize = Math.round(20 * scale);
+        const labelLeft = 12 * Math.min(1, scale);
+        const labelBottom = 10 * Math.min(1, scale);
+        el.style.setProperty('--moodboard-chat-pending-label-font-size', `${fontSize}px`);
+        el.style.setProperty('--moodboard-chat-pending-label-left', `${labelLeft}px`);
+        el.style.setProperty('--moodboard-chat-pending-label-bottom', `${labelBottom}px`);
+
         if (!animate) return;
 
         el.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
@@ -821,6 +840,15 @@ export class ChatWindow {
             el.style.top = `${Math.round(screenY - hScreen / 2)}px`;
             el.style.width = `${wScreen}px`;
             el.style.height = `${hScreen}px`;
+            el.style.borderRadius = `${Math.max(2, Math.round(12 * s))}px`;
+
+            const fontSize = Math.round(20 * s);
+            const labelLeft = 12 * Math.min(1, s);
+            const labelBottom = 10 * Math.min(1, s);
+            el.style.setProperty('--moodboard-chat-pending-label-font-size', `${fontSize}px`);
+            el.style.setProperty('--moodboard-chat-pending-label-left', `${labelLeft}px`);
+            el.style.setProperty('--moodboard-chat-pending-label-bottom', `${labelBottom}px`);
+
             if (disableTransition) {
                 void el.offsetWidth;
                 el.style.removeProperty('transition');

package/src/ui/styles/chat.css

@@ -734,13 +734,15 @@
 
 .moodboard-chat__pending-image-label {
     position: absolute;
-    bottom: 10px;
-    left: 12px;
+    bottom: var(--moodboard-chat-pending-label-bottom, 10px);
+    left: var(--moodboard-chat-pending-label-left, 12px);
     font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
-    font-size: 20px;
+    font-size: var(--moodboard-chat-pending-label-font-size, 20px);
     font-weight: 400;
     color: #ffffff;
     pointer-events: none;
+    white-space: nowrap;
+    text-align: left;
 }
 
 /* Блок ошибки сервера */