チャットサイドバーの表示を改善

Author: na-trium-144

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

@@ -1,5 +1,6 @@
 import { ChatAreaStateUpdater } from "@/(docs)/chatAreaState";
 import { getChatOne, initContext } from "@/lib/chatHistory";
+import { getMarkdownSections, getPagesList } from "@/lib/docs";
 import { StyledMarkdown } from "@/markdown/markdown";
 import clsx from "clsx";
 import Link from "next/link";
@@ -14,38 +15,72 @@ export default async function ChatPage({
   const ctx = await initContext();
   const chatData = await getChatOne(chatId, ctx);
 
+  const pagesList = await getPagesList();
+  const targetLang = pagesList.find(
+    (lang) => lang.id === chatData.section.pagePath.split("/")[0]
+  );
+  const targetPage = targetLang?.pages.find(
+    (page) => page.slug === chatData.section.pagePath.split("/")[1]
+  );
+  const sections = await getMarkdownSections(targetLang!.id, targetPage!.slug);
+  const targetSection = sections.find((sec) => sec.id === chatData.sectionId);
+
   return (
     <aside
       className={clsx(
         // モバイルでは全画面表示する
-        "fixed inset-0 pt-16 bg-base-100",
+        "fixed inset-0 pt-20 bg-base-100",
         // PCではスクロールで動かない右サイドバー
-        "lg:sticky lg:top-0 lg:pt-0 lg:w-1/3 lg:h-screen lg:shadow-md lg:bg-base-200 ",
+        "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 gap-2",
         "overflow-y-auto"
       )}
     >
       <ChatAreaStateUpdater chatId={chatId} />
       {chatId}
+      <div className="flex-none breadcrumbs text-sm">
+        <ul className="flex-wrap">
+          <li>
+            <Link href={`/${targetLang?.id}/${targetLang?.pages[0].slug}`}>
+              {targetLang?.name}
+            </Link>
+          </li>
+          <li>
+            <Link href={`/${chatData.section.pagePath}`}>
+              {targetPage?.index}. {targetPage?.name}
+            </Link>
+          </li>
+          <li>
+            <Link href={`/${chatData.section.pagePath}#${chatData.sectionId}`}>
+              {targetSection?.title}
+            </Link>
+          </li>
+        </ul>
+      </div>
       <Link className="btn" href="/chat">
         閉じる
       </Link>
-      {chatData?.messages.map((msg, index) => (
-        <div
-          key={index}
-          className={`chat ${msg.role === "user" ? "chat-end" : "chat-start"}`}
-        >
-          <div
-            className={clsx(
-              msg.role === "user" && "chat-bubble p-0.5! bg-secondary/30",
-              msg.role === "ai" && "chat-bubble p-0.5!",
-              msg.role === "error" && "text-error"
-            )}
-            style={{ maxWidth: "100%", wordBreak: "break-word" }}
-          >
+      {chatData?.messages.map((msg, index) =>
+        msg.role === "user" ? (
+          <div key={index} className="chat chat-end">
+            <div
+              className="chat-bubble p-0.5! bg-secondary/30"
+              style={{ maxWidth: "100%", wordBreak: "break-word" }}
+            >
+              <StyledMarkdown content={msg.content} />
+            </div>
+          </div>
+        ) : msg.role === "ai" ? (
+          <div key={index} className="">
             <StyledMarkdown content={msg.content} />
           </div>
-        </div>
-      ))}
+        ) : (
+          <div key={index} className="text-error">
+            {msg.content}
+          </div>
+        )
+      )}
     </aside>
   );
 }

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

@@ -259,7 +259,11 @@ function ChatListForSection(props: {
         <li className="menu-title">チャット</li>
         {filteredChatHistories.map(({ chatId }) => (
           <li key={chatId} className="">
-            <Link className="link link-info" href={`/chat/${chatId}`}>
+            <Link
+              className="link link-info"
+              href={`/chat/${chatId}`}
+              scroll={false}
+            >
               {chatId}
             </Link>
           </li>
@@ -306,7 +310,11 @@ function ChatListForSection(props: {
         >
           {filteredChatHistories.map(({ chatId }) => (
             <li key={chatId} className="">
-              <Link className="link link-info" href={`/chat/${chatId}`}>
+              <Link
+                className="link link-info"
+                href={`/chat/${chatId}`}
+                scroll={false}
+              >
                 {chatId}
               </Link>
             </li>

app/markdown/multiHighlight.tsx

@@ -4,6 +4,8 @@ import type { Root, PhrasingContent } from "mdast";
 import { JSX } from "react";
 import { ExtraProps } from "react-markdown";
 import clsx from "clsx";
+import { useChatId } from "@/(docs)/chatAreaState";
+import Link from "next/link";
 
 export interface ReplacedRange {
   start: number;
@@ -97,17 +99,28 @@ export const remarkMultiHighlight: Plugin<[ReplacedRange[]], Root> = (
 export function MultiHighlightTag({
   node,
   className,
+  children,
   ...props
 }: JSX.IntrinsicElements["ins"] & ExtraProps) {
+  const currentChatId = useChatId(); // 現在開いているチャットid
+  const thisChatIds = className ? className.split(" ") : [];
   return (
     <ins
       className={clsx(
         // classNameにチャットidが入っている。
         // 選択しているチャットに対応するdiffのみ濃いハイライトにするなど (TODO)
         className,
-        "underline decoration-dashed underline-offset-[0.2rem] decoration-secondary/50"
+        "underline decoration-dashed underline-offset-[0.2rem] decoration-secondary/50",
+        currentChatId && thisChatIds.includes(currentChatId)
+          ? "bg-secondary/10"
+          : "",
+        "cursor-pointer hover:decoration-solid hover:decoration-secondary/80"
       )}
       {...props}
-    />
+    >
+      <Link href={`/chat/${thisChatIds.at(-1)}`} scroll={false}>
+        {children}
+      </Link>
+    </ins>
   );
 }