chatHistoryをcontextで管理するのをやめる & 削除時のcacheクリア

Author: na-trium-144

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

@@ -1,14 +1,13 @@
 "use client";
 
-import { useChatHistoryContext } from "@/(docs)/@docs/[lang]/[pageId]/chatHistory";
-import { ChatAreaStateUpdater } from "@/(docs)/chatAreaState";
 import { deleteChatAction } from "@/actions/deleteChat";
 import { ChatWithMessages } from "@/lib/chatHistory";
 import { LanguageEntry, MarkdownSection, PageEntry } from "@/lib/docs";
 import { Heading } from "@/markdown/heading";
 import { StyledMarkdown } from "@/markdown/markdown";
 import clsx from "clsx";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 interface Props {
   chatId: string;
@@ -28,45 +27,10 @@ export function ChatAreaContent(props: Props) {
     (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
   );
 
-  // useChatHistoryContext must be used within a ChatHistoryProvider
-  // const { deleteChat } = useChatHistoryContext();
-
+  const router = useRouter();
 
   return (
-    <aside
-      className={clsx(
-        // モバイルでは全画面表示する
-        "fixed inset-0 pt-20 bg-base-100",
-        // PCではスクロールで動かない右サイドバー
-        "lg:sticky lg:top-0 lg:pt-4 lg:w-1/3 lg:h-screen lg:shadow-md lg:bg-base-200 ",
-        "p-4",
-        "flex flex-col",
-        "overflow-y-auto"
-      )}
-    >
-      <ChatAreaStateUpdater chatId={chatId} />
-      <div className="flex flex-row items-center">
-        <span className="flex-1 text-base font-bold opacity-40">
-          AIへの質問
-        </span>
-        <Link className="btn btn-ghost" href="/chat" scroll={false}>
-          <svg
-            className="w-8 h-8 -scale-x-100"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M18 17L13 12L18 7M11 17L6 12L11 7"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-          <span className="text-lg">閉じる</span>
-        </Link>
-      </div>
+    <>
       <Heading level={2} className="mt-2!">
         {chatData.title}
       </Heading>
@@ -98,7 +62,8 @@ export function ChatAreaContent(props: Props) {
           onClick={async () => {
             if (confirm("このチャットを削除してもよろしいですか?")) {
               await deleteChatAction(chatId);
-              // deleteChat(chatId);
+              router.push("/chat", { scroll: false });
+              router.refresh();
             }
           }}
         >
@@ -191,6 +156,6 @@ export function ChatAreaContent(props: Props) {
           </div>
         )
       )}
-    </aside>
+    </>
   );
 }

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

@@ -1,7 +1,10 @@
 import { getChatOne, initContext } from "@/lib/chatHistory";
 import { getMarkdownSections, getPagesList } from "@/lib/docs";
 import { ChatAreaContent } from "./chatArea";
-import { notFound } from "next/navigation";
+import { ChatAreaStateUpdater } from "@/(docs)/chatAreaState";
+import { ReactNode } from "react";
+import clsx from "clsx";
+import Link from "next/link";
 
 export default async function ChatPage({
   params,
@@ -14,7 +17,12 @@ export default async function ChatPage({
   const chatData = await getChatOne(chatId, ctx);
 
   if (!chatData) {
-    notFound();
+    // notFound(); だとページ全体が404になってしまう
+    return (
+      <ChatAreaContainer chatId={chatId}>
+        <p>指定されたチャットのデータが見つかりません。</p>
+      </ChatAreaContainer>
+    );
   }
 
   const pagesList = await getPagesList();
@@ -28,12 +36,55 @@ export default async function ChatPage({
   const targetSection = sections.find((sec) => sec.id === chatData.sectionId);
 
   return (
-    <ChatAreaContent
-      chatId={chatId}
-      chatData={chatData}
-      targetLang={targetLang}
-      targetPage={targetPage}
-      targetSection={targetSection}
-    />
+    <ChatAreaContainer chatId={chatId}>
+      <ChatAreaContent
+        chatId={chatId}
+        chatData={chatData}
+        targetLang={targetLang}
+        targetPage={targetPage}
+        targetSection={targetSection}
+      />
+    </ChatAreaContainer>
+  );
+}
+
+function ChatAreaContainer(props: { chatId: string; children: ReactNode }) {
+  return (
+    <aside
+      className={clsx(
+        // モバイルでは全画面表示する
+        "fixed inset-0 pt-20 bg-base-100",
+        // PCではスクロールで動かない右サイドバー
+        "lg:sticky lg:top-0 lg:pt-4 lg:w-1/3 lg:h-screen lg:shadow-md lg:bg-base-200 ",
+        "p-4",
+        "flex flex-col",
+        "overflow-y-auto"
+      )}
+    >
+      <ChatAreaStateUpdater chatId={props.chatId} />
+      <div className="flex flex-row items-center">
+        <span className="flex-1 text-base font-bold opacity-40">
+          AIへの質問
+        </span>
+        <Link className="btn btn-ghost" href="/chat" scroll={false}>
+          <svg
+            className="w-8 h-8 -scale-x-100"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M18 17L13 12L18 7M11 17L6 12L11 7"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span className="text-lg">閉じる</span>
+        </Link>
+      </div>
+      {props.children}
+    </aside>
   );
 }

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

@@ -9,7 +9,6 @@ import { useState, FormEvent, useEffect } from "react";
 // import { getLanguageName } from "../pagesList";
 import { DynamicMarkdownSection } from "./pageContent";
 import { useEmbedContext } from "@/terminal/embedContext";
-import { useChatHistoryContext } from "./chatHistory";
 import { askAI } from "@/actions/chatActions";
 import { PagePath } from "@/lib/docs";
 import { useRouter } from "next/navigation";
@@ -26,8 +25,6 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const { addChat } = useChatHistoryContext();
-
   // const lang = getLanguageName(docs_id);
 
   const { files, replOutputs, execResults } = useEmbedContext();
@@ -90,11 +87,11 @@ export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
       setErrorMessage(result.error);
       console.log(result.error);
     } else {
-      addChat(result.chat);
       document.getElementById(result.chat.sectionId)?.scrollIntoView({
         behavior: "smooth",
       });
       router.push(`/chat/${result.chat.chatId}`, { scroll: false });
+      router.refresh();
       setInputValue("");
       close();
     }

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

@@ -1,12 +1,10 @@
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { PageContent } from "./pageContent";
-import { ChatHistoryProvider } from "./chatHistory";
 import {
   cacheKeyForPage,
   ChatWithMessages,
   getAllChat,
-  getChatFromCache,
   initContext,
 } from "@/lib/chatHistory";
 import {
@@ -60,22 +58,18 @@ export default async function Page({
   const sections = await getMarkdownSections(lang, pageId);
 
   const context = await initContext();
-  const initialChatHistories = await getChatFromCache(path, context.userId);
+  const chatHistories = await getChatFromCache(path, context.userId);
 
   return (
-    <ChatHistoryProvider
-      initialChatHistories={initialChatHistories}
+    <PageContent
+      chatHistories={chatHistories}
+      splitMdContent={sections}
+      langEntry={langEntry}
+      pageEntry={pageEntry}
+      prevPage={prevPage}
+      nextPage={nextPage}
       path={path}
-    >
-      <PageContent
-        splitMdContent={sections}
-        langEntry={langEntry}
-        pageEntry={pageEntry}
-        prevPage={prevPage}
-        nextPage={nextPage}
-        path={path}
-      />
-    </ChatHistoryProvider>
+    />
   );
 }
 

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

@@ -18,6 +18,7 @@ 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に追加で、動的な情報を持たせる
@@ -41,12 +42,11 @@ interface PageContentProps {
   prevPage?: PageEntry;
   nextPage?: PageEntry;
   path: PagePath;
+  chatHistories: ChatWithMessages[];
 }
 export function PageContent(props: PageContentProps) {
   const { setSidebarMdContent } = useSidebarMdContext();
-  const { splitMdContent, pageEntry, path } = props;
-
-  const { chatHistories } = useChatHistoryContext();
+  const { splitMdContent, pageEntry, path, chatHistories } = props;
 
   const initDynamicMdContent = useCallback(() => {
     const newContent: DynamicMarkdownSection[] = splitMdContent.map(
@@ -192,6 +192,7 @@ export function PageContent(props: PageContentProps) {
               <ChatListForSection
                 sectionId={section.id}
                 dynamicMdContent={dynamicMdContent}
+                chatHistories={chatHistories}
               />
             </div>
           </Fragment>
@@ -227,9 +228,9 @@ export function PageContent(props: PageContentProps) {
 function ChatListForSection(props: {
   dynamicMdContent: DynamicMarkdownSection[];
   sectionId: SectionId;
+  chatHistories: ChatWithMessages[];
 }) {
-  const { chatHistories } = useChatHistoryContext();
-  const { dynamicMdContent, sectionId } = props;
+  const { dynamicMdContent, sectionId, chatHistories } = props;
   const filteredChatHistories = chatHistories.filter(
     (c) =>
       c.sectionId === sectionId ||

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

@@ -1,21 +1,8 @@
 "use server";
 
-import { initContext } from "@/lib/chatHistory";
-import { chat, diff, message } from "@/schema/chat";
-import { and, eq } from "drizzle-orm";
+import { deleteChat, initContext } from "@/lib/chatHistory";
 
 export async function deleteChatAction(chatId: string) {
   const ctx = await initContext();
-  if (!ctx.userId) {
-    throw new Error("Not authenticated");
-  }
-  const deletedUser = await ctx.drizzle
-    .delete(chat)
-    .where(and(eq(chat.chatId, chatId), eq(chat.userId, ctx.userId)))
-    .returning();
-  if (deletedUser.length === 0) {
-    throw new Error("Chat not found or not authorized");
-  }
-  await ctx.drizzle.delete(message).where(eq(message.chatId, chatId));
-  await ctx.drizzle.delete(diff).where(eq(diff.chatId, chatId));
+  await deleteChat(chatId, ctx);
 }