dify/web/app/components/plugins/readme-panel/entrance.tsx

import type { PluginDetail } from '../types'
import type { ReadmePanelPresentation } from './store'
import { cn } from '@langgenius/dify-ui/cn'
import { useId } from 'react'
import { useTranslation } from 'react-i18next'
import { BUILTIN_TOOLS_ARRAY } from './constants'
import { useReadmePanelStore } from './store'

export const ReadmeEntrance = ({
  pluginDetail,
  presentation = 'drawer',
  className,
  showShortTip = false,
}: {
  pluginDetail: PluginDetail
  presentation?: ReadmePanelPresentation
  className?: string
  showShortTip?: boolean
}) => {
  const { t } = useTranslation()
  const triggerId = useId()
  const openReadmePanel = useReadmePanelStore((s) => s.openReadmePanel)

  const handleReadmeClick = () => {
    if (pluginDetail) {
      openReadmePanel({
        detail: pluginDetail,
        presentation,
        triggerId,
      })
    }
  }
  if (
    !pluginDetail ||
    !pluginDetail?.plugin_unique_identifier ||
    BUILTIN_TOOLS_ARRAY.includes(pluginDetail.id)
  )
    return null

  return (
    <div
      className={cn(
        'flex flex-col items-start justify-center gap-2 pt-0 pb-4',
        presentation === 'drawer' && 'px-4',
        className,
      )}
    >
      {!showShortTip && (
        <div className="relative h-1 w-8 shrink-0">
          <div className="h-px w-full bg-divider-regular"></div>
        </div>
      )}

      <button
        id={triggerId}
        type="button"
        onClick={handleReadmeClick}
        className="flex w-full items-center justify-start gap-1 rounded-sm text-text-tertiary transition-opacity hover:text-text-accent-light-mode-only focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden"
      >
        <div className="relative flex size-3 items-center justify-center overflow-hidden">
          <span aria-hidden="true" className="i-ri-book-read-line size-3" />
        </div>
        <span className="text-xs/4 font-normal">
          {!showShortTip
            ? t(($) => $['readmeInfo.needHelpCheckReadme'], { ns: 'plugin' })
            : t(($) => $['readmeInfo.title'], { ns: 'plugin' })}
        </span>
      </button>
    </div>
  )
}