一、 前言

在前幾天的文章中，我們已經成功讓「AI 酒館」支援多角色切換，並且每個角色都有獨立的記憶。不過，隨著和調酒師 Mark 聊得越來越深入，玩家可能會同時聊多個不同的話題（例如一條聊調酒心得、另一條聊人生哲學）。如果所有對話全都擠在同一個畫面上，不僅雜亂，也失去了分流討論的樂趣。

為了讓酒館的對話管理更有組織，今天的核心任務是實作：多話題清單（Chat Sessions / Threads）管理！

二、 為什麼 AI 專案需要 Session 化的話題管理？

1. 情境隔離：不同的聊天主題可以保有各自獨立的上下文，不會把上一個話題的記憶混淆到新話題中。
2. 極佳的組織性：參考現代 AI 聊天工具（如 ChatGPT、Claude）的側邊欄設計，讓玩家能隨時開新對話、切換歷史話題。

三、 實作步驟與核心程式碼

1. 下達 Vibe Coding 需求
   我們透過 AI 助手在資料結構中引入 Session 概念，並在側邊欄擴充話題清單的 CRUD（新增、切換、刪除）操作介面。

2. 核心多話題管理邏輯實作
   前端處理話題清單與獨立儲存的程式碼概念大致如下：

   import { useState, useEffect } from 'react';
   
   export function useChatSessions(characterId: string) {
     const sessionsKey = `sessions_${characterId}`;
   
     // 讀取該角色的所有話題清單
     const [sessions, setSessions] = useState(() => {
       const saved = localStorage.getItem(sessionsKey);
       return saved ? JSON.parse(saved) : [{ id: 'default', title: '新的對話', messages: [] }];
     });
   
     const [activeSessionId, setActiveSessionId] = useState(sessions[0]?.id || 'default');
   
     // 當 sessions 改變時同步寫入 localStorage
     useEffect(() => {
       localStorage.setItem(sessionsKey, JSON.stringify(sessions));
     }, [sessions, sessionsKey]);
   
     // 新增對話主題
     const createNewSession = () => {
       const newSession = { id: Date.now().toString(), title: `新對話 ${sessions.length + 1}`, messages: [] };
       setSessions([newSession, ...sessions]);
       setActiveSessionId(newSession.id);
     };
   
     return { sessions, activeSessionId, setActiveSessionId, createNewSession };
   }
   

四、 今日心得與預告

• 今日心得：導入 Session 管理後，我們的 AI 酒館在架構上已經具備了完整聊天軟體的雛形！不僅能換角色，還能開創無限個對話分支。
• 明日預告 (Day 12)：【優化】酒館背景音樂與環境音效（Web Audio API）！讓玩家在對話時伴隨著輕柔的爵士樂與酒吧環境音！