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] 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);
     }