From 4df7c00859d069f09de1c29e31ec7038d60623c6 Mon Sep 17 00:00:00 2001 From: wangxiaolei Date: Wed, 6 May 2026 09:47:32 +0800 Subject: [PATCH 1/5] fix: fix test_sharded_channel failed (#35814) --- .../broadcast_channel/redis/test_sharded_channel.py | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py b/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py index 43915a204d..84c1d0ca41 100644 --- a/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py +++ b/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py @@ -8,6 +8,7 @@ Covers real Redis 7+ sharded pub/sub interactions including: - Resource cleanup accounting via PUBSUB SHARDNUMSUB """ +import socket import threading import time import uuid @@ -356,10 +357,17 @@ class TestShardedRedisBroadcastChannelClusterIntegration: def _get_test_topic_name(cls) -> str: return f"test_sharded_cluster_topic_{uuid.uuid4()}" + @staticmethod + def _resolve_announced_ip(host: str) -> str: + """Resolve the container host name to a literal IP accepted by Redis cluster config.""" + return socket.getaddrinfo(host, None, type=socket.SOCK_STREAM)[0][4][0] + @staticmethod def _ensure_single_node_cluster(host: str, port: int) -> None: + """Bootstrap a single-node cluster using a literal IP for Redis node advertisement.""" client = redis.Redis(host=host, port=port, decode_responses=False) - client.config_set("cluster-announce-ip", host) + announced_ip = TestShardedRedisBroadcastChannelClusterIntegration._resolve_announced_ip(host) + client.config_set("cluster-announce-ip", announced_ip) client.config_set("cluster-announce-port", port) slots = client.execute_command("CLUSTER", "SLOTS") if not slots: From 5c68f12bb81603911b894bbde07f41d0b1d2ff8d Mon Sep 17 00:00:00 2001 From: wangxiaolei Date: Wed, 6 May 2026 10:40:19 +0800 Subject: [PATCH 2/5] fix: fix Working outside of application context (#35819) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- api/core/provider_manager.py | 18 +++++++++--------- api/models/provider.py | 12 +++++++----- .../unit_tests/core/test_provider_manager.py | 16 ++++++---------- 3 files changed, 22 insertions(+), 24 deletions(-) diff --git a/api/core/provider_manager.py b/api/core/provider_manager.py index 8969825be4..b290ae456e 100644 --- a/api/core/provider_manager.py +++ b/api/core/provider_manager.py @@ -9,9 +9,9 @@ from typing import TYPE_CHECKING, Any from pydantic import TypeAdapter from sqlalchemy import select from sqlalchemy.exc import IntegrityError -from sqlalchemy.orm import Session from configs import dify_config +from core.db.session_factory import session_factory from core.entities.model_entities import DefaultModelEntity, DefaultModelProviderEntity from core.entities.provider_configuration import ProviderConfiguration, ProviderConfigurations, ProviderModelBundle from core.entities.provider_entities import ( @@ -445,7 +445,7 @@ class ProviderManager: @staticmethod def _get_all_providers(tenant_id: str) -> dict[str, list[Provider]]: provider_name_to_provider_records_dict = defaultdict(list) - with Session(db.engine, expire_on_commit=False) as session: + with session_factory.create_session() as session: stmt = select(Provider).where(Provider.tenant_id == tenant_id, Provider.is_valid == True) providers = session.scalars(stmt) for provider in providers: @@ -462,7 +462,7 @@ class ProviderManager: :return: """ provider_name_to_provider_model_records_dict = defaultdict(list) - with Session(db.engine, expire_on_commit=False) as session: + with session_factory.create_session() as session: stmt = select(ProviderModel).where(ProviderModel.tenant_id == tenant_id, ProviderModel.is_valid == True) provider_models = session.scalars(stmt) for provider_model in provider_models: @@ -478,7 +478,7 @@ class ProviderManager: :return: """ provider_name_to_preferred_provider_type_records_dict = {} - with Session(db.engine, expire_on_commit=False) as session: + with session_factory.create_session() as session: stmt = select(TenantPreferredModelProvider).where(TenantPreferredModelProvider.tenant_id == tenant_id) preferred_provider_types = session.scalars(stmt) provider_name_to_preferred_provider_type_records_dict = { @@ -496,7 +496,7 @@ class ProviderManager: :return: """ provider_name_to_provider_model_settings_dict = defaultdict(list) - with Session(db.engine, expire_on_commit=False) as session: + with session_factory.create_session() as session: stmt = select(ProviderModelSetting).where(ProviderModelSetting.tenant_id == tenant_id) provider_model_settings = session.scalars(stmt) for provider_model_setting in provider_model_settings: @@ -514,7 +514,7 @@ class ProviderManager: :return: """ provider_name_to_provider_model_credentials_dict = defaultdict(list) - with Session(db.engine, expire_on_commit=False) as session: + with session_factory.create_session() as session: stmt = select(ProviderModelCredential).where(ProviderModelCredential.tenant_id == tenant_id) provider_model_credentials = session.scalars(stmt) for provider_model_credential in provider_model_credentials: @@ -544,7 +544,7 @@ class ProviderManager: return {} provider_name_to_provider_load_balancing_model_configs_dict = defaultdict(list) - with Session(db.engine, expire_on_commit=False) as session: + with session_factory.create_session() as session: stmt = select(LoadBalancingModelConfig).where(LoadBalancingModelConfig.tenant_id == tenant_id) provider_load_balancing_configs = session.scalars(stmt) for provider_load_balancing_config in provider_load_balancing_configs: @@ -578,7 +578,7 @@ class ProviderManager: :param provider_name: provider name :return: """ - with Session(db.engine, expire_on_commit=False) as session: + with session_factory.create_session() as session: stmt = ( select(ProviderCredential) .where( @@ -608,7 +608,7 @@ class ProviderManager: :param model_type: model type :return: """ - with Session(db.engine, expire_on_commit=False) as session: + with session_factory.create_session() as session: stmt = ( select(ProviderModelCredential) .where( diff --git a/api/models/provider.py b/api/models/provider.py index 2bb67d605b..8dc3ce4ff6 100644 --- a/api/models/provider.py +++ b/api/models/provider.py @@ -9,11 +9,11 @@ import sqlalchemy as sa from sqlalchemy import DateTime, String, func, select, text from sqlalchemy.orm import Mapped, mapped_column +from core.db.session_factory import session_factory from graphon.model_runtime.entities.model_entities import ModelType from libs.uuid_utils import uuidv7 from .base import TypeBase -from .engine import db from .enums import CredentialSourceType, PaymentStatus, ProviderQuotaType from .types import EnumText, LongText, StringUUID @@ -82,7 +82,8 @@ class Provider(TypeBase): @cached_property def credential(self): if self.credential_id: - return db.session.scalar(select(ProviderCredential).where(ProviderCredential.id == self.credential_id)) + with session_factory.create_session() as session: + return session.scalar(select(ProviderCredential).where(ProviderCredential.id == self.credential_id)) @property def credential_name(self): @@ -145,9 +146,10 @@ class ProviderModel(TypeBase): @cached_property def credential(self): if self.credential_id: - return db.session.scalar( - select(ProviderModelCredential).where(ProviderModelCredential.id == self.credential_id) - ) + with session_factory.create_session() as session: + return session.scalar( + select(ProviderModelCredential).where(ProviderModelCredential.id == self.credential_id) + ) @property def credential_name(self): diff --git a/api/tests/unit_tests/core/test_provider_manager.py b/api/tests/unit_tests/core/test_provider_manager.py index a5a542c94f..02f12fb3b4 100644 --- a/api/tests/unit_tests/core/test_provider_manager.py +++ b/api/tests/unit_tests/core/test_provider_manager.py @@ -570,8 +570,7 @@ def test_get_all_providers_normalizes_provider_names_with_model_provider_id() -> session.scalars.return_value = [openai_provider, gemini_provider] with ( - patch("core.provider_manager.db", SimpleNamespace(engine=object())), - patch("core.provider_manager.Session", return_value=_build_session_context(session)), + patch("core.provider_manager.session_factory.create_session", return_value=_build_session_context(session)), ): result = ProviderManager._get_all_providers("tenant-id") @@ -595,8 +594,7 @@ def test_provider_grouping_helpers_group_records_by_provider_name(method_name: s session.scalars.return_value = [openai_primary, openai_secondary, anthropic_record] with ( - patch("core.provider_manager.db", SimpleNamespace(engine=object())), - patch("core.provider_manager.Session", return_value=_build_session_context(session)), + patch("core.provider_manager.session_factory.create_session", return_value=_build_session_context(session)), ): result = getattr(ProviderManager, method_name)("tenant-id") @@ -611,8 +609,7 @@ def test_get_all_preferred_model_providers_returns_mapping_by_provider_name() -> session.scalars.return_value = [openai_preference, anthropic_preference] with ( - patch("core.provider_manager.db", SimpleNamespace(engine=object())), - patch("core.provider_manager.Session", return_value=_build_session_context(session)), + patch("core.provider_manager.session_factory.create_session", return_value=_build_session_context(session)), ): result = ProviderManager._get_all_preferred_model_providers("tenant-id") @@ -626,13 +623,13 @@ def test_get_all_provider_load_balancing_configs_returns_empty_when_cached_flag_ with ( patch("core.provider_manager.redis_client.get", return_value=b"False"), patch("core.provider_manager.FeatureService.get_features") as mock_get_features, - patch("core.provider_manager.Session") as mock_session_cls, + patch("core.provider_manager.session_factory.create_session") as mock_create_session, ): result = ProviderManager._get_all_provider_load_balancing_configs("tenant-id") assert result == {} mock_get_features.assert_not_called() - mock_session_cls.assert_not_called() + mock_create_session.assert_not_called() def test_get_all_provider_load_balancing_configs_populates_cache_and_groups_configs() -> None: @@ -642,14 +639,13 @@ def test_get_all_provider_load_balancing_configs_populates_cache_and_groups_conf session.scalars.return_value = [openai_config, anthropic_config] with ( - patch("core.provider_manager.db", SimpleNamespace(engine=object())), patch("core.provider_manager.redis_client.get", return_value=None), patch("core.provider_manager.redis_client.setex") as mock_setex, patch( "core.provider_manager.FeatureService.get_features", return_value=SimpleNamespace(model_load_balancing_enabled=True), ), - patch("core.provider_manager.Session", return_value=_build_session_context(session)), + patch("core.provider_manager.session_factory.create_session", return_value=_build_session_context(session)), ): result = ProviderManager._get_all_provider_load_balancing_configs("tenant-id") From b83f296634badce22efe929fa76d1283c6ff4252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= Date: Wed, 6 May 2026 10:56:10 +0800 Subject: [PATCH 3/5] fix: restore workflow versions via backend API (#35817) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- eslint-suppressions.json | 2 +- .../__tests__/workflow-edge-events.spec.tsx | 32 ++- ...laboration-manager.logs-and-events.spec.ts | 18 +- ...n-manager.socket-and-subscriptions.spec.ts | 8 - .../core/collaboration-manager.ts | 20 -- .../collaboration/types/collaboration.ts | 20 -- .../__tests__/header-in-restoring.spec.tsx | 10 +- .../header/__tests__/header-layouts.spec.tsx | 76 ++++- .../workflow/header/header-in-restoring.tsx | 121 +++++--- .../__tests__/use-leader-restore.spec.ts | 262 ------------------ web/app/components/workflow/hooks/index.ts | 1 - .../workflow/hooks/use-leader-restore.ts | 164 ----------- web/app/components/workflow/index.tsx | 14 +- 13 files changed, 192 insertions(+), 556 deletions(-) delete mode 100644 web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts delete mode 100644 web/app/components/workflow/hooks/use-leader-restore.ts diff --git a/eslint-suppressions.json b/eslint-suppressions.json index 3c86fb2b7c..258584c7f3 100644 --- a/eslint-suppressions.json +++ b/eslint-suppressions.json @@ -3642,7 +3642,7 @@ }, "web/app/components/workflow/hooks/index.ts": { "no-barrel-files/no-barrel-files": { - "count": 26 + "count": 25 } }, "web/app/components/workflow/hooks/use-checklist.ts": { diff --git a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx index 28be928a82..817c397d5d 100644 --- a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx +++ b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx @@ -27,6 +27,12 @@ const reactFlowBridge = vi.hoisted(() => ({ const collaborationBridge = vi.hoisted(() => ({ graphImportHandler: null as null | ((payload: { nodes: Node[], edges: Edge[] }) => void), historyActionHandler: null as null | ((payload: unknown) => void), + restoreIntentHandler: null as null | ((payload: { + versionId: string + versionName?: string + initiatorUserId: string + initiatorName: string + }) => void), })) const toastInfoMock = vi.hoisted(() => vi.fn()) @@ -180,6 +186,10 @@ vi.mock('../collaboration/core/collaboration-manager', () => ({ collaborationBridge.historyActionHandler = handler return vi.fn() }, + onRestoreIntent: (handler: typeof collaborationBridge.restoreIntentHandler) => { + collaborationBridge.restoreIntentHandler = handler + return vi.fn() + }, }, })) @@ -401,7 +411,6 @@ vi.mock('../hooks', () => ({ useWorkflowRefreshDraft: () => ({ handleRefreshWorkflowDraft: vi.fn(), }), - useLeaderRestoreListener: vi.fn(), })) vi.mock('../hooks/use-workflow-search', () => ({ @@ -479,6 +488,7 @@ describe('Workflow edge event wiring', () => { reactFlowBridge.store = null collaborationBridge.graphImportHandler = null collaborationBridge.historyActionHandler = null + collaborationBridge.restoreIntentHandler = null workflowCommentState.comments = [] workflowCommentState.pendingComment = null workflowCommentState.activeComment = null @@ -626,6 +636,26 @@ describe('Workflow edge event wiring', () => { }) }) + it('should show restore intent toast when another collaborator restores a workflow version', async () => { + renderSubject() + + act(() => { + collaborationBridge.restoreIntentHandler?.({ + versionId: 'version-1', + versionName: 'Version One', + initiatorUserId: 'user-1', + initiatorName: 'Alice', + }) + }) + + await waitFor(() => { + expect(toastInfoMock).toHaveBeenCalledWith( + 'workflow.versionHistory.action.restoreInProgress:{"userName":"Alice","versionName":"Version One"}', + { timeout: 3000 }, + ) + }) + }) + it('should render comment overlays and execute comment actions in comment mode', async () => { workflowCommentState.comments = [ { id: 'comment-1', resolved: false }, diff --git a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.logs-and-events.spec.ts b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.logs-and-events.spec.ts index 89888bf1cb..e56aa1d82c 100644 --- a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.logs-and-events.spec.ts +++ b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.logs-and-events.spec.ts @@ -1,5 +1,5 @@ import type { LoroMap } from 'loro-crdt' -import type { OnlineUser, RestoreRequestData } from '../../types/collaboration' +import type { OnlineUser } from '../../types/collaboration' import type { NoteNodeType } from '@/app/components/workflow/note-node/types' import type { Edge, Node } from '@/app/components/workflow/types' import { LoroDoc } from 'loro-crdt' @@ -67,18 +67,6 @@ const createEdge = (id: string, source: string, target: string): Edge => ({ }, }) -const createRestoreRequestData = (): RestoreRequestData => ({ - versionId: 'version-1', - versionName: 'Version One', - initiatorUserId: 'user-1', - initiatorName: 'Alice', - graphData: { - nodes: [createNode('n-restore')], - edges: [], - viewport: { x: 1, y: 2, zoom: 0.5 }, - }, -}) - const setupManagerWithDoc = () => { const manager = new CollaborationManager() const doc = new LoroDoc() @@ -275,7 +263,6 @@ describe('CollaborationManager logs and event helpers', () => { manager.emitCommentsUpdate('app-1') manager.emitHistoryAction('undo') - manager.emitRestoreRequest(createRestoreRequestData()) manager.emitRestoreIntent({ versionId: 'version-1', versionName: 'Version One', @@ -289,13 +276,11 @@ describe('CollaborationManager logs and event helpers', () => { manager.emitCommentsUpdate('app-1') manager.emitHistoryAction('undo') - manager.emitRestoreRequest(createRestoreRequestData()) expect(sendSpy).not.toHaveBeenCalled() isConnectedSpy.mockReturnValue(true) manager.emitCommentsUpdate('app-1') manager.emitHistoryAction('redo') - manager.emitRestoreRequest(createRestoreRequestData()) manager.emitRestoreIntent({ versionId: 'version-2', initiatorUserId: 'u-2', @@ -309,7 +294,6 @@ describe('CollaborationManager logs and event helpers', () => { expect(eventTypes).toEqual([ 'comments_update', 'workflow_history_action', - 'workflow_restore_request', 'workflow_restore_intent', 'workflow_restore_complete', ]) diff --git a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.socket-and-subscriptions.spec.ts b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.socket-and-subscriptions.spec.ts index 6768e5b4e2..63487432dc 100644 --- a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.socket-and-subscriptions.spec.ts +++ b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.socket-and-subscriptions.spec.ts @@ -203,7 +203,6 @@ describe('CollaborationManager socket and subscription behavior', () => { const mcpHandler = vi.fn() const workflowUpdateHandler = vi.fn() const commentsHandler = vi.fn() - const restoreRequestHandler = vi.fn() const restoreIntentHandler = vi.fn() const restoreCompleteHandler = vi.fn() const historyHandler = vi.fn() @@ -218,7 +217,6 @@ describe('CollaborationManager socket and subscription behavior', () => { manager.onMcpServerUpdate(mcpHandler) manager.onWorkflowUpdate(workflowUpdateHandler) manager.onCommentsUpdate(commentsHandler) - manager.onRestoreRequest(restoreRequestHandler) manager.onRestoreIntent(restoreIntentHandler) manager.onRestoreComplete(restoreCompleteHandler) manager.onHistoryAction(historyHandler) @@ -296,11 +294,6 @@ describe('CollaborationManager socket and subscription behavior', () => { type: 'graph_resync_request', data: {}, } satisfies CollaborationUpdate) - socket.trigger('collaboration_update', { - ...baseUpdate, - type: 'workflow_restore_request', - data: { versionId: 'v1', initiatorUserId: 'u-1', initiatorName: 'Alice', graphData: { nodes: [], edges: [] } } as unknown as Record, - } satisfies CollaborationUpdate) socket.trigger('collaboration_update', { ...baseUpdate, type: 'workflow_restore_intent', @@ -335,7 +328,6 @@ describe('CollaborationManager socket and subscription behavior', () => { expect(latestPresence).toMatchObject({ 'n-1': { 'socket-events': { userId: 'u-1' } } }) expect(syncRequestHandler).toHaveBeenCalledTimes(1) expect(broadcastSpy).toHaveBeenCalledTimes(1) - expect(restoreRequestHandler).toHaveBeenCalledTimes(1) expect(restoreIntentHandler).toHaveBeenCalledWith({ versionId: 'v1', initiatorUserId: 'u-1', initiatorName: 'Alice' } satisfies RestoreIntentData) expect(restoreCompleteHandler).toHaveBeenCalledWith({ versionId: 'v1', success: true } satisfies RestoreCompleteData) expect(historyHandler).toHaveBeenCalledWith({ action: 'undo', userId: 'u-1' }) diff --git a/web/app/components/workflow/collaboration/core/collaboration-manager.ts b/web/app/components/workflow/collaboration/core/collaboration-manager.ts index 5000886222..a80e493da9 100644 --- a/web/app/components/workflow/collaboration/core/collaboration-manager.ts +++ b/web/app/components/workflow/collaboration/core/collaboration-manager.ts @@ -16,7 +16,6 @@ import type { OnlineUser, RestoreCompleteData, RestoreIntentData, - RestoreRequestData, } from '../types/collaboration' import { cloneDeep } from 'es-toolkit/object' import { isEqual } from 'es-toolkit/predicate' @@ -770,17 +769,6 @@ export class CollaborationManager { return this.eventEmitter.on('historyAction', callback) } - emitRestoreRequest(data: RestoreRequestData): void { - if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) - return - - this.sendCollaborationEvent({ - type: 'workflow_restore_request', - data: data as unknown as Record, - timestamp: Date.now(), - }) - } - emitRestoreIntent(data: RestoreIntentData): void { if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return @@ -803,10 +791,6 @@ export class CollaborationManager { }) } - onRestoreRequest(callback: (data: RestoreRequestData) => void): () => void { - return this.eventEmitter.on('restoreRequest', callback) - } - onRestoreIntent(callback: (data: RestoreIntentData) => void): () => void { return this.eventEmitter.on('restoreIntent', callback) } @@ -1476,10 +1460,6 @@ export class CollaborationManager { if (this.isLeader) this.broadcastCurrentGraph() } - else if (update.type === 'workflow_restore_request') { - if (this.isLeader) - this.eventEmitter.emit('restoreRequest', update.data as RestoreRequestData) - } else if (update.type === 'workflow_restore_intent') { this.eventEmitter.emit('restoreIntent', update.data as RestoreIntentData) } diff --git a/web/app/components/workflow/collaboration/types/collaboration.ts b/web/app/components/workflow/collaboration/types/collaboration.ts index 3a5b71e2d1..7c083bca18 100644 --- a/web/app/components/workflow/collaboration/types/collaboration.ts +++ b/web/app/components/workflow/collaboration/types/collaboration.ts @@ -1,7 +1,3 @@ -import type { Viewport } from 'reactflow' -import type { ConversationVariable, Edge, EnvironmentVariable, Node } from '../../types' -import type { Features } from '@/app/components/base/features/types' - export type OnlineUser = { user_id: string username: string @@ -51,7 +47,6 @@ type CollaborationEventType | 'node_panel_presence' | 'app_publish_update' | 'graph_resync_request' - | 'workflow_restore_request' | 'workflow_restore_intent' | 'workflow_restore_complete' | 'workflow_history_action' @@ -63,21 +58,6 @@ export type CollaborationUpdate = { timestamp: number } -export type RestoreRequestData = { - versionId: string - versionName?: string - initiatorUserId: string - initiatorName: string - graphData: { - nodes: Node[] - edges: Edge[] - viewport?: Viewport - } - features?: Features - environmentVariables?: EnvironmentVariable[] - conversationVariables?: ConversationVariable[] -} - export type RestoreIntentData = { versionId: string versionName?: string diff --git a/web/app/components/workflow/header/__tests__/header-in-restoring.spec.tsx b/web/app/components/workflow/header/__tests__/header-in-restoring.spec.tsx index 60d55a931c..87e1db69bf 100644 --- a/web/app/components/workflow/header/__tests__/header-in-restoring.spec.tsx +++ b/web/app/components/workflow/header/__tests__/header-in-restoring.spec.tsx @@ -7,9 +7,9 @@ import HeaderInRestoring from '../header-in-restoring' const mockRestoreWorkflow = vi.fn() const mockInvalidAllLastRun = vi.fn() +const mockResetWorkflowVersionHistory = vi.fn() const mockHandleLoadBackupDraft = vi.fn() const mockHandleRefreshWorkflowDraft = vi.fn() -const mockRequestRestore = vi.fn() vi.mock('@/hooks/use-theme', () => ({ default: () => ({ @@ -31,6 +31,7 @@ vi.mock('@/hooks/use-format-time-from-now', () => ({ vi.mock('@/service/use-workflow', () => ({ useInvalidAllLastRun: () => mockInvalidAllLastRun, + useResetWorkflowVersionHistory: () => mockResetWorkflowVersionHistory, useRestoreWorkflow: () => ({ mutateAsync: mockRestoreWorkflow, }), @@ -43,9 +44,6 @@ vi.mock('../../hooks', () => ({ useWorkflowRefreshDraft: () => ({ handleRefreshWorkflowDraft: mockHandleRefreshWorkflowDraft, }), - useLeaderRestore: () => ({ - requestRestore: mockRequestRestore, - }), })) const createVersion = (overrides: Partial = {}): VersionHistory => ({ @@ -92,7 +90,7 @@ describe('HeaderInRestoring', () => { expect(screen.getByRole('button', { name: 'workflow.common.restore' })).toBeDisabled() }) - it('should enable restore when version and flow config are both ready', () => { + it('should enable restore when version and flow id are both ready', () => { renderWorkflowComponent(, { initialStoreState: { currentVersion: createVersion(), @@ -100,7 +98,7 @@ describe('HeaderInRestoring', () => { hooksStoreProps: { configsMap: { flowId: 'app-1', - flowType: FlowType.appFlow, + flowType: undefined as never, fileSettings: {} as never, }, }, diff --git a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx index 1ddf013f8d..19833b4fa7 100644 --- a/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx +++ b/web/app/components/workflow/header/__tests__/header-layouts.spec.tsx @@ -14,7 +14,11 @@ const mockHandleNodeSelect = vi.fn() const mockHandleRefreshWorkflowDraft = vi.fn() const mockCloseAllInputFieldPanels = vi.fn() const mockInvalidAllLastRun = vi.fn() -const mockRequestRestore = vi.fn() +const mockRestoreWorkflow = vi.fn() +const mockResetWorkflowVersionHistory = vi.fn() +const mockEmitRestoreIntent = vi.fn() +const mockEmitRestoreComplete = vi.fn() +const mockEmitWorkflowUpdate = vi.fn() const mockNotify = vi.fn() const mockRunAndHistory = vi.fn() const mockViewHistory = vi.fn() @@ -33,9 +37,6 @@ vi.mock('../../hooks', () => ({ handleBackupDraft: mockHandleBackupDraft, handleLoadBackupDraft: mockHandleLoadBackupDraft, }), - useLeaderRestore: () => ({ - requestRestore: mockRequestRestore, - }), useNodesSyncDraft: () => ({ handleSyncWorkflowDraft: vi.fn(), }), @@ -58,6 +59,18 @@ vi.mock('@/hooks/use-theme', () => ({ vi.mock('@/service/use-workflow', () => ({ useInvalidAllLastRun: () => mockInvalidAllLastRun, + useResetWorkflowVersionHistory: () => mockResetWorkflowVersionHistory, + useRestoreWorkflow: () => ({ + mutateAsync: mockRestoreWorkflow, + }), +})) + +vi.mock('../../collaboration/core/collaboration-manager', () => ({ + collaborationManager: { + emitRestoreIntent: mockEmitRestoreIntent, + emitRestoreComplete: mockEmitRestoreComplete, + emitWorkflowUpdate: mockEmitWorkflowUpdate, + }, })) vi.mock('@langgenius/dify-ui/toast', () => ({ @@ -166,13 +179,7 @@ describe('Header layout components', () => { mockNodesReadOnly = false mockTheme = 'light' mockUseNodes.mockReturnValue([]) - mockRequestRestore.mockImplementation((_payload: unknown, callbacks?: { - onSuccess?: () => void - onSettled?: () => void - }) => { - callbacks?.onSuccess?.() - callbacks?.onSettled?.() - }) + mockRestoreWorkflow.mockResolvedValue({}) }) describe('HeaderInNormal', () => { @@ -277,7 +284,7 @@ describe('Header layout components', () => { fireEvent.click(screen.getByRole('button', { name: 'workflow.common.restore' })) await waitFor(() => { - expect(mockRequestRestore).toHaveBeenCalledTimes(1) + expect(mockRestoreWorkflow).toHaveBeenCalledWith('/apps/flow-1/workflows/version-1/restore') expect(store.getState().showWorkflowVersionHistoryPanel).toBe(false) expect(store.getState().isRestoring).toBe(false) expect(store.getState().backupDraft).toBeUndefined() @@ -289,8 +296,53 @@ describe('Header layout components', () => { message: 'workflow.versionHistory.action.restoreSuccess', }) }) + expect(mockEmitRestoreIntent).toHaveBeenCalledWith({ + versionId: currentVersion.id, + versionName: currentVersion.marked_name, + initiatorUserId: '', + initiatorName: '', + }) + expect(mockEmitRestoreComplete).toHaveBeenCalledWith({ + versionId: currentVersion.id, + success: true, + }) + expect(mockEmitWorkflowUpdate).toHaveBeenCalledWith('flow-1') + expect(mockResetWorkflowVersionHistory).toHaveBeenCalledTimes(1) expect(onRestoreSettled).toHaveBeenCalledTimes(1) }) + + it('should restore rag pipeline versions without emitting collaboration events', async () => { + const currentVersion = createCurrentVersion() + + renderWorkflowComponent( + , + { + initialStoreState: { + isRestoring: true, + showWorkflowVersionHistoryPanel: true, + backupDraft: createBackupDraft(), + currentVersion, + }, + hooksStoreProps: { + configsMap: { + flowType: FlowType.ragPipeline, + flowId: 'pipeline-1', + fileSettings: {}, + }, + }, + }, + ) + + fireEvent.click(screen.getByRole('button', { name: 'workflow.common.restore' })) + + await waitFor(() => { + expect(mockRestoreWorkflow).toHaveBeenCalledWith('/rag/pipelines/pipeline-1/workflows/version-1/restore') + expect(mockHandleRefreshWorkflowDraft).toHaveBeenCalledTimes(1) + }) + expect(mockEmitRestoreIntent).not.toHaveBeenCalled() + expect(mockEmitRestoreComplete).not.toHaveBeenCalled() + expect(mockEmitWorkflowUpdate).not.toHaveBeenCalled() + }) }) describe('HeaderInHistory', () => { diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx index f07d28ff13..8ce061eb2a 100644 --- a/web/app/components/workflow/header/header-in-restoring.tsx +++ b/web/app/components/workflow/header/header-in-restoring.tsx @@ -6,12 +6,11 @@ import { useCallback, } from 'react' import { useTranslation } from 'react-i18next' -import { useFeaturesStore } from '@/app/components/base/features/hooks' import { useSelector as useAppContextSelector } from '@/context/app-context' import useTheme from '@/hooks/use-theme' -import { useInvalidAllLastRun } from '@/service/use-workflow' +import { useInvalidAllLastRun, useResetWorkflowVersionHistory, useRestoreWorkflow } from '@/service/use-workflow' +import { FlowType } from '@/types/common' import { - useLeaderRestore, useWorkflowRefreshDraft, useWorkflowRun, } from '../hooks' @@ -35,7 +34,6 @@ const HeaderInRestoring = ({ const { theme } = useTheme() const workflowStore = useWorkflowStore() const userProfile = useAppContextSelector(s => s.userProfile) - const featuresStore = useFeaturesStore() const configsMap = useHooksStore(s => s.configsMap) const invalidAllLastRun = useInvalidAllLastRun(configsMap?.flowType, configsMap?.flowId) const { @@ -47,9 +45,11 @@ const HeaderInRestoring = ({ const { handleLoadBackupDraft, } = useWorkflowRun() - const { requestRestore } = useLeaderRestore() const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft() + const { mutateAsync: restoreWorkflow } = useRestoreWorkflow() + const resetWorkflowVersionHistory = useResetWorkflowVersionHistory() const canRestore = !!currentVersion?.id && !!configsMap?.flowId && currentVersion.version !== WorkflowVersion.Draft + const canEmitCollaborationEvents = configsMap?.flowType === FlowType.appFlow const handleCancelRestore = useCallback(() => { handleLoadBackupDraft() @@ -57,47 +57,86 @@ const HeaderInRestoring = ({ setShowWorkflowVersionHistoryPanel(false) }, [workflowStore, handleLoadBackupDraft, setShowWorkflowVersionHistoryPanel]) - const handleRestore = useCallback(() => { + const restoreVersionUrl = useCallback((versionId: string) => { + if (!configsMap?.flowId) + return '' + if (configsMap.flowType === FlowType.ragPipeline) + return `/rag/pipelines/${configsMap.flowId}/workflows/${versionId}/restore` + return `/apps/${configsMap.flowId}/workflows/${versionId}/restore` + }, [configsMap?.flowId, configsMap?.flowType]) + + const emitRestoreIntent = useCallback(async () => { + if (!currentVersion || !canEmitCollaborationEvents) + return + try { + const { collaborationManager } = await import('../collaboration/core/collaboration-manager') + collaborationManager.emitRestoreIntent({ + versionId: currentVersion.id, + versionName: currentVersion.marked_name, + initiatorUserId: userProfile.id, + initiatorName: userProfile.name, + }) + } + catch (error) { + console.error('Failed to emit restore intent:', error) + } + }, [canEmitCollaborationEvents, currentVersion, userProfile.id, userProfile.name]) + + const emitRestoreComplete = useCallback(async (success: boolean, errorMessage?: string) => { + if (!currentVersion || !canEmitCollaborationEvents) + return + try { + const { collaborationManager } = await import('../collaboration/core/collaboration-manager') + collaborationManager.emitRestoreComplete({ + versionId: currentVersion.id, + success, + ...(errorMessage ? { error: errorMessage } : {}), + }) + } + catch (error) { + console.error('Failed to emit restore complete:', error) + } + }, [canEmitCollaborationEvents, currentVersion]) + + const emitWorkflowUpdate = useCallback(async () => { + if (!configsMap?.flowId || !canEmitCollaborationEvents) + return + try { + const { collaborationManager } = await import('../collaboration/core/collaboration-manager') + collaborationManager.emitWorkflowUpdate(configsMap.flowId) + } + catch (error) { + console.error('Failed to emit workflow update:', error) + } + }, [canEmitCollaborationEvents, configsMap?.flowId]) + + const handleRestore = useCallback(async () => { if (!canRestore || !currentVersion) return setShowWorkflowVersionHistoryPanel(false) - workflowStore.setState({ isRestoring: false }) - workflowStore.setState({ backupDraft: undefined }) + await emitRestoreIntent() - const { graph } = currentVersion - const features = featuresStore?.getState().features - const environmentVariables = currentVersion.environment_variables || [] - const conversationVariables = currentVersion.conversation_variables || [] - - requestRestore({ - versionId: currentVersion.id, - versionName: currentVersion.marked_name, - initiatorUserId: userProfile.id, - initiatorName: userProfile.name, - graphData: { - nodes: graph.nodes, - edges: graph.edges, - viewport: graph.viewport, - }, - features, - environmentVariables, - conversationVariables, - }, { - onSuccess: () => { - handleRefreshWorkflowDraft() - toast.success(t('versionHistory.action.restoreSuccess', { ns: 'workflow' })) - deleteAllInspectVars() - invalidAllLastRun() - }, - onError: () => { - toast.error(t('versionHistory.action.restoreFailure', { ns: 'workflow' })) - }, - onSettled: () => { - onRestoreSettled?.() - }, - }) - }, [canRestore, currentVersion, setShowWorkflowVersionHistoryPanel, workflowStore, featuresStore, requestRestore, userProfile, handleRefreshWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, onRestoreSettled]) + try { + await restoreWorkflow(restoreVersionUrl(currentVersion.id)) + workflowStore.setState({ isRestoring: false }) + workflowStore.setState({ backupDraft: undefined }) + handleRefreshWorkflowDraft() + toast.success(t('versionHistory.action.restoreSuccess', { ns: 'workflow' })) + deleteAllInspectVars() + invalidAllLastRun() + await emitRestoreComplete(true) + await emitWorkflowUpdate() + } + catch { + toast.error(t('versionHistory.action.restoreFailure', { ns: 'workflow' })) + await emitRestoreComplete(false, 'restore failed') + } + finally { + resetWorkflowVersionHistory() + onRestoreSettled?.() + } + }, [canRestore, currentVersion, setShowWorkflowVersionHistoryPanel, emitRestoreIntent, restoreWorkflow, restoreVersionUrl, workflowStore, handleRefreshWorkflowDraft, t, deleteAllInspectVars, invalidAllLastRun, emitRestoreComplete, emitWorkflowUpdate, resetWorkflowVersionHistory, onRestoreSettled]) return ( <> diff --git a/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts b/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts deleted file mode 100644 index b0fb43f768..0000000000 --- a/web/app/components/workflow/hooks/__tests__/use-leader-restore.spec.ts +++ /dev/null @@ -1,262 +0,0 @@ -import type { RestoreIntentData, RestoreRequestData } from '../../collaboration/types/collaboration' -import type { SyncDraftCallback } from '../../hooks-store/store' -import type { Edge, Node } from '../../types' -import { act, renderHook } from '@testing-library/react' -import { renderHookWithSystemFeatures } from '@/__tests__/utils/mock-system-features' -import { ChatVarType } from '../../panel/chat-variable-panel/type' -import { useLeaderRestore, useLeaderRestoreListener } from '../use-leader-restore' - -const mockSetViewport = vi.hoisted(() => vi.fn()) -const mockSetFeatures = vi.hoisted(() => vi.fn()) -const mockSetEnvironmentVariables = vi.hoisted(() => vi.fn()) -const mockSetConversationVariables = vi.hoisted(() => vi.fn()) -const mockDoSyncWorkflowDraft = vi.hoisted(() => vi.fn()) -const mockToastInfo = vi.hoisted(() => vi.fn()) - -const mockEmitRestoreIntent = vi.hoisted(() => vi.fn()) -const mockEmitRestoreComplete = vi.hoisted(() => vi.fn()) -const mockEmitWorkflowUpdate = vi.hoisted(() => vi.fn()) -const mockEmitRestoreRequest = vi.hoisted(() => vi.fn()) -const mockIsConnected = vi.hoisted(() => vi.fn()) -const mockGetIsLeader = vi.hoisted(() => vi.fn()) -const mockSetNodes = vi.hoisted(() => vi.fn()) -const mockSetEdges = vi.hoisted(() => vi.fn()) -const mockRefreshGraphSynchronously = vi.hoisted(() => vi.fn()) -const mockGetNodes = vi.hoisted(() => vi.fn(() => [{ id: 'old-node' } as unknown as Node])) -const mockGetEdges = vi.hoisted(() => vi.fn(() => [{ id: 'old-edge' } as unknown as Edge])) - -let restoreCompleteCallback: ((data: { versionId: string, success: boolean }) => void) | null = null -let restoreRequestCallback: ((data: RestoreRequestData) => void) | null = null -let restoreIntentCallback: ((data: RestoreIntentData) => void) | null = null - -const unsubscribeRestoreComplete = vi.hoisted(() => vi.fn()) -const unsubscribeRestoreRequest = vi.hoisted(() => vi.fn()) -const unsubscribeRestoreIntent = vi.hoisted(() => vi.fn()) - -let isCollaborationEnabled = true - -vi.mock('react-i18next', () => ({ - useTranslation: () => ({ - t: (key: string, options?: { ns?: string, userName?: string, versionName?: string }) => { - const ns = options?.ns ? `${options.ns}.` : '' - const extra = options?.userName ? `:${options.userName}:${options.versionName}` : '' - return `${ns}${key}${extra}` - }, - }), -})) - -vi.mock('reactflow', () => ({ - useReactFlow: () => ({ - setViewport: mockSetViewport, - }), -})) - -vi.mock('@/app/components/app/store', () => ({ - useStore: { - getState: () => ({ - appDetail: { id: 'app-1' }, - }), - }, -})) - -vi.mock('@/app/components/base/features/hooks', () => ({ - useFeaturesStore: () => ({ - getState: () => ({ - setFeatures: mockSetFeatures, - }), - }), -})) - -vi.mock('@langgenius/dify-ui/toast', () => ({ - toast: { - info: (...args: unknown[]) => mockToastInfo(...args), - }, -})) - -vi.mock('../../store', () => ({ - useWorkflowStore: () => ({ - getState: () => ({ - setEnvironmentVariables: mockSetEnvironmentVariables, - setConversationVariables: mockSetConversationVariables, - }), - }), -})) - -vi.mock('../use-nodes-sync-draft', () => ({ - useNodesSyncDraft: () => ({ - doSyncWorkflowDraft: (...args: unknown[]) => mockDoSyncWorkflowDraft(...args), - }), -})) - -vi.mock('../../collaboration/core/collaboration-manager', () => ({ - collaborationManager: { - emitRestoreIntent: (...args: unknown[]) => mockEmitRestoreIntent(...args), - emitRestoreComplete: (...args: unknown[]) => mockEmitRestoreComplete(...args), - emitWorkflowUpdate: (...args: unknown[]) => mockEmitWorkflowUpdate(...args), - emitRestoreRequest: (...args: unknown[]) => mockEmitRestoreRequest(...args), - isConnected: (...args: unknown[]) => mockIsConnected(...args), - getIsLeader: (...args: unknown[]) => mockGetIsLeader(...args), - setNodes: (...args: unknown[]) => mockSetNodes(...args), - setEdges: (...args: unknown[]) => mockSetEdges(...args), - refreshGraphSynchronously: (...args: unknown[]) => mockRefreshGraphSynchronously(...args), - getNodes: () => mockGetNodes(), - getEdges: () => mockGetEdges(), - onRestoreComplete: (callback: (data: { versionId: string, success: boolean }) => void) => { - restoreCompleteCallback = callback - return unsubscribeRestoreComplete - }, - onRestoreRequest: (callback: (data: RestoreRequestData) => void) => { - restoreRequestCallback = callback - return unsubscribeRestoreRequest - }, - onRestoreIntent: (callback: (data: RestoreIntentData) => void) => { - restoreIntentCallback = callback - return unsubscribeRestoreIntent - }, - }, -})) - -describe('useLeaderRestore', () => { - const restoreData: RestoreRequestData = { - versionId: 'v-1', - versionName: 'Version One', - initiatorUserId: 'u-1', - initiatorName: 'Alice', - features: { moreLikeThis: { enabled: true } }, - environmentVariables: [{ id: 'env-1', name: 'A', value: '1', value_type: ChatVarType.String, description: '' }], - conversationVariables: [{ id: 'conv-1', name: 'B', value: '2', value_type: ChatVarType.String, description: '' }], - graphData: { - nodes: [{ id: 'new-node' } as unknown as Node], - edges: [{ id: 'new-edge' } as unknown as Edge], - viewport: { x: 1, y: 2, zoom: 0.5 }, - }, - } - - beforeEach(() => { - vi.clearAllMocks() - restoreCompleteCallback = null - restoreRequestCallback = null - restoreIntentCallback = null - isCollaborationEnabled = true - mockIsConnected.mockReturnValue(true) - mockGetIsLeader.mockReturnValue(false) - mockDoSyncWorkflowDraft.mockImplementation((_sync: boolean, callbacks?: SyncDraftCallback) => { - callbacks?.onSuccess?.() - callbacks?.onSettled?.() - }) - }) - - it('performs restore locally when collaboration is disabled', async () => { - isCollaborationEnabled = false - const onSuccess = vi.fn() - const onSettled = vi.fn() - - const { result } = renderHookWithSystemFeatures(() => useLeaderRestore(), { - systemFeatures: { enable_collaboration_mode: isCollaborationEnabled }, - }) - - await act(async () => { - result.current.requestRestore(restoreData, { onSuccess, onSettled }) - }) - - expect(mockEmitRestoreIntent).toHaveBeenCalledWith(expect.objectContaining({ - versionId: 'v-1', - initiatorName: 'Alice', - })) - expect(mockSetFeatures).toHaveBeenCalledWith({ moreLikeThis: { enabled: true } }) - expect(mockSetEnvironmentVariables).toHaveBeenCalled() - expect(mockSetConversationVariables).toHaveBeenCalled() - expect(mockSetNodes).toHaveBeenCalledWith([{ id: 'old-node' }], [{ id: 'new-node' }], 'leader-restore:apply-graph') - expect(mockSetEdges).toHaveBeenCalledWith([{ id: 'old-edge' }], [{ id: 'new-edge' }]) - expect(mockRefreshGraphSynchronously).toHaveBeenCalled() - expect(mockSetViewport).toHaveBeenCalledWith({ x: 1, y: 2, zoom: 0.5 }) - expect(mockEmitRestoreComplete).toHaveBeenCalledWith({ versionId: 'v-1', success: true }) - expect(mockEmitWorkflowUpdate).toHaveBeenCalledWith('app-1') - expect(onSuccess).toHaveBeenCalled() - expect(onSettled).toHaveBeenCalled() - }) - - it('emits restore request and resolves callbacks from restore-complete events', async () => { - isCollaborationEnabled = true - mockIsConnected.mockReturnValue(true) - mockGetIsLeader.mockReturnValue(false) - const onSuccess = vi.fn() - const onError = vi.fn() - const onSettled = vi.fn() - - const { result } = renderHookWithSystemFeatures(() => useLeaderRestore(), { - systemFeatures: { enable_collaboration_mode: isCollaborationEnabled }, - }) - - act(() => { - result.current.requestRestore(restoreData, { onSuccess, onError, onSettled }) - }) - - expect(mockEmitRestoreRequest).toHaveBeenCalledWith(restoreData) - expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled() - - act(() => { - restoreCompleteCallback?.({ versionId: 'v-1', success: true }) - }) - expect(onSuccess).toHaveBeenCalledTimes(1) - expect(onSettled).toHaveBeenCalledTimes(1) - - act(() => { - result.current.requestRestore(restoreData, { onSuccess, onError, onSettled }) - restoreCompleteCallback?.({ versionId: 'v-1', success: false }) - }) - expect(onError).toHaveBeenCalledTimes(1) - expect(onSettled).toHaveBeenCalledTimes(2) - }) -}) - -describe('useLeaderRestoreListener', () => { - beforeEach(() => { - vi.clearAllMocks() - restoreRequestCallback = null - restoreIntentCallback = null - mockDoSyncWorkflowDraft.mockImplementation((_sync: boolean, callbacks?: SyncDraftCallback) => { - callbacks?.onSuccess?.() - callbacks?.onSettled?.() - }) - }) - - it('shows restore notifications for request and intent events', () => { - const { unmount } = renderHook(() => useLeaderRestoreListener()) - - act(() => { - restoreRequestCallback?.({ - ...{ - versionId: 'v-2', - versionName: 'Version Two', - initiatorUserId: 'u-2', - initiatorName: 'Bob', - graphData: { nodes: [], edges: [] }, - }, - }) - }) - - expect(mockToastInfo).toHaveBeenCalledWith( - 'workflow.versionHistory.action.restoreInProgress:Bob:Version Two', - { timeout: 3000 }, - ) - expect(mockEmitRestoreIntent).toHaveBeenCalled() - - act(() => { - restoreIntentCallback?.({ - versionId: 'v-3', - versionName: 'Version Three', - initiatorUserId: 'u-3', - initiatorName: 'Carol', - }) - }) - expect(mockToastInfo).toHaveBeenCalledWith( - 'workflow.versionHistory.action.restoreInProgress:Carol:Version Three', - { timeout: 3000 }, - ) - - unmount() - expect(unsubscribeRestoreRequest).toHaveBeenCalled() - expect(unsubscribeRestoreIntent).toHaveBeenCalled() - }) -}) diff --git a/web/app/components/workflow/hooks/index.ts b/web/app/components/workflow/hooks/index.ts index e0e24ef994..8dc5def829 100644 --- a/web/app/components/workflow/hooks/index.ts +++ b/web/app/components/workflow/hooks/index.ts @@ -4,7 +4,6 @@ export * from './use-checklist' export * from './use-DSL' export * from './use-edges-interactions' export * from './use-inspect-vars-crud' -export * from './use-leader-restore' export * from './use-node-data-update' export * from './use-nodes-interactions' export * from './use-nodes-meta-data' diff --git a/web/app/components/workflow/hooks/use-leader-restore.ts b/web/app/components/workflow/hooks/use-leader-restore.ts deleted file mode 100644 index 9083767f40..0000000000 --- a/web/app/components/workflow/hooks/use-leader-restore.ts +++ /dev/null @@ -1,164 +0,0 @@ -import type { RestoreCompleteData, RestoreIntentData, RestoreRequestData } from '../collaboration/types/collaboration' -import type { SyncCallback } from './use-nodes-sync-draft' -import { toast } from '@langgenius/dify-ui/toast' -import { useSuspenseQuery } from '@tanstack/react-query' -import { useCallback, useEffect, useRef } from 'react' -import { useTranslation } from 'react-i18next' -import { useReactFlow } from 'reactflow' -import { useStore as useAppStore } from '@/app/components/app/store' -import { useFeaturesStore } from '@/app/components/base/features/hooks' -import { systemFeaturesQueryOptions } from '@/service/system-features' -import { collaborationManager } from '../collaboration/core/collaboration-manager' -import { useWorkflowStore } from '../store' -import { useNodesSyncDraft } from './use-nodes-sync-draft' - -type RestoreCallbacks = SyncCallback - -const usePerformRestore = () => { - const { doSyncWorkflowDraft } = useNodesSyncDraft() - const appDetail = useAppStore.getState().appDetail - const featuresStore = useFeaturesStore() - const workflowStore = useWorkflowStore() - const reactflow = useReactFlow() - - return useCallback((data: RestoreRequestData, callbacks?: RestoreCallbacks) => { - collaborationManager.emitRestoreIntent({ - versionId: data.versionId, - versionName: data.versionName, - initiatorUserId: data.initiatorUserId, - initiatorName: data.initiatorName, - }) - - if (data.features && featuresStore) { - const { setFeatures } = featuresStore.getState() - setFeatures(data.features) - } - - if (data.environmentVariables) { - workflowStore.getState().setEnvironmentVariables(data.environmentVariables) - } - - if (data.conversationVariables) { - workflowStore.getState().setConversationVariables(data.conversationVariables) - } - - const { nodes, edges, viewport } = data.graphData - const currentNodes = collaborationManager.getNodes() - const currentEdges = collaborationManager.getEdges() - - collaborationManager.setNodes(currentNodes, nodes, 'leader-restore:apply-graph') - collaborationManager.setEdges(currentEdges, edges) - collaborationManager.refreshGraphSynchronously() - - if (viewport) - reactflow.setViewport(viewport) - - doSyncWorkflowDraft(false, { - onSuccess: () => { - collaborationManager.emitRestoreComplete({ - versionId: data.versionId, - success: true, - }) - - if (appDetail) - collaborationManager.emitWorkflowUpdate(appDetail.id) - - callbacks?.onSuccess?.() - }, - onError: () => { - collaborationManager.emitRestoreComplete({ - versionId: data.versionId, - success: false, - error: 'Failed to sync restore to server', - }) - callbacks?.onError?.() - }, - onSettled: () => { - callbacks?.onSettled?.() - }, - }) - }, [appDetail, doSyncWorkflowDraft, featuresStore, reactflow, workflowStore]) -} - -export const useLeaderRestoreListener = () => { - const { t } = useTranslation() - const performRestore = usePerformRestore() - - useEffect(() => { - const unsubscribe = collaborationManager.onRestoreRequest((data: RestoreRequestData) => { - toast.info(t('versionHistory.action.restoreInProgress', { - ns: 'workflow', - userName: data.initiatorName, - versionName: data.versionName || data.versionId, - }), { timeout: 3000 }) - performRestore(data) - }) - - return unsubscribe - }, [performRestore, t]) - - useEffect(() => { - const unsubscribe = collaborationManager.onRestoreIntent((data: RestoreIntentData) => { - toast.info(t('versionHistory.action.restoreInProgress', { - ns: 'workflow', - userName: data.initiatorName, - versionName: data.versionName || data.versionId, - }), { timeout: 3000 }) - }) - - return unsubscribe - }, [t]) -} - -export const useLeaderRestore = () => { - const performRestore = usePerformRestore() - const pendingCallbacksRef = useRef<{ - versionId: string - callbacks: RestoreCallbacks | null - } | null>(null) - const { data: isCollaborationEnabled } = useSuspenseQuery({ - ...systemFeaturesQueryOptions(), - select: s => s.enable_collaboration_mode, - }) - - const requestRestore = useCallback((data: RestoreRequestData, callbacks?: RestoreCallbacks) => { - if (!isCollaborationEnabled || !collaborationManager.isConnected() || collaborationManager.getIsLeader()) { - performRestore(data, callbacks) - return - } - - pendingCallbacksRef.current = { - versionId: data.versionId, - callbacks: callbacks || null, - } - collaborationManager.emitRestoreRequest(data) - }, [isCollaborationEnabled, performRestore]) - - useEffect(() => { - const unsubscribe = collaborationManager.onRestoreComplete((data: RestoreCompleteData) => { - const pending = pendingCallbacksRef.current - if (!pending || pending.versionId !== data.versionId) - return - - const callbacks = pending.callbacks - if (!callbacks) { - pendingCallbacksRef.current = null - return - } - - if (data.success) - callbacks.onSuccess?.() - else - callbacks.onError?.() - - callbacks.onSettled?.() - pendingCallbacksRef.current = null - }) - - return unsubscribe - }, []) - - return { - requestRestore, - } -} diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx index 8598904cb7..b10e168c25 100644 --- a/web/app/components/workflow/index.tsx +++ b/web/app/components/workflow/index.tsx @@ -81,7 +81,6 @@ import EdgeContextmenu from './edge-contextmenu' import HelpLine from './help-line' import { useEdgesInteractions, - useLeaderRestoreListener, useNodesInteractions, useNodesReadOnly, useNodesSyncDraft, @@ -277,6 +276,17 @@ export const Workflow: FC = memo(({ toast.info(t('collaboration.historyAction.generic', { ns: 'workflow' })) }) }, [t]) + + useEffect(() => { + return collaborationManager.onRestoreIntent((data) => { + toast.info(t('versionHistory.action.restoreInProgress', { + ns: 'workflow', + userName: data.initiatorName, + versionName: data.versionName || data.versionId, + }), { timeout: 3000 }) + }) + }, [t]) + const { handleSyncWorkflowDraft, syncWorkflowDraftWhenPageClose, @@ -533,8 +543,6 @@ export const Workflow: FC = memo(({ // Initialize workflow node search functionality useWorkflowSearch() - useLeaderRestoreListener() - // Set up scroll to node event listener using the utility function useEffect(() => { return setupScrollToNodeListener(nodes, reactflow) From 70eb98d6c5f405d57e5f2fdec20f70e59f928bf5 Mon Sep 17 00:00:00 2001 From: Brandon Date: Tue, 5 May 2026 23:03:22 -0400 Subject: [PATCH 4/5] fix(file_factory): drop doubled dot when standardizing datasource file extension (#35808) Co-authored-by: Beandon13 --- api/factories/file_factory/builders.py | 2 +- .../unit_tests/factories/test_file_factory.py | 92 +++++++++++++++++++ 2 files changed, 93 insertions(+), 1 deletion(-) diff --git a/api/factories/file_factory/builders.py b/api/factories/file_factory/builders.py index 1d2ad4d445..4fb976f0e7 100644 --- a/api/factories/file_factory/builders.py +++ b/api/factories/file_factory/builders.py @@ -298,7 +298,7 @@ def _build_from_datasource_file( raise ValueError(f"DatasourceFile {mapping.get('datasource_file_id')} not found") extension = "." + datasource_file.key.split(".")[-1] if "." in datasource_file.key else ".bin" - detected_file_type = standardize_file_type(extension="." + extension, mime_type=datasource_file.mime_type) + detected_file_type = standardize_file_type(extension=extension, mime_type=datasource_file.mime_type) file_type = _resolve_file_type( detected_file_type=detected_file_type, specified_type=mapping.get("type"), diff --git a/api/tests/unit_tests/factories/test_file_factory.py b/api/tests/unit_tests/factories/test_file_factory.py index c2835c4124..293be925ae 100644 --- a/api/tests/unit_tests/factories/test_file_factory.py +++ b/api/tests/unit_tests/factories/test_file_factory.py @@ -1,8 +1,11 @@ import re +from unittest.mock import MagicMock import pytest +from factories.file_factory import builders from factories.file_factory.remote import extract_filename, get_remote_file_info +from graphon.file import FileTransferMethod class _FakeResponse: @@ -291,3 +294,92 @@ class TestExtractFilename: """Test bare path (not full URL) with query string.""" result = extract_filename("/path/to/file.txt?extra=params", None) assert result == "file.txt" + + +class TestBuildFromDatasourceFile: + """Tests for _build_from_datasource_file extension handling.""" + + @staticmethod + def _patch_session(monkeypatch: pytest.MonkeyPatch, datasource_file): + """Stub session_factory.create_session() so it returns the given UploadFile-shaped record.""" + session = MagicMock() + session.scalar.return_value = datasource_file + ctx = MagicMock() + ctx.__enter__ = MagicMock(return_value=session) + ctx.__exit__ = MagicMock(return_value=False) + monkeypatch.setattr(builders.session_factory, "create_session", lambda: ctx) + + def _make_datasource_file(self, *, key: str, mime_type: str = "text/csv"): + f = MagicMock() + f.id = "file-id" + f.key = key + f.name = key.split("/")[-1] + f.mime_type = mime_type + f.size = 123 + f.source_url = f"https://example.com/{key}" + return f + + def test_extension_passed_without_doubled_dot(self, monkeypatch: pytest.MonkeyPatch): + """Regression: standardize_file_type must receive the extension exactly once-prefixed. + + Previously the call was ``standardize_file_type(extension="." + extension, ...)`` while + ``extension`` already had a leading dot, producing ``"..csv"``. The mitigating + ``lstrip(".")`` inside ``standardize_file_type`` masked the bug from end users, but the + argument shape itself was wrong and showed up in any caller that didn't strip dots. + """ + captured: dict = {} + + def fake_standardize(*, extension: str = "", mime_type: str = ""): + from graphon.file import FileType + + captured["extension"] = extension + captured["mime_type"] = mime_type + return FileType.DOCUMENT + + monkeypatch.setattr(builders, "standardize_file_type", fake_standardize) + + datasource_file = self._make_datasource_file(key="folder/data.csv", mime_type="text/csv") + self._patch_session(monkeypatch, datasource_file) + + access_controller = MagicMock() + access_controller.apply_upload_file_filters = lambda stmt: stmt + + file = builders._build_from_datasource_file( + mapping={"datasource_file_id": "file-id", "transfer_method": "datasource_file"}, + tenant_id="tenant-id", + transfer_method=FileTransferMethod.DATASOURCE_FILE, + access_controller=access_controller, + ) + + assert captured["extension"] == ".csv", ( + f"standardize_file_type received {captured['extension']!r}; expected single-dot '.csv'" + ) + assert captured["mime_type"] == "text/csv" + assert file.extension == ".csv" + + def test_extension_falls_back_to_bin_when_key_has_no_dot(self, monkeypatch: pytest.MonkeyPatch): + captured: dict = {} + + def fake_standardize(*, extension: str = "", mime_type: str = ""): + from graphon.file import FileType + + captured["extension"] = extension + return FileType.CUSTOM + + monkeypatch.setattr(builders, "standardize_file_type", fake_standardize) + + datasource_file = self._make_datasource_file(key="dotless-key", mime_type="application/octet-stream") + self._patch_session(monkeypatch, datasource_file) + + access_controller = MagicMock() + access_controller.apply_upload_file_filters = lambda stmt: stmt + + file = builders._build_from_datasource_file( + mapping={"datasource_file_id": "file-id", "transfer_method": "datasource_file"}, + tenant_id="tenant-id", + transfer_method=FileTransferMethod.DATASOURCE_FILE, + access_controller=access_controller, + ) + + assert captured["extension"] == ".bin" + assert file.extension == ".bin" From b2dacf0718a04ee9d18c485efe777b6ee725a281 Mon Sep 17 00:00:00 2001 From: yyh <92089059+lyzno1@users.noreply.github.com> Date: Wed, 6 May 2026 12:28:11 +0800 Subject: [PATCH 5/5] chore(tailwind-css): migrate to css first (#35754) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> --- eslint-suppressions.json | 8 - packages/dify-ui/.storybook/storybook.css | 5 +- packages/dify-ui/AGENTS.md | 4 +- packages/dify-ui/README.md | 20 +- packages/dify-ui/package.json | 4 - packages/dify-ui/src/placement.ts | 22 +- packages/dify-ui/src/plugins/icons.ts | 10 + packages/dify-ui/src/popover/index.tsx | 1 + packages/dify-ui/src/styles/styles.css | 86 ++ packages/dify-ui/src/tailwind-preset.ts | 87 -- packages/dify-ui/src/themes/dark.css | 64 +- packages/dify-ui/src/themes/light.css | 52 +- .../src/themes/tailwind-theme-var-define.ts | 816 ------------------ packages/dify-ui/src/themes/theme.css | 772 +++++++++++++++++ packages/dify-ui/tailwind.config.ts | 23 - packages/dify-ui/tsconfig.json | 2 +- web/.storybook/preview.tsx | 1 - web/.storybook/storybook.css | 13 + web/__tests__/real-browser-flicker.test.tsx | 1 - .../model-provider-page/model-modal/Form.tsx | 78 +- .../model-modal/__tests__/Form.spec.tsx | 4 + .../__tests__/workflow-edge-events.spec.tsx | 1 - web/app/components/workflow/index.tsx | 2 +- .../__tests__/details.spec.tsx | 5 + .../context-menu-content.tsx | 4 +- .../node-actions-menu/dropdown-content.tsx | 4 +- .../workflow/node-actions-menu/shared.tsx | 1 + .../components/class-list.tsx | 8 +- web/app/layout.tsx | 1 - web/app/styles/globals.css | 89 +- web/app/styles/monaco-sticky-fix.css | 12 +- web/app/styles/plugins/icons.ts | 21 + .../styles/plugins/typography-config.js} | 0 web/app/styles/plugins/typography.ts | 17 + web/app/styles/tailwind-core.css | 141 +++ web/tailwind-common-config.ts | 91 -- web/tailwind.config.ts | 18 - web/themes/manual-dark.css | 7 + 38 files changed, 1190 insertions(+), 1305 deletions(-) create mode 100644 packages/dify-ui/src/plugins/icons.ts delete mode 100644 packages/dify-ui/src/tailwind-preset.ts delete mode 100644 packages/dify-ui/src/themes/tailwind-theme-var-define.ts create mode 100644 packages/dify-ui/src/themes/theme.css delete mode 100644 packages/dify-ui/tailwind.config.ts create mode 100644 web/app/styles/plugins/icons.ts rename web/{typography.js => app/styles/plugins/typography-config.js} (100%) create mode 100644 web/app/styles/plugins/typography.ts create mode 100644 web/app/styles/tailwind-core.css delete mode 100644 web/tailwind-common-config.ts delete mode 100644 web/tailwind.config.ts diff --git a/eslint-suppressions.json b/eslint-suppressions.json index 258584c7f3..fd915d809d 100644 --- a/eslint-suppressions.json +++ b/eslint-suppressions.json @@ -2734,14 +2734,6 @@ "count": 3 } }, - "web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx": { - "no-restricted-imports": { - "count": 1 - }, - "ts/no-explicit-any": { - "count": 6 - } - }, "web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx": { "unicorn/prefer-number-properties": { "count": 2 diff --git a/packages/dify-ui/.storybook/storybook.css b/packages/dify-ui/.storybook/storybook.css index e9796fd046..ca76cd2968 100644 --- a/packages/dify-ui/.storybook/storybook.css +++ b/packages/dify-ui/.storybook/storybook.css @@ -1,6 +1,9 @@ @import 'tailwindcss'; -@config '../tailwind.config.ts'; +@plugin '../src/plugins/icons.ts'; + +@source '../src'; +@source '../.storybook'; @import '../src/styles/styles.css'; diff --git a/packages/dify-ui/AGENTS.md b/packages/dify-ui/AGENTS.md index 4a7fe2f22a..d8a59b7a0b 100644 --- a/packages/dify-ui/AGENTS.md +++ b/packages/dify-ui/AGENTS.md @@ -1,6 +1,6 @@ # @langgenius/dify-ui -Shared design tokens, the `cn()` utility, a Tailwind CSS preset, and headless primitive components consumed by `web/`. +Shared design tokens, the `cn()` utility, CSS-first Tailwind styles, and headless primitive components consumed by `web/`. ## Component Authoring Rules @@ -51,7 +51,7 @@ The Figma design system uses `--radius/*` tokens whose scale is **offset by one ### Rules -- **Do not** add custom `borderRadius` values to `tailwind-preset.ts`. We use Tailwind v4 defaults and arbitrary values (`rounded-[Npx]`) for sizes without a standard equivalent. +- **Do not** add custom `borderRadius` theme values. We use Tailwind v4 defaults and arbitrary values (`rounded-[Npx]`) for sizes without a standard equivalent. - **Do not** use `radius-*` as CSS class names. The old `@utility radius-*` definitions have been removed. - When the Figma MCP returns `rounded-[var(--radius/sm, 6px)]`, convert it to the standard Tailwind class from the table above (e.g. `rounded-md`). - For values without a standard Tailwind equivalent (10px, 20px, 28px), use arbitrary values like `rounded-[10px]`. diff --git a/packages/dify-ui/README.md b/packages/dify-ui/README.md index cd9485c400..cd24a0c078 100644 --- a/packages/dify-ui/README.md +++ b/packages/dify-ui/README.md @@ -1,6 +1,6 @@ # @langgenius/dify-ui -Shared UI primitives, design tokens, Tailwind preset, and the `cn()` utility consumed by Dify's `web/` app. +Shared UI primitives, design tokens, CSS-first Tailwind styles, and the `cn()` utility consumed by Dify's `web/` app. The primitives are thin, opinionated wrappers around [Base UI] headless components, styled with `cva` + `cn` and Dify design tokens. @@ -46,8 +46,22 @@ Importing from `@langgenius/dify-ui` (no subpath) is intentionally not supported Utilities: - `./cn` — `clsx` + `tailwind-merge` wrapper. Use this for conditional class composition. -- `./tailwind-preset` — Tailwind v4 preset with Dify tokens. Apps extend it from their own `tailwind.config.ts`. -- `./styles.css` — the one CSS entry that ships the design tokens, theme variables, and base reset. Import it once from the app root. +- `./styles.css` — the one CSS entry that ships the design tokens, theme variables, and project utilities/components. Import it once from the app root. + +## Tailwind CSS v4 integration + +This package uses Tailwind CSS v4's CSS-first configuration model. Consumers should import Tailwind from their own root stylesheet, then import this package's CSS entry: + +```css +@import 'tailwindcss'; +@import '@langgenius/dify-ui/styles.css'; +``` + +If a consumer uses Dify UI source files through the workspace, add an explicit source so Tailwind can detect utility classes: + +```css +@source '../packages/dify-ui/src'; +``` ## Overlay & portal contract diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json index 483db46986..73c6c0bd22 100644 --- a/packages/dify-ui/package.json +++ b/packages/dify-ui/package.json @@ -5,10 +5,6 @@ "private": true, "exports": { "./styles.css": "./src/styles/styles.css", - "./tailwind-preset": { - "types": "./src/tailwind-preset.ts", - "import": "./src/tailwind-preset.ts" - }, "./cn": { "types": "./src/cn.ts", "import": "./src/cn.ts" diff --git a/packages/dify-ui/src/placement.ts b/packages/dify-ui/src/placement.ts index 95f233fd56..bf5534c92d 100644 --- a/packages/dify-ui/src/placement.ts +++ b/packages/dify-ui/src/placement.ts @@ -19,11 +19,21 @@ export type Placement | 'left-start' | 'left-end' -export function parsePlacement(placement: Placement): { side: Side, align: Align } { - const [side, align] = placement.split('-') as [Side, Align | undefined] +const PLACEMENT_PARTS = { + 'top': { side: 'top', align: 'center' }, + 'top-start': { side: 'top', align: 'start' }, + 'top-end': { side: 'top', align: 'end' }, + 'right': { side: 'right', align: 'center' }, + 'right-start': { side: 'right', align: 'start' }, + 'right-end': { side: 'right', align: 'end' }, + 'bottom': { side: 'bottom', align: 'center' }, + 'bottom-start': { side: 'bottom', align: 'start' }, + 'bottom-end': { side: 'bottom', align: 'end' }, + 'left': { side: 'left', align: 'center' }, + 'left-start': { side: 'left', align: 'start' }, + 'left-end': { side: 'left', align: 'end' }, +} satisfies Record - return { - side, - align: align ?? 'center', - } +export function parsePlacement(placement: Placement): { side: Side, align: Align } { + return PLACEMENT_PARTS[placement] } diff --git a/packages/dify-ui/src/plugins/icons.ts b/packages/dify-ui/src/plugins/icons.ts new file mode 100644 index 0000000000..e2d678c78f --- /dev/null +++ b/packages/dify-ui/src/plugins/icons.ts @@ -0,0 +1,10 @@ +import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons' + +export default iconsPlugin({ + collections: getIconCollections(['ri']), + extraProperties: { + width: '1rem', + height: '1rem', + display: 'block', + }, +}) diff --git a/packages/dify-ui/src/popover/index.tsx b/packages/dify-ui/src/popover/index.tsx index f6fcd5ed43..3fc9f98f9a 100644 --- a/packages/dify-ui/src/popover/index.tsx +++ b/packages/dify-ui/src/popover/index.tsx @@ -13,6 +13,7 @@ export const PopoverTrigger = BasePopover.Trigger export const PopoverClose = BasePopover.Close export const PopoverTitle = BasePopover.Title export const PopoverDescription = BasePopover.Description +export const createPopoverHandle = BasePopover.createHandle type PopoverContentProps = { children: ReactNode diff --git a/packages/dify-ui/src/styles/styles.css b/packages/dify-ui/src/styles/styles.css index fb410b2d5f..e2403d308a 100644 --- a/packages/dify-ui/src/styles/styles.css +++ b/packages/dify-ui/src/styles/styles.css @@ -1,4 +1,90 @@ +/* + * @langgenius/dify-ui — Tailwind CSS v4 preset (CSS-first). + * + * This is the single CSS entry point for consumers: + * @import '@langgenius/dify-ui/styles.css'; + * + * Consumers must also `@import 'tailwindcss';` (or selected layers) in their + * own root stylesheet so that the engine generates utilities. This file only + * contributes design tokens, runtime CSS variables, and project utilities. + */ + +/* ---------- Palette overrides ----------------------------------------- */ +/* Override Tailwind v4's oklch defaults with the Dify brand palette so that + * `bg-gray-500`, `text-primary-600`, etc. resolve to the design system. */ +@theme { + /* gray */ + --color-gray-25: #fcfcfd; + --color-gray-50: #f9fafb; + --color-gray-100: #f2f4f7; + --color-gray-200: #eaecf0; + --color-gray-300: #d0d5dd; + --color-gray-400: #98a2b3; + --color-gray-500: #667085; + --color-gray-600: #344054; + --color-gray-700: #475467; + --color-gray-800: #1d2939; + --color-gray-900: #101828; + + /* primary */ + --color-primary-25: #f5f8ff; + --color-primary-50: #eff4ff; + --color-primary-100: #d1e0ff; + --color-primary-200: #b2ccff; + --color-primary-300: #84adff; + --color-primary-400: #528bff; + --color-primary-500: #2970ff; + --color-primary-600: #155eef; + --color-primary-700: #004eeb; + --color-primary-800: #0040c1; + --color-primary-900: #00359e; + + /* blue / green / yellow / purple — narrow overrides used by legacy markup */ + --color-blue-500: #e1effe; + --color-green-50: #f3faf7; + --color-green-100: #def7ec; + --color-green-800: #03543f; + --color-yellow-100: #fdf6b2; + --color-yellow-800: #723b13; + --color-purple-50: #f6f5ff; + --color-purple-200: #dcd7fe; + + /* indigo */ + --color-indigo-25: #f5f8ff; + --color-indigo-50: #eef4ff; + --color-indigo-100: #e0eaff; + --color-indigo-300: #a4bcfd; + --color-indigo-400: #8098f9; + --color-indigo-600: #444ce7; + --color-indigo-800: #2d31a6; + + /* shadows */ + --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); + --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10); + --shadow-sm-no-bottom: 0px -1px 2px 0px rgba(16, 24, 40, 0.06), 0px -1px 3px 0px rgba(16, 24, 40, 0.10); + --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10); + --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08); + --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08); + --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); + --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14); + --shadow-status-indicator-green-shadow: 0px 2px 6px 0px var(--color-components-badge-status-light-success-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + --shadow-status-indicator-warning-shadow: 0px 2px 6px 0px var(--color-components-badge-status-light-warning-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + --shadow-status-indicator-red-shadow: 0px 2px 6px 0px var(--color-components-badge-status-light-error-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + --shadow-status-indicator-blue-shadow: 0px 2px 6px 0px var(--color-components-badge-status-light-normal-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + --shadow-status-indicator-gray-shadow: 0px 1px 2px 0px var(--color-components-badge-status-light-disabled-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + + /* font sizes */ + --text-2xs: 0.625rem; +} + +/* ---------- Semantic design tokens (`@theme inline`) ------------------ */ +@import '../themes/theme.css'; + +/* ---------- Runtime variable values ----------------------------------- */ +/* Real values for the semantic tokens above, scoped per `html[data-theme]`. */ @import '../themes/light.css' layer(base); @import '../themes/dark.css' layer(base); + +/* ---------- Project utilities & components ---------------------------- */ @import './utilities.css'; @import './components.css'; diff --git a/packages/dify-ui/src/tailwind-preset.ts b/packages/dify-ui/src/tailwind-preset.ts deleted file mode 100644 index 2dbf4781b0..0000000000 --- a/packages/dify-ui/src/tailwind-preset.ts +++ /dev/null @@ -1,87 +0,0 @@ -import tailwindThemeVarDefine from './themes/tailwind-theme-var-define' - -const difyUIPreset = { - theme: { - extend: { - colors: { - gray: { - 25: '#fcfcfd', - 50: '#f9fafb', - 100: '#f2f4f7', - 200: '#eaecf0', - 300: '#d0d5dd', - 400: '#98a2b3', - 500: '#667085', - 600: '#344054', - 700: '#475467', - 800: '#1d2939', - 900: '#101828', - }, - primary: { - 25: '#f5f8ff', - 50: '#eff4ff', - 100: '#d1e0ff', - 200: '#b2ccff', - 300: '#84adff', - 400: '#528bff', - 500: '#2970ff', - 600: '#155eef', - 700: '#004eeb', - 800: '#0040c1', - 900: '#00359e', - }, - blue: { - 500: '#E1EFFE', - }, - green: { - 50: '#F3FAF7', - 100: '#DEF7EC', - 800: '#03543F', - }, - yellow: { - 100: '#FDF6B2', - 800: '#723B13', - }, - purple: { - 50: '#F6F5FF', - 200: '#DCD7FE', - }, - indigo: { - 25: '#F5F8FF', - 50: '#EEF4FF', - 100: '#E0EAFF', - 300: '#A4BCFD', - 400: '#8098F9', - 600: '#444CE7', - 800: '#2D31A6', - }, - ...tailwindThemeVarDefine, - }, - boxShadow: { - 'xs': '0px 1px 2px 0px rgba(16, 24, 40, 0.05)', - 'sm': '0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)', - 'sm-no-bottom': '0px -1px 2px 0px rgba(16, 24, 40, 0.06), 0px -1px 3px 0px rgba(16, 24, 40, 0.10)', - 'md': '0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10)', - 'lg': '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)', - 'xl': '0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)', - '2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)', - '3xl': '0px 32px 64px -12px rgba(16, 24, 40, 0.14)', - 'status-indicator-green-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-success-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - 'status-indicator-warning-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-warning-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - 'status-indicator-red-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-error-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - 'status-indicator-blue-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-normal-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - 'status-indicator-gray-shadow': '0px 1px 2px 0px var(--color-components-badge-status-light-disabled-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - }, - opacity: { - 2: '0.02', - 8: '0.08', - }, - fontSize: { - '2xs': '0.625rem', - }, - }, - }, - plugins: [], -} - -export default difyUIPreset diff --git a/packages/dify-ui/src/themes/dark.css b/packages/dify-ui/src/themes/dark.css index 59c9811412..4c005983ef 100644 --- a/packages/dify-ui/src/themes/dark.css +++ b/packages/dify-ui/src/themes/dark.css @@ -6,18 +6,6 @@ html[data-theme="dark"] { --color-components-input-bg-active: rgb(255 255 255 / 0.05); --color-components-input-border-active: #747481; --color-components-input-border-destructive: #f97066; - - /* Sticky header / Monaco editor sticky scroll colors (dark mode) */ - /* Use solid panel background to ensure visibility when elements become sticky */ - --color-components-sticky-header-bg: var(--color-components-panel-bg); - --color-components-sticky-header-bg-hover: var(--color-components-panel-on-panel-item-bg-hover); - --color-components-sticky-header-border: var(--color-components-panel-border); - - /* Override Monaco/VSCode CSS variables for sticky scroll so the sticky header is opaque */ - --vscode-editorStickyScroll-background: var(--color-components-sticky-header-bg); - --vscode-editorStickyScrollHover-background: var(--color-components-sticky-header-bg-hover); - --vscode-editorStickyScroll-border: var(--color-components-sticky-header-border); - --vscode-editorStickyScroll-shadow: rgba(0, 0, 0, 0.6); --color-components-input-text-filled: #f4f4f5; --color-components-input-bg-destructive: rgb(255 255 255 / 0.01); --color-components-input-bg-disabled: rgb(255 255 255 / 0.03); @@ -101,17 +89,6 @@ html[data-theme="dark"] { --color-components-button-indigo-bg-hover: #6172f3; --color-components-button-indigo-bg-disabled: rgb(255 255 255 / 0.03); - --color-components-button-debug-text: rgb(255 255 255 / 0.95); - --color-components-button-debug-text-disabled: rgb(255 255 255 / 0.2); - --color-components-button-debug-bg: #ff4405; - --color-components-button-debug-bg-hover: #ff692e; - --color-components-button-debug-bg-disabled: rgb(255 68 5 / 0.08); - --color-components-button-debug-border: rgb(255 255 255 / 0.12); - --color-components-button-debug-border-hover: rgb(255 255 255 / 0.2); - --color-components-button-debug-border-disabled: rgb(255 255 255 / 0.08); - - --color-components-button-button-seam: rgb(0 0 0 / 0.15); - --color-components-checkbox-icon: rgb(255 255 255 / 0.95); --color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.2); --color-components-checkbox-bg: #296dff; @@ -172,7 +149,6 @@ html[data-theme="dark"] { --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(255 251 250 / 0); --color-components-panel-bg-transparent: rgb(34 34 37 / 0); - --color-components-panel-bg-blur-burn: rgb(31 31 35 / 0.9); --color-components-main-nav-nav-button-text: rgb(200 206 218 / 0.6); --color-components-main-nav-nav-button-text-active: #f4f4f5; @@ -183,26 +159,6 @@ html[data-theme="dark"] { --color-components-main-nav-nav-user-border: rgb(255 255 255 / 0.05); - --color-components-main-nav-text: #a8a8b3; - --color-components-main-nav-text-active: #ffffff; - --color-components-main-nav-glass-edge-highlight-first: rgb(196 207 255 / 0.15); - --color-components-main-nav-glass-edge-highlight-middle: rgb(72 108 255 / 0); - --color-components-main-nav-glass-edge-highlight-end: rgb(196 207 255 / 0.05); - - --color-components-main-nav-glass-edge-reflection-first: rgb(92 124 255 / 0); - --color-components-main-nav-glass-edge-reflection-middle: rgb(210 219 255 / 0.8); - --color-components-main-nav-glass-edge-reflection-end: rgb(92 124 255 / 0); - - --color-components-main-nav-glass-surface-first: rgb(196 207 255 / 0.08); - --color-components-main-nav-glass-surface-middle-1: rgb(210 219 255 / 0.12); - --color-components-main-nav-glass-surface-middle-2: rgb(210 219 255 / 0.1); - --color-components-main-nav-glass-surface-end: rgb(196 207 255 / 0.08); - - --color-components-main-nav-glass-inner-glow: rgb(210 219 255 / 0.05); - --color-components-main-nav-glass-shadow-reflection: rgb(210 219 255 / 0.04); - --color-components-main-nav-glass-shadow-reflection-glow: rgb(255 255 255 / 0.02); - --color-components-main-nav-glass-text-glow: rgb(245 246 255 / 0.27); - --color-components-slider-knob: #f4f4f5; --color-components-slider-knob-hover: #fefefe; --color-components-slider-knob-disabled: rgb(255 255 255 / 0.2); @@ -401,8 +357,6 @@ html[data-theme="dark"] { --color-components-icon-bg-orange-solid: #f79009; --color-components-icon-bg-orange-soft: rgb(247 144 9 / 0.2); - --color-components-marketplace-header-bg: rgb(31 31 35 / 0.9); - --color-text-primary: #fbfbfc; --color-text-secondary: #d9d9de; --color-text-tertiary: rgb(200 206 218 / 0.6); @@ -464,7 +418,6 @@ html[data-theme="dark"] { --color-background-overlay-backdrop: rgb(24 24 27 / 0.95); --color-background-body-transparent: rgb(29 29 32 / 0); --color-background-section-burn-inverted: #27272b; - --color-background-default-hover-alpha-0: rgb(39 39 43 / 0); --color-shadow-shadow-1: rgb(0 0 0 / 0.05); --color-shadow-shadow-3: rgb(0 0 0 / 0.1); @@ -548,18 +501,6 @@ html[data-theme="dark"] { --color-workflow-workflow-progress-bg-1: rgb(24 24 27 / 0.25); --color-workflow-workflow-progress-bg-2: rgb(24 24 27 / 0.04); - --color-workflow-debug-run-status-bg: rgb(230 46 5 / 0.4); - --color-workflow-debug-breakpoint: #ff692e; - --color-workflow-debug-text: #ff9c66; - --color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2); - --color-workflow-debug-run-status-bg-alt: rgb(255 46 0 / 0.5); - - --color-workflow-test-run-run-status-bg: rgb(21 90 239 / 0.5); - --color-workflow-test-run-text: #d1e0ff; - --color-workflow-test-run-run-status-bg-alt: rgb(45 90 190 / 0.9); - --color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.3); - --color-workflow-test-run-paused-text: #fdb022; - --color-divider-subtle: rgb(200 206 218 / 0.08); --color-divider-regular: rgb(200 206 218 / 0.14); --color-divider-deep: rgb(200 206 218 / 0.2); @@ -604,7 +545,6 @@ html[data-theme="dark"] { --color-effects-highlight-lightmode-off: rgb(200 206 218 / 0.08); --color-effects-image-frame: #ffffff; --color-effects-icon-border: rgb(255 255 255 / 0.15); - --color-effects-highlight-subtle: rgb(200 206 218 / 0.04); --color-util-colors-orange-dark-orange-dark-50: #57130a; --color-util-colors-orange-dark-orange-dark-100: #771a0d; @@ -821,7 +761,5 @@ html[data-theme="dark"] { --color-dify-logo-blue: #e8e8e8; --color-dify-logo-black: #e8e8e8; - --color-dify-logo-outline-1: #ffffff; - --color-dify-logo-outline-2: #e8e8e8; -} \ No newline at end of file +} diff --git a/packages/dify-ui/src/themes/light.css b/packages/dify-ui/src/themes/light.css index 3901de4d8b..16e5e898ee 100644 --- a/packages/dify-ui/src/themes/light.css +++ b/packages/dify-ui/src/themes/light.css @@ -89,17 +89,6 @@ html[data-theme="light"] { --color-components-button-indigo-bg-hover: #3538cd; --color-components-button-indigo-bg-disabled: rgb(97 114 243 / 0.14); - --color-components-button-debug-text: #ffffff; - --color-components-button-debug-text-disabled: rgb(255 255 255 / 0.6); - --color-components-button-debug-bg: #ff4405; - --color-components-button-debug-bg-hover: #e62e05; - --color-components-button-debug-bg-disabled: rgb(255 68 5 / 0.2); - --color-components-button-debug-border: rgb(16 24 40 / 0.04); - --color-components-button-debug-border-hover: rgb(16 24 40 / 0.08); - --color-components-button-debug-border-disabled: rgb(255 255 255 / 0); - - --color-components-button-button-seam: rgb(0 0 0 / 0.03); - --color-components-checkbox-icon: #ffffff; --color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.5); --color-components-checkbox-bg: #155aef; @@ -160,7 +149,6 @@ html[data-theme="light"] { --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(254 243 242 / 0); --color-components-panel-bg-transparent: rgb(255 255 255 / 0); - --color-components-panel-bg-blur-burn: rgb(255 255 255 / 0.9); --color-components-main-nav-nav-button-text: #495464; --color-components-main-nav-nav-button-text-active: #155aef; @@ -171,26 +159,6 @@ html[data-theme="light"] { --color-components-main-nav-nav-user-border: #ffffff; - --color-components-main-nav-text: #495464; - --color-components-main-nav-text-active: #0033ff; - --color-components-main-nav-glass-edge-highlight-first: rgb(255 255 255 / 0.98); - --color-components-main-nav-glass-edge-highlight-middle: rgb(255 255 255 / 0); - --color-components-main-nav-glass-edge-highlight-end: rgb(255 255 255 / 0.42); - - --color-components-main-nav-glass-edge-reflection-first: rgb(0 51 255 / 0); - --color-components-main-nav-glass-edge-reflection-middle: rgb(0 51 255 / 0.6); - --color-components-main-nav-glass-edge-reflection-end: rgb(0 51 255 / 0); - - --color-components-main-nav-glass-surface-first: rgb(0 51 255 / 0.08); - --color-components-main-nav-glass-surface-middle-1: rgb(0 51 255 / 0.12); - --color-components-main-nav-glass-surface-middle-2: rgb(0 51 255 / 0.1); - --color-components-main-nav-glass-surface-end: rgb(0 51 255 / 0.08); - - --color-components-main-nav-glass-inner-glow: rgb(255 255 255 / 0.3); - --color-components-main-nav-glass-shadow-reflection: rgb(0 51 255 / 0.06); - --color-components-main-nav-glass-shadow-reflection-glow: rgb(255 255 255 / 0); - --color-components-main-nav-glass-text-glow: rgb(49 70 255 / 0.18); - --color-components-slider-knob: #ffffff; --color-components-slider-knob-hover: #ffffff; --color-components-slider-knob-disabled: rgb(255 255 255 / 0.95); @@ -389,8 +357,6 @@ html[data-theme="light"] { --color-components-icon-bg-orange-solid: #f79009; --color-components-icon-bg-orange-soft: #fffaeb; - --color-components-marketplace-header-bg: rgb(255 255 255 / 0.98); - --color-text-primary: #101828; --color-text-secondary: #354052; --color-text-tertiary: #676f83; @@ -452,7 +418,6 @@ html[data-theme="light"] { --color-background-overlay-backdrop: rgb(242 244 247 / 0.95); --color-background-body-transparent: rgb(242 244 247 / 0); --color-background-section-burn-inverted: #f2f4f7; - --color-background-default-hover-alpha-0: rgb(249 250 251 / 0); --color-shadow-shadow-1: rgb(9 9 11 / 0.03); --color-shadow-shadow-3: rgb(9 9 11 / 0.05); @@ -536,18 +501,6 @@ html[data-theme="light"] { --color-workflow-workflow-progress-bg-1: rgb(200 206 218 / 0.2); --color-workflow-workflow-progress-bg-2: rgb(200 206 218 / 0.04); - --color-workflow-debug-run-status-bg: rgb(255 68 5 / 0.08); - --color-workflow-debug-breakpoint: #e62e05; - --color-workflow-debug-text: #e62e05; - --color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2); - --color-workflow-debug-run-status-bg-alt: rgb(255 68 5 / 0.14); - - --color-workflow-test-run-run-status-bg: rgb(21 90 239 / 0.08); - --color-workflow-test-run-text: #004aeb; - --color-workflow-test-run-run-status-bg-alt: rgb(21 90 239 / 0.14); - --color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.14); - --color-workflow-test-run-paused-text: #dc6803; - --color-divider-subtle: rgb(16 24 40 / 0.04); --color-divider-regular: rgb(16 24 40 / 0.08); --color-divider-deep: rgb(16 24 40 / 0.14); @@ -592,7 +545,6 @@ html[data-theme="light"] { --color-effects-highlight-lightmode-off: rgb(255 255 255 / 0); --color-effects-image-frame: #ffffff; --color-effects-icon-border: rgb(16 24 40 / 0.08); - --color-effects-highlight-subtle: rgb(255 255 255 / 0.5); --color-util-colors-orange-dark-orange-dark-50: #fff4ed; --color-util-colors-orange-dark-orange-dark-100: #ffe6d5; @@ -809,7 +761,5 @@ html[data-theme="light"] { --color-dify-logo-blue: #0033ff; --color-dify-logo-black: #000000; - --color-dify-logo-outline-1: rgb(0 0 0 / 0); - --color-dify-logo-outline-2: rgb(0 0 0 / 0); -} \ No newline at end of file +} diff --git a/packages/dify-ui/src/themes/tailwind-theme-var-define.ts b/packages/dify-ui/src/themes/tailwind-theme-var-define.ts deleted file mode 100644 index 2ea617284f..0000000000 --- a/packages/dify-ui/src/themes/tailwind-theme-var-define.ts +++ /dev/null @@ -1,816 +0,0 @@ -/* Attention: Generate by code. Don't update by hand!!! */ -const vars = { - 'components-input-bg-normal': 'var(--color-components-input-bg-normal)', - 'components-input-text-placeholder': 'var(--color-components-input-text-placeholder)', - 'components-input-bg-hover': 'var(--color-components-input-bg-hover)', - 'components-input-bg-active': 'var(--color-components-input-bg-active)', - 'components-input-border-active': 'var(--color-components-input-border-active)', - 'components-input-border-destructive': 'var(--color-components-input-border-destructive)', - 'components-input-text-filled': 'var(--color-components-input-text-filled)', - 'components-input-bg-destructive': 'var(--color-components-input-bg-destructive)', - 'components-input-bg-disabled': 'var(--color-components-input-bg-disabled)', - 'components-input-text-disabled': 'var(--color-components-input-text-disabled)', - 'components-input-text-filled-disabled': 'var(--color-components-input-text-filled-disabled)', - 'components-input-border-hover': 'var(--color-components-input-border-hover)', - 'components-input-border-active-prompt-1': 'var(--color-components-input-border-active-prompt-1)', - 'components-input-border-active-prompt-2': 'var(--color-components-input-border-active-prompt-2)', - - 'components-kbd-bg-gray': 'var(--color-components-kbd-bg-gray)', - 'components-kbd-bg-white': 'var(--color-components-kbd-bg-white)', - - 'components-tooltip-bg': 'var(--color-components-tooltip-bg)', - - 'components-button-primary-text': 'var(--color-components-button-primary-text)', - 'components-button-primary-bg': 'var(--color-components-button-primary-bg)', - 'components-button-primary-border': 'var(--color-components-button-primary-border)', - 'components-button-primary-bg-hover': 'var(--color-components-button-primary-bg-hover)', - 'components-button-primary-border-hover': 'var(--color-components-button-primary-border-hover)', - 'components-button-primary-bg-disabled': 'var(--color-components-button-primary-bg-disabled)', - 'components-button-primary-border-disabled': 'var(--color-components-button-primary-border-disabled)', - 'components-button-primary-text-disabled': 'var(--color-components-button-primary-text-disabled)', - - 'components-button-secondary-text': 'var(--color-components-button-secondary-text)', - 'components-button-secondary-text-disabled': 'var(--color-components-button-secondary-text-disabled)', - 'components-button-secondary-bg': 'var(--color-components-button-secondary-bg)', - 'components-button-secondary-bg-hover': 'var(--color-components-button-secondary-bg-hover)', - 'components-button-secondary-bg-disabled': 'var(--color-components-button-secondary-bg-disabled)', - 'components-button-secondary-border': 'var(--color-components-button-secondary-border)', - 'components-button-secondary-border-hover': 'var(--color-components-button-secondary-border-hover)', - 'components-button-secondary-border-disabled': 'var(--color-components-button-secondary-border-disabled)', - - 'components-button-tertiary-text': 'var(--color-components-button-tertiary-text)', - 'components-button-tertiary-text-disabled': 'var(--color-components-button-tertiary-text-disabled)', - 'components-button-tertiary-bg': 'var(--color-components-button-tertiary-bg)', - 'components-button-tertiary-bg-hover': 'var(--color-components-button-tertiary-bg-hover)', - 'components-button-tertiary-bg-disabled': 'var(--color-components-button-tertiary-bg-disabled)', - - 'components-button-ghost-text': 'var(--color-components-button-ghost-text)', - 'components-button-ghost-text-disabled': 'var(--color-components-button-ghost-text-disabled)', - 'components-button-ghost-bg-hover': 'var(--color-components-button-ghost-bg-hover)', - - 'components-button-destructive-primary-text': 'var(--color-components-button-destructive-primary-text)', - 'components-button-destructive-primary-text-disabled': 'var(--color-components-button-destructive-primary-text-disabled)', - 'components-button-destructive-primary-bg': 'var(--color-components-button-destructive-primary-bg)', - 'components-button-destructive-primary-bg-hover': 'var(--color-components-button-destructive-primary-bg-hover)', - 'components-button-destructive-primary-bg-disabled': 'var(--color-components-button-destructive-primary-bg-disabled)', - 'components-button-destructive-primary-border': 'var(--color-components-button-destructive-primary-border)', - 'components-button-destructive-primary-border-hover': 'var(--color-components-button-destructive-primary-border-hover)', - 'components-button-destructive-primary-border-disabled': 'var(--color-components-button-destructive-primary-border-disabled)', - - 'components-button-destructive-secondary-text': 'var(--color-components-button-destructive-secondary-text)', - 'components-button-destructive-secondary-text-disabled': 'var(--color-components-button-destructive-secondary-text-disabled)', - 'components-button-destructive-secondary-bg': 'var(--color-components-button-destructive-secondary-bg)', - 'components-button-destructive-secondary-bg-hover': 'var(--color-components-button-destructive-secondary-bg-hover)', - 'components-button-destructive-secondary-bg-disabled': 'var(--color-components-button-destructive-secondary-bg-disabled)', - 'components-button-destructive-secondary-border': 'var(--color-components-button-destructive-secondary-border)', - 'components-button-destructive-secondary-border-hover': 'var(--color-components-button-destructive-secondary-border-hover)', - 'components-button-destructive-secondary-border-disabled': 'var(--color-components-button-destructive-secondary-border-disabled)', - - 'components-button-destructive-tertiary-text': 'var(--color-components-button-destructive-tertiary-text)', - 'components-button-destructive-tertiary-text-disabled': 'var(--color-components-button-destructive-tertiary-text-disabled)', - 'components-button-destructive-tertiary-bg': 'var(--color-components-button-destructive-tertiary-bg)', - 'components-button-destructive-tertiary-bg-hover': 'var(--color-components-button-destructive-tertiary-bg-hover)', - 'components-button-destructive-tertiary-bg-disabled': 'var(--color-components-button-destructive-tertiary-bg-disabled)', - - 'components-button-destructive-ghost-text': 'var(--color-components-button-destructive-ghost-text)', - 'components-button-destructive-ghost-text-disabled': 'var(--color-components-button-destructive-ghost-text-disabled)', - 'components-button-destructive-ghost-bg-hover': 'var(--color-components-button-destructive-ghost-bg-hover)', - - 'components-button-secondary-accent-text': 'var(--color-components-button-secondary-accent-text)', - 'components-button-secondary-accent-text-disabled': 'var(--color-components-button-secondary-accent-text-disabled)', - 'components-button-secondary-accent-bg': 'var(--color-components-button-secondary-accent-bg)', - 'components-button-secondary-accent-bg-hover': 'var(--color-components-button-secondary-accent-bg-hover)', - 'components-button-secondary-accent-bg-disabled': 'var(--color-components-button-secondary-accent-bg-disabled)', - 'components-button-secondary-accent-border': 'var(--color-components-button-secondary-accent-border)', - 'components-button-secondary-accent-border-hover': 'var(--color-components-button-secondary-accent-border-hover)', - 'components-button-secondary-accent-border-disabled': 'var(--color-components-button-secondary-accent-border-disabled)', - - 'components-button-indigo-bg': 'var(--color-components-button-indigo-bg)', - 'components-button-indigo-bg-hover': 'var(--color-components-button-indigo-bg-hover)', - 'components-button-indigo-bg-disabled': 'var(--color-components-button-indigo-bg-disabled)', - - 'components-button-debug-text': 'var(--color-components-button-debug-text)', - 'components-button-debug-text-disabled': 'var(--color-components-button-debug-text-disabled)', - 'components-button-debug-bg': 'var(--color-components-button-debug-bg)', - 'components-button-debug-bg-hover': 'var(--color-components-button-debug-bg-hover)', - 'components-button-debug-bg-disabled': 'var(--color-components-button-debug-bg-disabled)', - 'components-button-debug-border': 'var(--color-components-button-debug-border)', - 'components-button-debug-border-hover': 'var(--color-components-button-debug-border-hover)', - 'components-button-debug-border-disabled': 'var(--color-components-button-debug-border-disabled)', - - 'components-button-button-seam': 'var(--color-components-button-button-seam)', - - 'components-checkbox-icon': 'var(--color-components-checkbox-icon)', - 'components-checkbox-icon-disabled': 'var(--color-components-checkbox-icon-disabled)', - 'components-checkbox-bg': 'var(--color-components-checkbox-bg)', - 'components-checkbox-bg-hover': 'var(--color-components-checkbox-bg-hover)', - 'components-checkbox-bg-disabled': 'var(--color-components-checkbox-bg-disabled)', - 'components-checkbox-border': 'var(--color-components-checkbox-border)', - 'components-checkbox-border-hover': 'var(--color-components-checkbox-border-hover)', - 'components-checkbox-border-disabled': 'var(--color-components-checkbox-border-disabled)', - 'components-checkbox-bg-unchecked': 'var(--color-components-checkbox-bg-unchecked)', - 'components-checkbox-bg-unchecked-hover': 'var(--color-components-checkbox-bg-unchecked-hover)', - 'components-checkbox-bg-disabled-checked': 'var(--color-components-checkbox-bg-disabled-checked)', - - 'components-radio-border-checked': 'var(--color-components-radio-border-checked)', - 'components-radio-border-checked-hover': 'var(--color-components-radio-border-checked-hover)', - 'components-radio-border-checked-disabled': 'var(--color-components-radio-border-checked-disabled)', - 'components-radio-bg-disabled': 'var(--color-components-radio-bg-disabled)', - 'components-radio-border': 'var(--color-components-radio-border)', - 'components-radio-border-hover': 'var(--color-components-radio-border-hover)', - 'components-radio-border-disabled': 'var(--color-components-radio-border-disabled)', - 'components-radio-bg': 'var(--color-components-radio-bg)', - 'components-radio-bg-hover': 'var(--color-components-radio-bg-hover)', - - 'components-toggle-knob': 'var(--color-components-toggle-knob)', - 'components-toggle-knob-disabled': 'var(--color-components-toggle-knob-disabled)', - 'components-toggle-bg': 'var(--color-components-toggle-bg)', - 'components-toggle-bg-hover': 'var(--color-components-toggle-bg-hover)', - 'components-toggle-bg-disabled': 'var(--color-components-toggle-bg-disabled)', - 'components-toggle-bg-unchecked': 'var(--color-components-toggle-bg-unchecked)', - 'components-toggle-bg-unchecked-hover': 'var(--color-components-toggle-bg-unchecked-hover)', - 'components-toggle-bg-unchecked-disabled': 'var(--color-components-toggle-bg-unchecked-disabled)', - 'components-toggle-knob-hover': 'var(--color-components-toggle-knob-hover)', - - 'components-card-bg': 'var(--color-components-card-bg)', - 'components-card-border': 'var(--color-components-card-border)', - 'components-card-bg-alt': 'var(--color-components-card-bg-alt)', - 'components-card-bg-transparent': 'var(--color-components-card-bg-transparent)', - 'components-card-bg-alt-transparent': 'var(--color-components-card-bg-alt-transparent)', - - 'components-menu-item-text': 'var(--color-components-menu-item-text)', - 'components-menu-item-text-active': 'var(--color-components-menu-item-text-active)', - 'components-menu-item-text-hover': 'var(--color-components-menu-item-text-hover)', - 'components-menu-item-text-active-accent': 'var(--color-components-menu-item-text-active-accent)', - 'components-menu-item-bg-active': 'var(--color-components-menu-item-bg-active)', - 'components-menu-item-bg-hover': 'var(--color-components-menu-item-bg-hover)', - - 'components-panel-bg': 'var(--color-components-panel-bg)', - 'components-panel-bg-blur': 'var(--color-components-panel-bg-blur)', - 'components-panel-border': 'var(--color-components-panel-border)', - 'components-panel-border-subtle': 'var(--color-components-panel-border-subtle)', - 'components-panel-gradient-2': 'var(--color-components-panel-gradient-2)', - 'components-panel-gradient-1': 'var(--color-components-panel-gradient-1)', - 'components-panel-bg-alt': 'var(--color-components-panel-bg-alt)', - 'components-panel-on-panel-item-bg': 'var(--color-components-panel-on-panel-item-bg)', - 'components-panel-on-panel-item-bg-hover': 'var(--color-components-panel-on-panel-item-bg-hover)', - 'components-panel-on-panel-item-bg-alt': 'var(--color-components-panel-on-panel-item-bg-alt)', - 'components-panel-on-panel-item-bg-transparent': 'var(--color-components-panel-on-panel-item-bg-transparent)', - 'components-panel-on-panel-item-bg-hover-transparent': 'var(--color-components-panel-on-panel-item-bg-hover-transparent)', - 'components-panel-on-panel-item-bg-destructive-hover-transparent': 'var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent)', - - 'components-panel-bg-transparent': 'var(--color-components-panel-bg-transparent)', - 'components-panel-bg-blur-burn': 'var(--color-components-panel-bg-blur-burn)', - - 'components-main-nav-nav-button-text': 'var(--color-components-main-nav-nav-button-text)', - 'components-main-nav-nav-button-text-active': 'var(--color-components-main-nav-nav-button-text-active)', - 'components-main-nav-nav-button-bg': 'var(--color-components-main-nav-nav-button-bg)', - 'components-main-nav-nav-button-bg-active': 'var(--color-components-main-nav-nav-button-bg-active)', - 'components-main-nav-nav-button-border': 'var(--color-components-main-nav-nav-button-border)', - 'components-main-nav-nav-button-bg-hover': 'var(--color-components-main-nav-nav-button-bg-hover)', - - 'components-main-nav-nav-user-border': 'var(--color-components-main-nav-nav-user-border)', - - 'components-main-nav-text': 'var(--color-components-main-nav-text)', - 'components-main-nav-text-active': 'var(--color-components-main-nav-text-active)', - 'components-main-nav-glass-edge-highlight-first': 'var(--color-components-main-nav-glass-edge-highlight-first)', - 'components-main-nav-glass-edge-highlight-middle': 'var(--color-components-main-nav-glass-edge-highlight-middle)', - 'components-main-nav-glass-edge-highlight-end': 'var(--color-components-main-nav-glass-edge-highlight-end)', - - 'components-main-nav-glass-edge-reflection-first': 'var(--color-components-main-nav-glass-edge-reflection-first)', - 'components-main-nav-glass-edge-reflection-middle': 'var(--color-components-main-nav-glass-edge-reflection-middle)', - 'components-main-nav-glass-edge-reflection-end': 'var(--color-components-main-nav-glass-edge-reflection-end)', - - 'components-main-nav-glass-surface-first': 'var(--color-components-main-nav-glass-surface-first)', - 'components-main-nav-glass-surface-middle-1': 'var(--color-components-main-nav-glass-surface-middle-1)', - 'components-main-nav-glass-surface-middle-2': 'var(--color-components-main-nav-glass-surface-middle-2)', - 'components-main-nav-glass-surface-end': 'var(--color-components-main-nav-glass-surface-end)', - - 'components-main-nav-glass-inner-glow': 'var(--color-components-main-nav-glass-inner-glow)', - 'components-main-nav-glass-shadow-reflection': 'var(--color-components-main-nav-glass-shadow-reflection)', - 'components-main-nav-glass-shadow-reflection-glow': 'var(--color-components-main-nav-glass-shadow-reflection-glow)', - 'components-main-nav-glass-text-glow': 'var(--color-components-main-nav-glass-text-glow)', - - 'components-slider-knob': 'var(--color-components-slider-knob)', - 'components-slider-knob-hover': 'var(--color-components-slider-knob-hover)', - 'components-slider-knob-disabled': 'var(--color-components-slider-knob-disabled)', - 'components-slider-range': 'var(--color-components-slider-range)', - 'components-slider-track': 'var(--color-components-slider-track)', - 'components-slider-knob-border-hover': 'var(--color-components-slider-knob-border-hover)', - 'components-slider-knob-border': 'var(--color-components-slider-knob-border)', - - 'components-segmented-control-item-active-bg': 'var(--color-components-segmented-control-item-active-bg)', - 'components-segmented-control-item-active-border': 'var(--color-components-segmented-control-item-active-border)', - 'components-segmented-control-bg-normal': 'var(--color-components-segmented-control-bg-normal)', - 'components-segmented-control-item-active-accent-bg': 'var(--color-components-segmented-control-item-active-accent-bg)', - 'components-segmented-control-item-active-accent-border': 'var(--color-components-segmented-control-item-active-accent-border)', - - 'components-option-card-option-bg': 'var(--color-components-option-card-option-bg)', - 'components-option-card-option-selected-bg': 'var(--color-components-option-card-option-selected-bg)', - 'components-option-card-option-selected-border': 'var(--color-components-option-card-option-selected-border)', - 'components-option-card-option-border': 'var(--color-components-option-card-option-border)', - 'components-option-card-option-bg-hover': 'var(--color-components-option-card-option-bg-hover)', - 'components-option-card-option-border-hover': 'var(--color-components-option-card-option-border-hover)', - - 'components-tab-active': 'var(--color-components-tab-active)', - - 'components-badge-white-to-dark': 'var(--color-components-badge-white-to-dark)', - 'components-badge-status-light-success-bg': 'var(--color-components-badge-status-light-success-bg)', - 'components-badge-status-light-success-border-inner': 'var(--color-components-badge-status-light-success-border-inner)', - 'components-badge-status-light-success-halo': 'var(--color-components-badge-status-light-success-halo)', - - 'components-badge-status-light-border-outer': 'var(--color-components-badge-status-light-border-outer)', - 'components-badge-status-light-high-light': 'var(--color-components-badge-status-light-high-light)', - 'components-badge-status-light-warning-bg': 'var(--color-components-badge-status-light-warning-bg)', - 'components-badge-status-light-warning-border-inner': 'var(--color-components-badge-status-light-warning-border-inner)', - 'components-badge-status-light-warning-halo': 'var(--color-components-badge-status-light-warning-halo)', - - 'components-badge-status-light-error-bg': 'var(--color-components-badge-status-light-error-bg)', - 'components-badge-status-light-error-border-inner': 'var(--color-components-badge-status-light-error-border-inner)', - 'components-badge-status-light-error-halo': 'var(--color-components-badge-status-light-error-halo)', - - 'components-badge-status-light-normal-bg': 'var(--color-components-badge-status-light-normal-bg)', - 'components-badge-status-light-normal-border-inner': 'var(--color-components-badge-status-light-normal-border-inner)', - 'components-badge-status-light-normal-halo': 'var(--color-components-badge-status-light-normal-halo)', - - 'components-badge-status-light-disabled-bg': 'var(--color-components-badge-status-light-disabled-bg)', - 'components-badge-status-light-disabled-border-inner': 'var(--color-components-badge-status-light-disabled-border-inner)', - 'components-badge-status-light-disabled-halo': 'var(--color-components-badge-status-light-disabled-halo)', - - 'components-badge-bg-green-soft': 'var(--color-components-badge-bg-green-soft)', - 'components-badge-bg-orange-soft': 'var(--color-components-badge-bg-orange-soft)', - 'components-badge-bg-red-soft': 'var(--color-components-badge-bg-red-soft)', - 'components-badge-bg-blue-light-soft': 'var(--color-components-badge-bg-blue-light-soft)', - 'components-badge-bg-gray-soft': 'var(--color-components-badge-bg-gray-soft)', - 'components-badge-bg-dimm': 'var(--color-components-badge-bg-dimm)', - - 'components-chart-line': 'var(--color-components-chart-line)', - 'components-chart-area-1': 'var(--color-components-chart-area-1)', - 'components-chart-area-2': 'var(--color-components-chart-area-2)', - 'components-chart-current-1': 'var(--color-components-chart-current-1)', - 'components-chart-current-2': 'var(--color-components-chart-current-2)', - 'components-chart-bg': 'var(--color-components-chart-bg)', - - 'components-actionbar-bg': 'var(--color-components-actionbar-bg)', - 'components-actionbar-border': 'var(--color-components-actionbar-border)', - 'components-actionbar-bg-accent': 'var(--color-components-actionbar-bg-accent)', - 'components-actionbar-border-accent': 'var(--color-components-actionbar-border-accent)', - - 'components-dropzone-bg-alt': 'var(--color-components-dropzone-bg-alt)', - 'components-dropzone-bg': 'var(--color-components-dropzone-bg)', - 'components-dropzone-bg-accent': 'var(--color-components-dropzone-bg-accent)', - 'components-dropzone-border': 'var(--color-components-dropzone-border)', - 'components-dropzone-border-alt': 'var(--color-components-dropzone-border-alt)', - 'components-dropzone-border-accent': 'var(--color-components-dropzone-border-accent)', - - 'components-progress-brand-progress': 'var(--color-components-progress-brand-progress)', - 'components-progress-brand-border': 'var(--color-components-progress-brand-border)', - 'components-progress-brand-bg': 'var(--color-components-progress-brand-bg)', - - 'components-progress-white-progress': 'var(--color-components-progress-white-progress)', - 'components-progress-white-border': 'var(--color-components-progress-white-border)', - 'components-progress-white-bg': 'var(--color-components-progress-white-bg)', - - 'components-progress-gray-progress': 'var(--color-components-progress-gray-progress)', - 'components-progress-gray-border': 'var(--color-components-progress-gray-border)', - 'components-progress-gray-bg': 'var(--color-components-progress-gray-bg)', - - 'components-progress-warning-progress': 'var(--color-components-progress-warning-progress)', - 'components-progress-warning-border': 'var(--color-components-progress-warning-border)', - 'components-progress-warning-bg': 'var(--color-components-progress-warning-bg)', - - 'components-progress-error-progress': 'var(--color-components-progress-error-progress)', - 'components-progress-error-border': 'var(--color-components-progress-error-border)', - 'components-progress-error-bg': 'var(--color-components-progress-error-bg)', - - 'components-chat-input-audio-bg': 'var(--color-components-chat-input-audio-bg)', - 'components-chat-input-audio-wave-default': 'var(--color-components-chat-input-audio-wave-default)', - 'components-chat-input-bg-mask-1': 'var(--color-components-chat-input-bg-mask-1)', - 'components-chat-input-bg-mask-2': 'var(--color-components-chat-input-bg-mask-2)', - 'components-chat-input-border': 'var(--color-components-chat-input-border)', - 'components-chat-input-audio-wave-active': 'var(--color-components-chat-input-audio-wave-active)', - 'components-chat-input-audio-bg-alt': 'var(--color-components-chat-input-audio-bg-alt)', - - 'components-avatar-shape-fill-stop-0': 'var(--color-components-avatar-shape-fill-stop-0)', - 'components-avatar-shape-fill-stop-100': 'var(--color-components-avatar-shape-fill-stop-100)', - - 'components-avatar-bg-mask-stop-0': 'var(--color-components-avatar-bg-mask-stop-0)', - 'components-avatar-bg-mask-stop-100': 'var(--color-components-avatar-bg-mask-stop-100)', - - 'components-avatar-default-avatar-bg': 'var(--color-components-avatar-default-avatar-bg)', - 'components-avatar-mask-darkmode-dimmed': 'var(--color-components-avatar-mask-darkmode-dimmed)', - - 'components-label-gray': 'var(--color-components-label-gray)', - - 'components-premium-badge-blue-bg-stop-0': 'var(--color-components-premium-badge-blue-bg-stop-0)', - 'components-premium-badge-blue-bg-stop-100': 'var(--color-components-premium-badge-blue-bg-stop-100)', - 'components-premium-badge-blue-stroke-stop-0': 'var(--color-components-premium-badge-blue-stroke-stop-0)', - 'components-premium-badge-blue-stroke-stop-100': 'var(--color-components-premium-badge-blue-stroke-stop-100)', - 'components-premium-badge-blue-text-stop-0': 'var(--color-components-premium-badge-blue-text-stop-0)', - 'components-premium-badge-blue-text-stop-100': 'var(--color-components-premium-badge-blue-text-stop-100)', - 'components-premium-badge-blue-glow': 'var(--color-components-premium-badge-blue-glow)', - 'components-premium-badge-blue-bg-stop-0-hover': 'var(--color-components-premium-badge-blue-bg-stop-0-hover)', - 'components-premium-badge-blue-bg-stop-100-hover': 'var(--color-components-premium-badge-blue-bg-stop-100-hover)', - 'components-premium-badge-blue-glow-hover': 'var(--color-components-premium-badge-blue-glow-hover)', - 'components-premium-badge-blue-stroke-stop-0-hover': 'var(--color-components-premium-badge-blue-stroke-stop-0-hover)', - 'components-premium-badge-blue-stroke-stop-100-hover': 'var(--color-components-premium-badge-blue-stroke-stop-100-hover)', - - 'components-premium-badge-highlight-stop-0': 'var(--color-components-premium-badge-highlight-stop-0)', - 'components-premium-badge-highlight-stop-100': 'var(--color-components-premium-badge-highlight-stop-100)', - 'components-premium-badge-indigo-bg-stop-0': 'var(--color-components-premium-badge-indigo-bg-stop-0)', - 'components-premium-badge-indigo-bg-stop-100': 'var(--color-components-premium-badge-indigo-bg-stop-100)', - 'components-premium-badge-indigo-stroke-stop-0': 'var(--color-components-premium-badge-indigo-stroke-stop-0)', - 'components-premium-badge-indigo-stroke-stop-100': 'var(--color-components-premium-badge-indigo-stroke-stop-100)', - 'components-premium-badge-indigo-text-stop-0': 'var(--color-components-premium-badge-indigo-text-stop-0)', - 'components-premium-badge-indigo-text-stop-100': 'var(--color-components-premium-badge-indigo-text-stop-100)', - 'components-premium-badge-indigo-glow': 'var(--color-components-premium-badge-indigo-glow)', - 'components-premium-badge-indigo-glow-hover': 'var(--color-components-premium-badge-indigo-glow-hover)', - 'components-premium-badge-indigo-bg-stop-0-hover': 'var(--color-components-premium-badge-indigo-bg-stop-0-hover)', - 'components-premium-badge-indigo-bg-stop-100-hover': 'var(--color-components-premium-badge-indigo-bg-stop-100-hover)', - 'components-premium-badge-indigo-stroke-stop-0-hover': 'var(--color-components-premium-badge-indigo-stroke-stop-0-hover)', - 'components-premium-badge-indigo-stroke-stop-100-hover': 'var(--color-components-premium-badge-indigo-stroke-stop-100-hover)', - - 'components-premium-badge-grey-bg-stop-0': 'var(--color-components-premium-badge-grey-bg-stop-0)', - 'components-premium-badge-grey-bg-stop-100': 'var(--color-components-premium-badge-grey-bg-stop-100)', - 'components-premium-badge-grey-stroke-stop-0': 'var(--color-components-premium-badge-grey-stroke-stop-0)', - 'components-premium-badge-grey-stroke-stop-100': 'var(--color-components-premium-badge-grey-stroke-stop-100)', - 'components-premium-badge-grey-text-stop-0': 'var(--color-components-premium-badge-grey-text-stop-0)', - 'components-premium-badge-grey-text-stop-100': 'var(--color-components-premium-badge-grey-text-stop-100)', - 'components-premium-badge-grey-glow': 'var(--color-components-premium-badge-grey-glow)', - 'components-premium-badge-grey-glow-hover': 'var(--color-components-premium-badge-grey-glow-hover)', - 'components-premium-badge-grey-bg-stop-0-hover': 'var(--color-components-premium-badge-grey-bg-stop-0-hover)', - 'components-premium-badge-grey-bg-stop-100-hover': 'var(--color-components-premium-badge-grey-bg-stop-100-hover)', - 'components-premium-badge-grey-stroke-stop-0-hover': 'var(--color-components-premium-badge-grey-stroke-stop-0-hover)', - 'components-premium-badge-grey-stroke-stop-100-hover': 'var(--color-components-premium-badge-grey-stroke-stop-100-hover)', - - 'components-premium-badge-orange-bg-stop-0': 'var(--color-components-premium-badge-orange-bg-stop-0)', - 'components-premium-badge-orange-bg-stop-100': 'var(--color-components-premium-badge-orange-bg-stop-100)', - 'components-premium-badge-orange-stroke-stop-0': 'var(--color-components-premium-badge-orange-stroke-stop-0)', - 'components-premium-badge-orange-stroke-stop-100': 'var(--color-components-premium-badge-orange-stroke-stop-100)', - 'components-premium-badge-orange-text-stop-0': 'var(--color-components-premium-badge-orange-text-stop-0)', - 'components-premium-badge-orange-text-stop-100': 'var(--color-components-premium-badge-orange-text-stop-100)', - 'components-premium-badge-orange-glow': 'var(--color-components-premium-badge-orange-glow)', - 'components-premium-badge-orange-glow-hover': 'var(--color-components-premium-badge-orange-glow-hover)', - 'components-premium-badge-orange-bg-stop-0-hover': 'var(--color-components-premium-badge-orange-bg-stop-0-hover)', - 'components-premium-badge-orange-bg-stop-100-hover': 'var(--color-components-premium-badge-orange-bg-stop-100-hover)', - 'components-premium-badge-orange-stroke-stop-0-hover': 'var(--color-components-premium-badge-orange-stroke-stop-0-hover)', - 'components-premium-badge-orange-stroke-stop-100-hover': 'var(--color-components-premium-badge-orange-stroke-stop-100-hover)', - - 'components-progress-bar-bg': 'var(--color-components-progress-bar-bg)', - 'components-progress-bar-progress': 'var(--color-components-progress-bar-progress)', - 'components-progress-bar-border': 'var(--color-components-progress-bar-border)', - 'components-progress-bar-progress-solid': 'var(--color-components-progress-bar-progress-solid)', - 'components-progress-bar-progress-highlight': 'var(--color-components-progress-bar-progress-highlight)', - - 'components-icon-bg-red-solid': 'var(--color-components-icon-bg-red-solid)', - 'components-icon-bg-rose-solid': 'var(--color-components-icon-bg-rose-solid)', - 'components-icon-bg-pink-solid': 'var(--color-components-icon-bg-pink-solid)', - 'components-icon-bg-orange-dark-solid': 'var(--color-components-icon-bg-orange-dark-solid)', - 'components-icon-bg-yellow-solid': 'var(--color-components-icon-bg-yellow-solid)', - 'components-icon-bg-green-solid': 'var(--color-components-icon-bg-green-solid)', - 'components-icon-bg-teal-solid': 'var(--color-components-icon-bg-teal-solid)', - 'components-icon-bg-blue-light-solid': 'var(--color-components-icon-bg-blue-light-solid)', - 'components-icon-bg-blue-solid': 'var(--color-components-icon-bg-blue-solid)', - 'components-icon-bg-indigo-solid': 'var(--color-components-icon-bg-indigo-solid)', - 'components-icon-bg-violet-solid': 'var(--color-components-icon-bg-violet-solid)', - 'components-icon-bg-midnight-solid': 'var(--color-components-icon-bg-midnight-solid)', - 'components-icon-bg-rose-soft': 'var(--color-components-icon-bg-rose-soft)', - 'components-icon-bg-pink-soft': 'var(--color-components-icon-bg-pink-soft)', - 'components-icon-bg-orange-dark-soft': 'var(--color-components-icon-bg-orange-dark-soft)', - 'components-icon-bg-yellow-soft': 'var(--color-components-icon-bg-yellow-soft)', - 'components-icon-bg-green-soft': 'var(--color-components-icon-bg-green-soft)', - 'components-icon-bg-teal-soft': 'var(--color-components-icon-bg-teal-soft)', - 'components-icon-bg-blue-light-soft': 'var(--color-components-icon-bg-blue-light-soft)', - 'components-icon-bg-blue-soft': 'var(--color-components-icon-bg-blue-soft)', - 'components-icon-bg-indigo-soft': 'var(--color-components-icon-bg-indigo-soft)', - 'components-icon-bg-violet-soft': 'var(--color-components-icon-bg-violet-soft)', - 'components-icon-bg-midnight-soft': 'var(--color-components-icon-bg-midnight-soft)', - 'components-icon-bg-red-soft': 'var(--color-components-icon-bg-red-soft)', - 'components-icon-bg-orange-solid': 'var(--color-components-icon-bg-orange-solid)', - 'components-icon-bg-orange-soft': 'var(--color-components-icon-bg-orange-soft)', - - 'components-marketplace-header-bg': 'var(--color-components-marketplace-header-bg)', - - 'text-primary': 'var(--color-text-primary)', - 'text-secondary': 'var(--color-text-secondary)', - 'text-tertiary': 'var(--color-text-tertiary)', - 'text-quaternary': 'var(--color-text-quaternary)', - 'text-destructive': 'var(--color-text-destructive)', - 'text-success': 'var(--color-text-success)', - 'text-warning': 'var(--color-text-warning)', - 'text-destructive-secondary': 'var(--color-text-destructive-secondary)', - 'text-success-secondary': 'var(--color-text-success-secondary)', - 'text-warning-secondary': 'var(--color-text-warning-secondary)', - 'text-accent': 'var(--color-text-accent)', - 'text-primary-on-surface': 'var(--color-text-primary-on-surface)', - 'text-placeholder': 'var(--color-text-placeholder)', - 'text-disabled': 'var(--color-text-disabled)', - 'text-accent-secondary': 'var(--color-text-accent-secondary)', - 'text-accent-light-mode-only': 'var(--color-text-accent-light-mode-only)', - 'text-text-selected': 'var(--color-text-text-selected)', - 'text-secondary-on-surface': 'var(--color-text-secondary-on-surface)', - 'text-logo-text': 'var(--color-text-logo-text)', - 'text-empty-state-icon': 'var(--color-text-empty-state-icon)', - 'text-inverted': 'var(--color-text-inverted)', - 'text-inverted-dimmed': 'var(--color-text-inverted-dimmed)', - - 'background-body': 'var(--color-background-body)', - 'background-default-subtle': 'var(--color-background-default-subtle)', - 'background-neutral-subtle': 'var(--color-background-neutral-subtle)', - 'background-sidenav-bg': 'var(--color-background-sidenav-bg)', - 'background-default': 'var(--color-background-default)', - 'background-soft': 'var(--color-background-soft)', - 'background-gradient-bg-fill-chat-bg-1': 'var(--color-background-gradient-bg-fill-chat-bg-1)', - 'background-gradient-bg-fill-chat-bg-2': 'var(--color-background-gradient-bg-fill-chat-bg-2)', - 'background-gradient-bg-fill-chat-bubble-bg-1': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-1)', - 'background-gradient-bg-fill-chat-bubble-bg-2': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-2)', - 'background-gradient-bg-fill-debug-bg-1': 'var(--color-background-gradient-bg-fill-debug-bg-1)', - 'background-gradient-bg-fill-debug-bg-2': 'var(--color-background-gradient-bg-fill-debug-bg-2)', - - 'background-gradient-mask-gray': 'var(--color-background-gradient-mask-gray)', - 'background-gradient-mask-transparent': 'var(--color-background-gradient-mask-transparent)', - 'background-gradient-mask-input-clear-2': 'var(--color-background-gradient-mask-input-clear-2)', - 'background-gradient-mask-input-clear-1': 'var(--color-background-gradient-mask-input-clear-1)', - 'background-gradient-mask-transparent-dark': 'var(--color-background-gradient-mask-transparent-dark)', - 'background-gradient-mask-side-panel-2': 'var(--color-background-gradient-mask-side-panel-2)', - 'background-gradient-mask-side-panel-1': 'var(--color-background-gradient-mask-side-panel-1)', - - 'background-default-burn': 'var(--color-background-default-burn)', - 'background-overlay-fullscreen': 'var(--color-background-overlay-fullscreen)', - 'background-default-lighter': 'var(--color-background-default-lighter)', - 'background-section': 'var(--color-background-section)', - 'background-interaction-from-bg-1': 'var(--color-background-interaction-from-bg-1)', - 'background-interaction-from-bg-2': 'var(--color-background-interaction-from-bg-2)', - 'background-section-burn': 'var(--color-background-section-burn)', - 'background-default-dodge': 'var(--color-background-default-dodge)', - 'background-overlay': 'var(--color-background-overlay)', - 'background-default-dimmed': 'var(--color-background-default-dimmed)', - 'background-default-hover': 'var(--color-background-default-hover)', - 'background-overlay-alt': 'var(--color-background-overlay-alt)', - 'background-surface-white': 'var(--color-background-surface-white)', - 'background-overlay-destructive': 'var(--color-background-overlay-destructive)', - 'background-overlay-backdrop': 'var(--color-background-overlay-backdrop)', - 'background-body-transparent': 'var(--color-background-body-transparent)', - 'background-section-burn-inverted': 'var(--color-background-section-burn-inverted)', - 'background-default-hover-alpha-0': 'var(--color-background-default-hover-alpha-0)', - - 'shadow-shadow-1': 'var(--color-shadow-shadow-1)', - 'shadow-shadow-3': 'var(--color-shadow-shadow-3)', - 'shadow-shadow-4': 'var(--color-shadow-shadow-4)', - 'shadow-shadow-5': 'var(--color-shadow-shadow-5)', - 'shadow-shadow-6': 'var(--color-shadow-shadow-6)', - 'shadow-shadow-7': 'var(--color-shadow-shadow-7)', - 'shadow-shadow-8': 'var(--color-shadow-shadow-8)', - 'shadow-shadow-9': 'var(--color-shadow-shadow-9)', - 'shadow-shadow-2': 'var(--color-shadow-shadow-2)', - 'shadow-shadow-10': 'var(--color-shadow-shadow-10)', - - 'workflow-block-border': 'var(--color-workflow-block-border)', - 'workflow-block-parma-bg': 'var(--color-workflow-block-parma-bg)', - 'workflow-block-bg': 'var(--color-workflow-block-bg)', - 'workflow-block-bg-transparent': 'var(--color-workflow-block-bg-transparent)', - 'workflow-block-border-highlight': 'var(--color-workflow-block-border-highlight)', - 'workflow-block-wrapper-bg-1': 'var(--color-workflow-block-wrapper-bg-1)', - 'workflow-block-wrapper-bg-2': 'var(--color-workflow-block-wrapper-bg-2)', - - 'workflow-canvas-workflow-dot-color': 'var(--color-workflow-canvas-workflow-dot-color)', - 'workflow-canvas-workflow-bg': 'var(--color-workflow-canvas-workflow-bg)', - 'workflow-canvas-workflow-top-bar-1': 'var(--color-workflow-canvas-workflow-top-bar-1)', - 'workflow-canvas-workflow-top-bar-2': 'var(--color-workflow-canvas-workflow-top-bar-2)', - 'workflow-canvas-canvas-overlay': 'var(--color-workflow-canvas-canvas-overlay)', - - 'workflow-link-line-active': 'var(--color-workflow-link-line-active)', - 'workflow-link-line-normal': 'var(--color-workflow-link-line-normal)', - 'workflow-link-line-handle': 'var(--color-workflow-link-line-handle)', - 'workflow-link-line-normal-transparent': 'var(--color-workflow-link-line-normal-transparent)', - 'workflow-link-line-failure-active': 'var(--color-workflow-link-line-failure-active)', - 'workflow-link-line-failure-handle': 'var(--color-workflow-link-line-failure-handle)', - 'workflow-link-line-failure-button-bg': 'var(--color-workflow-link-line-failure-button-bg)', - 'workflow-link-line-failure-button-hover': 'var(--color-workflow-link-line-failure-button-hover)', - - 'workflow-link-line-success-active': 'var(--color-workflow-link-line-success-active)', - 'workflow-link-line-success-handle': 'var(--color-workflow-link-line-success-handle)', - - 'workflow-link-line-error-active': 'var(--color-workflow-link-line-error-active)', - 'workflow-link-line-error-handle': 'var(--color-workflow-link-line-error-handle)', - - 'workflow-minimap-bg': 'var(--color-workflow-minimap-bg)', - 'workflow-minimap-block': 'var(--color-workflow-minimap-block)', - - 'workflow-display-success-bg': 'var(--color-workflow-display-success-bg)', - 'workflow-display-success-border-1': 'var(--color-workflow-display-success-border-1)', - 'workflow-display-success-border-2': 'var(--color-workflow-display-success-border-2)', - 'workflow-display-success-vignette-color': 'var(--color-workflow-display-success-vignette-color)', - 'workflow-display-success-bg-line-pattern': 'var(--color-workflow-display-success-bg-line-pattern)', - - 'workflow-display-glass-1': 'var(--color-workflow-display-glass-1)', - 'workflow-display-glass-2': 'var(--color-workflow-display-glass-2)', - 'workflow-display-vignette-dark': 'var(--color-workflow-display-vignette-dark)', - 'workflow-display-highlight': 'var(--color-workflow-display-highlight)', - 'workflow-display-outline': 'var(--color-workflow-display-outline)', - 'workflow-display-error-bg': 'var(--color-workflow-display-error-bg)', - 'workflow-display-error-bg-line-pattern': 'var(--color-workflow-display-error-bg-line-pattern)', - 'workflow-display-error-border-1': 'var(--color-workflow-display-error-border-1)', - 'workflow-display-error-border-2': 'var(--color-workflow-display-error-border-2)', - 'workflow-display-error-vignette-color': 'var(--color-workflow-display-error-vignette-color)', - - 'workflow-display-warning-bg': 'var(--color-workflow-display-warning-bg)', - 'workflow-display-warning-bg-line-pattern': 'var(--color-workflow-display-warning-bg-line-pattern)', - 'workflow-display-warning-border-1': 'var(--color-workflow-display-warning-border-1)', - 'workflow-display-warning-border-2': 'var(--color-workflow-display-warning-border-2)', - 'workflow-display-warning-vignette-color': 'var(--color-workflow-display-warning-vignette-color)', - - 'workflow-display-normal-bg': 'var(--color-workflow-display-normal-bg)', - 'workflow-display-normal-bg-line-pattern': 'var(--color-workflow-display-normal-bg-line-pattern)', - 'workflow-display-normal-border-1': 'var(--color-workflow-display-normal-border-1)', - 'workflow-display-normal-border-2': 'var(--color-workflow-display-normal-border-2)', - 'workflow-display-normal-vignette-color': 'var(--color-workflow-display-normal-vignette-color)', - - 'workflow-display-disabled-bg': 'var(--color-workflow-display-disabled-bg)', - 'workflow-display-disabled-bg-line-pattern': 'var(--color-workflow-display-disabled-bg-line-pattern)', - 'workflow-display-disabled-border-1': 'var(--color-workflow-display-disabled-border-1)', - 'workflow-display-disabled-border-2': 'var(--color-workflow-display-disabled-border-2)', - 'workflow-display-disabled-vignette-color': 'var(--color-workflow-display-disabled-vignette-color)', - 'workflow-display-disabled-outline': 'var(--color-workflow-display-disabled-outline)', - - 'workflow-workflow-progress-bg-1': 'var(--color-workflow-workflow-progress-bg-1)', - 'workflow-workflow-progress-bg-2': 'var(--color-workflow-workflow-progress-bg-2)', - - 'workflow-debug-run-status-bg': 'var(--color-workflow-debug-run-status-bg)', - 'workflow-debug-breakpoint': 'var(--color-workflow-debug-breakpoint)', - 'workflow-debug-text': 'var(--color-workflow-debug-text)', - 'workflow-debug-text-disabled': 'var(--color-workflow-debug-text-disabled)', - 'workflow-debug-run-status-bg-alt': 'var(--color-workflow-debug-run-status-bg-alt)', - - 'workflow-test-run-run-status-bg': 'var(--color-workflow-test-run-run-status-bg)', - 'workflow-test-run-text': 'var(--color-workflow-test-run-text)', - 'workflow-test-run-run-status-bg-alt': 'var(--color-workflow-test-run-run-status-bg-alt)', - 'workflow-test-run-paused-bg': 'var(--color-workflow-test-run-paused-bg)', - 'workflow-test-run-paused-text': 'var(--color-workflow-test-run-paused-text)', - - 'divider-subtle': 'var(--color-divider-subtle)', - 'divider-regular': 'var(--color-divider-regular)', - 'divider-deep': 'var(--color-divider-deep)', - 'divider-burn': 'var(--color-divider-burn)', - 'divider-intense': 'var(--color-divider-intense)', - 'divider-solid': 'var(--color-divider-solid)', - 'divider-solid-alt': 'var(--color-divider-solid-alt)', - 'divider-accent': 'var(--color-divider-accent)', - - 'state-base-hover': 'var(--color-state-base-hover)', - 'state-base-active': 'var(--color-state-base-active)', - 'state-base-hover-alt': 'var(--color-state-base-hover-alt)', - 'state-base-handle': 'var(--color-state-base-handle)', - 'state-base-handle-hover': 'var(--color-state-base-handle-hover)', - 'state-base-hover-subtle': 'var(--color-state-base-hover-subtle)', - - 'state-accent-hover': 'var(--color-state-accent-hover)', - 'state-accent-active': 'var(--color-state-accent-active)', - 'state-accent-hover-alt': 'var(--color-state-accent-hover-alt)', - 'state-accent-solid': 'var(--color-state-accent-solid)', - 'state-accent-active-alt': 'var(--color-state-accent-active-alt)', - - 'state-destructive-hover': 'var(--color-state-destructive-hover)', - 'state-destructive-hover-alt': 'var(--color-state-destructive-hover-alt)', - 'state-destructive-active': 'var(--color-state-destructive-active)', - 'state-destructive-solid': 'var(--color-state-destructive-solid)', - 'state-destructive-border': 'var(--color-state-destructive-border)', - 'state-destructive-hover-transparent': 'var(--color-state-destructive-hover-transparent)', - - 'state-success-hover': 'var(--color-state-success-hover)', - 'state-success-hover-alt': 'var(--color-state-success-hover-alt)', - 'state-success-active': 'var(--color-state-success-active)', - 'state-success-solid': 'var(--color-state-success-solid)', - - 'state-warning-hover': 'var(--color-state-warning-hover)', - 'state-warning-hover-alt': 'var(--color-state-warning-hover-alt)', - 'state-warning-active': 'var(--color-state-warning-active)', - 'state-warning-solid': 'var(--color-state-warning-solid)', - 'state-warning-hover-transparent': 'var(--color-state-warning-hover-transparent)', - - 'effects-highlight': 'var(--color-effects-highlight)', - 'effects-highlight-lightmode-off': 'var(--color-effects-highlight-lightmode-off)', - 'effects-image-frame': 'var(--color-effects-image-frame)', - 'effects-icon-border': 'var(--color-effects-icon-border)', - 'effects-highlight-subtle': 'var(--color-effects-highlight-subtle)', - - 'util-colors-orange-dark-orange-dark-50': 'var(--color-util-colors-orange-dark-orange-dark-50)', - 'util-colors-orange-dark-orange-dark-100': 'var(--color-util-colors-orange-dark-orange-dark-100)', - 'util-colors-orange-dark-orange-dark-200': 'var(--color-util-colors-orange-dark-orange-dark-200)', - 'util-colors-orange-dark-orange-dark-300': 'var(--color-util-colors-orange-dark-orange-dark-300)', - 'util-colors-orange-dark-orange-dark-400': 'var(--color-util-colors-orange-dark-orange-dark-400)', - 'util-colors-orange-dark-orange-dark-500': 'var(--color-util-colors-orange-dark-orange-dark-500)', - 'util-colors-orange-dark-orange-dark-600': 'var(--color-util-colors-orange-dark-orange-dark-600)', - 'util-colors-orange-dark-orange-dark-700': 'var(--color-util-colors-orange-dark-orange-dark-700)', - - 'util-colors-orange-orange-50': 'var(--color-util-colors-orange-orange-50)', - 'util-colors-orange-orange-100': 'var(--color-util-colors-orange-orange-100)', - 'util-colors-orange-orange-200': 'var(--color-util-colors-orange-orange-200)', - 'util-colors-orange-orange-300': 'var(--color-util-colors-orange-orange-300)', - 'util-colors-orange-orange-400': 'var(--color-util-colors-orange-orange-400)', - 'util-colors-orange-orange-500': 'var(--color-util-colors-orange-orange-500)', - 'util-colors-orange-orange-600': 'var(--color-util-colors-orange-orange-600)', - 'util-colors-orange-orange-700': 'var(--color-util-colors-orange-orange-700)', - 'util-colors-orange-orange-100-transparent': 'var(--color-util-colors-orange-orange-100-transparent)', - - 'util-colors-pink-pink-50': 'var(--color-util-colors-pink-pink-50)', - 'util-colors-pink-pink-100': 'var(--color-util-colors-pink-pink-100)', - 'util-colors-pink-pink-200': 'var(--color-util-colors-pink-pink-200)', - 'util-colors-pink-pink-300': 'var(--color-util-colors-pink-pink-300)', - 'util-colors-pink-pink-400': 'var(--color-util-colors-pink-pink-400)', - 'util-colors-pink-pink-500': 'var(--color-util-colors-pink-pink-500)', - 'util-colors-pink-pink-600': 'var(--color-util-colors-pink-pink-600)', - 'util-colors-pink-pink-700': 'var(--color-util-colors-pink-pink-700)', - - 'util-colors-fuchsia-fuchsia-50': 'var(--color-util-colors-fuchsia-fuchsia-50)', - 'util-colors-fuchsia-fuchsia-100': 'var(--color-util-colors-fuchsia-fuchsia-100)', - 'util-colors-fuchsia-fuchsia-200': 'var(--color-util-colors-fuchsia-fuchsia-200)', - 'util-colors-fuchsia-fuchsia-300': 'var(--color-util-colors-fuchsia-fuchsia-300)', - 'util-colors-fuchsia-fuchsia-400': 'var(--color-util-colors-fuchsia-fuchsia-400)', - 'util-colors-fuchsia-fuchsia-500': 'var(--color-util-colors-fuchsia-fuchsia-500)', - 'util-colors-fuchsia-fuchsia-600': 'var(--color-util-colors-fuchsia-fuchsia-600)', - 'util-colors-fuchsia-fuchsia-700': 'var(--color-util-colors-fuchsia-fuchsia-700)', - - 'util-colors-purple-purple-50': 'var(--color-util-colors-purple-purple-50)', - 'util-colors-purple-purple-100': 'var(--color-util-colors-purple-purple-100)', - 'util-colors-purple-purple-200': 'var(--color-util-colors-purple-purple-200)', - 'util-colors-purple-purple-300': 'var(--color-util-colors-purple-purple-300)', - 'util-colors-purple-purple-400': 'var(--color-util-colors-purple-purple-400)', - 'util-colors-purple-purple-500': 'var(--color-util-colors-purple-purple-500)', - 'util-colors-purple-purple-600': 'var(--color-util-colors-purple-purple-600)', - 'util-colors-purple-purple-700': 'var(--color-util-colors-purple-purple-700)', - - 'util-colors-indigo-indigo-50': 'var(--color-util-colors-indigo-indigo-50)', - 'util-colors-indigo-indigo-100': 'var(--color-util-colors-indigo-indigo-100)', - 'util-colors-indigo-indigo-200': 'var(--color-util-colors-indigo-indigo-200)', - 'util-colors-indigo-indigo-300': 'var(--color-util-colors-indigo-indigo-300)', - 'util-colors-indigo-indigo-400': 'var(--color-util-colors-indigo-indigo-400)', - 'util-colors-indigo-indigo-500': 'var(--color-util-colors-indigo-indigo-500)', - 'util-colors-indigo-indigo-600': 'var(--color-util-colors-indigo-indigo-600)', - 'util-colors-indigo-indigo-700': 'var(--color-util-colors-indigo-indigo-700)', - - 'util-colors-blue-blue-50': 'var(--color-util-colors-blue-blue-50)', - 'util-colors-blue-blue-100': 'var(--color-util-colors-blue-blue-100)', - 'util-colors-blue-blue-200': 'var(--color-util-colors-blue-blue-200)', - 'util-colors-blue-blue-300': 'var(--color-util-colors-blue-blue-300)', - 'util-colors-blue-blue-400': 'var(--color-util-colors-blue-blue-400)', - 'util-colors-blue-blue-500': 'var(--color-util-colors-blue-blue-500)', - 'util-colors-blue-blue-600': 'var(--color-util-colors-blue-blue-600)', - 'util-colors-blue-blue-700': 'var(--color-util-colors-blue-blue-700)', - - 'util-colors-blue-light-blue-light-50': 'var(--color-util-colors-blue-light-blue-light-50)', - 'util-colors-blue-light-blue-light-100': 'var(--color-util-colors-blue-light-blue-light-100)', - 'util-colors-blue-light-blue-light-200': 'var(--color-util-colors-blue-light-blue-light-200)', - 'util-colors-blue-light-blue-light-300': 'var(--color-util-colors-blue-light-blue-light-300)', - 'util-colors-blue-light-blue-light-400': 'var(--color-util-colors-blue-light-blue-light-400)', - 'util-colors-blue-light-blue-light-500': 'var(--color-util-colors-blue-light-blue-light-500)', - 'util-colors-blue-light-blue-light-600': 'var(--color-util-colors-blue-light-blue-light-600)', - 'util-colors-blue-light-blue-light-700': 'var(--color-util-colors-blue-light-blue-light-700)', - - 'util-colors-gray-blue-gray-blue-50': 'var(--color-util-colors-gray-blue-gray-blue-50)', - 'util-colors-gray-blue-gray-blue-100': 'var(--color-util-colors-gray-blue-gray-blue-100)', - 'util-colors-gray-blue-gray-blue-200': 'var(--color-util-colors-gray-blue-gray-blue-200)', - 'util-colors-gray-blue-gray-blue-300': 'var(--color-util-colors-gray-blue-gray-blue-300)', - 'util-colors-gray-blue-gray-blue-400': 'var(--color-util-colors-gray-blue-gray-blue-400)', - 'util-colors-gray-blue-gray-blue-500': 'var(--color-util-colors-gray-blue-gray-blue-500)', - 'util-colors-gray-blue-gray-blue-600': 'var(--color-util-colors-gray-blue-gray-blue-600)', - 'util-colors-gray-blue-gray-blue-700': 'var(--color-util-colors-gray-blue-gray-blue-700)', - - 'util-colors-blue-brand-blue-brand-50': 'var(--color-util-colors-blue-brand-blue-brand-50)', - 'util-colors-blue-brand-blue-brand-100': 'var(--color-util-colors-blue-brand-blue-brand-100)', - 'util-colors-blue-brand-blue-brand-200': 'var(--color-util-colors-blue-brand-blue-brand-200)', - 'util-colors-blue-brand-blue-brand-300': 'var(--color-util-colors-blue-brand-blue-brand-300)', - 'util-colors-blue-brand-blue-brand-400': 'var(--color-util-colors-blue-brand-blue-brand-400)', - 'util-colors-blue-brand-blue-brand-500': 'var(--color-util-colors-blue-brand-blue-brand-500)', - 'util-colors-blue-brand-blue-brand-600': 'var(--color-util-colors-blue-brand-blue-brand-600)', - 'util-colors-blue-brand-blue-brand-700': 'var(--color-util-colors-blue-brand-blue-brand-700)', - - 'util-colors-red-red-50': 'var(--color-util-colors-red-red-50)', - 'util-colors-red-red-100': 'var(--color-util-colors-red-red-100)', - 'util-colors-red-red-200': 'var(--color-util-colors-red-red-200)', - 'util-colors-red-red-300': 'var(--color-util-colors-red-red-300)', - 'util-colors-red-red-400': 'var(--color-util-colors-red-red-400)', - 'util-colors-red-red-500': 'var(--color-util-colors-red-red-500)', - 'util-colors-red-red-600': 'var(--color-util-colors-red-red-600)', - 'util-colors-red-red-700': 'var(--color-util-colors-red-red-700)', - - 'util-colors-green-green-50': 'var(--color-util-colors-green-green-50)', - 'util-colors-green-green-100': 'var(--color-util-colors-green-green-100)', - 'util-colors-green-green-200': 'var(--color-util-colors-green-green-200)', - 'util-colors-green-green-300': 'var(--color-util-colors-green-green-300)', - 'util-colors-green-green-400': 'var(--color-util-colors-green-green-400)', - 'util-colors-green-green-500': 'var(--color-util-colors-green-green-500)', - 'util-colors-green-green-600': 'var(--color-util-colors-green-green-600)', - 'util-colors-green-green-700': 'var(--color-util-colors-green-green-700)', - - 'util-colors-warning-warning-50': 'var(--color-util-colors-warning-warning-50)', - 'util-colors-warning-warning-100': 'var(--color-util-colors-warning-warning-100)', - 'util-colors-warning-warning-200': 'var(--color-util-colors-warning-warning-200)', - 'util-colors-warning-warning-300': 'var(--color-util-colors-warning-warning-300)', - 'util-colors-warning-warning-400': 'var(--color-util-colors-warning-warning-400)', - 'util-colors-warning-warning-500': 'var(--color-util-colors-warning-warning-500)', - 'util-colors-warning-warning-600': 'var(--color-util-colors-warning-warning-600)', - 'util-colors-warning-warning-700': 'var(--color-util-colors-warning-warning-700)', - - 'util-colors-yellow-yellow-50': 'var(--color-util-colors-yellow-yellow-50)', - 'util-colors-yellow-yellow-100': 'var(--color-util-colors-yellow-yellow-100)', - 'util-colors-yellow-yellow-200': 'var(--color-util-colors-yellow-yellow-200)', - 'util-colors-yellow-yellow-300': 'var(--color-util-colors-yellow-yellow-300)', - 'util-colors-yellow-yellow-400': 'var(--color-util-colors-yellow-yellow-400)', - 'util-colors-yellow-yellow-500': 'var(--color-util-colors-yellow-yellow-500)', - 'util-colors-yellow-yellow-600': 'var(--color-util-colors-yellow-yellow-600)', - 'util-colors-yellow-yellow-700': 'var(--color-util-colors-yellow-yellow-700)', - - 'util-colors-teal-teal-50': 'var(--color-util-colors-teal-teal-50)', - 'util-colors-teal-teal-100': 'var(--color-util-colors-teal-teal-100)', - 'util-colors-teal-teal-200': 'var(--color-util-colors-teal-teal-200)', - 'util-colors-teal-teal-300': 'var(--color-util-colors-teal-teal-300)', - 'util-colors-teal-teal-400': 'var(--color-util-colors-teal-teal-400)', - 'util-colors-teal-teal-500': 'var(--color-util-colors-teal-teal-500)', - 'util-colors-teal-teal-600': 'var(--color-util-colors-teal-teal-600)', - 'util-colors-teal-teal-700': 'var(--color-util-colors-teal-teal-700)', - - 'util-colors-cyan-cyan-50': 'var(--color-util-colors-cyan-cyan-50)', - 'util-colors-cyan-cyan-100': 'var(--color-util-colors-cyan-cyan-100)', - 'util-colors-cyan-cyan-200': 'var(--color-util-colors-cyan-cyan-200)', - 'util-colors-cyan-cyan-300': 'var(--color-util-colors-cyan-cyan-300)', - 'util-colors-cyan-cyan-400': 'var(--color-util-colors-cyan-cyan-400)', - 'util-colors-cyan-cyan-500': 'var(--color-util-colors-cyan-cyan-500)', - 'util-colors-cyan-cyan-600': 'var(--color-util-colors-cyan-cyan-600)', - 'util-colors-cyan-cyan-700': 'var(--color-util-colors-cyan-cyan-700)', - - 'util-colors-violet-violet-50': 'var(--color-util-colors-violet-violet-50)', - 'util-colors-violet-violet-100': 'var(--color-util-colors-violet-violet-100)', - 'util-colors-violet-violet-200': 'var(--color-util-colors-violet-violet-200)', - 'util-colors-violet-violet-300': 'var(--color-util-colors-violet-violet-300)', - 'util-colors-violet-violet-400': 'var(--color-util-colors-violet-violet-400)', - 'util-colors-violet-violet-500': 'var(--color-util-colors-violet-violet-500)', - 'util-colors-violet-violet-600': 'var(--color-util-colors-violet-violet-600)', - 'util-colors-violet-violet-700': 'var(--color-util-colors-violet-violet-700)', - - 'util-colors-gray-gray-50': 'var(--color-util-colors-gray-gray-50)', - 'util-colors-gray-gray-100': 'var(--color-util-colors-gray-gray-100)', - 'util-colors-gray-gray-200': 'var(--color-util-colors-gray-gray-200)', - 'util-colors-gray-gray-300': 'var(--color-util-colors-gray-gray-300)', - 'util-colors-gray-gray-400': 'var(--color-util-colors-gray-gray-400)', - 'util-colors-gray-gray-500': 'var(--color-util-colors-gray-gray-500)', - 'util-colors-gray-gray-600': 'var(--color-util-colors-gray-gray-600)', - 'util-colors-gray-gray-700': 'var(--color-util-colors-gray-gray-700)', - - 'util-colors-green-light-green-light-50': 'var(--color-util-colors-green-light-green-light-50)', - 'util-colors-green-light-green-light-100': 'var(--color-util-colors-green-light-green-light-100)', - 'util-colors-green-light-green-light-200': 'var(--color-util-colors-green-light-green-light-200)', - 'util-colors-green-light-green-light-300': 'var(--color-util-colors-green-light-green-light-300)', - 'util-colors-green-light-green-light-500': 'var(--color-util-colors-green-light-green-light-500)', - 'util-colors-green-light-green-light-400': 'var(--color-util-colors-green-light-green-light-400)', - 'util-colors-green-light-green-light-600': 'var(--color-util-colors-green-light-green-light-600)', - 'util-colors-green-light-green-light-700': 'var(--color-util-colors-green-light-green-light-700)', - - 'util-colors-rose-rose-50': 'var(--color-util-colors-rose-rose-50)', - 'util-colors-rose-rose-100': 'var(--color-util-colors-rose-rose-100)', - 'util-colors-rose-rose-200': 'var(--color-util-colors-rose-rose-200)', - 'util-colors-rose-rose-300': 'var(--color-util-colors-rose-rose-300)', - 'util-colors-rose-rose-400': 'var(--color-util-colors-rose-rose-400)', - 'util-colors-rose-rose-500': 'var(--color-util-colors-rose-rose-500)', - 'util-colors-rose-rose-600': 'var(--color-util-colors-rose-rose-600)', - 'util-colors-rose-rose-700': 'var(--color-util-colors-rose-rose-700)', - - 'util-colors-midnight-midnight-50': 'var(--color-util-colors-midnight-midnight-50)', - 'util-colors-midnight-midnight-100': 'var(--color-util-colors-midnight-midnight-100)', - 'util-colors-midnight-midnight-200': 'var(--color-util-colors-midnight-midnight-200)', - 'util-colors-midnight-midnight-300': 'var(--color-util-colors-midnight-midnight-300)', - 'util-colors-midnight-midnight-400': 'var(--color-util-colors-midnight-midnight-400)', - 'util-colors-midnight-midnight-500': 'var(--color-util-colors-midnight-midnight-500)', - 'util-colors-midnight-midnight-600': 'var(--color-util-colors-midnight-midnight-600)', - 'util-colors-midnight-midnight-700': 'var(--color-util-colors-midnight-midnight-700)', - - 'third-party-LangChain': 'var(--color-third-party-LangChain)', - 'third-party-Langfuse': 'var(--color-third-party-Langfuse)', - 'third-party-Github': 'var(--color-third-party-Github)', - 'third-party-Github-tertiary': 'var(--color-third-party-Github-tertiary)', - 'third-party-Github-secondary': 'var(--color-third-party-Github-secondary)', - 'third-party-model-bg-openai': 'var(--color-third-party-model-bg-openai)', - 'third-party-model-bg-anthropic': 'var(--color-third-party-model-bg-anthropic)', - 'third-party-model-bg-default': 'var(--color-third-party-model-bg-default)', - - 'third-party-aws': 'var(--color-third-party-aws)', - 'third-party-aws-alt': 'var(--color-third-party-aws-alt)', - - 'saas-background': 'var(--color-saas-background)', - 'saas-pricing-grid-bg': 'var(--color-saas-pricing-grid-bg)', - 'saas-dify-blue-static': 'var(--color-saas-dify-blue-static)', - 'saas-dify-blue-static-hover': 'var(--color-saas-dify-blue-static-hover)', - 'saas-dify-blue-accessible': 'var(--color-saas-dify-blue-accessible)', - 'saas-dify-blue-inverted': 'var(--color-saas-dify-blue-inverted)', - 'saas-dify-blue-inverted-dimmed': 'var(--color-saas-dify-blue-inverted-dimmed)', - - 'saas-background-inverted': 'var(--color-saas-background-inverted)', - 'saas-background-inverted-hover': 'var(--color-saas-background-inverted-hover)', - - 'dify-logo-blue': 'var(--color-dify-logo-blue)', - 'dify-logo-black': 'var(--color-dify-logo-black)', - 'dify-logo-outline-1': 'var(--color-dify-logo-outline-1)', - 'dify-logo-outline-2': 'var(--color-dify-logo-outline-2)', - -} -export default vars diff --git a/packages/dify-ui/src/themes/theme.css b/packages/dify-ui/src/themes/theme.css new file mode 100644 index 0000000000..04e02d852c --- /dev/null +++ b/packages/dify-ui/src/themes/theme.css @@ -0,0 +1,772 @@ +/* Attention: Generated. Do not edit by hand. */ +/* + * Semantic design tokens. Each entry registers a Tailwind v4 utility + * (e.g. bg-components-input-bg-normal) that resolves to var(--color-...). + * Runtime values come from themes/light.css and themes/dark.css scoped + * under html[data-theme=...] — @theme inline avoids duplicating them at :root. + */ + +@theme inline { + --color-components-input-bg-normal: var(--color-components-input-bg-normal); + --color-components-input-text-placeholder: var(--color-components-input-text-placeholder); + --color-components-input-bg-hover: var(--color-components-input-bg-hover); + --color-components-input-bg-active: var(--color-components-input-bg-active); + --color-components-input-border-active: var(--color-components-input-border-active); + --color-components-input-border-destructive: var(--color-components-input-border-destructive); + --color-components-input-text-filled: var(--color-components-input-text-filled); + --color-components-input-bg-destructive: var(--color-components-input-bg-destructive); + --color-components-input-bg-disabled: var(--color-components-input-bg-disabled); + --color-components-input-text-disabled: var(--color-components-input-text-disabled); + --color-components-input-text-filled-disabled: var(--color-components-input-text-filled-disabled); + --color-components-input-border-hover: var(--color-components-input-border-hover); + --color-components-input-border-active-prompt-1: var(--color-components-input-border-active-prompt-1); + --color-components-input-border-active-prompt-2: var(--color-components-input-border-active-prompt-2); + + --color-components-kbd-bg-gray: var(--color-components-kbd-bg-gray); + --color-components-kbd-bg-white: var(--color-components-kbd-bg-white); + + --color-components-tooltip-bg: var(--color-components-tooltip-bg); + + --color-components-button-primary-text: var(--color-components-button-primary-text); + --color-components-button-primary-bg: var(--color-components-button-primary-bg); + --color-components-button-primary-border: var(--color-components-button-primary-border); + --color-components-button-primary-bg-hover: var(--color-components-button-primary-bg-hover); + --color-components-button-primary-border-hover: var(--color-components-button-primary-border-hover); + --color-components-button-primary-bg-disabled: var(--color-components-button-primary-bg-disabled); + --color-components-button-primary-border-disabled: var(--color-components-button-primary-border-disabled); + --color-components-button-primary-text-disabled: var(--color-components-button-primary-text-disabled); + + --color-components-button-secondary-text: var(--color-components-button-secondary-text); + --color-components-button-secondary-text-disabled: var(--color-components-button-secondary-text-disabled); + --color-components-button-secondary-bg: var(--color-components-button-secondary-bg); + --color-components-button-secondary-bg-hover: var(--color-components-button-secondary-bg-hover); + --color-components-button-secondary-bg-disabled: var(--color-components-button-secondary-bg-disabled); + --color-components-button-secondary-border: var(--color-components-button-secondary-border); + --color-components-button-secondary-border-hover: var(--color-components-button-secondary-border-hover); + --color-components-button-secondary-border-disabled: var(--color-components-button-secondary-border-disabled); + + --color-components-button-tertiary-text: var(--color-components-button-tertiary-text); + --color-components-button-tertiary-text-disabled: var(--color-components-button-tertiary-text-disabled); + --color-components-button-tertiary-bg: var(--color-components-button-tertiary-bg); + --color-components-button-tertiary-bg-hover: var(--color-components-button-tertiary-bg-hover); + --color-components-button-tertiary-bg-disabled: var(--color-components-button-tertiary-bg-disabled); + + --color-components-button-ghost-text: var(--color-components-button-ghost-text); + --color-components-button-ghost-text-disabled: var(--color-components-button-ghost-text-disabled); + --color-components-button-ghost-bg-hover: var(--color-components-button-ghost-bg-hover); + + --color-components-button-destructive-primary-text: var(--color-components-button-destructive-primary-text); + --color-components-button-destructive-primary-text-disabled: var(--color-components-button-destructive-primary-text-disabled); + --color-components-button-destructive-primary-bg: var(--color-components-button-destructive-primary-bg); + --color-components-button-destructive-primary-bg-hover: var(--color-components-button-destructive-primary-bg-hover); + --color-components-button-destructive-primary-bg-disabled: var(--color-components-button-destructive-primary-bg-disabled); + --color-components-button-destructive-primary-border: var(--color-components-button-destructive-primary-border); + --color-components-button-destructive-primary-border-hover: var(--color-components-button-destructive-primary-border-hover); + --color-components-button-destructive-primary-border-disabled: var(--color-components-button-destructive-primary-border-disabled); + + --color-components-button-destructive-secondary-text: var(--color-components-button-destructive-secondary-text); + --color-components-button-destructive-secondary-text-disabled: var(--color-components-button-destructive-secondary-text-disabled); + --color-components-button-destructive-secondary-bg: var(--color-components-button-destructive-secondary-bg); + --color-components-button-destructive-secondary-bg-hover: var(--color-components-button-destructive-secondary-bg-hover); + --color-components-button-destructive-secondary-bg-disabled: var(--color-components-button-destructive-secondary-bg-disabled); + --color-components-button-destructive-secondary-border: var(--color-components-button-destructive-secondary-border); + --color-components-button-destructive-secondary-border-hover: var(--color-components-button-destructive-secondary-border-hover); + --color-components-button-destructive-secondary-border-disabled: var(--color-components-button-destructive-secondary-border-disabled); + + --color-components-button-destructive-tertiary-text: var(--color-components-button-destructive-tertiary-text); + --color-components-button-destructive-tertiary-text-disabled: var(--color-components-button-destructive-tertiary-text-disabled); + --color-components-button-destructive-tertiary-bg: var(--color-components-button-destructive-tertiary-bg); + --color-components-button-destructive-tertiary-bg-hover: var(--color-components-button-destructive-tertiary-bg-hover); + --color-components-button-destructive-tertiary-bg-disabled: var(--color-components-button-destructive-tertiary-bg-disabled); + + --color-components-button-destructive-ghost-text: var(--color-components-button-destructive-ghost-text); + --color-components-button-destructive-ghost-text-disabled: var(--color-components-button-destructive-ghost-text-disabled); + --color-components-button-destructive-ghost-bg-hover: var(--color-components-button-destructive-ghost-bg-hover); + + --color-components-button-secondary-accent-text: var(--color-components-button-secondary-accent-text); + --color-components-button-secondary-accent-text-disabled: var(--color-components-button-secondary-accent-text-disabled); + --color-components-button-secondary-accent-bg: var(--color-components-button-secondary-accent-bg); + --color-components-button-secondary-accent-bg-hover: var(--color-components-button-secondary-accent-bg-hover); + --color-components-button-secondary-accent-bg-disabled: var(--color-components-button-secondary-accent-bg-disabled); + --color-components-button-secondary-accent-border: var(--color-components-button-secondary-accent-border); + --color-components-button-secondary-accent-border-hover: var(--color-components-button-secondary-accent-border-hover); + --color-components-button-secondary-accent-border-disabled: var(--color-components-button-secondary-accent-border-disabled); + + --color-components-button-indigo-bg: var(--color-components-button-indigo-bg); + --color-components-button-indigo-bg-hover: var(--color-components-button-indigo-bg-hover); + --color-components-button-indigo-bg-disabled: var(--color-components-button-indigo-bg-disabled); + + --color-components-checkbox-icon: var(--color-components-checkbox-icon); + --color-components-checkbox-icon-disabled: var(--color-components-checkbox-icon-disabled); + --color-components-checkbox-bg: var(--color-components-checkbox-bg); + --color-components-checkbox-bg-hover: var(--color-components-checkbox-bg-hover); + --color-components-checkbox-bg-disabled: var(--color-components-checkbox-bg-disabled); + --color-components-checkbox-border: var(--color-components-checkbox-border); + --color-components-checkbox-border-hover: var(--color-components-checkbox-border-hover); + --color-components-checkbox-border-disabled: var(--color-components-checkbox-border-disabled); + --color-components-checkbox-bg-unchecked: var(--color-components-checkbox-bg-unchecked); + --color-components-checkbox-bg-unchecked-hover: var(--color-components-checkbox-bg-unchecked-hover); + --color-components-checkbox-bg-disabled-checked: var(--color-components-checkbox-bg-disabled-checked); + + --color-components-radio-border-checked: var(--color-components-radio-border-checked); + --color-components-radio-border-checked-hover: var(--color-components-radio-border-checked-hover); + --color-components-radio-border-checked-disabled: var(--color-components-radio-border-checked-disabled); + --color-components-radio-bg-disabled: var(--color-components-radio-bg-disabled); + --color-components-radio-border: var(--color-components-radio-border); + --color-components-radio-border-hover: var(--color-components-radio-border-hover); + --color-components-radio-border-disabled: var(--color-components-radio-border-disabled); + --color-components-radio-bg: var(--color-components-radio-bg); + --color-components-radio-bg-hover: var(--color-components-radio-bg-hover); + + --color-components-toggle-knob: var(--color-components-toggle-knob); + --color-components-toggle-knob-disabled: var(--color-components-toggle-knob-disabled); + --color-components-toggle-bg: var(--color-components-toggle-bg); + --color-components-toggle-bg-hover: var(--color-components-toggle-bg-hover); + --color-components-toggle-bg-disabled: var(--color-components-toggle-bg-disabled); + --color-components-toggle-bg-unchecked: var(--color-components-toggle-bg-unchecked); + --color-components-toggle-bg-unchecked-hover: var(--color-components-toggle-bg-unchecked-hover); + --color-components-toggle-bg-unchecked-disabled: var(--color-components-toggle-bg-unchecked-disabled); + --color-components-toggle-knob-hover: var(--color-components-toggle-knob-hover); + + --color-components-card-bg: var(--color-components-card-bg); + --color-components-card-border: var(--color-components-card-border); + --color-components-card-bg-alt: var(--color-components-card-bg-alt); + --color-components-card-bg-transparent: var(--color-components-card-bg-transparent); + --color-components-card-bg-alt-transparent: var(--color-components-card-bg-alt-transparent); + + --color-components-menu-item-text: var(--color-components-menu-item-text); + --color-components-menu-item-text-active: var(--color-components-menu-item-text-active); + --color-components-menu-item-text-hover: var(--color-components-menu-item-text-hover); + --color-components-menu-item-text-active-accent: var(--color-components-menu-item-text-active-accent); + --color-components-menu-item-bg-active: var(--color-components-menu-item-bg-active); + --color-components-menu-item-bg-hover: var(--color-components-menu-item-bg-hover); + + --color-components-panel-bg: var(--color-components-panel-bg); + --color-components-panel-bg-blur: var(--color-components-panel-bg-blur); + --color-components-panel-border: var(--color-components-panel-border); + --color-components-panel-border-subtle: var(--color-components-panel-border-subtle); + --color-components-panel-gradient-2: var(--color-components-panel-gradient-2); + --color-components-panel-gradient-1: var(--color-components-panel-gradient-1); + --color-components-panel-bg-alt: var(--color-components-panel-bg-alt); + --color-components-panel-on-panel-item-bg: var(--color-components-panel-on-panel-item-bg); + --color-components-panel-on-panel-item-bg-hover: var(--color-components-panel-on-panel-item-bg-hover); + --color-components-panel-on-panel-item-bg-alt: var(--color-components-panel-on-panel-item-bg-alt); + --color-components-panel-on-panel-item-bg-transparent: var(--color-components-panel-on-panel-item-bg-transparent); + --color-components-panel-on-panel-item-bg-hover-transparent: var(--color-components-panel-on-panel-item-bg-hover-transparent); + --color-components-panel-on-panel-item-bg-destructive-hover-transparent: var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent); + + --color-components-panel-bg-transparent: var(--color-components-panel-bg-transparent); + + --color-components-main-nav-nav-button-text: var(--color-components-main-nav-nav-button-text); + --color-components-main-nav-nav-button-text-active: var(--color-components-main-nav-nav-button-text-active); + --color-components-main-nav-nav-button-bg: var(--color-components-main-nav-nav-button-bg); + --color-components-main-nav-nav-button-bg-active: var(--color-components-main-nav-nav-button-bg-active); + --color-components-main-nav-nav-button-border: var(--color-components-main-nav-nav-button-border); + --color-components-main-nav-nav-button-bg-hover: var(--color-components-main-nav-nav-button-bg-hover); + + --color-components-main-nav-nav-user-border: var(--color-components-main-nav-nav-user-border); + + --color-components-slider-knob: var(--color-components-slider-knob); + --color-components-slider-knob-hover: var(--color-components-slider-knob-hover); + --color-components-slider-knob-disabled: var(--color-components-slider-knob-disabled); + --color-components-slider-range: var(--color-components-slider-range); + --color-components-slider-track: var(--color-components-slider-track); + --color-components-slider-knob-border-hover: var(--color-components-slider-knob-border-hover); + --color-components-slider-knob-border: var(--color-components-slider-knob-border); + + --color-components-segmented-control-item-active-bg: var(--color-components-segmented-control-item-active-bg); + --color-components-segmented-control-item-active-border: var(--color-components-segmented-control-item-active-border); + --color-components-segmented-control-bg-normal: var(--color-components-segmented-control-bg-normal); + --color-components-segmented-control-item-active-accent-bg: var(--color-components-segmented-control-item-active-accent-bg); + --color-components-segmented-control-item-active-accent-border: var(--color-components-segmented-control-item-active-accent-border); + + --color-components-option-card-option-bg: var(--color-components-option-card-option-bg); + --color-components-option-card-option-selected-bg: var(--color-components-option-card-option-selected-bg); + --color-components-option-card-option-selected-border: var(--color-components-option-card-option-selected-border); + --color-components-option-card-option-border: var(--color-components-option-card-option-border); + --color-components-option-card-option-bg-hover: var(--color-components-option-card-option-bg-hover); + --color-components-option-card-option-border-hover: var(--color-components-option-card-option-border-hover); + + --color-components-tab-active: var(--color-components-tab-active); + + --color-components-badge-white-to-dark: var(--color-components-badge-white-to-dark); + --color-components-badge-status-light-success-bg: var(--color-components-badge-status-light-success-bg); + --color-components-badge-status-light-success-border-inner: var(--color-components-badge-status-light-success-border-inner); + --color-components-badge-status-light-success-halo: var(--color-components-badge-status-light-success-halo); + + --color-components-badge-status-light-border-outer: var(--color-components-badge-status-light-border-outer); + --color-components-badge-status-light-high-light: var(--color-components-badge-status-light-high-light); + --color-components-badge-status-light-warning-bg: var(--color-components-badge-status-light-warning-bg); + --color-components-badge-status-light-warning-border-inner: var(--color-components-badge-status-light-warning-border-inner); + --color-components-badge-status-light-warning-halo: var(--color-components-badge-status-light-warning-halo); + + --color-components-badge-status-light-error-bg: var(--color-components-badge-status-light-error-bg); + --color-components-badge-status-light-error-border-inner: var(--color-components-badge-status-light-error-border-inner); + --color-components-badge-status-light-error-halo: var(--color-components-badge-status-light-error-halo); + + --color-components-badge-status-light-normal-bg: var(--color-components-badge-status-light-normal-bg); + --color-components-badge-status-light-normal-border-inner: var(--color-components-badge-status-light-normal-border-inner); + --color-components-badge-status-light-normal-halo: var(--color-components-badge-status-light-normal-halo); + + --color-components-badge-status-light-disabled-bg: var(--color-components-badge-status-light-disabled-bg); + --color-components-badge-status-light-disabled-border-inner: var(--color-components-badge-status-light-disabled-border-inner); + --color-components-badge-status-light-disabled-halo: var(--color-components-badge-status-light-disabled-halo); + + --color-components-badge-bg-green-soft: var(--color-components-badge-bg-green-soft); + --color-components-badge-bg-orange-soft: var(--color-components-badge-bg-orange-soft); + --color-components-badge-bg-red-soft: var(--color-components-badge-bg-red-soft); + --color-components-badge-bg-blue-light-soft: var(--color-components-badge-bg-blue-light-soft); + --color-components-badge-bg-gray-soft: var(--color-components-badge-bg-gray-soft); + --color-components-badge-bg-dimm: var(--color-components-badge-bg-dimm); + + --color-components-chart-line: var(--color-components-chart-line); + --color-components-chart-area-1: var(--color-components-chart-area-1); + --color-components-chart-area-2: var(--color-components-chart-area-2); + --color-components-chart-current-1: var(--color-components-chart-current-1); + --color-components-chart-current-2: var(--color-components-chart-current-2); + --color-components-chart-bg: var(--color-components-chart-bg); + + --color-components-actionbar-bg: var(--color-components-actionbar-bg); + --color-components-actionbar-border: var(--color-components-actionbar-border); + --color-components-actionbar-bg-accent: var(--color-components-actionbar-bg-accent); + --color-components-actionbar-border-accent: var(--color-components-actionbar-border-accent); + + --color-components-dropzone-bg-alt: var(--color-components-dropzone-bg-alt); + --color-components-dropzone-bg: var(--color-components-dropzone-bg); + --color-components-dropzone-bg-accent: var(--color-components-dropzone-bg-accent); + --color-components-dropzone-border: var(--color-components-dropzone-border); + --color-components-dropzone-border-alt: var(--color-components-dropzone-border-alt); + --color-components-dropzone-border-accent: var(--color-components-dropzone-border-accent); + + --color-components-progress-brand-progress: var(--color-components-progress-brand-progress); + --color-components-progress-brand-border: var(--color-components-progress-brand-border); + --color-components-progress-brand-bg: var(--color-components-progress-brand-bg); + + --color-components-progress-white-progress: var(--color-components-progress-white-progress); + --color-components-progress-white-border: var(--color-components-progress-white-border); + --color-components-progress-white-bg: var(--color-components-progress-white-bg); + + --color-components-progress-gray-progress: var(--color-components-progress-gray-progress); + --color-components-progress-gray-border: var(--color-components-progress-gray-border); + --color-components-progress-gray-bg: var(--color-components-progress-gray-bg); + + --color-components-progress-warning-progress: var(--color-components-progress-warning-progress); + --color-components-progress-warning-border: var(--color-components-progress-warning-border); + --color-components-progress-warning-bg: var(--color-components-progress-warning-bg); + + --color-components-progress-error-progress: var(--color-components-progress-error-progress); + --color-components-progress-error-border: var(--color-components-progress-error-border); + --color-components-progress-error-bg: var(--color-components-progress-error-bg); + + --color-components-chat-input-audio-bg: var(--color-components-chat-input-audio-bg); + --color-components-chat-input-audio-wave-default: var(--color-components-chat-input-audio-wave-default); + --color-components-chat-input-bg-mask-1: var(--color-components-chat-input-bg-mask-1); + --color-components-chat-input-bg-mask-2: var(--color-components-chat-input-bg-mask-2); + --color-components-chat-input-border: var(--color-components-chat-input-border); + --color-components-chat-input-audio-wave-active: var(--color-components-chat-input-audio-wave-active); + --color-components-chat-input-audio-bg-alt: var(--color-components-chat-input-audio-bg-alt); + + --color-components-avatar-shape-fill-stop-0: var(--color-components-avatar-shape-fill-stop-0); + --color-components-avatar-shape-fill-stop-100: var(--color-components-avatar-shape-fill-stop-100); + + --color-components-avatar-bg-mask-stop-0: var(--color-components-avatar-bg-mask-stop-0); + --color-components-avatar-bg-mask-stop-100: var(--color-components-avatar-bg-mask-stop-100); + + --color-components-avatar-default-avatar-bg: var(--color-components-avatar-default-avatar-bg); + --color-components-avatar-mask-darkmode-dimmed: var(--color-components-avatar-mask-darkmode-dimmed); + + --color-components-label-gray: var(--color-components-label-gray); + + --color-components-premium-badge-blue-bg-stop-0: var(--color-components-premium-badge-blue-bg-stop-0); + --color-components-premium-badge-blue-bg-stop-100: var(--color-components-premium-badge-blue-bg-stop-100); + --color-components-premium-badge-blue-stroke-stop-0: var(--color-components-premium-badge-blue-stroke-stop-0); + --color-components-premium-badge-blue-stroke-stop-100: var(--color-components-premium-badge-blue-stroke-stop-100); + --color-components-premium-badge-blue-text-stop-0: var(--color-components-premium-badge-blue-text-stop-0); + --color-components-premium-badge-blue-text-stop-100: var(--color-components-premium-badge-blue-text-stop-100); + --color-components-premium-badge-blue-glow: var(--color-components-premium-badge-blue-glow); + --color-components-premium-badge-blue-bg-stop-0-hover: var(--color-components-premium-badge-blue-bg-stop-0-hover); + --color-components-premium-badge-blue-bg-stop-100-hover: var(--color-components-premium-badge-blue-bg-stop-100-hover); + --color-components-premium-badge-blue-glow-hover: var(--color-components-premium-badge-blue-glow-hover); + --color-components-premium-badge-blue-stroke-stop-0-hover: var(--color-components-premium-badge-blue-stroke-stop-0-hover); + --color-components-premium-badge-blue-stroke-stop-100-hover: var(--color-components-premium-badge-blue-stroke-stop-100-hover); + + --color-components-premium-badge-highlight-stop-0: var(--color-components-premium-badge-highlight-stop-0); + --color-components-premium-badge-highlight-stop-100: var(--color-components-premium-badge-highlight-stop-100); + --color-components-premium-badge-indigo-bg-stop-0: var(--color-components-premium-badge-indigo-bg-stop-0); + --color-components-premium-badge-indigo-bg-stop-100: var(--color-components-premium-badge-indigo-bg-stop-100); + --color-components-premium-badge-indigo-stroke-stop-0: var(--color-components-premium-badge-indigo-stroke-stop-0); + --color-components-premium-badge-indigo-stroke-stop-100: var(--color-components-premium-badge-indigo-stroke-stop-100); + --color-components-premium-badge-indigo-text-stop-0: var(--color-components-premium-badge-indigo-text-stop-0); + --color-components-premium-badge-indigo-text-stop-100: var(--color-components-premium-badge-indigo-text-stop-100); + --color-components-premium-badge-indigo-glow: var(--color-components-premium-badge-indigo-glow); + --color-components-premium-badge-indigo-glow-hover: var(--color-components-premium-badge-indigo-glow-hover); + --color-components-premium-badge-indigo-bg-stop-0-hover: var(--color-components-premium-badge-indigo-bg-stop-0-hover); + --color-components-premium-badge-indigo-bg-stop-100-hover: var(--color-components-premium-badge-indigo-bg-stop-100-hover); + --color-components-premium-badge-indigo-stroke-stop-0-hover: var(--color-components-premium-badge-indigo-stroke-stop-0-hover); + --color-components-premium-badge-indigo-stroke-stop-100-hover: var(--color-components-premium-badge-indigo-stroke-stop-100-hover); + + --color-components-premium-badge-grey-bg-stop-0: var(--color-components-premium-badge-grey-bg-stop-0); + --color-components-premium-badge-grey-bg-stop-100: var(--color-components-premium-badge-grey-bg-stop-100); + --color-components-premium-badge-grey-stroke-stop-0: var(--color-components-premium-badge-grey-stroke-stop-0); + --color-components-premium-badge-grey-stroke-stop-100: var(--color-components-premium-badge-grey-stroke-stop-100); + --color-components-premium-badge-grey-text-stop-0: var(--color-components-premium-badge-grey-text-stop-0); + --color-components-premium-badge-grey-text-stop-100: var(--color-components-premium-badge-grey-text-stop-100); + --color-components-premium-badge-grey-glow: var(--color-components-premium-badge-grey-glow); + --color-components-premium-badge-grey-glow-hover: var(--color-components-premium-badge-grey-glow-hover); + --color-components-premium-badge-grey-bg-stop-0-hover: var(--color-components-premium-badge-grey-bg-stop-0-hover); + --color-components-premium-badge-grey-bg-stop-100-hover: var(--color-components-premium-badge-grey-bg-stop-100-hover); + --color-components-premium-badge-grey-stroke-stop-0-hover: var(--color-components-premium-badge-grey-stroke-stop-0-hover); + --color-components-premium-badge-grey-stroke-stop-100-hover: var(--color-components-premium-badge-grey-stroke-stop-100-hover); + + --color-components-premium-badge-orange-bg-stop-0: var(--color-components-premium-badge-orange-bg-stop-0); + --color-components-premium-badge-orange-bg-stop-100: var(--color-components-premium-badge-orange-bg-stop-100); + --color-components-premium-badge-orange-stroke-stop-0: var(--color-components-premium-badge-orange-stroke-stop-0); + --color-components-premium-badge-orange-stroke-stop-100: var(--color-components-premium-badge-orange-stroke-stop-100); + --color-components-premium-badge-orange-text-stop-0: var(--color-components-premium-badge-orange-text-stop-0); + --color-components-premium-badge-orange-text-stop-100: var(--color-components-premium-badge-orange-text-stop-100); + --color-components-premium-badge-orange-glow: var(--color-components-premium-badge-orange-glow); + --color-components-premium-badge-orange-glow-hover: var(--color-components-premium-badge-orange-glow-hover); + --color-components-premium-badge-orange-bg-stop-0-hover: var(--color-components-premium-badge-orange-bg-stop-0-hover); + --color-components-premium-badge-orange-bg-stop-100-hover: var(--color-components-premium-badge-orange-bg-stop-100-hover); + --color-components-premium-badge-orange-stroke-stop-0-hover: var(--color-components-premium-badge-orange-stroke-stop-0-hover); + --color-components-premium-badge-orange-stroke-stop-100-hover: var(--color-components-premium-badge-orange-stroke-stop-100-hover); + + --color-components-progress-bar-bg: var(--color-components-progress-bar-bg); + --color-components-progress-bar-progress: var(--color-components-progress-bar-progress); + --color-components-progress-bar-border: var(--color-components-progress-bar-border); + --color-components-progress-bar-progress-solid: var(--color-components-progress-bar-progress-solid); + --color-components-progress-bar-progress-highlight: var(--color-components-progress-bar-progress-highlight); + + --color-components-icon-bg-red-solid: var(--color-components-icon-bg-red-solid); + --color-components-icon-bg-rose-solid: var(--color-components-icon-bg-rose-solid); + --color-components-icon-bg-pink-solid: var(--color-components-icon-bg-pink-solid); + --color-components-icon-bg-orange-dark-solid: var(--color-components-icon-bg-orange-dark-solid); + --color-components-icon-bg-yellow-solid: var(--color-components-icon-bg-yellow-solid); + --color-components-icon-bg-green-solid: var(--color-components-icon-bg-green-solid); + --color-components-icon-bg-teal-solid: var(--color-components-icon-bg-teal-solid); + --color-components-icon-bg-blue-light-solid: var(--color-components-icon-bg-blue-light-solid); + --color-components-icon-bg-blue-solid: var(--color-components-icon-bg-blue-solid); + --color-components-icon-bg-indigo-solid: var(--color-components-icon-bg-indigo-solid); + --color-components-icon-bg-violet-solid: var(--color-components-icon-bg-violet-solid); + --color-components-icon-bg-midnight-solid: var(--color-components-icon-bg-midnight-solid); + --color-components-icon-bg-rose-soft: var(--color-components-icon-bg-rose-soft); + --color-components-icon-bg-pink-soft: var(--color-components-icon-bg-pink-soft); + --color-components-icon-bg-orange-dark-soft: var(--color-components-icon-bg-orange-dark-soft); + --color-components-icon-bg-yellow-soft: var(--color-components-icon-bg-yellow-soft); + --color-components-icon-bg-green-soft: var(--color-components-icon-bg-green-soft); + --color-components-icon-bg-teal-soft: var(--color-components-icon-bg-teal-soft); + --color-components-icon-bg-blue-light-soft: var(--color-components-icon-bg-blue-light-soft); + --color-components-icon-bg-blue-soft: var(--color-components-icon-bg-blue-soft); + --color-components-icon-bg-indigo-soft: var(--color-components-icon-bg-indigo-soft); + --color-components-icon-bg-violet-soft: var(--color-components-icon-bg-violet-soft); + --color-components-icon-bg-midnight-soft: var(--color-components-icon-bg-midnight-soft); + --color-components-icon-bg-red-soft: var(--color-components-icon-bg-red-soft); + --color-components-icon-bg-orange-solid: var(--color-components-icon-bg-orange-solid); + --color-components-icon-bg-orange-soft: var(--color-components-icon-bg-orange-soft); + + --color-text-primary: var(--color-text-primary); + --color-text-secondary: var(--color-text-secondary); + --color-text-tertiary: var(--color-text-tertiary); + --color-text-quaternary: var(--color-text-quaternary); + --color-text-destructive: var(--color-text-destructive); + --color-text-success: var(--color-text-success); + --color-text-warning: var(--color-text-warning); + --color-text-destructive-secondary: var(--color-text-destructive-secondary); + --color-text-success-secondary: var(--color-text-success-secondary); + --color-text-warning-secondary: var(--color-text-warning-secondary); + --color-text-accent: var(--color-text-accent); + --color-text-primary-on-surface: var(--color-text-primary-on-surface); + --color-text-placeholder: var(--color-text-placeholder); + --color-text-disabled: var(--color-text-disabled); + --color-text-accent-secondary: var(--color-text-accent-secondary); + --color-text-accent-light-mode-only: var(--color-text-accent-light-mode-only); + --color-text-text-selected: var(--color-text-text-selected); + --color-text-secondary-on-surface: var(--color-text-secondary-on-surface); + --color-text-logo-text: var(--color-text-logo-text); + --color-text-empty-state-icon: var(--color-text-empty-state-icon); + --color-text-inverted: var(--color-text-inverted); + --color-text-inverted-dimmed: var(--color-text-inverted-dimmed); + + --color-background-body: var(--color-background-body); + --color-background-default-subtle: var(--color-background-default-subtle); + --color-background-neutral-subtle: var(--color-background-neutral-subtle); + --color-background-sidenav-bg: var(--color-background-sidenav-bg); + --color-background-default: var(--color-background-default); + --color-background-soft: var(--color-background-soft); + --color-background-gradient-bg-fill-chat-bg-1: var(--color-background-gradient-bg-fill-chat-bg-1); + --color-background-gradient-bg-fill-chat-bg-2: var(--color-background-gradient-bg-fill-chat-bg-2); + --color-background-gradient-bg-fill-chat-bubble-bg-1: var(--color-background-gradient-bg-fill-chat-bubble-bg-1); + --color-background-gradient-bg-fill-chat-bubble-bg-2: var(--color-background-gradient-bg-fill-chat-bubble-bg-2); + --color-background-gradient-bg-fill-debug-bg-1: var(--color-background-gradient-bg-fill-debug-bg-1); + --color-background-gradient-bg-fill-debug-bg-2: var(--color-background-gradient-bg-fill-debug-bg-2); + + --color-background-gradient-mask-gray: var(--color-background-gradient-mask-gray); + --color-background-gradient-mask-transparent: var(--color-background-gradient-mask-transparent); + --color-background-gradient-mask-input-clear-2: var(--color-background-gradient-mask-input-clear-2); + --color-background-gradient-mask-input-clear-1: var(--color-background-gradient-mask-input-clear-1); + --color-background-gradient-mask-transparent-dark: var(--color-background-gradient-mask-transparent-dark); + --color-background-gradient-mask-side-panel-2: var(--color-background-gradient-mask-side-panel-2); + --color-background-gradient-mask-side-panel-1: var(--color-background-gradient-mask-side-panel-1); + + --color-background-default-burn: var(--color-background-default-burn); + --color-background-overlay-fullscreen: var(--color-background-overlay-fullscreen); + --color-background-default-lighter: var(--color-background-default-lighter); + --color-background-section: var(--color-background-section); + --color-background-interaction-from-bg-1: var(--color-background-interaction-from-bg-1); + --color-background-interaction-from-bg-2: var(--color-background-interaction-from-bg-2); + --color-background-section-burn: var(--color-background-section-burn); + --color-background-default-dodge: var(--color-background-default-dodge); + --color-background-overlay: var(--color-background-overlay); + --color-background-default-dimmed: var(--color-background-default-dimmed); + --color-background-default-hover: var(--color-background-default-hover); + --color-background-overlay-alt: var(--color-background-overlay-alt); + --color-background-surface-white: var(--color-background-surface-white); + --color-background-overlay-destructive: var(--color-background-overlay-destructive); + --color-background-overlay-backdrop: var(--color-background-overlay-backdrop); + --color-background-body-transparent: var(--color-background-body-transparent); + --color-background-section-burn-inverted: var(--color-background-section-burn-inverted); + + --color-shadow-shadow-1: var(--color-shadow-shadow-1); + --color-shadow-shadow-3: var(--color-shadow-shadow-3); + --color-shadow-shadow-4: var(--color-shadow-shadow-4); + --color-shadow-shadow-5: var(--color-shadow-shadow-5); + --color-shadow-shadow-6: var(--color-shadow-shadow-6); + --color-shadow-shadow-7: var(--color-shadow-shadow-7); + --color-shadow-shadow-8: var(--color-shadow-shadow-8); + --color-shadow-shadow-9: var(--color-shadow-shadow-9); + --color-shadow-shadow-2: var(--color-shadow-shadow-2); + --color-shadow-shadow-10: var(--color-shadow-shadow-10); + + --color-workflow-block-border: var(--color-workflow-block-border); + --color-workflow-block-parma-bg: var(--color-workflow-block-parma-bg); + --color-workflow-block-bg: var(--color-workflow-block-bg); + --color-workflow-block-bg-transparent: var(--color-workflow-block-bg-transparent); + --color-workflow-block-border-highlight: var(--color-workflow-block-border-highlight); + --color-workflow-block-wrapper-bg-1: var(--color-workflow-block-wrapper-bg-1); + --color-workflow-block-wrapper-bg-2: var(--color-workflow-block-wrapper-bg-2); + + --color-workflow-canvas-workflow-dot-color: var(--color-workflow-canvas-workflow-dot-color); + --color-workflow-canvas-workflow-bg: var(--color-workflow-canvas-workflow-bg); + --color-workflow-canvas-workflow-top-bar-1: var(--color-workflow-canvas-workflow-top-bar-1); + --color-workflow-canvas-workflow-top-bar-2: var(--color-workflow-canvas-workflow-top-bar-2); + --color-workflow-canvas-canvas-overlay: var(--color-workflow-canvas-canvas-overlay); + + --color-workflow-link-line-active: var(--color-workflow-link-line-active); + --color-workflow-link-line-normal: var(--color-workflow-link-line-normal); + --color-workflow-link-line-handle: var(--color-workflow-link-line-handle); + --color-workflow-link-line-normal-transparent: var(--color-workflow-link-line-normal-transparent); + --color-workflow-link-line-failure-active: var(--color-workflow-link-line-failure-active); + --color-workflow-link-line-failure-handle: var(--color-workflow-link-line-failure-handle); + --color-workflow-link-line-failure-button-bg: var(--color-workflow-link-line-failure-button-bg); + --color-workflow-link-line-failure-button-hover: var(--color-workflow-link-line-failure-button-hover); + + --color-workflow-link-line-success-active: var(--color-workflow-link-line-success-active); + --color-workflow-link-line-success-handle: var(--color-workflow-link-line-success-handle); + + --color-workflow-link-line-error-active: var(--color-workflow-link-line-error-active); + --color-workflow-link-line-error-handle: var(--color-workflow-link-line-error-handle); + + --color-workflow-minimap-bg: var(--color-workflow-minimap-bg); + --color-workflow-minimap-block: var(--color-workflow-minimap-block); + + --color-workflow-display-success-bg: var(--color-workflow-display-success-bg); + --color-workflow-display-success-border-1: var(--color-workflow-display-success-border-1); + --color-workflow-display-success-border-2: var(--color-workflow-display-success-border-2); + --color-workflow-display-success-vignette-color: var(--color-workflow-display-success-vignette-color); + --color-workflow-display-success-bg-line-pattern: var(--color-workflow-display-success-bg-line-pattern); + + --color-workflow-display-glass-1: var(--color-workflow-display-glass-1); + --color-workflow-display-glass-2: var(--color-workflow-display-glass-2); + --color-workflow-display-vignette-dark: var(--color-workflow-display-vignette-dark); + --color-workflow-display-highlight: var(--color-workflow-display-highlight); + --color-workflow-display-outline: var(--color-workflow-display-outline); + --color-workflow-display-error-bg: var(--color-workflow-display-error-bg); + --color-workflow-display-error-bg-line-pattern: var(--color-workflow-display-error-bg-line-pattern); + --color-workflow-display-error-border-1: var(--color-workflow-display-error-border-1); + --color-workflow-display-error-border-2: var(--color-workflow-display-error-border-2); + --color-workflow-display-error-vignette-color: var(--color-workflow-display-error-vignette-color); + + --color-workflow-display-warning-bg: var(--color-workflow-display-warning-bg); + --color-workflow-display-warning-bg-line-pattern: var(--color-workflow-display-warning-bg-line-pattern); + --color-workflow-display-warning-border-1: var(--color-workflow-display-warning-border-1); + --color-workflow-display-warning-border-2: var(--color-workflow-display-warning-border-2); + --color-workflow-display-warning-vignette-color: var(--color-workflow-display-warning-vignette-color); + + --color-workflow-display-normal-bg: var(--color-workflow-display-normal-bg); + --color-workflow-display-normal-bg-line-pattern: var(--color-workflow-display-normal-bg-line-pattern); + --color-workflow-display-normal-border-1: var(--color-workflow-display-normal-border-1); + --color-workflow-display-normal-border-2: var(--color-workflow-display-normal-border-2); + --color-workflow-display-normal-vignette-color: var(--color-workflow-display-normal-vignette-color); + + --color-workflow-display-disabled-bg: var(--color-workflow-display-disabled-bg); + --color-workflow-display-disabled-bg-line-pattern: var(--color-workflow-display-disabled-bg-line-pattern); + --color-workflow-display-disabled-border-1: var(--color-workflow-display-disabled-border-1); + --color-workflow-display-disabled-border-2: var(--color-workflow-display-disabled-border-2); + --color-workflow-display-disabled-vignette-color: var(--color-workflow-display-disabled-vignette-color); + --color-workflow-display-disabled-outline: var(--color-workflow-display-disabled-outline); + + --color-workflow-workflow-progress-bg-1: var(--color-workflow-workflow-progress-bg-1); + --color-workflow-workflow-progress-bg-2: var(--color-workflow-workflow-progress-bg-2); + + --color-divider-subtle: var(--color-divider-subtle); + --color-divider-regular: var(--color-divider-regular); + --color-divider-deep: var(--color-divider-deep); + --color-divider-burn: var(--color-divider-burn); + --color-divider-intense: var(--color-divider-intense); + --color-divider-solid: var(--color-divider-solid); + --color-divider-solid-alt: var(--color-divider-solid-alt); + --color-divider-accent: var(--color-divider-accent); + + --color-state-base-hover: var(--color-state-base-hover); + --color-state-base-active: var(--color-state-base-active); + --color-state-base-hover-alt: var(--color-state-base-hover-alt); + --color-state-base-handle: var(--color-state-base-handle); + --color-state-base-handle-hover: var(--color-state-base-handle-hover); + --color-state-base-hover-subtle: var(--color-state-base-hover-subtle); + + --color-state-accent-hover: var(--color-state-accent-hover); + --color-state-accent-active: var(--color-state-accent-active); + --color-state-accent-hover-alt: var(--color-state-accent-hover-alt); + --color-state-accent-solid: var(--color-state-accent-solid); + --color-state-accent-active-alt: var(--color-state-accent-active-alt); + + --color-state-destructive-hover: var(--color-state-destructive-hover); + --color-state-destructive-hover-alt: var(--color-state-destructive-hover-alt); + --color-state-destructive-active: var(--color-state-destructive-active); + --color-state-destructive-solid: var(--color-state-destructive-solid); + --color-state-destructive-border: var(--color-state-destructive-border); + --color-state-destructive-hover-transparent: var(--color-state-destructive-hover-transparent); + + --color-state-success-hover: var(--color-state-success-hover); + --color-state-success-hover-alt: var(--color-state-success-hover-alt); + --color-state-success-active: var(--color-state-success-active); + --color-state-success-solid: var(--color-state-success-solid); + + --color-state-warning-hover: var(--color-state-warning-hover); + --color-state-warning-hover-alt: var(--color-state-warning-hover-alt); + --color-state-warning-active: var(--color-state-warning-active); + --color-state-warning-solid: var(--color-state-warning-solid); + --color-state-warning-hover-transparent: var(--color-state-warning-hover-transparent); + + --color-effects-highlight: var(--color-effects-highlight); + --color-effects-highlight-lightmode-off: var(--color-effects-highlight-lightmode-off); + --color-effects-image-frame: var(--color-effects-image-frame); + --color-effects-icon-border: var(--color-effects-icon-border); + + --color-util-colors-orange-dark-orange-dark-50: var(--color-util-colors-orange-dark-orange-dark-50); + --color-util-colors-orange-dark-orange-dark-100: var(--color-util-colors-orange-dark-orange-dark-100); + --color-util-colors-orange-dark-orange-dark-200: var(--color-util-colors-orange-dark-orange-dark-200); + --color-util-colors-orange-dark-orange-dark-300: var(--color-util-colors-orange-dark-orange-dark-300); + --color-util-colors-orange-dark-orange-dark-400: var(--color-util-colors-orange-dark-orange-dark-400); + --color-util-colors-orange-dark-orange-dark-500: var(--color-util-colors-orange-dark-orange-dark-500); + --color-util-colors-orange-dark-orange-dark-600: var(--color-util-colors-orange-dark-orange-dark-600); + --color-util-colors-orange-dark-orange-dark-700: var(--color-util-colors-orange-dark-orange-dark-700); + + --color-util-colors-orange-orange-50: var(--color-util-colors-orange-orange-50); + --color-util-colors-orange-orange-100: var(--color-util-colors-orange-orange-100); + --color-util-colors-orange-orange-200: var(--color-util-colors-orange-orange-200); + --color-util-colors-orange-orange-300: var(--color-util-colors-orange-orange-300); + --color-util-colors-orange-orange-400: var(--color-util-colors-orange-orange-400); + --color-util-colors-orange-orange-500: var(--color-util-colors-orange-orange-500); + --color-util-colors-orange-orange-600: var(--color-util-colors-orange-orange-600); + --color-util-colors-orange-orange-700: var(--color-util-colors-orange-orange-700); + --color-util-colors-orange-orange-100-transparent: var(--color-util-colors-orange-orange-100-transparent); + + --color-util-colors-pink-pink-50: var(--color-util-colors-pink-pink-50); + --color-util-colors-pink-pink-100: var(--color-util-colors-pink-pink-100); + --color-util-colors-pink-pink-200: var(--color-util-colors-pink-pink-200); + --color-util-colors-pink-pink-300: var(--color-util-colors-pink-pink-300); + --color-util-colors-pink-pink-400: var(--color-util-colors-pink-pink-400); + --color-util-colors-pink-pink-500: var(--color-util-colors-pink-pink-500); + --color-util-colors-pink-pink-600: var(--color-util-colors-pink-pink-600); + --color-util-colors-pink-pink-700: var(--color-util-colors-pink-pink-700); + + --color-util-colors-fuchsia-fuchsia-50: var(--color-util-colors-fuchsia-fuchsia-50); + --color-util-colors-fuchsia-fuchsia-100: var(--color-util-colors-fuchsia-fuchsia-100); + --color-util-colors-fuchsia-fuchsia-200: var(--color-util-colors-fuchsia-fuchsia-200); + --color-util-colors-fuchsia-fuchsia-300: var(--color-util-colors-fuchsia-fuchsia-300); + --color-util-colors-fuchsia-fuchsia-400: var(--color-util-colors-fuchsia-fuchsia-400); + --color-util-colors-fuchsia-fuchsia-500: var(--color-util-colors-fuchsia-fuchsia-500); + --color-util-colors-fuchsia-fuchsia-600: var(--color-util-colors-fuchsia-fuchsia-600); + --color-util-colors-fuchsia-fuchsia-700: var(--color-util-colors-fuchsia-fuchsia-700); + + --color-util-colors-purple-purple-50: var(--color-util-colors-purple-purple-50); + --color-util-colors-purple-purple-100: var(--color-util-colors-purple-purple-100); + --color-util-colors-purple-purple-200: var(--color-util-colors-purple-purple-200); + --color-util-colors-purple-purple-300: var(--color-util-colors-purple-purple-300); + --color-util-colors-purple-purple-400: var(--color-util-colors-purple-purple-400); + --color-util-colors-purple-purple-500: var(--color-util-colors-purple-purple-500); + --color-util-colors-purple-purple-600: var(--color-util-colors-purple-purple-600); + --color-util-colors-purple-purple-700: var(--color-util-colors-purple-purple-700); + + --color-util-colors-indigo-indigo-50: var(--color-util-colors-indigo-indigo-50); + --color-util-colors-indigo-indigo-100: var(--color-util-colors-indigo-indigo-100); + --color-util-colors-indigo-indigo-200: var(--color-util-colors-indigo-indigo-200); + --color-util-colors-indigo-indigo-300: var(--color-util-colors-indigo-indigo-300); + --color-util-colors-indigo-indigo-400: var(--color-util-colors-indigo-indigo-400); + --color-util-colors-indigo-indigo-500: var(--color-util-colors-indigo-indigo-500); + --color-util-colors-indigo-indigo-600: var(--color-util-colors-indigo-indigo-600); + --color-util-colors-indigo-indigo-700: var(--color-util-colors-indigo-indigo-700); + + --color-util-colors-blue-blue-50: var(--color-util-colors-blue-blue-50); + --color-util-colors-blue-blue-100: var(--color-util-colors-blue-blue-100); + --color-util-colors-blue-blue-200: var(--color-util-colors-blue-blue-200); + --color-util-colors-blue-blue-300: var(--color-util-colors-blue-blue-300); + --color-util-colors-blue-blue-400: var(--color-util-colors-blue-blue-400); + --color-util-colors-blue-blue-500: var(--color-util-colors-blue-blue-500); + --color-util-colors-blue-blue-600: var(--color-util-colors-blue-blue-600); + --color-util-colors-blue-blue-700: var(--color-util-colors-blue-blue-700); + + --color-util-colors-blue-light-blue-light-50: var(--color-util-colors-blue-light-blue-light-50); + --color-util-colors-blue-light-blue-light-100: var(--color-util-colors-blue-light-blue-light-100); + --color-util-colors-blue-light-blue-light-200: var(--color-util-colors-blue-light-blue-light-200); + --color-util-colors-blue-light-blue-light-300: var(--color-util-colors-blue-light-blue-light-300); + --color-util-colors-blue-light-blue-light-400: var(--color-util-colors-blue-light-blue-light-400); + --color-util-colors-blue-light-blue-light-500: var(--color-util-colors-blue-light-blue-light-500); + --color-util-colors-blue-light-blue-light-600: var(--color-util-colors-blue-light-blue-light-600); + --color-util-colors-blue-light-blue-light-700: var(--color-util-colors-blue-light-blue-light-700); + + --color-util-colors-gray-blue-gray-blue-50: var(--color-util-colors-gray-blue-gray-blue-50); + --color-util-colors-gray-blue-gray-blue-100: var(--color-util-colors-gray-blue-gray-blue-100); + --color-util-colors-gray-blue-gray-blue-200: var(--color-util-colors-gray-blue-gray-blue-200); + --color-util-colors-gray-blue-gray-blue-300: var(--color-util-colors-gray-blue-gray-blue-300); + --color-util-colors-gray-blue-gray-blue-400: var(--color-util-colors-gray-blue-gray-blue-400); + --color-util-colors-gray-blue-gray-blue-500: var(--color-util-colors-gray-blue-gray-blue-500); + --color-util-colors-gray-blue-gray-blue-600: var(--color-util-colors-gray-blue-gray-blue-600); + --color-util-colors-gray-blue-gray-blue-700: var(--color-util-colors-gray-blue-gray-blue-700); + + --color-util-colors-blue-brand-blue-brand-50: var(--color-util-colors-blue-brand-blue-brand-50); + --color-util-colors-blue-brand-blue-brand-100: var(--color-util-colors-blue-brand-blue-brand-100); + --color-util-colors-blue-brand-blue-brand-200: var(--color-util-colors-blue-brand-blue-brand-200); + --color-util-colors-blue-brand-blue-brand-300: var(--color-util-colors-blue-brand-blue-brand-300); + --color-util-colors-blue-brand-blue-brand-400: var(--color-util-colors-blue-brand-blue-brand-400); + --color-util-colors-blue-brand-blue-brand-500: var(--color-util-colors-blue-brand-blue-brand-500); + --color-util-colors-blue-brand-blue-brand-600: var(--color-util-colors-blue-brand-blue-brand-600); + --color-util-colors-blue-brand-blue-brand-700: var(--color-util-colors-blue-brand-blue-brand-700); + + --color-util-colors-red-red-50: var(--color-util-colors-red-red-50); + --color-util-colors-red-red-100: var(--color-util-colors-red-red-100); + --color-util-colors-red-red-200: var(--color-util-colors-red-red-200); + --color-util-colors-red-red-300: var(--color-util-colors-red-red-300); + --color-util-colors-red-red-400: var(--color-util-colors-red-red-400); + --color-util-colors-red-red-500: var(--color-util-colors-red-red-500); + --color-util-colors-red-red-600: var(--color-util-colors-red-red-600); + --color-util-colors-red-red-700: var(--color-util-colors-red-red-700); + + --color-util-colors-green-green-50: var(--color-util-colors-green-green-50); + --color-util-colors-green-green-100: var(--color-util-colors-green-green-100); + --color-util-colors-green-green-200: var(--color-util-colors-green-green-200); + --color-util-colors-green-green-300: var(--color-util-colors-green-green-300); + --color-util-colors-green-green-400: var(--color-util-colors-green-green-400); + --color-util-colors-green-green-500: var(--color-util-colors-green-green-500); + --color-util-colors-green-green-600: var(--color-util-colors-green-green-600); + --color-util-colors-green-green-700: var(--color-util-colors-green-green-700); + + --color-util-colors-warning-warning-50: var(--color-util-colors-warning-warning-50); + --color-util-colors-warning-warning-100: var(--color-util-colors-warning-warning-100); + --color-util-colors-warning-warning-200: var(--color-util-colors-warning-warning-200); + --color-util-colors-warning-warning-300: var(--color-util-colors-warning-warning-300); + --color-util-colors-warning-warning-400: var(--color-util-colors-warning-warning-400); + --color-util-colors-warning-warning-500: var(--color-util-colors-warning-warning-500); + --color-util-colors-warning-warning-600: var(--color-util-colors-warning-warning-600); + --color-util-colors-warning-warning-700: var(--color-util-colors-warning-warning-700); + + --color-util-colors-yellow-yellow-50: var(--color-util-colors-yellow-yellow-50); + --color-util-colors-yellow-yellow-100: var(--color-util-colors-yellow-yellow-100); + --color-util-colors-yellow-yellow-200: var(--color-util-colors-yellow-yellow-200); + --color-util-colors-yellow-yellow-300: var(--color-util-colors-yellow-yellow-300); + --color-util-colors-yellow-yellow-400: var(--color-util-colors-yellow-yellow-400); + --color-util-colors-yellow-yellow-500: var(--color-util-colors-yellow-yellow-500); + --color-util-colors-yellow-yellow-600: var(--color-util-colors-yellow-yellow-600); + --color-util-colors-yellow-yellow-700: var(--color-util-colors-yellow-yellow-700); + + --color-util-colors-teal-teal-50: var(--color-util-colors-teal-teal-50); + --color-util-colors-teal-teal-100: var(--color-util-colors-teal-teal-100); + --color-util-colors-teal-teal-200: var(--color-util-colors-teal-teal-200); + --color-util-colors-teal-teal-300: var(--color-util-colors-teal-teal-300); + --color-util-colors-teal-teal-400: var(--color-util-colors-teal-teal-400); + --color-util-colors-teal-teal-500: var(--color-util-colors-teal-teal-500); + --color-util-colors-teal-teal-600: var(--color-util-colors-teal-teal-600); + --color-util-colors-teal-teal-700: var(--color-util-colors-teal-teal-700); + + --color-util-colors-cyan-cyan-50: var(--color-util-colors-cyan-cyan-50); + --color-util-colors-cyan-cyan-100: var(--color-util-colors-cyan-cyan-100); + --color-util-colors-cyan-cyan-200: var(--color-util-colors-cyan-cyan-200); + --color-util-colors-cyan-cyan-300: var(--color-util-colors-cyan-cyan-300); + --color-util-colors-cyan-cyan-400: var(--color-util-colors-cyan-cyan-400); + --color-util-colors-cyan-cyan-500: var(--color-util-colors-cyan-cyan-500); + --color-util-colors-cyan-cyan-600: var(--color-util-colors-cyan-cyan-600); + --color-util-colors-cyan-cyan-700: var(--color-util-colors-cyan-cyan-700); + + --color-util-colors-violet-violet-50: var(--color-util-colors-violet-violet-50); + --color-util-colors-violet-violet-100: var(--color-util-colors-violet-violet-100); + --color-util-colors-violet-violet-200: var(--color-util-colors-violet-violet-200); + --color-util-colors-violet-violet-300: var(--color-util-colors-violet-violet-300); + --color-util-colors-violet-violet-400: var(--color-util-colors-violet-violet-400); + --color-util-colors-violet-violet-500: var(--color-util-colors-violet-violet-500); + --color-util-colors-violet-violet-600: var(--color-util-colors-violet-violet-600); + --color-util-colors-violet-violet-700: var(--color-util-colors-violet-violet-700); + + --color-util-colors-gray-gray-50: var(--color-util-colors-gray-gray-50); + --color-util-colors-gray-gray-100: var(--color-util-colors-gray-gray-100); + --color-util-colors-gray-gray-200: var(--color-util-colors-gray-gray-200); + --color-util-colors-gray-gray-300: var(--color-util-colors-gray-gray-300); + --color-util-colors-gray-gray-400: var(--color-util-colors-gray-gray-400); + --color-util-colors-gray-gray-500: var(--color-util-colors-gray-gray-500); + --color-util-colors-gray-gray-600: var(--color-util-colors-gray-gray-600); + --color-util-colors-gray-gray-700: var(--color-util-colors-gray-gray-700); + + --color-util-colors-green-light-green-light-50: var(--color-util-colors-green-light-green-light-50); + --color-util-colors-green-light-green-light-100: var(--color-util-colors-green-light-green-light-100); + --color-util-colors-green-light-green-light-200: var(--color-util-colors-green-light-green-light-200); + --color-util-colors-green-light-green-light-300: var(--color-util-colors-green-light-green-light-300); + --color-util-colors-green-light-green-light-500: var(--color-util-colors-green-light-green-light-500); + --color-util-colors-green-light-green-light-400: var(--color-util-colors-green-light-green-light-400); + --color-util-colors-green-light-green-light-600: var(--color-util-colors-green-light-green-light-600); + --color-util-colors-green-light-green-light-700: var(--color-util-colors-green-light-green-light-700); + + --color-util-colors-rose-rose-50: var(--color-util-colors-rose-rose-50); + --color-util-colors-rose-rose-100: var(--color-util-colors-rose-rose-100); + --color-util-colors-rose-rose-200: var(--color-util-colors-rose-rose-200); + --color-util-colors-rose-rose-300: var(--color-util-colors-rose-rose-300); + --color-util-colors-rose-rose-400: var(--color-util-colors-rose-rose-400); + --color-util-colors-rose-rose-500: var(--color-util-colors-rose-rose-500); + --color-util-colors-rose-rose-600: var(--color-util-colors-rose-rose-600); + --color-util-colors-rose-rose-700: var(--color-util-colors-rose-rose-700); + + --color-util-colors-midnight-midnight-50: var(--color-util-colors-midnight-midnight-50); + --color-util-colors-midnight-midnight-100: var(--color-util-colors-midnight-midnight-100); + --color-util-colors-midnight-midnight-200: var(--color-util-colors-midnight-midnight-200); + --color-util-colors-midnight-midnight-300: var(--color-util-colors-midnight-midnight-300); + --color-util-colors-midnight-midnight-400: var(--color-util-colors-midnight-midnight-400); + --color-util-colors-midnight-midnight-500: var(--color-util-colors-midnight-midnight-500); + --color-util-colors-midnight-midnight-600: var(--color-util-colors-midnight-midnight-600); + --color-util-colors-midnight-midnight-700: var(--color-util-colors-midnight-midnight-700); + + --color-third-party-LangChain: var(--color-third-party-LangChain); + --color-third-party-Langfuse: var(--color-third-party-Langfuse); + --color-third-party-Github: var(--color-third-party-Github); + --color-third-party-Github-tertiary: var(--color-third-party-Github-tertiary); + --color-third-party-Github-secondary: var(--color-third-party-Github-secondary); + --color-third-party-model-bg-openai: var(--color-third-party-model-bg-openai); + --color-third-party-model-bg-anthropic: var(--color-third-party-model-bg-anthropic); + --color-third-party-model-bg-default: var(--color-third-party-model-bg-default); + + --color-third-party-aws: var(--color-third-party-aws); + --color-third-party-aws-alt: var(--color-third-party-aws-alt); + + --color-saas-background: var(--color-saas-background); + --color-saas-pricing-grid-bg: var(--color-saas-pricing-grid-bg); + --color-saas-dify-blue-static: var(--color-saas-dify-blue-static); + --color-saas-dify-blue-static-hover: var(--color-saas-dify-blue-static-hover); + --color-saas-dify-blue-accessible: var(--color-saas-dify-blue-accessible); + --color-saas-dify-blue-inverted: var(--color-saas-dify-blue-inverted); + --color-saas-dify-blue-inverted-dimmed: var(--color-saas-dify-blue-inverted-dimmed); + + --color-saas-background-inverted: var(--color-saas-background-inverted); + --color-saas-background-inverted-hover: var(--color-saas-background-inverted-hover); + + --color-dify-logo-blue: var(--color-dify-logo-blue); + --color-dify-logo-black: var(--color-dify-logo-black); + +} diff --git a/packages/dify-ui/tailwind.config.ts b/packages/dify-ui/tailwind.config.ts deleted file mode 100644 index bcf1731775..0000000000 --- a/packages/dify-ui/tailwind.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { Config } from 'tailwindcss' -import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons' -import difyUIPreset from './src/tailwind-preset' - -const config: Config = { - content: [ - './src/**/*.{js,ts,jsx,tsx,mdx}', - './.storybook/**/*.{js,ts,jsx,tsx,mdx}', - ], - presets: [difyUIPreset], - plugins: [ - iconsPlugin({ - collections: getIconCollections(['ri']), - extraProperties: { - width: '1rem', - height: '1rem', - display: 'block', - }, - }), - ], -} - -export default config diff --git a/packages/dify-ui/tsconfig.json b/packages/dify-ui/tsconfig.json index 514954c807..ae1a2b78dd 100644 --- a/packages/dify-ui/tsconfig.json +++ b/packages/dify-ui/tsconfig.json @@ -3,6 +3,6 @@ "compilerOptions": { "types": ["vite-plus/test/globals"] }, - "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts", "tailwind.config.ts"], + "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"], "exclude": ["node_modules", "dist", "storybook-static", "coverage"] } diff --git a/web/.storybook/preview.tsx b/web/.storybook/preview.tsx index 92b5baab0d..0209fc535c 100644 --- a/web/.storybook/preview.tsx +++ b/web/.storybook/preview.tsx @@ -6,7 +6,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { I18nClientProvider as I18N } from '../app/components/provider/i18n' import commonEnUS from '../i18n/en-US/common.json' -import '../app/styles/globals.css' import '../app/styles/markdown.css' import './storybook.css' diff --git a/web/.storybook/storybook.css b/web/.storybook/storybook.css index 85df1087a0..159deff4fe 100644 --- a/web/.storybook/storybook.css +++ b/web/.storybook/storybook.css @@ -1,3 +1,16 @@ +@import '../app/styles/tailwind-core.css'; + +@source '../app'; +@source '../context'; +@source '../hooks'; +@source '.'; +@source '../../packages/dify-ui/src'; +@source '../node_modules/streamdown/dist'; +@source '../node_modules/@streamdown/math/dist'; +@source not '../**/*.{spec,test}.{js,ts,jsx,tsx}'; +@source not '../../packages/dify-ui/src/**/*.{spec,test}.{ts,tsx}'; +@source not '../../packages/dify-ui/src/**/*.stories.{ts,tsx}'; + html, body { max-width: unset; diff --git a/web/__tests__/real-browser-flicker.test.tsx b/web/__tests__/real-browser-flicker.test.tsx index 7c3b45af19..288a5198a8 100644 --- a/web/__tests__/real-browser-flicker.test.tsx +++ b/web/__tests__/real-browser-flicker.test.tsx @@ -255,7 +255,6 @@ const TestThemeProvider = ({ children }: { children: React.ReactNode }) => ( defaultTheme="system" enableSystem disableTransitionOnChange - enableColorScheme={false} > {children} diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx index bcfcb5cbe6..fc2b3899e5 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx @@ -15,9 +15,9 @@ import type { import { cn } from '@langgenius/dify-ui/cn' import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select' import { useCallback, useState } from 'react' +import { Infotip } from '@/app/components/base/infotip' import Radio from '@/app/components/base/radio' import RadioE from '@/app/components/base/radio/ui' -import Tooltip from '@/app/components/base/tooltip' import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector' import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector' import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/multiple-tool-selector' @@ -28,6 +28,23 @@ import { FormTypeEnum } from '../declarations' import { useLanguage } from '../hooks' import Input from './Input' +const radioGridColumnsClassNames: Record = { + 1: 'grid-cols-1', + 2: 'grid-cols-2', + 3: 'grid-cols-3', + 4: 'grid-cols-4', + 5: 'grid-cols-5', + 6: 'grid-cols-6', + 7: 'grid-cols-7', + 8: 'grid-cols-8', + 9: 'grid-cols-9', + 10: 'grid-cols-10', + 11: 'grid-cols-11', + 12: 'grid-cols-12', +} + +type ModelSelectorValue = Record + type FormProps< CustomFormSchema extends Omit & { type: string } = never, > = { @@ -100,7 +117,7 @@ function Form< fieldMoreInfo, } - const handleFormChange = (key: string, val: string | boolean) => { + const handleFormChange = (key: string, val: FormValue[string]) => { if (isEditMode && (key === '__model_type' || key === '__model_name')) return @@ -115,7 +132,7 @@ function Form< onChange({ ...value, [key]: val, ...shouldClearVariable }) } - const handleModelChanged = useCallback((key: string, model: any) => { + const handleModelChanged = useCallback((key: string, model: ModelSelectorValue) => { const newValue = { ...value[key], ...model, @@ -125,17 +142,16 @@ function Form< }, [onChange, value]) const renderField = (formSchema: CredentialFormSchema | CustomFormSchema) => { - const tooltip = formSchema.tooltip - const tooltipContent = (tooltip && ( - - {tooltip[language] || tooltip.en_US} - - )} - triggerClassName="ml-1 w-4 h-4" - asChild={false} - /> + const infotip = formSchema.tooltip + const infotipText = infotip?.[language] || infotip?.en_US + const infotipContent = (infotipText && ( + + {infotipText} + )) if (override) { const [overrideTypes, overrideRender] = override @@ -166,7 +182,7 @@ function Form< {required && ( * )} - {tooltipContent} + {infotipContent} @@ -209,10 +226,9 @@ function Form< {required && ( * )} - {tooltipContent} + {infotipContent} - {/* eslint-disable-next-line tailwindcss/no-unknown-classes */} -
+
{options.filter((option) => { if (option.show_on.length) return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value) @@ -272,7 +288,7 @@ function Form< {required && ( * )} - {tooltipContent} + {infotipContent}