From ec1fa316519086300ffe0062a55970302b77032e Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 3 Apr 2024 18:12:41 +0800
Subject: [PATCH] moved locale selector as tray componentm, created basic aht
 components

---
 addon/components/chat-container.hbs           |   5 +-
 addon/components/chat-container.js            |  18 +-
 addon/components/chat-tray.hbs                |  27 ++
 addon/components/chat-tray.js                 |  29 +++
 addon/components/chat-window.hbs              |  55 ++++-
 addon/components/chat-window.js               |  38 ++-
 addon/components/layout/header.hbs            |   2 +
 addon/components/locale-selector-tray.hbs     |  30 +++
 addon/components/locale-selector-tray.js      | 144 +++++++++++
 addon/components/notification-tray.hbs        |  68 +++---
 addon/styles/addon.css                        |   1 +
 addon/styles/components/attacher.css          |   6 +-
 addon/styles/components/chat.css              | 230 ++++++++++++++++++
 addon/styles/components/dashboard.css         |   2 +-
 addon/styles/components/drawer.css            |   8 +-
 addon/styles/components/full-calendar.css     |  12 +-
 addon/styles/components/input.css             |   9 +-
 addon/styles/components/kanban.css            |  10 +-
 addon/styles/components/navbar.css            |   8 +-
 addon/styles/components/notification-tray.css |   4 +-
 addon/styles/components/otp-input.css         |  12 +-
 addon/styles/components/table.css             |   6 +-
 addon/styles/components/tabs.css              |   2 +-
 addon/styles/components/timeline.css          |   2 +-
 addon/styles/layout/legacy.css                |   2 +-
 addon/styles/layout/next.css                  |  39 +--
 app/components/chat-tray.js                   |   1 +
 app/components/locale-selector-tray.js        |   1 +
 .../integration/components/chat-tray-test.js  |  26 ++
 .../components/locale-selector-tray-test.js   |  26 ++
 30 files changed, 709 insertions(+), 114 deletions(-)
 create mode 100644 addon/components/chat-tray.hbs
 create mode 100644 addon/components/chat-tray.js
 create mode 100644 addon/components/locale-selector-tray.hbs
 create mode 100644 addon/components/locale-selector-tray.js
 create mode 100644 addon/styles/components/chat.css
 create mode 100644 app/components/chat-tray.js
 create mode 100644 app/components/locale-selector-tray.js
 create mode 100644 tests/integration/components/chat-tray-test.js
 create mode 100644 tests/integration/components/locale-selector-tray-test.js

diff --git a/addon/components/chat-container.hbs b/addon/components/chat-container.hbs
index 18fc8ac..26819fe 100644
--- a/addon/components/chat-container.hbs
+++ b/addon/components/chat-container.hbs
@@ -1,6 +1,5 @@
-<div class="absolute fixed right-0 bottom-0 bg-gray-900 w-12 h-12 rounded-full cursor-pointer border-white border-2 border-gray-600 p-2">
-    <a>Chat</a>
-    {{#each this.chatChannels as |chatChannel|}}
+<div class="chat-container" ...attributes>
+    {{#each this.chat.openChannels as |chatChannel|}}
         <ChatWindow @channel={{chatChannel}} />
     {{/each}}
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-container.js b/addon/components/chat-container.js
index 8a15ca9..146800d 100644
--- a/addon/components/chat-container.js
+++ b/addon/components/chat-container.js
@@ -1,21 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class ChatContainerComponent extends Component {
-    @tracked chatChannels = [{
-        title: "test",
-        public_id: "test",
-        chats: [
-            {
-                owner: "Doljko",
-                message: "Hello"
-            }
-        ]
-    }];
-    @tracked isVisible = false;
-
-    @action openChatbox () {
-        this.isVisible = true
+    @service chat;
+    constructor(owner) {
+        super(...arguments);
     }
 }
diff --git a/addon/components/chat-tray.hbs b/addon/components/chat-tray.hbs
new file mode 100644
index 0000000..1c24f18
--- /dev/null
+++ b/addon/components/chat-tray.hbs
@@ -0,0 +1,27 @@
+<div class="next-user-button" ...attributes>
+    <BasicDropdown @registerAPI={{this.registerAPI}} @defaultClass={{@wrapperClass}} @onOpen={{@onOpen}} @onClose={{@onClose}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @renderInPlace={{true}} @initiallyOpened={{@initiallyOpened}} as |dd|>
+        <dd.Trigger class={{@triggerClass}}>
+            <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
+                <FaIcon @icon="message" />
+                {{!-- {{#if this.notifications.length}}
+                    <div class="chat-tray-unread-notifications-badge">{{this.notifications.length}}</div>
+                {{/if}} --}}
+            </div>
+        </dd.Trigger>
+        <dd.Content class="chat-tray-panel-container">
+            <div class="chat-tray-panel">
+                <div class="p-4">
+                    <Button @type="primary" @text="Start Chat" @onClick={{this.startChat}} />
+                </div>
+                <div class="flex flex-col space-y-2 px-4 py-2">
+                    {{#each this.channels as |channel|}}
+                        <button type="button" class="rounded-lg border border-black text-white bg-gray-700 px-4 py-2 shadow-sm w-full" {{on "click" (fn this.openChannel channel)}}>
+                            <div class="font-bold">{{n-a channel.name "Untitled Chat"}}</div>
+                            {{!-- <div class="text-sm truncate">{{channel.lastMessage.content}}</div> --}}
+                        </button>
+                    {{/each}}
+                </div>
+            </div>
+        </dd.Content>
+    </BasicDropdown>
+</div>
\ No newline at end of file
diff --git a/addon/components/chat-tray.js b/addon/components/chat-tray.js
new file mode 100644
index 0000000..2bbcb35
--- /dev/null
+++ b/addon/components/chat-tray.js
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class ChatTrayComponent extends Component {
+    @service chat;
+    @service socket;
+    @tracked channels = [];
+
+    constructor(owner) {
+        super(...arguments);
+        this.chat.loadChannels.perform({
+            withChannels: (channels) => {
+                this.channels = channels;
+            },
+        });
+    }
+
+    @action openChannel(chatChannelRecord) {
+        this.chat.openChannel(chatChannelRecord);
+    }
+
+    @action startChat() {
+        const chatChannelRecord = this.chat.createChatChannel();
+        this.openChannel(chatChannelRecord);
+    }
+}
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 7fb614e..354e24f 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,15 +1,46 @@
-{{! template-lint-disable no-inline-styles }}
-<div class="bg-gray-400 absolute right-0 bottom-0" style="right: 54px;">
-    <div class="flex justify-center h-64 w-80 mt-2" style="height: 400px; right: 54px; bottom:8px">Lanna</div>
-    <div class="ml-4 mb-4">
-        hi,how are you?
-    </div>
-    <div class="flex space-x-4 ml-2">
-        <div class="flex-1">
-            <InputGroup />
-        </div>
-        <div class="mr-4">
-            <Button @type="primary" @buttonType="button" @icon="save" @size="xs" @iconSize="xs" />
+<div class="chat-window-container" ...attributes>
+    <div class="chat-window-controls-container">
+        <div class="chat-window-name">
+            {{n-a this.channel.name "Untitled Chat"}}
+        </div>
+        <div class="chat-window-controls">
+            <button type="button" class="chat-window-button" {{on "click" this.addParticipant}}>
+                <FaIcon @icon="user-plus" @size="sm" />
+            </button>
+            <button type="button" class="chat-window-button chat-window-close-button" {{on "click" this.closeChannel}}>
+                <FaIcon @icon="times" @size="sm" />
+            </button>
+        </div>
+    </div>
+    <div class="chat-window-participants-container">
+        {{#each this.channel.participants as |chatParticipant|}}
+            <div class="chat-window-participant-name">{{chatParticipant.name}}</div>
+        {{/each}}
+    </div>
+    <div class="chat-window-messages-container">
+        <div class="chat-window-messages">
+            {{#each this.channel.messages as |chatMessage|}}
+                <div class="chat-message-container">
+                    <div class="chat-message-sender-bubble">
+                        <Image src={{chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} />
+                        <div class="chat-message-sender-name">{{chatMessage.sender.name}}</div>
+                    </div>
+                    <div class="chat-message-content-bubble-container">
+                        <div class="chat-message-content-bubble {{if (eq chatMessage.sender_uuid this.currentUser.id) "sender-bubble"}}">
+                            {{chatMessage.content}}
+                        </div>
+                        <div class="chat-message-created-at">{{chatMessage.createdAgo}}</div>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+    <div class="chat-window-input-container">
+        <div class="chat-window-input-box">
+            <Textarea @value={{this.pendingMessageContent}} placeholder="Type your message here" class="chat-window-input" rows="3" />
+        </div>
+        <div class="chat-window-submit-container">
+            <Button @type="primary" @icon="paper-plane" @text="Send" @onClick={{this.sendMessage}} />
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 0687977..39f4a2d 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -1,3 +1,39 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
-export default class ChatWindowComponent extends Component {}
+export default class ChatWindowComponent extends Component {
+    @service chat;
+    @service currentUser;
+    @tracked channel;
+    @tracked sender;
+    @tracked pendingMessageContent = '';
+
+    constructor(owner, { channel }) {
+        super(...arguments);
+        this.channel = channel;
+        this.sender = this.getSenderFromParticipants(channel);
+    }
+
+    @action sendMessage() {
+        this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent);
+        this.pendingMessageContent = '';
+    }
+
+    @action closeChannel() {
+        this.chat.closeChannel(this.channel);
+    }
+
+    @action addParticipant() {}
+
+    getSenderFromParticipants(channel) {
+        const participants = channel.participants ?? [];
+        console.log('#participants', participants);
+        const sender = participants.find((chatParticipant) => {
+            return chatParticipant.user_uuid === this.currentUser.id;
+        });
+
+        return sender;
+    }
+}
diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
index f08f247..560af29 100644
--- a/addon/components/layout/header.hbs
+++ b/addon/components/layout/header.hbs
@@ -30,7 +30,9 @@
         <div id="view-header-actions"></div>
         <div class="flex items-center justify-between">
             <div class="flex-1 flex items-center pr-1">
+                <LocaleSelectorTray class="mr-0.5" />
                 <NotificationTray @registerAPI={{@registerNotificationTrayApi}} @onClickNotification={{@onClickNotification}} />
+                <ChatTray />
             </div>
             <div class="flex-1 flex items-center pr-1">
                 <Layout::Header::Dropdown @items={{this.organizationNavigationItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
diff --git a/addon/components/locale-selector-tray.hbs b/addon/components/locale-selector-tray.hbs
new file mode 100644
index 0000000..adcb460
--- /dev/null
+++ b/addon/components/locale-selector-tray.hbs
@@ -0,0 +1,30 @@
+<div class="next-user-button" ...attributes>
+    <BasicDropdown @defaultClass={{@wrapperClass}} @onOpen={{@onOpen}} @onClose={{@onClose}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @renderInPlace={{or @renderInPlace true}} @initiallyOpened={{@initiallyOpened}} as |dd|>
+        <dd.Trigger class={{@triggerClass}}>
+            <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
+                <FaIcon @icon="globe" @size="sm" />
+            </div>
+        </dd.Trigger>
+        <dd.Content class={{@contentClass}}>
+            <div class="next-dd-menu {{@dropdownMenuClass}} {{if dd.isOpen 'is-open'}}">
+                {{#each-in this.availableLocales as |key country|}}
+                    <div class="px-1">
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.changeLocale key)}}>
+                            <div class="flex flex-row items-center justify-between w-full">
+                                <div class="flex-1">
+                                    <span class="mr-1">{{country.emoji}}</span>
+                                    <span>{{country.language}}</span>
+                                </div>
+                                {{#if (eq this.currentLocale key)}}
+                                    <div>
+                                        <FaIcon @icon="check" class="text-green-400" />
+                                    </div>
+                                {{/if}}
+                            </div>
+                        </a>
+                    </div>
+                {{/each-in}}
+            </div>
+        </dd.Content>
+    </BasicDropdown>
+</div>
\ No newline at end of file
diff --git a/addon/components/locale-selector-tray.js b/addon/components/locale-selector-tray.js
new file mode 100644
index 0000000..eb09676
--- /dev/null
+++ b/addon/components/locale-selector-tray.js
@@ -0,0 +1,144 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency-decorators';
+
+export default class LocaleSelectorTrayComponent extends Component {
+    /**
+     * Inject the intl service.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @service intl;
+
+    /**
+     * Inject the intl service.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @service fetch;
+
+    /**
+     * Tracks all the available locales.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @tracked locales = [];
+
+    /**
+     * All available countries data.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @tracked countries = [];
+
+    /**
+     * The current locale in use.
+     *
+     * @memberof LocaleSelectorComponent
+     */
+    @tracked currentLocale;
+
+    /**
+     * Creates an instance of LocaleSelectorComponent.
+     * @memberof LocaleSelectorComponent
+     */
+    constructor() {
+        super(...arguments);
+
+        this.locales = this.intl.locales;
+        this.currentLocale = this.intl.primaryLocale;
+        this.loadAvailableCountries.perform();
+
+        // Check for locale change
+        this.intl.onLocaleChanged(() => {
+            this.currentLocale = this.intl.primaryLocale;
+        });
+    }
+
+    /**
+     * Handles the change of locale.
+     * @param {string} selectedLocale - The selected locale.
+     * @returns {void}
+     * @memberof LocaleSelectorComponent
+     * @method changeLocale
+     * @instance
+     * @action
+     */
+    @action changeLocale(selectedLocale) {
+        this.currentLocale = selectedLocale;
+        this.intl.setLocale(selectedLocale);
+        // Persist to server
+        this.saveUserLocale.perform(selectedLocale);
+    }
+
+    /**
+     * Loads available countries asynchronously.
+     * @returns {void}
+     * @memberof LocaleSelectorComponent
+     * @method loadAvailableCountries
+     * @instance
+     * @task
+     * @generator
+     */
+    @task *loadAvailableCountries() {
+        this.countries = yield this.fetch.get('lookup/countries', { columns: ['name', 'cca2', 'flag', 'emoji', 'languages'] });
+        this.availableLocales = this._createAvailableLocaleMap();
+    }
+
+    /**
+     * Saves the user's selected locale to the server.
+     * @param {string} locale - The user's selected locale.
+     * @returns {void}
+     * @memberof LocaleSelectorComponent
+     * @method saveUserLocale
+     * @instance
+     * @task
+     * @generator
+     */
+    @task *saveUserLocale(locale) {
+        yield this.fetch.post('users/locale', { locale });
+    }
+
+    /**
+     * Creates a map of available locales.
+     * @private
+     * @returns {Object} - The map of available locales.
+     * @memberof LocaleSelectorComponent
+     * @method _createAvailableLocaleMap
+     * @instance
+     */
+    _createAvailableLocaleMap() {
+        const localeMap = {};
+
+        for (let i = 0; i < this.locales.length; i++) {
+            const locale = this.locales.objectAt(i);
+
+            localeMap[locale] = this._findCountryDataForLocale(locale);
+        }
+
+        return localeMap;
+    }
+
+    /**
+     * Finds country data for a given locale.
+     * @private
+     * @param {string} locale - The locale to find country data for.
+     * @returns {Object|null} - The country data or null if not found.
+     * @memberof LocaleSelectorComponent
+     * @method _findCountryDataForLocale
+     * @instance
+     */
+    _findCountryDataForLocale(locale) {
+        const localeCountry = locale.split('-')[1];
+        const country = this.countries.find((country) => country.cca2.toLowerCase() === localeCountry);
+
+        if (country) {
+            // get the language
+            country.language = Object.values(country.languages)[0];
+        }
+
+        return country;
+    }
+}
diff --git a/addon/components/notification-tray.hbs b/addon/components/notification-tray.hbs
index 059fdb2..bd86220 100644
--- a/addon/components/notification-tray.hbs
+++ b/addon/components/notification-tray.hbs
@@ -1,35 +1,39 @@
-<BasicDropdown @renderInPlace={{true}} @registerAPI={{this.registerAPI}} class="notification-tray next-user-button" ...attributes as |dd|>
-    <dd.Trigger class="next-org-button-trigger flex-shrink-0">
-        <FaIcon @icon="inbox" />
-        {{#if this.notifications.length}}
-            <div class="notification-tray-unread-notifications-badge">{{this.notifications.length}}</div>
-        {{/if}}
-    </dd.Trigger>
-    <dd.Content class="notification-tray-panel-container">
-        <div class="notification-tray-panel">
-            <div>
-                <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex flex-row space-x-4">
-                    <h1 class="text-black dark:text-gray-100 text-sm font-bold">{{pluralize this.notifications.length "Unread Notification"}}</h1>
+<div class="next-user-button" ...attributes>
+    <BasicDropdown @registerAPI={{this.registerAPI}} @defaultClass={{@wrapperClass}} @onOpen={{@onOpen}} @onClose={{@onClose}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @renderInPlace={{true}} @initiallyOpened={{@initiallyOpened}} as |dd|>
+        <dd.Trigger class={{@triggerClass}}>
+            <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
+                <FaIcon @icon="inbox" />
+                {{#if this.notifications.length}}
+                    <div class="notification-tray-unread-notifications-badge">{{this.notifications.length}}</div>
+                {{/if}}
+            </div>
+        </dd.Trigger>
+        <dd.Content class="notification-tray-panel-container">
+            <div class="notification-tray-panel">
+                <div>
+                    <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex flex-row space-x-4">
+                        <h1 class="text-black dark:text-gray-100 text-sm font-bold">{{pluralize this.notifications.length "Unread Notification"}}</h1>
+                    </div>
+                    <div class="h-48 overflow-y-scroll p-2">
+                        {{#each this.notifications as |notification|}}
+                            <a href="javascript:;" class="notification-item {{if notification._isRemoving 'opacity-50'}}" {{on "click" (fn this.onClickNotification notification)}}>
+                                <h3 class="font-semibold text-small truncate">{{notification.data.subject}}</h3>
+                                <p class="text-xs mb-1.5 truncate">{{notification.data.message}}</p>
+                                <span class="text-xs">Received: {{notification.createdAgo}}</span>
+                            </a>
+                        {{else}}
+                            <div class="flex flex-1 items-center justify-center w-full h-full">
+                                <span class="text-base text-gray-800 dark:text-gray-300 italic">No unread notifications</span>
+                            </div>
+                        {{/each}}
+                    </div>
                 </div>
-                <div class="h-48 overflow-y-scroll p-2">
-                    {{#each this.notifications as |notification|}}
-                        <a href="javascript:;" class="notification-item {{if notification._isRemoving 'opacity-50'}}" {{on "click" (fn this.onClickNotification notification)}}>
-                            <h3 class="font-semibold text-small truncate">{{notification.data.subject}}</h3>
-                            <p class="text-xs mb-1.5 truncate">{{notification.data.message}}</p>
-                            <span class="text-xs">Received: {{notification.createdAgo}}</span>
-                        </a>
-                    {{else}}
-                        <div class="flex flex-1 items-center justify-center w-full h-full">
-                            <span class="text-base text-gray-800 dark:text-gray-300 italic">No unread notifications</span>
-                        </div>
-                    {{/each}}
+                <div class="px-2 py-1.5 border-t border-gray-200 dark:border-gray-700 flex flex-row space-x-4">
+                    <LinkTo @route="console.notifications" class="notification-tray-view-all-link">
+                        View all notifications
+                    </LinkTo>
                 </div>
             </div>
-            <div class="px-2 py-1.5 border-t border-gray-200 dark:border-gray-700 flex flex-row space-x-4">
-                <LinkTo @route="console.notifications" class="notification-tray-view-all-link">
-                    View all notifications
-                </LinkTo>
-            </div>
-        </div>
-    </dd.Content>
-</BasicDropdown>
\ No newline at end of file
+        </dd.Content>
+    </BasicDropdown>
+</div>
\ No newline at end of file
diff --git a/addon/styles/addon.css b/addon/styles/addon.css
index 1222780..8dc3966 100644
--- a/addon/styles/addon.css
+++ b/addon/styles/addon.css
@@ -44,6 +44,7 @@
 @import 'components/sidebar-toggle.css';
 @import 'components/countdown.css';
 @import 'components/otp-input.css';
+@import 'components/chat.css';
 
 /** Third party */
 @import 'air-datepicker/air-datepicker.css';
diff --git a/addon/styles/components/attacher.css b/addon/styles/components/attacher.css
index 7668767..5c5f48f 100644
--- a/addon/styles/components/attacher.css
+++ b/addon/styles/components/attacher.css
@@ -114,7 +114,9 @@
 .ember-attacher-light-theme {
     background-color: #f3f6f9;
     border: 1px solid #ced2e2;
-    box-shadow: 0 0 16px -4px rgba(0, 20, 40, 0.2), 0 0 80px -10px rgba(0, 20, 40, 0.3);
+    box-shadow:
+        0 0 16px -4px rgba(0, 20, 40, 0.2),
+        0 0 80px -10px rgba(0, 20, 40, 0.3);
     color: #203d5d;
 }
 
@@ -253,4 +255,4 @@
         max-width: 96%;
         max-width: calc(100% - 42px);
     }
-}
\ No newline at end of file
+}
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
new file mode 100644
index 0000000..acd573c
--- /dev/null
+++ b/addon/styles/components/chat.css
@@ -0,0 +1,230 @@
+.chat-tray-panel-container {
+    @apply mt-3 bg-white border border-gray-200 shadow-md rounded-lg dark:bg-gray-900 dark:border-gray-700 space-y-2 truncate;
+    width: 400px;
+}
+
+.chat-container {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 999;
+}
+
+.chat-window-container {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin-left: 2rem;
+    margin-bottom: 1rem;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    height: 400px;
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 0.1),
+        0 2px 4px -2px rgb(0 0 0 / 0.1);
+    border: 1px #94a3b8 solid;
+    border-radius: 0.5rem;
+    background-color: #d1d5db;
+}
+
+.chat-window-container:first-child {
+    margin-right: 2rem;
+}
+
+.chat-window-input-container {
+    display: flex;
+    flex-direction: column;
+    background-color: #d1d5db;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+}
+
+.chat-window-input-box {
+    flex: 1;
+    width: 100%;
+    background-color: #d1d5db;
+}
+
+.chat-window-input {
+    flex: 1;
+    border-radius: 1rem;
+    padding: 0.6rem;
+    background-color: #d1d5db;
+    width: 100%;
+    border: 0;
+    outline: none;
+    box-shadow: none;
+}
+
+.chat-window-input:focus {
+    border: 0;
+    outline: none;
+    box-shadow: none;
+}
+
+.chat-window-submit-container {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    padding: 0.5rem;
+}
+
+.chat-window-submit-container .btn-wrapper {
+    border: 0;
+    outline: none;
+    box-shadow: none;
+}
+
+.chat-window-submit-container button.btn.btn-sm,
+.chat-window-submit-container button {
+    background-color: #64748b;
+    border: 1px solid #64748b;
+    color: #f9fafb;
+}
+
+.chat-window-controls-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+    background-color: #d1d5db;
+    padding: 0.5rem 0.5rem;
+}
+
+.chat-window-controls-container .chat-window-name {
+    display: flex;
+    align-items: center;
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #000;
+    flex: 1;
+}
+
+.chat-window-controls-container .chat-window-controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    flex: 1;
+}
+
+.chat-window-controls-container .chat-window-controls .chat-window-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #9ca3af;
+    border: 1px solid #9ca3af;
+    border-radius: 0.25rem;
+    height: 24px;
+    width: 24px;
+    text-align: center;
+    font-size: 0.75rem;
+    margin-left: 0.25rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.chat-window-controls-container .chat-window-controls .chat-window-button:hover {
+    opacity: 0.5;
+}
+
+.chat-window-controls-container .chat-window-controls .chat-window-close-button {
+    color: #dc2626;
+}
+
+.chat-window-participants-container {
+    padding: 0.25rem 0.5rem;
+    background-color: #d1d5db;
+}
+
+.chat-window-participants-container > .chat-window-participant-name {
+    border: 1px #2563eb solid;
+    color: #e5e7eb;
+    font-size: 0.65rem;
+    width: 70px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+    background-color: #3b82f6;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.chat-window-messages-container {
+    height: 280px;
+    width: 100%;
+    background-color: #fff;
+    border-bottom: 1px #94a3b8 solid;
+    border-top: 1px #94a3b8 solid;
+    overflow-y: scroll;
+}
+
+.chat-window-messages {
+    height: 100%;
+    width: 100%;
+    background-color: #fff;
+    padding: 0.25rem 0;
+}
+
+.chat-message-container {
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.75rem;
+}
+
+.chat-message-container .chat-message-content-bubble-container {
+    flex: 1;
+    width: 100%;
+    padding: 0 0.35rem;
+}
+
+.chat-message-container .chat-message-content-bubble {
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    font-size: 0.7rem;
+    background-color: #d1d5db;
+    width: 100%;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    color: #0f172a;
+}
+
+.chat-message-container .chat-message-created-at {
+    font-size: 0.5rem;
+    margin-top: 0.2rem;
+    color: #475569;
+}
+
+.chat-message-container .chat-message-sender-bubble {
+    width: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+}
+
+.chat-message-container .chat-message-sender-bubble > img {
+    width: 27px;
+    height: 27px;
+    border-radius: 100%;
+    border: 1px #f3f4f6 solid;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.chat-message-container .chat-message-sender-bubble > .chat-message-sender-name {
+    margin-top: 0.15rem;
+    display: flex;
+    align-items: center;
+    width: 50px;
+    max-width: 50px;
+    max-width: 60px;
+    font-size: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #475569;
+}
diff --git a/addon/styles/components/dashboard.css b/addon/styles/components/dashboard.css
index d1ccf8f..16b3eb4 100644
--- a/addon/styles/components/dashboard.css
+++ b/addon/styles/components/dashboard.css
@@ -16,4 +16,4 @@
 
 .col-span-full {
     grid-column: 1 / -1;
-}
\ No newline at end of file
+}
diff --git a/addon/styles/components/drawer.css b/addon/styles/components/drawer.css
index b361717..2f518ba 100644
--- a/addon/styles/components/drawer.css
+++ b/addon/styles/components/drawer.css
@@ -71,14 +71,14 @@ body[data-theme='dark'] .next-drawer > .next-drawer-panel-container > .next-draw
     @apply border-2 border-gray-200 border-solid;
 }
 
-body[data-theme="dark"] .next-drawer > .next-drawer-panel-container > .gutter {
+body[data-theme='dark'] .next-drawer > .next-drawer-panel-container > .gutter {
     @apply border-gray-500;
 }
 
 .next-drawer > .next-drawer-panel-container > .gutter:hover,
 .next-drawer.drawer-is-resizing > .next-drawer-panel-container > .gutter,
-body[data-theme="dark"] .next-drawer > .next-drawer-panel-container > .gutter:hover,
-body[data-theme="dark"] .next-drawer.drawer-is-resizing > .next-drawer-panel-container > .gutter {
+body[data-theme='dark'] .next-drawer > .next-drawer-panel-container > .gutter:hover,
+body[data-theme='dark'] .next-drawer.drawer-is-resizing > .next-drawer-panel-container > .gutter {
     @apply border-sky-500 bg-opacity-75;
 }
 
@@ -102,7 +102,7 @@ body[data-theme="dark"] .next-drawer.drawer-is-resizing > .next-drawer-panel-con
     @apply bg-gray-200 border-2 border-white shadow-md drop-shadow-md rounded-lg;
 }
 
-body[data-theme="dark"] .next-drawer > .next-drawer-panel-container > .gutter > .notch {
+body[data-theme='dark'] .next-drawer > .next-drawer-panel-container > .gutter > .notch {
     @apply bg-gray-600 border-gray-600;
 }
 
diff --git a/addon/styles/components/full-calendar.css b/addon/styles/components/full-calendar.css
index d7bcc80..8154e28 100644
--- a/addon/styles/components/full-calendar.css
+++ b/addon/styles/components/full-calendar.css
@@ -31,7 +31,7 @@ body[data-theme='dark'] .fleetbase-full-calendar.fc table.fc-scrollgrid {
 
 .fleetbase-full-calendar.fc .fc-button:disabled,
 .fleetbase-full-calendar.fc .fc-button-primary:disabled,
-body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button-primary:disabled  {
+body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button-primary:disabled {
     @apply opacity-50 cursor-not-allowed;
 }
 
@@ -71,12 +71,12 @@ body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button .fc-icon {
     @apply text-gray-300;
 }
 
-.fleetbase-full-calendar.fc .fc-button-primary  {
+.fleetbase-full-calendar.fc .fc-button-primary {
     @apply bg-white border-gray-300 shadow-sm text-gray-800;
 }
 
 .fleetbase-full-calendar.fc .fc-button-primary:hover:not(:disabled) {
-    @apply text-gray-500
+    @apply text-gray-500;
 }
 
 .fleetbase-full-calendar.fc .fc-button-primary:focus {
@@ -91,9 +91,9 @@ body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button .fc-icon {
     @apply text-gray-900;
 }
 
-.fleetbase-full-calendar.fc .fc-button-primary:not(:disabled).fc-button-active:focus, 
+.fleetbase-full-calendar.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
 .fleetbase-full-calendar.fc .fc-button-primary:not(:disabled):active:focus,
-body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button-primary:not(:disabled).fc-button-active:focus, 
+body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
 body[data-theme='dark'] .fleetbase-full-calendar.fc .fc-button-primary:not(:disabled):active:focus {
     box-shadow: none;
-}
\ No newline at end of file
+}
diff --git a/addon/styles/components/input.css b/addon/styles/components/input.css
index 97ce046..4885550 100644
--- a/addon/styles/components/input.css
+++ b/addon/styles/components/input.css
@@ -525,7 +525,10 @@ body[data-theme='dark'] .iti__country-list {
 .fleetbase-console .form-checkbox:focus-visible,
 .fleetbase-console .form-checkbox:focus-within,
 .fleetbase-console .form-radio:focus {
-    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), var(--tw-shadow) !important;
+    box-shadow:
+        0 0 rgba(0, 0, 0, 0),
+        0 0 rgba(0, 0, 0, 0),
+        var(--tw-shadow) !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow) !important;
 }
 
@@ -548,8 +551,8 @@ body[data-theme='dark'] .iti__country-list {
     @apply w-4 h-4 transition duration-150 ease-in-out bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-900;
 }
 
-body[data-theme="light"] .form-checkbox, 
-body[data-theme="light"] .form-radio {
+body[data-theme='light'] .form-checkbox,
+body[data-theme='light'] .form-radio {
     @apply border-gray-200;
 }
 
diff --git a/addon/styles/components/kanban.css b/addon/styles/components/kanban.css
index 89b3514..acb2a9d 100644
--- a/addon/styles/components/kanban.css
+++ b/addon/styles/components/kanban.css
@@ -1,4 +1,4 @@
-.kanban-container { 
+.kanban-container {
     display: flex;
     width: 100%;
     max-width: 100%;
@@ -17,7 +17,7 @@
 .kanban-container .kanban-inner-container .kanban-column {
     width: 300px;
     height: 100%;
-    border-radius: .5rem;
+    border-radius: 0.5rem;
     margin-right: 1.25rem;
     @apply bg-gray-300 dark:bg-gray-800 shadow-sm;
 }
@@ -25,12 +25,12 @@
 .kanban-container .kanban-inner-container .kanban-column > .kanban-column-header {
     display: flex;
     flex-direction: row;
-    border-top-left-radius: .5rem;
-    border-top-right-radius: .5rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
     border-bottom-width: 2px;
     @apply px-4 py-2 border-gray-200 dark:border-gray-500;
 }
 
 .kanban-container .kanban-inner-container .kanban-column > .kanban-column-body {
     @apply px-4 py-2;
-}
\ No newline at end of file
+}
diff --git a/addon/styles/components/navbar.css b/addon/styles/components/navbar.css
index cbdca67..a103805 100644
--- a/addon/styles/components/navbar.css
+++ b/addon/styles/components/navbar.css
@@ -134,7 +134,9 @@ body.sandbox-console .fleetbase-console-navbar::after {
     font-weight: 700;
     border-bottom-left-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
     z-index: 12;
 }
 
@@ -174,7 +176,9 @@ body[data-theme='dark'] .dropdown-menu-panel.ember-basic-dropdown-content a.nav-
 #extensionsNav {
     z-index: 999999;
     transform: translateX(0);
-    transition: transform 0.3s ease, width 0.3s ease;
+    transition:
+        transform 0.3s ease,
+        width 0.3s ease;
     @apply fixed top-0 left-0 w-10/12 h-screen bg-gray-900 border-r border-gray-900 shadow-lg;
 }
 
diff --git a/addon/styles/components/notification-tray.css b/addon/styles/components/notification-tray.css
index 6e4d486..2de1930 100644
--- a/addon/styles/components/notification-tray.css
+++ b/addon/styles/components/notification-tray.css
@@ -29,7 +29,7 @@
 }
 
 .notification-tray-panel {
-    @apply mt-5 bg-white border border-gray-200 shadow-md rounded-lg dark:bg-gray-900 dark:border-gray-700 space-y-2 truncate;
+    @apply mt-3 bg-white border border-gray-200 shadow-md rounded-lg dark:bg-gray-900 dark:border-gray-700 space-y-2 truncate;
     width: 300px;
 }
 
@@ -39,4 +39,4 @@
 
 .notification-tray-view-all-link {
     @apply rounded px-2 py-1 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-moregray-750;
-}
\ No newline at end of file
+}
diff --git a/addon/styles/components/otp-input.css b/addon/styles/components/otp-input.css
index 10c2c7b..21b3f07 100644
--- a/addon/styles/components/otp-input.css
+++ b/addon/styles/components/otp-input.css
@@ -1,17 +1,17 @@
 .otp-input-container {
     display: flex;
     justify-content: space-between;
-    width: 400px; 
+    width: 400px;
 }
 
 .otp-input-container input {
-    width: 68px; 
-    height: 68px; 
-    font-size: 24px; 
+    width: 68px;
+    height: 68px;
+    font-size: 24px;
     text-align: center;
-    border: 3px solid #3498db; 
+    border: 3px solid #3498db;
     border-radius: 8px;
-    background-color: #2c3e50; 
+    background-color: #2c3e50;
     color: #ecf0f1;
     margin: 0;
     transition: all 0.3s ease;
diff --git a/addon/styles/components/table.css b/addon/styles/components/table.css
index 9b7f09b..318eb23 100644
--- a/addon/styles/components/table.css
+++ b/addon/styles/components/table.css
@@ -318,11 +318,11 @@ body[data-theme='dark'] .next-table-wrapper.auto-height > table > tbody:after,
 body[data-theme='light'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:first-child,
 body[data-theme='dark'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:first-child,
 .next-table-wrapper.auto-height > table > tbody > tr:last-child > td:first-child {
-    border-bottom-left-radius: .25rem;
+    border-bottom-left-radius: 0.25rem;
 }
 
 body[data-theme='light'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:last-child,
 body[data-theme='dark'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:last-child,
 .next-table-wrapper.auto-height > table > tbody > tr:last-child > td:last-child {
-    border-bottom-right-radius: .25rem;
-}
\ No newline at end of file
+    border-bottom-right-radius: 0.25rem;
+}
diff --git a/addon/styles/components/tabs.css b/addon/styles/components/tabs.css
index 3a72f09..6a4d94c 100644
--- a/addon/styles/components/tabs.css
+++ b/addon/styles/components/tabs.css
@@ -189,4 +189,4 @@ body[data-theme='light'] .fleetbase-pill-tabs > nav > a.ui-tab.active {
     background-color: #3b82f6;
     border: 1px solid #2563eb;
     color: #fff;
-}
\ No newline at end of file
+}
diff --git a/addon/styles/components/timeline.css b/addon/styles/components/timeline.css
index 2a0f987..b8f603e 100644
--- a/addon/styles/components/timeline.css
+++ b/addon/styles/components/timeline.css
@@ -77,7 +77,7 @@
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
-    gap: .5rem;
+    gap: 0.5rem;
     position: relative;
     overflow: visible;
     margin-bottom: 10px;
diff --git a/addon/styles/layout/legacy.css b/addon/styles/layout/legacy.css
index 7458fbb..c46c260 100644
--- a/addon/styles/layout/legacy.css
+++ b/addon/styles/layout/legacy.css
@@ -805,7 +805,7 @@ body[data-theme='dark'] li.iti__country > span {
 }
 
 .ui-input-info > svg {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
 }
 
 .ui-input-info.danger {
diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
index 77fd08a..c3e764e 100644
--- a/addon/styles/layout/next.css
+++ b/addon/styles/layout/next.css
@@ -1,10 +1,14 @@
 body {
-    height: 100%; 
-    min-height: 100%; 
+    height: 100%;
+    min-height: 100%;
     max-height: 100%;
 }
 
-body, html, button, a, * {
+body,
+html,
+button,
+a,
+* {
     cursor: default;
 }
 
@@ -76,8 +80,8 @@ body[data-theme='dark'] .next-mobile-navbar .next-mobile-navbar-tabs > .next-mob
     @apply text-gray-800 flex flex-col bg-white border-t-0;
     overflow: hidden;
     width: 100%;
-    height: 100%; 
-    min-height: 100%; 
+    height: 100%;
+    min-height: 100%;
     max-height: 100%;
     align-items: stretch;
     border-top: none;
@@ -1156,7 +1160,7 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
     border-right: 2px transparent solid;
 }
 
-.next-content-overlay.next-content-overlay-pos-right  > .next-content-overlay-panel-container > .next-content-overlay-panel + .gutter {
+.next-content-overlay.next-content-overlay-pos-right > .next-content-overlay-panel-container > .next-content-overlay-panel + .gutter {
     margin-left: -10px;
 }
 
@@ -1229,7 +1233,7 @@ body[data-theme='dark'] .next-sidebar .next-sidebar-panel-container > .next-side
 }
 
 .next-org-button-trigger:hover,
-.next-org-button-trigger[aria-expanded="true"],
+.next-org-button-trigger[aria-expanded='true'],
 .next-org-button-trigger.is-open {
     @apply bg-gray-700 bg-opacity-75 cursor-default;
 }
@@ -1418,7 +1422,12 @@ body[data-theme='dark'] .next-table-wrapper .tfoot-row > td {
     max-width: 100%;
 }
 
-.next-table-wrapper .tfoot-wrapper > .fleetbase-pagination > .fleetbase-pagination-meta-info-wrapper > .fleetbase-pagination-meta-info-paging-wrapper > .fleetbase-pagination-meta-info-paging-inner {
+.next-table-wrapper
+    .tfoot-wrapper
+    > .fleetbase-pagination
+    > .fleetbase-pagination-meta-info-wrapper
+    > .fleetbase-pagination-meta-info-paging-wrapper
+    > .fleetbase-pagination-meta-info-paging-inner {
     position: fixed;
     right: 0;
     bottom: 0;
@@ -1888,15 +1897,15 @@ input.order-list-overlay-search:focus {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: .65rem;
+    padding: 0.65rem;
     max-width: 96px;
     height: 135px;
     max-height: 160px;
     border: 1px #d1d5db solid;
-    border-radius: .5rem;
+    border-radius: 0.5rem;
 }
 
-body[data-theme="dark"] .x-fleetbase-file > .x-fleetbase-file-wrapper {
+body[data-theme='dark'] .x-fleetbase-file > .x-fleetbase-file-wrapper {
     border: 1px #374151 solid;
 }
 
@@ -1906,8 +1915,8 @@ body[data-theme="dark"] .x-fleetbase-file > .x-fleetbase-file-wrapper {
 
 .x-fleetbase-file > .x-fleetbase-file-wrapper .x-fleetbase-file-name {
     background-color: #3b82f6;
-    padding: .15rem;
-    border-radius: .15rem;
+    padding: 0.15rem;
+    border-radius: 0.15rem;
     text-align: center;
     font-size: 0.75rem;
     line-height: 1rem;
@@ -1921,7 +1930,7 @@ body[data-theme="dark"] .x-fleetbase-file > .x-fleetbase-file-wrapper {
     justify-content: center;
     width: 4rem;
     height: 4rem;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
 }
 
 .x-fleetbase-file > .x-fleetbase-file-wrapper .x-fleetbase-file-actions {
@@ -1940,4 +1949,4 @@ body[data-theme="dark"] .x-fleetbase-file > .x-fleetbase-file-wrapper {
 
 .x-fleetbase-file > .x-fleetbase-file-wrapper .x-fleetbase-file-actions #x-fleetbase-file-actions-dropdown .ember-basic-dropdown-trigger button.btn {
     padding: 0.15rem 0.65rem;
-}
\ No newline at end of file
+}
diff --git a/app/components/chat-tray.js b/app/components/chat-tray.js
new file mode 100644
index 0000000..72bea41
--- /dev/null
+++ b/app/components/chat-tray.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/chat-tray';
diff --git a/app/components/locale-selector-tray.js b/app/components/locale-selector-tray.js
new file mode 100644
index 0000000..3c596b2
--- /dev/null
+++ b/app/components/locale-selector-tray.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/locale-selector-tray';
diff --git a/tests/integration/components/chat-tray-test.js b/tests/integration/components/chat-tray-test.js
new file mode 100644
index 0000000..1b1533e
--- /dev/null
+++ b/tests/integration/components/chat-tray-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | chat-tray', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<ChatTray />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ChatTray>
+        template block text
+      </ChatTray>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/locale-selector-tray-test.js b/tests/integration/components/locale-selector-tray-test.js
new file mode 100644
index 0000000..ef7d087
--- /dev/null
+++ b/tests/integration/components/locale-selector-tray-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | locale-selector-tray', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<LocaleSelectorTray />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <LocaleSelectorTray>
+        template block text
+      </LocaleSelectorTray>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});