From 817864ad5c89532ea211beba6303a29f7dcd4baf Mon Sep 17 00:00:00 2001
From: crazywoola <li.zheng@dentsplysirona.com>
Date: Fri, 19 May 2023 14:41:17 +0800
Subject: [PATCH] feat: add app icon

---
 .../app/(appDetailLayout)/[appId]/layout.tsx           |  2 +-
 .../(datasetDetailLayout)/[datasetId]/layout.tsx       |  2 ++
 web/app/components/app-sidebar/basic.tsx               | 10 +++++-----
 web/app/components/app-sidebar/index.tsx               |  7 ++++---
 web/app/components/app/overview/appCard.tsx            |  3 ++-
 web/models/datasets.ts                                 |  2 ++
 6 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
index 049d908dde..97b0164ea1 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
@@ -49,7 +49,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     return null
   return (
     <div className={cn(s.app, 'flex', 'overflow-hidden')}>
-      <AppSideBar title={response.name} desc={appModeName} navigation={navigation} />
+      <AppSideBar title={response.name} icon={response.icon} icon_background={response.icon_background} desc={appModeName} navigation={navigation} />
       <div className="bg-white grow">{children}</div>
     </div>
   )
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx
index 1dc6578977..48b0bbc9c5 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx
@@ -155,6 +155,8 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     <div className='flex' style={{ height: 'calc(100vh - 56px)' }}>
       {!hideSideBar && <AppSideBar
         title={datasetRes?.name || '--'}
+        icon={datasetRes?.icon || 'https://static.dify.ai/images/dataset-default-icon.png'}
+        icon_background={datasetRes?.icon_background || '#F5F5F5'}
         desc={datasetRes?.description || '--'}
         navigation={navigation}
         extraInfo={<ExtraInfo />}
diff --git a/web/app/components/app-sidebar/basic.tsx b/web/app/components/app-sidebar/basic.tsx
index 4cefafa0c1..7eff33ce01 100644
--- a/web/app/components/app-sidebar/basic.tsx
+++ b/web/app/components/app-sidebar/basic.tsx
@@ -15,7 +15,8 @@ export function randomString(length: number) {
 
 export type IAppBasicProps = {
   iconType?: 'app' | 'api' | 'dataset'
-  iconUrl?: string
+  icon?: string,
+  icon_background?: string,
   name: string
   type: string | React.ReactNode
   hoverTip?: string
@@ -41,13 +42,12 @@ const ICON_MAP = {
   'dataset': <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
 }
 
-export default function AppBasic({ iconUrl, name, type, hoverTip, textStyle, iconType = 'app' }: IAppBasicProps) {
+export default function AppBasic({ icon, icon_background, name, type, hoverTip, textStyle, iconType = 'app' }: IAppBasicProps) {
   return (
     <div className="flex items-start">
-      {iconUrl && (
+      {icon && icon_background && (
         <div className='flex-shrink-0 mr-3'>
-          {/* <img className="inline-block rounded-lg h-9 w-9" src={iconUrl} alt={name} /> */}
-          {ICON_MAP[iconType]}
+          <AppIcon icon={icon} background={icon_background}/>
         </div>
       )}
       <div className="group">
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index cdafcce78e..eb3a444554 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -7,6 +7,8 @@ export type IAppDetailNavProps = {
   iconType?: 'app' | 'dataset'
   title: string
   desc: string
+  icon: string
+  icon_background: string
   navigation: Array<{
     name: string
     href: string
@@ -16,13 +18,12 @@ export type IAppDetailNavProps = {
   extraInfo?: React.ReactNode
 }
 
-const sampleAppIconUrl = 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
 
-const AppDetailNav: FC<IAppDetailNavProps> = ({ title, desc, navigation, extraInfo, iconType = 'app' }) => {
+const AppDetailNav: FC<IAppDetailNavProps> = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }) => {
   return (
     <div className="flex flex-col w-56 overflow-y-auto bg-white border-r border-gray-200 shrink-0">
       <div className="flex flex-shrink-0 p-4">
-        <AppBasic iconType={iconType} iconUrl={sampleAppIconUrl} name={title} type={desc} />
+        <AppBasic iconType={iconType} icon={icon} icon_background={icon_background} name={title} type={desc} />
       </div>
       <nav className="flex-1 p-4 space-y-1 bg-white">
         {navigation.map((item, index) => {
diff --git a/web/app/components/app/overview/appCard.tsx b/web/app/components/app/overview/appCard.tsx
index 663383f047..946a0f5d0a 100644
--- a/web/app/components/app/overview/appCard.tsx
+++ b/web/app/components/app/overview/appCard.tsx
@@ -104,7 +104,8 @@ function AppCard({
         <div className="mb-2.5 flex flex-row items-start justify-between">
           <AppBasic
             iconType={isApp ? 'app' : 'api'}
-            iconUrl={defaultUrl}
+            icon={appInfo.icon}
+            icon_background={appInfo.icon_background}
             name={basicName}
             type={
               isApp
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index 8295e77a55..8f1206024f 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -3,6 +3,8 @@ import { AppMode } from './app'
 export type DataSet = {
   id: string
   name: string
+  icon: string
+  icon_background: string
   description: string
   permission: 'only_me' | 'all_team_members'
   data_source_type: 'upload_file'