AI Chat

A coding agent workspace with sessions, a scripted run, composer menus and an image gallery.

A client-side AI chat with sample data. It is built from ai-chat-01 inside the shared app-shell-01 frame. It plays a scripted agent run of about 19 seconds on load, answers what you send with the same script, and switches the side panel to an image gallery when you open the image session. No model is called and there is no API key.

AI ChatOpen full screen

"use client";

import { RiChat3Line } from "@remixicon/react";

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

/**
 * The AI chat page inside the shared app shell. The shell's heading row only
 * shows below lg, where it brings the navigation button; from lg up the chat
 * uses the whole height, as the workspace has its own header.
 */
export function AiChatApp({
  basePath = "",
  links,
  popupClassName,
}: {
  basePath?: string;
  /** Hrefs for the other pages in the sidebar, by nav key. */
  links?: Partial<Record<string, string>>;
  popupClassName?: string;
}) {
  const chat = useAiChat();
  return (
    <AppShell
      selected="ai-chat"
      basePath={basePath}
      links={links}
      popupClassName={popupClassName}
      sidebarContent={({ closeNav }) => (
        <AiChatSessions
          bare
          repos={chat.repos}
          open={chat.openRepos}
          active={chat.active}
          onToggleRepo={chat.toggleRepo}
          onSelect={(id) => {
            chat.select(id);
            closeNav();
          }}
          onNew={() => {
            chat.create();
            closeNav();
          }}
        />
      )}
      nav="menu"
      account={{
        name: "Northstar",
        caption: "Pro plan",
        action: "Upgrade",
      }}
      fill
      flush
    >
      <AppShellHeader
        title="AI chat"
        icon={RiChat3Line}
        className="pt-2 pb-3 lg:hidden"
      />
      <div className="min-h-0 flex-1">
        <AiChat chat={chat} sessions={false} popupClassName={popupClassName} />
      </div>
    </AppShell>
  );
}