feat: Implement rich media messaging for images, files, and GIFs, and add message read/delivery status indicators.

src/app/(agent)/layout.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { Footer } from '@/components/layout/Footer';
 import { CommonHeader } from '@/components/layout/CommonHeader';
+import { PresenceProvider } from '@/components/providers/presence-provider';
 
 export default function AgentLayout({
   children,
@@ -38,22 +39,24 @@ export default function AgentLayout({
   }
 
   return (
-    <div className="min-h-screen bg-white flex flex-col">
-      {/* Main Content Area */}
-      <main className="flex-1">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          {/* Header Bar */}
-          <CommonHeader />
+    <PresenceProvider>
+      <div className="min-h-screen bg-white flex flex-col">
+        {/* Main Content Area */}
+        <main className="flex-1">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            {/* Header Bar */}
+            <CommonHeader />
 
-          {/* Page Content */}
-          <div className="mt-6">
-            {children}
+            {/* Page Content */}
+            <div className="mt-6">
+              {children}
+            </div>
           </div>
-        </div>
-      </main>
+        </main>
 
-      {/* Footer */}
-      <Footer />
-    </div>
+        {/* Footer */}
+        <Footer />
+      </div>
+    </PresenceProvider>
   );
 }