Merge branch 'main' into storage

Author: hiromeee

README.md

@@ -83,10 +83,13 @@ npm run lint
 
 - [Next.js](https://nextjs.org/docs)
     - 検索する際は「App Router」を含めることで古い記事に惑わされることが少なくなります。
+- [OpenNext](https://opennext.js.org/cloudflare)
 - [DaisyUI](https://daisyui.com/docs/use/) / [Tailwind CSS](https://tailwindcss.com/docs)
     - buttonやinputやメニューなどの基本的なコンポーネントのデザインはDaisyUIにあるものを使うと楽です
     - 細かくスタイルを調整したい場合はTailwind CSSを使います (CSS直接指定(`style={{...}}`)よりもちょっと楽に書ける)
     - よくわからなかったらstyle直接指定でも良い
+- [SWR](https://swr.vercel.app/ja)
 - [react-markdown](https://www.npmjs.com/package/react-markdown)
-    - オプションがいろいろあり、今はほぼデフォルト設定で突っ込んでいるがあとでなんとかする
-- [OpenNext](https://opennext.js.org/cloudflare)
+- REPL・実行結果表示: [xterm.js](https://xtermjs.org/)
+- コードエディター: [react-ace](https://github.com/securingsincity/react-ace)
+- それ以外のコードブロック: [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)

app/[docs_id]/chatForm.tsx

@@ -5,6 +5,9 @@ import clsx from "clsx";
 import { askAI } from "@/app/actions/chatActions";
 import { StyledMarkdown } from "./markdown";
 import { useChatHistory, type Message } from "../hooks/useChathistory";
+import useSWR from "swr";
+import { getQuestionExample } from "../actions/questionExample";
+import { getLanguageName } from "../pagesList";
 
 interface ChatFormProps {
   documentContent: string;
@@ -13,7 +16,6 @@ interface ChatFormProps {
 
 export function ChatForm({ documentContent, sectionId }: ChatFormProps) {
   const [messages, updateChatHistory] = useChatHistory(sectionId);
-
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isFormVisible, setIsFormVisible] = useState(false);
@@ -23,15 +25,41 @@ export function ChatForm({ documentContent, sectionId }: ChatFormProps) {
     setIsMounted(true);
   }, []);
 
+  const lang = getLanguageName(docs_id);
+  const { data: exampleData, error: exampleError } = useSWR(
+    // 質問フォームを開いたときだけで良い
+    isFormVisible ? { lang, documentContent } : null,
+    getQuestionExample,
+    {
+      // リクエストは古くても構わないので1回でいい
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+  if (exampleError) {
+    console.error("Error getting question example:", exampleError);
+  }
+  // 質問フォームを開くたびにランダムに選び直し、
+  // exampleData[Math.floor(exampleChoice * exampleData.length)] を採用する
+  const [exampleChoice, setExampleChoice] = useState<number>(0); // 0〜1
+
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
 
     const userMessage: Message = { sender: "user", text: inputValue };
     updateChatHistory([userMessage]);
 
+    let userQuestion = inputValue;
+    if(!userQuestion && exampleData){
+      // 質問が空欄なら、質問例を使用
+      userQuestion = exampleData[Math.floor(exampleChoice * exampleData.length)];
+      setInputValue(userQuestion);
+    }
+
     const result = await askAI({
-      userQuestion: inputValue,
+      userQuestion,
       documentContent: documentContent,
     });
 
@@ -54,22 +82,28 @@ export function ChatForm({ documentContent, sectionId }: ChatFormProps) {
   return (
     <>
       {isFormVisible && (
-      <form className="border border-2 border-secondary shadow-xl p-6 rounded-lg bg-base-100" style={{width:"100%", textAlign:"center", boxShadow:"-moz-initial"}} onSubmit={handleSubmit}>
-          <h2 className="text-xl font-bold mb-4 text-left relative -top-2 font-mono h-2">
-            AIへ質問
-          </h2>
-        <div className="input-area" style={{height:"80px"}}>
+      <form className="border border-2 border-secondary shadow-md rounded-lg bg-base-100" style={{width:"100%", textAlign:"center", boxShadow:"-moz-initial"}} onSubmit={handleSubmit}>
+        <div className="input-area">
             <textarea
-              className="textarea textarea-white textarea-md"
-              placeholder="質問を入力してください"
-            style={{width: "100%", height: "110px", resize: "none"}}
+              className="textarea textarea-ghost textarea-md rounded-lg"
+              placeholder={
+                "質問を入力してください" +
+                (exampleData
+                  ? ` (例:「${exampleData[Math.floor(exampleChoice * exampleData.length)]}」)`
+                  : "")
+              }
+              style={{
+                width: "100%",
+                height: "110px",
+                resize: "none",
+                outlineStyle: "none",
+              }}
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
               disabled={isLoading}
             ></textarea>
           </div>
-          <br />
-        <div className="controls" style={{position:"relative", top:"22px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
+        <div className="controls" style={{margin:"10px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
             <div className="left-icons">
               <button
                 className="btn btn-soft btn-secondary rounded-full"
@@ -96,7 +130,10 @@ export function ChatForm({ documentContent, sectionId }: ChatFormProps) {
       {!isFormVisible && (
         <button
           className="btn btn-soft btn-secondary rounded-full"
-          onClick={() => setIsFormVisible(true)}
+          onClick={() => {
+            setIsFormVisible(true);
+            setExampleChoice(Math.random());
+          }}
         >
           チャットを開く
         </button>

app/[docs_id]/markdown.tsx

@@ -1,10 +1,11 @@
 import Markdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import SyntaxHighlighter from "react-syntax-highlighter";
 import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
 import { Heading } from "./section";
-import { EditorComponent } from "../terminal/editor";
-import { ExecFile } from "../terminal/exec";
+import { type AceLang, EditorComponent } from "../terminal/editor";
+import { ExecFile, ExecLang } from "../terminal/exec";
+import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -34,6 +35,11 @@ const components: Components = {
   strong: ({ node, ...props }) => (
     <strong className="text-primary" {...props} />
   ),
+  table: ({ node, ...props }) => (
+    <div className="w-max max-w-full overflow-x-auto mx-auto my-2 rounded-lg border border-base-content/5 shadow-sm">
+      <table className="table w-max" {...props} />
+    </div>
+  ),
   hr: ({ node, ...props }) => <hr className="border-primary my-4" {...props} />,
   pre: ({ node, ...props }) => props.children,
   code: ({ node, className, ref, style, ...props }) => {
@@ -52,21 +58,59 @@ const components: Components = {
           hello, world!
         ---------------------------
         */
-        return (
-          <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
-            <ExecFile
-              language={match[1]}
-              filename={match[3]}
-              content={String(props.children || "").replace(/\n$/, "")}
-            />
-          </div>
-        );
+        let execLang: ExecLang | undefined = undefined;
+        switch (match[1]) {
+          case "python":
+            execLang = "python";
+            break;
+          case "cpp":
+          case "c++":
+            execLang = "cpp";
+            break;
+          default:
+            console.warn(`Unsupported language for exec: ${match[1]}`);
+            break;
+        }
+        if (execLang) {
+          return (
+            <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
+              <ExecFile
+                language={execLang}
+                filenames={match[3].split(",")}
+                content={String(props.children || "").replace(/\n$/, "")}
+              />
+            </div>
+          );
+        }
       } else if (match[3]) {
         // ファイル名指定がある場合、ファイルエディター
+        let aceLang: AceLang | undefined = undefined;
+        switch (match[1]) {
+          case "python":
+            aceLang = "python";
+            break;
+          case "cpp":
+          case "c++":
+            aceLang = "c_cpp";
+            break;
+          case "json":
+            aceLang = "json";
+            break;
+          case "csv":
+            aceLang = "csv";
+            break;
+          case "text":
+          case "txt":
+            aceLang = "text";
+            break;
+          default:
+            console.warn(`Unsupported language for editor: ${match[1]}`);
+            break;
+        }
         return (
           <div className="border border-primary border-2 shadow-md m-2 rounded-lg">
             <EditorComponent
-              language={match[1]}
+              language={aceLang}
               tabSize={4}
               filename={match[3]}
               readonly={match[2] === "-readonly"}
@@ -95,8 +139,8 @@ const components: Components = {
         <SyntaxHighlighter
           language={match[1]}
           PreTag="div"
-          className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
-          // style={todo dark theme?}
+          className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
+          style={tomorrow} // todo dark theme (editor.tsx で指定したのと同じテーマを選ぶようにすること)
           {...props}
         >
           {String(props.children || "").replace(/\n$/, "")}
@@ -107,8 +151,8 @@ const components: Components = {
       return (
         <SyntaxHighlighter
           PreTag="div"
-          className="border border-base-300 mx-2 my-2 rounded-lg text-sm! m-2! p-4!"
-          // style={todo dark theme?}
+          className="border border-base-content/50 mx-2 my-2 rounded-lg text-sm p-4!"
+          style={tomorrow} // todo dark theme
           {...props}
         >
           {String(props.children || "").replace(/\n$/, "")}

app/[docs_id]/page.tsx

@@ -4,7 +4,7 @@ import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
 import { Section } from "./section";
-import * as pyodideLock from "pyodide/pyodide-lock.json";
+import pyodideLock from "pyodide/pyodide-lock.json";
 
 export default async function Page({
   params,
@@ -22,9 +22,14 @@ export default async function Page({
       );
     } else {
       const cfAssets = getCloudflareContext().env.ASSETS;
-      mdContent = await cfAssets!
-        .fetch(`https://assets.local/docs/${docs_id}.md`)
-        .then((res) => res.text());
+      const mdRes = await cfAssets!.fetch(
+        `https://assets.local/docs/${docs_id}.md`
+      );
+      if (mdRes.ok) {
+        mdContent = await mdRes.text();
+      } else {
+        notFound();
+      }
     }
   } catch (error) {
     console.error(error);

app/[docs_id]/section.tsx

@@ -15,6 +15,7 @@ import { useFile } from "../terminal/file";
 
 // セクション内に埋め込まれているターミナルとファイルエディターの内容をSection側から取得できるよう、
 // Contextに保存する
+// TODO: C++では複数ファイルを実行する場合がありうるが、ここではfilenameを1つしか受け付けない想定になっている
 interface ISectionCodeContext {
   addReplOutput: (command: string, output: ReplOutput[]) => void;
   addFile: (filename: string) => void;

app/[docs_id]/splitMarkdown.ts

@@ -1,5 +1,3 @@
-"use server";
-
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
@@ -13,9 +11,9 @@ export interface MarkdownSection {
  * Markdownコンテンツを見出しごとに分割し、
  * 見出しのレベルとタイトル、内容を含むオブジェクトの配列を返す。
  */
-export async function splitMarkdown(
+export function splitMarkdown(
   content: string
-): Promise<MarkdownSection[]> {
+): MarkdownSection[] {
   const tree = unified().use(remarkParse).use(remarkGfm).parse(content);
   // console.log(tree.children.map(({ type, position }) => ({ type, position: JSON.stringify(position) })));
   const headingNodes = tree.children.filter((node) => node.type === "heading");

app/actions/questionExample.ts

@@ -0,0 +1,43 @@
+"use server";
+
+import { GoogleGenerativeAI } from "@google/generative-ai";
+import { z } from "zod";
+
+const QuestionExampleSchema = z.object({
+  lang: z.string().min(1),
+  documentContent: z.string().min(1),
+});
+
+const genAI = new GoogleGenerativeAI(process.env.API_KEY!);
+
+type QuestionExampleParams = z.input<typeof QuestionExampleSchema>;
+
+export async function getQuestionExample(
+  params: QuestionExampleParams
+): Promise<string[]> {
+  // 質問の例を複数AIに考えさせる。
+  // stringで複数返して、ChatForm側でその中から1つランダムに選ぶ
+  // 呼び出し側がSWRで、エラー処理してくれるので、全部throwでいい
+  // TODO: 同じドキュメントに対して2回以上生成する意味がないので、キャッシュしたいですね
+
+  const parseResult = QuestionExampleSchema.safeParse(params);
+
+  if (!parseResult.success) {
+    throw new Error(parseResult.error.issues.map((e) => e.message).join(", "));
+  }
+
+  const { lang, documentContent } = parseResult.data;
+
+  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+  const prompt = `
+以下の${lang}チュートリアルのドキュメントに対して、想定される初心者のユーザーからの質問の例を箇条書きで複数挙げてください。
+強調などはせずテキストだけで1行ごとに1つ出力してください。
+
+# ドキュメント
+${documentContent}
+`;
+  const result = await model.generateContent(prompt);
+  const response = result.response;
+  const text = response.text();
+  return text.trim().split("\n");
+}

app/globals.css

@@ -1,20 +1,7 @@
 @import "tailwindcss";
 @plugin "daisyui";
 
-/* inconsolata-latin-wght-normal */
-@font-face {
-  font-family: "Inconsolata Variable";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 200 900;
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inconsolata:vf@latest/latin-wght-normal.woff2)
-    format("woff2-variations");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
-}
-
+/* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
-  --font-mono: "Inconsolata Variable", monospace;
+  --font-mono: "Inconsolata Variable", "Noto Sans JP Variable", monospace;
 }

app/layout.tsx

@@ -1,10 +1,13 @@
 import type { Metadata } from "next";
+import "@fontsource-variable/noto-sans-jp";
+import "@fontsource-variable/inconsolata";
 import "./globals.css";
 import { Navbar } from "./navbar";
 import { Sidebar } from "./sidebar";
 import { ReactNode } from "react";
 import { PyodideProvider } from "./terminal/python/pyodide";
 import { FileProvider } from "./terminal/file";
+import { WandboxProvider } from "./terminal/wandbox/wandbox";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -21,9 +24,11 @@ export default function RootLayout({
           <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
           <div className="drawer-content flex flex-col">
             <Navbar />
-              <FileProvider>
-                <PyodideProvider>{children}</PyodideProvider>
-              </FileProvider>
+            <FileProvider>
+              <PyodideProvider>
+                <WandboxProvider>{children}</WandboxProvider>
+              </PyodideProvider>
+            </FileProvider>
           </div>
           <div className="drawer-side shadow-md">
             <label