一、 前言

在前幾天的文章中，我們透過 localStorage 為「AI 酒館」打造了對話紀錄持久化功能。但如果所有 NPC 都共用同一串訊息紀錄，當我們從冷酷調酒師 Mark 切換到浪漫吟遊詩人 Bard 時，對話畫面就會顯得非常混亂且不合邏輯。

為了讓每一位酒館角色擁有獨立的個人魅力與對話宇宙，今天的核心任務是將狀態架構升級為：依據角色 ID 進行獨立隔離儲存與動態切換！

二、 為什麼需要角色狀態隔離？

在多角色的 AI Role-play 應用中，獨立對話狀態有以下優勢：

1. 維護 Prompt 人設一致性：調酒師與吟遊詩人的背景故事、性格與對話 Context（上下文）各自獨立，不會因為混在一起而導致 AI 出戲。
2. 沉浸式 UI 體驗：點擊切換角色時，整個對話視窗的標題、人設簡介與對話歷史同步轉換，提供類似 Discord 多頻道切換的流暢體驗。

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

1. 下達 Vibe Coding 需求
   我們透過 AI 助手重構 React 的 State 管理，以 Object 或 Key-Value Pair 的方式為每個角色維持獨立的 Message Array。

2. 核心多角色記憶隔離邏輯實作
   前端處理角色動態切換與對應儲存 Key 的程式碼概念大致如下：

   import { useState, useEffect } from 'react';

   export function useMultiCharacterChat(activeCharacterId: string) {
     // 根據當前選擇的角色 ID 產生獨立的 localStorage Key
     const storageKey = `chat_messages_${activeCharacterId}`;

     const [messages, setMessages] = useState(() => {
       const saved = localStorage.getItem(storageKey);
       return saved ? JSON.parse(saved) : [];
     });

     // 當 activeCharacterId 改變時，自動載入該角色的歷史紀錄
     useEffect(() => {
       const saved = localStorage.getItem(storageKey);
       setMessages(saved ? JSON.parse(saved) : []);
     }, [activeCharacterId]);

     // 更新訊息時寫入對應角色的 Storage
     const saveMessages = (newMessages: any) => {
       setMessages(newMessages);
       localStorage.setItem(storageKey, JSON.stringify(newMessages));
     };

     return { messages, saveMessages };
   }
   

四、 今日心得與預告

• 今日心得：搞定多角色的對話隔離後，我們的 AI 酒館框架變得極具擴充性！未來只要簡單新增幾行角色設定檔，就能無限擴充新的 NPC 角色。
• 明日預告 (Day 09)：【視覺】酒館氛圍升級！為不同 NPC 打造專屬主題色調與動態背景光暈！