embedContentとmdSectionをリファクタリングしました

Author: na-trium-144

app/[docs_id]/chatForm.tsx

@@ -6,40 +6,33 @@ import { type Message } from "../hooks/useChathistory";
 import useSWR from "swr";
 import { getQuestionExample } from "../actions/questionExample";
 import { getLanguageName } from "../pagesList";
-import { MarkdownSection } from "./splitMarkdown";
-import { useEmbed } from "./embedContext";
-import { useFile } from "../terminal/file";
+import { DynamicMarkdownSection } from "./pageContent";
+import { useEmbedContext } from "../terminal/embedContext";
 
 interface ChatFormProps {
   docs_id: string;
   documentContent: string;
-  splitMdContent: MarkdownSection[];
-  sectionInView: boolean[];
-  onClose: () => void;
+  sectionContent: DynamicMarkdownSection[];
+  close: () => void;
 }
 
 export function ChatForm({
   docs_id,
   documentContent,
-  splitMdContent,
-  sectionInView,
-  onClose,
+  sectionContent,
+  close,
 }: ChatFormProps) {
   // const [messages, updateChatHistory] = useChatHistory(sectionId);
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
   const lang = getLanguageName(docs_id);
 
-  const { replOutputs, execResults } = useEmbed()!;
-  const { files } = useFile();
+  const { files, replOutputs, execResults } = useEmbedContext();
 
-  const documentContentInView = splitMdContent
-    .filter((_, index) => sectionInView[index])
-    .map(
-      (section) =>
-        `${"#".repeat(section.level)} ${section.title}\n${section.content}`
-    )
+  const documentContentInView = sectionContent
+    .filter((s) => s.inView)
+    .map((s) => s.rawContent)
     .join("\n\n");
   const { data: exampleData, error: exampleError } = useSWR(
     // 質問フォームを開いたときだけで良い
@@ -68,7 +61,7 @@ export function ChatForm({
     e.preventDefault();
     setIsLoading(true);
 
-    const userMessage: Message = { sender: "user", text: inputValue };
+    // const userMessage: Message = { sender: "user", text: inputValue };
     // updateChatHistory([userMessage]);
 
     let userQuestion = inputValue;
@@ -82,8 +75,7 @@ export function ChatForm({
     const result = await askAI({
       userQuestion,
       documentContent,
-      splitMdContent,
-      sectionInView,
+      sectionContent,
       replOutputs,
       files,
       execResults,
@@ -147,7 +139,7 @@ export function ChatForm({
         <div className="left-icons">
           <button
             className="btn btn-soft btn-secondary rounded-full"
-            onClick={onClose}
+            onClick={close}
             type="button"
           >
             閉じる

app/[docs_id]/embedContext.tsx

@@ -5,7 +5,6 @@ import { join } from "node:path";
 import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
 import pyodideLock from "pyodide/pyodide-lock.json";
 import { PageContent } from "./pageContent";
-import { EmbedContextProvider } from "./embedContext";
 
 export default async function Page({
   params,
@@ -42,15 +41,13 @@ export default async function Page({
     String(pyodideLock.info.python)
   );
 
-  const splitMdContent: MarkdownSection[] = await splitMarkdown(mdContent);
+  const splitMdContent: MarkdownSection[] = splitMarkdown(mdContent);
 
   return (
-    <EmbedContextProvider>
-      <PageContent
-        documentContent={mdContent}
-        splitMdContent={splitMdContent}
-        docs_id={docs_id}
-      />
-    </EmbedContextProvider>
+    <PageContent
+      documentContent={mdContent}
+      splitMdContent={splitMdContent}
+      docs_id={docs_id}
+    />
   );
 }

app/[docs_id]/page.tsx

@@ -4,36 +4,59 @@ import { useEffect, useRef, useState } from "react";
 import { Section } from "./section";
 import { MarkdownSection } from "./splitMarkdown";
 import { ChatForm } from "./chatForm";
-import { useEmbed } from "./embedContext";
+
+// MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる
+export type DynamicMarkdownSection = MarkdownSection & {
+  inView: boolean;
+  sectionId: string;
+};
 
 interface PageContentProps {
   documentContent: string;
   splitMdContent: MarkdownSection[];
   docs_id: string;
 }
 export function PageContent(props: PageContentProps) {
-  // 各セクションが画面内にあるかどうかを調べる
-  const [sectionInView, setSectionInView] = useState<boolean[]>([]);
+  const [dynamicMdContent, setDynamicMdContent] = useState<
+    DynamicMarkdownSection[]
+  >(
+    // useEffectで更新するのとは別に、SSRのための初期値
+    props.splitMdContent.map((section, i) => ({
+      ...section,
+      inView: false,
+      sectionId: `${props.docs_id}-${i}`,
+    }))
+  );
+  useEffect(() => {
+    // props.splitMdContentが変わったときにdynamicMdContentを更新
+    setDynamicMdContent(
+      props.splitMdContent.map((section, i) => ({
+        ...section,
+        inView: false,
+        sectionId: `${props.docs_id}-${i}`,
+      }))
+    );
+  }, [props.splitMdContent, props.docs_id]);
+
   const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
   // sectionRefsの長さをsplitMdContentに合わせる
   while (sectionRefs.current.length < props.splitMdContent.length) {
     sectionRefs.current.push(null);
   }
-  sectionRefs.current = sectionRefs.current.slice(
-    0,
-    props.splitMdContent.length
-  );
 
   useEffect(() => {
     const handleScroll = () => {
-      const newSectionInView = sectionRefs.current.map((sectionRef) => {
-        if (sectionRef) {
-          const rect = sectionRef.getBoundingClientRect();
-          return rect.top < window.innerHeight && rect.bottom >= 0;
+      setDynamicMdContent((prevDynamicMdContent) => {
+        const dynMdContent = prevDynamicMdContent.slice(); // Reactの変更検知のために新しい配列を作成
+        for (let i = 0; i < sectionRefs.current.length; i++) {
+          if (sectionRefs.current.at(i) && dynMdContent.at(i)) {
+            const rect = sectionRefs.current.at(i)!.getBoundingClientRect();
+            dynMdContent.at(i)!.inView =
+              rect.top < window.innerHeight && rect.bottom >= 0;
+          }
         }
-        return false;
+        return dynMdContent;
       });
-      setSectionInView(newSectionInView);
     };
     window.addEventListener("scroll", handleScroll);
     handleScroll();
@@ -46,28 +69,24 @@ export function PageContent(props: PageContentProps) {
 
   return (
     <div className="p-4">
-      {props.splitMdContent.map((section, index) => {
-        const sectionId = `${props.docs_id}-${index}`;
-        return (
+      {dynamicMdContent.map((section, index) => 
           <div
             key={index}
             id={`${index}`} // 目次からaタグで飛ぶために必要
             ref={(el) => {
               sectionRefs.current[index] = el;
             }}
           >
-            <Section section={section} sectionId={sectionId} />
+            <Section section={section} sectionId={section.sectionId} />
           </div>
-        );
-      })}
+      )}
       {isFormVisible ? (
         <div className="fixed bottom-4 inset-x-4 z-50">
           <ChatForm
             documentContent={props.documentContent}
-            splitMdContent={props.splitMdContent}
-            sectionInView={sectionInView}
+            sectionContent={dynamicMdContent}
             docs_id={props.docs_id}
-            onClose={() => setIsFormVisible(false)}
+            close={() => setIsFormVisible(false)}
           />
         </div>
       ) : (

app/[docs_id]/pageContent.tsx

@@ -6,6 +6,7 @@ export interface MarkdownSection {
   level: number;
   title: string;
   content: string;
+  rawContent: string; // 見出しも含めたもとのmarkdownの内容
 }
 /**
  * Markdownコンテンツを見出しごとに分割し、
@@ -36,6 +37,10 @@ export function splitMarkdown(content: string): MarkdownSection[] {
         .join("\n")
         .trim(),
       level: headingNodes.at(i)!.depth,
+      rawContent: splitContent
+        .slice(startLine - 1, endLine ? endLine - 1 : undefined)
+        .join("\n")
+        .trim(),
     });
   }
   return sections;