dify/web/app/components/workflow/nodes/question-classifier/node.tsx

import type { TFunction } from 'i18next'
import type { FC } from 'react'
import type { NodeProps } from 'reactflow'
import type { QuestionClassifierNodeType } from './types'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
import { NodeSourceHandle } from '../_base/components/node-handle'
import ReadonlyInputWithSelectVar from '../_base/components/readonly-input-with-select-var'
import { getDisplayClassLabel } from './components/class-label-utils'

const MAX_CLASS_TEXT_LENGTH = 50

type TruncatedClassItemProps = {
  topic: { id: string; name: string; label?: string }
  index: number
  nodeId: string
  t: TFunction
}

const TruncatedClassItem: FC<TruncatedClassItemProps> = ({ topic, index, nodeId, t }) => {
  const displayLabel = getDisplayClassLabel(topic.label, index + 1, t)
  const truncatedText =
    topic.name.length > MAX_CLASS_TEXT_LENGTH
      ? `${topic.name.slice(0, MAX_CLASS_TEXT_LENGTH)}...`
      : topic.name

  const shouldShowTooltip = topic.name.length > MAX_CLASS_TEXT_LENGTH

  const content = (
    <div className="truncate system-xs-regular text-text-tertiary">
      <ReadonlyInputWithSelectVar value={truncatedText} nodeId={nodeId} className="truncate" />
    </div>
  )

  return (
    <div className="flex flex-col gap-y-0.5 rounded-md bg-workflow-block-parma-bg px-[5px] py-[3px]">
      <div className="text-xs/4 font-semibold text-text-secondary">{displayLabel}</div>
      {shouldShowTooltip ? (
        <Popover>
          <PopoverTrigger
            openOnHover
            aria-label={topic.name}
            className="w-full border-0 bg-transparent p-0 text-left"
          >
            {content}
          </PopoverTrigger>
          <PopoverContent popupClassName="max-w-[300px] px-3 py-2 system-xs-regular wrap-break-word text-text-tertiary">
            <ReadonlyInputWithSelectVar value={topic.name} nodeId={nodeId} />
          </PopoverContent>
        </Popover>
      ) : (
        content
      )}
    </div>
  )
}

const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
  const { t } = useTranslation()

  const { data, id } = props
  const { provider, name: modelId } = data.model
  // const tempTopics = data.topics
  const topics = data.classes
  const { textGenerationModelList } = useTextGenerationCurrentProviderAndModelAndModelList()
  const hasSetModel = provider && modelId

  if (!hasSetModel && !topics.length) return null

  return (
    <div className="mb-1 px-3 py-1">
      {hasSetModel && (
        <ModelSelector
          defaultModel={{ provider, model: modelId }}
          triggerClassName="h-6! rounded-md!"
          modelList={textGenerationModelList}
          readonly
        />
      )}
      {!!topics.length && (
        <div className="mt-2 space-y-0.5">
          <div className="space-y-0.5">
            {topics.map((topic, index) => (
              <div key={topic.id} className="relative">
                <TruncatedClassItem topic={topic} index={index} nodeId={id} t={t} />
                <NodeSourceHandle
                  {...props}
                  handleId={topic.id}
                  handleClassName="top-1/2! -translate-y-1/2! -right-[21px]!"
                />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export default React.memo(Node)