Austin/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2024-11-16 03:32:23 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

endpoint card databing

Browse Source
This commit is contained in:
JzoNg 2024-10-19 14:46:17 +08:00
parent 5e077e4ce8
commit 0279bd8c75
3 changed files with 65 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
View File

@ -1,55 +1,74 @@
import React from 'react'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { RiLoginCircleLine } from '@remixicon/react'
import { RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react'
import type { EndpointListItem } from '../types'
import ActionButton from '@/app/components/base/action-button'
import CopyBtn from '@/app/components/base/copy-btn'
import Indicator from '@/app/components/header/indicator'
import Switch from '@/app/components/base/switch'
const EndpointCard = () => {
type Props = {
data: EndpointListItem
}
const EndpointCard = ({
data,
}: Props) => {
const { t } = useTranslation()
const [active, setActive] = useState(data.enabled)
const handleSwitch = () => {
setActive(!active)
}
return (
<div className='p-0.5 bg-background-section-burn rounded-xl'>
<div className='p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
<div className='mb-1 h-6 flex items-center gap-1 text-text-secondary system-md-semibold'>
<div className='group p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
<div className='flex items-center'>
<div className='grow mb-1 h-6 flex items-center gap-1 text-text-secondary system-md-semibold'>
<RiLoginCircleLine className='w-4 h-4' />
<div>Endpoint for Unreal workspace</div>
<div>{data.name}</div>
</div>
<div className='h-6 flex items-center'>
<div className='shrink-0 w-24 text-text-tertiary system-xs-regular'>Start Callback</div>
<div className='group grow flex items-center text-text-secondary system-xs-regular truncate'>
<div className='truncate'>https://extension.dify.ai/a1b2c3d4/onStart</div>
<div className='hidden group-hover:flex items-center'>
<ActionButton>
<RiEditLine className='w-4 h-4' />
</ActionButton>
<ActionButton className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'>
<RiDeleteBinLine className='w-4 h-4' />
</ActionButton>
</div>
</div>
{data.declaration.endpoints.map((endpoint, index) => (
<div key={index} className='h-6 flex items-center'>
<div className='shrink-0 w-12 text-text-tertiary system-xs-regular'>{endpoint.method}</div>
<div className='group/item grow flex items-center text-text-secondary system-xs-regular truncate'>
<div className='truncate'>{`${data.url}${endpoint.path}`}</div>
<CopyBtn
className='hidden shrink-0 ml-2 group-hover:block'
value={'https://extension.dify.ai/a1b2c3d4/onStart'}
className='hidden shrink-0 ml-2 group-hover/item:block'
value={`${data.url}${endpoint.path}`}
isPlain
/>
</div>
</div>
<div className='h-6 flex items-center'>
<div className='shrink-0 w-24 text-text-tertiary system-xs-regular'>Finish Callback</div>
<div className='group grow flex items-center text-text-secondary system-xs-regular truncate'>
<div className='truncate'>https://extension.dify.ai/a1b2c3d4/onFinish</div>
<CopyBtn
className='hidden shrink-0 ml-2 group-hover:block'
value={'https://extension.dify.ai/a1b2c3d4/onFinish'}
isPlain
/>
))}
</div>
</div>
</div>
<div className='px-3 py-2 flex items-center justify-between'>
<div className='p-2 pl-3 flex items-center justify-between'>
{active && (
<div className='flex items-center gap-1 system-xs-semibold-uppercase text-util-colors-green-green-600'>
<Indicator color='green' />
{t('plugin.detailPanel.serviceOk')}
</div>
{/* <div className='flex items-center gap-1 system-xs-semibold-uppercase text-text-tertiary'>
)}
{!active && (
<div className='flex items-center gap-1 system-xs-semibold-uppercase text-text-tertiary'>
<Indicator color='gray' />
{t('plugin.detailPanel.disabled')}
</div> */}
</div>
)}
<Switch
className='ml-3'
defaultValue={true}
onChange={() => {}}
defaultValue={active}
onChange={handleSwitch}
size='sm'
/>
</div>

16
web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
View File

@ -1,13 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { RiAddLine } from '@remixicon/react'
import type { EndpointListItem, PluginEndpointDeclaration } from '../types'
import EndpointCard from './endpoint-card'
import ActionButton from '@/app/components/base/action-button'
import Tooltip from '@/app/components/base/tooltip'
type Props = {
declaration: any
list: any[]
declaration: PluginEndpointDeclaration
list: EndpointListItem[]
}
const EndpointList = ({
@ -22,11 +23,7 @@ const EndpointList = ({
{t('plugin.detailPanel.endpoints')}
<Tooltip
popupContent={
<div className='w-[180px]'>
{t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
<div key={item}>{item}</div>
))}
</div>
<div className='w-[180px]'>TODO</div>
}
/>
</div>
@ -39,7 +36,10 @@ const EndpointList = ({
)}
<div className='flex flex-col gap-2'>
{list.map((item, index) => (
<EndpointCard key={index} />
<EndpointCard
key={index}
data={item}
/>
))}
</div>
</div>

2
web/app/components/plugins/plugin-detail-panel/index.tsx
View File

@ -8,7 +8,6 @@ import EndpointList from './endpoint-list'
import ActionList from './action-list'
import ModelList from './model-list'
import Drawer from '@/app/components/base/drawer'
// import Loading from '@/app/components/base/loading'
import cn from '@/utils/classnames'
type Props = {
@ -39,7 +38,6 @@ const PluginDetailPanel: FC<Props> = ({
positionCenter={false}
panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
>
{/* {loading && <Loading type='area' />} */}
{pluginDetail && (
<>
<DetailHeader