dify/web/app/components/share/text-generation/run-once/index.tsx

import type { ChangeEvent, FC, FormEvent } from 'react'
import type { InputValueTypes } from '../types'
import type { FileEntity } from '@/app/components/base/file-uploader/types'
import type { PromptConfig } from '@/models/debug'
import type { SiteInfo } from '@/models/share'
import type { VisionFile, VisionSettings } from '@/types/app'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectItemIndicator,
  SelectItemText,
  SelectTrigger,
} from '@langgenius/dify-ui/select'
import { Textarea } from '@langgenius/dify-ui/textarea'
import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
import Input from '@/app/components/base/input'
import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'

type IRunOnceProps = {
  siteInfo: SiteInfo
  promptConfig: PromptConfig
  inputs: Record<string, InputValueTypes>
  inputsRef: React.RefObject<Record<string, InputValueTypes>>
  onInputsChange: (inputs: Record<string, InputValueTypes>) => void
  onSend: () => void
  visionConfig: VisionSettings
  onVisionFilesChange: (files: VisionFile[]) => void
  runControl?: {
    onStop: () => Promise<void> | void
    isStopping: boolean
  } | null
}

const RunOnce: FC<IRunOnceProps> = ({
  promptConfig,
  inputs,
  inputsRef,
  onInputsChange,
  onSend,
  visionConfig,
  onVisionFilesChange,
  runControl,
}) => {
  const { t } = useTranslation()
  const media = useBreakpoints()
  const isPC = media === MediaType.pc
  const [isInitialized, setIsInitialized] = useState(false)

  const onClear = () => {
    const newInputs: Record<string, InputValueTypes> = {}
    promptConfig.prompt_variables.forEach((item) => {
      if (item.type === 'string' || item.type === 'paragraph') newInputs[item.key] = ''
      else if (item.type === 'number') newInputs[item.key] = ''
      else if (item.type === 'checkbox') newInputs[item.key] = false
      else newInputs[item.key] = undefined
    })
    onInputsChange(newInputs)
  }

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    onSend()
  }
  const isRunning = !!runControl
  const stopLabel = t(($) => $['generation.stopRun'], { ns: 'share', defaultValue: 'Stop Run' })
  const handlePrimaryClick = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      if (!isRunning) return
      e.preventDefault()
      runControl?.onStop?.()
    },
    [isRunning, runControl],
  )

  const handleInputsChange = useCallback(
    (newInputs: Record<string, any>) => {
      onInputsChange(newInputs)
      inputsRef.current = newInputs
    },
    [onInputsChange, inputsRef],
  )

  useEffect(() => {
    if (isInitialized) return
    const newInputs: Record<string, any> = {}
    promptConfig.prompt_variables.forEach((item) => {
      if (item.type === 'select') newInputs[item.key] = item.default
      else if (item.type === 'string' || item.type === 'paragraph')
        newInputs[item.key] = item.default || ''
      else if (item.type === 'number') newInputs[item.key] = item.default ?? ''
      else if (item.type === 'checkbox') newInputs[item.key] = item.default || false
      else if (item.type === 'file') newInputs[item.key] = undefined
      else if (item.type === 'file-list') newInputs[item.key] = []
      else newInputs[item.key] = undefined
    })
    onInputsChange(newInputs)
    setIsInitialized(true)
  }, [promptConfig.prompt_variables, onInputsChange])

  return (
    <div className="">
      <section>
        {/* input form */}
        <form onSubmit={onSubmit}>
          {inputs === null ||
          inputs === undefined ||
          Object.keys(inputs).length === 0 ||
          !isInitialized
            ? null
            : promptConfig.prompt_variables
                .filter((item) => item.hide !== true)
                .map((item) => {
                  const inputValue = inputs[item.key]
                  const selectValue =
                    typeof inputValue === 'string' && inputValue !== '' ? inputValue : null
                  const defaultSelectValue =
                    typeof item.default === 'string' && item.default !== '' ? item.default : null

                  return (
                    <div className="mt-4 w-full" key={item.key}>
                      {item.type !== 'checkbox' && (
                        <div className="flex h-6 items-center gap-1 system-md-semibold text-text-secondary">
                          <div className="truncate">{item.name}</div>
                          {!item.required && (
                            <span className="system-xs-regular text-text-tertiary">
                              {t(($) => $['panel.optional'], { ns: 'workflow' })}
                            </span>
                          )}
                        </div>
                      )}
                      <div className="mt-1">
                        {item.type === 'select' && (
                          <Select<string>
                            value={selectValue}
                            onValueChange={(nextValue) => {
                              if (nextValue == null || nextValue === '') return
                              handleInputsChange({ ...inputsRef.current, [item.key]: nextValue })
                            }}
                          >
                            <SelectTrigger className="w-full">
                              {selectValue ??
                                defaultSelectValue ??
                                t(($) => $['placeholder.select'], { ns: 'common' })}
                            </SelectTrigger>
                            <SelectContent>
                              {(item.options || []).map((option) => (
                                <SelectItem key={option} value={option}>
                                  <SelectItemText>{option}</SelectItemText>
                                  <SelectItemIndicator />
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        )}
                        {item.type === 'string' && (
                          <Input
                            type="text"
                            placeholder={item.name}
                            value={inputs[item.key] as string}
                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
                              handleInputsChange({
                                ...inputsRef.current,
                                [item.key]: e.target.value,
                              })
                            }}
                            maxLength={item.max_length}
                          />
                        )}
                        {item.type === 'paragraph' && (
                          <Textarea
                            aria-label={item.name}
                            className="h-[104px] sm:text-xs"
                            placeholder={item.name}
                            value={inputs[item.key] as string}
                            onValueChange={(value) => {
                              handleInputsChange({ ...inputsRef.current, [item.key]: value })
                            }}
                          />
                        )}
                        {item.type === 'number' && (
                          <Input
                            type="number"
                            placeholder={item.name}
                            value={inputs[item.key] as number}
                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
                              handleInputsChange({
                                ...inputsRef.current,
                                [item.key]: e.target.value,
                              })
                            }}
                          />
                        )}
                        {item.type === 'checkbox' && (
                          <BoolInput
                            name={item.name || item.key}
                            value={!!inputs[item.key] as boolean}
                            required={item.required}
                            onChange={(value) => {
                              handleInputsChange({ ...inputsRef.current, [item.key]: value })
                            }}
                          />
                        )}
                        {item.type === 'file' && (
                          <FileUploaderInAttachmentWrapper
                            value={
                              inputs[item.key] &&
                              typeof inputs[item.key] === 'object' &&
                              !Array.isArray(inputs[item.key])
                                ? [inputs[item.key] as FileEntity]
                                : []
                            }
                            onChange={(files) => {
                              handleInputsChange({ ...inputsRef.current, [item.key]: files[0] })
                            }}
                            fileConfig={{
                              ...item.config,
                              fileUploadConfig: (visionConfig as any).fileUploadConfig,
                            }}
                          />
                        )}
                        {item.type === 'file-list' && (
                          <FileUploaderInAttachmentWrapper
                            value={
                              Array.isArray(inputs[item.key])
                                ? (inputs[item.key] as FileEntity[])
                                : []
                            }
                            onChange={(files) => {
                              handleInputsChange({ ...inputsRef.current, [item.key]: files })
                            }}
                            fileConfig={{
                              ...item.config,
                              // oxlint-disable-next-line typescript/no-explicit-any
                              fileUploadConfig: (visionConfig as any).fileUploadConfig,
                            }}
                          />
                        )}
                        {item.type === 'json_object' && (
                          <CodeEditor
                            language={CodeLanguage.json}
                            value={inputs[item.key] as string}
                            onChange={(value) => {
                              handleInputsChange({ ...inputsRef.current, [item.key]: value })
                            }}
                            noWrapper
                            className="bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1"
                            placeholder={
                              <div className="whitespace-pre">
                                {typeof item.json_schema === 'string'
                                  ? item.json_schema
                                  : JSON.stringify(item.json_schema || '', null, 2)}
                              </div>
                            }
                          />
                        )}
                      </div>
                    </div>
                  )
                })}
          {visionConfig?.enabled && (
            <div className="mt-4 w-full">
              <div className="flex h-6 items-center system-md-semibold text-text-secondary">
                {t(($) => $['imageUploader.imageUpload'], { ns: 'common' })}
              </div>
              <div className="mt-1">
                <TextGenerationImageUploader
                  settings={visionConfig}
                  onFilesChange={(files) =>
                    onVisionFilesChange(
                      files
                        .filter((file) => file.progress !== -1)
                        .map((fileItem) => ({
                          type: 'image',
                          transfer_method: fileItem.type,
                          url: fileItem.url,
                          upload_file_id: fileItem.fileId,
                        })),
                    )
                  }
                />
              </div>
            </div>
          )}
          <div className="mt-6 mb-3 w-full">
            <div className="flex items-center justify-between gap-2">
              <Button onClick={onClear} disabled={false}>
                <span className="text-[13px]">
                  {t(($) => $['operation.clear'], { ns: 'common' })}
                </span>
              </Button>
              <Button
                className={cn(!isPC && 'grow')}
                type={isRunning ? 'button' : 'submit'}
                variant={isRunning ? 'secondary' : 'primary'}
                disabled={isRunning && runControl?.isStopping}
                onClick={handlePrimaryClick}
              >
                {isRunning ? (
                  <>
                    {runControl?.isStopping ? (
                      <RiLoader2Line
                        className="mr-1 size-4 shrink-0 animate-spin"
                        aria-hidden="true"
                      />
                    ) : (
                      <StopCircle className="mr-1 size-4 shrink-0" aria-hidden="true" />
                    )}
                    <span className="text-[13px]">{stopLabel}</span>
                  </>
                ) : (
                  <>
                    <RiPlayLargeLine className="mr-1 size-4 shrink-0" aria-hidden="true" />
                    <span className="text-[13px]">
                      {t(($) => $['generation.run'], { ns: 'share' })}
                    </span>
                  </>
                )}
              </Button>
            </div>
          </div>
        </form>
      </section>
    </div>
  )
}
export default React.memo(RunOnce)