Feat: web app dark mode (#14732)
This commit is contained in:
@@ -2,18 +2,21 @@ import type { FC, FormEvent } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
PlayIcon,
|
||||
} from '@heroicons/react/24/solid'
|
||||
RiPlayLargeLine,
|
||||
} from '@remixicon/react'
|
||||
import Select from '@/app/components/base/select'
|
||||
import type { SiteInfo } from '@/models/share'
|
||||
import type { PromptConfig } from '@/models/debug'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { DEFAULT_VALUE_MAX_LEN } from '@/config'
|
||||
import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
|
||||
import type { VisionFile, VisionSettings } from '@/types/app'
|
||||
import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
|
||||
import { getProcessedFiles } from '@/app/components/base/file-uploader/utils'
|
||||
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export type IRunOnceProps = {
|
||||
siteInfo: SiteInfo
|
||||
@@ -35,6 +38,8 @@ const RunOnce: FC<IRunOnceProps> = ({
|
||||
onVisionFilesChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const media = useBreakpoints()
|
||||
const isPC = media === MediaType.pc
|
||||
|
||||
const onClear = () => {
|
||||
const newInputs: Record<string, any> = {}
|
||||
@@ -61,8 +66,8 @@ const RunOnce: FC<IRunOnceProps> = ({
|
||||
<form onSubmit={onSubmit}>
|
||||
{promptConfig.prompt_variables.map(item => (
|
||||
<div className='w-full mt-4' key={item.key}>
|
||||
<label className='text-gray-900 text-sm font-medium'>{item.name}</label>
|
||||
<div className='mt-2'>
|
||||
<label className='h-6 flex items-center text-text-secondary system-md-semibold'>{item.name}</label>
|
||||
<div className='mt-1'>
|
||||
{item.type === 'select' && (
|
||||
<Select
|
||||
className='w-full'
|
||||
@@ -70,13 +75,11 @@ const RunOnce: FC<IRunOnceProps> = ({
|
||||
onSelect={(i) => { handleInputsChange({ ...inputsRef.current, [item.key]: i.value }) }}
|
||||
items={(item.options || []).map(i => ({ name: i, value: i }))}
|
||||
allowSearch={false}
|
||||
bgClassName='bg-gray-50'
|
||||
/>
|
||||
)}
|
||||
{item.type === 'string' && (
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
|
||||
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
value={inputs[item.key]}
|
||||
onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
|
||||
@@ -92,9 +95,8 @@ const RunOnce: FC<IRunOnceProps> = ({
|
||||
/>
|
||||
)}
|
||||
{item.type === 'number' && (
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
|
||||
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
value={inputs[item.key]}
|
||||
onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
|
||||
@@ -124,8 +126,8 @@ const RunOnce: FC<IRunOnceProps> = ({
|
||||
{
|
||||
visionConfig?.enabled && (
|
||||
<div className="w-full mt-4">
|
||||
<div className="text-gray-900 text-sm font-medium">{t('common.imageUploader.imageUpload')}</div>
|
||||
<div className='mt-2'>
|
||||
<div className="h-6 flex items-center text-text-secondary system-md-semibold">{t('common.imageUploader.imageUpload')}</div>
|
||||
<div className='mt-1'>
|
||||
<TextGenerationImageUploader
|
||||
settings={visionConfig}
|
||||
onFilesChange={files => onVisionFilesChange(files.filter(file => file.progress !== -1).map(fileItem => ({
|
||||
@@ -139,11 +141,8 @@ const RunOnce: FC<IRunOnceProps> = ({
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{promptConfig.prompt_variables.length > 0 && (
|
||||
<div className='mt-4 h-[1px] bg-gray-100'></div>
|
||||
)}
|
||||
<div className='w-full mt-4'>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className='w-full mt-6 mb-3'>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Button
|
||||
onClick={onClear}
|
||||
disabled={false}
|
||||
@@ -151,11 +150,12 @@ const RunOnce: FC<IRunOnceProps> = ({
|
||||
<span className='text-[13px]'>{t('common.operation.clear')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(!isPC && 'grow')}
|
||||
type='submit'
|
||||
variant="primary"
|
||||
disabled={false}
|
||||
>
|
||||
<PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
|
||||
<RiPlayLargeLine className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
|
||||
<span className='text-[13px]'>{t('share.generation.run')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user