Optimize form loading and update product selection UI

Dynamically import ChatDetail, NewChatForm, and ProductSelector components with skeleton loading states for improved performance. Refine product selection logic in promotion forms to show blacklist selector only for 'all' mode and clarify labels and descriptions for better user understanding.

app/dashboard/chats/[id]/page.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Metadata } from "next";
-import ChatDetail from "@/components/dashboard/ChatDetail";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
 import Dashboard from "@/components/dashboard/dashboard";
 
 export const metadata: Metadata = {
@@ -16,6 +17,21 @@ interface PageProps {
 
 export default async function ChatDetailPage({ params }: PageProps) {
   const { id } = await params;
+  const ChatDetail = dynamic(() => import("@/components/dashboard/ChatDetail"), {
+    loading: () => (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-48" />
+          <div className="flex gap-2">
+            <Skeleton className="h-9 w-24" />
+            <Skeleton className="h-9 w-24" />
+          </div>
+        </div>
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-96 w-full" />
+      </div>
+    )
+  });
   return (
     <Dashboard>
       <ChatDetail chatId={id} />