architwin 1.0.71 → 1.0.73

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

@@ -1,4 +1,4 @@
-import { IShowcaseObject } from "architwin/lib/types";
+import { IShowcaseObject } from "../../../types";
 import { I3DObject } from "../../../types";
 export declare function renderObjectCard(payload: IShowcaseObject): HTMLDivElement;
 export declare function renderObjectRow(payload: IShowcaseObject): HTMLDivElement;

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

@@ -7,7 +7,7 @@ import { setActiveActionBtn } from "./actionBar";
 import { renderLibraryCards } from "./libraryPane";
 import { setActiveThemeCard } from "./themePane";
 import { setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard } from "./card";
-import { renderRecepientOptions, renderTagMessages, createTagMessage } from "./tagMessagingPane";
+import { renderRecepientOptions, renderTagMessages, createTagMessage, setTagMessagingDetails } from "./tagMessagingPane";
 declare let actionBar: HTMLElement;
 declare function renderToolbarUI(payload: IToolbarData): void;
-export { actionBar, tagFormMode, selectedTag, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink };
+export { actionBar, tagFormMode, selectedTag, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails };

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

@@ -10,7 +10,7 @@ import { renderLibraryPane, renderLibraryCards } from "./libraryPane";
 import { renderTagMessagingPane } from "./tagMessagingPane";
 import { renderThemePane, setActiveThemeCard } from "./themePane";
 import { setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard } from "./card";
-import { renderRecepientOptions, renderTagMessages, createTagMessage } from "./tagMessagingPane";
+import { renderRecepientOptions, renderTagMessages, createTagMessage, setTagMessagingDetails } from "./tagMessagingPane";
 let iFrame, sidebarContainer, objectCardsContainer, tagListContainer;
 let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, addObjectForm, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane;
 function getIframeElement(iframeId) {
@@ -61,4 +61,4 @@ function renderToolbarUI(payload) {
     tagMessagingPane.style.display = 'none';
     themePane.style.display = 'none';
 }
-export { actionBar, tagFormMode, selectedTag, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink };
+export { actionBar, tagFormMode, selectedTag, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails };

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

@@ -1,4 +1,4 @@
-import { IShowcaseObject } from "architwin/lib/types";
+import { IShowcaseObject } from "../../../types";
 export declare function renderObjectListPane(cardList: Array<IShowcaseObject>): HTMLElement;
 export declare function renderObjectCards(cardList: Array<IShowcaseObject>): void;
 export declare function addObjectCard(objectCards: HTMLElement, payload: IShowcaseObject): void;

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

@@ -34,7 +34,7 @@ export function renderObjectListPane(cardList) {
                 <span class="mdi mdi-list-box"></span>
             </div>
         </div>
-        <div class="at_scrollable_container" id="at-object-cards" data-cy="at-object-cards">
+        <div class="at_scrollable_container at_h-min-60" id="at-object-cards" data-cy="at-object-cards">
 
         </div>
         <div class="at_button_row at_justify_end">

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

@@ -11,5 +11,6 @@ export declare function getTagFormData(): {
     tagSubcategoryId?: string;
 };
 export declare function setTagCategoriesOption(): void;
-export declare function toggleDropdown(): void;
+export declare function toggleDropdown(elementId: string): void;
 export declare function renderCategoryDropdownOptions(elementId: string, items: Array<ITagCategory>): void;
+export declare function renderSubcategoryDropdownOptions(elementId: string, items: Array<ITagCategory>): void;

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

@@ -4,6 +4,7 @@ let mode = 'adding';
 let tagNameInput, tagDescriptionInput, tagEmbedInput, tagCategoryDropdown, tagSubcategoryDropdown;
 let selectedCategoryId = undefined;
 let selectedSubCategoryId = undefined;
+let isChevronEventAdded = false;
 export let tagFormMode = "ADD" /* FORM_MODE.ADD */;
 export let selectedTag = undefined;
 export function renderTagFormPane() {
@@ -16,61 +17,77 @@ export function renderTagFormPane() {
     element.setAttribute('id', 'at-tag-form-pane');
     element.setAttribute('data-cy', 'at-tag-form-pane');
     element.innerHTML = `
-        <div class="at_panel_header">
-            <span>Tags</span>
-        </div>
-        <div class="at_form_container at_h-min-65">
-            <div class="at_field at_flex_row">
-                <label for="">Move Tag</label>
-                <span class="mdi mdi-map-marker at_icon" id="at-move-tag-btn" data-cy="at-move-tag-btn"></span>
-            </div>
-            <div class="at_field at_flex_row" style="${_tagCategories ? '' : 'display: none;'}">
-                <label for="">Category</label>
-                <select class="at_transparent_dropdown at_w-full" name="" id="at-category-dropdown" data-cy="at-category-dropdown">
-                    <option value="none" selected>No category</option>
-                </select>
-            </div>
-            <!-- <div class="at_field at_flex_row" style="${_tagCategories ? '' : 'display: none;'}">
-                <label for="">Category</label>
-                <div class="at_dropdown">
-                    <div class="at_flex at_flex_row at_space_between">    
-                    <div class="at_dropdown_toggle" id="at-category-dropdown-toggle">No selection</div>
-                    <span class="mdi mdi-triangle-down at_chevron"></span>
-                    </div>
-                    <div class="at_dropdown_options" id="at-category-options">
+    <div class="at_panel_header">
+        <span>Tags</span>
+    </div>
+    <div class="at_form_container at_h-min-65">
+        <!-- <div class="at_field at_flex_row" style="${_tagCategories ? '' : 'display: none;'}">
+            <label for="">Category</label>
+            <select class="at_transparent_dropdown at_w-full" name="" id="at-category-dropdown" data-cy="at-category-dropdown">
+                <option value="none" selected>No category</option>
+            </select>
+        </div> -->
+        <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
+            <label for="">Category</label>
+            <div class="at_dropdown" id="at-custom-category-dropdown" data-cy="at-custom-category-dropdown">
+                <div class="at_flex at_flex_row at_space_between">    
+                    <div class="at_dropdown_toggle" id="at-category-dropdown-toggle" data-cy="at-category-dropdown-toggle">No selection</div>
+                    <span class="mdi mdi-triangle-down at_chevron" id="at-category-chevron" data-cy="at-category-chevron"></span>
+                </div>
+                <div style="position:absolute;">
+                    <div class="at_dropdown_options" id="at-category-options" data-cy="at-category-options">
 
                     </div>
                 </div>
-            </div> -->
-            <div class="at_field at_flex_row" style="${_tagCategories ? '' : 'display: none;'}">
-                <label for="">Subcategory</label>
-                <select class="at_transparent_dropdown" name="" id="at-subcategory-dropdown" data-cy="at-subcategory-dropdown">
-                    <option value="none" selected>No subcategory</option>
-                </select>
-            </div>
-            <div class="at-field at_flex_row">
-                <label for="">Tag Name</label>
-                <input class="at_field_input at_w-full" type="text" name="tag_name" id="at-tag-name-input" data-cy="at-tag-name-input" placeholder="Ex: Wall Painting">
-            </div>
-            <div class="at-field at_flex_column">
-                <label for="">Description</label>
-                <textarea name="" id="at-tag-description-input" data-cy="at-tag-description-input" class="at_textarea"></textarea>
-            </div>
-            <div class="at-field at_flex_column">
-                <label for="">Embed Media</label>
-                <textarea name="" id="at-tag-embed-input" data-cy="at-tag-embed-input" class="at_textarea"></textarea>
             </div>
         </div>
-        <div class="at_button_row at_justify_between" >
-            <div class="at_button at_ghost" style="margin-top: auto;" id="at-cancel-tag-form-btn" data-cy="at-cancel-tag-form-btn" target-pane="at-tag-list-pane">
-                Cancel
-                <span class="mdi mdi-close-circle-outline"></span>
-            </div>
-            <div class="at_button at_ghost" id="at-save-tag-btn" data-cy="at-save-tag-btn">
-                Save Tag
-                <span class="mdi mdi-plus-circle-outline"></span>
+        <!-- <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
+            <label for="">Subcategory</label>
+            <select class="at_transparent_dropdown" name="" id="at-subcategory-dropdown" data-cy="at-subcategory-dropdown">
+                <option value="none" selected>No subcategory</option>
+            </select>
+        </div> -->
+        <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
+            <label for="">Subcategory</label>
+            <div class="at_dropdown" id="at-custom-subcategory-dropdown" data-cy="at-custom-subcategory-dropdown">
+                <div class="at_flex at_flex_row at_space_between">    
+                <div class="at_dropdown_toggle" id="at-subcategory-dropdown-toggle" data-cy="at-subcategory-dropdown-toggle">No selection</div>
+                <span class="mdi mdi-triangle-down at_chevron" id="at-subcategory-chevron" data-cy="at-subcategory-chevron"></span>
+                </div>
+                <div style="position:absolute;">
+                    <div class="at_dropdown_options" id="at-subcategory-options" data-cy="at-subcategory-options">
+
+                    </div>
+                </div>
             </div>
         </div>
+        <div class="at-field at_flex_row">
+            <label for="">Tag Name</label>
+            <input class="at_field_input at_w-full" type="text" name="tag_name" id="at-tag-name-input" data-cy="at-tag-name-input" placeholder="Ex: Wall Painting">
+        </div>
+        <div class="at_field at_flex_row at_items_center">
+            <label for="">Move Tag</label>
+            <span class="mdi mdi-map-marker at_icon" id="at-move-tag-btn" data-cy="at-move-tag-btn"></span>
+        </div>
+        <div class="at-field at_flex_column">
+            <label for="">Description</label>
+            <textarea name="" id="at-tag-description-input" data-cy="at-tag-description-input" class="at_textarea"></textarea>
+        </div>
+        <div class="at-field at_flex_column">
+            <label for="">Embed Media</label>
+            <textarea name="" id="at-tag-embed-input" data-cy="at-tag-embed-input" class="at_textarea"></textarea>
+        </div>
+    </div>
+    <div class="at_button_row at_justify_between" >
+        <div class="at_button at_ghost" style="margin-top: auto;" id="at-cancel-tag-form-btn" data-cy="at-cancel-tag-form-btn" target-pane="at-tag-list-pane">
+            Cancel
+            <span class="mdi mdi-close-circle-outline"></span>
+        </div>
+        <div class="at_button at_ghost" id="at-save-tag-btn" data-cy="at-save-tag-btn">
+            Save Tag
+            <span class="mdi mdi-plus-circle-outline"></span>
+        </div>
+    </div>
     `;
     return element;
 }
@@ -93,20 +110,20 @@ export function initFormData(tagId) {
             tagNameInput.value = targetTag.json_data.label;
             tagDescriptionInput.value = targetTag.json_data.description;
             tagEmbedInput.value = '';
-            const tagCategoryOption = tagCategoryDropdown.querySelector(`option[value="${tagCategory.uuid}"]`);
-            if (tagCategoryOption) {
-                tagCategoryOption.selected = true;
-                tagCategoryDropdown.dispatchEvent(new Event('change'));
-                //make sure the subcategory dropdown is updated based on selected category dropdown
-                handleCategoryDropdownChange;
-            }
-            const tagSubcategoryOption = tagSubcategoryDropdown.querySelector(`option[value="${targetTag.category_uuid}"]`);
-            console.log('tagSubCategoryId', tagSubcategoryOption, targetTag.category_uuid);
-            if (tagSubcategoryOption) {
-                tagSubcategoryOption.selected = true;
-                tagSubcategoryDropdown.dispatchEvent(new Event('change'));
-                handleSubCategoryDropdownChange;
-            }
+            // const tagCategoryOption = tagCategoryDropdown.querySelector(`option[value="${tagCategory.uuid}"]`) as HTMLOptionElement
+            // if (tagCategoryOption) {
+            //     tagCategoryOption.selected = true;
+            //     tagCategoryDropdown.dispatchEvent(new Event('change'));
+            //     //make sure the subcategory dropdown is updated based on selected category dropdown
+            //     handleCategoryDropdownChange
+            // }
+            // const tagSubcategoryOption = tagSubcategoryDropdown.querySelector(`option[value="${targetTag.category_uuid}"]`) as HTMLOptionElement
+            // console.log('tagSubCategoryId', tagSubcategoryOption, targetTag.category_uuid)
+            // if (tagSubcategoryOption) {
+            //     tagSubcategoryOption.selected = true;
+            //     tagSubcategoryDropdown.dispatchEvent(new Event('change'));
+            //     handleSubCategoryDropdownChange
+            // }
             // if (tagNameInput) {
             //     const tagName = tagNameInput.value
             //     const tagDescription = tagDescriptionInput.value
@@ -136,6 +153,29 @@ export function initFormData(tagId) {
         tagDescriptionInput.value = '';
         tagEmbedInput.value = '';
     }
+    const categoryChevron = document.getElementById('at-category-chevron');
+    const subcategoryChevron = document.getElementById('at-subcategory-chevron');
+    if (categoryChevron) {
+        if (isChevronEventAdded == false) {
+            categoryChevron.addEventListener('click', () => {
+                toggleDropdown('at-category-options');
+            });
+        }
+        else {
+            console.log("Click event already attached to category chevron");
+        }
+    }
+    if (subcategoryChevron) {
+        if (isChevronEventAdded == false) {
+            subcategoryChevron.addEventListener('click', () => {
+                toggleDropdown('at-subcategory-options');
+            });
+        }
+        else {
+            console.log("Click event already attached to subcategory chevron");
+        }
+    }
+    isChevronEventAdded = true;
 }
 function setInputElements() {
     tagNameInput = document.getElementById('at-tag-name-input');
@@ -213,46 +253,79 @@ function handleCategoryDropdownChange(event) {
 }
 export function setTagCategoriesOption() {
     if (_tagCategories) {
-        console.log("application will use tag categories", _tagCategories);
-        const selectElementCategoryDropdown = document.getElementById('at-category-dropdown');
-        clearDropdown(selectElementCategoryDropdown);
-        const selectElementSubcategoryDropdown = document.getElementById('at-subcategory-dropdown');
-        console.log('selectElementSubcategoryDropdown', selectElementSubcategoryDropdown);
-        clearDropdown(selectElementSubcategoryDropdown);
-        console.log('selectElementCategoryDropdown', selectElementCategoryDropdown);
-        const defaultOption = document.createElement('option');
-        defaultOption.value = 'none';
-        defaultOption.textContent = 'No Category';
-        selectElementCategoryDropdown.appendChild(defaultOption);
-        _tagCategories.forEach((category, index) => {
-            const option = document.createElement('option');
-            option.value = category.uuid;
-            option.textContent = category.name;
-            // // Set the "selected" attribute for the first option if it's the default option
-            // if (index === 0) {
-            //   option.selected = true;
-            // }
-            console.log("option", option);
-            selectElementCategoryDropdown.appendChild(option);
-        });
+        // console.log("application will use tag categories", _tagCategories)
+        // const selectElementCategoryDropdown = document.getElementById('at-category-dropdown');
+        // clearDropdown(selectElementCategoryDropdown)
+        // const selectElementSubcategoryDropdown = document.getElementById('at-subcategory-dropdown');
+        // console.log('selectElementSubcategoryDropdown', selectElementSubcategoryDropdown)
+        // clearDropdown(selectElementSubcategoryDropdown)
+        // console.log('selectElementCategoryDropdown', selectElementCategoryDropdown)
+        // const defaultOption = document.createElement('option');
+        // defaultOption.value = 'none'; 
+        // defaultOption.textContent = 'No Category';
+        // selectElementCategoryDropdown.appendChild(defaultOption);
+        // _tagCategories.forEach((category, index) => {
+        //     const option = document.createElement('option');
+        //     option.value = category.uuid; 
+        //     option.textContent = category.name;
+        //     // // Set the "selected" attribute for the first option if it's the default option
+        //     // if (index === 0) {
+        //     //   option.selected = true;
+        //     // }
+        //     console.log("option", option)
+        //     selectElementCategoryDropdown.appendChild(option);
+        //   });
         //Render options of new dropdown
-        //renderCategoryDropdownOptions('at-category-options',_tagCategories)
-        selectElementCategoryDropdown.addEventListener("change", handleCategoryDropdownChange);
+        renderCategoryDropdownOptions('at-category-options', _tagCategories);
+        //selectElementCategoryDropdown.addEventListener("change", handleCategoryDropdownChange)
     }
     else {
         console.log("application will not use tag categories");
     }
 }
-export function toggleDropdown() {
-    const dropdownOptions = document.querySelector('.at_dropdown_options');
+export function toggleDropdown(elementId) {
+    //const dropdownOptions = document.querySelector('.at_dropdown_options');
+    if (!elementId || elementId === '' || elementId == null) {
+        console.error("Element is undefined or empty");
+        return;
+    }
+    const dropdownOptions = document.getElementById(elementId);
     dropdownOptions.classList.toggle('open');
 }
-function selectOption(option) {
-    const dropdownToggle = document.querySelector('.at_dropdown_toggle');
+function selectOption(option, elementId) {
+    //const dropdownToggle = document.querySelector('.at_dropdown_toggle');
+    if (!elementId || elementId === '' || elementId == null) {
+        console.error("ElementId is empty or undefined");
+        return;
+    }
+    const dropdownToggle = document.getElementById(elementId);
     dropdownToggle.textContent = option.textContent;
     dropdownToggle.innerHTML = option.innerHTML;
     //selectedText = option.textContent;
-    toggleDropdown();
+    const categoryUUID = option.getAttribute('category-uuid');
+    const categoryType = option.getAttribute('dropdown-type');
+    if (categoryUUID && categoryUUID !== null) {
+        if (categoryType == 'category') {
+            selectedCategoryId = categoryUUID;
+        }
+        else {
+            selectedSubCategoryId = categoryUUID;
+        }
+        //Populate subcategory dropdown
+        const targetCategory = _tagCategories.find(cat => cat.uuid === categoryUUID);
+        if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
+            console.log("Subcategories found", targetCategory.subcategories);
+            renderSubcategoryDropdownOptions('at-subcategory-options', targetCategory.subcategories);
+        }
+    }
+    let toggleId = '';
+    if (elementId === 'at-category-dropdown-toggle') {
+        toggleId = 'at-category-options';
+    }
+    else {
+        toggleId = 'at-subcategory-options';
+    }
+    toggleDropdown(toggleId);
 }
 export function renderCategoryDropdownOptions(elementId, items) {
     const element = document.getElementById(elementId);
@@ -264,6 +337,7 @@ export function renderCategoryDropdownOptions(elementId, items) {
         console.error("Parameter items is undefined");
         return;
     }
+    element.innerHTML = ``;
     //Add the no selection option
     const noSelection = document.createElement('div');
     noSelection.classList.add('at_option');
@@ -280,12 +354,63 @@ export function renderCategoryDropdownOptions(elementId, items) {
         const option = document.createElement('div');
         option.classList.add('at_option');
         option.setAttribute('category-uuid', item.uuid);
+        option.setAttribute('dropdown-type', 'category');
+        option.setAttribute('data-cy', `at-category-option-${item.uuid}`);
         option.innerHTML = `
             <span class="at_colored-indicator" style="background-color:${convertToCssRgb(item.json_data.color.rgb)}"></span>
             ${item.name}
         `;
         option.onclick = () => {
-            selectOption(option);
+            selectOption(option, 'at-category-dropdown-toggle');
+        };
+        element.appendChild(option);
+    });
+}
+export function renderSubcategoryDropdownOptions(elementId, items) {
+    const element = document.getElementById(elementId);
+    if (!element) {
+        console.error("Parameter element is undefined");
+        return;
+    }
+    if (!items) {
+        console.error("Parameter items is undefined");
+        return;
+    }
+    //Clear previosly appended children
+    element.innerHTML = ``;
+    const selectedSubcategoryOption = document.getElementById('at-subcategory-dropdown-toggle');
+    if (selectedSubcategoryOption) {
+        selectedSubcategoryOption.textContent = 'No selection';
+        selectedSubCategoryId = undefined;
+    }
+    //Add the no selection option
+    const noSelection = document.createElement('div');
+    noSelection.classList.add('at_option');
+    noSelection.setAttribute('category-uuid', '');
+    noSelection.innerHTML = `
+        <span class="mdi mdi-circle-slice-1"></span> No selection
+    `;
+    element.appendChild(noSelection);
+    if (items.length <= 0) {
+        console.log("No items to render");
+        return;
+    }
+    items.forEach(item => {
+        const option = document.createElement('div');
+        option.classList.add('at_option');
+        option.setAttribute('category-uuid', item.uuid);
+        option.setAttribute('dropdown-type', 'subcategory');
+        option.setAttribute('data-cy', `at-category-option-${item.uuid}`);
+        option.innerHTML = `
+            ${item.json_data.iconUrl ? `
+                <img class="at_avatar_xs" style="display:inline-block" src="${item.json_data.iconUrl}"/>
+            ` : `
+                <span class="at_colored-indicator" style="background-color:rgb(255,255,255)"></span>
+            `}
+            ${item.name}
+        `;
+        option.onclick = () => {
+            selectOption(option, 'at-subcategory-dropdown-toggle');
         };
         element.appendChild(option);
     });

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

@@ -27,11 +27,11 @@ export function renderTagListPane() {
         <div class="at_panel_header">
             <span>Tags</span>
         </div>
-        <div class="at_scrollable_container at_h-min-65">
+        <div class="at_scrollable_container at_h-min-60">
             <table id="at-tag-list-container">
             </table>
         </div>
-        <div class="at_button_row at_justify_end" >
+        <div class="at_button_row at_justify_end" style="">
             <div class="at_button at_ghost" id="at-add-tag-btn" data-cy="at-add-tag-btn" target-pane="at-tag-form-pane">
                 Add Tag
                 <span class="mdi mdi-plus-circle-outline"></span>

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

@@ -14,3 +14,4 @@ export declare function clearSelectedMedia(): void;
 export declare function getTagMessageText(): string;
 export declare function clearTagMessageInput(): void;
 export declare function createTagMessage(): TagMessage;
+export declare function setTagMessagingDetails(tagId: string): void;

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

@@ -1,9 +1,11 @@
-import { getTagMessageRecepients, getTagMessages, getSelectedTagUuid, dispatchSpaceEvent } from "../../../architwin";
+import { getTagMessageRecepients, getTagMessages, getSelectedTagUuid, dispatchSpaceEvent, _tags } from "../../../architwin";
 import { SPACE_EVENTS } from "../../../types";
-import { generateUUID } from "../../../convert";
+import { convertToCssRgb, generateUUID } from "../../../convert";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
-import { format } from 'date-fns';
+import { parseISO } from 'date-fns';
+import { formatWithOptions } from "date-fns/fp";
+import { ja } from "date-fns/locale";
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' } });
 export function renderTagMessagingPane() {
     const element = document.createElement('div');
@@ -18,8 +20,8 @@ export function renderTagMessagingPane() {
         <div class="at_panel_header">
             <div class="at_button_row at_justify_between">
                 <div>
-                    <div class="at_colored-indicator" style="background-color:rgb(0,0,0)"></div>
-                    <span>Tag Name</span>
+                    <div class="at_colored-indicator" id="at-tag-color-messaging" style="background-color:rgb(0,0,0)"></div>
+                    <span id='at-tag-name-messaging'>Tag Name</span>
                 </div>
                 <span class="mdi mdi-keyboard-return at_icon" id="at-cancel-tag-message-btn" data-cy="at-cancel-tag-message-btn" target-pane="at-tag-list-pane"></span>
             </div>
@@ -85,7 +87,7 @@ export function renderTagMessages() {
         }
         else {
             chatContainer.innerHTML = `
-                <span id="at-no-message">No messages</span>
+                <span data-cy="at-no-messages-prompt" id="at-no-message">No messages</span>
             `;
         }
         return;
@@ -104,6 +106,10 @@ export function renderTagMessage(message, optimisticUpdate = false) {
     chat.classList.add('at_flex_row');
     chat.classList.add('at_justify_start');
     chat.style.display = 'flex';
+    const dateToString = formatWithOptions({ locale: ja }, 'd MMMM yyyy hh:mm:ss');
+    //const created_on = format(new Date(), 'yyyy-MM-dd HH:mm:ss')
+    const parsedDate = parseISO(message.created_on);
+    const created_on = dateToString(parsedDate);
     if (optimisticUpdate && message.binaryFile) {
         const reader = new FileReader();
         reader.onload = function (event) {
@@ -111,7 +117,7 @@ export function renderTagMessage(message, optimisticUpdate = false) {
             console.log('Data URL:', dataURL);
             message.image_url = dataURL;
             chat.innerHTML = `
-                <span class="at_chat_avatar at_chat_avatar_sender">${message.owner_name.charAt(0)}</span>
+                <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">
                     <div>
                         <small>${message.owner_name} ➡️ ${message.to_user_name}</small> <br>
@@ -121,7 +127,7 @@ export function renderTagMessage(message, optimisticUpdate = false) {
                 `
                         <img class="at_chat_media" src="${message.image_url}"/><br>
                         ` : ``}
-                        <small>${message.created_on}</small>
+                        <small>${created_on}</small>
                     </div>
                 </div>
             `;
@@ -133,13 +139,17 @@ export function renderTagMessage(message, optimisticUpdate = false) {
     }
     else {
         chat.innerHTML = `
-            <span class="at_chat_avatar at_chat_avatar_sender">${message.owner_name.charAt(0)}</span>
+            <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">
                 <div>
                     <small>${message.owner_name} ➡️ ${message.to_user_name}</small> <br>
                     ${message.messages}
                     <br>
-                    <small>${message.created_on}</small>
+                    ${message.image_url && message.image_url !== '' ?
+            `
+                    <img class="at_chat_media" src="${message.image_url}"/><br>
+                    ` : ``}
+                    <small>${created_on}</small>
                 </div>
             </div>
         `;
@@ -147,8 +157,8 @@ export function renderTagMessage(message, optimisticUpdate = false) {
     if (optimisticUpdate) {
         const firstChild = chatContainer.firstChild;
         chatContainer.insertBefore(chat, firstChild);
-        const input = (document.getElementById("at-no-message"));
-        input.remove();
+        // const input = (document.getElementById("at-no-message"))
+        // input.remove()
         return;
     }
     else {
@@ -207,7 +217,10 @@ export function createTagMessage() {
     const tag_uuid = getSelectedTagUuid();
     const textMessage = getTagMessageText();
     const media = getChatMedia();
-    const created_on = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
+    const dateToString = formatWithOptions({ locale: ja }, 'yyyy-MM-dd HH:mm:ss');
+    //const created_on = format(new Date(), 'yyyy-MM-dd HH:mm:ss')
+    const currentDate = new Date();
+    const created_on = dateToString(currentDate);
     console.log("Recepient message ", recepient_uuid);
     if (!recepient_uuid || recepient_uuid.uuid === '' || recepient_uuid.uuid === 'undefined') {
         notyf.error("Select a recepient first");
@@ -234,3 +247,32 @@ export function createTagMessage() {
     notyf.success("Message successfuly sent");
     return message;
 }
+export function 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');
+        if (!tagTitle) {
+            console.error("tagTitle does not exist in DOM");
+            return;
+        }
+        if (!tagColor) {
+            console.error("g does not exist in DOM");
+            return;
+        }
+        if (tagTitle.textContent === 'Tag Name') {
+            //@ts-ignore
+            const targetTag = _tags.find(tag => tag.id === tagId);
+            if (!targetTag) {
+                console.log("Target tag not found");
+                return;
+            }
+            tagTitle.textContent = targetTag.json_data.label;
+            tagColor.style.backgroundColor = convertToCssRgb(targetTag.json_data.color);
+            return;
+        }
+        return;
+    }
+    console.error("tagId is either undefined or empty");
+    return;
+}

package/lib/atwinui/events.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, setActiveActionBtn, removeObjectCard, setTagCategoriesOption, toggleDropdown, tagFormMode, selectedTag, renderRecepientOptions, renderTagMessages, createTagMessage, setTagLink } from "./components/toolbar";
-import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar } from "../architwin";
+import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, setActiveActionBtn, removeObjectCard, setTagCategoriesOption, toggleDropdown, tagFormMode, selectedTag, renderRecepientOptions, renderTagMessages, createTagMessage, setTagLink, setTagMessagingDetails } from "./components/toolbar";
+import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTransformControls, copyObject, revertTransform, clearSelectedObject, removeTransformControls, getLibrary, getMpTags, renderTag, captureSpaceScreenshot, moveTag, subscribeSpaceEvent, setModelVisibility, disposeModel, disposeTag, _tags, _tagCategories, dispatchSpaceEvent, editTagLabel, editTagDescription, setTagMessageRecepients, setTagMessages, setSelectedTagUuid, renderMeetingSidebar, } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 import { SPACE_EVENTS } from "../types";
@@ -165,7 +165,7 @@ function setupIndividualEventListeners() {
     handleSendTagMessage();
     handleSetModelsView();
     handleSetLibraryModelsView();
-    //handleToggleDropdown()
+    handleToggleDropdown();
 }
 //================ OBJECT EVENT HANDLERS ===============//
 function handleTranslateObject() {
@@ -237,9 +237,16 @@ function handlePlaceTag() {
         const payload = getTagFormData();
         if (tagFormMode == "ADD" /* FORM_MODE.ADD */) {
             if (_tagCategories) {
+                console.log("tagFormData", payload);
+                const targetCategory = _tagCategories.find(cat => cat.uuid === payload.tagCategoryId);
                 if (payload && payload.tagName && payload.tagCategoryId && payload.tagSubcategoryId) {
                     tag.label = payload.tagName;
                     tag.description = payload.tagDescription;
+                    //tag.attachments.push(payload.tagEmbed)
+                    if (targetCategory) {
+                        console.log("targetCategory is", targetCategory);
+                        tag.color = targetCategory.json_data.color.rgb;
+                    }
                     const iTag = yield renderTag({ tag: tag }, true);
                     console.log('iTag', iTag);
                     moveTag(iTag.id, onTagPlaced);
@@ -393,6 +400,7 @@ function handleSaveTag() {
             if (_tagCategories) {
                 if (currentTag && tagFormPayload && tagFormPayload.tagName && tagFormPayload.tagCategoryId && tagFormPayload.tagSubcategoryId) {
                     console.log("current Tag", currentTag);
+                    currentTag.media_url = tagFormPayload.tagEmbed;
                     let payload = { tag: currentTag };
                     dispatchSpaceEvent(SPACE_EVENTS.TAG_SAVED, payload);
                     currentTag = undefined;
@@ -590,8 +598,16 @@ function handleRenderMeetingUI() {
 }
 function handleToggleDropdown() {
     const categoryToggle = document.getElementById('at-category-dropdown-toggle');
+    const subcategoryToggle = document.getElementById('at-subcategory-dropdown-toggle');
     if (categoryToggle) {
-        categoryToggle.addEventListener('click', toggleDropdown);
+        categoryToggle.addEventListener('click', () => {
+            toggleDropdown('at-category-options');
+        });
+    }
+    if (subcategoryToggle) {
+        subcategoryToggle.addEventListener('click', () => {
+            toggleDropdown('at-subcategory-options');
+        });
     }
 }
 function setupSpaceEventSubscriptions() {
@@ -621,6 +637,7 @@ function handleRetrieveTagMessage(payload) {
     setSelectedTagUuid(payload.tagUuid);
     renderRecepientOptions();
     renderTagMessages();
+    setTagMessagingDetails(payload.tagUuid);
 }
 function handleSetModelsView() {
     const modelsCardViewBtn = document.getElementById('at-models-card-view-btn');

package/lib/meeting/templates.js

@@ -4,31 +4,31 @@
  */
 export function preMeetingTemplate() {
     return `
-    <div id="at-premeet" class="at_sidebar_container">
-        <div id="at-premeet-header" class="at_header_container">
+    <div id="at-premeet" data-cy="at-premeet" class="at_sidebar_container">
+        <div id="at-premeet-header" data-cy="at-premeet-header" class="at_header_container">
             <span class="at_header">Setup Meeting</span>
-            <span id="at-premeet-close" style="cursor: pointer;" class="mdi mdi-close-circle-outline at_icon-2"></span>
+            <span id="at-premeet-close" data-cy="at-premeet-close" style="cursor: pointer;" class="mdi mdi-close-circle-outline at_icon-2"></span>
         </div>
 
-        <div id="at-sel-avatar-header" class="at_header_container" style="display: none;">
-            <span id="at-avatar-back" style="cursor: pointer;" class="mdil mdil-arrow-left-circle at_icon-2"></span>
+        <div id="at-sel-avatar-header" data-cy="at-sel-avatar-header" class="at_header_container" style="display: none;">
+            <span id="at-avatar-back" data-cy="at-avatar-back" style="cursor: pointer;" class="mdil mdil-arrow-left-circle at_icon-2"></span>
             <span class="at_header">Select Avatar</span>
-            <span id="at-avatar-close" style="cursor: pointer;" class="mdi mdi-close-circle-outline at_icon-2"></span>
+            <span id="at-avatar-close" data-cy="at-avatar-close" style="cursor: pointer;" class="mdi mdi-close-circle-outline at_icon-2"></span>
         </div>
 
-        <div id="at-premeet-settings" class="column">
+        <div id="at-premeet-settings" data-cy="at-premeet-settings" class="column">
             <h2 class="at_sub-1">Setup your Video and Audio</h2>
             <div class="at_premeet_video">
-                <video id="at-premeet-video"></video>
+                <video id="at-premeet-video" data-cy="at-premeet-video"></video>
             </div>
             <div>
             <div class="column">
                 <div class="at_grouped">
-                    <button id="at-premeet-muteBtn" class="at_premeet_btn at_btn_red" @click="">
-                        <span id="at-premeet-muteIcon" class="mdi mdi-microphone-off "> Unmute</span>
+                    <button id="at-premeet-muteBtn" data-cy="at-premeet-muteBtn" class="at_premeet_btn at_btn_red" @click="">
+                        <span id="at-premeet-muteIcon" data-cy="at-premeet-muteIcon" class="mdi mdi-microphone-off "> Unmute</span>
                     </button>
-                    <button id="at-premeet-camBtn" class="at_premeet_btn at_btn_blue" @click="">
-                        <span id="at-premeet-camIcon" class="mdi  mdi-camera-off"> Camera</span>
+                    <button id="at-premeet-camBtn" data-cy="at-premeet-camBtn" class="at_premeet_btn at_btn_blue" @click="">
+                        <span id="at-premeet-camIcon" data-cy="at-premeet-camIcon" class="mdi  mdi-camera-off"> Camera</span>
                     </button>
                 </div>
                 <h2 class="at_txt_center at_sub-2">Select video and audio device</h2>
@@ -37,39 +37,39 @@ export function preMeetingTemplate() {
                         <span class="mdi mdi-video at_icon-1"></span>
                         <p class="at_ml-1 at_inter-16">Video</p>
                     </div>
-                    <select class="at_select at_ml-2" name="videos" id="at-select-cameras"></select>
+                    <select class="at_select at_ml-2" name="videos" id="at-select-cameras" data-cy="at-select-cameras"></select>
                 </div>
                 <div class="at_justify-center">
                     <div class="at_flex-center at_mr-2" style="width: 70px"> 
                         <span class="mdi mdi-volume-high at_icon-1"></span>
                         <p class="at_ml-1 at_inter-16">Speaker</p>
                     </div>
-                    <select class="at_select at_ml-2" name="speakers" id="at-select-speakers"></select>
+                    <select class="at_select at_ml-2" name="speakers" id="at-select-speakers" data-cy="at-select-speakers"></select>
                 </div>
                 <div class="at_justify-center">
                     <div class="at_flex-center at_mr-2" style="width: 70px"> 
                         <span class="mdi mdi-microphone at_icon-1"></span>
                         <p class="at_ml-1 at_inter-16">Mic</p>
                     </div>
-                    <select class="at_select at_ml-2" name="mics" id="at-select-mics"></select>
+                    <select class="at_select at_ml-2" name="mics" id="at-select-mics" data-cy="at-select-mics"></select>
                 </div> 
                 
                 <div class="at_grouped">
-                    <button id="at-avatar-btn" class="at_premeet_btn at_btn_avatar" onclick="">👨‍🚀 Choose Avatar</button>
+                    <button id="at-avatar-btn" data-cy="at-avatar-btn" class="at_premeet_btn at_btn_avatar" onclick="">👨‍🚀 Choose Avatar</button>
                 </div>
                 <div class="at_grouped">
-                    <button id="at-joinbtn" class="at_premeet_btn at_btn_blue at_btn_join" onclick="">JOIN MEETING</button>
+                    <button id="at-joinbtn" data-cy="at-joinbtn" class="at_premeet_btn at_btn_blue at_btn_join" onclick="">JOIN MEETING</button>
                 </div>
             </div>
             </div>
         </div>
 
 
-        <div id="at-select-avatar" class="column" style="display: none;">
-            <div id="at-avatar-grid" class="at_grid-container">
+        <div id="at-select-avatar" data-cy="at-select-avatar" class="column" style="display: none;">
+            <div id="at-avatar-grid" data-cy="at-avatar-grid" class="at_grid-container">
             </div>
             <div class="at_grouped">
-                <button id="at-set-avatar-btn" class="at_premeet_btn at_btn_avatar at_border2-white" onclick="">Set as my Avatar</button>
+                <button id="at-set-avatar-btn" data-cy="at-set-avatar-btn" class="at_premeet_btn at_btn_avatar at_border2-white" onclick="">Set as my Avatar</button>
             </div>
         </div>
 
@@ -81,115 +81,115 @@ export function preMeetingTemplate() {
  */
 export function inMeetingTemplate() {
     return `
-        <div id="at-inmeet" class="at_sidebar_container" style="width: 0px !important">
-            <div id="at-im-sidebar" class="at_im-sidebar">
-                <div id="at-in-meeting" class="column">
+        <div id="at-inmeet" data-cy="at-inmeet" class="at_sidebar_container" style="width: 0px !important">
+            <div id="at-im-sidebar" data-cy="at-im-sidebar" class="at_im-sidebar">
+                <div id="at-in-meeting" data-cy="at-in-meeting" class="column">
                     <span class="mdi mdi-chevron-down at_icon-2 at_mr-1" style="float: right;"></span>
                     <div class="column">
                         <div class="container">
-                            <canvas id="at-self-canvas" style="display: none;" class="at_inmeet_video" height="150" width="295"></canvas>
+                            <canvas id="at-self-canvas" data-cy="at-self-canvas" style="display: none;" class="at_inmeet_video" height="150" width="295"></canvas>
                             <div class="at_inmeet_video">
-                                <video id="at-self-video"></video> 
+                                <video id="at-self-video" data-cy="at-self-video"></video> 
                             </div>
-                            <span id="at-videoOff-cont" class="at_video_off at_inter-18"></span>
-                            <div id="at-self-role" class="at_host-overlay">
+                            <span id="at-videoOff-cont" data-cy="at-videoOff-cont" class="at_video_off at_inter-18"></span>
+                            <div id="at-self-role" data-cy="at-self-role" class="at_host-overlay">
                                 <span class="at_indicator"></span>
                                 <span> Host</span>
                             </div>
                             <div>
-                                <p id="at-self-name" class="at_text-overlay" ></p>
+                                <p id="at-self-name" data-cy="at-self-name" class="at_text-overlay" ></p>
                             </div>
-                            <span id="at-self-audio" class="mdi mdi-microphone at_icon-1 at_btn-overlay at_btn_round at_blue"></span>
+                            <span id="at-self-audio" data-cy="at-self-audio" class="mdi mdi-microphone at_icon-1 at_btn-overlay at_btn_round at_blue"></span>
                         </div>
-                        <div class="container" id="at-remote" style="display: none;">
-                            <canvas id="at-participant-canvas" class="at_inmeet_video at_mt-5" style="display: none; height="150" width="295"> Jochelle</canvas>
-                            <span id="at-videoOffRemoteName" class="at_video_off at_inter-18" top: 0%! important;"></span>
-                            <div id="at-remote-role" class="at_host-overlay" style="display: none; top: 10% !important;">
+                        <div class="container" id="at-remote" data-cy="at-remote" style="display: none;">
+                            <canvas id="at-participant-canvas" data-cy="at-participant-canvas" class="at_inmeet_video at_mt-5" style="display: none; height="150" width="295"> Jochelle</canvas>
+                            <span id="at-videoOffRemoteName" data-cy="at-videoOffRemoteName" class="at_video_off at_inter-18" top: 0%! important;"></span>
+                            <div id="at-remote-role" data-cy="at-remote-role" class="at_host-overlay" style="display: none; top: 10% !important;">
                                 <span class="at_indicator"></span>
                                 <span> Host</span>
                             </div>
                             <div>
-                                <p id="at-remote-name" class="at_text-overlay "></p>
+                                <p id="at-remote-name" data-cy="at-remote-name" class="at_text-overlay "></p>
                             </div>
-                            <span id="at-remote-audio" class="mdi mdi-microphone at_icon-1 at_btn-overlay at_btn_round at_blue"></span>
+                            <span id="at-remote-audio" data-cy="at-remote-audio" class="mdi mdi-microphone at_icon-1 at_btn-overlay at_btn_round at_blue"></span>
                         </div>
                     
                     </div>
                 </div>
 
-                <div id="at-settings-sidebar" class="column" style="display: none">
+                <div id="at-settings-sidebar" data-cy="at-settings-sidebar" class="column" style="display: none">
                     <div class="at_tabs_container">
-                        <span id="at-participant-tab" class="at_tabs at_blue" @click="">Participants</span>
-                        <span id="at-settings-tab" class="at_tabs " @click="">Settings</span>
+                        <span id="at-participant-tab" data-cy="at-participant-tab" class="at_tabs at_blue" @click="">Participants</span>
+                        <span id="at-settings-tab" data-cy="at-settings-tab" class="at_tabs " @click="">Settings</span>
                     </div>
 
                     
-                    <div id="at-participantsDiv" style="display: none">
+                    <div id="at-participantsDiv" data-cy="at-participantsDiv" style="display: none">
                         <div class="at_tooltip at_copy_link">
-                            <div id="at-copy-link-btn" class="">
+                            <div id="at-copy-link-btn" data-cy="at-copy-link-btn" class="">
                                 <span class="mdi mdi-content-copy mr-1"></span>
                                 <span>Copy Meeting Link</span>
                             </div>
-                            <span class="at_tooltiptext" id="at-tooltip" style="display: none"></span>
+                            <span class="at_tooltiptext" id="at-tooltip" data-cy="at-tooltip" style="display: none"></span>
                         </div>
                         
                         
                         <div class="at_ml-2 at_mr-3">
-                            <ul id="at-meetingParticipants"></ul>
+                            <ul id="at-meetingParticipants" data-cy="at-meetingParticipants"></ul>
                         </div>
                     </div>
                 </div>
 
-                <div id="at-settingsDiv" class="column" style="display: none">
+                <div id="at-settingsDiv" data-cy="at-settingsDiv" class="column" style="display: none">
                     <h2 class="at_txt_center at_sub-2" style="margin-top: 0rem !important;">Select video and audio device</h2>
                     <div class="at_justify-center">
                         <div class="at_flex-center at_mr-2" style="width: 70px"> 
                             <span class="mdi mdi-video at_icon-1"></span>
                             <p class="at_ml-1 at_inter-16">Video</p>
                         </div>
-                        <select class="at_select at_ml-2" name="videos" id="at-select-cameras"></select>
+                        <select class="at_select at_ml-2" name="videos" id="at-select-cameras" data-cy="at-select-cameras"></select>
                     </div>
                     <div class="at_justify-center">
                         <div class="at_flex-center at_mr-2" style="width: 70px"> 
                             <span class="mdi mdi-volume-high at_icon-1"></span>
                             <p class="at_ml-1 at_inter-16">Speaker</p>
                         </div>
-                        <select class="at_select at_ml-2" name="speakers" id="at-select-speakers"></select>
+                        <select class="at_select at_ml-2" name="speakers" id="at-select-speakers" data-cy="at-select-speakers"></select>
                     </div>
                     <div class="at_justify-center">
                         <div class="at_flex-center at_mr-2" style="width: 70px"> 
                             <span class="mdi mdi-microphone at_icon-1"></span>
                             <p class="at_ml-1 at_inter-16">Mic</p>
                         </div>
-                        <select class="at_select at_ml-2" name="mics" id="at-select-mics"></select>
+                        <select class="at_select at_ml-2" name="mics" id="at-select-mics" data-cy="at-select-mics"></select>
                     </div> 
                 </div>
             </div>
             
             
-            <div id="at-navbar" class="at_sidebar_bottom at_row">
+            <div id="at-navbar" data-cy="at-navbar" class="at_sidebar_bottom at_row">
                 <div class="">
-                    <a id="at-settings-btn" class="at_btn_round at_white at_mr-1">
+                    <a id="at-settings-btn" data-cy="at-settings-btn" class="at_btn_round at_white at_mr-1">
                         <span class="mdi mdi-dots-horizontal at_icon-1"></span>
                     </a>
-                    <a id="at-share-btn" class="at_btn_round at_white at_mr-1">
+                    <a id="at-share-btn" data-cy="at-share-btn" class="at_btn_round at_white at_mr-1">
                         <span class="mdi mdi-monitor-share at_icon-1"></span>
                     </a>
-                    <a id="at-video-on" class="at_btn_round at_white at_mr-1" style="display: none">
-                        <span id="at-navbar-videoIcon" class="mdi mdi-video at_icon-1"></span>
+                    <a id="at-video-on" data-cy="at-video-on" class="at_btn_round at_white at_mr-1" style="display: none">
+                        <span id="at-navbar-videoIcon" data-cy="at-navbar-videoIcon" class="mdi mdi-video at_icon-1"></span>
                     </a>
-                    <a id="at-video-off" class="at_btn_round at_light_red at_icon-off at_mr-1">
+                    <a id="at-video-off" data-cy="at-video-off" class="at_btn_round at_light_red at_icon-off at_mr-1">
                         <span class="mdi mdi-video-off at_icon-1"></span>
                     </a>
-                    <a id="at-audio-on" class="at_btn_round at_white at_mr-1" style="display: none">
+                    <a id="at-audio-on" data-cy="at-audio-on" class="at_btn_round at_white at_mr-1" style="display: none">
                         <span class="mdi mdi-microphone at_icon-1"></span>
                     </a>
-                    <a id="at-audio-off" class="at_btn_round at_light_red at_icon-off at_mr-1">
+                    <a id="at-audio-off" data-cy="at-audio-off" class="at_btn_round at_light_red at_icon-off at_mr-1">
                         <span class="mdi mdi-microphone-off at_icon-1"></span>
                     </a>
                 </div>
 
-                <button id="at-leave-btn" class="at_leave_btn" @click="">LEAVE MEETING</button>
+                <button id="at-leave-btn" data-cy="at-leave-btn" class="at_leave_btn" @click="">LEAVE MEETING</button>
             </div>
         </div>
     `;
@@ -211,7 +211,7 @@ export function participantListTemplate(role, fullname, thumbnail) {
             </div>
             <span class="at_ml-1 at_inter ">${fullname}</span>
         </div>
-        <span id="at-followParticipant" class="mdi mdi-walk at_icon-1 at_ml-auto" style="cursor: pointer;"></span>
+        <span id="at-followParticipant" data-cy="at-followParticipant" class="mdi mdi-walk at_icon-1 at_ml-auto" style="cursor: pointer;"></span>
     </div>
     `;
 }
@@ -220,27 +220,27 @@ export function participantListTemplate(role, fullname, thumbnail) {
  */
 export function createMeetingTemplate() {
     return `
-    <div id="at-create-meeting" class="at_sidebar_container">
-        <div id="at-premeet-header" class="at_header_container">
+    <div id="at-create-meeting" data-cy="at-create-meeting" class="at_sidebar_container">
+        <div id="at-premeet-header" data-cy="at-premeet-header" class="at_header_container">
             <span class="at_header">Create Meeting</span>
-            <span id="at-premeet-close" style="cursor: pointer;" class="mdi mdi-close-circle-outline at_icon-2"></span>
+            <span id="at-premeet-close" data-cy="at-premeet-close" style="cursor: pointer;" class="mdi mdi-close-circle-outline at_icon-2"></span>
         </div>
 
         <div class="column" style="padding: 1.25rem;">
-            <form id="at-cm-form">
+            <form id="at-cm-form" data-cy="at-cm-form">
                 <p class="at_inter-16">Meeting Topic</p>
-                <input type="text" class="at_input at_mb-1" id="at-cm-topic">
-                <p id="at-cm-error1" class="at_inter-16" style="color: red; display: none;"></p>
+                <input type="text" class="at_input at_mb-1" id="at-cm-topic" data-cy="at-cm-topic">
+                <p id="at-cm-error1" data-cy="at-cm-error1" class="at_inter-16" style="color: red; display: none;"></p>
                 <p class="at_inter-16">Fullname</p>
-                <input type="text" class="at_input at_mb-1" id="at-cm-fullname">
-                <p id="at-cm-error2" class="at_inter-16" style="color: red; display: none;"></p>
+                <input type="text" class="at_input at_mb-1" id="at-cm-fullname" data-cy="at-cm-fullname">
+                <p id="at-cm-error2" data-cy="at-cm-error2" class="at_inter-16" style="color: red; display: none;"></p>
             </form>
 
             <div class="at_grouped">
-                <button id="at-cm-btn" class="at_mt-5 at_premeet_btn at_btn_blue at_btn_join">CREATE MY MEETING</button>
+                <button id="at-cm-btn" data-cy="at-cm-btn" class="at_mt-5 at_premeet_btn at_btn_blue at_btn_join">CREATE MY MEETING</button>
             </div>
 
-            <span id="at-cm-join" class="at_inter-14 at_justify-center at_mt-5" style="text-decoration: underline; cursor: pointer;">Have a meeting invite? Click here to join</span>
+            <span id="at-cm-join" data-cy="at-cm-join" class="at_inter-14 at_justify-center at_mt-5" style="text-decoration: underline; cursor: pointer;">Have a meeting invite? Click here to join</span>
         </div>
     </div>
     `;
@@ -251,28 +251,28 @@ export function createMeetingTemplate() {
 export function joinMeetingTemplate(link) {
     console.log("__@ joinMeeting link: ", link);
     return `
-    <div id="at-join-meeting" class="at_sidebar_container">
-        <div id="at-premeet-header" class="at_header_container">
+    <div id="at-join-meeting" data-cy="at-join-meeting" class="at_sidebar_container">
+        <div id="at-premeet-header" data-cy="at-premeet-header" class="at_header_container">
             <span class="at_header">Join Meeting</span>
-            <span id="at-premeet-close" style="cursor: pointer;" class="mdi mdi-close-circle-outline at_icon-2"></span>
+            <span id="at-premeet-close" data-cy="at-premeet-close" style="cursor: pointer;" class="mdi mdi-close-circle-outline at_icon-2"></span>
         </div>
 
         <div class="column" style="padding: 1.25rem;">
-            <form id="at-join-form">
+            <form id="at-join-form" data-cy="at-join-form">
                 <p class="at_inter-16">Fullname</p>
-                <input type="text" class="at_input at_mb-1" id="at-join-fullname">
-                <p id="at-join-error2" class="at_inter-16" style="color: red; display: none;"></p>
+                <input type="text" class="at_input at_mb-1" id="at-join-fullname" data-cy="at-join-fullname">
+                <p id="at-join-error2" data-cy="at-join-error2" class="at_inter-16" style="color: red; display: none;"></p>
                 <p class="at_inter-16">Enter Meeting Link</p>
-                <input type="url" class="at_input at_mb-1" id="at-join-link" value="${link == '' ? '' : link}">
-                <p id="at-join-error3" class="at_inter-16" style="color: red; display: none;"></p>
+                <input type="url" class="at_input at_mb-1" id="at-join-link" data-cy="at-join-link" value="${link == '' ? '' : link}">
+                <p id="at-join-error3" data-cy="at-join-error3" class="at_inter-16" style="color: red; display: none;"></p>
                 
             </form>
 
             <div class="at_grouped">
-                <button id="at-join-btn" class="at_mt-5 at_premeet_btn at_btn_blue at_btn_join">JOIN MEETING</button>
+                <button id="at-join-btn" data-cy="at-join-btn" class="at_mt-5 at_premeet_btn at_btn_blue at_btn_join">JOIN MEETING</button>
             </div>
 
-            <span id="at-join-back" style="cursor: pointer;" class="at_inter-16 at_justify-center at_mt-5">GO BACK</span>
+            <span id="at-join-back" data-cy="at-join-back" style="cursor: pointer;" class="at_inter-16 at_justify-center at_mt-5">GO BACK</span>
         </div>
     </div>
 

package/lib/tag.js

@@ -49,6 +49,9 @@ function renderTag({ tag, sdk }) {
         if (!tagData.id) {
             tagData.id = tagIds[0];
         }
+        // if(tag. && payload.icon.trim() !== ''){
+        //     await setTagIcon({sdk: sdk, tag: tag, icon: payload.icon,color:payload.tag.color})
+        // }
         return tagData;
         // //attach media to tag (Video / Image / PDF); There are still more attachment types pls refer https://matterport.github.io/showcase-sdk/docs/reference/current/enums/tag.attachmenttype.html
         // if(payload.attachments && payload.attachments.length > 0){

package/lib/types.d.ts

@@ -26,6 +26,7 @@ export interface ITag {
     inDb: boolean;
     category_uuid?: string;
     uuid?: string;
+    media_url?: string;
 }
 export interface ITagCategory {
     uuid: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.0.71",
+  "version": "1.0.73",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",
@@ -31,7 +31,6 @@
     "@superviz/matterport-plugin": "^0.8.8",
     "@superviz/sdk": "^4.13.9",
     "@zoom/videosdk": "^1.8.7",
-    "aws-sdk": "^2.1385.0",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
     "jsrsasign": "^10.8.6",

package/static/atwinui.css

@@ -220,6 +220,10 @@
     justify-content: space-between;
 }
 
+.at_items_center {
+    align-items: center;
+}
+
 .at_sidebar_button_icon {
     padding: 4px 8px;
     cursor: pointer;
@@ -395,17 +399,19 @@
 .at_dropdown {
     width: calc(100% - 8px);
     margin: 4px;
-    background-color: hsla(191, 22%, 10%, 0.5);
-    color: white;
+    background-color: var(--bg-secondary);
+    color: var(--text-color-light);
     font-family: Arial, sans-serif;
     padding: 8px 8px;
     transition: opacity 0.3s ease-in-out;
+    cursor: pointer;
 }
 
 .at_dropdown_options {
     display: none;
     padding: 4px;
     z-index: 10;
+    background-color: var(--bg-secondary);
 }
 
 .at_option {
@@ -413,15 +419,33 @@
     padding: 4px 8px;
 }
 
+.at_option:hover {
+    background-color: var(--bg-accent);
+}
+
 .at_dropdown_options.open {
     display: block;
     opacity: 1;
+    z-index: 10;
+    position: relative;
 }
 
 .at_dropdown_toggle {
     display: inline-block;
 }
 
+.at_avatar_xs {
+    width: 24px;
+}
+
+.at_avatar_sm {
+    width: 48px;
+}
+
+.at_avatar_md {
+    width: 96px;
+}
+
 /* CSS Class for Transparent Textarea with White Bottom Border */
 .at_textarea {
     border: none;