Chat Image

import { ChatImage } from "@/components/ui/chat-image";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

export default function Particle() {
  return (
    <div className="w-full max-w-md p-4">
      <ChatMessage from="assistant">
        <ChatMessageAvatar fallback="J" />
        <ChatMessageContent>
          <p className="mb-2">Сгенерировал концепт обложки:</p>
          <ChatImage
            alt="Сгенерированная обложка"
            src="https://picsum.photos/seed/jenny-ai/640/360"
          />
        </ChatMessageContent>
      </ChatMessage>
    </div>
  );
}

"use client";

import {
  ChatImageButton,
  ChatImageProvider,
} from "@/components/ui/chat-image";
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent,
} from "@/components/ui/chat-message";

const gallery = [
  "https://picsum.photos/seed/oracul-a/640/420",
  "https://picsum.photos/seed/oracul-b/640/420",
  "https://picsum.photos/seed/oracul-c/640/420",
];

const captions = [
  "Концепт A — тёплая палитра",
  "Концепт B — холодная палитра",
  "Концепт C — высокий контраст",
];

export default function Particle() {
  return (
    <ChatImageProvider>
      <div className="w-full max-w-md p-4">
        <ChatMessage from="assistant">
          <ChatMessageAvatar fallback="J" />
          <ChatMessageContent>
            <p className="mb-2">
              Три концепта обложки — нажмите любой, чтобы открыть в
              просмотрщике, затем листайте стрелками или клавишами ← / →:
            </p>
            <div className="flex flex-col gap-2">
              {gallery.map((src, i) => (
                <ChatImageButton
                  alt={captions[i]}
                  gallery={gallery}
                  key={src}
                  src={src}
                />
              ))}
            </div>
          </ChatMessageContent>
        </ChatMessage>
      </div>
    </ChatImageProvider>
  );
}