今天差個分支來刻一下 UI
前幾天都在刻 Memory、Brain、Tools，雖然能跑，但沒有一個直覺的觀測方式。今天嘗試用 Streamlit 打造了一個簡單的 chat UI，把 agent-brain 的 streaming 輸出可視化。

核心元件：st.chat_message

Streamlit 在 1.25 之後有提供 st.chat_message，這讓我可以很輕鬆地做出「聊天氣泡」效果。

with st.chat_message("user"):
    st.markdown("這是使用者的輸入")

with st.chat_message("assistant"):
    st.markdown("這是助理的回覆")

• "user" 和 "assistant" 是預設樣式，會有不同的 avatar。
• 裡面可以放任何元素（markdown, status, table 等）。
• 我把使用者輸入 (st.chat_input) 和 agent 的最終回答都放在這個氣泡裡。

這樣 UI 上就會像真的對話一樣，一格一格往下堆疊。

狀態觀測：st.status

但光有 chat_message 還不夠，因為我的 agent 不是單一輸出，而是會經過多個 State（Reasoning → Action → Answering）。
所以我用了 st.status 來顯示「中繼狀態」。

with st.chat_message("assistant"):
    with st.status("ReasoningState", expanded=True, state="running"):
        st.markdown("LLM 的推理文字正在串流...")

• label：狀態名稱（我直接放 state name，比如 "ReasoningState"）。
• expanded=True：預設展開，方便看 streaming 的過程。
• state="running" 或 "complete"：用來標記進行中/已完成。

最後一個狀態（AnswerState）我就不放在 status 裡，而是直接用 chat_message("assistant") 當作最終回答的氣泡。

Demo

code: https://github.com/Aquila-f/agent-brain/blob/master/tests/ui.py

下一步

明天想開始找一些 tool using 相關的 dataset, 並且以 ReAct 當作是 base line, 開始抽換不同的 memory structure & net structure

ref:
https://docs.streamlit.io/develop/api-reference/status/st.status
https://docs.streamlit.io/develop/tutorials/chat-and-llm-apps/build-conversational-apps#build-a-chatgpt-like-app