Merge pull request #187 from ut-code/generate-question-examples

geminiで質問例を事前作成

Author: na-trium-144

.github/workflows/question-example.yml

@@ -0,0 +1,37 @@
+name: Generate Question Examples
+
+on:
+  pull_request:
+    branches: [ "main" ]
+    # paths:
+    #   - 'public/docs/**'
+
+jobs:
+  question-example:
+    runs-on: ubuntu-latest
+    # Push権限を付与
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: ${{ github.head_ref }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+
+      - run: npx tsx ./scripts/questionExample.ts 4
+        env:
+          API_KEY: ${{ secrets.API_KEY }}
+
+      - name: Commit and Push changes
+        # 前のステップが成功・失敗どちらでも必ず実行
+        if: always()
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git add .
+          git diff --staged --exit-code || (git commit -m "[ci] generate question examples" && git push)

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, FormEvent, useEffect, useRef, useCallback } from "react";
+import { useState, FormEvent, useEffect, useRef, useCallback, useMemo } from "react";
 // import useSWR from "swr";
 // import {
 //   getQuestionExample,
@@ -26,8 +26,6 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  // const lang = getLanguageName(docs_id);
-
   const { files, replOutputs, execResults } = useEmbedContext();
 
   const router = useRouter();
@@ -64,42 +62,43 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
     }
   }, [pathname]);
 
-  // const documentContentInView = sectionContent
-  //   .filter((s) => s.inView)
-  //   .map((s) => s.rawContent)
-  //   .join("\n\n");
-  // const { data: exampleData, error: exampleError } = useSWR(
-  //   // 質問フォームを開いたときだけで良い
-  //   {
-  //     lang,
-  //     documentContent: documentContentInView,
-  //   } satisfies QuestionExampleParams,
-  //   getQuestionExample,
-  //   {
-  //     // リクエストは古くても構わないので1回でいい
-  //     revalidateIfStale: false,
-  //     revalidateOnFocus: false,
-  //     revalidateOnReconnect: false,
-  //   }
-  // );
-  // if (exampleError) {
-  //   console.error("Error getting question example:", exampleError);
-  // }
+  const exampleData = useMemo(
+    () =>
+      sectionContent
+        .filter((s) => s.inView)
+        .map((s) => s.question)
+        .filter((qe) => qe !== undefined)
+        .flat(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   // 質問フォームを開くたびにランダムに選び直し、
   // exampleData[Math.floor(exampleChoice * exampleData.length)] を採用する
-  const [exampleChoice, setExampleChoice] = useState<number>(0); // 0〜1
+  const [exampleChoice, setExampleChoice] = useState<number | undefined>(
+    undefined
+  ); // 0〜1
   useEffect(() => {
-    if (exampleChoice === 0) {
+    if (exampleChoice === undefined) {
       setExampleChoice(Math.random());
     }
   }, [exampleChoice]);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+
+    let userQuestion = inputValue;
+    if (!userQuestion && exampleData.length > 0 && exampleChoice) {
+      // 質問が空欄なら、質問例を使用
+      userQuestion =
+        exampleData[Math.floor(exampleChoice * exampleData.length)];
+      setInputValue(userQuestion);
+    }
+    if (!userQuestion) {
+      return;
+    }
+
     e.preventDefault();
     setIsLoading(true);
-    setErrorMessage(null);
-
-    const userQuestion = inputValue;
+    setErrorMessage(null); // Clear previous error message
 
     let response: Response;
     try {
@@ -214,10 +213,10 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
       <textarea
         className="textarea textarea-ghost textarea-md rounded-box bg-transparent!"
         placeholder={
-          "質問を入力してください" /* +
-          (exampleData
+          "質問を入力してください" +
+          (exampleData.length > 0 && exampleChoice !== undefined
             ? ` (例:「${exampleData[Math.floor(exampleChoice * exampleData.length)]}」)`
-            : "")*/
+            : "")
         }
         style={{
           width: "100%",

app/actions/questionExample.ts

@@ -30,18 +30,26 @@ export interface PagePath {
   page: PageSlug;
 }
 
-export const MarkdownSectionSchema = z.object({
-  /**
-   * セクションのmdファイル名
-   */
-  file: z.string(),
+export const SectionFrontMatterSchema = z.object({
   /**
    * frontmatterに書くセクションid
    * (データベース上の sectionId)
    */
   id: z.string().transform((s) => s as SectionId),
   level: z.number(),
   title: z.string(),
+  /**
+   * そのセクションに対する質問例
+   * scripts/questionExample.ts で生成する
+   */
+  question: z.array(z.string()).optional(),
+});
+export type SectionFrontMatter = z.output<typeof SectionFrontMatterSchema>;
+export const MarkdownSectionSchema = SectionFrontMatterSchema.extend({
+  /**
+   * セクションのmdファイル名
+   */
+  file: z.string(),
   /**
    * frontmatterを除く、見出しも含めたもとのmarkdownの内容
    */
@@ -304,11 +312,7 @@ function parseFrontmatter(content: string, file: string): MarkdownSection {
   if (endIdx === -1) {
     throw new Error(`File ${file} has invalid frontmatter`);
   }
-  const fm = yaml.load(content.slice(4, endIdx)) as {
-    id: SectionId;
-    title: string;
-    level: number;
-  };
+  const fm = yaml.load(content.slice(4, endIdx)) as SectionFrontMatter;
   // TODO: validation of frontmatter using zod
   // replコードブロックにはセクションidをターミナルidとして与える。
   const rawContent = content
@@ -319,6 +323,7 @@ function parseFrontmatter(content: string, file: string): MarkdownSection {
     id: fm.id,
     title: fm.title,
     level: fm.level,
+    question: fm.question,
     rawContent,
     md5: crypto.createHash("md5").update(rawContent).digest("base64"),
   };

app/lib/docs.ts

@@ -2,6 +2,9 @@
 id: cpp-intro-about
 title: C++とは？
 level: 2
+question:
+  - C++はC言語を拡張したとありますが、C言語とは何が違うのですか？
+  - パワフルで汎用性が高いとは、具体的にどのような意味ですか？
 ---
 
 ## C++とは？

app/actions/gemini.ts app/lib/gemini.tsapp/actions/gemini.ts renamed to app/lib/gemini.ts

@@ -2,6 +2,11 @@
 id: cpp-intro-feature
 title: 特徴
 level: 3
+question:
+  - 低レベルな操作とは具体的に何を指しますか？
+  - 静的型付けの反対は動的型付けですか？それらの違いは何ですか？
+  - マルチパラダイムとは、複数のプログラミングスタイルを自由に選べるということですか？
+  - オブジェクト指向プログラミングやジェネリックプログラミングとは何ですか？
 ---
 
 ### 特徴

public/docs/cpp/0-intro/1-0-about.md

@@ -2,6 +2,8 @@
 id: cpp-intro-usage
 title: C++が使われる分野
 level: 3
+question:
+  - 組み込みシステムでリソースが限られているとはどういう意味ですか？
 ---
 
 ### C++が使われる分野

public/docs/cpp/0-intro/1-1-feature.md

@@ -2,6 +2,9 @@
 id: cpp-intro-env-about
 title: 開発環境のセットアップ
 level: 2
+question:
+  - コンパイラがないとプログラムは実行できないのですか？
+  - ソースコードと機械語の違いは何ですか？
 ---
 
 ## 開発環境のセットアップ

public/docs/cpp/0-intro/1-2-usage.md

@@ -2,6 +2,11 @@
 id: cpp-intro-ide
 title: コンパイラとIDE
 level: 3
+question:
+  - 複数のコンパイラがありますが、どれを使えば良いですか？
+  - IDEとエディタは同じものですか？それとも違いがありますか？
+  - Visual StudioとVisual Studio Codeは、名前が似ていますが何が違いますか？
+  - エラーメッセージが分かりやすいClangは初心者におすすめですか？
 ---
 
 ### コンパイラとIDE