AI Image Generation

"use client";

import { RiImageLine } from "@remixicon/react";
import { useRouter } from "next/navigation";

import { useAiChat } from "@/components/blocks/ai-chat-01/components/ai-chat";
import { AiChatSessions } from "@/components/blocks/ai-chat-01/components/ai-chat-sessions";
import { AiImageGeneration } from "@/components/blocks/ai-image-generation-01/components/ai-image-generation";
import {
  AppShell,
  AppShellHeader,
} from "@/components/blocks/app-shell-01/components/app-shell";

// The poster session in the sample conversation tree.
const imageSession = "ns-2";

/**
 * The image generation page inside the shared app shell. The sidebar lists
 * the same conversations as the chat page, with this one open. The shell's
 * heading row only shows below lg, where it brings the navigation button;
 * from lg up the workspace uses the whole height.
 */
export function AiImageGenerationApp({
  basePath = "",
  links,
  popupClassName,
}: {
  basePath?: string;
  /** Hrefs for the other pages in the sidebar, by nav key. */
  links?: Partial<Record<string, string>>;
  popupClassName?: string;
}) {
  const router = useRouter();
  const chat = useAiChat();
  const chatHref = links?.["ai-chat"];
  const goToChat = () => {
    if (chatHref) {
      router.push(chatHref);
    }
  };
  return (
    <AppShell
      fill
      flush
      nav="menu"
      account={{ caption: "Pro plan", action: "Upgrade" }}
      selected="image"
      basePath={basePath}
      links={links}
      popupClassName={popupClassName}
      sidebarContent={({ closeNav }) => (
        <AiChatSessions
          bare
          repos={chat.repos}
          open={chat.openRepos}
          active={imageSession}
          onToggleRepo={chat.toggleRepo}
          onSelect={(id) => {
            if (id !== imageSession) {
              goToChat();
            }
            closeNav();
          }}
          onNew={() => {
            goToChat();
            closeNav();
          }}
        />
      )}
    >
      <AppShellHeader
        title="Image generation"
        icon={RiImageLine}
        className="pt-2 pb-3 lg:hidden"
      />
      <div className="min-h-0 flex-1">
        <AiImageGeneration popupClassName={popupClassName} />
      </div>
    </AppShell>
  );
}