feat: Add /[lang]/sandbox page with REPL, code execution, file addition, and section chat

app/(docs)/@chat/chat/[chatId]/chatArea.tsx

@@ -116,6 +116,9 @@ export function ChatAreaContent(props: Props) {
       questionScope: "page",
       sectionContent: priorSectionContent,
       deleteChatOnCreated: chatId,
+      replOutputs: chatData.replOutputs ?? {},
+      files: chatData.files ?? {},
+      execResults: chatData.execResults ?? {},
     });
   };
 
@@ -127,20 +130,28 @@ export function ChatAreaContent(props: Props) {
       <div className="flex-none breadcrumbs text-sm">
         <ul className="flex-wrap">
           <li>
-            <Link href={`/${langId}/${langEntry?.pages[0].slug}`}>
-              {langEntry?.name}
+            <Link
+              href={
+                langEntry?.pages[0]
+                  ? `/${langId}/${langEntry.pages[0].slug}`
+                  : `/${langId}/sandbox`
+              }
+            >
+              {langEntry?.name ?? langId}
             </Link>
           </li>
           <li>
             <Link href={`/${chatData.section.pagePath}`}>
-              {pageEntry?.index}. {pageEntry?.name}
-            </Link>
-          </li>
-          <li>
-            <Link href={`/${chatData.section.pagePath}#${chatData.sectionId}`}>
-              {targetSection?.title}
+              {pageEntry ? `${pageEntry.index}. ${pageEntry.name}` : "Sandbox"}
             </Link>
           </li>
+          {targetSection?.title && targetSection.title !== "sandbox" && (
+            <li>
+              <Link href={`/${chatData.section.pagePath}#${chatData.sectionId}`}>
+                {targetSection.title}
+              </Link>
+            </li>
+          )}
         </ul>
       </div>
       <div className="flex flex-wrap items-center gap-2">

app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx

@@ -14,6 +14,7 @@ import {
 // import { getLanguageName } from "../pagesList";
 import { DynamicMarkdownSection, PagePath } from "@/lib/docs";
 import { useSendChat } from "@/(docs)/useSendChat";
+import { useEmbedContext } from "@/terminal/embedContext";
 
 interface ChatFormProps {
   path: PagePath;
@@ -30,6 +31,7 @@ export function ChatForm({ path, langName, sectionContent, close }: ChatFormProp
   );
 
   const { sendChat, isLoading, errorMessage } = useSendChat();
+  const { files, replOutputs, execResults } = useEmbedContext();
 
   const exampleData = useMemo(
     () =>
@@ -70,6 +72,9 @@ export function ChatForm({ path, langName, sectionContent, close }: ChatFormProp
       userQuestion,
       questionScope,
       sectionContent,
+      files,
+      replOutputs,
+      execResults,
       onSuccess: () => {
         setInputValue("");
         close();

app/(docs)/@docs/[lang]/[pageId]/page.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/lib/docs";
 import { DocsAutoRedirect } from "./autoRedirect";
 import { TermDefinitionProvider } from "@/markdown/term";
+import { EmbedContextProvider } from "@/terminal/embedContext";
 
 export async function generateMetadata({
   params,
@@ -68,19 +69,21 @@ export default async function Page({
 
   return (
     <>
-      <TermDefinitionProvider
-        termDefinitions={termDefinitions}
-        lang={lang}
-        page={pageId}
-      >
-        <PageContent
-          chatHistories={chatHistories}
-          splitMdContent={splitMdContent}
-          langId={lang}
-          pageSlug={pageId}
-          path={path}
-        />
-      </TermDefinitionProvider>
+      <EmbedContextProvider lang={lang} pageId={pageId}>
+        <TermDefinitionProvider
+          termDefinitions={termDefinitions}
+          lang={lang}
+          page={pageId}
+        >
+          <PageContent
+            chatHistories={chatHistories}
+            splitMdContent={splitMdContent}
+            langId={lang}
+            pageSlug={pageId}
+            path={path}
+          />
+        </TermDefinitionProvider>
+      </EmbedContextProvider>
       <DocsAutoRedirect path={path} />
     </>
   );

app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx

@@ -19,7 +19,6 @@ import Link from "next/link";
 import { useChatId } from "@/(docs)/chatAreaState";
 import { ChatWithMessages } from "@/lib/chatHistory";
 import { usePagesListForLang } from "@/pagesListContext";
-import { useEmbedContext } from "@/terminal/embedContext";
 import { useRouter } from "next/navigation";
 import { revalidateChatAction } from "@/actions/revalidateChat";
 import { RegenerateStreamEvent } from "@/api/chat/regenerate-section/route";
@@ -167,10 +166,12 @@ export function PageContent(props: PageContentProps) {
   );
 }
 
-function ChatListForSection(props: {
+export function ChatListForSection(props: {
   dynamicMdContent: DynamicMarkdownSection[];
   sectionId: SectionId;
   chatHistories: ChatWithMessages[];
+  fullWidth?: boolean;
+  className?: string;
 }) {
   const { dynamicMdContent, sectionId, chatHistories } = props;
   const filteredChatHistories = chatHistories.filter(
@@ -195,10 +196,15 @@ function ChatListForSection(props: {
       */}
       <ul
         className={clsx(
-          chatId === null
-            ? "hidden has-chat-1:block"
-            : "hidden has-chat-2:block",
-          "mt-2 ml-4 w-full max-w-chat-list",
+          props.className,
+          props.fullWidth
+            ? ""
+            : clsx(
+                chatId === null
+                  ? "hidden has-chat-1:block"
+                  : "hidden has-chat-2:block",
+                "mt-2 ml-4 w-full max-w-chat-list"
+              ),
           "menu menu-sm",
           "rounded-lg shadow-sm bg-base-200"
         )}
@@ -223,40 +229,42 @@ function ChatListForSection(props: {
         ))}
       </ul>
       {/*xl未満 or xl以上でチャットを表示している → 小さいボタンを表示*/}
-      <details
-        className={clsx(
-          chatId === null
-            ? "block has-chat-1:hidden"
-            : "block has-chat-2:block",
-          "dropdown dropdown-end",
-          "mt-2 ml-2"
-        )}
-      >
-        <summary className="btn btn-outline btn-secondary btn-sm">
-          <ChatIcon />
-          {filteredChatHistories.length}
-        </summary>
-        <ul
+      {!props.fullWidth && (
+        <details
           className={clsx(
-            "menu menu-sm dropdown-content",
-            "w-max max-w-[75vw]",
-            "z-30",
-            "rounded-lg shadow-sm bg-base-200/60 backdrop-blur-xs"
+            chatId === null
+              ? "block has-chat-1:hidden"
+              : "block has-chat-2:hidden",
+            "mt-2 ml-2",
+            "dropdown dropdown-end"
           )}
         >
-          {filteredChatHistories.map(({ title, chatId }) => (
-            <li key={chatId}>
-              <Link
-                className="text-wrap text-justify"
-                href={`/chat/${chatId}`}
-                scroll={false}
-              >
-                {title}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </details>
+          <summary className="btn btn-outline btn-secondary btn-sm">
+            <ChatIcon />
+            {filteredChatHistories.length}
+          </summary>
+          <ul
+            className={clsx(
+              "menu menu-sm dropdown-content",
+              "w-max max-w-[75vw]",
+              "z-30",
+              "rounded-lg shadow-sm bg-base-200/60 backdrop-blur-xs"
+            )}
+          >
+            {filteredChatHistories.map(({ title, chatId }) => (
+              <li key={chatId}>
+                <Link
+                  className="text-wrap text-justify"
+                  href={`/chat/${chatId}`}
+                  scroll={false}
+                >
+                  {title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
     </>
   );
 }
@@ -302,7 +310,6 @@ function OutdatedSectionAlert(props: {
     total: 0,
   });
 
-  const { files, replOutputs, execResults } = useEmbedContext();
   const router = useRouter();
 
   const handleRegenerateSection = async () => {
@@ -324,9 +331,6 @@ function OutdatedSectionAlert(props: {
         body: JSON.stringify({
           path,
           sectionId,
-          replOutputs,
-          files,
-          execResults,
         }),
       });
 

app/(docs)/@docs/[lang]/sandbox/page.tsx

@@ -0,0 +1,50 @@
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { SandboxContent } from "./sandboxContent";
+import { getChatFromCache, initContext } from "@/lib/chatHistory";
+import { getPagesListForLang, LangId, PageSlug } from "@/lib/docs";
+import { EmbedContextProvider } from "@/terminal/embedContext";
+import { DocsAutoRedirect } from "../[pageId]/autoRedirect";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: LangId }>;
+}): Promise<Metadata> {
+  const { lang } = await params;
+  const langEntry = await getPagesListForLang(lang);
+  if (!langEntry) notFound();
+
+  return {
+    title: `${langEntry.name} - Sandbox`,
+    description: `${langEntry.name} のインタラクティブなコード実行サンドボックスです。`,
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ lang: LangId }>;
+}) {
+  const { lang } = await params;
+
+  const langEntry = await getPagesListForLang(lang);
+  if (!langEntry) notFound();
+
+  const path = { lang, page: "sandbox" as PageSlug };
+  const context = await initContext();
+  const chatHistories = await getChatFromCache(path, context.userId);
+
+  return (
+    <>
+      <EmbedContextProvider lang={lang} pageId="sandbox">
+        <SandboxContent
+          langId={lang}
+          path={path}
+          chatHistories={chatHistories}
+        />
+      </EmbedContextProvider>
+      <DocsAutoRedirect path={path} />
+    </>
+  );
+}