Refactor AiAssistantContent and ThreadList components: integrate recent threads and remove debug log

apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantSubstance.tsx

@@ -18,8 +18,6 @@ export const AiAssistantContent = (): JSX.Element => {
   const { data: aiAssistants, mutate: mutateAiAssistants } = useSWRxAiAssistants();
   const { data: recentThreads } = useSWRINFxRecentThreads();
 
-  console.log('recentThreads', recentThreads);
-
   return (
     <div className={moduleClass}>
       <button
@@ -61,7 +59,7 @@ export const AiAssistantContent = (): JSX.Element => {
           <h3 className="fw-bold grw-ai-assistant-substance-header">
             最近の項目
           </h3>
-          <ThreadList />
+          <ThreadList threadRelations={recentThreads ?? []} />
         </div>
       </div>
     </div>

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

@@ -1,9 +1,49 @@
 import React from 'react';
 
+import type { IThreadRelationPaginate } from '../../../../interfaces/thread-relation';
+
 type Props = {
-  //
+  threadRelations: IThreadRelationPaginate[];
 }
 
-export const ThreadList: React.FC<Props> = () => {
-  return (<>ThreadList</>);
+export const ThreadList: React.FC<Props> = ({ threadRelations }) => {
+  const dummyData = ['アシスタントの有効な活用方法', 'GROWI AI 機能について'];
+
+  return (
+    <>
+      <ul className="list-group">
+        {dummyData.map(thread => (
+          <li
+            role="button"
+            className="list-group-item list-group-item-action border-0 d-flex align-items-center rounded-1"
+            onClick={(e) => {
+              e.stopPropagation();
+              // openChatHandler();
+            }}
+          >
+            <div>
+              <span className="material-symbols-outlined fs-5">chat</span>
+            </div>
+
+            <div className="grw-ai-assistant-title-anchor ps-1">
+              <p className="text-truncate m-auto">{thread ?? 'Untitled thread'}</p>
+            </div>
+
+            <div className="grw-ai-assistant-actions opacity-0 d-flex justify-content-center ">
+              <button
+                type="button"
+                className="btn btn-link text-secondary p-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  // deleteThreadHandler();
+                }}
+              >
+                <span className="material-symbols-outlined fs-5">delete</span>
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
 };