Skip to content

phsl / new-api

Go to a project
Commit eb4a1bd1 by QuentinHsu Committed by GitHub
Options

perf(json-editor): unify admin JSON editing experience (#6421) 

* perf(json-editor): improve JSON editing experience

- integrate Yace for syntax highlighting, history, indentation, auto-closing, and smart line breaks.
- add copy support, cursor location feedback, and synchronized content and line-number scrolling.
- extract JSON editor utilities and cover key interactions with unit tests.

* perf(system-settings): improve JSON configuration editing

- replace raw JSON textareas with the shared editor for highlighting, validation, copy, and formatting.
- preserve field-specific examples and make placeholders visible through the transparent editor layer.
- remove duplicate formatting controls while keeping existing form validation and save behavior.

* perf(json-editor): standardize JSON inputs across admin settings

- replace pure JSON textareas with the shared editor across system settings and channel workflows.
- preserve form focus, validation, placeholders, and visual or JSON editing modes.
- add happy-dom component coverage for form bindings, controlled updates, and formatting.

* fix(json-code-editor): address accessibility review findings

- Drop the unconditional aria-label that overrode every field's
  label-derived accessible name; add an optional ariaLabel prop and
  set it at call sites without an associated label
- Associate standalone Labels via htmlFor/id in channel-affinity views
- Hide the highlight mirror and line-number layers from the
  accessibility tree (aria-hidden)
- Give the line-number gutter an opaque background so horizontally
  scrolled code no longer slides under it
- Degrade to no scroll sync instead of destroying the editor when the
  line-number layer is not found
parent 18b0b763
Showing with 846 additions and 226 deletions
web/bun.lock
{ {
"lockfileVersion": 1, "lockfileVersion": 1,
"configVersion": 0,
"workspaces": { "workspaces": {
"": { "": {
"name": "newapi-web", "name": "newapi-web",
...@@ -59,6 +60,7 @@ ...@@ -59,6 +60,7 @@
"tw-animate-css": "^1.4.0", "tw-animate-css": "^1.4.0",
"use-stick-to-bottom": "^1.1.6", "use-stick-to-bottom": "^1.1.6",
"vaul": "^1.1.2", "vaul": "^1.1.2",
"yace": "^1.1.0",
"zod": "^4.4.3", "zod": "^4.4.3",
"zustand": "^5.0.14", "zustand": "^5.0.14",
}, },
...@@ -75,6 +77,7 @@ ...@@ -75,6 +77,7 @@
"@typescript/native-preview": "^7.0.0-dev.20260702.3", "@typescript/native-preview": "^7.0.0-dev.20260702.3",
"@xyflow/react": "^12.11.1", "@xyflow/react": "^12.11.1",
"embla-carousel-react": "^8.6.0", "embla-carousel-react": "^8.6.0",
"happy-dom": "^20.11.1",
"knip": "^6.24.0", "knip": "^6.24.0",
"oxfmt": "^0.57.0", "oxfmt": "^0.57.0",
"oxlint": "^1.72.0", "oxlint": "^1.72.0",
...@@ -926,6 +929,10 @@ ...@@ -926,6 +929,10 @@
"@types/validate-npm-package-name": ["@types/validate-npm-package-name@4.0.2", "", {}, "sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw=="], "@types/validate-npm-package-name": ["@types/validate-npm-package-name@4.0.2", "", {}, "sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw=="],
"@types/whatwg-mimetype": ["@types/whatwg-mimetype@3.0.2", "", {}, "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="],
"@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
"@typescript/native-preview": ["@typescript/native-preview@7.0.0-dev.20260707.2", "", { "optionalDependencies": { "@typescript/native-preview-darwin-arm64": "7.0.0-dev.20260707.2", "@typescript/native-preview-darwin-x64": "7.0.0-dev.20260707.2", "@typescript/native-preview-linux-arm": "7.0.0-dev.20260707.2", "@typescript/native-preview-linux-arm64": "7.0.0-dev.20260707.2", "@typescript/native-preview-linux-x64": "7.0.0-dev.20260707.2", "@typescript/native-preview-win32-arm64": "7.0.0-dev.20260707.2", "@typescript/native-preview-win32-x64": "7.0.0-dev.20260707.2" }, "bin": { "tsgo": "bin/tsgo" } }, "sha512-oUGp+Rep/hqMhPunyinsALUwSlzHINSxitifPiSaeqoKOKD2OlR9NE3TaPqwsl4NlGslsOSUXI1JotWQzpYCPg=="], "@typescript/native-preview": ["@typescript/native-preview@7.0.0-dev.20260707.2", "", { "optionalDependencies": { "@typescript/native-preview-darwin-arm64": "7.0.0-dev.20260707.2", "@typescript/native-preview-darwin-x64": "7.0.0-dev.20260707.2", "@typescript/native-preview-linux-arm": "7.0.0-dev.20260707.2", "@typescript/native-preview-linux-arm64": "7.0.0-dev.20260707.2", "@typescript/native-preview-linux-x64": "7.0.0-dev.20260707.2", "@typescript/native-preview-win32-arm64": "7.0.0-dev.20260707.2", "@typescript/native-preview-win32-x64": "7.0.0-dev.20260707.2" }, "bin": { "tsgo": "bin/tsgo" } }, "sha512-oUGp+Rep/hqMhPunyinsALUwSlzHINSxitifPiSaeqoKOKD2OlR9NE3TaPqwsl4NlGslsOSUXI1JotWQzpYCPg=="],
"@typescript/native-preview-darwin-arm64": ["@typescript/native-preview-darwin-arm64@7.0.0-dev.20260707.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-wny2pgKjGbiZtnOIHVa3tXC1UfDqxNEFzyPGmiqybedG8hipG2Nfp0l5UxbaKCjkLacUpH/W5bP2hBOMVhCOzg=="], "@typescript/native-preview-darwin-arm64": ["@typescript/native-preview-darwin-arm64@7.0.0-dev.20260707.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-wny2pgKjGbiZtnOIHVa3tXC1UfDqxNEFzyPGmiqybedG8hipG2Nfp0l5UxbaKCjkLacUpH/W5bP2hBOMVhCOzg=="],
...@@ -1054,6 +1061,8 @@ ...@@ -1054,6 +1061,8 @@
"buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="], "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
"buffer-image-size": ["buffer-image-size@0.6.4", "", { "dependencies": { "@types/node": "*" } }, "sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ=="],
"bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="], "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
"bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="], "bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="],
...@@ -1288,7 +1297,7 @@ ...@@ -1288,7 +1297,7 @@
"enquirer": ["enquirer@2.4.1", "", { "dependencies": { "ansi-colors": "^4.1.1", "strip-ansi": "^6.0.1" } }, "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ=="], "enquirer": ["enquirer@2.4.1", "", { "dependencies": { "ansi-colors": "^4.1.1", "strip-ansi": "^6.0.1" } }, "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ=="],
"entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="], "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
"env-paths": ["env-paths@2.2.1", "", {}, "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="], "env-paths": ["env-paths@2.2.1", "", {}, "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="],
...@@ -1438,6 +1447,8 @@ ...@@ -1438,6 +1447,8 @@
"hachure-fill": ["hachure-fill@0.5.2", "", {}, "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="], "hachure-fill": ["hachure-fill@0.5.2", "", {}, "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="],
"happy-dom": ["happy-dom@20.11.1", "", { "dependencies": { "@types/node": ">=20.0.0", "@types/whatwg-mimetype": "^3.0.2", "@types/ws": "^8.18.1", "buffer-image-size": "^0.6.4", "entities": "^7.0.1", "whatwg-mimetype": "^3.0.0", "ws": "^8.21.0" } }, "sha512-XSt8tMzbW9ymE7687xztkO1ckR7qJNQ3LywY9vlYGhGi3zXrGBHuUo2Cl1ztZaICW+1eAGdkLbj6iwVqDT33kg=="],
"has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="], "has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
"has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="], "has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="],
...@@ -2382,12 +2393,18 @@ ...@@ -2382,12 +2393,18 @@
"webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="], "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
"whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
"which": ["which@4.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="], "which": ["which@4.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="],
"wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="], "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="],
"ws": ["ws@8.21.1", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw=="],
"wsl-utils": ["wsl-utils@0.3.1", "", { "dependencies": { "is-wsl": "^3.1.0", "powershell-utils": "^0.1.0" } }, "sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg=="], "wsl-utils": ["wsl-utils@0.3.1", "", { "dependencies": { "is-wsl": "^3.1.0", "powershell-utils": "^0.1.0" } }, "sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg=="],
"yace": ["yace@1.1.0", "", {}, "sha512-jB29trAxPBvTIR/lXsgh97q22n/Rq5ZHbDT4DT6WUvXVlJLR7jdwiBKD+0zi3XZAD5N+YKa3GrdIrelqIXj2oQ=="],
"yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="], "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
"yaml": ["yaml@2.9.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA=="], "yaml": ["yaml@2.9.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA=="],
...@@ -2528,6 +2545,8 @@ ...@@ -2528,6 +2545,8 @@
"log-symbols/is-unicode-supported": ["is-unicode-supported@1.3.0", "", {}, "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ=="], "log-symbols/is-unicode-supported": ["is-unicode-supported@1.3.0", "", {}, "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ=="],
"markdown-it-ts/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
"mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="], "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
"mermaid/katex": ["katex@0.16.47", "", { "dependencies": { "commander": "^8.3.0" }, "bin": { "katex": "cli.js" } }, "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg=="], "mermaid/katex": ["katex@0.16.47", "", { "dependencies": { "commander": "^8.3.0" }, "bin": { "katex": "cli.js" } }, "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg=="],
......
web/package.json
...@@ -74,6 +74,7 @@ ...@@ -74,6 +74,7 @@
"tw-animate-css": "^1.4.0", "tw-animate-css": "^1.4.0",
"use-stick-to-bottom": "^1.1.6", "use-stick-to-bottom": "^1.1.6",
"vaul": "^1.1.2", "vaul": "^1.1.2",
"yace": "^1.1.0",
"zod": "^4.4.3", "zod": "^4.4.3",
"zustand": "^5.0.14" "zustand": "^5.0.14"
}, },
...@@ -90,6 +91,7 @@ ...@@ -90,6 +91,7 @@
"@typescript/native-preview": "^7.0.0-dev.20260702.3", "@typescript/native-preview": "^7.0.0-dev.20260702.3",
"@xyflow/react": "^12.11.1", "@xyflow/react": "^12.11.1",
"embla-carousel-react": "^8.6.0", "embla-carousel-react": "^8.6.0",
"happy-dom": "^20.11.1",
"knip": "^6.24.0", "knip": "^6.24.0",
"oxfmt": "^0.57.0", "oxfmt": "^0.57.0",
"oxlint": "^1.72.0", "oxlint": "^1.72.0",
......
web/src/components/json-code-editor/__tests__/json-code-editor-utils.test.ts 0 → 100644
/*
Copyright (C) 2023-2026 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import assert from 'node:assert/strict'
import { describe, test } from 'node:test'
import {
applyJsonSmartEnter,
createScrollLayerSynchronizer,
formatJsonDraft,
getCursorLocation,
getJsonValidationState,
} from '../json-code-editor-utils'
describe('json code editor utils', () => {
test('treats empty drafts as valid editable JSON drafts', () => {
assert.deepEqual(getJsonValidationState(' \n'), {
isValid: true,
messageKey: 'JSON',
})
})
test('reports invalid JSON without throwing away the draft', () => {
assert.deepEqual(getJsonValidationState('{"model": }'), {
isValid: false,
messageKey: 'Invalid JSON',
})
})
test('formats valid JSON with stable two-space indentation', () => {
assert.deepEqual(formatJsonDraft('{"model":{"ratio":2}}'), {
didFormat: true,
value: '{\n "model": {\n "ratio": 2\n }\n}',
})
})
test('keeps invalid JSON drafts unchanged when formatting is requested', () => {
assert.deepEqual(formatJsonDraft('{"model": }'), {
didFormat: false,
value: '{"model": }',
})
})
test('derives the one-based cursor line and column from text offsets', () => {
assert.deepEqual(getCursorLocation('{\n "model": 1\n}', 5), {
line: 2,
column: 4,
})
})
test('expands paired JSON brackets with a nested indentation line', () => {
assert.deepEqual(applyJsonSmartEnter('{}', 1, 1), {
value: '{\n \n}',
selectionStart: 4,
selectionEnd: 4,
})
})
test('coalesces scroll updates while keeping line numbers horizontally fixed', () => {
const source = { scrollLeft: 12, scrollTop: 40 }
const contentLayer = { style: { transform: '' } }
const lineNumberLayer = { style: { transform: '' } }
const queuedFrames: Array<() => void> = []
const synchronizer = createScrollLayerSynchronizer(
source,
{ contentLayer, lineNumberLayer },
(callback) => {
queuedFrames.push(callback)
return queuedFrames.length
}
)
synchronizer.sync()
source.scrollLeft = 24
source.scrollTop = 80
synchronizer.sync()
assert.equal(queuedFrames.length, 1)
queuedFrames[0]()
assert.equal(contentLayer.style.transform, 'translate3d(-24px, -80px, 0)')
assert.equal(lineNumberLayer.style.transform, 'translate3d(0, -80px, 0)')
})
})
web/src/components/json-code-editor/__tests__/json-code-editor.test.tsx 0 → 100644
/*
Copyright (C) 2023-2026 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import assert from 'node:assert/strict'
import { after, describe, test } from 'node:test'
import { Window } from 'happy-dom'
const domWindow = new Window()
const domGlobals = [
'window',
'document',
'navigator',
'HTMLElement',
'HTMLTextAreaElement',
'Node',
'Element',
'Event',
'CustomEvent',
'MutationObserver',
'requestAnimationFrame',
'cancelAnimationFrame',
'getComputedStyle',
] as const
for (const key of domGlobals) {
Object.defineProperty(globalThis, key, {
configurable: true,
value: domWindow[key],
})
}
const { act } = await import('react')
const { createRoot } = await import('react-dom/client')
const i18next = (await import('i18next')).default
const { initReactI18next } = await import('react-i18next')
await i18next.use(initReactI18next).init({
lng: 'en',
resources: {
en: {
translation: {
JSON: 'JSON',
'Invalid JSON': 'Invalid JSON',
'Copied to clipboard': 'Copied to clipboard',
'Failed to copy': 'Failed to copy',
'Format JSON': 'Format JSON',
},
},
},
})
const { JsonCodeEditor } = await import('../../json-code-editor')
const reactTestGlobals = globalThis as typeof globalThis & {
IS_REACT_ACT_ENVIRONMENT?: boolean
}
reactTestGlobals.IS_REACT_ACT_ENVIRONMENT = true
type RenderedEditor = {
container: HTMLDivElement
root: ReturnType<typeof createRoot>
}
async function renderEditor(
props: React.ComponentProps<typeof JsonCodeEditor>
): Promise<RenderedEditor> {
const container = document.createElement('div')
document.body.append(container)
const root = createRoot(container)
await act(async () => {
root.render(<JsonCodeEditor {...props} />)
})
return { container, root }
}
async function unmountEditor(rendered: RenderedEditor) {
await act(async () => rendered.root.unmount())
rendered.container.remove()
}
describe('JsonCodeEditor component', () => {
after(() => {
domWindow.close()
})
test('forwards form attributes and lifecycle callbacks to the textarea', async () => {
const blurCalls: number[] = []
const refValues: Array<HTMLTextAreaElement | null> = []
const rendered = await renderEditor({
value: '{"model":"gpt"}',
onChange: () => undefined,
id: 'json-input',
name: 'model_config',
placeholder: '{"model":"gpt"}',
disabled: true,
'aria-describedby': 'model-help',
'aria-invalid': true,
'data-form-root': 'settings-form',
onBlur: () => blurCalls.push(1),
textareaRef: (element) => refValues.push(element),
})
const textarea = rendered.container.querySelector('textarea')
assert.ok(textarea)
assert.equal(textarea.id, 'json-input')
assert.equal(textarea.name, 'model_config')
assert.equal(textarea.placeholder, '{"model":"gpt"}')
assert.equal(textarea.disabled, true)
assert.equal(textarea.getAttribute('aria-describedby'), 'model-help')
assert.equal(textarea.getAttribute('aria-invalid'), 'true')
assert.equal(textarea.getAttribute('data-form-root'), 'settings-form')
await act(async () => textarea.dispatchEvent(new Event('blur')))
assert.deepEqual(blurCalls, [1])
assert.equal(refValues[0], textarea)
await unmountEditor(rendered)
assert.equal(refValues.at(-1), null)
})
test('emits user edits and synchronizes a controlled value', async () => {
const changes: string[] = []
const rendered = await renderEditor({
value: '{"count":1}',
onChange: (value) => changes.push(value),
})
const textarea = rendered.container.querySelector('textarea')
assert.ok(textarea)
await act(async () => {
textarea.value = '{"count":2}'
textarea.dispatchEvent(new Event('input', { bubbles: true }))
})
assert.deepEqual(changes, ['{"count":2}'])
await act(async () => {
rendered.root.render(
<JsonCodeEditor
value='{"count":3}'
onChange={(value) => changes.push(value)}
/>
)
})
assert.equal(textarea.value, '{"count":3}')
await unmountEditor(rendered)
})
test('formats valid JSON through the public toolbar action', async () => {
const changes: string[] = []
const rendered = await renderEditor({
value: '{"model":{"ratio":2}}',
onChange: (value) => changes.push(value),
})
const formatButton = [
...rendered.container.querySelectorAll('button'),
].find((button) => button.textContent?.includes('Format JSON'))
assert.ok(formatButton)
await act(async () => formatButton.click())
assert.deepEqual(changes, ['{\n "model": {\n "ratio": 2\n }\n}'])
await unmountEditor(rendered)
})
})
web/src/components/json-code-editor/json-code-editor-utils.ts 0 → 100644
/*
Copyright (C) 2023-2026 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import type { Plugin, TextareaProps } from 'yace'
export type JsonValidationState = {
isValid: boolean
messageKey: 'JSON' | 'Invalid JSON'
}
export type JsonFormatResult = {
didFormat: boolean
value: string
}
export type CursorLocation = {
line: number
column: number
}
type ScrollSource = {
scrollLeft: number
scrollTop: number
}
type TransformLayer = {
style: Pick<CSSStyleDeclaration, 'transform'>
}
type ScrollLayers = {
contentLayer: TransformLayer
lineNumberLayer: TransformLayer
}
type RequestFrame = (callback: () => void) => number
export type ScrollLayerSynchronizer = {
sync: () => void
}
export function getJsonValidationState(value: string): JsonValidationState {
const trimmed = value.trim()
if (!trimmed) {
return { isValid: true, messageKey: 'JSON' }
}
try {
JSON.parse(trimmed)
return { isValid: true, messageKey: 'JSON' }
} catch {
return { isValid: false, messageKey: 'Invalid JSON' }
}
}
export function formatJsonDraft(value: string): JsonFormatResult {
const trimmed = value.trim()
if (!trimmed) {
return { didFormat: false, value }
}
try {
return {
didFormat: true,
value: JSON.stringify(JSON.parse(trimmed), null, 2),
}
} catch {
return { didFormat: false, value }
}
}
export function getCursorLocation(
value: string,
selectionStart: number
): CursorLocation {
const boundedSelectionStart = Math.min(
Math.max(selectionStart, 0),
value.length
)
const linesBeforeCursor = value.slice(0, boundedSelectionStart).split('\n')
const currentLine = linesBeforeCursor.at(-1) ?? ''
return {
line: linesBeforeCursor.length,
column: currentLine.length + 1,
}
}
export function createScrollLayerSynchronizer(
source: ScrollSource,
layers: ScrollLayers,
requestFrame: RequestFrame = window.requestAnimationFrame
): ScrollLayerSynchronizer {
let hasPendingFrame = false
return {
sync: () => {
if (hasPendingFrame) {
return
}
hasPendingFrame = true
requestFrame(() => {
hasPendingFrame = false
layers.contentLayer.style.transform = `translate3d(-${source.scrollLeft}px, -${source.scrollTop}px, 0)`
layers.lineNumberLayer.style.transform = `translate3d(0, -${source.scrollTop}px, 0)`
})
},
}
}
export function applyJsonSmartEnter(
value: string,
selectionStart: number,
selectionEnd: number
): TextareaProps | undefined {
const before = value.slice(0, selectionStart)
const after = value.slice(selectionEnd)
const indent = getLineIndent(value, selectionStart)
const previousChar = before.trimEnd().at(-1)
const nextChar = after.trimStart().at(0)
const shouldNest = previousChar === '{' || previousChar === '['
const shouldClose =
(previousChar === '{' && nextChar === '}') ||
(previousChar === '[' && nextChar === ']')
if (shouldNest && shouldClose) {
const innerIndent = `${indent} `
const insert = `\n${innerIndent}\n${indent}`
const nextSelection = selectionStart + 1 + innerIndent.length
return {
value: `${before}${insert}${after}`,
selectionStart: nextSelection,
selectionEnd: nextSelection,
}
}
if (!indent && !shouldNest) {
return undefined
}
const nextIndent = shouldNest ? `${indent} ` : indent
const insert = `\n${nextIndent}`
const nextSelection = selectionStart + insert.length
return {
value: `${before}${insert}${after}`,
selectionStart: nextSelection,
selectionEnd: nextSelection,
}
}
export function jsonSmartEnter(): Plugin {
return (props, event) => {
if (event.type !== 'keydown') {
return undefined
}
const keyboardEvent = event as KeyboardEvent
if (keyboardEvent.key !== 'Enter') {
return undefined
}
const nextProps = applyJsonSmartEnter(
props.value,
props.selectionStart,
props.selectionEnd
)
if (!nextProps) {
return undefined
}
event.preventDefault()
return nextProps
}
}
function getLineIndent(value: string, cursor: number): string {
const lineStart = value.lastIndexOf('\n', cursor - 1) + 1
return value.slice(lineStart, cursor).match(/^\s*/)?.[0] ?? ''
}
web/src/components/json-editor.tsx
...@@ -20,10 +20,9 @@ import { Code, Table, Plus, Trash2 } from 'lucide-react' ...@@ -20,10 +20,9 @@ import { Code, Table, Plus, Trash2 } from 'lucide-react'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { cn } from '@/lib/utils'
type JsonEditorProps = { type JsonEditorProps = {
value: string value: string
...@@ -285,15 +284,14 @@ export function JsonEditor({ ...@@ -285,15 +284,14 @@ export function JsonEditor({
</Button> </Button>
</div> </div>
) : ( ) : (
<Textarea <JsonCodeEditor
value={jsonValue} value={jsonValue}
onChange={(e) => handleJsonChange(e.target.value)} onChange={handleJsonChange}
placeholder={ placeholder={
template ? JSON.stringify(template, null, 2) : '{"key": "value"}' template ? JSON.stringify(template, null, 2) : '{"key": "value"}'
} }
disabled={disabled} disabled={disabled}
rows={8} ariaLabel={t('JSON')}
className={cn('font-mono text-sm')}
/> />
)} )}
</div> </div>
......
web/src/features/channels/components/dialogs/advanced-custom-editor-dialog.tsx
...@@ -33,6 +33,7 @@ import { useTranslation } from 'react-i18next' ...@@ -33,6 +33,7 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import { Dialog } from '@/components/dialog' import { Dialog } from '@/components/dialog'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Alert, AlertDescription } from '@/components/ui/alert' import { Alert, AlertDescription } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
...@@ -54,7 +55,6 @@ import { ...@@ -54,7 +55,6 @@ import {
SelectValue, SelectValue,
} from '@/components/ui/select' } from '@/components/ui/select'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Textarea } from '@/components/ui/textarea'
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
...@@ -461,12 +461,6 @@ export function AdvancedCustomEditorDialog({ ...@@ -461,12 +461,6 @@ export function AdvancedCustomEditorDialog({
if (jsonError) setJsonError('') if (jsonError) setJsonError('')
} }
const formatJson = () => {
const parsed = parseJsonEditorConfig()
if (!parsed) return
setJsonText(stringifyAdvancedCustomConfig(parsed))
}
const applyTemplate = (mode: 'fill' | 'append') => { const applyTemplate = (mode: 'fill' | 'append') => {
const templateConfig = getAdvancedCustomTemplateConfig(templateKey) const templateConfig = getAdvancedCustomTemplateConfig(templateKey)
let nextConfig = templateConfig let nextConfig = templateConfig
...@@ -713,26 +707,19 @@ export function AdvancedCustomEditorDialog({ ...@@ -713,26 +707,19 @@ export function AdvancedCustomEditorDialog({
) : ( ) : (
<div className='p-4'> <div className='p-4'>
<div className='mb-2 flex items-center gap-2'> <div className='mb-2 flex items-center gap-2'>
<Button
type='button'
variant='outline'
size='sm'
onClick={formatJson}
>
{t('Format')}
</Button>
<span className='text-muted-foreground text-xs'> <span className='text-muted-foreground text-xs'>
{t('Advanced text editing')} {t('Advanced text editing')}
</span> </span>
</div> </div>
<Textarea <JsonCodeEditor
value={jsonText} value={jsonText}
onChange={(event) => handleJsonChange(event.target.value)} onChange={handleJsonChange}
placeholder={stringifyAdvancedCustomConfig( placeholder={stringifyAdvancedCustomConfig(
getAdvancedCustomTemplateConfig(templateKey) getAdvancedCustomTemplateConfig(templateKey)
)} )}
rows={22} heightClassName='h-[420px] min-h-[420px] max-h-[420px]'
className='min-h-[420px] font-mono text-xs' aria-invalid={Boolean(jsonError)}
ariaLabel={t('Advanced text editing')}
/> />
<p className='text-muted-foreground mt-2 text-xs'> <p className='text-muted-foreground mt-2 text-xs'>
{t('Edit JSON text directly. Format will be validated on save.')} {t('Edit JSON text directly. Format will be validated on save.')}
......
web/src/features/channels/components/dialogs/edit-tag-dialog.tsx
...@@ -24,6 +24,7 @@ import { toast } from 'sonner' ...@@ -24,6 +24,7 @@ import { toast } from 'sonner'
import { Dialog } from '@/components/dialog' import { Dialog } from '@/components/dialog'
import { GroupBadge } from '@/components/group-badge' import { GroupBadge } from '@/components/group-badge'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { StatusBadge } from '@/components/status-badge' import { StatusBadge } from '@/components/status-badge'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
...@@ -38,7 +39,6 @@ import { ...@@ -38,7 +39,6 @@ import {
SelectValue, SelectValue,
} from '@/components/ui/select' } from '@/components/ui/select'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Textarea } from '@/components/ui/textarea'
import { import {
editTagChannels, editTagChannels,
...@@ -370,13 +370,12 @@ export function EditTagDialog({ open, onOpenChange }: EditTagDialogProps) { ...@@ -370,13 +370,12 @@ export function EditTagDialog({ open, onOpenChange }: EditTagDialogProps) {
{t('(Optional: redirect model names)')} {t('(Optional: redirect model names)')}
</span> </span>
</Label> </Label>
<Textarea <JsonCodeEditor
id='model-mapping' id='model-mapping'
value={modelMapping} value={modelMapping}
onChange={(e) => setModelMapping(e.target.value)} onChange={setModelMapping}
placeholder={'{\n "gpt-3.5-turbo": "gpt-3.5-turbo-0125"\n}'} placeholder={'{\n "gpt-3.5-turbo": "gpt-3.5-turbo-0125"\n}'}
rows={4} heightClassName='h-40 min-h-40 max-h-40'
className='font-mono text-sm'
/> />
<div className='flex gap-2'> <div className='flex gap-2'>
<Button <Button
......
web/src/features/channels/components/dialogs/param-override-editor-dialog.tsx
...@@ -37,6 +37,7 @@ import { useTranslation } from 'react-i18next' ...@@ -37,6 +37,7 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import { Dialog } from '@/components/dialog' import { Dialog } from '@/components/dialog'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { import {
...@@ -1656,17 +1657,6 @@ export function ParamOverrideEditorDialog( ...@@ -1656,17 +1657,6 @@ export function ParamOverrideEditorDialog(
[t] [t]
) )
const formatJson = useCallback(() => {
const trimmed = jsonText.trim()
if (!trimmed) return
if (!verifyJSON(trimmed)) {
toast.error(t('Parameter override must be valid JSON format'))
return
}
setJsonText(JSON.stringify(JSON.parse(trimmed), null, 2))
setJsonError('')
}, [jsonText, t])
const visualValidationError = useMemo(() => { const visualValidationError = useMemo(() => {
if (editMode !== 'visual') return '' if (editMode !== 'visual') return ''
try { try {
...@@ -1832,12 +1822,12 @@ export function ParamOverrideEditorDialog( ...@@ -1832,12 +1822,12 @@ export function ParamOverrideEditorDialog(
<p className='text-muted-foreground mb-2 text-sm'> <p className='text-muted-foreground mb-2 text-sm'>
{t('Legacy Format (JSON Object)')} {t('Legacy Format (JSON Object)')}
</p> </p>
<Textarea <JsonCodeEditor
value={legacyValue} value={legacyValue}
onChange={(e) => setLegacyValue(e.target.value)} onChange={setLegacyValue}
placeholder={JSON.stringify(LEGACY_TEMPLATE, null, 2)} placeholder={JSON.stringify(LEGACY_TEMPLATE, null, 2)}
rows={14} heightClassName='h-72 min-h-72 max-h-72'
className='font-mono text-xs' ariaLabel={t('Legacy Format (JSON Object)')}
/> />
<p className='text-muted-foreground mt-2 text-xs'> <p className='text-muted-foreground mt-2 text-xs'>
{t( {t(
...@@ -2044,24 +2034,17 @@ export function ParamOverrideEditorDialog( ...@@ -2044,24 +2034,17 @@ export function ParamOverrideEditorDialog(
/* JSON mode */ /* JSON mode */
<div className='p-4'> <div className='p-4'>
<div className='mb-2 flex items-center gap-2'> <div className='mb-2 flex items-center gap-2'>
<Button
type='button'
variant='outline'
size='sm'
onClick={formatJson}
>
{t('Format')}
</Button>
<span className='text-muted-foreground text-xs'> <span className='text-muted-foreground text-xs'>
{t('Advanced text editing')} {t('Advanced text editing')}
</span> </span>
</div> </div>
<Textarea <JsonCodeEditor
value={jsonText} value={jsonText}
onChange={(e) => handleJsonChange(e.target.value)} onChange={handleJsonChange}
placeholder={JSON.stringify(OPERATION_TEMPLATE, null, 2)} placeholder={JSON.stringify(OPERATION_TEMPLATE, null, 2)}
rows={20} heightClassName='h-[420px] min-h-[420px] max-h-[420px]'
className='font-mono text-xs' aria-invalid={Boolean(jsonError)}
ariaLabel={t('Advanced text editing')}
/> />
<p className='text-muted-foreground mt-2 text-xs'> <p className='text-muted-foreground mt-2 text-xs'>
{t('Edit JSON text directly. Format will be validated on save.')} {t('Edit JSON text directly. Format will be validated on save.')}
......
web/src/features/channels/components/drawers/channel-mutate-drawer.tsx
...@@ -63,6 +63,7 @@ import { ...@@ -63,6 +63,7 @@ import {
sideDrawerSectionClassName, sideDrawerSectionClassName,
sideDrawerSwitchItemClassName, sideDrawerSwitchItemClassName,
} from '@/components/drawer-layout' } from '@/components/drawer-layout'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { JsonEditor } from '@/components/json-editor' import { JsonEditor } from '@/components/json-editor'
import { MultiSelect } from '@/components/multi-select' import { MultiSelect } from '@/components/multi-select'
import { Alert, AlertDescription } from '@/components/ui/alert' import { Alert, AlertDescription } from '@/components/ui/alert'
...@@ -3912,17 +3913,18 @@ export function ChannelMutateDrawer({ ...@@ -3912,17 +3913,18 @@ export function ChannelMutateDrawer({
</div> </div>
</div> </div>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
value={field.value || ''} value={field.value || ''}
onChange={field.onChange} onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
disabled={ disabled={
sensitiveLocked || isSubmitting sensitiveLocked || isSubmitting
} }
rows={8}
placeholder={t( placeholder={t(
'Override request parameters. Cannot override stream parameter.' 'Override request parameters. Cannot override stream parameter.'
)} )}
className='max-h-72 min-h-40 resize-y overflow-auto font-mono text-xs'
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
...@@ -3986,25 +3988,6 @@ export function ChannelMutateDrawer({ ...@@ -3986,25 +3988,6 @@ export function ChannelMutateDrawer({
</Button> </Button>
<Button <Button
type='button' type='button'
variant='outline'
size='sm'
onClick={() => {
try {
const parsed = JSON.parse(
field.value || '{}'
)
field.onChange(
JSON.stringify(parsed, null, 2)
)
} catch {
/* ignore invalid JSON */
}
}}
>
{t('Format')}
</Button>
<Button
type='button'
variant='ghost' variant='ghost'
size='sm' size='sm'
onClick={() => field.onChange('')} onClick={() => field.onChange('')}
...@@ -4014,17 +3997,19 @@ export function ChannelMutateDrawer({ ...@@ -4014,17 +3997,19 @@ export function ChannelMutateDrawer({
</div> </div>
</div> </div>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
className='font-mono text-sm'
rows={6}
value={field.value || ''} value={field.value || ''}
onChange={field.onChange} onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
disabled={ disabled={
sensitiveLocked || isSubmitting sensitiveLocked || isSubmitting
} }
placeholder={t( placeholder={t(
'Enter JSON to override request headers' 'Enter JSON to override request headers'
)} )}
heightClassName='h-40 min-h-40 max-h-40'
/> />
</FormControl> </FormControl>
<FormDescription className='text-xs'> <FormDescription className='text-xs'>
......
web/src/features/channels/components/model-mapping-editor.tsx
...@@ -20,12 +20,11 @@ import { Code, Plus, Table, Trash2 } from 'lucide-react' ...@@ -20,12 +20,11 @@ import { Code, Plus, Table, Trash2 } from 'lucide-react'
import { useEffect, useId, useMemo, useRef, useState } from 'react' import { useEffect, useId, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Alert, AlertDescription } from '@/components/ui/alert' import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Textarea } from '@/components/ui/textarea'
import { cn } from '@/lib/utils'
type ModelMappingEditorProps = { type ModelMappingEditorProps = {
value: string value: string
...@@ -327,17 +326,14 @@ export function ModelMappingEditor(props: ModelMappingEditorProps) { ...@@ -327,17 +326,14 @@ export function ModelMappingEditor(props: ModelMappingEditorProps) {
</Button> </Button>
</TabsContent> </TabsContent>
<TabsContent value='json'> <TabsContent value='json'>
<Textarea <JsonCodeEditor
value={jsonValue} value={jsonValue}
onChange={(e) => handleJsonChange(e.target.value)} onChange={handleJsonChange}
placeholder={t('{"original-model": "replacement-model"}')} placeholder={t('{"original-model": "replacement-model"}')}
disabled={props.disabled} disabled={props.disabled}
rows={8} className={jsonError ? 'border-destructive' : undefined}
className={cn(
'font-mono text-sm',
jsonError && 'border-destructive'
)}
aria-invalid={Boolean(jsonError)} aria-invalid={Boolean(jsonError)}
ariaLabel={t('Model Mapping')}
/> />
</TabsContent> </TabsContent>
</Tabs> </Tabs>
......
web/src/features/models/components/dialogs/create-deployment-drawer.tsx
...@@ -31,6 +31,7 @@ import { ...@@ -31,6 +31,7 @@ import {
sideDrawerFormClassName, sideDrawerFormClassName,
sideDrawerHeaderClassName, sideDrawerHeaderClassName,
} from '@/components/drawer-layout' } from '@/components/drawer-layout'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { MultiSelect } from '@/components/multi-select' import { MultiSelect } from '@/components/multi-select'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { import {
...@@ -59,7 +60,6 @@ import { ...@@ -59,7 +60,6 @@ import {
SheetHeader, SheetHeader,
SheetTitle, SheetTitle,
} from '@/components/ui/sheet' } from '@/components/ui/sheet'
import { Textarea } from '@/components/ui/textarea'
import { import {
checkClusterNameAvailability, checkClusterNameAvailability,
...@@ -702,10 +702,14 @@ export function CreateDeploymentDrawer({ ...@@ -702,10 +702,14 @@ export function CreateDeploymentDrawer({
<FormItem> <FormItem>
<FormLabel>{t('Environment variables (JSON)')}</FormLabel> <FormLabel>{t('Environment variables (JSON)')}</FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
className='min-h-24 font-mono text-xs' value={field.value || ''}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder='{"KEY":"VALUE"}' placeholder='{"KEY":"VALUE"}'
{...field} heightClassName='h-40 min-h-40 max-h-40'
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
...@@ -722,10 +726,14 @@ export function CreateDeploymentDrawer({ ...@@ -722,10 +726,14 @@ export function CreateDeploymentDrawer({
{t('Secret environment variables (JSON)')} {t('Secret environment variables (JSON)')}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
className='min-h-24 font-mono text-xs' value={field.value || ''}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder='{"SECRET":"VALUE"}' placeholder='{"SECRET":"VALUE"}'
{...field} heightClassName='h-40 min-h-40 max-h-40'
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
......
web/src/features/models/components/dialogs/update-config-dialog.tsx
...@@ -26,6 +26,7 @@ import { toast } from 'sonner' ...@@ -26,6 +26,7 @@ import { toast } from 'sonner'
import { z } from 'zod' import { z } from 'zod'
import { Dialog } from '@/components/dialog' import { Dialog } from '@/components/dialog'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { import {
Collapsible, Collapsible,
...@@ -41,7 +42,6 @@ import { ...@@ -41,7 +42,6 @@ import {
FormMessage, FormMessage,
} from '@/components/ui/form' } from '@/components/ui/form'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { getDeployment, updateDeployment } from '../../api' import { getDeployment, updateDeployment } from '../../api'
import { deploymentsQueryKeys } from '../../lib' import { deploymentsQueryKeys } from '../../lib'
...@@ -398,10 +398,14 @@ export function UpdateConfigDialog({ ...@@ -398,10 +398,14 @@ export function UpdateConfigDialog({
<FormItem> <FormItem>
<FormLabel>{t('Env (JSON object)')}</FormLabel> <FormLabel>{t('Env (JSON object)')}</FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
className='min-h-40 font-mono text-xs' value={field.value || ''}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder='{"KEY":"VALUE"}' placeholder='{"KEY":"VALUE"}'
{...field} heightClassName='h-40 min-h-40 max-h-40'
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
...@@ -415,10 +419,14 @@ export function UpdateConfigDialog({ ...@@ -415,10 +419,14 @@ export function UpdateConfigDialog({
<FormItem> <FormItem>
<FormLabel>{t('Secret env (JSON object)')}</FormLabel> <FormLabel>{t('Secret env (JSON object)')}</FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
className='min-h-40 font-mono text-xs' value={field.value || ''}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder='{"SECRET":"VALUE"}' placeholder='{"SECRET":"VALUE"}'
{...field} heightClassName='h-40 min-h-40 max-h-40'
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
......
web/src/features/system-settings/auth/custom-oauth/components/provider-form-dialog.tsx
...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next' ...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next'
import { CopyButton } from '@/components/copy-button' import { CopyButton } from '@/components/copy-button'
import { Dialog } from '@/components/dialog' import { Dialog } from '@/components/dialog'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { import {
...@@ -45,7 +46,6 @@ import { ...@@ -45,7 +46,6 @@ import {
} from '@/components/ui/select' } from '@/components/ui/select'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { import {
SettingsForm, SettingsForm,
...@@ -604,12 +604,16 @@ export function ProviderFormDialog(props: ProviderFormDialogProps) { ...@@ -604,12 +604,16 @@ export function ProviderFormDialog(props: ProviderFormDialogProps) {
<FormItem> <FormItem>
<FormLabel>{t('Access Policy (JSON)')}</FormLabel> <FormLabel>{t('Access Policy (JSON)')}</FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
value={field.value || ''}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder={t( placeholder={t(
'Optional JSON policy to restrict access based on user info fields' 'Optional JSON policy to restrict access based on user info fields'
)} )}
className='min-h-[80px] font-mono text-xs' heightClassName='h-40 min-h-40 max-h-40'
{...field}
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
......
web/src/features/system-settings/content/chat-settings-section.tsx
...@@ -22,6 +22,7 @@ import { useForm } from 'react-hook-form' ...@@ -22,6 +22,7 @@ import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import * as z from 'zod' import * as z from 'zod'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { import {
Form, Form,
FormControl, FormControl,
...@@ -32,7 +33,6 @@ import { ...@@ -32,7 +33,6 @@ import {
FormMessage, FormMessage,
} from '@/components/ui/form' } from '@/components/ui/form'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Textarea } from '@/components/ui/textarea'
import { SettingsForm } from '../components/settings-form-layout' import { SettingsForm } from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context' import { SettingsPageFormActions } from '../components/settings-page-context'
...@@ -172,12 +172,17 @@ export function ChatSettingsSection({ ...@@ -172,12 +172,17 @@ export function ChatSettingsSection({
<FormItem> <FormItem>
<FormLabel>{t('Chat configuration JSON')}</FormLabel> <FormLabel>{t('Chat configuration JSON')}</FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
rows={12} value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder={t( placeholder={t(
'[{"ChatGPT":"https://chat.openai.com"},{"Lobe Chat":"https://chat-preview.lobehub.com/?settings={...}"}]' '[{"ChatGPT":"https://chat.openai.com"},{"Lobe Chat":"https://chat-preview.lobehub.com/?settings={...}"}]'
)} )}
{...field} heightClassName='h-72 min-h-72 max-h-72'
aria-invalid={Boolean(form.formState.errors.Chats)}
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
......
web/src/features/system-settings/content/json-toggle-section.tsx
...@@ -22,6 +22,7 @@ import { useForm } from 'react-hook-form' ...@@ -22,6 +22,7 @@ import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import * as z from 'zod' import * as z from 'zod'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { import {
Form, Form,
FormControl, FormControl,
...@@ -32,7 +33,6 @@ import { ...@@ -32,7 +33,6 @@ import {
FormMessage, FormMessage,
} from '@/components/ui/form' } from '@/components/ui/form'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { SettingsAccordion } from '../components/settings-accordion' import { SettingsAccordion } from '../components/settings-accordion'
import { import {
...@@ -199,7 +199,16 @@ export function JsonToggleSection({ ...@@ -199,7 +199,16 @@ export function JsonToggleSection({
<FormItem> <FormItem>
<FormLabel>{textareaLabel}</FormLabel> <FormLabel>{textareaLabel}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={12} placeholder={placeholder} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder={placeholder}
heightClassName='h-72 min-h-72 max-h-72'
aria-invalid={Boolean(form.formState.errors.json)}
/>
</FormControl> </FormControl>
{textareaDescription && ( {textareaDescription && (
<FormDescription>{t(textareaDescription)}</FormDescription> <FormDescription>{t(textareaDescription)}</FormDescription>
......
web/src/features/system-settings/general/channel-affinity/index.tsx
...@@ -23,6 +23,7 @@ import { toast } from 'sonner' ...@@ -23,6 +23,7 @@ import { toast } from 'sonner'
import { StaticDataTable } from '@/components/data-table' import { StaticDataTable } from '@/components/data-table'
import { Dialog } from '@/components/dialog' import { Dialog } from '@/components/dialog'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { StatusBadge, StatusBadgeList } from '@/components/status-badge' import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
import { Alert, AlertDescription } from '@/components/ui/alert' import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
...@@ -35,7 +36,6 @@ import { ...@@ -35,7 +36,6 @@ import {
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Textarea } from '@/components/ui/textarea'
import { SettingsSwitchField } from '../../components/settings-form-layout' import { SettingsSwitchField } from '../../components/settings-form-layout'
import { SettingsPageActionsPortal } from '../../components/settings-page-context' import { SettingsPageActionsPortal } from '../../components/settings-page-context'
...@@ -661,11 +661,14 @@ export function ChannelAffinitySection(props: Props) { ...@@ -661,11 +661,14 @@ export function ChannelAffinitySection(props: Props) {
/> />
) : ( ) : (
<div className='grid gap-1.5'> <div className='grid gap-1.5'>
<Label>{t('Rules JSON')}</Label> <Label htmlFor='channel-affinity-rules-json'>
<Textarea {t('Rules JSON')}
className='min-h-[300px] font-mono text-xs' </Label>
<JsonCodeEditor
id='channel-affinity-rules-json'
value={jsonText} value={jsonText}
onChange={(e) => setJsonText(e.target.value)} onChange={setJsonText}
heightClassName='h-[300px] min-h-[300px] max-h-[300px]'
/> />
</div> </div>
)} )}
......
web/src/features/system-settings/general/channel-affinity/rule-editor-dialog.tsx
...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next' ...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import { Dialog } from '@/components/dialog' import { Dialog } from '@/components/dialog'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { import {
Collapsible, Collapsible,
...@@ -134,6 +135,9 @@ export function RuleEditorDialog(props: Props) { ...@@ -134,6 +135,9 @@ export function RuleEditorDialog(props: Props) {
param_override_template_json: '', param_override_template_json: '',
}, },
}) })
const paramOverrideTemplateField = form.register(
'param_override_template_json'
)
const resetFromRule = (r: Partial<AffinityRule>) => { const resetFromRule = (r: Partial<AffinityRule>) => {
form.reset({ form.reset({
...@@ -434,12 +438,30 @@ export function RuleEditorDialog(props: Props) { ...@@ -434,12 +438,30 @@ export function RuleEditorDialog(props: Props) {
</div> </div>
<div className='grid gap-1.5'> <div className='grid gap-1.5'>
<Label>{t('Parameter Override Template (JSON)')}</Label> <Label htmlFor='channel-affinity-param-override-template'>
<Textarea {t('Parameter Override Template (JSON)')}
rows={5} </Label>
<JsonCodeEditor
id='channel-affinity-param-override-template'
value={form.watch('param_override_template_json') || ''}
onChange={(value) =>
form.setValue('param_override_template_json', value, {
shouldDirty: true,
})
}
name={paramOverrideTemplateField.name}
onBlur={() => {
void paramOverrideTemplateField.onBlur({
target: {
name: paramOverrideTemplateField.name,
value: form.getValues('param_override_template_json'),
},
type: 'blur',
})
}}
textareaRef={paramOverrideTemplateField.ref}
placeholder='{"operations": [...]}' placeholder='{"operations": [...]}'
{...form.register('param_override_template_json')} heightClassName='h-40 min-h-40 max-h-40'
className='font-mono text-xs'
/> />
</div> </div>
......
web/src/features/system-settings/integrations/payment-settings-section.tsx
...@@ -25,6 +25,7 @@ import { useTranslation } from 'react-i18next' ...@@ -25,6 +25,7 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import * as z from 'zod' import * as z from 'zod'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { RiskAcknowledgementDialog } from '@/components/risk-acknowledgement-dialog' import { RiskAcknowledgementDialog } from '@/components/risk-acknowledgement-dialog'
import { import {
Alert, Alert,
...@@ -45,7 +46,6 @@ import { ...@@ -45,7 +46,6 @@ import {
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Textarea } from '@/components/ui/textarea'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { confirmPaymentCompliance } from '../api' import { confirmPaymentCompliance } from '../api'
...@@ -984,15 +984,19 @@ export function PaymentSettingsSection({ ...@@ -984,15 +984,19 @@ export function PaymentSettingsSection({
onChange={field.onChange} onChange={field.onChange}
/> />
) : ( ) : (
<Textarea <JsonCodeEditor
rows={4} value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder={t( placeholder={t(
'[{"name":"支付宝","type":"alipay","icon":"SiAlipay"}]' '[{"name":"支付宝","type":"alipay","icon":"SiAlipay"}]'
)} )}
{...field} heightClassName='h-40 min-h-40 max-h-40'
onChange={(event) => aria-invalid={Boolean(
field.onChange(event.target.value) form.formState.errors.PayMethods
} )}
/> />
)} )}
</FormControl> </FormControl>
...@@ -1045,13 +1049,17 @@ export function PaymentSettingsSection({ ...@@ -1045,13 +1049,17 @@ export function PaymentSettingsSection({
onChange={field.onChange} onChange={field.onChange}
/> />
) : ( ) : (
<Textarea <JsonCodeEditor
rows={4} value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder='[10, 20, 50, 100]' placeholder='[10, 20, 50, 100]'
{...field} heightClassName='h-40 min-h-40 max-h-40'
onChange={(event) => aria-invalid={Boolean(
field.onChange(event.target.value) form.formState.errors.AmountOptions
} )}
/> />
)} )}
</FormControl> </FormControl>
...@@ -1101,13 +1109,17 @@ export function PaymentSettingsSection({ ...@@ -1101,13 +1109,17 @@ export function PaymentSettingsSection({
onChange={field.onChange} onChange={field.onChange}
/> />
) : ( ) : (
<Textarea <JsonCodeEditor
rows={4} value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder='{"100":0.95,"200":0.9}' placeholder='{"100":0.95,"200":0.9}'
{...field} heightClassName='h-40 min-h-40 max-h-40'
onChange={(event) => aria-invalid={Boolean(
field.onChange(event.target.value) form.formState.errors.AmountDiscount
} )}
/> />
)} )}
</FormControl> </FormControl>
...@@ -1568,13 +1580,17 @@ export function PaymentSettingsSection({ ...@@ -1568,13 +1580,17 @@ export function PaymentSettingsSection({
onChange={field.onChange} onChange={field.onChange}
/> />
) : ( ) : (
<Textarea <JsonCodeEditor
rows={4} value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder='[{"name":"Basic","productId":"prod_xxx","price":10,"quota":500000,"currency":"USD"}]' placeholder='[{"name":"Basic","productId":"prod_xxx","price":10,"quota":500000,"currency":"USD"}]'
{...field} heightClassName='h-40 min-h-40 max-h-40'
onChange={(event) => aria-invalid={Boolean(
field.onChange(event.target.value) form.formState.errors.CreemProducts
} )}
/> />
)} )}
</FormControl> </FormControl>
......
web/src/features/system-settings/models/claude-settings-card.tsx
...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next' ...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import * as z from 'zod' import * as z from 'zod'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { import {
Form, Form,
FormControl, FormControl,
...@@ -34,7 +35,6 @@ import { ...@@ -34,7 +35,6 @@ import {
} from '@/components/ui/form' } from '@/components/ui/form'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { import {
SettingsForm, SettingsForm,
...@@ -196,7 +196,16 @@ export function ClaudeSettingsCard({ defaultValues }: ClaudeSettingsCardProps) { ...@@ -196,7 +196,16 @@ export function ClaudeSettingsCard({ defaultValues }: ClaudeSettingsCardProps) {
<FormItem> <FormItem>
<FormLabel>{t('Request Header Overrides')}</FormLabel> <FormLabel>{t('Request Header Overrides')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={8} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
aria-invalid={Boolean(
form.formState.errors.claude?.model_headers_settings
)}
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t( {t(
...@@ -215,7 +224,16 @@ export function ClaudeSettingsCard({ defaultValues }: ClaudeSettingsCardProps) { ...@@ -215,7 +224,16 @@ export function ClaudeSettingsCard({ defaultValues }: ClaudeSettingsCardProps) {
<FormItem> <FormItem>
<FormLabel>{t('Default Max Tokens')}</FormLabel> <FormLabel>{t('Default Max Tokens')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={8} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
aria-invalid={Boolean(
form.formState.errors.claude?.default_max_tokens
)}
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t('Example')}{' '} {t('Example')}{' '}
......
web/src/features/system-settings/models/gemini-settings-card.tsx
...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next' ...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import * as z from 'zod' import * as z from 'zod'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { import {
Form, Form,
FormControl, FormControl,
...@@ -34,7 +35,6 @@ import { ...@@ -34,7 +35,6 @@ import {
} from '@/components/ui/form' } from '@/components/ui/form'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { import {
SettingsForm, SettingsForm,
...@@ -248,7 +248,16 @@ export function GeminiSettingsCard({ defaultValues }: GeminiSettingsCardProps) { ...@@ -248,7 +248,16 @@ export function GeminiSettingsCard({ defaultValues }: GeminiSettingsCardProps) {
<FormItem> <FormItem>
<FormLabel>{t('Safety Settings')}</FormLabel> <FormLabel>{t('Safety Settings')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={8} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
aria-invalid={Boolean(
form.formState.errors.gemini?.safety_settings
)}
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t( {t(
...@@ -267,7 +276,16 @@ export function GeminiSettingsCard({ defaultValues }: GeminiSettingsCardProps) { ...@@ -267,7 +276,16 @@ export function GeminiSettingsCard({ defaultValues }: GeminiSettingsCardProps) {
<FormItem> <FormItem>
<FormLabel>{t('Version Overrides')}</FormLabel> <FormLabel>{t('Version Overrides')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={8} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
aria-invalid={Boolean(
form.formState.errors.gemini?.version_settings
)}
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t( {t(
...@@ -286,10 +304,17 @@ export function GeminiSettingsCard({ defaultValues }: GeminiSettingsCardProps) { ...@@ -286,10 +304,17 @@ export function GeminiSettingsCard({ defaultValues }: GeminiSettingsCardProps) {
<FormItem> <FormItem>
<FormLabel>{t('Supported Imagine Models')}</FormLabel> <FormLabel>{t('Supported Imagine Models')}</FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
rows={6} value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder={imaginePlaceholder} placeholder={imaginePlaceholder}
{...field} heightClassName='h-40 min-h-40 max-h-40'
aria-invalid={Boolean(
form.formState.errors.gemini?.supported_imagine_models
)}
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
......
web/src/features/system-settings/models/global-settings-card.tsx
...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next' ...@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import * as z from 'zod' import * as z from 'zod'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { StatusBadge } from '@/components/status-badge' import { StatusBadge } from '@/components/status-badge'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
...@@ -38,7 +39,6 @@ import { ...@@ -38,7 +39,6 @@ import {
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { import {
SettingsForm, SettingsForm,
...@@ -157,21 +157,6 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) { ...@@ -157,21 +157,6 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) {
const pingEnabled = form.watch('general_setting.ping_interval_enabled') const pingEnabled = form.watch('general_setting.ping_interval_enabled')
const formatJsonField = (
field:
| 'global.thinking_model_blacklist'
| 'global.chat_completions_to_responses_policy'
) => {
const raw = form.getValues(field)
if (!raw || !raw.trim()) return
try {
const formatted = JSON.stringify(JSON.parse(raw), null, 2)
form.setValue(field, formatted, { shouldDirty: true })
} catch {
toast.error(t('Invalid JSON format'))
}
}
const onSubmit = async (values: GlobalModelSettingsFormValues) => { const onSubmit = async (values: GlobalModelSettingsFormValues) => {
const flattenedDefaults = flattenGlobalValues(defaultValues) const flattenedDefaults = flattenGlobalValues(defaultValues)
const flattenedValues = flattenGlobalValues(values) const flattenedValues = flattenGlobalValues(values)
...@@ -233,11 +218,14 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) { ...@@ -233,11 +218,14 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) {
{t('Models that skip thinking suffix processing')} {t('Models that skip thinking suffix processing')}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
rows={4} value={field.value}
onChange={(value) => field.onChange(value)}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder={`${t('Example:')}\n${thinkingBlacklistExample}`} placeholder={`${t('Example:')}\n${thinkingBlacklistExample}`}
{...field} heightClassName='h-32 min-h-32 max-h-32'
onChange={(event) => field.onChange(event.target.value)}
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
...@@ -245,18 +233,6 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) { ...@@ -245,18 +233,6 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) {
'Models listed here will not automatically append or remove -thinking / -nothinking suffixes.' 'Models listed here will not automatically append or remove -thinking / -nothinking suffixes.'
)} )}
</FormDescription> </FormDescription>
<div className='flex flex-wrap gap-2'>
<Button
type='button'
variant='outline'
size='sm'
onClick={() =>
formatJsonField('global.thinking_model_blacklist')
}
>
{t('Format JSON')}
</Button>
</div>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
...@@ -292,11 +268,13 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) { ...@@ -292,11 +268,13 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) {
<FormItem> <FormItem>
<FormLabel>{t('Policy JSON')}</FormLabel> <FormLabel>{t('Policy JSON')}</FormLabel>
<FormControl> <FormControl>
<Textarea <JsonCodeEditor
rows={8} value={field.value}
onChange={(value) => field.onChange(value)}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder={`${t('Example (specific channels):')}\n${chatToResponsesPolicyExample}\n\n${t('Example (all channels):')}\n${chatToResponsesPolicyAllChannelsExample}`} placeholder={`${t('Example (specific channels):')}\n${chatToResponsesPolicyExample}\n\n${t('Example (all channels):')}\n${chatToResponsesPolicyAllChannelsExample}`}
{...field}
onChange={(event) => field.onChange(event.target.value)}
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
...@@ -331,18 +309,6 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) { ...@@ -331,18 +309,6 @@ export function GlobalSettingsCard({ defaultValues }: GlobalSettingsCardProps) {
> >
{t('Fill example (all channels)')} {t('Fill example (all channels)')}
</Button> </Button>
<Button
type='button'
variant='outline'
size='sm'
onClick={() =>
formatJsonField(
'global.chat_completions_to_responses_policy'
)
}
>
{t('Format JSON')}
</Button>
</div> </div>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
......
web/src/features/system-settings/models/group-ratio-form.tsx
...@@ -26,6 +26,7 @@ import { ...@@ -26,6 +26,7 @@ import {
sideDrawerFormClassName, sideDrawerFormClassName,
sideDrawerHeaderClassName, sideDrawerHeaderClassName,
} from '@/components/drawer-layout' } from '@/components/drawer-layout'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { import {
Accordion, Accordion,
AccordionContent, AccordionContent,
...@@ -50,7 +51,6 @@ import { ...@@ -50,7 +51,6 @@ import {
SheetTitle, SheetTitle,
} from '@/components/ui/sheet' } from '@/components/ui/sheet'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { import {
SettingsForm, SettingsForm,
...@@ -215,7 +215,13 @@ export const GroupRatioForm = memo(function GroupRatioForm({ ...@@ -215,7 +215,13 @@ export const GroupRatioForm = memo(function GroupRatioForm({
<FormItem> <FormItem>
<FormLabel>{t('Group ratios')}</FormLabel> <FormLabel>{t('Group ratios')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={8} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t( {t(
...@@ -234,7 +240,14 @@ export const GroupRatioForm = memo(function GroupRatioForm({ ...@@ -234,7 +240,14 @@ export const GroupRatioForm = memo(function GroupRatioForm({
<FormItem> <FormItem>
<FormLabel>{t('Top-up group ratios')}</FormLabel> <FormLabel>{t('Top-up group ratios')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={6} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
heightClassName='h-40 min-h-40 max-h-40'
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t( {t(
...@@ -254,7 +267,14 @@ export const GroupRatioForm = memo(function GroupRatioForm({ ...@@ -254,7 +267,14 @@ export const GroupRatioForm = memo(function GroupRatioForm({
<FormItem> <FormItem>
<FormLabel>{t('Selectable groups')}</FormLabel> <FormLabel>{t('Selectable groups')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={6} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
heightClassName='h-40 min-h-40 max-h-40'
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t( {t(
...@@ -273,7 +293,13 @@ export const GroupRatioForm = memo(function GroupRatioForm({ ...@@ -273,7 +293,13 @@ export const GroupRatioForm = memo(function GroupRatioForm({
<FormItem> <FormItem>
<FormLabel>{t('Inter-group overrides')}</FormLabel> <FormLabel>{t('Inter-group overrides')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={8} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t('Nested JSON: source group →')}{' '} {t('Nested JSON: source group →')}{' '}
...@@ -294,7 +320,14 @@ export const GroupRatioForm = memo(function GroupRatioForm({ ...@@ -294,7 +320,14 @@ export const GroupRatioForm = memo(function GroupRatioForm({
<FormItem> <FormItem>
<FormLabel>{t('Auto assignment order')}</FormLabel> <FormLabel>{t('Auto assignment order')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={6} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
heightClassName='h-40 min-h-40 max-h-40'
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t( {t(
...@@ -313,7 +346,13 @@ export const GroupRatioForm = memo(function GroupRatioForm({ ...@@ -313,7 +346,13 @@ export const GroupRatioForm = memo(function GroupRatioForm({
<FormItem> <FormItem>
<FormLabel>{t('Special usable group rules')}</FormLabel> <FormLabel>{t('Special usable group rules')}</FormLabel>
<FormControl> <FormControl>
<Textarea rows={8} {...field} /> <JsonCodeEditor
value={field.value}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
/>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t( {t(
......
web/src/features/system-settings/models/model-ratio-form.tsx
...@@ -149,6 +149,9 @@ function ModelJsonTextareaField(props: { ...@@ -149,6 +149,9 @@ function ModelJsonTextareaField(props: {
<JsonCodeEditor <JsonCodeEditor
value={field.value} value={field.value}
onChange={(value) => field.onChange(value)} onChange={(value) => field.onChange(value)}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
/> />
</FormControl> </FormControl>
<FormDescription className='text-xs leading-5'> <FormDescription className='text-xs leading-5'>
......
web/src/features/system-settings/models/tool-price-settings.tsx
...@@ -22,10 +22,10 @@ import { useTranslation } from 'react-i18next' ...@@ -22,10 +22,10 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner' import { toast } from 'sonner'
import { StaticDataTable } from '@/components/data-table' import { StaticDataTable } from '@/components/data-table'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Alert, AlertDescription } from '@/components/ui/alert' import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { useUpdateOption } from '../hooks/use-update-option' import { useUpdateOption } from '../hooks/use-update-option'
...@@ -308,12 +308,11 @@ export const ToolPriceSettings = memo(function ToolPriceSettings({ ...@@ -308,12 +308,11 @@ export const ToolPriceSettings = memo(function ToolPriceSettings({
/> />
) : ( ) : (
<div className='space-y-2'> <div className='space-y-2'>
<Textarea <JsonCodeEditor
value={jsonText} value={jsonText}
onChange={(e) => handleJsonChange(e.target.value)} onChange={handleJsonChange}
className='font-mono text-sm' heightClassName='h-72 min-h-72 max-h-72'
rows={12} aria-invalid={Boolean(jsonError)}
spellCheck={false}
/> />
{jsonError && <p className='text-destructive text-sm'>{jsonError}</p>} {jsonError && <p className='text-destructive text-sm'>{jsonError}</p>}
</div> </div>
......
web/src/features/system-settings/request-limits/rate-limit-section.tsx
...@@ -23,6 +23,7 @@ import { useForm } from 'react-hook-form' ...@@ -23,6 +23,7 @@ import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import * as z from 'zod' import * as z from 'zod'
import { JsonCodeEditor } from '@/components/json-code-editor'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { import {
Form, Form,
...@@ -35,7 +36,6 @@ import { ...@@ -35,7 +36,6 @@ import {
} from '@/components/ui/form' } from '@/components/ui/form'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch' import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { import {
SettingsForm, SettingsForm,
...@@ -273,11 +273,16 @@ export function RateLimitSection({ defaultValues }: RateLimitSectionProps) { ...@@ -273,11 +273,16 @@ export function RateLimitSection({ defaultValues }: RateLimitSectionProps) {
onChange={field.onChange} onChange={field.onChange}
/> />
) : ( ) : (
<Textarea <JsonCodeEditor
rows={8} value={field.value || ''}
onChange={field.onChange}
name={field.name}
onBlur={field.onBlur}
textareaRef={field.ref}
placeholder={`{\n "default": [200, 100],\n "vip": [0, 1000]\n}`} placeholder={`{\n "default": [200, 100],\n "vip": [0, 1000]\n}`}
className='font-mono text-sm' aria-invalid={Boolean(
{...field} form.formState.errors.ModelRequestRateLimitGroup
)}
/> />
)} )}
</FormControl> </FormControl>
......
web/src/styles/index.css
...@@ -45,6 +45,49 @@ For commercial licensing, please contact support@quantumnous.com ...@@ -45,6 +45,49 @@ For commercial licensing, please contact support@quantumnous.com
font-weight: var(--shiki-dark-font-weight) !important; font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important; text-decoration: var(--shiki-dark-text-decoration) !important;
} }
.json-code-editor-textarea {
overflow: auto !important;
scrollbar-gutter: stable;
}
.json-code-editor-textarea::placeholder {
color: var(--muted-foreground);
opacity: 1;
-webkit-text-fill-color: var(--muted-foreground);
}
.json-code-editor-textarea,
.json-code-editor-highlight,
.json-code-editor-lines {
overflow-wrap: normal !important;
white-space: pre !important;
}
.json-code-editor-lines {
background: var(--background);
z-index: 1;
}
.json-code-editor-highlight .yace-tok--str {
color: var(--chart-5);
}
.json-code-editor-highlight .yace-tok--num {
color: var(--chart-4);
}
.json-code-editor-highlight .yace-tok--kw {
color: var(--chart-1);
}
.json-code-editor-highlight .yace-tok--punc {
color: var(--muted-foreground);
}
.json-code-editor-highlight .yace-tok--com {
color: var(--muted-foreground);
}
} }
@layer base { @layer base {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment