'use client' import { useMemo, useRef } from 'react' import { useTranslation } from 'react-i18next' import { RiArrowRightUpLine, RiBugLine, RiClipboardLine, RiDragDropLine, RiEqualizer2Line, } from '@remixicon/react' import InstallPluginDropdown from './InstallPluginDropdown' 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 Marketplace from '@/app/components/plugins/marketplace' import cn from '@/utils/classnames' const Container = () => { const { t } = useTranslation() const { setShowPluginSettingModal } = useModalContext() 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(null) return (
Debugging
View docs
{['Port', 'Key'].map((label, index) => (
{label}
{index === 0 ? 'cloud.dify,ai:2048' : 'A1B2C3D4E5F6G7H8'}
))}
} 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' >
{ activeTab === 'plugins' && ( <>
{/* Filter goes here */}
{/* Plugin cards go here */}
Drop plugin package here to install
) } { activeTab === 'discover' && ( ) }
) } export default Container