Skip to content

Commit 77d086d

Browse files
InneiInnei
committed
feat(agent-ui): initialize agent UI application with core components and configuration
Add initial setup for the agent UI, including essential files such as package.json, Vite configuration, and ESLint settings. Implement core components like the main application structure, input bar, chat messages, and settings panel. Introduce a rich text editor for message input and establish a sidebar for session management. Configure Tailwind CSS for styling and set up routing with React Router. Signed-off-by: Innei <tukon479@gmail.com>
1 parent 8c17eb7 commit 77d086d

42 files changed

Lines changed: 6899 additions & 107 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/agent-ui/components.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/styles/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎apps/agent-ui/eslint.config.mjs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from '@lobehub/eslint-config'
2+
3+
export default defineConfig({
4+
react: true,
5+
typescript: true,
6+
sortKeys: false,
7+
})

‎apps/agent-ui/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="theme-color" content="#0a0a0a" />
7+
<title>MX Agent</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
12+
rel="stylesheet"
13+
/>
14+
</head>
15+
<body class="dark">
16+
<div id="root"></div>
17+
<script type="module" src="/src/main.tsx"></script>
18+
</body>
19+
</html>

‎apps/agent-ui/package.json‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "@mx-space/agent-ui",
3+
"version": "0.1.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"preview": "vite preview",
10+
"lint": "eslint src/",
11+
"typecheck": "tsc --noEmit"
12+
},
13+
"dependencies": {
14+
"@lexical/code": "^0.22.0",
15+
"@lexical/link": "^0.22.0",
16+
"@lexical/list": "^0.22.0",
17+
"@lexical/markdown": "^0.22.0",
18+
"@lexical/react": "^0.22.0",
19+
"@lexical/rich-text": "^0.22.0",
20+
"@radix-ui/react-dialog": "1.1.15",
21+
"@radix-ui/react-popover": "1.1.15",
22+
"@radix-ui/react-slot": "1.2.4",
23+
"@radix-ui/react-switch": "1.2.6",
24+
"@radix-ui/react-toast": "1.2.15",
25+
"@radix-ui/react-tooltip": "1.2.8",
26+
"@streamdown/cjk": "latest",
27+
"@streamdown/code": "latest",
28+
"class-variance-authority": "^0.7.1",
29+
"clsx": "^2.1.1",
30+
"lexical": "^0.22.0",
31+
"lucide-react": "^0.564.0",
32+
"react": "^19.2.4",
33+
"react-dom": "^19.2.4",
34+
"react-router": "^7.0.0",
35+
"socket.io-client": "^4.8.0",
36+
"streamdown": "latest",
37+
"tailwind-merge": "^3.3.1",
38+
"zustand": "^5.0.11"
39+
},
40+
"devDependencies": {
41+
"@tailwindcss/vite": "^4.1.0",
42+
"@types/react": "^19.2.14",
43+
"@types/react-dom": "^19.2.3",
44+
"@vitejs/plugin-react": "^4.4.0",
45+
"tailwindcss": "^4.1.0",
46+
"tw-animate-css": "^1.3.3",
47+
"typescript": "^5.7.3",
48+
"vite": "^6.2.0"
49+
}
50+
}

‎apps/agent-ui/src/app.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Toaster } from '@/components/ui/toaster'
2+
import { TooltipProvider } from '@/components/ui/tooltip'
3+
import { AgentRoute } from '@/routes/index'
4+
import { BrowserRouter, Route, Routes } from 'react-router'
5+
6+
export function App() {
7+
return (
8+
<BrowserRouter>
9+
<TooltipProvider delayDuration={200}>
10+
<Routes>
11+
<Route path="/*" element={<AgentRoute />} />
12+
</Routes>
13+
<Toaster />
14+
</TooltipProvider>
15+
</BrowserRouter>
16+
)
17+
}

‎apps/agent-ui/src/components/agent/agent-shell.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { Button } from '@/components/ui/button'
2+
import {
3+
Tooltip,
4+
TooltipContent,
5+
TooltipTrigger,
6+
} from '@/components/ui/tooltip'
7+
import { useAgentStore } from '@/lib/agent-store'
8+
import { PanelLeft, PenSquare, Settings2 } from 'lucide-react'
9+
import { ChatMessages } from './chat-messages'
10+
import { InputBar } from './input-bar'
11+
import { SettingsPanel } from './settings-panel'
12+
import { Sidebar } from './sidebar'
13+
14+
export function AgentShell() {
15+
const store = useAgentStore()
16+
17+
return (
18+
<div className="flex h-screen bg-background">
19+
{/* Sidebar */}
20+
<Sidebar />
21+
22+
{/* Main area */}
23+
<div className="flex flex-1 flex-col min-w-0">
24+
{/* Top bar */}
25+
<header className="flex h-12 shrink-0 items-center justify-between border-b border-border px-4">
26+
<div className="flex items-center gap-2">
27+
{!store.sidebarOpen && (
28+
<Tooltip>
29+
<TooltipTrigger asChild>
30+
<Button
31+
variant="ghost"
32+
size="icon"
33+
className="size-8 text-muted-foreground hover:text-foreground"
34+
onClick={() => store.setSidebarOpen(true)}
35+
aria-label="Open sidebar"
36+
>
37+
<PanelLeft className="size-4" />
38+
</Button>
39+
</TooltipTrigger>
40+
<TooltipContent>Open sidebar</TooltipContent>
41+
</Tooltip>
42+
)}
43+
<div className="flex items-center gap-3">
44+
<div className="flex size-7 items-center justify-center">
45+
<svg
46+
className="size-5 text-foreground"
47+
viewBox="0 0 76 65"
48+
fill="currentColor"
49+
>
50+
<path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
51+
</svg>
52+
</div>
53+
<div className="h-4 w-px bg-border" />
54+
<h1 className="text-sm font-medium text-foreground">MX Agent</h1>
55+
</div>
56+
</div>
57+
58+
<div className="flex items-center gap-1">
59+
<Tooltip>
60+
<TooltipTrigger asChild>
61+
<Button
62+
variant="ghost"
63+
size="icon"
64+
className="size-8 text-muted-foreground hover:text-foreground"
65+
onClick={store.newSession}
66+
aria-label="New chat"
67+
>
68+
<PenSquare className="size-4" />
69+
</Button>
70+
</TooltipTrigger>
71+
<TooltipContent>New chat</TooltipContent>
72+
</Tooltip>
73+
<Tooltip>
74+
<TooltipTrigger asChild>
75+
<Button
76+
variant="ghost"
77+
size="icon"
78+
className="size-8 text-muted-foreground hover:text-foreground"
79+
onClick={() => store.setSettingsOpen(true)}
80+
aria-label="Settings"
81+
>
82+
<Settings2 className="size-4" />
83+
</Button>
84+
</TooltipTrigger>
85+
<TooltipContent>Settings</TooltipContent>
86+
</Tooltip>
87+
</div>
88+
</header>
89+
90+
{/* Chat area */}
91+
<ChatMessages />
92+
93+
{/* Input area */}
94+
<InputBar />
95+
96+
{/* Settings dialog */}
97+
<SettingsPanel />
98+
</div>
99+
</div>
100+
)
101+
}

0 commit comments

Comments
 (0)