From 0aaf2d611f6ed5c3ebf5462c04730b5a4635c419 Mon Sep 17 00:00:00 2001
From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>
Date: Mon, 1 Sep 2025 22:38:08 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E8=B3=AA=E5=95=8F=E3=81=AE=E4=BE=8B?=
 =?UTF-8?q?=E3=82=92AI=E3=81=AB=E8=80=83=E3=81=88=E3=81=95=E3=81=9B?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/chatForm.tsx     | 57 +++++++++++++++++++++++++++++++---
 app/[docs_id]/page.tsx         |  2 +-
 app/[docs_id]/section.tsx      | 10 ++++--
 app/actions/questionExample.ts | 43 +++++++++++++++++++++++++
 4 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 app/actions/questionExample.ts

diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
index 24cac31..b0488a8 100644
--- a/app/[docs_id]/chatForm.tsx
+++ b/app/[docs_id]/chatForm.tsx
@@ -3,20 +3,54 @@
 import { useState, FormEvent } from "react";
 import { askAI } from "@/app/actions/chatActions";
 import { StyledMarkdown } from "./markdown";
+import useSWR from "swr";
+import { getQuestionExample } from "../actions/questionExample";
 
-export function ChatForm({ documentContent }: { documentContent: string }) {
+export function ChatForm({
+  docs_id,
+  documentContent,
+}: {
+  docs_id: string;
+  documentContent: string;
+}) {
   const [inputValue, setInputValue] = useState("");
   const [response, setResponse] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isFormVisible, setIsFormVisible] = useState(false);
 
+  const lang = docs_id.split("-")[0];
+  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);
     setResponse("");
 
+    let userQuestion = inputValue;
+    if(!userQuestion && exampleData){
+      // 質問が空欄なら、質問例を使用
+      userQuestion = exampleData[Math.floor(exampleChoice * exampleData.length)];
+      setInputValue(userQuestion);
+    }
+
     const result = await askAI({
-      userQuestion: inputValue,
+      userQuestion,
       documentContent: documentContent,
     });
 
@@ -35,8 +69,18 @@ export function ChatForm({ documentContent }: { documentContent: string }) {
         <div className="input-area">
             <textarea
               className="textarea textarea-ghost textarea-md rounded-lg"
-              placeholder="質問を入力してください"
-            style={{width: "100%", height: "110px", resize: "none", outlineStyle: "none"}}
+              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}
@@ -68,7 +112,10 @@ export function ChatForm({ documentContent }: { documentContent: string }) {
       {!isFormVisible && (
         <button
           className="btn btn-soft btn-secondary rounded-full"
-          onClick={() => setIsFormVisible(true)}
+          onClick={() => {
+            setIsFormVisible(true);
+            setExampleChoice(Math.random());
+          }}
         >
           チャットを開く
         </button>
diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx
index 9cb12dc..f70c950 100644
--- a/app/[docs_id]/page.tsx
+++ b/app/[docs_id]/page.tsx
@@ -42,7 +42,7 @@ export default async function Page({
     <div className="p-4">
       {splitMdContent.map((section, index) => (
         <div key={index} id={`${index}`}>
-          <Section key={index} section={section} />
+          <Section key={index} docs_id={docs_id} section={section} />
         </div>
       ))}
     </div>
diff --git a/app/[docs_id]/section.tsx b/app/[docs_id]/section.tsx
index 71dbf80..d705b44 100644
--- a/app/[docs_id]/section.tsx
+++ b/app/[docs_id]/section.tsx
@@ -25,7 +25,13 @@ const SectionCodeContext = createContext<ISectionCodeContext | null>(null);
 export const useSectionCode = () => useContext(SectionCodeContext);
 
 // 1つのセクションのタイトルと内容を表示する。内容はMarkdownとしてレンダリングする
-export function Section({ section }: { section: MarkdownSection }) {
+export function Section({
+  docs_id,
+  section,
+}: {
+  docs_id: string;
+  section: MarkdownSection;
+}) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [replOutputs, setReplOutputs] = useState<ReplCommand[]>([]);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -71,7 +77,7 @@ export function Section({ section }: { section: MarkdownSection }) {
       <div>
         <Heading level={section.level}>{section.title}</Heading>
         <StyledMarkdown content={section.content} />
-        <ChatForm documentContent={section.content} />
+        <ChatForm docs_id={docs_id} documentContent={section.content} />
       </div>
     </SectionCodeContext.Provider>
   );
diff --git a/app/actions/questionExample.ts b/app/actions/questionExample.ts
new file mode 100644
index 0000000..846a13a
--- /dev/null
+++ b/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");
+}

From 12dbbad1618420fdc214e973cc01a9e47f335eac Mon Sep 17 00:00:00 2001
From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>
Date: Mon, 1 Sep 2025 22:44:34 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E8=A8=80=E8=AA=9E=E5=90=8D=E3=81=AE?=
 =?UTF-8?q?=E5=8F=96=E5=BE=97=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[docs_id]/chatForm.tsx |  3 ++-
 app/pagesList.ts           | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
index b0488a8..a92afb0 100644
--- a/app/[docs_id]/chatForm.tsx
+++ b/app/[docs_id]/chatForm.tsx
@@ -5,6 +5,7 @@ import { askAI } from "@/app/actions/chatActions";
 import { StyledMarkdown } from "./markdown";
 import useSWR from "swr";
 import { getQuestionExample } from "../actions/questionExample";
+import { getLanguageName } from "../pagesList";
 
 export function ChatForm({
   docs_id,
@@ -18,7 +19,7 @@ export function ChatForm({
   const [isLoading, setIsLoading] = useState(false);
   const [isFormVisible, setIsFormVisible] = useState(false);
 
-  const lang = docs_id.split("-")[0];
+  const lang = getLanguageName(docs_id);
   const { data: exampleData, error: exampleError } = useSWR(
     // 質問フォームを開いたときだけで良い
     isFormVisible ? { lang, documentContent } : null,
diff --git a/app/pagesList.ts b/app/pagesList.ts
index 2a8a150..207e6b9 100644
--- a/app/pagesList.ts
+++ b/app/pagesList.ts
@@ -30,3 +30,13 @@ export const pagesList = [
     ],
   },
 ] as const;
+
+// ${lang_id}-${page_id} から言語名を取得
+export function getLanguageName(docs_id: string){
+  const lang_id = docs_id.split("-")[0];
+  const lang = pagesList.find((lang) => lang.id === lang_id)?.lang;
+  if(!lang){
+    throw new Error(`Unknown language id: ${lang_id}`);
+  }
+  return lang;
+}