feat: logo (#1356)

2023-10-16 15:26:25 +08:00
parent 2feb16d957
commit 61e816f24c
34 changed files with 101 additions and 160 deletions
--- a/web/app/components/app/chat/answer/index.tsx
+++ b/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`}>
--- a/web/app/components/app/chat/index.tsx
+++ b/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}
--- a/web/app/components/base/logo/logo-embeded-chat-avatar.tsx
+++ b/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
--- a/web/app/components/base/logo/logo-embeded-chat-header.tsx
+++ b/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
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/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
--- a/web/app/components/header/account-about/index.module.css
+++ b/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;
--- a/web/app/components/header/account-about/index.tsx
+++ b/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>
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/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()}>
--- a/web/app/components/header/account-setting/members-page/index.module.css
+++ b/web/app/components/header/account-setting/members-page/index.module.css
@@ -1,9 +0,0 @@
-.logo-icon {
-  width: 40px;
-  height: 40px;
-  background: #ffffff url(../../assets/logo-icon.png) center center no-repeat;
-  background-size: contain;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  border-radius: 8px;
-  border: 0.5px solid rgba(0, 0, 0, 0.05);
-}
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -1,6 +1,5 @@
 'use client'
 import { useState } from 'react'
-import cn from 'classnames'
 import useSWR from 'swr'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
@@ -8,7 +7,6 @@ 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>
--- a/web/app/components/header/assets/logo-icon.png
+++ b/web/app/components/header/assets/logo-icon.png
--- a/web/app/components/header/assets/logo-text.svg
+++ b/web/app/components/header/assets/logo-text.svg
@@ -1,6 +0,0 @@
-<svg width="50" height="26" viewBox="0 0 50 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.61796 2.064C8.37796 2.064 9.92196 2.408 11.25 3.096C12.594 3.784 13.626 4.768 14.346 6.048C15.082 7.312 15.45 8.784 15.45 10.464C15.45 12.144 15.082 13.616 14.346 14.88C13.626 16.128 12.594 17.096 11.25 17.784C9.92196 18.472 8.37796 18.816 6.61796 18.816H0.761963V2.064H6.61796ZM6.49796 15.96C8.25796 15.96 9.61796 15.48 10.578 14.52C11.538 13.56 12.018 12.208 12.018 10.464C12.018 8.72 11.538 7.36 10.578 6.384C9.61796 5.392 8.25796 4.896 6.49796 4.896H4.12196V15.96H6.49796Z" fill="#1D2939"/>
-<path d="M20.8691 3.936C20.2771 3.936 19.7811 3.752 19.3811 3.384C18.9971 3 18.8051 2.528 18.8051 1.968C18.8051 1.408 18.9971 0.944 19.3811 0.576C19.7811 0.192 20.2771 0 20.8691 0C21.4611 0 21.9491 0.192 22.3331 0.576C22.7331 0.944 22.9331 1.408 22.9331 1.968C22.9331 2.528 22.7331 3 22.3331 3.384C21.9491 3.752 21.4611 3.936 20.8691 3.936ZM22.5251 5.52V18.816H19.1651V5.52H22.5251Z" fill="#1D2939"/>
-<path d="M33.1408 8.28H30.8128V18.816H27.4048V8.28H25.8928V5.52H27.4048V4.848C27.4048 3.216 27.8688 2.016 28.7968 1.248C29.7248 0.48 31.1248 0.12 32.9968 0.168001V3C32.1808 2.984 31.6128 3.12 31.2928 3.408C30.9728 3.696 30.8128 4.216 30.8128 4.968V5.52H33.1408V8.28Z" fill="#1D2939"/>
-<path d="M49.2382 5.52L41.0062 25.104H37.4302L40.3102 18.48L34.9822 5.52H38.7502L42.1822 14.808L45.6622 5.52H49.2382Z" fill="#1D2939"/>
-</svg>
--- a/web/app/components/header/assets/logo.png
+++ b/web/app/components/header/assets/logo.png
--- a/web/app/components/header/index.module.css
+++ b/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;
--- a/web/app/components/header/index.tsx
+++ b/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'>
--- a/web/app/components/share/chat/welcome/icons/logo.png
+++ b/web/app/components/share/chat/welcome/icons/logo.png
--- a/web/app/components/share/chat/welcome/massive-component.tsx
+++ b/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' />
 )
--- a/web/app/components/share/chat/welcome/style.module.css
+++ b/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;
 }
--- a/web/app/components/share/chatbot/icons/dify-header.svg
+++ b/web/app/components/share/chatbot/icons/dify-header.svg
--- a/web/app/components/share/chatbot/icons/dify.svg
+++ b/web/app/components/share/chatbot/icons/dify.svg
--- a/web/app/components/share/chatbot/index.tsx
+++ b/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>)
--- a/web/app/components/share/chatbot/style.module.css
+++ b/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;
 }
--- a/web/app/components/share/chatbot/welcome/icons/logo.png
+++ b/web/app/components/share/chatbot/welcome/icons/logo.png
--- a/web/app/components/share/chatbot/welcome/massive-component.tsx
+++ b/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' />
 )
--- a/web/app/components/share/chatbot/welcome/style.module.css
+++ b/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;
 }