endpoints

web/app/components/base/copy-btn/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useState } from 'react'
 import { t } from 'i18next'
+import { debounce } from 'lodash-es'
 import copy from 'copy-to-clipboard'
 import s from './style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
@@ -18,22 +19,29 @@ const CopyBtn = ({
 }: ICopyBtnProps) => {
   const [isCopied, setIsCopied] = useState(false)
 
+  const onClickCopy = debounce(() => {
+    copy(value)
+    setIsCopied(true)
+  }, 100)
+
+  const onMouseLeave = debounce(() => {
+    setIsCopied(false)
+  }, 100)
+
   return (
     <div className={`${className}`}>
       <Tooltip
         popupContent={(isCopied ? t('appApi.copied') : t('appApi.copy'))}
       >
         <div
+          onMouseLeave={onMouseLeave}
           className={'box-border p-0.5 flex items-center justify-center rounded-md bg-white cursor-pointer'}
           style={!isPlain
             ? {
               boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
             }
             : {}}
-          onClick={() => {
-            copy(value)
-            setIsCopied(true)
-          }}
+          onClick={onClickCopy}
         >
           <div className={`w-6 h-6 rounded-md hover:bg-gray-50  ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
         </div>

web/app/components/plugins/plugin-detail-panel/action-list.tsx

@@ -1,14 +1,35 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+
+const ActionCard = () => {
+  return (
+    <div className='px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'>
+      <div className='pb-0.5 text-text-secondary system-md-semibold'>Notion Page Search</div>
+      <div className='text-text-tertiary system-xs-regular line-clamp-2'>A tool for performing a Google SERP search and extracting snippets and webpages.Input should be a search query.</div>
+    </div>
+  )
+}
 
 const ActionList = () => {
   const { t } = useTranslation()
   return (
-    <div className='px-4 py-2'>
-      <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{t('plugin.detailPanel.actionNum', { num: 3 })}</div>
-      <div className='px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'>
-        <div className='pb-0.5 text-text-secondary system-md-semibold'>Notion Page Search</div>
-        <div className='text-text-tertiary system-xs-regular line-clamp-2'>A tool for performing a Google SERP search and extracting snippets and webpages.Input should be a search query.</div>
+    <div className='px-4 pt-2 pb-4'>
+      <div className='mb-1 py-1'>
+        <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+          {t('plugin.detailPanel.actionNum', { num: 3 })}
+          <Button variant='secondary' size='small'>
+            <Indicator className='mr-2' color={'green'} />
+            {t('tools.auth.authorized')}
+          </Button>
+        </div>
+        <Button variant='primary' className='w-full'>{t('tools.auth.unauthorized')}</Button>
+      </div>
+      <div className='flex flex-col gap-2'>
+        <ActionCard />
+        <ActionCard />
+        <ActionCard />
       </div>
     </div>
   )

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

@@ -1,9 +1,91 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine, RiLoginCircleLine } from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
+import CopyBtn from '@/app/components/base/copy-btn'
+import Indicator from '@/app/components/header/indicator'
+import Tooltip from '@/app/components/base/tooltip'
+import Switch from '@/app/components/base/switch'
+
+const EndpointCard = () => {
+  const { t } = useTranslation()
+  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'>
+          <RiLoginCircleLine className='w-4 h-4' />
+          <div>Endpoint for Unreal workspace</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>
+            <CopyBtn
+              className='hidden shrink-0 ml-2 group-hover:block'
+              value={'https://extension.dify.ai/a1b2c3d4/onStart'}
+              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='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'>
+          <Indicator color='gray' />
+          {t('plugin.detailPanel.disabled')}
+        </div> */}
+        <Switch
+          className='ml-3'
+          defaultValue={true}
+          onChange={() => {}}
+          size='sm'
+        />
+      </div>
+    </div>
+  )
+}
 
 const EndpointList = () => {
+  const { t } = useTranslation()
   return (
-    <div>
-      <h1>Endpoints</h1>
+    <div className='px-4 py-2 border-t border-divider-subtle'>
+      <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+        <div className='flex items-center gap-0.5'>
+          {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>
+        <ActionButton>
+          <RiAddLine className='w-4 h-4' />
+        </ActionButton>
+      </div>
+      <div className='mb-1 p-3 flex justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsEmpty')}</div>
+      <div className='flex flex-col gap-2'>
+        <EndpointCard />
+        <EndpointCard />
+        <EndpointCard />
+      </div>
     </div>
   )
 }

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { RiCloseLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import type { Plugin } from '../types'
-import { PluginType } from '../types'
+// import { PluginType } from '../types'
 import Badge from '../../base/badge'
 import Description from '../card/base/description'
 import Icon from '../card/base/card-icon'
@@ -124,15 +124,9 @@ const PluginDetailPanel: FC<Props> = ({
             <Description className='mt-3' text={pluginDetail.brief[locale]} descriptionLineRows={2}></Description>
           </div>
           <div className='grow overflow-y-auto'>
-            {pluginDetail.type === PluginType.model && (
-              <ModelList />
-            )}
-            {pluginDetail.type !== PluginType.model && (
-              <>
-                <EndpointList />
-                <ActionList />
-              </>
-            )}
+            <ActionList />
+            <EndpointList />
+            <ModelList />
           </div>
         </>
       )}

web/i18n/en-US/plugin.ts

@@ -11,8 +11,12 @@ const translation = {
       viewDetail: 'View Detail',
       remove: 'Remove',
     },
-    modelNum: '{{num}} MODELS INCLUDED',
     actionNum: '{{num}} ACTIONS INCLUDED',
+    endpoints: 'Endpoints',
+    endpointsEmpty: 'Click the \'+\' button to add an endpoint',
+    serviceOk: 'Service OK',
+    disabled: 'Disabled',
+    modelNum: '{{num}} MODELS INCLUDED',
   },
 }
 

web/i18n/zh-Hans/plugin.ts

@@ -11,8 +11,12 @@ const translation = {
       viewDetail: '查看详情',
       remove: '移除',
     },
-    modelNum: '{{num}} 模型已包含',
     actionNum: '{{num}} ACTIONS 已包含',
+    endpoints: 'Endpoints',
+    endpointsEmpty: '点击 \'+\' 按钮添加端点',
+    serviceOk: '服务正常',
+    disabled: '停用',
+    modelNum: '{{num}} 模型已包含',
   },
 }