fix: azure-openai key validate (#164)

web/app/components/header/account-setting/provider-page/provider-input/Validate.tsx

@@ -0,0 +1,59 @@
+import Link from 'next/link'
+import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/24/solid'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import I18n from '@/context/i18n'
+
+export const ValidatedErrorIcon = () => {
+  return <ExclamationCircleIcon className='w-4 h-4 text-[#D92D20]' />
+}
+
+export const ValidatedSuccessIcon = () => {
+  return <CheckCircleIcon className='w-4 h-4 text-[#039855]' />
+}
+
+export const ValidatingTip = () => {
+  const { t } = useTranslation()
+  return (
+    <div className={`mt-2 text-primary-600 text-xs font-normal`}>
+      {t('common.provider.validating')}
+    </div>
+  )
+}
+
+export const ValidatedExceedOnOpenaiTip = () => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+
+  return (
+    <div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
+      {t('common.provider.apiKeyExceedBill')}&nbsp;
+      <Link 
+        className='underline'
+        href="https://platform.openai.com/account/api-keys" 
+        target={'_blank'}>
+        {locale === 'en' ? 'this link' : '这篇文档'}
+      </Link>
+    </div>
+  )
+}
+
+export const ValidatedErrorOnOpenaiTip = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
+      {t('common.provider.invalidKey')}
+    </div>
+  )
+}
+
+export const ValidatedErrorOnAzureOpenaiTip = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
+      {t('common.provider.invalidApiKey')}
+    </div>
+  )
+}