チャット削除を実装

Author: na-trium-144

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

@@ -1,7 +1,9 @@
 "use client";
 
+import { useChatHistoryContext } from "@/(docs)/@docs/[lang]/[pageId]/chatHistory";
 import { ChatAreaStateUpdater } from "@/(docs)/chatAreaState";
-import { getChatOne } from "@/lib/chatHistory";
+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";
@@ -10,7 +12,7 @@ import Link from "next/link";
 
 interface Props {
   chatId: string;
-  chatData: Awaited<ReturnType<typeof getChatOne>>;
+  chatData: ChatWithMessages;
   targetLang: LanguageEntry | undefined;
   targetPage: PageEntry | undefined;
   targetSection: MarkdownSection | undefined;
@@ -26,6 +28,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();
+
+
   return (
     <aside
       className={clsx(
@@ -89,7 +95,12 @@ export function ChatAreaContent(props: Props) {
         </div>
         <button
           className="btn btn-error btn-soft btn-sm"
-          onClick={() => alert("TODO: チャットの削除機能")}
+          onClick={async () => {
+            if (confirm("このチャットを削除してもよろしいですか?")) {
+              await deleteChatAction(chatId);
+              // deleteChat(chatId);
+            }
+          }}
         >
           {/*<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->*/}
           <svg

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

@@ -1,6 +1,7 @@
 import { getChatOne, initContext } from "@/lib/chatHistory";
 import { getMarkdownSections, getPagesList } from "@/lib/docs";
 import { ChatAreaContent } from "./chatArea";
+import { notFound } from "next/navigation";
 
 export default async function ChatPage({
   params,
@@ -12,6 +13,10 @@ export default async function ChatPage({
   const ctx = await initContext();
   const chatData = await getChatOne(chatId, ctx);
 
+  if (!chatData) {
+    notFound();
+  }
+
   const pagesList = await getPagesList();
   const targetLang = pagesList.find(
     (lang) => lang.id === chatData.section.pagePath.split("/")[0]

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

@@ -6,6 +6,7 @@ import { PagePath } from "@/lib/docs";
 import {
   createContext,
   ReactNode,
+  useCallback,
   useContext,
   useEffect,
   useState,
@@ -15,6 +16,7 @@ import useSWR from "swr";
 export interface IChatHistoryContext {
   chatHistories: ChatWithMessages[];
   addChat: (chat: ChatWithMessages) => void;
+  deleteChat: (chatId: string) => void;
   // updateChat: (sectionId: string, chatId: string, message: ChatMessage) => void;
 }
 const ChatHistoryContext = createContext<IChatHistoryContext | null>(null);
@@ -61,12 +63,15 @@ export function ChatHistoryProvider({
   }, [fetchedChatHistories]);
 
   // チャットを更新した際にはクライアントサイドでchatHistoryに反映する
-  const addChat = (chat: ChatWithMessages) => {
+  const addChat = useCallback((chat: ChatWithMessages) => {
     setChatHistories([...chatHistories, chat]);
-  };
+  }, []);
+  const deleteChat = useCallback((chatId: string) => {
+    setChatHistories(chatHistories.filter((chat) => chat.chatId !== chatId));
+  }, []);
 
   return (
-    <ChatHistoryContext.Provider value={{ chatHistories, addChat }}>
+    <ChatHistoryContext.Provider value={{ chatHistories, addChat, deleteChat }}>
       {children}
     </ChatHistoryContext.Provider>
   );

app/actions/deleteChat.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import { initContext } from "@/lib/chatHistory";
+import { chat, diff, message } from "@/schema/chat";
+import { and, eq } from "drizzle-orm";
+
+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));
+}

app/lib/chatHistory.ts

@@ -191,11 +191,7 @@ export async function getChatOne(chatId: string, context: Context) {
         orderBy: [asc(diff.createdAt)],
       },
     },
-  })) as typeof chat.$inferSelect & {
-    section: typeof section.$inferSelect;
-    messages: (typeof message.$inferSelect)[];
-    diff: (typeof diff.$inferSelect)[];
-  };
+  })) as ChatWithMessages | undefined;
 }
 
 export async function migrateChatUser(oldUserId: string, newUserId: string) {