AIにドキュメント全体とターミナルログ全てを渡す

Author: na-trium-144

app/[docs_id]/chatForm.tsx

@@ -12,13 +12,15 @@ import { useFile } from "../terminal/file";
 
 interface ChatFormProps {
   docs_id: string;
+  documentContent: string;
   splitMdContent: MarkdownSection[];
   sectionInView: boolean[];
   onClose: () => void;
 }
 
 export function ChatForm({
   docs_id,
+  documentContent,
   splitMdContent,
   sectionInView,
   onClose,
@@ -79,6 +81,7 @@ export function ChatForm({
 
     const result = await askAI({
       userQuestion,
+      documentContent,
       splitMdContent,
       sectionInView,
       replOutputs,
@@ -95,6 +98,7 @@ export function ChatForm({
       // updateChatHistory([userMessage, errorMessage]);
     } else {
       const aiMessage: Message = { sender: "ai", text: result.response };
+      console.log(aiMessage);
       // updateChatHistory([userMessage, aiMessage]);
       setInputValue("");
     }

app/[docs_id]/embedContext.tsx

@@ -35,10 +35,17 @@ export function EmbedContextProvider({ children }: { children: ReactNode }) {
   );
   const addReplOutput = useCallback(
     (terminalId: string, command: string, output: ReplOutput[]) =>
-      setReplOutputs((outs) => ({
-        ...outs,
-        terminalId: [...(outs[terminalId] ?? []), { command, output }],
-      })),
+      setReplOutputs((outs) => {
+        outs = { ...outs };
+        if (!(terminalId in outs)) {
+          outs[terminalId] = [];
+        }
+        outs[terminalId] = [
+          ...outs[terminalId],
+          { command: command, output: output },
+        ];
+        return outs;
+      }),
     []
   );
   const setExecResult = useCallback(

app/[docs_id]/markdown.tsx

@@ -104,6 +104,23 @@ function CodeComponent({
           </div>
         );
       }
+    } else if (match[2] === "-repl") {
+      // repl付きの言語指定
+      // 現状はPythonのみ対応
+      switch (match[1]) {
+        case "python":
+          return (
+            <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
+              <PythonEmbeddedTerminal
+                terminalId={match[3]}
+                content={String(props.children || "").replace(/\n$/, "")}
+              />
+            </div>
+          );
+        default:
+          console.warn(`Unsupported language for repl: ${match[1]}`);
+          break;
+      }
     } else if (match[3]) {
       // ファイル名指定がある場合、ファイルエディター
       let aceLang: AceLang | undefined = undefined;
@@ -140,22 +157,6 @@ function CodeComponent({
           />
         </div>
       );
-    } else if (match[2] === "-repl") {
-      // repl付きの言語指定
-      // 現状はPythonのみ対応
-      switch (match[1]) {
-        case "python":
-          return (
-            <div className="bg-base-300 border border-primary border-2 shadow-md m-2 p-4 pr-1 rounded-lg">
-              <PythonEmbeddedTerminal
-                content={String(props.children || "").replace(/\n$/, "")}
-              />
-            </div>
-          );
-        default:
-          console.warn(`Unsupported language for repl: ${match[1]}`);
-          break;
-      }
     }
     return (
       <SyntaxHighlighter

app/[docs_id]/page.tsx

@@ -46,7 +46,11 @@ export default async function Page({
 
   return (
     <EmbedContextProvider>
-      <PageContent splitMdContent={splitMdContent} docs_id={docs_id} />
+      <PageContent
+        documentContent={mdContent}
+        splitMdContent={splitMdContent}
+        docs_id={docs_id}
+      />
     </EmbedContextProvider>
   );
 }

app/[docs_id]/pageContent.tsx

@@ -7,6 +7,7 @@ import { ChatForm } from "./chatForm";
 import { useEmbed } from "./embedContext";
 
 interface PageContentProps {
+  documentContent: string;
   splitMdContent: MarkdownSection[];
   docs_id: string;
 }
@@ -62,6 +63,7 @@ export function PageContent(props: PageContentProps) {
       {isFormVisible ? (
         <div className="fixed bottom-4 inset-x-4 z-50">
           <ChatForm
+            documentContent={props.documentContent}
             splitMdContent={props.splitMdContent}
             sectionInView={sectionInView}
             docs_id={props.docs_id}

app/actions/chatActions.ts

@@ -12,11 +12,18 @@ const ChatSchema = z.object({
   userQuestion: z
     .string()
     .min(1, { message: "メッセージを入力してください。" }),
-  splitMdContent: z
-    .string()
-    .min(1, { message: "コンテキストとなるドキュメントがありません。" }),
-  replOutputs: z
-    .array(
+  documentContent: z.string(),
+  splitMdContent: z.array(
+    z.object({
+      level: z.number(),
+      title: z.string(),
+      content: z.string(),
+    })
+  ),
+  sectionInView: z.array(z.boolean()),
+  replOutputs: z.record(
+    z.string(),
+    z.array(
       z.object({
         command: z.string(),
         output: z.array(
@@ -34,33 +41,24 @@ const ChatSchema = z.object({
         ),
       })
     )
-    .optional(),
-  fileContents: z
-    .array(
+  ),
+  files: z.record(z.string(), z.string().optional()),
+  execResults: z.record(
+    z.string(),
+    z.array(
       z.object({
-        name: z.string(),
-        content: z.string(),
+        type: z.enum([
+          "stdout",
+          "stderr",
+          "error",
+          "return",
+          "trace",
+          "system",
+        ]),
+        message: z.string(),
       })
     )
-    .optional(),
-  execResults: z
-    .record(
-      z.string(),
-      z.array(
-        z.object({
-          type: z.enum([
-            "stdout",
-            "stderr",
-            "error",
-            "return",
-            "trace",
-            "system",
-          ]),
-          message: z.string(),
-        })
-      )
-    )
-    .optional(),
+  ),
 });
 
 type ChatParams = z.input<typeof ChatSchema>;
@@ -78,19 +76,26 @@ export async function askAI(params: ChatParams): Promise<FormState> {
   const {
     userQuestion,
     documentContent,
+    splitMdContent,
+    sectionInView,
     replOutputs,
-    fileContents,
+    files,
     execResults,
   } = parseResult.data;
 
   try {
     // ターミナルログの文字列を構築
     let terminalLogsSection = "";
-    if (replOutputs && replOutputs.length > 0) {
-      terminalLogsSection =
-        "\n# ターミナルのログ（ユーザーが入力したコマンドとその実行結果）\n";
-      for (const replCmd of replOutputs) {
-        terminalLogsSection += `\n## コマンド: ${replCmd.command}\n`;
+    terminalLogsSection =
+      "\n# ターミナルのログ（ユーザーが入力したコマンドとその実行結果）\n";
+    terminalLogsSection +=
+      "\n以下はドキュメント内で実行例を示した各コードブロックの内容に加えてユーザーが追加で実行したコマンドです。\n";
+    terminalLogsSection +=
+      "例えば ```python-repl:1 のコードブロックに対してユーザーが実行したログが ターミナル #1 です。\n";
+    for (const [replId, replInstance] of Object.entries(replOutputs)) {
+      terminalLogsSection += `\n## ターミナル #${replId}\n`;
+      for (const replCmd of replInstance) {
+        terminalLogsSection += `\n- コマンド: ${replCmd.command}\n`;
         terminalLogsSection += "```\n";
         for (const output of replCmd.output) {
           terminalLogsSection += `${output.message}\n`;
@@ -101,19 +106,21 @@ export async function askAI(params: ChatParams): Promise<FormState> {
 
     // ファイルエディターの内容を構築
     let fileContentsSection = "";
-    if (fileContents && fileContents.length > 0) {
-      fileContentsSection = "\n# ファイルエディターの内容\n";
-      for (const file of fileContents) {
-        fileContentsSection += `\n## ファイル: ${file.name}\n`;
-        fileContentsSection += "```\n";
-        fileContentsSection += file.content;
-        fileContentsSection += "\n```\n";
-      }
+    fileContentsSection = "\n# ファイルエディターの内容\n";
+    fileContentsSection +=
+      "\n以下はドキュメント内でファイルの内容を示した各コードブロックの内容に加えてユーザーが編集を加えたものです。\n";
+    fileContentsSection +=
+      "例えば ```python:foo.py のコードブロックに対してユーザーが編集した後の内容が ファイル: foo.py です。\n";
+    for (const [filename, content] of Object.entries(files)) {
+      fileContentsSection += `\n## ファイル: ${filename}\n`;
+      fileContentsSection += "```\n";
+      fileContentsSection += content;
+      fileContentsSection += "\n```\n";
     }
 
     // ファイル実行結果を構築
     let execResultsSection = "";
-    if (execResults && Object.keys(execResults).length > 0) {
+    if (execResults) {
       execResultsSection = "\n# ファイルの実行結果\n";
       for (const [filename, outputs] of Object.entries(execResults)) {
         execResultsSection += `\n## ファイル: ${filename}\n`;
@@ -125,12 +132,21 @@ export async function askAI(params: ChatParams): Promise<FormState> {
       }
     }
 
+    const sectionTitlesInView = splitMdContent.filter((_, index) => sectionInView[index]).map(section => section.title).join(", ");
+
     const prompt = `
 以下のPythonチュートリアルのドキュメントの内容を正確に理解し、ユーザーからの質問に対して、初心者にも分かりやすく、丁寧な解説を提供してください。
 
+ユーザーはドキュメント内の ${sectionTitlesInView} の付近のセクションを閲覧している際にこの質問を行っていると推測されます。
+質問に答える際には、ユーザーが閲覧しているセクションの内容を特に考慮してください。
+
 # ドキュメント
 ${documentContent}
-${terminalLogsSection}${fileContentsSection}${execResultsSection}
+
+${terminalLogsSection}
+${fileContentsSection}
+${execResultsSection}
+
 # ユーザーからの質問
 ${userQuestion}
 
@@ -143,6 +159,7 @@ ${userQuestion}
 - 
 
 `;
+console.log(prompt)
     const result = await generateContent(prompt);
     const text = result.text;
     if (!text) {

app/terminal/python/embedded.tsx

@@ -4,13 +4,20 @@ import { useMemo } from "react";
 import { ReplTerminal, ReplOutput, ReplCommand } from "../repl";
 import { usePyodide } from "./pyodide";
 
-export function PythonEmbeddedTerminal({ content }: { content: string }) {
+export function PythonEmbeddedTerminal({
+  terminalId,
+  content,
+}: {
+  terminalId: string;
+  content: string;
+}) {
   const initCommands = useMemo(() => splitContents(content), [content]);
   const { init, initializing, ready, runPython, checkSyntax, mutex } =
     usePyodide();
 
   return (
     <ReplTerminal
+      terminalId={terminalId}
       initRuntime={init}
       runtimeInitializing={initializing}
       runtimeReady={ready}