| @@ -27,9 +27,12 @@ import { useInvalidateAppWorkflow, usePublishWorkflow, useResetWorkflowVersionHi | |||
| import type { PublishWorkflowParams } from '@/types/workflow' | |||
| import { fetchAppDetail } from '@/service/apps' | |||
| import { useStore as useAppStore } from '@/app/components/app/store' | |||
| import useTheme from '@/hooks/use-theme' | |||
| import cn from '@/utils/classnames' | |||
| const FeaturesTrigger = () => { | |||
| const { t } = useTranslation() | |||
| const { theme } = useTheme() | |||
| const workflowStore = useWorkflowStore() | |||
| const appDetail = useAppStore(s => s.appDetail) | |||
| const appID = appDetail?.id | |||
| @@ -121,7 +124,13 @@ const FeaturesTrigger = () => { | |||
| return ( | |||
| <> | |||
| <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}> | |||
| <Button | |||
| className={cn( | |||
| 'text-components-button-secondary-text', | |||
| theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm', | |||
| )} | |||
| onClick={handleShowFeatures} | |||
| > | |||
| <RiApps2AddLine className='mr-1 h-4 w-4 text-components-button-secondary-text' /> | |||
| {t('workflow.common.features')} | |||
| </Button> | |||
| @@ -2,8 +2,11 @@ import { memo } from 'react' | |||
| import Button from '@/app/components/base/button' | |||
| import { BubbleX } from '@/app/components/base/icons/src/vender/line/others' | |||
| import { useStore } from '@/app/components/workflow/store' | |||
| import useTheme from '@/hooks/use-theme' | |||
| import cn from '@/utils/classnames' | |||
| const ChatVariableButton = ({ disabled }: { disabled: boolean }) => { | |||
| const { theme } = useTheme() | |||
| const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel) | |||
| const setShowEnvPanel = useStore(s => s.setShowEnvPanel) | |||
| const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel) | |||
| @@ -15,7 +18,14 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => { | |||
| } | |||
| return ( | |||
| <Button className='p-2' disabled={disabled} onClick={handleClick}> | |||
| <Button | |||
| className={cn( | |||
| 'p-2', | |||
| theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm', | |||
| )} | |||
| disabled={disabled} | |||
| onClick={handleClick} | |||
| > | |||
| <BubbleX className='h-4 w-4 text-components-button-secondary-text' /> | |||
| </Button> | |||
| ) | |||
| @@ -2,8 +2,11 @@ import { memo } from 'react' | |||
| import Button from '@/app/components/base/button' | |||
| import { Env } from '@/app/components/base/icons/src/vender/line/others' | |||
| import { useStore } from '@/app/components/workflow/store' | |||
| import useTheme from '@/hooks/use-theme' | |||
| import cn from '@/utils/classnames' | |||
| const EnvButton = ({ disabled }: { disabled: boolean }) => { | |||
| const { theme } = useTheme() | |||
| const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel) | |||
| const setShowEnvPanel = useStore(s => s.setShowEnvPanel) | |||
| const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel) | |||
| @@ -15,7 +18,14 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => { | |||
| } | |||
| return ( | |||
| <Button className='p-2' disabled={disabled} onClick={handleClick}> | |||
| <Button | |||
| className={cn( | |||
| 'p-2', | |||
| theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm', | |||
| )} | |||
| disabled={disabled} | |||
| onClick={handleClick} | |||
| > | |||
| <Env className='h-4 w-4 text-components-button-secondary-text' /> | |||
| </Button> | |||
| ) | |||
| @@ -19,6 +19,8 @@ import RestoringTitle from './restoring-title' | |||
| import Button from '@/app/components/base/button' | |||
| import { useStore as useAppStore } from '@/app/components/app/store' | |||
| import { useInvalidAllLastRun } from '@/service/use-workflow' | |||
| import useTheme from '@/hooks/use-theme' | |||
| import cn from '@/utils/classnames' | |||
| export type HeaderInRestoringProps = { | |||
| onRestoreSettled?: () => void | |||
| @@ -27,6 +29,7 @@ const HeaderInRestoring = ({ | |||
| onRestoreSettled, | |||
| }: HeaderInRestoringProps) => { | |||
| const { t } = useTranslation() | |||
| const { theme } = useTheme() | |||
| const workflowStore = useWorkflowStore() | |||
| const appDetail = useAppStore.getState().appDetail | |||
| @@ -78,21 +81,27 @@ const HeaderInRestoring = ({ | |||
| <div> | |||
| <RestoringTitle /> | |||
| </div> | |||
| <div className='flex items-center justify-end gap-x-2'> | |||
| <Button | |||
| onClick={handleRestore} | |||
| disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft} | |||
| variant='primary' | |||
| > | |||
| {t('workflow.common.restore')} | |||
| </Button> | |||
| <Button | |||
| className='text-components-button-secondary-accent-text' | |||
| onClick={handleCancelRestore} | |||
| > | |||
| <div className='flex items-center gap-x-0.5'> | |||
| <RiHistoryLine className='h-4 w-4' /> | |||
| <span className='px-0.5'>{t('workflow.common.exitVersions')}</span> | |||
| <div className=' flex items-center justify-end gap-x-2'> | |||
| <Button | |||
| onClick={handleRestore} | |||
| disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft} | |||
| variant='primary' | |||
| className={cn( | |||
| theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm', | |||
| )} | |||
| > | |||
| {t('workflow.common.restore')} | |||
| </Button> | |||
| <Button | |||
| onClick={handleCancelRestore} | |||
| className={cn( | |||
| 'text-components-button-secondary-accent-text', | |||
| theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm', | |||
| )} | |||
| > | |||
| <div className='flex items-center gap-x-0.5'> | |||
| <RiHistoryLine className='h-4 w-4' /> | |||
| <span className='px-0.5'>{t('workflow.common.exitVersions')}</span> | |||
| </div> | |||
| </Button> | |||
| </div> | |||
| @@ -21,6 +21,7 @@ import { | |||
| } from '@/app/components/base/icons/src/vender/line/mediaAndDevices' | |||
| import { useEventEmitterContextContext } from '@/context/event-emitter' | |||
| import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types' | |||
| import useTheme from '@/hooks/use-theme' | |||
| const RunMode = memo(() => { | |||
| const { t } = useTranslation() | |||
| @@ -102,21 +103,27 @@ const PreviewMode = memo(() => { | |||
| PreviewMode.displayName = 'PreviewMode' | |||
| const RunAndHistory: FC = () => { | |||
| const { theme } = useTheme() | |||
| const isChatMode = useIsChatMode() | |||
| const { nodesReadOnly } = useNodesReadOnly() | |||
| return ( | |||
| <div className='flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs'> | |||
| { | |||
| !isChatMode && <RunMode /> | |||
| } | |||
| { | |||
| isChatMode && <PreviewMode /> | |||
| } | |||
| <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div> | |||
| <ViewHistory /> | |||
| <Checklist disabled={nodesReadOnly} /> | |||
| </div> | |||
| <> | |||
| <div className={cn( | |||
| 'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs', | |||
| theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm', | |||
| )}> | |||
| { | |||
| !isChatMode && <RunMode /> | |||
| } | |||
| { | |||
| isChatMode && <PreviewMode /> | |||
| } | |||
| <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div> | |||
| <ViewHistory /> | |||
| <Checklist disabled={nodesReadOnly} /> | |||
| </div> | |||
| </> | |||
| ) | |||
| } | |||
| @@ -5,6 +5,8 @@ import { useKeyPress } from 'ahooks' | |||
| import Button from '../../base/button' | |||
| import Tooltip from '../../base/tooltip' | |||
| import { getKeyboardKeyCodeBySystem } from '../utils' | |||
| import useTheme from '@/hooks/use-theme' | |||
| import cn from '@/utils/classnames' | |||
| type VersionHistoryButtonProps = { | |||
| onClick: () => Promise<unknown> | unknown | |||
| @@ -38,6 +40,7 @@ PopupContent.displayName = 'PopupContent' | |||
| const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({ | |||
| onClick, | |||
| }) => { | |||
| const { theme } = useTheme() | |||
| const handleViewVersionHistory = useCallback(async () => { | |||
| await onClick?.() | |||
| }, [onClick]) | |||
| @@ -46,7 +49,7 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({ | |||
| e.preventDefault() | |||
| handleViewVersionHistory() | |||
| }, | |||
| { exactMatch: true, useCapture: true }) | |||
| { exactMatch: true, useCapture: true }) | |||
| return <Tooltip | |||
| popupContent={<PopupContent />} | |||
| @@ -54,12 +57,15 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({ | |||
| popupClassName='rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg | |||
| shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px] p-1.5' | |||
| > | |||
| <Button | |||
| className={'p-2'} | |||
| onClick={handleViewVersionHistory} | |||
| > | |||
| <RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' /> | |||
| </Button> | |||
| <Button | |||
| className={cn( | |||
| 'p-2', | |||
| theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm', | |||
| )} | |||
| onClick={handleViewVersionHistory} | |||
| > | |||
| <RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' /> | |||
| </Button> | |||
| </Tooltip> | |||
| } | |||
| @@ -53,8 +53,8 @@ html[data-theme="dark"] { | |||
| --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%); | |||
| --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%); | |||
| --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg, | |||
| rgba(24, 24, 27, 0.08) 0%, | |||
| rgba(0, 0, 0, 0) 100%); | |||
| rgba(29, 29, 32, 0.9) 0%, | |||
| rgba(29, 29, 32, 0.08) 100%); | |||
| --color-line-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%); | |||
| --color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 100%); | |||
| --color-premium-yearly-tip-text-background: linear-gradient(91deg, #FDB022 2.18%, #F79009 108.79%); | |||
| @@ -53,8 +53,8 @@ html[data-theme="light"] { | |||
| --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%); | |||
| --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%); | |||
| --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg, | |||
| rgba(200, 206, 218, 0.2) 0%, | |||
| rgba(255, 255, 255, 0) 100%); | |||
| rgba(242, 244, 247, 0.9) 0%, | |||
| rgba(242, 244, 247, 0.05) 100%); | |||
| --color-line-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%); | |||
| --color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%); | |||
| --color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%); | |||