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

@@ -272,7 +272,7 @@ export function FileUploader(props: FileUploaderProps) {
           <div
             {...getRootProps()}
             className={cn(
-              'group relative grid h-72 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-5 py-2.5 text-center transition hover:bg-muted/25',
+              'group relative grid h-72 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-border-default px-5 py-2.5 text-center transition hover:bg-muted/25 bg-accent-primary-5',
               'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
               isDragActive && 'border-muted-foreground/50',
               isDisabled && 'pointer-events-none opacity-60',
@@ -305,7 +305,7 @@ export function FileUploader(props: FileUploaderProps) {
                   <p className="font-medium text-muted-foreground">
                     {t('knowledgeDetails.uploadTitle')}
                   </p>
-                  <p className="text-sm text-muted-foreground/70">
+                  <p className="text-sm text-text-secondary">
                     {description || t('knowledgeDetails.uploadDescription')}
                     {/* You can upload
                     {maxFileCount > 1

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<JsonSchemaVisualizerProps> = ({
   schema,
   className,
   onChange,
+  readOnly = false,
+  showHeader = true,
 }) => {
   const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
   const {
@@ -73,6 +77,7 @@ const JsonSchemaVisualizer: FC<JsonSchemaVisualizerProps> = ({
         'jsonjoy',
       )}
     >
+      {showHeader && (
         <div className="flex items-center justify-between bg-secondary/80 backdrop-blur-xs px-4 py-2 border-b shrink-0">
           <div className="flex items-center gap-2">
             <FileJson size={18} />
@@ -87,6 +92,7 @@ const JsonSchemaVisualizer: FC<JsonSchemaVisualizerProps> = ({
             <Download size={16} />
           </button>
         </div>
+      )}
       <div className="grow flex min-h-0">
         <Editor
           height="100%"
@@ -101,7 +107,7 @@ const JsonSchemaVisualizer: FC<JsonSchemaVisualizerProps> = ({
               <Loader2 className="h-6 w-6 animate-spin" />
             </div>
           }
-          options={defaultEditorOptions}
+          options={{ ...defaultEditorOptions, readOnly }}
           theme={currentTheme}
         />
       </div>

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(() => {
+  // useEffect(() => {
-    const checkDarkMode = () => {
+  //   const checkDarkMode = () => {
-      // Get the current background color value
+  //     // Get the current background color value
-      const backgroundColor = getComputedStyle(document.documentElement)
+  //     const backgroundColor = getComputedStyle(document.documentElement)
-        .getPropertyValue('--background')
+  //       .getPropertyValue('--background')
-        .trim();
+  //       .trim();
 
-      // If the background color HSL has a low lightness value, it's likely dark mode
+  //     // If the background color HSL has a low lightness value, it's likely dark mode
-      const isDark =
+  //     const isDark =
-        backgroundColor.includes('222.2') ||
+  //       backgroundColor.includes('222.2') ||
-        backgroundColor.includes('84% 4.9%');
+  //       backgroundColor.includes('84% 4.9%');
 
-      setIsDarkMode(isDark);
+  //     setisDarkTheme(isDark);
-    };
+  //   };
 
-    // Check initially
+  //   // Check initially
-    checkDarkMode();
+  //   checkDarkMode();
 
-    // Set up a mutation observer to detect theme changes
+  //   // Set up a mutation observer to detect theme changes
-    const observer = new MutationObserver(checkDarkMode);
+  //   const observer = new MutationObserver(checkDarkMode);
-    observer.observe(document.documentElement, {
+  //   observer.observe(document.documentElement, {
-      attributes: true,
+  //     attributes: true,
-      attributeFilter: ['class', 'style'],
+  //     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,
+    isDarkTheme,
-    currentTheme: isDarkMode ? 'appDarkTheme' : 'appLightTheme',
+    currentTheme: isDarkTheme ? 'appDarkTheme' : 'appLightTheme',
     defineMonacoThemes,
     configureJsonDefaults,
     defaultEditorOptions,

web/src/components/ui/checkbox.tsx

@@ -13,11 +13,11 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer size-4 shrink-0 rounded-sm border border-border-button outline-0 transition-colors bg-bg-component',
+      'peer size-4 shrink-0 rounded-sm border border-text-secondary outline-0 transition-colors bg-bg-component',
       'hover:border-border-default hover:bg-border-button',
       'focus-visible:border-border-default focus-visible:bg-border-default',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[state=checked]:text-text-primary data-[state=checked]:border-border-default',
+      'data-[state=checked]:text-text-primary data-[state=checked]:border-text-primary',
       className,
     )}
     {...props}

web/src/pages/agent/form/agent-form/index.tsx

@@ -41,6 +41,7 @@ import { PromptEditor } from '../components/prompt-editor';
 import { QueryVariable } from '../components/query-variable';
 import { AgentTools, Agents } from './agent-tools';
 import { StructuredOutputDialog } from './structured-output-dialog';
+import { StructuredOutputPanel } from './structured-output-panel';
 import { useBuildPromptExtraPromptOptions } from './use-build-prompt-options';
 import { useShowStructuredOutputDialog } from './use-show-structured-output-dialog';
 import { useValues } from './use-values';
@@ -275,13 +276,16 @@ function AgentForm({ node }: INextOperatorForm) {
             </section>
           </Collapse>
           <Output list={outputList}></Output>
-          <section>
+          <section className="space-y-2">
             <div className="flex justify-between items-center">
-              structured_output
+              {t('flow.structuredOutput.structuredOutput')}
               <Button variant={'outline'} onClick={showStructuredOutputDialog}>
                 {t('flow.structuredOutput.configuration')}
               </Button>
             </div>
+            <StructuredOutputPanel
+              value={initialStructuredOutput}
+            ></StructuredOutputPanel>
           </section>
         </FormWrapper>
       </Form>

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 (
+    <section className="h-48">
+      <JsonSchemaVisualizer
+        schema={value}
+        readOnly
+        showHeader={false}
+      ></JsonSchemaVisualizer>
+    </section>
+  );
+}

web/src/pages/dataflow-result/index.tsx

@@ -190,7 +190,7 @@ const Chunk = () => {
             <BreadcrumbSeparator />
             <BreadcrumbItem>
               <BreadcrumbPage>
-                {knowledgeId ? documentInfo?.name : t('dataflow.viewResult')}
+                {knowledgeId ? documentInfo?.name : t('flow.viewResult')}
               </BreadcrumbPage>
             </BreadcrumbItem>
           </BreadcrumbList>

web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx

@@ -124,7 +124,7 @@ export function EditMcpDialog({
           form={form}
           setFieldChanged={setFieldChanged}
         ></EditMcpForm>
-        <Card>
+        <Card className="bg-transparent">
           <CardContent className="p-3">
             <Collapse
               title={