import streamlit as st
from datetime import datetime
# ------- 卡片樣式 CSS -------
st.markdown("""
""", unsafe_allow_html=True)
# ------- 範例訊息資料（你應該替換成實際 API 回傳） -------
messages = [
{"role": "user", "content": "你好，今天會下雨嗎？", "timestamp": "2025-07-18 10:31"},
{"role": "assistant", "content": "你好！今天不會下雨，記得防曬 ☀️", "timestamp": "2025-07-18 10:31"},
{"role": "user", "content": "那我適合出門運動嗎？", "timestamp": "2025-07-18 10:32"},
{"role": "assistant", "content": "非常適合！氣溫約 28 度，濕度適中。", "timestamp": "2025-07-18 10:32"},
]
# ------- 顯示對話卡片 -------
for msg in messages:
role = msg["role"]
content = msg["content"]
timestamp = msg.get("timestamp", datetime.now().strftime("%Y-%m-%d %H:%M"))
container_class = "chat-user" if role == "user" else "chat-assistant"
align = "right" if role == "user" else "left"
name = "🧑 使用者" if role == "user" else "🤖 機器人"
st.markdown(f"""
{name} [{timestamp}]
{content}
""", unsafe_allow_html=True)