added chatbot

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "lucide-react": "^0.561.0",
         "postgres": "^3.4.7",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -11453,6 +11454,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.561.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.561.0.tgz",
+      "integrity": "sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "lucide-react": "^0.561.0",
     "postgres": "^3.4.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

src/app/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import MainLayout from './layouts/MainLayout.tsx';
 import HomePage from './pages/HomePage.tsx';
 import AnalysisPage from './pages/AnalysisPage.tsx';
+import ChatPage from './pages/ChatPage.tsx';
 import { isUserRegistered } from './utils/index.ts';
 
 const App: React.FC = () => {
@@ -24,6 +25,7 @@ const App: React.FC = () => {
             }
           />
           <Route path="/analysis" element={<AnalysisPage />} />
+          <Route path="/chat" element={<ChatPage />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </MainLayout>

src/app/components/chat/ChatInput.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import { Plus, ArrowUp, Settings2, Mic, X, Check } from 'lucide-react';
+
+type ChatInputProps = {
+  onSubmit?: (message: string) => void;
+  placeholder?: string;
+};
+
+const ChatInput: React.FC<ChatInputProps> = ({
+  onSubmit,
+  placeholder = 'Ask a follow-up...',
+}) => {
+  const [input, setInput] = useState('');
+  const [isRecording, setIsRecording] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim()) {
+      if (onSubmit) {
+        onSubmit(input);
+      }
+      console.log('Submitted:', input);
+      setInput('');
+    }
+  };
+
+  const handleMicClick = () => {
+    setIsRecording(true);
+    setTimeout(() => {
+      setIsRecording(false);
+      setInput('When speech to text feature ?');
+    }, 5000);
+  };
+
+  const handleCancelRecording = () => {
+    setIsRecording(false);
+  };
+
+  const handleConfirmRecording = () => {
+    setIsRecording(false);
+    setInput('When speech to text feature ?');
+  };
+
+  const WaveAnimation: React.FC = () => {
+    const [animationKey, setAnimationKey] = useState(0);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setAnimationKey((prev) => prev + 1);
+      }, 100);
+      return () => clearInterval(interval);
+    }, []);
+
+    const bars = Array.from({ length: 50 }, (_, i) => {
+      const height = Math.random() * 20 + 4;
+      const delay = Math.random() * 2;
+      return (
+        <div
+          key={`${i}-${animationKey}`}
+          className="bg-zinc-400 dark:bg-gray-400 rounded-sm animate-pulse"
+          style={{
+            width: '2px',
+            height: `${height}px`,
+            animationDelay: `${delay}s`,
+            animationDuration: '1s',
+          }}
+        />
+      );
+    });
+
+    return (
+      <div className="flex items-center w-full gap-1">
+        <div className="flex-1 border-t-2 border-dotted border-zinc-400 dark:border-gray-500"></div>
+        <div className="flex items-center gap-0.5 justify-center px-8">{bars}</div>
+        <div className="flex-1 border-t-2 border-dotted border-zinc-400 dark:border-gray-500"></div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="relative">
+      <form onSubmit={handleSubmit} className="relative">
+        <div
+          className="border border-zinc-300 dark:border-zinc-700 rounded-2xl p-4 relative transition-all duration-500 ease-in-out overflow-hidden bg-zinc-100 dark:bg-[#141415]"
+        >
+          {isRecording ? (
+            <div className="flex items-center justify-between h-12 animate-fade-in w-full">
+              <WaveAnimation />
+              <div className="flex items-center gap-2 ml-4">
+                <button
+                  type="button"
+                  onClick={handleCancelRecording}
+                  className="h-8 w-8 p-0 text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={handleConfirmRecording}
+                  className="h-8 w-8 p-0 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center bg-teal-400 dark:bg-[#2DD4BF] text-teal-900 dark:text-[#032827]"
+                >
+                  <Check className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="animate-fade-in">
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder={placeholder}
+                className="w-full bg-transparent text-zinc-800 dark:text-gray-300 placeholder-zinc-400 dark:placeholder-gray-500 resize-none border-none outline-none text-base leading-relaxed min-h-[24px] max-h-32 transition-all duration-200"
+                rows={1}
+                onInput={(e) => {
+                  const target = e.target as HTMLTextAreaElement;
+                  target.style.height = 'auto';
+                  target.style.height = target.scrollHeight + 'px';
+                }}
+              />
+
+              <div className="flex items-center justify-between mt-8">
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    className="h-8 w-8 p-0 text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center"
+                  >
+                    <Plus className="h-5 w-5" />
+                  </button>
+
+                  <button
+                    type="button"
+                    className="h-8 w-8 p-0 text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center"
+                  >
+                    <Settings2 className="h-5 w-5" />
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={handleMicClick}
+                    className="h-8 w-8 p-0 text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95 active:bg-red-600/20 active:text-red-400 flex items-center justify-center"
+                  >
+                    <Mic className="h-5 w-5 transition-transform duration-200" />
+                  </button>
+
+                  <button
+                    type="button"
+                    className="h-8 px-3 rounded-lg text-sm font-medium hover:opacity-90 transition-all duration-200 hover:scale-105 flex items-center justify-center bg-teal-900 dark:bg-[#032827] text-teal-300 dark:text-[#2DD4BF]"
+                  >
+                    Agent
+                  </button>
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={!input.trim()}
+                  className="h-8 w-8 p-0 bg-zinc-300 dark:bg-zinc-700 hover:bg-zinc-400 dark:hover:bg-zinc-600 disabled:bg-zinc-200 dark:disabled:bg-zinc-800 disabled:text-zinc-400 dark:disabled:text-zinc-500 text-zinc-800 dark:text-white rounded-lg transition-all duration-200 hover:scale-110 disabled:hover:scale-100 flex items-center justify-center disabled:cursor-not-allowed"
+                >
+                  <ArrowUp className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ChatInput;
+

src/app/components/common/ThemeToggle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '../../hooks/useTheme.ts';
+
+const ThemeToggle: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="h-10 w-10 p-0 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center bg-zinc-200 dark:bg-zinc-700 text-zinc-800 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600"
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? (
+        <Sun className="h-5 w-5" />
+      ) : (
+        <Moon className="h-5 w-5" />
+      )}
+    </button>
+  );
+};
+
+export default ThemeToggle;
+

src/app/components/navigation/Navigation.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const Navigation: React.FC = () => {
+  return (
+    <nav className="fixed top-4 left-1/2 transform -translate-x-1/2 z-40">
+      <div className="flex items-center gap-2">
+        <NavLink
+          to="/analysis"
+          className={({ isActive }) =>
+            `px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 ${
+              isActive
+                ? 'text-zinc-900 dark:text-white border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-900'
+                : 'text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600'
+            }`
+          }
+        >
+          Analysis
+        </NavLink>
+        <NavLink
+          to="/chat"
+          className={({ isActive }) =>
+            `px-4 py-2 text-sm font-medium rounded-lg border transition-all duration-200 ${
+              isActive
+                ? 'text-zinc-900 dark:text-white border-zinc-300 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-900'
+                : 'text-zinc-500 dark:text-zinc-500 border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-600'
+            }`
+          }
+        >
+          Chatbot
+        </NavLink>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation;
+

src/app/hooks/index.ts

@@ -2,6 +2,7 @@
  * Central export point for all custom hooks
  */
 
-export { default as useApi } from './useApi';
-export { useApi as useApiHook } from './useApi';
+export { default as useApi } from './useApi.ts';
+export { useApi as useApiHook } from './useApi.ts';
+export { useTheme } from './useTheme.ts';
 

src/app/hooks/useTheme.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+const THEME_STORAGE_KEY = 'app-theme';
+
+export const useTheme = () => {
+  const [theme, setTheme] = useState<Theme>(() => {
+    // Get theme from localStorage or default to 'dark'
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY) as Theme | null;
+      return stored || 'dark';
+    }
+    return 'dark';
+  });
+
+  useEffect(() => {
+    // Apply theme to document
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    // Save to localStorage
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
+  return { theme, toggleTheme, setTheme };
+};
+

src/app/layouts/MainLayout.tsx

@@ -1,14 +1,35 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useTheme } from '../hooks/useTheme.ts';
+import ThemeToggle from '../components/common/ThemeToggle.tsx';
+import Navigation from '../components/navigation/Navigation.tsx';
 
 type MainLayoutProps = {
   children: React.ReactNode;
 };
 
-const MainLayout: React.FC<MainLayoutProps> = ({ children }) => (
-  <div className="min-h-screen">
-    {children}
-  </div>
-);
+const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    // Ensure theme is applied on mount
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+  }, [theme]);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-black transition-colors duration-200 relative">
+      <Navigation />
+      <div className="fixed top-4 right-4 z-50">
+        <ThemeToggle />
+      </div>
+      {children}
+    </div>
+  );
+};
 
 export default MainLayout;
 

src/app/pages/AnalysisPage.tsx

@@ -139,16 +139,16 @@ const AnalysisPage: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-slate-50 px-4 py-10">
+    <div className="min-h-screen bg-slate-50 dark:bg-black px-4 pt-20 pb-10 transition-colors duration-200">
       <div className="mx-auto max-w-7xl space-y-6">
         {/* Statistics Section */}
         {!isLoadingStats && userAnalysisData.length > 0 && (
-          <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
-            <div className="border-b border-slate-200 px-6 py-4">
-              <h2 className="text-lg font-semibold text-slate-800">
+          <div className="rounded-lg border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm">
+            <div className="border-b border-slate-200 dark:border-zinc-700 px-6 py-4">
+              <h2 className="text-lg font-semibold text-slate-800 dark:text-white">
                 Your Analysis Statistics
               </h2>
-              <p className="text-sm text-slate-500">
+              <p className="text-sm text-slate-500 dark:text-zinc-400">
                 Overview of all your analyzed arguments
               </p>
             </div>
@@ -159,54 +159,54 @@ const AnalysisPage: React.FC = () => {
               </div>
             ) : statsError ? (
               <div className="px-6 py-4">
-                <p className="text-sm text-red-600">{statsError}</p>
+                <p className="text-sm text-red-600 dark:text-red-400">{statsError}</p>
               </div>
             ) : (
               <div className="p-6 space-y-8">
                 {/* Summary Statistics */}
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                  <div className="bg-slate-50 rounded-lg p-4">
-                    <div className="text-2xl font-bold text-slate-800">
+                  <div className="bg-slate-50 dark:bg-zinc-800 rounded-lg p-4">
+                    <div className="text-2xl font-bold text-slate-800 dark:text-white">
                       {stanceStats.total}
                     </div>
-                    <div className="text-sm text-slate-600">Total Arguments</div>
+                    <div className="text-sm text-slate-600 dark:text-zinc-400">Total Arguments</div>
                   </div>
-                  <div className="bg-slate-50 rounded-lg p-4">
-                    <div className="text-2xl font-bold text-slate-800">
+                  <div className="bg-slate-50 dark:bg-zinc-800 rounded-lg p-4">
+                    <div className="text-2xl font-bold text-slate-800 dark:text-white">
                       {uniqueTopicsCount}
                     </div>
-                    <div className="text-sm text-slate-600">Unique Topics</div>
+                    <div className="text-sm text-slate-600 dark:text-zinc-400">Unique Topics</div>
                   </div>
-                  <div className="bg-slate-50 rounded-lg p-4">
-                    <div className="text-2xl font-bold text-slate-800">
+                  <div className="bg-slate-50 dark:bg-zinc-800 rounded-lg p-4">
+                    <div className="text-2xl font-bold text-slate-800 dark:text-white">
                       {avgArgumentLength}
                     </div>
-                    <div className="text-sm text-slate-600">Avg Length (chars)</div>
+                    <div className="text-sm text-slate-600 dark:text-zinc-400">Avg Length (chars)</div>
                   </div>
-                  <div className="bg-slate-50 rounded-lg p-4">
-                    <div className="text-2xl font-bold text-slate-800">
+                  <div className="bg-slate-50 dark:bg-zinc-800 rounded-lg p-4">
+                    <div className="text-2xl font-bold text-slate-800 dark:text-white">
                       {stanceStats.pro}
                     </div>
-                    <div className="text-sm text-slate-600">PRO Arguments</div>
+                    <div className="text-sm text-slate-600 dark:text-zinc-400">PRO Arguments</div>
                   </div>
                 </div>
 
                 {/* Charts Grid */}
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                   {/* Stance Distribution */}
-                  <div className="rounded-lg border border-slate-200 p-4">
-                    <h3 className="text-sm font-semibold text-slate-700 mb-4">
+                  <div className="rounded-lg border border-slate-200 dark:border-zinc-700 p-4">
+                    <h3 className="text-sm font-semibold text-slate-700 dark:text-zinc-300 mb-4">
                       Stance Distribution
                     </h3>
                     <StanceDistributionChart stats={stanceStats} />
                     <div className="mt-4 flex justify-center gap-6 text-sm">
                       <div>
-                        <span className="font-semibold text-green-700">
+                        <span className="font-semibold text-green-700 dark:text-green-400">
                           PRO: {stanceStats.pro} ({stanceStats.proPercentage.toFixed(1)}%)
                         </span>
                       </div>
                       <div>
-                        <span className="font-semibold text-red-700">
+                        <span className="font-semibold text-red-700 dark:text-red-400">
                           CON: {stanceStats.con} ({stanceStats.conPercentage.toFixed(1)}%)
                         </span>
                       </div>
@@ -215,13 +215,13 @@ const AnalysisPage: React.FC = () => {
 
                   {/* Time Series */}
                   {timeStats.length > 0 && (
-                    <div className="rounded-lg border border-slate-200 p-4">
-                      <h3 className="text-sm font-semibold text-slate-700 mb-4">
+                    <div className="rounded-lg border border-slate-200 dark:border-zinc-700 p-4">
+                      <h3 className="text-sm font-semibold text-slate-700 dark:text-zinc-300 mb-4">
                         Analysis Timeline
                       </h3>
                       <TimeSeriesChart data={timeStats} />
                       {oldestDate && mostRecentDate && (
-                        <div className="mt-4 text-center text-xs text-slate-500">
+                        <div className="mt-4 text-center text-xs text-slate-500 dark:text-zinc-400">
                           From {oldestDate} to {mostRecentDate}
                         </div>
                       )}
@@ -231,8 +231,8 @@ const AnalysisPage: React.FC = () => {
 
                 {/* Topic Frequency */}
                 {topicFrequency.length > 0 && (
-                  <div className="rounded-lg border border-slate-200 p-4">
-                    <h3 className="text-sm font-semibold text-slate-700 mb-4">
+                  <div className="rounded-lg border border-slate-200 dark:border-zinc-700 p-4">
+                    <h3 className="text-sm font-semibold text-slate-700 dark:text-zinc-300 mb-4">
                       Most Discussed Topics (Top 10)
                     </h3>
                     <TopicFrequencyChart data={topicFrequency} />
@@ -244,25 +244,25 @@ const AnalysisPage: React.FC = () => {
         )}
 
         {/* CSV Upload and Analysis Section */}
-        <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
-          <div className="border-b border-slate-200 px-6 py-4">
-            <h1 className="text-lg font-semibold text-slate-800">
+        <div className="rounded-lg border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm">
+          <div className="border-b border-slate-200 dark:border-zinc-700 px-6 py-4">
+            <h1 className="text-lg font-semibold text-slate-800 dark:text-white">
               Analyze New Arguments
             </h1>
-            <p className="text-sm text-slate-500">
+            <p className="text-sm text-slate-500 dark:text-zinc-400">
               Upload a CSV file containing arguments to analyze them.
             </p>
           </div>
 
           <div className="space-y-6 p-6">
           <div className="flex flex-col gap-3">
-            <label className="text-sm font-medium text-slate-700">
+            <label className="text-sm font-medium text-slate-700 dark:text-zinc-300">
               Upload a CSV file
             </label>
 
             <div className="flex flex-wrap items-center gap-3">
-              <label className="flex w-full max-w-xl cursor-pointer items-center justify-between rounded-full border border-slate-300 bg-slate-50 px-5 py-3 transition hover:border-slate-400">
-                <span className="truncate text-sm font-semibold text-slate-500">
+              <label className="flex w-full max-w-xl cursor-pointer items-center justify-between rounded-full border border-slate-300 dark:border-zinc-600 bg-slate-50 dark:bg-zinc-800 px-5 py-3 transition hover:border-slate-400 dark:hover:border-zinc-500">
+                <span className="truncate text-sm font-semibold text-slate-500 dark:text-zinc-400">
                   {fileName}
                 </span>
                 <input
@@ -277,43 +277,43 @@ const AnalysisPage: React.FC = () => {
                 type="button"
                 onClick={handleAnalyze}
                 disabled={!selectedFile || rows.length === 0 || isAnalyzing}
-                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+                className="rounded-md bg-blue-600 dark:bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 dark:hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-60"
               >
                 {isAnalyzing ? 'Analyzing...' : 'Analyze'}
               </button>
             </div>
 
-            {error && <p className="text-sm text-red-600">{error}</p>}
+            {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
           </div>
 
           {rows.length > 0 && (
-            <div className="overflow-hidden rounded-lg border border-slate-200">
-              <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
-                <h2 className="text-sm font-semibold text-slate-700">
+            <div className="overflow-hidden rounded-lg border border-slate-200 dark:border-zinc-700">
+              <div className="bg-slate-50 dark:bg-zinc-800 px-4 py-2 border-b border-slate-200 dark:border-zinc-700">
+                <h2 className="text-sm font-semibold text-slate-700 dark:text-zinc-300">
                   CSV Preview ({rows.length} rows)
                 </h2>
               </div>
-              <table className="min-w-full divide-y divide-slate-200">
-                <thead className="bg-slate-50">
+              <table className="min-w-full divide-y divide-slate-200 dark:divide-zinc-700">
+                <thead className="bg-slate-50 dark:bg-zinc-800">
                   <tr>
                     {headers.map((header) => (
                       <th
                         key={header}
                         scope="col"
-                        className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600"
+                        className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300"
                       >
                         {header}
                       </th>
                     ))}
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-slate-200 bg-white">
+                <tbody className="divide-y divide-slate-200 dark:divide-zinc-700 bg-white dark:bg-zinc-900">
                   {rows.map((row, index) => (
-                    <tr key={row.id ?? `row-${index}`} className="hover:bg-slate-50">
+                    <tr key={row.id ?? `row-${index}`} className="hover:bg-slate-50 dark:hover:bg-zinc-800">
                       {headers.map((header) => (
                         <td
                           key={`${header}-${index}`}
-                          className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700"
+                          className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700 dark:text-zinc-300"
                         >
                           {row[header] ?? ''}
                         </td>
@@ -326,63 +326,63 @@ const AnalysisPage: React.FC = () => {
           )}
 
           {analysisResults.length > 0 && (
-            <div className="overflow-hidden rounded-lg border border-slate-200">
-              <div className="bg-green-50 px-4 py-2 border-b border-slate-200">
-                <h2 className="text-sm font-semibold text-green-800">
+            <div className="overflow-hidden rounded-lg border border-slate-200 dark:border-zinc-700">
+              <div className="bg-green-50 dark:bg-green-900/20 px-4 py-2 border-b border-slate-200 dark:border-zinc-700">
+                <h2 className="text-sm font-semibold text-green-800 dark:text-green-400">
                   Analysis Results ({analysisResults.length} results)
                 </h2>
               </div>
               <div className="overflow-x-auto">
-                <table className="min-w-full divide-y divide-slate-200">
-                  <thead className="bg-slate-50">
+                <table className="min-w-full divide-y divide-slate-200 dark:divide-zinc-700">
+                  <thead className="bg-slate-50 dark:bg-zinc-800">
                     <tr>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
                         Argument
                       </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
                         Topic
                       </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
                         Stance
                       </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
                         Confidence
                       </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
                         PRO
                       </th>
-                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600 dark:text-zinc-300">
                         CON
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-slate-200 bg-white">
+                  <tbody className="divide-y divide-slate-200 dark:divide-zinc-700 bg-white dark:bg-zinc-900">
                     {analysisResults.map((result) => (
-                      <tr key={result.id} className="hover:bg-slate-50">
-                        <td className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700 max-w-md">
+                      <tr key={result.id} className="hover:bg-slate-50 dark:hover:bg-zinc-800">
+                        <td className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700 dark:text-zinc-300 max-w-md">
                           {result.argument}
                         </td>
-                        <td className="px-4 py-3 text-sm text-slate-700">
+                        <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
                           {result.topic}
                         </td>
                         <td className="px-4 py-3 text-sm">
                           <span
                             className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${
                               result.predicted_stance === 'PRO'
-                                ? 'bg-green-100 text-green-800'
-                                : 'bg-red-100 text-red-800'
+                                ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400'
+                                : 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400'
                             }`}
                           >
                             {result.predicted_stance}
                           </span>
                         </td>
-                        <td className="px-4 py-3 text-sm text-slate-700">
+                        <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
                           {(result.confidence * 100).toFixed(1)}%
                         </td>
-                        <td className="px-4 py-3 text-sm text-slate-700">
+                        <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
                           {(result.probability_pro * 100).toFixed(1)}%
                         </td>
-                        <td className="px-4 py-3 text-sm text-slate-700">
+                        <td className="px-4 py-3 text-sm text-slate-700 dark:text-zinc-300">
                           {(result.probability_con * 100).toFixed(1)}%
                         </td>
                       </tr>

src/app/pages/ChatPage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ChatInput from '../components/chat/ChatInput.tsx';
+
+const ChatPage: React.FC = () => {
+  const handleMessageSubmit = (message: string) => {
+    console.log('Message submitted:', message);
+    // TODO: Implement chat message handling
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white dark:bg-black px-4 pt-20 pb-10 transition-colors duration-200">
+      <div className="w-full max-w-4xl">
+        <ChatInput onSubmit={handleMessageSubmit} />
+      </div>
+    </div>
+  );
+};
+
+export default ChatPage;
+

src/app/pages/HomePage.tsx

@@ -44,20 +44,20 @@ const HomePage: React.FC = () => {
 
   if (isLoading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-50">
+      <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-black">
         <Loading />
       </div>
     );
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10">
-      <div className="w-full max-w-md rounded-lg border border-slate-200 bg-white shadow-sm">
-        <div className="border-b border-slate-200 px-6 py-6">
-          <h1 className="text-2xl font-bold text-slate-800">
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-black px-4 py-10 transition-colors duration-200">
+      <div className="w-full max-w-md rounded-lg border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm">
+        <div className="border-b border-slate-200 dark:border-zinc-700 px-6 py-6">
+          <h1 className="text-2xl font-bold text-slate-800 dark:text-white">
             Welcome to NLP IBM Debater
           </h1>
-          <p className="mt-2 text-sm text-slate-500">
+          <p className="mt-2 text-sm text-slate-500 dark:text-zinc-400">
             Enter your name to get started, or skip to use a random name.
           </p>
         </div>
@@ -66,7 +66,7 @@ const HomePage: React.FC = () => {
           <div>
             <label
               htmlFor="name"
-              className="block text-sm font-medium text-slate-700"
+              className="block text-sm font-medium text-slate-700 dark:text-zinc-300"
             >
               Your Name (Optional)
             </label>
@@ -77,14 +77,14 @@ const HomePage: React.FC = () => {
               onChange={(e) => setName(e.target.value)}
               placeholder="Enter your name"
               maxLength={100}
-              className="mt-2 w-full rounded-md border border-slate-300 px-4 py-2 text-sm text-slate-700 placeholder-slate-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20"
+              className="mt-2 w-full rounded-md border border-slate-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-4 py-2 text-sm text-slate-700 dark:text-white placeholder-slate-400 dark:placeholder-zinc-500 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20"
               disabled={isLoading}
             />
           </div>
 
           {error && (
-            <div className="rounded-md bg-red-50 p-3">
-              <p className="text-sm text-red-600">{error}</p>
+            <div className="rounded-md bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
             </div>
           )}
 
@@ -92,7 +92,7 @@ const HomePage: React.FC = () => {
             <button
               type="submit"
               disabled={isLoading}
-              className="flex-1 rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
+              className="flex-1 rounded-md bg-blue-600 dark:bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-60"
             >
               Continue
             </button>
@@ -100,7 +100,7 @@ const HomePage: React.FC = () => {
               type="button"
               onClick={handleSkip}
               disabled={isLoading}
-              className="flex-1 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
+              className="flex-1 rounded-md border border-slate-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-4 py-2 text-sm font-semibold text-slate-700 dark:text-zinc-200 transition hover:bg-slate-50 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-slate-500 dark:focus:ring-zinc-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 disabled:cursor-not-allowed disabled:opacity-60"
             >
               Skip (Random Name)
             </button>

src/index.js

@@ -5,6 +5,14 @@ import App from './app/App.tsx';
 import ErrorBoundary from './app/components/common/ErrorBoundary.tsx';
 import reportWebVitals from './reportWebVitals';
 
+// Initialize theme from localStorage before rendering to prevent flash
+const storedTheme = localStorage.getItem('app-theme') || 'dark';
+if (storedTheme === 'dark') {
+  document.documentElement.classList.add('dark');
+} else {
+  document.documentElement.classList.remove('dark');
+}
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>

tailwind.config.js

@@ -1,8 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 0.5s ease-in-out',
+      },
+    },
   },
   plugins: [],
 };