From a9d767c67a1bb2792326e07fb5dbef1021ee2a57 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <80892890+shaohuzhang1@users.noreply.github.com>
Date: Wed, 7 Aug 2024 11:07:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81=E6=8F=90=E7=A4=BA=E8=AF=8D=E4=BD=BF=E7=94=A8md?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E8=BE=93=E5=85=A5=E6=A1=86,=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E6=BB=9A=E5=8A=A8=E9=97=AE=E9=A2=98=20(#939)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 4b2213a1719ede21d0d92e61dca3ea7cffa172f7)
---
 ui/src/workflow/nodes/ai-chat-node/index.vue  | 51 ++++++++++++++++---
 ui/src/workflow/nodes/base-node/index.vue     | 50 ++++++++++++++++--
 ui/src/workflow/nodes/question-node/index.vue | 50 +++++++++++++++---
 ui/src/workflow/nodes/reply-node/index.vue    | 19 ++++++-
 4 files changed, 151 insertions(+), 19 deletions(-)

diff --git a/ui/src/workflow/nodes/ai-chat-node/index.vue b/ui/src/workflow/nodes/ai-chat-node/index.vue
index dc80d08f2..e70865074 100644
--- a/ui/src/workflow/nodes/ai-chat-node/index.vue
+++ b/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>
diff --git a/ui/src/workflow/nodes/base-node/index.vue b/ui/src/workflow/nodes/base-node/index.vue
index 78758516d..38155fa9f 100644
--- a/ui/src/workflow/nodes/base-node/index.vue
+++ b/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>
diff --git a/ui/src/workflow/nodes/question-node/index.vue b/ui/src/workflow/nodes/question-node/index.vue
index 7d0226138..42e08d748 100644
--- a/ui/src/workflow/nodes/question-node/index.vue
+++ b/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>
diff --git a/ui/src/workflow/nodes/reply-node/index.vue b/ui/src/workflow/nodes/reply-node/index.vue
index 9a234fec1..bbd3c699b 100644
--- a/ui/src/workflow/nodes/reply-node/index.vue
+++ b/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: '',