Building a Customer Support UI with Streamlit

Building a Customer Support User Interface with Streamlit

Introducing a Support Interface

Customer support systems must deliver clear, useful responses. When an AI system uses customer-specific memory, the interface should indicate which customer asked, what the AI generated, and what information was recalled. For the ResolveIQ Lite project, the author worked on the Streamlit UI layer to make this memory feature visible.

Designing the Streamlit Application

The main application resides in app.py and uses Streamlit to create the user interface. The page layout is kept simple with `st.set_page_config(page_title="ResolveIQ Lite", layout="wide")`. A wide layout allows the three sections to display side by side.

Customer Selection and Memory Toggle

The sidebar contains all the controls. Customers are selected from available data. The interface includes:

- Customer selection

- Memory toggle (Hindsight memory ON/OFF)

- Start new session button to clear the current screen/session history while keeping the stored memory

- Customer message input

- Send button

- Current query display

- Generated response display

- Recalled memory display

- Session history

Connecting UI with Backend

Initially, stand-in functions allowed testing the interface before completing backend components. Later, real functions from memory.py and agent.py replaced the temporary functions. The final application imports:

- from memory import retain_incident, recall_incidents

- from agent import generate_reply

The Streamlit UI communicates with the memory and AI layers. The flow is:

Customer ↓ Streamlit UI ↓ Recall Customer Memory ↓ Generate AI Response ↓ Display Response + Memory ↓ Store Interaction

Demonstrating Memory Impact

To show the difference between memory-enabled and memory-disabled responses, the author used two scenarios:

1. Memory ON

- Customer query: "I still haven't received my replacement."

- Recalled memory: "Customer's order A104 arrived damaged and they requested a replacement."

- Generated response incorporates the recalled information.

2. Memory OFF

- Same query is sent again.

- UI displays: "Memory is OFF for this message"

- Response becomes more generic as it doesn't receive the previous customer-specific memory.

Testing and Integration

The application was tested using fictional customer data. Initial integration issues included:

- Hindsight configuration errors due to empty environment variables

- Signature mismatch between the temporary retain_incident() function and the actual function in memory.py

After resolving these, the UI effectively demonstrated how memory affects AI responses.