feat: logo (#1356)

web/app/components/app/chat/answer/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -44,7 +44,7 @@ export type IAnswerProps = {
   onSubmitAnnotation?: SubmitAnnotationFunc
   displayScene: DisplayScene
   isResponsing?: boolean
-  answerIconClassName?: string
+  answerIcon?: ReactNode
   thoughts?: ThoughtItem[]
   citation?: CitationItem[]
   isThinking?: boolean
@@ -53,7 +53,7 @@ export type IAnswerProps = {
   isShowCitationHitInfo?: boolean
 }
 // The component needs to maintain its own state to control whether to display input component
-const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedbackEdit = false, onFeedback, onSubmitAnnotation, displayScene = 'web', isResponsing, answerIconClassName, thoughts, citation, isThinking, dataSets, isShowCitation, isShowCitationHitInfo = false }) => {
+const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedbackEdit = false, onFeedback, onSubmitAnnotation, displayScene = 'web', isResponsing, answerIcon, thoughts, citation, isThinking, dataSets, isShowCitation, isShowCitationHitInfo = false }) => {
   const { id, content, more, feedback, adminFeedback, annotation: initAnnotation } = item
   const [showEdit, setShowEdit] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -168,13 +168,17 @@ const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedba
   return (
     <div key={id}>
       <div className='flex items-start'>
-        <div className={`${s.answerIcon} ${answerIconClassName} w-10 h-10 shrink-0`}>
-          {isResponsing
-            && <div className={s.typeingIcon}>
-              <LoadingAnim type='avatar' />
+        {
+          answerIcon || (
+            <div className={`${s.answerIcon} w-10 h-10 shrink-0`}>
+              {isResponsing
+                && <div className={s.typeingIcon}>
+                  <LoadingAnim type='avatar' />
+                </div>
+              }
             </div>
-          }
-        </div>
+          )
+        }
         <div className={cn(s.answerWrapWrap, 'chat-answer-container')}>
           <div className={`${s.answerWrap} ${showEdit ? 'w-full' : ''}`}>
             <div className={`${s.answer} relative text-sm text-gray-900`}>

web/app/components/app/chat/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import cn from 'classnames'
@@ -49,7 +49,7 @@ export type IChatProps = {
   suggestionList?: string[]
   isShowSpeechToText?: boolean
   isShowCitation?: boolean
-  answerIconClassName?: string
+  answerIcon?: ReactNode
   isShowConfigElem?: boolean
   dataSets?: DataSet[]
   isShowCitationHitInfo?: boolean
@@ -78,7 +78,7 @@ const Chat: FC<IChatProps> = ({
   suggestionList,
   isShowSpeechToText,
   isShowCitation,
-  answerIconClassName,
+  answerIcon,
   isShowConfigElem,
   dataSets,
   isShowCitationHitInfo,
@@ -179,7 +179,7 @@ const Chat: FC<IChatProps> = ({
               onSubmitAnnotation={onSubmitAnnotation}
               displayScene={displayScene ?? 'web'}
               isResponsing={isResponsing && isLast}
-              answerIconClassName={answerIconClassName}
+              answerIcon={answerIcon}
               thoughts={thoughts}
               citation={citation}
               isThinking={isThinking}

web/app/components/base/logo/logo-embeded-chat-avatar.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react'
+
+type LogoEmbededChatAvatarProps = {
+  className?: string
+}
+const LogoEmbededChatAvatar: FC<LogoEmbededChatAvatarProps> = ({
+  className,
+}) => {
+  return (
+    <img
+      src='/logo/logo-embeded-chat-avatar.png'
+      className={`block w-10 h-10 ${className}`}
+      alt='logo'
+    />
+  )
+}
+
+export default LogoEmbededChatAvatar

web/app/components/base/logo/logo-embeded-chat-header.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react'
+
+type LogoEmbededChatHeaderProps = {
+  className?: string
+}
+const LogoEmbededChatHeader: FC<LogoEmbededChatHeaderProps> = ({
+  className,
+}) => {
+  return (
+    <img
+      src='/logo/logo-embeded-chat-header.png'
+      className={`block w-auto h-6 ${className}`}
+      alt='logo'
+    />
+  )
+}
+
+export default LogoEmbededChatHeader

web/app/components/base/logo/logo-site.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react'
+
+type LogoSiteProps = {
+  className?: string
+}
+const LogoSite: FC<LogoSiteProps> = ({
+  className,
+}) => {
+  return (
+    <img
+      src='/logo/logo-site.png'
+      className={`block w-auto h-10 ${className}`}
+      alt='logo'
+    />
+  )
+}
+
+export default LogoSite

web/app/components/header/account-about/index.module.css

@@ -1,16 +1,3 @@
-.logo-icon {
-  background: url(../assets/logo-icon.png) center center no-repeat;
-  background-size: 32px;
-  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 4px 6px -1px rgba(0, 0, 0, 0.05);
-}
-
-.logo-text {
-  width: 74.09px;
-  height: 15.32px;
-  background: url(../assets/logo-text.svg) center center no-repeat;
-  background-size: contain;
-}
-
 .modal {
   max-width: 480px !important;
   width: 480px !important;

web/app/components/header/account-about/index.tsx

@@ -6,10 +6,10 @@ import { useContext } from 'use-context-selector'
 import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
-import { Dify } from '@/app/components/base/icons/src/public/common'
 import type { LangGeniusVersionResponse } from '@/models/common'
 import { IS_CE_EDITION } from '@/config'
 import I18n from '@/context/i18n'
+import LogoSite from '@/app/components/base/logo/logo-site'
 
 type IAccountSettingProps = {
   langeniusVersionInfo: LangGeniusVersionResponse
@@ -33,16 +33,12 @@ export default function AccountAbout({
       onClose={() => { }}
       className={s.modal}
     >
-      <div className='relative'>
+      <div className='relative pt-4'>
         <div className='absolute -top-2 -right-4 flex justify-center items-center w-8 h-8 cursor-pointer' onClick={onCancel}>
           <XClose className='w-4 h-4 text-gray-500' />
         </div>
         <div>
-          <div className={classNames(
-            s['logo-icon'],
-            'mx-auto mb-3 w-12 h-12 bg-white rounded-xl border-[0.5px] border-gray-200',
-          )} />
-          <Dify className='mx-auto mb-2' />
+          <LogoSite className='mx-auto mb-2' />
           <div className='mb-3 text-center text-xs font-normal text-gray-500'>Version {langeniusVersionInfo?.current_version}</div>
           <div className='mb-4 text-center text-xs font-normal text-gray-700'>
             <div>© 2023 LangGenius, Inc., Contributors.</div>

web/app/components/header/account-dropdown/index.tsx

@@ -104,15 +104,19 @@ export default function AppSelector() {
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
                       </Link>
                     </Menu.Item>
-                    <Menu.Item>
-                      <div className={classNames(itemClassName, 'justify-between')} onClick={() => setAboutVisible(true)}>
-                        <div>{t('common.userProfile.about')}</div>
-                        <div className='flex items-center'>
-                          <div className='mr-2 text-xs font-normal text-gray-500'>{langeniusVersionInfo.current_version}</div>
-                          <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
-                        </div>
-                      </div>
-                    </Menu.Item>
+                    {
+                      document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
+                        <Menu.Item>
+                          <div className={classNames(itemClassName, 'justify-between')} onClick={() => setAboutVisible(true)}>
+                            <div>{t('common.userProfile.about')}</div>
+                            <div className='flex items-center'>
+                              <div className='mr-2 text-xs font-normal text-gray-500'>{langeniusVersionInfo.current_version}</div>
+                              <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
+                            </div>
+                          </div>
+                        </Menu.Item>
+                      )
+                    }
                   </div>
                   <Menu.Item>
                     <div className='p-1' onClick={() => handleLogout()}>

web/app/components/header/account-setting/members-page/index.tsx

@@ -1,14 +1,12 @@
 'use client'
 import { useState } from 'react'
-import cn from 'classnames'
 import useSWR from 'swr'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useContext } from 'use-context-selector'
 import { UserPlusIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
-import s from './index.module.css'
 import InviteModal from './invite-modal'
 import InvitedModal from './invited-modal'
 import Operation from './operation'
@@ -40,7 +38,6 @@ const MembersPage = () => {
     <>
       <div>
         <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
-          <div className={cn(s['logo-icon'], 'shrink-0')}></div>
           <div className='grow mx-2'>
             <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
             <div className='text-xs text-gray-500'>{t('common.userProfile.workspace')}</div>

web/app/components/header/index.module.css

@@ -8,13 +8,6 @@
   border-top: 4px solid #06AED4;
 }
 
-.logo {
-  width: 96px;
-  height: 40px;
-  background: url(~@/app/components/share/chat/welcome/icons/logo.png) center center no-repeat;
-  background-size: contain;
-}
-
 .alpha {
   width: 12px;
   height: 12px;

web/app/components/header/index.tsx

@@ -8,9 +8,9 @@ import EnvNav from './env-nav'
 import ExploreNav from './explore-nav'
 import GithubStar from './github-star'
 import PluginNav from './plugin-nav'
-import s from './index.module.css'
 import { WorkspaceProvider } from '@/context/workspace-context'
 import { useAppContext } from '@/context/app-context'
+import LogoSite from '@/app/components/base/logo/logo-site'
 
 const navClassName = `
   flex items-center relative mr-3 px-3 h-8 rounded-xl
@@ -24,9 +24,8 @@ const Header = () => {
     <>
       <div className='flex items-center'>
         <Link href="/apps" className='flex items-center mr-4'>
-          <div className={s.logo} />
+          <LogoSite />
         </Link>
-        {/* @ts-expect-error Async Server Component */}
         <GithubStar />
       </div>
       <div className='flex items-center'>

web/app/components/share/chat/welcome/massive-component.tsx

@@ -9,6 +9,7 @@ import {
 import s from './style.module.css'
 import type { SiteInfo } from '@/models/share'
 import Button from '@/app/components/base/button'
+import LogoSite from '@/app/components/base/logo/logo-site'
 
 export const AppInfo: FC<{ siteInfo: SiteInfo }> = ({ siteInfo }) => {
   return (
@@ -69,5 +70,5 @@ export const EditBtn = ({ className, onClick }: { className?: string; onClick: (
 }
 
 export const FootLogo = () => (
-  <div className={s.logo} />
+  <LogoSite className='!h-5' />
 )

web/app/components/share/chat/welcome/style.module.css

@@ -19,11 +19,4 @@
 
 .customBtn {
   width: 136px;
-}
-
-.logo {
-  width: 48px;
-  height: 20px;
-  background: url(./icons/logo.png) center center no-repeat;
-  background-size: contain;
 }

web/app/components/share/chatbot/index.tsx

@@ -26,6 +26,8 @@ import { replaceStringWithValues } from '@/app/components/app/configuration/prom
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import type { InstalledApp } from '@/models/explore'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import LogoHeader from '@/app/components/base/logo/logo-embeded-chat-header'
+import LogoAvatar from '@/app/components/base/logo/logo-embeded-chat-avatar'
 
 export type IMainProps = {
   isInstalledApp?: boolean
@@ -488,7 +490,7 @@ const Main: FC<IMainProps> = ({
   }
 
   const difyIcon = (
-    <div className={s.difyHeader}></div>
+    <LogoHeader />
   )
 
   if (appUnavailable)
@@ -567,7 +569,7 @@ const Main: FC<IMainProps> = ({
                     suggestionList={suggestQuestions}
                     displayScene='web'
                     isShowSpeechToText={speechToTextConfig?.enabled}
-                    answerIconClassName={s.difyIcon}
+                    answerIcon={<LogoAvatar className='relative shrink-0' />}
                   />
                 </div>
               </div>)

web/app/components/share/chatbot/style.module.css

@@ -1,14 +1,3 @@
 .installedApp {
   height: calc(100vh - 74px);
-}
-
-.difyIcon {
-  background-image: url(./icons/dify.svg);
-}
-
-.difyHeader {
-  width: 24px;
-  height: 24px;
-  background: url(./icons/dify-header.svg) center center no-repeat;
-  background-size: contain;
 }

web/app/components/share/chatbot/welcome/massive-component.tsx

@@ -9,6 +9,7 @@ import {
 import s from './style.module.css'
 import type { SiteInfo } from '@/models/share'
 import Button from '@/app/components/base/button'
+import LogoSite from '@/app/components/base/logo/logo-site'
 
 export const AppInfo: FC<{ siteInfo: SiteInfo }> = ({ siteInfo }) => {
   const { t } = useTranslation()
@@ -70,5 +71,5 @@ export const EditBtn = ({ className, onClick }: { className?: string; onClick: (
 }
 
 export const FootLogo = () => (
-  <div className={s.logo} />
+  <LogoSite className='!h-5' />
 )

web/app/components/share/chatbot/welcome/style.module.css

@@ -19,11 +19,4 @@
 
 .customBtn {
   width: 136px;
-}
-
-.logo {
-  width: 48px;
-  height: 20px;
-  background: url(./icons/logo.png) center center no-repeat;
-  background-size: contain;
 }