feat: debug info api

web/app/components/plugins/base/key-value-item.tsx

@@ -43,15 +43,15 @@ const KeyValueItem: FC<Props> = ({
   const CopyIcon = isCopied ? ClipboardCheck : RiClipboardLine
 
   return (
-    <div className='flex items-center gap-1 self-stretch'>
+    <div className='flex items-center gap-1'>
       <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
       <div className='flex justify-center items-center gap-0.5'>
-        <span className='system-xs-medium text-text-secondary'>
+        <span className='max-w-[140px] truncate system-xs-medium text-text-secondary'>
           {value}
         </span>
         <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
           <ActionButton onClick={handleCopy}>
-            <CopyIcon className='w-3.5 h-3.5 text-text-tertiary' />
+            <CopyIcon className='shrink-0 w-3.5 h-3.5 text-text-tertiary' />
           </ActionButton>
         </Tooltip>
       </div>

web/app/components/plugins/plugin-page/debug-info.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
   RiArrowRightUpLine,
   RiBugLine,
@@ -9,14 +9,23 @@ import { useTranslation } from 'react-i18next'
 import KeyValueItem from '../base/key-value-item'
 import Tooltip from '@/app/components/base/tooltip'
 import Button from '@/app/components/base/button'
+import type { DebugInfo as DebugInfoTypes } from '../types'
+import { fetchDebugKey } from '@/service/plugins'
 
 const i18nPrefix = 'plugin.debugInfo'
 
 const DebugInfo: FC = () => {
   const { t } = useTranslation()
+  const [info, setInfo] = React.useState<DebugInfoTypes | null>(null)
+  useEffect(() => {
+    fetchDebugKey().then((res) => {
+      setInfo(res)
+    })
+  }, [])
   return (
     <Tooltip
       triggerMethod='click'
+      disabled={!info}
       popupContent={
         <>
           <div className='flex items-center gap-1 self-stretch'>
@@ -29,11 +38,11 @@ const DebugInfo: FC = () => {
           <div className='space-y-0.5'>
             <KeyValueItem
               label={'Port'}
-              value={'cloud.dify,ai:2048'}
+              value={`${info?.host}:${info?.port}`}
             />
             <KeyValueItem
               label={'Key'}
-              value={'A1B2C3D4E5F6G7H8'}
+              value={info?.key || ''}
             />
           </div>
         </>

web/app/components/plugins/types.ts

@@ -187,3 +187,9 @@ export type GitHubRepoReleaseResponse = {
 export type InstallPackageResponse = {
   plugin_unique_identifier: string
 }
+
+export type DebugInfo = {
+  key: string
+  host: string
+  port: number
+}

web/service/plugins.ts

@@ -46,3 +46,10 @@ export const installPackageFromGitHub: Fetcher<InstallPackageResponse, { repo: s
 }
 
 // export const fetchInstalledPluginsList: Fetcher<
+export const fetchDebugKey = async () => {
+  return Promise.resolve({
+    key: 'f15b079b-bba2-4a62-abad-69119bcd3fa4',
+    host: 'localhost',
+    port: 5003,
+  })
+}