| import type { FC } from 'react' | |||||
| import type { FC, FormEvent } from 'react' | |||||
| import React from 'react' | import React from 'react' | ||||
| import { useTranslation } from 'react-i18next' | import { useTranslation } from 'react-i18next' | ||||
| import { | import { | ||||
| onInputsChange(newInputs) | onInputsChange(newInputs) | ||||
| } | } | ||||
| const onSubmit = (e: FormEvent<HTMLFormElement>) => { | |||||
| e.preventDefault() | |||||
| onSend() | |||||
| } | |||||
| return ( | return ( | ||||
| <div className=""> | <div className=""> | ||||
| <section> | <section> | ||||
| {/* input form */} | {/* input form */} | ||||
| <form> | |||||
| <form onSubmit={onSubmit}> | |||||
| {promptConfig.prompt_variables.map(item => ( | {promptConfig.prompt_variables.map(item => ( | ||||
| <div className='w-full mt-4' key={item.key}> | <div className='w-full mt-4' key={item.key}> | ||||
| <label className='text-gray-900 text-sm font-medium'>{item.name}</label> | <label className='text-gray-900 text-sm font-medium'>{item.name}</label> | ||||
| placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`} | placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`} | ||||
| value={inputs[item.key]} | value={inputs[item.key]} | ||||
| onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }} | onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }} | ||||
| onKeyDown={(e) => { | |||||
| if (e.key === 'Enter') { | |||||
| e.preventDefault() | |||||
| onSend() | |||||
| } | |||||
| }} | |||||
| maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN} | maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN} | ||||
| /> | /> | ||||
| )} | )} | ||||
| <span className='text-[13px]'>{t('common.operation.clear')}</span> | <span className='text-[13px]'>{t('common.operation.clear')}</span> | ||||
| </Button> | </Button> | ||||
| <Button | <Button | ||||
| type='submit' | |||||
| variant="primary" | variant="primary" | ||||
| onClick={onSend} | |||||
| disabled={false} | disabled={false} | ||||
| > | > | ||||
| <PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" /> | <PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" /> |