Skip to content

Commit bc22cac

Browse files
PhineasePhinease
authored
⭐️ Comming soon pages
2 parents 1ca3dcf + c73c9ee commit bc22cac

File tree

9 files changed

+459
-14
lines changed

9 files changed

+459
-14
lines changed

‎frontend/app/[locale]/market/MarketContent.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { motion } from "framer-motion";
5+
import { useTranslation } from "react-i18next";
6+
import { ShoppingBag } from "lucide-react";
7+
8+
import { useSetupFlow } from "@/hooks/useSetupFlow";
9+
import { ConnectionStatus } from "@/const/modelConfig";
10+
11+
interface MarketContentProps {
12+
/** Connection status */
13+
connectionStatus?: ConnectionStatus;
14+
/** Is checking connection */
15+
isCheckingConnection?: boolean;
16+
/** Check connection callback */
17+
onCheckConnection?: () => void;
18+
/** Callback to expose connection status */
19+
onConnectionStatusChange?: (status: ConnectionStatus) => void;
20+
}
21+
22+
/**
23+
* MarketContent - Agent marketplace coming soon page
24+
* This will allow users to browse and install pre-built agents
25+
*/
26+
export default function MarketContent({
27+
connectionStatus: externalConnectionStatus,
28+
isCheckingConnection: externalIsCheckingConnection,
29+
onCheckConnection: externalOnCheckConnection,
30+
onConnectionStatusChange,
31+
}: MarketContentProps) {
32+
const { t } = useTranslation("common");
33+
34+
// Use custom hook for common setup flow logic
35+
const {
36+
canAccessProtectedData,
37+
pageVariants,
38+
pageTransition,
39+
} = useSetupFlow({
40+
requireAdmin: false, // Market accessible to all users
41+
externalConnectionStatus,
42+
externalIsCheckingConnection,
43+
onCheckConnection: externalOnCheckConnection,
44+
onConnectionStatusChange,
45+
});
46+
47+
return (
48+
<>
49+
{canAccessProtectedData ? (
50+
<motion.div
51+
initial="initial"
52+
animate="in"
53+
exit="out"
54+
variants={pageVariants}
55+
transition={pageTransition}
56+
className="w-full h-full flex items-center justify-center"
57+
>
58+
<div className="flex flex-col items-center justify-center space-y-6 p-8 max-w-md text-center">
59+
{/* Icon */}
60+
<motion.div
61+
initial={{ scale: 0 }}
62+
animate={{ scale: 1 }}
63+
transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
64+
className="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg"
65+
>
66+
<ShoppingBag className="h-12 w-12 text-white" />
67+
</motion.div>
68+
69+
{/* Title */}
70+
<motion.h1
71+
initial={{ opacity: 0, y: 20 }}
72+
animate={{ opacity: 1, y: 0 }}
73+
transition={{ delay: 0.3 }}
74+
className="text-3xl font-bold text-slate-800 dark:text-slate-100"
75+
>
76+
{t("market.comingSoon.title")}
77+
</motion.h1>
78+
79+
{/* Description */}
80+
<motion.p
81+
initial={{ opacity: 0, y: 20 }}
82+
animate={{ opacity: 1, y: 0 }}
83+
transition={{ delay: 0.4 }}
84+
className="text-lg text-slate-600 dark:text-slate-400"
85+
>
86+
{t("market.comingSoon.description")}
87+
</motion.p>
88+
89+
{/* Feature list */}
90+
<motion.ul
91+
initial={{ opacity: 0, y: 20 }}
92+
animate={{ opacity: 1, y: 0 }}
93+
transition={{ delay: 0.5 }}
94+
className="text-left space-y-2 w-full"
95+
>
96+
<li className="flex items-start space-x-2">
97+
<span className="text-blue-500 mt-1">✓</span>
98+
<span className="text-slate-600 dark:text-slate-400">
99+
{t("market.comingSoon.feature1")}
100+
</span>
101+
</li>
102+
<li className="flex items-start space-x-2">
103+
<span className="text-blue-500 mt-1">✓</span>
104+
<span className="text-slate-600 dark:text-slate-400">
105+
{t("market.comingSoon.feature2")}
106+
</span>
107+
</li>
108+
<li className="flex items-start space-x-2">
109+
<span className="text-blue-500 mt-1">✓</span>
110+
<span className="text-slate-600 dark:text-slate-400">
111+
{t("market.comingSoon.feature3")}
112+
</span>
113+
</li>
114+
</motion.ul>
115+
116+
{/* Coming soon badge */}
117+
<motion.div
118+
initial={{ opacity: 0, scale: 0.8 }}
119+
animate={{ opacity: 1, scale: 1 }}
120+
transition={{ delay: 0.6 }}
121+
className="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full text-sm font-medium shadow-md"
122+
>
123+
{t("market.comingSoon.badge")}
124+
</motion.div>
125+
</div>
126+
</motion.div>
127+
) : null}
128+
</>
129+
);
130+
}
131+

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

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,12 @@ import { ChatTopNavContent } from "./chat/internal/ChatTopNavContent";
2727
import { Badge, Button as AntButton } from "antd";
2828
import { FiRefreshCw } from "react-icons/fi";
2929
import { USER_ROLES } from "@/const/modelConfig";
30+
import MarketContent from "./market/MarketContent";
31+
import UsersContent from "./users/UsersContent";
32+
import { getSavedView, saveView } from "@/lib/viewPersistence";
3033

3134
// View type definition
32-
type ViewType = "home" | "memory" | "models" | "agents" | "knowledges" | "space" | "setup" | "chat";
35+
type ViewType = "home" | "memory" | "models" | "agents" | "knowledges" | "space" | "setup" | "chat" | "market" | "users";
3336
type SetupStep = "models" | "knowledges" | "agents";
3437

3538
export default function Home() {
@@ -64,8 +67,8 @@ export default function Home() {
6467
const [adminRequiredPromptOpen, setAdminRequiredPromptOpen] =
6568
useState(false);
6669

67-
// View state management
68-
const [currentView, setCurrentView] = useState<ViewType>("home");
70+
// View state management with localStorage persistence
71+
const [currentView, setCurrentView] = useState<ViewType>(getSavedView);
6972

7073
// Connection status for model-dependent views
7174
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(
@@ -121,11 +124,21 @@ export default function Home() {
121124
// Determine if user is admin
122125
const isAdmin = isSpeedMode || user?.role === USER_ROLES.ADMIN;
123126

127+
// Load data for the saved view on initial mount
128+
useEffect(() => {
129+
if (currentView === "space" && agents.length === 0) {
130+
loadAgents();
131+
}
132+
}, []); // Only run on mount
133+
124134
// Handle view change from navigation
125135
const handleViewChange = (view: string) => {
126136
const viewType = view as ViewType;
127137
setCurrentView(viewType);
128138

139+
// Save current view to localStorage for persistence across page refreshes
140+
saveView(viewType);
141+
129142
// Initialize setup step based on user role
130143
if (viewType === "setup") {
131144
if (isAdmin) {
@@ -244,6 +257,7 @@ export default function Home() {
244257

245258
const handleSetupComplete = () => {
246259
setCurrentView("chat");
260+
saveView("chat");
247261
};
248262

249263
// Determine setup button visibility based on current step and user role
@@ -293,9 +307,18 @@ export default function Home() {
293307
<HomepageContent
294308
onAuthRequired={handleAuthRequired}
295309
onAdminRequired={handleAdminRequired}
296-
onChatNavigate={() => setCurrentView("chat")}
297-
onSetupNavigate={() => setCurrentView("setup")}
298-
onSpaceNavigate={() => setCurrentView("space")}
310+
onChatNavigate={() => {
311+
setCurrentView("chat");
312+
saveView("chat");
313+
}}
314+
onSetupNavigate={() => {
315+
setCurrentView("setup");
316+
saveView("setup");
317+
}}
318+
onSpaceNavigate={() => {
319+
setCurrentView("space");
320+
saveView("space");
321+
}}
299322
/>
300323
</div>
301324
);
@@ -354,13 +377,41 @@ export default function Home() {
354377
// TODO: Store the selected agentId and pass it to ChatContent
355378
// For now, just navigate to chat view
356379
setCurrentView("chat");
380+
saveView("chat");
381+
}}
382+
onEditNavigate={() => {
383+
// Navigate to agents development view
384+
setCurrentView("agents");
385+
saveView("agents");
357386
}}
358387
/>
359388
);
360389

361390
case "chat":
362391
return <ChatContent />;
363392

393+
case "market":
394+
return (
395+
<div className="w-full h-full">
396+
<MarketContent
397+
connectionStatus={connectionStatus}
398+
isCheckingConnection={isCheckingConnection}
399+
onCheckConnection={checkModelEngineConnection}
400+
/>
401+
</div>
402+
);
403+
404+
case "users":
405+
return (
406+
<div className="w-full h-full">
407+
<UsersContent
408+
connectionStatus={connectionStatus}
409+
isCheckingConnection={isCheckingConnection}
410+
onCheckConnection={checkModelEngineConnection}
411+
/>
412+
</div>
413+
);
414+
364415
case "setup":
365416
const setupNavProps = getSetupNavigationProps();
366417
return (

‎frontend/app/[locale]/space/components/AgentCard.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,10 @@ interface AgentCardProps {
4040
agent: Agent;
4141
onRefresh: () => void;
4242
onChat: (agentId: string) => void;
43+
onEdit?: () => void;
4344
}
4445

45-
export default function AgentCard({ agent, onRefresh, onChat }: AgentCardProps) {
46+
export default function AgentCard({ agent, onRefresh, onChat, onEdit }: AgentCardProps) {
4647
const router = useRouter();
4748
const { t } = useTranslation("common");
4849
const { message, modal } = App.useApp();
@@ -136,9 +137,11 @@ export default function AgentCard({ agent, onRefresh, onChat }: AgentCardProps)
136137
onChat(agent.id);
137138
};
138139

139-
// Handle edit
140+
// Handle edit - navigate to agents view
140141
const handleEdit = () => {
141-
router.push("/setup/agents");
142+
if (onEdit) {
143+
onEdit();
144+
}
142145
};
143146

144147
// Handle view detail

‎frontend/app/[locale]/space/components/SpaceContent.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface SpaceContentProps {
2525
onLoadAgents: () => void;
2626
onImportAgent: () => void;
2727
onChatNavigate?: (agentId: string) => void;
28+
onEditNavigate?: () => void;
2829
}
2930

3031
/**
@@ -39,6 +40,7 @@ export function SpaceContent({
3940
onLoadAgents,
4041
onImportAgent,
4142
onChatNavigate,
43+
onEditNavigate,
4244
}: SpaceContentProps) {
4345
const router = useRouter();
4446
const { t } = useTranslation("common");
@@ -47,9 +49,11 @@ export function SpaceContent({
4749
// Check if user is admin (or in speed mode where all features are available)
4850
const isAdmin = isSpeedMode || user?.role === USER_ROLES.ADMIN;
4951

50-
// Handle create new agent
52+
// Handle create new agent - navigate to agents view
5153
const handleCreateAgent = () => {
52-
router.push("/setup/agents");
54+
if (onEditNavigate) {
55+
onEditNavigate();
56+
}
5357
};
5458

5559
// Handle chat with agent
@@ -163,6 +167,7 @@ export function SpaceContent({
163167
agent={agent}
164168
onRefresh={onLoadAgents}
165169
onChat={handleChat}
170+
onEdit={onEditNavigate}
166171
/>
167172
</motion.div>
168173
))}

0 commit comments

Comments
 (0)