Add ThreadList component to AiAssistantChatInitialView for displaying recent threads

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantChatInitialView.tsx

@@ -1,5 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
+import { ThreadList } from './ThreadList';
+
 type Props = {
   description: string,
   pagePathPatterns: string[],
@@ -15,20 +17,26 @@ export const AiAssistantChatInitialView: React.FC<Props> = ({ description, pageP
       </p>
 
       <div>
-        <div className="d-flex align-items-center">
+        <div className="mb-3">
           <p className="text-body-secondary mb-0">{t('sidebar_ai_assistant.reference_pages_label')}</p>
+          <div className="d-flex flex-column gap-1">
+            { pagePathPatterns.map(pagePathPattern => (
+              <a
+                key={pagePathPattern}
+                href="#"
+                className="fs-6 text-body-secondary text-decoration-none"
+              >
+                {pagePathPattern}
+              </a>
+            ))}
+          </div>
         </div>
-        <div className="d-flex flex-column gap-1">
-          { pagePathPatterns.map(pagePathPattern => (
-            <a
-              key={pagePathPattern}
-              href="#"
-              className="fs-6 text-body-secondary text-decoration-none"
-            >
-              {pagePathPattern}
-            </a>
-          ))}
+
+        <div className="mt-3">
+          <p className="text-body-secondary mb-0">最近のチャット</p>
+          <ThreadList />
         </div>
+
       </div>
     </>
   );

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/ThreadList.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+
+import type { IThreadRelationHasId } from '~/features/openai/interfaces/thread-relation';
+
+import { useAiAssistantSidebar } from '../../../stores/ai-assistant';
+import { useSWRxThreads } from '../../../stores/thread';
+
+
+export const ThreadList: React.FC = () => {
+  const { openChat, data: aiAssistantSidebarData } = useAiAssistantSidebar();
+  const { data: threads } = useSWRxThreads(aiAssistantSidebarData?.aiAssistantData?._id);
+
+  const openChatHandler = useCallback((threadData: IThreadRelationHasId) => {
+    const aiAssistantData = aiAssistantSidebarData?.aiAssistantData;
+    if (aiAssistantData == null) {
+      return;
+    }
+
+    openChat(aiAssistantData, threadData);
+  }, [aiAssistantSidebarData?.aiAssistantData, openChat]);
+
+  return (
+    <>
+      <ul className="list-group">
+        {threads?.map(thread => (
+          <li
+            onClick={() => { openChatHandler(thread) }}
+            key={thread._id}
+            role="button"
+            className="d-flex align-items-center list-group-item list-group-item-action border-0 rounded-1 bg-body-tertiary mb-2"
+          >
+            <div className="text-body-secondary">
+              <span className="material-symbols-outlined fs-5 me-2">chat</span>
+              <span className="flex-grow-1">{thread.title}</span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};