chathistory表示機能

na-trium-144 · na-trium-144 · commit 9b025ea27cb9 · 2025-10-24T18:04:33.000+09:00
diff --git a/app/[docs_id]/chatForm.tsx b/app/[docs_id]/chatForm.tsx
@@ -2,12 +2,12 @@
 
 import { useState, FormEvent, useEffect } from "react";
 import { askAI } from "@/app/actions/chatActions";
-import { type Message } from "../hooks/useChathistory";
 import useSWR from "swr";
 import { getQuestionExample } from "../actions/questionExample";
 import { getLanguageName } from "../pagesList";
 import { DynamicMarkdownSection } from "./pageContent";
 import { useEmbedContext } from "../terminal/embedContext";
+import { ChatMessage, useChatHistoryContext } from "./chatHistory";
 
 interface ChatFormProps {
   docs_id: string;
@@ -26,6 +26,8 @@ export function ChatForm({
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
+  const { addChat } = useChatHistoryContext();
+
   const lang = getLanguageName(docs_id);
 
   const { files, replOutputs, execResults } = useEmbedContext();
@@ -61,8 +63,7 @@ export function ChatForm({
     e.preventDefault();
     setIsLoading(true);
 
-    // const userMessage: Message = { sender: "user", text: inputValue };
-    // updateChatHistory([userMessage]);
+    const userMessage: ChatMessage = { sender: "user", text: inputValue };
 
     let userQuestion = inputValue;
     if (!userQuestion && exampleData) {
@@ -82,17 +83,18 @@ export function ChatForm({
     });
 
     if (result.error) {
-      const errorMessage: Message = {
-        sender: "ai",
+      const errorMessage: ChatMessage = {
+        sender: "error",
         text: `エラー: ${result.error}`,
-        isError: true,
       };
-      // updateChatHistory([userMessage, errorMessage]);
+      console.log(result.error);
+      // TODO: ユーザーに表示
     } else {
-      const aiMessage: Message = { sender: "ai", text: result.response };
-      console.log(aiMessage);
-      // updateChatHistory([userMessage, aiMessage]);
+      const aiMessage: ChatMessage = { sender: "ai", text: result.response };
+      const chatId = addChat(result.targetSectionId, [userMessage, aiMessage]);
+      // TODO: chatIdが指す対象の回答にフォーカス
       setInputValue("");
+      close();
     }
 
     setIsLoading(false);
diff --git a/app/[docs_id]/chatHistory.tsx b/app/[docs_id]/chatHistory.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  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;
+}
+const ChatHistoryContext = createContext<IChatHistoryContext | null>(null);
+export function useChatHistoryContext() {
+  const context = useContext(ChatHistoryContext);
+  if (!context) {
+    throw new Error(
+      "useChatHistoryContext must be used within a ChatHistoryProvider"
+    );
+  }
+  return context;
+}
+
+export function ChatHistoryProvider({ children }: { children: ReactNode }) {
+  const [chatHistories, setChatHistories] = useState<
+    Record<string, Record<string, ChatMessage[]>>
+  >({});
+  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);
+  }, []);
+
+  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])
+      );
+    }
+  };
+
+  return (
+    <ChatHistoryContext.Provider value={{ chatHistories, addChat, updateChat }}>
+      {children}
+    </ChatHistoryContext.Provider>
+  );
+}
diff --git a/app/[docs_id]/chatServer.ts b/app/[docs_id]/chatServer.ts
diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx
@@ -5,6 +5,7 @@ import { join } from "node:path";
 import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
 import pyodideLock from "pyodide/pyodide-lock.json";
 import { PageContent } from "./pageContent";
+import { ChatHistoryProvider } from "./chatHistory";
 
 export default async function Page({
   params,
@@ -44,10 +45,12 @@ export default async function Page({
   const splitMdContent: MarkdownSection[] = splitMarkdown(mdContent);
 
   return (
-    <PageContent
-      documentContent={mdContent}
-      splitMdContent={splitMdContent}
-      docs_id={docs_id}
-    />
+    <ChatHistoryProvider>
+      <PageContent
+        documentContent={mdContent}
+        splitMdContent={splitMdContent}
+        docs_id={docs_id}
+      />
+    </ChatHistoryProvider>
   );
 }
diff --git a/app/[docs_id]/pageContent.tsx b/app/[docs_id]/pageContent.tsx
@@ -4,6 +4,8 @@ import { ReactNode, useEffect, useRef, useState } from "react";
 import { MarkdownSection } from "./splitMarkdown";
 import { ChatForm } from "./chatForm";
 import { Heading, StyledMarkdown } from "./markdown";
+import { ChatHistoryProvider, useChatHistoryContext } from "./chatHistory";
+import clsx from "clsx";
 
 // MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる
 export type DynamicMarkdownSection = MarkdownSection & {
@@ -67,6 +69,8 @@ export function PageContent(props: PageContentProps) {
 
   const [isFormVisible, setIsFormVisible] = useState(false);
 
+  const { chatHistories } = useChatHistoryContext();
+
   return (
     <div
       className="p-4 mx-auto grid"
@@ -78,7 +82,7 @@ export function PageContent(props: PageContentProps) {
         <>
           <div
             className="max-w-200"
-            key={index}
+            key={`${index}-content`}
             id={`${index}`} // 目次からaタグで飛ぶために必要
             ref={(el) => {
               sectionRefs.current[index] = el;
@@ -88,7 +92,40 @@ export function PageContent(props: PageContentProps) {
             <Heading level={section.level}>{section.title}</Heading>
             <StyledMarkdown content={section.content} />
           </div>
-          <div>{/* 右側に表示するチャット履歴欄 */}</div>
+          <div key={`${index}-chat`}>
+            {/* 右側に表示するチャット履歴欄 */}
+            {Object.entries(chatHistories[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"
+                >
+                  <div className="max-h-60 overflow-y-auto">
+                    {messages.map((msg, index) => (
+                      <div
+                        key={index}
+                        className={`chat ${msg.sender === "user" ? "chat-end" : "chat-start"}`}
+                      >
+                        <div
+                          className={clsx(
+                            "chat-bubble p-1!",
+                            msg.sender === "user" &&
+                              "bg-primary text-primary-content",
+                            msg.sender === "ai" &&
+                              "bg-secondary-content dark:bg-neutral text-black dark:text-white",
+                            msg.sender === "error" && "chat-bubble-error"
+                          )}
+                          style={{ maxWidth: "100%", wordBreak: "break-word" }}
+                        >
+                          <StyledMarkdown content={msg.text} />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )
+            )}
+          </div>
         </>
       ))}
       {isFormVisible ? (
diff --git a/app/actions/chatActions.ts b/app/actions/chatActions.ts
@@ -8,6 +8,7 @@ import { ReplCommand, ReplOutput } from "../terminal/repl";
 interface FormState {
   response: string;
   error: string | null;
+  targetSectionId: string;
 }
 
 type ChatParams = {
@@ -140,15 +141,25 @@ export async function askAI(params: ChatParams): Promise<FormState> {
     if (!text) {
       throw new Error("AIからの応答が空でした");
     }
-    return { response: text, error: null };
+    return {
+      response: text,
+      error: null,
+      // TODO: どのセクションへの回答にするかをAIに決めさせる
+      targetSectionId: sectionContent.find((s) => s.inView)?.sectionId || "",
+    };
   } 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: "予期せぬエラーが発生しました。" };
+    return {
+      response: "",
+      error: "予期せぬエラーが発生しました。",
+      targetSectionId: sectionContent.find((s) => s.inView)?.sectionId || "",
+    };
   }
 }
diff --git a/app/hooks/useChathistory.ts b/app/hooks/useChathistory.ts
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
@@ -42,9 +42,9 @@ export function Sidebar() {
             <path
               d="M18 17L13 12L18 7M11 17L6 12L11 7"
               stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             />
           </svg>
           <span className="text-lg">Close</span>
