architwin 1.13.10 → 1.14.0

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

@@ -168,7 +168,6 @@ i18n
                 "General Settings": "General Settings",
                 "UploadImage": "Upload Image",
                 "Unsend": "Unsend",
-                "PipesMenu": "Pipes",
                 "Pipes": "Pipes",
                 "SelectPipeType": "Select Pipe Type",
                 "AddPipeType": "Add Pipe Type",
@@ -193,11 +192,31 @@ i18n
                 "ConfirmDeletePipeCategory": "Are you sure you want to delete this pipe category?",
                 "DeletePipe": "Delete pipe",
                 "ConfirmDeletePipe": "Are you sure you want to delete this pipe?",
-                "PipeCategoryName": "Enter pipe type",
+                "PipeCategoryName": "Enter pipe type name",
                 "HideShowAllPipes": "Hide/Show All Pipes",
-                "PipePlaceHolder": "Ex: Gas Pipe",
                 "Pipe": "Pipe",
-                "Vertex": "Vertex"
+                "Vertex": "Vertex",
+                "ScreenShare": "Screen Share",
+                "Users": "Users",
+                "EndSession": "End Session",
+                "SharingSpace": "Sharing Space",
+                "On": "On",
+                "Off": "Off",
+                "BackToUserList": "Back to user list",
+                "ScreenShareRequestModalMessage": "Waiting for remote screen share confirmation",
+                "ScreenShareRequestModalSubMessage": "You are requesting to remotely share your space to",
+                "CancelRequest": "Cancel Request",
+                "ViewingRemoteSpace": "Viewing Remote Space",
+                "LeaveSession": "Leave Session",
+                "IsSharingTheirSpace": "Is sharing their space",
+                "ToYou": "to you",
+                "ViewingInstructions": "During a remote space sharing session, you cannot navigate around the space, only your host has control during the session",
+                "Pending": "Pending",
+                "NowSharing": "Now Sharing",
+                "ConfirmLeaveSession": "画面共有を終了しますか？",
+                "ConfirmLeaveSessionReminder": "",
+                "InSession": "In Session",
+                "Leave": "Leave",
             }
         },
         ja: {
@@ -365,36 +384,55 @@ i18n
                 "Search...": "検索...",
                 "UploadImage": "画像をアップロード",
                 "Unsend": "取り消し",
-                "PipesMenu": "矢印マーカー",
                 "Pipes": "矢印マーカー",
                 "SelectPipeType": "矢印マーカー種別選択",
-                "AddPipeType": "配管種別を追加",
-                "EditPipeType": "配管種別を編集",
-                "PipeTypeName": "配管種別名",
-                "CategoryColor": "配管色",
-                "NoPipesToDisplay": "表示する配管がありません",
-                "DrawPipe": "配管を描画",
+                "AddPipeType": "矢印マーカー種別を追加",
+                "EditPipeType": "矢印マーカー種別を編集",
+                "PipeTypeName": "矢印マーカー名",
+                "CategoryColor": "矢印マーカー色",
+                "NoPipesToDisplay": "表示する快感がありません",
+                "DrawPipe": "	矢印マーカーを描画",
                 "NoVertexToDisplay": "表示する頂点がありません",
-                "NoPipesTypeToDisplay": "表示する配管がありません",
+                "NoPipesTypeToDisplay": "表示する矢印マーカー種別がありません",
                 "DrawingModeIsActive": "描画モードが適応中",
-                "PipeSavedSuccessfully": "配管を保存しました",
-                "SaveTheCurrentPipeBeforeProceeding": "現在描画している配管を保存してから進めてください",
+                "PipeSavedSuccessfully": "矢印マーカーを保存しました",
+                "SaveTheCurrentPipeBeforeProceeding": "現在描画している矢印マーカーを保存してから進めてください",
                 "CategorySuccessfullySaved": "カテゴリを正常に保存しました",
-                "PipeDeletedSuccessfully": "配管が正常に削除されました",
+                "PipeSuccessfullyDeleted": "矢印マーカーが正常に削除されました！",
                 "CannotDrawNoColorSelected": "描画不可：色を選択していません",
                 "DrawingModeIsNowActive": "描画モードが現在有効です",
                 "DrawingModeIsCurrentlyInactive": "描画モードは現在無効です",
-                "DeletePipeCategory": "配管種別を削除",
+                "DeletePipeCategory": "矢印マーカー種別を削除",
                 "VertexDeletedSuccessfully": "頂点が正常に削除されました",
-                "PipeCategoryDeletedSuccessfully": "配管種別が正常に削除されました",
-                "ConfirmDeletePipeCategory": "この配管種別を削除してもよろしいですか？",
-                "DeletePipe": "配管を削除",
-                "ConfirmDeletePipe": "この配管を削除してもよろしいですか？",
-                "PipeCategoryName": "配管種別を入力",
-                "HideShowAllPipes": "全ての配管を表示/非表示",
-                "PipePlaceHolder": "配管種別名を入力",
+                "PipeCategoryDeletedSuccessfully": "矢印マーカー種別が正常に削除されました！",
+                "ConfirmDeletePipeCategory": "この矢印マーカー種別を削除してもよろしいですか？",
+                "DeletePipe": "矢印マーカーを削除",
+                "ConfirmDeletePipe": "この矢印マーカーを削除してもよろしいですか？",
+                "PipeCategoryName": "矢印マーカー種別を入力",
+                "HideShowAllPipes": "全ての矢印マーカーを表示/非表示",
                 "Pipe": "矢印マーカー",
-                "Vertex": "頂点"
+                "Vertex": "頂点",
+                "Screen Share": "画面共有",
+                "Users": "ユーザー",
+                "EndSession": "画面共有を終了",
+                "SharingSpace": "画面共有",
+                "On": "オン",
+                "Off": "オフ",
+                "BackToUserList": "ユーザリストに戻る",
+                "ScreenShareRequestModalMessage": "先方の画面共有参加を待っています",
+                "ScreenShareRequestModalSubMessage": "画面共有のリクエストを受信しています",
+                "CancelRequest": "リクエストを拒否",
+                "ViewingRemoteSpace": "先方のスペースを表示",
+                "LeaveSession": "画面共有を終了",
+                "IsSharingTheirSpace": "上記のユーザが画面共有をしています",
+                "ToYou": "",
+                "ViewingInstructions": "画面共有中は供している人しかスペース内を動かすことができません",
+                "Pending": "承認待ち",
+                "NowSharing": "画面共有開始",
+                "ConfirmLeaveSession": "画面共有を終了しますか？",
+                "ConfirmLeaveSessionReminder": "",
+                "InSession": "共有中",
+                "Leave": "終了",
             }
         }
     },

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

@@ -2,6 +2,8 @@ import { _mpConfig, themeManager } from "../../../architwin";
 import { renderSidebarContainer } from "./sidebarContainer";
 import { renderMenuBar, setActiveMenu, clearActiveMenu, getObjectListStatus } from "./menuBar";
 import { renderObjectListPane, renderObjectCards, removeObjectCard } from "./objectListPane";
+import { renderSpaceUserListPane } from "./spaceUserListPane";
+import { renderViewingRemoteSpace } from "./viewingRemoteSpace";
 import { renderAddObjectPane } from "./addObjectPane";
 import { renderTagFormPane, getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown } from "./tagFormPane";
 import { renderTagListPane, renderTags, renderTagRow, addClickEventToTagRow, setTagLink, getTagLink, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList } from "./tagListPane";
@@ -23,12 +25,13 @@ import { renderRoomTreePane } from "./spacePartition/roomTreePane";
 import { renderRoomFormPane } from "./spacePartition/roomFormPane";
 import { renderBasepointCalibratePane } from "./basepointCalibratePane";
 import { renderGeneralSettingsMenu } from "./generalSettingsMenuPane";
+import { renderScreenSharePane } from "./screenSharePane";
 import { PipeList } from "./pipeListPane";
 import { PipeForm } from "./pipeFormPane";
 const pipeList = new PipeList();
 const pipeForm = new PipeForm();
 let iFrame, sidebarContainer;
-let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane, modelControlPane, actionSettingsPane, roomTreePane, roomFormPane, basepointCalibratePane, generalSettingsPane, pipeListPane, pipeFormPane;
+let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane, modelControlPane, actionSettingsPane, roomTreePane, roomFormPane, basepointCalibratePane, generalSettingsPane, spaceUserListPane, viewingRemoteSpace, usersPane, pipeListPane, pipeFormPane;
 function getIframeElement(iframeId) {
     if (!iframeId || iframeId === '') {
         console.error("IframeId is empty or undefined");
@@ -83,6 +86,8 @@ function renderToolbarUI(payload) {
     iFrame.appendChild(sidebarContainer);
     menuBar = renderMenuBar(iFrame);
     objectListPane = renderObjectListPane(payload.objects);
+    spaceUserListPane = renderSpaceUserListPane();
+    viewingRemoteSpace = renderViewingRemoteSpace();
     addObjectPane = renderAddObjectPane();
     tagFormPane = renderTagFormPane();
     tagListPane = renderTagListPane();
@@ -97,6 +102,7 @@ function renderToolbarUI(payload) {
     actionSettingsPane = renderActionSettingsPane();
     basepointCalibratePane = renderBasepointCalibratePane();
     generalSettingsPane = renderGeneralSettingsMenu();
+    usersPane = renderScreenSharePane();
     pipeListPane = pipeList.renderPane();
     pipeFormPane = pipeForm.renderPane();
     renderModal();
@@ -110,11 +116,14 @@ function renderToolbarUI(payload) {
     sidebarContainer.appendChild(tagMessagingPane);
     sidebarContainer.appendChild(libraryPane);
     sidebarContainer.appendChild(objectListPane);
+    sidebarContainer.appendChild(spaceUserListPane);
+    sidebarContainer.appendChild(viewingRemoteSpace);
     sidebarContainer.appendChild(addObjectPane);
     sidebarContainer.appendChild(tagFormPane);
     sidebarContainer.appendChild(tagListPane);
     sidebarContainer.appendChild(addMediaScreenForm);
     sidebarContainer.appendChild(generalSettingsPane);
+    sidebarContainer.appendChild(usersPane);
     sidebarContainer.appendChild(pipeListPane);
     sidebarContainer.appendChild(pipeFormPane);
     // Place your new pane
@@ -137,6 +146,9 @@ function renderToolbarUI(payload) {
     roomFormPane.style.display = 'none';
     actionSettingsPane.style.display = 'none';
     generalSettingsPane.style.display = 'none';
+    spaceUserListPane.style.display = 'none';
+    viewingRemoteSpace.style.display = 'none';
+    usersPane.style.display = 'none';
     pipeListPane.style.display = 'none';
     pipeFormPane.style.display = 'none';
     const customTheme = window.localStorage.getItem('customizedTheme');

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

@@ -5,6 +5,7 @@ export declare let isThemeEnabled: boolean;
 export declare let isRoomCreationEnabled: boolean;
 export declare let isBIMEnabled: boolean;
 export declare let isGeneralSettingsEnabled: boolean;
+export declare let isSpaceScreenSharingEnabled: boolean;
 export declare let isPipeEnabled: boolean;
 export declare function renderMenuBar(iFrame: HTMLIFrameElement): HTMLDivElement;
 export declare function isAdminUser(): void;

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

@@ -12,6 +12,7 @@ export let isThemeEnabled = true;
 export let isRoomCreationEnabled = true;
 export let isBIMEnabled = true;
 export let isGeneralSettingsEnabled = true;
+export let isSpaceScreenSharingEnabled = true;
 export let isPipeEnabled = true;
 export function renderMenuBar(iFrame) {
     const bimImageIcon = getAssetUrl('bim.png');
@@ -48,7 +49,7 @@ export function renderMenuBar(iFrame) {
     </div>
     <div class="at_sidebar_button_icon" style="display:${isPipeEnabled ? 'block' : 'none'}">
         <span class="mdi mdi-arrow-decision" id="at-pipe-btn" data-cy="at-pipe-btn" target-pane="at-pipe-list-pane"></span>
-        <div class="at_icon_tooltip" data-cy="at-tooltip-pipe">${i18n.t('PipesMenu')}</div>
+        <div class="at_icon_tooltip" data-cy="at-tooltip-pipe">${i18n.t('Pipes')}</div>
     </div>
     <div class="at_sidebar_button_icon" style="display:${isThemeEnabled ? 'block' : 'none'}">
         <span class="mdi mdi-palette" id="at-theme-picker-btn" data-cy="at-theme-picker-btn" target-pane="at-theme-pane"></span>
@@ -66,6 +67,10 @@ export function renderMenuBar(iFrame) {
         <span class="mdi mdi-cog-outline" id="at-general-setting-btn" data-cy="at-general-setting-btn" target-pane="at-general-setting-pane"></span>
         <div class="at_icon_tooltip" data-cy="at-tooltip-general-setting">${i18n.t('General Settings')}</div>
     </div>
+    <div class="at_sidebar_button_icon" style="display:${isSpaceScreenSharingEnabled ? 'block' : 'none'}">
+        <span class="mdi mdi-monitor-multiple" id="at-screen-share-btn" data-cy="at-screen-share-pane" target-pane="at-screen-share-pane"></span>
+        <div class="at_icon_tooltip" data-cy="at-tooltip-screen-share">${i18n.t('Screen Share')}</div>
+    </div>
     `;
     return menuBarElement;
 }
@@ -108,6 +113,11 @@ function setMenuItemsStatus() {
             isGeneralSettingsEnabled = _mpConfig.toolbarConfig.menuItems.generalSetting;
             log.info("__@ isGeneralSettingsEnabled: ", isGeneralSettingsEnabled);
         }
+        // SCREEN SHARING
+        if (menuItems.spaceScreenSharing !== undefined) {
+            isSpaceScreenSharingEnabled = _mpConfig.toolbarConfig.menuItems.spaceScreenSharing;
+            log.info("__@ isSpaceScreenSharingEnabled: ", isSpaceScreenSharingEnabled);
+        }
         // PIPE CONFIG
         if (menuItems.pipe !== undefined) {
             isPipeEnabled = _mpConfig.toolbarConfig.menuItems.pipe;
@@ -136,6 +146,7 @@ export function setActiveMenu(id) {
         case 'at-settings-btn':
         case 'at-general-setting-btn':
         case 'at-pipe-btn':
+        case 'at-screen-share-btn':
             if (parent.classList.contains('at_sidebar_button_icon_active')) {
                 // remove
                 log.info("removing active...");

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

@@ -37,7 +37,7 @@ export class PipeForm {
             </div>
             <div class="">
                 <span class="">${i18n.t('PipeTypeName')}</span>
-                <input id="at_pipe_type_name_input" class="at_pipe_input" type="text" name="pipe-name" placeholder="${i18n.t('PipePlaceHolder')}" required>
+                <input id="at_pipe_type_name_input" class="at_pipe_input" type="text" name="pipe-name" placeholder="${i18n.t('PipeCategoryName')}" required>
             </div>
             <div class="at_h-responsive-264">
                 <div class="at_py-3">
@@ -338,7 +338,7 @@ export class PipeForm {
                             if (targetObj) {
                                 disposeModel(targetObj);
                             }
-                            notyf.success(`${i18n.t('PipeSuccessfullyDeleted!')}`);
+                            notyf.success(`${i18n.t('PipeSuccessfullyDeleted')}`);
                             toggleModal(false);
                         }
                         else {

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

@@ -33,7 +33,7 @@ export class PipeList {
             <span class="mdi mdi-keyboard at_pull_left at_icon_hover ">
                 ${getShortcutTooltipHTML()}
             </span>
-            <span>${i18n.t('PipesMenu')}</span>
+            <span>${i18n.t('Pipes')}</span>
         </div>
         <div class="at_form_container ">
             <div class="at_field at_flex_column" style="${_pipeCategories ? '' : 'display: none;'}">
@@ -301,7 +301,7 @@ export class PipeList {
                             if (targetObj) {
                                 disposeModel(targetObj);
                             }
-                            notyf.success(`${i18n.t('PipeDeletedSuccessfully')}`);
+                            notyf.success(`${i18n.t('PipeSuccessfullyDeleted')}`);
                             toggleModal(false);
                         }
                         this.collapse.removeElement(uuid, type);

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

@@ -7,7 +7,9 @@ export declare function renderOfflineUserRow(user: ScreenShareUser): HTMLTableRo
 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 renderScreenShareLeaveConfirmationModal(isUserHost: boolean): void;
+export declare function handleModalCancelButton(): void;
+export declare function handleModalLeaveButton(isHost: boolean): void;
 export declare function handleInputEventSelectPointerSettings(): void;
 export declare function handleClickEventEndSessionBtn(): void;
 export declare function handleScreenShareUsersUpdated(payload: {

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

@@ -1,4 +1,4 @@
-import { _currentSpace, dispatchSpaceEvent } from '../../../architwin';
+import { _currentSpace, _screenSharingHostUser, dispatchSpaceEvent } from '../../../architwin';
 import { SPACE_EVENTS } from '../../../types';
 import i18n from './i18n';
 let _spaceData = null;
@@ -25,7 +25,7 @@ export function renderScreenSharePane() {
                     <table id="at-user-list-table">
                     </table>
                 </div>
-                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn"
+                <button type="button" id="at-screen-share-end-session-btn" class="at_SCREEN_SHARE_HOST_END_SESSION_btn"
                 style="display:none;">
                     ${i18n.t('EndSession')}
                 </button>
@@ -36,19 +36,22 @@ export function renderScreenSharePane() {
 }
 export function renderUsersList(users) {
     _onDisplayComponent = 'USER_LIST';
-    _screenShareUsers = sortUsersByStatus(users);
+    _screenShareUsers = [];
+    const _offlineUsers = users.filter(u => u.onlineStatus === 'offline');
+    const _notOfflineUsers = users.filter(u => u.onlineStatus !== 'offline');
+    _screenShareUsers = [..._notOfflineUsers, ..._offlineUsers];
     const usersListContainer = document.getElementById("at-user-list-table");
     if (!usersListContainer) {
         console.error("usersListContainer does not exist in DOM");
         return;
     }
     if (users.length <= 0) {
-        console.log("No tags to load");
+        console.log("No users to load");
         usersListContainer.innerHTML = ``;
         return;
     }
     usersListContainer.innerHTML = '';
-    users.forEach(user => {
+    _screenShareUsers.forEach(user => {
         const row = user.onlineStatus !== 'offline' ? renderOnlineUserRow(user) : renderOfflineUserRow(user);
         usersListContainer.appendChild(row);
     });
@@ -63,19 +66,19 @@ export function renderOnlineUserRow(user) {
     const iconOrSharingText = user.onlineStatus === 'in_session'
         ? `
         <div class="at_flex at_items_center at_justify_center">
-            <p>In Session</p>
+            <p>${i18n.t('InSession')}</p>
         </div>    
     `
         : user.onlineStatus === 'pending'
             ? `
             <div class="at_flex at_items_center at_justify_center">
-                <p>Pending</p>
+                <p>${i18n.t('Pending')}</p>
             </div>
         `
             : user.onlineStatus === 'sharing'
                 ? `
             <div class="at_flex at_items_center at_justify_center">
-                <p>Now Sharing</p>
+                <p>${i18n.t('NowSharing')}</p>
             </div>
         `
                 : `
@@ -191,7 +194,7 @@ export function renderSharingSpaceDetail(user) {
                     <span class="mdi mdi-arrow-left"></span>
                     <p> ${i18n.t('BackToUserList')}</p>
                 </div>
-                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn">
+                <button type="button" id="at-screen-share-end-session-btn" class="at_SCREEN_SHARE_HOST_END_SESSION_btn">
                     ${i18n.t('EndSession')}
                 </button>
             </div>
@@ -225,23 +228,31 @@ function recreateUserListContainer() {
             <table id="at-user-list-table">
             </table>
         </div>
-        <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn"
+        <button type="button" id="at-screen-share-end-session-btn" class="at_button at_ghost at_w-full" 
         style="display:${endSessionBtnVisibility};">
-            ${i18n.t('End Session')}
+            ${i18n.t('EndSession')}
         </button>
     `;
 }
-export function renderScreenShareRequestModal(request) {
+export function renderScreenShareLeaveConfirmationModal(isUserHost) {
     _onDisplayComponent = 'SCREEN_SHARE_REQUEST_MODAL';
+    // remove any existing modal first
+    const existingModal = document.getElementById('at-screen-share-request-modal');
+    if (existingModal) {
+        existingModal.remove();
+    }
     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('ScreenShareRequestModalMessage')}</h1>
-            <p class="at_screen_share_request_sub_message"> ${i18n.t('ScreenShareRequestModalSubMessage')} <strong>${request.user.name}</strong></p>
-            <button type="button" id="at-screen-share-request-btn"  class="at_screen_share_cancel_request_btn">${i18n.t('CancelRequest')}</button>
+            <div class="at_screen_share_icon mdi mdi-logout-variant"></div>
+            <h1 class="at_screen_share_request_message">${i18n.t('ConfirmLeaveSession')}</h1>
+            <p class="at_screen_share_request_sub_message"> ${i18n.t('ConfirmLeaveSessionReminder')}</p>
+            <div class="at_flex at_flex_row at_gap_2rem">
+                <button type="button" id="at-screen-share-leave-confirmation-cancel-btn" class="at_screen_share_leave_confirmation_cancel_btn">${i18n.t('Cancel')}</button>
+                <button type="button" id="at-screen-share-leave-confirmation-leave-btn" class="at_screen_share_leave_confirmation_leave_btn">${i18n.t('Leave')}</button>
+            </div>
         </div>
     `;
     // disabled modal dismiss via Esc key
@@ -255,21 +266,61 @@ export function renderScreenShareRequestModal(request) {
     element.addEventListener('cancel', (event) => {
         event.preventDefault();
     });
-    handleScreenShareCancelRequest(element, request);
     document.body.appendChild(element);
     element.showModal();
+    // attach button event handlers after modal is created
+    handleModalCancelButton();
+    handleModalLeaveButton(isUserHost);
 }
-function handleScreenShareCancelRequest(dialogElement, request) {
-    var _a;
-    if (dialogElement) {
-        (_a = dialogElement.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);
-            dialogElement.close();
-            dialogElement.remove();
-            _onDisplayComponent = 'USER_LIST';
-        });
-    }
+export function handleModalCancelButton() {
+    const cancelBtn = document.getElementById('at-screen-share-leave-confirmation-cancel-btn');
+    if (!cancelBtn)
+        return;
+    // Check if listener already exists
+    if (cancelBtn.dataset.listenerAttached === 'true')
+        return;
+    cancelBtn.addEventListener('click', () => {
+        console.log('Cancel button clicked');
+        // Close the modal
+        const modal = document.getElementById('at-screen-share-request-modal');
+        if (modal) {
+            modal.close();
+            modal.remove();
+        }
+        // Reset display component state if needed
+        _onDisplayComponent = null;
+    });
+    cancelBtn.dataset.listenerAttached = 'true';
+}
+export function handleModalLeaveButton(isHost) {
+    const leaveBtn = document.getElementById('at-screen-share-leave-confirmation-leave-btn');
+    if (!leaveBtn)
+        return;
+    // Check if listener already exists
+    if (leaveBtn.dataset.listenerAttached === 'true')
+        return;
+    leaveBtn.addEventListener('click', () => {
+        console.log('Leave button clicked');
+        // Close the modal first
+        const modal = document.getElementById('at-screen-share-request-modal');
+        if (modal) {
+            modal.close();
+            modal.remove();
+        }
+        if (isHost) {
+            // execute leave session logic
+            removeScreenShareSessionData();
+            recreateUserListContainer();
+            renderUsersList(_screenShareUsers);
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_HOST_END_SESSION, handleScreenShareEndSessionEvent);
+        }
+        else {
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_GUEST_LEAVE_SESSION, _screenSharingHostUser);
+        }
+        // Reset display component state
+        _onDisplayComponent = null;
+    });
+    leaveBtn.dataset.listenerAttached = 'true';
 }
 export function handleInputEventSelectPointerSettings() {
     const select = document.getElementById('at_select_screen_share_pointer');
@@ -284,15 +335,16 @@ export function handleInputEventSelectPointerSettings() {
 }
 export function handleClickEventEndSessionBtn() {
     const button = document.getElementById('at-screen-share-end-session-btn');
-    if (button) {
-        button.addEventListener('click', () => {
-            // internal logic end session
-            removeScreenShareSessionData();
-            recreateUserListContainer();
-            renderUsersList(_screenShareUsers);
-            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_END_SESSION, handleScreenShareEndSessionEvent);
-        });
-    }
+    if (!button)
+        return;
+    // check if listener already exists by looking for our marker
+    if (button.dataset.listenerAttached === 'true')
+        return;
+    button.addEventListener('click', () => {
+        renderScreenShareLeaveConfirmationModal(true);
+    });
+    // mark that listener is attached
+    button.dataset.listenerAttached = 'true';
 }
 export function handleScreenShareUsersUpdated(payload) {
     _spaceData = payload.space_data;

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

@@ -25,7 +25,7 @@ export function renderSpaceUserListPane() {
                 id="at-user-pane-end-session-btn" 
                 data-cy="at-user-pane-end-session-btn" 
                 target-pane="at-add-object-pane">
-                ${i18n.t('End Session')}
+                ${i18n.t('EndSession')}
             </div>
         </div>
 

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

@@ -7,7 +7,7 @@ export function renderViewingRemoteSpace() {
     element.setAttribute('data-cy', 'at-viewing-remote-space-pane');
     element.innerHTML = `
         <div class="at_panel_header">
-            <span>${i18n.t('Viewing Remote Space')}</span>
+            <span>${i18n.t('ViewingRemoteSpace')}</span>
         </div>
 
         <div id="at-sharing-user-container" >
@@ -15,10 +15,10 @@ export function renderViewingRemoteSpace() {
 
         <div class="at_button_row at_justify_center">
             <div 
-                class="at_button at_ghost at_bg_red_600 at_w-full" 
+                class="at_button at_ghost at_w-full" 
                 id="at-user-leave-session-btn" 
                 data-cy="at-user-leave-session-btn">
-                ${i18n.t('Leave Session')}
+                ${i18n.t('LeaveSession')}
             </div>
         </div>
     `;
@@ -55,7 +55,7 @@ export function renderRemoteSpaceViewing(user) {
     const statusText = document.createElement('div');
     statusText.className = 'at_text_sm at_text_white';
     statusText.innerHTML = `
-        ${i18n.t('Is sharing their space')} ${(_currentSpace === null || _currentSpace === void 0 ? void 0 : _currentSpace.name) || i18n.t('SPACE_NAME')} ${i18n.t('to you')}
+        ${i18n.t('IsSharingTheirSpace')} ${(_currentSpace === null || _currentSpace === void 0 ? void 0 : _currentSpace.name) || i18n.t('SPACE_NAME')} ${i18n.t('ToYou')}
     `;
     infoWrapper.appendChild(userNameEl);
     infoWrapper.appendChild(statusText);
@@ -77,6 +77,6 @@ export function renderRemoteSpaceViewing(user) {
     // === 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');
+    instruction.textContent = i18n.t('ViewingInstructions');
     container.appendChild(instruction);
 }

package/lib/atwinui/events.d.ts

@@ -20,6 +20,7 @@ declare function batchAddEventListenerById(ids: Array<string>, callback: EventLi
 declare function setActiveToolbarItem(itemId: string): void;
 declare function toggleDisplayPane(targetId: string): Promise<void>;
 declare function toggleActionBar(state: string): void;
+export declare function handleUserLeaveSessionClick(): void;
 declare function setupIndividualEventListeners(): void;
 declare function handleModelVisibility(objId: string): Promise<void>;
 declare function handleDeleteModel(objId: string): Promise<void>;