Change to use the new collapse committment in the code display

Author: alan412

src/reactComponents/CodeDisplay.tsx

@@ -20,8 +20,9 @@
  */
 import * as Antd from 'antd';
 import * as React from 'react';
-import { CopyOutlined as CopyIcon, LeftOutlined as CollapseIcon, RightOutlined as ExpandIcon } from '@ant-design/icons';
+import { CopyOutlined as CopyIcon } from '@ant-design/icons';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import SiderCollapseTrigger from './SiderCollapseTrigger';
 import { dracula, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import type { MessageInstance } from 'antd/es/message/interface';
@@ -117,41 +118,10 @@ export default function CodeDisplay(props: CodeDisplayProps): React.JSX.Element
     if (!props.onToggleCollapse) return null;
 
     return (
-      <div
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: '50%',
-          transform: 'translateX(-50%)',
-          backgroundColor: token.colorBgContainer,
-          border: `1px solid ${token.colorBorder}`,
-          borderBottom: 'none',
-          borderRadius: '6px 6px 0 0',
-          padding: '2px 6px',
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          minWidth: '24px',
-          height: '22px',
-          color: token.colorTextSecondary,
-          transition: 'all 0.2s',
-          zIndex: 1,
-        }}
-        onClick={props.onToggleCollapse}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.color = token.colorText;
-          e.currentTarget.style.backgroundColor = token.colorBgTextHover;
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.color = token.colorTextSecondary;
-          e.currentTarget.style.backgroundColor = token.colorBgContainer;
-        }}
-      >
-        <Antd.Tooltip title={props.isCollapsed ? t("EXPAND") : t("COLLAPSE")}>
-          {props.isCollapsed ? <ExpandIcon /> : <CollapseIcon />}
-        </Antd.Tooltip>
-      </div>
+      <SiderCollapseTrigger
+        collapsed={props.isCollapsed || false}
+        onToggle={props.onToggleCollapse}
+      />
     );
   };