| | |
| | | Clipboard, |
| | | ClipboardCheck, |
| | | } from '@/app/components/base/icons/src/vender/line/files' |
| | | import Button from '@/app/components/base/button' |
| | | import Tooltip from '@/app/components/base/tooltip' |
| | | import PromptEditor from '@/app/components/base/prompt-editor' |
| | | import ConfigContext from '@/context/debug-configuration' |
| | |
| | | const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508) |
| | | const contextMissing = ( |
| | | <div |
| | | className='flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pb-1 pl-4 pr-3 pt-2' |
| | | className='flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl' |
| | | style={{ |
| | | background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)', |
| | | }} |
| | | > |
| | | <div className='flex items-center pr-2' > |
| | | <RiErrorWarningFill className='mr-1 h-4 w-4 text-[#F79009]' /> |
| | | <div className='text-[13px] font-medium leading-[18px] text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div> |
| | | <RiErrorWarningFill className='mr-1 w-4 h-4 text-[#F79009]' /> |
| | | <div className='leading-[18px] text-[13px] font-medium text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div> |
| | | </div> |
| | | <Button |
| | | size='small' |
| | | variant='secondary-accent' |
| | | <div |
| | | className='flex items-center h-6 px-2 rounded-md bg-[#fff] border border-gray-200 shadow-xs text-xs font-medium text-primary-600 cursor-pointer' |
| | | onClick={onHideContextMissingTip} |
| | | >{t('common.operation.ok')}</Button> |
| | | >{t('common.operation.ok')}</div> |
| | | </div> |
| | | ) |
| | | return ( |
| | | <div className={`rounded-xl bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs ${!isContextMissing ? '' : s.warningBorder}`}> |
| | | <div className='rounded-xl bg-background-default'> |
| | | <div className={`relative ${!isContextMissing ? s.gradientBorder : s.warningBorder}`}> |
| | | <div className='rounded-xl bg-white'> |
| | | {isContextMissing |
| | | ? contextMissing |
| | | : ( |
| | | <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pb-1 pl-4 pr-3 pt-2 hover:shadow-xs')}> |
| | | <div className={cn(s.boxHeader, 'flex justify-between items-center h-11 pt-2 pr-3 pb-1 pl-4 rounded-tl-xl rounded-tr-xl bg-white hover:shadow-xs')}> |
| | | {isChatMode |
| | | ? ( |
| | | <MessageTypeSelector value={type} onChange={onTypeChange} /> |
| | |
| | | </div>)} |
| | | <div className={cn(s.optionWrap, 'items-center space-x-1')}> |
| | | {canDelete && ( |
| | | <RiDeleteBinLine onClick={onDelete} className='h-6 w-6 cursor-pointer p-1 text-text-tertiary' /> |
| | | <RiDeleteBinLine onClick={onDelete} className='h-6 w-6 p-1 text-gray-500 cursor-pointer' /> |
| | | )} |
| | | {!isCopied |
| | | ? ( |
| | | <Clipboard className='h-6 w-6 cursor-pointer p-1 text-text-tertiary' onClick={() => { |
| | | <Clipboard className='h-6 w-6 p-1 text-gray-500 cursor-pointer' onClick={() => { |
| | | copy(value) |
| | | setIsCopied(true) |
| | | }} /> |
| | | ) |
| | | : ( |
| | | <ClipboardCheck className='h-6 w-6 p-1 text-text-tertiary' /> |
| | | <ClipboardCheck className='h-6 w-6 p-1 text-gray-500' /> |
| | | )} |
| | | </div> |
| | | </div> |
| | | )} |
| | | |
| | | <PromptEditorHeightResizeWrap |
| | | className='min-h-[102px] overflow-y-auto px-4 text-sm text-text-secondary' |
| | | className='px-4 min-h-[102px] overflow-y-auto text-sm text-gray-700' |
| | | height={editorHeight} |
| | | minHeight={minHeight} |
| | | onHeightChange={setEditorHeight} |
| | | footer={( |
| | | <div className='flex pb-2 pl-4'> |
| | | <div className="h-[18px] rounded-md bg-divider-regular px-1 text-xs leading-[18px] text-text-tertiary">{value.length}</div> |
| | | <div className='pl-4 pb-2 flex'> |
| | | <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{value.length}</div> |
| | | </div> |
| | | )} |
| | | hideResize={noResize} |