Fix types and render packets in a custom style

web/src/components/packets/TextMessagePacket.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Packet } from "../../lib/types";
+import { MessageSquareText } from "lucide-react";
+
+interface TextMessagePacketProps {
+  packet: Packet;
+}
+
+export const TextMessagePacket: React.FC<TextMessagePacketProps> = ({ packet }) => {
+  const { data } = packet;
+  
+  return (
+    <div className="p-4 border border-neutral-700 rounded bg-neutral-800 shadow-inner">
+      <div className="flex justify-between items-start mb-3">
+        <div className="flex items-center">
+          <div className="rounded-md bg-blue-500 p-1.5 mr-3">
+            <MessageSquareText className="h-4 w-4 text-neutral-100" />
+          </div>
+          <span className="font-medium text-neutral-200">
+            From: {data.from || "Unknown"}
+          </span>
+        </div>
+        <span className="text-neutral-400 text-sm">
+          ID: {data.id || "No ID"}
+        </span>
+      </div>
+      
+      <div className="mb-3 text-neutral-300 pl-9">
+        {data.textMessage || "Empty message"}
+      </div>
+      
+      <div className="mt-3 flex justify-between items-center text-xs text-neutral-500">
+        <span>Channel: {packet.info.channel}</span>
+        <span>Text Message</span>
+      </div>
+    </div>
+  );
+};