Next.jsチャットUIでアバターの状態（待機・思考中・発話中）を切り替える実装

public/
  avatars/
    maya-idling.gif    # 待機中：正面を向いて微笑む
    maya-thinking.gif  # 思考中：顎に手を当てて考える
    maya-speaking.gif  # 発話中：手を上げて説明する

// components/MayaAvatar.tsx
"use client";

import { useEffect } from "react";
import Image from "next/image";

type AvatarState = "idling" | "speaking" | "thinking";

const avatarSrc: Record<AvatarState, string> = {
  idling: "/avatars/maya-idling.gif",
  speaking: "/avatars/maya-speaking.gif",
  thinking: "/avatars/maya-thinking.gif",
};

interface MayaAvatarProps {
  state: AvatarState;
  size?: number;
}

export function MayaAvatar({ state, size = 40 }: MayaAvatarProps) {
  // マウント時に全GIFをプリロードして状態切り替え時のちらつきを防ぐ
  useEffect(() => {
    Object.values(avatarSrc).forEach((src) => {
      const img = new window.Image();
      img.src = src;
    });
  }, []);

  return (
    <div
      className="shrink-0 overflow-hidden rounded-full bg-white ring-1 ring-gray-200"
      style={{ width: size, height: size }}
    >
      <Image
        src={avatarSrc[state]}
        alt={`Maya ${state}`}
        width={size}
        height={size}
        unoptimized
        priority
        className="h-full w-full object-cover"
      />
    </div>
  );
}

useEffect(() => {
  Object.values(avatarSrc).forEach((src) => {
    const img = new window.Image();
    img.src = src;
  });
}, []);

// lib/chat.ts
export type ProgressStep = {
  id: "analyzing" | "retrieving" | "fetching" | "generating";
  label: string;
  status: "pending" | "active" | "done";
};

export type ChatBubble =
  | { type: "user"; text: string }
  | { type: "progress"; steps: ProgressStep[]; collapsed: boolean; queryId: string }
  | { type: "progress-done"; steps: ProgressStep[]; collapsed: boolean; queryId: string }
  | { type: "results"; results: SearchResult[]; general_advice: string } // SearchResult はアプリ固有の型
  | { type: "streaming"; general_advice: string }
  | { type: "clarification"; question: string; options?: string[] }
  | { type: "error"; text: string };

// components/ChatThread.tsx（抜粋）

// 処理中 / 処理完了のバブル
if (bubble.type === "progress" || bubble.type === "progress-done") {
  return (
    <div className="animate-fade-in-up flex items-start gap-3">
      <MayaAvatar state={bubble.collapsed ? "idling" : "thinking"} size={40} />
      <div className="w-full max-w-[calc(95%-52px)]">
        <ProgressTimeline bubble={bubble} />
      </div>
    </div>
  );
}

// 回答結果のバブル
if (bubble.type === "results") {
  return (
    <div className="animate-fade-in-up flex items-start gap-3">
      <MayaAvatar state="idling" size={40} />
      {/* 回答コンテンツ */}
    </div>
  );
}

// エラーのバブル
if (bubble.type === "error") {
  return (
    <div className="animate-fade-in-up flex items-start gap-3">
      <MayaAvatar state="idling" size={40} />
      <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-700">
        {bubble.text}
      </div>
    </div>
  );
}

<MayaAvatar state={bubble.collapsed ? "idling" : "thinking"} size={40} />

// app/page.tsx（抜粋）

// 1. ユーザー送信時：progressバブルを collapsed: false で生成
setBubbles((prev) => [
  ...prev,
  { type: "user", text },
  { type: "progress", steps: [], collapsed: false, queryId },
]);

// 2. SSE progressイベント受信時：ステップを追加（thinkingのまま）
if (eventType === "progress") {
  setBubbles((prev) =>
    prev.map((b) => {
      if (b.type !== "progress" || b.queryId !== queryId) return b;
      const updated = b.steps.map((s) =>
        s.status === "active" ? { ...s, status: "done" as const } : s,
      );
      return { ...b, steps: [...updated, makeStep(newStepId)] }; // makeStep: ステップ生成ヘルパー（省略）
    }),
  );
}

// 3. 結果受信時：collapsed: true に変更 → アバターがidlingに戻る
setBubbles((prev) => {
  return prev.map((b) => {
    if (b.type !== "progress" || b.queryId !== queryId) return b;
    return {
      ...b,
      type: "progress-done" as const,
      collapsed: true,
      steps: b.steps.map((s) =>
        s.status === "active" ? { ...s, status: "done" as const } : s,
      ),
    };
  });
});

// app/page.tsx（抜粋）
{bubbles.length === 0 ? (
  <div className="flex flex-col items-center gap-4 py-20">
    <MayaAvatar state="idling" size={96} />
    <p className="text-lg font-semibold text-gray-800">こんにちは！</p>
    <p className="text-sm text-gray-500">お気軽にお問い合わせください。</p>
  </div>
) : (
  <ChatThread bubbles={bubbles} ... />
)}