UX: AI post helper DMenu styling (#770)

assets/javascripts/discourse/components/ai-helper-options-list.gjs

@@ -20,7 +20,7 @@ const AiHelperOptionsList = <template>
             @action={{fn @performAction option}}
             data-name={{option.name}}
             data-value={{option.id}}
-            class="btn-flat ai-helper-options__button"
+            class="ai-helper-options__button"
           />
         </li>
       {{/if}}

assets/javascripts/discourse/components/ai-post-helper-menu.gjs

@@ -13,7 +13,6 @@ import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { sanitize } from "discourse/lib/text";
 import { clipboardCopy } from "discourse/lib/utilities";
-import i18n from "discourse-common/helpers/i18n";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import eq from "truth-helpers/helpers/eq";
@@ -285,10 +284,7 @@ export default class AiPostHelperMenu extends Component {
       (and this.site.mobileView (eq this.menuState this.MENU_STATES.options))
     }}
       <div class="ai-post-helper-menu__selected-text">
-        <h2>
+        {{@data.selectedText}}
-          {{i18n "discourse_ai.ai_helper.post_options_menu.selected_text"}}
-        </h2>
-        <p>{{@data.selectedText}}</p>
       </div>
     {{/if}}
 

assets/stylesheets/modules/ai-helper/common/ai-helper.scss

@@ -78,7 +78,7 @@
 .ai-custom-prompt {
   display: flex;
   gap: 0.25rem;
-  margin-bottom: 0.5rem;
+  padding: 0.75em 1rem;
 
   &__input[type="text"] {
     border-color: var(--primary-400);
@@ -308,10 +308,19 @@
 
 .ai-post-helper {
   &__suggestion {
-    padding: 0.5rem;
     display: flex;
     flex-direction: column;
 
+    h2 {
+      font-size: var(--font-0);
+      border-bottom: 1px solid var(--primary-low);
+      padding-bottom: 0.5em;
+    }
+
+    p {
+      margin: 0;
+    }
+
     &__copy {
       .d-icon-check {
         color: var(--success);
@@ -325,18 +334,17 @@
     &__buttons {
       display: flex;
       align-items: center;
-      justify-content: stretch;
-      margin-top: 0.5rem;
       gap: 0.5rem;
       .btn {
-        width: 100%;
+        flex-grow: 1;
+        padding-inline: 0;
       }
     }
   }
 
   &__fast-edit {
     .fast-edit-container {
-      padding-top: 0.5em;
+      padding: 0.75em 1rem;
     }
   }
 }
@@ -556,43 +564,10 @@
   color: var(--primary-high);
 }
 
-.ai-post-helper-menu__selected-text {
-  padding: 0.75rem 1rem;
-  margin: 0.5rem;
-  border: 1px solid var(--primary-low-mid);
-  border-radius: var(--d-border-radius);
-
-  h2 {
-    font-size: var(--font-0);
-  }
-
-  p {
-    @include ellipsis;
-    font-size: var(--font-down-2);
-    margin: 0;
-  }
-}
-
-// Mobile Bottom Modal
-.ai-post-helper-menu-content {
-  .ai-helper-loading {
-    justify-content: center;
-  }
-
-  .ai-helper-options__button {
-    padding: 1rem;
-  }
-}
-
 // AI Helper Options List
 .ai-helper-options {
   margin: 0;
   list-style: none;
-  padding: 0.5rem;
-
-  li:not(:last-child) {
-    border-bottom: 1px solid var(--primary-low);
-  }
 
   &__button {
     justify-content: left;
@@ -601,19 +576,24 @@
     width: 100%;
     border-radius: 0;
     margin: 0;
-    padding-block: 0.6rem;
+    padding: 0.5em 1rem;
-
-    .d-button-label {
-      color: var(--primary-very-high);
-    }
 
     &:focus,
     &:hover {
       color: var(--primary);
       background: var(--d-hover);
 
+      .discourse-no-touch & {
+        color: var(--primary);
+        background: var(--d-hover);
+      }
+
       .d-icon {
-        color: var(--primary-medium);
+        color: var(--primary-high);
+
+        .discourse-no-touch & {
+          color: var(--primary-high);
+        }
       }
     }
   }

assets/stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss

@@ -0,0 +1,9 @@
+.fk-d-menu {
+  .ai-post-helper {
+    &__suggestion__text,
+    &__suggestion__buttons {
+      padding: 0.75em 1rem;
+      margin: 0;
+    }
+  }
+}

assets/stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss

@@ -0,0 +1,43 @@
+.fk-d-menu-modal {
+  &.ai-post-helper-menu-content {
+    .ai-post-helper {
+      &__suggestion__text,
+      &__suggestion__buttons {
+        padding: 0.75em 1rem;
+        margin: 0;
+      }
+    }
+
+    .d-modal__body {
+      display: flex;
+      flex-direction: column;
+      max-height: 100%;
+      overflow: hidden;
+    }
+
+    .ai-post-helper-menu {
+      &__selected-text {
+        margin: 0.75em 1rem;
+        padding: 0.5em;
+        border-radius: var(--d-border-radius);
+        border: 1px solid var(--primary-low);
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
+        overflow: auto;
+        overscroll-behavior: contain;
+      }
+    }
+
+    .ai-helper-options {
+      padding: 0;
+    }
+
+    .ai-custom-prompt {
+      padding: 0.75em 1rem;
+      margin: 0;
+    }
+
+    .ai-helper-loading {
+      justify-content: center;
+    }
+  }
+}

config/locales/client.en.yml

@@ -318,7 +318,6 @@ en:
           cancel: "Cancel"
           insert_footnote: "Add footnote"
           footnote_credits: "Explanation by AI"
-          selected_text: "Selected Text"
         fast_edit:
           suggest_button: "Suggest Edit"
         thumbnail_suggestions:

plugin.rb

@@ -16,7 +16,9 @@ enabled_site_setting :discourse_ai_enabled
 register_asset "stylesheets/common/streaming.scss"
 
 register_asset "stylesheets/modules/ai-helper/common/ai-helper.scss"
+register_asset "stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss", :desktop
 register_asset "stylesheets/modules/ai-helper/mobile/ai-helper.scss", :mobile
+register_asset "stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss", :mobile
 
 register_asset "stylesheets/modules/summarization/mobile/ai-summary.scss", :mobile
 register_asset "stylesheets/modules/summarization/common/ai-summary.scss"