チャットがセクションidを返すようにする

Author: na-trium-144

app/[lang]/[pageId]/chatForm.tsx

@@ -13,18 +13,12 @@ import { useChatHistoryContext } from "./chatHistory";
 import { askAI } from "@/actions/chatActions";
 
 interface ChatFormProps {
-  docs_id: string;
-  documentContent: string;
+  langName: string;
   sectionContent: DynamicMarkdownSection[];
   close: () => void;
 }
 
-export function ChatForm({
-  docs_id,
-  documentContent,
-  sectionContent,
-  close,
-}: ChatFormProps) {
+export function ChatForm({ langName, sectionContent, close }: ChatFormProps) {
   // const [messages, updateChatHistory] = useChatHistory(sectionId);
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -80,9 +74,8 @@ export function ChatForm({
     // }
 
     const result = await askAI({
+      langName,
       userQuestion,
-      docsId: docs_id,
-      documentContent,
       sectionContent,
       replOutputs,
       files,
@@ -94,7 +87,9 @@ export function ChatForm({
       console.log(result.error);
     } else {
       addChat(result.chat);
-      // TODO: chatIdが指す対象の回答にフォーカス
+      document.getElementById(result.chat.sectionId)?.scrollIntoView({
+        behavior: "smooth",
+      });
       setInputValue("");
       close();
     }

app/[lang]/[pageId]/page.tsx

@@ -54,9 +54,9 @@ export default async function Page({
         documentContent={documentContent}
         splitMdContent={sections}
         pageEntry={pageEntry}
-        docs_id={docsId}
         lang={lang}
         pageId={pageId}
+        langName={langEntry.name}
       />
     </ChatHistoryProvider>
   );

app/[lang]/[pageId]/pageContent.tsx

@@ -19,8 +19,7 @@ interface PageContentProps {
   pageEntry: PageEntry;
   lang: string;
   pageId: string;
-  // TODO: チャット周りのid管理をsectionIdに移行し、docs_idパラメータを削除
-  docs_id: string;
+  langName: string;
 }
 export function PageContent(props: PageContentProps) {
   const { setSidebarMdContent } = useSidebarMdContext();
@@ -104,12 +103,7 @@ export function PageContent(props: PageContentProps) {
             }}
           >
             {/* ドキュメントのコンテンツ */}
-            <StyledMarkdown
-              content={section.rawContent.replace(
-                /-repl\s*\n/,
-                `-repl:${section.id}\n`
-              )}
-            />
+            <StyledMarkdown content={section.rawContent} />
           </div>
           <div>
             {/* 右側に表示するチャット履歴欄 */}
@@ -150,9 +144,8 @@ export function PageContent(props: PageContentProps) {
         // replがz-10を使用することからそれの上にするためz-20
         <div className="fixed bottom-4 right-4 left-4 lg:left-84 z-20">
           <ChatForm
-            documentContent={props.documentContent}
+            langName={props.langName}
             sectionContent={dynamicMdContent}
-            docs_id={props.docs_id}
             close={() => setIsFormVisible(false)}
           />
         </div>

app/actions/chatActions.ts

@@ -17,9 +17,8 @@ type ChatResult =
     };
 
 type ChatParams = {
+  langName: string;
   userQuestion: string;
-  docsId: string;
-  documentContent: string;
   sectionContent: DynamicMarkdownSection[];
   replOutputs: Record<string, ReplCommand[]>;
   files: Record<string, string>;
@@ -37,8 +36,8 @@ export async function askAI(params: ChatParams): Promise<ChatResult> {
   // }
 
   const {
+    langName,
     userQuestion,
-    documentContent,
     sectionContent,
     replOutputs,
     files,
@@ -47,8 +46,9 @@ export async function askAI(params: ChatParams): Promise<ChatResult> {
 
   const prompt: string[] = [];
 
+  prompt.push(`あなたは${langName}言語のチュートリアルの講師をしています。`);
   prompt.push(
-    `以下のPythonチュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。`
+    `以下の${langName}チュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。`
   );
   prompt.push(``);
   const sectionTitlesInView = sectionContent
@@ -64,8 +64,13 @@ export async function askAI(params: ChatParams): Promise<ChatResult> {
   prompt.push(``);
   prompt.push(`# ドキュメント`);
   prompt.push(``);
-  prompt.push(documentContent);
+  for (const section of sectionContent) {
+    prompt.push(`[セクションid: ${section.id}]`);
+    prompt.push(section.rawContent.trim());
+    prompt.push(``);
+  }
   prompt.push(``);
+  // TODO: 各セクションのドキュメントの直下にそのセクション内のターミナルの情報を加えるべきなのでは?
   if (Object.keys(replOutputs).length > 0) {
     prompt.push(
       `# ターミナルのログ（ユーザーが入力したコマンドとその実行結果）`
@@ -75,7 +80,7 @@ export async function askAI(params: ChatParams): Promise<ChatResult> {
       "以下はドキュメント内で実行例を示した各コードブロックの内容に加えてユーザーが追加で実行したコマンドです。"
     );
     prompt.push(
-      "例えば ```python-repl:1 のコードブロックに対してユーザーが実行したログが ターミナル #1 です。"
+      "例えば ```python-repl:foo のコードブロックに対してユーザーが実行したログが ターミナル #foo です。"
     );
     prompt.push(``);
     for (const [replId, replCommands] of Object.entries(replOutputs)) {
@@ -125,34 +130,40 @@ export async function askAI(params: ChatParams): Promise<ChatResult> {
     }
   }
 
-  prompt.push("# ユーザーからの質問");
-  prompt.push(userQuestion);
-  prompt.push(``);
-
   prompt.push("# 指示");
+  prompt.push("");
+  prompt.push(
+    `- 1行目に、ユーザーの質問ともっとも関連性の高いドキュメント内のセクションのidを回答してください。idのみを出力してください。`
+  );
+  prompt.push(
+    "  - ユーザーの質問がドキュメントのどのセクションとも直接的に関連しない場合は空白でも良いです。"
+  );
+  prompt.push("- 2行目は水平線 --- を出力してください。")
+  prompt.push(
+    "- それ以降の行に、ドキュメントの内容に基づいて、ユーザーに伝える回答をMarkdown形式で記述してください。"
+  );
   prompt.push(
-    "- 回答はMarkdown形式で記述し、コードブロックを適切に使用してください。"
+    "  - ユーザーが入力したターミナルのコマンドやファイルの内容、実行結果を参考にして回答してください。"
   );
-  prompt.push("- ドキュメントの内容に基づいて回答してください。");
+  prompt.push("  - 必要であれば、具体的なコード例を提示してください。");
   prompt.push(
-    "- ユーザーが入力したターミナルのコマンドやファイルの内容、実行結果を参考にして回答してください。"
+    "  - 回答内でコードブロックを使用する際は ```言語名 としてください。" +
+      "ドキュメント内では ```言語名-repl や ```言語名:ファイル名 、 ```言語名-exec:ファイル名 などが登場しますが、ユーザーへの回答ではこれらの記法は使用しないでください。"
   );
-  prompt.push("- ユーザーへの回答のみを出力してください。");
-  prompt.push("- 必要であれば、具体的なコード例を提示してください。");
+  prompt.push("  - 水平線(---)はシステムが区切りとして認識するので、ユーザーへの回答中に水平線を使用することはできません。");
   console.log(prompt);
 
   try {
-    const result = await generateContent(prompt.join("\n"));
+    const result = await generateContent(userQuestion, prompt.join("\n"));
     const text = result.text;
     if (!text) {
       throw new Error("AIからの応答が空でした");
     }
-    // TODO: どのセクションへの回答にするかをAIに決めさせる
-    const targetSectionId =
-      sectionContent.find((s) => s.inView)?.id || "";
-    const newChat = await addChat(params.docsId, targetSectionId, [
+    const targetSectionId = text.split(/-{3,}/)[0].trim();
+    const responseMessage = text.split(/-{3,}/)[1].trim();
+    const newChat = await addChat(targetSectionId, [
       { role: "user", content: userQuestion },
-      { role: "ai", content: text },
+      { role: "ai", content: responseMessage },
     ]);
     return {
       error: null,

app/actions/gemini.ts

@@ -2,10 +2,13 @@
 
 import { GoogleGenAI } from "@google/genai";
 
-export async function generateContent(prompt: string) {
+export async function generateContent(prompt: string, systemInstruction?: string) {
   const params = {
     model: "gemini-2.5-flash",
     contents: prompt,
+    config: {
+      systemInstruction,
+    }
   };
 
   const ai = new GoogleGenAI({ apiKey: process.env.API_KEY! });

app/lib/chatHistory.ts

@@ -50,7 +50,6 @@ export async function initContext(ctx?: Partial<Context>): Promise<Context> {
 }
 
 export async function addChat(
-  docsId: string,
   sectionId: string,
   messages: CreateChatMessage[],
   context?: Partial<Context>
@@ -63,7 +62,6 @@ export async function addChat(
     .insert(chat)
     .values({
       userId,
-      docsId,
       sectionId,
     })
     .returning();

app/lib/docs.ts

@@ -138,7 +138,10 @@ function parseFrontmatter(content: string, file: string): MarkdownSection {
     level?: number;
   };
   // TODO: validation of frontmatter using zod
-  const rawContent = content.slice(endIdx + 5);
+  // replコードブロックにはセクションidをターミナルidとして与える。
+  const rawContent = content
+    .slice(endIdx + 5)
+    .replace(/-repl\s*\n/, `-repl:${fm?.id ?? ""}\n`);
   return {
     id: fm?.id ?? "",
     title: fm?.title ?? "",