architwin 1.12.4 → 1.13.0

package/lib/atwinui/components/toolbar/tagMessagingPane.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { getTagMessageRecepients, getTagMessages, getSelectedTagUuid, dispatchSpaceEvent, _tags } from "../../../architwin";
 import { SPACE_EVENTS } from "../../../types";
 import { bytesToMegabytes, convertToCssRgb, generateUUID } from "../../../utils";
@@ -7,7 +16,9 @@ import { parseISO } from 'date-fns';
 import { formatWithOptions } from "date-fns/fp";
 import { ja } from "date-fns/locale";
 import i18n from './i18n';
+import { batchAddEventListenerByClassName } from '../../events';
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' } });
+let theseTagMessages = [];
 export function renderTagMessagingPane() {
     const element = document.createElement('div');
     element.classList.add('at_container');
@@ -140,7 +151,11 @@ export function renderTagMessage(message, optimisticUpdate = false) {
                 `
                         <img class="at_chat_media" src="${message.image_url}"/><br>
                         ` : ``}
-                        <small>${created_on}</small>
+                        <small>${created_on}</small><br>
+                        <div class="at_flex at_justify_center at_comment_unsend_container" style="${checkTimeoutDifference(message.created_on, 'check') == true ? 'at_comment_unsend_container' : 'display: none'} id="at-unsend-container-${message.uuid}">
+                            <small class="mdi mdi-arrow-u-left-top at_text_xxs at_align_center at_comment_unsend_text">&nbsp;</small>
+                            <small class="at_text_xxs at_align_center at_comment_unsend_text" id="at-unsend-user-text-${created_on}">Unsend</small>
+                        </div>
                     </div>
                 </div>
             `;
@@ -152,8 +167,8 @@ export function renderTagMessage(message, optimisticUpdate = false) {
     }
     else {
         chat.innerHTML = `
-            <span class="at_chat_avatar at_chat_avatar_sender">${message.owner_name.charAt(0).toUpperCase()}</span>
-            <div class="at_chat_bubble at_chat_bubble_sent">
+            <span class="at_chat_avatar at_chat_avatar_sender" id="at-chat-avatar-container-${message.uuid}">${message.owner_name.charAt(0).toUpperCase()}</span>
+            <div class="at_chat_bubble at_chat_bubble_sent" id="at-chat-bubble-container-${message.uuid}">
                 <div>
                     <small>${message.owner_name} ➡️ ${message.to_user_name}</small> <br>
                     ${message.messages}
@@ -162,8 +177,13 @@ export function renderTagMessage(message, optimisticUpdate = false) {
             `
                     <img class="at_chat_media" src="${message.image_url}"/><br>
                     ` : ``}
-                    <small>${created_on}</small>
+                    <small>${created_on}</small><br>
+                    <div class="at_flex at_justify_center at_comment_unsend_container" id="at-unsend-container-${message.uuid}" style="${checkTimeoutDifference(message.created_on, 'check') == true ? 'at_comment_unsend_container' : 'display: none'}">
+                        <small class="mdi mdi-arrow-u-left-top at_text_xxs at_align_center at_comment_unsend_text">&nbsp;</small>
+                        <small class="at_text_xxs at_align_center at_comment_unsend_text" id="at-unsend-admin-text-${message.uuid}" value="${message.uuid}">Unsend</small>
+                    </div>
                 </div>
+
             </div>
         `;
     }
@@ -171,13 +191,20 @@ export function renderTagMessage(message, optimisticUpdate = false) {
         const firstChild = chatContainer.firstChild;
         chatContainer.insertBefore(chat, firstChild);
         const input = (document.getElementById("at-no-message"));
-        input.remove();
-        return;
+        if (input)
+            input.remove();
+        // return
     }
     else {
         chatContainer.appendChild(chat);
-        return;
     }
+    chat.addEventListener('click', (event) => {
+        //@ts-expect-error
+        const newMessage = event.target.getAttribute('value');
+        console.log('___chat is clicked', newMessage, message);
+        unsendComment({ newMessage });
+    });
+    return;
 }
 export function getSelectedMessageRecepient() {
     const recepientDropdown = document.getElementById('at-recepient-dropdown');
@@ -220,6 +247,7 @@ export function getTagMessageText() {
     return content;
 }
 export function clearTagMessageInput() {
+    console.log('clearTagMessageInput()');
     const textareaInput = document.getElementById('at-chat-textarea');
     textareaInput.value = '';
 }
@@ -261,16 +289,18 @@ export function createTagMessage() {
     message.created_on = created_on;
     dispatchSpaceEvent(SPACE_EVENTS.TAG_MESSAGE_SENT, message);
     // add remove span
+    //clear input field
+    clearTagMessageInput();
     //Perform optimistic update
-    renderTagMessage(message, true);
+    renderTagMessage(message, false); //change to false due to Unsend Option #15713
     //Clear forms
     clearSelectedMedia();
-    clearTagMessageInput();
     notyf.success(`${i18n.t('MessageSentSuccess')}`);
+    getTagMessages();
     return message;
 }
 export function setTagMessagingDetails(tagId) {
-    console.log("setTagMessagingDetails()", tagId);
+    console.log("setTagMessagingDetails() ", tagId);
     if (tagId && tagId !== '') {
         const tagTitle = document.getElementById('at-tag-name-messaging');
         const tagColor = document.getElementById('at-tag-color-messaging');
@@ -299,3 +329,80 @@ export function setTagMessagingDetails(tagId) {
     console.error("tagId is either undefined or empty");
     return;
 }
+// this deletes a selected Chat Bubble
+export function unsendComment(payload) {
+    console.log('___unsendComment()', payload);
+    batchAddEventListenerByClassName('at_comment_unsend_container', (event) => __awaiter(this, void 0, void 0, function* () {
+        console.log('__batch event', event);
+        //@ts-ignore
+        const commentTag = event.target.getAttribute('value');
+        if (commentTag && payload.tagMessages) {
+            console.log('__comment uuid: ', payload.tagMessages);
+            const commentFound = payload.tagMessages.find((message) => {
+                return message.uuid == commentTag;
+            });
+            if (commentFound && checkTimeoutDifference(commentFound.created_on, 'delete') == true) {
+                dispatchSpaceEvent(SPACE_EVENTS.TAG_MESSAGE_UNSEND, { uuid: commentFound.uuid, tagId: commentFound.tag_uuid });
+                hideTagBubble(commentFound.uuid);
+            }
+        }
+    }));
+}
+// this sets the Interval to check if Timeout hadn't pass yet
+export function timedoutComment(payload) {
+    console.log('timedoutComment()', payload);
+    setInterval(function () {
+        // console.log("This message prints every 5 seconds.", payload);
+        payload.filter((message) => __awaiter(this, void 0, void 0, function* () {
+            const difference = yield checkTimeoutDifference(parseISO(message.created_on), 'check');
+            const container = document.getElementById(`at-unsend-container-${message.uuid}`);
+            if (difference == true && container) {
+                // console.log('difference test: ', difference)
+                // container.style.display = 'block'
+            }
+            else if (difference == false && container) {
+                container.style.display = 'none';
+                // console.log('This message print UNSEND STILL AVAIABLE')
+            }
+        }));
+    }, 5000);
+}
+// this compares the created_on and current Time of User its within Timeout
+export function checkTimeoutDifference(createdDateInput, mode) {
+    const createdDate = new Date(createdDateInput);
+    const currentDate = new Date();
+    const difference = currentDate.getTime() - createdDate.getTime();
+    const TIMEOUT = 10 * 60 * 1000;
+    if (mode == 'check') {
+        if (difference <= TIMEOUT) {
+            timedoutComment(theseTagMessages);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    else if (mode == 'delete') {
+        if (difference <= TIMEOUT) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+}
+// this function hides the selected Chat Bubble while it is being deleted
+function hideTagBubble(payload) {
+    console.log('hideTagBubble()', payload);
+    const chatContainer = document.getElementById(`at-chat-bubble-container-${payload}`);
+    const chaAvatar = document.getElementById(`at-chat-avatar-container-${payload}`);
+    if (chatContainer && chaAvatar) {
+        chatContainer.style.display = 'none';
+        chaAvatar.style.display = 'none';
+    }
+}
+// this gets the tagMessages
+export function getTheseTagMessages(payload) {
+    console.log('getTheseTagMessages()');
+    return theseTagMessages = payload;
+}

package/lib/atwinui/components/toolbar/usersPane.d.ts

@@ -0,0 +1,14 @@
+import { ScreenShareRequest, ScreenShareSessionUser, ScreenShareUser } from '../../../types';
+export declare function renderUsersPane(): HTMLElement;
+export declare function renderUsersList(users: ScreenShareUser[]): void;
+export declare function renderOnlineUserRow(user: ScreenShareUser): HTMLTableRowElement;
+export declare function renderOfflineUserRow(user: ScreenShareUser): HTMLTableRowElement;
+export declare function sortUsersRowByOnlineState(onlineFirst?: boolean): void;
+export declare function handleClickEventUserRow(): void;
+export declare function renderSharingSpaceDetail(user: ScreenShareSessionUser): void;
+export declare function handleClickEventBackToUserListLink(): void;
+export declare function renderScreenShareRequestModal(request: ScreenShareRequest): void;
+export declare function handleInputEventSelectPointerSettings(): void;
+export declare function handleClickEventEndSessionBtn(): void;
+export declare function handleScreenShareUsersUpdated(users: ScreenShareUser[]): void;
+export declare function handleScreenShareEndSessionEvent(): void;

package/lib/atwinui/components/toolbar/usersPane.js

@@ -0,0 +1,273 @@
+import { _space, dispatchSpaceEvent } from '../../../architwin';
+import { SPACE_EVENTS } from '../../../types';
+import i18n from './i18n';
+let _currentUser;
+let _screenShareUsers = [];
+let _screenShareUser;
+let _screenShareSessionUsers;
+let _screenShareSessionUser;
+let _screenShareSession;
+let _screenShareUsersSortSettings = { onlineFirst: true };
+let _onDisplayComponent;
+export function renderUsersPane() {
+    const element = document.createElement('div');
+    element.setAttribute('id', 'at-users-pane');
+    element.style.setProperty('width', '400px');
+    element.classList.add('at_container');
+    element.innerHTML = `
+        <div id="at-users-pane" class="at_flex at_flex_column">
+            <div id="at-users-pane-content" class="at_form_container">
+                <div class="at_flex at_justify_start">
+                    <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
+                </div>
+                <div class="at_disable_hover_users_list at_scrollable_container at_h-min-45">
+                    <table id="at-user-list-container">
+                    </table>
+                </div>
+            </div>
+        </div>
+    `;
+    return element;
+}
+export function renderUsersList(users) {
+    _onDisplayComponent = 'USER_LIST';
+    _screenShareUsers = users;
+    const usersContainer = document.getElementById("at-user-list-container");
+    if (!usersContainer) {
+        console.error("Tag container does not exist in DOM");
+        return;
+    }
+    if (users.length <= 0) {
+        console.log("No tags to load");
+        usersContainer.innerHTML = ``;
+        return;
+    }
+    usersContainer.innerHTML = '';
+    users.forEach(user => {
+        const row = user.onlineStatus !== 'offline' ? renderOnlineUserRow(user) : renderOfflineUserRow(user);
+        usersContainer.appendChild(row);
+    });
+    handleClickEventUserRow();
+    sortUsersRowByOnlineState(true);
+}
+export function renderOnlineUserRow(user) {
+    const element = document.createElement("tr");
+    element.setAttribute('id', `at-user-row-${user.id}`);
+    element.dataset.id = user.id;
+    element.classList.add(...['at_online_user_row', 'at_flex', 'at_items_center', 'at_justify_between']);
+    const iconOrSharingText = user.onlineStatus === 'in_session'
+        ? `
+        <div class="at_flex at_items_center at_justify_center">
+            <p>Now Sharing</p>
+        </div>    
+    `
+        : `
+        <div class="at_user_screen_sharing_state at_flex at_items_center at_justify_center">
+            <div class="mdi mdi-monitor-share"></div>
+        </div>
+    `;
+    element.innerHTML = `
+        <td id="at_user_row_${user.id}">
+            <div class="at_flex at_flex_row at_items_center">
+                <div class="at_users_online_indicator"></div>
+                <span class="at_no_hover_text_online_user at_text_base">${user.name}</span>
+            </div>
+        </td>
+        <td>
+            ${iconOrSharingText}
+        </td>
+    `;
+    return element;
+}
+export function renderOfflineUserRow(user) {
+    const element = document.createElement("tr");
+    element.setAttribute('id', `at-user-row-${user.id}`);
+    element.dataset.id = user.id;
+    element.classList.add(...['at_offline_user_row', 'at_flex', 'at_items_center', 'at_justify_between']);
+    element.innerHTML = `
+        <td id="at_user_row_${user.id}">
+            <div class="at_flex at_flex_row at_items_center">
+                <div class="at_users_ofline_indicator"></div>
+                <span class="at_no_hover_text_offline_user at_text_base at_offline_user_name_text">${user.name}</span>
+            </div>
+        </td>
+    `;
+    return element;
+}
+export function sortUsersRowByOnlineState(onlineFirst = _screenShareUsersSortSettings.onlineFirst || true) {
+    _screenShareUsersSortSettings = { onlineFirst };
+    const table = document.getElementById('at-user-list-container');
+    const rows = Array.from(table.querySelectorAll('tr'));
+    if (onlineFirst) {
+        rows.sort((a, b) => {
+            const aClass = a.classList.contains('at_online_user_row');
+            const bClass = b.classList.contains('at_online_user_row');
+            return Number(bClass) - Number(aClass);
+        });
+        table.append(...rows);
+    }
+}
+export function handleClickEventUserRow() {
+    const table = document.getElementById('at-user-list-container');
+    if (table) {
+        table.addEventListener('click', (event) => {
+            const target = event.target;
+            const row = target.closest('tr');
+            if (row && table.contains(row)) {
+                const id = row.dataset.id;
+                const user = _screenShareUsers.find(u => u.id === id);
+                _screenShareUser = user;
+                if (user.onlineStatus === 'offline')
+                    return;
+                if (user.onlineStatus === 'in_session') {
+                    const usersPaneContent = document.getElementById('at-users-pane-content');
+                    usersPaneContent.innerHTML = '';
+                    const sessionUser = {
+                        id: user.id,
+                        name: user.name,
+                        role: 'guest',
+                        session: _screenShareSession
+                    };
+                    renderSharingSpaceDetail(sessionUser);
+                }
+                else {
+                    const nowEpochSeconds = Math.floor(Date.now() / 1000);
+                    const screenShareInvitation = {
+                        user: user,
+                        requestBy: _currentUser,
+                        requestedAt: nowEpochSeconds,
+                        status: 'pending'
+                    };
+                    dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_REQUEST, screenShareInvitation);
+                    // renderScreenShareRequestModal(screenShareInvitation) // moved it to front end
+                }
+            }
+        });
+    }
+}
+export function renderSharingSpaceDetail(user) {
+    var _a;
+    _onDisplayComponent = 'SPACE_SHARING_DETAILS';
+    _screenShareSessionUser = user;
+    const usersPaneContent = document.getElementById('at-users-pane-content');
+    const element = document.createElement('div');
+    element.setAttribute('id', 'at-sharing-space-details');
+    element.classList.add('at_form_container');
+    element.innerHTML = `
+        <div class="at_flex at_justify_start">
+            <span class="at_bolder at_text_base at_capitalize">${i18n.t('Sharing Space')}</span>
+        </div>
+        <div class="at_flex at_flex_column at_gap_half_rem">
+            <div class="at_screen_share_guest_card at_flex at_flex_row at_justify_between at_items_center">
+                <div class="at_flex at_flex_column at_justify_start">
+                    <p class="at_bolder at_text_base">${user.name}</p>
+                    <span class="at_subtitle_text">Your are sharing ${(_a = _space === null || _space === void 0 ? void 0 : _space.name) !== null && _a !== void 0 ? _a : 'test'} to this person</span>
+                </div>
+                <div class="at_users_online_indicator"></div>
+            </div>
+            <div class="at_bolder at_text_base">Pointer</div>
+            <div class="at_flex at_flex_column at_justify_start">
+                <div class="at_screen_share_pointer_choices">
+                    <select id="at_select_screen_share_pointer" name="at_screen_share_pointer">
+                    <option>${i18n.t('Off')}</option>
+                    <option>${i18n.t('On')}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="at_flex at_flex_column at_justify_center at_items_center">
+                <div id="at-back-user-list-link" class="at_back_user_list_link">
+                    <span class="mdi mdi-arrow-left"></span>
+                    <p> ${i18n.t('Back to user list')}</p>
+                </div>
+                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn">
+                    ${i18n.t('End Session')}
+                </button>
+            </div>
+        </div>
+    `;
+    usersPaneContent.appendChild(element);
+    handleClickEventBackToUserListLink();
+    handleInputEventSelectPointerSettings();
+    handleClickEventEndSessionBtn();
+}
+export function handleClickEventBackToUserListLink() {
+    const link = document.getElementById('at-back-user-list-link');
+    if (link) {
+        link.addEventListener('click', () => {
+            const usersPaneContent = document.getElementById('at-users-pane-content');
+            usersPaneContent.innerHTML = '';
+            usersPaneContent.classList.add('at_form_container');
+            usersPaneContent.innerHTML = `
+                <div class="at_flex at_justify_start">
+                    <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
+                </div>
+                <div class="at_disable_hover_users_list at_scrollable_container at_h-min-45">
+                    <table id="at-user-list-container">
+                    </table>
+                </div>
+            `;
+            renderUsersList(_screenShareUsers);
+        });
+    }
+}
+export function renderScreenShareRequestModal(request) {
+    var _a;
+    _onDisplayComponent = 'SCREEN_SHARE_REQUEST_MODAL';
+    const element = document.createElement('dialog');
+    element.setAttribute('id', 'at-screen-share-request-modal');
+    element.classList.add('at_screen_share_request_modal');
+    element.innerHTML = `
+        <div class="at_screen_share_request_modal_content at_flex at_flex_column at_justify_center at_items_center">
+            <div class="at_screen_share_icon mdi mdi-monitor-multiple"></div>
+            <h1 class="at_screen_share_request_message">${i18n.t('Waiting for remote screen share confirmation')}</h1>
+            <p class="at_screen_share_request_sub_message"> ${i18n.t('You are requesting to remotely share your space to')} <strong>${request.user.name}</strong></p>
+            <button type="button" id="at-screen-share-request-btn"  class="at_screen_share_cancel_request_btn">${i18n.t('Cancel Request')}</button>
+        </div>
+    `;
+    // disabled modal dismiss via Esc key
+    function blockEscapeKey(e) {
+        if (e.key === 'Escape' && element.open) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    element.addEventListener('keydown', blockEscapeKey);
+    element.addEventListener('cancel', (event) => {
+        event.preventDefault();
+    });
+    (_a = element.querySelector('#at-screen-share-request-btn')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+        const cancelRequest = Object.assign(Object.assign({}, request), { status: 'canceled' });
+        dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_CANCEL_REQUEST, cancelRequest);
+        element.close();
+        element.remove();
+        _onDisplayComponent = 'USER_LIST';
+    });
+    document.body.appendChild(element);
+    element.showModal();
+}
+export function handleInputEventSelectPointerSettings() {
+    const select = document.getElementById('at_select_screen_share_pointer');
+    if (select) {
+        select.addEventListener('input', (event) => {
+            const target = event.target;
+            _screenShareSession = Object.assign(Object.assign({}, _screenShareSession), { isPointerEnabled: target.value === 'On' });
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_POINTER_UPDATE, _screenShareSession);
+        });
+    }
+}
+export function handleClickEventEndSessionBtn() {
+    const button = document.getElementById('at-screen-share-end-session-btn');
+    if (button) {
+        button.addEventListener('click', () => {
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_END_SESSION, handleScreenShareEndSessionEvent);
+        });
+    }
+}
+export function handleScreenShareUsersUpdated(users) {
+    renderUsersList(users);
+}
+export function handleScreenShareEndSessionEvent() {
+    _screenShareSessionUsers = [];
+    _screenShareSession = {};
+    renderUsersList(_screenShareUsers);
+}

package/lib/atwinui/components/toolbar/viewingRemoteSpace.d.ts

@@ -0,0 +1,7 @@
+import { ISpaceUser } from "../../../types";
+export declare function renderViewingRemoteSpace(): HTMLElement;
+/**
+ * Render the viewing remote space panel for the user sharing their screen.
+ * @param user The user who is currently sharing their screen
+ */
+export declare function renderRemoteSpaceViewing(user: ISpaceUser): void;

package/lib/atwinui/components/toolbar/viewingRemoteSpace.js

@@ -0,0 +1,77 @@
+import { _currentSpace } from "../../../architwin";
+import i18n from './i18n';
+export function renderViewingRemoteSpace() {
+    const element = document.createElement('div');
+    element.classList.add('at_container', 'at_w-14', 'at_h-full', 'at_p-5');
+    element.setAttribute('id', 'at-viewing-remote-space-pane');
+    element.setAttribute('data-cy', 'at-viewing-remote-space-pane');
+    element.innerHTML = `
+        <div class="at_panel_header">
+            <span>${i18n.t('Viewing Remote Space')}</span>
+        </div>
+
+        <div id="at-sharing-user-container" >
+        </div>
+
+        <div class="at_button_row at_justify_center">
+            <div 
+                class="at_button at_ghost at_bg_red_600 at_w-full" 
+                id="at-user-leave-session-btn" 
+                data-cy="at-user-leave-session-btn">
+                ${i18n.t('Leave Session')}
+            </div>
+        </div>
+    `;
+    return element;
+}
+/**
+ * Render the viewing remote space panel for the user sharing their screen.
+ * @param user The user who is currently sharing their screen
+ */
+export function renderRemoteSpaceViewing(user) {
+    var _a;
+    const container = document.getElementById('at-sharing-user-container');
+    const maincontainer = document.getElementById('at-viewing-remote-space-pane');
+    if (!container && !maincontainer)
+        return;
+    maincontainer.style.display = 'block';
+    container.innerHTML = '';
+    // === Main Card ===
+    const card = document.createElement('div');
+    card.className = 'at_card at_p-5 at_mb_5 at_mt_4 at_bg_black at_opacity_75 at_rounded';
+    const cardContent = document.createElement('div');
+    cardContent.className = 'at_flex at_items_center at_justify_between';
+    // Left: User info
+    const infoWrapper = document.createElement('div');
+    const userNameEl = document.createElement('strong');
+    userNameEl.textContent = ((_a = user.name) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || 'ADMIN';
+    userNameEl.className = 'at_text_white at_font_bold';
+    userNameEl.style.fontSize = '1.25rem';
+    const statusText = document.createElement('div');
+    statusText.className = 'at_text_sm at_text_white';
+    statusText.innerHTML = `
+        ${i18n.t('Is sharing their space')} &lt;${(_currentSpace === null || _currentSpace === void 0 ? void 0 : _currentSpace.name) || i18n.t('SPACE_NAME')}&gt; ${i18n.t('to you')}
+    `;
+    infoWrapper.appendChild(userNameEl);
+    infoWrapper.appendChild(statusText);
+    // Right: Green dot
+    const dot = document.createElement('div');
+    dot.className = 'at_circle at_w-2 at_h-2 at_bg_green_500';
+    const circle = document.createElement('span');
+    circle.style.width = '15px';
+    circle.style.height = '15px';
+    circle.style.borderRadius = '50%';
+    circle.style.backgroundColor = user.isActive ? '#22c55e' : '#ffffff';
+    circle.style.border = '1px solid #ccc';
+    circle.style.marginRight = '10px';
+    // Combine into card
+    cardContent.appendChild(infoWrapper);
+    cardContent.appendChild(circle);
+    card.appendChild(cardContent);
+    container.appendChild(card);
+    // === Instructional Text ===
+    const instruction = document.createElement('div');
+    instruction.className = 'at_text_xs at_text_center at_text_white at_opacity_80 at_mb_6';
+    instruction.textContent = i18n.t('During a remote space sharing session, you cannot navigate around the space, only your host has control during the session');
+    container.appendChild(instruction);
+}

package/lib/atwinui/events.d.ts

@@ -1,6 +1,9 @@
+import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 declare let activeToolbarItem: HTMLElement, activeActionItem: HTMLElement, cancelModelPlacementPrompt: HTMLDivElement;
+export declare let notyf: Notyf;
 declare let isCustomMapControlsVisible: boolean;
+declare let pipeColor: string;
 declare function batchAddEventListenerByClassName(className: string, callback: EventListener): void;
 /**
 * @param attrName - The name of the data attribute (without the "data-" prefix), e.g. 'toggle-pane'
@@ -39,4 +42,4 @@ declare function handleDeletePartition(targetId: string): void;
  * Handles the display logic for showing the custom minimap.
  */
 declare function handleShowCustomMinimap(): void;
-export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, };
+export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, };