チャットがサーバーに保存されるようになった

na-trium-144 · na-trium-144 · commit 709d8cb71cc7 · 2025-10-26T00:20:52.000+09:00
diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, FormEvent, useEffect } from "react";
-import { askAI } from "@/app/actions/chatActions";
 import useSWR from "swr";
 import {
   getQuestionExample,
@@ -10,7 +9,8 @@ import {
 import { getLanguageName } from "../pagesList";
 import { DynamicMarkdownSection } from "./pageContent";
 import { useEmbedContext } from "../terminal/embedContext";
-import { ChatMessage, useChatHistoryContext } from "./chatHistory";
+import { useChatHistoryContext } from "./chatHistory";
+import { askAI } from "@/actions/chatActions";
 
 interface ChatFormProps {
   docs_id: string;
@@ -71,8 +71,6 @@ export function ChatForm({
     setIsLoading(true);
     setErrorMessage(null); // Clear previous error message
 
-    const userMessage: ChatMessage = { sender: "user", text: inputValue };
-
     let userQuestion = inputValue;
     if (!userQuestion && exampleData) {
       // 質問が空欄なら、質問例を使用
@@ -83,19 +81,19 @@ export function ChatForm({
 
     const result = await askAI({
       userQuestion,
+      docsId: docs_id,
       documentContent,
       sectionContent,
       replOutputs,
       files,
       execResults,
     });
 
-    if (result.error) {
+    if (result.error !== null) {
       setErrorMessage(result.error);
       console.log(result.error);
     } else {
-      const aiMessage: ChatMessage = { sender: "ai", text: result.response };
-      const chatId = addChat(result.targetSectionId, [userMessage, aiMessage]);
+      addChat(result.chat);
       // TODO: chatIdが指す対象の回答にフォーカス
       setInputValue("");
       close();
diff --git a/app/[docs_id]/chatHistory.tsx b/app/[docs_id]/chatHistory.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ChatWithMessages } from "@/lib/chatHistory";
 import {
   createContext,
   ReactNode,
@@ -8,15 +9,10 @@ import {
   useState,
 } from "react";
 
-export interface ChatMessage {
-  sender: "user" | "ai" | "error";
-  text: string;
-}
-
 export interface IChatHistoryContext {
-  chatHistories: Record<string, Record<string, ChatMessage[]>>;
-  addChat: (sectionId: string, messages: ChatMessage[]) => string;
-  updateChat: (sectionId: string, chatId: string, message: ChatMessage) => void;
+  chatHistories: ChatWithMessages[];
+  addChat: (chat: ChatWithMessages) => void;
+  // updateChat: (sectionId: string, chatId: string, message: ChatMessage) => void;
 }
 const ChatHistoryContext = createContext<IChatHistoryContext | null>(null);
 export function useChatHistoryContext() {
@@ -29,65 +25,26 @@ export function useChatHistoryContext() {
   return context;
 }
 
-export function ChatHistoryProvider({ children }: { children: ReactNode }) {
-  const [chatHistories, setChatHistories] = useState<
-    Record<string, Record<string, ChatMessage[]>>
-  >({});
+export function ChatHistoryProvider({
+  children,
+  initialChatHistories,
+}: {
+  children: ReactNode;
+  initialChatHistories: ChatWithMessages[];
+}) {
+  const [chatHistories, setChatHistories] =
+    useState<ChatWithMessages[]>(initialChatHistories);
   useEffect(() => {
-    // Load chat histories from localStorage on mount
-    const chatHistories: Record<string, Record<string, ChatMessage[]>> = {};
-    for (let i = 0; i < localStorage.length; i++) {
-      const key = localStorage.key(i);
-      if (key && key.startsWith("chat/") && key.split("/").length === 3) {
-        const savedHistory = localStorage.getItem(key);
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const [_, sectionId, chatId] = key.split("/");
-        if (savedHistory) {
-          if (!chatHistories[sectionId]) {
-            chatHistories[sectionId] = {};
-          }
-          chatHistories[sectionId][chatId] = JSON.parse(savedHistory);
-        }
-      }
-    }
-    setChatHistories(chatHistories);
-  }, []);
+    setChatHistories(initialChatHistories);
+  }, [initialChatHistories]);
 
-  const addChat = (sectionId: string, messages: ChatMessage[]): string => {
-    const chatId = Date.now().toString();
-    const newChatHistories = { ...chatHistories };
-    if (!newChatHistories[sectionId]) {
-      newChatHistories[sectionId] = {};
-    }
-    newChatHistories[sectionId][chatId] = messages;
-    setChatHistories(newChatHistories);
-    localStorage.setItem(
-      `chat/${sectionId}/${chatId}`,
-      JSON.stringify(messages)
-    );
-    return chatId;
-  };
-  const updateChat = (
-    sectionId: string,
-    chatId: string,
-    message: ChatMessage
-  ) => {
-    const newChatHistories = { ...chatHistories };
-    if (newChatHistories[sectionId] && newChatHistories[sectionId][chatId]) {
-      newChatHistories[sectionId][chatId] = [
-        ...newChatHistories[sectionId][chatId],
-        message,
-      ];
-      setChatHistories(newChatHistories);
-      localStorage.setItem(
-        `chat/${sectionId}/${chatId}`,
-        JSON.stringify(newChatHistories[sectionId][chatId])
-      );
-    }
+  const addChat = (chat: ChatWithMessages) => {
+    // サーバー側で追加された新しいchatをクライアント側にも反映する
+    setChatHistories([...chatHistories, chat]);
   };
 
   return (
-    <ChatHistoryContext.Provider value={{ chatHistories, addChat, updateChat }}>
+    <ChatHistoryContext.Provider value={{ chatHistories, addChat }}>
       {children}
     </ChatHistoryContext.Provider>
   );
diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx
@@ -6,6 +6,7 @@ import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
 import pyodideLock from "pyodide/pyodide-lock.json";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
+import { getChat } from "@/lib/chatHistory";
 
 export default async function Page({
   params,
@@ -44,8 +45,10 @@ export default async function Page({
 
   const splitMdContent: MarkdownSection[] = splitMarkdown(mdContent);
 
+  const initialChatHistories = await getChat(docs_id);
+
   return (
-    <ChatHistoryProvider>
+    <ChatHistoryProvider initialChatHistories={initialChatHistories}>
       <PageContent
         documentContent={mdContent}
         splitMdContent={splitMdContent}
diff --git a/app/[docs_id]/pageContent.tsx b/app/[docs_id]/pageContent.tsx
@@ -94,8 +94,8 @@ export function PageContent(props: PageContentProps) {
           </div>
           <div key={`${index}-chat`}>
             {/* 右側に表示するチャット履歴欄 */}
-            {Object.entries(chatHistories[section.sectionId] ?? {}).map(
-              ([chatId, messages]) => (
+            {chatHistories.filter((c) => c.sectionId === section.sectionId).map(
+              ({chatId, messages}) => (
                 <div
                   key={chatId}
                   className="max-w-xs mb-2 p-2 text-sm border border-base-content/10 rounded-sm shadow-sm bg-base-100"
@@ -104,20 +104,20 @@ export function PageContent(props: PageContentProps) {
                     {messages.map((msg, index) => (
                       <div
                         key={index}
-                        className={`chat ${msg.sender === "user" ? "chat-end" : "chat-start"}`}
+                        className={`chat ${msg.role === "user" ? "chat-end" : "chat-start"}`}
                       >
                         <div
                           className={clsx(
                             "chat-bubble p-1!",
-                            msg.sender === "user" &&
+                            msg.role === "user" &&
                               "bg-primary text-primary-content",
-                            msg.sender === "ai" &&
+                            msg.role === "ai" &&
                               "bg-secondary-content dark:bg-neutral text-black dark:text-white",
-                            msg.sender === "error" && "chat-bubble-error"
+                            msg.role === "error" && "chat-bubble-error"
                           )}
                           style={{ maxWidth: "100%", wordBreak: "break-word" }}
                         >
-                          <StyledMarkdown content={msg.text} />
+                          <StyledMarkdown content={msg.content} />
                         </div>
                       </div>
                     ))}
diff --git a/app/actions/chatActions.ts b/app/actions/chatActions.ts
@@ -4,23 +4,29 @@
 import { generateContent } from "./gemini";
 import { DynamicMarkdownSection } from "../[docs_id]/pageContent";
 import { ReplCommand, ReplOutput } from "../terminal/repl";
+import { addChat, ChatWithMessages } from "@/lib/chatHistory";
 
-interface FormState {
-  response: string;
-  error: string | null;
-  targetSectionId: string;
-}
+type ChatResult =
+  | {
+      error: string;
+    }
+  | {
+      error: null;
+      // サーバー側でデータベースに新しく追加されたチャットデータ
+      chat: ChatWithMessages;
+    };
 
 type ChatParams = {
   userQuestion: string;
+  docsId: string;
   documentContent: string;
   sectionContent: DynamicMarkdownSection[];
   replOutputs: Record<string, ReplCommand[]>;
   files: Record<string, string>;
   execResults: Record<string, ReplOutput[]>;
 };
 
-export async function askAI(params: ChatParams): Promise<FormState> {
+export async function askAI(params: ChatParams): Promise<ChatResult> {
   // const parseResult = ChatSchema.safeParse(params);
 
   // if (!parseResult.success) {
@@ -141,25 +147,21 @@ export async function askAI(params: ChatParams): Promise<FormState> {
     if (!text) {
       throw new Error("AIからの応答が空でした");
     }
+    // TODO: どのセクションへの回答にするかをAIに決めさせる
+    const targetSectionId =
+      sectionContent.find((s) => s.inView)?.sectionId || "";
+    const newChat = await addChat(params.docsId, targetSectionId, [
+      { role: "user", content: userQuestion },
+      { role: "ai", content: text },
+    ]);
     return {
-      response: text,
       error: null,
-      // TODO: どのセクションへの回答にするかをAIに決めさせる
-      targetSectionId: sectionContent.find((s) => s.inView)?.sectionId || "",
+      chat: newChat,
     };
   } catch (error: unknown) {
     console.error("Error calling Generative AI:", error);
-    if (error instanceof Error) {
-      return {
-        response: "",
-        error: `AIへのリクエスト中にエラーが発生しました: ${error.message}`,
-        targetSectionId: sectionContent.find((s) => s.inView)?.sectionId || "",
-      };
-    }
     return {
-      response: "",
-      error: "予期せぬエラーが発生しました。",
-      targetSectionId: sectionContent.find((s) => s.inView)?.sectionId || "",
+      error: String(error),
     };
   }
 }
diff --git a/app/lib/auth.ts b/app/lib/auth.ts
@@ -1,10 +1,8 @@
 import { betterAuth } from "better-auth";
 import { prismaAdapter } from "better-auth/adapters/prisma";
-import { PrismaClient } from "../generated/prisma/client";
 import { getCloudflareContext } from "@opennextjs/cloudflare";
 import { anonymous } from "better-auth/plugins";
-
-const prisma = new PrismaClient();
+import prisma from "./prisma";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let cloudflareEnv: any;
diff --git a/app/lib/chatHistory.ts b/app/lib/chatHistory.ts
@@ -0,0 +1,61 @@
+import { headers } from "next/headers";
+import { auth } from "./auth";
+import prisma from "./prisma";
+
+export interface CreateChatMessage {
+  role: "user" | "ai" | "error";
+  content: string;
+}
+
+export async function addChat(
+  docsId: string,
+  sectionId: string,
+  messages: CreateChatMessage[]
+) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) {
+    throw new Error("Not authenticated");
+  }
+
+  return await prisma.chat.create({
+    data: {
+      userId: session.user.id,
+      docsId,
+      sectionId,
+      messages: {
+        createMany: {
+          data: messages,
+        },
+      },
+    },
+    include: {
+      messages: true,
+    },
+  });
+}
+
+export type ChatWithMessages = Awaited<ReturnType<typeof addChat>>;
+
+export async function getChat(docsId: string) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) {
+    return [];
+  }
+
+  return await prisma.chat.findMany({
+    where: {
+      userId: session.user.id,
+      docsId,
+    },
+    include: {
+      messages: {
+        orderBy: {
+          id: "asc",
+        },
+      },
+    },
+    orderBy: {
+      chatId: "asc",
+    },
+  });
+}
diff --git a/app/lib/prisma.ts b/app/lib/prisma.ts
@@ -0,0 +1,5 @@
+import { PrismaClient } from "../generated/prisma/client";
+
+const prisma = new PrismaClient();
+export default prisma;
+
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -27,6 +27,8 @@ model User {
 
   isAnonymous Boolean?
 
+  Chat        Chat[]
+
   @@unique([email])
   @@map("user")
 }
@@ -75,3 +77,23 @@ model Verification {
 
   @@map("verification")
 }
+
+// ここまでbetter-authが使う
+
+model Chat {
+  chatId    Int @id @default(autoincrement())
+  userId    String
+  user      User   @relation(fields: [userId], references: [id], onDelete: Cascade)
+  docsId    String
+  sectionId String
+
+  messages Message[]
+}
+
+model Message {
+  id        Int @id @default(autoincrement())
+  chatId    Int
+  chat      Chat     @relation(fields: [chatId], references: [chatId], onDelete: Cascade)
+  role      String
+  content   String
+}
