Merge branch 'main' into generate-question-examples

Author: na-trium-144

app/(docs)/@chat/chat/[chatId]/chatArea.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ChatAreaStateUpdater } from "@/(docs)/chatAreaState";
+import { useStreamingChatContext } from "@/(docs)/streamingChatContext";
 import { deleteChatAction } from "@/actions/deleteChat";
 import { ChatWithMessages } from "@/lib/chatHistory";
 import { LanguageEntry, MarkdownSection, PageEntry } from "@/lib/docs";
@@ -11,7 +12,10 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { ReactNode } from "react";
 
-export function ChatAreaContainer(props: { chatId: string; children: ReactNode }) {
+export function ChatAreaContainer(props: {
+  chatId: string;
+  children: ReactNode;
+}) {
   return (
     <aside
       className={clsx(
@@ -75,6 +79,8 @@ export function ChatAreaContent(props: Props) {
   );
 
   const router = useRouter();
+  const streamingChatContext = useStreamingChatContext();
+  const isStreamingThis = streamingChatContext.chatId === chatId;
 
   return (
     <>
@@ -203,6 +209,12 @@ export function ChatAreaContent(props: Props) {
           </div>
         )
       )}
+      {isStreamingThis && (
+        <div className="">
+          <StyledMarkdown content={streamingChatContext.content} />
+          <span className="loading loading-dots loading-sm" />
+        </div>
+      )}
     </>
   );
 }

app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx

@@ -7,11 +7,11 @@ import { useState, FormEvent, useEffect } from "react";
 //   QuestionExampleParams,
 // } from "../actions/questionExample";
 // import { getLanguageName } from "../pagesList";
-import { DynamicMarkdownSection } from "./pageContent";
 import { useEmbedContext } from "@/terminal/embedContext";
-import { askAI } from "@/actions/chatActions";
-import { PagePath } from "@/lib/docs";
+import { DynamicMarkdownSection, PagePath } from "@/lib/docs";
 import { useRouter } from "next/navigation";
+import { ChatStreamEvent } from "@/api/chat/route";
+import { useStreamingChatContext } from "@/(docs)/streamingChatContext";
 
 interface ChatFormProps {
   path: PagePath;
@@ -28,6 +28,7 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
   const { files, replOutputs, execResults } = useEmbedContext();
 
   const router = useRouter();
+  const streamingChatContext = useStreamingChatContext();
 
   const exampleData = sectionContent
     .filter((s) => s.inView)
@@ -46,42 +47,108 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
   }, [exampleChoice]);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+
     let userQuestion = inputValue;
     if (!userQuestion && exampleData.length > 0 && exampleChoice) {
       // 質問が空欄なら、質問例を使用
       userQuestion =
         exampleData[Math.floor(exampleChoice * exampleData.length)];
       setInputValue(userQuestion);
     }
-    if (userQuestion) {
-      e.preventDefault();
-      setIsLoading(true);
-      setErrorMessage(null); // Clear previous error message
-
-      const result = await askAI({
-        path,
-        userQuestion,
-        sectionContent,
-        replOutputs,
-        files,
-        execResults,
-      });
+    if (!userQuestion) {
+      return;
+    }
 
+    e.preventDefault();
+    setIsLoading(true);
+    setErrorMessage(null); // Clear previous error message
 
-      if (result.error !== null) {
-        setErrorMessage(result.error);
-        console.log(result.error);
-      } else {
-        document.getElementById(result.chat.sectionId)?.scrollIntoView({
-          behavior: "smooth",
-        });
-        router.push(`/chat/${result.chat.chatId}`, { scroll: false });
-        router.refresh();
-        setInputValue("");
-        close();
-      }
+    let response: Response;
+    try {
+      response = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path,
+          userQuestion,
+          sectionContent,
+          replOutputs,
+          files,
+          execResults,
+        }),
+      });
+    } catch {
+      setErrorMessage("AIへの接続に失敗しました");
+      setIsLoading(false);
+      return;
+    }
+
+    if (!response.ok) {
+      setErrorMessage(`エラーが発生しました (${response.status})`);
       setIsLoading(false);
+      return;
     }
+
+    const reader = response.body!.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let navigated = false;
+
+    // ストリームを非同期で読み続ける（ナビゲーション後もバックグラウンドで継続）
+    void (async () => {
+      try {
+        while (true) {
+          const result = await reader.read();
+          const { done, value } = result;
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+
+          for (const line of lines) {
+            if (!line.trim()) continue;
+            try {
+              const event = JSON.parse(line) as ChatStreamEvent;
+
+              if (event.type === "chat") {
+                streamingChatContext.startStreaming(event.chatId);
+                document.getElementById(event.sectionId)?.scrollIntoView({
+                  behavior: "smooth",
+                });
+                router.push(`/chat/${event.chatId}`, { scroll: false });
+                router.refresh();
+                navigated = true;
+                setIsLoading(false);
+                setInputValue("");
+                close();
+              } else if (event.type === "chunk") {
+                streamingChatContext.appendChunk(event.text);
+              } else if (event.type === "done") {
+                streamingChatContext.finishStreaming();
+                router.refresh();
+              } else if (event.type === "error") {
+                if (!navigated) {
+                  setErrorMessage(event.message);
+                  setIsLoading(false);
+                }
+                streamingChatContext.finishStreaming();
+              }
+            } catch {
+              // ignore JSON parse errors
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Stream reading failed:", err);
+        // ナビゲーション後のエラーはストリーミングを終了してローディングを止める
+        if (!navigated) {
+          setErrorMessage(String(err));
+          setIsLoading(false);
+        }
+        streamingChatContext.finishStreaming();
+      }
+    })();
   };
 
   return (

app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx

@@ -7,33 +7,18 @@ import { useSidebarMdContext } from "@/sidebar";
 import clsx from "clsx";
 import { PageTransition } from "./pageTransition";
 import {
+  DynamicMarkdownSection,
   LanguageEntry,
   MarkdownSection,
   PageEntry,
   PagePath,
   SectionId,
 } from "@/lib/docs";
-import { ReplacedRange } from "@/markdown/multiHighlight";
 import { Heading } from "@/markdown/heading";
 import Link from "next/link";
 import { useChatId } from "@/(docs)/chatAreaState";
 import { ChatWithMessages } from "@/lib/chatHistory";
 
-/**
- * MarkdownSectionに追加で、動的な情報を持たせる
- */
-export interface DynamicMarkdownSection extends MarkdownSection {
-  /**
-   * ユーザーが今そのセクションを読んでいるかどうか
-   */
-  inView: boolean;
-  /**
-   * チャットの会話を元にAIが書き換えた後の内容
-   */
-  replacedContent: string;
-  replacedRange: ReplacedRange[];
-}
-
 interface PageContentProps {
   splitMdContent: MarkdownSection[];
   langEntry: LanguageEntry;

app/(docs)/layout.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { ChatAreaStateProvider } from "./chatAreaState";
+import { StreamingChatProvider } from "./streamingChatContext";
 
 // app/(workspace)/layout.tsx
 export default function WorkspaceLayout({
@@ -12,15 +13,17 @@ export default function WorkspaceLayout({
   chat: ReactNode;
 }) {
   return (
-    <ChatAreaStateProvider>
-      <div className="w-full flex flex-row">
-        {docs}
+    <StreamingChatProvider>
+      <ChatAreaStateProvider>
+        <div className="w-full flex flex-row">
+          {docs}
 
-        {chat}
+          {chat}
 
-        {/* children（page.tsx）は今回は使わないか、背景として利用 */}
-        {children}
-      </div>
-    </ChatAreaStateProvider>
+          {/* children（page.tsx）は今回は使わないか、背景として利用 */}
+          {children}
+        </div>
+      </ChatAreaStateProvider>
+    </StreamingChatProvider>
   );
 }

app/(docs)/streamingChatContext.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+
+interface StreamingChatContextData {
+  chatId: string | null;
+  content: string;
+  startStreaming: (chatId: string) => void;
+  appendChunk: (chunk: string) => void;
+  finishStreaming: () => void;
+}
+
+const StreamingChatContext = createContext<StreamingChatContextData>(null!);
+
+export function useStreamingChatContext() {
+  return useContext(StreamingChatContext);
+}
+
+export function StreamingChatProvider({ children }: { children: ReactNode }) {
+  const [chatId, setChatId] = useState<string | null>(null);
+  const [content, setContent] = useState("");
+
+  const startStreaming = useCallback((chatId: string) => {
+    setContent("");
+    setChatId(chatId);
+  }, []);
+
+  const appendChunk = useCallback((chunk: string) => {
+    setContent((prev) => prev + chunk);
+  }, []);
+
+  const finishStreaming = useCallback(() => {
+    setChatId(null);
+    setContent("");
+  }, []);
+
+  return (
+    <StreamingChatContext.Provider
+      value={{
+        chatId,
+        content,
+        startStreaming,
+        appendChunk,
+        finishStreaming,
+      }}
+    >
+      {children}
+    </StreamingChatContext.Provider>
+  );
+}

app/actions/deleteChat.ts

@@ -1,8 +1,10 @@
 "use server";
 
+import { z } from "zod";
 import { deleteChat, initContext } from "@/lib/chatHistory";
 
 export async function deleteChatAction(chatId: string) {
+  chatId = z.uuid().parse(chatId);
   const ctx = await initContext();
   await deleteChat(chatId, ctx);
 }

app/actions/getRedirectFromChat.ts

@@ -1,11 +1,14 @@
 "use server";
 
+import { z } from "zod";
 import { initContext } from "@/lib/chatHistory";
 import { LangId, PageSlug } from "@/lib/docs";
 import { chat, section } from "@/schema/chat";
 import { and, eq } from "drizzle-orm";
 
 export async function getRedirectFromChat(chatId: string): Promise<string> {
+  chatId = z.uuid().parse(chatId);
+  
   const { drizzle, userId } = await initContext();
   if (!userId) {
     throw new Error("Not authenticated");