Upload 5 files

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;