provider card & link

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

@@ -10,7 +10,6 @@ import {
 } from '@remixicon/react'
 import SystemModelSelector from './system-model-selector'
 import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
-// import ProviderCard from './provider-card'
 import type {
   CustomConfigurationModelFixedFields,
   ModelProvider,
@@ -35,6 +34,7 @@ import {
   useMarketplacePlugins,
 } from '@/app/components/plugins/marketplace/hooks'
 import { PluginType } from '@/app/components/plugins/types'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -213,7 +213,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
           </div>
           <div className='flex items-center mb-2 pt-2'>
             <span className='pr-1 text-text-tertiary system-sm-regular'>{t('common.modelProvider.discoverMore')}</span>
-            <Link target="_blank" href="/plugins" className='inline-flex items-center system-sm-medium text-text-accent'>
+            <Link target="_blank" href={`${MARKETPLACE_URL_PREFIX}`} className='inline-flex items-center system-sm-medium text-text-accent'>
               Dify Marketplace
               <RiArrowRightUpLine className='w-4 h-4' />
             </Link>
@@ -221,8 +221,8 @@ const ModelProviderPage = ({ searchText }: Props) => {
         </div>
         {!collapse && !isPluginsLoading && (
           <div className='grid grid-cols-2 gap-2'>
-            {plugins.map((plugin, index) => (
-              <ProviderCard key={index} installed={false} payload={plugin as any} />
+            {plugins.map(plugin => (
+              <ProviderCard key={plugin.plugin_id} payload={plugin} />
             ))}
           </div>
         )}

web/app/components/plugins/marketplace/list/card-wrapper.tsx

@@ -3,6 +3,7 @@ import { RiArrowRightUpLine } from '@remixicon/react'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import type { Plugin } from '@/app/components/plugins/types'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
 import Button from '@/app/components/base/button'
 
 type CardWrapperProps = {
@@ -37,6 +38,7 @@ const CardWrapper = ({
             <Button
               className='flex-1'
             >
+              <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${plugin.org}/${plugin.name}`} target='_blank' className='flex items-center gap-0.5'></a>
               Details
               <RiArrowRightUpLine className='ml-1 w-4 h-4' />
             </Button>

web/app/components/plugins/provider-card.tsx

@@ -1,8 +1,6 @@
 'use client'
 import React from 'react'
-import { useContext } from 'use-context-selector'
 import type { FC } from 'react'
-import Link from 'next/link'
 import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import Badge from '../base/badge'
 import type { Plugin } from './types'
@@ -11,70 +9,66 @@ import Icon from './card/base/card-icon'
 import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
 import Button from '@/app/components/base/button'
+import { useGetLanguage } from '@/context/i18n'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
-import I18n from '@/context/i18n'
 
 type Props = {
   className?: string
   payload: Plugin
-  installed?: boolean
 }
 
 const ProviderCard: FC<Props> = ({
   className,
   payload,
-  installed = true,
 }) => {
-  const { locale } = useContext(I18n)
+  const language = useGetLanguage()
   const { org, label } = payload
 
   return (
     <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
-      <Link href={`/plugins/test/card?org=${payload.org}&name=${payload.name}`}>
-        {/* Header */}
-        <div className="flex">
-          <Icon src={payload.icon} />
-          <div className="ml-3 w-0 grow">
-            <div className="flex items-center h-5">
-              <Title title={label[locale]} />
-              <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
-            </div>
-            <div className='mb-1 flex justify-between items-center h-4'>
-              <div className='flex items-center'>
-                <div className='text-text-tertiary system-xs-regular'>{org}</div>
-                <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
-                <DownloadCount downloadCount={payload.install_count || 0} />
-              </div>
+      {/* Header */}
+      <div className="flex">
+        <Icon src={payload.icon} />
+        <div className="ml-3 w-0 grow">
+          <div className="flex items-center h-5">
+            <Title title={label[language]} />
+            <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+          </div>
+          <div className='mb-1 flex justify-between items-center h-4'>
+            <div className='flex items-center'>
+              <div className='text-text-tertiary system-xs-regular'>{org}</div>
+              <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
+              <DownloadCount downloadCount={payload.install_count || 0} />
             </div>
           </div>
         </div>
-        <Description className='mt-3' text={payload.brief[locale]} descriptionLineRows={2}></Description>
-        <div className='mt-3 flex space-x-0.5'>
-          {['LLM', 'text embedding', 'speech2text'].map(tag => (
-            <Badge key={tag} text={tag} />
-          ))}
-        </div>
-        {!installed && (
-          <div
-            className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8'
-            style={{ background: 'linear-gradient(0deg, #F9FAFB 60.27%, rgba(249, 250, 251, 0.00) 100%)' }}
-          >
-            <Button
-              className='flex-grow'
-              variant='primary'
-            >
-              Install
-            </Button>
-            <Button
-              className='flex-grow'
-              variant='secondary'
-            >
-              Details
-              <RiArrowRightUpLine className='w-4 h-4' />
-            </Button>
-          </div>
-        )}
-      </Link>
+      </div>
+      <Description className='mt-3' text={payload.brief[language]} descriptionLineRows={2}></Description>
+      <div className='mt-3 flex space-x-0.5'>
+        {payload.tags.map(tag => (
+          <Badge key={tag.name} text={tag.name} />
+        ))}
+      </div>
+      <div
+        className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8 rounded-xl bg-gradient-to-tr from-[#f9fafb] to-[rgba(249,250,251,0)]'
+      >
+        <Button
+          className='flex-grow'
+          variant='primary'
+        >
+          Install
+        </Button>
+        <Button
+          className='flex-grow'
+          variant='secondary'
+        >
+          <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${payload.org}/${payload.name}`} target='_blank' className='flex items-center gap-0.5'>
+            Details
+            <RiArrowRightUpLine className='w-4 h-4' />
+          </a>
+        </Button>
+      </div>
     </div>
   )
 }

web/app/components/plugins/types.ts

@@ -103,6 +103,7 @@ export type Plugin = {
   type: PluginType
   org: string
   name: string
+  plugin_id: string
   version: string
   latest_version: string
   icon: string