From e21bd3db254a167176b9306bb5428c6fbc3c5a85 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 12 Jan 2024 14:55:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/ai-chat/index.vue           | 34 +++++++++++++++++--
 .../markdown-renderer/MdRenderer.vue          |  1 -
 ui/src/styles/index.scss                      |  2 +-
 ui/src/views/application/CreateAndSetting.vue | 20 +++++++++--
 4 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index fe4c8e79e..adb08f15b 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -11,12 +11,32 @@
 
           <div class="content">
             <el-card shadow="always" class="dialog-card">
+              <template v-for="(item, index) in prologueList" :key="index">
+                <div
+                  v-if="isMdArray(item)"
+                  @click="quickProblemHandel(item)"
+                  class="problem-button ellipsis-2 mb-8"
+                  :class="log ? 'disabled' : 'cursor'"
+                >
+                  <el-icon><EditPen /></el-icon>
+                  {{ item }}
+                </div>
+                <MdPreview
+                  v-else
+                  class="mb-8"
+                  ref="editorRef"
+                  editorId="preview-only"
+                  :modelValue="item"
+                />
+              </template>
+
+              <!-- {{ prologueList }}
               <h4>您好，我是 {{ data?.name || '应用名称' }}</h4>
               <div class="mt-4" v-if="data?.prologue">
                 <el-text type="info">{{ data?.prologue }}</el-text>
-              </div>
+              </div> -->
             </el-card>
-            <el-card shadow="always" class="dialog-card mt-12" v-if="data?.example?.length > 0">
+            <!-- <el-card shadow="always" class="dialog-card mt-12" v-if="data?.example?.length > 0">
               <h4 class="mb-8">您可以尝试输入以下问题：</h4>
               <el-space wrap>
                 <template v-for="(item, index) in data?.example" :key="index">
@@ -31,7 +51,7 @@
                   </div>
                 </template>
               </el-space>
-            </el-card>
+            </el-card> -->
           </div>
         </div>
         <template v-for="(item, index) in chatList" :key="index">
@@ -136,6 +156,7 @@ import { ChatManagement, type chatType } from '@/api/type/application'
 import { randomId } from '@/utils/utils'
 import useStore from '@/stores'
 import MdRenderer from '@/components/markdown-renderer/MdRenderer.vue'
+import { MdPreview } from 'md-editor-v3'
 defineOptions({ name: 'AiChat' })
 const route = useRoute()
 const {
@@ -168,6 +189,13 @@ const isDisabledChart = computed(
   () => !(inputValue.value && (props.appId || (props.data?.name && props.data?.model_id)))
 )
 
+const prologueList = computed(() => {
+  const temp = props.data?.prologue
+  const lines = temp.split('\n')
+  return lines
+})
+const isMdArray = (val: string) => val.match(/^-\s.*/m)
+
 watch(
   () => props.record,
   (value) => {
diff --git a/ui/src/components/markdown-renderer/MdRenderer.vue b/ui/src/components/markdown-renderer/MdRenderer.vue
index 2d3eb3a86..fb31baa85 100644
--- a/ui/src/components/markdown-renderer/MdRenderer.vue
+++ b/ui/src/components/markdown-renderer/MdRenderer.vue
@@ -14,7 +14,6 @@ import { MdPreview } from 'md-editor-v3'
 const props = withDefaults(defineProps<{ source?: string; inner_suffix?: boolean }>(), {
   source: ''
 })
-
 const md_view_list = computed(() => {
   const temp_source = props.source
   const temp_md_img_list = temp_source.match(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g)
diff --git a/ui/src/styles/index.scss b/ui/src/styles/index.scss
index e467fc48c..373b1d80b 100644
--- a/ui/src/styles/index.scss
+++ b/ui/src/styles/index.scss
@@ -4,5 +4,5 @@
 @import './element-plus.scss';
 @import 'nprogress/nprogress.css';
 @import 'highlight.js/styles/default.css';
-@import 'md-editor-v3/lib/preview.css';
+@import 'md-editor-v3/lib/style.css';
 @import './md-editor.scss';
\ No newline at end of file
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index 4cc46078d..df154e6f2 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -126,12 +126,19 @@
                 </div>
               </el-form-item>
               <el-form-item label="开场白">
-                <el-input
+                <MdEditor
+                  class="prologue-md-editor"
+                  v-model="applicationForm.prologue"
+                  :preview="false"
+                  :toolbars="[]"
+                  :footers="[]"
+                />
+                <!-- <el-input
                   v-model="applicationForm.prologue"
                   type="textarea"
                   placeholder="开始对话的欢迎语。您可以这样写：您好，我是 MaxKB 智能小助手，您可以向我提出 MaxKB 产品使用中遇到的任何问题。"
                   :rows="4"
-                />
+                /> -->
               </el-form-item>
               <el-form-item label="示例">
                 <template v-for="(item, index) in exampleList" :key="index">
@@ -184,6 +191,7 @@ import { groupBy } from 'lodash'
 import AddDatasetDialog from './components/AddDatasetDialog.vue'
 import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
 import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
+import { MdEditor } from 'md-editor-v3'
 import applicationApi from '@/api/application'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
@@ -214,7 +222,10 @@ const applicationForm = ref<ApplicationFormType>({
   desc: '',
   model_id: '',
   multiple_rounds_dialogue: false,
-  prologue: '',
+  prologue: `您好，我是 MaxKB 小助手，您可以向我提出 MaxKB 使用问题。
+- MaxKB 主要功能有什么？
+- MaxKB 支持哪些大语言模型？
+- MaxKB 支持哪些文档类型？`,
   example: [],
   dataset_id_list: []
 })
@@ -368,4 +379,7 @@ onMounted(() => {
   position: absolute;
   right: 10px;
 }
+.prologue-md-editor {
+  height: 150px;
+}
 </style>