Upload 16 files

src/App.tsx

@@ -1,566 +1,24 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Send, MapPin, User, Users, DollarSign, Briefcase, CheckCircle, Bot } from 'lucide-react';
-import InsuCompassLogo from './assets/InsuCompass_Logo.png';
-import ReactMarkdown from 'react-markdown';
+import React, { useState } from 'react';
+import ProfilingScreen from './screens/ProfileScreen/ProfilingScreen';
+import ChatInterfaceScreen from './screens/ChatInterfaceScreen/ChatInterfaceScreen';
+import { UserProfile } from './interface';
 
-// Types
-interface UserProfile {
-  zip_code?: string;
-  city?: string;
-  state?: string;
-  county?: string;
-  age?: number;
-  gender?: string;
-  household_size?: number;
-  income?: number;
-  employment_status?: string;
-  citizenship?: string;
-  medical_history?: string | null;
-  medications?: string | null;
-  special_cases?: string | null;
-}
-
-interface ChatMessage {
-  role: 'user' | 'agent';
-  content: string;
-  timestamp: number;
-}
-
-interface Plan {
-  plan_name: string;
-  plan_type: string;
-  key_features: string[];
-  estimated_premium: string;
-  reasoning: string;
-}
-
-interface PlanRecommendations {
-  recommendations: Plan[];
-}
-
-interface ApiResponse {
-  updated_profile: UserProfile;
-  updated_history: string[];
-  is_profile_complete: boolean;
-  plan_recommendations?: PlanRecommendations | null;
-} 
-
-// Constants
-const BACKEND_URL = "https://nagur-shareef-shaik-insucompass-api.hf.space/api";
-
-/* PlanCard helper */
-const PlanCard: React.FC<{ plan: Plan }> = ({ plan }) => (
-  <div className="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 hover:shadow-lg transition">
-    <h3 className="text-xl font-semibold text-gray-900">{plan.plan_name}</h3>
-    <p className="text-sm text-gray-600 mb-2">{plan.plan_type}</p>
-
-    <p className="text-sm italic text-gray-700 mb-4">{plan.reasoning}</p>
-
-    <p className="text-sm font-medium text-gray-800 mb-2">
-      Estimated Premium: {plan.estimated_premium}
-    </p>
-
-    <ul className="list-disc list-inside space-y-1 text-sm text-gray-700">
-      {plan.key_features.map((feat, i) => (
-        <li key={i}>{feat}</li>
-      ))}
-    </ul>
-  </div>
-);
-
-const InsuCompassApp: React.FC = () => {
-  const [threadId] = useState(() => crypto.randomUUID());
-  const [userProfile, setUserProfile] = useState<UserProfile>({});
-  const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
-  const [isProfileComplete, setIsProfileComplete] = useState(false);
+const App: React.FC = () => {
   const [phase, setPhase] = useState<'profiling' | 'chat'>('profiling');
-  const [isLoading, setIsLoading] = useState(false);
-  const [currentMessage, setCurrentMessage] = useState('');
-  const [isValidatingZip, setIsValidatingZip] = useState(false);
-  const [zipError, setZipError] = useState('');
-  const [planRecs, setPlanRecs] = useState<Plan[] | null>(null);   // NEW
-  const chatEndRef = useRef<HTMLDivElement>(null);
-
-  // Form state
-  const [formData, setFormData] = useState({
-    zip_code: '',
-    age: '',
-    gender: '',
-    household_size: '',
-    income: '',
-    employment_status: '',
-    citizenship: ''
-  });
-
-  // Auto-scroll to bottom of chat
-  useEffect(() => {
-    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [chatHistory]);
-
-  // API Functions
-  const getGeodata = async (zipCode: string) => {
-    setIsValidatingZip(true);
-    setZipError('');
-    try {
-      const response = await fetch(`${BACKEND_URL}/geodata/${zipCode}`);
-      if (!response.ok) throw new Error('Invalid ZIP code');
-      const data = await response.json();
-      setUserProfile(prev => ({ ...prev, ...data }));
-      setFormData(prev => ({ ...prev, zip_code: zipCode }));
-      return data;
-    } catch (error) {
-      setZipError('Invalid ZIP code or could not retrieve location data');
-      return null;
-    } finally {
-      setIsValidatingZip(false);
-    }
-  };
-
-
-  const sendChatMessage = async (message: string, profileOverride?: UserProfile) => {
-    setIsLoading(true);
-    try {
-      const payload = {
-        thread_id: threadId,
-        user_profile: profileOverride ?? userProfile,
-        message,
-        is_profile_complete: isProfileComplete,
-        conversation_history: chatHistory.map(m => `${m.role}: ${m.content}`)
-      };
-
-      const response = await fetch(`${BACKEND_URL}/chat`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
-      });
-
-      if (!response.ok) throw new Error('Failed to send message');
-      
-      const data: ApiResponse = await response.json();
-      
-      // Update state from backend response
-      setUserProfile(data.updated_profile);
-      setIsProfileComplete(data.is_profile_complete);
-
-      if (data.plan_recommendations?.recommendations && !planRecs) {
-        setPlanRecs(data.plan_recommendations.recommendations);
-      }
-      
-      // Convert backend history format to our chat format
-      const newHistory: ChatMessage[] = data.updated_history.map(msg => {
-        const [role, ...contentParts] = msg.split(':');
-        return {
-          role: role.toLowerCase() as 'user' | 'agent',
-          content: contentParts.join(':').trim(),
-          timestamp: Date.now()
-        };
-      });
-      
-      setChatHistory(newHistory);
-    } catch (error) {
-      console.error('Error sending message:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Handle ZIP code input
-  const handleZipChange = async (value: string) => {
-    const numericValue = value.replace(/\D/g, '').slice(0, 5);
-    setFormData(prev => ({ ...prev, zip_code: numericValue }));
-    
-    if (numericValue.length === 5) {
-      await getGeodata(numericValue);
-    }
-  };
-
-  // Handle form submission
-  const handleSubmit = async () => {
-    
-    // Validate all fields
-    const requiredFields = ['age', 'gender', 'household_size', 'income', 'employment_status', 'citizenship'];
-    const missingFields = requiredFields.filter(field => !formData[field as keyof typeof formData]);
-    
-    if (missingFields.length > 0) {
-      alert('Please fill out all fields to continue.');
-      return;
-    }
-
-    // Update user profile
-    // const updatedProfile: UserProfile = {
-    //   ...userProfile,
-    //   age: +formData.age,
-    //   gender: formData.gender,
-    //   household_size: +formData.household_size,
-    //   income: +formData.income,
-    //   employment_status: formData.employment_status,
-    //   citizenship: formData.citizenship
-    // };
+  const [userProfile, setUserProfile] = useState<UserProfile>({});
 
-    // Update user profile
-    const updatedProfile: UserProfile = {
-      ...userProfile,
-      age: +formData.age,
-      gender: formData.gender,
-      household_size: +formData.household_size,
-      income: +formData.income,
-      employment_status: formData.employment_status,
-      citizenship: formData.citizenship,
-      medical_history: null,
-      medications: null,
-      special_cases: null
-    };
-    
-    setUserProfile(updatedProfile);
+  // Handler to move from profiling to chat, passing userProfile if needed
+  const handleStartChat = (profile: UserProfile) => {
+    console.log('Starting chat with profile:', profile);
+    setUserProfile(profile);
     setPhase('chat');
-    
-    // Start profile building conversation
-    await sendChatMessage('START_PROFILE_BUILDING', updatedProfile);
   };
 
-  // Handle chat message send
-  const handleSendMessage = async () => {
-    if (!currentMessage.trim()) return;
-    
-    // Add user message to chat immediately
-    const userMessage: ChatMessage = {
-      role: 'user',
-      content: currentMessage,
-      timestamp: Date.now()
-    };
-    
-    setChatHistory(prev => [...prev, userMessage]);
-    const messageToSend = currentMessage;
-    setCurrentMessage('');
-    
-    await sendChatMessage(messageToSend);
-  };
-
-  // Render profile form
-  const renderProfileForm = () => (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
-      {/* Header */}
-      <div className="fixed top-0 left-0 w-full bg-white shadow-sm border-b z-50">
-        <div className="max-w-10xl mx-auto px-6 py-4">
-          <div className="flex items-center space-x-3">
-            <img src={InsuCompassLogo} alt="InsuCompass Logo" className="h-12 w-auto" />
-            <div>
-              <h1 className="text-2xl font-bold text-gray-900">InsuCompass</h1>
-              <p className="text-sm text-gray-600">Your AI guide to U.S. Health Insurance</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 overflow-y-auto pt-20">
-      <div className="max-w-2xl mx-auto px-6 py-12">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-4">Let's Get Started</h2>
-          <p className="text-lg text-gray-600">Tell us about yourself to receive personalized insurance guidance</p>
-        </div>
-
-        <div className="space-y-6">
-          {/* ZIP Code Section */}
-          <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-            <div className="flex items-center space-x-3 mb-4">
-              <MapPin className="w-5 h-5 text-blue-500" />
-              <h3 className="text-lg font-semibold text-gray-900">Location</h3>
-            </div>
-            
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  ZIP Code
-                </label>
-                <input
-                  type="text"
-                  value={formData.zip_code}
-                  onChange={(e) => handleZipChange(e.target.value)}
-                  placeholder="Enter your 5-digit ZIP code"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-                  maxLength={5}
-                />
-                {isValidatingZip && (
-                  <p className="text-sm text-blue-600 mt-1">Validating ZIP code...</p>
-                )}
-                {zipError && (
-                  <p className="text-sm text-red-600 mt-1">{zipError}</p>
-                )}
-              </div>
-
-              {userProfile.city && (
-                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
-                  <div className="flex items-center space-x-2">
-                    <CheckCircle className="w-5 h-5 text-green-500" />
-                    <span className="font-medium text-green-800">Location Verified</span>
-                  </div>
-                  <p className="text-sm text-green-700 mt-1">
-                    {userProfile.county} County, {userProfile.city}, {userProfile.state}
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Personal Information */}
-          {userProfile.city && (
-            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-              <div className="flex items-center space-x-3 mb-4">
-                <User className="w-5 h-5 text-blue-500" />
-                <h3 className="text-lg font-semibold text-gray-900">Personal Information</h3>
-              </div>
-              
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">Age</label>
-                  <input
-                    type="number"
-                    value={formData.age}
-                    onChange={(e) => setFormData(prev => ({ ...prev, age: e.target.value }))}
-                    placeholder="Enter your age"
-                    min="1"
-                    max="120"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-                  />
-                </div>
-                
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">Gender</label>
-                  <select
-                    value={formData.gender}
-                    onChange={(e) => setFormData(prev => ({ ...prev, gender: e.target.value }))}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-                  >
-                    <option value="">Select an option</option>
-                    <option value="Male">Male</option>
-                    <option value="Female">Female</option>
-                    <option value="Non-binary">Non-binary</option>
-                    <option value="Prefer not to say">Prefer not to say</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Household Information */}
-          {userProfile.city && (
-            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-              <div className="flex items-center space-x-3 mb-4">
-                <Users className="w-5 h-5 text-blue-500" />
-                <h3 className="text-lg font-semibold text-gray-900">Household Information</h3>
-              </div>
-              
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">Household Size</label>
-                  <input
-                    type="number"
-                    value={formData.household_size}
-                    onChange={(e) => setFormData(prev => ({ ...prev, household_size: e.target.value }))}
-                    placeholder="Including yourself"
-                    min="1"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-                  />
-                </div>
-                
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">Annual Income</label>
-                  <div className="relative">
-                    <DollarSign className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
-                    <input
-                      type="number"
-                      value={formData.income}
-                      onChange={(e) => setFormData(prev => ({ ...prev, income: e.target.value }))}
-                      placeholder="55000"
-                      min="0"
-                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Employment & Citizenship */}
-          {userProfile.city && (
-            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-              <div className="flex items-center space-x-3 mb-4">
-                <Briefcase className="w-5 h-5 text-blue-500" />
-                <h3 className="text-lg font-semibold text-gray-900">Employment & Status</h3>
-              </div>
-              
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">Employment Status</label>
-                  <select
-                    value={formData.employment_status}
-                    onChange={(e) => setFormData(prev => ({ ...prev, employment_status: e.target.value }))}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-                  >
-                    <option value="">Select an option</option>
-                    <option value="Employed with employer coverage">Employed with employer coverage</option>
-                    <option value="Employed without coverage">Employed without coverage</option>
-                    <option value="Unemployed">Unemployed</option>
-                    <option value="Retired">Retired</option>
-                    <option value="Student">Student</option>
-                    <option value="Self-employed">Self-employed</option>
-                  </select>
-                </div>
-                
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">Citizenship Status</label>
-                  <select
-                    value={formData.citizenship}
-                    onChange={(e) => setFormData(prev => ({ ...prev, citizenship: e.target.value }))}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-                  >
-                    <option value="">Select an option</option>
-                    <option value="US Citizen">US Citizen</option>
-                    <option value="Lawful Permanent Resident">Lawful Permanent Resident</option>
-                    <option value="Other legal resident">Other legal resident</option>
-                    <option value="Non-resident">Non-resident</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Submit Button */}
-          {userProfile.city && (
-            <button
-              onClick={handleSubmit}
-              disabled={isLoading}
-              className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-8 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isLoading ? 'Starting Session...' : 'Start My Personalized Session'}
-            </button>
-          )}
-        </div>
-      </div>
-      </div>
-    </div>
-  );
-
-  // Render chat interface
-  const renderChatInterface = () => (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex flex-col">
-      {/* Header */}
-      <div className="fixed top-0 left-0 w-full bg-white shadow-sm border-b z-50">
-        <div className="max-w-10xl mx-auto px-6 py-4">
-          <div className="flex items-center space-x-3">
-            <img src={InsuCompassLogo} alt="InsuCompass Logo" className="h-12 w-auto" />
-            <div>
-              <h1 className="text-2xl font-bold text-gray-900">InsuCompass</h1>
-              <p className="text-sm text-gray-600">Chat with your AI insurance advisor</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Chat Messages */}
-      <div className="flex-1 overflow-y-auto pt-20">
-        <div className="max-w-4xl mx-auto px-6 py-8">
-          <div className="space-y-6">
-            {planRecs && (
-              <>
-                <h2 className="text-2xl font-bold text-gray-900">Recommended Plans for You</h2>
-                <div className="grid md:grid-cols-2 gap-6">
-                  {planRecs.map((plan, idx) => (
-                    <PlanCard key={idx} plan={plan} />
-                  ))}
-                </div>
-              </>
-            )}
-            {chatHistory.map((message, index) => (
-              <div
-                key={index}
-                className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
-              >
-                <div className={`flex items-start space-x-3 max-w-3xl ${message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''}`}>
-                  {/* Avatar */}
-                  <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
-                    message.role === 'user' 
-                      ? 'bg-blue-500 text-white' 
-                      : 'bg-gradient-to-r from-purple-500 to-pink-500 text-white'
-                  }`}>
-                    {message.role === 'user' ? (
-                      <User className="w-5 h-5" />
-                    ) : (
-                      <Bot className="w-5 h-5" />
-                    )}
-                  </div>
-
-                  {/* Message Bubble */}
-                  <div className={`px-6 py-4 rounded-2xl shadow-sm ${
-                    message.role === 'user'
-                      ? 'bg-blue-500 text-white rounded-tr-sm'
-                      : 'bg-white text-gray-900 rounded-tl-sm border border-gray-200'
-                  }`}>
-                    <div className="text-sm font-medium mb-1 opacity-75">
-                      {message.role === 'user' ? 'You' : 'InsuCompass AI'}
-                    </div>
-                    {/* <div className="whitespace-pre-wrap">{message.content}</div> */}
-                    <ReactMarkdown className="prose prose-sm max-w-none prose-table:border prose-table:border-gray-300 prose-th:bg-gray-100 prose-th:p-2 prose-td:p-2 prose-td:border prose-td:border-gray-300">
-                      {message.content}
-                    </ReactMarkdown>
-                  </div>
-                </div>
-              </div>
-            ))}
-            
-            {/* Loading indicator */}
-            {isLoading && (
-              <div className="flex justify-start">
-                <div className="flex items-start space-x-3">
-                  <div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center">
-                    <Bot className="w-5 h-5" />
-                  </div>
-                  <div className="bg-white px-6 py-4 rounded-2xl rounded-tl-sm border border-gray-200">
-                    <div className="flex space-x-2">
-                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-            
-            <div ref={chatEndRef} />
-          </div>
-        </div>
-      </div>
-
-      {/* Message Input */}
-      <div className="bg-white border-t border-gray-200 p-4">
-        <div className="max-w-4xl mx-auto">
-          <div className="flex items-center space-x-4">
-            <div className="flex-1 relative">
-              <input
-                type="text"
-                value={currentMessage}
-                onChange={(e) => setCurrentMessage(e.target.value)}
-                onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
-                placeholder="Type your message..."
-                className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
-                disabled={isLoading}
-              />
-              <button
-                onClick={handleSendMessage}
-                disabled={isLoading || !currentMessage.trim()}
-                className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                <Send className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  return phase === 'profiling' ? (
+    <ProfilingScreen onComplete={handleStartChat} />
+  ) : (
+    <ChatInterfaceScreen userProfile={userProfile} />
   );
-
-  return phase === 'profiling' ? renderProfileForm() : renderChatInterface();
 };
 
-export default InsuCompassApp;
+export default App;

src/components/EmploymentSection.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Briefcase } from 'lucide-react';
+
+interface Props {
+  formData: { employment_status: string; citizenship: string };
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+
+const EmploymentSection: React.FC<Props> = ({ formData, onChange }) => (
+  <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+    <div className="flex items-center space-x-3 mb-4">
+      <Briefcase className="w-5 h-5 text-blue-500" />
+      <h3 className="text-lg font-semibold text-gray-900">Employment & Status</h3>
+    </div>
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Employment Status</label>
+        <select
+          name="employment_status"
+          value={formData.employment_status}
+          onChange={onChange}
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+        >
+          <option value="">Select an option</option>
+          <option value="Employed with employer coverage">Employed with employer coverage</option>
+          <option value="Employed without coverage">Employed without coverage</option>
+          <option value="Unemployed">Unemployed</option>
+          <option value="Retired">Retired</option>
+          <option value="Student">Student</option>
+          <option value="Self-employed">Self-employed</option>
+        </select>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Citizenship Status</label>
+        <select
+          name="citizenship"
+          value={formData.citizenship}
+          onChange={onChange}
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+        >
+          <option value="">Select an option</option>
+          <option value="US Citizen">US Citizen</option>
+          <option value="Lawful Permanent Resident">Lawful Permanent Resident</option>
+          <option value="Other legal resident">Other legal resident</option>
+          <option value="Non-resident">Non-resident</option>
+        </select>
+      </div>
+    </div>
+  </div>
+);
+
+export default EmploymentSection;

src/components/HouseholdInfoSection.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Users, DollarSign } from 'lucide-react';
+
+interface Props {
+  formData: { household_size: string; income: string };
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const HouseholdInfoSection: React.FC<Props> = ({ formData, onChange }) => (
+  <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+    <div className="flex items-center space-x-3 mb-4">
+      <Users className="w-5 h-5 text-blue-500" />
+      <h3 className="text-lg font-semibold text-gray-900">Household Information</h3>
+    </div>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Household Size</label>
+        <input
+          type="number"
+          name="household_size"
+          value={formData.household_size}
+          onChange={onChange}
+          placeholder="Including yourself"
+          min="1"
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Annual Income</label>
+        <div className="relative">
+          <DollarSign className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
+          <input
+            type="number"
+            name="income"
+            value={formData.income}
+            onChange={onChange}
+            placeholder="55000"
+            min="0"
+            className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default HouseholdInfoSection;

src/components/LocationSection.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { MapPin, CheckCircle } from 'lucide-react';
+
+interface Props {
+  formData: { zip_code: string };
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isValidatingZip: boolean;
+  zipError: string;
+  userProfile: { city?: string; county?: string; state?: string };
+}
+
+const LocationSection: React.FC<Props> = ({ formData, onChange, isValidatingZip, zipError, userProfile }) => (
+  <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+    <div className="flex items-center space-x-3 mb-4">
+      <MapPin className="w-5 h-5 text-blue-500" />
+      <h3 className="text-lg font-semibold text-gray-900">Location</h3>
+    </div>
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          ZIP Code
+        </label>
+        <input
+          type="text"
+          name="zip_code"
+          value={formData.zip_code}
+          onChange={onChange}
+          placeholder="Enter your 5-digit ZIP code"
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+          maxLength={5}
+        />
+        {isValidatingZip && (
+          <p className="text-sm text-blue-600 mt-1">Validating ZIP code...</p>
+        )}
+        {zipError && (
+          <p className="text-sm text-red-600 mt-1">{zipError}</p>
+        )}
+      </div>
+      {userProfile.city && (
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+          <div className="flex items-center space-x-2">
+            <CheckCircle className="w-5 h-5 text-green-500" />
+            <span className="font-medium text-green-800">Location Verified</span>
+          </div>
+          <p className="text-sm text-green-700 mt-1">
+            {userProfile.county} County, {userProfile.city}, {userProfile.state}
+          </p>
+        </div>
+      )}
+    </div>
+  </div>
+);
+
+export default LocationSection;

src/components/PersonalInfoSection.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { User } from 'lucide-react';
+
+interface Props {
+  formData: { age: string; gender: string };
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+}
+
+const PersonalInfoSection: React.FC<Props> = ({ formData, onChange }) => (
+  <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+    <div className="flex items-center space-x-3 mb-4">
+      <User className="w-5 h-5 text-blue-500" />
+      <h3 className="text-lg font-semibold text-gray-900">Personal Information</h3>
+    </div>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Age</label>
+        <input
+          type="number"
+          name="age"
+          value={formData.age}
+          onChange={onChange}
+          placeholder="Enter your age"
+          min="1"
+          max="120"
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Gender</label>
+        <select
+          name="gender"
+          value={formData.gender}
+          onChange={onChange}
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+        >
+          <option value="">Select an option</option>
+          <option value="Male">Male</option>
+          <option value="Female">Female</option>
+          <option value="Non-binary">Non-binary</option>
+          <option value="Prefer not to say">Prefer not to say</option>
+        </select>
+      </div>
+    </div>
+  </div>
+);
+
+export default PersonalInfoSection;

src/endpoint.ts

@@ -0,0 +1,3 @@
+const BACKEND_URL = "https://nagur-shareef-shaik-insucompass-api.hf.space/api";
+export const CHAT_ENDPOINT = `${BACKEND_URL}/chat`;
+export const GEODATA_ENDPOINT = `${BACKEND_URL}/geodata`;

src/interface.ts

@@ -0,0 +1,41 @@
+export interface ApiResponse {
+  updated_profile: UserProfile;
+  updated_history: string[];
+  is_profile_complete: boolean;
+  plan_recommendations?: PlanRecommendations | null;
+}
+
+export interface Plan {
+  plan_name: string;
+  plan_type: string;
+  key_features: string[];
+  estimated_premium: string;
+  reasoning: string;
+}
+
+export interface UserProfile {
+  zip_code?: string;
+  city?: string;
+  state?: string;
+  county?: string;
+  age?: number;
+  gender?: string;
+  household_size?: number;
+  income?: number;
+  employment_status?: string;
+  citizenship?: string;
+  medical_history?: string | null;
+  medications?: string | null;
+  special_cases?: string | null;
+}
+
+export interface PlanRecommendations {
+  recommendations: Plan[];
+}
+
+export interface ChatMessage {
+  role: 'user' | 'agent';
+  content: string;
+  timestamp: number;
+  plans?: Plan[];
+}

src/screens/ChatInterfaceScreen/ChatInterfaceScreen.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect } from 'react';
+import { Send, User, Bot } from 'lucide-react';
+import InsuCompassLogo from '../../assets/InsuCompass_Logo.png';
+import ReactMarkdown from 'react-markdown';
+import { useChatInterface } from './useChatInterface';
+import { Plan, UserProfile } from '../../interface';
+
+const PlanCard: React.FC<{ plan: Plan }> = ({ plan }) => (
+  <div className="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 hover:shadow-lg transition">
+    <h3 className="text-xl font-semibold text-gray-900">{plan.plan_name}</h3>
+    <p className="text-sm text-gray-600 mb-2">{plan.plan_type}</p>
+    <p className="text-sm italic text-gray-700 mb-4">{plan.reasoning}</p>
+    <p className="text-sm font-medium text-gray-800 mb-2">
+      Estimated Premium: {plan.estimated_premium}
+    </p>
+    <ul className="list-disc list-inside space-y-1 text-sm text-gray-700">
+      {plan.key_features.map((feat, i) => (
+        <li key={i}>{feat}</li>
+      ))}
+    </ul>
+  </div>
+);
+
+interface ChatInterfaceScreenProps {
+  userProfile: UserProfile;
+}
+
+const ChatInterfaceScreen: React.FC<ChatInterfaceScreenProps> = ({ userProfile }) => {
+  const {
+    chatHistory,
+    isLoading,
+    currentMessage,
+    setCurrentMessage,
+    handleSendMessage,
+    showPlanRecs,
+    chatEndRef,
+    sendChatMessage
+  } = useChatInterface(userProfile);
+
+  useEffect(() => {
+    if (chatHistory.length === 0) {
+      sendChatMessage('START_PROFILE_BUILDING', userProfile);
+    }
+  }, [userProfile])
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex flex-col">
+      {/* Header */}
+      <div className="fixed top-0 left-0 w-full bg-white shadow-sm border-b z-50">
+        <div className="max-w-10xl mx-auto px-6 py-4">
+          <div className="flex items-center space-x-3">
+            <img src={InsuCompassLogo} alt="InsuCompass Logo" className="h-12 w-auto" />
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">InsuCompass</h1>
+              <p className="text-sm text-gray-600">Chat with your AI insurance advisor</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Chat Messages */}
+      <div className="flex-1 overflow-y-auto pt-20">
+        <div className="max-w-4xl mx-auto px-6 py-8">
+          <div className="space-y-6">
+            {chatHistory.map((message, index) => (
+              <div
+                key={index}
+                className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+              >
+                <div className={`flex items-start space-x-3 max-w-3xl ${message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''}`}>
+                  {/* Avatar */}
+                  <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                    message.role === 'user' 
+                      ? 'bg-blue-500 text-white' 
+                      : 'bg-gradient-to-r from-purple-500 to-pink-500 text-white'
+                  }`}>
+                    {message.role === 'user' ? (
+                      <User className="w-5 h-5" />
+                    ) : (
+                      <Bot className="w-5 h-5" />
+                    )}
+                  </div>
+                  {/* Message Bubble */}
+                  <div className={`px-6 py-4 rounded-2xl shadow-sm ${
+                    message.role === 'user'
+                      ? 'bg-blue-500 text-white rounded-tr-sm'
+                      : 'bg-white text-gray-900 rounded-tl-sm border border-gray-200'
+                  }`}>
+                    <div className="text-sm font-medium mb-1 opacity-75">
+                      {message.role === 'user' ? 'You' : 'InsuCompass AI'}
+                    </div>
+                    <ReactMarkdown className="prose prose-sm max-w-none prose-table:border prose-table:border-gray-300 prose-th:bg-gray-100 prose-th:p-2 prose-td:p-2 prose-td:border prose-td:border-gray-300">
+                      {message.content}
+                    </ReactMarkdown>
+                    {showPlanRecs && message.plans?.length && (
+                      <>
+                        <h2 className="text-2xl font-bold text-gray-900">Recommended Plans for You</h2>
+                        <div className="grid md:grid-cols-2 gap-6">
+                          {message.plans?.map((plan, idx) => (
+                            <PlanCard key={idx} plan={plan} />
+                          ))}
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+            {/* Loading indicator */}
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="flex items-start space-x-3">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center">
+                    <Bot className="w-5 h-5" />
+                  </div>
+                  <div className="bg-white px-6 py-4 rounded-2xl rounded-tl-sm border border-gray-200">
+                    <div className="flex space-x-2">
+                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+            <div ref={chatEndRef} />
+          </div>
+        </div>
+      </div>
+
+      {/* Message Input */}
+      <div className="bg-white border-t border-gray-200 p-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="flex items-center space-x-4">
+            <div className="flex-1 relative">
+              <input
+                type="text"
+                value={currentMessage}
+                onChange={(e) => setCurrentMessage(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
+                placeholder="Type your message..."
+                className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                disabled={isLoading}
+              />
+              <button
+                onClick={handleSendMessage}
+                disabled={isLoading || !currentMessage.trim()}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                <Send className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterfaceScreen;

src/screens/ChatInterfaceScreen/useChatInterface.ts

@@ -0,0 +1,89 @@
+import { useState, useEffect, useRef } from 'react';
+import { ApiResponse, ChatMessage, UserProfile } from '../../interface';
+import { CHAT_ENDPOINT } from '../../endpoint';
+
+export function useChatInterface(userProfile: UserProfile, isProfileComplete?: boolean) {
+  const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentMessage, setCurrentMessage] = useState('');
+  const [showPlanRecs, setShowPlanRecs] = useState<boolean>(false);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  // threadId is generated once per chat session and persists for the hook's lifetime
+  const [threadId] = useState(() => crypto.randomUUID());
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [chatHistory]);
+
+  const sendChatMessage = async (
+    message: string,
+    profileOverride?: UserProfile
+  ) => {
+    setIsLoading(true);
+    try {
+      const payload = {
+        thread_id: threadId,
+        user_profile: profileOverride ?? userProfile,
+        message,
+        is_profile_complete: isProfileComplete ?? false,
+        conversation_history: chatHistory.map(m => `${m.role}: ${m.content}`)
+      };
+      const response = await fetch(CHAT_ENDPOINT, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      });
+      if (!response.ok) throw new Error('Failed to send message');
+      const data: ApiResponse = await response.json();
+      // Update state from backend response
+      // let newHistory: ChatMessage[] = data.updated_history.map(msg => {
+      //   const [role, ...contentParts] = msg.split(':');
+      //   return {
+      //     role: role.toLowerCase() as 'user' | 'agent',
+      //     content: contentParts.join(':').trim(),
+      //     timestamp: Date.now()
+      //   };
+      // });
+      let newHistory: ChatMessage[] = [...chatHistory, {
+        role: 'agent',
+        content: data.updated_history[data.updated_history.length - 1],
+        timestamp: Date.now(),
+        plans: !showPlanRecs && data.plan_recommendations?.recommendations?.length && data.plan_recommendations?.recommendations?.length > 0 ? data.plan_recommendations.recommendations : undefined
+      }];
+      setChatHistory(newHistory);
+      if (!showPlanRecs && data.plan_recommendations?.recommendations?.length && data.plan_recommendations?.recommendations?.length > 0) {
+        setShowPlanRecs(true);
+      }
+      return data;
+    } catch (error) {
+      console.error('Error sending message:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSendMessage = async () => {
+    if (!currentMessage.trim()) return;
+    // Add user message to chat immediately
+    const userMessage: ChatMessage = {
+      role: 'user',
+      content: currentMessage,
+      timestamp: Date.now()
+    };
+    setChatHistory(prev => [...prev, userMessage]);
+    const messageToSend = currentMessage;
+    setCurrentMessage('');
+    await sendChatMessage(messageToSend);
+  };
+
+  return {
+    chatHistory,
+    isLoading,
+    currentMessage,
+    setCurrentMessage,
+    handleSendMessage,
+    showPlanRecs,
+    chatEndRef,
+    sendChatMessage
+  };
+}

src/screens/ProfileScreen/ProfilingScreen.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import InsuCompassLogo from '../../assets/InsuCompass_Logo.png';
+import LocationSection from '../../components/LocationSection';
+import PersonalInfoSection from '../../components/PersonalInfoSection';
+import HouseholdInfoSection from '../../components/HouseholdInfoSection';
+import EmploymentSection from '../../components/EmploymentSection';
+import { UserProfile } from '../../interface';
+import useProfileScreen from './useProfileScreen';
+
+interface ProfilingScreenProps {
+  onComplete: (userProfile: UserProfile) => void;
+}
+
+const ProfilingScreen: React.FC<ProfilingScreenProps> = ({ onComplete }) => {
+  const {
+    formData,
+    userProfile,
+    isValidatingZip,
+    zipError,
+    isLoading,
+    handleZipChange,
+    handleFormChange,
+    handleSubmit,
+  } = useProfileScreen({
+    onComplete,
+  });
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
+      {/* Header */}
+      <div className="fixed top-0 left-0 w-full bg-white shadow-sm border-b z-50">
+        <div className="max-w-10xl mx-auto px-6 py-4">
+          <div className="flex items-center space-x-3">
+            <img src={InsuCompassLogo} alt="InsuCompass Logo" className="h-12 w-auto" />
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">InsuCompass</h1>
+              <p className="text-sm text-gray-600">Your AI guide to U.S. Health Insurance</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 overflow-y-auto pt-20">
+        <div className="max-w-2xl mx-auto px-6 py-12">
+          <div className="text-center mb-8">
+            <h2 className="text-3xl font-bold text-gray-900 mb-4">Let's Get Started</h2>
+            <p className="text-lg text-gray-600">Tell us about yourself to receive personalized insurance guidance</p>
+          </div>
+          <div className="space-y-6">
+            {/* ZIP Code Section */}
+            <LocationSection
+              formData={formData}
+              onChange={handleZipChange}
+              isValidatingZip={isValidatingZip}
+              zipError={zipError}
+              userProfile={userProfile}
+            />
+            {/* Personal Information */}
+            {userProfile.city && (
+              <PersonalInfoSection formData={formData} onChange={handleFormChange} />
+            )}
+            {/* Household Information */}
+            {userProfile.city && (
+              <HouseholdInfoSection formData={formData} onChange={handleFormChange} />
+            )}
+            {/* Employment & Citizenship */}
+            {userProfile.city && (
+              <EmploymentSection formData={formData} onChange={handleFormChange} />
+            )}
+            {/* Submit Button */}
+            {userProfile.city && (
+              <button
+                onClick={handleSubmit}
+                disabled={isLoading}
+                className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-8 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isLoading ? 'Starting Session...' : 'Start My Personalized Session'}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfilingScreen;

src/screens/ProfileScreen/useProfileScreen.ts

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { UserProfile } from '../../interface';
+import { GEODATA_ENDPOINT } from '../../endpoint';
+
+interface UseProfileScreenOptions {
+  onComplete: (userProfile: UserProfile) => void;
+}
+
+const useProfileScreen = ({ onComplete }: UseProfileScreenOptions) => {
+  const [formData, setFormData] = useState({
+    zip_code: '',
+    age: '',
+    gender: '',
+    household_size: '',
+    income: '',
+    employment_status: '',
+    citizenship: ''
+  });
+
+  const [userProfile, setUserProfile] = useState<UserProfile>({});
+  const [isValidatingZip, setIsValidatingZip] = useState(false);
+  const [zipError, setZipError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Fetch geodata for ZIP code
+  const getGeodata = async (zipCode: string) => {
+    setIsValidatingZip(true);
+    setZipError('');
+    try {
+      const response = await fetch(`${GEODATA_ENDPOINT}/${zipCode}`);
+      if (!response.ok) throw new Error('Invalid ZIP code');
+      const data = await response.json();
+      setUserProfile(prev => ({ ...prev, ...data }));
+      setFormData(prev => ({ ...prev, zip_code: zipCode }));
+      return data;
+    } catch (error) {
+      setZipError('Invalid ZIP code or could not retrieve location data');
+      return null;
+    } finally {
+      setIsValidatingZip(false);
+    }
+  };
+
+  // Handle ZIP code input
+  const handleZipChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const numericValue = value.replace(/\D/g, '').slice(0, 5);
+    setFormData(prev => ({ ...prev, zip_code: numericValue }));
+    if (numericValue.length === 5) {
+      await getGeodata(numericValue);
+    }
+  };
+
+  // Handle other form input changes
+  const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  // Handle form submission
+  const handleSubmit = async () => {
+    // Validate all fields
+    const requiredFields = ['age', 'gender', 'household_size', 'income', 'employment_status', 'citizenship'];
+    const missingFields = requiredFields.filter(field => !formData[field as keyof typeof formData]);
+    if (missingFields.length > 0) {
+      alert('Please fill out all fields to continue.');
+      return;
+    }
+
+    console.log('Submitting profile data:', formData);
+    setIsLoading(true);
+
+    // Build the final user profile
+    const updatedProfile: UserProfile = {
+      ...userProfile,
+      age: +formData.age,
+      gender: formData.gender,
+      household_size: +formData.household_size,
+      income: +formData.income,
+      employment_status: formData.employment_status,
+      citizenship: formData.citizenship,
+      medical_history: null,
+      medications: null,
+      special_cases: null
+    };
+
+    setUserProfile(updatedProfile);
+    setIsLoading(false);
+
+    // Notify parent (App) to proceed to chat phase
+    onComplete(updatedProfile);
+  };
+
+  return {
+    formData,
+    userProfile,
+    isValidatingZip,
+    zipError,
+    isLoading,
+    handleZipChange,
+    handleFormChange,
+    handleSubmit,
+  };
+};
+
+export default useProfileScreen;