From c966bf1474c940e7991d06a1620f4289641e3e82 Mon Sep 17 00:00:00 2001 From: KVOJJJin Date: Fri, 24 Jan 2025 14:16:35 +0800 Subject: [PATCH] Feat: dark mode of app configure (#13010) --- .../components/app/app-publisher/index.tsx | 15 +- .../publish-with-multiple-model.tsx | 8 +- .../app/app-publisher/suggested-action.tsx | 4 +- .../base/feature-panel/index.tsx | 2 +- .../base/operation-btn/index.tsx | 14 +- .../conversation-history/edit-modal.tsx | 12 +- .../conversation-history/history-panel.tsx | 10 +- .../config-var/config-modal/index.tsx | 2 +- .../app/configuration/config-var/index.tsx | 179 ++--------- .../config-var/select-type-item/index.tsx | 4 +- .../configuration/config-var/style.module.css | 12 - .../app/configuration/config-var/var-item.tsx | 74 +++++ .../app/configuration/config-vision/index.tsx | 4 +- .../config-vision/param-config-content.tsx | 6 +- .../config-vision/param-config.tsx | 15 +- .../config/agent-setting-button.tsx | 4 +- .../config/agent/agent-setting/index.tsx | 27 +- .../config/agent/agent-setting/item-panel.tsx | 4 +- .../config/agent/agent-tools/index.tsx | 8 +- .../dataset-config/card-item/item.tsx | 29 +- .../dataset-config/context-var/index.tsx | 6 +- .../context-var/style.module.css | 3 - .../dataset-config/context-var/var-picker.tsx | 18 +- .../configuration/dataset-config/index.tsx | 10 +- .../params-config/config-content.tsx | 5 +- .../dataset-config/select-dataset/index.tsx | 21 +- .../select-dataset/style.module.css | 13 - .../dataset-config/settings-modal/index.tsx | 31 +- .../configuration/debug/chat-user-input.tsx | 1 - .../debug-with-multiple-model/chat-item.tsx | 2 +- .../debug-with-multiple-model/debug-item.tsx | 6 +- .../model-parameter-trigger.tsx | 12 +- .../text-generation-item.tsx | 2 +- .../chat-group/opening-statement/index.tsx | 299 ------------------ .../components/app/configuration/index.tsx | 15 +- .../prompt-value-panel/index.tsx | 4 +- .../base/chat/chat/chat-input-area/index.tsx | 2 +- web/app/components/base/chat/chat/index.tsx | 7 +- .../base/image-uploader/image-link-input.tsx | 4 +- .../base/image-uploader/image-list.tsx | 4 +- .../text-generation-image-uploader.tsx | 10 +- web/app/components/base/select/index.tsx | 18 +- .../settings/permission-selector/index.tsx | 60 ++-- .../tools/workflow-tool/configure-button.tsx | 14 +- .../workflow/block-selector/all-tools.tsx | 8 +- .../workflow/block-selector/tool-picker.tsx | 2 +- .../block-selector/tool/action-item.tsx | 4 +- .../tool/tool-list-tree-view/item.tsx | 2 +- .../workflow/block-selector/tool/tool.tsx | 4 +- .../_base/components/input-var-type-icon.tsx | 2 +- web/i18n/en-US/app-debug.ts | 2 +- web/i18n/zh-Hans/app-debug.ts | 2 +- web/tailwind-common-config.ts | 7 +- web/themes/manual-dark.css | 3 + web/themes/manual-light.css | 7 +- 55 files changed, 323 insertions(+), 720 deletions(-) delete mode 100644 web/app/components/app/configuration/config-var/style.module.css create mode 100644 web/app/components/app/configuration/config-var/var-item.tsx delete mode 100644 web/app/components/app/configuration/dataset-config/context-var/style.module.css delete mode 100644 web/app/components/app/configuration/dataset-config/select-dataset/style.module.css delete mode 100644 web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx index 3ba35a7336..a2260a889d 100644 --- a/web/app/components/app/app-publisher/index.tsx +++ b/web/app/components/app/app-publisher/index.tsx @@ -143,22 +143,19 @@ const AppPublisher = ({ -
+
-
+
{publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
{publishedAt ? (
-
+
{t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
-
-
+
+
{t('appDebug.publishAs')}
{ validModelConfigs.map((item, index) => (
handleSelect(item)} > #{index + 1}
{item.modelItem.label[language]} diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx index a371eafde0..6099b2e7bb 100644 --- a/web/app/components/app/app-publisher/suggested-action.tsx +++ b/web/app/components/app/app-publisher/suggested-action.tsx @@ -14,8 +14,8 @@ const SuggestedAction = ({ icon, link, disabled, children, className, ...props } target='_blank' rel='noreferrer' className={classNames( - 'flex justify-start items-center gap-2 h-[34px] px-2.5 bg-gray-100 rounded-lg transition-colors [&:not(:first-child)]:mt-1', - disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-primary-50 hover:text-primary-600 cursor-pointer', + 'flex justify-start items-center gap-2 h-[34px] px-2.5 bg-background-section-burn rounded-lg transition-colors text-text-secondary [&:not(:first-child)]:mt-1', + disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-state-accent-hover hover:text-text-accent cursor-pointer', className, )} {...props} diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx index dc5fe87ca3..2ee0ae0d69 100644 --- a/web/app/components/app/configuration/base/feature-panel/index.tsx +++ b/web/app/components/app/configuration/base/feature-panel/index.tsx @@ -23,7 +23,7 @@ const FeaturePanel: FC = ({ children, }) => { return ( -
+
{/* Header */}
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx index e9ffd14257..7a0c8892ea 100644 --- a/web/app/components/app/configuration/base/operation-btn/index.tsx +++ b/web/app/components/app/configuration/base/operation-btn/index.tsx @@ -2,7 +2,10 @@ import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' -import { PlusIcon } from '@heroicons/react/20/solid' +import { + RiAddLine, + RiEditLine, +} from '@remixicon/react' import cn from '@/utils/classnames' export type IOperationBtnProps = { @@ -13,11 +16,8 @@ export type IOperationBtnProps = { } const iconMap = { - add: , - edit: ( - - - ), + add: , + edit: , } const OperationBtn: FC = ({ @@ -29,7 +29,7 @@ const OperationBtn: FC = ({ const { t } = useTranslation() return (
{iconMap[type]} diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx index 87b811f637..e0ef97e247 100644 --- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx +++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx @@ -28,8 +28,8 @@ const EditModal: FC = ({ isShow={isShow} onClose={onClose} > -
{t('appDebug.feature.conversationHistory.editModal.userPrefix')}
- {t('appDebug.feature.conversationHistory.editModal.userPrefix')}
+ setTempData({ ...tempData, @@ -37,8 +37,8 @@ const EditModal: FC = ({ })} /> -
{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}
- {t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}
+ setTempData({ ...tempData, @@ -48,8 +48,8 @@ const EditModal: FC = ({ />
- - + +
) diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx index 4604e43514..5a06111eac 100644 --- a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx +++ b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx @@ -9,7 +9,7 @@ import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid import I18n from '@/context/i18n' import { LanguagesSupported } from '@/i18n/language' -interface Props { +type Props = { showWarning: boolean onShowEditModal: () => void } @@ -30,20 +30,20 @@ const HistoryPanel: FC = ({
} headerIcon={ -
+
} headerRight={
-
{t('appDebug.feature.conversationHistory.description')}
-
+
{t('appDebug.feature.conversationHistory.description')}
+
} noBodySpacing > {showWarning && ( -
+
{t('appDebug.feature.conversationHistory.tip')} void } -let conflictTimer: number - const ConfigVar: FC = ({ promptVariables, readonly, onPromptVariablesChange }) => { const { t } = useTranslation() const { @@ -60,19 +50,6 @@ const ConfigVar: FC = ({ promptVariables, readonly, onPromptVar const { eventEmitter } = useEventEmitterContextContext() const hasVar = promptVariables.length > 0 - const updatePromptVariable = (key: string, updateKey: string, newValue: string | boolean) => { - const newPromptVariables = promptVariables.map((item) => { - if (item.key === key) { - return { - ...item, - [updateKey]: newValue, - } - } - - return item - }) - onPromptVariablesChange?.(newPromptVariables) - } const [currIndex, setCurrIndex] = useState(-1) const currItem = currIndex !== -1 ? promptVariables[currIndex] : null const currItemToEdit: InputVar | null = (() => { @@ -105,55 +82,6 @@ const ConfigVar: FC = ({ promptVariables, readonly, onPromptVar onPromptVariablesChange?.(newPromptVariables) } - const updatePromptKey = (index: number, newKey: string) => { - window.clearTimeout(conflictTimer) - const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true) - if (!isValid) { - Toast.notify({ - type: 'error', - message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }), - }) - return - } - - const newPromptVariables = promptVariables.map((item, i) => { - if (i === index) { - return { - ...item, - key: newKey, - } - } - return item - }) - - conflictTimer = window.setTimeout(() => { - const isKeyExists = promptVariables.some(item => item.key?.trim() === newKey.trim()) - if (isKeyExists) { - Toast.notify({ - type: 'error', - message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }), - }) - } - }, 1000) - - onPromptVariablesChange?.(newPromptVariables) - } - - const updatePromptNameIfNameEmpty = (index: number, newKey: string) => { - if (!newKey) - return - const newPromptVariables = promptVariables.map((item, i) => { - if (i === index && !item.name) { - return { - ...item, - name: newKey, - } - } - return item - }) - - onPromptVariablesChange?.(newPromptVariables) - } const { setShowExternalDataToolModal } = useModalContext() @@ -272,9 +200,6 @@ const ConfigVar: FC = ({ promptVariables, readonly, onPromptVar return ( - } title={
{t('appDebug.variableTitle')}
@@ -290,87 +215,27 @@ const ConfigVar: FC = ({ promptVariables, readonly, onPromptVar
} headerRight={!readonly ? : null} + noBodySpacing > {!hasVar && ( -
{t('appDebug.notSetVar')}
+
+
{t('appDebug.notSetVar')}
+
)} {hasVar && ( -
- - - - - - {!readonly && ( - <> - - - - )} - - - - - {promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => ( - - - - {!readonly && ( - <> - - - - )} - - ))} - -
{t('appDebug.variableTable.key')}{t('appDebug.variableTable.name')}{t('appDebug.variableTable.optional')}{t('appDebug.variableTable.action')}
-
- - {!readonly - ? ( - updatePromptKey(index, e.target.value)} - onBlur={e => updatePromptNameIfNameEmpty(index, e.target.value)} - maxLength={getMaxVarNameLength(name)} - className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" - /> - ) - : ( -
{key}
- )} -
- 		- {!readonly - ? ( - updatePromptVariable(key, 'name', e.target.value)} - maxLength={getMaxVarNameLength(name)} - className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" - />) - : ( -
{name}
- )} - 		-
- updatePromptVariable(key, 'required', !value)} /> -
- 		-
-
handleConfig({ type, key, index, name, config, icon, icon_background })}> - -
-
handleRemoveVar(index)} > - -
-
-
+
+ {promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => ( + handleConfig({ type, key, index, name, config, icon, icon_background })} + onRemove={() => handleRemoveVar(index)} + /> + ))}
)} diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx index cf91b89cb1..e88b44ce10 100644 --- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx +++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next' import cn from '@/utils/classnames' import type { InputVarType } from '@/app/components/workflow/types' import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon' -export interface ISelectTypeItemProps { +export type ISelectTypeItemProps = { type: InputVarType selected: boolean onClick: () => void @@ -27,7 +27,7 @@ const SelectTypeItem: FC = ({ return (
diff --git a/web/app/components/app/configuration/config-var/style.module.css b/web/app/components/app/configuration/config-var/style.module.css deleted file mode 100644 index 733755d0c8..0000000000 --- a/web/app/components/app/configuration/config-var/style.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.table td { - padding-left: 12px; -} - -.table thead td { - height: 33px; - line-height: 33px; -} - -.table tbody tr:last-child td { - border-bottom: none; -} \ No newline at end of file diff --git a/web/app/components/app/configuration/config-var/var-item.tsx b/web/app/components/app/configuration/config-var/var-item.tsx new file mode 100644 index 0000000000..d695a09a15 --- /dev/null +++ b/web/app/components/app/configuration/config-var/var-item.tsx @@ -0,0 +1,74 @@ +'use client' +import type { FC } from 'react' +import React, { useState } from 'react' +import { + RiDeleteBinLine, + RiEditLine, +} from '@remixicon/react' +import type { IInputTypeIconProps } from './input-type-icon' +import IconTypeIcon from './input-type-icon' +import { BracketsX as VarIcon } from '@/app/components/base/icons/src/vender/line/development' +import Badge from '@/app/components/base/badge' +import cn from '@/utils/classnames' + +type ItemProps = { + readonly?: boolean + name: string + label: string + required: boolean + type: string + onEdit: () => void + onRemove: () => void +} + +const VarItem: FC = ({ + readonly, + name, + label, + required, + type, + onEdit, + onRemove, +}) => { + const [isDeleting, setIsDeleting] = useState(false) + + return ( +
+ +
+
+
+ {name} + · + {label} +
+
+ {required && } + {type} + +
+
+
+ {!readonly && ( +
+
+ +
+
setIsDeleting(true)} + onMouseLeave={() => setIsDeleting(false)} + > + +
+
+ )} +
+ ) +} + +export default VarItem diff --git a/web/app/components/app/configuration/config-vision/index.tsx b/web/app/components/app/configuration/config-vision/index.tsx index f30d3e4a0a..dd63b9db64 100644 --- a/web/app/components/app/configuration/config-vision/index.tsx +++ b/web/app/components/app/configuration/config-vision/index.tsx @@ -57,7 +57,7 @@ const ConfigVision: FC = () => { return null return ( -
+
@@ -99,7 +99,7 @@ const ConfigVision: FC = () => { />
*/} -
+
{ return (
-
{t('appDebug.vision.visionSettings.title')}
+
{t('appDebug.vision.visionSettings.title')}
-
{t('appDebug.vision.visionSettings.resolution')}
+
{t('appDebug.vision.visionSettings.resolution')}
@@ -78,7 +78,7 @@ const ParamConfigContent: FC = () => {
-
{t('appDebug.vision.visionSettings.uploadMethod')}
+
{t('appDebug.vision.visionSettings.uploadMethod')}
{ const { t } = useTranslation() @@ -25,13 +26,13 @@ const ParamsConfig: FC = () => { }} > setOpen(v => !v)}> -
- -
{t('appDebug.voice.settings')}
-
+ -
+
diff --git a/web/app/components/app/configuration/config/agent-setting-button.tsx b/web/app/components/app/configuration/config/agent-setting-button.tsx index f50f77837e..91ba86b191 100644 --- a/web/app/components/app/configuration/config/agent-setting-button.tsx +++ b/web/app/components/app/configuration/config/agent-setting-button.tsx @@ -2,9 +2,9 @@ import type { FC } from 'react' import React, { useState } from 'react' import { useTranslation } from 'react-i18next' +import { RiSettings2Line } from '@remixicon/react' import AgentSetting from './agent/agent-setting' import Button from '@/app/components/base/button' -import { Settings01 } from '@/app/components/base/icons/src/vender/line/general' import type { AgentConfig } from '@/models/debug' type Props = { @@ -26,7 +26,7 @@ const AgentSettingButton: FC = ({ return ( <> {isShowAgentSetting && ( diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx index 959336457f..9fae3417b9 100644 --- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx +++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx @@ -42,10 +42,10 @@ const AgentSetting: FC = ({ }} >
-
-
+
+
{t('appDebug.agent.setting.name')}
@@ -53,7 +53,7 @@ const AgentSetting: FC = ({ onClick={onCancel} className='flex justify-center items-center w-6 h-6 cursor-pointer' > - +
@@ -70,7 +70,7 @@ const AgentSetting: FC = ({ name={t('appDebug.agent.agentMode')} description={t('appDebug.agent.agentModeDes')} > -
{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}
+
{isFunctionCall ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}
= ({ type="number" min={maxIterationsMin} max={maxIterationsMax} step={1} - className="block w-11 h-7 leading-7 rounded-lg border-0 pl-1 px-1.5 bg-gray-100 text-gray-900 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-primary-600" + className="block w-11 h-7 leading-7 rounded-lg border-0 pl-1 px-1.5 bg-components-input-bg-normal text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-primary-600" value={tempPayload.max_iteration} onChange={(e) => { - let value = parseInt(e.target.value, 10) + let value = Number.parseInt(e.target.value, 10) if (value < maxIterationsMin) value = maxIterationsMin @@ -117,23 +117,20 @@ const AgentSetting: FC = ({ {!isFunctionCall && ( -
-
{t('tools.builtInPromptTitle')}
-
+
+
{t('tools.builtInPromptTitle')}
+
{isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
-
{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}
+
{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}
)}
- -
- ) : ( - - ) - ) : null - - const renderQuestions = () => { - return isFocus ? ( -
-
-
-
{t('appDebug.openingStatement.openingQuestion')}
-
·
-
{tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}
-
-
-
- { - return { - id: index, - name, - } - })} - setList={list => setTempSuggestedQuestions(list.map(item => item.name))} - handle='.handle' - ghostClass="opacity-50" - animation={150} - > - {tempSuggestedQuestions.map((question, index) => { - return ( -
-
- - - -
- { - const value = e.target.value - setTempSuggestedQuestions(tempSuggestedQuestions.map((item, i) => { - if (index === i) - return value - - return item - })) - }} - className={'w-full overflow-x-auto pl-1.5 pr-8 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer rounded-lg'} - /> - -
{ - setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i)) - }} - > - -
-
- ) - })} - {tempSuggestedQuestions.length < MAX_QUESTION_NUM && ( -
{ setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }} - className='mt-1 flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400 bg-gray-100 hover:bg-gray-200'> - -
{t('appDebug.variableConfig.addOption')}
-
- )} -
- ) : ( -
- {notEmptyQuestions.map((question, index) => { - return ( -
- {question} -
- ) - })} -
- ) - } - - return ( - - - - } - headerRight={headerRight} - hasHeaderBottomBorder={!hasValue} - isFocus={isFocus} - > -
- {(hasValue || (!hasValue && isFocus)) ? ( - <> - {isFocus - ? ( -
- -
- ) - : ( -
- )} - {renderQuestions()} - ) : ( -
{t('appDebug.openingStatement.noDataPlaceHolder')}
- )} - - {isShowConfirmAddVar && ( - - )} - -
- - ) -} -export default React.memo(OpeningStatement) diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx index 35e485985f..bd8998aa82 100644 --- a/web/app/components/app/configuration/index.tsx +++ b/web/app/components/app/configuration/index.tsx @@ -19,6 +19,7 @@ import { } from '@/app/components/app/configuration/debug/hooks' import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types' import Button from '@/app/components/base/button' +import Divider from '@/app/components/base/divider' import Loading from '@/app/components/base/loading' import AppPublisher from '@/app/components/app/app-publisher/features-wrapper' import type { @@ -895,13 +896,13 @@ const Configuration: FC = () => {
{/* Header */} -
+
-
{t('appDebug.orchestrate')}
+
{t('appDebug.orchestrate')}
{isAdvancedMode && ( -
{t('appDebug.promptMode.advanced')}
+
{t('appDebug.promptMode.advanced')}
)}
@@ -937,13 +938,13 @@ const Configuration: FC = () => { debugWithMultipleModel={debugWithMultipleModel} onDebugWithMultipleModelChange={handleDebugWithMultipleModelChange} /> -
+ )} {isMobile && ( - )} { /> )} {isMobile && ( - + setShowAccountSettingModal({ payload: 'provider' })} diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx index 39ffeaf0d0..2625f224eb 100644 --- a/web/app/components/app/configuration/prompt-value-panel/index.tsx +++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx @@ -23,7 +23,7 @@ import { DEFAULT_VALUE_MAX_LEN } from '@/config' import { useStore as useAppStore } from '@/app/components/app/store' import cn from '@/utils/classnames' -export interface IPromptValuePanelProps { +export type IPromptValuePanelProps = { appType: AppType onSend?: () => void inputs: Inputs @@ -157,7 +157,7 @@ const PromptValuePanel: FC = ({ ))} {visionConfig?.enabled && (
-
{t('common.imageUploader.imageUpload')}
+
{t('common.imageUploader.imageUpload')}
= ({
= ({ } return ( -
+
setImageLink(e.target.value)} placeholder={t('common.imageUploader.pasteImageLinkInputPlaceholder') || ''} diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx index 35f6149b13..640f986350 100644 --- a/web/app/components/base/image-uploader/image-list.tsx +++ b/web/app/components/base/image-uploader/image-list.tsx @@ -119,12 +119,12 @@ const ImageList: FC = ({ type="button" className={cn( 'absolute z-10 -top-[9px] -right-[9px] items-center justify-center w-[18px] h-[18px]', - 'bg-white hover:bg-gray-50 border-[0.5px] border-black/2 rounded-2xl shadow-lg', + 'hover:bg-state-base-hover rounded-2xl shadow-lg', item.progress === -1 ? 'flex' : 'hidden group-hover:flex', )} onClick={() => onRemove && onRemove(item._id)} > - + )}
diff --git a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx index ed82f12415..0a94b6ec8d 100644 --- a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx +++ b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx @@ -50,7 +50,7 @@ const PasteImageLinkButton: FC = ({ >
@@ -58,7 +58,7 @@ const PasteImageLinkButton: FC = ({
-
+
@@ -98,9 +98,9 @@ const TextGenerationImageUploader: FC = ({ { hovering => (
{t('common.imageUploader.uploadFromComputer')} diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx index 3332a11abd..9ad964f79d 100644 --- a/web/app/components/base/select/index.tsx +++ b/web/app/components/base/select/index.tsx @@ -59,7 +59,7 @@ const Select: FC = ({ disabled = false, onSelect, allowSearch = true, - bgClassName = 'bg-gray-100', + bgClassName = 'bg-components-input-bg-normal', overlayClassName, optionClassName, renderOption, @@ -99,10 +99,10 @@ const Select: FC = ({ } }}>
-
+
{allowSearch ? { if (!disabled) setQuery(event.target.value) @@ -114,10 +114,10 @@ const Select: FC = ({ if (!disabled) setOpen(!open) } - } className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`, optionClassName)}> + } className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover`, optionClassName)}>
{selectedItem?.name}
} - { if (!disabled) setOpen(!open) @@ -128,15 +128,15 @@ const Select: FC = ({
{(filteredItems.length > 0 && open) && ( - + {filteredItems.map((item: Item) => ( classNames( - 'relative cursor-default select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700', - active ? 'bg-gray-100' : '', + 'relative cursor-default select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary', + active ? 'bg-state-base-hover' : '', optionClassName, ) } @@ -151,7 +151,7 @@ const Select: FC = ({ {selected && (