From 133b487566ca025bb31ee31e6ad6c0b781652b37 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 31 Oct 2024 18:32:25 +0800
Subject: [PATCH] feat: Enhance plugin item links and increase value display
 width

---
 web/app/components/plugins/base/key-value-item.tsx | 2 +-
 web/app/components/plugins/plugin-item/index.tsx   | 6 +++---
 web/config/index.ts                                | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index 2b4dd06d9a..50d3b53535 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -46,7 +46,7 @@ const KeyValueItem: FC<Props> = ({
     <div className='flex items-center gap-1'>
       <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
       <div className='flex justify-center items-center gap-0.5'>
-        <span className='max-w-[140px] truncate system-xs-medium text-text-secondary'>
+        <span className='max-w-[300px] truncate system-xs-medium text-text-secondary'>
           {value}
         </span>
         <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 3194e3f3de..15a2bb9c39 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -20,7 +20,7 @@ import Title from '../card/base/title'
 import Action from './action'
 import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
-import { API_PREFIX } from '@/config'
+import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 
 type Props = {
   className?: string
@@ -112,7 +112,7 @@ const PluginItem: FC<Props> = ({
         <div className='flex items-center'>
           {source === PluginSource.github
             && <>
-              <a href='' target='_blank' className='flex items-center gap-1'>
+              <a href={meta.repo} target='_blank' className='flex items-center gap-1'>
                 <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</div>
                 <div className='flex items-center space-x-0.5 text-text-secondary'>
                   <Github className='w-3 h-3' />
@@ -124,7 +124,7 @@ const PluginItem: FC<Props> = ({
           }
           {source === PluginSource.marketplace
             && <>
-              <a href='' target='_blank' className='flex items-center gap-0.5'>
+              <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${author}/${name}`} target='_blank' className='flex items-center gap-0.5'>
                 <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div>
                 <RiArrowRightUpLine className='w-3 h-3' />
               </a>
diff --git a/web/config/index.ts b/web/config/index.ts
index 81ae4c46af..85cb850393 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -41,6 +41,7 @@ else {
 export const API_PREFIX: string = apiPrefix
 export const PUBLIC_API_PREFIX: string = publicApiPrefix
 export const MARKETPLACE_API_PREFIX: string = marketplaceApiPrefix
+export const MARKETPLACE_URL_PREFIX: string = marketplaceUrlPrefix
 
 const EDITION = process.env.NEXT_PUBLIC_EDITION || globalThis.document?.body?.getAttribute('data-public-edition') || 'SELF_HOSTED'
 export const IS_CE_EDITION = EDITION === 'SELF_HOSTED'