From e21cdff88c39e5b46f6e5e88cea60012ce46c489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E4=BC=9F=E5=BC=BA?= <iamjoel007@gmail.com>
Date: Mon, 22 May 2023 15:10:00 +0800
Subject: [PATCH] chore: handle app title installed

---
 web/app/components/header/index.tsx           |  2 +-
 web/app/components/share/chat/index.tsx       | 20 ++++++++------
 .../share/chat/sidebar/app-info/index.tsx     | 27 +++++++++++++++++++
 .../components/share/chat/sidebar/index.tsx   | 17 +++++++++---
 .../components/share/chat/style.module.css    |  2 +-
 web/config/index.ts                           |  2 ++
 6 files changed, 57 insertions(+), 13 deletions(-)
 create mode 100644 web/app/components/share/chat/sidebar/app-info/index.tsx

diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 11b5859923..9149d5f69e 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -17,7 +17,7 @@ import { useDatasetsContext } from '@/context/datasets-context'
 
 const BuildAppsIcon = ({isSelected}: {isSelected: boolean}) => (
   <svg className='mr-1' width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M13.6666 4.85221L7.99998 8.00036M7.99998 8.00036L2.33331 4.85221M7.99998 8.00036L8 14.3337M14 10.7061V5.29468C14 5.06625 14 4.95204 13.9663 4.85017C13.9366 4.76005 13.8879 4.67733 13.8236 4.60754C13.7509 4.52865 13.651 4.47318 13.4514 4.36224L8.51802 1.6215C8.32895 1.51646 8.23442 1.46395 8.1343 1.44336C8.0457 1.42513 7.95431 1.42513 7.8657 1.44336C7.76559 1.46395 7.67105 1.51646 7.48198 1.6215L2.54865 4.36225C2.34896 4.47318 2.24912 4.52865 2.17642 4.60754C2.11211 4.67733 2.06343 4.76005 2.03366 4.85017C2 4.95204 2 5.06625 2 5.29468V10.7061C2 10.9345 2 11.0487 2.03366 11.1506C2.06343 11.2407 2.11211 11.3234 2.17642 11.3932C2.24912 11.4721 2.34897 11.5276 2.54865 11.6385L7.48198 14.3793C7.67105 14.4843 7.76559 14.5368 7.8657 14.5574C7.95431 14.5756 8.0457 14.5756 8.1343 14.5574C8.23442 14.5368 8.32895 14.4843 8.51802 14.3793L13.4514 11.6385C13.651 11.5276 13.7509 11.4721 13.8236 11.3932C13.8879 11.3234 13.9366 11.2407 13.9663 11.1506C14 11.0487 14 10.9345 14 10.7061Z" stroke={isSelected ? '#155EEF': '#667085'} stroke-width="1.25" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M13.6666 4.85221L7.99998 8.00036M7.99998 8.00036L2.33331 4.85221M7.99998 8.00036L8 14.3337M14 10.7061V5.29468C14 5.06625 14 4.95204 13.9663 4.85017C13.9366 4.76005 13.8879 4.67733 13.8236 4.60754C13.7509 4.52865 13.651 4.47318 13.4514 4.36224L8.51802 1.6215C8.32895 1.51646 8.23442 1.46395 8.1343 1.44336C8.0457 1.42513 7.95431 1.42513 7.8657 1.44336C7.76559 1.46395 7.67105 1.51646 7.48198 1.6215L2.54865 4.36225C2.34896 4.47318 2.24912 4.52865 2.17642 4.60754C2.11211 4.67733 2.06343 4.76005 2.03366 4.85017C2 4.95204 2 5.06625 2 5.29468V10.7061C2 10.9345 2 11.0487 2.03366 11.1506C2.06343 11.2407 2.11211 11.3234 2.17642 11.3932C2.24912 11.4721 2.34897 11.5276 2.54865 11.6385L7.48198 14.3793C7.67105 14.4843 7.76559 14.5368 7.8657 14.5574C7.95431 14.5756 8.0457 14.5756 8.1343 14.5574C8.23442 14.5368 8.32895 14.4843 8.51802 14.3793L13.4514 11.6385C13.651 11.5276 13.7509 11.4721 13.8236 11.3932C13.8879 11.3234 13.9366 11.2407 13.9663 11.1506C14 11.0487 14 10.9345 14 10.7061Z" stroke={isSelected ? '#155EEF': '#667085'} strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
   </svg>
 )
 
diff --git a/web/app/components/share/chat/index.tsx b/web/app/components/share/chat/index.tsx
index 2fcba277a3..6d174fea20 100644
--- a/web/app/components/share/chat/index.tsx
+++ b/web/app/components/share/chat/index.tsx
@@ -444,6 +444,7 @@ const Main: FC<IMainProps> = ({
         currentId={currConversationId}
         copyRight={siteInfo.copyright || siteInfo.title}
         isInstalledApp={isInstalledApp}
+        siteInfo={siteInfo}
       />
     )
   }
@@ -456,14 +457,17 @@ const Main: FC<IMainProps> = ({
 
   return (
     <div className='bg-gray-100'>
-      <Header
-        title={siteInfo.title}
-        icon={siteInfo.icon || ''}
-        icon_background={siteInfo.icon_background || '#FFEAD5'}
-        isMobile={isMobile}
-        onShowSideBar={showSidebar}
-        onCreateNewChat={() => handleConversationIdChange('-1')}
-      />
+      {!isInstalledApp && (
+        <Header
+          title={siteInfo.title}
+          icon={siteInfo.icon || ''}
+          icon_background={siteInfo.icon_background}
+          isMobile={isMobile}
+          onShowSideBar={showSidebar}
+          onCreateNewChat={() => handleConversationIdChange('-1')}
+        />
+      )}
+      
       {/* {isNewConversation ? 'new' : 'exist'}
         {JSON.stringify(newConversationInputs ? newConversationInputs : {})}
         {JSON.stringify(existConversationInputs ? existConversationInputs : {})} */}
diff --git a/web/app/components/share/chat/sidebar/app-info/index.tsx b/web/app/components/share/chat/sidebar/app-info/index.tsx
new file mode 100644
index 0000000000..d3987faa90
--- /dev/null
+++ b/web/app/components/share/chat/sidebar/app-info/index.tsx
@@ -0,0 +1,27 @@
+'use client'
+import React, { FC } from 'react'
+import cn  from 'classnames'
+import { appDefaultIconBackground } from '@/config/index'
+import AppIcon from '@/app/components/base/app-icon'
+
+export interface IAppInfoProps {
+  className?: string
+  icon: string
+  icon_background?: string
+  name: string
+}
+
+const AppInfo: FC<IAppInfoProps> = ({
+  className,
+  icon,
+  icon_background,
+  name
+}) => {
+  return (
+    <div className={cn(className, 'flex items-center space-x-3')}>
+      <AppIcon size="small" icon={icon} background={icon_background || appDefaultIconBackground} />
+      <div className='w-0 grow text-sm font-semibold text-gray-800 overflow-hidden  text-ellipsis whitespace-nowrap'>{name}</div>
+    </div>
+  )
+}
+export default React.memo(AppInfo)
diff --git a/web/app/components/share/chat/sidebar/index.tsx b/web/app/components/share/chat/sidebar/index.tsx
index 0333db8d41..e0bdc2befa 100644
--- a/web/app/components/share/chat/sidebar/index.tsx
+++ b/web/app/components/share/chat/sidebar/index.tsx
@@ -7,8 +7,9 @@ import {
 } from '@heroicons/react/24/outline'
 import { ChatBubbleOvalLeftEllipsisIcon as ChatBubbleOvalLeftEllipsisSolidIcon, } from '@heroicons/react/24/solid'
 import Button from '../../../base/button'
+import AppInfo from '@/app/components/share/chat/sidebar/app-info'
 // import Card from './card'
-import type { ConversationItem } from '@/models/share'
+import type { ConversationItem, SiteInfo } from '@/models/share'
 
 function classNames(...classes: any[]) {
   return classes.filter(Boolean).join(' ')
@@ -22,6 +23,7 @@ export type ISidebarProps = {
   onCurrentIdChange: (id: string) => void
   list: ConversationItem[]
   isInstalledApp: boolean
+  siteInfo: SiteInfo
 }
 
 const Sidebar: FC<ISidebarProps> = ({
@@ -29,18 +31,27 @@ const Sidebar: FC<ISidebarProps> = ({
   currentId,
   onCurrentIdChange,
   list,
-  isInstalledApp
+  isInstalledApp,
+  siteInfo,
 }) => {
   const { t } = useTranslation()
   return (
     <div
       className={
         classNames(
-          isInstalledApp ? 'tablet:h-[calc(100vh_-_120px)]' : 'tablet:h-[calc(100vh_-_3rem)]',
+          isInstalledApp ? 'tablet:h-[calc(100vh_-_58px)]' : 'tablet:h-[calc(100vh_-_3rem)]',
           "shrink-0 flex flex-col overflow-y-auto bg-white pc:w-[244px] tablet:w-[192px] mobile:w-[240px]  border-r border-gray-200 mobile:h-screen"
         )
       }
     >
+      {isInstalledApp && (
+        <AppInfo
+          className='my-4 px-4'
+          name={siteInfo.title || ''}
+          icon={siteInfo.icon || ''}
+          icon_background={siteInfo.icon_background}
+        />
+      )}
       {list.length < MAX_CONVERSATION_LENTH && (
         <div className="flex flex-shrink-0 p-4 !pb-0">
           <Button
diff --git a/web/app/components/share/chat/style.module.css b/web/app/components/share/chat/style.module.css
index 402ced89d7..c3edd62493 100644
--- a/web/app/components/share/chat/style.module.css
+++ b/web/app/components/share/chat/style.module.css
@@ -1,3 +1,3 @@
 .installedApp {
-  height: calc(100vh - 120px);
+  height: calc(100vh - 58px);
 }
\ No newline at end of file
diff --git a/web/config/index.ts b/web/config/index.ts
index ec7784459f..3c6f687d7d 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -97,5 +97,7 @@ export const VAR_ITEM_TEMPLATE = {
   required: true
 }
 
+export const appDefaultIconBackground = '#D5F5F6'
+