fix: Enhance AutoExpandTextArea width handling and add minimum width calculation for Firefox

Author: NekoWings

components/AutoExpandTextArea.vue

@@ -45,29 +45,54 @@ if (!CSS.supports('field-sizing', 'content')) {
   const textareaBounding = useElementBounding(textareaRef)
   const getSizingStyles = () => {
     const width = textareaRef.value?.offsetWidth
-    const baseStyleCss = `position: absolute; top: 100px; left: 100px; opacity: 1; max-height: 0; overflow-wrap: anywhere; width: ${width}px; scrollbar-width: none`
+    const widthRule = typeof width === 'number' && width > 0 ? `width: ${width}px;` : ''
+    const baseStyleCss = `position: absolute; top: 100px; left: 100px; opacity: 1; max-height: 0; overflow-wrap: anywhere; scrollbar-width: none; ${widthRule}`
     if (!textareaRef.value) return baseStyleCss
     const el = textareaRef.value
     const styles = window.getComputedStyle(el)
     const sizingStyles = ['width', 'padding-left', 'padding-right', 'border-left', 'border-right', 'box-sizing', 'font-family', 'font-size']
-    return sizingStyles.filter((prop) => !!styles.getPropertyValue(prop)).map((prop) => `${prop}: ${styles.getPropertyValue(prop)}`).join('; ') + ';' + baseStyleCss
+    return sizingStyles
+      .filter((prop) => !!styles.getPropertyValue(prop))
+      .map((prop) => `${prop}: ${styles.getPropertyValue(prop)}`)
+      .join('; ') + ';' + baseStyleCss
   }
   const { element: measureEl } = useTempElement('textarea', { attributes: { style: getSizingStyles(), id: `nm-textarea-measure-${generateRandomId()}` } })
 
-  watch(() => [textareaBounding.width.value], ([width]) => {
+  const syncMeasureStyles = (width?: number) => {
     measureEl.style.cssText = getSizingStyles()
-    measureEl.style.width = `${width}px`
-  })
+    if (typeof width === 'number' && width > 0) {
+      measureEl.style.width = `${width}px`
+    }
+  }
 
-  watch(inputValue, async (v) => {
-    measureEl.value = v ?? ''
-    if (!textareaRef.value) return
+  const resizeTextarea = () => {
     const textarea = textareaRef.value
+    if (!textarea) return
+    const width = textareaBounding.width.value
+    if (width <= 0) return
+    syncMeasureStyles(width)
+    measureEl.value = inputValue.value ?? ''
     // force a reflow to ensure the height is recalculated
     const _ = measureEl.offsetHeight
     const scrollHeight = measureEl.scrollHeight
     const height = Math.max(props.minHeight || 0, scrollHeight)
-    textarea.style.height = `${height}px` // Set height to scrollHeight to expand
-  })
+    textarea.style.height = `${height}px`
+  }
+
+  watch(
+    () => textareaBounding.width.value,
+    () => {
+      resizeTextarea()
+    },
+    { immediate: true, flush: 'post' },
+  )
+
+  watch(
+    inputValue,
+    () => {
+      resizeTextarea()
+    },
+    { immediate: true, flush: 'post' },
+  )
 }
 </script>

entrypoints/sidepanel/components/Chat/Messages/User.vue

@@ -11,7 +11,8 @@
       </div>
       <div
         v-else
-        class="flex relative rounded-md border border-border-chat-input bg-bg-chat-input text-text-primary p-2 max-w-full min-w-[220px] focus-within:shadow-[0px_0px_0px_1px_var(--color-border-accent)] max-h-24"
+        class="flex relative rounded-md border border-border-chat-input bg-bg-chat-input text-text-primary p-2 max-w-full focus-within:shadow-[0px_0px_0px_1px_var(--color-border-accent)] max-h-24"
+        :style="{width: calcMinWidth}"
       >
         <ScrollContainer
           class="overflow-hidden w-full"
@@ -133,6 +134,8 @@ const emit = defineEmits<{
   (e: 'submitEdit', value: string): void
 }>()
 
+const isFirefox = import.meta.env.FIREFOX
+
 const { t } = useI18n()
 const draft = ref(props.message.displayContent ?? props.message.content)
 const editTextareaRef = ref<InstanceType<typeof AutoExpandTextArea>>()
@@ -147,6 +150,15 @@ const ensureDraftFromMessage = () => {
   draft.value = props.message.displayContent ?? props.message.content
 }
 
+const calcMinWidth = computed(() => {
+  // For fixing firefox edit textarea cannot full width issue, if browser is firefox, use window width and it will auto clip and fill container
+
+  if (isFirefox) {
+    return `${window.innerWidth}px`
+  }
+  return 'auto'
+})
+
 watch(() => [props.message.displayContent, props.message.content], () => {
   if (!props.isEditing) ensureDraftFromMessage()
 })