@rtsee/ngx 0.0.109 → 0.0.110

package/dist/ngx/fesm2022/rtsee-ngx.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ViewChild, EventEmitter, Output, forwardRef, Directive, DOCUMENT, HostListener, Inject, ChangeDetectionStrategy, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, Input, Component, ViewChild, EventEmitter, Output, forwardRef, Directive, HostListener, reflectComponentType, DOCUMENT, Inject, ChangeDetectionStrategy, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { NgClass, NgIf, NgForOf, DatePipe, NgComponentOutlet, SlicePipe, JsonPipe, DOCUMENT as DOCUMENT$1, NgStyle, CommonModule, NgOptimizedImage } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -17,8 +17,8 @@ import * as i2 from '@angular/router';
 import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { Divider } from 'primeng/divider';
 import * as i1$1 from '@angular/common/http';
-import { RTSeeChatMemberRoles, RTSeeIllustratorEvents, RTSeeChatTypes, OzzyTaskStatus } from '@rtsee/common';
-import { sanitizeImageUrl, ManageAgentForm, RTSeeForm, RTSeeFormFieldRadioGroup, RTSeeFormField, RTSeeFormFieldImageUploader, RTSeeRater } from '@rtsee/utilities-ui';
+import { RTSeeChatMemberRoles, RTSeeIllustratorEvents, RTSeeChatTypes, OzzyTaskStatus, getStoryTranslatorLanguage, STORY_TRANSLATOR_LANGUAGES } from '@rtsee/common';
+import { sanitizeImageUrl, ManageAgentForm, RTSeeForm, RTSeeFormFieldRadioGroup, RTSeeFormField, RTSeeFormFieldImageUploader, fetchImageBlob, RTSeeRater } from '@rtsee/utilities-ui';
 import { InputText } from 'primeng/inputtext';
 import { InputGroup } from 'primeng/inputgroup';
 import { Textarea } from 'primeng/textarea';
@@ -28,6 +28,7 @@ import { InputNumber } from 'primeng/inputnumber';
 import * as i1$2 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { ImageCropperComponent } from 'ngx-image-cropper';
+import { Tooltip } from 'primeng/tooltip';
 import { Fieldset } from 'primeng/fieldset';
 import { DatePicker } from 'primeng/datepicker';
 import { RTSeeManageChatInfo, RTSeeChatEvents, OzzyClientTaskEvents, OzzyWorkflowClientEvents, RTSeeMentionAutocomplete, RTSeeWorkflowAutocomplete } from '@rtsee/messenger';
@@ -54,7 +55,6 @@ import { Listbox } from 'primeng/listbox';
 import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
-import { Tooltip } from 'primeng/tooltip';
 import { PanelMenu } from 'primeng/panelmenu';
 import { Menu } from 'primeng/menu';
 import { Password } from 'primeng/password';
@@ -675,15 +675,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class RTSeeImageUploaderComponent {
-    constructor(elementRef) {
+    constructor(elementRef, cdr) {
         this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.onUploaderChanged = () => this.cdr.markForCheck();
         this.submittingFromPainting = false;
     }
     ngOnInit() {
         this.attachEventHandlers();
     }
+    ngOnDestroy() {
+        this.imageUploader?.off('changed', this.onUploaderChanged);
+    }
     attachEventHandlers() {
         this.imageUploader.on('completed', this.onImagesUploaded.bind(this));
+        this.imageUploader.on('changed', this.onUploaderChanged);
+    }
+    get optimizeTooltip() {
+        if (this.imageUploader.optimizing) {
+            return 'Optimizing…';
+        }
+        const base = `Optimize (curr size: ${this.imageUploader.currentImageSizeMb}mb)`;
+        return this.imageUploader.optimizationError
+            ? `${base} - last attempt failed: ${this.imageUploader.optimizationError}`
+            : base;
+    }
+    async onOptimizeClicked(event) {
+        // The preview container opens the uploader on click
+        event.stopPropagation();
+        event.preventDefault();
+        const optimizedUrl = await this.imageUploader.optimizeCurrentImage();
+        if (optimizedUrl) {
+            // The optimized url is already propagated to the form field (`completed`) - persist it
+            setTimeout(() => this.submitParentForm(), 50);
+        }
     }
     onNextButtonClicked() {
         this.imageUploader.onNextClicked();
@@ -764,8 +789,11 @@ class RTSeeImageUploaderComponent {
                     return;
                 }
             }
-            // 2. Programmatic RTSeeForm submit
-            if (this.imageUploader.form && typeof this.imageUploader.form.submit === 'function') {
+            // 2. Custom submit hook, then programmatic RTSeeForm submit
+            if (this.imageUploader.onSubmitForm) {
+                this.imageUploader.onSubmitForm();
+            }
+            else if (this.imageUploader.form && typeof this.imageUploader.form.submit === 'function') {
                 this.imageUploader.form.submit();
             }
         }
@@ -773,13 +801,13 @@ class RTSeeImageUploaderComponent {
             console.warn('[RTSeeImageUploaderComponent] submitParentForm error:', e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeImageUploaderComponent, isStandalone: true, selector: "rtsee-image-uploader", inputs: { imageUploader: "imageUploader" }, viewQueries: [{ propertyName: "cropperComponent", first: true, predicate: RTSeeCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\">\n          <span class=\"material-icons-outlined rtsee-upload-icon\">cloud_upload</span>\n          <span class=\"rtsee-upload-text\">Tap to upload image</span>\n        </div>\n      }\n      <div class=\"rtsee-image-uploader-illustrator-btn\"\n           (click)=\"onPaintingIconClicked($event)\"\n           title=\"Apply illustration from NanoBanana Illustrator\"\n      >\n        <p-button icon=\"pi pi-palette\" severity=\"help\" [rounded]=\"true\"></p-button>\n      </div>\n      <div class=\"rtsee-image-uploader-image-change-btn\">\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeUploaderComponent, selector: "rtsee-uploader", inputs: ["uploader"] }, { kind: "component", type: RTSeeCropperComponent, selector: "rtsee-cropper", inputs: ["cropper"], outputs: ["nextClicked"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeImageUploaderComponent, isStandalone: true, selector: "rtsee-image-uploader", inputs: { imageUploader: "imageUploader" }, viewQueries: [{ propertyName: "cropperComponent", first: true, predicate: RTSeeCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\">\n          <span class=\"material-icons-outlined rtsee-upload-icon\">cloud_upload</span>\n          <span class=\"rtsee-upload-text\">Tap to upload image</span>\n        </div>\n      }\n      <div class=\"rtsee-image-uploader-illustrator-btn\"\n           (click)=\"onPaintingIconClicked($event)\"\n           title=\"Apply illustration from NanoBanana Illustrator\"\n      >\n        <p-button icon=\"pi pi-palette\" severity=\"help\" [rounded]=\"true\"></p-button>\n      </div>\n      <div class=\"rtsee-image-uploader-image-change-btn\"\n           [class.rtsee-shifted]=\"imageUploader.needsOptimization\"\n      >\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n      @if (imageUploader.needsOptimization) {\n        <div class=\"rtsee-image-uploader-optimize-btn\"\n             id=\"rtsee-image-uploader-optimize-btn\"\n             [class.rtsee-optimizing]=\"imageUploader.optimizing\"\n             [pTooltip]=\"optimizeTooltip\"\n             tooltipPosition=\"top\"\n             (click)=\"onOptimizeClicked($event)\"\n        >\n          <p-button [icon]=\"imageUploader.optimizing ? 'pi pi-spin pi-spinner' : 'pi pi-exclamation-triangle'\"\n                    severity=\"warn\"\n                    [rounded]=\"true\"\n                    [disabled]=\"imageUploader.optimizing\"\n                    [attr.aria-label]=\"optimizeTooltip\"\n          ></p-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeUploaderComponent, selector: "rtsee-uploader", inputs: ["uploader"] }, { kind: "component", type: RTSeeCropperComponent, selector: "rtsee-cropper", inputs: ["cropper"], outputs: ["nextClicked"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-image-uploader', imports: [RTSeeUploaderComponent, RTSeeCropperComponent, Button], template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\">\n          <span class=\"material-icons-outlined rtsee-upload-icon\">cloud_upload</span>\n          <span class=\"rtsee-upload-text\">Tap to upload image</span>\n        </div>\n      }\n      <div class=\"rtsee-image-uploader-illustrator-btn\"\n           (click)=\"onPaintingIconClicked($event)\"\n           title=\"Apply illustration from NanoBanana Illustrator\"\n      >\n        <p-button icon=\"pi pi-palette\" severity=\"help\" [rounded]=\"true\"></p-button>\n      </div>\n      <div class=\"rtsee-image-uploader-image-change-btn\">\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cropperComponent: [{
+            args: [{ selector: 'rtsee-image-uploader', imports: [RTSeeUploaderComponent, RTSeeCropperComponent, Button, Tooltip], template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\">\n          <span class=\"material-icons-outlined rtsee-upload-icon\">cloud_upload</span>\n          <span class=\"rtsee-upload-text\">Tap to upload image</span>\n        </div>\n      }\n      <div class=\"rtsee-image-uploader-illustrator-btn\"\n           (click)=\"onPaintingIconClicked($event)\"\n           title=\"Apply illustration from NanoBanana Illustrator\"\n      >\n        <p-button icon=\"pi pi-palette\" severity=\"help\" [rounded]=\"true\"></p-button>\n      </div>\n      <div class=\"rtsee-image-uploader-image-change-btn\"\n           [class.rtsee-shifted]=\"imageUploader.needsOptimization\"\n      >\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n      @if (imageUploader.needsOptimization) {\n        <div class=\"rtsee-image-uploader-optimize-btn\"\n             id=\"rtsee-image-uploader-optimize-btn\"\n             [class.rtsee-optimizing]=\"imageUploader.optimizing\"\n             [pTooltip]=\"optimizeTooltip\"\n             tooltipPosition=\"top\"\n             (click)=\"onOptimizeClicked($event)\"\n        >\n          <p-button [icon]=\"imageUploader.optimizing ? 'pi pi-spin pi-spinner' : 'pi pi-exclamation-triangle'\"\n                    severity=\"warn\"\n                    [rounded]=\"true\"\n                    [disabled]=\"imageUploader.optimizing\"\n                    [attr.aria-label]=\"optimizeTooltip\"\n          ></p-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { cropperComponent: [{
                 type: ViewChild,
                 args: [RTSeeCropperComponent]
             }], imageUploader: [{
@@ -1861,10 +1889,54 @@ class MediaWidgetComponent {
         this.visibleImages = [];
         this.hiddenCount = 0;
         this.showAll = false;
+        this.downloadingUrl = null;
         this.MAX_GRID = 4;
     }
     ngOnInit() {
         this.updateVisibleImages();
+        this.notifyRequestedGeneration();
+    }
+    ngOnChanges(changes) {
+        // e.g. downsized versions got attached to the message images
+        if (changes['message'] && !changes['message'].firstChange) {
+            this.updateVisibleImages();
+        }
+    }
+    /** Downsized version for rendering, the original otherwise */
+    previewUrl(img) {
+        return img.smallVersionUrl || img.url;
+    }
+    async downloadOriginal(event, img) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (typeof window === 'undefined' || !img?.url || this.downloadingUrl) {
+            return;
+        }
+        this.downloadingUrl = img.url;
+        try {
+            const blob = await fetchImageBlob(img.url);
+            const objectUrl = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = objectUrl;
+            link.download = this.getDownloadFileName(img, blob);
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+        }
+        catch (e) {
+            // CORS / network failure - let the browser open the original instead
+            console.warn('[MediaWidget] Blob download failed, opening original image:', e);
+            window.open(img.url, '_blank', 'noopener');
+        }
+        finally {
+            this.downloadingUrl = null;
+        }
+    }
+    getDownloadFileName(img, blob) {
+        const extension = blob.type?.split('/')[1]?.split('+')[0] || 'png';
+        const base = (img.name || img.id || 'image').replace(/[^\w.-]+/g, '-');
+        return base.includes('.') ? base : `${base}.${extension}`;
     }
     get hasVideo() {
         return !!this.message.video;
@@ -1925,6 +1997,8 @@ class MediaWidgetComponent {
             this.visibleImages = all.slice(0, this.MAX_GRID);
             this.hiddenCount = all.length - this.MAX_GRID;
         }
+    }
+    notifyRequestedGeneration() {
         const reqId = this.message?.data?.requestId;
         if (reqId && this.visibleImages.length > 0 && typeof window !== 'undefined') {
             window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.REQUESTED_GENERATION_SUCCEED, {
@@ -1938,11 +2012,11 @@ class MediaWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MediaWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MediaWidgetComponent, isStandalone: true, selector: "rtsee-media-widget", inputs: { message: "message", messenger: "messenger", chat: "chat", showCost: "showCost" }, ngImport: i0, template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"img.url\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <div class=\"rts-media-image-actions\">\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-paint\"\n              title=\"Send image to Illustrator (Review & Iterate)\"\n              (click)=\"sendToIllustrator($event, img)\"\n            >\n              <i class=\"pi pi-palette\"></i>\n              <span>+ paint</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-context\"\n              title=\"Add image to Illustrator context references\"\n              (click)=\"addToContext($event, img)\"\n            >\n              <i class=\"pi pi-plus\"></i>\n              <span>+ context</span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CostDisplayComponent, selector: "rtsee-cost-display", inputs: ["cost"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MediaWidgetComponent, isStandalone: true, selector: "rtsee-media-widget", inputs: { message: "message", messenger: "messenger", chat: "chat", showCost: "showCost" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.id || img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"previewUrl(img)\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <button\n            type=\"button\"\n            class=\"rts-media-btn-download\"\n            [class.rts-downloading]=\"downloadingUrl === img.url\"\n            title=\"Download original image\"\n            aria-label=\"Download original image\"\n            (click)=\"downloadOriginal($event, img)\"\n          >\n            <i class=\"pi\" [ngClass]=\"downloadingUrl === img.url ? 'pi-spin pi-spinner' : 'pi-download'\"></i>\n          </button>\n          <div class=\"rts-media-image-actions\">\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-paint\"\n              title=\"Send image to Illustrator (Review & Iterate)\"\n              (click)=\"sendToIllustrator($event, img)\"\n            >\n              <i class=\"pi pi-palette\"></i>\n              <span>+ paint</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-context\"\n              title=\"Add image to Illustrator context references\"\n              (click)=\"addToContext($event, img)\"\n            >\n              <i class=\"pi pi-plus\"></i>\n              <span>+ context</span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-btn-download{position:absolute;left:8px;bottom:8px;z-index:5;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d1fae5;border:1px solid rgba(52,211,153,.45);border-radius:50%;cursor:pointer;opacity:.85;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-download i{font-size:12px;color:#34d399}.rts-media-btn-download:hover{opacity:1;background:#10b981e6;border-color:#34d399;transform:translateY(-1px) scale(1.08);box-shadow:0 4px 12px #34d39973}.rts-media-btn-download:hover i{color:#fff}.rts-media-btn-download:active{transform:translateY(0) scale(.96)}.rts-media-btn-download.rts-downloading{cursor:progress;opacity:1}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CostDisplayComponent, selector: "rtsee-cost-display", inputs: ["cost"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MediaWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-media-widget', standalone: true, imports: [NgClass, CostDisplayComponent], template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"img.url\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <div class=\"rts-media-image-actions\">\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-paint\"\n              title=\"Send image to Illustrator (Review & Iterate)\"\n              (click)=\"sendToIllustrator($event, img)\"\n            >\n              <i class=\"pi pi-palette\"></i>\n              <span>+ paint</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-context\"\n              title=\"Add image to Illustrator context references\"\n              (click)=\"addToContext($event, img)\"\n            >\n              <i class=\"pi pi-plus\"></i>\n              <span>+ context</span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"] }]
+            args: [{ selector: 'rtsee-media-widget', standalone: true, imports: [NgClass, CostDisplayComponent], template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.id || img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"previewUrl(img)\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <button\n            type=\"button\"\n            class=\"rts-media-btn-download\"\n            [class.rts-downloading]=\"downloadingUrl === img.url\"\n            title=\"Download original image\"\n            aria-label=\"Download original image\"\n            (click)=\"downloadOriginal($event, img)\"\n          >\n            <i class=\"pi\" [ngClass]=\"downloadingUrl === img.url ? 'pi-spin pi-spinner' : 'pi-download'\"></i>\n          </button>\n          <div class=\"rts-media-image-actions\">\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-paint\"\n              title=\"Send image to Illustrator (Review & Iterate)\"\n              (click)=\"sendToIllustrator($event, img)\"\n            >\n              <i class=\"pi pi-palette\"></i>\n              <span>+ paint</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-context\"\n              title=\"Add image to Illustrator context references\"\n              (click)=\"addToContext($event, img)\"\n            >\n              <i class=\"pi pi-plus\"></i>\n              <span>+ context</span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-btn-download{position:absolute;left:8px;bottom:8px;z-index:5;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d1fae5;border:1px solid rgba(52,211,153,.45);border-radius:50%;cursor:pointer;opacity:.85;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-download i{font-size:12px;color:#34d399}.rts-media-btn-download:hover{opacity:1;background:#10b981e6;border-color:#34d399;transform:translateY(-1px) scale(1.08);box-shadow:0 4px 12px #34d39973}.rts-media-btn-download:hover i{color:#fff}.rts-media-btn-download:active{transform:translateY(0) scale(.96)}.rts-media-btn-download.rts-downloading{cursor:progress;opacity:1}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], messenger: [{
@@ -2308,12 +2382,16 @@ class StorytellerStoryLinkStepComponent {
     get storyUrl() {
         return this.story.storyId ? `/story/${this.story.storyId}` : '';
     }
+    get kicker() {
+        const language = this.story.language ? getStoryTranslatorLanguage(this.story.language) : undefined;
+        return language ? `Translated to ${language.nativeName}` : 'Your story is ready';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StorytellerStoryLinkStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StorytellerStoryLinkStepComponent, isStandalone: true, selector: "rtsee-storyteller-story-link-step", inputs: { step: "step", workflow: "workflow", chat: "chat", messenger: "messenger" }, ngImport: i0, template: "@if (storyUrl) {\n  <a class=\"rts-story-link-card\" [href]=\"storyUrl\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"rts-story-link-icon\">\uD83D\uDCD6</div>\n    <div class=\"rts-story-link-body\">\n      <span class=\"rts-story-link-kicker\">Your story is ready</span>\n      <span class=\"rts-story-link-title\">{{ story.name || 'Open story' }}</span>\n      @if (story.description) {\n        <span class=\"rts-story-link-description\">{{ story.description }}</span>\n      }\n      @if (story.slidesCount) {\n        <span class=\"rts-story-link-meta\">{{ story.slidesCount }} slides</span>\n      }\n    </div>\n    <span class=\"rts-story-link-arrow pi pi-arrow-right\"></span>\n  </a>\n} @else {\n  <div class=\"rts-storyteller-hint\">The story link will appear here once the story is created.</div>\n}\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StorytellerStoryLinkStepComponent, isStandalone: true, selector: "rtsee-storyteller-story-link-step", inputs: { step: "step", workflow: "workflow", chat: "chat", messenger: "messenger" }, ngImport: i0, template: "@if (storyUrl) {\n  <a class=\"rts-story-link-card\" [href]=\"storyUrl\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"rts-story-link-icon\">\uD83D\uDCD6</div>\n    <div class=\"rts-story-link-body\">\n      <span class=\"rts-story-link-kicker\">{{ kicker }}</span>\n      <span class=\"rts-story-link-title\">{{ story.name || 'Open story' }}</span>\n      @if (story.description) {\n        <span class=\"rts-story-link-description\">{{ story.description }}</span>\n      }\n      @if (story.slidesCount) {\n        <span class=\"rts-story-link-meta\">{{ story.slidesCount }} slides</span>\n      }\n    </div>\n    <span class=\"rts-story-link-arrow pi pi-arrow-right\"></span>\n  </a>\n} @else {\n  <div class=\"rts-storyteller-hint\">The story link will appear here once the story is created.</div>\n}\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StorytellerStoryLinkStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-storyteller-story-link-step', standalone: true, template: "@if (storyUrl) {\n  <a class=\"rts-story-link-card\" [href]=\"storyUrl\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"rts-story-link-icon\">\uD83D\uDCD6</div>\n    <div class=\"rts-story-link-body\">\n      <span class=\"rts-story-link-kicker\">Your story is ready</span>\n      <span class=\"rts-story-link-title\">{{ story.name || 'Open story' }}</span>\n      @if (story.description) {\n        <span class=\"rts-story-link-description\">{{ story.description }}</span>\n      }\n      @if (story.slidesCount) {\n        <span class=\"rts-story-link-meta\">{{ story.slidesCount }} slides</span>\n      }\n    </div>\n    <span class=\"rts-story-link-arrow pi pi-arrow-right\"></span>\n  </a>\n} @else {\n  <div class=\"rts-storyteller-hint\">The story link will appear here once the story is created.</div>\n}\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n"] }]
+            args: [{ selector: 'rtsee-storyteller-story-link-step', standalone: true, template: "@if (storyUrl) {\n  <a class=\"rts-story-link-card\" [href]=\"storyUrl\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"rts-story-link-icon\">\uD83D\uDCD6</div>\n    <div class=\"rts-story-link-body\">\n      <span class=\"rts-story-link-kicker\">{{ kicker }}</span>\n      <span class=\"rts-story-link-title\">{{ story.name || 'Open story' }}</span>\n      @if (story.description) {\n        <span class=\"rts-story-link-description\">{{ story.description }}</span>\n      }\n      @if (story.slidesCount) {\n        <span class=\"rts-story-link-meta\">{{ story.slidesCount }} slides</span>\n      }\n    </div>\n    <span class=\"rts-story-link-arrow pi pi-arrow-right\"></span>\n  </a>\n} @else {\n  <div class=\"rts-storyteller-hint\">The story link will appear here once the story is created.</div>\n}\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n"] }]
         }], propDecorators: { step: [{
                 type: Input
             }], workflow: [{
@@ -2324,6 +2402,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+const SEARCH_DEBOUNCE_MS = 250;
+/**
+ * Story Translator step 1: pick a story (autocomplete by name) and the target language.
+ */
+class StoryTranslatorFormStepComponent {
+    constructor(cdr, host) {
+        this.cdr = cdr;
+        this.host = host;
+        this.languages = STORY_TRANSLATOR_LANGUAGES;
+        this.form = new FormGroup({
+            /* eslint-disable */
+            storyQuery: new FormControl(''),
+            storyId: new FormControl('', Validators.required),
+            language: new FormControl('', Validators.required),
+            agentId: new FormControl('', Validators.required),
+            /* eslint-enable */
+        });
+        this.selectedStory = null;
+        this.suggestions = [];
+        this.suggestionsOpened = false;
+        this.highlightedIndex = 0;
+        this.searchInProgress = false;
+        this.searchError = null;
+        this.searchTimer = null;
+        this.searchRequestId = 0;
+        this.onChangedBound = () => this.onWorkflowChanged();
+    }
+    get agents() {
+        return (this.chat?.members || []).filter((m) => m.isAgent);
+    }
+    get readonly() {
+        return !this.step?.isActive || !!this.workflow?.submitInProgress;
+    }
+    get canCancel() {
+        return !!this.workflow?.isDraft && !this.workflow?.submitInProgress && !!this.messenger;
+    }
+    get selectedLanguage() {
+        return this.languages.find((l) => l.code === this.form.get('language')?.value);
+    }
+    ngOnInit() {
+        this.workflow?.on(OzzyWorkflowClientEvents.CHANGED, this.onChangedBound);
+        const agents = this.agents;
+        if (agents.length === 1) {
+            this.form.get('agentId')?.setValue(agents[0].id);
+        }
+        this.syncWithStep();
+    }
+    ngOnDestroy() {
+        this.workflow?.off(OzzyWorkflowClientEvents.CHANGED, this.onChangedBound);
+        this.clearSearchTimer();
+    }
+    onStoryFocus() {
+        if (this.readonly) {
+            return;
+        }
+        this.suggestionsOpened = true;
+        if (!this.suggestions.length) {
+            this.scheduleSearch(0);
+        }
+    }
+    onStoryInput() {
+        // typing invalidates the previous selection
+        if (this.selectedStory) {
+            this.selectedStory = null;
+            this.form.get('storyId')?.setValue('');
+        }
+        this.suggestionsOpened = true;
+        this.scheduleSearch(SEARCH_DEBOUNCE_MS);
+    }
+    onStoryKeydown(event) {
+        if (!this.suggestionsOpened || !this.suggestions.length) {
+            if (event.key === 'ArrowDown') {
+                this.suggestionsOpened = true;
+                this.scheduleSearch(0);
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex + 1) % this.suggestions.length;
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex - 1 + this.suggestions.length) % this.suggestions.length;
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this.selectStory(this.suggestions[this.highlightedIndex]);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.suggestionsOpened = false;
+                break;
+        }
+    }
+    selectStory(story) {
+        if (!story || this.readonly) {
+            return;
+        }
+        this.selectedStory = story;
+        this.form.patchValue({ storyId: story.id, storyQuery: story.name }, { emitEvent: false });
+        this.form.get('storyId')?.markAsTouched();
+        this.suggestionsOpened = false;
+    }
+    clearStory() {
+        if (this.readonly) {
+            return;
+        }
+        this.selectedStory = null;
+        this.form.patchValue({ storyId: '', storyQuery: '' }, { emitEvent: false });
+        this.suggestionsOpened = true;
+        this.scheduleSearch(0);
+        setTimeout(() => this.storyInput?.nativeElement.focus());
+    }
+    onDocumentMouseDown(event) {
+        if (this.suggestionsOpened && !this.host.nativeElement.contains(event.target)) {
+            this.suggestionsOpened = false;
+        }
+    }
+    submit() {
+        if (this.readonly) {
+            return;
+        }
+        if (this.form.invalid || !this.selectedStory) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        void this.workflow.submitStep({
+            storyId: this.selectedStory.id,
+            storyName: this.selectedStory.name,
+            language: this.form.get('language')?.value,
+            agentId: this.form.get('agentId')?.value,
+        });
+    }
+    cancel() {
+        if (!this.canCancel) {
+            return;
+        }
+        this.messenger?.discardDraftWorkflow(this.workflow);
+    }
+    isInvalid(name) {
+        const control = this.form.get(name);
+        return !!control && control.invalid && control.touched;
+    }
+    scheduleSearch(delay) {
+        this.clearSearchTimer();
+        this.searchTimer = setTimeout(() => void this.search(), delay);
+    }
+    clearSearchTimer() {
+        if (this.searchTimer) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = null;
+        }
+    }
+    async search() {
+        if (!this.messenger) {
+            return;
+        }
+        const requestId = ++this.searchRequestId;
+        const query = this.form.get('storyQuery')?.value || '';
+        this.searchInProgress = true;
+        this.searchError = null;
+        this.cdr.markForCheck();
+        try {
+            const stories = await this.messenger.ozzy.searchStories(query);
+            if (requestId !== this.searchRequestId) {
+                return;
+            }
+            this.suggestions = stories;
+            this.highlightedIndex = 0;
+        }
+        catch (e) {
+            if (requestId !== this.searchRequestId) {
+                return;
+            }
+            this.suggestions = [];
+            this.searchError = e?.friendlyMessage || e?.message || 'Failed to load stories.';
+        }
+        finally {
+            if (requestId === this.searchRequestId) {
+                this.searchInProgress = false;
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    onWorkflowChanged() {
+        this.syncWithStep();
+        this.cdr.detectChanges();
+    }
+    syncWithStep() {
+        const output = this.step?.output;
+        if (output?.storyId) {
+            this.selectedStory = { id: output.storyId, name: output.storyName || output.storyId };
+            this.form.patchValue({ storyId: output.storyId, storyQuery: output.storyName || '', language: output.language, agentId: output.agentId }, { emitEvent: false });
+        }
+        if (this.readonly) {
+            this.suggestionsOpened = false;
+            this.form.disable({ emitEvent: false });
+        }
+        else {
+            this.form.enable({ emitEvent: false });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryTranslatorFormStepComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryTranslatorFormStepComponent, isStandalone: true, selector: "rtsee-story-translator-form-step", inputs: { step: "step", workflow: "workflow", chat: "chat", messenger: "messenger" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)" } }, viewQueries: [{ propertyName: "storyInput", first: true, predicate: ["storyInput"], descendants: true }], ngImport: i0, template: "<form class=\"rts-storyteller-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\" autocomplete=\"off\">\n  <div class=\"rts-storyteller-field\">\n    <label class=\"rts-storyteller-label\" for=\"story-translator-story-{{ step.id }}\">Story</label>\n    <div class=\"rts-st-autocomplete\">\n      <span class=\"rts-st-autocomplete-icon pi\" [class.pi-search]=\"!searchInProgress\" [class.pi-spin]=\"searchInProgress\" [class.pi-spinner]=\"searchInProgress\"></span>\n      <input #storyInput\n             class=\"rts-storyteller-input rts-st-autocomplete-input\"\n             [class.rts-storyteller-invalid]=\"isInvalid('storyId')\"\n             [class.rts-st-autocomplete-selected]=\"!!selectedStory\"\n             formControlName=\"storyQuery\"\n             type=\"text\"\n             role=\"combobox\"\n             aria-autocomplete=\"list\"\n             [attr.aria-expanded]=\"suggestionsOpened\"\n             placeholder=\"Search stories by name\u2026\"\n             id=\"story-translator-story-{{ step.id }}\"\n             (focus)=\"onStoryFocus()\"\n             (input)=\"onStoryInput()\"\n             (keydown)=\"onStoryKeydown($event)\"\n      />\n      @if (selectedStory && !readonly) {\n        <button type=\"button\"\n                class=\"rts-st-autocomplete-clear pi pi-times\"\n                aria-label=\"Clear story\"\n                id=\"story-translator-clear-{{ step.id }}\"\n                (click)=\"clearStory()\"\n        ></button>\n      }\n\n      @if (suggestionsOpened && !readonly) {\n        <ul class=\"rts-st-autocomplete-panel\" role=\"listbox\">\n          @if (searchError) {\n            <li class=\"rts-st-autocomplete-empty rts-st-autocomplete-error\">{{ searchError }}</li>\n          } @else if (!suggestions.length && !searchInProgress) {\n            <li class=\"rts-st-autocomplete-empty\">No stories found</li>\n          }\n          @for (story of suggestions; track story.id; let i = $index) {\n            <li class=\"rts-st-autocomplete-option\"\n                role=\"option\"\n                [class.rts-st-autocomplete-option-active]=\"i === highlightedIndex\"\n                [attr.aria-selected]=\"story.id === selectedStory?.id\"\n                (mouseenter)=\"highlightedIndex = i\"\n                (mousedown)=\"$event.preventDefault(); selectStory(story)\"\n            >\n              @if (story.imageUrl) {\n                <img class=\"rts-st-autocomplete-thumb\" [src]=\"story.imageUrl\" [alt]=\"story.name\" loading=\"lazy\" />\n              } @else {\n                <span class=\"rts-st-autocomplete-thumb rts-st-autocomplete-thumb-empty\">\uD83D\uDCD6</span>\n              }\n              <span class=\"rts-st-autocomplete-option-body\">\n                <span class=\"rts-st-autocomplete-option-name\">{{ story.name }}</span>\n                @if (story.totalSlides) {\n                  <span class=\"rts-st-autocomplete-option-meta\">{{ story.totalSlides }} slides</span>\n                }\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  </div>\n\n  <label class=\"rts-storyteller-field\">\n    <span class=\"rts-storyteller-label\">Translate to</span>\n    <div class=\"rts-storyteller-select-wrap\">\n      <select class=\"rts-storyteller-input rts-storyteller-select\"\n              [class.rts-storyteller-invalid]=\"isInvalid('language')\"\n              formControlName=\"language\"\n              id=\"story-translator-language-{{ step.id }}\"\n      >\n        <option value=\"\" disabled>Select a language</option>\n        @for (language of languages; track language.code) {\n          <option [value]=\"language.code\">{{ language.nativeName }}</option>\n        }\n      </select>\n      <span class=\"rts-storyteller-select-caret pi pi-chevron-down\"></span>\n    </div>\n  </label>\n\n  <label class=\"rts-storyteller-field\">\n    <span class=\"rts-storyteller-label\">Agent</span>\n    @if (agents.length) {\n      <div class=\"rts-storyteller-select-wrap\">\n        <select class=\"rts-storyteller-input rts-storyteller-select\"\n                [class.rts-storyteller-invalid]=\"isInvalid('agentId')\"\n                formControlName=\"agentId\"\n                id=\"story-translator-agent-{{ step.id }}\"\n        >\n          <option value=\"\" disabled>Select an agent</option>\n          @for (agent of agents; track agent.id) {\n            <option [value]=\"agent.id\">\n              {{ agent.name }}{{ agent.agentConfiguration?.model?.model ? ' \u00B7 ' + agent.agentConfiguration?.model?.model : '' }}\n            </option>\n          }\n        </select>\n        <span class=\"rts-storyteller-select-caret pi pi-chevron-down\"></span>\n      </div>\n    } @else {\n      <div class=\"rts-storyteller-hint\">There are no agentic members in this chat. Add an agent to continue.</div>\n    }\n  </label>\n\n  @if (workflow.submitError) {\n    <div class=\"rts-storyteller-error\">{{ workflow.submitError }}</div>\n  }\n\n  @if (step.isActive) {\n    <div class=\"rts-storyteller-actions rts-st-translator-actions\">\n      @if (canCancel) {\n        <button class=\"rts-st-cancel\"\n                type=\"button\"\n                id=\"story-translator-cancel-{{ step.id }}\"\n                (click)=\"cancel()\"\n        >Cancel</button>\n      }\n      <button class=\"rts-storyteller-submit\"\n              type=\"submit\"\n              [disabled]=\"workflow.submitInProgress || !agents.length\"\n              id=\"story-translator-submit-{{ step.id }}\"\n      >\n        @if (workflow.submitInProgress) {\n          <span class=\"rts-storyteller-spinner\"></span> Translating\u2026\n        } @else {\n          \uD83C\uDF10 Translate{{ selectedLanguage ? ' to ' + selectedLanguage.nativeName : '' }}\n        }\n      </button>\n    </div>\n  }\n</form>\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n", ".rts-st-autocomplete{position:relative}.rts-st-autocomplete-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-input{padding-left:32px;padding-right:32px}.rts-st-autocomplete-input.rts-st-autocomplete-selected{font-weight:600}.rts-st-autocomplete-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;border-radius:50%;font-size:10px;cursor:pointer;color:var(--rts-text-secondary, #8a8fa3);background:transparent;transition:background .15s ease,color .15s ease}.rts-st-autocomplete-clear:hover{color:var(--rts-text-primary);background:#8b5cf626}.rts-st-autocomplete-panel{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border-radius:10px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-secondary, var(--rts-bg-primary, #1d1f2b));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 32px -12px #00000073;animation:rts-st-panel-in .14s ease-out}.rts-st-autocomplete-option{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;cursor:pointer;transition:background .12s ease}.rts-st-autocomplete-option.rts-st-autocomplete-option-active{background:linear-gradient(135deg,#6366f129,#8b5cf61a)}.rts-st-autocomplete-option[aria-selected=true] .rts-st-autocomplete-option-name{color:var(--rts-st-accent)}.rts-st-autocomplete-thumb{flex-shrink:0;width:30px;height:30px;border-radius:7px;object-fit:cover}.rts-st-autocomplete-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:15px;background:#8b5cf624}.rts-st-autocomplete-option-body{display:flex;flex-direction:column;min-width:0}.rts-st-autocomplete-option-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;color:var(--rts-text-primary)}.rts-st-autocomplete-option-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-empty{padding:8px;font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-error{font-style:normal;color:#f43f5e}.rts-st-translator-actions{gap:8px}.rts-st-cancel{padding:8px 16px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:transparent;color:var(--rts-text-secondary, #8a8fa3);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.rts-st-cancel:hover{color:var(--rts-text-primary);border-color:#f43f5e73;background:#f43f5e0f}@keyframes rts-st-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryTranslatorFormStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-story-translator-form-step', standalone: true, imports: [ReactiveFormsModule], template: "<form class=\"rts-storyteller-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\" autocomplete=\"off\">\n  <div class=\"rts-storyteller-field\">\n    <label class=\"rts-storyteller-label\" for=\"story-translator-story-{{ step.id }}\">Story</label>\n    <div class=\"rts-st-autocomplete\">\n      <span class=\"rts-st-autocomplete-icon pi\" [class.pi-search]=\"!searchInProgress\" [class.pi-spin]=\"searchInProgress\" [class.pi-spinner]=\"searchInProgress\"></span>\n      <input #storyInput\n             class=\"rts-storyteller-input rts-st-autocomplete-input\"\n             [class.rts-storyteller-invalid]=\"isInvalid('storyId')\"\n             [class.rts-st-autocomplete-selected]=\"!!selectedStory\"\n             formControlName=\"storyQuery\"\n             type=\"text\"\n             role=\"combobox\"\n             aria-autocomplete=\"list\"\n             [attr.aria-expanded]=\"suggestionsOpened\"\n             placeholder=\"Search stories by name\u2026\"\n             id=\"story-translator-story-{{ step.id }}\"\n             (focus)=\"onStoryFocus()\"\n             (input)=\"onStoryInput()\"\n             (keydown)=\"onStoryKeydown($event)\"\n      />\n      @if (selectedStory && !readonly) {\n        <button type=\"button\"\n                class=\"rts-st-autocomplete-clear pi pi-times\"\n                aria-label=\"Clear story\"\n                id=\"story-translator-clear-{{ step.id }}\"\n                (click)=\"clearStory()\"\n        ></button>\n      }\n\n      @if (suggestionsOpened && !readonly) {\n        <ul class=\"rts-st-autocomplete-panel\" role=\"listbox\">\n          @if (searchError) {\n            <li class=\"rts-st-autocomplete-empty rts-st-autocomplete-error\">{{ searchError }}</li>\n          } @else if (!suggestions.length && !searchInProgress) {\n            <li class=\"rts-st-autocomplete-empty\">No stories found</li>\n          }\n          @for (story of suggestions; track story.id; let i = $index) {\n            <li class=\"rts-st-autocomplete-option\"\n                role=\"option\"\n                [class.rts-st-autocomplete-option-active]=\"i === highlightedIndex\"\n                [attr.aria-selected]=\"story.id === selectedStory?.id\"\n                (mouseenter)=\"highlightedIndex = i\"\n                (mousedown)=\"$event.preventDefault(); selectStory(story)\"\n            >\n              @if (story.imageUrl) {\n                <img class=\"rts-st-autocomplete-thumb\" [src]=\"story.imageUrl\" [alt]=\"story.name\" loading=\"lazy\" />\n              } @else {\n                <span class=\"rts-st-autocomplete-thumb rts-st-autocomplete-thumb-empty\">\uD83D\uDCD6</span>\n              }\n              <span class=\"rts-st-autocomplete-option-body\">\n                <span class=\"rts-st-autocomplete-option-name\">{{ story.name }}</span>\n                @if (story.totalSlides) {\n                  <span class=\"rts-st-autocomplete-option-meta\">{{ story.totalSlides }} slides</span>\n                }\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  </div>\n\n  <label class=\"rts-storyteller-field\">\n    <span class=\"rts-storyteller-label\">Translate to</span>\n    <div class=\"rts-storyteller-select-wrap\">\n      <select class=\"rts-storyteller-input rts-storyteller-select\"\n              [class.rts-storyteller-invalid]=\"isInvalid('language')\"\n              formControlName=\"language\"\n              id=\"story-translator-language-{{ step.id }}\"\n      >\n        <option value=\"\" disabled>Select a language</option>\n        @for (language of languages; track language.code) {\n          <option [value]=\"language.code\">{{ language.nativeName }}</option>\n        }\n      </select>\n      <span class=\"rts-storyteller-select-caret pi pi-chevron-down\"></span>\n    </div>\n  </label>\n\n  <label class=\"rts-storyteller-field\">\n    <span class=\"rts-storyteller-label\">Agent</span>\n    @if (agents.length) {\n      <div class=\"rts-storyteller-select-wrap\">\n        <select class=\"rts-storyteller-input rts-storyteller-select\"\n                [class.rts-storyteller-invalid]=\"isInvalid('agentId')\"\n                formControlName=\"agentId\"\n                id=\"story-translator-agent-{{ step.id }}\"\n        >\n          <option value=\"\" disabled>Select an agent</option>\n          @for (agent of agents; track agent.id) {\n            <option [value]=\"agent.id\">\n              {{ agent.name }}{{ agent.agentConfiguration?.model?.model ? ' \u00B7 ' + agent.agentConfiguration?.model?.model : '' }}\n            </option>\n          }\n        </select>\n        <span class=\"rts-storyteller-select-caret pi pi-chevron-down\"></span>\n      </div>\n    } @else {\n      <div class=\"rts-storyteller-hint\">There are no agentic members in this chat. Add an agent to continue.</div>\n    }\n  </label>\n\n  @if (workflow.submitError) {\n    <div class=\"rts-storyteller-error\">{{ workflow.submitError }}</div>\n  }\n\n  @if (step.isActive) {\n    <div class=\"rts-storyteller-actions rts-st-translator-actions\">\n      @if (canCancel) {\n        <button class=\"rts-st-cancel\"\n                type=\"button\"\n                id=\"story-translator-cancel-{{ step.id }}\"\n                (click)=\"cancel()\"\n        >Cancel</button>\n      }\n      <button class=\"rts-storyteller-submit\"\n              type=\"submit\"\n              [disabled]=\"workflow.submitInProgress || !agents.length\"\n              id=\"story-translator-submit-{{ step.id }}\"\n      >\n        @if (workflow.submitInProgress) {\n          <span class=\"rts-storyteller-spinner\"></span> Translating\u2026\n        } @else {\n          \uD83C\uDF10 Translate{{ selectedLanguage ? ' to ' + selectedLanguage.nativeName : '' }}\n        }\n      </button>\n    </div>\n  }\n</form>\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n", ".rts-st-autocomplete{position:relative}.rts-st-autocomplete-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-input{padding-left:32px;padding-right:32px}.rts-st-autocomplete-input.rts-st-autocomplete-selected{font-weight:600}.rts-st-autocomplete-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;border-radius:50%;font-size:10px;cursor:pointer;color:var(--rts-text-secondary, #8a8fa3);background:transparent;transition:background .15s ease,color .15s ease}.rts-st-autocomplete-clear:hover{color:var(--rts-text-primary);background:#8b5cf626}.rts-st-autocomplete-panel{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border-radius:10px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-secondary, var(--rts-bg-primary, #1d1f2b));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 32px -12px #00000073;animation:rts-st-panel-in .14s ease-out}.rts-st-autocomplete-option{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;cursor:pointer;transition:background .12s ease}.rts-st-autocomplete-option.rts-st-autocomplete-option-active{background:linear-gradient(135deg,#6366f129,#8b5cf61a)}.rts-st-autocomplete-option[aria-selected=true] .rts-st-autocomplete-option-name{color:var(--rts-st-accent)}.rts-st-autocomplete-thumb{flex-shrink:0;width:30px;height:30px;border-radius:7px;object-fit:cover}.rts-st-autocomplete-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:15px;background:#8b5cf624}.rts-st-autocomplete-option-body{display:flex;flex-direction:column;min-width:0}.rts-st-autocomplete-option-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;color:var(--rts-text-primary)}.rts-st-autocomplete-option-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-empty{padding:8px;font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-error{font-style:normal;color:#f43f5e}.rts-st-translator-actions{gap:8px}.rts-st-cancel{padding:8px 16px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:transparent;color:var(--rts-text-secondary, #8a8fa3);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.rts-st-cancel:hover{color:var(--rts-text-primary);border-color:#f43f5e73;background:#f43f5e0f}@keyframes rts-st-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { step: [{
+                type: Input
+            }], workflow: [{
+                type: Input
+            }], chat: [{
+                type: Input
+            }], messenger: [{
+                type: Input
+            }], storyInput: [{
+                type: ViewChild,
+                args: ['storyInput']
+            }], onDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
 /**
  * Registry of the components which render workflow steps inside the rts-workflow widget.
  */
@@ -2333,6 +2637,7 @@ class WorkflowStepsService {
             { name: 'workflow-task-step', component: WorkflowTaskStepComponent },
             { name: 'storyteller-form-step', component: StorytellerFormStepComponent },
             { name: 'storyteller-story-link-step', component: StorytellerStoryLinkStepComponent },
+            { name: 'story-translator-form-step', component: StoryTranslatorFormStepComponent },
         ];
     }
     register(widget) {
@@ -2508,8 +2813,22 @@ class MessageComponent {
         this.widgetsService = widgetsService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.timeFormatService = timeFormatService;
+        this.widgetRef = null;
+        this.widgetHasMessageInput = false;
     }
     ngOnInit() { }
+    ngOnChanges(changes) {
+        // The message instance can be replaced (e.g. images got downsized versions) - forward it to the widget
+        if (changes['message'] && !changes['message'].firstChange && this.widgetRef) {
+            if (this.widgetHasMessageInput) {
+                this.widgetRef.setInput('message', this.message);
+            }
+            else {
+                this.widgetRef.instance.message = this.message;
+                this.widgetRef.changeDetectorRef.markForCheck();
+            }
+        }
+    }
     ngAfterViewInit() {
         /* eslint-disable */
         if (this.message.widget) {
@@ -2525,11 +2844,13 @@ class MessageComponent {
             componentRef.instance.messenger = this.messenger;
             componentRef.instance.chat = this.chat;
             componentRef.changeDetectorRef.detectChanges();
+            this.widgetRef = componentRef;
+            this.widgetHasMessageInput = !!reflectComponentType(widget)?.inputs.some((input) => input.propName === 'message');
         }
         /* eslint-enable */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageComponent, deps: [{ token: MessageWidgetsService }, { token: i0.ComponentFactoryResolver }, { token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessageComponent, isStandalone: true, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, template: "<div class=\"rts-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rts-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rts-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rts-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rts-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessageComponent, isStandalone: true, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rts-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rts-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rts-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rts-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,