feat: add ChatEmptyState component and integrate it into ChatMessageList for improved user experience

src/components/chat/ChatEmptyState.tsx

@@ -0,0 +1,48 @@
+import { useI18n } from '../../i18n';
+
+export default function ChatEmptyState() {
+  const { t } = useI18n();
+
+  const suggestions = [
+    {
+      key: 'task',
+      title: t('conversation.emptyState.suggestions.task.title'),
+    },
+    {
+      key: 'continuous',
+      title: t('conversation.emptyState.suggestions.continuous.title'),
+    },
+    {
+      key: 'parallel',
+      title: t('conversation.emptyState.suggestions.parallel.title'),
+    },
+  ] as const;
+
+  return (
+    <div className="flex min-h-full items-center justify-center px-4 py-6">
+      <div className="flex w-full max-w-4xl flex-col items-center justify-center text-center">
+        <div className="h-[clamp(280px,56vh,520px)] w-full px-6 py-10 dark:bg-[radial-gradient(circle_at_top,rgba(49,73,109,0.24)_0%,rgba(24,24,27,0)_60%)]">
+          <div className="mx-auto flex h-full max-w-3xl flex-col items-center justify-center">
+            <h2
+              className="text-[clamp(40px,7vw,72px)] font-medium leading-[1.1] tracking-[-0.05em] text-[#2F3542] dark:text-[#E5E7EB]"
+              style={{ fontFamily: 'Georgia, "Songti SC", "STSong", serif' }}
+            >
+              {t('conversation.emptyState.title')}
+            </h2>
+
+            <div className="mt-9 flex max-w-3xl flex-wrap items-center justify-center gap-3">
+              {suggestions.map((suggestion) => (
+                <div
+                  key={suggestion.key}
+                  className="rounded-full border border-[#D8DEE8] bg-white/78 px-6 py-3 text-[15px] font-semibold text-[#4B5563] shadow-[0_8px_20px_rgba(15,23,42,0.04)] dark:border-[#3a3a40] dark:bg-[#202024] dark:text-gray-300"
+                >
+                  {suggestion.title}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}