Merge pull request #1530 from mito-ds/polish-edit-button

Move edit buttons to hover
mito-ds · Feb 17, 2025 · 077e0c7 · 077e0c7
2 parents a84a9e0 + 1a30d79
commit 077e0c7
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/mito-ai/src/Extensions/AiChat/ChatMessage/ChatMessage.tsx b/mito-ai/src/Extensions/AiChat/ChatMessage/ChatMessage.tsx
@@ -178,7 +178,7 @@ const ChatMessage: React.FC<IChatMessageProps> = ({
                     }
                 } else {
                     return (
-                        <div className={classNames('markdown-message-part')} style={{ position: 'relative' }}>
+                        <div className={classNames('markdown-message-part')}>
                             <p 
                                 key={index + messagePart} 
                                 onDoubleClick={() => {
@@ -200,22 +200,19 @@ const ChatMessage: React.FC<IChatMessageProps> = ({
                                     />
                                 )}
                             </p>
-                            {editable && (
-                                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '4px' }}>
-                                    <button
-                                        className="message-edit-button"
-                                        onClick={handleEditClick}
-                                        style={{ cursor: 'pointer' }}
-                                        title="Edit message"
-                                    >
-                                        <PencilIcon />
-                                    </button>
-                                </div>
-                            )}
                         </div>
                     )
                 }
             })}
+            {editable && (
+                <button
+                    className="message-start-editing-button"
+                    onClick={handleEditClick}
+                    title="Edit message"
+                >
+                    <PencilIcon />
+                </button>
+            )}
         </div>
     )
 }

diff --git a/mito-ai/style/ChatTaskpane.css b/mito-ai/style/ChatTaskpane.css
@@ -48,6 +48,7 @@
 }
 
 .message {
+    position: relative;
     height: min-content;
     box-sizing: border-box;
     padding: 10px;
@@ -60,6 +61,10 @@
     margin-bottom: 20px;
 }
 
+.message:hover .message-start-editing-button {
+    opacity: 1 !important;
+}
+
 .message-user {
     background-color: var(--chat-user-message-background-color);
     color: var(--chat-user-message-font-color);
@@ -143,12 +148,26 @@
     align-items: center;
 }
 
-.message-edit-button {
-    background-color: rgba(255, 255, 255, 0);
+.message-start-editing-button {
+    position: absolute !important;
+    bottom: 8px !important;
+    right: 8px !important;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    background-color: var(--jp-layout-color3);
     border: none;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
     color: var(--grey-900) !important;
 }
 
+.message-start-editing-button:hover {
+    background-color: var(--jp-layout-color4);
+}
+
 .message-edit-buttons {
     display: flex;
     gap: 8px;

diff --git a/tests/mitoai_ui_tests/agent.spec.ts b/tests/mitoai_ui_tests/agent.spec.ts
@@ -62,7 +62,7 @@ test.describe("Agent mode integration tests", () => {
 
         // Get the last agent message, and click on it's edit button 
         const lastAgentMessage = await page.locator('.message-assistant-agent').last();
-        await lastAgentMessage.locator('.message-edit-button').click();
+        await lastAgentMessage.locator('.message-start-editing-button').click();
 
         // Make sure the active cell preview is not visible
         await expect(page.locator('.active-cell-preview-container')).not.toBeVisible();

diff --git a/tests/mitoai_ui_tests/mitoai.spec.ts b/tests/mitoai_ui_tests/mitoai.spec.ts
@@ -132,7 +132,7 @@ test.describe('Mito AI Chat', () => {
     expect(messageAssistantDivs).toBe(1);
 
     // Ensure you cannot edit the AI's messages by clicking the pencil icon or double clicking the message
-    await expect(page.locator('.message-assistant-chat .message-edit-button')).not.toBeVisible();
+    await expect(page.locator('.message-assistant-chat .message-start-editing-button')).not.toBeVisible();
     await page.locator('.message-assistant-chat p').last().dblclick();
     await expect(page.locator('.message-assistant-chat').getByRole('button', { name: 'Save' })).not.toBeVisible();
   });