Chat Persona

"use client";

import { useState } from "react";
import {
  ChatPersona,
  ChatPersonaAvatar,
  ChatPersonaInfo,
  ChatPersonaName,
  type ChatPersonaOption,
  type ChatPersonaState,
  ChatPersonaStateLabel,
  ChatPersonaSwitcher,
} from "@/components/ui/chat-persona";

const personas: ChatPersonaOption[] = [
  {
    id: "research",
    name: "Исследователь",
    description: "Подкрепляет каждый тезис источником",
    fallback: "И",
  },
  {
    id: "code",
    name: "Ревьюер кода",
    description: "Находит баги на ранней стадии",
    fallback: "Р",
  },
  {
    id: "writer",
    name: "Редактор",
    description: "Шлифует текст до блеска",
    fallback: "Р",
  },
];

const states: ChatPersonaState[] = [
  "idle",
  "listening",
  "thinking",
  "speaking",
  "asleep",
];

export default function Particle() {
  const [active, setActive] = useState("research");
  const persona = personas.find((p) => p.id === active) ??
    personas[0] ?? { id: "fallback", name: "Persona", fallback: "?" };

  return (
    <div className="flex w-full max-w-2xl flex-col gap-4 p-4">
      <ChatPersonaSwitcher
        onValueChange={(id) => setActive(id)}
        personas={personas}
        value={active}
      />

      <div className="flex flex-wrap items-center gap-6 rounded-lg border bg-card p-4">
        {states.map((state) => (
          <ChatPersona key={state} state={state}>
            <ChatPersonaAvatar fallback={persona.fallback} />
            <ChatPersonaInfo>
              <ChatPersonaName>{persona.name}</ChatPersonaName>
              <ChatPersonaStateLabel />
            </ChatPersonaInfo>
          </ChatPersona>
        ))}
      </div>
    </div>
  );
}