Installed text generation app icon incorrect

xuzuodong commented 1 month ago

Self Checks

[X] This is only for bug report, if you would like to ask a question, please head to Discussions.
[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.16

Cloud or Self Hosted

Cloud, Self Hosted (Docker), Self Hosted (Source)

Steps to reproduce

Under "Explore" tab, fork any "COMPLETION" app
In the "Create app from ..." dialog, change the default App icon, then click "Create". For example:
Go back to "Explore" tab, click the app on the left sidebar that just created
Check the app logo displayed at main panel is incorrect:

✔️ Expected Behavior

The app logo displayed at main panel should be the same as displayed on left sidebar

❌ Actual Behavior

The app logo displayed at main panel is incorrectly displaying default icon style

dosubot[bot] commented 1 month ago

@xuzuodong Hello there! I'm here to help you with any bugs, questions, or contribution ideas you have for the repository. Let's work together to solve the issue you're facing.

To fix the issue where the app logo displayed at the main panel is incorrectly showing the default icon style instead of the custom icon you selected, you need to ensure that the custom logo is being properly loaded and displayed in the CustomAppHeaderBrand component.

Here is a modified version of the relevant part of the code:

const CustomAppHeaderBrand = () => {
  const { t } = useTranslation()
  const { plan } = useProviderContext()
  const customLogoUrl = 'path/to/your/custom/logo.png'; // Replace with the actual path to your custom logo

  return (
    <div className='py-3'>
      <div className='mb-2 text-sm font-medium text-gray-900'>{t('custom.app.title')}</div>
      <div className='relative mb-4 rounded-xl bg-gray-100 border-[0.5px] border-black/8 shadow-xs'>
        <div className={`${s.mask} absolute inset-0 rounded-xl`}></div>
        <div className='flex items-center pl-5 h-14 rounded-t-xl'>
          <div className='relative flex items-center mr-[199px] w-[120px] h-10 bg-[rgba(217,45,32,0.12)]'>
            <img src={customLogoUrl} alt="Custom Logo" className='w-[34px] h-[34px] rounded-full' />
            <div className='absolute top-0 bottom-0 left-0.5 w-[0.5px] bg-[#F97066] opacity-50'></div>
            <div className='absolute top-0 bottom-0 right-0.5 w-[0.5px] bg-[#F97066] opacity-50'></div>
            <div className='absolute left-0 right-0 top-0.5 h-[0.5px] bg-[#F97066] opacity-50'></div>
            <div className='absolute left-0 right-0 bottom-0.5 h-[0.5px] bg-[#F97066] opacity-50'></div>
          </div>
          <div className='flex items-center mr-3 px-3 h-7 rounded-xl bg-white shadow-xs'>
            <Grid01 className='shrink-0 mr-2 w-4 h-4 text-[#155eef]' />
            <div className='w-12 h-1.5 rounded-[5px] bg-[#155eef] opacity-80'></div>
          </div>
          <div className='flex items-center mr-3 px-3 h-7'>
            <Container className='shrink-0 mr-2 w-4 h-4 text-gray-500' />
            <div className='w-[50px] h-1.5 rounded-[5px] bg-gray-300'></div>
          </div>
          <div className='flex items-center px-3 h-7'>
            <Database01 className='shrink-0 mr-2 w-4 h-4 text-gray-500' />
            <div className='w-14 h-1.5 rounded-[5px] bg-gray-300 opacity-80'></div>
          </div>
        </div>
        <div className='h-8 border-t border-t-gray-200 rounded-b-xl'></div>
      </div>
      <div className='flex items-center mb-2'>
        <Button
          disabled={plan.type === Plan.sandbox}
        >
          <ImagePlus className='mr-2 w-4 h-4' />
          {t('custom.upload')}
        </Button>
        <div className='mx-2 h-5 w-[1px] bg-black/5'></div>
        <Button
          disabled={plan.type === Plan.sandbox}
        >
          {t('custom.restore')}
        </Button>
      </div>
      <div className='text-xs text-gray-500'>{t('custom.app.changeLogoTip')}</div>
    </div>
  )
}
export default CustomAppHeaderBrand

Replace 'path/to/your/custom/logo.png' with the actual path to your custom logo file. This should ensure that your custom logo is displayed instead of the default icon style ^[1].

To continue talking to Dosu, mention @dosu.

crazywoola commented 1 month ago

Each application has two icon, an icon displayed in the list, and an icon displayed in shared application which you can find in application -> monitoring , they have different settings.

xuzuodong commented 1 month ago

Each application has two icon, an icon displayed in the list, and an icon displayed in shared application which you can find in application -> monitoring , they have different settings.

I'm aware of that, the problem is that settings in monitoring page still won't apply to installed text generation app.

I've submitted a PR to fix it.

langgenius / dify