refactor: Remove deprecated agent dashboard and message components, add FAQ page, and introduce a new generic messaging system.

src/components/message/ChatHeader.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import Image from 'next/image';
+
+interface ChatHeaderProps {
+  name: string;
+  role: string;
+  lastSeen: string;
+  avatar: string;
+  isOnline?: boolean;
+  pronouns?: string;
+  expertise?: string[];
+}
+
+export function ChatHeader({
+  name,
+  role,
+  lastSeen,
+  avatar,
+  isOnline = false,
+  pronouns,
+  expertise = [],
+}: ChatHeaderProps) {
+  return (
+    <div className="border-b border-[#00293d]/10 pb-4">
+      {/* Top row - Name, status, actions */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <h2 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+            {name}
+          </h2>
+          <span className={`w-2.5 h-2.5 rounded-full ${isOnline ? 'bg-green-500' : 'bg-gray-400'}`} />
+          <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
+            {role}
+          </span>
+          <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
+            {lastSeen}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/three-dots-horizontal-icon.svg"
+              alt="More options"
+              width={24}
+              height={24}
+            />
+          </button>
+          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
+            <Image
+              src="/assets/icons/star-outline-icon.svg"
+              alt="Star conversation"
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
+      </div>
+
+      {/* User profile row */}
+      <div className="flex items-start gap-3">
+        {/* Avatar */}
+        <div className="relative flex-shrink-0">
+          <div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20">
+            <Image
+              src={avatar}
+              alt={name}
+              width={50}
+              height={50}
+              className="w-full h-full object-cover rounded-full"
+            />
+          </div>
+          {isOnline && (
+            <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
+          )}
+        </div>
+
+        {/* User info */}
+        <div className="flex-1">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+              {name}
+            </span>
+            <Image
+              src="/assets/icons/shield-verified-icon.svg"
+              alt="Verified"
+              width={17}
+              height={18}
+            />
+            {pronouns && (
+              <span className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
+                ({pronouns})
+              </span>
+            )}
+          </div>
+
+          {/* Expertise tags */}
+          {expertise.length > 0 && (
+            <div className="flex items-center gap-2 flex-wrap">
+              {expertise.map((tag, index) => (
+                <span key={index} className="flex items-center">
+                  <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
+                    {tag}
+                  </span>
+                  {index < expertise.length - 1 && (
+                    <span className="mx-2 text-[#00293d]/30">|</span>
+                  )}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}