class ChatMessage(BaseModel):
    role: str        # 誰說的話："user"(用戶) 或 "assistant"(AI)
    content: str     # 說了什么：具體的對話內(nèi)容
    timestamp: float # 什么時(shí)候說的：消息時(shí)間戳

def generate_session_id() -> str:
    return str(uuid.uuid4())

def save_message(user_id: str, session_id: str, message: ChatMessage):
    conversation_key = get_conversation_key(user_id, session_id)
    redis_client.lpush(conversation_key, json.dumps(message_data))
    redis_client.ltrim(conversation_key, 0, 19)  # 只保留最近20條消息

def get_conversation_history(user_id: str, session_id: str):
    conversation_key = get_conversation_key(user_id, session_id)
    messages = redis_client.lrange(conversation_key, 0, -1)
    return [json.loads(msg) for msg in messages]

user_msg = ChatMessage(role="user", content=user_message)
save_message(session_id, user_msg)

history = get_conversation_history(session_id, limit=10)

messages = [
    {"role": "system", "content": AI_ROLES[role]},  # AI角色設(shè)定
    *history,  # 歷史對話
    {"role": "user", "content": user_message}  # 當(dāng)前問題
]

response = client.chat.completions.create(
    model="gpt-4o",
    messages=messages,
    stream=True  # 關(guān)鍵：啟用流式響應(yīng)
)

for chunk in response:
    if chunk.choices[0].delta.content:
        content = chunk.choices[0].delta.content
        yield f"data: {json.dumps({'content': content})}\n\n"

@app.post("/chat/start")
async def start_chat(user_id: str):
    session_id = generate_session_id()
    return {"session_id": session_id, "welcome_message": "你好！我是你的AI助手"}

@app.get("/chat/stream")
async def chat_stream(user_id: str, session_id: str, message: str, role: str = "assistant"):
    return StreamingResponse(generate_streaming_response(user_id, session_id, message, role))

@app.get("/chat/history")
async def get_chat_history(user_id: str, session_id: str):
    history = await get_conversation_history(user_id, session_id)
    return {"messages": history, "total": len(history)}

@app.delete("/chat/history/{session_id}")
async def clear_conversation_history(session_id: str, user_id: str):
    redis_client.delete(get_conversation_key(user_id, session_id))
    return {"message": "對話歷史已清除"}

@app.get("/roles")
async def get_roles():
    return {"roles": AI_ROLES, "default_role": "assistant"}

<div class="chat-container">
    <!-- 1. 頭部：顯示標(biāo)題和角色選擇 -->
    <div class="chat-header">
        <h1>?? AI智能助手</h1>
        <select id="roleSelect">
            <option value="assistant">?? 智能助手</option>
            <option value="teacher">???? AI老師</option>
            <option value="programmer">???? 編程專家</option>
        </select>
    </div>

    <!-- 2. 消息區(qū)域：顯示對話內(nèi)容 -->
    <div class="messages-container" id="messagesContainer">
        <!-- 消息會動(dòng)態(tài)添加到這里 -->
    </div>

    <!-- 3. 輸入?yún)^(qū)域：用戶輸入消息 -->
    <div class="input-container">
        <input type="text" id="messageInput" placeholder="輸入你的消息...">
        <button onclick="sendMessage()">?? 發(fā)送</button>
    </div>

    <!-- 4. 工具欄：常用功能按鈕 -->
    <div class="toolbar">
        <button onclick="clearHistory()">??? 清除歷史</button>
        <button onclick="newChat()">?? 新對話</button>
    </div>
</div>

async function startNewChat() {
    // 調(diào)用后端API創(chuàng)建新會話
    const response = await fetch('/api/chat/start', { method: 'POST' });
    const data = await response.json();
    currentSessionId = data.session_id;

    // 顯示歡迎消息
    addMessage('assistant', '你好！我是你的AI助手，有什么可以幫助你的嗎？');
}

async function sendMessage() {
    const message = document.getElementById('messageInput').value;

    // 顯示用戶消息
    addMessage('user', message);

    // 使用EventSource接收流式響應(yīng)
    const eventSource = new EventSource(`/api/chat/stream?session_id=${currentSessionId}&message=${message}`);

    eventSource.onmessage = function(event) {
        const data = JSON.parse(event.data);
        if (data.content) {
            // 實(shí)時(shí)顯示AI回復(fù)
            updateAIMessage(data.content);
        }
    };
}

function addMessage(role, content) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${role}`;

    // 用戶消息顯示在右邊，AI消息顯示在左邊
    const icon = role === 'user' ? '??' : '??';
    messageDiv.innerHTML = `${icon} ${content}`;

    document.getElementById('messagesContainer').appendChild(messageDiv);

    // 自動(dòng)滾動(dòng)到最新消息
    messageDiv.scrollIntoView({ behavior: 'smooth' });
}

async function clearHistory() {
    if (confirm('確定要清除所有對話歷史嗎？')) {
        await fetch(`/api/chat/history/${currentSessionId}`, { method: 'DELETE' });
        document.getElementById('messagesContainer').innerHTML = '';
        addMessage('system', '對話歷史已清除');
    }
}

fastapi-ai-chat-demo/
├── main.py              # ?? 主應(yīng)用文件（核心邏輯）
├── config.py            # ?? 配置文件（參數(shù)設(shè)置）
├── start_server.py      # ?? 服務(wù)器啟動(dòng)腳本
├── requirements.txt     # ?? 依賴包列表
├── .env.example         # ?? 環(huán)境變量模板
├── static/
│   └── index.html      # ?? 前端聊天界面
└── README.md           # ?? 項(xiàng)目說明文檔

git clone git@github.com:wayn111/fastapi-ai-chat-demo.git
cd fastapi-ai-chat-demo

pip install -r requirements.txt

# OpenAI配置
OPENAI_API_KEY=your_openai_api_key_here
OPENAI_BASE_URL=https://api.openai.com/v1

# Redis配置
REDIS_HOST=localhost
REDIS_PORT=6379

# Windows
redis-server

# Linux/macOS
sudo systemctl start redis

python start_server.py