Refactor AiAssistant components: remove unused styles and update class names for consistency

apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantList.module.scss

@@ -1,44 +0,0 @@
-// == Colors
-.ai-assistant-list :global {
-  .grw-ai-assistant-actions {
-    .btn-link {
-      &:hover {
-        color: var(--bs-gray-800) !important;
-      }
-    }
-  }
-}
-
-.ai-assistant-list :global {
-  .list-group-item {
-    height: 40px;
-    padding-left: 4px;
-
-    .grw-ai-assistant-triangle-btn {
-      border: 0;
-      transition: transform 0.2s ease-out;
-      transform: rotate(0deg);
-
-      &.grw-ai-assistant-open {
-        transform: rotate(90deg);
-      }
-    }
-
-    .grw-ai-assistant-title-anchor {
-      width: 100%;
-      overflow: hidden;
-      font-size: 14px;
-    }
-
-
-    .grw-ai-assistant-actions {
-      transition: opacity 0.2s ease-out;
-    }
-
-    &:hover {
-      .grw-ai-assistant-actions {
-        opacity: 1 !important;
-      }
-    }
-  }
-}

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

@@ -19,12 +19,8 @@ import { useAiAssistantSidebar, useAiAssistantManagementModal } from '../../../s
 import { useSWRMUTxThreads, useSWRxThreads } from '../../../stores/thread';
 import { getShareScopeIcon } from '../../../utils/get-share-scope-Icon';
 
-import styles from './AiAssistantList.module.scss';
-
 const logger = loggerFactory('growi:openai:client:components:AiAssistantList');
 
-const moduleClass = styles['ai-assistant-list'] ?? '';
-
 
 /*
 *  ThreadItem
@@ -219,11 +215,11 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
           <span className="material-symbols-outlined fs-5">{getShareScopeIcon(aiAssistant.shareScope, aiAssistant.accessScope)}</span>
         </div>
 
-        <div className="grw-ai-assistant-title-anchor ps-1">
+        <div className="grw-item-title ps-1">
           <p className="text-truncate m-auto">{aiAssistant.name}</p>
         </div>
 
-        <div className="grw-ai-assistant-actions opacity-0 d-flex justify-content-center ">
+        <div className="grw-btn-actions opacity-0 d-flex justify-content-center ">
           {isPublicAiAssistantOperable && (
             <button
               type="button"
@@ -306,7 +302,7 @@ export const AiAssistantList: React.FC<AiAssistantListProps> = ({
   }, [onCollapsed]);
 
   return (
-    <div className={`${moduleClass}`}>
+    <>
       <button
         type="button"
         className="btn btn-link p-0 text-secondary d-flex align-items-center"
@@ -337,6 +333,6 @@ export const AiAssistantList: React.FC<AiAssistantListProps> = ({
           ))}
         </ul>
       </Collapse>
-    </div>
+    </>
   );
 };

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

@@ -1,5 +1,39 @@
+// == Colors
+.grw-ai-assistant-substance :global {
+  .grw-btn-actions {
+    .btn-link {
+      &:hover {
+        color: var(--bs-gray-800) !important;
+      }
+    }
+  }
+}
+
 .grw-ai-assistant-substance :global {
   .grw-ai-assistant-substance-header {
     font-size: 14px;
   }
 }
+
+.grw-ai-assistant-substance :global {
+  .list-group-item {
+    height: 40px;
+    padding-left: 4px;
+
+    .grw-item-title {
+      width: 100%;
+      overflow: hidden;
+      font-size: 14px;
+    }
+
+    .grw-btn-actions {
+      transition: opacity 0.2s ease-out;
+    }
+
+    &:hover {
+      .grw-btn-actions {
+        opacity: 1 !important;
+      }
+    }
+  }
+}

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

@@ -17,7 +17,7 @@ const logger = loggerFactory('growi:openai:client:components:ThreadList');
 export const ThreadList: React.FC = () => {
   const swrInifiniteThreads = useSWRINFxRecentThreads({ suspense: true });
   const { t } = useTranslation();
-  const { data } = swrInifiniteThreads;
+  const { data, mutate } = swrInifiniteThreads;
   console.debug('ThreadList data', data);
   const { openChat } = useAiAssistantSidebar();
 
@@ -34,13 +34,14 @@ export const ThreadList: React.FC = () => {
   const deleteThreadHandler = useCallback(async(aiAssistantId: string, threadRelationId: string) => {
     try {
       await deleteThread({ aiAssistantId, threadRelationId });
-      toastSuccess(t('ai_assistant_tree.toaster.thread_deleted_success'));
+      toastSuccess(t('ai_assistant_list.toaster.thread_deleted_success'));
+      mutate();
     }
     catch (err) {
       logger.error(err);
-      toastError(t('ai_assistant_tree.toaster.thread_deleted_failed'));
+      toastError(t('ai_assistant_list.toaster.thread_deleted_failed'));
     }
-  }, [t]);
+  }, [mutate, t]);
 
   return (
     <>
@@ -61,17 +62,17 @@ export const ThreadList: React.FC = () => {
                   <span className="material-symbols-outlined fs-5">chat</span>
                 </div>
 
-                <div className="grw-ai-assistant-title-anchor ps-1">
+                <div className="grw-item-title ps-1">
                   <p className="text-truncate m-auto">{thread.title ?? 'Untitled thread'}</p>
                 </div>
 
-                <div className="grw-ai-assistant-actions opacity-0 d-flex justify-content-center ">
+                <div className="grw-btn-actions opacity-0 d-flex justify-content-center ">
                   <button
                     type="button"
                     className="btn btn-link text-secondary p-0"
                     onClick={(e) => {
                       e.stopPropagation();
-                      // deleteThreadHandler(getIdStringForRef(thread.aiAssistant), thread._id);
+                      deleteThreadHandler(getIdStringForRef(thread.aiAssistant), thread._id);
                     }}
                   >
                     <span className="material-symbols-outlined fs-5">delete</span>