feat: custom webapp logo (#1766)

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

@@ -55,6 +55,7 @@ const Main: FC<IMainProps> = ({
   const [inited, setInited] = useState<boolean>(false)
   const [plan, setPlan] = useState<string>('basic') // basic/plus/pro
   const [canReplaceLogo, setCanReplaceLogo] = useState<boolean>(false)
+  const [customConfig, setCustomConfig] = useState<any>(null)
   // Can Use metadata(https://beta.nextjs.org/docs/api-reference/metadata) to set title. But it only works in server side client.
   useEffect(() => {
     if (siteInfo?.title) {
@@ -283,10 +284,11 @@ const Main: FC<IMainProps> = ({
     (async () => {
       try {
         const [appData, conversationData, appParams]: any = await fetchInitData()
-        const { app_id: appId, site: siteInfo, plan, can_replace_logo }: any = appData
+        const { app_id: appId, site: siteInfo, plan, can_replace_logo, custom_config }: any = appData
         setAppId(appId)
         setPlan(plan)
         setCanReplaceLogo(can_replace_logo)
+        setCustomConfig(custom_config)
         const tempIsPublicVersion = siteInfo.prompt_public
         setIsPublicVersion(tempIsPublicVersion)
         const prompt_template = ''
@@ -592,6 +594,7 @@ const Main: FC<IMainProps> = ({
             onInputsChange={setCurrInputs}
             plan={plan}
             canReplaceLogo={canReplaceLogo}
+            customConfig={customConfig}
           ></ConfigScene>
           {
             shouldReload && (

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

@@ -27,6 +27,10 @@ export type IWelcomeProps = {
   onInputsChange: (inputs: Record<string, any>) => void
   plan: string
   canReplaceLogo?: boolean
+  customConfig?: {
+    remove_webapp_brand?: boolean
+    replace_webapp_logo?: string
+  }
 }
 
 const Welcome: FC<IWelcomeProps> = ({
@@ -34,13 +38,12 @@ const Welcome: FC<IWelcomeProps> = ({
   hasSetInputs,
   isPublicVersion,
   siteInfo,
-  plan,
   promptConfig,
   onStartChat,
   canEditInputs,
   savedInputs,
   onInputsChange,
-  canReplaceLogo,
+  customConfig,
 }) => {
   const { t } = useTranslation()
   const hasVar = promptConfig.prompt_variables.length > 0
@@ -353,10 +356,20 @@ const Welcome: FC<IWelcomeProps> = ({
               </div>
               : <div>
               </div>}
-            {!canReplaceLogo && <a className='flex items-center pr-3 space-x-3' href="https://dify.ai/" target="_blank">
-              <span className='uppercase'>{t('share.chat.powerBy')}</span>
-              <FootLogo />
-            </a>}
+            {
+              customConfig?.remove_webapp_brand
+                ? null
+                : (
+                  <a className='flex items-center pr-3 space-x-3' href="https://dify.ai/" target="_blank">
+                    <span className='uppercase'>{t('share.chat.powerBy')}</span>
+                    {
+                      customConfig?.replace_webapp_logo
+                        ? <img src={customConfig?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
+                        : <FootLogo />
+                    }
+                  </a>
+                )
+            }
           </div>
         )}
       </div>