mirror of
https://github.com/langgenius/dify.git
synced 2026-04-27 14:08:18 +08:00
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
'use client'
|
|
import type { Placement } from '@langgenius/dify-ui/dropdown-menu'
|
|
import type { FC } from 'react'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@langgenius/dify-ui/dropdown-menu'
|
|
import { useSuspenseQuery } from '@tanstack/react-query'
|
|
import * as React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { systemFeaturesQueryOptions } from '@/service/system-features'
|
|
import { PluginSource } from '../types'
|
|
|
|
type Props = {
|
|
source: PluginSource
|
|
onInfo: () => void
|
|
onCheckVersion: () => void
|
|
onRemove: () => void
|
|
detailUrl: string
|
|
placement?: Placement
|
|
sideOffset?: number
|
|
alignOffset?: number
|
|
popupClassName?: string
|
|
}
|
|
|
|
const OperationDropdown: FC<Props> = ({
|
|
source,
|
|
detailUrl,
|
|
onInfo,
|
|
onCheckVersion,
|
|
onRemove,
|
|
placement = 'bottom-end',
|
|
sideOffset = 4,
|
|
alignOffset = 0,
|
|
popupClassName,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const [open, setOpen] = React.useState(false)
|
|
const { data: enable_marketplace } = useSuspenseQuery({
|
|
...systemFeaturesQueryOptions(),
|
|
select: s => s.enable_marketplace,
|
|
})
|
|
|
|
return (
|
|
<DropdownMenu open={open} onOpenChange={setOpen}>
|
|
<DropdownMenuTrigger
|
|
className={cn('action-btn action-btn-m', open && 'bg-state-base-hover')}
|
|
>
|
|
<span className="i-ri-more-fill h-4 w-4" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
placement={placement}
|
|
sideOffset={sideOffset}
|
|
alignOffset={alignOffset}
|
|
popupClassName={cn('w-auto min-w-[160px]', popupClassName)}
|
|
>
|
|
{source === PluginSource.github && (
|
|
<DropdownMenuItem onClick={onInfo}>
|
|
{t('detailPanel.operation.info', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{source === PluginSource.github && (
|
|
<DropdownMenuItem onClick={onCheckVersion}>
|
|
{t('detailPanel.operation.checkUpdate', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
|
|
<DropdownMenuItem render={<a href={detailUrl} target="_blank" rel="noopener noreferrer" />}>
|
|
<span className="grow">{t('detailPanel.operation.viewDetail', { ns: 'plugin' })}</span>
|
|
<span className="i-ri-arrow-right-up-line h-3.5 w-3.5 shrink-0 text-text-tertiary" />
|
|
</DropdownMenuItem>
|
|
)}
|
|
{(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
|
|
<DropdownMenuSeparator />
|
|
)}
|
|
<DropdownMenuItem variant="destructive" onClick={onRemove}>
|
|
{t('detailPanel.operation.remove', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
export default React.memo(OperationDropdown)
|