fix: User input dialog follows trigger button position on desktop

Author: zhanweizhang7

ui/src/components/ai-chat/component/inline-params/index.vue

@@ -15,7 +15,12 @@
         :formfield-list="fieldList"
       />
     </template>
-    <el-button style="padding: 8px" v-if="dialogFields.length > 0" @click="emit('openDialog')">
+    <el-button
+      ref="triggerBtnRef"
+      style="padding: 8px"
+      v-if="dialogFields.length > 0"
+      @click="emit('openDialog')"
+    >
       <AppIcon iconName="app-all-menu"></AppIcon>
     </el-button>
   </div>
@@ -38,6 +43,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:formData', 'openDialog'])
 
+const triggerBtnRef = ref()
+
 const fieldList = ref<FormField[]>([])
 const formValue = ref<Dict<any>>({})
 const setting = ref<{ exposed_fields: string[]; menu_title: string }>({
@@ -196,6 +203,7 @@ const show = (field: FormField) => {
 }
 
 defineExpose({
+  triggerBtnRef,
   validate: () => {
     for (const field of fieldList.value) {
       if (!show(field)) {

ui/src/components/ai-chat/index.vue

@@ -7,10 +7,26 @@
       height: firsUserInput ? '100%' : undefined,
     }"
   >
-    <div
-      v-show="showUserInputContent"
-      :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
-    >
+    <div v-if="showUserInputContent && firsUserInput" class="firstUserInput">
+      <UserForm
+        v-model:api_form_data="api_form_data"
+        v-model:form_data="form_data"
+        :excludeFields="inlineExposedFields"
+        :title="
+          applicationDetails?.work_flow?.nodes?.find((v: any) => v.id === 'base-node')?.properties
+            ?.user_input_field_list_setting?.menu_title ||
+          applicationDetails?.work_flow?.nodes?.find((v: any) => v.id === 'base-node')?.properties
+            ?.user_input_config?.title
+        "
+        :application="applicationDetails"
+        :type="type"
+        :first="firsUserInput"
+        @confirm="UserFormConfirm"
+        @cancel="UserFormCancel"
+        ref="userFormRef"
+      />
+    </div>
+    <div v-if="showUserInputContent && !firsUserInput && isNarrow" class="popperUserInput">
       <UserForm
         v-model:api_form_data="api_form_data"
         v-model:form_data="form_data"
@@ -29,6 +45,42 @@
         ref="userFormRef"
       />
     </div>
+    <el-popover
+      v-if="!firsUserInput && !isNarrow"
+      v-model:visible="showUserInput"
+      :virtual-ref="triggerEl"
+      virtual-triggering
+      trigger="manual"
+      placement="top-start"
+      :offset="0"
+      :width="400"
+      :show-arrow="false"
+      popper-class="bare-popper"
+      :popper-style="{
+        background: 'transparent',
+        border: 'none',
+        padding: '0',
+        boxShadow: 'none',
+      }"
+    >
+      <UserForm
+        v-model:api_form_data="api_form_data"
+        v-model:form_data="form_data"
+        :excludeFields="inlineExposedFields"
+        :title="
+          applicationDetails?.work_flow?.nodes?.find((v: any) => v.id === 'base-node')?.properties
+            ?.user_input_field_list_setting?.menu_title ||
+          applicationDetails?.work_flow?.nodes?.find((v: any) => v.id === 'base-node')?.properties
+            ?.user_input_config?.title
+        "
+        :application="applicationDetails"
+        :type="type"
+        :first="firsUserInput"
+        @confirm="UserFormConfirm"
+        @cancel="UserFormCancel"
+        ref="userFormRef"
+      />
+    </el-popover>
     <template v-if="!(isUserInput || isAPIInput) || !firsUserInput || type === 'log'">
       <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
         <div
@@ -266,7 +318,7 @@ const isMobile = computed(() => {
   return common.isMobile() || mode === 'embed' || mode === 'mobile'
 })
 
-const isNarrow = computed(() => rootWidth.value > 0 && rootWidth.value < 678)
+const isNarrow = computed(() => rootWidth.value > 0 && rootWidth.value < 768)
 
 const maxExposed = computed(() => (isNarrow.value ? 1 : 3))
 const inlineExposedFields = computed<string[]>(() =>
@@ -276,6 +328,11 @@ const inlineExposedFields = computed<string[]>(() =>
   ).slice(0, maxExposed.value),
 )
 
+const triggerEl = computed<HTMLElement | undefined>(() => {
+  const btn = inlineParamsRef.value?.triggerBtnRef as any
+  return btn?.$el ?? btn
+})
+
 const scrollDiv = ref()
 const dialogScrollbar = ref()
 const loading = ref(false)