refactor: scope providers by route and use XState selectors

src/app/chat/components/message-bubble.tsx

@@ -8,7 +8,7 @@
  *   - AI：[Avatar] [Content] [占位 spacer]
  *   - 用户：[占位 spacer] [Content] [Avatar]
  */
-import { useUserState } from "@/stores/user/user-context";
+import { useUserSelector } from "@/stores/user/user-context";
 
 import { MessageAvatar } from "./message-avatar";
 import { MessageContent } from "./message-content";
@@ -49,7 +49,7 @@ export function MessageBubble({
   onUnlockImageMessage,
   onOpenImage,
 }: MessageBubbleProps) {
-  const { avatarUrl } = useUserState();
+  const avatarUrl = useUserSelector((state) => state.context.avatarUrl);
 
   if (isFromAI) {
     return (