From 34652010f5e80dbdca0658df479404fd1a8ec601 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 29 Oct 2024 18:09:41 +0800
Subject: [PATCH] feat: add market url prefix

---
 web/.env.example                                  |  4 +++-
 .../block-selector/market-place-plugin/list.tsx   | 15 +++++++++++++++
 web/app/layout.tsx                                |  3 ++-
 web/config/index.ts                               | 15 +++++++++++----
 web/i18n/en-US/plugin.ts                          |  1 +
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/web/.env.example b/web/.env.example
index 4316bc76ea..e0f6839b95 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -10,8 +10,10 @@ NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
 # console or api domain.
 # example: http://udify.app/api
 NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api
-# The URL for MARKETPLACE
+# The APIFREX for MARKETPLACE
 NEXT_PUBLIC_MARKETPLACE_API_PREFIX=http://localhost:5002/api
+# The URL for MARKETPLACE
+NEXT_PUBLIC_MARKETPLACE_URL_PREFIX=
 
 # SENTRY
 NEXT_PUBLIC_SENTRY_DSN=
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 9861cf2a9e..9078d85216 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -5,15 +5,20 @@ import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
 import type { Plugin } from '@/app/components/plugins/types.ts'
 import cn from '@/utils/classnames'
+import Link from 'next/link'
+import { marketplaceUrlPrefix } from '@/config'
+import { RiArrowRightUpLine } from '@remixicon/react'
 // import { RiArrowRightUpLine } from '@remixicon/react'
 
 type Props = {
   wrapElemRef: React.RefObject<HTMLElement>
+  hasSearchText: boolean
   list: Plugin[]
 }
 
 const List = ({
   wrapElemRef,
+  hasSearchText,
   list,
 }: Props, ref: any) => {
   const { t } = useTranslation()
@@ -46,6 +51,16 @@ const List = ({
     nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
 
+  if (!hasSearchText) {
+    return (
+      <Link className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium  items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur  shadow-lg text-text-accent-light-mode-only cursor-pointer'
+        href={`${marketplaceUrlPrefix}/plugins`} target='_blank'>
+        <span>{t('plugin.findMoreInMarketplace')}</span>
+        <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+      </Link>
+    )
+  }
+
   return (
     <>
       <div
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index ec68790677..0c39c8f22b 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -37,7 +37,8 @@ const LocaleLayout = ({
         className="h-full select-auto"
         data-api-prefix={process.env.NEXT_PUBLIC_API_PREFIX}
         data-pubic-api-prefix={process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX}
-        data-marketplace-api-prefix={process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX}
+        data-marketplace-api-prefix={process.env.NEXT_PUBLIC_DIFY_MARKETPLACE_URL_PREFIX}
+        data-marketplace-url-prefix={process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX}
         data-public-edition={process.env.NEXT_PUBLIC_EDITION}
         data-public-support-mail-login={process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN}
         data-public-sentry-dsn={process.env.NEXT_PUBLIC_SENTRY_DSN}
diff --git a/web/config/index.ts b/web/config/index.ts
index 3492fbe991..81ae4c46af 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -5,22 +5,20 @@ import { PromptRole } from '@/models/debug'
 export let apiPrefix = ''
 export let publicApiPrefix = ''
 export let marketplaceApiPrefix = ''
+export let marketplaceUrlPrefix = ''
 
 // NEXT_PUBLIC_API_PREFIX=/console/api NEXT_PUBLIC_PUBLIC_API_PREFIX=/api npm run start
-if (process.env.NEXT_PUBLIC_API_PREFIX && process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX && process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX) {
+if (process.env.NEXT_PUBLIC_API_PREFIX && process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX) {
   apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX
   publicApiPrefix = process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX
-  marketplaceApiPrefix = process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX
 }
 else if (
   globalThis.document?.body?.getAttribute('data-api-prefix')
   && globalThis.document?.body?.getAttribute('data-pubic-api-prefix')
-  && globalThis.document?.body?.getAttribute('data-marketplace-api-prefix')
 ) {
   // Not build can not get env from process.env.NEXT_PUBLIC_ in browser https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
   apiPrefix = globalThis.document.body.getAttribute('data-api-prefix') as string
   publicApiPrefix = globalThis.document.body.getAttribute('data-pubic-api-prefix') as string
-  marketplaceApiPrefix = globalThis.document.body.getAttribute('data-marketplace-api-prefix') as string
 }
 else {
   // const domainParts = globalThis.location?.host?.split('.');
@@ -31,6 +29,15 @@ else {
   marketplaceApiPrefix = 'http://localhost:5002/api'
 }
 
+if (process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX && process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX) {
+  marketplaceApiPrefix = process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX
+  marketplaceUrlPrefix = process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX
+}
+else {
+  marketplaceApiPrefix = globalThis.document?.body?.getAttribute('data-marketplace-api-prefix') || ''
+  marketplaceUrlPrefix = globalThis.document?.body?.getAttribute('data-marketplace-url-prefix') || ''
+}
+
 export const API_PREFIX: string = apiPrefix
 export const PUBLIC_API_PREFIX: string = publicApiPrefix
 export const MARKETPLACE_API_PREFIX: string = marketplaceApiPrefix
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 151d2a7d1e..a5429c2a1e 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -1,5 +1,6 @@
 const translation = {
   from: 'From',
+  findMoreInMarketplace: 'Find more in Marketplace',
   fromMarketplace: 'From Marketplace',
   endpointsEnabled: '{{num}} sets of endpoints enabled',
   detailPanel: {