Merge pull request #5640 from code-october/feature/enableCodeFold

支持前端使能/禁用代码折叠
ChatGPTNextWeb · Oct 11, 2024 · d18bd8a · d18bd8a
2 parents c139038 + 4a1319f
commit d18bd8a
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 8 deletions.
diff --git 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<HTMLPreElement>(null);
   const [collapsed, setCollapsed] = useState(true);
   const [showToggle, setShowToggle] = useState(false);
@@ -184,25 +190,30 @@ function CustomCode(props: { children: any; className?: string }) {
   const toggleCollapsed = () => {
     setCollapsed((collapsed) => !collapsed);
   };
+  const renderShowMoreButton = () => {
+    if (showToggle && enableCodeFold && collapsed) {
+      return (
+        <div className={`show-hide-button ${collapsed ? "collapsed" : "expanded"}`}>
+          <button onClick={toggleCollapsed}>{Locale.NewChat.More}</button>
+        </div>
+      );
+    }
+    return null;
+  };
   return (
     <>
       <code
         className={props?.className}
         ref={ref}
         style={{
-          maxHeight: collapsed ? "400px" : "none",
+          maxHeight: enableCodeFold && collapsed ? "400px" : "none",
           overflowY: "hidden",
         }}
       >
         {props.children}
       </code>
-      {showToggle && collapsed && (
-        <div
-          className={`show-hide-button ${collapsed ? "collapsed" : "expanded"}`}
-        >
-          <button onClick={toggleCollapsed}>{Locale.NewChat.More}</button>
-        </div>
-      )}
+
+      {renderShowMoreButton()}
     </>
   );
 }

diff --git a/app/components/mask.tsx b/app/components/mask.tsx
@@ -183,6 +183,23 @@ export function MaskConfig(props: {
             ></input>
           </ListItem>
         )}
+        {globalConfig.enableCodeFold && (
+          <ListItem
+            title={Locale.Mask.Config.CodeFold.Title}
+            subTitle={Locale.Mask.Config.CodeFold.SubTitle}
+          >
+            <input
+              aria-label={Locale.Mask.Config.CodeFold.Title}
+              type="checkbox"
+              checked={props.mask.enableCodeFold !== false}
+              onChange={(e) => {
+                props.updateMask((mask) => {
+                  mask.enableCodeFold = e.currentTarget.checked;
+                });
+              }}
+            ></input>
+          </ListItem>
+        )}
 
         {!props.shouldSyncFromGlobal ? (
           <ListItem

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
@@ -1509,6 +1509,22 @@ export function Settings() {
               }
             ></input>
           </ListItem>
+          <ListItem
+            title={Locale.Mask.Config.CodeFold.Title}
+            subTitle={Locale.Mask.Config.CodeFold.SubTitle}
+          >
+            <input
+              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),
+                )
+              }
+            ></input>
+          </ListItem>
         </List>
 
         <SyncItems />

diff --git a/app/locales/cn.ts b/app/locales/cn.ts
@@ -665,6 +665,10 @@ const cn = {
         Title: "启用Artifacts",
         SubTitle: "启用之后可以直接渲染HTML页面",
       },
+      CodeFold: {
+        Title: "启用代码折叠",
+        SubTitle: "启用之后可以自动折叠/展开过长的代码块",
+      },
       Share: {
         Title: "分享此面具",
         SubTitle: "生成此面具的直达链接",

diff --git 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 blocks when CodeFold is enabled",
+      },
       Share: {
         Title: "Share This Mask",
         SubTitle: "Generate a link to this mask",

diff --git 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
@@ -19,6 +19,7 @@ export type Mask = {
   builtin: boolean;
   plugin?: string[];
   enableArtifacts?: boolean;
+  enableCodeFold?: boolean;
 };
 
 export const DEFAULT_MASK_STATE = {