Upload 5 files

The changes includes the fixes for the following issues:
1. User message getting hidden after the Agent response
2. 'Agent:' prefix getting displayed since it was present in the API response. Fix added to remove it if present in the API response.
3. Initiate the first chat API call only when the userProfile is complete (needs rule review again).
4. Default focus to the input field after receiving an API response for chat.

App.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import ProfilingScreen from './screens/ProfileScreen/ProfilingScreen';
+import ChatInterfaceScreen from './screens/ChatInterfaceScreen/ChatInterfaceScreen';
+import { UserProfile } from './interface';
+
+const App: React.FC = () => {
+  const [phase, setPhase] = useState<'profiling' | 'chat'>('profiling');
+  const [userProfile, setUserProfile] = useState<UserProfile>({});
+
+  // 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');
+  };
+
+  return phase === 'profiling' ? (
+    <ProfilingScreen onComplete={handleStartChat} />
+  ) : (
+    <ChatInterfaceScreen userProfile={userProfile} />
+  );
+};
+
+export default App;

screens/ChatInterfaceScreen/ChatInterfaceScreen.tsx

@@ -0,0 +1,156 @@
+import React 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,
+    inputRef
+  } = useChatInterface(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
+                ref={inputRef}
+                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;

screens/ChatInterfaceScreen/useChatInterface.ts

@@ -0,0 +1,108 @@
+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);
+  const inputRef = useRef<HTMLInputElement>(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' });
+    // Focus input after chatHistory changes (i.e., after response is rendered)
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [chatHistory]);
+
+  // Prevent double API call: only send initial chat message once when userProfile is complete
+  const hasSentInitialMessage = useRef(false);
+  useEffect(() => {
+    // TODO: review this logic
+    // Check if userProfile is complete before sending initial message
+    const isValidProfile = !!userProfile && 
+      userProfile?.zip_code?.length && userProfile?.zip_code?.length > 0 &&
+      !!userProfile.age && userProfile.age > 0 &&
+      !!userProfile.gender && userProfile.gender.length > 0 &&
+      !!userProfile.household_size &&
+      !!userProfile.income &&
+      !!userProfile.employment_status &&
+      !!userProfile.citizenship;
+    if (isValidProfile && !hasSentInitialMessage.current) {
+      sendChatMessage('START_PROFILE_BUILDING', userProfile);
+      hasSentInitialMessage.current = true;
+    }
+  }, [userProfile]);
+
+  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();
+      // Only append the agent's message to the existing chatHistory
+      const agentMsgRaw = data.updated_history[data.updated_history.length - 1] || '';
+      const agentMsgContent = agentMsgRaw.replace(/^Agent:\s*/, '');
+      const agentMessage: ChatMessage = {
+        role: 'agent',
+        content: agentMsgContent,
+        timestamp: Date.now(),
+        plans: !showPlanRecs && data.plan_recommendations?.recommendations?.length && data.plan_recommendations?.recommendations?.length > 0 ? data.plan_recommendations.recommendations : undefined
+      };
+      setChatHistory(prev => [...prev, agentMessage]);
+      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,
+    inputRef,
+    sendChatMessage
+  };
+}

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;

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;