Add AiAssistantTree.module.scss

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

@@ -1,47 +1,5 @@
-@use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 .grw-ai-assistant-substance :global {
   .grw-ai-assistant-substance-header {
     font-size: 14px;
   }
-
-  .grw-ai-assistant-item-container {
-    .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;
-
-        .btn-link {
-          &:hover {
-            color: var(--bs-gray-800) !important;
-          }
-        }
-      }
-
-      &:hover {
-        .grw-ai-assistant-actions {
-          opacity: 1 !important;
-        }
-      }
-    }
-  }
 }

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

@@ -0,0 +1,45 @@
+// == Colors
+.ai-assistant-tree-item :global {
+  .grw-ai-assistant-actions {
+    .btn-link {
+      &:hover {
+        color: var(--bs-gray-800) !important;
+      }
+    }
+  }
+}
+
+
+.ai-assistant-tree-item :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/AiAssistantTree.tsx

@@ -9,6 +9,9 @@ import type { AiAssistantAccessScope } from '../../../../interfaces/ai-assistant
 import { AiAssistantShareScope, type AiAssistantHasId } from '../../../../interfaces/ai-assistant';
 import { deleteAiAssistant } from '../../../services/ai-assistant';
 
+import styles from './AiAssistantTree.module.scss';
+
+const moduleClass = styles['ai-assistant-tree-item'] ?? '';
 
 type Thread = {
   _id: string;
@@ -114,7 +117,7 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
   const isOperable = currentUserId != null && getIdStringForRef(aiAssistant.owner) === currentUserId;
 
   return (
-    <div className="grw-ai-assistant-item-container">
+    <>
       <li
         onClick={openChatHandler}
         role="button"
@@ -169,7 +172,7 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
           ))}
         </div>
       )}
-    </div>
+    </>
   );
 };
 
@@ -181,7 +184,7 @@ type AiAssistantTreeProps = {
 export const AiAssistantTree: React.FC<AiAssistantTreeProps> = ({ aiAssistants, onDeleted }) => {
   const { data: currentUser } = useCurrentUser();
   return (
-    <ul className="list-group">
+    <ul className={`list-group ${moduleClass}`}>
       {aiAssistants.map(assistant => (
         <AiAssistantItem
           key={assistant._id}