From a0cfd23825a00ff2d7d9713aaf00796c1a70b714 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
Date: Sat, 31 Aug 2024 16:17:05 +0200
Subject: [PATCH] update msgboard UX

---
 src/components/Board.tsx         | 17 +++++++++
 src/components/ChatBoxStyles.css | 59 ++++++++++++++++++++++++++++++++
 sw.ts                            | 11 ------
 3 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ChatBoxStyles.css
 delete mode 100644 sw.ts

diff --git a/src/components/Board.tsx b/src/components/Board.tsx
index 21ef49f..6d28e36 100644
--- a/src/components/Board.tsx
+++ b/src/components/Board.tsx
@@ -12,6 +12,7 @@ import { ChatBoxTool } from '@/tools/ChatBoxTool'
 import { IChatBoxShape, ChatBoxShape } from '@/shapes/ChatBoxShape'
 import { multiplayerAssetStore } from '../client/multiplayerAssetStore' // Adjusted path if necessary
 import { customSchema } from '../../worker/TldrawDurableObject'
+import './ChatBoxStyles.css' // Add a CSS file for styles
 
 const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev`
 
@@ -62,6 +63,22 @@ export function Board() {
 	)
 }
 
+// Assuming you have a message structure like this
+interface ChatMessage {
+    id: string;
+    text: string;
+    isUser: boolean; // New property to identify the sender
+}
+
+// Example rendering function for messages
+function renderMessage(message: ChatMessage) {
+    return (
+        <div className={message.isUser ? 'user-message' : 'other-message'}>
+            {message.text}
+        </div>
+    )
+}
+
 // How does our server handle bookmark unfurling?
 async function unfurlBookmarkUrl({ url }: { url: string }): Promise<TLBookmarkAsset> {
 	const asset: TLBookmarkAsset = {
diff --git a/src/components/ChatBoxStyles.css b/src/components/ChatBoxStyles.css
new file mode 100644
index 0000000..d7980b5
--- /dev/null
+++ b/src/components/ChatBoxStyles.css
@@ -0,0 +1,59 @@
+/* General chatbox styles */
+.chatbox {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    max-width: 400px; /* Adjust as needed */
+    margin: auto; /* Center on the page */
+}
+
+/* Message styles */
+.message {
+    padding: 8px;
+    margin: 5px 0;
+    border-radius: 5px;
+    word-wrap: break-word; /* Ensure long words break */
+}
+
+/* User message styles */
+.user-message {
+    background-color: #d1e7dd; /* Light green */
+    color: #0c5460; /* Darker text color for contrast */
+    align-self: flex-end; /* Align to the right */
+}
+
+/* Other message styles */
+.other-message {
+    background-color: #f8d7da; /* Light red */
+    color: #721c24; /* Darker text color for contrast */
+    align-self: flex-start; /* Align to the left */
+}
+
+/* Input area styles */
+.input-area {
+    display: flex;
+    margin-top: 10px;
+}
+
+.input-area input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.input-area button {
+    padding: 10px;
+    margin-left: 5px;
+    border: none;
+    background-color: #007bff; /* Bootstrap primary color */
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.input-area button:hover {
+    background-color: #0056b3; /* Darker shade on hover */
+}
diff --git a/sw.ts b/sw.ts
deleted file mode 100644
index a144876..0000000
--- a/sw.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-self.addEventListener('push', function(event) {
-  const data = event.data.json();
-  const options = {
-    body: data.message,
-    icon: 'path/to/icon.png',
-    badge: 'path/to/badge.png'
-  };
-  event.waitUntil(
-    self.registration.showNotification('New Message', options)
-  );
-});
\ No newline at end of file