Upload 5 files

src/screens/ChatInterfaceScreen/ChatInterfaceScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Send, User, Bot } from 'lucide-react';
 import InsuCompassLogo from '../../assets/InsuCompass_Logo.png';
 import ReactMarkdown from 'react-markdown';
@@ -26,6 +26,7 @@ interface ChatInterfaceScreenProps {
 }
 
 const ChatInterfaceScreen: React.FC<ChatInterfaceScreenProps> = ({ userProfile }) => {
+
   const {
     chatHistory,
     isLoading,
@@ -34,14 +35,9 @@ const ChatInterfaceScreen: React.FC<ChatInterfaceScreenProps> = ({ userProfile }
     handleSendMessage,
     showPlanRecs,
     chatEndRef,
-    sendChatMessage
+    inputRef
   } = 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 */}
@@ -133,6 +129,7 @@ const ChatInterfaceScreen: React.FC<ChatInterfaceScreenProps> = ({ userProfile }
           <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)}

src/screens/ChatInterfaceScreen/useChatInterface.ts

@@ -8,13 +8,37 @@ export function useChatInterface(userProfile: UserProfile, isProfileComplete?: b
   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
@@ -35,22 +59,16 @@ export function useChatInterface(userProfile: UserProfile, isProfileComplete?: b
       });
       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, {
+      // 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: data.updated_history[data.updated_history.length - 1],
+        content: agentMsgContent,
         timestamp: Date.now(),
         plans: !showPlanRecs && data.plan_recommendations?.recommendations?.length && data.plan_recommendations?.recommendations?.length > 0 ? data.plan_recommendations.recommendations : undefined
-      }];
-      setChatHistory(newHistory);
+      };
+      setChatHistory(prev => [...prev, agentMessage]);
       if (!showPlanRecs && data.plan_recommendations?.recommendations?.length && data.plan_recommendations?.recommendations?.length > 0) {
         setShowPlanRecs(true);
       }
@@ -84,6 +102,7 @@ export function useChatInterface(userProfile: UserProfile, isProfileComplete?: b
     handleSendMessage,
     showPlanRecs,
     chatEndRef,
+    inputRef,
     sendChatMessage
   };
 }