From 0b1bf60b7176abf943088a9680cad2dff2c6a084 Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Tue, 2 Apr 2024 15:17:31 +0800
Subject: [PATCH 01/24] created chat component

---
 addon/components/chat-container.hbs           |  6 +++++
 addon/components/chat-container.js            |  6 +++++
 addon/components/chat-window.hbs              | 16 ++++++++++++
 addon/components/chat-window.js               | 18 +++++++++++++
 app/components/chat-container.js              |  1 +
 app/components/chat-window.js                 |  1 +
 .../components/chat-container-test.js         | 26 +++++++++++++++++++
 .../components/chat-window-test.js            | 26 +++++++++++++++++++
 8 files changed, 100 insertions(+)
 create mode 100644 addon/components/chat-container.hbs
 create mode 100644 addon/components/chat-container.js
 create mode 100644 addon/components/chat-window.hbs
 create mode 100644 addon/components/chat-window.js
 create mode 100644 app/components/chat-container.js
 create mode 100644 app/components/chat-window.js
 create mode 100644 tests/integration/components/chat-container-test.js
 create mode 100644 tests/integration/components/chat-window-test.js

diff --git a/addon/components/chat-container.hbs b/addon/components/chat-container.hbs
new file mode 100644
index 0000000..8b1250c
--- /dev/null
+++ b/addon/components/chat-container.hbs
@@ -0,0 +1,6 @@
+<div class="absolute">
+    <a>Chat</a>
+{{#each this.chatChannels 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
new file mode 100644
index 0000000..3c2d9d8
--- /dev/null
+++ b/addon/components/chat-container.js
@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class ChatContainerComponent extends Component {
+    @tracked chatChannels = []
+}
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
new file mode 100644
index 0000000..729d6b0
--- /dev/null
+++ b/addon/components/chat-window.hbs
@@ -0,0 +1,16 @@
+<div class="click-to-copy" {{on "click" (fn this.copyToClipboard @value)}} ...attributes>
+    <span class="click-to-copy--value">
+        {{#if (has-block)}}
+            {{yield}}
+        {{else}}
+            {{n-a @value}}
+        {{/if}}
+    </span>
+    <span class="click-to-copy--tooltip">
+        {{#if this.isCopied}}
+            Copied!
+        {{else}}
+            Click to copy
+        {{/if}}
+    </span>
+</div>
\ No newline at end of file
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
new file mode 100644
index 0000000..978b54a
--- /dev/null
+++ b/addon/components/chat-window.js
@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+
+export class ChatWindowComponent extends Component {
+    @service socket;
+    @service chat;
+    @tracked channel;
+    constructor(owner, { chatChannel }) {
+      super(...arguments);
+      this.channel = chatChannel;
+      this.listen();
+    }
+  
+    listen() {
+      this.socket.listen(`chat.${this.channel.public_id}`, (event) => {
+        console.log('[chat event]', event);
+      });
+    }
+  }
\ No newline at end of file
diff --git a/app/components/chat-container.js b/app/components/chat-container.js
new file mode 100644
index 0000000..bda94a2
--- /dev/null
+++ b/app/components/chat-container.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/chat-container';
diff --git a/app/components/chat-window.js b/app/components/chat-window.js
new file mode 100644
index 0000000..e0b2abc
--- /dev/null
+++ b/app/components/chat-window.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/chat-window';
diff --git a/tests/integration/components/chat-container-test.js b/tests/integration/components/chat-container-test.js
new file mode 100644
index 0000000..5a7061b
--- /dev/null
+++ b/tests/integration/components/chat-container-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-container', 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`<ChatContainer />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ChatContainer>
+        template block text
+      </ChatContainer>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/chat-window-test.js b/tests/integration/components/chat-window-test.js
new file mode 100644
index 0000000..10654d6
--- /dev/null
+++ b/tests/integration/components/chat-window-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-window', 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`<ChatWindow />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ChatWindow>
+        template block text
+      </ChatWindow>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});

From f93c2c8238af32b205028eefa5bc050bdab6979f Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Tue, 2 Apr 2024 18:02:06 +0800
Subject: [PATCH 02/24] fixed did not appear button

---
 addon/components/chat-container.hbs |  8 ++++----
 addon/components/chat-container.js  | 17 ++++++++++++++++-
 addon/components/chat-window.hbs    | 17 ++---------------
 addon/components/chat-window.js     |  4 +++-
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/addon/components/chat-container.hbs b/addon/components/chat-container.hbs
index 8b1250c..18fc8ac 100644
--- a/addon/components/chat-container.hbs
+++ b/addon/components/chat-container.hbs
@@ -1,6 +1,6 @@
-<div class="absolute">
+<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|}}
-    <ChatWindow @channel={{chatChannel}} />
-{{/each}}
+    {{#each this.chatChannels 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 3c2d9d8..8a15ca9 100644
--- a/addon/components/chat-container.js
+++ b/addon/components/chat-container.js
@@ -1,6 +1,21 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class ChatContainerComponent extends Component {
-    @tracked chatChannels = []
+    @tracked chatChannels = [{
+        title: "test",
+        public_id: "test",
+        chats: [
+            {
+                owner: "Doljko",
+                message: "Hello"
+            }
+        ]
+    }];
+    @tracked isVisible = false;
+
+    @action openChatbox () {
+        this.isVisible = true
+    }
 }
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 729d6b0..37aa775 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,16 +1,3 @@
-<div class="click-to-copy" {{on "click" (fn this.copyToClipboard @value)}} ...attributes>
-    <span class="click-to-copy--value">
-        {{#if (has-block)}}
-            {{yield}}
-        {{else}}
-            {{n-a @value}}
-        {{/if}}
-    </span>
-    <span class="click-to-copy--tooltip">
-        {{#if this.isCopied}}
-            Copied!
-        {{else}}
-            Click to copy
-        {{/if}}
-    </span>
+<div class="absolute bottom-0 right-0">
+    
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 978b54a..9db9725 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -1,6 +1,8 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
-export class ChatWindowComponent extends Component {
+export default class ChatWindowComponent extends Component {
     @service socket;
     @service chat;
     @tracked channel;

From 340ae0ecfd0c5afd2257a038bb30a08a973e6531 Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Wed, 3 Apr 2024 13:28:08 +0800
Subject: [PATCH 03/24] removed function

---
 addon/components/chat-window.hbs |  8 ++++++--
 addon/components/chat-window.js  | 19 +------------------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 37aa775..cdcd7fb 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,3 +1,7 @@
-<div class="absolute bottom-0 right-0">
-    
+{{! 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" style="height: 400px; right: 54px; bottom:8px">Lanna</div>
+    <div class="inset-x-2.5">
+        <InputGroup />
+    </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 9db9725..0687977 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -1,20 +1,3 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 
-export default class ChatWindowComponent extends Component {
-    @service socket;
-    @service chat;
-    @tracked channel;
-    constructor(owner, { chatChannel }) {
-      super(...arguments);
-      this.channel = chatChannel;
-      this.listen();
-    }
-  
-    listen() {
-      this.socket.listen(`chat.${this.channel.public_id}`, (event) => {
-        console.log('[chat event]', event);
-      });
-    }
-  }
\ No newline at end of file
+export default class ChatWindowComponent extends Component {}

From 5b8cb16413b019357d7d3c87124648fd8366aa0e Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Wed, 3 Apr 2024 14:12:09 +0800
Subject: [PATCH 04/24] demo ui

---
 addon/components/chat-window.hbs | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index cdcd7fb..7fb614e 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,7 +1,15 @@
 {{! 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" style="height: 400px; right: 54px; bottom:8px">Lanna</div>
-    <div class="inset-x-2.5">
-        <InputGroup />
+    <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>
     </div>
 </div>
\ No newline at end of file

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 05/24] 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');
+    });
+});

From cd8e71954ad1c308bddaffaeb32c2474826b6d79 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 3 Apr 2024 18:15:30 +0800
Subject: [PATCH 06/24] make sure chat windows are properly spaced

---
 addon/styles/components/chat.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index acd573c..3c7fa6e 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -14,12 +14,12 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    margin-left: 2rem;
+    margin-left: calc(360px + 2rem);
     margin-bottom: 1rem;
     z-index: 999;
     display: flex;
     flex-direction: column;
-    width: 300px;
+    width: 360px;
     height: 400px;
     box-shadow:
         0 4px 6px -1px rgb(0 0 0 / 0.1),

From 27ea3e7ddb7289b6ff6831a85cfd80676c22c946 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 3 Apr 2024 18:40:29 +0800
Subject: [PATCH 07/24] small styling improvements, correct chat window
 positioning, fixed spacing of trays in header

---
 addon/components/chat-window.hbs   | 16 ++++++++++++----
 addon/components/chat-window.js    | 14 ++++++++++++++
 addon/components/layout/header.hbs |  4 ++--
 addon/styles/components/chat.css   | 19 ++++++++++++++++---
 4 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 354e24f..c54c417 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,4 +1,4 @@
-<div class="chat-window-container" ...attributes>
+<div class="chat-window-container" {{did-insert this.positionWindow}} ...attributes>
     <div class="chat-window-controls-container">
         <div class="chat-window-name">
             {{n-a this.channel.name "Untitled Chat"}}
@@ -14,16 +14,24 @@
     </div>
     <div class="chat-window-participants-container">
         {{#each this.channel.participants as |chatParticipant|}}
-            <div class="chat-window-participant-name">{{chatParticipant.name}}</div>
+            <div class="chat-window-participant-bubble-container">
+                <Image src={{chatParticipant.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{chatParticipant.name}} class="chat-window-participant-bubble" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{chatParticipant.name}} />
+                </Attach::Tooltip>
+            </div>
         {{/each}}
     </div>
-    <div class="chat-window-messages-container">
+    <div class="chat-window-messages-container" {{did-insert this.autoScrollMessagesWindow}}>
         <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}} />
+                        <Image src={{chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.sender.name}} />
                         <div class="chat-message-sender-name">{{chatMessage.sender.name}}</div>
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{chatMessage.sender.name}} />
+                        </Attach::Tooltip>
                     </div>
                     <div class="chat-message-content-bubble-container">
                         <div class="chat-message-content-bubble {{if (eq chatMessage.sender_uuid this.currentUser.id) "sender-bubble"}}">
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 39f4a2d..dd6e768 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -27,6 +27,20 @@ export default class ChatWindowComponent extends Component {
 
     @action addParticipant() {}
 
+    @action positionWindow(chatWindowElement) {
+        const chatWindowWidth = chatWindowElement.offsetWidth;
+        const multiplier = this.chat.openChannels.length - 1;
+        const marginRight = (chatWindowWidth + 20) * multiplier;
+        chatWindowElement.style.marginRight = `${marginRight}px`;
+    }
+
+    @action autoScrollMessagesWindow(messagesWindowContainerElement) {
+        messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
+        setInterval(() => {
+            messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
+        }, 1000);
+    }
+
     getSenderFromParticipants(channel) {
         const participants = channel.participants ?? [];
         console.log('#participants', participants);
diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
index 560af29..0971127 100644
--- a/addon/components/layout/header.hbs
+++ b/addon/components/layout/header.hbs
@@ -29,8 +29,8 @@
         <Layout::Header::LoadingIndicator />
         <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" />
+            <div class="flex-1 flex items-center pr-1 space-x-2">
+                <LocaleSelectorTray />
                 <NotificationTray @registerAPI={{@registerNotificationTrayApi}} @onClickNotification={{@onClickNotification}} />
                 <ChatTray />
             </div>
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index 3c7fa6e..985227e 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -137,7 +137,7 @@
 }
 
 .chat-window-participants-container {
-    padding: 0.25rem 0.5rem;
+    padding: 0rem 0.5rem 0.5rem 0.5rem;
     background-color: #d1d5db;
 }
 
@@ -155,6 +155,19 @@
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
+.chat-window-participants-container .chat-window-participant-bubble-container {
+    width: 30px;
+    display: flex;
+}
+
+.chat-window-participants-container .chat-window-participant-bubble {
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    border: 1px #000 solid;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
 .chat-window-messages-container {
     height: 280px;
     width: 100%;
@@ -174,7 +187,7 @@
 .chat-message-container {
     display: flex;
     flex-direction: row;
-    margin-top: 0.75rem;
+    padding: 0.7rem 0;
 }
 
 .chat-message-container .chat-message-content-bubble-container {
@@ -185,7 +198,7 @@
 
 .chat-message-container .chat-message-content-bubble {
     border-radius: 0.25rem;
-    padding: 0.5rem;
+    padding: 0.5rem 0.5rem 1rem 0.5rem;
     font-size: 0.7rem;
     background-color: #d1d5db;
     width: 100%;

From a27f5a1b5ea661be53afdd1a244381787c47fa9c Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Wed, 3 Apr 2024 18:48:09 +0800
Subject: [PATCH 08/24] wip: positioning windows after closing

---
 addon/components/chat-window.js    | 6 +++++-
 addon/components/layout/header.hbs | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index dd6e768..5bc471e 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -32,6 +32,11 @@ export default class ChatWindowComponent extends Component {
         const multiplier = this.chat.openChannels.length - 1;
         const marginRight = (chatWindowWidth + 20) * multiplier;
         chatWindowElement.style.marginRight = `${marginRight}px`;
+
+        // reposition when chat is closed
+        this.chat.on('chat.closed', () => {
+            this.positionWindow(chatWindowElement);
+        });
     }
 
     @action autoScrollMessagesWindow(messagesWindowContainerElement) {
@@ -43,7 +48,6 @@ export default class ChatWindowComponent extends Component {
 
     getSenderFromParticipants(channel) {
         const participants = channel.participants ?? [];
-        console.log('#participants', participants);
         const sender = participants.find((chatParticipant) => {
             return chatParticipant.user_uuid === this.currentUser.id;
         });
diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
index 0971127..f14932f 100644
--- a/addon/components/layout/header.hbs
+++ b/addon/components/layout/header.hbs
@@ -29,7 +29,7 @@
         <Layout::Header::LoadingIndicator />
         <div id="view-header-actions"></div>
         <div class="flex items-center justify-between">
-            <div class="flex-1 flex items-center pr-1 space-x-2">
+            <div class="flex-1 flex items-center pr-1 space-x-1">
                 <LocaleSelectorTray />
                 <NotificationTray @registerAPI={{@registerNotificationTrayApi}} @onClickNotification={{@onClickNotification}} />
                 <ChatTray />

From 6d1a594e97869afe35453d601ec495bb41465e93 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Thu, 4 Apr 2024 11:31:52 +0800
Subject: [PATCH 09/24] added `senderIsCreator` property to know who is the
 creator of the chat channel from chat window component

---
 addon/components/chat-window.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 5bc471e..5182ef5 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -8,12 +8,14 @@ export default class ChatWindowComponent extends Component {
     @service currentUser;
     @tracked channel;
     @tracked sender;
+    @tracked senderIsCreator;
     @tracked pendingMessageContent = '';
 
     constructor(owner, { channel }) {
         super(...arguments);
         this.channel = channel;
         this.sender = this.getSenderFromParticipants(channel);
+        this.senderIsCreator = this.sender ? this.sender.id === channel.created_by_uuid : false;
     }
 
     @action sendMessage() {

From 556ebe45ee8d3c3a8c9c0b6ebd18f43cb36e616d Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Thu, 4 Apr 2024 15:34:56 +0800
Subject: [PATCH 10/24] showed all users in organization

---
 addon/components/chat-window.hbs | 23 +++++++++++++++++++----
 addon/components/chat-window.js  | 17 ++++++++++++++++-
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index c54c417..6116717 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -4,9 +4,24 @@
             {{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>
+            <DropdownButton class="chat-window-button" @icon="user-plus" @size="sm" @iconPrefix="fas" @triggerClass="hidden md:flex" as |dd|>
+                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                    <div class="p-1">
+
+                        {{#each this.participants as |participant|}}
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addParticipant participant)}}>
+                                <div class="flex-1 flex flex-row items-center">
+                                    <div class="w-6">
+                                        <FaIcon @icon="desktop" />
+                                    </div>
+                                    <span>{{participant.name}}</span>
+                                </div>
+                            </a>
+                        {{/each}}
+
+                    </div>
+                </div>
+            </DropdownButton>
             <button type="button" class="chat-window-button chat-window-close-button" {{on "click" this.closeChannel}}>
                 <FaIcon @icon="times" @size="sm" />
             </button>
@@ -34,7 +49,7 @@
                         </Attach::Tooltip>
                     </div>
                     <div class="chat-message-content-bubble-container">
-                        <div class="chat-message-content-bubble {{if (eq chatMessage.sender_uuid this.currentUser.id) "sender-bubble"}}">
+                        <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>
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 5182ef5..3234c87 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -6,9 +6,12 @@ import { action } from '@ember/object';
 export default class ChatWindowComponent extends Component {
     @service chat;
     @service currentUser;
+    @service fetch;
+    @service store;
     @tracked channel;
     @tracked sender;
     @tracked senderIsCreator;
+    @tracked participants;
     @tracked pendingMessageContent = '';
 
     constructor(owner, { channel }) {
@@ -16,6 +19,7 @@ export default class ChatWindowComponent extends Component {
         this.channel = channel;
         this.sender = this.getSenderFromParticipants(channel);
         this.senderIsCreator = this.sender ? this.sender.id === channel.created_by_uuid : false;
+        this.participants = this.loadUsers()
     }
 
     @action sendMessage() {
@@ -27,7 +31,18 @@ export default class ChatWindowComponent extends Component {
         this.chat.closeChannel(this.channel);
     }
 
-    @action addParticipant() {}
+    @action loadUsers() {
+        return this.store.query('driver', { limit: 25});
+    }
+
+    @action addParticipant(participant){
+        console.log("Channels : ", this.channel, participant)
+        this.chat.addParticipant(this.channel, participant)
+    }
+
+    @action removeParticipant(participant) {
+        this.chat.removeParticipant(this.channel, participant);
+    }
 
     @action positionWindow(chatWindowElement) {
         const chatWindowWidth = chatWindowElement.offsetWidth;

From 87635ae91f709095a2e227aaac33b3b578d2dac4 Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Fri, 5 Apr 2024 13:48:53 +0800
Subject: [PATCH 11/24] removed channel

---
 addon/components/chat-tray.hbs | 17 +++++++++++++++--
 addon/components/chat-tray.js  | 16 ++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/addon/components/chat-tray.hbs b/addon/components/chat-tray.hbs
index 1c24f18..bd2ada0 100644
--- a/addon/components/chat-tray.hbs
+++ b/addon/components/chat-tray.hbs
@@ -1,5 +1,15 @@
 <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|>
+    <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" />
@@ -17,7 +27,10 @@
                     {{#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> --}}
+                            <div class="text-sm truncate">{{channel.lastMessage.content}}</div>
+                        </button>
+                        <button type="button" {{on "click" (fn this.removeChannel channel)}}>
+                            <FaIcon @icon="times" @size="sm" />
                         </button>
                     {{/each}}
                 </div>
diff --git a/addon/components/chat-tray.js b/addon/components/chat-tray.js
index 2bbcb35..ec24c9a 100644
--- a/addon/components/chat-tray.js
+++ b/addon/components/chat-tray.js
@@ -1,8 +1,7 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 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;
@@ -23,7 +22,16 @@ export default class ChatTrayComponent extends Component {
     }
 
     @action startChat() {
-        const chatChannelRecord = this.chat.createChatChannel();
         this.openChannel(chatChannelRecord);
     }
+
+    @action removeChannel(chatChannelRecord) {
+        this.chat.deleteChatChannel(chatChannelRecord);
+        this.chat.loadChannels();
+    }
+
+    @action updateChatChannel(chatChannelRecord) {
+        this.chat.deleteChatChannel(chatChannelRecord);
+        this.chat.loadChannels();
+    }
 }

From b25cc33e55d6e1cdafd629389c01502a5c86e268 Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Fri, 5 Apr 2024 15:29:54 +0800
Subject: [PATCH 12/24] added remove button

---
 addon/components/chat-window.hbs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 6116717..f504fb0 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -25,6 +25,9 @@
             <button type="button" class="chat-window-button chat-window-close-button" {{on "click" this.closeChannel}}>
                 <FaIcon @icon="times" @size="sm" />
             </button>
+            <button type="button" class="chat-window-button chat-window-close-button" {{on "click" this.removeParticipant}}>
+                <FaIcon @icon="trash" @size="sm" />
+            </button>
         </div>
     </div>
     <div class="chat-window-participants-container">

From 297ba88077ea7d07e809fdaa64da65b77ff8957d Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Fri, 5 Apr 2024 17:26:36 +0800
Subject: [PATCH 13/24] functional remove and add participant and socket
 listening for chat events

---
 addon/components/chat-container.js |  5 ---
 addon/components/chat-tray.hbs     | 16 ++++++----
 addon/components/chat-tray.js      | 21 +++++++++---
 addon/components/chat-window.hbs   | 15 ++++-----
 addon/components/chat-window.js    | 51 +++++++++++++++++++++++-------
 addon/styles/components/chat.css   | 34 ++++++++++++++++++++
 6 files changed, 106 insertions(+), 36 deletions(-)

diff --git a/addon/components/chat-container.js b/addon/components/chat-container.js
index 146800d..4530787 100644
--- a/addon/components/chat-container.js
+++ b/addon/components/chat-container.js
@@ -1,11 +1,6 @@
 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 {
     @service chat;
-    constructor(owner) {
-        super(...arguments);
-    }
 }
diff --git a/addon/components/chat-tray.hbs b/addon/components/chat-tray.hbs
index bd2ada0..3ea068c 100644
--- a/addon/components/chat-tray.hbs
+++ b/addon/components/chat-tray.hbs
@@ -25,13 +25,15 @@
                 </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>
-                        <button type="button" {{on "click" (fn this.removeChannel channel)}}>
-                            <FaIcon @icon="times" @size="sm" />
-                        </button>
+                        <div class="flex items-center">
+                            <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>
+                            <button type="button" {{on "click" (fn this.removeChannel channel)}}>
+                                <FaIcon @icon="times" @size="sm" />
+                            </button>
+                        </div>
                     {{/each}}
                 </div>
             </div>
diff --git a/addon/components/chat-tray.js b/addon/components/chat-tray.js
index ec24c9a..e3ab845 100644
--- a/addon/components/chat-tray.js
+++ b/addon/components/chat-tray.js
@@ -1,6 +1,6 @@
+import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 export default class ChatTrayComponent extends Component {
@@ -8,7 +8,7 @@ export default class ChatTrayComponent extends Component {
     @service socket;
     @tracked channels = [];
 
-    constructor(owner) {
+    constructor() {
         super(...arguments);
         this.chat.loadChannels.perform({
             withChannels: (channels) => {
@@ -19,19 +19,30 @@ export default class ChatTrayComponent extends Component {
 
     @action openChannel(chatChannelRecord) {
         this.chat.openChannel(chatChannelRecord);
+        this.reloadChannels();
     }
 
     @action startChat() {
-        this.openChannel(chatChannelRecord);
+        this.chat.createChatChannel('Untitled Chat').then((chatChannelRecord) => {
+            this.openChannel(chatChannelRecord);
+        });
     }
 
     @action removeChannel(chatChannelRecord) {
         this.chat.deleteChatChannel(chatChannelRecord);
-        this.chat.loadChannels();
+        this.reloadChannels();
     }
 
     @action updateChatChannel(chatChannelRecord) {
         this.chat.deleteChatChannel(chatChannelRecord);
-        this.chat.loadChannels();
+        this.reloadChannels();
+    }
+
+    reloadChannels() {
+        this.chat.loadChannels.perform({
+            withChannels: (channels) => {
+                this.channels = channels;
+            },
+        });
     }
 }
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index f504fb0..5b5ed22 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -7,14 +7,13 @@
             <DropdownButton class="chat-window-button" @icon="user-plus" @size="sm" @iconPrefix="fas" @triggerClass="hidden md:flex" as |dd|>
                 <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                     <div class="p-1">
-
-                        {{#each this.participants as |participant|}}
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addParticipant participant)}}>
+                        {{#each this.availableUsers as |user|}}
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addParticipant user)}}>
                                 <div class="flex-1 flex flex-row items-center">
                                     <div class="w-6">
-                                        <FaIcon @icon="desktop" />
+                                        <FaIcon @icon="user" />
                                     </div>
-                                    <span>{{participant.name}}</span>
+                                    <span>{{user.name}}</span>
                                 </div>
                             </a>
                         {{/each}}
@@ -25,9 +24,6 @@
             <button type="button" class="chat-window-button chat-window-close-button" {{on "click" this.closeChannel}}>
                 <FaIcon @icon="times" @size="sm" />
             </button>
-            <button type="button" class="chat-window-button chat-window-close-button" {{on "click" this.removeParticipant}}>
-                <FaIcon @icon="trash" @size="sm" />
-            </button>
         </div>
     </div>
     <div class="chat-window-participants-container">
@@ -37,6 +33,9 @@
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                     <InputInfo @text={{chatParticipant.name}} />
                 </Attach::Tooltip>
+                <button type="button" class="chat-window-remove-participant" {{on "click" (fn this.removeParticipant chatParticipant)}}>
+                    <FaIcon @icon="times" @size="sm" />
+                </button>
             </div>
         {{/each}}
     </div>
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 3234c87..7fcf0ae 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -2,24 +2,43 @@ 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 ChatWindowComponent extends Component {
     @service chat;
+    @service socket;
     @service currentUser;
+    @service modalsManager;
     @service fetch;
     @service store;
     @tracked channel;
     @tracked sender;
     @tracked senderIsCreator;
-    @tracked participants;
+    @tracked availableUsers = [];
     @tracked pendingMessageContent = '';
 
     constructor(owner, { channel }) {
         super(...arguments);
         this.channel = channel;
         this.sender = this.getSenderFromParticipants(channel);
-        this.senderIsCreator = this.sender ? this.sender.id === channel.created_by_uuid : false;
-        this.participants = this.loadUsers()
+        this.listenChatChannel(channel);
+        this.loadAvailableUsers.perform();
+    }
+
+    async listenChatChannel(chatChannelRecord) {
+        this.socket.listen(`chat.${chatChannelRecord.public_id}`, (socketEvent) => {
+            console.log('[chat event]', socketEvent);
+            switch (socketEvent.event) {
+                case 'chat.added_participant':
+                case 'chat.removed_participant':
+                    this.channel.reloadParticipants();
+                    break;
+                case 'chat_message.created':
+                    // this.channel.reloadParticipants();
+                    this.chat.insertMessageFromSocket(this.channel, socketEvent.data);
+                    break;
+            }
+        });
     }
 
     @action sendMessage() {
@@ -31,17 +50,20 @@ export default class ChatWindowComponent extends Component {
         this.chat.closeChannel(this.channel);
     }
 
-    @action loadUsers() {
-        return this.store.query('driver', { limit: 25});
-    }
-
-    @action addParticipant(participant){
-        console.log("Channels : ", this.channel, participant)
-        this.chat.addParticipant(this.channel, participant)
+    @action addParticipant(user) {
+        this.chat.addParticipant(this.channel, user);
     }
 
     @action removeParticipant(participant) {
-        this.chat.removeParticipant(this.channel, participant);
+        this.modalsManager.confirm({
+            title: `Are you sure you wish to remove this participant (${participant.name}) from the chat?`,
+            body: 'Proceeding remove this participant from the chat.',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.chat.removeParticipant(this.channel, participant);
+            },
+        });
     }
 
     @action positionWindow(chatWindowElement) {
@@ -63,12 +85,19 @@ export default class ChatWindowComponent extends Component {
         }, 1000);
     }
 
+    @task *loadAvailableUsers(params = {}) {
+        const users = yield this.store.query('user', params);
+        this.availableUsers = users;
+        return users;
+    }
+
     getSenderFromParticipants(channel) {
         const participants = channel.participants ?? [];
         const sender = participants.find((chatParticipant) => {
             return chatParticipant.user_uuid === this.currentUser.id;
         });
 
+        this.senderIsCreator = sender ? sender.id === channel.created_by_uuid : false;
         return sender;
     }
 }
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index 985227e..e883f17 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -139,6 +139,7 @@
 .chat-window-participants-container {
     padding: 0rem 0.5rem 0.5rem 0.5rem;
     background-color: #d1d5db;
+    display: flex;
 }
 
 .chat-window-participants-container > .chat-window-participant-name {
@@ -158,6 +159,39 @@
 .chat-window-participants-container .chat-window-participant-bubble-container {
     width: 30px;
     display: flex;
+    position: relative;
+}
+
+.chat-window-participants-container .chat-window-participant-bubble-container > .chat-window-remove-participant {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-right: -2px;
+    margin-top: -2px;
+    border-radius: 100%;
+    background-color: #ef4444;
+    color: #fff;
+    height: 14px;
+    width: 14px;
+    font-size: 12px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border: 1px #dc2626 solid;
+    box-shadow:
+        0 10px 15px -3px rgb(0 0 0 / 0.1),
+        0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.chat-window-participants-container .chat-window-participant-bubble-container > .chat-window-remove-participant:hover {
+    opacity: 0.5;
+}
+
+.chat-window-participants-container .chat-window-participant-bubble-container:hover > .chat-window-remove-participant {
+    opacity: 1;
 }
 
 .chat-window-participants-container .chat-window-participant-bubble {

From 5aa0c0d6216ed59ada06db93e00f318bbb6b975d Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Mon, 8 Apr 2024 09:43:52 +0800
Subject: [PATCH 14/24] chat window improvements

---
 addon/components/chat-tray.hbs                | 31 +++++-----
 addon/components/chat-window.hbs              | 21 ++++++-
 addon/components/chat-window.js               | 61 ++++++++++++++++++-
 addon/components/chat-window/attachment.hbs   |  1 +
 addon/components/chat-window/attachment.js    |  3 +
 addon/components/chat-window/feed.hbs         |  1 +
 addon/components/chat-window/feed.js          |  3 +
 addon/components/chat-window/log.hbs          |  1 +
 addon/components/chat-window/log.js           |  3 +
 addon/components/chat-window/message.hbs      |  1 +
 addon/components/chat-window/message.js       |  3 +
 .../chat-window/pending-attachment.hbs        | 35 +++++++++++
 .../chat-window/pending-attachment.js         | 43 +++++++++++++
 addon/styles/components/chat.css              | 27 +++++++-
 app/components/chat-window/attachment.js      |  1 +
 app/components/chat-window/feed.js            |  1 +
 app/components/chat-window/log.js             |  1 +
 app/components/chat-window/message.js         |  1 +
 .../chat-window/pending-attachment.js         |  1 +
 .../components/chat-window/attachment-test.js | 26 ++++++++
 .../components/chat-window/feed-test.js       | 26 ++++++++
 .../components/chat-window/log-test.js        | 26 ++++++++
 .../components/chat-window/message-test.js    | 26 ++++++++
 .../chat-window/pending-attachment-test.js    | 26 ++++++++
 24 files changed, 349 insertions(+), 20 deletions(-)
 create mode 100644 addon/components/chat-window/attachment.hbs
 create mode 100644 addon/components/chat-window/attachment.js
 create mode 100644 addon/components/chat-window/feed.hbs
 create mode 100644 addon/components/chat-window/feed.js
 create mode 100644 addon/components/chat-window/log.hbs
 create mode 100644 addon/components/chat-window/log.js
 create mode 100644 addon/components/chat-window/message.hbs
 create mode 100644 addon/components/chat-window/message.js
 create mode 100644 addon/components/chat-window/pending-attachment.hbs
 create mode 100644 addon/components/chat-window/pending-attachment.js
 create mode 100644 app/components/chat-window/attachment.js
 create mode 100644 app/components/chat-window/feed.js
 create mode 100644 app/components/chat-window/log.js
 create mode 100644 app/components/chat-window/message.js
 create mode 100644 app/components/chat-window/pending-attachment.js
 create mode 100644 tests/integration/components/chat-window/attachment-test.js
 create mode 100644 tests/integration/components/chat-window/feed-test.js
 create mode 100644 tests/integration/components/chat-window/log-test.js
 create mode 100644 tests/integration/components/chat-window/message-test.js
 create mode 100644 tests/integration/components/chat-window/pending-attachment-test.js

diff --git a/addon/components/chat-tray.hbs b/addon/components/chat-tray.hbs
index 3ea068c..dfb3dce 100644
--- a/addon/components/chat-tray.hbs
+++ b/addon/components/chat-tray.hbs
@@ -1,15 +1,5 @@
 <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|
-    >
+    <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" />
@@ -26,13 +16,20 @@
                 <div class="flex flex-col space-y-2 px-4 py-2">
                     {{#each this.channels as |channel|}}
                         <div class="flex items-center">
-                            <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>
-                            <button type="button" {{on "click" (fn this.removeChannel channel)}}>
-                                <FaIcon @icon="times" @size="sm" />
+                            <button type="button" class="flex flex-col rounded-lg border border-black text-white bg-gray-700 px-2 py-1 shadow-sm w-full" {{on "click" (fn this.openChannel channel)}}>
+                                <div class="font-bold mb-2">{{n-a channel.title "Untitled Chat"}}</div>
+                                <div class="flex flex-row items-center">
+                                    <div class="w-14">
+                                        <Image src={{channel.lastMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{channel.lastMessage.sender.name}} class="rounded-full shadow-sm w-12 h-12" />
+                                    </div>
+                                    <div class="text-sm truncate text-black">{{channel.lastMessage.content}}</div>
+                                </div>
                             </button>
+                            <div class="px-4">
+                                <button type="button" {{on "click" (fn this.removeChannel channel)}}>
+                                    <FaIcon @icon="times" @size="sm" />
+                                </button>
+                            </div>
                         </div>
                     {{/each}}
                 </div>
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 5b5ed22..884853a 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -61,11 +61,30 @@
         </div>
     </div>
     <div class="chat-window-input-container">
+        <div class="chat-window-attachments-container">
+            <div class="chat-window-attachment-input">
+                <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{this.onFileAddedHandler}}>
+                    <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
+                        <FaIcon @icon="paperclip" @size="sm" class="mr-2" />
+                        <span>Add Attachment</span>
+                    </a>
+                </FileUpload>
+                {{#if this.pendingAttachmentFile}}
+                    <div class="ml-2 flex items-center text-sm">
+                        <Spinner class="dark:text-blue-400 text-blue-900" />
+                        <span class="ml-2 text-xs dark:text-blue-400 text-blue-900">{{round this.pendingAttachmentFile.progress}}%</span>
+                    </div>
+                {{/if}}
+            </div>
+            {{#each this.pendingAttachmentFiles as |pendingFile|}}
+                <ChatWindow::PendingAttachment @file={{pendingFile}} @onRemove={{fn this.removePendingAttachmentFile pendingFile}} />
+            {{/each}}
+        </div>
         <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}} />
+            <Button @type="primary" @icon="paper-plane" @text="Send" @size="xs" @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 7fcf0ae..8242f26 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -16,6 +16,29 @@ export default class ChatWindowComponent extends Component {
     @tracked senderIsCreator;
     @tracked availableUsers = [];
     @tracked pendingMessageContent = '';
+    @tracked pendingAttachmentFile;
+    @tracked pendingAttachmentFiles = [];
+    acceptedFileTypes = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        'application/msword',
+        'application/pdf',
+        'application/x-pdf',
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+        'video/mp4',
+        'video/quicktime',
+        'video/x-msvideo',
+        'video/x-flv',
+        'video/x-ms-wmv',
+        'audio/mpeg',
+        'video/x-msvideo',
+        'application/zip',
+        'application/x-tar',
+    ];
 
     constructor(owner, { channel }) {
         super(...arguments);
@@ -34,13 +57,49 @@ export default class ChatWindowComponent extends Component {
                     this.channel.reloadParticipants();
                     break;
                 case 'chat_message.created':
-                    // this.channel.reloadParticipants();
                     this.chat.insertMessageFromSocket(this.channel, socketEvent.data);
                     break;
             }
         });
     }
 
+    @action onFileAddedHandler(file) {
+        // since we have dropzone and upload button within dropzone validate the file state first
+        // as this method can be called twice from both functions
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
+            return;
+        }
+
+        // set file for progress state
+        this.pendingAttachmentFile = file;
+
+        // Queue and upload immediatley
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/chat/${this.channel.id}/attachments`,
+                type: 'chat_attachment',
+                subject_uuid: this.channel.id,
+                subject_type: 'chat_channel',
+            },
+            (uploadedFile) => {
+                this.pendingAttachmentFiles.pushObject(uploadedFile);
+                this.pendingAttachmentFile = undefined;
+            },
+            () => {
+                // remove file from queue
+                if (file.queue && typeof file.queue.remove === 'function') {
+                    file.queue.remove(file);
+                }
+                this.pendingAttachmentFile = undefined;
+            }
+        );
+    }
+
+    @action removePendingAttachmentFile(pendingFile) {
+        this.pendingAttachmentFiles.removeObject(pendingFile);
+    }
+
     @action sendMessage() {
         this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent);
         this.pendingMessageContent = '';
diff --git a/addon/components/chat-window/attachment.hbs b/addon/components/chat-window/attachment.hbs
new file mode 100644
index 0000000..fb5c4b1
--- /dev/null
+++ b/addon/components/chat-window/attachment.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/addon/components/chat-window/attachment.js b/addon/components/chat-window/attachment.js
new file mode 100644
index 0000000..81dd870
--- /dev/null
+++ b/addon/components/chat-window/attachment.js
@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ChatWindowAttachmentComponent extends Component {}
diff --git a/addon/components/chat-window/feed.hbs b/addon/components/chat-window/feed.hbs
new file mode 100644
index 0000000..fb5c4b1
--- /dev/null
+++ b/addon/components/chat-window/feed.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/addon/components/chat-window/feed.js b/addon/components/chat-window/feed.js
new file mode 100644
index 0000000..4f73280
--- /dev/null
+++ b/addon/components/chat-window/feed.js
@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ChatWindowFeedComponent extends Component {}
diff --git a/addon/components/chat-window/log.hbs b/addon/components/chat-window/log.hbs
new file mode 100644
index 0000000..fb5c4b1
--- /dev/null
+++ b/addon/components/chat-window/log.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/addon/components/chat-window/log.js b/addon/components/chat-window/log.js
new file mode 100644
index 0000000..dfc184b
--- /dev/null
+++ b/addon/components/chat-window/log.js
@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ChatWindowLogComponent extends Component {}
diff --git a/addon/components/chat-window/message.hbs b/addon/components/chat-window/message.hbs
new file mode 100644
index 0000000..fb5c4b1
--- /dev/null
+++ b/addon/components/chat-window/message.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/addon/components/chat-window/message.js b/addon/components/chat-window/message.js
new file mode 100644
index 0000000..d754913
--- /dev/null
+++ b/addon/components/chat-window/message.js
@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ChatWindowMessageComponent extends Component {}
diff --git a/addon/components/chat-window/pending-attachment.hbs b/addon/components/chat-window/pending-attachment.hbs
new file mode 100644
index 0000000..ed06d8d
--- /dev/null
+++ b/addon/components/chat-window/pending-attachment.hbs
@@ -0,0 +1,35 @@
+<div class="chat-window-pending-attachment">
+    <div class="chat-window-pending-attachment-preview">
+        {{#if this.isImage}}
+            <Image src={{@file.url}} alt={{@file.original_filename}} class="x-fleetbase-file-preview rounded-md shadow-sm" />
+        {{else}}
+            <div class="x-fleetbase-file-preview">
+                <FileIcon @file={{@file}} @hideExtension={{true}} @iconSize="2xl" />
+            </div>
+        {{/if}}
+    </div>
+    <div class="chat-window-pending-attachment-name">
+        {{truncate-filename @file.original_filename}}
+    </div>
+    <div class="chat-window-pending-attachment-actions">
+        <DropdownButton @dropdownId="x-fleetbase-file-actions-dropdown" @icon="ellipsis" @iconSize="xs" @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
+            <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
+                <div class="px-1">
+                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                        {{t "component.file.dropdown-label"}}
+                    </div>
+                </div>
+                <div class="next-dd-menu-seperator"></div>
+                <div role="group" class="px-1">
+                    {{!-- template-lint-disable no-nested-interactive --}}
+                    <a href="javascript:;" role="menuitem" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownItemClick "onRemove" dd)}}>
+                        <span class="mr-1">
+                            <FaIcon @icon="trash" @prefix={{@dropdownButtonIconPrefix}} />
+                        </span>
+                        {{t "common.delete"}}
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/chat-window/pending-attachment.js b/addon/components/chat-window/pending-attachment.js
new file mode 100644
index 0000000..cadb3e0
--- /dev/null
+++ b/addon/components/chat-window/pending-attachment.js
@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ChatWindowPendingAttachmentComponent extends Component {
+    @tracked file;
+    @tracked isImage = false;
+
+    constructor(owner, { file }) {
+        super(...arguments);
+
+        this.file = file;
+        this.isImage = this.isImageFile(file);
+    }
+
+    @action onDropdownItemClick(action, dd) {
+        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof this.args[action] === 'function') {
+            this.args[action](this.file);
+        }
+    }
+
+    isImageFile(file) {
+        if (!file || (!file.original_filename && !file.url && !file.path)) {
+            return false;
+        }
+
+        const filename = file.original_filename || file.url || file.path;
+        const extensionMatch = filename.match(/\.(.+)$/);
+
+        if (!extensionMatch) {
+            return false;
+        }
+
+        const extension = extensionMatch[1].toLowerCase();
+        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp'];
+
+        return imageExtensions.includes(extension);
+    }
+}
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index e883f17..a27a40c 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -79,13 +79,25 @@
     box-shadow: none;
 }
 
-.chat-window-submit-container button.btn.btn-sm,
+.chat-window-attachment-input a.btn.btn-xs,
+.chat-window-attachment-input a,
+.chat-window-submit-container button.btn.btn-xs,
 .chat-window-submit-container button {
     background-color: #64748b;
     border: 1px solid #64748b;
     color: #f9fafb;
 }
 
+.chat-window-attachment-input a.btn.btn-xs:hover,
+.chat-window-attachment-input a:hover,
+.chat-window-submit-container button.btn.btn-xs:hover,
+.chat-window-submit-container button:hover {
+    background-color: #64748b;
+    border: 1px solid #64748b;
+    color: #f9fafb;
+    opacity: 0.5;
+}
+
 .chat-window-controls-container {
     display: flex;
     flex-direction: row;
@@ -275,3 +287,16 @@
     white-space: nowrap;
     color: #475569;
 }
+
+.chat-window-attachments-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    padding: 0.5rem;
+}
+
+.chat-window-attachment-input {
+    display: flex;
+    flex-direction: row;
+}
diff --git a/app/components/chat-window/attachment.js b/app/components/chat-window/attachment.js
new file mode 100644
index 0000000..e68074b
--- /dev/null
+++ b/app/components/chat-window/attachment.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/chat-window/attachment';
diff --git a/app/components/chat-window/feed.js b/app/components/chat-window/feed.js
new file mode 100644
index 0000000..97763e4
--- /dev/null
+++ b/app/components/chat-window/feed.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/chat-window/feed';
diff --git a/app/components/chat-window/log.js b/app/components/chat-window/log.js
new file mode 100644
index 0000000..22a0b4f
--- /dev/null
+++ b/app/components/chat-window/log.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/chat-window/log';
diff --git a/app/components/chat-window/message.js b/app/components/chat-window/message.js
new file mode 100644
index 0000000..8b81f66
--- /dev/null
+++ b/app/components/chat-window/message.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/chat-window/message';
diff --git a/app/components/chat-window/pending-attachment.js b/app/components/chat-window/pending-attachment.js
new file mode 100644
index 0000000..3b75d98
--- /dev/null
+++ b/app/components/chat-window/pending-attachment.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/chat-window/pending-attachment';
diff --git a/tests/integration/components/chat-window/attachment-test.js b/tests/integration/components/chat-window/attachment-test.js
new file mode 100644
index 0000000..ff826e1
--- /dev/null
+++ b/tests/integration/components/chat-window/attachment-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-window/attachment', 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`<ChatWindow::Attachment />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ChatWindow::Attachment>
+        template block text
+      </ChatWindow::Attachment>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/chat-window/feed-test.js b/tests/integration/components/chat-window/feed-test.js
new file mode 100644
index 0000000..316cf98
--- /dev/null
+++ b/tests/integration/components/chat-window/feed-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-window/feed', 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`<ChatWindow::Feed />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ChatWindow::Feed>
+        template block text
+      </ChatWindow::Feed>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/chat-window/log-test.js b/tests/integration/components/chat-window/log-test.js
new file mode 100644
index 0000000..f752732
--- /dev/null
+++ b/tests/integration/components/chat-window/log-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-window/log', 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`<ChatWindow::Log />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ChatWindow::Log>
+        template block text
+      </ChatWindow::Log>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/chat-window/message-test.js b/tests/integration/components/chat-window/message-test.js
new file mode 100644
index 0000000..602fac4
--- /dev/null
+++ b/tests/integration/components/chat-window/message-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-window/message', 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`<ChatWindow::Message />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ChatWindow::Message>
+        template block text
+      </ChatWindow::Message>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/chat-window/pending-attachment-test.js b/tests/integration/components/chat-window/pending-attachment-test.js
new file mode 100644
index 0000000..7d144d2
--- /dev/null
+++ b/tests/integration/components/chat-window/pending-attachment-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-window/pending-attachment', 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`<ChatWindow::PendingAttachment />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ChatWindow::PendingAttachment>
+        template block text
+      </ChatWindow::PendingAttachment>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});

From b02e485ce7afaa0ace85e4344f405f14437940ab Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Mon, 8 Apr 2024 10:53:10 +0800
Subject: [PATCH 15/24] ability to add attachments to messages, fixed chat-tray
 styling

---
 addon/components/chat-tray.hbs  | 26 ++++++++++++++------------
 addon/components/chat-window.js | 28 +++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/addon/components/chat-tray.hbs b/addon/components/chat-tray.hbs
index dfb3dce..5ad51e8 100644
--- a/addon/components/chat-tray.hbs
+++ b/addon/components/chat-tray.hbs
@@ -13,22 +13,24 @@
                 <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">
+                <div class="flex flex-col">
                     {{#each this.channels as |channel|}}
-                        <div class="flex items-center">
-                            <button type="button" class="flex flex-col rounded-lg border border-black text-white bg-gray-700 px-2 py-1 shadow-sm w-full" {{on "click" (fn this.openChannel channel)}}>
-                                <div class="font-bold mb-2">{{n-a channel.title "Untitled Chat"}}</div>
-                                <div class="flex flex-row items-center">
-                                    <div class="w-14">
-                                        <Image src={{channel.lastMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{channel.lastMessage.sender.name}} class="rounded-full shadow-sm w-12 h-12" />
+                        <div class="flex items-start px-4 py-3 border-t dark:border-gray-700 border-gray-200">
+                            <button type="button" class="flex flex-col flex-1 cursor-default" {{on "click" (fn this.openChannel channel)}}>
+                                <div class="font-bold mb-1">{{n-a channel.title "Untitled Chat"}}</div>
+                                <div class="flex flex-row">
+                                    <div class="w-10">
+                                        <Image src={{channel.last_message.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{channel.last_message.sender.name}} class="rounded-full shadow-sm w-8 h-8" />
                                     </div>
-                                    <div class="text-sm truncate text-black">{{channel.lastMessage.content}}</div>
+                                    <div class="text-sm truncate dark:text-gray-200 text-gray-900">{{channel.last_message.content}}</div>
                                 </div>
                             </button>
-                            <div class="px-4">
-                                <button type="button" {{on "click" (fn this.removeChannel channel)}}>
-                                    <FaIcon @icon="times" @size="sm" />
-                                </button>
+                            <div class="flex">
+                                <div class="btn-wrapper">
+                                    <button type="button" class="btn btn-danger btn-xs cursor-default" {{on "click" (fn this.removeChannel channel)}}>
+                                        <FaIcon @icon="times" @size="sm" />
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     {{/each}}
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 8242f26..046c3d0 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
+import { all } from 'rsvp';
 
 export default class ChatWindowComponent extends Component {
     @service chat;
@@ -101,10 +102,35 @@ export default class ChatWindowComponent extends Component {
     }
 
     @action sendMessage() {
-        this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent);
+        this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent).then((chatMessageRecord) => {
+            this.sendAttachments(chatMessageRecord);
+        });
         this.pendingMessageContent = '';
     }
 
+    @action sendAttachments(chatMessageRecord) {
+        // create file attachments
+        const attachments = this.pendingAttachmentFiles.map((file) => {
+            const attachment = this.store.createRecord('chat-attachment', {
+                chat_channel_uuid: this.channel.id,
+                file_uuid: file.id,
+                sender_uuid: this.sender.id,
+            });
+
+            if (chatMessageRecord) {
+                attachment.set('chat_message_uuid', chatMessageRecord.id);
+            }
+
+            return attachment;
+        });
+
+        // clear pending attachments
+        this.pendingAttachmentFiles = [];
+
+        // save attachments
+        return all(attachments.map((_) => _.save()));
+    }
+
     @action closeChannel() {
         this.chat.closeChannel(this.channel);
     }

From cfb0bd6d76e684350758e0d4b151c90607aa756d Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Mon, 8 Apr 2024 15:11:41 +0800
Subject: [PATCH 16/24] minor styling updates

---
 addon/components/chat-tray.hbs   | 12 ++++++------
 addon/components/chat-window.js  |  4 +++-
 addon/styles/components/chat.css | 12 ++++++++++++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/addon/components/chat-tray.hbs b/addon/components/chat-tray.hbs
index 5ad51e8..95d953b 100644
--- a/addon/components/chat-tray.hbs
+++ b/addon/components/chat-tray.hbs
@@ -15,19 +15,19 @@
                 </div>
                 <div class="flex flex-col">
                     {{#each this.channels as |channel|}}
-                        <div class="flex items-start px-4 py-3 border-t dark:border-gray-700 border-gray-200">
-                            <button type="button" class="flex flex-col flex-1 cursor-default" {{on "click" (fn this.openChannel channel)}}>
-                                <div class="font-bold mb-1">{{n-a channel.title "Untitled Chat"}}</div>
+                        <div class="chat-tray-channel-preview flex items-start px-4 py-3 border-t dark:border-gray-700 border-gray-200">
+                            <button type="button" class="chat-tray-channel-preview-btn flex flex-col flex-1 cursor-default" {{on "click" (fn this.openChannel channel)}}>
+                                <div class="chat-tray-channel-preview-title font-bold mb-1">{{n-a channel.title "Untitled Chat"}}</div>
                                 <div class="flex flex-row">
                                     <div class="w-10">
-                                        <Image src={{channel.last_message.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{channel.last_message.sender.name}} class="rounded-full shadow-sm w-8 h-8" />
+                                        <Image src={{channel.last_message.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{channel.last_message.sender.name}} class="chat-tray-channel-preview-avatar rounded-full shadow-sm w-8 h-8" />
                                     </div>
-                                    <div class="text-sm truncate dark:text-gray-200 text-gray-900">{{channel.last_message.content}}</div>
+                                    <div class="chat-tray-channel-preview-last-message text-sm truncate dark:text-gray-200 text-gray-900">{{channel.last_message.content}}</div>
                                 </div>
                             </button>
                             <div class="flex">
                                 <div class="btn-wrapper">
-                                    <button type="button" class="btn btn-danger btn-xs cursor-default" {{on "click" (fn this.removeChannel channel)}}>
+                                    <button type="button" class="chat-tray-channel-preview-close-channel-btn btn btn-danger btn-xs cursor-default" {{on "click" (fn this.removeChannel channel)}}>
                                         <FaIcon @icon="times" @size="sm" />
                                     </button>
                                 </div>
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index 046c3d0..ce67b41 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -128,7 +128,9 @@ export default class ChatWindowComponent extends Component {
         this.pendingAttachmentFiles = [];
 
         // save attachments
-        return all(attachments.map((_) => _.save()));
+        return all(attachments.map((_) => _.save())).then((response) => {
+            console.log(response);
+        });
     }
 
     @action closeChannel() {
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index a27a40c..52f4a7e 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -300,3 +300,15 @@
     display: flex;
     flex-direction: row;
 }
+
+.chat-tray-channel-preview:hover {
+    opacity: .5;
+}
+
+.chat-tray-channel-preview .chat-tray-channel-preview-last-message {
+    width: 285px;
+    max-width: 285px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
\ No newline at end of file

From 240c5768cfa5a7fca4f272f7cbe680c2115678e0 Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Mon, 8 Apr 2024 17:37:46 +0800
Subject: [PATCH 17/24] fix ui

---
 addon/styles/components/chat.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index 52f4a7e..a31a9c7 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -223,6 +223,16 @@
     overflow-y: scroll;
 }
 
+.chat-window-pending-attachment {
+    display: flex;
+    margin-top: 8px;
+}
+
+.chat-window-pending-attachment .chat-window-pending-attachment-name {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
 .chat-window-messages {
     height: 100%;
     width: 100%;
@@ -302,7 +312,7 @@
 }
 
 .chat-tray-channel-preview:hover {
-    opacity: .5;
+    opacity: 0.5;
 }
 
 .chat-tray-channel-preview .chat-tray-channel-preview-last-message {

From bc9874234fb0294bf7ba476e709c1230be22242d Mon Sep 17 00:00:00 2001
From: Doljinsuren Enkhbayar <doljko927@gmail.com>
Date: Mon, 8 Apr 2024 20:03:16 +0800
Subject: [PATCH 18/24] fix attachment file ui

---
 addon/components/chat-window.hbs | 27 ++++++++++++++++++++++++++-
 addon/styles/components/chat.css | 25 +++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 884853a..e673282 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -50,6 +50,25 @@
                             <InputInfo @text={{chatMessage.sender.name}} />
                         </Attach::Tooltip>
                     </div>
+                    <div class="file-attachment">
+                        {{#if chatMessage.chat_channels.feed.data.file_uuid}}
+                            <a href="{{chatMessage.file_uuid}}" target="_blank" class="text-blue-500 hover:underline" rel="noopener noreferrer">{{chatMessage.fileName}}</a>
+                            <div class="file-icon">
+                                {{#if (startsWith chatMessage.fileType "image/")}}
+                                    <img src="{{chatMessage.url}}" alt="Attachment" class="max-w-xs max-h-xs" />
+                                {{else if (startsWith chatMessage.fileType "video/")}}
+                                    {{! template-lint-disable require-media-caption }}
+                                    <video controls class="max-w-xs max-h-xs">
+                                        <source src="{{chatMessage.url}}" type="{{chatMessage.fileType}}" />
+                                        Your browser does not support the video tag.
+                                    </video>
+                                {{else}}
+                                    <i class="fas fa-file text-gray-500"></i>
+                                {{/if}}
+                            </div>
+
+                        {{/if}}
+                    </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}}
@@ -63,7 +82,13 @@
     <div class="chat-window-input-container">
         <div class="chat-window-attachments-container">
             <div class="chat-window-attachment-input">
-                <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{this.onFileAddedHandler}}>
+                <FileUpload
+                    @name={{this.customField.name}}
+                    @for={{this.customField.name}}
+                    @accept={{join "," this.acceptedFileTypes}}
+                    @multiple={{true}}
+                    @onFileAdded={{this.onFileAddedHandler}}
+                >
                     <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
                         <FaIcon @icon="paperclip" @size="sm" class="mr-2" />
                         <span>Add Attachment</span>
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index a31a9c7..9f72573 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -252,6 +252,31 @@
     padding: 0 0.35rem;
 }
 
+.chat-message-container .file-attachment{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    background-color: #144ac7;
+
+}
+
+  .file-attachment a {
+    color: #1a73e8; 
+    text-decoration: none;
+    margin-right: 10px;
+  }
+  
+  .file-icon {
+    display: flex;
+    align-items: center;
+  }
+  
+  .file-icon i {
+    color: #999; 
+    font-size: 20px;
+    margin-right: 5px;
+  }
+  
 .chat-message-container .chat-message-content-bubble {
     border-radius: 0.25rem;
     padding: 0.5rem 0.5rem 1rem 0.5rem;

From 84c1a90c164d71b6787348d4c1e2bff9f20be138 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Thu, 11 Apr 2024 18:22:01 +0800
Subject: [PATCH 19/24] now can render custom icon component from menuItem from
 universe registry

---
 addon/components/layout/header.hbs | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/addon/components/layout/header.hbs b/addon/components/layout/header.hbs
index f08f247..cbc999c 100644
--- a/addon/components/layout/header.hbs
+++ b/addon/components/layout/header.hbs
@@ -11,7 +11,11 @@
                 {{#each @menuItems as |menuItem|}}
                     <LinkToExternal @route={{menuItem.route}} id={{concat (dasherize menuItem.route) "-header-button"}} class="next-view-header-item truncate {{menuItem.class}}" role="menuitem">
                         <div class="w-6">
-                            <FaIcon @icon={{menuItem.icon}} @size="sm" />
+                            {{#if menuItem.iconComponent}}
+                                {{component menuItem.iconComponent options=menuItem.iconComponentOptions}}
+                            {{else}}
+                                <FaIcon @icon={{menuItem.icon}} @prefix={{menuItem.iconPrefix}} @size="sm" />
+                            {{/if}}
                         </div>
                         <div>
                             <span>{{menuItem.title}}</span>
@@ -20,8 +24,7 @@
                 {{/each}}
             </div>
         {{/unless}}
-        <div id="view-header-left-content-a">
-        </div>
+        <div id="view-header-left-content-a"></div>
         {{yield}}
         <div id="view-header-left-content-b"></div>
     </div>
@@ -29,8 +32,10 @@
         <Layout::Header::LoadingIndicator />
         <div id="view-header-actions"></div>
         <div class="flex items-center justify-between">
-            <div class="flex-1 flex items-center pr-1">
+            <div class="flex-1 flex items-center pr-1 space-x-1">
+                <LocaleSelectorTray />
                 <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|>

From 9ce981b187decdad5068114e8a1143c36233cb35 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Fri, 12 Apr 2024 19:10:51 +0800
Subject: [PATCH 20/24] fixed chat styling and scroll behaviour, implemented
 chat feed and uses socket for messages, logs and attachments, several chat
 functionality improvements

---
 addon/components/chat-container.js            |   4 +
 addon/components/chat-tray.js                 |   1 +
 addon/components/chat-window.hbs              |  40 +-
 addon/components/chat-window.js               |  50 +--
 addon/components/chat-window/attachment.hbs   |  16 +-
 addon/components/chat-window/attachment.js    |  46 ++-
 addon/components/chat-window/feed.hbs         |   8 +-
 addon/components/chat-window/log.hbs          |   9 +-
 addon/components/chat-window/log.js           |   9 +-
 addon/components/chat-window/message.hbs      |  23 +-
 addon/components/chat-window/message.js       |   9 +-
 .../chat-window/pending-attachment.hbs        |  26 +-
 .../chat-window/pending-attachment.js         |  10 +-
 addon/styles/components/chat.css              | 347 ++++++++++++++++--
 14 files changed, 478 insertions(+), 120 deletions(-)

diff --git a/addon/components/chat-container.js b/addon/components/chat-container.js
index 4530787..f81ecf3 100644
--- a/addon/components/chat-container.js
+++ b/addon/components/chat-container.js
@@ -3,4 +3,8 @@ import { inject as service } from '@ember/service';
 
 export default class ChatContainerComponent extends Component {
     @service chat;
+    constructor() {
+        super(...arguments);
+        this.chat.restoreOpenedChats();
+    }
 }
diff --git a/addon/components/chat-tray.js b/addon/components/chat-tray.js
index e3ab845..a82668f 100644
--- a/addon/components/chat-tray.js
+++ b/addon/components/chat-tray.js
@@ -29,6 +29,7 @@ export default class ChatTrayComponent extends Component {
     }
 
     @action removeChannel(chatChannelRecord) {
+        this.chat.closeChannel(chatChannelRecord);
         this.chat.deleteChatChannel(chatChannelRecord);
         this.reloadChannels();
     }
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 884853a..2b3b1fe 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,4 +1,4 @@
-<div class="chat-window-container" {{did-insert this.positionWindow}} ...attributes>
+<div class="chat-window-container {{if this.pendingAttachmentFiles "has-attachments"}}" {{did-insert this.positionWindow}} ...attributes>
     <div class="chat-window-controls-container">
         <div class="chat-window-name">
             {{n-a this.channel.name "Untitled Chat"}}
@@ -11,7 +11,7 @@
                             <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addParticipant user)}}>
                                 <div class="flex-1 flex flex-row items-center">
                                     <div class="w-6">
-                                        <FaIcon @icon="user" />
+                                        <FaIcon @icon="user" @size="xs" />
                                     </div>
                                     <span>{{user.name}}</span>
                                 </div>
@@ -39,31 +39,15 @@
             </div>
         {{/each}}
     </div>
-    <div class="chat-window-messages-container" {{did-insert this.autoScrollMessagesWindow}}>
+    <div class="chat-window-messages-container" {{did-insert this.scrollMessageWindowBottom}}>
         <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.sender.name}} />
-                        <div class="chat-message-sender-name">{{chatMessage.sender.name}}</div>
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                            <InputInfo @text={{chatMessage.sender.name}} />
-                        </Attach::Tooltip>
-                    </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}}
+            <ChatWindow::Feed @channel={{this.channel}} />
         </div>
     </div>
-    <div class="chat-window-input-container">
+    <div class="chat-window-input-container {{if this.pendingAttachmentFiles "has-attachments"}}">
         <div class="chat-window-attachments-container">
             <div class="chat-window-attachment-input">
-                <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{this.onFileAddedHandler}}>
+                <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{perform this.uploadAttachmentFile}}>
                     <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
                         <FaIcon @icon="paperclip" @size="sm" class="mr-2" />
                         <span>Add Attachment</span>
@@ -76,15 +60,19 @@
                     </div>
                 {{/if}}
             </div>
-            {{#each this.pendingAttachmentFiles as |pendingFile|}}
-                <ChatWindow::PendingAttachment @file={{pendingFile}} @onRemove={{fn this.removePendingAttachmentFile pendingFile}} />
-            {{/each}}
+            {{#if this.pendingAttachmentFiles}}
+                <div class="chat-window-pending-attachments-container">
+                    {{#each this.pendingAttachmentFiles as |pendingFile|}}
+                        <ChatWindow::PendingAttachment @file={{pendingFile}} @onRemove={{fn this.removePendingAttachmentFile pendingFile}} />
+                    {{/each}}
+                </div>
+            {{/if}}
         </div>
         <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" @size="xs" @onClick={{this.sendMessage}} />
+            <Button @type="primary" @icon="paper-plane" @text="Send" @size="xs" @onClick={{perform this.sendMessage}} @disabled={{not this.pendingMessageContent}} @isLoading={{and (not this.sendMessage.isIdle) (not this.uploadAttachmentFile.isIdle)}} />
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index ce67b41..d2c29f8 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -58,13 +58,19 @@ export default class ChatWindowComponent extends Component {
                     this.channel.reloadParticipants();
                     break;
                 case 'chat_message.created':
-                    this.chat.insertMessageFromSocket(this.channel, socketEvent.data);
+                    this.chat.insertChatMessageFromSocket(this.channel, socketEvent.data);
+                    break;
+                case 'chat_log.created':
+                    this.chat.insertChatLogFromSocket(this.channel, socketEvent.data);
+                    break;
+                case 'chat_attachment.created':
+                    this.chat.insertChatAttachmentFromSocket(this.channel, socketEvent.data);
                     break;
             }
         });
     }
 
-    @action onFileAddedHandler(file) {
+    @task *uploadAttachmentFile(file) {
         // since we have dropzone and upload button within dropzone validate the file state first
         // as this method can be called twice from both functions
         if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
@@ -75,7 +81,7 @@ export default class ChatWindowComponent extends Component {
         this.pendingAttachmentFile = file;
 
         // Queue and upload immediatley
-        this.fetch.uploadFile.perform(
+        yield this.fetch.uploadFile.perform(
             file,
             {
                 path: `uploads/chat/${this.channel.id}/attachments`,
@@ -101,36 +107,11 @@ export default class ChatWindowComponent extends Component {
         this.pendingAttachmentFiles.removeObject(pendingFile);
     }
 
-    @action sendMessage() {
-        this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent).then((chatMessageRecord) => {
-            this.sendAttachments(chatMessageRecord);
-        });
+    @task *sendMessage() {
+        const attachments = this.pendingAttachmentFiles.map((file) => file.id);
+        yield this.chat.sendMessage(this.channel, this.sender, this.pendingMessageContent, attachments);
         this.pendingMessageContent = '';
-    }
-
-    @action sendAttachments(chatMessageRecord) {
-        // create file attachments
-        const attachments = this.pendingAttachmentFiles.map((file) => {
-            const attachment = this.store.createRecord('chat-attachment', {
-                chat_channel_uuid: this.channel.id,
-                file_uuid: file.id,
-                sender_uuid: this.sender.id,
-            });
-
-            if (chatMessageRecord) {
-                attachment.set('chat_message_uuid', chatMessageRecord.id);
-            }
-
-            return attachment;
-        });
-
-        // clear pending attachments
         this.pendingAttachmentFiles = [];
-
-        // save attachments
-        return all(attachments.map((_) => _.save())).then((response) => {
-            console.log(response);
-        });
     }
 
     @action closeChannel() {
@@ -156,7 +137,7 @@ export default class ChatWindowComponent extends Component {
     @action positionWindow(chatWindowElement) {
         const chatWindowWidth = chatWindowElement.offsetWidth;
         const multiplier = this.chat.openChannels.length - 1;
-        const marginRight = (chatWindowWidth + 20) * multiplier;
+        const marginRight = multiplier === 0 ? 16 : (chatWindowWidth + 16) * multiplier;
         chatWindowElement.style.marginRight = `${marginRight}px`;
 
         // reposition when chat is closed
@@ -165,11 +146,8 @@ export default class ChatWindowComponent extends Component {
         });
     }
 
-    @action autoScrollMessagesWindow(messagesWindowContainerElement) {
+    @action scrollMessageWindowBottom(messagesWindowContainerElement) {
         messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
-        setInterval(() => {
-            messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
-        }, 1000);
     }
 
     @task *loadAvailableUsers(params = {}) {
diff --git a/addon/components/chat-window/attachment.hbs b/addon/components/chat-window/attachment.hbs
index fb5c4b1..69f17d2 100644
--- a/addon/components/chat-window/attachment.hbs
+++ b/addon/components/chat-window/attachment.hbs
@@ -1 +1,15 @@
-{{yield}}
\ No newline at end of file
+<a href="#" class="chat-attachment-container" {{on "click" this.download}}>
+    {{#if this.chatAttachment.isImage}}
+        <Image src={{this.chatAttachment.url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{this.chatAttachment.filename}} class="chat-attachment-image-preview" />
+    {{else}}
+        <div class="chat-attachment-file-preview">
+            <div class="file-icon file-icon-{{this.extension}}">
+                <FaIcon @icon={{this.icon}} />
+            </div>
+            <div class="chat-attachment-file-preview-filename">{{this.chatAttachment.filename}}</div>
+        </div>
+    {{/if}}
+    <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+        <InputInfo @text="Click to download attachment" />
+    </Attach::Tooltip>
+</a>
\ No newline at end of file
diff --git a/addon/components/chat-window/attachment.js b/addon/components/chat-window/attachment.js
index 81dd870..d353f01 100644
--- a/addon/components/chat-window/attachment.js
+++ b/addon/components/chat-window/attachment.js
@@ -1,3 +1,47 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
-export default class ChatWindowAttachmentComponent extends Component {}
+export default class ChatWindowAttachmentComponent extends Component {
+    @tracked chatAttachment;
+    @tracked icon;
+
+    constructor(owner, { record }) {
+        super(...arguments);
+        this.chatAttachment = record;
+        this.icon = this.getIcon(record);
+    }
+
+    @action download() {
+        return this.chatAttachment.download();
+    }
+
+    getExtension(chatAttachment) {
+        const filename = chatAttachment.filename;
+        const extensionMatch = filename.match(/\.(.+)$/);
+        return extensionMatch ? extensionMatch[1] : null;
+    }
+
+    getIcon(chatAttachment) {
+        this.extension = this.getExtension(chatAttachment);
+
+        return getWithDefault(
+            {
+                xlsx: 'file-excel',
+                xls: 'file-excel',
+                xlsb: 'file-excel',
+                xlsm: 'file-excel',
+                csv: 'file-spreadsheet',
+                tsv: 'file-spreadsheet',
+                docx: 'file-word',
+                docm: 'file-word',
+                pdf: 'file-pdf',
+                ppt: 'file-powerpoint',
+                pptx: 'file-powerpoint',
+            },
+            this.extension,
+            'file-alt'
+        );
+    }
+}
diff --git a/addon/components/chat-window/feed.hbs b/addon/components/chat-window/feed.hbs
index fb5c4b1..baaea44 100644
--- a/addon/components/chat-window/feed.hbs
+++ b/addon/components/chat-window/feed.hbs
@@ -1 +1,7 @@
-{{yield}}
\ No newline at end of file
+{{#if (has-block)}}
+    {{yield @channel.feed}}
+{{else}}
+    {{#each @channel.feed as |item|}}
+        {{component (concat "chat-window/" item.type) record=item.record}}
+    {{/each}}
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/chat-window/log.hbs b/addon/components/chat-window/log.hbs
index fb5c4b1..9a4736c 100644
--- a/addon/components/chat-window/log.hbs
+++ b/addon/components/chat-window/log.hbs
@@ -1 +1,8 @@
-{{yield}}
\ No newline at end of file
+<div class="chat-log-container">
+    <div class="chat-log-content-bubble-container">
+        <div class="chat-log-content-bubble">
+            {{this.chatLog.resolved_content}}
+        </div>
+        <div class="chat-log-created-at">{{this.chatLog.createdAgo}}</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/chat-window/log.js b/addon/components/chat-window/log.js
index dfc184b..6ac5139 100644
--- a/addon/components/chat-window/log.js
+++ b/addon/components/chat-window/log.js
@@ -1,3 +1,10 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-export default class ChatWindowLogComponent extends Component {}
+export default class ChatWindowLogComponent extends Component {
+    @tracked chatLog;
+    constructor(owner, { record }) {
+        super(...arguments);
+        this.chatLog = record;
+    }
+}
diff --git a/addon/components/chat-window/message.hbs b/addon/components/chat-window/message.hbs
index fb5c4b1..b07f142 100644
--- a/addon/components/chat-window/message.hbs
+++ b/addon/components/chat-window/message.hbs
@@ -1 +1,22 @@
-{{yield}}
\ No newline at end of file
+<div class="chat-message-container {{if this.chatMessage.attachments "has-attachments"}}">
+    <div class="chat-message-sender-bubble">
+        <Image src={{this.chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.chatMessage.sender.name}} />
+        <div class="chat-message-sender-name">{{this.chatMessage.sender.name}}</div>
+        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+            <InputInfo @text={{this.chatMessage.sender.name}} />
+        </Attach::Tooltip>
+    </div>
+    <div class="chat-message-content-bubble-container {{if this.chatMessage.attachments "has-attachments"}}">
+        {{#if this.chatMessage.attachments}}
+            <div class="chat-message-attachments-container">
+                {{#each this.chatMessage.attachments as |attachment|}}
+                    <ChatWindow::Attachment @record={{attachment}} />
+                {{/each}}
+            </div>
+        {{/if}}
+        <div class="chat-message-content-bubble {{if (eq this.chatMessage.sender_uuid this.currentUser.id) 'sender-bubble'}}">
+            {{this.chatMessage.content}}
+        </div>
+        <div class="chat-message-created-at">{{this.chatMessage.createdAgo}}</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/chat-window/message.js b/addon/components/chat-window/message.js
index d754913..ca5fe1c 100644
--- a/addon/components/chat-window/message.js
+++ b/addon/components/chat-window/message.js
@@ -1,3 +1,10 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-export default class ChatWindowMessageComponent extends Component {}
+export default class ChatWindowMessageComponent extends Component {
+    @tracked chatMessage;
+    constructor(owner, { record }) {
+        super(...arguments);
+        this.chatMessage = record;
+    }
+}
diff --git a/addon/components/chat-window/pending-attachment.hbs b/addon/components/chat-window/pending-attachment.hbs
index ed06d8d..ff3f589 100644
--- a/addon/components/chat-window/pending-attachment.hbs
+++ b/addon/components/chat-window/pending-attachment.hbs
@@ -1,7 +1,7 @@
 <div class="chat-window-pending-attachment">
     <div class="chat-window-pending-attachment-preview">
         {{#if this.isImage}}
-            <Image src={{@file.url}} alt={{@file.original_filename}} class="x-fleetbase-file-preview rounded-md shadow-sm" />
+            <Image src={{@file.url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{@file.original_filename}} class="x-fleetbase-file-preview rounded-md shadow-sm" />
         {{else}}
             <div class="x-fleetbase-file-preview">
                 <FileIcon @file={{@file}} @hideExtension={{true}} @iconSize="2xl" />
@@ -12,24 +12,10 @@
         {{truncate-filename @file.original_filename}}
     </div>
     <div class="chat-window-pending-attachment-actions">
-        <DropdownButton @dropdownId="x-fleetbase-file-actions-dropdown" @icon="ellipsis" @iconSize="xs" @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
-            <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
-                <div class="px-1">
-                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
-                        {{t "component.file.dropdown-label"}}
-                    </div>
-                </div>
-                <div class="next-dd-menu-seperator"></div>
-                <div role="group" class="px-1">
-                    {{!-- template-lint-disable no-nested-interactive --}}
-                    <a href="javascript:;" role="menuitem" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownItemClick "onRemove" dd)}}>
-                        <span class="mr-1">
-                            <FaIcon @icon="trash" @prefix={{@dropdownButtonIconPrefix}} />
-                        </span>
-                        {{t "common.delete"}}
-                    </a>
-                </div>
-            </div>
-        </DropdownButton>
+        <a href="javascript:;" {{on "click" this.remove}}>
+            <span class="mr-1">
+                <FaIcon @icon="trash" class="text-red-500" />
+            </span>
+        </a>
     </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-window/pending-attachment.js b/addon/components/chat-window/pending-attachment.js
index cadb3e0..ef79feb 100644
--- a/addon/components/chat-window/pending-attachment.js
+++ b/addon/components/chat-window/pending-attachment.js
@@ -13,13 +13,9 @@ export default class ChatWindowPendingAttachmentComponent extends Component {
         this.isImage = this.isImageFile(file);
     }
 
-    @action onDropdownItemClick(action, dd) {
-        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof this.args[action] === 'function') {
-            this.args[action](this.file);
+    @action remove() {
+        if (typeof this.args.onRemove === 'function') {
+            this.args.onRemove(this.file);
         }
     }
 
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index 52f4a7e..5df994f 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -1,6 +1,21 @@
 .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;
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 0.1),
+        0 2px 4px -2px rgb(0 0 0 / 0.1);
+    margin-top: 0.75rem;
+    background-color: #f9fafb;
+    border: 1px #e5e7eb solid;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     width: 400px;
+    @apply space-y-2;
+}
+
+body[data-theme='dark'] .chat-tray-panel-container {
+    background-color: #111827;
+    border-color: #374151;
 }
 
 .chat-container {
@@ -20,44 +35,72 @@
     display: flex;
     flex-direction: column;
     width: 360px;
-    height: 400px;
+    height: 483px;
+    min-height: 483px;
+    max-height: 553px;
     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;
+    border: 1px #d1d5db solid;
+    border-radius: 1rem;
+    background-color: #f9fafb;
 }
 
-.chat-window-container:first-child {
-    margin-right: 2rem;
+.chat-window-container.has-attachments {
+    min-height: 513px;
+}
+
+body[data-theme='dark'] .chat-window-container {
+    background-color: #1f2937;
+    border-color: #374151;
+}
+
+.chat-window-container a,
+.chat-window-container button {
+    cursor: default !important;
 }
 
 .chat-window-input-container {
     display: flex;
     flex-direction: column;
-    background-color: #d1d5db;
+    background-color: #f9fafb;
     border-bottom-left-radius: 1rem;
     border-bottom-right-radius: 1rem;
 }
 
+body[data-theme='dark'] .chat-window-input-container {
+    background-color: #1f2937;
+}
+
 .chat-window-input-box {
     flex: 1;
     width: 100%;
-    background-color: #d1d5db;
+    background-color: #f9fafb;
+}
+
+body[data-theme='dark'] .chat-window-input-box {
+    background-color: #1f2937;
 }
 
 .chat-window-input {
+    height: 80px;
+    max-height: 80px;
+    min-height: 80px;
     flex: 1;
-    border-radius: 1rem;
     padding: 0.6rem;
-    background-color: #d1d5db;
+    font-size: 0.75rem;
+    background-color: #f9fafb;
     width: 100%;
     border: 0;
     outline: none;
     box-shadow: none;
 }
 
+body[data-theme='dark'] .chat-window-input {
+    background-color: #1f2937;
+    color: #f9fafb;
+}
+
 .chat-window-input:focus {
     border: 0;
     outline: none;
@@ -88,6 +131,15 @@
     color: #f9fafb;
 }
 
+body[data-theme='dark'] .chat-window-attachment-input a.btn.btn-xs,
+body[data-theme='dark'] .chat-window-attachment-input a,
+body[data-theme='dark'] .chat-window-submit-container button.btn.btn-xs,
+body[data-theme='dark'] .chat-window-submit-container button {
+    background-color: #374151;
+    color: #f3f4f6;
+    border-color: #111827;
+}
+
 .chat-window-attachment-input a.btn.btn-xs:hover,
 .chat-window-attachment-input a:hover,
 .chat-window-submit-container button.btn.btn-xs:hover,
@@ -98,16 +150,30 @@
     opacity: 0.5;
 }
 
+body[data-theme='dark'] .chat-window-attachment-input a.btn.btn-xs:hover,
+body[data-theme='dark'] .chat-window-attachment-input a:hover,
+body[data-theme='dark'] .chat-window-submit-container button.btn.btn-xs:hover,
+body[data-theme='dark'] .chat-window-submit-container button:hover {
+    background-color: #374151;
+    color: #f3f4f6;
+    border-color: #111827;
+    opacity: 0.5;
+}
+
 .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;
+    background-color: #f9fafb;
     padding: 0.5rem 0.5rem;
 }
 
+body[data-theme='dark'] .chat-window-controls-container {
+    background-color: #1f2937;
+}
+
 .chat-window-controls-container .chat-window-name {
     display: flex;
     align-items: center;
@@ -118,6 +184,11 @@
     flex: 1;
 }
 
+body[data-theme='dark'] .chat-window-controls-container,
+body[data-theme='dark'] .chat-window-controls-container .chat-window-name {
+    color: #fff;
+}
+
 .chat-window-controls-container .chat-window-controls {
     display: flex;
     flex-direction: row;
@@ -129,15 +200,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #9ca3af;
-    border: 1px solid #9ca3af;
-    border-radius: 0.25rem;
+    background-color: #e5e7eb;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
     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);
+    cursor: default;
+}
+
+.chat-window-controls-container .chat-window-controls .chat-window-button svg {
+    font-size: 0.5rem;
 }
 
 .chat-window-controls-container .chat-window-controls .chat-window-button:hover {
@@ -145,15 +221,21 @@
 }
 
 .chat-window-controls-container .chat-window-controls .chat-window-close-button {
-    color: #dc2626;
+    background-color: #b91c1c;
+    border-color: #dc2626;
+    color: #fee2e2;
 }
 
 .chat-window-participants-container {
     padding: 0rem 0.5rem 0.5rem 0.5rem;
-    background-color: #d1d5db;
+    background-color: #f9fafb;
     display: flex;
 }
 
+body[data-theme='dark'] .chat-window-participants-container {
+    background-color: #1f2937;
+}
+
 .chat-window-participants-container > .chat-window-participant-name {
     border: 1px #2563eb solid;
     color: #e5e7eb;
@@ -215,14 +297,22 @@
 }
 
 .chat-window-messages-container {
-    height: 280px;
+    height: 230px;
+    max-height: 230px;
+    min-height: 230px;
     width: 100%;
     background-color: #fff;
-    border-bottom: 1px #94a3b8 solid;
-    border-top: 1px #94a3b8 solid;
+    border-bottom: 1px #e5e7eb solid;
+    border-top: 1px #e5e7eb solid;
     overflow-y: scroll;
 }
 
+body[data-theme='dark'] .chat-window-messages-container {
+    border-color: #374151;
+    background-color: #323b49;
+    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
 .chat-window-messages {
     height: 100%;
     width: 100%;
@@ -230,6 +320,129 @@
     padding: 0.25rem 0;
 }
 
+body[data-theme='dark'] .chat-window-messages {
+    background-color: #323b49;
+    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
+.chat-window-pending-attachments-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: start;
+    padding-top: 0.5rem;
+    width: 100%;
+    height: 30px;
+}
+
+.chat-window-pending-attachment {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: start;
+    border-radius: 0.25rem;
+    font-size: 0.7rem;
+    background-color: #f9fafb;
+    border: 1px #fff solid;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    color: #0f172a;
+    position: relative;
+    padding: 0.1rem 0.25rem;
+    opacity: 0.9;
+    margin-right: 0.15rem;
+    max-height: 26px;
+}
+
+body[data-theme='dark'] .chat-window-pending-attachment {
+    background-color: #374151;
+    border-color: #1f2937;
+    color: #f3f4f6;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-preview {
+    display: flex;
+    align-items: center;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-preview > .x-fleetbase-file-preview > .file-icon svg {
+    font-size: 0.75rem;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-preview > .flb--img.x-fleetbase-file-preview {
+    height: 20px;
+    border-radius: 0.05rem;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-name {
+    font-size: 0.55rem;
+    display: flex;
+    align-items: center;
+    margin-left: 0.25rem;
+    height: 20px;
+    max-height: 20px;
+    width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chat-window-pending-attachment > .chat-window-pending-attachment-actions {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    font-size: 0.65rem;
+}
+
+.chat-log-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: 0.7rem;
+    padding-bottom: 0.15rem;
+}
+
+.chat-log-container .chat-log-content-bubble-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    width: 100%;
+    padding: 0 0.35rem;
+}
+
+.chat-log-container .chat-log-content-bubble {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.7rem;
+    background-color: #f9fafb;
+    width: 100%;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    color: #0f172a;
+    text-align: center;
+}
+
+body[data-theme='dark'] .chat-log-container .chat-log-content-bubble {
+    background-color: #374151;
+    color: #f9fafb;
+    border: 1px solid rgb(31 41 55 / 70%);
+}
+
+.chat-log-container .chat-log-created-at {
+    font-size: 0.5rem;
+    margin-top: 0.2rem;
+    color: #475569;
+}
+
+body[data-theme='dark'] .chat-log-container .chat-log-created-at {
+    color: #f9fafb;
+}
+
 .chat-message-container {
     display: flex;
     flex-direction: row;
@@ -242,22 +455,96 @@
     padding: 0 0.35rem;
 }
 
-.chat-message-container .chat-message-content-bubble {
+.chat-message-container .chat-message-content-bubble-container.has-attachments .chat-message-content-bubble {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container {
+    display: flex;
+    flex-direction: row;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    padding: 0.5rem 0.5rem 0rem 0.5rem;
+    background-color: rgb(229 231 235 / 65%);
+    width: 100%;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+body[data-theme='dark'] .chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container {
+    background-color: #1f2937;
+    color: #f9fafb;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-container {
+    margin-right: 0.15rem;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-image-preview {
+    height: 45px;
+    width: 50px;
+    border-radius: 0.25rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    border: 1px #fff solid;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-file-preview {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: start;
+    align-self: start;
+    background-color: #fff;
+    height: 45px;
+    width: 50px;
+    padding: 0.15rem;
+    border-radius: 0.25rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    border: 1px #fff solid;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-file-preview:hover,
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-file-preview:focus {
+    border-color: #3b82f6;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-attachments-container .chat-attachment-file-preview .chat-attachment-file-preview-filename {
+    font-size: 0.45rem;
+    color: #000;
+    width: 50px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.chat-message-container .chat-message-content-bubble-container .chat-message-content-bubble {
     border-radius: 0.25rem;
     padding: 0.5rem 0.5rem 1rem 0.5rem;
     font-size: 0.7rem;
-    background-color: #d1d5db;
+    background-color: rgb(229 231 235 / 65%);
     width: 100%;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     color: #0f172a;
 }
 
+body[data-theme='dark'] .chat-message-container .chat-message-content-bubble-container .chat-message-content-bubble {
+    background-color: #1f2937;
+    color: #f9fafb;
+}
+
 .chat-message-container .chat-message-created-at {
     font-size: 0.5rem;
     margin-top: 0.2rem;
     color: #475569;
 }
 
+body[data-theme='dark'] .chat-message-container .chat-message-created-at {
+    color: #f9fafb;
+}
+
 .chat-message-container .chat-message-sender-bubble {
     width: 60px;
     display: flex;
@@ -274,10 +561,16 @@
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
+body[data-theme='dark'] .chat-message-container .chat-message-sender-bubble > img {
+    border-color: #1f2937;
+}
+
 .chat-message-container .chat-message-sender-bubble > .chat-message-sender-name {
     margin-top: 0.15rem;
     display: flex;
     align-items: center;
+    justify-content: center;
+    text-align: center;
     width: 50px;
     max-width: 50px;
     max-width: 60px;
@@ -288,6 +581,10 @@
     color: #475569;
 }
 
+body[data-theme='dark'] .chat-message-container .chat-message-sender-bubble > .chat-message-sender-name {
+    color: #fff;
+}
+
 .chat-window-attachments-container {
     display: flex;
     flex-direction: column;
@@ -302,13 +599,15 @@
 }
 
 .chat-tray-channel-preview:hover {
-    opacity: .5;
+    opacity: 0.5;
 }
 
 .chat-tray-channel-preview .chat-tray-channel-preview-last-message {
+    display: flex;
     width: 285px;
     max-width: 285px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
\ No newline at end of file
+    text-align: left;
+}

From ab78a93f8ff5f992a5b0c66eb5a76229ad5360b2 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 13 Apr 2024 19:12:33 +0800
Subject: [PATCH 21/24] chat components are functional and ready for release v1

---
 addon/components/badge.hbs                    |  16 +-
 addon/components/chat-tray.hbs                |  42 +++--
 addon/components/chat-tray.js                 | 170 +++++++++++++++++-
 addon/components/chat-window.hbs              | 140 ++++++++-------
 addon/components/chat-window.js               | 139 +++++++++++---
 addon/components/chat-window/feed.hbs         |  16 +-
 addon/components/chat-window/feed.js          |  12 +-
 addon/components/chat-window/message.hbs      |  18 +-
 addon/components/chat-window/message.js       |  61 ++++++-
 addon/components/modals/edit-chat-name.hbs    |   5 +
 addon/components/notification-tray.js         |   2 +-
 addon/components/scrollable.js                |   2 +-
 addon/helpers/can-remove-chat-participant.js  |  16 ++
 addon/helpers/noop.js                         |   3 +-
 addon/styles/components/badge.css             |  20 ++-
 addon/styles/components/chat.css              |  96 +++++++++-
 addon/styles/components/notification-tray.css |   4 +-
 addon/styles/layout/legacy.css                |  13 +-
 addon/utils/noop.js                           |   1 +
 app/components/modals/edit-chat-name.js       |   1 +
 app/helpers/can-remove-chat-participant.js    |   1 +
 app/utils/noop.js                             |   1 +
 assets/sounds/message-notification-sound.mp3  | Bin 0 -> 46937 bytes
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |   2 +-
 .../components/modals/edit-chat-name-test.js  |  26 +++
 .../can-remove-chat-participant-test.js       |  17 ++
 tests/unit/utils/noop-test.js                 |  10 ++
 28 files changed, 688 insertions(+), 148 deletions(-)
 create mode 100644 addon/components/modals/edit-chat-name.hbs
 create mode 100644 addon/helpers/can-remove-chat-participant.js
 create mode 100644 addon/utils/noop.js
 create mode 100644 app/components/modals/edit-chat-name.js
 create mode 100644 app/helpers/can-remove-chat-participant.js
 create mode 100644 app/utils/noop.js
 create mode 100644 assets/sounds/message-notification-sound.mp3
 create mode 100644 tests/integration/components/modals/edit-chat-name-test.js
 create mode 100644 tests/integration/helpers/can-remove-chat-participant-test.js
 create mode 100644 tests/unit/utils/noop-test.js

diff --git a/addon/components/badge.hbs b/addon/components/badge.hbs
index a6f9192..bc528c7 100644
--- a/addon/components/badge.hbs
+++ b/addon/components/badge.hbs
@@ -1,16 +1,18 @@
 <div class="status-badge {{safe-dasherize (or @type @status)}}-status-badge" ...attributes>
-    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
-        <svg class="mr-1.5 h-2 w-2 {{if @hideStatusDot "hidden"}}" fill="currentColor" viewBox="0 0 8 8">
+    <span class="inline-flex items-center {{unless @roundedFull "px-2 py-0.5 rounded" "badge-rounded-full"}} text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
+        <svg class="{{unless @hideText "mr-1.5"}} h-2 w-2 {{if @hideStatusDot "hidden"}}" fill="currentColor" viewBox="0 0 8 8">
             <circle cx="4" cy="4" r="3"></circle>
         </svg>
         {{#if (has-block)}}
             {{yield @status}}
         {{else}}
-            {{#if @disableHumanize}}
-                {{@status}}
-            {{else}}
-                {{safe-humanize @status}}
-            {{/if}}
+            {{#unless @hideText}}
+                {{#if @disableHumanize}}
+                    {{@status}}
+                {{else}}
+                    {{safe-humanize @status}}
+                {{/if}}
+            {{/unless}}
         {{/if}}
         {{#if @helpText}}
             <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top" }}>
diff --git a/addon/components/chat-tray.hbs b/addon/components/chat-tray.hbs
index 95d953b..9ae4641 100644
--- a/addon/components/chat-tray.hbs
+++ b/addon/components/chat-tray.hbs
@@ -1,36 +1,50 @@
 <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|>
+    <BasicDropdown @registerAPI={{this.registerAPI}} @defaultClass={{@wrapperClass}} @onOpen={{this.unlockAudio}} @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'}}">
+            <div class="next-org-button-trigger chat-tray-icon 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}} --}}
+                {{#if this.unreadCount}}
+                    <div class="chat-tray-unread-notifications-badge">{{this.unreadCount}}</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}} />
+                    <Button @type="primary" @text="Start Chat" @icon="paper-plane" @onClick={{dropdown-fn dd this.startChat}} />
                 </div>
                 <div class="flex flex-col">
                     {{#each this.channels as |channel|}}
                         <div class="chat-tray-channel-preview flex items-start px-4 py-3 border-t dark:border-gray-700 border-gray-200">
-                            <button type="button" class="chat-tray-channel-preview-btn flex flex-col flex-1 cursor-default" {{on "click" (fn this.openChannel channel)}}>
-                                <div class="chat-tray-channel-preview-title font-bold mb-1">{{n-a channel.title "Untitled Chat"}}</div>
+                            <button type="button" class="chat-tray-channel-preview-btn flex flex-col flex-1 cursor-default" {{on "click" (dropdown-fn dd this.openChannel channel)}}>
+                                <div class="flex items-center mb-2">
+                                    <div class="chat-tray-channel-preview-title flex self-start items-center font-bold">{{n-a channel.title "Untitled Chat"}}</div>
+                                    {{#if channel.unread_count}}
+                                        <Badge @status="info" @hideStatusDot={{true}} class="flex self-start ml-2">{{pluralize channel.unread_count "Unread"}}</Badge>
+                                    {{/if}}
+                                </div>
                                 <div class="flex flex-row">
                                     <div class="w-10">
                                         <Image src={{channel.last_message.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{channel.last_message.sender.name}} class="chat-tray-channel-preview-avatar rounded-full shadow-sm w-8 h-8" />
                                     </div>
-                                    <div class="chat-tray-channel-preview-last-message text-sm truncate dark:text-gray-200 text-gray-900">{{channel.last_message.content}}</div>
+                                    <div class="chat-tray-channel-preview-last-message text-sm truncate dark:text-gray-200 text-gray-900">
+                                        <span>{{channel.last_message.content}}</span>
+                                        {{#if channel.last_message.attachments}}
+                                            <div class="chat-tray-channel-preview-last-message-attachments">
+                                                <FaIcon @icon="paperclip" @size="sm" class="mr-0.5" /> {{pluralize channel.last_message.attachments.length "Attachment"}}
+                                            </div>
+                                        {{/if}}
+                                    </div>
                                 </div>
                             </button>
                             <div class="flex">
-                                <div class="btn-wrapper">
-                                    <button type="button" class="chat-tray-channel-preview-close-channel-btn btn btn-danger btn-xs cursor-default" {{on "click" (fn this.removeChannel channel)}}>
-                                        <FaIcon @icon="times" @size="sm" />
-                                    </button>
-                                </div>
+                                {{#if (eq channel.created_by_uuid this.currentUser.id)}}
+                                    <div class="btn-wrapper">
+                                        <button type="button" class="chat-tray-channel-preview-close-channel-btn btn btn-danger btn-xs cursor-default" {{on "click" (dropdown-fn dd this.removeChannel channel)}}>
+                                            <FaIcon @icon="times" @size="sm" />
+                                        </button>
+                                    </div>
+                                {{/if}}
                             </div>
                         </div>
                     {{/each}}
diff --git a/addon/components/chat-tray.js b/addon/components/chat-tray.js
index a82668f..8bafac4 100644
--- a/addon/components/chat-tray.js
+++ b/addon/components/chat-tray.js
@@ -1,25 +1,104 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
+import { isNone } from '@ember/utils';
+import { task } from 'ember-concurrency';
+import noop from '../utils/noop';
 
 export default class ChatTrayComponent extends Component {
     @service chat;
     @service socket;
+    @service fetch;
+    @service store;
+    @service modalsManager;
+    @service currentUser;
     @tracked channels = [];
+    @tracked unreadCount = 0;
+    @tracked notificationSound = new Audio('/sounds/message-notification-sound.mp3');
 
     constructor() {
         super(...arguments);
         this.chat.loadChannels.perform({
             withChannels: (channels) => {
                 this.channels = channels;
+                this.countUnread(channels);
+                this.listenAllChatChannels(channels);
+                this.listenUserChannel();
             },
         });
     }
 
+    willDestroy() {
+        this.chat.off('chat.feed_updated', this.reloadChannelWithDelay.bind(this));
+        super.willDestroy(...arguments);
+    }
+
+    listenAllChatChannels(channels) {
+        channels.forEach((chatChannelRecord) => {
+            this.listenChatChannel(chatChannelRecord);
+        });
+    }
+
+    async listenUserChannel() {
+        this.socket.listen(`user.${this.currentUser.id}`, (socketEvent) => {
+            const { event, data } = socketEvent;
+            switch (event) {
+                case 'chat.participant_added':
+                case 'chat_participant.created':
+                    this.reloadChannels();
+                    break;
+                case 'chat.participant_removed':
+                case 'chat_participant.deleted':
+                    this.reloadChannels();
+                    this.closeChannelIfRemovedFromParticipants(data);
+                    break;
+                case 'chat_channel.created':
+                    this.reloadChannels({ relisten: true });
+                    this.openNewChannelAsParticipant(data);
+                    break;
+                case 'chat_channel.deleted':
+                    this.reloadChannels({ relisten: true });
+                    this.closeChannelIfOpen(data);
+                    break;
+            }
+        });
+    }
+
+    async listenChatChannel(chatChannelRecord) {
+        this.socket.listen(`chat.${chatChannelRecord.public_id}`, (socketEvent) => {
+            const { event, data } = socketEvent;
+            switch (event) {
+                case 'chat_message.created':
+                    this.reloadChannels();
+                    this.playSoundForIncomingMessage(chatChannelRecord, data);
+                    break;
+                case 'chat.added_participant':
+                    this.reloadChannels();
+                    break;
+                case 'chat_participant.deleted':
+                case 'chat.removed_participant':
+                    this.reloadChannels();
+                    this.closeChannelIfRemovedFromParticipants(data);
+                    break;
+                case 'chat_channel.created':
+                    this.reloadChannels({ relisten: true });
+                    this.openNewChannelAsParticipant(data);
+                    break;
+                case 'chat_channel.deleted':
+                    this.reloadChannels({ relisten: true });
+                    this.closeChannelIfOpen(data);
+                    break;
+                case 'chat_receipt.created':
+                    this.reloadChannels({ relisten: true });
+                    break;
+            }
+        });
+    }
+
     @action openChannel(chatChannelRecord) {
         this.chat.openChannel(chatChannelRecord);
-        this.reloadChannels();
+        this.reloadChannels({ relisten: true });
     }
 
     @action startChat() {
@@ -29,9 +108,17 @@ export default class ChatTrayComponent extends Component {
     }
 
     @action removeChannel(chatChannelRecord) {
-        this.chat.closeChannel(chatChannelRecord);
-        this.chat.deleteChatChannel(chatChannelRecord);
-        this.reloadChannels();
+        this.modalsManager.confirm({
+            title: `Are you sure you wish to end this chat (${chatChannelRecord.title})?`,
+            body: 'Once this chat is ended, it will no longer be accessible for anyone.',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                this.chat.closeChannel(chatChannelRecord);
+                this.chat.deleteChatChannel(chatChannelRecord);
+                return this.reloadChannels();
+            },
+        });
     }
 
     @action updateChatChannel(chatChannelRecord) {
@@ -39,11 +126,80 @@ export default class ChatTrayComponent extends Component {
         this.reloadChannels();
     }
 
-    reloadChannels() {
-        this.chat.loadChannels.perform({
+    @action async unlockAudio() {
+        this.reloadChannels();
+        try {
+            this.notificationSound.play().catch(noop);
+            this.notificationSound.pause();
+            this.notificationSound.currentTime = 0;
+        } catch (error) {
+            noop();
+        }
+    }
+
+    @task *getUnreadCount() {
+        const { unreadCount } = yield this.fetch.get('chat-channels/unread-count');
+        if (!isNone(unreadCount)) {
+            this.unreadCount = unreadCount;
+        }
+    }
+
+    playSoundForIncomingMessage(chatChannelRecord, data) {
+        const sender = this.getSenderFromParticipants(chatChannelRecord);
+        const isNotSender = sender ? sender.id !== data.sender_uuid : false;
+        if (isNotSender) {
+            this.notificationSound.play();
+        }
+    }
+
+    getSenderFromParticipants(channel) {
+        const participants = channel.participants ?? [];
+        return participants.find((chatParticipant) => {
+            return chatParticipant.user_uuid === this.currentUser.id;
+        });
+    }
+
+    countUnread(channels) {
+        this.unreadCount = channels.reduce((total, channel) => total + channel.unread_count, 0);
+    }
+
+    reloadChannels(options = {}) {
+        return this.chat.loadChannels.perform({
             withChannels: (channels) => {
                 this.channels = channels;
+                this.countUnread(channels);
+                if (options && options.relisten === true) {
+                    this.listenAllChatChannels(channels);
+                }
             },
         });
     }
+
+    openNewChannelAsParticipant(data) {
+        const normalized = this.store.normalize('chat-channel', data);
+        const channel = this.store.push(normalized);
+        if (channel && this.getSenderFromParticipants(channel)) {
+            this.notificationSound.play();
+            this.openChannel(channel);
+        }
+    }
+
+    closeChannelIfOpen(data) {
+        const normalized = this.store.normalize('chat-channel', data);
+        const channel = this.store.push(normalized);
+        if (channel) {
+            this.chat.closeChannel(channel);
+        }
+    }
+
+    closeChannelIfRemovedFromParticipants(data) {
+        const normalized = this.store.normalize('chat-participant', data);
+        const removedChatParticipant = this.store.push(normalized);
+        if (removedChatParticipant) {
+            const channel = this.store.peekRecord('chat-channel', removedChatParticipant.chat_channel_uuid);
+            if (channel) {
+                this.chat.closeChannel(channel);
+            }
+        }
+    }
 }
diff --git a/addon/components/chat-window.hbs b/addon/components/chat-window.hbs
index 2b3b1fe..fe5a071 100644
--- a/addon/components/chat-window.hbs
+++ b/addon/components/chat-window.hbs
@@ -1,78 +1,84 @@
-<div class="chat-window-container {{if this.pendingAttachmentFiles "has-attachments"}}" {{did-insert this.positionWindow}} ...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">
-            <DropdownButton class="chat-window-button" @icon="user-plus" @size="sm" @iconPrefix="fas" @triggerClass="hidden md:flex" as |dd|>
-                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
-                    <div class="p-1">
-                        {{#each this.availableUsers as |user|}}
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addParticipant user)}}>
-                                <div class="flex-1 flex flex-row items-center">
-                                    <div class="w-6">
-                                        <FaIcon @icon="user" @size="xs" />
+{{#if this.isVisible}}
+    <div id={{concat "channel-" this.channel.id "-window"}} class="chat-window-container {{if this.pendingAttachmentFiles "has-attachments"}}" {{did-insert this.positionWindow}} ...attributes>
+        <div class="chat-window-controls-container">
+            <div class="chat-window-name">
+                {{n-a this.channel.name "Untitled Chat"}}
+                <a href="#" {{on "click" this.editChatName}} class="ml-2 hover:opacity-50">
+                    <FaIcon @icon="pencil" @size="xs" />
+                </a>
+            </div>
+            <div id={{concat "channel-" this.channel.id "-controls"}} class="chat-window-controls">
+                <DropdownButton class="chat-window-button" @icon="user-plus" @size="sm" @iconPrefix="fas" @triggerClass="hidden md:flex" @disabled={{not this.availableUsers}} as |dd|>
+                    <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                        <div class="p-1">
+                            {{#each this.availableUsers as |user|}}
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addParticipant user)}}>
+                                    <div class="flex-1 flex flex-row items-center">
+                                        <Badge @status={{if user.is_online "online" "offline"}} @hideText={{true}} @roundedFull={{true}} class="mr-2" />
+                                        <div class="w-6">
+                                            <FaIcon @icon="user" @size="xs" />
+                                        </div>
+                                        <span>{{user.name}}</span>
                                     </div>
-                                    <span>{{user.name}}</span>
-                                </div>
-                            </a>
-                        {{/each}}
-
+                                </a>
+                            {{/each}}
+                        </div>
                     </div>
-                </div>
-            </DropdownButton>
-            <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-bubble-container">
-                <Image src={{chatParticipant.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{chatParticipant.name}} class="chat-window-participant-bubble" />
-                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                    <InputInfo @text={{chatParticipant.name}} />
-                </Attach::Tooltip>
-                <button type="button" class="chat-window-remove-participant" {{on "click" (fn this.removeParticipant chatParticipant)}}>
+                </DropdownButton>
+                <button type="button" class="chat-window-button chat-window-close-button" {{on "click" this.closeChannel}}>
                     <FaIcon @icon="times" @size="sm" />
                 </button>
             </div>
-        {{/each}}
-    </div>
-    <div class="chat-window-messages-container" {{did-insert this.scrollMessageWindowBottom}}>
-        <div class="chat-window-messages">
-            <ChatWindow::Feed @channel={{this.channel}} />
         </div>
-    </div>
-    <div class="chat-window-input-container {{if this.pendingAttachmentFiles "has-attachments"}}">
-        <div class="chat-window-attachments-container">
-            <div class="chat-window-attachment-input">
-                <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{perform this.uploadAttachmentFile}}>
-                    <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
-                        <FaIcon @icon="paperclip" @size="sm" class="mr-2" />
-                        <span>Add Attachment</span>
-                    </a>
-                </FileUpload>
-                {{#if this.pendingAttachmentFile}}
-                    <div class="ml-2 flex items-center text-sm">
-                        <Spinner class="dark:text-blue-400 text-blue-900" />
-                        <span class="ml-2 text-xs dark:text-blue-400 text-blue-900">{{round this.pendingAttachmentFile.progress}}%</span>
-                    </div>
-                {{/if}}
-            </div>
-            {{#if this.pendingAttachmentFiles}}
-                <div class="chat-window-pending-attachments-container">
-                    {{#each this.pendingAttachmentFiles as |pendingFile|}}
-                        <ChatWindow::PendingAttachment @file={{pendingFile}} @onRemove={{fn this.removePendingAttachmentFile pendingFile}} />
-                    {{/each}}
+        <div id={{concat "channel-" this.channel.id "-participants"}} class="chat-window-participants-container">
+            {{#each this.channel.participants as |chatParticipant|}}
+                <div class="chat-window-participant-bubble-container">
+                    <Image src={{chatParticipant.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{chatParticipant.name}} class="chat-window-participant-bubble" />
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                        <InputInfo @text={{chatParticipant.name}} />
+                    </Attach::Tooltip>
+                    {{#if (can-remove-chat-participant this.channel this.sender chatParticipant)}}
+                        <button type="button" class="chat-window-remove-participant" {{on "click" (fn this.removeParticipant chatParticipant)}}>
+                            <FaIcon @icon="times" @size="sm" />
+                        </button>
+                    {{/if}}
+                    <div class="chat-window-participant-online-status {{if chatParticipant.is_online "is-online"}}" />
                 </div>
-            {{/if}}
+            {{/each}}
         </div>
-        <div class="chat-window-input-box">
-            <Textarea @value={{this.pendingMessageContent}} placeholder="Type your message here" class="chat-window-input" rows="3" />
+        <div id={{concat "channel-" this.channel.id "-feed"}} class="chat-window-messages-container" {{did-insert this.scrollMessageWindowBottom}}>
+            <ChatWindow::Feed @channel={{this.channel}} @chatParticipant={{this.sender}} />
         </div>
-        <div class="chat-window-submit-container">
-            <Button @type="primary" @icon="paper-plane" @text="Send" @size="xs" @onClick={{perform this.sendMessage}} @disabled={{not this.pendingMessageContent}} @isLoading={{and (not this.sendMessage.isIdle) (not this.uploadAttachmentFile.isIdle)}} />
+        <div id={{concat "channel-" this.channel.id "-input"}} class="chat-window-input-container {{if this.pendingAttachmentFiles "has-attachments"}}">
+            <div class="chat-window-attachments-container">
+                <div class="chat-window-attachment-input">
+                    <FileUpload @name={{this.customField.name}} @for={{this.customField.name}} @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{perform this.uploadAttachmentFile}}>
+                        <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
+                            <FaIcon @icon="paperclip" @size="sm" class="mr-2" />
+                            <span>Add Attachment</span>
+                        </a>
+                    </FileUpload>
+                    {{#if this.pendingAttachmentFile}}
+                        <div class="ml-2 flex items-center text-sm">
+                            <Spinner class="dark:text-blue-400 text-blue-900" />
+                            <span class="ml-2 text-xs dark:text-blue-400 text-blue-900">{{round this.pendingAttachmentFile.progress}}%</span>
+                        </div>
+                    {{/if}}
+                </div>
+                {{#if this.pendingAttachmentFiles}}
+                    <div class="chat-window-pending-attachments-container">
+                        {{#each this.pendingAttachmentFiles as |pendingFile|}}
+                            <ChatWindow::PendingAttachment @file={{pendingFile}} @onRemove={{fn this.removePendingAttachmentFile pendingFile}} />
+                        {{/each}}
+                    </div>
+                {{/if}}
+            </div>
+            <div class="chat-window-input-box">
+                <Textarea @value={{this.pendingMessageContent}} {{on "keypress" this.handleKeyPress}} 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" @size="xs" @onClick={{perform this.sendMessage}} @disabled={{not this.pendingMessageContent}} @isLoading={{and (not this.sendMessage.isIdle) (not this.uploadAttachmentFile.isIdle)}} />
+            </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/chat-window.js b/addon/components/chat-window.js
index d2c29f8..bf60b4f 100644
--- a/addon/components/chat-window.js
+++ b/addon/components/chat-window.js
@@ -2,8 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { later } from '@ember/runloop';
 import { task } from 'ember-concurrency';
-import { all } from 'rsvp';
 
 export default class ChatWindowComponent extends Component {
     @service chat;
@@ -12,6 +12,8 @@ export default class ChatWindowComponent extends Component {
     @service modalsManager;
     @service fetch;
     @service store;
+    @tracked chatWindowElement;
+    @tracked channelFeedContainerElement;
     @tracked channel;
     @tracked sender;
     @tracked senderIsCreator;
@@ -19,6 +21,7 @@ export default class ChatWindowComponent extends Component {
     @tracked pendingMessageContent = '';
     @tracked pendingAttachmentFile;
     @tracked pendingAttachmentFiles = [];
+    @tracked isVisible = false;
     acceptedFileTypes = [
         'application/vnd.ms-excel',
         'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
@@ -45,28 +48,53 @@ export default class ChatWindowComponent extends Component {
         super(...arguments);
         this.channel = channel;
         this.sender = this.getSenderFromParticipants(channel);
+        // if not participant close window
+        if (!this.sender) {
+            later(
+                this,
+                () => {
+                    this.chat.closeChannel(channel);
+                },
+                300
+            );
+            return;
+        }
         this.listenChatChannel(channel);
         this.loadAvailableUsers.perform();
+        this.chat.on('chat.closed', this.handleChatClosed.bind(this));
+        this.isVisible = true;
+    }
+
+    willDestroy() {
+        // this.chat.off('chat.closed', this.handleChatClosed.bind(this));
+        super.willDestroy(...arguments);
     }
 
     async listenChatChannel(chatChannelRecord) {
         this.socket.listen(`chat.${chatChannelRecord.public_id}`, (socketEvent) => {
-            console.log('[chat event]', socketEvent);
-            switch (socketEvent.event) {
+            const { event, data } = socketEvent;
+            switch (event) {
                 case 'chat.added_participant':
                 case 'chat.removed_participant':
+                case 'chat_participant.created':
+                case 'chat_participant.deleted':
                     this.channel.reloadParticipants();
+                    this.loadAvailableUsers.perform();
                     break;
                 case 'chat_message.created':
-                    this.chat.insertChatMessageFromSocket(this.channel, socketEvent.data);
+                    this.chat.insertChatMessageFromSocket(this.channel, data);
                     break;
                 case 'chat_log.created':
-                    this.chat.insertChatLogFromSocket(this.channel, socketEvent.data);
+                    this.chat.insertChatLogFromSocket(this.channel, data);
                     break;
                 case 'chat_attachment.created':
-                    this.chat.insertChatAttachmentFromSocket(this.channel, socketEvent.data);
+                    this.chat.insertChatAttachmentFromSocket(this.channel, data);
+                    break;
+                case 'chat_receipt.created':
+                    this.chat.insertChatReceiptFromSocket(this.channel, data);
                     break;
             }
+            this.handleChatFeedScroll();
         });
     }
 
@@ -114,6 +142,13 @@ export default class ChatWindowComponent extends Component {
         this.pendingAttachmentFiles = [];
     }
 
+    @action handleKeyPress(event) {
+        if (event.keyCode === 13 && !event.shiftKey) {
+            event.preventDefault();
+            return this.sendMessage.perform();
+        }
+    }
+
     @action closeChannel() {
         this.chat.closeChannel(this.channel);
     }
@@ -123,37 +158,94 @@ export default class ChatWindowComponent extends Component {
     }
 
     @action removeParticipant(participant) {
+        const isRemovingSelf = participant.id === this.sender.id;
         this.modalsManager.confirm({
-            title: `Are you sure you wish to remove this participant (${participant.name}) from the chat?`,
-            body: 'Proceeding remove this participant from the chat.',
+            title: isRemovingSelf ? 'Are you sure you would like to leave this chat?' : `Are you sure you wish to remove this participant (${participant.name}) from the chat?`,
+            body: isRemovingSelf
+                ? 'Once you leave this chat you will not be able to access this chat unless you are added as a participant again'
+                : 'Proceeding remove this participant from the chat.',
             confirm: (modal) => {
                 modal.startLoading();
+                if (isRemovingSelf) {
+                    this.closeChannel();
+                }
 
                 return this.chat.removeParticipant(this.channel, participant);
             },
         });
     }
 
+    @action editChatName() {
+        this.modalsManager.show('modals/edit-chat-name', {
+            title: 'Edit chat channel name',
+            acceptButtonText: 'Save Changes',
+            acceptButtonIcon: 'save',
+            channelName: this.channel.name,
+            confirm: (modal) => {
+                modal.startLoading();
+                if (modal.getOption('channelName')) {
+                    return this.chat.updateChatChannel(this.channel, { name: modal.getOption('channelName') });
+                }
+
+                this.notifications.warning('Name required to save changes.');
+            },
+        });
+    }
+
     @action positionWindow(chatWindowElement) {
-        const chatWindowWidth = chatWindowElement.offsetWidth;
-        const multiplier = this.chat.openChannels.length - 1;
-        const marginRight = multiplier === 0 ? 16 : (chatWindowWidth + 16) * multiplier;
-        chatWindowElement.style.marginRight = `${marginRight}px`;
-
-        // reposition when chat is closed
-        this.chat.on('chat.closed', () => {
-            this.positionWindow(chatWindowElement);
+        this.chatWindowElement = chatWindowElement;
+        requestAnimationFrame(() => {
+            const shiftX = (chatWindowElement.offsetWidth + 20) * this.getChatWindowIndex();
+            chatWindowElement.style.transform = `translateX(-${shiftX}px)`;
         });
     }
 
-    @action scrollMessageWindowBottom(messagesWindowContainerElement) {
-        messagesWindowContainerElement.scrollTop = messagesWindowContainerElement.scrollHeight;
+    @action scrollMessageWindowBottom(channelFeedContainerElement) {
+        channelFeedContainerElement.scrollTop = channelFeedContainerElement.scrollHeight;
+
+        // Change scroll behavior to smooth after the initial scroll
+        requestAnimationFrame(() => {
+            channelFeedContainerElement.style.scrollBehavior = 'smooth';
+        });
+
+        // Set the channel feed container element
+        this.channelFeedContainerElement = channelFeedContainerElement;
     }
 
     @task *loadAvailableUsers(params = {}) {
         const users = yield this.store.query('user', params);
-        this.availableUsers = users;
-        return users;
+        const availableUsers = users.filter((user) => {
+            const isNotSender = user.id !== this.sender.user_uuid;
+            const isNotParticipant = !this.getParticipantByUserId(user.id);
+
+            return isNotSender && isNotParticipant;
+        });
+
+        this.availableUsers = availableUsers;
+        return availableUsers;
+    }
+
+    handleChatFeedScroll() {
+        if (this.channelFeedContainerElement) {
+            this.channelFeedContainerElement.scrollTop = this.channelFeedContainerElement.scrollHeight;
+            later(
+                this,
+                () => {
+                    this.channelFeedContainerElement.scrollTop = this.channelFeedContainerElement.scrollHeight;
+                },
+                800
+            );
+        }
+    }
+
+    handleChatClosed() {
+        if (this.chatWindowElement) {
+            this.positionWindow(this.chatWindowElement);
+        }
+    }
+
+    getChatWindowIndex() {
+        return this.chat.openChannels.indexOf(this.channel);
     }
 
     getSenderFromParticipants(channel) {
@@ -165,4 +257,11 @@ export default class ChatWindowComponent extends Component {
         this.senderIsCreator = sender ? sender.id === channel.created_by_uuid : false;
         return sender;
     }
+
+    getParticipantByUserId(userId) {
+        const participants = this.channel.participants ?? [];
+        return participants.find((chatParticipant) => {
+            return chatParticipant.user_uuid === userId;
+        });
+    }
 }
diff --git a/addon/components/chat-window/feed.hbs b/addon/components/chat-window/feed.hbs
index baaea44..373d6a5 100644
--- a/addon/components/chat-window/feed.hbs
+++ b/addon/components/chat-window/feed.hbs
@@ -1,7 +1,9 @@
-{{#if (has-block)}}
-    {{yield @channel.feed}}
-{{else}}
-    {{#each @channel.feed as |item|}}
-        {{component (concat "chat-window/" item.type) record=item.record}}
-    {{/each}}
-{{/if}}
\ No newline at end of file
+<div class="chat-window-messages" {{did-insert this.setChannelFeedElements}}>
+    {{#if (has-block)}}
+        {{yield @channel.feed}}
+    {{else}}
+        {{#each @channel.feed as |item|}}
+            {{component (concat "chat-window/" item.type) record=item.record chatParticipant=@chatParticipant channelFeedContainerElement=this.channelFeedContainerElement}}
+        {{/each}}
+    {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/chat-window/feed.js b/addon/components/chat-window/feed.js
index 4f73280..42bbd6d 100644
--- a/addon/components/chat-window/feed.js
+++ b/addon/components/chat-window/feed.js
@@ -1,3 +1,13 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
-export default class ChatWindowFeedComponent extends Component {}
+export default class ChatWindowFeedComponent extends Component {
+    @tracked channelFeedContainerElement;
+    @tracked channelFeedElement;
+
+    @action setChannelFeedElements(channelFeedElement) {
+        this.channelFeedElement = channelFeedElement;
+        this.channelFeedContainerElement = channelFeedElement.parentNode;
+    }
+}
diff --git a/addon/components/chat-window/message.hbs b/addon/components/chat-window/message.hbs
index b07f142..ac27e10 100644
--- a/addon/components/chat-window/message.hbs
+++ b/addon/components/chat-window/message.hbs
@@ -1,4 +1,4 @@
-<div class="chat-message-container {{if this.chatMessage.attachments "has-attachments"}}">
+<div class="chat-message-container {{if this.chatMessage.attachments "has-attachments"}}" {{did-insert this.trackVisibility}}>
     <div class="chat-message-sender-bubble">
         <Image src={{this.chatMessage.sender.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.chatMessage.sender.name}} />
         <div class="chat-message-sender-name">{{this.chatMessage.sender.name}}</div>
@@ -17,6 +17,20 @@
         <div class="chat-message-content-bubble {{if (eq this.chatMessage.sender_uuid this.currentUser.id) 'sender-bubble'}}">
             {{this.chatMessage.content}}
         </div>
-        <div class="chat-message-created-at">{{this.chatMessage.createdAgo}}</div>
+        <div class="flex flex-row items-center justify-between mt-1">
+            <div class="chat-message-created-at">{{this.chatMessage.createdAgo}}</div>
+            <div class="chat-message-receipts">
+                {{#each this.chatMessage.receipts as |receipt|}}
+                    <div class="chat-message-receipt-container">
+                        <div class="chat-message-receipt">
+                            <FaIcon @icon="check" class="text-green-500" /> {{receipt.participant_name}}
+                        </div>
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{concat "Read at " receipt.readAt}} class="xs" />
+                        </Attach::Tooltip>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/chat-window/message.js b/addon/components/chat-window/message.js
index ca5fe1c..d91df43 100644
--- a/addon/components/chat-window/message.js
+++ b/addon/components/chat-window/message.js
@@ -1,10 +1,69 @@
 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 ChatWindowMessageComponent extends Component {
+    @service store;
     @tracked chatMessage;
-    constructor(owner, { record }) {
+    @tracked chatParticipant;
+    @tracked channelFeedContainerElement;
+    @tracked observer;
+
+    constructor(owner, { record, chatParticipant, channelFeedContainerElement }) {
         super(...arguments);
         this.chatMessage = record;
+        this.chatParticipant = chatParticipant;
+        this.channelFeedContainerElement = channelFeedContainerElement;
+    }
+
+    willDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        super.willDestroy();
+    }
+
+    @task *createReadReceipt() {
+        // if the chat participant is the message sender no read receipt is required
+        if (this.chatParticipant && this.chatMessage.sender_uuid === this.chatParticipant.id) {
+            return;
+        }
+
+        if (this.chatMessage.doesntHaveReadReceipt(this.chatParticipant)) {
+            const newReadReceipt = this.store.createRecord('chat-receipt', {
+                participant_uuid: this.chatParticipant.id,
+                chat_message_uuid: this.chatMessage.id,
+            });
+
+            yield newReadReceipt.save();
+        }
+    }
+
+    @action trackVisibility(chatMessageElement) {
+        this.observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        this.createReadReceipt.perform();
+                    }
+                });
+            },
+            {
+                root: this.getChannelFeedContainerElement(),
+                rootMargin: '0px',
+                threshold: 1.0,
+            }
+        );
+
+        this.observer.observe(chatMessageElement);
+    }
+
+    getChannelFeedContainerElement() {
+        if (this.channelFeedContainerElement) {
+            return this.channelFeedContainerElement;
+        }
+        return document.getElementById(`channel-${this.chatMessage.chat_channel_uuid}-feed`);
     }
 }
diff --git a/addon/components/modals/edit-chat-name.hbs b/addon/components/modals/edit-chat-name.hbs
new file mode 100644
index 0000000..319d122
--- /dev/null
+++ b/addon/components/modals/edit-chat-name.hbs
@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @type="text" @name="Channel Name" @value={{@options.channelName}} @helpText="Input a new name for your chat channel." @inputClass="input-lg" />
+    </div>
+</Modal::Default>
\ No newline at end of file
diff --git a/addon/components/notification-tray.js b/addon/components/notification-tray.js
index e177ffe..4782962 100644
--- a/addon/components/notification-tray.js
+++ b/addon/components/notification-tray.js
@@ -82,7 +82,7 @@ export default class NotificationTrayComponent extends Component {
      * @memberof NotificationTrayComponent
      * @type {Audio}
      */
-    notificationSound = new Audio('/sounds/notification-sound.mp3');
+    @tracked notificationSound = new Audio('/sounds/notification-sound.mp3');
 
     /**
      * Creates an instance of the NotificationTrayComponent
diff --git a/addon/components/scrollable.js b/addon/components/scrollable.js
index 8a3aec8..1574844 100644
--- a/addon/components/scrollable.js
+++ b/addon/components/scrollable.js
@@ -36,6 +36,6 @@ export default class ScrollableComponent extends Component {
     }
 
     @action onResize([entry]) {
-        console.log('elemen has been resized! #entry', entry);
+        // console.log('elemen has been resized! #entry', entry);
     }
 }
diff --git a/addon/helpers/can-remove-chat-participant.js b/addon/helpers/can-remove-chat-participant.js
new file mode 100644
index 0000000..c414546
--- /dev/null
+++ b/addon/helpers/can-remove-chat-participant.js
@@ -0,0 +1,16 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function canRemoveChatParticipant([channel, currentParticipant, focusedParticipant]) {
+    // Cannot remove the creator of the channel
+    if (channel.created_by_uuid === focusedParticipant.user_uuid) {
+        return false;
+    }
+
+    const isChannelCreator = currentParticipant && channel.created_by_uuid === currentParticipant.user_uuid;
+    const isFocusingSelf = currentParticipant && currentParticipant.id === focusedParticipant.id;
+    if (isChannelCreator || isFocusingSelf) {
+        return true;
+    }
+
+    return false;
+});
diff --git a/addon/helpers/noop.js b/addon/helpers/noop.js
index 3d91d69..3ab666b 100644
--- a/addon/helpers/noop.js
+++ b/addon/helpers/noop.js
@@ -1,6 +1,5 @@
 import { helper } from '@ember/component/helper';
-
-const noopFn = () => {};
+import noopFn from '../utils/noop';
 
 export default helper(function noop() {
     return noopFn;
diff --git a/addon/styles/components/badge.css b/addon/styles/components/badge.css
index 468a388..6eabeb9 100644
--- a/addon/styles/components/badge.css
+++ b/addon/styles/components/badge.css
@@ -3,6 +3,16 @@
     width: fit-content;
 }
 
+.status-badge > span.badge-rounded-full {
+    width: 0.5rem;
+    height: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 100%;
+}
+
 .status-badge > span {
     @apply text-gray-800 bg-gray-100;
 }
@@ -75,6 +85,7 @@
 }
 
 .status-badge[class*='4'] > span,
+.status-badge.offline-status-badge > span,
 .status-badge.pending-review-badge > span,
 .status-badge.awaiting-review-badge > span,
 .status-badge.scheduled-maintenance-badge > span,
@@ -89,6 +100,7 @@
 }
 
 .status-badge[class*='4'] > span svg,
+.status-badge.offline-status-badge > span svg,
 .status-badge.pending-review-badge > span svg,
 .status-badge.awaiting-review-badge > span svg,
 .status-badge.scheduled-maintenance-badge > span svg,
@@ -102,14 +114,6 @@
     @apply text-yellow-400;
 }
 
-.status-badge.offline-status-badge > span {
-    @apply text-gray-700 bg-gray-300;
-}
-
-.status-badge.offline-status-badge > span svg {
-    @apply text-gray-700;
-}
-
 .status-badge.operational-suggestion-status-badge > span,
 .status-badge.dispatched-status-badge > span,
 .status-badge.assigned-status-badge > span {
diff --git a/addon/styles/components/chat.css b/addon/styles/components/chat.css
index 5df994f..5f8afaa 100644
--- a/addon/styles/components/chat.css
+++ b/addon/styles/components/chat.css
@@ -22,7 +22,8 @@ body[data-theme='dark'] .chat-tray-panel-container {
     position: fixed;
     bottom: 0;
     right: 0;
-    z-index: 999;
+    z-index: 800;
+    margin-right: 1rem;
 }
 
 .chat-window-container {
@@ -31,7 +32,7 @@ body[data-theme='dark'] .chat-tray-panel-container {
     right: 0;
     margin-left: calc(360px + 2rem);
     margin-bottom: 1rem;
-    z-index: 999;
+    z-index: 800;
     display: flex;
     flex-direction: column;
     width: 360px;
@@ -44,6 +45,7 @@ body[data-theme='dark'] .chat-tray-panel-container {
     border: 1px #d1d5db solid;
     border-radius: 1rem;
     background-color: #f9fafb;
+    transition: transform 0.5s ease;
 }
 
 .chat-window-container.has-attachments {
@@ -251,17 +253,18 @@ body[data-theme='dark'] .chat-window-participants-container {
 }
 
 .chat-window-participants-container .chat-window-participant-bubble-container {
-    width: 30px;
+    width: 35px;
     display: flex;
     position: relative;
 }
 
+.chat-window-participants-container .chat-window-participant-bubble-container > .chat-window-participant-online-status,
 .chat-window-participants-container .chat-window-participant-bubble-container > .chat-window-remove-participant {
     opacity: 0;
     position: absolute;
     top: 0;
     right: 0;
-    margin-right: -2px;
+    margin-right: 5px;
     margin-top: -2px;
     border-radius: 100%;
     background-color: #ef4444;
@@ -288,6 +291,24 @@ body[data-theme='dark'] .chat-window-participants-container {
     opacity: 1;
 }
 
+.chat-window-participants-container .chat-window-participant-bubble-container > .chat-window-participant-online-status {
+    opacity: 0.8;
+    height: 10px;
+    width: 10px;
+    left: 0;
+    right: unset;
+    margin-right: unset;
+    margin-left: -2px;
+    margin-top: -1px;
+    background-color: #eab308;
+    border: 1px #facc15 solid;
+}
+
+.chat-window-participants-container .chat-window-participant-bubble-container > .chat-window-participant-online-status.is-online {
+    background-color: #16a34a;
+    border: 1px #22c55e solid;
+}
+
 .chat-window-participants-container .chat-window-participant-bubble {
     width: 24px;
     height: 24px;
@@ -537,7 +558,6 @@ body[data-theme='dark'] .chat-message-container .chat-message-content-bubble-con
 
 .chat-message-container .chat-message-created-at {
     font-size: 0.5rem;
-    margin-top: 0.2rem;
     color: #475569;
 }
 
@@ -545,6 +565,43 @@ body[data-theme='dark'] .chat-message-container .chat-message-created-at {
     color: #f9fafb;
 }
 
+.chat-message-container .chat-message-receipts {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+}
+
+.chat-message-container .chat-message-receipts > div:not(:last-child)::after {
+    content: ',';
+    margin-right: 5px;
+    font-size: 0.5rem;
+    color: #475569;
+}
+
+.chat-message-container .chat-message-receipts .chat-message-receipt-container {
+    display: inline-flex;
+    align-self: start;
+    font-size: 0.5rem;
+    color: #475569;
+}
+
+.chat-message-container .chat-message-receipts .chat-message-receipt {
+    font-size: 0.5rem;
+    color: #475569;
+}
+
+.chat-message-container .chat-message-receipts .chat-message-receipt svg {
+    font-size: 0.5rem;
+}
+
+body[data-theme='dark'] .chat-message-container .chat-message-receipts > div:not(:last-child)::after,
+body[data-theme='dark'] .chat-message-container .chat-message-receipts .chat-message-receipt-container,
+body[data-theme='dark'] .chat-message-container .chat-message-receipts .chat-message-receipt {
+    color: #f9fafb;
+}
+
 .chat-message-container .chat-message-sender-bubble {
     width: 60px;
     display: flex;
@@ -604,6 +661,7 @@ body[data-theme='dark'] .chat-message-container .chat-message-sender-bubble > .c
 
 .chat-tray-channel-preview .chat-tray-channel-preview-last-message {
     display: flex;
+    flex-direction: column;
     width: 285px;
     max-width: 285px;
     overflow: hidden;
@@ -611,3 +669,31 @@ body[data-theme='dark'] .chat-message-container .chat-message-sender-bubble > .c
     white-space: nowrap;
     text-align: left;
 }
+
+.chat-tray-channel-preview .chat-tray-channel-preview-last-message .chat-tray-channel-preview-last-message-attachments {
+    display: flex;
+    align-items: center;
+    align-self: start;
+    margin-top: 0.15rem;
+}
+
+.chat-tray-icon .chat-tray-unread-notifications-badge {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 16px;
+    height: 16px;
+    background: #dc2626;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.chat-tray-icon .chat-tray-unread-notifications-badge:hover {
+    background-color: #b91c1c;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/addon/styles/components/notification-tray.css b/addon/styles/components/notification-tray.css
index 2de1930..f742589 100644
--- a/addon/styles/components/notification-tray.css
+++ b/addon/styles/components/notification-tray.css
@@ -12,7 +12,7 @@
     right: -6px;
     width: 16px;
     height: 16px;
-    background: red;
+    background: #dc2626;
     color: white;
     display: flex;
     justify-content: center;
@@ -24,7 +24,7 @@
 
 /* Adding a hover effect for the badge */
 .notification-tray-unread-notifications-badge:hover {
-    background-color: darkred;
+    background-color: #b91c1c;
     cursor: pointer;
 }
 
diff --git a/addon/styles/layout/legacy.css b/addon/styles/layout/legacy.css
index c46c260..5cd2831 100644
--- a/addon/styles/layout/legacy.css
+++ b/addon/styles/layout/legacy.css
@@ -212,8 +212,9 @@ body[data-theme='dark'] .filter-row .filter-row-body {
     box-sizing: border-box;
 }
 
+.ember-basic-dropdown-content,
 #ember-basic-dropdown-wormhole .ember-basic-dropdown-content {
-    z-index: 99999;
+    z-index: 9999;
 }
 
 .datum-row {
@@ -555,10 +556,20 @@ body[data-theme='dark'] .radio-group-condensed .radio-group-item input[type='rad
     @apply px-3 py-2;
 }
 
+.ui-input-info-block.sm,
+.ui-input-info-block.sm span {
+    @apply text-sm;
+}
+
 .ui-input-info-block.xs {
     @apply px-2 py-1;
 }
 
+.ui-input-info-block.xs,
+.ui-input-info-block.xs span {
+    @apply text-xs;
+}
+
 .ui-input-info-block .ui-input-info-block-text,
 .ui-input-info-block p {
     @apply text-blue-900;
diff --git a/addon/utils/noop.js b/addon/utils/noop.js
new file mode 100644
index 0000000..ca6a744
--- /dev/null
+++ b/addon/utils/noop.js
@@ -0,0 +1 @@
+export default function noop() {}
diff --git a/app/components/modals/edit-chat-name.js b/app/components/modals/edit-chat-name.js
new file mode 100644
index 0000000..ce5d511
--- /dev/null
+++ b/app/components/modals/edit-chat-name.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/modals/edit-chat-name';
diff --git a/app/helpers/can-remove-chat-participant.js b/app/helpers/can-remove-chat-participant.js
new file mode 100644
index 0000000..5c168ba
--- /dev/null
+++ b/app/helpers/can-remove-chat-participant.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/helpers/can-remove-chat-participant';
diff --git a/app/utils/noop.js b/app/utils/noop.js
new file mode 100644
index 0000000..d56920b
--- /dev/null
+++ b/app/utils/noop.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/utils/noop';
diff --git a/assets/sounds/message-notification-sound.mp3 b/assets/sounds/message-notification-sound.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..a1ad34acd5b5d21a9e557143b636b23668eb67a2
GIT binary patch
literal 46937
zcmeI&cTiJV-v{s;hyfuWy^8@MKqyP-BD$d(kWfNEf}j!U1O%n(qf3{%^o~f4gkqtC
zC`CcK^i@$r5El>;L9wm!vg+<U$~*5oGta#LY|fn__ndQ+-26WG<jZ9^#s;cP(B`%)
zfMjI_L0pjO30L>yD2tOPP<xcHN?Q8n1PF42oV{J$N&enu=0pO7QvP$(QdRxd(9`(R
zz$#<)zc%(58GJpYtg7~XLtV?j@XLt0s*&cmLs;Fv8_<`th5dClD}sgIx3g`Y@awZw
zu-_WGDqqj`<-=?~=<2Keb+T{I)zZ*Y`S#X-z54IB`M(=~f`APO00AHX1b_e#00KY&
z2mk>f00e-*KS*HX;|%UgIhr9~c8HZPJ80_bPPFao9y|g8AiyXBUqgZAO49zwlOfPs
zY~a<)I?&O4T^`{x5c4Qr;+7%>QZ6HP6k4%Gno6>p?1r<&=LM)U;~tyqm-d=TE~xj4
z_0CjNh%h1d&|7F3-q4#=M305=3=XMm9*Mmxw#sQHc~quvIc%rO`?Etzf*g<VsIYCf
z^!-Lvf6DB8w%kw<RXaq>ac@o{XtP=o)M-b5qUD?(C8*7#LYq(MBJ7-R3%C$cpDp4Z
zX;y8%g~kFc$DekAnQ4ZPJ@S@;Ho|!=5Z8_%z`5qt;Q}s4Wd<I>7xijK$3lIEQ#ar4
z0@IUXw7qk7ZgUbj)Thy{hqg#i8yy-_RuWO^@0(jQvU8^`>T0v1da`p1H$MWZS9e?X
zpC9b_wWhdE^lsj)hcwqWF-^0s2dXa&j`%fh?-YsZb{3UOqDmLiQxVbogv)B33a>?n
zhOBaha~){o4avujFc1CwFg2D{W)JOIn}6A?vb?18r?oRLXVQKvVM&zBd^zLr;l>|l
zHiD=gZ%*IbztFgYKT)0I<J+`SlunGfiIr`socZ#ngd?BdwHDt=-Z%Sv@9oW(<q*?0
zdvej-a=BA)FKzrW_2G4?xD~ln?(-)(@y}_$y}R)?)=D$c^wFnJD4kz+ol6Vm$qK5p
zkrx)X8iAX*h@Bn&DEju*%hrt>k6UjpoO!uJTqkIC|NN^t)w7R2zIzw6D$~#g?ZAgH
zp&$ba0$#>~qJ+X_5fGPP2t^xeL_qWGArw{UG=kd)g>&L!RZzmt+s|eo1Z4{;j$Gkk
zFi0#1@thZ;K5Yq&51scm$7(bRu^~`GP)M5vn@)I@Iy&hT)DE%2+gNQs4e9btI4z66
z>lMeOb`uL?J&jr7+xkUPpNd_rUFvD}uHj2^EVQ6`r=pkU6*WgxhzmofR3r6HE>ps&
zDaN$?+Kf0_%sSCp$<3a;=Eqs6n?2%8e_@@GK$q4f*_0@p)y%>q-xwjXqPiCy)RJh9
zU2YPs{tAoo&PCU4(%qy=M(jA>%&RC}fcx3KQ3-Sy^M_9$Sa4UFVl0GU5Jg!rG*aR<
z0?8vQ6pV(hIx<V^QXyEhs61}kD{V3~GHI15#0e?O95PNh-u)|61S$d5Db+R>N@PaP
zjI}t;NyX#Z+(g)=*d2^hMk|>@8j;YoZk>{>M=8y-DE}nWhi~{*B~BlRy~Jm2mRt5g
zkicKy)Gbw;afzr-S1*s5jS-ezP3w=T>#vM7E?AJN>9vdBMa&43)gH1oi<6w+<r+xf
z9i%BYSEy*1EjhZymfM6Ah6z%MMLEXk@MfhPb_YK8h32$eMNKukoZ3{P31RdX@*-!w
z6HiG)Q58QOzEeu>rmwl~h{e{Z+YAK?1hL3y9bh>V0<A@}w!M4}iRb7t?FbsUMe9a|
zz7%d$_CxA(B>l>YI0eJ8z@htLjXXj+OxaQR24SP@CrN8akyp<p8qIEA#NZa<vF}9g
zT$ZR{^Ad^?c2811m$O`Z`rRv%os&L2hlM7Fpl^$JaOzgZqqH_fVF+TKW(dxCkYa%i
z#dUCPj|z9Dpzy4<1P)?fm0go}My3ckbA4yQ$)Ztgwinr3IG`%e(}emk!LH(9e=FI#
zbk4(jf>vjf@rHUmGjPCpYBtlin&}+Jc0F7f>k7uErbt#z`bi<zikk_~KKj!Pk=<o0
znBpSo>uUoO(+h{fN-qw7$ndMxJ~TpsLE4n<kj>_gGDS0#O7RUHN=IzR?=|9bvuqDj
z6iTKkiMY>Y<+LylWThN?DuknW3-K1X3Lz=6S^184g-Dc_7w)!*hph{_xMq_ivy$|(
zQG2rT_+y#71jD<Sq4G8g9u?`9lhWIGlLmw4of0W1wKfX>X)GF9YGS-6l}$Xc(l%lr
z)OLk!AusCUqRw&6rVBX}vuced#hRs-l}o=T?#Xy{XO-59$vmglGU2fChrg%d$Xs*1
z|Kq-mH<`bP`BX$luVj*k+$esT+LCPNbq~oXtdQuVQ_`@Vh?eq1f#AoMmcO5s_sQ7E
zu=-4P5z;lG)H8R%ASQaeAncF!A^m<&X1*T3R|zlz-}sw-oRqg^D~}Z8=h6-O(r6q~
z!hej-C->`izH5(1n~La~c7#CvQXRH@oO2M@TABQFPSw&BhcVw1y!4{d#jtvf!>WW`
zp<brrv`eLQ!o%QlQ^n&6-quy`ojnPM?zQqp5wV&kZZgJFv<7qbj<S@}*{F^CQ#D7_
z>rVJ9oEt+8dLJ>DkzP$vp(kf9sCX&7p)Fs_{WS1m#{1CS*TzUp?}f9^y50z_{_b@#
zH=o!-r+B7&&3N7SOLY>s_xWU2yd~b|?l1lxlflP^e|3IbSAJ;FANwq8Pv{IQlC@2(
zoeP0f!mV_0X~kdc^ci@f(4WDHzm0p6;8pW*Ijfr>M+_O{x=7f0$aa`|8mYJ~qC-|1
z$r~Eob{lP~2J0_}MN8|;j!IrSc{qhe{QZXR5j3eeU)EmIkRB*)Q$FZ=CLpl#R859P
z&Bk5%U+RK_Yxb@kajaq*3Uujs!aQ~-{Tgqb<*xOp;7+Ukq>6_p9uwJ@&4ONvd%oz8
zd6?(@%CqZP>*U~Fi-G0`-h82lMjrGW@^CTtK6RtFp>$*YS*!Wd`+@7O@i)A#;AdZS
zP1eo!7<<|D^EXX-RCosPkM^Ca-1=qzPe;DpDX1msgkL%6^Q@X>CD6!QBt>J1^O|B`
z!GVjg+oerfX&z{a-`xLITv|r1h;FBhiNO+?BXGP$1!f}fpfn@>Y<%RdmotTfZ2pE0
z66NE2MydjLa>k*jF{uyET_}z)k<Wfesc*NhKE|PKpW%1|zmN_;aP_uiuA==t=l)71
z2R0{pZpn+ms=0*IhJBJQn2s?+VS_$Fxx24RQ|zfx__*RDzBohEfwUw!Me6W#Yhl_@
zNlM^8y<j-MN7|K|C9_#pBX)I>JJufau6)D@`2l0<V~u0P!yR;i3OR+br*YSPnV1rG
z5*p5q&#s^2nY3~19UIO(>KnNWV-R~-z|O!>p|s8lr%MTyjoz-z$D?c@piJ7XTp)=Z
zch+hCq?Tu`TA-`Sp{dP%KyCOZl>*K^1qsP1i&yIxcHXJwS_*LG)Nec-zj)<j$Aq7T
zqFrgi$?=b8TV3W96Z;M~(LdW)n7xIk>7C;7v*Z<xAFChFCo$!pQ5Vp%X+kK>$cp-~
z3#6FutX!=_E!1SVB;zs!u>$x(k0=qO?^za22g9OW1iswC%xuB7{JRUcb3aDTN*czU
z>VAJcS`}mAyQI5287`42tbM(Tw0D>qZGyk4C2A&g?r;+?kG@a>;>;C|0~U@;;h&Q}
zr<~yF&SR1iGKGhPUBxlkg`&0{l{huDR85PT#|v%uDi|8KY%6=g5zH?mo}=?V-BQJ`
zZnVX-^rz;QITy!@zPp{=@m(YK89GNLhr^TAW!g;w)vD#LmJjERWek&QAKF)aUKofc
zl+q`6UueQkzlkF>Y&UYcDIwo)aG!K9&M-w&Gg)!JQ^fOnw(?%#O5fq<!Ox4gInEs^
z5sh6u?ul{``MAv=FPb(%@97yZ?ocf=C#7LGlu}}{7H<<IpG&=^r)H2uQ>=c`t1%Db
z5voaUiM;#lqkqPe9;1T-HaVu*m7Gzg{nubvBN$>EZ|;K!)F<~tbxj7vScbUd&<6df
z`PRy-0$e6Y?y4x%<eoB$-XQ~ppYvL}&K4tcYz#}PBd&6D8xkcl3VD>5RqmCgixuF?
zF>ZhC^i=8D?WCZMJtleCHqO4#(chp!h1?;NVuQ6G+g?yMBArt7yJSiBgbmqt4>f_U
z33J#x)~#+m%{mPIV28gRd&80Z?&u4L4A$)*9ZYwpx%9p<kM+j9tnbWLxu)`*7-x@v
z^sJbpL{GUzxVA(9w=PIFmaQPhKOnQwu+^lP>&ZQ(ykX^Tw*Tq3`oDbMw@|Q4+7q65
z(C5VnO9*wrTjZv~497mjzDszqcA9jf_WhtPW@hg5{R%Ab2;NfWDZ?ZaxRX0^B<ncK
z&xS+vAO~`f9&$jL|H^&ywPb^T)hU==`S~7S-^&Tn)TN!xE`j_VH-`hJpS`JGwjhgX
zDv6oe-&$+w?S2%UrOq#!i`h}9Ww==Iv*6kQ8b5ZQ+Mj&QoYbB!+9hJ75Oe-UT1<bL
z2O_Cpe?^9dX;X|wq`rY-O#+&d9pKVC(B$43fzcGXUtOKpLa$C+3@G*}r7yaPm~Gc6
zU#34uK;J(0>~?0PlT6yhh(aB^Wu7Cxho=;79vClFR8!~6(MvThKgBK2Ut1oXu{hG(
z#Alv&uM>KdHF*YV>On^Q=9J_%c<_AqaN!y<N;kBPPn->!W`d4EoZJRJ5fq)Idjg@T
z?lf-pAt#to$2D7uhXPbMx<diuB*-Zx$<i&&1M4dhIcO2-qadO-Y;n0z(TAE&!g71^
z%EqL168TNt8%1zYy4J}B``g^*Y9ph@FQ<%@*r<u*IYq|?2UjIEM#1lw?9Hu<PA<^1
zOBPff%{R!iD9Gd1iV_t;V_Z(f{#0uE-t{>*uLre<&%GhQS(^MlWx~cVKrfP=x8&ze
zyL0l}F3X!-9Cv2lUy>qpG`BWVb`tv`rtDUiCApD*PoVzMC{bhxMi}PSn>QfGS`q_O
z!Z%w?XJr?dj`4ESq1mHmN~8gktcBoTWA65sJXT6qCJs$ZS|{|aSl=VZUK2jb?_1aR
zOi;EDv*QBJw)(ctn5n`6$#rr!LG82)k5M^M|32-7$zJtba&!ZgwD@_Fuk|SL<O!Nw
z%ungpXbWfL&ikW@s*eSveSh75uOz_A%us`#|DNhWPFVlI*-F$D&Fl$U3doxOz)n<6
zKk(vXy7pu^7twRvXl{Kv{UN<Fpdps9H@;qZZ2AJptI|g=0Bd%34zd#&HqIjB8bcbl
z`Amq$J(u;7N@^41V?E%NSnSFg?#!oQ`t(5Ld4W`Gtq2o6iw*(H$T1x~l|jFC>3Hjd
zaYcmlG*VcJqHcKfwTl>Isg#JEd%Bsj^%W5`BAJ!OnjD>@=PY@=D2u0nTdhK#SHn<B
ziCod7vXovJpI<bp*Pnxti@}7^y2%D^)8#!B4E6jrw2ix(n&|_%LTA3-F58+zJ5Rfv
zQHxo8ZBDnlaj7DjT;*Wfv+Ay<73)!5p@R0}<kpEPF0(=B2ys=%%vn^%Xr$^V5ZL7n
zd5t?=(w((>=v~SGZyE6|6cQ6P!%bCBPM>7qa$oR<$`Dh?c!(7hdbqt94%=(~>!coi
z&B8S8SSqV66GG%-G-f!J-dy|Jy@$pq))G`1kuNr6s05iPVH{+nlxmS!KYl0MZ^4rE
z?&%xsYniLN9A92>9eg@bnVKA?Z0tlbc3GOE*5}g7Qrbz#tIlC%>B$lF-6Ug5IRXdI
z+6M7Zcv-XXV`jD(hz~Lj!9$5q29JehSzZ#R-2x^KQ-&+RZSh<d$we8+EQQUZX?(J>
zczi+OZbM09Cra`Yl&)l0L;^yLO^qMdlN@GP<RK%)7Om25!&YQtv|S*%EUy|P?Nk}h
zQ>~CnnzL_5OU+lC#T}%62-Y?m^?AX^j`CN}Dh}hB>9R=SK$;+L#;np5<Tx>_0<ma`
z*B){+NS+|yO8aCP-ubab{D#Hu)V}aX%;JWx_3YpVCWT%T#DmoMO2ydqD3{+C4bA4K
z@aU)n@%;m7`)3^cHJnRxDTL{!8R}Sq%0SzwY{nUQ^`*vKe|_1TZ8<8b$wox?v_k}y
zIOpi}*67PbceXloQT@B}`aW)Z9ZR#45xRMmyO*KUx=rnqr<G4CWH=Td5Ufjeu9M$C
z&An7%CORJRpu)trnee_&(_3Ea;6rr3D@)fCjX)3TGWtdO5$bXH?FIjc_?4guDXI1m
z#MS@u_X>FVKTY6kC_qv$&G5}XE#U>|6$%Q%*&?P`A|MC}O}4FsK;la)t*;t8BR9@x
z^>SwQ{?iCRJwN~m{JX%nP~d=RhEgC1)`nhD+dM4AG{qDGL5PstHXjHQx>q!PwQsWz
zHXr~5{`mqMAE$AfRkA=0A%E_t1y)!$cU(+UPzVGuL5JJ8AV@@=v^fSgAOHjyLEzhs
z0t9_syA&d@0{>F>zpq{TU;dHF2sEHZAi$UcKZF7V7Bn*EJOEV#fxiVnDEv(U8bAOD
z{3!rJ0n7s+00h1h0HN?52j~C+AOJ!E%mE+(1iljhq3|6C=l}sA073!G0U!Vbz7qhU
z@Er%}00AKIZ9(H-i<iJU1u!Lm0D}vF8wCcR0HAyz@S^|-g&##g9|$nG00;#Jp8%kI
zAn>CA2!$U-KpzM&xBv(R2A=?+d?4_n00@O2ML-`2Ft`8+1qPo0pnM?kqW}nnA4NbP
z2r#$+2n7b80HAyz@S^}&(D<VW=mP=9763O2jD7t<^*~^Y00@OGBwzptFtz{)1;)Pq
zpn4#%MF51t77{Q31Q=TYgaTt<e^5OT*dhQzVG9Wu00N9H078MWuRo|B2y77mp|FJn
z3;+Sf7675Z*w-Ia4+ORdfCY_PNWcIPU}ynwqrlLY9~2J+whDky*lGesfB-`a{14is
BIGF$d

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index 8d0db94..b7cfb1c 100644
--- a/package.json
+++ b/package.json
@@ -34,12 +34,12 @@
         "publish:github": "npm config set '@fleetbase:registry' https://npm.pkg.github.com/ && npm publish"
     },
     "dependencies": {
-        "@fleetbase/ember-accounting": "^0.0.1",
         "@babel/core": "^7.23.2",
         "@ember/render-modifiers": "^2.0.4",
         "@ember/string": "^3.0.1",
         "@embroider/addon": "^0.30.0",
         "@embroider/macros": "^1.8.3",
+        "@fleetbase/ember-accounting": "^0.0.1",
         "@floating-ui/dom": "^1.0.1",
         "@fortawesome/ember-fontawesome": "^1.0.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a2e160..76d6d55 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1977,7 +1977,7 @@ packages:
       '@glint/template':
         optional: true
     dependencies:
-      '@embroider/macros': 1.8.3
+      '@embroider/macros': 1.13.4
       ember-cli-babel: 7.26.11
       ember-modifier-manager-polyfill: 1.2.0(@babel/core@7.23.2)
       ember-source: 5.4.0(@babel/core@7.23.2)(@glimmer/component@1.1.2)(rsvp@4.8.5)(webpack@5.89.0)
diff --git a/tests/integration/components/modals/edit-chat-name-test.js b/tests/integration/components/modals/edit-chat-name-test.js
new file mode 100644
index 0000000..a7c800b
--- /dev/null
+++ b/tests/integration/components/modals/edit-chat-name-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 | modals/edit-chat-name', 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`<Modals::EditChatName />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Modals::EditChatName>
+        template block text
+      </Modals::EditChatName>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/helpers/can-remove-chat-participant-test.js b/tests/integration/helpers/can-remove-chat-participant-test.js
new file mode 100644
index 0000000..049f790
--- /dev/null
+++ b/tests/integration/helpers/can-remove-chat-participant-test.js
@@ -0,0 +1,17 @@
+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 | Helper | can-remove-chat-participant', function (hooks) {
+    setupRenderingTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it renders', async function (assert) {
+        this.set('inputValue', '1234');
+
+        await render(hbs`{{can-remove-chat-participant this.inputValue}}`);
+
+        assert.dom().hasText('1234');
+    });
+});
diff --git a/tests/unit/utils/noop-test.js b/tests/unit/utils/noop-test.js
new file mode 100644
index 0000000..bd52348
--- /dev/null
+++ b/tests/unit/utils/noop-test.js
@@ -0,0 +1,10 @@
+import noop from 'dummy/utils/noop';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | noop', function () {
+    // TODO: Replace this with your real tests.
+    test('it works', function (assert) {
+        let result = noop();
+        assert.ok(result);
+    });
+});

From bad0f3905cd1125f253257bcc354878feaa2d0e0 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 13 Apr 2024 19:26:14 +0800
Subject: [PATCH 22/24] removed the `<Scrollable />` component

---
 addon/components/scrollable.hbs               |  1 -
 addon/components/scrollable.js                | 41 -------------------
 .../integration/components/scrollable-test.js | 26 ------------
 3 files changed, 68 deletions(-)
 delete mode 100644 addon/components/scrollable.hbs
 delete mode 100644 addon/components/scrollable.js
 delete mode 100644 tests/integration/components/scrollable-test.js

diff --git a/addon/components/scrollable.hbs b/addon/components/scrollable.hbs
deleted file mode 100644
index cd7b179..0000000
--- a/addon/components/scrollable.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<div class="flb--scrollable" {{did-insert this.setupComponent}} ...attributes>{{yield}}</div>
\ No newline at end of file
diff --git a/addon/components/scrollable.js b/addon/components/scrollable.js
deleted file mode 100644
index 1574844..0000000
--- a/addon/components/scrollable.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class ScrollableComponent extends Component {
-    @tracked horizontal = false;
-    @tracked vertical = true;
-    @tracked nodeRef;
-
-    @action setupComponent(element) {
-        const { onSetup, horizontal, vertical } = this.args;
-
-        this.nodeRef = element;
-        this.horizontal = horizontal;
-        this.vertical = vertical;
-
-        if (typeof onSetup === 'function') {
-            onSetup(...arguments);
-        }
-
-        this.makeScrollable(element);
-    }
-
-    @action makeScrollable(element) {
-        this.setComputedSize(element);
-
-        const resizeObserver = new ResizeObserver(this.onResize);
-        resizeObserver.observe(element);
-    }
-
-    @action setComputedSize(element) {
-        const { clientHeight } = element;
-
-        element.style.height = `${clientHeight}px`;
-        element.style.overflowY = 'scroll';
-    }
-
-    @action onResize([entry]) {
-        // console.log('elemen has been resized! #entry', entry);
-    }
-}
diff --git a/tests/integration/components/scrollable-test.js b/tests/integration/components/scrollable-test.js
deleted file mode 100644
index 65fbc7f..0000000
--- a/tests/integration/components/scrollable-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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 | scrollable', 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`<Scrollable />`);
-
-        assert.dom(this.element).hasText('');
-
-        // Template block usage:
-        await render(hbs`
-      <Scrollable>
-        template block text
-      </Scrollable>
-    `);
-
-        assert.dom(this.element).hasText('template block text');
-    });
-});

From 42b4d08a9f3c9d1a51653ed9176fbf8da3709075 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 13 Apr 2024 19:31:39 +0800
Subject: [PATCH 23/24] fix noop() utility test

---
 app/components/scrollable.js  | 1 -
 tests/unit/utils/noop-test.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)
 delete mode 100644 app/components/scrollable.js

diff --git a/app/components/scrollable.js b/app/components/scrollable.js
deleted file mode 100644
index a341efc..0000000
--- a/app/components/scrollable.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@fleetbase/ember-ui/components/scrollable';
diff --git a/tests/unit/utils/noop-test.js b/tests/unit/utils/noop-test.js
index bd52348..3f8017c 100644
--- a/tests/unit/utils/noop-test.js
+++ b/tests/unit/utils/noop-test.js
@@ -5,6 +5,6 @@ module('Unit | Utility | noop', function () {
     // TODO: Replace this with your real tests.
     test('it works', function (assert) {
         let result = noop();
-        assert.ok(result);
+        assert.equal(result, undefined);
     });
 });

From 1cb57ab18e2fb20217a30aaea0ade781104d8caa Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 13 Apr 2024 19:44:37 +0800
Subject: [PATCH 24/24] v0.2.13

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8d0db94..6264c84 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.12",
+    "version": "0.2.13",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",