fix: Improve frontend UX & consistent message history (#545)

This PR fixes issue causing different messages to show up on decline
ticket before and after page refresh.

We now return the actual response from the LLM instead of a hardcoded
response in case of LangGraph.

This PR also removes unused `config` parameter from graph nodes, and an
unused hardcoded booking decline AI message.

Author: anubhav756

agent/react_graph.py

@@ -115,7 +115,7 @@ def agent_should_continue(
         # Otherwise, we stop (reply to the user)
         return "end"
 
-    async def booking_validation_node(state: UserState, config: RunnableConfig):
+    async def booking_validation_node(state: UserState):
         """
         The node representing async function that validate the ticket.
         After ticket validation, it will return AIMessage with updated ticket args.
@@ -154,7 +154,7 @@ def booking_should_continue(state: UserState) -> Literal["continue", "agent"]:
         # Otherwise, send response back to agent
         return "agent"
 
-    async def insert_ticket_node(state: UserState, config: RunnableConfig):
+    async def insert_ticket_node(state: UserState):
         """
         Node to update human response to prevent
         """

app.py

@@ -192,14 +192,16 @@ async def decline_flight(request: Request):
     # Note in the history, that the ticket was not booked
     # This is helpful in case of reloads so there doesn't seem to be a break in communication.
     agent = request.app.state.agent
-    await agent.user_session_decline_ticket(request.session["uuid"])
+    response = await agent.user_session_decline_ticket(request.session["uuid"])
+    response = response["output"]
     request.session["history"].append(
         {"type": "ai", "data": {"content": "Please confirm if you would like to book."}}
     )
     request.session["history"].append(
         {"type": "human", "data": {"content": "I changed my mind."}}
     )
-    return None
+    request.session["history"].append({"type": "ai", "data": {"content": response}})
+    return response
 
 
 @routes.post("/reset")

static/index.css

@@ -363,7 +363,6 @@ div.chat-wrapper div.chat-content div#loader-container span {
 #trace {
     position: absolute;
     width: 400px;
-    min-height: 200px;
     max-height: 400px;
     background: #f8f8f8;
     padding: 10px;

static/index.js

@@ -262,10 +262,14 @@ async function cancelTicket(id) {
             'Content-Type': 'application/json'
         }
     });
+    logMessage("human", "I changed my mind.")
+    removeTicketChoices(id);
+
     if (response.ok) {
-        logMessage("human", "I changed my mind.")
-        removeTicketChoices(id);
-        logMessage("ai", 'Booking declined. What else can I help you with?');
+        logMessage("ai", await response.text());
+    } else {
+        console.error(await response.text())
+        logMessage("ai", "Sorry, something went wrong. 😢")
     }
 }
 

static/trace.js

@@ -22,8 +22,10 @@ export function create_trace(toolcalls) {
         let toolcall = toolcalls[i];
         trace += trace_section_title(toolcall.tool_call_id);
 
+        if (toolcall.sql) {
             trace += trace_header("SQL Executed:");
             trace += trace_sql(toolcall.sql);
+        }
         trace += trace_header("Results:");
         trace += trace_results(toolcall.results);