mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 09:58:04 +08:00
relocate file
This commit is contained in:
StyleZhang
@ -1,103 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
|
||||
import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
|
||||
import { Github } from '@/app/components/base/icons/src/vender/solid/general'
|
||||
import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
|
||||
import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
|
||||
import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const InstallPluginDropdown = () => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
const [selectedAction, setSelectedAction] = useState<string | null>(null)
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||
const menuRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (file) {
|
||||
setSelectedFile(file)
|
||||
setSelectedAction('local')
|
||||
setIsMenuOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node))
|
||||
setIsMenuOpen(false)
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="relative" ref={menuRef}>
|
||||
<Button
|
||||
className={cn('w-full h-full p-2 text-components-button-secondary-text', isMenuOpen && 'bg-state-base-hover')}
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<RiAddLine className='w-4 h-4' />
|
||||
<span className='pl-1'>Install plugin</span>
|
||||
<RiArrowDownSLine className='w-4 h-4 ml-1' />
|
||||
</Button>
|
||||
{isMenuOpen && (
|
||||
<div className='flex flex-col items-start absolute z-1000 top-full left-0 mt-1 p-1 pb-2
|
||||
w-[200px] bg-components-panel-bg-blur border border-components-panel-border rounded-xl
|
||||
shadows-shadow-lg'>
|
||||
<span className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch text-text-tertiary
|
||||
system-xs-medium-uppercase'>
|
||||
Install Form
|
||||
</span>
|
||||
<input
|
||||
type='file'
|
||||
ref={fileInputRef}
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
accept='.difypkg'
|
||||
/>
|
||||
{[
|
||||
{ icon: MagicBox, text: 'Marketplace', action: 'marketplace' },
|
||||
{ icon: Github, text: 'GitHub', action: 'github' },
|
||||
{ icon: FileZip, text: 'Local Package File', action: 'local' },
|
||||
].map(({ icon: Icon, text, action }) => (
|
||||
<div
|
||||
key={action}
|
||||
className='flex items-center w-full px-2 py-1.5 gap-1 rounded-lg hover:bg-state-base-hover cursor-pointer'
|
||||
onClick={() => {
|
||||
if (action === 'local') {
|
||||
fileInputRef.current?.click()
|
||||
}
|
||||
else {
|
||||
setSelectedAction(action)
|
||||
setIsMenuOpen(false)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon className="w-4 h-4 text-text-tertiary" />
|
||||
<span className='px-1 text-text-secondary system-md-regular'>{text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{selectedAction === 'marketplace' && <InstallFromMarketplace onClose={() => setSelectedAction(null)} />}
|
||||
{selectedAction === 'github' && <InstallFromGitHub onClose={() => setSelectedAction(null)}/>}
|
||||
{selectedAction === 'local' && selectedFile
|
||||
&& (<InstallFromLocalPackage
|
||||
file={selectedFile}
|
||||
onClose={() => setSelectedAction(null)}/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InstallPluginDropdown
|
||||
@ -1,121 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiArrowRightUpLine,
|
||||
RiBugLine,
|
||||
RiClipboardLine,
|
||||
RiEqualizer2Line,
|
||||
} from '@remixicon/react'
|
||||
import InstallPluginDropdown from './Install-plugin-dropdown'
|
||||
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
import Button from '@/app/components/base/button'
|
||||
import TabSlider from '@/app/components/base/tab-slider'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type ContainerWrapperProps = {
|
||||
plugins: React.ReactNode
|
||||
marketplace: React.ReactNode
|
||||
}
|
||||
const ContainerWrapper = ({
|
||||
plugins,
|
||||
marketplace,
|
||||
}: ContainerWrapperProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { setShowPluginSettingModal } = useModalContext() as any
|
||||
|
||||
const options = useMemo(() => {
|
||||
return [
|
||||
{ value: 'plugins', text: t('common.menus.plugins') },
|
||||
{ value: 'discover', text: 'Explore Marketplace' },
|
||||
]
|
||||
}, [t])
|
||||
|
||||
const [activeTab, setActiveTab] = useTabSearchParams({
|
||||
defaultTab: options[0].value,
|
||||
})
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
|
||||
? 'rounded-t-xl bg-components-panel-bg'
|
||||
: 'bg-background-body',
|
||||
)}
|
||||
>
|
||||
<div className='sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1'>
|
||||
<div className='flex justify-between items-center w-full'>
|
||||
<div className='flex-1'>
|
||||
<TabSlider
|
||||
value={activeTab}
|
||||
onChange={setActiveTab}
|
||||
options={options}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-shrink-0 items-center gap-1'>
|
||||
<InstallPluginDropdown />
|
||||
<Tooltip
|
||||
triggerMethod='click'
|
||||
popupContent={
|
||||
<>
|
||||
<div className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex flex-col justify-center items-start flex-grow flex-shrink-0 basis-0 text-text-secondary system-sm-semibold'>Debugging</span>
|
||||
<div className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
|
||||
<span className='system-xs-medium'>View docs</span>
|
||||
<RiArrowRightUpLine className='w-3 h-3' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-start gap-0.5 self-stretch'>
|
||||
{['Port', 'Key'].map((label, index) => (
|
||||
<div key={label} className='flex items-center gap-1 self-stretch'>
|
||||
<span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
|
||||
<div className='flex justify-center items-center gap-0.5'>
|
||||
<span className='system-xs-medium text-text-secondary'>
|
||||
{index === 0 ? 'cloud.dify,ai:2048' : 'A1B2C3D4E5F6G7H8'}
|
||||
</span>
|
||||
<ActionButton>
|
||||
<RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
|
||||
rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
|
||||
asChild={false}
|
||||
position='bottom'
|
||||
>
|
||||
<Button className='w-full h-full p-2 text-components-button-secondary-text'>
|
||||
<RiBugLine className='w-4 h-4' />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button
|
||||
className='w-full h-full p-2 text-components-button-secondary-text group'
|
||||
onClick={() => {
|
||||
setShowPluginSettingModal()
|
||||
}}
|
||||
>
|
||||
<RiEqualizer2Line className='w-4 h-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
activeTab === 'plugins' && plugins
|
||||
}
|
||||
{
|
||||
activeTab === 'discover' && marketplace
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContainerWrapper
|
||||
@ -1,5 +1,5 @@
|
||||
import PluginsPanel from './plugins-panel'
|
||||
import Container from './container'
|
||||
import PluginsPanel from '@/app/components/plugins/plugins-panel'
|
||||
import Container from '@/app/components/plugins/container'
|
||||
import Marketplace from '@/app/components/plugins/marketplace'
|
||||
|
||||
const PluginList = async () => {
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { RiDragDropLine } from '@remixicon/react'
|
||||
|
||||
const PluginsPanel = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
|
||||
<div className='h-px self-stretch bg-divider-subtle'></div>
|
||||
<div className='flex items-center gap-2 self-stretch'>
|
||||
{/* Filter goes here */}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
|
||||
{/* Plugin cards go here */}
|
||||
</div>
|
||||
<div className='flex items-center justify-center py-4 gap-2 text-text-quaternary'>
|
||||
<RiDragDropLine className='w-4 h-4' />
|
||||
<span className='system-xs-regular'>Drop plugin package here to install</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PluginsPanel
|
||||
Reference in New Issue
Block a user