feat(empty-chat): add settings for mobile

ui/components/ChatWindow.tsx

@@ -318,6 +318,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
         console.log('[DEBUG] closed');
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const messagesRef = useRef<Message[]>([]);

ui/components/EmptyChat.tsx

@@ -1,4 +1,7 @@
+import { Settings } from 'lucide-react';
 import EmptyChatMessageInput from './EmptyChatMessageInput';
+import SettingsDialog from './SettingsDialog';
+import { useState } from 'react';
 
 const EmptyChat = ({
   sendMessage,
@@ -13,8 +16,17 @@ const EmptyChat = ({
   optimizationMode: string;
   setOptimizationMode: (mode: string) => void;
 }) => {
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
   return (
     <div className="relative">
+      <SettingsDialog isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
+      <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
+        <Settings
+          className="cursor-pointer lg:hidden"
+          onClick={() => setIsSettingsOpen(true)}
+        />
+      </div>
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
         <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
           Research begins here.