How to Make ProviderGlobalSettings Component Support i18n?

[iRedScarf]

Describe the feature

I've added translation text for the Provider (mainly OpenAI) in the files under the src/locale/lang directory. I've also used useI18n in src/providers/openai/index.ts to translate the name and description in globalSettings.

After deployment, the default English display works fine, but when I switch to the Chinese language setting, the ProviderGlobalSettings component's language doesn't get translated into Chinese.

I suspect this might be because the providerOpenAI function performs translation once during initialization and stores the translated strings in an object, rather than dynamically translating during rendering. These translated strings are stored in the provider object and returned as constants. When the page's language setting changes, these stored strings don't automatically update. Interestingly, even when I set the default language to Chinese, the language rendered in the ProviderGlobalSettings component is still English, which is puzzling. I've tried various methods, including storing only the translation keys in src/providers/openai/index.ts and then using useI18n for translation in src/components/settings/SettingsUIComponent.tsx (the result was that the entire SettingsSidebar didn't render at all).

I really like the app you've developed, and I want to contribute to making Anse even better. However, I'm still a noob and would appreciate your guidance. Could you please point me in the right direction for implementing translation in the ProviderGlobalSettings component so that it follows the system settings? Thank you!

Additional context

No response

Participation

• I am willing to submit a pull request for this feature.