architwin 1.0.78 → 1.0.80

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

@@ -11,6 +11,7 @@ import { goToModel, setSelectedObject, get3DXObjects, getLibrary, getTargetPosit
 import { SPACE_EVENTS } from "../../../types";
 import { toggleDisplayPane } from "../../events";
 import { Notyf } from 'notyf';
+import i18n from './i18n';
 let activeCard, activeLibraryCard;
 let _basePath = '../../../../architwin/static';
 export function renderObjectCard(payload) {
@@ -166,7 +167,7 @@ export function renderLibraryCard(payload) {
         <img class="at_image at_library_image" src="${thumbnail}" alt="Property Image" id="at-library-card-image-${payload.id}" data-cy="at-library-card-image-${payload.id}" card-id="${payload.id}">
         <div class="at_card-body" card-id="${payload.id}">
             ${payload.name ?
-        `<div class="at_card-title">
+        `<div class="at_library_card_title">
                 <h2 class="at_title_small" id="at-card-title-${payload.id}" data-cy="at-card-title-${payload.id}">${payload.name}</h2>
                 </div>` :
         ``}
@@ -226,7 +227,7 @@ export function setActiveLibraryCard(cardId) {
                 clearActiveLibraryCard();
                 toggleDisplayPane('at-cancel-library-btn');
                 renderObjectCard(payload);
-                notyf.success("Model succesfully added to space");
+                notyf.success(`${i18n.t('ModelAddedToSpace')}`);
             }));
         }
         else {

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

@@ -0,0 +1,2 @@
+import i18n from 'i18next';
+export default i18n;

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

@@ -0,0 +1,96 @@
+// i18n.ts
+import i18n from 'i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+i18n
+    .use(Backend)
+    .use(LanguageDetector).init({
+    fallbackLng: 'en',
+    debug: true,
+    resources: {
+        en: {
+            translation: {
+                "AddMediaScreen": "Add Media Screen",
+                "EnterMediaURL": "Enter media URL",
+                "SelectModelType": "Select model type",
+                "NoFileType": "No file type",
+                "CORSWarning": "Make sure that your url is publicly accessible otherwise the application will throw a CORS error during render",
+                "Cancel": "Cancel",
+                "OpenLibrary": "Open Library",
+                "AddToSpace": "Add to Space",
+                "SelectAddition": "Please select what you want to add",
+                "Library": "Library",
+                "BrowseLibrary": "Browse Library",
+                "NoObjectsInLibrary": "No objects in Library",
+                "SpaceObjects": "Space Objects",
+                "NoObjectsInSpace": "No objects in space",
+                "Tags": "Tags",
+                "Category": "Category",
+                "Subcategory": "Subcategory",
+                "SuccessDeleteTag": "Successfully deleted tag",
+                "NoSelection": "No selection",
+                "TagName": "Tag Name",
+                "MoveTag": "Move Tag",
+                "Description": "Description",
+                "EmbedMedia": "Embed Media",
+                "SaveTag": "Save Tag",
+                "AddTag": "Add Tag",
+                "NoRecipient": "No recipient",
+                "You": "You",
+                "MessageSentSuccess": "Message successfully sent",
+                "ModelAddedToSpace": "Model successfully added to space",
+                "Theme": "Theme",
+                "Save": "Save",
+                "SuccessAddTagToSpace": "Successfully added tag to space",
+                "ScreenshotSaved": "Screenshot saved to downloads folder",
+                "SuccessCopyTagLink": "Successfully copied tag link to clipboard",
+                "NoMessages": "No messages"
+            }
+        },
+        ja: {
+            translation: {
+                "AddMediaScreen": "メディアの追加",
+                "EnterMediaURL": "メディアURL",
+                "SelectModelType": "ファイル形式選択",
+                "NoFileType": "ファイル形式が異なります",
+                "CORSWarning": "レンダリング中にCORSエラーが発生しています。設定したURLを確認してください。",
+                "Cancel": "キャンセル",
+                "OpenLibrary": "ライブラリ",
+                "AddToSpace": "スペース追加",
+                "SelectAddition": "追加したいモデルを選択してください",
+                "Library": "ライブラリ",
+                "BrowseLibrary": "ライブラリ閲覧",
+                "NoObjectsInLibrary": "オブジェクトがありません",
+                "SpaceObjects": "オブジェクト",
+                "NoObjectsInSpace": "オブジェクトがありません",
+                "Tags": "タグ",
+                "Category": "タグ大分類",
+                "Subcategory": "タグ小分類",
+                "SuccessDeleteTag": "タグを削除しました",
+                "NoSelection": "未選択",
+                "TagName": "タグ名称",
+                "MoveTag": "タグ移動",
+                "Description": "説明",
+                "EmbedMedia": "埋め込みメディア",
+                "SaveTag": "タグ保存",
+                "AddTag": "タグ追加",
+                "NoRecipient": "未選択",
+                "You": "あなた",
+                "MessageSentSuccess": "メッセージが登録されました",
+                "ModelAddedToSpace": "スペースへの登録が完了しました",
+                "Theme": "テーマ",
+                "Save": "保存",
+                "SuccessAddTagToSpace": "タグを追加しました",
+                "ScreenshotSaved": "スクショをダウンロードフォルダに保存しました",
+                "SuccessCopyTagLink": "タグURLをクリップボードに保存しました",
+                "NoMessages": "メッセージがありません"
+            }
+        }
+    },
+    detection: {
+        order: ['queryString', 'cookie'],
+        caches: ['cookie']
+    }
+}, () => {
+});
+export default i18n;

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

@@ -8,6 +8,8 @@ import { renderLibraryCards } from "./libraryPane";
 import { setActiveThemeCard } from "./themePane";
 import { setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard } from "./card";
 import { renderRecepientOptions, renderTagMessages, createTagMessage, setTagMessagingDetails } from "./tagMessagingPane";
+import { clearTagFormDropdown } from "./tagFormPane";
+import './i18n';
 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, setTagMessagingDetails };
+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, clearTagFormDropdown };

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

@@ -1,3 +1,4 @@
+import { _mpConfig } from "../../../architwin";
 import { renderSidebarContainer } from "./sidebarContainer";
 import { renderMenuBar, setActiveMenu, clearActiveMenu } from "./menuBar";
 import { renderObjectListPane, renderObjectCards, removeObjectCard } from "./objectListPane";
@@ -11,8 +12,12 @@ import { renderTagMessagingPane } from "./tagMessagingPane";
 import { renderThemePane, setActiveThemeCard } from "./themePane";
 import { setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard } from "./card";
 import { renderRecepientOptions, renderTagMessages, createTagMessage, setTagMessagingDetails } from "./tagMessagingPane";
-let iFrame, sidebarContainer, objectCardsContainer, tagListContainer;
-let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, addObjectForm, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane;
+import { clearTagFormDropdown } from "./tagFormPane";
+import { getURLParams } from "../../../utils";
+import './i18n';
+import i18n from './i18n';
+let iFrame, sidebarContainer;
+let menuBar, actionBar, objectListPane, addObjectPane, tagListPane, tagFormPane, addMediaScreenForm, libraryPane, tagMessagingPane, themePane;
 function getIframeElement(iframeId) {
     if (!iframeId || iframeId === '') {
         console.error("IframeId is empty or undefined");
@@ -25,7 +30,34 @@ function getIframeElement(iframeId) {
     }
     iFrame = target;
 }
+/**
+ * Sets the preferred language for the ToolbarUI. Take note that the lang param value in the URL takes precedence over the value
+ * set in the toolbarConfig object lang value.
+ * @returns
+ */
+function setPreferredLanguage() {
+    const urlLangParam = getURLParams('lang');
+    if (urlLangParam && urlLangParam !== null && urlLangParam !== '') {
+        console.log("URL param lang ", urlLangParam);
+        if (urlLangParam === 'en' || urlLangParam === 'ja') {
+            i18n.changeLanguage(urlLangParam);
+            return;
+        }
+        console.error("URL param value for lang does not match any supported language");
+        return;
+    }
+    if (_mpConfig && _mpConfig.toolbarConfig && _mpConfig.toolbarConfig.lang) {
+        console.log("_mpConfig lang", _mpConfig.toolbarConfig.lang);
+        if (_mpConfig.toolbarConfig.lang === 'en' || _mpConfig.toolbarConfig.lang === 'ja') {
+            i18n.changeLanguage(_mpConfig.toolbarConfig.lang);
+            return;
+        }
+        console.error("Value for toolbarConfig lang does not match any supported language");
+        return;
+    }
+}
 function renderToolbarUI(payload) {
+    setPreferredLanguage();
     getIframeElement('showcase-container');
     sidebarContainer = renderSidebarContainer(iFrame);
     iFrame.appendChild(sidebarContainer);
@@ -61,4 +93,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, setTagMessagingDetails };
+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, clearTagFormDropdown };

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

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { batchAddEventListenerByClassName } from "../../events";
 import { renderLibraryCard, setActiveLibraryCard, renderLibraryRow } from "./card";
+import i18n from './i18n';
 export let libraryCardContainer;
 export function renderLibraryPane() {
     const element = document.createElement('div');
@@ -21,12 +22,12 @@ export function renderLibraryPane() {
     element.setAttribute('data-cy', 'at-library-pane');
     element.innerHTML = `
         <div class="at_panel_header">
-            <span>Library</span>
+            <span>${i18n.t('Library')}</span>
         </div>
         <div class="at_button_row at_justify_end">
             <div class="at_button at_ghost at_ghost_active">
                 <span class="mdi mdi-view-gallery"></span>
-                Browse Library
+                ${i18n.t('BrowseLibrary')}
             </div>
             <div class="at_button at_ghost at_ghost_active" id="at-library-models-card-view-btn" data-cy="at-library-models-card-view-btn">
                 <span class="mdi mdi-view-dashboard"></span>
@@ -63,6 +64,12 @@ export function renderLibraryCards(cardList) {
             //@ts-ignore
             yield setActiveLibraryCard(event.target.id);
         }));
+        batchAddEventListenerByClassName('at_library_card_title', (event) => __awaiter(this, void 0, void 0, function* () {
+            //@ts-ignore
+            console.log('Event', event.target.id);
+            //@ts-ignore
+            yield setActiveLibraryCard(event.target.id);
+        }));
     }
     else {
         libraryCardContainer.innerHTML = '<p>No objects in Library</p>';
@@ -86,6 +93,6 @@ export function renderLibraryList(cardList) {
         }));
     }
     else {
-        libraryCardContainer.innerHTML = '<p>No objects in Library</p>';
+        libraryCardContainer.innerHTML = `<p>${i18n.t('NoObjectsInLibrary')}</p>`;
     }
 }

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

@@ -1,7 +1,6 @@
 import { _mpConfig } from "../../../architwin";
 export let activeMenu;
 export function renderMenuBar(iFrame) {
-    var _a;
     if (!iFrame) {
         console.error(`Could not find target iFrame`);
         return;
@@ -10,7 +9,10 @@ export function renderMenuBar(iFrame) {
     menuBarElement.classList.add('at_toolbar_container');
     menuBarElement.setAttribute('id', 'at-menu-bar');
     menuBarElement.setAttribute('data-cy', 'at-menu-bar');
-    const isMeetingEnabled = (_a = _mpConfig.toolbarConfig.menuItems.meeting) !== null && _a !== void 0 ? _a : false;
+    let isMeetingEnabled = false;
+    if (_mpConfig.toolbarConfig && _mpConfig.toolbarConfig.menuItems && _mpConfig.toolbarConfig.menuItems.meeting) {
+        isMeetingEnabled = _mpConfig.toolbarConfig.menuItems.meeting;
+    }
     console.log("__@ isMeetingEnabled: ", isMeetingEnabled);
     menuBarElement.innerHTML = `
     <div class="at_sidebar_button_icon">

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

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { renderObjectCard, renderObjectRow, setActiveCard } from "./card";
 import { batchAddEventListenerByClassName, toggleActionBar, handleModelVisibility, handleDeleteModel } from "../../events";
+import i18n from './i18n';
 export function renderObjectListPane(cardList) {
     const element = document.createElement('div');
     element.classList.add('at_container');
@@ -20,12 +21,12 @@ export function renderObjectListPane(cardList) {
     element.setAttribute('data-cy', 'at-object-list-pane');
     element.innerHTML = `
         <div class="at_panel_header">
-            <span>Space Objects</span>
+            <span>${i18n.t('SpaceObjects')}</span>
         </div>
         <div class="at_button_row at_justify_end">
             <div class="at_button at_ghost"  id="at-browse-library-btn" data-cy="at-browse-library-btn" target-pane="at-library-pane">
                 <span class="mdi mdi-view-gallery"></span>
-                Browse Library
+                ${i18n.t('BrowseLibrary')}
             </div>
             <div class="at_button at_ghost at_ghost_active" id="at-models-card-view-btn" data-cy="at-models-card-view-btn">
                 <span class="mdi mdi-view-dashboard"></span>
@@ -37,12 +38,12 @@ export function renderObjectListPane(cardList) {
         <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">
+        <!-- <div class="at_button_row at_justify_end">
             <div class="at_button at_ghost" id="at-add-model-btn" data-cy="at-add-model-btn" target-pane="at-add-object-pane">
                 Add Model
                 <span class="mdi mdi-plus-circle-outline"></span>
             </div>
-        </div>
+        </div> -->
     `;
     return element;
 }

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

@@ -14,3 +14,4 @@ export declare function setTagCategoriesOption(): void;
 export declare function toggleDropdown(elementId: string): void;
 export declare function renderCategoryDropdownOptions(elementId: string, items: Array<ITagCategory>, toggleId?: string): void;
 export declare function renderSubcategoryDropdownOptions(elementId: string, items: Array<ITagCategory>): void;
+export declare function clearTagFormDropdown(): void;

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

@@ -1,6 +1,7 @@
 import { _tagCategories, _tags, getMpTags } from "../../../architwin";
 import { convertToCssRgb, stringContains } from "../../../utils";
 import { renderTags, setSelectedCategoryFilter, setSelectedSubcategoryFilter, filterTagList, getAllSubcategories } from './tagListPane';
+import i18n from './i18n';
 let mode = 'adding';
 let tagNameInput, tagDescriptionInput, tagEmbedInput, tagCategoryDropdown, tagSubcategoryDropdown;
 let selectedCategoryId = undefined;
@@ -19,20 +20,14 @@ export function renderTagFormPane() {
     element.setAttribute('data-cy', 'at-tag-form-pane');
     element.innerHTML = `
     <div class="at_panel_header">
-        <span>Tags</span>
+        <span>${i18n.t('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>
+            <label for="">${i18n.t('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>
+                    <div class="at_dropdown_toggle" id="at-category-dropdown-toggle" data-cy="at-category-dropdown-toggle">${i18n.t('NoSelection')}</div>
                     <span class="mdi mdi-triangle-down at_chevron" id="at-category-chevron" data-cy="at-category-chevron"></span>
                 </div>
                 <div style="position:absolute;">
@@ -42,17 +37,11 @@ export function renderTagFormPane() {
                 </div>
             </div>
         </div>
-        <!-- <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>
+            <label for="">${i18n.t('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>
+                <div class="at_dropdown_toggle" id="at-subcategory-dropdown-toggle" data-cy="at-subcategory-dropdown-toggle">${i18n.t('NoSelection')}</div>
                 <span class="mdi mdi-triangle-down at_chevron" id="at-subcategory-chevron" data-cy="at-subcategory-chevron"></span>
                 </div>
                 <div style="position:absolute;">
@@ -63,29 +52,29 @@ export function renderTagFormPane() {
             </div>
         </div>
         <div class="at-field at_flex_row">
-            <label for="">Tag Name</label>
+            <label for="">${i18n.t('TagName')}</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>
+            <label for="">${i18n.t('MoveTag')}</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>
+            <label for="">${i18n.t('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>
+            <label for="">${i18n.t('EmbedMedia')}</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
+            ${i18n.t('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
+            ${i18n.t('SaveTag')}
             <span class="mdi mdi-plus-circle-outline"></span>
         </div>
     </div>
@@ -124,35 +113,6 @@ export function initFormData(tagId) {
                 const subcatOption = createOptionElement(selectectedSubcategory, 'subcategory');
                 selectOption(subcatOption, 'at-subcategory-dropdown-toggle', true);
             }
-            // 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
-            //     const tagEmbed = tagEmbedInput.value
-            //     const formData:{tagName:string,tagDescription:string,tagEmbed:string,tagCategoryId?:string,tagSubcategoryId?:string} = {
-            //         tagName: tagName,
-            //         tagDescription: tagDescription,
-            //         tagEmbed: tagEmbed,
-            //     }
-            //     if(_tagCategories){
-            //         formData.tagCategoryId = selectedCategoryId
-            //         formData.tagSubcategoryId = selectedSubCategoryId
-            //     }
-            //     return formData
-            // }
             return;
         }
         return;
@@ -267,31 +227,8 @@ 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);
-        //   });
         //Render options of new dropdown
         renderCategoryDropdownOptions('at-category-options', _tagCategories);
-        //selectElementCategoryDropdown.addEventListener("change", handleCategoryDropdownChange)
     }
     else {
         console.log("application will not use tag categories");
@@ -404,7 +341,7 @@ export function renderCategoryDropdownOptions(elementId, items, toggleId) {
     noSelection.classList.add('at_option');
     noSelection.setAttribute('category-uuid', '');
     noSelection.innerHTML = `
-        <span class="mdi mdi-circle-slice-1"></span> No selection
+        <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
     `;
     element.appendChild(noSelection);
     if (items.length <= 0) {
@@ -443,7 +380,7 @@ export function renderSubcategoryDropdownOptions(elementId, items) {
     element.innerHTML = ``;
     const selectedSubcategoryOption = document.getElementById(isFilterDropdown ? 'at-subcategory-filter-dropdown-toggle' : 'at-subcategory-dropdown-toggle');
     if (selectedSubcategoryOption) {
-        selectedSubcategoryOption.textContent = 'No selection';
+        selectedSubcategoryOption.textContent = `${i18n.t('NoSelection')}`;
         selectedSubCategoryId = undefined;
     }
     //Add the no selection option
@@ -451,7 +388,7 @@ export function renderSubcategoryDropdownOptions(elementId, items) {
     noSelection.classList.add('at_option');
     noSelection.setAttribute('category-uuid', '');
     noSelection.innerHTML = `
-        <span class="mdi mdi-circle-slice-1"></span> No selection
+        <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
     `;
     element.appendChild(noSelection);
     if (items.length <= 0) {
@@ -479,3 +416,14 @@ export function renderSubcategoryDropdownOptions(elementId, items) {
         element.appendChild(option);
     });
 }
+export function clearTagFormDropdown() {
+    console.log("clearTagFormDropdown()");
+    const noSelection = document.createElement('div');
+    noSelection.classList.add('at_option');
+    noSelection.setAttribute('category-uuid', '');
+    noSelection.innerHTML = `
+        <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
+    `;
+    selectOption(noSelection, 'at-category-dropdown-toggle', true);
+    selectOption(noSelection, 'at-subcategory-dropdown-toggle', true);
+}

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

@@ -14,6 +14,7 @@ import { gotoTag, disposeTag, dispatchSpaceEvent, _tags } from "../../../architw
 import { initFormData, toggleDropdown } from "./tagFormPane";
 import { Notyf } from 'notyf';
 import { _tagCategories } from "../../../architwin";
+import i18n from './i18n';
 let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
 let _tagLink;
 let isChevronEventAdded = false;
@@ -30,14 +31,14 @@ export function renderTagListPane() {
     element.setAttribute('data-cy', 'at-tag-list-pane');
     element.innerHTML = `
         <div class="at_panel_header">
-            <span>Tags</span>
+            <span>${i18n.t('Tags')}</span>
         </div>
         <div class="at_form_container at_h-min-65">
             <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
-                <label for="">Category</label>
+                <label for="">${i18n.t('Category')}</label>
                 <div class="at_dropdown" id="at-custom-category-filter-dropdown" data-cy="at-custom-category-filter-dropdown">
                     <div class="at_flex at_flex_row at_space_between">    
-                        <div class="at_dropdown_toggle" id="at-category-filter-dropdown-toggle" data-cy="at-category-filter-dropdown-toggle">No selection</div>
+                        <div class="at_dropdown_toggle" id="at-category-filter-dropdown-toggle" data-cy="at-category-filter-dropdown-toggle">${i18n.t('NoSelection')}</div>
                         <span class="mdi mdi-triangle-down at_chevron" id="at-category-filter-chevron" data-cy="at-category-filter-chevron"></span>
                     </div>
                     <div style="position:absolute;">
@@ -48,10 +49,10 @@ export function renderTagListPane() {
                 </div>
             </div>
             <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
-                <label for="">Subcategory</label>
+                <label for="">${i18n.t('Subcategory')}</label>
                 <div class="at_dropdown" id="at-custom-subcategory-filter-dropdown" data-cy="at-custom-subcategory-filter-dropdown">
                     <div class="at_flex at_flex_row at_space_between">    
-                    <div class="at_dropdown_toggle" id="at-subcategory-filter-dropdown-toggle" data-cy="at-subcategory-filter-dropdown-toggle">No selection</div>
+                    <div class="at_dropdown_toggle" id="at-subcategory-filter-dropdown-toggle" data-cy="at-subcategory-filter-dropdown-toggle">${i18n.t('NoSelection')}</div>
                     <span class="mdi mdi-triangle-down at_chevron" id="at-subcategory-filter-chevron" data-cy="at-subcategory-filter-chevron"></span>
                     </div>
                     <div style="position:absolute;">
@@ -68,7 +69,7 @@ export function renderTagListPane() {
         </div>
         <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
+                ${i18n.t('AddTag')}
                 <span class="mdi mdi-plus-circle-outline"></span>
             </div>
         </div>

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

@@ -6,6 +6,7 @@ import 'notyf/notyf.min.css';
 import { parseISO } from 'date-fns';
 import { formatWithOptions } from "date-fns/fp";
 import { ja } from "date-fns/locale";
+import i18n from './i18n';
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' } });
 export function renderTagMessagingPane() {
     const element = document.createElement('div');
@@ -21,7 +22,7 @@ export function renderTagMessagingPane() {
             <div class="at_button_row at_justify_between">
                 <div>
                     <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>
+                    <span id='at-tag-name-messaging'>${i18n.t('TagName')}</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>
@@ -31,7 +32,7 @@ export function renderTagMessagingPane() {
                 <label for="at-chat-media-file-input"><span class="mdi mdi-image-plus at_icon" id="at-upload-chat-media" data-cy="at-upload-chat-media"></span></label>
                 <input type="file" style="display:none" id="at-chat-media-file-input"/>
                 <select class="at_transparent_dropdown at_w-full" name="" id="at-recepient-dropdown" data-cy="at-recepient-dropdown">
-                    <option value="none" selected>No recepient</option>
+                    <option value="none" selected>${i18n.t('NoRecipient')}</option>
                 </select>
             </div>
             <div class="at_field at_flex_row">
@@ -87,7 +88,7 @@ export function renderTagMessages() {
         }
         else {
             chatContainer.innerHTML = `
-                <span data-cy="at-no-messages-prompt" id="at-no-message">No messages</span>
+                <span data-cy="at-no-messages-prompt" id="at-no-message">${i18n.t('NoMessages')}</span>
             `;
         }
         return;
@@ -244,7 +245,7 @@ export function createTagMessage() {
     //Clear forms
     clearSelectedMedia();
     clearTagMessageInput();
-    notyf.success("Message successfuly sent");
+    notyf.success(`${i18n.t('MessageSentSuccess')}`);
     return message;
 }
 export function setTagMessagingDetails(tagId) {

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

@@ -1,5 +1,6 @@
 const themes = ['azusa', 'forest', 'aqua', 'night', 'light', 'retro'];
 import { _mpConfig } from "../../../architwin";
+import i18n from './i18n';
 let activeThemeCard;
 export function renderThemePane() {
     const element = document.createElement('div');
@@ -12,7 +13,7 @@ export function renderThemePane() {
     element.setAttribute('data-cy', 'at-theme-pane');
     element.innerHTML = `
         <div class="at_panel_header">
-            <span>Theme</span>
+            <span>${i18n.t('Theme')}</span>
         </div>
         <div class="at_scrollable_container" >
             <div class="at_flex_tiles" id="at-theme-cards" data-cy="at-theme-cards">
@@ -44,11 +45,11 @@ export function renderThemePane() {
         </div>
         <div class="at_button_row at_justify_between" >
             <div class="at_button at_ghost" style="margin-top: auto;" id="at-cancel-theme-btn" data-cy="at-cancel-theme-btn" target-pane="at-object-list-pane">
-                Cancel
+                ${i18n.t('Cancel')}
                 <span class="mdi mdi-close-circle-outline"></span>
             </div>
             <div class="at_button at_ghost" id="at-save-customization-btn">
-                Save
+                ${i18n.t('Save')}
                 <span class="mdi mdi-content-save"></span>
             </div>
         </div>

package/lib/atwinui/events.js

@@ -7,7 +7,7 @@ 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, setTagMessagingDetails, renderCategoryDropdownOptions } from "./components/toolbar";
+import { actionBar, renderObjectCards, renderLibraryCards, renderTags, renderTagRow, getTagFormData, addClickEventToTagRow, setActiveCard, setActiveMenu, setActiveActionBtn, removeObjectCard, setTagCategoriesOption, toggleDropdown, tagFormMode, selectedTag, renderRecepientOptions, renderTagMessages, createTagMessage, setTagLink, setTagMessagingDetails, renderCategoryDropdownOptions, clearTagFormDropdown } 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, setTagIcon, } from "../architwin";
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
@@ -15,6 +15,7 @@ import { SPACE_EVENTS } from "../types";
 import { initFormData } from "./components/toolbar/tagFormPane";
 import { renderObjectList } from "./components/toolbar/objectListPane";
 import { renderLibraryList } from "./components/toolbar/libraryPane";
+import i18n from './components/toolbar/i18n';
 let activeToolbarItem, activeActionItem, activePane, activeActionPane;
 let notyf = new Notyf({ position: { x: 'left', y: 'bottom' }, duration: 4500 });
 let currentTag = undefined;
@@ -88,7 +89,7 @@ function toggleDisplayPane(targetId) {
                             const tagRow = document.getElementById(`at-tag-row-${tagId}`);
                             console.log("tagRow", tagRow);
                             tagRow.remove();
-                            notyf.success("Successfully deleted tag");
+                            notyf.success(`${i18n.t('SuccessDeleteTag')}`);
                             currentTag = undefined;
                         }
                         else {
@@ -273,12 +274,13 @@ function handlePlaceTag() {
                         tagContainer.appendChild(row);
                         addClickEventToTagRow(iTag);
                         // toggleDisplayPane('at-cancel-tag-form-btn')
-                        notyf.success("Successfuly added tag to space");
+                        notyf.success(`${i18n.t('SuccessAddTagToSpace')}`);
                         const tags = getMpTags();
                         _tags[tags.length - 1].category_uuid = payload.tagSubcategoryId;
                         currentTag = _tags[_tags.length - 1];
                         console.log('_tags', _tags);
                         console.log("Last Tag Pushed", currentTag);
+                        clearTagFormDropdown();
                     }
                 }
                 else {
@@ -299,7 +301,7 @@ function handlePlaceTag() {
                         tagContainer.appendChild(row);
                         addClickEventToTagRow(iTag);
                         // toggleDisplayPane('at-cancel-tag-form-btn')
-                        notyf.success("Successfuly added tag to space");
+                        notyf.success(`${i18n.t('SuccessAddTagToSpace')}`);
                         const tags = getMpTags();
                         currentTag = tags[tags.length - 1];
                         console.log("Last Tag Pushed", tags[tags.length - 1]);
@@ -327,7 +329,7 @@ function handlePlaceTag() {
                         tagContainer.appendChild(row);
                         addClickEventToTagRow(iTag);
                         // toggleDisplayPane('at-cancel-tag-form-btn')
-                        notyf.success("Successfuly added tag to space");
+                        notyf.success(`${i18n.t('SuccessAddTagToSpace')}`);
                         const tags = getMpTags();
                         console.log("tags", tags);
                         console.log("_tags", _tags);
@@ -359,7 +361,7 @@ function handlePlaceTag() {
                         tagContainer.appendChild(row);
                         addClickEventToTagRow(iTag);
                         // toggleDisplayPane('at-cancel-tag-form-btn')
-                        notyf.success("Successfuly added tag to space");
+                        notyf.success(`${i18n.t('SuccessAddTagToSpace')}`);
                         const tags = getMpTags();
                         console.log("tags", tags);
                         console.log("_tags", _tags);
@@ -395,7 +397,7 @@ function handleDisposeTag() {
                     const tagRow = document.getElementById(`at-tag-row-${tagId}`);
                     console.log("tagRow", tagRow);
                     tagRow.remove();
-                    notyf.success("Successfully deleted tag");
+                    notyf.success(`${i18n.t('SuccessDeleteTag')}`);
                     currentTag = undefined;
                 }
                 else {
@@ -506,7 +508,7 @@ function handleScreenshot() {
     const screenshotBtn = document.getElementById('at-screenshot-btn');
     screenshotBtn.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
         function onComplete() {
-            notyf.success("Screenshot saved to downloads folder");
+            notyf.success(`${i18n.t('ScreenshotSaved')}`);
         }
         yield captureSpaceScreenshot(onComplete);
     }));
@@ -732,7 +734,7 @@ function handleCopyTagLink(link) {
     console.log("handleCopyTagLink()", link);
     setTagLink(link);
     navigator.clipboard.writeText(link);
-    notyf.success("Successfully copied tag link to clipboard");
+    notyf.success(`${i18n.t('SuccessCopyTagLink')}`);
 }
 export { 
 //state

package/lib/atwinui/index.js

@@ -19,7 +19,7 @@ import { renderToolbarUI, setActiveMenu, setActiveActionBtn, setActiveThemeCard
 //     tagFormPane:HTMLElement,
 //     addMediaScreenForm:HTMLElement
 const sidebarPaneBtnIds = [
-    'at-add-model-btn',
+    //'at-add-model-btn',
     'at-add-tag-btn',
     'at-cancel-add-object-btn',
     'at-close-action-bar-btn',

package/lib/loaders/planeGeometry.js

@@ -601,7 +601,7 @@ export class Plane {
             tex.format = THREE.RGBAFormat;
             tex.needsUpdate = true; //This should be true in order to update the texture
         });
-        const pauseBtnUrl = `${this.staticAssetPath}/static/pauseicon.png`;
+        const pauseBtnUrl = `${this.staticAssetPath}static/pauseicon.png`;
         this.pauseBtnTexture = new THREE.TextureLoader()
             .load(pauseBtnUrl, (tex = this.pauseBtnTexture) => {
             tex.minFilter = THREE.LinearFilter;

package/lib/loaders/planeGeometry2.js

@@ -463,7 +463,7 @@ class PlaneVideo {
             tex.format = THREE.RGBAFormat;
             tex.needsUpdate = true; //This should be true in order to update the texture
         });
-        const pauseBtnUrl = `${_staticAssetPath}/static/pauseicon.png`;
+        const pauseBtnUrl = `${_staticAssetPath}static/pauseicon.png`;
         this.pauseBtnTexture = new THREE.TextureLoader()
             .load(pauseBtnUrl, (tex = this.pauseBtnTexture) => {
             tex.minFilter = THREE.LinearFilter;

package/lib/types.d.ts

@@ -734,6 +734,7 @@ export interface IThemeConfig {
 }
 export interface IToolbarConfig {
     active: boolean;
+    lang?: string;
     menuItems?: {
         meeting?: boolean;
         screenshot?: boolean;

package/lib/utils.d.ts

@@ -25,3 +25,4 @@ export declare function arrayBufferToBase64(buffer: any): string;
 export declare function isUrlValid(userInput: string): boolean;
 export declare function dateTimeFormat(d: any): string;
 export declare function stringContains(str: string, target: string, isCaseSensitive?: boolean): boolean;
+export declare function getURLParams(param: string): string;

package/lib/utils.js

@@ -115,3 +115,8 @@ export function stringContains(str, target, isCaseSensitive = false) {
     }
     return str.toLowerCase().includes(target.toLowerCase());
 }
+export function getURLParams(param) {
+    const queryParams = new URLSearchParams(window.location.search);
+    const paramValue = queryParams.get(param);
+    return paramValue;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.0.78",
+  "version": "1.0.80",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",
@@ -33,6 +33,9 @@
     "@zoom/videosdk": "^1.8.7",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
+    "i18next": "^23.7.11",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-http-backend": "^2.4.2",
     "jsrsasign": "^10.8.6",
     "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",