From 8ae0b3db8aec693ab79b55d2e050db940ce67f37 Mon Sep 17 00:00:00 2001
From: ika-2-2 <219417869+ika-2-2@users.noreply.github.com>
Date: Sun, 10 Aug 2025 12:40:47 +0900
Subject: [PATCH] =?UTF-8?q?Markdown=E3=83=AC=E3=83=B3=E3=83=80=E3=83=A9?=
 =?UTF-8?q?=E3=83=BC=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97=E3=80=81=E8=A6=81?=
 =?UTF-8?q?=E4=BB=B6=E5=AE=9A=E7=BE=A9=E6=9B=B8=E3=81=AE=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=82=92=E6=94=B9=E5=96=84=E3=80=82ModelResponse=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=A7?=
 =?UTF-8?q?MarkdownRenderer=E3=82=92=E4=BD=BF=E7=94=A8=E3=81=97=E3=81=A6?=
 =?UTF-8?q?=E3=80=81=E3=82=B3=E3=83=BC=E3=83=89=E3=83=96=E3=83=AD=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=82=92=E9=81=A9=E5=88=87=E3=81=AB=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/api/src/services/conversationsService.ts |   7 +-
 .../src/components/MarkdownRenderer.tsx       | 137 ++++++++++++++++++
 .../src/components/ModelResponse.tsx          |   6 +-
 3 files changed, 147 insertions(+), 3 deletions(-)
 create mode 100644 apps/extension/src/components/MarkdownRenderer.tsx

diff --git a/apps/api/src/services/conversationsService.ts b/apps/api/src/services/conversationsService.ts
index 48667d8..987934f 100644
--- a/apps/api/src/services/conversationsService.ts
+++ b/apps/api/src/services/conversationsService.ts
@@ -63,7 +63,9 @@ export class ConversationService {
           await this.generateRequirementsDocFromSession(sessionId);
         const response =
           "これまでの対話を基に、要件定義書を生成しました。\n\n" +
-          requirementsDoc;
+          "```md\n" +
+          requirementsDoc +
+          "\n```";
         return this.saveMessage(sessionId, "ai", response);
       } catch (error) {
         console.error("要件定義書生成中にエラー:", error);
@@ -394,8 +396,9 @@ export class ConversationService {
         const reqDoc = await this.generateRequirementsDocFromSession(sessionId);
         return (
           "ここまでの対話を基に、要件定義書を作成しました。\n\n" +
+          "```md\n" +
           reqDoc +
-          "\n\nこの内容でよろしければ、Issue案を生成します。よろしいですか？"
+          "\n```\n\nこの内容でよろしければ、Issue案を生成します。よろしいですか？"
         );
       } catch (error) {
         console.error("要件定義書生成中にエラーが発生しました:", error);
diff --git a/apps/extension/src/components/MarkdownRenderer.tsx b/apps/extension/src/components/MarkdownRenderer.tsx
new file mode 100644
index 0000000..c5bd541
--- /dev/null
+++ b/apps/extension/src/components/MarkdownRenderer.tsx
@@ -0,0 +1,137 @@
+import { memo, useState } from "react";
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+// 極力シンプルなMarkdownレンダラー
+// - 見出し: #, ##, ###
+// - 箇条書き: - で始まる行（連続行を<ul>にまとめる）
+// - 空行は段落の区切り
+export const MarkdownRenderer = memo((props: MarkdownRendererProps) => {
+  const { content } = props;
+
+  // ブロック単位で要素を生成
+  const lines = content.split("\n");
+  const elements: React.ReactNode[] = [];
+
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // コードブロック ```lang\n ... \n```
+    if (line.startsWith("```")) {
+      const _lang = line.slice(3).trim();
+      const codeLines: string[] = [];
+      let j = i + 1;
+      while (j < lines.length && !lines[j].startsWith("```")) {
+        codeLines.push(lines[j]);
+        j += 1;
+      }
+      // j は閉じ```の行位置 or 行末
+      const code = codeLines.join("\n");
+      const Copyable = () => {
+        const [copied, setCopied] = useState(false);
+        const onCopy = async () => {
+          try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+          } catch {}
+        };
+        return (
+          <div className="group relative">
+            <pre className="overflow-x-hidden rounded-md bg-[#0d1117] p-3 ring-1 ring-[#30363d]">
+              <code className="whitespace-pre-wrap break-words font-mono text-sm">
+                {code}
+              </code>
+            </pre>
+            <button
+              type="button"
+              onClick={onCopy}
+              className="absolute top-2 right-2 rounded border border-[#30363d] bg-[#161b22] px-2 py-1 text-[#c9d1d9] text-xs opacity-0 transition-opacity hover:bg-[#21262d] group-hover:opacity-100"
+              aria-label="Copy code"
+            >
+              {copied ? "Copied" : "Copy"}
+            </button>
+          </div>
+        );
+      };
+      elements.push(<Copyable key={`pre-${i}`} />);
+      i = j < lines.length ? j + 1 : j;
+      continue;
+    }
+
+    // 箇条書きブロック
+    if (line.trim().startsWith("- ")) {
+      const items: string[] = [];
+      let j = i;
+      while (j < lines.length && lines[j].trim().startsWith("- ")) {
+        items.push(lines[j].trim().slice(2));
+        j += 1;
+      }
+      elements.push(
+        <ul key={`ul-${i}`} className="ml-5 list-disc space-y-1">
+          {items.map((item) => {
+            const key = `li-${i}-${item}-${Math.random().toString(36).slice(2, 8)}`;
+            return (
+              <li key={key} className="leading-6">
+                {item}
+              </li>
+            );
+          })}
+        </ul>,
+      );
+      i = j;
+      continue;
+    }
+
+    // 見出し
+    if (line.startsWith("### ")) {
+      elements.push(
+        <h3 key={`h3-${i}`} className="mt-4 mb-2 font-semibold text-base">
+          {line.slice(4)}
+        </h3>,
+      );
+      i += 1;
+      continue;
+    }
+    if (line.startsWith("## ")) {
+      elements.push(
+        <h2 key={`h2-${i}`} className="mt-5 mb-3 font-bold text-lg">
+          {line.slice(3)}
+        </h2>,
+      );
+      i += 1;
+      continue;
+    }
+    if (line.startsWith("# ")) {
+      elements.push(
+        <h1 key={`h1-${i}`} className="mt-6 mb-4 font-bold text-xl">
+          {line.slice(2)}
+        </h1>,
+      );
+      i += 1;
+      continue;
+    }
+
+    // 空行 → 間隔
+    if (line.trim() === "") {
+      elements.push(<div key={`sp-${i}`} className="h-2" />);
+      i += 1;
+      continue;
+    }
+
+    // 段落
+    elements.push(
+      <p key={`p-${i}`} className="leading-6">
+        {line}
+      </p>,
+    );
+    i += 1;
+  }
+
+  return <div className="space-y-1 break-words">{elements}</div>;
+});
+
+MarkdownRenderer.displayName = "MarkdownRenderer";
diff --git a/apps/extension/src/components/ModelResponse.tsx b/apps/extension/src/components/ModelResponse.tsx
index 3192a98..bf038c7 100644
--- a/apps/extension/src/components/ModelResponse.tsx
+++ b/apps/extension/src/components/ModelResponse.tsx
@@ -1,6 +1,7 @@
 import { memo, useState } from "react";
 import PrismLogo from "@assets/prism.png";
 import { SelectRepository } from "./SelectRepository";
+import { MarkdownRenderer } from "./MarkdownRenderer";
 import { useCreateIssues } from "@/hooks/api/createIssues";
 import { useGetSessionIssues } from "@/hooks/api/getSessionIssues";
 import { useChatStore } from "@/store/chatStore";
@@ -72,7 +73,10 @@ export const ModelResponse = memo((props: ModelResponseProps) => {
         <div className="flex h-8 w-8 items-center justify-center">
           <img src={PrismLogo} alt="prism" />
         </div>
-        <div className="whitespace-pre-wrap leading-6">{displayContent}</div>
+        {/* Markdown本文は素のレイアウト。コードブロックのみMarkdownRenderer内で背景化 */}
+        <div className="w-full">
+          <MarkdownRenderer content={displayContent} />
+        </div>
 
         {shouldShowRepositorySelection && (
           <button