refactor(layout): adopt header-slot page container across pages

src/pages/playground/chat/index.tsx

@@ -6,11 +6,14 @@ import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Segmented, Tabs, TabsProps } from 'antd';
-import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../../_components/page-box';
+import {
+  HeaderLeft,
+  HeaderRight,
+  usePageContentStyle
+} from '../../_components/page-box';
 import { queryModelsList } from '../apis';
 import MultipleChat from '../components/multiple-chat';
 import ViewCodeButtons from '../components/view-code-buttons';
@@ -148,53 +151,43 @@ const Playground: React.FC = () => {
     }
   );
 
+  usePageContentStyle({ padding: 0 });
+
   return (
-    <PageContainerInner
-      className={classNames('playground-container', {
-        compare: activeKey === 'compare',
-        chat: activeKey !== 'compare'
-      })}
-      styles={{
-        containerWrapper: {
-          padding: 0
-        }
-      }}
-      leftContent={
+    <>
+      <HeaderLeft>
         <div className="flex items-center">
           <span className="font-600 flex-center">
             {intl.formatMessage({ id: 'menu.playground.chat' })}
           </span>
-          {
-            <Segmented
-              shape="round"
-              style={{
-                backgroundColor: 'var(--ant-color-fill-secondary)',
-                fontSize: 13
-              }}
-              size="middle"
-              className="m-l-24 font-400"
-              options={optionsList}
-              value={activeKey}
-              onChange={(key) => setActiveKey(key)}
-            ></Segmented>
-          }
+          <Segmented
+            shape="round"
+            style={{
+              backgroundColor: 'var(--ant-color-fill-secondary)',
+              fontSize: 13
+            }}
+            size="middle"
+            className="m-l-24 font-400"
+            options={optionsList}
+            value={activeKey}
+            onChange={(key) => setActiveKey(key)}
+          ></Segmented>
         </div>
-      }
-      rightContent={
+      </HeaderLeft>
+      <HeaderRight>
         <ViewCodeButtons
           handleViewCode={handleViewCode}
           handleToggleCollapse={handleToggleCollapse}
           activeKey={activeKey}
           key="view-code-buttons"
         />
-      }
-    >
+      </HeaderRight>
       <div className="play-ground">
         <div className="chat">
           <Tabs items={items} activeKey={activeKey}></Tabs>
         </div>
       </div>
-    </PageContainerInner>
+    </>
   );
 };
 

src/pages/playground/embedding/index.tsx

@@ -1,12 +1,13 @@
 import HotKeys from '@/config/hotkeys';
 import { modelCategoriesMap } from '@/pages/llmodels/config';
-import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../../_components/page-box';
+import {
+  HeaderRight,
+  usePageContentStyle
+} from '../../_components/page-box';
 import { queryModelsList } from '../apis';
 import ViewCodeButtons from '../components/view-code-buttons';
 import useCollapseLayout from '../hooks/use-collapse-layout';
@@ -14,7 +15,6 @@ import '../style/play-ground.less';
 import GroundEmbedding from './page';
 
 const PlaygroundEmbedding: React.FC = () => {
-  const intl = useIntl();
   const groundLeftRef = useRef<any>(null);
   const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
   const [loaded, setLoaded] = useState(false);
@@ -76,23 +76,18 @@ const PlaygroundEmbedding: React.FC = () => {
     }
   );
 
+  usePageContentStyle({ padding: 0 });
+
   return (
-    <PageContainerInner
-      className={classNames('playground-container chat')}
-      styles={{
-        containerWrapper: {
-          padding: 0
-        }
-      }}
-      rightContent={
+    <>
+      <HeaderRight>
         <ViewCodeButtons
           activeKey=""
           handleViewCode={handleViewCode}
           handleToggleCollapse={handleToggleCollapse}
           key="view-code-buttons"
         />
-      }
-    >
+      </HeaderRight>
       <div className="play-ground">
         <div className="chat">
           <GroundEmbedding
@@ -102,7 +97,7 @@ const PlaygroundEmbedding: React.FC = () => {
           ></GroundEmbedding>
         </div>
       </div>
-    </PageContainerInner>
+    </>
   );
 };
 

src/pages/playground/images/index.tsx

@@ -6,11 +6,14 @@ import { DiffOutlined, HighlightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Segmented, Tabs, TabsProps } from 'antd';
-import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../../_components/page-box';
+import {
+  HeaderLeft,
+  HeaderRight,
+  usePageContentStyle
+} from '../../_components/page-box';
 import { queryModelsList } from '../apis';
 import ViewCodeButtons from '../components/view-code-buttons';
 import '../style/play-ground.less';
@@ -154,9 +157,11 @@ const TextToImages: React.FC = () => {
     }
   );
 
+  usePageContentStyle({ padding: 0 });
+
   return (
-    <PageContainerInner
-      leftContent={
+    <>
+      <HeaderLeft>
         <div className="flex items-center">
           <span className="font-600 flex-center">
             {intl.formatMessage({ id: 'menu.playground.text2images' })}
@@ -173,24 +178,21 @@ const TextToImages: React.FC = () => {
             onChange={(key) => setActiveKey(key)}
           ></Segmented>
         </div>
-      }
-      rightContent={
+      </HeaderLeft>
+      <HeaderRight>
         <ViewCodeButtons
           handleViewCode={handleViewCode}
           handleToggleCollapse={handleToggleCollapse}
           activeKey={activeKey}
           key="view-code-buttons"
         ></ViewCodeButtons>
-      }
-      styles={{ containerWrapper: { padding: 0 } }}
-      className={classNames('playground-container chat')}
-    >
+      </HeaderRight>
       <div className="play-ground">
         <div className="chat">
           <Tabs items={items} activeKey={activeKey}></Tabs>
         </div>
       </div>
-    </PageContainerInner>
+    </>
   );
 };
 

src/pages/playground/rerank/index.tsx

@@ -1,12 +1,13 @@
 import HotKeys from '@/config/hotkeys';
 import { modelCategoriesMap } from '@/pages/llmodels/config';
-import { useIntl } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
-import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../../_components/page-box';
+import {
+  HeaderRight,
+  usePageContentStyle
+} from '../../_components/page-box';
 import { queryModelsList } from '../apis';
 import ViewCodeButtons from '../components/view-code-buttons';
 import useCollapseLayout from '../hooks/use-collapse-layout';
@@ -14,7 +15,6 @@ import '../style/play-ground.less';
 import GroundReranker from './page';
 
 const PlaygroundRerank: React.FC = () => {
-  const intl = useIntl();
   const groundRerankerRef = useRef<any>(null);
   const [rerankerModelList, setRerankerModelList] = useState<
     Global.BaseOption<string>[]
@@ -80,23 +80,18 @@ const PlaygroundRerank: React.FC = () => {
     }
   );
 
+  usePageContentStyle({ padding: 0 });
+
   return (
-    <PageContainerInner
-      className={classNames('playground-container chat')}
-      styles={{
-        containerWrapper: {
-          padding: 0
-        }
-      }}
-      rightContent={
+    <>
+      <HeaderRight>
         <ViewCodeButtons
           activeKey=""
           handleViewCode={handleViewCode}
           handleToggleCollapse={handleToggleCollapse}
           key="view-code-buttons"
         ></ViewCodeButtons>
-      }
-    >
+      </HeaderRight>
       <div className="play-ground">
         <div className="chat">
           <GroundReranker
@@ -106,7 +101,7 @@ const PlaygroundRerank: React.FC = () => {
           ></GroundReranker>
         </div>
       </div>
-    </PageContainerInner>
+    </>
   );
 };
 

src/pages/playground/speech/index.tsx

@@ -7,11 +7,14 @@ import { IconFont } from '@gpustack/core-ui';
 import { useIntl, useSearchParams } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
 import { Segmented, Tabs, TabsProps } from 'antd';
-import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../../_components/page-box';
+import {
+  HeaderLeft,
+  HeaderRight,
+  usePageContentStyle
+} from '../../_components/page-box';
 import { queryModelsList } from '../apis';
 import ViewCodeButtons from '../components/view-code-buttons';
 import '../style/play-ground.less';
@@ -194,48 +197,42 @@ const Playground: React.FC = () => {
     }
   );
 
+  usePageContentStyle({ padding: 0 });
+
   return (
-    <PageContainerInner
-      leftContent={
+    <>
+      <HeaderLeft>
         <div className="flex items-center">
           <span className="font-600 flex-center">
             {intl.formatMessage({ id: 'menu.playground.speech' })}
           </span>
-          {
-            <Segmented
-              shape="round"
-              style={{
-                backgroundColor: 'var(--ant-color-fill-secondary)'
-              }}
-              size="middle"
-              className="m-l-24 font-400"
-              options={optionsList}
-              value={activeKey}
-              onChange={(key) => setActiveKey(key)}
-            ></Segmented>
-          }
+          <Segmented
+            shape="round"
+            style={{
+              backgroundColor: 'var(--ant-color-fill-secondary)'
+            }}
+            size="middle"
+            className="m-l-24 font-400"
+            options={optionsList}
+            value={activeKey}
+            onChange={(key) => setActiveKey(key)}
+          ></Segmented>
         </div>
-      }
-      rightContent={
+      </HeaderLeft>
+      <HeaderRight>
         <ViewCodeButtons
           activeKey=""
           handleViewCode={handleViewCode}
           handleToggleCollapse={handleToggleCollapse}
           key="view-code-buttons"
         ></ViewCodeButtons>
-      }
-      styles={{ containerWrapper: { padding: 0 } }}
-      className={classNames('playground-container', {
-        compare: activeKey === 'compare',
-        chat: activeKey !== 'compare'
-      })}
-    >
+      </HeaderRight>
       <div className="play-ground">
         <div className="chat">
           <Tabs items={items} activeKey={activeKey}></Tabs>
         </div>
       </div>
-    </PageContainerInner>
+    </>
   );
 };
 

src/pages/playground/video/index.tsx

@@ -1,14 +1,13 @@
 import HotKeys from '@/config/hotkeys';
-import { ExtraContent } from '@/layouts/extraRender';
 import { modelCategoriesMap } from '@/pages/llmodels/config';
-import { useIntl } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
-import { Divider } from 'antd';
-import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { PageContainerInner } from '../../_components/page-box';
+import {
+  HeaderRight,
+  usePageContentStyle
+} from '../../_components/page-box';
 import { queryModelsList } from '../apis';
 import ViewCodeButtons from '../components/view-code-buttons';
 import useCollapseLayout from '../hooks/use-collapse-layout';
@@ -16,7 +15,6 @@ import '../style/play-ground.less';
 import GroundVideo from './page';
 
 const PlaygroundRerank: React.FC = () => {
-  const intl = useIntl();
   const groundVideoRef = useRef<any>(null);
   const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
   const [loaded, setLoaded] = useState(false);
@@ -78,24 +76,18 @@ const PlaygroundRerank: React.FC = () => {
     }
   );
 
+  usePageContentStyle({ padding: 0 });
+
   return (
-    <PageContainerInner
-      className={classNames('playground-container chat')}
-      extra={[
+    <>
+      <HeaderRight>
         <ViewCodeButtons
           activeKey=""
           handleViewCode={handleViewCode}
           handleToggleCollapse={handleToggleCollapse}
           key="view-code-buttons"
-        ></ViewCodeButtons>,
-        <Divider
-          key="divider"
-          orientation="vertical"
-          style={{ height: 16, marginInline: 16 }}
-        />,
-        <ExtraContent key="extra-content" />
-      ]}
-    >
+        ></ViewCodeButtons>
+      </HeaderRight>
       <div className="play-ground">
         <div className="chat">
           <GroundVideo
@@ -105,7 +97,7 @@ const PlaygroundRerank: React.FC = () => {
           ></GroundVideo>
         </div>
       </div>
-    </PageContainerInner>
+    </>
   );
 };