Chat Sandbox

import {
  ChatCodeBlock,
  ChatCodeBlockActions,
  ChatCodeBlockCopyButton,
  ChatCodeBlockFilename,
  ChatCodeBlockHeader,
} from "@/components/ui/chat-code-block";
import {
  ChatSandbox,
  ChatSandboxContent,
  ChatSandboxFrame,
  ChatSandboxHeader,
  ChatSandboxTab,
  ChatSandboxTabPanel,
  ChatSandboxTabs,
  ChatSandboxTabsBar,
  ChatSandboxTabsList,
} from "@/components/ui/chat-sandbox";
import { ChatTerminal } from "@/components/ui/chat-terminal";

const code = `export default function App() {
  return (
    <main className="grid min-h-svh place-items-center bg-zinc-950 text-zinc-50">
      <h1 className="text-3xl font-semibold">Привет из песочницы</h1>
    </main>
  );
}`;

const consoleLog = [
  "\x1b[2m> \x1b[0mvite dev",
  "  \x1b[32m✓\x1b[0m Local: http://localhost:5173/",
  "  \x1b[32m✓\x1b[0m ready in 248ms",
  "",
  "\x1b[33m! \x1b[0mHMR connected",
].join("\n");

export default function Particle() {
  return (
    <div className="w-full max-w-3xl p-4">
      <ChatSandbox defaultOpen>
        <ChatSandboxHeader status="completed" title="Превью Hello World" />
        <ChatSandboxContent>
          <ChatSandboxTabs defaultValue="preview">
            <ChatSandboxTabsBar>
              <ChatSandboxTabsList>
                <ChatSandboxTab value="preview">Превью</ChatSandboxTab>
                <ChatSandboxTab value="code">Код</ChatSandboxTab>
                <ChatSandboxTab value="console">Консоль</ChatSandboxTab>
              </ChatSandboxTabsList>
            </ChatSandboxTabsBar>

            <ChatSandboxTabPanel value="preview">
              <ChatSandboxFrame
                className="min-h-70"
                src="data:text/html;charset=utf-8,%3Cstyle%3Ebody%7Bmargin%3A0%3Bdisplay%3Agrid%3Bplace-items%3Acenter%3Bmin-height%3A100vh%3Bbackground%3A%2309090b%3Bcolor%3A%23fafafa%3Bfont-family%3Asystem-ui%7Dh1%7Bfont-size%3A2rem%3Bfont-weight%3A600%7D%3C%2Fstyle%3E%3Ch1%3E%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82%20%D0%B8%D0%B7%20%D0%BF%D0%B5%D1%81%D0%BE%D1%87%D0%BD%D0%B8%D1%86%D1%8B%3C%2Fh1%3E"
              />
            </ChatSandboxTabPanel>

            <ChatSandboxTabPanel value="code">
              <div className="p-3">
                <ChatCodeBlock code={code} language="tsx" showLineNumbers>
                  <ChatCodeBlockHeader>
                    <ChatCodeBlockFilename>App.tsx</ChatCodeBlockFilename>
                    <ChatCodeBlockActions>
                      <ChatCodeBlockCopyButton />
                    </ChatCodeBlockActions>
                  </ChatCodeBlockHeader>
                </ChatCodeBlock>
              </div>
            </ChatSandboxTabPanel>

            <ChatSandboxTabPanel value="console">
              <div className="p-3">
                <ChatTerminal output={consoleLog} />
              </div>
            </ChatSandboxTabPanel>
          </ChatSandboxTabs>
        </ChatSandboxContent>
      </ChatSandbox>
    </div>
  );
}