Update ui/gradio_interface.py

ui/gradio_interface.py

@@ -1,362 +1,362 @@
-from langchain_core.messages import SystemMessage, HumanMessage
-from typing import List, Dict, Any
-import time
-import gradio as gr
-from data import debug_print,all_card_names,all_card_lookup,eligibility_lookup,df
-from nodes.intent import get_pretty_state_string
-from langgraph_pipeline import run_langgraph_pipeline,utility_app
-
-#Gradio UI with the fucntion calls to invoke the graphs and pass the user inputs
-custom_css="""
-#compare_output_markdown, #full_compare_output_markdown, #top_card_markdown {
-    min-height: 100px;
-    border: 1px solid #e0e0e0;
-    padding: 10px;
-    overflow-y: auto;
-} 
-
-#left_column_box, #right_column_box {
-    padding: 16px !important; /* Adds 16px of space INSIDE the bordered box */
-}
-"""
-
-with gr.Blocks(title="Agentic Credit Card Recommender", css=custom_css, theme=gr.themes.Soft()) as demo:
-    gr.Markdown("""
-    # Credit Card Recommender
-    Discover and receive personalized recommendations for credit cards based on your needs and preferences
-    """)
-    with gr.Tab("Get Recommendations"):
-         
-            with gr.Row():
-                query_input = gr.Textbox(
-                    label="What kind of card are you looking for?",
-                    placeholder="Best cards for online shopping with fuel benefits",
-                    elem_id="query-textbox",  
-                    scale=2
-                )
-
-                preferences = gr.Dropdown(
-                    choices=["Cashback", "Travel", "Fuel", "Airport Lounge access", "Railways", "Dining", "Online Spends", "Grocery"],
-                    multiselect=True,
-                    label="Select Preferred Card Categories",
-                    scale=1
-                )
-
-            with gr.Accordion("Eligibility & Fee Filters", open=False):
-                with gr.Row():
-                    income = gr.Slider(minimum=1, maximum=60, step=1, label="Annual Income (LPA)")
-                    cibil = gr.Slider(minimum=300, maximum=900, step=10, label="CIBIL Score")
-                    age = gr.Slider(minimum=18, maximum=75, step=1, label="Age")
-                
-                with gr.Row():
-                    with gr.Group():
-                        gr.Markdown("<p style='text-align:center;'>Preferred Joining Fee (₹)</p>")
-                        with gr.Row():
-                            min_joining_fee = gr.Number(label="Min", value=0)
-                            max_joining_fee = gr.Number(label="Max", value=150000)
-                    with gr.Group():
-                        gr.Markdown("<p style='text-align:center;'>Preferred Annual Fee (₹)</p>")
-                        with gr.Row():
-                            min_annual_fee = gr.Number(label="Min", value=0)
-                            max_annual_fee = gr.Number(label="Max", value=150000)
-
-                with gr.Row():
-                    use_eligibility = gr.Checkbox(label="Apply Eligibility Filter", value=False)
-                    fd_checkbox = gr.Checkbox(label="Beginner / Student", value=False)
-                    cobrand_checkbox = gr.Checkbox(label="Include Co-branded Cards", value=True)
-
-            run_button = gr.Button("Recommend Cards", variant='primary')
-        
-            top_card_recommendation = gr.Markdown(value="", elem_id="top_card_markdown")
-            with gr.Row(visible=True) as results_container:
-                with gr.Column():
-                    with gr.Group(elem_id="left_column_box"): 
-                        recommendation_heading = gr.Markdown("### Top-Ranked Cards")
-                        card_table_markdown = gr.Markdown()
-                    
-                with gr.Column():
-                    with gr.Group(elem_id="right_column_box"):
-                        card_links_heading = gr.Markdown("### 🔗 Issuer Links")
-                        card_links_html = gr.HTML()
-
-
-            with gr.Column(visible=False) as chat_container:
-                with gr.Accordion("💬 Ask Follow-up Questions", open=True):
-                    chatbox = gr.Chatbot(type="messages", label="Chat")
-                    followup_input = gr.Textbox(label="Enter Your question", placeholder="Compare the lounge access benefits of card X and card Y")
-                    followup_submit = gr.Button("Submit", variant="primary") 
-        
-
-    with gr.Tab("Compare Cards"):
-        with gr.Column(visible=False) as compare_recommended_cards_container:
-            gr.Markdown("## Compare Recommended Cards")
-            compare_checkboxes = gr.CheckboxGroup(choices=[], label="Select 2 or more cards to compare", info="Pick from the recommended list to see a comparison.")
-            compare_btn = gr.Button("Compare Selected Cards", variant='primary')
-            compare_output = gr.Markdown(value="", elem_id="compare_output_markdown")
-            gr.Markdown("---")
-
-            gr.Markdown("## Compare Any Cards")
-            full_compare_dropdown = gr.Dropdown(choices=all_card_names, multiselect=True, label="Select 2 or more cards", info="Compare any cards from the entire database.")
-            full_compare_btn = gr.Button("Compare Selected Cards", variant='primary')
-            full_compare_output = gr.Markdown(value="", elem_id="full_compare_output_markdown")    
-            
-
-    def format_to_markdown(top_card_out, top_card_description_out):
-        debug_print("UI", f"Formatting top card output to markdown")
-        if not top_card_out and top_card_description_out:
-            message_block = "\n".join(f"- {desc}" for desc in top_card_description_out if desc)
-            return f"### Note\n\n{message_block}\n\n"  
-    
-        top_card_recommendation = f"### Best card: {top_card_out}\n\n"
-        if top_card_description_out:
-            for desc in top_card_description_out:
-                if isinstance(desc, str):
-                    desc = desc.strip()
-                if desc:
-                    top_card_recommendation += f"- {desc}\n"
-    
-        return top_card_recommendation
-
-    def format_rows_to_markdown_table(card_rows):
-        """Converts a list of card data into a markdown table string."""
-        if not card_rows:
-            return ""
-        
-        markdown_table = "| Card Name | Joining Fee | Annual Fee |\n"
-        markdown_table += "|---|---|---|\n"
-        
-        for row in card_rows:
-            name = row[0]
-            joining_fee = row[1]
-            annual_fee = row[2]
-            markdown_table += f"| {name} | {joining_fee} | {annual_fee} |\n"
-            
-        return markdown_table
-
-    #main function that invokes the graph
-    async def recommend(query, preferences, fd_intent, include_cobranded, income, cibil, age, min_joining_fee, max_joining_fee, min_annual_fee, max_annual_fee, use_eligibility):
-        debug_print("UI", f"recommend called with query: '{query}'")
-        debug_print("UI", f"Preferences: {preferences}")
-        debug_print("UI", f"FD intent: {fd_intent}, Include cobranded: {include_cobranded}")
-        
-        global chat_history
-        chat_history = []
-        global messages
-        messages = []
-        preferences_text=""
-        if preferences:
-            preferences_text = "User selected preferences: " + ", ".join(preferences) + "."
-
-        query = query.strip() if query else ""
-
-        if not query:
-            error_message = "Please enter a valid query."
-            debug_print("UI", f"recommend function error: {error_message}")
-            return error_message, gr.update(visible=True), gr.update(value=None), gr.update(visible=False), gr.update(visible=False), gr.update(value=None), gr.update(visible=False), [], {}, "", gr.update(visible=False),{}
-
-        try:
-            debug_print("UI", f"Calling run_langgraph_pipeline")
-            top_card_out, top_card_description_out, card_rows_out, card_names_out, card_lookup_out,card_links = await run_langgraph_pipeline(
-                query,
-                preferences_text,
-                query_intent=fd_intent,
-                include_cobranded=include_cobranded,
-                use_eligibility=use_eligibility,
-                income=income,
-                cibil=cibil,
-                age=age,
-                min_joining_fee=min_joining_fee,
-                max_joining_fee=max_joining_fee,
-                min_annual_fee=min_annual_fee,
-                max_annual_fee=max_annual_fee
-            )
-        
-            debug_print("UI", f"Pipeline returned {len(card_rows_out)} card rows")
-
-            recommendation_visible = bool(top_card_out) or bool(top_card_description_out) 
-            df_visible = bool(card_rows_out) 
-            chat_container_visible = gr.update(visible=True if card_rows_out else False)
-
-            top_card_md = format_to_markdown(top_card_out, top_card_description_out)
-            card_table_md = format_rows_to_markdown_table(card_rows_out)
-            debug_print("UI", f"recommend function completed successfully")
-
-            initial_context = {
-                "query": query,
-                "top_cards": card_names_out[:5],
-                "recommendation_summary": top_card_md
-            }
-            card_links_section = "<div style='padding: 10px; border: 1px solid #444; border-radius: 8px;'>"
-
-            for name, link in zip(card_names_out, card_links):
-                card_links_section += f"<div style='margin-bottom: 8px;'><a href='{link}' target='_blank'>{name}</a></div>"
-            
-            card_links_section += "</div>"
-            
-            return top_card_md, gr.update(visible=recommendation_visible), card_table_md, gr.update(visible=df_visible), gr.update(visible=df_visible), card_names_out, card_lookup_out, query, chat_container_visible, initial_context,gr.update(value=card_links_section, visible=True), gr.update(value="### 🔗 Issuer Links", visible=True)
-
-        except Exception as e:
-            error_message = f"Error during recommendation: {str(e)}"
-            debug_print("ERROR", f"recommend function error: {str(e)}")
-            return error_message, gr.update(visible=False), gr.update(value=None), gr.update(visible=False), gr.update(visible=False), [], {}, "", gr.update(visible=False),{}, gr.update(visible=False),gr.update(visible=False)
-
-    #for comparison
-    async def compare_cards_via_graph(selected_cards, card_lookup):
-        state = {
-            "trigger_compare": True,
-            "trigger_chat": False,
-            "selected_cards": selected_cards,
-            "card_lookup": card_lookup
-        }
-        result = await utility_app.ainvoke(state)
-        return result.get("comparison_result", "")
-        
-    async def compare_cards_wrapper(selected_cards):
-        return await compare_cards_via_graph(selected_cards, all_card_lookup)
-        
-    #for chat
-    async def chat_with_agent(user_message: str, chat_history: List, messages: List,  initial_context: Dict[str, Any]):
-        debug_print("UI", f"Entering chat_with_agent with user_message: '{user_message}'")
-
-        # Preparing the initial context message if this is the first question
-        if not messages:
-
-            user_query = initial_context.get("query", "No query provided")
-            top_cards = initial_context.get("top_cards", [])
-            context = "\n".join(top_cards) if top_cards else "No top cards available"
-
-            recommended_summary = initial_context.get("recommendation_summary", "No recommendations available")
-            recommended_card_info = ""
-            other_card_info = ""
-
-            for card_name in top_cards:
-                description = all_card_lookup.get(card_name, "Description not found.")
-                eligibility = eligibility_lookup.get(card_name, "No eligibility or fee information available.")
-                
-                card_block = f"""Card: {card_name}
-            Description: {description}
-            
-            Eligibility & Fees:
-            {eligibility}
-            
-            ---
-            """
-                if card_name in recommended_summary:
-                    recommended_card_info += card_block
-                else:
-                    other_card_info += card_block
-                    
-            # System prompt with context for chat node
-            system_message = f"""
-                **Your Role: Secure Credit Card Expert**
-                You are a helpful and secure AI assistant. Your goal is to provide a comprehensive answer to the user's question using all available information.
-        
-                Your knowledge base includes the following and <Newly_Fetched_Information> section if it is provided:
-                <Initial_Context>
-                  <User_Requirements>{user_query}</User_Requirements>
-                  <Top_Ranked_Cards_For_User_Query>{context}</Top_Ranked_Cards_For_User_Query>
-                  <Recommended_Card_Info>
-                    <Best_Recommended_Card>{recommended_card_info}</Best_Recommended_Card>
-                    <Other_Recommended_Cards>{other_card_info}</Other_Recommended_Cards>
-                  </Recommended_Card_Info>
-                </Initial_Context>
-        
-                **CRITICAL RULES:**
-                1.  **Synthesize All Information:** Base your answer on the `<Initial_Context>` and any `<Newly_Fetched_Information>` provided. If the user asks for a comparison, use details from both.
-                2.  **Make a Recommendation:** If asked "which is best?" or "which is suitable?", analyze all available card info against the `<User_Requirements>` and provide a direct, reasoned recommendation.
-                3.  **Be Direct:** Do not mention your internal processes. Just provide the final answer to the user.
-
-                **RESPONSE STYLE AND TONE:**
-                - **Be Direct and Concise:** Get straight to the point. Do not explain your internal thought process.
-                - **For Factual Questions (like "what are the fees?"):** Provide a direct, simple sentence as the answer.
-                - **For Recommendation Questions (like "which is best for me?"):** Start your response with the name of the recommended card, followed by a brief, bulleted list of the key features that make it the best fit for the user's requirements.
-                """
-           
-            # print(f"system message: {system_message}")
-            messages = [SystemMessage(content=system_message)]
-
-        else:
-            debug_print("UI", "Subsequent turn: using existing message history.")
-            top_cards = initial_context.get("top_cards", [])
-            user_query = initial_context.get("query", "No query provided")
-
-        current_turn_messages = messages + [HumanMessage(content=user_message)]
-
-        # Defining the state for the utility app
-        state = {
-            "messages": current_turn_messages,
-            "trigger_chat": True,
-            "trigger_compare": False,
-            "card_names": top_cards,
-        }
-
-        # invoking the graph
-        response_state = await utility_app.ainvoke(state)
-        
-        updated_messages_from_agent = response_state.get("messages", [])
-        debug_print("UI", f"Chat agent response state: {get_pretty_state_string(updated_messages_from_agent)}")
-        final_response = updated_messages_from_agent[-1].content
-        chat_history.append({"role": "user", "content": user_message})
-        chat_history.append({"role": "assistant", "content": final_response})
-        return chat_history, updated_messages_from_agent, ""
-
-    card_names_state = gr.State([])
-    card_lookup_state = gr.State()
-    chat_history = gr.State([])
-    query = gr.State("")
-    initial_chat_context = gr.State({})
-    messages= gr.State([])  
-    
-    run_button.click(
-        fn=recommend,
-        inputs=[
-            query_input, preferences, fd_checkbox, cobrand_checkbox,
-            income, cibil, age,
-            min_joining_fee, max_joining_fee,
-            min_annual_fee, max_annual_fee,
-            use_eligibility
-        ],
-        outputs=[
-            top_card_recommendation, top_card_recommendation, 
-            card_table_markdown, card_table_markdown, recommendation_heading, 
-            card_names_state,
-            card_lookup_state,
-            query, chat_container, initial_chat_context,card_links_html, card_links_heading  
-        ],
-        concurrency_limit=20
-    ).then(
-        fn=lambda card_names: (gr.update(choices=card_names if card_names else [], value=[]), gr.update(visible=True if card_names else False)),
-        inputs=card_names_state,
-        outputs=[compare_checkboxes, compare_recommended_cards_container],
-        concurrency_limit=20
-    ).then(
-        fn=lambda: ([], [], [], gr.update(value=""), gr.update(value="")),
-        outputs=[chat_history, chatbox, messages, compare_output, full_compare_output],  # Clear both compare outputs
-        concurrency_limit=20
-    )
-
-    compare_btn.click(
-        fn=compare_cards_via_graph,
-        inputs=[compare_checkboxes, card_lookup_state],
-        outputs=compare_output,
-        show_progress=True,
-        concurrency_limit=20
-    )
-    
-    full_compare_btn.click(
-        fn=compare_cards_wrapper,
-        inputs=[full_compare_dropdown],
-        outputs=full_compare_output,
-        show_progress=True,
-        concurrency_limit=20
-    )
-
-
-    followup_submit.click(
-        fn=chat_with_agent, 
-        inputs=[followup_input, chatbox, messages, initial_chat_context],
-        outputs=[chatbox, messages, followup_input],
-        concurrency_limit=20
-    )
-debug_print("APP", f"Credit Card Recommender Agent initialized with {len(df)} cards")
+from langchain_core.messages import SystemMessage, HumanMessage
+from typing import List, Dict, Any
+import time
+import gradio as gr
+from data import debug_print,all_card_names,all_card_lookup,eligibility_lookup,df
+from nodes.intent import get_pretty_state_string
+from langgraph_pipeline import run_langgraph_pipeline,utility_app
+
+#Gradio UI with the fucntion calls to invoke the graphs and pass the user inputs
+custom_css="""
+#compare_output_markdown, #full_compare_output_markdown, #top_card_markdown {
+    min-height: 100px;
+    border: 1px solid #e0e0e0;
+    padding: 10px;
+    overflow-y: auto;
+} 
+
+#left_column_box, #right_column_box {
+    padding: 16px !important; /* Adds 16px of space INSIDE the bordered box */
+}
+"""
+
+with gr.Blocks(title="Agentic Credit Card Recommender", css=custom_css, theme=gr.themes.Soft()) as demo:
+    gr.Markdown("""
+    # Credit Card Recommender
+    Discover and receive personalized recommendations for credit cards based on your needs and preferences
+    """)
+    with gr.Tab("Get Recommendations"):
+         
+            with gr.Row():
+                query_input = gr.Textbox(
+                    label="What kind of card are you looking for?",
+                    placeholder="Best cards for online shopping with fuel benefits",
+                    elem_id="query-textbox",  
+                    scale=2
+                )
+
+                preferences = gr.Dropdown(
+                    choices=["Cashback", "Travel", "Fuel", "Airport Lounge access", "Railways", "Dining", "Online Spends", "Grocery"],
+                    multiselect=True,
+                    label="Select Preferred Card Categories",
+                    scale=1
+                )
+
+            with gr.Accordion("Eligibility & Fee Filters", open=False):
+                with gr.Row():
+                    income = gr.Slider(minimum=1, maximum=60, step=1, label="Annual Income (LPA)")
+                    cibil = gr.Slider(minimum=300, maximum=900, step=10, label="CIBIL Score")
+                    age = gr.Slider(minimum=18, maximum=75, step=1, label="Age")
+                
+                with gr.Row():
+                    with gr.Group():
+                        gr.Markdown("<p style='text-align:center;'>Preferred Joining Fee (₹)</p>")
+                        with gr.Row():
+                            min_joining_fee = gr.Number(label="Min", value=0)
+                            max_joining_fee = gr.Number(label="Max", value=150000)
+                    with gr.Group():
+                        gr.Markdown("<p style='text-align:center;'>Preferred Annual Fee (₹)</p>")
+                        with gr.Row():
+                            min_annual_fee = gr.Number(label="Min", value=0)
+                            max_annual_fee = gr.Number(label="Max", value=150000)
+
+                with gr.Row():
+                    use_eligibility = gr.Checkbox(label="Apply Eligibility Filter", value=False)
+                    fd_checkbox = gr.Checkbox(label="Beginner / Student", value=False)
+                    cobrand_checkbox = gr.Checkbox(label="Include Co-branded Cards", value=True)
+
+            run_button = gr.Button("Recommend Cards", variant='primary')
+        
+            top_card_recommendation = gr.Markdown(value="", elem_id="top_card_markdown")
+            with gr.Row(visible=True) as results_container:
+                with gr.Column():
+                    with gr.Group(elem_id="left_column_box"): 
+                        recommendation_heading = gr.Markdown("### Top-Ranked Cards")
+                        card_table_markdown = gr.Markdown()
+                    
+                with gr.Column():
+                    with gr.Group(elem_id="right_column_box"):
+                        card_links_heading = gr.Markdown("### 🔗 Issuer Links")
+                        card_links_html = gr.HTML()
+
+
+            with gr.Column(visible=False) as chat_container:
+                with gr.Accordion("💬 Ask Follow-up Questions", open=True):
+                    chatbox = gr.Chatbot(type="messages", label="Chat")
+                    followup_input = gr.Textbox(label="Enter Your question", placeholder="Compare the lounge access benefits of card X and card Y")
+                    followup_submit = gr.Button("Submit", variant="primary") 
+        
+
+    with gr.Tab("Compare Cards"):
+        with gr.Column(visible=False) as compare_recommended_cards_container:
+            gr.Markdown("## Compare Recommended Cards")
+            compare_checkboxes = gr.CheckboxGroup(choices=[], label="Select 2 or more cards to compare", info="Pick from the recommended list to see a comparison.")
+            compare_btn = gr.Button("Compare Selected Cards", variant='primary')
+            compare_output = gr.Markdown(value="", elem_id="compare_output_markdown")
+            gr.Markdown("---")
+
+            gr.Markdown("## Compare Any Cards")
+            full_compare_dropdown = gr.Dropdown(choices=all_card_names, multiselect=True, label="Select 2 or more cards", info="Compare any cards from the entire database.")
+            full_compare_btn = gr.Button("Compare Selected Cards", variant='primary')
+            full_compare_output = gr.Markdown(value="", elem_id="full_compare_output_markdown")    
+            
+
+    def format_to_markdown(top_card_out, top_card_description_out):
+        debug_print("UI", f"Formatting top card output to markdown")
+        if not top_card_out and top_card_description_out:
+            message_block = "\n".join(f"- {desc}" for desc in top_card_description_out if desc)
+            return f"### Note\n\n{message_block}\n\n"  
+    
+        top_card_recommendation = f"### Best card: {top_card_out}\n\n"
+        if top_card_description_out:
+            for desc in top_card_description_out:
+                if isinstance(desc, str):
+                    desc = desc.strip()
+                if desc:
+                    top_card_recommendation += f"- {desc}\n"
+    
+        return top_card_recommendation
+
+    def format_rows_to_markdown_table(card_rows):
+        """Converts a list of card data into a markdown table string."""
+        if not card_rows:
+            return ""
+        
+        markdown_table = "| Card Name | Joining Fee | Annual Fee |\n"
+        markdown_table += "|---|---|---|\n"
+        
+        for row in card_rows:
+            name = row[0]
+            joining_fee = row[1]
+            annual_fee = row[2]
+            markdown_table += f"| {name} | {joining_fee} | {annual_fee} |\n"
+            
+        return markdown_table
+
+    #main function that invokes the graph
+    async def recommend(query, preferences, fd_intent, include_cobranded, income, cibil, age, min_joining_fee, max_joining_fee, min_annual_fee, max_annual_fee, use_eligibility):
+        debug_print("UI", f"recommend called with query: '{query}'")
+        debug_print("UI", f"Preferences: {preferences}")
+        debug_print("UI", f"FD intent: {fd_intent}, Include cobranded: {include_cobranded}")
+        
+        global chat_history
+        chat_history = []
+        global messages
+        messages = []
+        preferences_text=""
+        if preferences:
+            preferences_text = "User selected preferences: " + ", ".join(preferences) + "."
+
+        query = query.strip() if query else ""
+
+        if not query:
+            error_message = "Please enter a valid query."
+            debug_print("UI", f"recommend function error: {error_message}")
+            return error_message, gr.update(visible=True), gr.update(value=None), gr.update(visible=False), gr.update(visible=False), gr.update(value=None), gr.update(visible=False), [], {}, "", gr.update(visible=False),{}
+
+        try:
+            debug_print("UI", f"Calling run_langgraph_pipeline")
+            top_card_out, top_card_description_out, card_rows_out, card_names_out, card_lookup_out,card_links = await run_langgraph_pipeline(
+                query,
+                preferences_text,
+                query_intent=fd_intent,
+                include_cobranded=include_cobranded,
+                use_eligibility=use_eligibility,
+                income=income,
+                cibil=cibil,
+                age=age,
+                min_joining_fee=min_joining_fee,
+                max_joining_fee=max_joining_fee,
+                min_annual_fee=min_annual_fee,
+                max_annual_fee=max_annual_fee
+            )
+        
+            debug_print("UI", f"Pipeline returned {len(card_rows_out)} card rows")
+
+            recommendation_visible = bool(top_card_out) or bool(top_card_description_out) 
+            df_visible = bool(card_rows_out) 
+            chat_container_visible = gr.update(visible=True if card_rows_out else False)
+
+            top_card_md = format_to_markdown(top_card_out, top_card_description_out)
+            card_table_md = format_rows_to_markdown_table(card_rows_out)
+            debug_print("UI", f"recommend function completed successfully")
+
+            initial_context = {
+                "query": query,
+                "top_cards": card_names_out[:5],
+                "recommendation_summary": top_card_md
+            }
+            card_links_section = "<div style='padding: 10px; border: 1px solid #444; border-radius: 8px;'>"
+
+            for name, link in zip(card_names_out, card_links):
+                card_links_section += f"<div style='margin-bottom: 8px;'><a href='{link}' target='_blank'>{name}</a></div>"
+            
+            card_links_section += "</div>"
+            
+            return top_card_md, gr.update(visible=recommendation_visible), card_table_md, gr.update(visible=df_visible), gr.update(visible=df_visible), card_names_out, card_lookup_out, query, chat_container_visible, initial_context,gr.update(value=card_links_section, visible=True), gr.update(value="### 🔗 Issuer Links", visible=True)
+
+        except Exception as e:
+            error_message = f"Error during recommendation: {str(e)}"
+            debug_print("ERROR", f"recommend function error: {str(e)}")
+            return gr.update(value=error_message, visible=True), gr.update(visible=False), gr.update(value=None), gr.update(visible=False), gr.update(visible=False), [], {}, "", gr.update(visible=False),{}, gr.update(visible=False),gr.update(visible=False)
+
+    #for comparison
+    async def compare_cards_via_graph(selected_cards, card_lookup):
+        state = {
+            "trigger_compare": True,
+            "trigger_chat": False,
+            "selected_cards": selected_cards,
+            "card_lookup": card_lookup
+        }
+        result = await utility_app.ainvoke(state)
+        return result.get("comparison_result", "")
+        
+    async def compare_cards_wrapper(selected_cards):
+        return await compare_cards_via_graph(selected_cards, all_card_lookup)
+        
+    #for chat
+    async def chat_with_agent(user_message: str, chat_history: List, messages: List,  initial_context: Dict[str, Any]):
+        debug_print("UI", f"Entering chat_with_agent with user_message: '{user_message}'")
+
+        # Preparing the initial context message if this is the first question
+        if not messages:
+
+            user_query = initial_context.get("query", "No query provided")
+            top_cards = initial_context.get("top_cards", [])
+            context = "\n".join(top_cards) if top_cards else "No top cards available"
+
+            recommended_summary = initial_context.get("recommendation_summary", "No recommendations available")
+            recommended_card_info = ""
+            other_card_info = ""
+
+            for card_name in top_cards:
+                description = all_card_lookup.get(card_name, "Description not found.")
+                eligibility = eligibility_lookup.get(card_name, "No eligibility or fee information available.")
+                
+                card_block = f"""Card: {card_name}
+            Description: {description}
+            
+            Eligibility & Fees:
+            {eligibility}
+            
+            ---
+            """
+                if card_name in recommended_summary:
+                    recommended_card_info += card_block
+                else:
+                    other_card_info += card_block
+                    
+            # System prompt with context for chat node
+            system_message = f"""
+                **Your Role: Secure Credit Card Expert**
+                You are a helpful and secure AI assistant. Your goal is to provide a comprehensive answer to the user's question using all available information.
+        
+                Your knowledge base includes the following and <Newly_Fetched_Information> section if it is provided:
+                <Initial_Context>
+                  <User_Requirements>{user_query}</User_Requirements>
+                  <Top_Ranked_Cards_For_User_Query>{context}</Top_Ranked_Cards_For_User_Query>
+                  <Recommended_Card_Info>
+                    <Best_Recommended_Card>{recommended_card_info}</Best_Recommended_Card>
+                    <Other_Recommended_Cards>{other_card_info}</Other_Recommended_Cards>
+                  </Recommended_Card_Info>
+                </Initial_Context>
+        
+                **CRITICAL RULES:**
+                1.  **Synthesize All Information:** Base your answer on the `<Initial_Context>` and any `<Newly_Fetched_Information>` provided. If the user asks for a comparison, use details from both.
+                2.  **Make a Recommendation:** If asked "which is best?" or "which is suitable?", analyze all available card info against the `<User_Requirements>` and provide a direct, reasoned recommendation.
+                3.  **Be Direct:** Do not mention your internal processes. Just provide the final answer to the user.
+
+                **RESPONSE STYLE AND TONE:**
+                - **Be Direct and Concise:** Get straight to the point. Do not explain your internal thought process.
+                - **For Factual Questions (like "what are the fees?"):** Provide a direct, simple sentence as the answer.
+                - **For Recommendation Questions (like "which is best for me?"):** Start your response with the name of the recommended card, followed by a brief, bulleted list of the key features that make it the best fit for the user's requirements.
+                """
+           
+            # print(f"system message: {system_message}")
+            messages = [SystemMessage(content=system_message)]
+
+        else:
+            debug_print("UI", "Subsequent turn: using existing message history.")
+            top_cards = initial_context.get("top_cards", [])
+            user_query = initial_context.get("query", "No query provided")
+
+        current_turn_messages = messages + [HumanMessage(content=user_message)]
+
+        # Defining the state for the utility app
+        state = {
+            "messages": current_turn_messages,
+            "trigger_chat": True,
+            "trigger_compare": False,
+            "card_names": top_cards,
+        }
+
+        # invoking the graph
+        response_state = await utility_app.ainvoke(state)
+        
+        updated_messages_from_agent = response_state.get("messages", [])
+        debug_print("UI", f"Chat agent response state: {get_pretty_state_string(updated_messages_from_agent)}")
+        final_response = updated_messages_from_agent[-1].content
+        chat_history.append({"role": "user", "content": user_message})
+        chat_history.append({"role": "assistant", "content": final_response})
+        return chat_history, updated_messages_from_agent, ""
+
+    card_names_state = gr.State([])
+    card_lookup_state = gr.State()
+    chat_history = gr.State([])
+    query = gr.State("")
+    initial_chat_context = gr.State({})
+    messages= gr.State([])  
+    
+    run_button.click(
+        fn=recommend,
+        inputs=[
+            query_input, preferences, fd_checkbox, cobrand_checkbox,
+            income, cibil, age,
+            min_joining_fee, max_joining_fee,
+            min_annual_fee, max_annual_fee,
+            use_eligibility
+        ],
+        outputs=[
+            top_card_recommendation, top_card_recommendation, 
+            card_table_markdown, card_table_markdown, recommendation_heading, 
+            card_names_state,
+            card_lookup_state,
+            query, chat_container, initial_chat_context,card_links_html, card_links_heading  
+        ],
+        concurrency_limit=20
+    ).then(
+        fn=lambda card_names: (gr.update(choices=card_names if card_names else [], value=[]), gr.update(visible=True if card_names else False)),
+        inputs=card_names_state,
+        outputs=[compare_checkboxes, compare_recommended_cards_container],
+        concurrency_limit=20
+    ).then(
+        fn=lambda: ([], [], [], gr.update(value=""), gr.update(value="")),
+        outputs=[chat_history, chatbox, messages, compare_output, full_compare_output],  # Clear both compare outputs
+        concurrency_limit=20
+    )
+
+    compare_btn.click(
+        fn=compare_cards_via_graph,
+        inputs=[compare_checkboxes, card_lookup_state],
+        outputs=compare_output,
+        show_progress=True,
+        concurrency_limit=20
+    )
+    
+    full_compare_btn.click(
+        fn=compare_cards_wrapper,
+        inputs=[full_compare_dropdown],
+        outputs=full_compare_output,
+        show_progress=True,
+        concurrency_limit=20
+    )
+
+
+    followup_submit.click(
+        fn=chat_with_agent, 
+        inputs=[followup_input, chatbox, messages, initial_chat_context],
+        outputs=[chatbox, messages, followup_input],
+        concurrency_limit=20
+    )
+debug_print("APP", f"Credit Card Recommender Agent initialized with {len(df)} cards")
 debug_print("APP", f"Launching Gradio UI at {time.strftime('%Y-%m-%d %H:%M:%S')}")