dify/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx

'use client'
import type { FC } from 'react'
import React, { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import {
  RiArrowLeftLine,
  RiCloseLine,
} from '@remixicon/react'
import Drawer from '@/app/components/base/drawer'
import ActionButton from '@/app/components/base/action-button'
import Icon from '@/app/components/plugins/card/base/card-icon'
import Description from '@/app/components/plugins/card/base/description'
import Divider from '@/app/components/base/divider'
import type {
  StrategyDetail as StrategyDetailType,
} from '@/app/components/plugins/types'
import type { Locale } from '@/i18n'
import { useRenderI18nObject } from '@/hooks/use-i18n'
import { API_PREFIX } from '@/config'
import cn from '@/utils/classnames'

type Props = {
  provider: {
    author: string
    name: string
    description: Record<Locale, string>
    tenant_id: string
    icon: string
    label: Record<Locale, string>
    tags: string[]
  }
  detail: StrategyDetailType
  onHide: () => void
}

const StrategyDetail: FC<Props> = ({
  provider,
  detail,
  onHide,
}) => {
  const getValueFromI18nObject = useRenderI18nObject()
  const { t } = useTranslation()

  const outputSchema = useMemo(() => {
    const res: any[] = []
    if (!detail.output_schema)
      return []
    Object.keys(detail.output_schema.properties).forEach((outputKey) => {
      const output = detail.output_schema.properties[outputKey]
      res.push({
        name: outputKey,
        type: output.type === 'array'
          ? `Array[${output.items?.type.slice(0, 1).toLocaleUpperCase()}${output.items?.type.slice(1)}]`
          : `${output.type.slice(0, 1).toLocaleUpperCase()}${output.type.slice(1)}`,
        description: output.description,
      })
    })
    return res
  }, [detail.output_schema])

  const getType = (type: string) => {
    if (type === 'number-input')
      return t('tools.setBuiltInTools.number')
    if (type === 'text-input')
      return t('tools.setBuiltInTools.string')
    if (type === 'file')
      return t('tools.setBuiltInTools.file')
    if (type === 'array[tools]')
      return 'multiple-tool-select'
    return type
  }

  return (
    <Drawer
      isOpen
      clickOutsideNotOpen={false}
      onClose={onHide}
      footer={null}
      mask={false}
      positionCenter={false}
      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
    >
      <>
        {/* header */}
        <div className='relative border-b border-divider-subtle p-4 pb-3'>
          <div className='absolute right-3 top-3'>
            <ActionButton onClick={onHide}>
              <RiCloseLine className='h-4 w-4' />
            </ActionButton>
          </div>
          <div
            className='system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary'
            onClick={onHide}
          >
            <RiArrowLeftLine className='h-4 w-4' />
            BACK
          </div>
          <div className='flex items-center gap-1'>
            <Icon size='tiny' className='h-6 w-6' src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
            <div className=''>{getValueFromI18nObject(provider.label)}</div>
          </div>
          <div className='system-md-semibold mt-1 text-text-primary'>{getValueFromI18nObject(detail.identity.label)}</div>
          <Description className='mt-3' text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
        </div>
        {/* form */}
        <div className='h-full'>
          <div className='flex h-full flex-col overflow-y-auto'>
            <div className='system-sm-semibold-uppercase p-4 pb-1 text-text-primary'>{t('tools.setBuiltInTools.parameters')}</div>
            <div className='px-4'>
              {detail.parameters.length > 0 && (
                <div className='space-y-1 py-2'>
                  {detail.parameters.map((item: any, index) => (
                    <div key={index} className='py-1'>
                      <div className='flex items-center gap-2'>
                        <div className='code-sm-semibold text-text-secondary'>{getValueFromI18nObject(item.label)}</div>
                        <div className='system-xs-regular text-text-tertiary'>
                          {getType(item.type)}
                        </div>
                        {item.required && (
                          <div className='system-xs-medium text-text-warning-secondary'>{t('tools.setBuiltInTools.required')}</div>
                        )}
                      </div>
                      {item.human_description && (
                        <div className='system-xs-regular mt-0.5 text-text-tertiary'>
                          {getValueFromI18nObject(item.human_description)}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
            {detail.output_schema && (
              <>
                <div className='px-4'>
                  <Divider className="!mt-2" />
                </div>
                <div className='system-sm-semibold-uppercase p-4 pb-1 text-text-primary'>OUTPUT</div>
                {outputSchema.length > 0 && (
                  <div className='space-y-1 px-4 py-2'>
                    {outputSchema.map((outputItem, index) => (
                      <div key={index} className='py-1'>
                        <div className='flex items-center gap-2'>
                          <div className='code-sm-semibold text-text-secondary'>{outputItem.name}</div>
                          <div className='system-xs-regular text-text-tertiary'>{outputItem.type}</div>
                        </div>
                        {outputItem.description && (
                          <div className='system-xs-regular mt-0.5 text-text-tertiary'>
                            {outputItem.description}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </>
    </Drawer>
  )
}
export default StrategyDetail