endpoints

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>
         </>
       )}