Merge remote-tracking branch 'origin/main' into terminal

na-trium-144 · na-trium-144 · commit 5740498d723d · 2025-08-11T21:48:56.000+09:00
diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
@@ -10,6 +10,7 @@ export function ChatForm() {
   const [inputValue, setInputValue] = useState("");
   const [response, setResponse] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [isFormVisible, setIsFormVisible] = useState(false);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -42,119 +43,72 @@ export function ChatForm() {
   };
   return (
     <>
-      <style jsx>{`
-        /* 簡単なCSSで見た目を整える（オプション） */
-        .form-container {
-          background-color: white;
-          border-radius: 10px;
-          box-shadow: 0 4px 8px rgba(67, 204, 216, 0.86);
-          padding: 20px;
-          width: 90%;
-          max-width: 1000px;
-          display: flex;
-          flex-direction: column;
-        }
-        .input-area {
-          border: 1px solid #ccc;
-          border-radius: 8px;
-          padding: 5px 15 px;
-          margin-bottom: 15px;
-          min-height: 150px; /* 入力欄の高さ */
-          display: flex;
-        }
-        .text-input {
-          border: none;
-          outline: none;
-          flex-grow: 1;
-          font-size: 16px;
-          resize: none; /* テキストエリアのリサイズを無効化 */
-          overflow: auto;
-          padding: 10px;
-        }
-        .controls {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-        .left-icons button {
-          background: none;
-          border: none;
-          font-size: 24px;
-          cursor: pointer;
-          color: #555;
-          margin-right: 15px;
-          padding: 5px;
-        }
-        .left-icons button:hover {
-          color: #000;
-        }
-        .left-icons span {
-          font-size: 14px;
-          vertical-align: middle;
-          margin-left: 5px;
-          color: #555;
-        }
-        .right-controls {
-          display: flex;
-          align-items: center;
-        }
-        .voice-icon button {
-          background: none;
-          border: none;
-          font-size: 24px;
-          cursor: pointer;
-          color: #555;
-          margin-right: 15px;
-          padding: 5px;
-        }
-        .voice-icon button:hover {
-          color: #000;
-        }
-        .send-button {
-          background-color: #007bff; /* 青色の送信ボタン */
-          color: white;
-          border: none;
-          border-radius: 50%; /* 丸いボタン */
-          width: 40px;
-          height: 40px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 20px;
-          cursor: pointer;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-          transition: background-color 0.3s ease;
-        }
-        .send-button:hover {
-          background-color: #0056b3;
-        }
-      `}</style>
-
-      <form className="form-container" onSubmit={handleSubmit}>
-        <div className="input-area">
+      {isFormVisible && (
+      <form className="border border-2 border-primary shadow-xl p-6 rounded-lg bg-base-100" style={{width:"100%", textAlign:"center", boxShadow:"-moz-initial"}} onSubmit={handleSubmit}>
+        <h2 className="text-xl font-bold mb-4 text-left relative -top-2 font-mono h-2">
+          AIへ質問
+        </h2>
+        <div className="input-area" style={{height:"80px"}}>
           <textarea
-            className="text-input"
+            className="textarea textarea-white textarea-md"
             placeholder="質問を入力してください"
+            style={{width: "100%", height: "110px", resize: "none"}}
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
             disabled={isLoading}
           ></textarea>
         </div>
-        <div className="controls">
-          <div className="left-icons"></div>
+        <br />
+        <div className="controls" style={{position:"relative", top:"22px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
+          <div className="left-icons">
+            <button 
+              className="btn btn-soft btn-secondary rounded-full"
+              onClick={() => setIsFormVisible(false)}
+            >
+
+              閉じる
+            </button>
+          </div>
           <div className="right-controls">
             <button
               type="submit"
-              className="send-button"
+              className="btn btn-soft btn-circle btn-primary rounded-full"
               title="送信"
+              style={{marginTop:"10px"}}
               disabled={isLoading}
             >
               <span className="icon">➤</span>
             </button>
           </div>
         </div>
       </form>
-      {response && <div className="response-container">{response}</div>}
+      )}
+      {!isFormVisible && (
+      <button 
+        className="btn btn-soft btn-secondary rounded-full"
+        onClick={() => setIsFormVisible(true)}
+      >
+        チャットを開く
+      </button>
+      )}
+
+      {response && (
+        <article>
+          <h3 className="text-lg font-semibold mb-2">AIの回答</h3>
+          <div className="chat chat-start">
+            <div className="chat-bubble chat-bubble-primary">
+               <div className="response-container">{response}</div>
+            </div>
+          </div>
+        </article>
+      )}
+
+      {isLoading && (
+      <div className="mt-2 text-l text-gray-500 animate-pulse">
+        AIが考え中です…
+      </div>
+      )}
+
     </>
   );
 }
diff --git a/app/[docs_id]/markdown.tsx b/app/[docs_id]/markdown.tsx
@@ -2,6 +2,7 @@ import Markdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { PythonEmbeddedTerminal } from "../terminal/python/embedded";
+import { Heading } from "./section";
 
 export function StyledMarkdown({ content }: { content: string }) {
   return (
@@ -13,18 +14,12 @@ export function StyledMarkdown({ content }: { content: string }) {
 
 // TailwindCSSがh1などのタグのスタイルを消してしまうので、手動でスタイルを指定する必要がある
 const components: Components = {
-  h1: ({ node, ...props }) => (
-    <h1 className="text-2xl font-bold my-4" {...props} />
-  ),
-  h2: ({ node, ...props }) => (
-    <h2 className="text-xl font-bold mt-4 mb-3 " {...props} />
-  ),
-  h3: ({ node, ...props }) => (
-    <h3 className="text-lg font-bold mt-4 mb-2" {...props} />
-  ),
-  h4: ({ node, ...props }) => (
-    <h4 className="text-base font-bold mt-3 mb-2" {...props} />
-  ),
+  h1: ({ children }) => <Heading level={1}>{children}</Heading>,
+  h2: ({ children }) => <Heading level={2}>{children}</Heading>,
+  h3: ({ children }) => <Heading level={3}>{children}</Heading>,
+  h4: ({ children }) => <Heading level={4}>{children}</Heading>,
+  h5: ({ children }) => <Heading level={5}>{children}</Heading>,
+  h6: ({ children }) => <Heading level={6}>{children}</Heading>,
   p: ({ node, ...props }) => <p className="mx-2 my-2" {...props} />,
   ul: ({ node, ...props }) => (
     <ul className="list-disc list-outside ml-6 my-2" {...props} />
diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx
@@ -1,9 +1,9 @@
 import { notFound } from "next/navigation";
-import { ChatForm } from "./chatForm";
-import { StyledMarkdown } from "./markdown";
 import { getCloudflareContext } from "@opennextjs/cloudflare";
-import { readFile } from "node:fs/promises"; 
+import { readFile } from "node:fs/promises";
 import { join } from "node:path";
+import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
+import { Section } from "./section";
 
 export default async function Page({
   params,
@@ -14,13 +14,13 @@ export default async function Page({
 
   let mdContent: string;
   try {
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === "development") {
       mdContent = await readFile(
         join(process.cwd(), "public", "docs", `${docs_id}.md`),
         "utf-8"
       );
     } else {
-	  const cfAssets = getCloudflareContext().env.ASSETS;
+      const cfAssets = getCloudflareContext().env.ASSETS;
       mdContent = await cfAssets!
         .fetch(`https://assets.local/docs/${docs_id}.md`)
         .then((res) => res.text());
@@ -30,10 +30,13 @@ export default async function Page({
     notFound();
   }
 
+  const splitMdContent: MarkdownSection[] = await splitMarkdown(mdContent);
+
   return (
     <div className="p-4">
-      <StyledMarkdown content={mdContent} />
-      <ChatForm />
+      {splitMdContent.map((section, index) => (
+        <Section key={index} section={section} />
+      ))}
     </div>
   );
 }
diff --git a/app/[docs_id]/section.tsx b/app/[docs_id]/section.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { ReactNode } from "react";
+import { type MarkdownSection } from "./splitMarkdown";
+import { StyledMarkdown } from "./markdown";
+import { ChatForm } from "./chatForm";
+
+// 1つのセクションのタイトルと内容を表示する。内容はMarkdownとしてレンダリングする
+export function Section({ section }: { section: MarkdownSection }) {
+  return (
+    <div>
+      <Heading level={section.level}>{section.title}</Heading>
+      <StyledMarkdown content={section.content} />
+      <ChatForm />
+    </div>
+  );
+}
+
+export function Heading({ level, children }: { level: number; children: ReactNode }) {
+  switch (level) {
+    case 1:
+      return <h1 className="text-2xl font-bold my-4">{children}</h1>;
+    case 2:
+      return <h2 className="text-xl font-bold mt-4 mb-3 ">{children}</h2>;
+    case 3:
+      return <h3 className="text-lg font-bold mt-4 mb-2">{children}</h3>;
+    case 4:
+      return <h4 className="text-base font-bold mt-3 mb-2">{children}</h4>;
+    case 5:
+      // TODO: これ以下は4との差がない (全体的に大きくする必要がある？)
+      return <h5 className="text-base font-bold mt-3 mb-2">{children}</h5>;
+    case 6:
+      return <h6 className="text-base font-bold mt-3 mb-2">{children}</h6>;
+  }
+}
diff --git a/app/[docs_id]/splitMarkdown.ts b/app/[docs_id]/splitMarkdown.ts
@@ -0,0 +1,46 @@
+"use server";
+
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+
+export interface MarkdownSection {
+  level: number;
+  title: string;
+  content: string;
+}
+/**
+ * Markdownコンテンツを見出しごとに分割し、
+ * 見出しのレベルとタイトル、内容を含むオブジェクトの配列を返す。
+ */
+export async function splitMarkdown(
+  content: string
+): Promise<MarkdownSection[]> {
+  const tree = unified().use(remarkParse).use(remarkGfm).parse(content);
+  // console.log(tree.children.map(({ type, position }) => ({ type, position: JSON.stringify(position) })));
+  const headingNodes = tree.children.filter((node) => node.type === "heading");
+  const splitContent = content.split("\n");
+  const sections: MarkdownSection[] = [];
+  for (let i = 0; i < headingNodes.length; i++) {
+    const startLine = headingNodes.at(i)?.position?.start.line;
+    if (startLine === undefined) {
+      continue;
+    }
+    let endLine: number | undefined = undefined;
+    for (let j = i + 1; j < headingNodes.length; j++) {
+      if (headingNodes.at(j)?.position?.start.line !== undefined) {
+        endLine = headingNodes.at(j)!.position!.start.line;
+        break;
+      }
+    }
+    sections.push({
+      title: splitContent[startLine - 1].replace(/#+\s*/, "").trim(),
+      content: splitContent
+        .slice(startLine - 1 + 1, endLine ? endLine - 1 : undefined)
+        .join("\n")
+        .trim(),
+      level: headingNodes.at(i)!.depth,
+    });
+  }
+  return sections;
+}
