From 011ef894a555d2fba98bd1a7362b26ec9a51349e Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 24 Jun 2024 18:27:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=A7=E8=A1=8C=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai-chat/ExecutionDetailDialog.vue         | 99 ++++++++++++++++++-
 ui/src/styles/app.scss                        |  4 +
 2 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
index 2cbba13fa..f8687497b 100644
--- a/ui/src/components/ai-chat/ExecutionDetailDialog.vue
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -23,9 +23,102 @@
               </div>
             </div>
             <el-collapse-transition>
-              <div class="card-never border-r-4 mt-8" v-if="current === index">
-                <h5 class="p-8-12">参数输入</h5>
-                <div class="p-8-12 border-t-dashed lighter">如何快速开始</div>
+              <div v-if="current === index">
+                <!-- 开始 -->
+                <template v-if="item.type === WorkflowType.Start">
+                  <div class="card-never border-r-4 mt-8">
+                    <h5 class="p-8-12">参数输入</h5>
+                    <div class="p-8-12 border-t-dashed lighter">{{ item.question }}</div>
+                  </div>
+                </template>
+                <!-- 知识库检索 -->
+                <template v-if="item.type == WorkflowType.SearchDataset">
+                  <div class="card-never border-r-4 mt-8">
+                    <h5 class="p-8-12">检索结果</h5>
+                    <div class="p-8-12 border-t-dashed lighter">
+                      <template v-for="(paragraph, index) in item.paragraph_list" :key="index">
+                        <CardBox
+                          shadow="never"
+                          :title="paragraph.title || '-'"
+                          class="paragraph-source-card cursor mb-8"
+                          :class="paragraph.is_active ? '' : 'disabled'"
+                          :showIcon="false"
+                        >
+                          <template #icon>
+                            <AppAvatar class="mr-12 avatar-light" :size="22">
+                              {{ index + 1 + '' }}</AppAvatar
+                            >
+                          </template>
+                          <div class="active-button primary">
+                            {{ paragraph.similarity?.toFixed(3) }}
+                          </div>
+                          <template #description>
+                            <el-scrollbar height="150">
+                              <MdPreview
+                                ref="editorRef"
+                                editorId="preview-only"
+                                :modelValue="paragraph.content"
+                              />
+                            </el-scrollbar>
+                          </template>
+                          <template #footer>
+                            <div class="footer-content flex-between">
+                              <el-text>
+                                <el-icon>
+                                  <Document />
+                                </el-icon>
+                                {{ paragraph?.document_name }}
+                              </el-text>
+                              <div class="flex align-center">
+                                <AppAvatar class="mr-8" shape="square" :size="18">
+                                  <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                                </AppAvatar>
+
+                                <span class="ellipsis"> {{ paragraph?.dataset_name }}</span>
+                              </div>
+                            </div>
+                          </template>
+                        </CardBox>
+                      </template>
+                    </div>
+                  </div>
+                </template>
+                <!-- 判断器 -->
+                <template v-if="item.type == WorkflowType.Condition">
+                  <div class="card-never border-r-4 mt-8">
+                    <h5 class="p-8-12">判断结果</h5>
+                    <div class="p-8-12 border-t-dashed lighter">
+                      {{ item.branch_name }}
+                    </div>
+                  </div>
+                </template>
+                <!-- AI 对话 -->
+                <template v-if="item.type == WorkflowType.AiChat">
+                  <div class="card-never border-r-4 mt-8">
+                    <h5 class="p-8-12">角色设定 (System)</h5>
+                    <div class="p-8-12 border-t-dashed lighter">
+                      {{ item.branch_name }}
+                    </div>
+                  </div>
+                  <div class="card-never border-r-4 mt-8">
+                    <h5 class="p-8-12">历史记录</h5>
+                    <div class="p-8-12 border-t-dashed lighter"></div>
+                  </div>
+                  <div class="card-never border-r-4 mt-8">
+                    <h5 class="p-8-12">本次对话</h5>
+                    <div class="p-8-12 border-t-dashed lighter pre-line">{{ item.question }}</div>
+                  </div>
+                  <div class="card-never border-r-4 mt-8">
+                    <h5 class="p-8-12">AI 回答</h5>
+                    <div class="p-8-12 border-t-dashed lighter">
+                      <MdPreview
+                        ref="editorRef"
+                        editorId="preview-only"
+                        :modelValue="item.answer"
+                      />
+                    </div>
+                  </div>
+                </template>
               </div>
             </el-collapse-transition>
           </el-card>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index a39ac0b48..2336fb32a 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -653,3 +653,7 @@ h5 {
     border: 1px solid var(--el-color-primary);
   }
 }
+
+.md-editor {
+  background: none;
+}