From 29ea059f9062bd1b36801cd48e103352ee57882c Mon Sep 17 00:00:00 2001 From: balibabu Date: Mon, 10 Nov 2025 19:02:41 +0800 Subject: [PATCH] Feat: Adjust the style of mcp and checkbox. #10427 (#11150) ### What problem does this PR solve? Feat: Adjust the style of mcp and checkbox. #10427 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/components/file-uploader.tsx | 4 +- .../schema-editor/json-schema-visualizer.tsx | 34 +++++++----- .../jsonjoy-builder/hooks/use-monaco-theme.ts | 53 ++++++++++--------- web/src/components/ui/checkbox.tsx | 4 +- web/src/pages/agent/form/agent-form/index.tsx | 8 ++- .../agent-form/structured-output-panel.tsx | 13 +++++ web/src/pages/dataflow-result/index.tsx | 2 +- .../profile-setting/mcp/edit-mcp-dialog.tsx | 2 +- 8 files changed, 72 insertions(+), 48 deletions(-) create mode 100644 web/src/pages/agent/form/agent-form/structured-output-panel.tsx diff --git a/web/src/components/file-uploader.tsx b/web/src/components/file-uploader.tsx index a33fe9f61..72c4633b0 100644 --- a/web/src/components/file-uploader.tsx +++ b/web/src/components/file-uploader.tsx @@ -272,7 +272,7 @@ export function FileUploader(props: FileUploaderProps) {
{t('knowledgeDetails.uploadTitle')}

-

+

{description || t('knowledgeDetails.uploadDescription')} {/* You can upload {maxFileCount > 1 diff --git a/web/src/components/jsonjoy-builder/components/schema-editor/json-schema-visualizer.tsx b/web/src/components/jsonjoy-builder/components/schema-editor/json-schema-visualizer.tsx index 3e33da665..48ee8a957 100644 --- a/web/src/components/jsonjoy-builder/components/schema-editor/json-schema-visualizer.tsx +++ b/web/src/components/jsonjoy-builder/components/schema-editor/json-schema-visualizer.tsx @@ -11,6 +11,8 @@ export interface JsonSchemaVisualizerProps { schema: JSONSchema; className?: string; onChange?: (schema: JSONSchema) => void; + readOnly?: boolean; + showHeader?: boolean; } /** @public */ @@ -18,6 +20,8 @@ const JsonSchemaVisualizer: FC = ({ schema, className, onChange, + readOnly = false, + showHeader = true, }) => { const editorRef = useRef[0] | null>(null); const { @@ -73,20 +77,22 @@ const JsonSchemaVisualizer: FC = ({ 'jsonjoy', )} > -

-
- - {t.visualizerSource} + {showHeader && ( +
+
+ + {t.visualizerSource} +
+
- -
+ )}
= ({
} - options={defaultEditorOptions} + options={{ ...defaultEditorOptions, readOnly }} theme={currentTheme} />
diff --git a/web/src/components/jsonjoy-builder/hooks/use-monaco-theme.ts b/web/src/components/jsonjoy-builder/hooks/use-monaco-theme.ts index 3b805e939..cb06093ec 100644 --- a/web/src/components/jsonjoy-builder/hooks/use-monaco-theme.ts +++ b/web/src/components/jsonjoy-builder/hooks/use-monaco-theme.ts @@ -1,5 +1,5 @@ +import { useIsDarkTheme } from '@/components/theme-provider'; import type * as Monaco from 'monaco-editor'; -import { useEffect, useState } from 'react'; import type { JSONSchema } from '../types/json-schema.js'; export interface MonacoEditorOptions { @@ -63,36 +63,37 @@ export const defaultEditorOptions: MonacoEditorOptions = { }; export function useMonacoTheme() { - const [isDarkMode, setIsDarkMode] = useState(false); + // const [isDarkTheme, setisDarkTheme] = useState(false); + const isDarkTheme = useIsDarkTheme(); // Check for dark mode by examining CSS variables - useEffect(() => { - const checkDarkMode = () => { - // Get the current background color value - const backgroundColor = getComputedStyle(document.documentElement) - .getPropertyValue('--background') - .trim(); + // useEffect(() => { + // const checkDarkMode = () => { + // // Get the current background color value + // const backgroundColor = getComputedStyle(document.documentElement) + // .getPropertyValue('--background') + // .trim(); - // If the background color HSL has a low lightness value, it's likely dark mode - const isDark = - backgroundColor.includes('222.2') || - backgroundColor.includes('84% 4.9%'); + // // If the background color HSL has a low lightness value, it's likely dark mode + // const isDark = + // backgroundColor.includes('222.2') || + // backgroundColor.includes('84% 4.9%'); - setIsDarkMode(isDark); - }; + // setisDarkTheme(isDark); + // }; - // Check initially - checkDarkMode(); + // // Check initially + // checkDarkMode(); - // Set up a mutation observer to detect theme changes - const observer = new MutationObserver(checkDarkMode); - observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ['class', 'style'], - }); + // // Set up a mutation observer to detect theme changes + // const observer = new MutationObserver(checkDarkMode); + // observer.observe(document.documentElement, { + // attributes: true, + // attributeFilter: ['class', 'style'], + // }); - return () => observer.disconnect(); - }, []); + // return () => observer.disconnect(); + // }, []); const defineMonacoThemes = (monaco: typeof Monaco) => { // Define custom light theme that matches app colors @@ -199,8 +200,8 @@ export function useMonacoTheme() { }; return { - isDarkMode, - currentTheme: isDarkMode ? 'appDarkTheme' : 'appLightTheme', + isDarkTheme, + currentTheme: isDarkTheme ? 'appDarkTheme' : 'appLightTheme', defineMonacoThemes, configureJsonDefaults, defaultEditorOptions, diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx index 64e23d40a..bebf2a6b6 100644 --- a/web/src/components/ui/checkbox.tsx +++ b/web/src/components/ui/checkbox.tsx @@ -13,11 +13,11 @@ const Checkbox = React.forwardRef< -
+
- structured_output + {t('flow.structuredOutput.structuredOutput')}
+
diff --git a/web/src/pages/agent/form/agent-form/structured-output-panel.tsx b/web/src/pages/agent/form/agent-form/structured-output-panel.tsx new file mode 100644 index 000000000..64e13c6eb --- /dev/null +++ b/web/src/pages/agent/form/agent-form/structured-output-panel.tsx @@ -0,0 +1,13 @@ +import { JSONSchema, JsonSchemaVisualizer } from '@/components/jsonjoy-builder'; + +export function StructuredOutputPanel({ value }: { value: JSONSchema }) { + return ( +
+ +
+ ); +} diff --git a/web/src/pages/dataflow-result/index.tsx b/web/src/pages/dataflow-result/index.tsx index c63ff2a46..c15f71c66 100644 --- a/web/src/pages/dataflow-result/index.tsx +++ b/web/src/pages/dataflow-result/index.tsx @@ -190,7 +190,7 @@ const Chunk = () => { - {knowledgeId ? documentInfo?.name : t('dataflow.viewResult')} + {knowledgeId ? documentInfo?.name : t('flow.viewResult')} diff --git a/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx b/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx index 3029d176a..e62c1007e 100644 --- a/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx +++ b/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx @@ -124,7 +124,7 @@ export function EditMcpDialog({ form={form} setFieldChanged={setFieldChanged} > - +