add help doc link of endpoint

web/app/components/header/account-setting/index.tsx

@@ -193,11 +193,11 @@ export default function AccountSetting({
             <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
           </div>
           <div ref={scrollRef} className='w-full pb-4 bg-components-panel-bg overflow-y-auto'>
-            <div className={cn('sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b')}>
+            <div className={cn('sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b border-divider-regular')}>
               <div className='shrink-0 text-text-primary title-2xl-semi-bold'>{activeItem?.name}</div>
               {
                 activeItem?.description && (
-                  <div className='shrink-0 ml-2 text-xs text-gray-600'>{activeItem?.description}</div>
+                  <div className='shrink-0 ml-2 text-xs text-text-tertiary'>{activeItem?.description}</div>
                 )
               }
               {activeItem?.key === 'provider' && (

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -143,7 +143,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
       <div className={cn('flex items-center mb-2')}>
         <div className='grow text-text-primary system-md-semibold'>{t('common.modelProvider.models')}</div>
         <div className={cn(
-          'shrink-0 relative flex items-center justify-end gap-2 p-0.5 rounded-lg border border-transparent',
+          'shrink-0 relative flex items-center justify-end gap-2 p-px rounded-lg border border-transparent',
           defaultModelNotConfigured && 'pl-2 bg-components-panel-bg-blur border-components-panel-border shadow-xs',
         )}>
           {defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
@@ -164,7 +164,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
         </div>
       </div>
       {!filteredConfiguredProviders?.length && (
-        <div className='mb-2 p-4 rounded-[10px]' style={{ background: 'linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%)' }}>
+        <div className='mb-2 p-4 rounded-[10px] bg-workflow-process-bg'>
           <div className='w-10 h-10 flex items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur'>
             <RiBrainLine className='w-5 h-5 text-text-primary' />
           </div>

web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx

@@ -13,7 +13,6 @@ import type {
 } from '../declarations'
 import { ConfigurationMethodEnum } from '../declarations'
 import {
-  DEFAULT_BACKGROUND_COLOR,
   MODEL_PROVIDER_QUOTA_GET_PAID,
   modelTypeFormat,
 } from '../utils'
@@ -27,6 +26,7 @@ import { fetchModelProviderModelList } from '@/service/common'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { IS_CE_EDITION } from '@/config'
 import { useAppContext } from '@/context/app-context'
+import cn from '@/utils/classnames'
 
 export const UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST = 'UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST'
 type ProviderAddedCardProps = {
@@ -82,8 +82,11 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
 
   return (
     <div
-      className='mb-2 rounded-xl border-[0.5px] border-black/5 shadow-xs'
-      style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }}
+      className={cn(
+        'mb-2 rounded-xl border-[0.5px] border-divider-regular shadow-xs bg-third-party-model-bg-default',
+        provider.provider === 'langgenius/openai/openai' && 'bg-third-party-model-bg-openai',
+        provider.provider === 'langgenius/anthropic/anthropic' && 'bg-third-party-model-bg-anthropic',
+      )}
     >
       <div className='flex pl-3 py-2 pr-2 rounded-t-xl'>
         <div className='grow px-1 pt-1 pb-0.5'>

web/app/components/header/account-setting/model-provider-page/provider-card/index.module.css

@@ -1,4 +0,0 @@
-.vender {
-  background: linear-gradient(131deg, #2250F2 0%, #0EBCF3 100%);
-  background-clip: text;
-}

web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx

@@ -1,103 +0,0 @@
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  RiAddLine,
-} from '@remixicon/react'
-import type {
-  ModelProvider,
-} from '../declarations'
-import { ConfigurationMethodEnum } from '../declarations'
-import {
-  DEFAULT_BACKGROUND_COLOR,
-  modelTypeFormat,
-} from '../utils'
-import {
-  useLanguage,
-} from '../hooks'
-import ModelBadge from '../model-badge'
-import ProviderIcon from '../provider-icon'
-import s from './index.module.css'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import Button from '@/app/components/base/button'
-import { useAppContext } from '@/context/app-context'
-
-type ProviderCardProps = {
-  provider: ModelProvider
-  onOpenModal: (configurateMethod: ConfigurationMethodEnum) => void
-}
-
-const ProviderCard: FC<ProviderCardProps> = ({
-  provider,
-  onOpenModal,
-}) => {
-  const { t } = useTranslation()
-  const language = useLanguage()
-  const { isCurrentWorkspaceManager } = useAppContext()
-  const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurationMethodEnum.fetchFromRemote)
-
-  return (
-    <div
-      className='group relative flex flex-col px-4 py-3 h-[148px] border-[0.5px] border-black/5 rounded-xl shadow-xs hover:shadow-lg'
-      style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }}
-    >
-      <div className='grow h-0'>
-        <div className='py-0.5'>
-          <ProviderIcon provider={provider} />
-        </div>
-        {
-          provider.description && (
-            <div
-              className='mt-1 leading-4 text-xs text-black/[48] line-clamp-4'
-              title={provider.description[language] || provider.description.en_US}
-            >
-              {provider.description[language] || provider.description.en_US}
-            </div>
-          )
-        }
-      </div>
-      <div className='shrink-0'>
-        <div className={'flex flex-wrap group-hover:hidden gap-0.5'}>
-          {
-            provider.supported_model_types.map(modelType => (
-              <ModelBadge key={modelType}>
-                {modelTypeFormat(modelType)}
-              </ModelBadge>
-            ))
-          }
-        </div>
-        <div className={`hidden group-hover:grid grid-cols-${configurateMethods.length} gap-1`}>
-          {
-            configurateMethods.map((method) => {
-              if (method === ConfigurationMethodEnum.predefinedModel) {
-                return (
-                  <Button
-                    key={method}
-                    className={'h-7 text-xs shrink-0'}
-                    onClick={() => onOpenModal(method)}
-                    disabled={!isCurrentWorkspaceManager}
-                  >
-                    <Settings01 className={`mr-[5px] w-3.5 h-3.5 ${s.icon}`} />
-                    <span className='text-xs inline-flex items-center justify-center overflow-ellipsis shrink-0'>{t('common.operation.setup')}</span>
-                  </Button>
-                )
-              }
-              return (
-                <Button
-                  key={method}
-                  className='px-0 h-7 text-xs'
-                  onClick={() => onOpenModal(method)}
-                  disabled={!isCurrentWorkspaceManager}
-                >
-                  <RiAddLine className='mr-[5px] w-3.5 h-3.5' />
-                  {t('common.modelProvider.addModel')}
-                </Button>
-              )
-            })
-          }
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ProviderCard

web/app/components/header/account-setting/model-provider-page/utils.ts

@@ -20,8 +20,6 @@ import {
 
 export const MODEL_PROVIDER_QUOTA_GET_PAID = ['langgenius/anthropic/anthropic', 'langgenius/openai/openai', 'langgenius/azure_openai/azure_openai']
 
-export const DEFAULT_BACKGROUND_COLOR = '#F3F4F6'
-
 export const isNullOrUndefined = (value: any) => {
   return value === undefined || value === null
 }

web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
 import { useBoolean } from 'ahooks'
 import {
   RiAddLine,
@@ -19,6 +20,8 @@ import {
   useInvalidateEndpointList,
 } from '@/service/use-endpoints'
 import type { PluginDetail } from '@/app/components/plugins/types'
+import { LanguagesSupported } from '@/i18n/language'
+import I18n from '@/context/i18n'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -26,6 +29,7 @@ type Props = {
 }
 const EndpointList = ({ detail }: Props) => {
   const { t } = useTranslation()
+  const { locale } = useContext(I18n)
   const pluginUniqueID = detail.plugin_unique_identifier
   const declaration = detail.declaration.endpoint
   const showTopBorder = detail.declaration.tool
@@ -74,9 +78,8 @@ const EndpointList = ({ detail }: Props) => {
                   <RiApps2AddLine className='w-4 h-4 text-text-tertiary' />
                 </div>
                 <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsTip')}</div>
-                {/* TODO  endpoints doc link */}
                 <a
-                  href=''
+                  href={`https://docs.dify.ai/${locale === LanguagesSupported[1] ? 'v/zh-hans/' : ''}guides/api-documentation/endpoint`}
                   target='_blank'
                   rel='noopener noreferrer'
                 >