From 53a60e720305b9bc2a6adbe291aab15f998578f0 Mon Sep 17 00:00:00 2001
From: Danish Arora <35004822+danisharora099@users.noreply.github.com>
Date: Tue, 1 Oct 2024 15:22:54 +0530
Subject: [PATCH] fix: build for message monitor  (#97)

---
 examples/message-monitor/package-lock.json    | 27 ++++++++++++++++---
 examples/message-monitor/package.json         |  2 +-
 .../src/components/MessageList.tsx            |  4 +--
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/examples/message-monitor/package-lock.json b/examples/message-monitor/package-lock.json
index 355af5e..fb4ac71 100644
--- a/examples/message-monitor/package-lock.json
+++ b/examples/message-monitor/package-lock.json
@@ -24,6 +24,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "autoprefixer": "^10.4.20",
         "postcss": "^8.4.47",
         "tailwindcss": "^3.4.13"
@@ -686,10 +687,18 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -2030,6 +2039,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
diff --git a/examples/message-monitor/package.json b/examples/message-monitor/package.json
index 7eca65e..e117db8 100644
--- a/examples/message-monitor/package.json
+++ b/examples/message-monitor/package.json
@@ -21,7 +21,6 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -43,6 +42,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13"
diff --git a/examples/message-monitor/src/components/MessageList.tsx b/examples/message-monitor/src/components/MessageList.tsx
index 5c67d6d..d161fe3 100644
--- a/examples/message-monitor/src/components/MessageList.tsx
+++ b/examples/message-monitor/src/components/MessageList.tsx
@@ -50,14 +50,14 @@ const MessageList: React.FC<MessageListProps> = ({ title, messages, showSequence
     <div className="flex-1 min-w-0">
       <h2 className="text-xl font-semibold mb-4 text-gray-700">{title}</h2>
       <div className="bg-gray-50 rounded-lg p-4 h-96 overflow-y-auto border border-gray-200">
-        {Object.entries(groupedMessages).reverse().map(([sequenceId, sequenceMessages]) => (
+        {Object.entries(groupedMessages).map(([sequenceId, sequenceMessages]) => (
           <div key={sequenceId} className={`mb-4 p-2 rounded-lg ${showSequence ? getSequenceColor(Number(sequenceId)) : ''}`}>
             {showSequence && <div className="text-xs font-semibold mb-2">Sequence {sequenceId}</div>}
             {sequenceMessages.map((message: Message, index: number) => (
               <div key={index} className="text-sm mb-2 font-mono bg-white p-2 rounded shadow-sm">
                 {shortenMessage(message.content)}
               </div>
-            ))}
+            )).reverse()}
           </div>
         ))}
       </div>