From e842a46fe29f4e6588532a2c4ab6cc91986d418c Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 13 Nov 2024 14:43:37 +0800 Subject: [PATCH 01/10] fix: resolve issue with dark mode --- web/themes/dark.css | 701 ------------------------------------------ web/themes/light.css | 702 ------------------------------------------- 2 files changed, 1403 deletions(-) diff --git a/web/themes/dark.css b/web/themes/dark.css index 6e645616fb..08994039eb 100644 --- a/web/themes/dark.css +++ b/web/themes/dark.css @@ -1,705 +1,4 @@ /* Attention: Generate by code. Don't update by hand!!! */ -@media (prefers-color-scheme: dark) { - html:not([data-theme="dark"]):not([data-theme="light"]) { - color-scheme: dark; - --color-components-input-bg-normal: #FFFFFF14; - --color-components-input-text-placeholder: #C8CEDA4D; - --color-components-input-bg-hover: #FFFFFF08; - --color-components-input-bg-active: #FFFFFF0D; - --color-components-input-border-active: #747481; - --color-components-input-border-destructive: #F97066; - --color-components-input-text-filled: #F4F4F5; - --color-components-input-bg-destructive: #FFFFFF03; - --color-components-input-bg-disabled: #FFFFFF08; - --color-components-input-text-disabled: #C8CEDA4D; - --color-components-input-text-filled-disabled: #C8CEDA99; - --color-components-input-border-hover: #3A3A40; - --color-components-input-border-active-prompt-1: #36BFFA; - --color-components-input-border-active-prompt-2: #296DFF; - - --color-components-kbd-bg-gray: #FFFFFF08; - --color-components-kbd-bg-white: #FFFFFF1F; - - --color-components-tooltip-bg: #18181BF2; - - --color-components-button-primary-text: #FFFFFFF2; - --color-components-button-primary-bg: #155AEF; - --color-components-button-primary-border: #FFFFFF1F; - --color-components-button-primary-bg-hover: #296DFF; - --color-components-button-primary-border-hover: #FFFFFF33; - --color-components-button-primary-bg-disabled: #FFFFFF08; - --color-components-button-primary-border-disabled: #FFFFFF14; - --color-components-button-primary-text-disabled: #FFFFFF33; - - --color-components-button-secondary-text: #FFFFFFCC; - --color-components-button-secondary-text-disabled: #FFFFFF33; - --color-components-button-secondary-bg: #FFFFFF1F; - --color-components-button-secondary-bg-hover: #FFFFFF33; - --color-components-button-secondary-bg-disabled: #FFFFFF08; - --color-components-button-secondary-border: #FFFFFF14; - --color-components-button-secondary-border-hover: #FFFFFF1F; - --color-components-button-secondary-border-disabled: #FFFFFF0D; - - --color-components-button-tertiary-text: #D9D9DE; - --color-components-button-tertiary-text-disabled: #FFFFFF33; - --color-components-button-tertiary-bg: #FFFFFF14; - --color-components-button-tertiary-bg-hover: #FFFFFF1F; - --color-components-button-tertiary-bg-disabled: #FFFFFF08; - - --color-components-button-ghost-text: #D9D9DE; - --color-components-button-ghost-text-disabled: #FFFFFF33; - --color-components-button-ghost-bg-hover: #C8CEDA14; - - --color-components-button-destructive-primary-text: #FFFFFFF2; - --color-components-button-destructive-primary-text-disabled: #FFFFFF33; - --color-components-button-destructive-primary-bg: #D92D20; - --color-components-button-destructive-primary-bg-hover: #F04438; - --color-components-button-destructive-primary-bg-disabled: #F0443824; - --color-components-button-destructive-primary-border: #FFFFFF1F; - --color-components-button-destructive-primary-border-hover: #FFFFFF33; - --color-components-button-destructive-primary-border-disabled: #FFFFFF14; - - --color-components-button-destructive-secondary-text: #F97066; - --color-components-button-destructive-secondary-text-disabled: #F0443833; - --color-components-button-destructive-secondary-bg: #FFFFFF1F; - --color-components-button-destructive-secondary-bg-hover: #F0443824; - --color-components-button-destructive-secondary-bg-disabled: #F0443814; - --color-components-button-destructive-secondary-border: #FFFFFF14; - --color-components-button-destructive-secondary-border-hover: #FFFFFF1F; - --color-components-button-destructive-secondary-border-disabled: #F0443814; - - --color-components-button-destructive-tertiary-text: #F97066; - --color-components-button-destructive-tertiary-text-disabled: #F0443833; - --color-components-button-destructive-tertiary-bg: #F0443824; - --color-components-button-destructive-tertiary-bg-hover: #F0443840; - --color-components-button-destructive-tertiary-bg-disabled: #F0443814; - - --color-components-button-destructive-ghost-text: #F97066; - --color-components-button-destructive-ghost-text-disabled: #F0443833; - --color-components-button-destructive-ghost-bg-hover: #F0443824; - - --color-components-button-secondary-accent-text: #FFFFFFCC; - --color-components-button-secondary-accent-text-disabled: #FFFFFF33; - --color-components-button-secondary-accent-bg: #FFFFFF0D; - --color-components-button-secondary-accent-bg-hover: #FFFFFF14; - --color-components-button-secondary-accent-bg-disabled: #FFFFFF08; - --color-components-button-secondary-accent-border: #FFFFFF14; - --color-components-button-secondary-accent-border-hover: #FFFFFF1F; - --color-components-button-secondary-accent-border-disabled: #FFFFFF0D; - - --color-components-checkbox-icon: #FFFFFFF2; - --color-components-checkbox-icon-disabled: #FFFFFF33; - --color-components-checkbox-bg: #296DFF; - --color-components-checkbox-bg-hover: #5289FF; - --color-components-checkbox-bg-disabled: #FFFFFF08; - --color-components-checkbox-border: #FFFFFF66; - --color-components-checkbox-border-hover: #FFFFFF99; - --color-components-checkbox-border-disabled: #FFFFFF03; - --color-components-checkbox-bg-unchecked: #FFFFFF08; - --color-components-checkbox-bg-unchecked-hover: #FFFFFF0D; - --color-components-checkbox-bg-disabled-checked: #155AEF33; - - --color-components-radio-border-checked: #296DFF; - --color-components-radio-border-checked-hover: #5289FF; - --color-components-radio-border-checked-disabled: #155AEF33; - --color-components-radio-bg-disabled: #FFFFFF08; - --color-components-radio-border: #FFFFFF66; - --color-components-radio-border-hover: #FFFFFF99; - --color-components-radio-border-disabled: #FFFFFF03; - --color-components-radio-bg: #FFFFFF00; - --color-components-radio-bg-hover: #FFFFFF0D; - - --color-components-toggle-knob: #F4F4F5; - --color-components-toggle-knob-disabled: #FFFFFF33; - --color-components-toggle-bg: #296DFF; - --color-components-toggle-bg-hover: #5289FF; - --color-components-toggle-bg-disabled: #FFFFFF14; - --color-components-toggle-bg-unchecked: #FFFFFF33; - --color-components-toggle-bg-unchecked-hover: #FFFFFF4D; - --color-components-toggle-bg-unchecked-disabled: #FFFFFF14; - --color-components-toggle-knob-hover: #FEFEFE; - - --color-components-card-bg: #222225; - --color-components-card-border: #FFFFFF08; - --color-components-card-bg-alt: #27272B; - - --color-components-menu-item-text: #C8CEDA99; - --color-components-menu-item-text-active: #FFFFFFF2; - --color-components-menu-item-text-hover: #C8CEDACC; - --color-components-menu-item-text-active-accent: #FFFFFFF2; - - --color-components-panel-bg: #222225; - --color-components-panel-bg-blur: #2C2C30F2; - --color-components-panel-border: #C8CEDA24; - --color-components-panel-border-subtle: #C8CEDA14; - --color-components-panel-gradient-2: #222225; - --color-components-panel-gradient-1: #27272B; - --color-components-panel-bg-alt: #222225; - --color-components-panel-on-panel-item-bg: #27272B; - --color-components-panel-on-panel-item-bg-hover: #3A3A40; - --color-components-panel-on-panel-item-bg-alt: #3A3A40; - --color-components-panel-on-panel-item-bg-transparent: #2C2C30F2; - --color-components-panel-on-panel-item-bg-hover-transparent: #3A3A4000; - --color-components-panel-on-panel-item-bg-destructive-hover-transparent: #FFFBFA00; - - --color-components-panel-bg-transparent: #22222500; - - --color-components-main-nav-nav-button-text: #C8CEDA99; - --color-components-main-nav-nav-button-text-active: #F4F4F5; - --color-components-main-nav-nav-button-bg: #FFFFFF00; - --color-components-main-nav-nav-button-bg-active: #C8CEDA24; - --color-components-main-nav-nav-button-border: #FFFFFF14; - --color-components-main-nav-nav-button-bg-hover: #C8CEDA0A; - - --color-components-main-nav-nav-user-border: #FFFFFF0D; - - --color-components-slider-knob: #F4F4F5; - --color-components-slider-knob-hover: #FEFEFE; - --color-components-slider-knob-disabled: #FFFFFF33; - --color-components-slider-range: #296DFF; - --color-components-slider-track: #FFFFFF33; - --color-components-slider-knob-border-hover: #1018284D; - --color-components-slider-knob-border: #10182833; - - --color-components-segmented-control-item-active-bg: #FFFFFF14; - --color-components-segmented-control-item-active-border: #C8CEDA14; - --color-components-segmented-control-bg-normal: #18181BB2; - --color-components-segmented-control-item-active-accent-bg: #155AEF33; - --color-components-segmented-control-item-active-accent-border: #155AEF4D; - - --color-components-option-card-option-bg: #C8CEDA0A; - --color-components-option-card-option-selected-bg: #FFFFFF0D; - --color-components-option-card-option-selected-border: #5289FF; - --color-components-option-card-option-border: #C8CEDA33; - --color-components-option-card-option-bg-hover: #C8CEDA24; - --color-components-option-card-option-border-hover: #C8CEDA4D; - - --color-components-tab-active: #296DFF; - - --color-components-badge-white-to-dark: #18181BCC; - --color-components-badge-status-light-success-bg: #17B26A; - --color-components-badge-status-light-success-border-inner: #47CD89; - --color-components-badge-status-light-success-halo: #17B26A4D; - - --color-components-badge-status-light-border-outer: #222225; - --color-components-badge-status-light-high-light: #FFFFFF4D; - --color-components-badge-status-light-warning-bg: #F79009; - --color-components-badge-status-light-warning-border-inner: #FDB022; - --color-components-badge-status-light-warning-halo: #F790094D; - - --color-components-badge-status-light-error-bg: #F04438; - --color-components-badge-status-light-error-border-inner: #F97066; - --color-components-badge-status-light-error-halo: #F044384D; - - --color-components-badge-status-light-normal-bg: #0BA5EC; - --color-components-badge-status-light-normal-border-inner: #36BFFA; - --color-components-badge-status-light-normal-halo: #0BA5EC4D; - - --color-components-badge-status-light-disabled-bg: #676F83; - --color-components-badge-status-light-disabled-border-inner: #98A2B2; - --color-components-badge-status-light-disabled-halo: #C8CEDA14; - - --color-components-badge-bg-green-soft: #17B26A24; - --color-components-badge-bg-orange-soft: #F7900924; - --color-components-badge-bg-red-soft: #F0443824; - --color-components-badge-bg-blue-light-soft: #0BA5EC24; - --color-components-badge-bg-gray-soft: #C8CEDA14; - - --color-components-chart-line: #5289FF; - --color-components-chart-area-1: #155AEF33; - --color-components-chart-area-2: #155AEF0A; - --color-components-chart-current-1: #5289FF; - --color-components-chart-current-2: #155AEF4D; - --color-components-chart-bg: #18181BF2; - - --color-components-actionbar-bg: #222225; - --color-components-actionbar-border: #C8CEDA14; - --color-components-actionbar-bg-accent: #27272B; - --color-components-actionbar-border-accent: #5289FF; - - --color-components-dropzone-bg-alt: #18181BCC; - --color-components-dropzone-bg: #18181B66; - --color-components-dropzone-bg-accent: #155AEF33; - --color-components-dropzone-border: #C8CEDA24; - --color-components-dropzone-border-alt: #C8CEDA33; - --color-components-dropzone-border-accent: #84ABFF; - - --color-components-progress-brand-progress: #5289FF; - --color-components-progress-brand-border: #5289FF; - --color-components-progress-brand-bg: #155AEF0A; - - --color-components-progress-white-progress: #FFFFFF; - --color-components-progress-white-border: #FFFFFFF2; - --color-components-progress-white-bg: #FFFFFF03; - - --color-components-progress-gray-progress: #98A2B2; - --color-components-progress-gray-border: #98A2B2; - --color-components-progress-gray-bg: #C8CEDA05; - - --color-components-progress-warning-progress: #FDB022; - --color-components-progress-warning-border: #FDB022; - --color-components-progress-warning-bg: #F790090A; - - --color-components-progress-error-progress: #F97066; - --color-components-progress-error-border: #F97066; - --color-components-progress-error-bg: #F044380A; - - --color-components-chat-input-audio-bg: #155AEF33; - --color-components-chat-input-audio-wave-default: #C8CEDA24; - --color-components-chat-input-bg-mask-1: #18181B0A; - --color-components-chat-input-bg-mask-2: #18181B99; - --color-components-chat-input-border: #C8CEDA33; - --color-components-chat-input-audio-wave-active: #84ABFF; - --color-components-chat-input-audio-bg-alt: #18181BE5; - - --color-components-avatar-shape-fill-stop-0: #FFFFFFF2; - --color-components-avatar-shape-fill-stop-100: #FFFFFFCC; - - --color-components-avatar-bg-mask-stop-0: #FFFFFF33; - --color-components-avatar-bg-mask-stop-100: #FFFFFF08; - - --color-components-avatar-default-avatar-bg: #222225; - --color-components-avatar-mask-darkmode-dimmed: #0000001F; - - --color-components-label-gray: #C8CEDA24; - - --color-components-premium-badge-blue-bg-stop-0: #5289FF; - --color-components-premium-badge-blue-bg-stop-100: #296DFF; - --color-components-premium-badge-blue-stroke-stop-0: #FFFFFF33; - --color-components-premium-badge-blue-stroke-stop-100: #296DFF; - --color-components-premium-badge-blue-text-stop-0: #EFF4FF; - --color-components-premium-badge-blue-text-stop-100: #B2CAFF; - --color-components-premium-badge-blue-glow: #004AEB; - --color-components-premium-badge-blue-bg-stop-0-hover: #84ABFF; - --color-components-premium-badge-blue-bg-stop-100-hover: #004AEB; - --color-components-premium-badge-blue-glow-hover: #D1E0FF; - --color-components-premium-badge-blue-stroke-stop-0-hover: #FFFFFF80; - --color-components-premium-badge-blue-stroke-stop-100-hover: #296DFF; - - --color-components-premium-badge-highlight-stop-0: #FFFFFF1F; - --color-components-premium-badge-highlight-stop-100: #FFFFFF33; - --color-components-premium-badge-indigo-bg-stop-0: #6172F3; - --color-components-premium-badge-indigo-bg-stop-100: #3538CD; - --color-components-premium-badge-indigo-stroke-stop-0: #FFFFFF33; - --color-components-premium-badge-indigo-stroke-stop-100: #444CE7; - --color-components-premium-badge-indigo-text-stop-0: #EEF4FF; - --color-components-premium-badge-indigo-text-stop-100: #C7D7FE; - --color-components-premium-badge-indigo-glow: #3538CD; - --color-components-premium-badge-indigo-glow-hover: #E0EAFF; - --color-components-premium-badge-indigo-bg-stop-0-hover: #A4BCFD; - --color-components-premium-badge-indigo-bg-stop-100-hover: #3538CD; - --color-components-premium-badge-indigo-stroke-stop-0-hover: #FFFFFF80; - --color-components-premium-badge-indigo-stroke-stop-100-hover: #444CE7; - - --color-components-premium-badge-grey-bg-stop-0: #676F83; - --color-components-premium-badge-grey-bg-stop-100: #495464; - --color-components-premium-badge-grey-stroke-stop-0: #FFFFFF1F; - --color-components-premium-badge-grey-stroke-stop-100: #495464; - --color-components-premium-badge-grey-text-stop-0: #F9FAFB; - --color-components-premium-badge-grey-text-stop-100: #E9EBF0; - --color-components-premium-badge-grey-glow: #354052; - --color-components-premium-badge-grey-glow-hover: #F2F4F7; - --color-components-premium-badge-grey-bg-stop-0-hover: #98A2B2; - --color-components-premium-badge-grey-bg-stop-100-hover: #354052; - --color-components-premium-badge-grey-stroke-stop-0-hover: #FFFFFF80; - --color-components-premium-badge-grey-stroke-stop-100-hover: #676F83; - - --color-components-premium-badge-orange-bg-stop-0: #FF692E; - --color-components-premium-badge-orange-bg-stop-100: #E04F16; - --color-components-premium-badge-orange-stroke-stop-0: #FFFFFF33; - --color-components-premium-badge-orange-stroke-stop-100: #FF4405; - --color-components-premium-badge-orange-text-stop-0: #FEF6EE; - --color-components-premium-badge-orange-text-stop-100: #F9DBAF; - --color-components-premium-badge-orange-glow: #B93815; - --color-components-premium-badge-orange-glow-hover: #FDEAD7; - --color-components-premium-badge-orange-bg-stop-0-hover: #FF692E; - --color-components-premium-badge-orange-bg-stop-100-hover: #B93815; - --color-components-premium-badge-orange-stroke-stop-0-hover: #FFFFFF80; - --color-components-premium-badge-orange-stroke-stop-100-hover: #FF4405; - - --color-text-primary: #FBFBFC; - --color-text-secondary: #D9D9DE; - --color-text-tertiary: #C8CEDA99; - --color-text-quaternary: #C8CEDA66; - --color-text-destructive: #F97066; - --color-text-success: #17B26A; - --color-text-warning: #F79009; - --color-text-destructive-secondary: #F97066; - --color-text-success-secondary: #47CD89; - --color-text-warning-secondary: #FDB022; - --color-text-accent: #5289FF; - --color-text-primary-on-surface: #FFFFFFF2; - --color-text-placeholder: #C8CEDA4D; - --color-text-disabled: #C8CEDA4D; - --color-text-accent-secondary: #84ABFF; - --color-text-accent-light-mode-only: #D9D9DE; - --color-text-text-selected: #155AEF4D; - --color-text-secondary-on-surface: #FFFFFFE5; - --color-text-logo-text: #E9E9EC; - --color-text-empty-state-icon: #C8CEDA4D; - --color-text-inverted: #FFFFFF; - --color-text-inverted-dimm: #FFFFFFCC; - - --color-background-body: #1D1D20; - --color-background-default-subtle: #222225; - --color-background-neutral-subtle: #1D1D20; - --color-background-sidenav-bg: #27272AEB; - --color-background-default: #222225; - --color-background-soft: #18181B40; - --color-background-gradient-bg-fill-chat-bg-1: #222225; - --color-background-gradient-bg-fill-chat-bg-2: #1D1D20; - --color-background-gradient-bg-fill-chat-bubble-bg-1: #C8CEDA14; - --color-background-gradient-bg-fill-chat-bubble-bg-2: #C8CEDA05; - --color-background-gradient-bg-fill-debug-bg-1: #C8CEDA14; - --color-background-gradient-bg-fill-debug-bg-2: #18181B0A; - - --color-background-gradient-mask-gray: #18181B14; - --color-background-gradient-mask-transparent: #00000000; - --color-background-gradient-mask-input-clear-2: #393A3E00; - --color-background-gradient-mask-input-clear-1: #393A3E; - --color-background-gradient-mask-transparent-dark: #00000000; - --color-background-gradient-mask-side-panel-2: #18181BE5; - --color-background-gradient-mask-side-panel-1: #18181B0A; - - --color-background-default-burn: #1D1D20; - --color-background-overlay-fullscreen: #27272AF7; - --color-background-default-lighter: #C8CEDA0A; - --color-background-section: #18181B66; - --color-background-interaction-from-bg-1: #18181B66; - --color-background-interaction-from-bg-2: #18181B24; - --color-background-section-burn: #18181B99; - --color-background-default-dodge: #3A3A40; - --color-background-overlay: #18181BCC; - --color-background-default-dimm: #27272B; - --color-background-default-hover: #27272B; - --color-background-overlay-alt: #18181B66; - --color-background-surface-white: #FFFFFFE5; - --color-background-overlay-destructive: #F044384D; - --color-background-overlay-backdrop: #18181BF2; - - --color-shadow-shadow-1: #0000000D; - --color-shadow-shadow-3: #0000001A; - --color-shadow-shadow-4: #0000001F; - --color-shadow-shadow-5: #00000029; - --color-shadow-shadow-6: #00000033; - --color-shadow-shadow-7: #0000003D; - --color-shadow-shadow-8: #00000047; - --color-shadow-shadow-9: #0000005C; - --color-shadow-shadow-2: #00000014; - --color-shadow-shadow-10: #00000066; - - --color-workflow-block-border: #FFFFFF14; - --color-workflow-block-parma-bg: #FFFFFF0D; - --color-workflow-block-bg: #27272B; - --color-workflow-block-bg-transparent: #27272BF5; - --color-workflow-block-border-highlight: #C8CEDA33; - - --color-workflow-canvas-workflow-dot-color: #8585AD26; - --color-workflow-canvas-workflow-bg: #1D1D20; - - --color-workflow-link-line-active: #5289FF; - --color-workflow-link-line-normal: #676F83; - --color-workflow-link-line-handle: #5289FF; - --color-workflow-link-line-normal-transparent: #676F8333; - --color-workflow-link-line-failure-active: #FDB022; - --color-workflow-link-line-failure-handle: #FDB022; - --color-workflow-link-line-failure-button-bg: #F79009; - --color-workflow-link-line-failure-button-hover: #DC6803; - - --color-workflow-link-line-success-active: #47CD89; - --color-workflow-link-line-success-handle: #47CD89; - - --color-workflow-link-line-error-active: #F97066; - --color-workflow-link-line-error-handle: #F97066; - - --color-workflow-minimap-bg: #27272B; - --color-workflow-minimap-block: #C8CEDA14; - - --color-workflow-display-success-bg: #17B26A33; - --color-workflow-display-success-border-1: #17B26AE5; - --color-workflow-display-success-border-2: #17B26ACC; - --color-workflow-display-success-vignette-color: #17B26A40; - --color-workflow-display-success-bg-line-pattern: #18181BCC; - - --color-workflow-display-glass-1: #FFFFFF08; - --color-workflow-display-glass-2: #FFFFFF0D; - --color-workflow-display-vignette-dark: #00000066; - --color-workflow-display-highlight: #FFFFFF1F; - --color-workflow-display-outline: #18181BF2; - --color-workflow-display-error-bg: #F0443833; - --color-workflow-display-error-bg-line-pattern: #18181BCC; - --color-workflow-display-error-border-1: #F04438E5; - --color-workflow-display-error-border-2: #F04438CC; - --color-workflow-display-error-vignette-color: #F0443840; - - --color-workflow-display-warning-bg: #F7900933; - --color-workflow-display-warning-bg-line-pattern: #18181BCC; - --color-workflow-display-warning-border-1: #F79009E5; - --color-workflow-display-warning-border-2: #F79009CC; - --color-workflow-display-warning-vignette-color: #F7900940; - - --color-workflow-display-normal-bg: #0BA5EC33; - --color-workflow-display-normal-bg-line-pattern: #18181BCC; - --color-workflow-display-normal-border-1: #0BA5ECE5; - --color-workflow-display-normal-border-2: #0BA5ECCC; - --color-workflow-display-normal-vignette-color: #0BA5EC40; - - --color-workflow-display-disabled-bg: #C8CEDA33; - --color-workflow-display-disabled-bg-line-pattern: #18181BCC; - --color-workflow-display-disabled-border-1: #C8CEDA99; - --color-workflow-display-disabled-border-2: #C8CEDA40; - --color-workflow-display-disabled-vignette-color: #C8CEDA40; - --color-workflow-display-disabled-outline: #18181BF2; - - --color-workflow-workflow-progress-bg-1: #18181B40; - --color-workflow-workflow-progress-bg-2: #18181B0A; - - --color-divider-subtle: #C8CEDA14; - --color-divider-regular: #C8CEDA24; - --color-divider-deep: #C8CEDA33; - --color-divider-burn: #18181BF2; - --color-divider-intense: #C8CEDA66; - --color-divider-solid: #3A3A40; - --color-divider-solid-alt: #747481; - - --color-state-base-hover: #C8CEDA14; - --color-state-base-active: #C8CEDA33; - --color-state-base-hover-alt: #C8CEDA24; - --color-state-base-handle: #C8CEDA4D; - --color-state-base-handle-hover: #C8CEDA80; - - --color-state-accent-hover: #155AEF24; - --color-state-accent-active: #155AEF24; - --color-state-accent-hover-alt: #155AEF40; - --color-state-accent-solid: #5289FF; - --color-state-accent-active-alt: #155AEF33; - - --color-state-destructive-hover: #F0443824; - --color-state-destructive-hover-alt: #F0443840; - --color-state-destructive-active: #F044384D; - --color-state-destructive-solid: #F97066; - --color-state-destructive-border: #F97066; - - --color-state-success-hover: #17B26A24; - --color-state-success-hover-alt: #17B26A40; - --color-state-success-active: #17B26A4D; - --color-state-success-solid: #47CD89; - - --color-state-warning-hover: #F7900924; - --color-state-warning-hover-alt: #F7900940; - --color-state-warning-active: #F790094D; - --color-state-warning-solid: #F79009; - - --color-effects-highlight: #C8CEDA14; - --color-effects-highlight-lightmode-off: #C8CEDA14; - --color-effects-image-frame: #FFFFFF; - - --color-util-colors-orange-dark-orange-dark-50: #57130A; - --color-util-colors-orange-dark-orange-dark-100: #771A0D; - --color-util-colors-orange-dark-orange-dark-200: #97180C; - --color-util-colors-orange-dark-orange-dark-300: #BC1B06; - --color-util-colors-orange-dark-orange-dark-400: #E62E05; - --color-util-colors-orange-dark-orange-dark-500: #FF4405; - --color-util-colors-orange-dark-orange-dark-600: #FF692E; - --color-util-colors-orange-dark-orange-dark-700: #FF9C66; - - --color-util-colors-orange-orange-50: #511C10; - --color-util-colors-orange-orange-100: #772917; - --color-util-colors-orange-orange-200: #932F19; - --color-util-colors-orange-orange-300: #B93815; - --color-util-colors-orange-orange-400: #E04F16; - --color-util-colors-orange-orange-500: #EF6820; - --color-util-colors-orange-orange-600: #F38744; - --color-util-colors-orange-orange-700: #F7B27A; - --color-util-colors-orange-orange-100-transparent: #77291700; - - --color-util-colors-pink-pink-50: #4E0D30; - --color-util-colors-pink-pink-100: #851651; - --color-util-colors-pink-pink-200: #9E165F; - --color-util-colors-pink-pink-300: #C11574; - --color-util-colors-pink-pink-400: #DD2590; - --color-util-colors-pink-pink-500: #EE46BC; - --color-util-colors-pink-pink-600: #F670C7; - --color-util-colors-pink-pink-700: #FAA7E0; - - --color-util-colors-fuchsia-fuchsia-50: #47104C; - --color-util-colors-fuchsia-fuchsia-100: #6F1877; - --color-util-colors-fuchsia-fuchsia-200: #821890; - --color-util-colors-fuchsia-fuchsia-300: #9F1AB1; - --color-util-colors-fuchsia-fuchsia-400: #BA24D5; - --color-util-colors-fuchsia-fuchsia-500: #D444F1; - --color-util-colors-fuchsia-fuchsia-600: #E478FA; - --color-util-colors-fuchsia-fuchsia-700: #EEAAFD; - - --color-util-colors-purple-purple-50: #27115F; - --color-util-colors-purple-purple-100: #3E1C96; - --color-util-colors-purple-purple-200: #4A1FB8; - --color-util-colors-purple-purple-300: #5925DC; - --color-util-colors-purple-purple-400: #6938EF; - --color-util-colors-purple-purple-500: #7A5AF8; - --color-util-colors-purple-purple-600: #9B8AFB; - --color-util-colors-purple-purple-700: #BDB4FE; - - --color-util-colors-indigo-indigo-50: #1F235B; - --color-util-colors-indigo-indigo-100: #2D3282; - --color-util-colors-indigo-indigo-200: #2D31A6; - --color-util-colors-indigo-indigo-300: #3538CD; - --color-util-colors-indigo-indigo-400: #444CE7; - --color-util-colors-indigo-indigo-500: #6172F3; - --color-util-colors-indigo-indigo-600: #8098F9; - --color-util-colors-indigo-indigo-700: #A4BCFD; - - --color-util-colors-blue-blue-50: #102A56; - --color-util-colors-blue-blue-100: #194185; - --color-util-colors-blue-blue-200: #1849A9; - --color-util-colors-blue-blue-300: #175CD3; - --color-util-colors-blue-blue-400: #1570EF; - --color-util-colors-blue-blue-500: #2E90FA; - --color-util-colors-blue-blue-600: #53B1FD; - --color-util-colors-blue-blue-700: #84CAFF; - - --color-util-colors-blue-light-blue-light-50: #062C41; - --color-util-colors-blue-light-blue-light-100: #0B4A6F; - --color-util-colors-blue-light-blue-light-200: #065986; - --color-util-colors-blue-light-blue-light-300: #026AA2; - --color-util-colors-blue-light-blue-light-400: #0086C9; - --color-util-colors-blue-light-blue-light-500: #0BA5EC; - --color-util-colors-blue-light-blue-light-600: #36BFFA; - --color-util-colors-blue-light-blue-light-700: #7CD4FD; - - --color-util-colors-gray-blue-gray-blue-50: #0D0F1C; - --color-util-colors-gray-blue-gray-blue-100: #101323; - --color-util-colors-gray-blue-gray-blue-200: #293056; - --color-util-colors-gray-blue-gray-blue-300: #363F72; - --color-util-colors-gray-blue-gray-blue-400: #3E4784; - --color-util-colors-gray-blue-gray-blue-500: #4E5BA6; - --color-util-colors-gray-blue-gray-blue-600: #717BBC; - --color-util-colors-gray-blue-gray-blue-700: #B3B8DB; - - --color-util-colors-blue-brand-blue-brand-50: #002066; - --color-util-colors-blue-brand-blue-brand-100: #00329E; - --color-util-colors-blue-brand-blue-brand-200: #003DC1; - --color-util-colors-blue-brand-blue-brand-300: #004AEB; - --color-util-colors-blue-brand-blue-brand-400: #155AEF; - --color-util-colors-blue-brand-blue-brand-500: #296DFF; - --color-util-colors-blue-brand-blue-brand-600: #5289FF; - --color-util-colors-blue-brand-blue-brand-700: #84ABFF; - - --color-util-colors-red-red-50: #55160C; - --color-util-colors-red-red-100: #7A271A; - --color-util-colors-red-red-200: #912018; - --color-util-colors-red-red-300: #B42318; - --color-util-colors-red-red-400: #D92D20; - --color-util-colors-red-red-500: #F04438; - --color-util-colors-red-red-600: #F97066; - --color-util-colors-red-red-700: #FDA29B; - - --color-util-colors-green-green-50: #053321; - --color-util-colors-green-green-100: #074D31; - --color-util-colors-green-green-200: #085D3A; - --color-util-colors-green-green-300: #067647; - --color-util-colors-green-green-400: #079455; - --color-util-colors-green-green-500: #17B26A; - --color-util-colors-green-green-600: #47CD89; - --color-util-colors-green-green-700: #75E0A7; - - --color-util-colors-warning-warning-50: #4E1D09; - --color-util-colors-warning-warning-100: #7A2E0E; - --color-util-colors-warning-warning-200: #93370D; - --color-util-colors-warning-warning-300: #B54708; - --color-util-colors-warning-warning-400: #DC6803; - --color-util-colors-warning-warning-500: #F79009; - --color-util-colors-warning-warning-600: #FDB022; - --color-util-colors-warning-warning-700: #FEC84B; - - --color-util-colors-yellow-yellow-50: #542C0D; - --color-util-colors-yellow-yellow-100: #713B12; - --color-util-colors-yellow-yellow-200: #854A0E; - --color-util-colors-yellow-yellow-300: #A15C07; - --color-util-colors-yellow-yellow-400: #CA8504; - --color-util-colors-yellow-yellow-500: #EAAA08; - --color-util-colors-yellow-yellow-600: #FAC515; - --color-util-colors-yellow-yellow-700: #FDE272; - - --color-util-colors-teal-teal-50: #0A2926; - --color-util-colors-teal-teal-100: #134E48; - --color-util-colors-teal-teal-200: #125D56; - --color-util-colors-teal-teal-300: #107569; - --color-util-colors-teal-teal-400: #0E9384; - --color-util-colors-teal-teal-500: #15B79E; - --color-util-colors-teal-teal-600: #2ED3B7; - --color-util-colors-teal-teal-700: #5FE9D0; - - --color-util-colors-cyan-cyan-50: #0D2D3A; - --color-util-colors-cyan-cyan-100: #164C63; - --color-util-colors-cyan-cyan-200: #155B75; - --color-util-colors-cyan-cyan-300: #0E7090; - --color-util-colors-cyan-cyan-400: #088AB2; - --color-util-colors-cyan-cyan-500: #06AED4; - --color-util-colors-cyan-cyan-600: #22CCEE; - --color-util-colors-cyan-cyan-700: #67E3F9; - - --color-util-colors-violet-violet-50: #2E125E; - --color-util-colors-violet-violet-100: #491C96; - --color-util-colors-violet-violet-200: #5720B7; - --color-util-colors-violet-violet-300: #6927DA; - --color-util-colors-violet-violet-400: #7839EE; - --color-util-colors-violet-violet-500: #875BF7; - --color-util-colors-violet-violet-600: #A48AFB; - --color-util-colors-violet-violet-700: #C3B5FD; - - --color-util-colors-gray-gray-50: #0C111C; - --color-util-colors-gray-gray-100: #101828; - --color-util-colors-gray-gray-200: #18222F; - --color-util-colors-gray-gray-300: #354052; - --color-util-colors-gray-gray-400: #495464; - --color-util-colors-gray-gray-500: #676F83; - --color-util-colors-gray-gray-600: #98A2B2; - --color-util-colors-gray-gray-700: #D0D5DC; - - --color-util-colors-green-light-green-light-50: #15290A; - --color-util-colors-green-light-green-light-100: #2B5314; - --color-util-colors-green-light-green-light-200: #326212; - --color-util-colors-green-light-green-light-300: #3B7C0F; - --color-util-colors-green-light-green-light-500: #66C61C; - --color-util-colors-green-light-green-light-400: #4CA30D; - --color-util-colors-green-light-green-light-600: #85E13A; - --color-util-colors-green-light-green-light-700: #A6EF67; - - --color-util-colors-rose-rose-50: #510B24; - --color-util-colors-rose-rose-100: #89123E; - --color-util-colors-rose-rose-200: #A11043; - --color-util-colors-rose-rose-300: #C01048; - --color-util-colors-rose-rose-400: #E31B54; - --color-util-colors-rose-rose-500: #F63D68; - --color-util-colors-rose-rose-600: #FD6F8E; - --color-util-colors-rose-rose-700: #FEA3B4; - - --color-util-colors-midnight-midnight-50: #171C22; - --color-util-colors-midnight-midnight-100: #202431; - --color-util-colors-midnight-midnight-200: #2F3648; - --color-util-colors-midnight-midnight-300: #3E465E; - --color-util-colors-midnight-midnight-400: #5D698D; - --color-util-colors-midnight-midnight-500: #828DAD; - --color-util-colors-midnight-midnight-600: #A7AEC5; - --color-util-colors-midnight-midnight-700: #C6CBD9; - - --color-third-party-LangChain: #FFFFFF; - --color-third-party-Langfuse: #FFFFFF; - - --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%); - --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%); - --color-third-party-Github: #FFFFFF; - --color-third-party-Github-tertiary: #C8CEDA99; - --color-third-party-Github-secondary: #D9D9DE; - --color-third-party-model-bg-openai: #121212; - --color-third-party-model-bg-anthropic: #1D1917; - --color-third-party-model-bg-default: #0B0B0E; - --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%); - --color-marketplace-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%); - } -} - html[data-theme="dark"] { --color-components-input-bg-normal: #FFFFFF14; --color-components-input-text-placeholder: #C8CEDA4D; diff --git a/web/themes/light.css b/web/themes/light.css index 4e0ee8ae3e..ed563ad594 100644 --- a/web/themes/light.css +++ b/web/themes/light.css @@ -1,706 +1,4 @@ /* Attention: Generate by code. Don't update by hand!!! */ -@media (prefers-color-scheme: light) { - html:not([data-theme="light"]):not([data-theme="dark"]) { - color-scheme: light; - --color-components-input-bg-normal: #C8CEDA40; - --color-components-input-text-placeholder: #98A2B2; - --color-components-input-bg-hover: #C8CEDA24; - --color-components-input-bg-active: #F9FAFB; - --color-components-input-border-active: #D0D5DC; - --color-components-input-border-destructive: #FDA29B; - --color-components-input-text-filled: #101828; - --color-components-input-bg-destructive: #FFFFFF; - --color-components-input-bg-disabled: #C8CEDA24; - --color-components-input-text-disabled: #D0D5DC; - --color-components-input-text-filled-disabled: #676F83; - --color-components-input-border-hover: #D0D5DC; - --color-components-input-border-active-prompt-1: #0BA5EC; - --color-components-input-border-active-prompt-2: #155AEF; - - --color-components-kbd-bg-gray: #1018280A; - --color-components-kbd-bg-white: #FFFFFF1F; - - --color-components-tooltip-bg: #FFFFFFF2; - - --color-components-button-primary-text: #FFFFFF; - --color-components-button-primary-bg: #155AEF; - --color-components-button-primary-border: #1018280A; - --color-components-button-primary-bg-hover: #004AEB; - --color-components-button-primary-border-hover: #10182814; - --color-components-button-primary-bg-disabled: #155AEF24; - --color-components-button-primary-border-disabled: #FFFFFF00; - --color-components-button-primary-text-disabled: #FFFFFF99; - - --color-components-button-secondary-text: #354052; - --color-components-button-secondary-text-disabled: #10182840; - --color-components-button-secondary-bg: #FFFFFF; - --color-components-button-secondary-bg-hover: #F9FAFB; - --color-components-button-secondary-bg-disabled: #F9FAFB; - --color-components-button-secondary-border: #10182824; - --color-components-button-secondary-border-hover: #10182833; - --color-components-button-secondary-border-disabled: #1018280A; - - --color-components-button-tertiary-text: #354052; - --color-components-button-tertiary-text-disabled: #10182840; - --color-components-button-tertiary-bg: #F2F4F7; - --color-components-button-tertiary-bg-hover: #E9EBF0; - --color-components-button-tertiary-bg-disabled: #F9FAFB; - - --color-components-button-ghost-text: #354052; - --color-components-button-ghost-text-disabled: #10182840; - --color-components-button-ghost-bg-hover: #C8CEDA33; - - --color-components-button-destructive-primary-text: #FFFFFF; - --color-components-button-destructive-primary-text-disabled: #FFFFFF99; - --color-components-button-destructive-primary-bg: #D92D20; - --color-components-button-destructive-primary-bg-hover: #B42318; - --color-components-button-destructive-primary-bg-disabled: #FEE4E2; - --color-components-button-destructive-primary-border: #18181B0A; - --color-components-button-destructive-primary-border-hover: #18181B14; - --color-components-button-destructive-primary-border-disabled: #FFFFFF00; - - --color-components-button-destructive-secondary-text: #D92D20; - --color-components-button-destructive-secondary-text-disabled: #F0443833; - --color-components-button-destructive-secondary-bg: #FFFFFF; - --color-components-button-destructive-secondary-bg-hover: #FEF3F2; - --color-components-button-destructive-secondary-bg-disabled: #FEF3F2; - --color-components-button-destructive-secondary-border: #18181B14; - --color-components-button-destructive-secondary-border-hover: #F0443840; - --color-components-button-destructive-secondary-border-disabled: #F044380A; - - --color-components-button-destructive-tertiary-text: #D92D20; - --color-components-button-destructive-tertiary-text-disabled: #F0443833; - --color-components-button-destructive-tertiary-bg: #FEE4E2; - --color-components-button-destructive-tertiary-bg-hover: #FECDCA; - --color-components-button-destructive-tertiary-bg-disabled: #F044380A; - - --color-components-button-destructive-ghost-text: #D92D20; - --color-components-button-destructive-ghost-text-disabled: #F0443833; - --color-components-button-destructive-ghost-bg-hover: #FEE4E2; - - --color-components-button-secondary-accent-text: #155AEF; - --color-components-button-secondary-accent-text-disabled: #B2CAFF; - --color-components-button-secondary-accent-bg: #FFFFFF; - --color-components-button-secondary-accent-bg-hover: #F2F4F7; - --color-components-button-secondary-accent-bg-disabled: #F9FAFB; - --color-components-button-secondary-accent-border: #10182824; - --color-components-button-secondary-accent-border-hover: #10182824; - --color-components-button-secondary-accent-border-disabled: #1018280A; - - --color-components-checkbox-icon: #FFFFFF; - --color-components-checkbox-icon-disabled: #FFFFFF80; - --color-components-checkbox-bg: #155AEF; - --color-components-checkbox-bg-hover: #004AEB; - --color-components-checkbox-bg-disabled: #F2F4F7; - --color-components-checkbox-border: #D0D5DC; - --color-components-checkbox-border-hover: #98A2B2; - --color-components-checkbox-border-disabled: #18181B0A; - --color-components-checkbox-bg-unchecked: #FFFFFF; - --color-components-checkbox-bg-unchecked-hover: #FFFFFF; - --color-components-checkbox-bg-disabled-checked: #B2CAFF; - - --color-components-radio-border-checked: #155AEF; - --color-components-radio-border-checked-hover: #004AEB; - --color-components-radio-border-checked-disabled: #B2CAFF; - --color-components-radio-bg-disabled: #FFFFFF00; - --color-components-radio-border: #D0D5DC; - --color-components-radio-border-hover: #98A2B2; - --color-components-radio-border-disabled: #18181B0A; - --color-components-radio-bg: #FFFFFF00; - --color-components-radio-bg-hover: #FFFFFF00; - - --color-components-toggle-knob: #FFFFFF; - --color-components-toggle-knob-disabled: #FFFFFFF2; - --color-components-toggle-bg: #155AEF; - --color-components-toggle-bg-hover: #004AEB; - --color-components-toggle-bg-disabled: #D1E0FF; - --color-components-toggle-bg-unchecked: #E9EBF0; - --color-components-toggle-bg-unchecked-hover: #D0D5DC; - --color-components-toggle-bg-unchecked-disabled: #F2F4F7; - --color-components-toggle-knob-hover: #FFFFFF; - - --color-components-card-bg: #FCFCFD; - --color-components-card-border: #FFFFFF; - --color-components-card-bg-alt: #FFFFFF; - - --color-components-menu-item-text: #495464; - --color-components-menu-item-text-active: #18222F; - --color-components-menu-item-text-hover: #354052; - --color-components-menu-item-text-active-accent: #18222F; - - --color-components-panel-bg: #FFFFFF; - --color-components-panel-bg-blur: #FFFFFFF2; - --color-components-panel-border: #10182814; - --color-components-panel-border-subtle: #10182814; - --color-components-panel-gradient-2: #F9FAFB; - --color-components-panel-gradient-1: #FFFFFF; - --color-components-panel-bg-alt: #F9FAFB; - --color-components-panel-on-panel-item-bg: #FFFFFF; - --color-components-panel-on-panel-item-bg-hover: #F9FAFB; - --color-components-panel-on-panel-item-bg-alt: #F9FAFB; - --color-components-panel-on-panel-item-bg-transparent: #FFFFFFF2; - --color-components-panel-on-panel-item-bg-hover-transparent: #F9FAFB00; - --color-components-panel-on-panel-item-bg-destructive-hover-transparent: #FEF3F200; - - --color-components-panel-bg-transparent: #FFFFFF00; - - --color-components-main-nav-nav-button-text: #495464; - --color-components-main-nav-nav-button-text-active: #155AEF; - --color-components-main-nav-nav-button-bg: #FFFFFF00; - --color-components-main-nav-nav-button-bg-active: #FCFCFD; - --color-components-main-nav-nav-button-border: #FFFFFFF2; - --color-components-main-nav-nav-button-bg-hover: #1018280A; - - --color-components-main-nav-nav-user-border: #FFFFFF; - - --color-components-slider-knob: #FFFFFF; - --color-components-slider-knob-hover: #FFFFFF; - --color-components-slider-knob-disabled: #FFFFFFF2; - --color-components-slider-range: #296DFF; - --color-components-slider-track: #E9EBF0; - --color-components-slider-knob-border-hover: #10182833; - --color-components-slider-knob-border: #10182824; - - --color-components-segmented-control-item-active-bg: #FFFFFF; - --color-components-segmented-control-item-active-border: #FFFFFF; - --color-components-segmented-control-bg-normal: #C8CEDA33; - --color-components-segmented-control-item-active-accent-bg: #FFFFFF; - --color-components-segmented-control-item-active-accent-border: #FFFFFF; - - --color-components-option-card-option-bg: #FCFCFD; - --color-components-option-card-option-selected-bg: #FFFFFF; - --color-components-option-card-option-selected-border: #296DFF; - --color-components-option-card-option-border: #E9EBF0; - --color-components-option-card-option-bg-hover: #FFFFFF; - --color-components-option-card-option-border-hover: #D0D5DC; - - --color-components-tab-active: #155AEF; - - --color-components-badge-white-to-dark: #FFFFFF; - --color-components-badge-status-light-success-bg: #47CD89; - --color-components-badge-status-light-success-border-inner: #17B26A; - --color-components-badge-status-light-success-halo: #17B26A40; - - --color-components-badge-status-light-border-outer: #FFFFFF; - --color-components-badge-status-light-high-light: #FFFFFF4D; - --color-components-badge-status-light-warning-bg: #FDB022; - --color-components-badge-status-light-warning-border-inner: #F79009; - --color-components-badge-status-light-warning-halo: #F7900940; - - --color-components-badge-status-light-error-bg: #F97066; - --color-components-badge-status-light-error-border-inner: #F04438; - --color-components-badge-status-light-error-halo: #F0443840; - - --color-components-badge-status-light-normal-bg: #36BFFA; - --color-components-badge-status-light-normal-border-inner: #0BA5EC; - --color-components-badge-status-light-normal-halo: #0BA5EC40; - - --color-components-badge-status-light-disabled-bg: #98A2B2; - --color-components-badge-status-light-disabled-border-inner: #676F83; - --color-components-badge-status-light-disabled-halo: #1018280A; - - --color-components-badge-bg-green-soft: #17B26A14; - --color-components-badge-bg-orange-soft: #F7900914; - --color-components-badge-bg-red-soft: #F0443814; - --color-components-badge-bg-blue-light-soft: #0BA5EC14; - --color-components-badge-bg-gray-soft: #1018280A; - - --color-components-chart-line: #296DFF; - --color-components-chart-area-1: #155AEF24; - --color-components-chart-area-2: #155AEF0A; - --color-components-chart-current-1: #155AEF; - --color-components-chart-current-2: #D1E0FF; - --color-components-chart-bg: #FFFFFF; - - --color-components-actionbar-bg: #FFFFFFF2; - --color-components-actionbar-border: #1018280A; - --color-components-actionbar-bg-accent: #F5F7FF; - --color-components-actionbar-border-accent: #B2CAFF; - - --color-components-dropzone-bg-alt: #F2F4F7; - --color-components-dropzone-bg: #F9FAFB; - --color-components-dropzone-bg-accent: #155AEF24; - --color-components-dropzone-border: #10182814; - --color-components-dropzone-border-alt: #10182833; - --color-components-dropzone-border-accent: #84ABFF; - - --color-components-progress-brand-progress: #296DFF; - --color-components-progress-brand-border: #296DFF; - --color-components-progress-brand-bg: #155AEF0A; - - --color-components-progress-white-progress: #FFFFFF; - --color-components-progress-white-border: #FFFFFFF2; - --color-components-progress-white-bg: #FFFFFF03; - - --color-components-progress-gray-progress: #98A2B2; - --color-components-progress-gray-border: #98A2B2; - --color-components-progress-gray-bg: #C8CEDA05; - - --color-components-progress-warning-progress: #F79009; - --color-components-progress-warning-border: #F79009; - --color-components-progress-warning-bg: #F790090A; - - --color-components-progress-error-progress: #F04438; - --color-components-progress-error-border: #F04438; - --color-components-progress-error-bg: #F044380A; - - --color-components-chat-input-audio-bg: #EFF4FF; - --color-components-chat-input-audio-wave-default: #155AEF33; - --color-components-chat-input-bg-mask-1: #FFFFFF03; - --color-components-chat-input-bg-mask-2: #F2F4F7; - --color-components-chat-input-border: #FFFFFF; - --color-components-chat-input-audio-wave-active: #296DFF; - --color-components-chat-input-audio-bg-alt: #FCFCFD; - - --color-components-avatar-shape-fill-stop-0: #FFFFFF; - --color-components-avatar-shape-fill-stop-100: #FFFFFFE5; - - --color-components-avatar-bg-mask-stop-0: #FFFFFF1F; - --color-components-avatar-bg-mask-stop-100: #FFFFFF14; - - --color-components-avatar-default-avatar-bg: #D0D5DC; - --color-components-avatar-mask-darkmode-dimmed: #FFFFFF00; - - --color-components-label-gray: #F2F4F7; - - --color-components-premium-badge-blue-bg-stop-0: #5289FF; - --color-components-premium-badge-blue-bg-stop-100: #155AEF; - --color-components-premium-badge-blue-stroke-stop-0: #FFFFFFF2; - --color-components-premium-badge-blue-stroke-stop-100: #155AEF; - --color-components-premium-badge-blue-text-stop-0: #F5F7FF; - --color-components-premium-badge-blue-text-stop-100: #D1E0FF; - --color-components-premium-badge-blue-glow: #00329E; - --color-components-premium-badge-blue-bg-stop-0-hover: #296DFF; - --color-components-premium-badge-blue-bg-stop-100-hover: #004AEB; - --color-components-premium-badge-blue-glow-hover: #84ABFF; - --color-components-premium-badge-blue-stroke-stop-0-hover: #FFFFFFF2; - --color-components-premium-badge-blue-stroke-stop-100-hover: #00329E; - - --color-components-premium-badge-highlight-stop-0: #FFFFFF1F; - --color-components-premium-badge-highlight-stop-100: #FFFFFF4D; - --color-components-premium-badge-indigo-bg-stop-0: #8098F9; - --color-components-premium-badge-indigo-bg-stop-100: #444CE7; - --color-components-premium-badge-indigo-stroke-stop-0: #FFFFFFF2; - --color-components-premium-badge-indigo-stroke-stop-100: #6172F3; - --color-components-premium-badge-indigo-text-stop-0: #F5F8FF; - --color-components-premium-badge-indigo-text-stop-100: #E0EAFF; - --color-components-premium-badge-indigo-glow: #2D3282; - --color-components-premium-badge-indigo-glow-hover: #A4BCFD; - --color-components-premium-badge-indigo-bg-stop-0-hover: #6172F3; - --color-components-premium-badge-indigo-bg-stop-100-hover: #2D31A6; - --color-components-premium-badge-indigo-stroke-stop-0-hover: #FFFFFFF2; - --color-components-premium-badge-indigo-stroke-stop-100-hover: #2D31A6; - - --color-components-premium-badge-grey-bg-stop-0: #98A2B2; - --color-components-premium-badge-grey-bg-stop-100: #676F83; - --color-components-premium-badge-grey-stroke-stop-0: #FFFFFFF2; - --color-components-premium-badge-grey-stroke-stop-100: #676F83; - --color-components-premium-badge-grey-text-stop-0: #FCFCFD; - --color-components-premium-badge-grey-text-stop-100: #F2F4F7; - --color-components-premium-badge-grey-glow: #101828; - --color-components-premium-badge-grey-glow-hover: #D0D5DC; - --color-components-premium-badge-grey-bg-stop-0-hover: #676F83; - --color-components-premium-badge-grey-bg-stop-100-hover: #354052; - --color-components-premium-badge-grey-stroke-stop-0-hover: #FFFFFFF2; - --color-components-premium-badge-grey-stroke-stop-100-hover: #354052; - - --color-components-premium-badge-orange-bg-stop-0: #FF692E; - --color-components-premium-badge-orange-bg-stop-100: #E04F16; - --color-components-premium-badge-orange-stroke-stop-0: #FFFFFFF2; - --color-components-premium-badge-orange-stroke-stop-100: #E62E05; - --color-components-premium-badge-orange-text-stop-0: #FEFAF5; - --color-components-premium-badge-orange-text-stop-100: #FDEAD7; - --color-components-premium-badge-orange-glow: #772917; - --color-components-premium-badge-orange-glow-hover: #F7B27A; - --color-components-premium-badge-orange-bg-stop-0-hover: #FF4405; - --color-components-premium-badge-orange-bg-stop-100-hover: #B93815; - --color-components-premium-badge-orange-stroke-stop-0-hover: #FFFFFFF2; - --color-components-premium-badge-orange-stroke-stop-100-hover: #BC1B06; - - --color-text-primary: #101828; - --color-text-secondary: #354052; - --color-text-tertiary: #676F83; - --color-text-quaternary: #1018284D; - --color-text-destructive: #D92D20; - --color-text-success: #079455; - --color-text-warning: #DC6803; - --color-text-destructive-secondary: #F04438; - --color-text-success-secondary: #17B26A; - --color-text-warning-secondary: #F79009; - --color-text-accent: #155AEF; - --color-text-primary-on-surface: #FFFFFF; - --color-text-placeholder: #98A2B2; - --color-text-disabled: #D0D5DC; - --color-text-accent-secondary: #296DFF; - --color-text-accent-light-mode-only: #155AEF; - --color-text-text-selected: #155AEF24; - --color-text-secondary-on-surface: #FFFFFFE5; - --color-text-logo-text: #18222F; - --color-text-empty-state-icon: #D0D5DC; - --color-text-inverted: #000000; - --color-text-inverted-dimm: #000000F2; - - --color-background-body: #F2F4F7; - --color-background-default-subtle: #FCFCFD; - --color-background-neutral-subtle: #F9FAFB; - --color-background-sidenav-bg: #FFFFFFCC; - --color-background-default: #FFFFFF; - --color-background-soft: #F9FAFB; - --color-background-gradient-bg-fill-chat-bg-1: #F9FAFB; - --color-background-gradient-bg-fill-chat-bg-2: #F2F4F7; - --color-background-gradient-bg-fill-chat-bubble-bg-1: #FFFFFF; - --color-background-gradient-bg-fill-chat-bubble-bg-2: #FFFFFF99; - --color-background-gradient-bg-fill-debug-bg-1: #FFFFFF00; - --color-background-gradient-bg-fill-debug-bg-2: #C8CEDA24; - - --color-background-gradient-mask-gray: #C8CEDA33; - --color-background-gradient-mask-transparent: #FFFFFF00; - --color-background-gradient-mask-input-clear-2: #E9EBF000; - --color-background-gradient-mask-input-clear-1: #E9EBF0; - --color-background-gradient-mask-transparent-dark: #00000000; - --color-background-gradient-mask-side-panel-2: #1018284D; - --color-background-gradient-mask-side-panel-1: #10182805; - - --color-background-default-burn: #E9EBF0; - --color-background-overlay-fullscreen: #F9FAFBF2; - --color-background-default-lighter: #FFFFFF80; - --color-background-section: #F9FAFB; - --color-background-interaction-from-bg-1: #C8CEDA33; - --color-background-interaction-from-bg-2: #C8CEDA24; - --color-background-section-burn: #F2F4F7; - --color-background-default-dodge: #FFFFFF; - --color-background-overlay: #10182899; - --color-background-default-dimm: #E9EBF0; - --color-background-default-hover: #F9FAFB; - --color-background-overlay-alt: #10182866; - --color-background-surface-white: #FFFFFFF2; - --color-background-overlay-destructive: #F044384D; - --color-background-overlay-backdrop: #F2F4F7F2; - - --color-shadow-shadow-1: #09090B08; - --color-shadow-shadow-3: #09090B0D; - --color-shadow-shadow-4: #09090B0F; - --color-shadow-shadow-5: #09090B14; - --color-shadow-shadow-6: #09090B1A; - --color-shadow-shadow-7: #09090B1F; - --color-shadow-shadow-8: #09090B24; - --color-shadow-shadow-9: #09090B2E; - --color-shadow-shadow-2: #09090B0A; - --color-shadow-shadow-10: #09090B0D; - - --color-workflow-block-border: #FFFFFF; - --color-workflow-block-parma-bg: #F2F4F7; - --color-workflow-block-bg: #FCFCFD; - --color-workflow-block-bg-transparent: #FCFCFDE5; - --color-workflow-block-border-highlight: #155AEF24; - - --color-workflow-canvas-workflow-dot-color: #8585AD26; - --color-workflow-canvas-workflow-bg: #F2F4F7; - - --color-workflow-link-line-active: #296DFF; - --color-workflow-link-line-normal: #D0D5DC; - --color-workflow-link-line-handle: #296DFF; - --color-workflow-link-line-normal-transparent: #D0D5DC33; - --color-workflow-link-line-failure-active: #F79009; - --color-workflow-link-line-failure-handle: #F79009; - --color-workflow-link-line-failure-button-bg: #DC6803; - --color-workflow-link-line-failure-button-hover: #B54708; - - --color-workflow-link-line-success-active: #17B26A; - --color-workflow-link-line-success-handle: #17B26A; - - --color-workflow-link-line-error-active: #F04438; - --color-workflow-link-line-error-handle: #F04438; - - --color-workflow-minimap-bg: #E9EBF0; - --color-workflow-minimap-block: #C8CEDA4D; - - --color-workflow-display-success-bg: #ECFDF3; - --color-workflow-display-success-border-1: #17B26ACC; - --color-workflow-display-success-border-2: #17B26A80; - --color-workflow-display-success-vignette-color: #17B26A33; - --color-workflow-display-success-bg-line-pattern: #17B26A4D; - - --color-workflow-display-glass-1: #FFFFFF1F; - --color-workflow-display-glass-2: #FFFFFF80; - --color-workflow-display-vignette-dark: #0000001F; - --color-workflow-display-highlight: #FFFFFF80; - --color-workflow-display-outline: #0000000D; - --color-workflow-display-error-bg: #FEF3F2; - --color-workflow-display-error-bg-line-pattern: #F044384D; - --color-workflow-display-error-border-1: #F04438CC; - --color-workflow-display-error-border-2: #F0443880; - --color-workflow-display-error-vignette-color: #F0443833; - - --color-workflow-display-warning-bg: #FFFAEB; - --color-workflow-display-warning-bg-line-pattern: #F790094D; - --color-workflow-display-warning-border-1: #F79009CC; - --color-workflow-display-warning-border-2: #F7900980; - --color-workflow-display-warning-vignette-color: #F7900933; - - --color-workflow-display-normal-bg: #F0F9FF; - --color-workflow-display-normal-bg-line-pattern: #0BA5EC4D; - --color-workflow-display-normal-border-1: #0BA5ECCC; - --color-workflow-display-normal-border-2: #0BA5EC80; - --color-workflow-display-normal-vignette-color: #0BA5EC33; - - --color-workflow-display-disabled-bg: #F9FAFB; - --color-workflow-display-disabled-bg-line-pattern: #C8CEDA4D; - --color-workflow-display-disabled-border-1: #C8CEDA99; - --color-workflow-display-disabled-border-2: #C8CEDA66; - --color-workflow-display-disabled-vignette-color: #C8CEDA66; - --color-workflow-display-disabled-outline: #00000000; - - --color-workflow-workflow-progress-bg-1: #C8CEDA33; - --color-workflow-workflow-progress-bg-2: #C8CEDA0A; - - --color-divider-subtle: #1018280A; - --color-divider-regular: #10182814; - --color-divider-deep: #10182824; - --color-divider-burn: #1018280A; - --color-divider-intense: #1018284D; - --color-divider-solid: #D0D5DC; - --color-divider-solid-alt: #98A2B2; - - --color-state-base-hover: #C8CEDA33; - --color-state-base-active: #C8CEDA66; - --color-state-base-hover-alt: #C8CEDA66; - --color-state-base-handle: #10182833; - --color-state-base-handle-hover: #1018284D; - - --color-state-accent-hover: #EFF4FF; - --color-state-accent-active: #155AEF14; - --color-state-accent-hover-alt: #D1E0FF; - --color-state-accent-solid: #296DFF; - --color-state-accent-active-alt: #155AEF24; - - --color-state-destructive-hover: #FEF3F2; - --color-state-destructive-hover-alt: #FEE4E2; - --color-state-destructive-active: #FECDCA; - --color-state-destructive-solid: #F04438; - --color-state-destructive-border: #FDA29B; - - --color-state-success-hover: #ECFDF3; - --color-state-success-hover-alt: #DCFAE6; - --color-state-success-active: #ABEFC6; - --color-state-success-solid: #17B26A; - - --color-state-warning-hover: #FFFAEB; - --color-state-warning-hover-alt: #FEF0C7; - --color-state-warning-active: #FEDF89; - --color-state-warning-solid: #F79009; - - --color-effects-highlight: #FFFFFF; - --color-effects-highlight-lightmode-off: #FFFFFF00; - --color-effects-image-frame: #FFFFFF; - - --color-util-colors-orange-dark-orange-dark-50: #FFF4ED; - --color-util-colors-orange-dark-orange-dark-100: #FFE6D5; - --color-util-colors-orange-dark-orange-dark-200: #FFD6AE; - --color-util-colors-orange-dark-orange-dark-300: #FF9C66; - --color-util-colors-orange-dark-orange-dark-400: #FF692E; - --color-util-colors-orange-dark-orange-dark-500: #FF4405; - --color-util-colors-orange-dark-orange-dark-600: #E62E05; - --color-util-colors-orange-dark-orange-dark-700: #BC1B06; - - --color-util-colors-orange-orange-50: #FEF6EE; - --color-util-colors-orange-orange-100: #FDEAD7; - --color-util-colors-orange-orange-200: #F9DBAF; - --color-util-colors-orange-orange-300: #F7B27A; - --color-util-colors-orange-orange-400: #F38744; - --color-util-colors-orange-orange-500: #EF6820; - --color-util-colors-orange-orange-600: #E04F16; - --color-util-colors-orange-orange-700: #B93815; - --color-util-colors-orange-orange-100-transparent: #FDEAD700; - - --color-util-colors-pink-pink-50: #FDF2FA; - --color-util-colors-pink-pink-100: #FCE7F6; - --color-util-colors-pink-pink-200: #FCCEEE; - --color-util-colors-pink-pink-300: #FAA7E0; - --color-util-colors-pink-pink-400: #F670C7; - --color-util-colors-pink-pink-500: #EE46BC; - --color-util-colors-pink-pink-600: #DD2590; - --color-util-colors-pink-pink-700: #C11574; - - --color-util-colors-fuchsia-fuchsia-50: #FDF4FF; - --color-util-colors-fuchsia-fuchsia-100: #FBE8FF; - --color-util-colors-fuchsia-fuchsia-200: #F6D0FE; - --color-util-colors-fuchsia-fuchsia-300: #EEAAFD; - --color-util-colors-fuchsia-fuchsia-400: #E478FA; - --color-util-colors-fuchsia-fuchsia-500: #D444F1; - --color-util-colors-fuchsia-fuchsia-600: #BA24D5; - --color-util-colors-fuchsia-fuchsia-700: #9F1AB1; - - --color-util-colors-purple-purple-50: #F4F3FF; - --color-util-colors-purple-purple-100: #EBE9FE; - --color-util-colors-purple-purple-200: #D9D6FE; - --color-util-colors-purple-purple-300: #BDB4FE; - --color-util-colors-purple-purple-400: #9B8AFB; - --color-util-colors-purple-purple-500: #7A5AF8; - --color-util-colors-purple-purple-600: #6938EF; - --color-util-colors-purple-purple-700: #5925DC; - - --color-util-colors-indigo-indigo-50: #EEF4FF; - --color-util-colors-indigo-indigo-100: #E0EAFF; - --color-util-colors-indigo-indigo-200: #C7D7FE; - --color-util-colors-indigo-indigo-300: #A4BCFD; - --color-util-colors-indigo-indigo-400: #8098F9; - --color-util-colors-indigo-indigo-500: #6172F3; - --color-util-colors-indigo-indigo-600: #444CE7; - --color-util-colors-indigo-indigo-700: #3538CD; - - --color-util-colors-blue-blue-50: #EFF8FF; - --color-util-colors-blue-blue-100: #D1E9FF; - --color-util-colors-blue-blue-200: #B2DDFF; - --color-util-colors-blue-blue-300: #84CAFF; - --color-util-colors-blue-blue-400: #53B1FD; - --color-util-colors-blue-blue-500: #2E90FA; - --color-util-colors-blue-blue-600: #1570EF; - --color-util-colors-blue-blue-700: #175CD3; - - --color-util-colors-blue-light-blue-light-50: #F0F9FF; - --color-util-colors-blue-light-blue-light-100: #E0F2FE; - --color-util-colors-blue-light-blue-light-200: #B9E6FE; - --color-util-colors-blue-light-blue-light-300: #7CD4FD; - --color-util-colors-blue-light-blue-light-400: #36BFFA; - --color-util-colors-blue-light-blue-light-500: #0BA5EC; - --color-util-colors-blue-light-blue-light-600: #0086C9; - --color-util-colors-blue-light-blue-light-700: #026AA2; - - --color-util-colors-gray-blue-gray-blue-50: #F8F9FC; - --color-util-colors-gray-blue-gray-blue-100: #EAECF5; - --color-util-colors-gray-blue-gray-blue-200: #D5D9EB; - --color-util-colors-gray-blue-gray-blue-300: #B3B8DB; - --color-util-colors-gray-blue-gray-blue-400: #717BBC; - --color-util-colors-gray-blue-gray-blue-500: #4E5BA6; - --color-util-colors-gray-blue-gray-blue-600: #3E4784; - --color-util-colors-gray-blue-gray-blue-700: #363F72; - - --color-util-colors-blue-brand-blue-brand-50: #F5F7FF; - --color-util-colors-blue-brand-blue-brand-100: #D1E0FF; - --color-util-colors-blue-brand-blue-brand-200: #B2CAFF; - --color-util-colors-blue-brand-blue-brand-300: #84ABFF; - --color-util-colors-blue-brand-blue-brand-400: #5289FF; - --color-util-colors-blue-brand-blue-brand-500: #296DFF; - --color-util-colors-blue-brand-blue-brand-600: #155AEF; - --color-util-colors-blue-brand-blue-brand-700: #004AEB; - - --color-util-colors-red-red-50: #FEF3F2; - --color-util-colors-red-red-100: #FEE4E2; - --color-util-colors-red-red-200: #FECDCA; - --color-util-colors-red-red-300: #FDA29B; - --color-util-colors-red-red-400: #F97066; - --color-util-colors-red-red-500: #F04438; - --color-util-colors-red-red-600: #D92D20; - --color-util-colors-red-red-700: #B42318; - - --color-util-colors-green-green-50: #ECFDF3; - --color-util-colors-green-green-100: #DCFAE6; - --color-util-colors-green-green-200: #ABEFC6; - --color-util-colors-green-green-300: #75E0A7; - --color-util-colors-green-green-400: #47CD89; - --color-util-colors-green-green-500: #17B26A; - --color-util-colors-green-green-600: #079455; - --color-util-colors-green-green-700: #067647; - - --color-util-colors-warning-warning-50: #FFFAEB; - --color-util-colors-warning-warning-100: #FEF0C7; - --color-util-colors-warning-warning-200: #FEDF89; - --color-util-colors-warning-warning-300: #FEC84B; - --color-util-colors-warning-warning-400: #FDB022; - --color-util-colors-warning-warning-500: #F79009; - --color-util-colors-warning-warning-600: #DC6803; - --color-util-colors-warning-warning-700: #B54708; - - --color-util-colors-yellow-yellow-50: #FEFBE8; - --color-util-colors-yellow-yellow-100: #FEF7C3; - --color-util-colors-yellow-yellow-200: #FEEE95; - --color-util-colors-yellow-yellow-300: #FDE272; - --color-util-colors-yellow-yellow-400: #FAC515; - --color-util-colors-yellow-yellow-500: #EAAA08; - --color-util-colors-yellow-yellow-600: #CA8504; - --color-util-colors-yellow-yellow-700: #A15C07; - - --color-util-colors-teal-teal-50: #F0FDF9; - --color-util-colors-teal-teal-100: #CCFBEF; - --color-util-colors-teal-teal-200: #99F6E0; - --color-util-colors-teal-teal-300: #5FE9D0; - --color-util-colors-teal-teal-400: #2ED3B7; - --color-util-colors-teal-teal-500: #15B79E; - --color-util-colors-teal-teal-600: #0E9384; - --color-util-colors-teal-teal-700: #107569; - - --color-util-colors-cyan-cyan-50: #ECFDFF; - --color-util-colors-cyan-cyan-100: #CFF9FE; - --color-util-colors-cyan-cyan-200: #A5F0FC; - --color-util-colors-cyan-cyan-300: #67E3F9; - --color-util-colors-cyan-cyan-400: #22CCEE; - --color-util-colors-cyan-cyan-500: #06AED4; - --color-util-colors-cyan-cyan-600: #088AB2; - --color-util-colors-cyan-cyan-700: #0E7090; - - --color-util-colors-violet-violet-50: #F5F3FF; - --color-util-colors-violet-violet-100: #ECE9FE; - --color-util-colors-violet-violet-200: #DDD6FE; - --color-util-colors-violet-violet-300: #C3B5FD; - --color-util-colors-violet-violet-400: #A48AFB; - --color-util-colors-violet-violet-500: #875BF7; - --color-util-colors-violet-violet-600: #7839EE; - --color-util-colors-violet-violet-700: #6927DA; - - --color-util-colors-gray-gray-50: #F9FAFB; - --color-util-colors-gray-gray-100: #F2F4F7; - --color-util-colors-gray-gray-200: #E9EBF0; - --color-util-colors-gray-gray-300: #D0D5DC; - --color-util-colors-gray-gray-400: #98A2B2; - --color-util-colors-gray-gray-500: #676F83; - --color-util-colors-gray-gray-600: #495464; - --color-util-colors-gray-gray-700: #354052; - - --color-util-colors-green-light-green-light-50: #F3FEE7; - --color-util-colors-green-light-green-light-100: #E3FBCC; - --color-util-colors-green-light-green-light-200: #D0F8AB; - --color-util-colors-green-light-green-light-300: #A6EF67; - --color-util-colors-green-light-green-light-500: #66C61C; - --color-util-colors-green-light-green-light-400: #85E13A; - --color-util-colors-green-light-green-light-600: #4CA30D; - --color-util-colors-green-light-green-light-700: #3B7C0F; - - --color-util-colors-rose-rose-50: #FFF1F3; - --color-util-colors-rose-rose-100: #FFE4E8; - --color-util-colors-rose-rose-200: #FECDD6; - --color-util-colors-rose-rose-300: #FEA3B4; - --color-util-colors-rose-rose-400: #FD6F8E; - --color-util-colors-rose-rose-500: #F63D68; - --color-util-colors-rose-rose-600: #E31B54; - --color-util-colors-rose-rose-700: #C01048; - - --color-util-colors-midnight-midnight-50: #FBFBFC; - --color-util-colors-midnight-midnight-100: #F0F2F5; - --color-util-colors-midnight-midnight-200: #DFE1EA; - --color-util-colors-midnight-midnight-300: #C6CBD9; - --color-util-colors-midnight-midnight-400: #A7AEC5; - --color-util-colors-midnight-midnight-500: #828DAD; - --color-util-colors-midnight-midnight-600: #5D698D; - --color-util-colors-midnight-midnight-700: #3E465E; - - --color-third-party-LangChain: #1C3C3C; - --color-third-party-Langfuse: #000000; - - --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%); - --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%); - --color-third-party-Github: #1B1F24; - --color-third-party-Github-tertiary: #1B1F24; - --color-third-party-Github-secondary: #1B1F24; - --color-third-party-model-bg-openai: #E3E5E8; - --color-third-party-model-bg-anthropic: #EEEDE7; - --color-third-party-model-bg-default: #F9FAFB; - --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%); - --color-marketplace-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%); - } -} - - html[data-theme="light"] { --color-components-input-bg-normal: #C8CEDA40; --color-components-input-text-placeholder: #98A2B2; From 19dc983d3092acb06922a0588b3020048830365d Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 13 Nov 2024 14:54:27 +0800 Subject: [PATCH 02/10] feat: support toggle set tool when the texts changes --- .../workflow/block-selector/all-tools.tsx | 1 + .../tool/tool-list-flat-view/list.tsx | 16 +++++++++++++++- .../tool/tool-list-tree-view/item.tsx | 16 +++++++++++++++- .../tool/tool-list-tree-view/list.tsx | 3 +++ .../workflow/block-selector/tool/tool.tsx | 16 ++++++++-------- .../components/workflow/block-selector/tools.tsx | 4 ++++ 6 files changed, 46 insertions(+), 10 deletions(-) diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx index 566950782a..b93d68c019 100644 --- a/web/app/components/workflow/block-selector/all-tools.tsx +++ b/web/app/components/workflow/block-selector/all-tools.tsx @@ -131,6 +131,7 @@ const AllTools = ({ tools={tools} onSelect={onSelect} viewType={activeView} + hasSearchText={!!searchText} /> {/* Plugins from marketplace */} void } const ToolViewFlatView: FC = ({ payload, isShowLetterIndex, + hasSearchText, onSelect, }) => { + const [fold, setFold] = React.useState(true) + useEffect(() => { + if (hasSearchText && fold) { + setFold(false) + return + } + if (!hasSearchText && !fold) + setFold(true) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [hasSearchText]) return (
{payload.map(tool => ( @@ -26,6 +38,8 @@ const ToolViewFlatView: FC = ({ payload={tool} viewType={ViewType.flat} isShowLetterIndex={isShowLetterIndex} + isFold={fold} + onFoldChange={setFold} onSelect={onSelect} /> ))} diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx index 156bede917..f74602c901 100644 --- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx +++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx @@ -1,6 +1,6 @@ 'use client' import type { FC } from 'react' -import React from 'react' +import React, { useEffect } from 'react' import type { ToolWithProvider } from '../../../types' import Tool from '../tool' import type { BlockEnum } from '../../../types' @@ -10,14 +10,26 @@ import type { ToolDefaultValue } from '../../types' type Props = { groupName: string toolList: ToolWithProvider[] + hasSearchText: boolean onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void } const Item: FC = ({ groupName, toolList, + hasSearchText, onSelect, }) => { + const [fold, setFold] = React.useState(true) + useEffect(() => { + if (hasSearchText && fold) { + setFold(false) + return + } + if (!hasSearchText && !fold) + setFold(true) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [hasSearchText]) return (
@@ -30,6 +42,8 @@ const Item: FC = ({ payload={tool} viewType={ViewType.tree} isShowLetterIndex={false} + isFold={fold} + onFoldChange={setFold} onSelect={onSelect} /> ))} diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx index 1b0dbddca6..8bf5095833 100644 --- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx +++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx @@ -10,11 +10,13 @@ import { CUSTOM_GROUP_NAME, WORKFLOW_GROUP_NAME } from '../../index-bar' type Props = { payload: Record + hasSearchText: boolean onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void } const ToolListTreeView: FC = ({ payload, + hasSearchText, onSelect, }) => { const { t } = useTranslation() @@ -37,6 +39,7 @@ const ToolListTreeView: FC = ({ key={groupName} groupName={getI18nGroupName(groupName)} toolList={payload[groupName]} + hasSearchText={hasSearchText} onSelect={onSelect} /> ))} diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx index 3ce6bdcf7d..658bccd630 100644 --- a/web/app/components/workflow/block-selector/tool/tool.tsx +++ b/web/app/components/workflow/block-selector/tool/tool.tsx @@ -11,8 +11,6 @@ import type { ToolDefaultValue } from '../types' import { ViewType } from '../view-type-select' import ActonItem from './action-item' import BlockIcon from '../../block-icon' - -import { useBoolean } from 'ahooks' import { useTranslation } from 'react-i18next' type Props = { @@ -20,6 +18,8 @@ type Props = { payload: ToolWithProvider viewType: ViewType isShowLetterIndex: boolean + isFold: boolean + onFoldChange: (fold: boolean) => void onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void } @@ -28,6 +28,8 @@ const Tool: FC = ({ payload, viewType, isShowLetterIndex, + isFold, + onFoldChange, onSelect, }) => { const { t } = useTranslation() @@ -35,10 +37,8 @@ const Tool: FC = ({ const isFlatView = viewType === ViewType.flat const actions = payload.tools const hasAction = true // Now always support actions - const [isFold, { - toggle: toggleFold, - }] = useBoolean(false) - const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine + + const FoldIcon = isFold ? RiArrowRightSLine : RiArrowDownSLine const groupName = useMemo(() => { if (payload.type === CollectionType.builtIn) @@ -63,7 +63,7 @@ const Tool: FC = ({ className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer select-none' onClick={() => { if (hasAction) - toggleFold() + onFoldChange(!isFold) // Now always support actions // if (payload.parameters) { @@ -101,7 +101,7 @@ const Tool: FC = ({
- {hasAction && isFold && ( + {hasAction && !isFold && ( actions.map(action => ( void tools: ToolWithProvider[] viewType: ViewType + hasSearchText: boolean } const Blocks = ({ showWorkflowEmpty, onSelect, tools, viewType, + hasSearchText, }: ToolsProps) => { const { t } = useTranslation() const language = useGetLanguage() @@ -89,11 +91,13 @@ const Blocks = ({ ) : ( ) From 89b470d0d5700888b94a462e3affdc29f389c273 Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 13 Nov 2024 15:04:23 +0800 Subject: [PATCH 03/10] fix: toggle tool --- .../tool/tool-list-flat-view/list.tsx | 15 ++------------ .../tool/tool-list-tree-view/item.tsx | 15 ++------------ .../workflow/block-selector/tool/tool.tsx | 20 +++++++++++++------ 3 files changed, 18 insertions(+), 32 deletions(-) diff --git a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx index 9c624373d4..8e07eb5650 100644 --- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx +++ b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx @@ -1,6 +1,6 @@ 'use client' import type { FC } from 'react' -import React, { useEffect } from 'react' +import React from 'react' import type { ToolWithProvider } from '../../../types' import type { BlockEnum } from '../../../types' import type { ToolDefaultValue } from '../../types' @@ -20,16 +20,6 @@ const ToolViewFlatView: FC = ({ hasSearchText, onSelect, }) => { - const [fold, setFold] = React.useState(true) - useEffect(() => { - if (hasSearchText && fold) { - setFold(false) - return - } - if (!hasSearchText && !fold) - setFold(true) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [hasSearchText]) return (
{payload.map(tool => ( @@ -38,8 +28,7 @@ const ToolViewFlatView: FC = ({ payload={tool} viewType={ViewType.flat} isShowLetterIndex={isShowLetterIndex} - isFold={fold} - onFoldChange={setFold} + hasSearchText={hasSearchText} onSelect={onSelect} /> ))} diff --git a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx index f74602c901..bf90c72aad 100644 --- a/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx +++ b/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx @@ -1,6 +1,6 @@ 'use client' import type { FC } from 'react' -import React, { useEffect } from 'react' +import React from 'react' import type { ToolWithProvider } from '../../../types' import Tool from '../tool' import type { BlockEnum } from '../../../types' @@ -20,16 +20,6 @@ const Item: FC = ({ hasSearchText, onSelect, }) => { - const [fold, setFold] = React.useState(true) - useEffect(() => { - if (hasSearchText && fold) { - setFold(false) - return - } - if (!hasSearchText && !fold) - setFold(true) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [hasSearchText]) return (
@@ -42,8 +32,7 @@ const Item: FC = ({ payload={tool} viewType={ViewType.tree} isShowLetterIndex={false} - isFold={fold} - onFoldChange={setFold} + hasSearchText={hasSearchText} onSelect={onSelect} /> ))} diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx index 658bccd630..a604f4f211 100644 --- a/web/app/components/workflow/block-selector/tool/tool.tsx +++ b/web/app/components/workflow/block-selector/tool/tool.tsx @@ -1,6 +1,6 @@ 'use client' import type { FC } from 'react' -import React, { useMemo } from 'react' +import React, { useEffect, useMemo } from 'react' import cn from '@/utils/classnames' import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react' import { useGetLanguage } from '@/context/i18n' @@ -18,8 +18,7 @@ type Props = { payload: ToolWithProvider viewType: ViewType isShowLetterIndex: boolean - isFold: boolean - onFoldChange: (fold: boolean) => void + hasSearchText: boolean onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void } @@ -28,8 +27,7 @@ const Tool: FC = ({ payload, viewType, isShowLetterIndex, - isFold, - onFoldChange, + hasSearchText, onSelect, }) => { const { t } = useTranslation() @@ -37,6 +35,16 @@ const Tool: FC = ({ const isFlatView = viewType === ViewType.flat const actions = payload.tools const hasAction = true // Now always support actions + const [isFold, setFold] = React.useState(true) + useEffect(() => { + if (hasSearchText && isFold) { + setFold(false) + return + } + if (!hasSearchText && !isFold) + setFold(true) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [hasSearchText]) const FoldIcon = isFold ? RiArrowRightSLine : RiArrowDownSLine @@ -63,7 +71,7 @@ const Tool: FC = ({ className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer select-none' onClick={() => { if (hasAction) - onFoldChange(!isFold) + setFold(!isFold) // Now always support actions // if (payload.parameters) { From 5c98d80fdfeef4cf7fc614a7f0759f79b31275c6 Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 13 Nov 2024 15:12:58 +0800 Subject: [PATCH 04/10] chore: more filter text content --- web/app/components/workflow/block-selector/all-tools.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx index b93d68c019..13ac91aece 100644 --- a/web/app/components/workflow/block-selector/all-tools.tsx +++ b/web/app/components/workflow/block-selector/all-tools.tsx @@ -64,7 +64,7 @@ const AllTools = ({ return mergedTools.filter((toolWithProvider) => { return toolWithProvider.tools.some((tool) => { - return tool.label[language].toLowerCase().includes(searchText.toLowerCase()) + return tool.label[language].toLowerCase().includes(searchText.toLowerCase()) || tool.name.toLowerCase().includes(searchText.toLowerCase()) }) }) }, [activeTab, buildInTools, customTools, workflowTools, searchText, language, hasFilter]) From edbfe27eb18400158a5f5b753ba6102df6489a32 Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 13 Nov 2024 15:17:22 +0800 Subject: [PATCH 05/10] chore: add invalid all built in tools --- web/service/use-tools.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts index 3c34de3be9..ee2af1f398 100644 --- a/web/service/use-tools.ts +++ b/web/service/use-tools.ts @@ -12,13 +12,24 @@ import { const NAME_SPACE = 'tools' +const useAllBuiltInToolsKey = [NAME_SPACE, 'builtIn'] export const useAllBuiltInTools = () => { return useQuery({ - queryKey: [NAME_SPACE, 'builtIn'], + queryKey: useAllBuiltInToolsKey, queryFn: () => get('/workspaces/current/tools/builtin'), }) } +export const useInvalidateAllBuiltInTools = () => { + const queryClient = useQueryClient() + return () => { + queryClient.invalidateQueries( + { + queryKey: useAllBuiltInToolsKey, + }) + } +} + const useAllCustomToolsKey = [NAME_SPACE, 'customTools'] export const useAllCustomTools = () => { return useQuery({ From 577a948f42e6a9e7d8ab764d03a2a5abe0c640b3 Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Wed, 13 Nov 2024 15:48:06 +0800 Subject: [PATCH 06/10] feat: dsl check plugin --- .../app/create-from-dsl-modal/index.tsx | 14 +++++++- web/app/components/plugins/types.ts | 12 +++++++ web/app/components/workflow/index.tsx | 4 ++- .../workflow/plugin-dependency/index.tsx | 14 ++++++++ .../workflow/plugin-dependency/store.ts | 11 +++++++ .../components/workflow/update-dsl-modal.tsx | 11 +++++-- web/service/use-plugins.ts | 32 +++++++++++++++++++ 7 files changed, 94 insertions(+), 4 deletions(-) create mode 100644 web/app/components/workflow/plugin-dependency/index.tsx create mode 100644 web/app/components/workflow/plugin-dependency/store.ts diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx index a97ca97bbe..45ef8dbde6 100644 --- a/web/app/components/app/create-from-dsl-modal/index.tsx +++ b/web/app/components/app/create-from-dsl-modal/index.tsx @@ -21,8 +21,9 @@ import AppsFull from '@/app/components/billing/apps-full-in-dialog' import { NEED_REFRESH_APP_LIST_KEY } from '@/config' import { getRedirection } from '@/utils/app-redirection' import cn from '@/utils/classnames' +import { useMutationCheckDependenciesBeforeImportDSL } from '@/service/use-plugins' -interface CreateFromDSLModalProps { +type CreateFromDSLModalProps = { show: boolean onSuccess?: () => void onClose: () => void @@ -43,6 +44,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS const [fileContent, setFileContent] = useState() const [currentTab, setCurrentTab] = useState(activeTab) const [dslUrlValue, setDslUrlValue] = useState(dslUrl) + const { mutateAsync } = useMutationCheckDependenciesBeforeImportDSL() const readFile = (file: File) => { const reader = new FileReader() @@ -78,11 +80,21 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS let app if (currentTab === CreateFromDSLModalTab.FROM_FILE) { + const leakedData = await mutateAsync({ dslString: fileContent }) + if (leakedData?.leaked.length) { + isCreatingRef.current = false + return + } app = await importApp({ data: fileContent || '', }) } if (currentTab === CreateFromDSLModalTab.FROM_URL) { + const leakedData = await mutateAsync({ url: dslUrlValue }) + if (leakedData?.leaked.length) { + isCreatingRef.current = false + return + } app = await importAppFromUrl({ url: dslUrlValue || '', }) diff --git a/web/app/components/plugins/types.ts b/web/app/components/plugins/types.ts index 4d9ae8ca35..e42dff0f5c 100644 --- a/web/app/components/plugins/types.ts +++ b/web/app/components/plugins/types.ts @@ -305,3 +305,15 @@ export type UninstallPluginResponse = { export type PluginsFromMarketplaceResponse = { plugins: Plugin[] } + +export type Dependency = { + type: 'github' | 'marketplace' | 'package' + value: { + repo?: string + version?: string + package?: string + github_plugin_unique_identifier?: string + marketplace_plugin_unique_identifier?: string + plugin_unique_identifier?: string + } +} diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx index 3a5a790919..2eccb38e47 100644 --- a/web/app/components/workflow/index.tsx +++ b/web/app/components/workflow/index.tsx @@ -72,6 +72,7 @@ import SyncingDataModal from './syncing-data-modal' import UpdateDSLModal from './update-dsl-modal' import DSLExportConfirmModal from './dsl-export-confirm-modal' import LimitTips from './limit-tips' +import PluginDependency from './plugin-dependency' import { useStore, useWorkflowStore, @@ -105,7 +106,7 @@ const edgeTypes = { [CUSTOM_NODE]: CustomEdge, } -interface WorkflowProps { +type WorkflowProps = { nodes: Node[] edges: Edge[] viewport?: Viewport @@ -326,6 +327,7 @@ const Workflow: FC = memo(({ /> ) } + { + const dependencies = useStore(s => s.dependencies) + + if (!dependencies.length) + return null + + return ( +
a
+ ) +} + +export default PluginDependency diff --git a/web/app/components/workflow/plugin-dependency/store.ts b/web/app/components/workflow/plugin-dependency/store.ts new file mode 100644 index 0000000000..a8e1d8171a --- /dev/null +++ b/web/app/components/workflow/plugin-dependency/store.ts @@ -0,0 +1,11 @@ +import { create } from 'zustand' +import type { Dependency } from '@/app/components/plugins/types' + +type Shape = { + dependencies: Dependency[] + setDependencies: (dependencies: Dependency[]) => void +} +export const useStore = create(set => ({ + dependencies: [], + setDependencies: dependencies => set({ dependencies }), +})) diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx index d91b7ca04b..86a3648c4e 100644 --- a/web/app/components/workflow/update-dsl-modal.tsx +++ b/web/app/components/workflow/update-dsl-modal.tsx @@ -29,8 +29,9 @@ import { updateWorkflowDraftFromDSL } from '@/service/workflow' import { useEventEmitterContextContext } from '@/context/event-emitter' import { useStore as useAppStore } from '@/app/components/app/store' import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants' +import { useMutationCheckDependenciesBeforeImportDSL } from '@/service/use-plugins' -interface UpdateDSLModalProps { +type UpdateDSLModalProps = { onCancel: () => void onBackup: () => void onImport?: () => void @@ -48,6 +49,7 @@ const UpdateDSLModal = ({ const [fileContent, setFileContent] = useState() const [loading, setLoading] = useState(false) const { eventEmitter } = useEventEmitterContextContext() + const { mutateAsync, mutate } = useMutationCheckDependenciesBeforeImportDSL() const readFile = (file: File) => { const reader = new FileReader() @@ -75,6 +77,11 @@ const UpdateDSLModal = ({ return try { if (appDetail && fileContent) { + const leakedData = await mutateAsync({ dslString: fileContent }) + if (leakedData?.leaked.length) { + isCreatingRef.current = false + return + } setLoading(true) const { graph, @@ -128,7 +135,7 @@ const UpdateDSLModal = ({ notify({ type: 'error', message: t('workflow.common.importFailure') }) } isCreatingRef.current = false - }, [currentFile, fileContent, onCancel, notify, t, eventEmitter, appDetail, onImport]) + }, [currentFile, fileContent, onCancel, notify, t, eventEmitter, appDetail, onImport, mutateAsync]) return ( { }, }) } + +export const useMutationCheckDependenciesBeforeImportDSL = () => { + const mutation = useMutation({ + mutationFn: ({ dslString, url }: { dslString?: string, url?: string }) => { + if (url) { + return post<{ leaked: Dependency[] }>( + '/apps/import/url/dependencies/check', + { + body: { + url, + }, + }, + ) + } + return post<{ leaked: Dependency[] }>( + '/apps/import/dependencies/check', + { + body: { + data: dslString, + }, + }) + }, + onSuccess: (data) => { + const { setDependencies } = usePluginDependencyStore.getState() + setDependencies(data.leaked || []) + }, + }) + + return mutation +} From 0d607a8c9016c8c2d2da61aefde2ceaa8a3fd9e5 Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 13 Nov 2024 16:22:09 +0800 Subject: [PATCH 07/10] feat: add update workflow to update use query --- web/app/components/tools/provider/detail.tsx | 4 +++- .../tools/workflow-tool/configure-button.tsx | 4 ++++ web/service/use-plugins.ts | 3 +++ web/service/use-tools.ts | 24 +++++++------------ 4 files changed, 19 insertions(+), 16 deletions(-) diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx index 96f36a2095..93b728e4c5 100644 --- a/web/app/components/tools/provider/detail.tsx +++ b/web/app/components/tools/provider/detail.tsx @@ -44,6 +44,7 @@ import { useProviderContext } from '@/context/provider-context' import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations' import Loading from '@/app/components/base/loading' import { useAppContext } from '@/context/app-context' +import { useInvalidateAllWorkflowTools } from '@/service/use-tools' type Props = { collection: Collection @@ -65,7 +66,7 @@ const ProviderDetail = ({ const isBuiltIn = collection.type === CollectionType.builtIn const isModel = collection.type === CollectionType.model const { isCurrentWorkspaceManager } = useAppContext() - + const invalidateAllWorkflowTools = useInvalidateAllWorkflowTools() const [isDetailLoading, setIsDetailLoading] = useState(false) // built in provider @@ -164,6 +165,7 @@ const ProviderDetail = ({ workflow_tool_id: string }>) => { await saveWorkflowToolProvider(data) + invalidateAllWorkflowTools() onRefreshData() getWorkflowToolProvider() Toast.notify({ diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx index 6521410dae..18d1191235 100644 --- a/web/app/components/tools/workflow-tool/configure-button.tsx +++ b/web/app/components/tools/workflow-tool/configure-button.tsx @@ -14,6 +14,7 @@ import { createWorkflowToolProvider, fetchWorkflowToolDetailByAppID, saveWorkflo import type { Emoji, WorkflowToolProviderParameter, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '@/app/components/tools/types' import type { InputVar } from '@/app/components/workflow/types' import { useAppContext } from '@/context/app-context' +import { useInvalidateAllWorkflowTools } from '@/service/use-tools' type Props = { disabled: boolean @@ -46,6 +47,7 @@ const WorkflowToolConfigureButton = ({ const [isLoading, setIsLoading] = useState(false) const [detail, setDetail] = useState() const { isCurrentWorkspaceManager } = useAppContext() + const invalidateAllWorkflowTools = useInvalidateAllWorkflowTools() const outdated = useMemo(() => { if (!detail) @@ -135,6 +137,7 @@ const WorkflowToolConfigureButton = ({ const createHandle = async (data: WorkflowToolProviderRequest & { workflow_app_id: string }) => { try { await createWorkflowToolProvider(data) + invalidateAllWorkflowTools() onRefreshData?.() getDetail(workflowAppId) Toast.notify({ @@ -156,6 +159,7 @@ const WorkflowToolConfigureButton = ({ await handlePublish() await saveWorkflowToolProvider(data) onRefreshData?.() + invalidateAllWorkflowTools() getDetail(workflowAppId) Toast.notify({ type: 'success', diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts index 4b99caf835..c9f8058e8f 100644 --- a/web/service/use-plugins.ts +++ b/web/service/use-plugins.ts @@ -18,6 +18,7 @@ import { useQueryClient, } from '@tanstack/react-query' import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store' +import { useInvalidateAllBuiltInTools } from './use-tools' const NAME_SPACE = 'plugins' @@ -31,11 +32,13 @@ export const useInstalledPluginList = () => { export const useInvalidateInstalledPluginList = () => { const queryClient = useQueryClient() + const invalidateAllBuiltInTools = useInvalidateAllBuiltInTools() return () => { queryClient.invalidateQueries( { queryKey: useInstalledPluginListKey, }) + invalidateAllBuiltInTools() } } diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts index ee2af1f398..8b06d47342 100644 --- a/web/service/use-tools.ts +++ b/web/service/use-tools.ts @@ -4,6 +4,7 @@ import type { Tool, } from '@/app/components/tools/types' import type { ToolWithProvider } from '@/app/components/workflow/types' +import { useInvalid } from './use-base' import { useMutation, useQuery, @@ -21,13 +22,7 @@ export const useAllBuiltInTools = () => { } export const useInvalidateAllBuiltInTools = () => { - const queryClient = useQueryClient() - return () => { - queryClient.invalidateQueries( - { - queryKey: useAllBuiltInToolsKey, - }) - } + return useInvalid(useAllBuiltInToolsKey) } const useAllCustomToolsKey = [NAME_SPACE, 'customTools'] @@ -39,22 +34,21 @@ export const useAllCustomTools = () => { } export const useInvalidateAllCustomTools = () => { - const queryClient = useQueryClient() - return () => { - queryClient.invalidateQueries( - { - queryKey: useAllCustomToolsKey, - }) - } + return useInvalid(useAllCustomToolsKey) } +const useAllWorkflowToolsKey = [NAME_SPACE, 'workflowTools'] export const useAllWorkflowTools = () => { return useQuery({ - queryKey: [NAME_SPACE, 'workflowTools'], + queryKey: useAllWorkflowToolsKey, queryFn: () => get('/workspaces/current/tools/workflow'), }) } +export const useInvalidateAllWorkflowTools = () => { + return useInvalid(useAllWorkflowToolsKey) +} + export const useBuiltinProviderInfo = (providerName: string) => { return useQuery({ queryKey: [NAME_SPACE, 'builtin-provider-info', providerName], From 3e314843db5d0b6a13e1796a0f211a4711f56ac5 Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 13 Nov 2024 16:22:28 +0800 Subject: [PATCH 08/10] chore: add missing file --- web/service/use-base.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 web/service/use-base.ts diff --git a/web/service/use-base.ts b/web/service/use-base.ts new file mode 100644 index 0000000000..5eeca22668 --- /dev/null +++ b/web/service/use-base.ts @@ -0,0 +1,13 @@ +import { + useQueryClient, +} from '@tanstack/react-query' + +export const useInvalid = (key: string[]) => { + const queryClient = useQueryClient() + return () => { + queryClient.invalidateQueries( + { + queryKey: key, + }) + } +} From aa88028564b65a4c23529096db89f5535dd276ff Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Wed, 13 Nov 2024 16:28:18 +0800 Subject: [PATCH 09/10] fix: marketplace list --- .../plugins/marketplace/context.tsx | 5 ++++ .../plugins/marketplace/list/list-wrapper.tsx | 29 ++++++++++++++----- web/app/components/tools/marketplace/hooks.ts | 5 +++- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx index 4c5752d45b..6dabfdf736 100644 --- a/web/app/components/plugins/marketplace/context.tsx +++ b/web/app/components/plugins/marketplace/context.tsx @@ -41,6 +41,7 @@ export type MarketplaceContextValue = { setMarketplaceCollectionsFromClient: (collections: MarketplaceCollection[]) => void marketplaceCollectionPluginsMapFromClient?: Record setMarketplaceCollectionPluginsMapFromClient: (map: Record) => void + isLoading: boolean } export const MarketplaceContext = createContext({ @@ -60,6 +61,7 @@ export const MarketplaceContext = createContext({ setMarketplaceCollectionsFromClient: () => {}, marketplaceCollectionPluginsMapFromClient: {}, setMarketplaceCollectionPluginsMapFromClient: () => {}, + isLoading: false, }) type MarketplaceContextProviderProps = { @@ -88,12 +90,14 @@ export const MarketplaceContextProvider = ({ marketplaceCollectionPluginsMap: marketplaceCollectionPluginsMapFromClient, setMarketplaceCollectionPluginsMap: setMarketplaceCollectionPluginsMapFromClient, queryMarketplaceCollectionsAndPlugins, + isLoading, } = useMarketplaceCollectionsAndPlugins() const { plugins, resetPlugins, queryPlugins, queryPluginsWithDebounced, + isLoading: isPluginsLoading, } = useMarketplacePlugins() const handleSearchPluginTextChange = useCallback((text: string) => { @@ -194,6 +198,7 @@ export const MarketplaceContextProvider = ({ setMarketplaceCollectionsFromClient, marketplaceCollectionPluginsMapFromClient, setMarketplaceCollectionPluginsMapFromClient, + isLoading: isLoading || isPluginsLoading, }} > {children} diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx index 50f4c5d244..936cb7ec57 100644 --- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx +++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx @@ -4,6 +4,7 @@ import type { MarketplaceCollection } from '../types' import { useMarketplaceContext } from '../context' import List from './index' import SortDropdown from '../sort-dropdown' +import Loading from '@/app/components/base/loading' type ListWrapperProps = { marketplaceCollections: MarketplaceCollection[] @@ -20,9 +21,10 @@ const ListWrapper = ({ const plugins = useMarketplaceContext(v => v.plugins) const marketplaceCollectionsFromClient = useMarketplaceContext(v => v.marketplaceCollectionsFromClient) const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient) + const isLoading = useMarketplaceContext(v => v.isLoading) return ( -
+
{ plugins && (
@@ -32,13 +34,24 @@ const ListWrapper = ({
) } - + { + isLoading && ( +
+ +
+ ) + } + { + !isLoading && ( + + ) + }
) } diff --git a/web/app/components/tools/marketplace/hooks.ts b/web/app/components/tools/marketplace/hooks.ts index 5d27e10043..45cbd8a389 100644 --- a/web/app/components/tools/marketplace/hooks.ts +++ b/web/app/components/tools/marketplace/hooks.ts @@ -5,6 +5,7 @@ import { useMarketplaceCollectionsAndPlugins, useMarketplacePlugins, } from '@/app/components/plugins/marketplace/hooks' +import { PluginType } from '@/app/components/plugins/types' export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => { const { @@ -25,18 +26,20 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin if (searchPluginText || filterPluginTags.length) { if (searchPluginText) { queryPluginsWithDebounced({ + category: PluginType.tool, query: searchPluginText, tags: filterPluginTags, }) return } queryPlugins({ + category: PluginType.tool, query: searchPluginText, tags: filterPluginTags, }) } else { - queryMarketplaceCollectionsAndPlugins() + queryMarketplaceCollectionsAndPlugins({ category: PluginType.tool }) resetPlugins() } }, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, resetPlugins]) From b10a1cd325e4f7c92e08d69251f7f89bf0849698 Mon Sep 17 00:00:00 2001 From: Yi Date: Wed, 13 Nov 2024 16:43:00 +0800 Subject: [PATCH 10/10] chore: update the theme selector setting in globals.css --- web/app/styles/globals.css | 59 ++++++++++++++++++++++---------------- 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css index f0a8e466d6..06d2596a24 100644 --- a/web/app/styles/globals.css +++ b/web/app/styles/globals.css @@ -2,8 +2,8 @@ @tailwind base; @tailwind components; -@import '../../themes/light.css'; -@import '../../themes/dark.css'; +@import "../../themes/light.css"; +@import "../../themes/dark.css"; html[data-changing-theme] * { transition: none !important; @@ -20,24 +20,30 @@ html[data-changing-theme] * { --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; - --primary-glow: conic-gradient(from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg); - --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0)); + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); --tile-start-rgb: 239, 245, 249; --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient(#00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080); + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); --callout-rgb: 238, 240, 241; --callout-border-rgb: 172, 175, 176; @@ -282,7 +288,7 @@ button:focus-within { line-height: 24px; } -[class*='code-'] { +[class*="code-"] { @apply font-mono; } @@ -644,7 +650,7 @@ button:focus-within { } .text-gradient { - background: linear-gradient(91.58deg, #2250F2 -29.55%, #0EBCF3 75.22%); + background: linear-gradient(91.58deg, #2250f2 -29.55%, #0ebcf3 75.22%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -652,7 +658,7 @@ button:focus-within { } /* overwrite paging active dark model style */ -[class*=style_paginatio] li .text-primary-600 { +[class*="style_paginatio"] li .text-primary-600 { color: rgb(28 100 242); background-color: rgb(235 245 255); } @@ -665,8 +671,13 @@ button:focus-within { bottom: 0; } -@import '../components/base/button/index.css'; -@import '../components/base/action-button/index.css'; -@import '../components/base/modal/index.css'; +[data-theme="dark"] [data-hide-on-theme="dark"], +[data-theme="light"] [data-hide-on-theme="light"] { + display: none; +} -@tailwind utilities; \ No newline at end of file +@import "../components/base/button/index.css"; +@import "../components/base/action-button/index.css"; +@import "../components/base/modal/index.css"; + +@tailwind utilities;