From 6792d6e475756b188f90c1f56d19188eabb7b55f Mon Sep 17 00:00:00 2001 From: code-october <148516338+code-october@users.noreply.github.com> Date: Fri, 11 Oct 2024 11:19:36 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E4=BD=BF=E8=83=BD/=E7=A6=81=E7=94=A8=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E6=8A=98=E5=8F=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/markdown.tsx | 10 ++++++++-- app/components/mask.tsx | 17 +++++++++++++++++ app/components/settings.tsx | 15 +++++++++++++++ app/locales/cn.ts | 4 ++++ app/locales/en.ts | 5 +++++ app/store/config.ts | 2 ++ app/store/mask.ts | 1 + 7 files changed, 52 insertions(+), 2 deletions(-) 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 = { From 8fd843d228e75068c1233738d4ce6507e2bddc4c Mon Sep 17 00:00:00 2001 From: code-october <148516338+code-october@users.noreply.github.com> Date: Fri, 11 Oct 2024 11:38:52 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=E5=8F=82=E8=80=83coderabbitai=E5=BB=BA?= =?UTF-8?q?=E8=AE=AE=E8=A7=84=E8=8C=83=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/markdown.tsx | 19 ++++++++++++------- app/components/settings.tsx | 1 + app/locales/cn.ts | 4 ++-- app/locales/en.ts | 2 +- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 22664df8acc..8e744b441d0 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -190,6 +190,16 @@ function CustomCode(props: { children: any; className?: string }) { const toggleCollapsed = () => { setCollapsed((collapsed) => !collapsed); }; + const renderShowMoreButton = () => { + if (showToggle && enableCodeFold && collapsed) { + return ( +
+ +
+ ); + } + return null; + }; return ( <> {props.children} - {showToggle && enableCodeFold && collapsed && ( -
- -
- )} + + {renderShowMoreButton()} ); } diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 5f478374edf..e2464481341 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -1517,6 +1517,7 @@ export function Settings() { aria-label={Locale.Mask.Config.CodeFold.Title} type="checkbox" checked={config.enableCodeFold} + data-testid="enable-code-fold-checkbox" onChange={(e) => updateConfig( (config) => (config.enableCodeFold = e.currentTarget.checked), diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 3ba8dd80b3e..09eafe492c7 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -666,8 +666,8 @@ const cn = { SubTitle: "启用之后可以直接渲染HTML页面", }, CodeFold: { - Title: "启用CodeFold", - SubTitle: "启用之后可以折叠/展开过长的代码块", + Title: "启用代码折叠", + SubTitle: "启用之后可以自动折叠/展开过长的代码块", }, Share: { Title: "分享此面具", diff --git a/app/locales/en.ts b/app/locales/en.ts index 40782be7ad0..8dfe8ed9348 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -678,7 +678,7 @@ const en: LocaleType = { CodeFold: { Title: "Enable CodeFold", SubTitle: - "Automatically collapse/expand overly long code block when enable CodeFold", + "Automatically collapse/expand overly long code blocks when CodeFold is enabled", }, Share: { Title: "Share This Mask", From 4a1319f2c0db25e5609553e2938761a4455ff6b8 Mon Sep 17 00:00:00 2001 From: code-october <148516338+code-october@users.noreply.github.com> Date: Fri, 11 Oct 2024 11:57:23 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=AE=89=E5=85=A8?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/markdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 8e744b441d0..9841a196d27 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -173,7 +173,7 @@ function CustomCode(props: { children: any; className?: string }) { const session = chatStore.currentSession(); const config = useAppConfig(); const enableCodeFold = - session.mask?.enableCodeFold != false && config.enableCodeFold; + session.mask?.enableCodeFold !== false && config.enableCodeFold; const ref = useRef(null); const [collapsed, setCollapsed] = useState(true); @@ -212,7 +212,7 @@ function CustomCode(props: { children: any; className?: string }) { > {props.children} - + {renderShowMoreButton()} );