feat: web app support some feature (#1753)

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

@@ -70,17 +70,18 @@ const Main: FC<IMainProps> = ({
   const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
   const [inited, setInited] = useState<boolean>(false)
   const [plan, setPlan] = useState<string>('basic') // basic/plus/pro
+  const [canReplaceLogo, setCanReplaceLogo] = useState<boolean>(false)
   // in mobile, show sidebar by click button
   const [isShowSidebar, { setTrue: showSidebar, setFalse: hideSidebar }] = useBoolean(false)
   // 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) {
-      if (plan !== 'basic')
+      if (canReplaceLogo)
         document.title = `${siteInfo.title}`
       else
         document.title = `${siteInfo.title} - Powered by Dify`
     }
-  }, [siteInfo?.title, plan])
+  }, [siteInfo?.title, canReplaceLogo])
 
   /*
   * conversation info
@@ -363,9 +364,10 @@ const Main: FC<IMainProps> = ({
     (async () => {
       try {
         const [appData, conversationData, appParams]: any = await fetchInitData()
-        const { app_id: appId, site: siteInfo, plan }: any = appData
+        const { app_id: appId, site: siteInfo, plan, can_replace_logo }: any = appData
         setAppId(appId)
         setPlan(plan)
+        setCanReplaceLogo(can_replace_logo)
         const tempIsPublicVersion = siteInfo.prompt_public
         setIsPublicVersion(tempIsPublicVersion)
         const prompt_template = ''
@@ -733,6 +735,7 @@ const Main: FC<IMainProps> = ({
             savedInputs={currInputs as Record<string, any>}
             onInputsChange={setCurrInputs}
             plan={plan}
+            canReplaceLogo={canReplaceLogo}
           ></ConfigSence>
 
           {

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

@@ -26,6 +26,7 @@ export type IWelcomeProps = {
   savedInputs: Record<string, any>
   onInputsChange: (inputs: Record<string, any>) => void
   plan?: string
+  canReplaceLogo?: boolean
 }
 
 const Welcome: FC<IWelcomeProps> = ({
@@ -39,6 +40,7 @@ const Welcome: FC<IWelcomeProps> = ({
   canEidtInpus,
   savedInputs,
   onInputsChange,
+  canReplaceLogo,
 }) => {
   const { t } = useTranslation()
   const hasVar = promptConfig.prompt_variables.length > 0
@@ -350,7 +352,7 @@ const Welcome: FC<IWelcomeProps> = ({
               </div>
               : <div>
               </div>}
-            {plan === 'basic' && <a className='flex items-center pr-3 space-x-3' href="https://dify.ai/" target="_blank">
+            {!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>}

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

@@ -54,15 +54,16 @@ const Main: FC<IMainProps> = ({
   const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
   const [inited, setInited] = useState<boolean>(false)
   const [plan, setPlan] = useState<string>('basic') // basic/plus/pro
+  const [canReplaceLogo, setCanReplaceLogo] = useState<boolean>(false)
   // 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) {
-      if (plan !== 'basic')
+      if (canReplaceLogo)
         document.title = `${siteInfo.title}`
       else
         document.title = `${siteInfo.title} - Powered by Dify`
     }
-  }, [siteInfo?.title, plan])
+  }, [siteInfo?.title, canReplaceLogo])
 
   /*
   * conversation info
@@ -282,9 +283,10 @@ const Main: FC<IMainProps> = ({
     (async () => {
       try {
         const [appData, conversationData, appParams]: any = await fetchInitData()
-        const { app_id: appId, site: siteInfo, plan }: any = appData
+        const { app_id: appId, site: siteInfo, plan, can_replace_logo }: any = appData
         setAppId(appId)
         setPlan(plan)
+        setCanReplaceLogo(can_replace_logo)
         const tempIsPublicVersion = siteInfo.prompt_public
         setIsPublicVersion(tempIsPublicVersion)
         const prompt_template = ''
@@ -589,6 +591,7 @@ const Main: FC<IMainProps> = ({
             savedInputs={currInputs as Record<string, any>}
             onInputsChange={setCurrInputs}
             plan={plan}
+            canReplaceLogo={canReplaceLogo}
           ></ConfigScene>
           {
             shouldReload && (

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

@@ -26,6 +26,7 @@ export type IWelcomeProps = {
   savedInputs: Record<string, any>
   onInputsChange: (inputs: Record<string, any>) => void
   plan: string
+  canReplaceLogo?: boolean
 }
 
 const Welcome: FC<IWelcomeProps> = ({
@@ -39,6 +40,7 @@ const Welcome: FC<IWelcomeProps> = ({
   canEditInputs,
   savedInputs,
   onInputsChange,
+  canReplaceLogo,
 }) => {
   const { t } = useTranslation()
   const hasVar = promptConfig.prompt_variables.length > 0
@@ -351,7 +353,7 @@ const Welcome: FC<IWelcomeProps> = ({
               </div>
               : <div>
               </div>}
-            {plan === 'basic' && <a className='flex items-center pr-3 space-x-3' href="https://dify.ai/" target="_blank">
+            {!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>}

web/app/components/share/text-generation/index.tsx

@@ -71,6 +71,7 @@ const TextGeneration: FC<IMainProps> = ({
   const [inputs, setInputs] = useState<Record<string, any>>({})
   const [appId, setAppId] = useState<string>('')
   const [siteInfo, setSiteInfo] = useState<SiteInfo | null>(null)
+  const [canReplaceLogo, setCanReplaceLogo] = useState<boolean>(false)
   const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
   const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
 
@@ -343,9 +344,10 @@ const TextGeneration: FC<IMainProps> = ({
   useEffect(() => {
     (async () => {
       const [appData, appParams]: any = await fetchInitData()
-      const { app_id: appId, site: siteInfo } = appData
+      const { app_id: appId, site: siteInfo, can_replace_logo } = appData
       setAppId(appId)
       setSiteInfo(siteInfo as SiteInfo)
+      setCanReplaceLogo(can_replace_logo)
       changeLanguage(siteInfo.default_language)
 
       const { user_input_form, more_like_this, file_upload, sensitive_word_avoidance }: any = appParams
@@ -364,9 +366,13 @@ const TextGeneration: FC<IMainProps> = ({
 
   // 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)
-      document.title = `${siteInfo.title} - Powered by Dify`
-  }, [siteInfo?.title])
+    if (siteInfo?.title) {
+      if (canReplaceLogo)
+        document.title = `${siteInfo.title}`
+      else
+        document.title = `${siteInfo.title} - Powered by Dify`
+    }
+  }, [siteInfo?.title, canReplaceLogo])
 
   const [isShowResSidebar, { setTrue: showResSidebar, setFalse: hideResSidebar }] = useBoolean(false)
   const resRef = useRef<HTMLDivElement>(null)

web/i18n/lang/common.en.ts

@@ -101,7 +101,7 @@ const translation = {
   },
   settings: {
     accountGroup: 'ACCOUNT',
-    workplaceGroup: 'WORKPLACE',
+    workplaceGroup: 'WORKSPACE',
     account: 'My account',
     members: 'Members',
     billing: 'Billing',