diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index a25b8537bc1..22664df8acc 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -169,6 +169,12 @@ export function PreCode(props: { children: any }) { } function CustomCode(props: { children: any; className?: string }) { + const chatStore = useChatStore(); + const session = chatStore.currentSession(); + const config = useAppConfig(); + const enableCodeFold = + session.mask?.enableCodeFold != false && config.enableCodeFold; + const ref = useRef(null); const [collapsed, setCollapsed] = useState(true); const [showToggle, setShowToggle] = useState(false); @@ -190,13 +196,13 @@ function CustomCode(props: { children: any; className?: string }) { className={props?.className} ref={ref} style={{ - maxHeight: collapsed ? "400px" : "none", + maxHeight: enableCodeFold && collapsed ? "400px" : "none", overflowY: "hidden", }} > {props.children} - {showToggle && collapsed && ( + {showToggle && enableCodeFold && collapsed && (
diff --git a/app/components/mask.tsx b/app/components/mask.tsx index c60e7a528fe..12b19e33514 100644 --- a/app/components/mask.tsx +++ b/app/components/mask.tsx @@ -183,6 +183,23 @@ export function MaskConfig(props: { > )} + {globalConfig.enableCodeFold && ( + + { + props.updateMask((mask) => { + mask.enableCodeFold = e.currentTarget.checked; + }); + }} + > + + )} {!props.shouldSyncFromGlobal ? ( + + + updateConfig( + (config) => (config.enableCodeFold = e.currentTarget.checked), + ) + } + > + diff --git a/app/locales/cn.ts b/app/locales/cn.ts index e5bcca0edbb..3ba8dd80b3e 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -665,6 +665,10 @@ const cn = { Title: "启用Artifacts", SubTitle: "启用之后可以直接渲染HTML页面", }, + CodeFold: { + Title: "启用CodeFold", + SubTitle: "启用之后可以折叠/展开过长的代码块", + }, Share: { Title: "分享此面具", SubTitle: "生成此面具的直达链接", diff --git a/app/locales/en.ts b/app/locales/en.ts index 1204575224a..40782be7ad0 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -675,6 +675,11 @@ const en: LocaleType = { Title: "Enable Artifacts", SubTitle: "Can render HTML page when enable artifacts.", }, + CodeFold: { + Title: "Enable CodeFold", + SubTitle: + "Automatically collapse/expand overly long code block when enable CodeFold", + }, Share: { Title: "Share This Mask", SubTitle: "Generate a link to this mask", diff --git a/app/store/config.ts b/app/store/config.ts index f9ddce4a80c..f14793c287a 100644 --- a/app/store/config.ts +++ b/app/store/config.ts @@ -52,6 +52,8 @@ export const DEFAULT_CONFIG = { enableArtifacts: true, // show artifacts config + enableCodeFold: true, // code fold config + disablePromptHint: false, dontShowMaskSplashScreen: false, // dont show splash screen when create chat diff --git a/app/store/mask.ts b/app/store/mask.ts index 0c74a892e56..850abeef6f4 100644 --- a/app/store/mask.ts +++ b/app/store/mask.ts @@ -19,6 +19,7 @@ export type Mask = { builtin: boolean; plugin?: string[]; enableArtifacts?: boolean; + enableCodeFold?: boolean; }; export const DEFAULT_MASK_STATE = {