From 08cd3c93787215bc0423279083d24b5cae4ad7ce Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 24 Jul 2024 13:56:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=BA=94=E7=94=A8=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/application-workflow/index.vue   | 27 ++++++++++++++--
 .../views/application/ApplicationSetting.vue  | 31 ++++++++++++++++---
 ui/src/views/chat/base/index.vue              | 23 ++++++++++++--
 ui/src/views/chat/embed/index.vue             | 23 ++++++++++++--
 ui/src/views/chat/pc/index.vue                | 26 ++++++++++++++--
 5 files changed, 115 insertions(+), 15 deletions(-)

diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 48542913d..b710a2a9c 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -58,9 +58,29 @@
       >
         <div class="workflow-debug-header" :class="!isDefaultTheme ? 'custom-header' : ''">
           <div class="flex-between">
-            <h4 class="ml-24">
-              {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
-            </h4>
+            <div class="flex align-center">
+              <div class="mr-12 ml-24">
+                <AppAvatar
+                  v-if="isAppIcon(detail?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                >
+                  <img :src="detail?.icon" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="detail?.name"
+                  :name="detail?.name"
+                  pinyinColor
+                  shape="square"
+                  :size="32"
+                />
+              </div>
+
+              <h4>
+                {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
+              </h4>
+            </div>
             <div class="mr-16">
               <el-button link @click="enlarge = !enlarge">
                 <AppIcon
@@ -89,6 +109,7 @@ import Workflow from '@/workflow/index.vue'
 import { menuNodes } from '@/workflow/common/data'
 import { iconComponent } from '@/workflow/icons/utils'
 import applicationApi from '@/api/application'
+import { isAppIcon } from '@/utils/application'
 import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import { datetimeFormat } from '@/utils/time'
 import useStore from '@/stores'
diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
index a120d245e..7f7e9b7a6 100644
--- a/ui/src/views/application/ApplicationSetting.vue
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -273,11 +273,31 @@
           {{ $t('views.application.applicationForm.form.apptest') }}
         </h4>
         <div class="dialog-bg">
-          <h4 class="p-24">
-            {{
-              applicationForm?.name || $t('views.application.applicationForm.form.appName.label')
-            }}
-          </h4>
+          <div class="flex align-center p-24">
+            <div class="mr-12">
+              <AppAvatar
+                v-if="isAppIcon(applicationForm?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="applicationForm?.icon" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="applicationForm?.name"
+                :name="applicationForm?.name"
+                pinyinColor
+                shape="square"
+                :size="32"
+              />
+            </div>
+
+            <h4>
+              {{
+                applicationForm?.name || $t('views.application.applicationForm.form.appName.label')
+              }}
+            </h4>
+          </div>
           <div class="scrollbar-height">
             <AiChat :data="applicationForm"></AiChat>
           </div>
@@ -312,6 +332,7 @@ import AddDatasetDialog from './component/AddDatasetDialog.vue'
 import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
 import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
 import applicationApi from '@/api/application'
+import { isAppIcon } from '@/utils/application'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ApplicationFormType } from '@/api/type/application'
 import type { Provider } from '@/api/type/model'
diff --git a/ui/src/views/chat/base/index.vue b/ui/src/views/chat/base/index.vue
index 19a7f5e1f..7336d7a48 100644
--- a/ui/src/views/chat/base/index.vue
+++ b/ui/src/views/chat/base/index.vue
@@ -1,8 +1,26 @@
 <template>
   <div class="chat layout-bg" v-loading="loading">
     <div class="chat__header" :class="!isDefaultTheme ? 'custom-header' : ''">
-      <div class="chat-width">
-        <h2 class="ml-24">{{ applicationDetail?.name }}</h2>
+      <div class="chat-width flex align-center">
+        <div class="mr-12 ml-24">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h2>{{ applicationDetail?.name }}</h2>
       </div>
     </div>
     <div class="chat__main chat-width">
@@ -18,6 +36,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 const route = useRoute()
 const {
diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
index 20f53c16c..29f4b1dbe 100644
--- a/ui/src/views/chat/embed/index.vue
+++ b/ui/src/views/chat/embed/index.vue
@@ -1,8 +1,26 @@
 <template>
   <div class="chat-embed layout-bg" v-loading="loading">
     <div class="chat-embed__header" :class="!isDefaultTheme ? 'custom-header' : ''">
-      <div class="chat-width">
-        <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
+      <div class="chat-width flex align-center">
+        <div class="mr-12 ml-24">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h4>{{ applicationDetail?.name }}</h4>
       </div>
     </div>
     <div class="chat-embed__main">
@@ -81,6 +99,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 const route = useRoute()
 const {
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
index 6ccecbb9f..4194a4ab9 100644
--- a/ui/src/views/chat/pc/index.vue
+++ b/ui/src/views/chat/pc/index.vue
@@ -1,7 +1,27 @@
 <template>
   <div class="chat-pc layout-bg" :class="classObj" v-loading="loading">
     <div class="chat-pc__header" :class="!isDefaultTheme ? 'custom-header' : ''">
-      <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
+      <div class="flex align-center">
+        <div class="mr-12 ml-24">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h4>{{ applicationDetail?.name }}</h4>
+      </div>
     </div>
     <div class="flex">
       <div class="chat-pc__left border-r">
@@ -108,6 +128,7 @@ import { reactive, ref, onMounted, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { marked } from 'marked'
 import { saveAs } from 'file-saver'
+import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 
 import useResize from '@/layout/hooks/useResize'
@@ -204,10 +225,9 @@ function getAppProfile() {
     .asyncGetAppProfile(loading)
     .then((res: any) => {
       applicationDetail.value = res.data
-      if (res.data?.show_history) { 
+      if (res.data?.show_history) {
         getChatLog(applicationDetail.value.id)
       }
-
     })
     .catch(() => {
       applicationAvailable.value = false