dify/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx

'use client'
import type { FC } from 'react'
import type { AnnotationReplyConfig } from '@/models/debug'
import { Button } from '@langgenius/dify-ui/button'
import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
import { toast } from '@langgenius/dify-ui/toast'
import * as React from 'react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
import { ANNOTATION_DEFAULT } from '@/config'
import { Item } from './config-param'
import ScoreSlider from './score-slider'

type Props = Readonly<{
  appId: string
  isShow: boolean
  onHide: () => void
  onSave: (
    embeddingModel: {
      embedding_provider_name: string
      embedding_model_name: string
    },
    score: number,
  ) => void
  isInit?: boolean
  annotationConfig: AnnotationReplyConfig
}>
const ConfigParamModal: FC<Props> = ({
  isShow,
  onHide: doHide,
  onSave,
  isInit,
  annotationConfig: oldAnnotationConfig,
}) => {
  const { t } = useTranslation()
  const {
    modelList: embeddingsModelList,
    defaultModel: embeddingsDefaultModel,
    currentModel: isEmbeddingsDefaultModelValid,
  } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textEmbedding)
  const [annotationConfig, setAnnotationConfig] = useState(oldAnnotationConfig)
  const [isLoading, setLoading] = useState(false)
  const [embeddingModel, setEmbeddingModel] = useState(
    oldAnnotationConfig.embedding_model
      ? {
          providerName: oldAnnotationConfig.embedding_model.embedding_provider_name,
          modelName: oldAnnotationConfig.embedding_model.embedding_model_name,
        }
      : embeddingsDefaultModel
        ? {
            providerName: embeddingsDefaultModel.provider.provider,
            modelName: embeddingsDefaultModel.model,
          }
        : undefined,
  )
  const onHide = () => {
    if (!isLoading) doHide()
  }
  const handleSave = async () => {
    if (
      !embeddingModel ||
      !embeddingModel.modelName ||
      (embeddingModel.modelName === embeddingsDefaultModel?.model && !isEmbeddingsDefaultModelValid)
    ) {
      toast.error(t(($) => $['modelProvider.embeddingModel.required'], { ns: 'common' }))
      return
    }
    setLoading(true)
    await onSave(
      {
        embedding_provider_name: embeddingModel.providerName,
        embedding_model_name: embeddingModel.modelName,
      },
      annotationConfig.score_threshold,
    )
    setLoading(false)
  }
  return (
    <Dialog
      open={isShow}
      onOpenChange={(open) => {
        if (!open) onHide()
      }}
    >
      <DialogContent className="mt-14! w-[640px]! max-w-none! border-none p-6! text-left align-middle">
        <div className="mb-2 title-2xl-semi-bold text-text-primary">
          {t(($) => $[`initSetup.${isInit ? 'title' : 'configTitle'}`], { ns: 'appAnnotation' })}
        </div>

        <div className="mt-6 space-y-3">
          <Item
            title={t(($) => $['feature.annotation.scoreThreshold.title'], { ns: 'appDebug' })}
            tooltip={t(($) => $['feature.annotation.scoreThreshold.description'], {
              ns: 'appDebug',
            })}
          >
            <ScoreSlider
              className="mt-1"
              value={(annotationConfig.score_threshold ?? ANNOTATION_DEFAULT.score_threshold) * 100}
              onChange={(val) => {
                setAnnotationConfig({
                  ...annotationConfig,
                  score_threshold: val / 100,
                })
              }}
            />
          </Item>

          <Item
            title={t(($) => $['modelProvider.embeddingModel.key'], { ns: 'common' })}
            tooltip={t(($) => $.embeddingModelSwitchTip, { ns: 'appAnnotation' })}
          >
            <div className="pt-1">
              <ModelSelector
                defaultModel={
                  embeddingModel && {
                    provider: embeddingModel.providerName,
                    model: embeddingModel.modelName,
                  }
                }
                modelList={embeddingsModelList}
                onSelect={(val) => {
                  setEmbeddingModel({
                    providerName: val.provider,
                    modelName: val.model,
                  })
                }}
              />
            </div>
          </Item>
        </div>

        <div className="mt-6 flex justify-end gap-2">
          <Button onClick={onHide}>{t(($) => $['operation.cancel'], { ns: 'common' })}</Button>
          <Button variant="primary" onClick={handleSave} loading={isLoading}>
            <div></div>
            <div>
              {t(($) => $[`initSetup.${isInit ? 'confirmBtn' : 'configConfirmBtn'}`], {
                ns: 'appAnnotation',
              })}
            </div>
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
export default React.memo(ConfigParamModal)