@rtsee/ngx 0.0.103 → 0.0.104

package/dist/ngx/index.d.ts

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { OnInit, AfterViewInit, ElementRef, EventEmitter, OutputEmitterRef, ViewContainerRef, ComponentFactoryResolver, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { OnInit, AfterViewInit, ElementRef, EventEmitter, OutputEmitterRef, ViewContainerRef, ComponentFactoryResolver, ChangeDetectorRef, OnDestroy, Type, OnChanges, SimpleChanges } from '@angular/core';
 import { RTSeeConference, RTSeePeerConnection } from '@rtsee/conference';
-import { RTSeeMessenger, RTSeeMessengerSearch, RTSeeMessage, RTSeeChat, RTSeeChatMember } from '@rtsee/messenger';
+import { RTSeeMessenger, RTSeeMessengerSearch, RTSeeMessage, RTSeeChat, RTSeeChatMember, RTSeeMentionAutocomplete, RTSeeWorkflowAutocomplete, OzzyClientTask } from '@rtsee/messenger';
 import { IPeer, RTSeeTextLabelKeys, IRTSeeCall } from '@rtsee/core';
 import { HttpClient } from '@angular/common/http';
 import { RTSeeAuth, RTSeeAuthConfiguration, IRtseeSignInRequestOptions, IRTSeeSignInResponse, IRtseeSignUpRequestOptions, IRTSeeSignUpResponse, AuthEndpointsKeys } from '@rtsee/auth';
 import { Observable, Subscription } from 'rxjs';
 import * as i47 from '@angular/router';
 import { Router, ActivatedRoute } from '@angular/router';
-import { IRTSeePaymentProduct, IRTSeePaymentPriceItem, IRTSeeChat, RTSeeChatTypes, IMessageThumbnail } from '@rtsee/common';
+import { IRTSeePaymentProduct, IRTSeePaymentPriceItem, IRTSeeChat, RTSeeChatTypes, IMessageThumbnail, IOzzyWorkflowDefinition, IOzzyTaskLog } from '@rtsee/common';
 import { RTSeeEventsDashboard, RTSeeDashboardClientSession, RTSeeDashboardEvent, RTSeeDashboardClient } from '@rtsee/events-dashboard';
 import { RTSee, INavigationConfig, IRouteConfig } from '@rtsee/factory';
 import { RTSeePresentation, RTSeeStory, RTSeePresentationSettings, RTSeeStorySlide } from '@rtsee/presentation';
@@ -155,6 +155,7 @@ declare class RTSeeContainerComponent implements OnInit {
     auth: RTSeeAuth<any>;
     constructor(authService: RTSeeAuthService, router: Router);
     ngOnInit(): void;
+    subscribeToHtmlEvents(): void;
     onSidenavToggleClicked(): void;
     defineSideNavState(url: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RTSeeContainerComponent, never>;
@@ -622,12 +623,7 @@ declare class MessagesListComponent implements AfterViewInit, OnDestroy, OnInit
     scrollToBottom(): void;
     formatDate(message: RTSeeMessage): string;
     private groupMessages;
-    private performGrouping;
-    private stitchGroups;
-    private areForwardMessagesAdded;
-    private areBackwardMessagesAdded;
     private saveFirstAndLastGroupedMessages;
-    private getFirstAndLastMessage;
     protected readonly RTSeeChatTypes: typeof RTSeeChatTypes;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessagesListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessagesListComponent, "rtsee-messages-list", never, { "chat": { "alias": "chat"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; }, {}, never, never, true, never>;
@@ -653,14 +649,41 @@ declare class ChatThumbnailComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ChatThumbnailComponent, "rtsee-chat-thumbnail", never, { "chat": { "alias": "chat"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class ChatInputComponent {
+declare class ChatInputComponent implements OnInit, OnDestroy {
     sendMessageForm: FormGroup;
     messenger: RTSeeMessenger;
     chat: RTSeeChat;
     chatInput: ElementRef<HTMLTextAreaElement>;
+    messageTextarea: ElementRef<HTMLTextAreaElement>;
+    autocomplete: RTSeeMentionAutocomplete;
+    workflowAutocomplete: RTSeeWorkflowAutocomplete;
+    mentionedMemberId: string | null;
+    agentAccessDenied: boolean;
+    /** prevents the Enter keyup that selected a workflow from sending the message */
+    private workflowJustSelected;
+    private accessDeniedTimer;
+    private onAutocompleteChanged;
+    private onAgentAccessDeniedBound;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get isGroupChat(): boolean;
     sendMessage(): void;
+    get anyAutocompleteVisible(): boolean;
+    onKeyDown(event: KeyboardEvent): void;
     onKeyUp(event: KeyboardEvent): void;
+    onInput(): void;
+    onMemberSelected(member: RTSeeChatMember): void;
+    onWorkflowSelected(workflow: IOzzyWorkflowDefinition): void;
+    stopAgent(): void;
+    dismissAccessDenied(): void;
     handleResize(): void;
+    private showAccessDeniedBanner;
+    private clearAccessDeniedTimer;
+    private updateAutocomplete;
+    private selectWorkflow;
+    private applyWorkflow;
+    private selectMention;
+    private applyMentionToInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatInputComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChatInputComponent, "rtsee-chat-input", never, { "messenger": { "alias": "messenger"; "required": false; }; "chat": { "alias": "chat"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -683,8 +706,18 @@ declare class RtseeSoundbarComponent implements OnInit {
 declare class MessengerHeaderComponent {
     defaultImagesService: DefaultImagesService;
     messenger: RTSeeMessenger;
+    isDropdownOpen: boolean;
+    chatImageExpanded: boolean;
     constructor(defaultImagesService: DefaultImagesService);
     openProfile(id: string): void;
+    toggleDropdown(): void;
+    closeDropdown(): void;
+    openNewChatDialog(): void;
+    closeManageChatDialog(): void;
+    onChatSaved(chat: IRTSeeChat): void;
+    onChatImageClick(): void;
+    collapseInfo(): void;
+    get isGroupOrChannelChat(): boolean;
     protected readonly RTSeeTextLabelKeys: typeof RTSeeTextLabelKeys;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessengerHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessengerHeaderComponent, "rtsee-messenger-header", never, { "messenger": { "alias": "messenger"; "required": false; }; }, {}, never, never, true, never>;
@@ -813,5 +846,59 @@ declare class GtagService {
     static ɵprov: i0.ɵɵInjectableDeclaration<GtagService>;
 }
 
-export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, GtagService, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent };
-export type { IAccordionItem, RTSeeTagForm, RTSeeTagGroupForm };
+interface IWorkflowStepWidget {
+    /** matches IOzzyWorkflowStepDefinition.widget */
+    name: string;
+    /** standalone component with `step`, `workflow`, `chat`, `messenger` inputs */
+    component: Type<unknown>;
+}
+/**
+ * Registry of the components which render workflow steps inside the rts-workflow widget.
+ */
+declare class WorkflowStepsService {
+    stepsMap: IWorkflowStepWidget[];
+    register(widget: IWorkflowStepWidget): void;
+    getStepComponentByName(name?: string): Type<unknown> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WorkflowStepsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WorkflowStepsService>;
+}
+
+/**
+ * Default client-side representation of a server-side OzzyTask.
+ * Can be used directly (`[task]`) or as a message widget (`message.data.taskId`).
+ */
+declare class RTSeeTaskComponent implements OnInit, OnChanges, OnDestroy {
+    private cdr;
+    task?: OzzyClientTask | null;
+    message?: RTSeeMessage;
+    messenger?: RTSeeMessenger;
+    chat?: RTSeeChat;
+    /** hide the execute button (e.g. when the workflow executes the task itself) */
+    allowExecute: boolean;
+    logsContainer?: ElementRef<HTMLDivElement>;
+    copied: 'input' | 'output' | null;
+    private subscribedTask;
+    private onChangedBound;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    get statusLabel(): string;
+    get statusClass(): string;
+    get inputJson(): string;
+    get outputJson(): string;
+    get hasOutput(): boolean;
+    get hasLogs(): boolean;
+    execute(): void;
+    copy(kind: 'input' | 'output'): Promise<void>;
+    trackLog(index: number, log: IOzzyTaskLog): string;
+    private toJson;
+    private subscribe;
+    private unsubscribe;
+    private onTaskChanged;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RTSeeTaskComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RTSeeTaskComponent, "rtsee-task", never, { "task": { "alias": "task"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; "chat": { "alias": "chat"; "required": false; }; "allowExecute": { "alias": "allowExecute"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, GtagService, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, WorkflowStepsService };
+export type { IAccordionItem, IWorkflowStepWidget, RTSeeTagForm, RTSeeTagGroupForm };

package/dist/ngx/src/lib/theme/common-components/image-uploader.scss

@@ -14,18 +14,51 @@
 
     .rtsee-image-uploader-preview-image {
       width: 100%;
+      border-radius: 8px;
     }
 
     .rtsee-preloader-image-placeholder {
-      padding-bottom: 100%;
-      background-color: rgba(0, 0, 0, 0.4);
+      padding: 48px 24px;
+      background: linear-gradient(
+        135deg,
+        rgba(108, 92, 231, 0.06) 0%,
+        rgba(162, 155, 254, 0.03) 100%
+      );
+      border: 2px dashed rgba(162, 155, 254, 0.3);
+      border-radius: 12px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      gap: 12px;
+      transition: border-color 0.2s ease, background 0.2s ease;
 
-      .rtsee-preloader-image-placeholder-text {
-        display: flex;
+      &:hover {
+        border-color: rgba(162, 155, 254, 0.6);
+        background: linear-gradient(
+          135deg,
+          rgba(108, 92, 231, 0.1) 0%,
+          rgba(162, 155, 254, 0.06) 100%
+        );
+      }
+
+      .rtsee-upload-icon {
+        font-size: 40px;
+        color: rgba(162, 155, 254, 0.6);
+        transition: color 0.2s ease;
+      }
+
+      .rtsee-upload-text {
+        font-size: 14px;
+        color: rgba(162, 155, 254, 0.5);
+        font-weight: 500;
+        letter-spacing: 0.3px;
+      }
+    }
+
+    &:hover .rtsee-preloader-image-placeholder {
+      .rtsee-upload-icon {
+        color: rgba(162, 155, 254, 0.85);
       }
     }
 

package/dist/ngx/src/lib/theme/common-variables.scss

@@ -77,7 +77,7 @@ $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
-$video-container-width: 320px;
+$video-container-width: 420px;
 $video-container-height: 240px;
 
 // new design-variables

package/dist/ngx/src/lib/theme/common.scss

@@ -2,7 +2,7 @@
 @import "./common-components/preloader";
 @import "./messenger/variables";
 
-.rtsee-messenger, .rtsee-events-dashboard {
+.rtsee-messenger, .rts-messenger, .rtsee-events-dashboard {
   font-family: "Work Sans", Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
 }
 

package/dist/ngx/src/lib/theme/containers/shell.scss

@@ -27,8 +27,8 @@
 
     &.rtsee-shell-messenger-active {
       .rtsee-messenger-container {
-        .rtsee-messenger {
-          .rtsee-messenger-header-container {
+        .rts-messenger {
+          .rts-messenger-header-container {
             top: $video-container-height;
           }
         }

package/dist/ngx/src/lib/theme/forms/variables.scss

@@ -1,8 +1,7 @@
 @import "../common-variables";
 
 $rts-form-field-offset: $rts-offset-md;
-$rts-form-background-color: #fff;
+$rts-form-background-color: transparent;
 
 $rts-spinner-d-md: 64px;
 $rts-spinner-d-sm: 32px;
-

package/dist/ngx/src/lib/theme/messenger/call-widget.scss

@@ -1,11 +1,30 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Call Widget
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
 
-.rtsee-call-widget {
-  .rtsee-join-call-btn {
+.rts-call-widget {
+  .rts-join-call-btn {
     border: none;
-    background: $rts-new-primary-color;
-    color: $rts-font-color-dbg-light;
-    border-radius: $rts-new-border-radius-rounded;
-    padding: $rts-new-offset-sm $rts-new-offset-md;
+    background: linear-gradient(135deg, $rtsu-accent-purple 0%, $rtsu-accent-purple-light 100%);
+    color: #fff;
+    border-radius: $rtsu-radius-md;
+    padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-lg;
+    font-family: $rtsu-font-family;
+    font-weight: $rtsu-font-weight-semibold;
+    font-size: $rtsu-font-size-base;
+    cursor: pointer;
+    box-shadow: $rtsu-shadow-accent-sm;
+    transition: transform $rtsu-transition-fast,
+                box-shadow $rtsu-transition-fast;
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: $rtsu-shadow-accent-md;
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
   }
 }

package/dist/ngx/src/lib/theme/messenger/chat-input.scss

@@ -1,50 +1,239 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Chat Input
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
 @import "../common-variables";
 
-.rtsee-chat-input {
-  padding-right: $rtsee-chat-input-height;
+.rts-chat-input {
+  padding-right: $rts-chat-input-height;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 
-  .rtsee-send-message {
+  .rts-send-message {
     &::-webkit-scrollbar {
       display: none;
     }
 
-    .rtsee-chat-input-form {
+    .rts-chat-input-form {
       overflow: hidden;
       line-height: 0;
 
-      .rtsee-chat-input-field {
+      .rts-chat-input-field {
         width: 100%;
         max-height: 130px;
         border: none;
         outline: none;
-        font-size: 16px;
+        font-size: $rtsu-font-size-md;
+        font-family: $rtsu-font-family;
+        background: transparent;
+        color: var(--rts-text-primary);
+        padding: $rtsu-space-sm;
+        resize: none;
+
+        &::placeholder {
+          color: var(--rts-text-muted);
+        }
+
+        &:disabled,
+        &[disabled] {
+          opacity: 0.5;
+          cursor: not-allowed;
+          background: var(--rts-bg-dim, rgba(0, 0, 0, 0.03));
+        }
       }
     }
   }
 
-  .rtsee-send-message-button {
+  .rts-send-message-button {
     position: absolute;
-    height: 35px;
+    height: $rts-chat-input-height - $rts-offset-md;
     line-height: 0;
-    right: 0;
-    bottom: 0;
-    width: $rtsee-chat-input-height;
-    background: none;
+    right: $rtsu-space-xs;
+    bottom: $rtsu-space-xs;
+    width: $rts-chat-input-height - $rts-offset-md;
+    background: linear-gradient(135deg, $rtsu-accent-purple 0%, $rtsu-accent-purple-light 100%);
     border: none;
     outline: none;
-    font-size: 27px;
-    color: $rts-new-primary-color;
+    border-radius: $rtsu-radius-sm;
+    color: #fff;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform $rtsu-transition-fast,
+                box-shadow $rtsu-transition-fast;
+    box-shadow: $rtsu-shadow-accent-sm;
 
     span {
-      line-height: 35px;
+      font-size: 18px;
+      line-height: 1;
+    }
+
+    &:hover {
+      transform: scale(1.05);
+      box-shadow: $rtsu-shadow-accent-md;
     }
 
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  .rts-send-message-button-stop {
+    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
+
     &:hover {
-      opacity: 0.7;
+      box-shadow: 0 4px 16px rgba(231, 76, 60, 0.4);
     }
   }
 }
+
+.rts-chat-input-streaming {
+  .rts-send-message {
+    opacity: 0.7;
+  }
+}
+
+// --- @-Mention Suggestions Popup ---
+.rts-chat-member-suggestions {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: $rts-chat-input-height;
+  background: var(--rts-bg-secondary, #fff);
+  border: 1px solid var(--rts-border-dim);
+  border-radius: $rtsu-radius-sm;
+  box-shadow: $rtsu-shadow-md;
+  z-index: 100;
+  margin-bottom: $rtsu-space-xs;
+  overflow: hidden;
+}
+
+.rts-chat-member-suggestion {
+  display: flex;
+  align-items: center;
+  gap: $rtsu-space-sm;
+  padding: $rtsu-space-sm $rtsu-space-md;
+  cursor: pointer;
+  transition: background $rtsu-transition-fast;
+
+  &:hover,
+  &.rts-chat-member-suggestion-active {
+    background: var(--rts-bg-hover, rgba(0, 0, 0, 0.05));
+  }
+}
+
+.rts-chat-member-suggestion-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--rts-bg-dim);
+  flex-shrink: 0;
+}
+
+.rts-chat-member-suggestion-name {
+  font-size: $rtsu-font-size-md;
+  font-family: $rtsu-font-family;
+  color: var(--rts-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// --- #-Workflow Suggestions Popup ---
+.rts-workflow-suggestions-head {
+  padding: 6px $rtsu-space-md 2px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--rts-text-secondary, #8a8fa3);
+}
+
+.rts-workflow-suggestion-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  color: #fff;
+  font-weight: 700;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+}
+
+.rts-workflow-suggestion-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.rts-workflow-suggestion-meta {
+  font-size: 11px;
+  color: var(--rts-text-secondary, #8a8fa3);
+}
+
+// --- Agent Access Denied Banner ---
+.rts-agent-access-denied-banner {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: $rts-chat-input-height;
+  display: flex;
+  align-items: center;
+  gap: $rtsu-space-sm;
+  padding: $rtsu-space-sm $rtsu-space-md;
+  background: var(--rts-bg-warning, #fff3e0);
+  border: 1px solid var(--rts-border-warning, #ffcc80);
+  border-radius: $rtsu-radius-sm;
+  box-shadow: $rtsu-shadow-md;
+  z-index: 100;
+  margin-bottom: $rtsu-space-xs;
+  animation: rts-banner-slide-in 0.2s ease-out;
+}
+
+.rts-agent-access-denied-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.rts-agent-access-denied-text {
+  flex: 1;
+  font-size: $rtsu-font-size-sm;
+  font-family: $rtsu-font-family;
+  color: var(--rts-text-warning, #e65100);
+  line-height: 1.4;
+}
+
+.rts-agent-access-denied-dismiss {
+  flex-shrink: 0;
+  padding: 4px 12px;
+  border: none;
+  border-radius: $rtsu-radius-sm;
+  background: var(--rts-text-warning, #e65100);
+  color: #fff;
+  font-size: $rtsu-font-size-sm;
+  font-family: $rtsu-font-family;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity $rtsu-transition-fast;
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+@keyframes rts-banner-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}