{isInfoActive ? infoUI : settingUI}
+ {!readonly && !isInfoActive && (
+
- {!readonly && !isInfoActive && (
-
+
+
+
+ )}
-
-
-
- )}
+
+
{/* mask */}
- {
!clickOutsideNotOpen && onClose()
}}
- />
+ />}
<>
diff --git a/web/app/components/base/markdown-blocks/img.tsx b/web/app/components/base/markdown-blocks/img.tsx
index 33fce13f0b..ec5a05a601 100644
--- a/web/app/components/base/markdown-blocks/img.tsx
+++ b/web/app/components/base/markdown-blocks/img.tsx
@@ -3,11 +3,34 @@
* Extracted from the main markdown renderer for modularity.
* Uses the ImageGallery component to display images.
*/
-import React from 'react'
+import React, { useEffect, useMemo } from 'react'
import ImageGallery from '@/app/components/base/image-gallery'
+import { getMarkdownImageURL } from './utils'
+import { usePluginReadmeAsset } from '@/service/use-plugins'
-const Img = ({ src }: any) => {
- return >
+ pluginUniqueIdentifier?: string
}
export const Markdown = (props: MarkdownProps) => {
- const { customComponents = {} } = props
+ const { customComponents = {}, pluginUniqueIdentifier } = props
const latexContent = flow([
preprocessThinkTag,
preprocessLaTeX,
@@ -76,11 +77,11 @@ export const Markdown = (props: MarkdownProps) => {
disallowedElements={['iframe', 'head', 'html', 'meta', 'link', 'style', 'body', ...(props.customDisallowedElements || [])]}
components={{
code: CodeBlock,
- img: Img,
+ img: props => ![]()
,
video: VideoBlock,
audio: AudioBlock,
a: Link,
- p: Paragraph,
+ p: props =>
+
+ )
}
export default Img
diff --git a/web/app/components/base/markdown-blocks/paragraph.tsx b/web/app/components/base/markdown-blocks/paragraph.tsx
index fb1612477a..12287eb109 100644
--- a/web/app/components/base/markdown-blocks/paragraph.tsx
+++ b/web/app/components/base/markdown-blocks/paragraph.tsx
@@ -3,25 +3,43 @@
* Extracted from the main markdown renderer for modularity.
* Handles special rendering for paragraphs that directly contain an image.
*/
-import React from 'react'
+import React, { useEffect, useMemo } from 'react'
import ImageGallery from '@/app/components/base/image-gallery'
+// import { getMarkdownImageURL } from './utils'
+import { usePluginReadmeAsset } from '@/service/use-plugins'
-const Paragraph = (paragraph: any) => {
- const { node }: any = paragraph
+const Paragraph = (props: { pluginUniqueIdentifier?: string, node?: any, children?: any }) => {
+ const { node, pluginUniqueIdentifier, children } = props
const children_node = node.children
- if (children_node && children_node[0] && 'tagName' in children_node[0] && children_node[0].tagName === 'img') {
+ const { data: asset } = usePluginReadmeAsset({ plugin_unique_identifier: pluginUniqueIdentifier, file_name: children_node[0].properties?.src })
+ const blobUrl = useMemo(() => {
+ if (asset)
+ return URL.createObjectURL(asset)
+
+ return ''
+ }, [asset])
+
+ useEffect(() => {
+ return () => {
+ if (blobUrl && asset)
+ URL.revokeObjectURL(blobUrl)
+ }
+ }, [blobUrl])
+
+ if (children_node?.[0]?.tagName === 'img') {
+ // const imageURL = getMarkdownImageURL(children_node[0].properties?.src, pluginUniqueIdentifier)
return (
-
)
}
- return {paragraph.children.slice(1)}
+ Array.isArray(children) && children.length > 1 && (
+ {children.slice(1)}
)
}
{paragraph.children}
+ return{children}
} export default Paragraph diff --git a/web/app/components/base/markdown-blocks/utils.ts b/web/app/components/base/markdown-blocks/utils.ts index d8df76aefc..50433b9eaa 100644 --- a/web/app/components/base/markdown-blocks/utils.ts +++ b/web/app/components/base/markdown-blocks/utils.ts @@ -1,7 +1,14 @@ -import { ALLOW_UNSAFE_DATA_SCHEME } from '@/config' +import { ALLOW_UNSAFE_DATA_SCHEME, MARKETPLACE_API_PREFIX } from '@/config' export const isValidUrl = (url: string): boolean => { const validPrefixes = ['http:', 'https:', '//', 'mailto:'] if (ALLOW_UNSAFE_DATA_SCHEME) validPrefixes.push('data:') return validPrefixes.some(prefix => url.startsWith(prefix)) } + +export const getMarkdownImageURL = (url: string, pathname?: string) => { + const regex = /(^\.\/_assets|^_assets)/ + if (regex.test(url)) + return `${MARKETPLACE_API_PREFIX}${pathname ?? ''}${url.replace(regex, '/_assets')}` + return url +} diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx index bab5ac8eba..7371b2f391 100644 --- a/web/app/components/base/markdown/index.tsx +++ b/web/app/components/base/markdown/index.tsx @@ -33,10 +33,11 @@ export type MarkdownProps = { className?: string customDisallowedElements?: string[] customComponents?: Record{t('plugin.detailPanel.endpointModalDesc')}
+
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 3ec867faae..ac49908c2b 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -1,5 +1,5 @@
'use client'
-import React from 'react'
+import React, { useCallback } from 'react'
import type { FC } from 'react'
import DetailHeader from './detail-header'
import EndpointList from './endpoint-list'
@@ -9,6 +9,7 @@ import AgentStrategyList from './agent-strategy-list'
import Drawer from '@/app/components/base/drawer'
import type { PluginDetail } from '@/app/components/plugins/types'
import cn from '@/utils/classnames'
+import { ReadmeEntrance } from '../readme-panel/entrance'
type Props = {
detail?: PluginDetail
@@ -21,11 +22,11 @@ const PluginDetailPanel: FC = ({
onUpdate,
onHide,
}) => {
- const handleUpdate = (isDelete = false) => {
+ const handleUpdate = useCallback((isDelete = false) => {
if (isDelete)
onHide()
onUpdate()
- }
+ }, [onHide, onUpdate])
if (!detail)
return null
@@ -42,16 +43,17 @@ const PluginDetailPanel: FC = ({
>
{detail && (
<>
- = ({
{/* base form */}
- {!!detail.declaration.tool &&
)}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index d2797b99f4..9ad40f67a7 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -40,6 +40,7 @@ import {
AuthCategory,
PluginAuthInAgent,
} from '@/app/components/plugins/plugin-auth'
+import { ReadmeEntrance } from '../../readme-panel/entrance'
type Props = {
disabled?: boolean
@@ -272,7 +273,10 @@ const ToolSelector: FC
+
+ {!!detail.declaration.tool &&
+
- = ({
pluginPayload={{
provider: currentProvider.name,
category: AuthCategory.tool,
+ detail: currentProvider as any,
}}
credentialId={value?.credential_id}
onAuthorizationItemClick={handleAuthorizationItemClick}
diff --git a/web/app/components/plugins/plugin-title-info/index.tsx b/web/app/components/plugins/plugin-title-info/index.tsx
new file mode 100644
index 0000000000..b69e206582
--- /dev/null
+++ b/web/app/components/plugins/plugin-title-info/index.tsx
@@ -0,0 +1,119 @@
+'use client'
+import React from 'react'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+ RiBugLine,
+ RiHardDrive3Line,
+ RiVerifiedBadgeLine,
+} from '@remixicon/react'
+import { BoxSparkleFill } from '@/app/components/base/icons/src/vender/plugin'
+import { Github } from '@/app/components/base/icons/src/public/common'
+import Tooltip from '@/app/components/base/tooltip'
+import Badge from '@/app/components/base/badge'
+import { API_PREFIX } from '@/config'
+import { useAppContext } from '@/context/app-context'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import { PluginSource } from '@/app/components/plugins/types'
+import OrgInfo from '@/app/components/plugins/card/base/org-info'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+
+type PluginInfoProps = {
+ detail: PluginDetail
+ size?: 'default' | 'large'
+}
+
+const PluginInfo: FC = ({
+ detail,
+ size = 'default',
+}) => {
+ const { t } = useTranslation()
+ const { currentWorkspace } = useAppContext()
+ const locale = useLanguage()
+
+ const tenant_id = currentWorkspace?.id
+ const {
+ version,
+ source,
+ } = detail
+
+ const {
+ icon,
+ label,
+ author,
+ name,
+ verified,
+ } = detail.declaration || detail
+
+ const isLarge = size === 'large'
+ const iconSize = isLarge ? 'h-10 w-10' : 'h-8 w-8'
+ const titleSize = isLarge ? 'text-sm' : 'text-xs'
+
+ return (
+ (null)
+
+export const useReadmePanel = (): ReadmePanelContextValue => {
+ const context = useContext(ReadmePanelContext)
+ if (!context)
+ throw new Error('useReadmePanel must be used within ReadmePanelProvider')
+
+ return context
+}
+
+type ReadmePanelProviderProps = {
+ children: ReactNode
+}
+
+export enum ReadmeShowType {
+ drawer = 'drawer',
+ modal = 'modal',
+}
+
+export const ReadmePanelProvider: FC = ({ children }) => {
+ const [currentDetailInfo, setCurrentDetailInfo] = useState<{
+ detail: PluginDetail
+ showType: ReadmeShowType
+ } | undefined>()
+
+ const openReadme = (detail: PluginDetail, showType?: ReadmeShowType) => {
+ setCurrentDetailInfo({
+ detail,
+ showType: showType || ReadmeShowType.drawer,
+ })
+ }
+
+ const closeReadme = () => {
+ setCurrentDetailInfo(undefined)
+ }
+
+ // todo: use zustand
+ return (
+
+ {children}
+
+ )
+}
diff --git a/web/app/components/plugins/readme-panel/entrance.tsx b/web/app/components/plugins/readme-panel/entrance.tsx
new file mode 100644
index 0000000000..37eec4a6cf
--- /dev/null
+++ b/web/app/components/plugins/readme-panel/entrance.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiBookReadLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import type { PluginDetail } from '../types'
+import { ReadmeShowType, useReadmePanel } from './context'
+import { BUILTIN_TOOLS_ARRAY } from './constants'
+
+export const ReadmeEntrance = ({
+ detail,
+ showType = ReadmeShowType.drawer,
+ className,
+ showShortTip = false,
+}: {
+ detail: PluginDetail
+ showType?: ReadmeShowType
+ className?: string
+ showShortTip?: boolean
+}) => {
+ const { t } = useTranslation()
+ const { openReadme } = useReadmePanel()
+ const handleReadmeClick = () => {
+ if (detail)
+ openReadme(detail, showType)
+ }
+ if (BUILTIN_TOOLS_ARRAY.includes(detail.id))
+ return null
+
+ return (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ )
+ )
+}
+
+export default ReadmePanel
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 4723b2dce7..a5c623f8c3 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -65,6 +65,7 @@ import {
} from '@/app/components/plugins/plugin-auth'
import { AuthCategory } from '@/app/components/plugins/plugin-auth'
import { canFindTool } from '@/utils'
+import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
type BasePanelProps = {
children: ReactNode
@@ -169,11 +170,11 @@ const BasePanel: FC = ({
const [isPaused, setIsPaused] = useState(false)
useEffect(() => {
- if(data._singleRunningStatus === NodeRunningStatus.Running) {
+ if (data._singleRunningStatus === NodeRunningStatus.Running) {
hasClickRunning.current = true
setIsPaused(false)
}
- else if(data._isSingleRun && data._singleRunningStatus === undefined && hasClickRunning) {
+ else if (data._isSingleRun && data._singleRunningStatus === undefined && hasClickRunning) {
setIsPaused(true)
hasClickRunning.current = false
}
@@ -248,9 +249,9 @@ const BasePanel: FC = ({
})
}, [handleNodeDataUpdateWithSyncDraft, id])
- if(logParams.showSpecialResultPanel) {
+ if (logParams.showSpecialResultPanel) {
return (
-
('/workspaces/current/plugin/asset', { params: { plugin_unique_identifier, file_name } }),
+ enabled: !!plugin_unique_identifier && !!file_name && /(^\.\/_assets|^_assets)/.test(file_name),
+ })
+}
{t('plugin.detailPanel.toolSelector.toolLabel')}
+
+ {t('plugin.detailPanel.toolSelector.toolLabel')}
+
+ {/* Plugin Icon */}
+
+ )
+}
+
+export default PluginInfo
diff --git a/web/app/components/plugins/readme-panel/constants.ts b/web/app/components/plugins/readme-panel/constants.ts
new file mode 100644
index 0000000000..7d6782e665
--- /dev/null
+++ b/web/app/components/plugins/readme-panel/constants.ts
@@ -0,0 +1,6 @@
+export const BUILTIN_TOOLS_ARRAY = [
+ 'code',
+ 'audio',
+ 'time',
+ 'webscraper',
+]
diff --git a/web/app/components/plugins/readme-panel/context.tsx b/web/app/components/plugins/readme-panel/context.tsx
new file mode 100644
index 0000000000..63d99ad26a
--- /dev/null
+++ b/web/app/components/plugins/readme-panel/context.tsx
@@ -0,0 +1,63 @@
+'use client'
+import React, { createContext, useContext, useState } from 'react'
+import type { FC, ReactNode } from 'react'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import ReadmeDrawer from './index'
+
+type ReadmePanelContextValue = {
+ openReadme: (detail: PluginDetail, showType?: ReadmeShowType) => void
+ closeReadme: () => void
+ currentDetailInfo?: {
+ detail: PluginDetail
+ showType: ReadmeShowType
+ }
+}
+
+const ReadmePanelContext = createContext
+
+
+ {/* Plugin Details */}
+
+ {/* Name and Version */}
+
+
+
+
+ {/* Organization and Source */}
+ + {label[locale]} +
+ {verified &&
+
+
+ )}
+ {source === PluginSource.github && (
+
+
+ )}
+ {source === PluginSource.local && (
+
+
+ )}
+ {source === PluginSource.debugging && (
+
+
+ )}
+
+ ·
+
+ {/* Source Icon */}
+ {source === PluginSource.marketplace && (
+
+
+
+
+
+
+
+
+
+ {!showShortTip &&
+ )
+}
diff --git a/web/app/components/plugins/readme-panel/index.tsx b/web/app/components/plugins/readme-panel/index.tsx
new file mode 100644
index 0000000000..396c9d0a2a
--- /dev/null
+++ b/web/app/components/plugins/readme-panel/index.tsx
@@ -0,0 +1,123 @@
+'use client'
+import React from 'react'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiBookReadLine, RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import Drawer from '@/app/components/base/drawer'
+import { Markdown } from '@/app/components/base/markdown'
+import { usePluginReadme } from '@/service/use-plugins'
+// import type { PluginDetail } from '@/app/components/plugins/types'
+import Loading from '@/app/components/base/loading'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import PluginTitleInfo from '@/app/components/plugins/plugin-title-info'
+import Modal from '@/app/components/base/modal'
+import ActionButton from '@/app/components/base/action-button'
+import { ReadmeShowType, useReadmePanel } from './context'
+
+const ReadmePanel: FC = () => {
+ const { currentDetailInfo, closeReadme: onClose } = useReadmePanel()
+ const detail = currentDetailInfo?.detail
+ const showType = currentDetailInfo?.showType
+ const { t } = useTranslation()
+ const language = useLanguage()
+
+ const pluginUniqueIdentifier = detail?.plugin_unique_identifier || ''
+
+ const readmeLanguage = language === 'zh-Hans' ? undefined : language
+ const { data: readmeData, isLoading, error } = usePluginReadme(
+ { plugin_unique_identifier: pluginUniqueIdentifier, language: readmeLanguage },
+ )
+
+ if (!detail) return null
+
+ const children = (
+
+
+
}
+
+
+
+
+ )
+
+ return (
+ showType === ReadmeShowType.drawer ? (
+
+
+
+
+
+
+
+
+
+
+
+ {(() => {
+ if (isLoading) {
+ return (
+
+
+
+ )
+ }
+
+ if (error) {
+ return (
+
+
+ )
+ }
+
+ if (readmeData?.readme) {
+ return (
+ {t('plugin.readmeInfo.noReadmeAvailable')}
+
+
+ )
+ })()}
+ {t('plugin.readmeInfo.noReadmeAvailable')}
+ = ({
= ({
pluginPayload={{
provider: currCollection?.name || '',
category: AuthCategory.tool,
+ detail: currCollection as any,
}}
>
)
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index aa127eaf13..c64cd496a1 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -298,6 +298,11 @@ const translation = {
clientInfo: 'As no system client secrets found for this tool provider, setup it manually is required, for redirect_uri, please use',
oauthClient: 'OAuth Client',
},
+ readmeInfo: {
+ title: 'README',
+ needHelpCheckReadme: 'Need help? Check the README.',
+ noReadmeAvailable: 'No README available',
+ },
}
export default translation
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index a080a26a8c..7c27a38d88 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -298,6 +298,11 @@ const translation = {
clientInfo: '由于未找到此工具提供者的系统客户端密钥，因此需要手动设置，对于 redirect_uri，请使用',
oauthClient: 'OAuth 客户端',
},
+ readmeInfo: {
+ title: 'README',
+ needHelpCheckReadme: '需要帮助？查看 README。',
+ noReadmeAvailable: 'README 文档不可用',
+ },
}
export default translation
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 2877ef15f2..76649d8127 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -626,3 +626,19 @@ export const useFetchDynamicOptions = (plugin_id: string, provider: string, acti
}),
})
}
+
+export const usePluginReadme = ({ plugin_unique_identifier, language }: { plugin_unique_identifier: string, language?: string }) => {
+ return useQuery({
+ queryKey: ['pluginReadme', plugin_unique_identifier, language],
+ queryFn: () => get<{ readme: string }>('/workspaces/current/plugin/readme', { params: { plugin_unique_identifier, language } }),
+ enabled: !!plugin_unique_identifier,
+ })
+}
+
+export const usePluginReadmeAsset = ({ file_name, plugin_unique_identifier }: { file_name?: string, plugin_unique_identifier?: string }) => {
+ return useQuery({
+ queryKey: ['pluginReadmeAsset', plugin_unique_identifier, file_name],
+ queryFn: () => get {
- if(isSingleRunning) {
+ if (isSingleRunning) {
handleNodeDataUpdate({
id,
data: {
@@ -356,7 +357,7 @@ const BasePanel: FC = ({
>
{
isSingleRunning ?
@@ -387,6 +388,7 @@ const BasePanel: FC
@@ -398,6 +400,7 @@ const BasePanel: FC = ({
pluginPayload={{
provider: currCollection?.name || '',
category: AuthCategory.tool,
+ detail: currCollection as any,
}}
onAuthorizationItemClick={handleAuthorizationItemClick}
credentialId={data.credential_id}
@@ -483,6 +486,8 @@ const BasePanel: FC = ({
{...passedLogParams}
/>
)}
+
+ {data.type === BlockEnum.Tool &&