From 9daabd1c6d40c1a8f8cdd2e7ecd0689e5d52c8d2 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 21 Nov 2024 17:51:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/assets/icon_docs.svg                   |  4 ++
 ui/src/assets/icon_image.svg                  |  4 ++
 .../ai-chat/ExecutionDetailDialog.vue         | 70 ++++++++++++++++++-
 .../icons/document-extract-node-icon.vue      |  4 +-
 .../icons/image-understand-node-icon.vue      |  2 +-
 5 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/assets/icon_docs.svg
 create mode 100644 ui/src/assets/icon_image.svg

diff --git a/ui/src/assets/icon_docs.svg b/ui/src/assets/icon_docs.svg
new file mode 100644
index 000000000..9bec0be4a
--- /dev/null
+++ b/ui/src/assets/icon_docs.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.77756 1.66699C4.28664 1.66699 3.88867 2.06496 3.88867 2.55588V19.4448C3.88867 19.9357 4.28664 20.3337 4.77756 20.3337H17.222C17.7129 20.3337 18.1109 19.9357 18.1109 19.4448V6.3069C18.1109 6.19036 18.0651 6.07847 17.9834 5.99536L13.8597 1.79989C13.7761 1.71488 13.6619 1.66699 13.5427 1.66699H4.77756ZM7.04915 9.02062C7.04915 8.77516 7.24814 8.57617 7.4936 8.57617H14.5059C14.7514 8.57617 14.9504 8.77516 14.9504 9.02062V9.74789C14.9504 9.99335 14.7514 10.1923 14.5059 10.1923H7.4936C7.24814 10.1923 7.04915 9.99335 7.04915 9.74789V9.02062ZM7.04915 13.061C7.04915 12.8156 7.24814 12.6166 7.4936 12.6166H10.5553C10.8008 12.6166 10.9998 12.8156 10.9998 13.061V13.7883C10.9998 14.0338 10.8008 14.2327 10.5553 14.2327H7.4936C7.24814 14.2327 7.04915 14.0338 7.04915 13.7883V13.061Z" fill="white"/>
+<path opacity="0.5" d="M13.6665 1.68457C13.7391 1.70561 13.8058 1.74502 13.8597 1.7999L17.9835 5.99537C18.0172 6.02971 18.0449 6.06897 18.0657 6.11145H14.6755C14.1183 6.11145 13.6665 5.6597 13.6665 5.10244V1.68457Z" fill="#3370FF"/>
+</svg>
diff --git a/ui/src/assets/icon_image.svg b/ui/src/assets/icon_image.svg
new file mode 100644
index 000000000..f6ee5f551
--- /dev/null
+++ b/ui/src/assets/icon_image.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.99967 2C1.63149 2 1.33301 2.29848 1.33301 2.66667V13.3333C1.33301 13.7015 1.63149 14 1.99967 14H13.9997C14.3679 14 14.6663 13.7015 14.6663 13.3333V2.66667C14.6663 2.29848 14.3679 2 13.9997 2H1.99967ZM13.333 3.33328V10.0001L11.9021 8.56907C11.7719 8.43893 11.5608 8.43893 11.4306 8.56907L9.56874 10.431C9.43854 10.5612 9.22747 10.5612 9.09727 10.431L5.56871 6.9024C5.43853 6.77227 5.22748 6.77227 5.09731 6.9024L2.66634 9.3334V3.33328H13.333Z" fill="white"/>
+<path opacity="0.5" d="M10.333 5.33333C10.333 5.14924 10.4823 5 10.6663 5H11.6663C11.8504 5 11.9997 5.14924 11.9997 5.33333V6.33333C11.9997 6.51743 11.8504 6.66667 11.6663 6.66667H10.6663C10.4823 6.66667 10.333 6.51743 10.333 6.33333V5.33333Z" fill="white"/>
+</svg>
diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
index aa6d35b0b..68469f456 100644
--- a/ui/src/components/ai-chat/ExecutionDetailDialog.vue
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -135,8 +135,7 @@
                     v-if="
                       item.type == WorkflowType.AiChat ||
                       item.type == WorkflowType.Question ||
-                      item.type == WorkflowType.Application ||
-                      item.type == WorkflowType.ImageUnderstandNode
+                      item.type == WorkflowType.Application
                     "
                   >
                     <div
@@ -326,6 +325,73 @@
                       </div>
                     </div>
                   </template>
+                  <!-- 图片理解 -->
+                  <template v-if="item.type == WorkflowType.ImageUnderstandNode">
+                    <div
+                      class="card-never border-r-4"
+                      v-if="item.type !== WorkflowType.Application"
+                    >
+                      <h5 class="p-8-12">角色设定 (System)</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        {{ item.system || '-' }}
+                      </div>
+                    </div>
+                    <div
+                      class="card-never border-r-4 mt-8"
+                      v-if="item.type !== WorkflowType.Application"
+                    >
+                      <h5 class="p-8-12">历史记录</h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <template v-if="item.history_message?.length > 0">
+                          <p
+                            class="mt-4 mb-4"
+                            v-for="(history, historyIndex) in item.history_message"
+                            :key="historyIndex"
+                          >
+                            <span class="color-secondary mr-4">{{ history.role }}:</span
+                            ><span>{{ history.content }}</span>
+                          </p>
+                        </template>
+                        <template v-else> - </template>
+                      </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-wrap">
+                        <div v-if="item.image_list?.length > 0">
+                          <p class="mb-8 color-secondary">文件:</p>
+                          <el-space wrap>
+                            <template v-for="(f, i) in item.image_list" :key="i">
+                              <el-image
+                                :src="f.url"
+                                alt=""
+                                fit="cover"
+                                style="width: 40px; height: 40px; display: block"
+                                class="border-r-4"
+                              />
+                            </template>
+                          </el-space>
+                          <p class="mb-8 color-secondary">提示词:</p>
+                          {{ item.prompt || '-' }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card-never border-r-4 mt-8">
+                      <h5 class="p-8-12">
+                        {{ item.type == WorkflowType.Application ? '参数输出' : 'AI 回答' }}
+                      </h5>
+                      <div class="p-8-12 border-t-dashed lighter">
+                        <MdPreview
+                          v-if="item.answer"
+                          ref="editorRef"
+                          editorId="preview-only"
+                          :modelValue="item.answer"
+                          style="background: none"
+                        />
+                        <template v-else> - </template>
+                      </div>
+                    </div>
+                  </template>
                 </template>
                 <template v-else>
                   <div class="card-never border-r-4">
diff --git a/ui/src/workflow/icons/document-extract-node-icon.vue b/ui/src/workflow/icons/document-extract-node-icon.vue
index 86152c376..7b81719c6 100644
--- a/ui/src/workflow/icons/document-extract-node-icon.vue
+++ b/ui/src/workflow/icons/document-extract-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
-  <AppAvatar shape="square" style="background: #7F3BF5">
-    <img src="@/assets/icon_document.svg" style="width: 65%" alt="" />
+  <AppAvatar shape="square" class="avatar-blue">
+    <img src="@/assets/icon_docs.svg" style="width: 65%" alt="" />
   </AppAvatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/image-understand-node-icon.vue b/ui/src/workflow/icons/image-understand-node-icon.vue
index a0b8a8f41..6f58417d2 100644
--- a/ui/src/workflow/icons/image-understand-node-icon.vue
+++ b/ui/src/workflow/icons/image-understand-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
   <AppAvatar shape="square" style="background: #14C0FF;">
-    <img src="@/assets/icon_document.svg" style="width: 65%" alt="" />
+    <img src="@/assets/icon_image.svg" style="width: 65%" alt="" />
   </AppAvatar>
 </template>
 <script setup lang="ts"></script>