فهرست منبع

add actions buttons

Shun Miyazawa 1 سال پیش
والد
کامیت
8f28b5ff36

+ 18 - 4
apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantSubstance.module.scss

@@ -6,6 +6,7 @@
 
 
   .grw-ai-assistant-item-container {
   .grw-ai-assistant-item-container {
     .list-group-item {
     .list-group-item {
+      height: 40px;
       padding-left: 4px;
       padding-left: 4px;
 
 
       .grw-ai-assistant-triangle-btn {
       .grw-ai-assistant-triangle-btn {
@@ -18,15 +19,28 @@
         }
         }
       }
       }
 
 
-      .grw-triangle-container {
-        height: 30px;
-      }
-
       .grw-ai-assistant-title-anchor {
       .grw-ai-assistant-title-anchor {
         width: 100%;
         width: 100%;
         overflow: hidden;
         overflow: hidden;
         font-size: 14px;
         font-size: 14px;
       }
       }
+
+
+      .grw-ai-assistant-actions {
+        transition: opacity 0.2s ease-out;
+
+        .btn-link {
+          &:hover {
+            color: var(--bs-primary) !important;
+          }
+        }
+      }
+
+      &:hover {
+        .grw-ai-assistant-actions {
+          opacity: 1 !important;
+        }
+      }
     }
     }
   }
   }
 }
 }

+ 16 - 1
apps/app/src/features/openai/client/components/AiAssistant/Sidebar/AiAssistantTree.tsx

@@ -64,7 +64,7 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
         onClick={clickItemHandler}
         onClick={clickItemHandler}
         role="button"
         role="button"
       >
       >
-        <div className="grw-triangle-container d-flex justify-content-center">
+        <div className="d-flex justify-content-center">
           <button
           <button
             type="button"
             type="button"
             className={`grw-ai-assistant-triangle-btn btn px-0 ${isExpanded ? 'grw-ai-assistant-open' : ''}`}
             className={`grw-ai-assistant-triangle-btn btn px-0 ${isExpanded ? 'grw-ai-assistant-open' : ''}`}
@@ -80,6 +80,21 @@ const AiAssistantItem: React.FC<AiAssistantItemProps> = ({
         <div className="grw-ai-assistant-title-anchor ps-1">
         <div className="grw-ai-assistant-title-anchor ps-1">
           <p className="text-truncate m-auto">{name}</p>
           <p className="text-truncate m-auto">{name}</p>
         </div>
         </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 ms-2"
+          >
+            <span className="material-symbols-outlined fs-5">edit</span>
+          </button>
+          <button
+            type="button"
+            className="btn btn-link text-secondary p-0"
+          >
+            <span className="material-symbols-outlined fs-5">delete</span>
+          </button>
+        </div>
       </li>
       </li>
 
 
       {isExpanded && threads.length > 0 && (
       {isExpanded && threads.length > 0 && (