Unify Agent/Memeory/Models/Knowledges components to be vertical aligned

Author: xuyaqist

frontend/app/[locale]/agents/AgentsContent.tsx

@@ -74,9 +74,11 @@ export default function AgentsContent({
         transition={pageTransition}
         style={{width: "100%", height: "100%"}}
       >
-        {canAccessProtectedData ? (
-          <AgentConfig ref={agentConfigRef} canAccessProtectedData={canAccessProtectedData} />
-        ) : null}
+        <div className="w-full h-full flex items-center justify-center">
+          {canAccessProtectedData ? (
+            <AgentConfig ref={agentConfigRef} canAccessProtectedData={canAccessProtectedData} />
+          ) : null}
+        </div>
       </motion.div>
 
       <SaveConfirmModal

frontend/app/[locale]/knowledges/KnowledgesContent.tsx

@@ -99,7 +99,9 @@ export default function KnowledgesContent({
           transition={pageTransition}
           style={{width: "100%", height: "100%"}}
         >
-          <DataConfig isActive={true} />
+          <div className="w-full h-full flex items-center justify-center">
+            <DataConfig isActive={true} />
+          </div>
         </motion.div>
       ) : null}
     </>

frontend/app/[locale]/memory/MemoryContent.tsx

@@ -349,29 +349,31 @@ export default function MemoryContent({ onNavigate }: MemoryContentProps) {
         style={{ width: "100%", height: "100%" }}
       >
         {canAccessProtectedData ? (
-          <div
-            className="w-full mx-auto"
-            style={{
-              maxWidth: SETUP_PAGE_CONTAINER.MAX_WIDTH,
-              padding: `0 ${SETUP_PAGE_CONTAINER.HORIZONTAL_PADDING}`,
-            }}
-          >
+          <div className="w-full h-full flex items-center justify-center">
             <div
-              className={STANDARD_CARD.BASE_CLASSES}
+              className="w-full mx-auto"
               style={{
-                height: SETUP_PAGE_CONTAINER.MAIN_CONTENT_HEIGHT,
-                padding: "25px",
+                maxWidth: SETUP_PAGE_CONTAINER.MAX_WIDTH,
+                padding: `0 ${SETUP_PAGE_CONTAINER.HORIZONTAL_PADDING}`,
               }}
             >
-              <Tabs
-                size="middle"
-                items={tabItems}
-                activeKey={memory.activeTabKey}
-                onChange={(key) => memory.setActiveTabKey(key)}
-                tabBarStyle={{
-                  marginBottom: "16px",
+              <div
+                className={STANDARD_CARD.BASE_CLASSES}
+                style={{
+                  height: SETUP_PAGE_CONTAINER.MAIN_CONTENT_HEIGHT,
+                  padding: "25px",
                 }}
-              />
+              >
+                <Tabs
+                  size="middle"
+                  items={tabItems}
+                  activeKey={memory.activeTabKey}
+                  onChange={(key) => memory.setActiveTabKey(key)}
+                  tabBarStyle={{
+                    marginBottom: "16px",
+                  }}
+                />
+              </div>
             </div>
           </div>
         ) : null}

frontend/app/[locale]/models/ModelsContent.tsx

@@ -130,16 +130,18 @@ export default function ModelsContent({
         transition={pageTransition}
         style={{width: "100%", height: "100%"}}
       >
-        {canAccessProtectedData ? (
-          <AppModelConfig
-            onSelectedModelsChange={(selected) =>
-              setLiveSelectedModels(selected)
-            }
-            onEmbeddingConnectivityChange={() => {}}
-            forwardedRef={modelConfigSectionRef}
-            canAccessProtectedData={canAccessProtectedData}
-          />
-        ) : null}
+        <div className="w-full h-full flex items-center justify-center">
+          {canAccessProtectedData ? (
+            <AppModelConfig
+              onSelectedModelsChange={(selected) =>
+                setLiveSelectedModels(selected)
+              }
+              onEmbeddingConnectivityChange={() => {}}
+              forwardedRef={modelConfigSectionRef}
+              canAccessProtectedData={canAccessProtectedData}
+            />
+          ) : null}
+        </div>
       </motion.div>
 
       <EmbedderCheckModal

frontend/app/[locale]/page.tsx

@@ -324,7 +324,7 @@ export default function Home() {
 
         case "models":
           return (
-            <div className="w-full h-full p-1">
+            <div className="w-full h-full p-8">
               <ModelsContent
                 connectionStatus={connectionStatus}
                 isCheckingConnection={isCheckingConnection}
@@ -502,10 +502,12 @@ export default function Home() {
         currentView={currentView}
         showFooter={currentView !== "setup"}
         contentMode={
-          currentView === "home" 
-            ? "centered" 
-            : currentView === "memory" || currentView === "models" 
-            ? "centered" 
+          currentView === "home"
+            ? "centered"
+            : currentView === "memory" ||
+              currentView === "models" ||
+              currentView === "knowledges"
+            ? "centered"
             : currentView === "chat"
             ? "fullscreen"
             : "scrollable"