Skip to content

Commit 02f93ab

Browse files
PhineasePhinease
authored
🐛 UI Improvement
2 parents f3b84f3 + b9eb4bc commit 02f93ab

File tree

8 files changed

+74
-68
lines changed

8 files changed

+74
-68
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,11 @@ export default function AgentsContent({
7474
transition={pageTransition}
7575
style={{width: "100%", height: "100%"}}
7676
>
77-
{canAccessProtectedData ? (
78-
<AgentConfig ref={agentConfigRef} canAccessProtectedData={canAccessProtectedData} />
79-
) : null}
77+
<div className="w-full h-full flex items-center justify-center">
78+
{canAccessProtectedData ? (
79+
<AgentConfig ref={agentConfigRef} canAccessProtectedData={canAccessProtectedData} />
80+
) : null}
81+
</div>
8082
</motion.div>
8183

8284
<SaveConfirmModal

‎frontend/app/[locale]/knowledges/KnowledgeBaseConfiguration.tsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type React from "react";
44
import { useState, useEffect, useRef, useLayoutEffect } from "react";
55
import { useTranslation } from "react-i18next";
66

7-
import { App, Modal } from "antd";
7+
import { App, Modal, Row, Col } from "antd";
88
import { InfoCircleFilled, WarningFilled } from "@ant-design/icons";
99
import {
1010
DOCUMENT_ACTION_TYPES,
@@ -19,7 +19,7 @@ import { KnowledgeBase } from "@/types/knowledgeBase";
1919
import { useConfig } from "@/hooks/useConfig";
2020
import {
2121
SETUP_PAGE_CONTAINER,
22-
FLEX_TWO_COLUMN_LAYOUT,
22+
TWO_COLUMN_LAYOUT,
2323
STANDARD_CARD,
2424
} from "@/const/layoutConstants";
2525

@@ -828,12 +828,14 @@ function DataConfig({ isActive }: DataConfigProps) {
828828
</div>
829829
</div>
830830
</Modal>
831-
<div
832-
className="flex h-full"
833-
style={{ gap: FLEX_TWO_COLUMN_LAYOUT.GAP }}
834-
>
835-
{/* Left knowledge base list - occupies 1/3 space */}
836-
<div style={{ width: FLEX_TWO_COLUMN_LAYOUT.LEFT_WIDTH }}>
831+
<Row gutter={TWO_COLUMN_LAYOUT.GUTTER} className="h-full">
832+
<Col
833+
xs={TWO_COLUMN_LAYOUT.LEFT_COLUMN.xs}
834+
md={TWO_COLUMN_LAYOUT.LEFT_COLUMN.md}
835+
lg={TWO_COLUMN_LAYOUT.LEFT_COLUMN.lg}
836+
xl={TWO_COLUMN_LAYOUT.LEFT_COLUMN.xl}
837+
xxl={TWO_COLUMN_LAYOUT.LEFT_COLUMN.xxl}
838+
>
837839
<KnowledgeBaseList
838840
knowledgeBases={kbState.knowledgeBases}
839841
selectedIds={kbState.selectedIds}
@@ -850,10 +852,15 @@ function DataConfig({ isActive }: DataConfigProps) {
850852
containerHeight={SETUP_PAGE_CONTAINER.MAIN_CONTENT_HEIGHT}
851853
onKnowledgeBaseChange={() => {}} // No need to trigger repeatedly here as it's already handled in handleKnowledgeBaseClick
852854
/>
853-
</div>
854-
855-
{/* Right content area - occupies 2/3 space, now unified with config.tsx style */}
856-
<div style={{ width: FLEX_TWO_COLUMN_LAYOUT.RIGHT_WIDTH }}>
855+
</Col>
856+
857+
<Col
858+
xs={TWO_COLUMN_LAYOUT.RIGHT_COLUMN.xs}
859+
md={TWO_COLUMN_LAYOUT.RIGHT_COLUMN.md}
860+
lg={TWO_COLUMN_LAYOUT.RIGHT_COLUMN.lg}
861+
xl={TWO_COLUMN_LAYOUT.RIGHT_COLUMN.xl}
862+
xxl={TWO_COLUMN_LAYOUT.RIGHT_COLUMN.xxl}
863+
>
857864
{isCreatingMode ? (
858865
<DocumentList
859866
documents={[]}
@@ -925,8 +932,8 @@ function DataConfig({ isActive }: DataConfigProps) {
925932
/>
926933
</div>
927934
)}
928-
</div>
929-
</div>
935+
</Col>
936+
</Row>
930937
</div>
931938
</>
932939
);

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,9 @@ export default function KnowledgesContent({
9999
transition={pageTransition}
100100
style={{width: "100%", height: "100%"}}
101101
>
102-
<DataConfig isActive={true} />
102+
<div className="w-full h-full flex items-center justify-center">
103+
<DataConfig isActive={true} />
104+
</div>
103105
</motion.div>
104106
) : null}
105107
</>

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

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -349,29 +349,31 @@ export default function MemoryContent({ onNavigate }: MemoryContentProps) {
349349
style={{ width: "100%", height: "100%" }}
350350
>
351351
{canAccessProtectedData ? (
352-
<div
353-
className="w-full mx-auto"
354-
style={{
355-
maxWidth: SETUP_PAGE_CONTAINER.MAX_WIDTH,
356-
padding: `0 ${SETUP_PAGE_CONTAINER.HORIZONTAL_PADDING}`,
357-
}}
358-
>
352+
<div className="w-full h-full flex items-center justify-center">
359353
<div
360-
className={STANDARD_CARD.BASE_CLASSES}
354+
className="w-full mx-auto"
361355
style={{
362-
height: SETUP_PAGE_CONTAINER.MAIN_CONTENT_HEIGHT,
363-
padding: "25px",
356+
maxWidth: SETUP_PAGE_CONTAINER.MAX_WIDTH,
357+
padding: `0 ${SETUP_PAGE_CONTAINER.HORIZONTAL_PADDING}`,
364358
}}
365359
>
366-
<Tabs
367-
size="middle"
368-
items={tabItems}
369-
activeKey={memory.activeTabKey}
370-
onChange={(key) => memory.setActiveTabKey(key)}
371-
tabBarStyle={{
372-
marginBottom: "16px",
360+
<div
361+
className={STANDARD_CARD.BASE_CLASSES}
362+
style={{
363+
height: SETUP_PAGE_CONTAINER.MAIN_CONTENT_HEIGHT,
364+
padding: "25px",
373365
}}
374-
/>
366+
>
367+
<Tabs
368+
size="middle"
369+
items={tabItems}
370+
activeKey={memory.activeTabKey}
371+
onChange={(key) => memory.setActiveTabKey(key)}
372+
tabBarStyle={{
373+
marginBottom: "16px",
374+
}}
375+
/>
376+
</div>
375377
</div>
376378
</div>
377379
) : null}

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -130,16 +130,18 @@ export default function ModelsContent({
130130
transition={pageTransition}
131131
style={{width: "100%", height: "100%"}}
132132
>
133-
{canAccessProtectedData ? (
134-
<AppModelConfig
135-
onSelectedModelsChange={(selected) =>
136-
setLiveSelectedModels(selected)
137-
}
138-
onEmbeddingConnectivityChange={() => {}}
139-
forwardedRef={modelConfigSectionRef}
140-
canAccessProtectedData={canAccessProtectedData}
141-
/>
142-
) : null}
133+
<div className="w-full h-full flex items-center justify-center">
134+
{canAccessProtectedData ? (
135+
<AppModelConfig
136+
onSelectedModelsChange={(selected) =>
137+
setLiveSelectedModels(selected)
138+
}
139+
onEmbeddingConnectivityChange={() => {}}
140+
forwardedRef={modelConfigSectionRef}
141+
canAccessProtectedData={canAccessProtectedData}
142+
/>
143+
) : null}
144+
</div>
143145
</motion.div>
144146

145147
<EmbedderCheckModal

‎frontend/app/[locale]/page.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ export default function Home() {
324324

325325
case "models":
326326
return (
327-
<div className="w-full h-full p-1">
327+
<div className="w-full h-full p-8">
328328
<ModelsContent
329329
connectionStatus={connectionStatus}
330330
isCheckingConnection={isCheckingConnection}
@@ -500,12 +500,15 @@ export default function Home() {
500500
onAdminRequired={handleAdminRequired}
501501
onViewChange={handleViewChange}
502502
currentView={currentView}
503-
showFooter={currentView !== "setup"}
503+
showFooter={true}
504504
contentMode={
505-
currentView === "home"
506-
? "centered"
507-
: currentView === "memory" || currentView === "models"
508-
? "centered"
505+
currentView === "home"
506+
? "centered"
507+
: currentView === "memory" ||
508+
currentView === "models" ||
509+
currentView === "knowledges" ||
510+
currentView === "setup"
511+
? "centered"
509512
: currentView === "chat"
510513
? "fullscreen"
511514
: "scrollable"

‎frontend/app/[locale]/setup/SetupLayout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ function Navigation({
131131
};
132132

133133
return (
134-
<div className="mt-3 flex justify-between px-6">
134+
<div className="mt-3 flex justify-between" style={{ padding: "0 16px" }}>
135135
<div className="flex gap-2">
136136
{showBack && onBack && (
137137
<button
@@ -194,10 +194,10 @@ export default function SetupLayout({
194194
completeText,
195195
}: SetupLayoutProps) {
196196
return (
197-
<div className="w-full h-full bg-slate-50 dark:bg-slate-900 font-sans">
197+
<div className="w-full h-full bg-slate-50 dark:bg-slate-900 font-sans overflow-hidden">
198198
{/* Main content with fixed size */}
199-
<div className="max-w-[1800px] mx-auto px-8 pb-4 pt-6 bg-transparent h-full flex flex-col">
200-
<div className="flex-1 overflow-auto">
199+
<div className="max-w-[1800px] mx-auto px-8 pb-6 pt-6 bg-transparent h-full flex flex-col">
200+
<div className="flex-1 w-full h-full flex items-center justify-center">
201201
{children}
202202
</div>
203203
<Navigation

‎frontend/const/layoutConstants.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -68,18 +68,6 @@ export const TWO_COLUMN_LAYOUT = {
6868
},
6969
} as const;
7070

71-
// Flex two column layout configuration (based on the KnowledgeBaseManager design)
72-
export const FLEX_TWO_COLUMN_LAYOUT = {
73-
// Left knowledge base list width
74-
LEFT_WIDTH: "33.333333%", // 1/3
75-
76-
// Right content area width
77-
RIGHT_WIDTH: "66.666667%", // 2/3
78-
79-
// Column spacing
80-
GAP: "12px",
81-
} as const;
82-
8371
// Standard card style configuration (based on the first page design)
8472
export const STANDARD_CARD = {
8573
// Base style class name

0 commit comments

Comments
 (0)