fix: 修复工作流提示词使用md格式输入框,输入框滚动问题 (#939)

(cherry picked from commit 4b2213a171)

ui/src/workflow/nodes/ai-chat-node/index.vue

@@ -115,13 +115,23 @@
               </el-tooltip>
             </div>
           </template>
-          <el-input
+          <MdEditor
+            @wheel="wheel"
+            @keydown="isKeyDown = true"
+            @keyup="isKeyDown = false"
+            class="reply-node-editor"
+            style="height: 150px"
             v-model="chat_data.prompt"
-            :rows="6"
-            type="textarea"
-            maxlength="2048"
-            :placeholder="defaultPrompt"
-          />
+            :preview="false"
+            :toolbars="[]"
+            :footers="footers"
+          >
+            <template #defFooters>
+              <el-button text type="info" @click="openDialog">
+                <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+              </el-button>
+            </template>
+          </MdEditor>
         </el-form-item>
         <el-form-item label="历史聊天记录">
           <el-input-number
@@ -151,7 +161,15 @@
         </el-form-item>
       </el-form>
     </el-card>
-
+    <!-- 回复内容弹出层 -->
+    <el-dialog v-model="dialogVisible" title="提示词" append-to-body>
+      <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"> </MdEditor>
+      <template #footer>
+        <div class="dialog-footer mt-24">
+          <el-button type="primary" @click="submitDialog"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
     <!-- 添加模版 -->
     <CreateModelDialog
       ref="createModelRef"
@@ -185,6 +203,17 @@ const wheel = (e: any) => {
     return true
   }
 }
+const dialogVisible = ref(false)
+const cloneContent = ref('')
+const footers: any = [null, '=', 0]
+function openDialog() {
+  cloneContent.value = chat_data.value.prompt
+  dialogVisible.value = true
+}
+function submitDialog() {
+  set(props.nodeModel.properties.node_data, 'prompt', cloneContent.value)
+  dialogVisible.value = false
+}
 const {
   params: { id }
 } = app.config.globalProperties.$route as any
@@ -266,4 +295,10 @@ onMounted(() => {
   set(props.nodeModel, 'validate', validate)
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.reply-node-editor {
+  :deep(.md-editor-footer) {
+    border: none !important;
+  }
+}
+</style>

ui/src/workflow/nodes/base-node/index.vue

@@ -40,14 +40,32 @@
       </el-form-item>
       <el-form-item label="开场白">
         <MdEditor
+          @wheel="wheel"
+          @keydown="isKeyDown = true"
+          @keyup="isKeyDown = false"
           style="height: 150px"
           v-model="form_data.prologue"
           :preview="false"
           :toolbars="[]"
-          :footers="[]"
-        />
+          class="reply-node-editor"
+          :footers="footers"
+        >
+          <template #defFooters>
+            <el-button text type="info" @click="openDialog">
+              <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+            </el-button> </template
+        ></MdEditor>
       </el-form-item>
     </el-form>
+    <!-- 回复内容弹出层 -->
+    <el-dialog v-model="dialogVisible" title="开场白" append-to-body>
+      <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"> </MdEditor>
+      <template #footer>
+        <div class="dialog-footer mt-24">
+          <el-button type="primary" @click="submitDialog"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </NodeContainer>
 </template>
 <script setup lang="ts">
@@ -63,6 +81,26 @@ const form = {
   prologue:
     '您好，我是 MaxKB 小助手，您可以向我提出 MaxKB 使用问题。\n- MaxKB 主要功能有什么？\n- MaxKB 支持哪些大语言模型？\n- MaxKB 支持哪些文档类型？'
 }
+const isKeyDown = ref(false)
+const wheel = (e: any) => {
+  if (isKeyDown.value) {
+    e.preventDefault()
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const dialogVisible = ref(false)
+const cloneContent = ref('')
+const footers: any = [null, '=', 0]
+function openDialog() {
+  cloneContent.value = form_data.value.prologue
+  dialogVisible.value = true
+}
+function submitDialog() {
+  set(props.nodeModel.properties.node_data, 'prologue', cloneContent.value)
+  dialogVisible.value = false
+}
 const form_data = computed({
   get: () => {
     if (props.nodeModel.properties.node_data) {
@@ -89,4 +127,10 @@ onMounted(() => {
   set(props.nodeModel, 'validate', validate)
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.reply-node-editor {
+  :deep(.md-editor-footer) {
+    border: none !important;
+  }
+}
+</style>

ui/src/workflow/nodes/question-node/index.vue

@@ -116,13 +116,23 @@
               </el-tooltip>
             </div>
           </template>
-          <el-input
+          <MdEditor
+            @wheel="wheel"
+            @keydown="isKeyDown = true"
+            @keyup="isKeyDown = false"
+            class="reply-node-editor"
+            style="height: 150px"
             v-model="form_data.prompt"
-            :rows="6"
-            type="textarea"
-            maxlength="2048"
-            :placeholder="defaultPrompt"
-          />
+            :preview="false"
+            :toolbars="[]"
+            :footers="footers"
+          >
+            <template #defFooters>
+              <el-button text type="info" @click="openDialog">
+                <AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
+              </el-button>
+            </template>
+          </MdEditor>
         </el-form-item>
         <el-form-item label="历史聊天记录">
           <el-input-number
@@ -152,6 +162,15 @@
         </el-form-item>
       </el-form>
     </el-card>
+    <!-- 回复内容弹出层 -->
+    <el-dialog v-model="dialogVisible" title="提示词" append-to-body>
+      <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"> </MdEditor>
+      <template #footer>
+        <div class="dialog-footer mt-24">
+          <el-button type="primary" @click="submitDialog"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
     <!-- 添加模版 -->
     <CreateModelDialog
       ref="createModelRef"
@@ -185,6 +204,17 @@ const wheel = (e: any) => {
     return true
   }
 }
+const dialogVisible = ref(false)
+const cloneContent = ref('')
+const footers: any = [null, '=', 0]
+function openDialog() {
+  cloneContent.value = form_data.value.prompt
+  dialogVisible.value = true
+}
+function submitDialog() {
+  set(props.nodeModel.properties.node_data, 'prompt', cloneContent.value)
+  dialogVisible.value = false
+}
 const {
   params: { id }
 } = app.config.globalProperties.$route as any
@@ -263,4 +293,10 @@ onMounted(() => {
   set(props.nodeModel, 'validate', validate)
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.reply-node-editor {
+  :deep(.md-editor-footer) {
+    border: none !important;
+  }
+}
+</style>

ui/src/workflow/nodes/reply-node/index.vue

@@ -16,7 +16,12 @@
           <template #label>
             <div class="flex-between">
               <span>回复内容</span>
-              <el-select v-model="form_data.reply_type" size="small" style="width: 85px">
+              <el-select
+                :teleported="false"
+                v-model="form_data.reply_type"
+                size="small"
+                style="width: 85px"
+              >
                 <el-option label="引用变量" value="referencing" />
                 <el-option label="自定义" value="content" />
               </el-select>
@@ -24,6 +29,9 @@
           </template>
           <MdEditor
             v-if="form_data.reply_type === 'content'"
+            @wheel="wheel"
+            @keydown="isKeyDown = true"
+            @keyup="isKeyDown = false"
             class="reply-node-editor"
             style="height: 150px"
             v-model="form_data.content"
@@ -84,6 +92,15 @@ import { ref, computed, onMounted } from 'vue'
 import { isLastNode } from '@/workflow/common/data'
 
 const props = defineProps<{ nodeModel: any }>()
+const isKeyDown = ref(false)
+const wheel = (e: any) => {
+  if (isKeyDown.value) {
+    e.preventDefault()
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
 const form = {
   reply_type: 'content',
   content: '',