UX: minor adjustments for image caption size, behavior (#484)

assets/javascripts/discourse/connectors/editor-preview/ai-image-caption-container.gjs

@@ -1,7 +1,9 @@
 import Component from "@glimmer/component";
-import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
+import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { inject as service } from "@ember/service";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import DButton from "discourse/components/d-button";
@@ -27,22 +29,54 @@ export default class AiImageCaptionContainer extends Component {
     const index = this.imageCaptionPopup.imageIndex;
     const matchingPlaceholder =
       this.composer.model.reply.match(IMAGE_MARKDOWN_REGEX);
-    const match = matchingPlaceholder[index];
+
-    const replacement = match.replace(
+    if (matchingPlaceholder) {
-      IMAGE_MARKDOWN_REGEX,
+      const match = matchingPlaceholder[index];
-      `![${this.imageCaptionPopup.newCaption}|$2$3$4]($5)`
+      const replacement = match.replace(
-    );
+        IMAGE_MARKDOWN_REGEX,
-    this.appEvents.trigger("composer:replace-text", match, replacement);
+        `![${this.imageCaptionPopup.newCaption}|$2$3$4]($5)`
+      );
+
+      if (match) {
+        this.appEvents.trigger("composer:replace-text", match, replacement);
+      }
+    }
+
+    this.hidePopup();
+  }
+
+  @action
+  resizeTextarea(target) {
+    const style = window.getComputedStyle(target);
+
+    // scrollbars will show based on scrollHeight alone
+    // so we need to consider borders too
+    const borderTopWidth = parseInt(style.borderTopWidth, 10);
+    const borderBottomWidth = parseInt(style.borderBottomWidth, 10);
+
+    target.scrollTop = 0;
+    target.style.height = `${
+      target.scrollHeight + borderTopWidth + borderBottomWidth
+    }px`;
+  }
+
+  @action
+  hidePopup() {
     this.imageCaptionPopup.showPopup = false;
   }
 
   <template>
     {{#if this.imageCaptionPopup.showPopup}}
-      <div class="composer-popup education-message ai-caption-popup">
+      <div
+        class="composer-popup education-message ai-caption-popup"
+        {{willDestroy this.hidePopup}}
+      >
         <ConditionalLoadingSpinner
           @condition={{this.imageCaptionPopup.loading}}
         >
           <DTextarea
+            {{didInsert this.resizeTextarea}}
+            {{didUpdate this.resizeTextarea this.imageCaptionPopup.newCaption}}
             @value={{this.imageCaptionPopup.newCaption}}
             {{on "change" this.updateCaption}}
             {{autoFocus}}
@@ -59,7 +93,7 @@ export default class AiImageCaptionContainer extends Component {
           <DButton
             class="btn-flat"
             @label="cancel"
-            @action={{fn (mut this.imageCaptionPopup.showPopup) false}}
+            @action={{this.hidePopup}}
           />
 
           <span class="credits">

assets/javascripts/initializers/ai-image-caption.js

@@ -34,6 +34,8 @@ export default apiInitializer("1.25.0", (api) => {
         imageCaptionPopup.loading = true;
         imageCaptionPopup.showPopup = !imageCaptionPopup.showPopup;
 
+        event.target.classList.add("disabled");
+
         ajax(`/discourse-ai/ai-helper/caption_image`, {
           method: "POST",
           data: {
@@ -41,7 +43,6 @@ export default apiInitializer("1.25.0", (api) => {
           },
         })
           .then(({ caption }) => {
-            event.target.classList.add("disabled");
             imageCaptionPopup.imageSrc = imageSrc;
             imageCaptionPopup.imageIndex = imageIndex;
             imageCaptionPopup.newCaption = caption;

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

@@ -465,6 +465,7 @@
     color: var(--tertiary);
     box-shadow: var(--shadow-dropdown);
     position: absolute;
+    white-space: nowrap;
     top: -3.15rem;
     left: 0.75rem;
     padding: 0.5em 0.75em;
@@ -488,29 +489,31 @@
     &.disabled {
       pointer-events: none;
       cursor: not-allowed;
-      opacity: 0.8;
+      opacity: 0.7;
-      &:hover,
-      &:focus {
-        background: var(--primary-low);
-        color: var(--primary-high);
-      }
     }
   }
 }
 
 .ai-caption-popup {
+  --ai-caption-popup-min-width: 20rem;
   width: auto;
   right: unset;
   padding: 1em;
   top: unset;
   bottom: 0;
 
+  .loading-container {
+    min-width: var(--ai-caption-popup-min-width);
+  }
+
   textarea {
+    box-sizing: border-box;
     width: 100%;
-    max-width: 40vw;
+    max-width: 40dvw;
+    max-height: calc(100dvh - var(--header-offset) - 10em);
     min-height: 3em;
     height: 7em;
-    min-width: 20em;
+    min-width: var(--ai-caption-popup-min-width);
     @include breakpoint(tablet) {
       width: 100%;
       max-width: unset;