vertex ai minor bugs 3

app.py

@@ -5,13 +5,10 @@ from src.interview_logic import EXCEL_QUESTIONS # Import questions for state bui
 # Initialize the graph, which is stateless and operates on the state dict we provide.
 graph = build_graph()
 
-def chat_fn(message: str, history: list[list[str]]):
+def run_graph_logic(message: str, history: list[list[str]]):
     """
-    Main chat function for Gradio.
-
-    THE FIX: This function now returns a single string for the bot's reply.
-    Gradio's ChatInterface handles the history update automatically and reliably,
-    which prevents the submit button from disappearing.
+    This helper function contains the core logic for running the LangGraph chain.
+    It's separated from the UI code for clarity.
     """
     # 1. Convert Gradio's history (list of lists) into our graph's internal format (list of tuples)
     internal_history = []
@@ -19,32 +16,28 @@ def chat_fn(message: str, history: list[list[str]]):
         if user_msg:
             internal_history.append(("user", user_msg))
         if assistant_msg:
-            # Split assistant messages that might contain multiple parts from previous turns
-            # This is important for correctly reconstructing the state
+            # Split combined messages back into individual parts
             parts = assistant_msg.split("\n\n")
             for part in parts:
                 internal_history.append(("ai", part))
-
-    # Store the length of the history *before* adding the new message.
-    # We will use this to find out what the bot's new reply is.
-    len_before = len(internal_history)
     
-    # Add the user's new message to the history for the graph to process
-    internal_history.append(("user", message))
+    # NOTE: The user's new message is already in the history passed to this function.
+    # We find the length of the history *before* the bot adds its response.
+    len_before = len(internal_history)
 
     # 2. Build the state dictionary to pass to the graph on every turn.
     question_count = sum(1 for role, content in internal_history if content in EXCEL_QUESTIONS)
     
     current_state = {
-        "interview_status": 0 if not history else 1, # Status is 0 only if history is empty
+        "interview_status": 0 if len(history) <= 1 else 1, # Status is 0 only for the very first message
         "interview_history": internal_history,
         "questions": EXCEL_QUESTIONS,
         "question_index": question_count,
-        "evaluations": [], # This remains stateless for simplicity
+        "evaluations": [], 
     }
 
     # 3. Invoke the graph with the current state.
-    print(f"Invoking graph with current state...")
+    print("Invoking graph with current state...")
     new_state = graph.invoke(current_state)
     
     # 4. Extract ONLY the new messages generated by the bot in this turn.
@@ -55,47 +48,84 @@ def chat_fn(message: str, history: list[list[str]]):
     return "\n\n".join(bot_responses)
 
 
-# Create the ChatInterface.
-demo = gr.ChatInterface(
-    fn=chat_fn,
-    title="🤖 AI-Powered Excel Interviewer (Phi-3 Mini)",
-    description="An AI-powered interview system that asks Excel-related questions and provides feedback. Click one of the examples or type a message like 'start' to begin.",
-    chatbot=gr.Chatbot(
-        show_copy_button=True,
+def user_sends_message(user_message: str, history: list[list[str]]):
+    """
+    This function is called when the user submits their message.
+    It provides instant UI feedback by adding the user's message to the chat,
+    then streams the bot's response.
+    """
+    # Append the user's message to the history for immediate display
+    history.append([user_message, None])
+    
+    # Get the bot's response from our backend logic
+    bot_response = run_graph_logic(user_message, history)
+    
+    # Update the last message in the history with the bot's full response
+    history[-1][1] = bot_response
+    
+    # Return the updated history for the chatbot and an empty string to clear the textbox
+    return history, ""
+
+
+def clear_chat():
+    """Called when the 'Clear' button is pressed."""
+    return [], ""
+
+
+# --- MANUAL UI LAYOUT WITH GR.BLOCKS ---
+with gr.Blocks(theme="soft", css=".gradio-container {max-width: 1200px; margin: 0 auto;}") as demo:
+    gr.Markdown(
+        """
+        # 🤖 AI-Powered Excel Interviewer (Phi-3 Mini)
+        An AI-powered interview system that asks Excel-related questions and provides feedback. 
+        Click one of the examples or type a message like 'start' to begin.
+        """
+    )
+
+    chatbot = gr.Chatbot(
+        label="Interview Conversation",
         height=600,
+        show_copy_button=True,
         placeholder="The interview will begin after you send your first message.",
         avatar_images=(None, "https://upload.wikimedia.org/wikipedia/commons/1/1d/Microsoft_Excel_2013-2019_logo.svg")
-    ),
-    textbox=gr.Textbox(
-        placeholder="Type your answer here and press Enter...", 
-        label="Your Response",
-        lines=3
-    ),
-    theme="soft",
-    submit_btn="Submit Answer",
-    examples=[
-        "I'm ready to start the interview",
-        "Let's begin",
-        "Start the assessment"
-    ],
-    cache_examples=False
-)
+    )
 
-# Add custom CSS for better styling
-demo.css = """
-    .chat-message {
-        font-size: 16px;
-        line-height: 1.5;
-    }
-    .gradio-container {
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-"""
+    # Create a row for the textbox and submit button
+    with gr.Row():
+        user_input = gr.Textbox(
+            show_label=False,
+            placeholder="Type your answer here and press Enter...",
+            scale=5  # Make the textbox larger
+        )
+        submit_btn = gr.Button("Submit", variant="primary", scale=1)
+
+    # Create a row for the examples and clear button
+    with gr.Row():
+        clear_btn = gr.Button("Clear and Restart Interview", variant="stop")
+        gr.Examples(
+            examples=["I'm ready to start the interview", "Let's begin", "Start the assessment"],
+            inputs=user_input
+        )
+
+    # --- EVENT LISTENERS ---
+    # Define what happens when the user clicks the submit button or presses Enter
+    submit_btn.click(
+        fn=user_sends_message,
+        inputs=[user_input, chatbot],
+        outputs=[chatbot, user_input] # Update chatbot and clear user_input
+    )
+    user_input.submit(
+        fn=user_sends_message,
+        inputs=[user_input, chatbot],
+        outputs=[chatbot, user_input]
+    )
+    # Define what happens when the user clicks the clear button
+    clear_btn.click(
+        fn=clear_chat,
+        inputs=None,
+        outputs=[chatbot, user_input],
+        queue=False # Clearing should be instant
+    )
 
 if __name__ == "__main__":
-    demo.launch(
-        share=False,
-        debug=True,
-        show_error=True
-    )
+    demo.launch(debug=True, show_error=True)