lib/chatHidtoryからactionとcacheを分離、chatページで実際のチャットを取得

Author: na-trium-144

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

@@ -1,4 +1,5 @@
 import { ChatAreaStateUpdater } from "@/(docs)/chatAreaState";
+import { getChatOne, initContext } from "@/lib/chatHistory";
 import { StyledMarkdown } from "@/markdown/markdown";
 import clsx from "clsx";
 import Link from "next/link";
@@ -10,11 +11,8 @@ export default async function ChatPage({
 }) {
   const { chatId } = await params;
 
-  // TODO: 実際のchatを取得
-  const messages = [
-    { role: "user", content: "a" },
-    { role: "ai", content: "b" },
-  ];
+  const ctx = await initContext();
+  const chatData = await getChatOne(chatId, ctx);
 
   return (
     <aside
@@ -31,7 +29,7 @@ export default async function ChatPage({
       <Link className="btn" href="/chat">
         閉じる
       </Link>
-      {messages.map((msg, index) => (
+      {chatData?.messages.map((msg, index) => (
         <div
           key={index}
           className={`chat ${msg.role === "user" ? "chat-end" : "chat-start"}`}

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { ChatWithMessages, getChat } from "@/lib/chatHistory";
+import { getChatAllWithoutCache } from "@/actions/getChatAll";
+import { ChatWithMessages } from "@/lib/chatHistory";
 import { PagePath } from "@/lib/docs";
 import {
   createContext,
@@ -45,7 +46,7 @@ export function ChatHistoryProvider({
   // その後、クライアント側で最新のchatHistoriesを改めて取得して更新する
   const { data: fetchedChatHistories } = useSWR<ChatWithMessages[]>(
     path,
-    getChat,
+    getChatAllWithoutCache,
     {
       // リクエストは古くても構わないので1回でいい
       revalidateIfStale: false,

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

@@ -2,13 +2,22 @@ import { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
-import { getChatFromCache, initContext } from "@/lib/chatHistory";
+import {
+  cacheKeyForPage,
+  ChatWithMessages,
+  getAllChat,
+  getChatFromCache,
+  initContext,
+} from "@/lib/chatHistory";
 import {
   getMarkdownSections,
   getPagesList,
   LangId,
+  PagePath,
   PageSlug,
 } from "@/lib/docs";
+import { unstable_cacheLife, unstable_cacheTag } from "next/cache";
+import { isCloudflare } from "@/lib/detectCloudflare";
 
 export async function generateMetadata({
   params,
@@ -38,7 +47,8 @@ export default async function Page({
   const { lang, pageId } = await params;
   const pagesList = await getPagesList();
   const langEntry = pagesList.find((l) => l.id === lang);
-  const pageEntryIndex = langEntry?.pages.findIndex((p) => p.slug === pageId) ?? -1;
+  const pageEntryIndex =
+    langEntry?.pages.findIndex((p) => p.slug === pageId) ?? -1;
   const pageEntry = langEntry?.pages[pageEntryIndex];
   if (!langEntry || !pageEntry) notFound();
 
@@ -50,7 +60,7 @@ export default async function Page({
   const sections = await getMarkdownSections(lang, pageId);
 
   const context = await initContext();
-  const initialChatHistories = await getChatFromCache(path, context);
+  const initialChatHistories = await getChatFromCache(path, context.userId);
 
   return (
     <ChatHistoryProvider
@@ -68,3 +78,31 @@ export default async function Page({
     </ChatHistoryProvider>
   );
 }
+
+export async function getChatFromCache(path: PagePath, userId?: string) {
+  // チャットの取得をキャッシュする。
+  // use cacheの仕様で、drizzleオブジェクトとauthオブジェクトは引数に渡せない。
+  // 一方、use cacheの関数内でheaders()にはアクセスできない。
+  // したがって、外でheaders()を使ってuserIdを取得した後、関数の中で再度drizzleを初期化しないといけない。
+  "use cache";
+  unstable_cacheLife("days");
+
+  if (!userId) {
+    return [];
+  }
+  unstable_cacheTag(cacheKeyForPage(path, userId));
+
+  if (isCloudflare()) {
+    const cache = await caches.open("chatHistory");
+    const cachedResponse = await cache.match(cacheKeyForPage(path, userId));
+    if (cachedResponse) {
+      // console.log("Cache hit for chatHistory/getChat");
+      const data = (await cachedResponse.json()) as ChatWithMessages[];
+      return data;
+    } else {
+      // console.log("Cache miss for chatHistory/getChat");
+    }
+  }
+  const ctx = await initContext({ userId });
+  return await getAllChat(path, ctx);
+}

app/actions/chatActions.ts

@@ -4,7 +4,12 @@
 import { generateContent } from "./gemini";
 import { DynamicMarkdownSection } from "../[lang]/[pageId]/pageContent";
 import { ReplCommand, ReplOutput } from "@my-code/runtime/interface";
-import { addChat, ChatWithMessages, CreateChatDiff } from "@/lib/chatHistory";
+import {
+  addChat,
+  ChatWithMessages,
+  CreateChatDiff,
+  initContext,
+} from "@/lib/chatHistory";
 import { getPagesList, introSectionId, PagePath, SectionId } from "@/lib/docs";
 
 type ChatResult =
@@ -235,7 +240,8 @@ export async function askAI(params: ChatParams): Promise<ChatResult> {
         { role: "user", content: userQuestion },
         { role: "ai", content: responseMessage },
       ],
-      diffRaw
+      diffRaw,
+      await initContext()
     );
     return {
       error: null,

app/actions/getChatAll.ts

@@ -0,0 +1,9 @@
+"use server";
+
+import { getAllChat, initContext } from "@/lib/chatHistory";
+import { PagePath } from "@/lib/docs";
+
+export async function getChatAllWithoutCache(path: PagePath) {
+  const ctx = await initContext();
+  return await getAllChat(path, ctx);
+}

app/lib/chatHistory.ts

@@ -1,14 +1,11 @@
-"use server";
-
 import { headers } from "next/headers";
 import { getAuthServer } from "./auth";
 import { getDrizzle } from "./drizzle";
 import { chat, diff, message, section } from "@/schema/chat";
 import { and, asc, eq, exists } from "drizzle-orm";
 import { Auth } from "better-auth";
-import { revalidateTag, unstable_cacheLife } from "next/cache";
+import { revalidateTag } from "next/cache";
 import { isCloudflare } from "./detectCloudflare";
-import { unstable_cacheTag } from "next/cache";
 import { PagePath, SectionId } from "./docs";
 
 export interface CreateChatMessage {
@@ -24,7 +21,7 @@ export interface CreateChatDiff {
 
 // cacheに使うキーで、実際のURLではない
 const CACHE_KEY_BASE = "https://my-code.utcode.net/chatHistory";
-function cacheKeyForPage(path: PagePath, userId: string) {
+export function cacheKeyForPage(path: PagePath, userId: string) {
   return `${CACHE_KEY_BASE}/getChat?path=${path.lang}/${path.page}&userId=${userId}`;
 }
 
@@ -34,6 +31,8 @@ interface Context {
   userId?: string;
 }
 /**
+ * drizzleとbetterAuthをまとめて初期化する関数
+ *
  * drizzleが初期化されてなければ初期化し、
  * authが初期化されてなければ初期化し、
  * userIdがなければセッションから取得してセットする。
@@ -64,9 +63,9 @@ export async function addChat(
   sectionId: SectionId,
   messages: CreateChatMessage[],
   diffRaw: CreateChatDiff[],
-  context?: Partial<Context>
+  context: Context
 ) {
-  const { drizzle, userId } = await initContext(context);
+  const { drizzle, userId } = context;
   if (!userId) {
     throw new Error("Not authenticated");
   }
@@ -121,11 +120,11 @@ export async function addChat(
 
 export type ChatWithMessages = Awaited<ReturnType<typeof addChat>>;
 
-export async function getChat(
+export async function getAllChat(
   path: PagePath,
-  context?: Partial<Context>
+  context: Context
 ): Promise<ChatWithMessages[]> {
-  const { drizzle, userId } = await initContext(context);
+  const { drizzle, userId } = context;
   if (!userId) {
     return [];
   }
@@ -167,32 +166,29 @@ export async function getChat(
   // @ts-expect-error なぜかchatsの型にsectionとmessagesが含まれていないことになっているが、正しくwithを指定しているし、console.logしてみるとちゃんと含まれている
   return chats;
 }
-export async function getChatFromCache(path: PagePath, context: Context) {
-  "use cache";
-  unstable_cacheLife("days");
 
-  // cacheされる関数の中でheader()にはアクセスできない。
-  // なので外でinitContext()を呼んだものを引数に渡す必要がある。
-  // しかし、drizzleオブジェクトは外から渡せないのでgetChatの中で改めてinitContext()を呼んでdrizzleだけ再初期化している
-  // こんな意味不明な仕様になっているのはactionから呼ばれる関数とレンダリング時に呼ばれる関数を1ファイルでまとめて定義し共通化しようとしているせい。あとでなんとかする
-  const { auth, userId } = context;
+export async function getChatOne(chatId: string, context: Context) {
+  const { drizzle, userId } = context;
   if (!userId) {
-    return [];
+    throw new Error("Not authenticated");
   }
-  unstable_cacheTag(cacheKeyForPage(path, userId));
 
-  if (isCloudflare()) {
-    const cache = await caches.open("chatHistory");
-    const cachedResponse = await cache.match(cacheKeyForPage(path, userId));
-    if (cachedResponse) {
-      console.log("Cache hit for chatHistory/getChat");
-      const data = (await cachedResponse.json()) as ChatWithMessages[];
-      return data;
-    } else {
-      console.log("Cache miss for chatHistory/getChat");
-    }
-  }
-  return await getChat(path, { auth, userId });
+  return (await drizzle.query.chat.findFirst({
+    where: and(eq(chat.chatId, chatId), eq(chat.userId, userId)),
+    with: {
+      section: true,
+      messages: {
+        orderBy: [asc(message.createdAt)],
+      },
+      diff: {
+        orderBy: [asc(diff.createdAt)],
+      },
+    },
+  })) as typeof chat.$inferSelect & {
+    section: typeof section.$inferSelect;
+    messages: (typeof message.$inferSelect)[];
+    diff: (typeof diff.$inferSelect)[];
+  };
 }
 
 export async function migrateChatUser(oldUserId: string, newUserId: string) {

app/markdown/codeBlock.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { EditorComponent } from "@/terminal/editor";
 import { ExecFile } from "@/terminal/exec";
 import { ReplTerminal } from "@/terminal/repl";