Skip to content

Commit dd5081a

Browse files
CocDapCocDap
authored
fix: fix ui (#123)
1 parent bb8b815 commit dd5081a

File tree

11 files changed

+80
-36
lines changed

11 files changed

+80
-36
lines changed

‎apps/playground/app/chat/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export default function ChatPage() {
165165

166166
<div className="flex-1 flex flex-col min-h-0">
167167
<div className="border-b border-white/10 modern-card border-l-0 border-r-0 border-t-0 rounded-none flex-shrink-0">
168-
<div className="flex items-center justify-between p-4 sm:p-6">
168+
<div className="flex items-center justify-between p-4 sm:p-6 h-[73px] sm:h-[89px]">
169169
<div className="flex items-center gap-2 sm:gap-4">
170170
<h2 className="text-xl sm:text-2xl font-bold modern-text-primary">AI Chat Interface</h2>
171171
<Badge className="modern-badge font-medium px-2 py-1 text-xs sm:px-3 sm:py-1 sm:text-sm">Interactive</Badge>

‎apps/playground/app/config/page.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Settings, Key, Cpu, Loader2, Check, ArrowLeft, ArrowRight, Link } from
1111
import Sidebar from "@/components/sidebar"
1212
import { ChainSelector } from "@/components/chain-selector"
1313
import { useAgentStore } from "@/stores/agent-store"
14+
import { useToast } from "@/hooks/use-toast"
1415
import type { KnownChainId, KeyType } from "@polkadot-agent-kit/common"
1516
interface AgentConfig {
1617
llmProvider: string
@@ -34,6 +35,7 @@ interface Chain {
3435

3536
export default function ConfigPage() {
3637
const router = useRouter()
38+
const { toast } = useToast()
3739
const {
3840
config,
3941
isConfigured,
@@ -313,6 +315,12 @@ export default function ConfigPage() {
313315
setInitializing(true)
314316
setLlmConnected("idle")
315317

318+
// Show connecting toast notification
319+
const connectingToast = toast({
320+
title: "Connecting",
321+
description: "Initializing agent, please wait...",
322+
})
323+
316324
try {
317325
// If LLM changed, persist LLM config and (optionally) validate
318326
if (llmChanged) {
@@ -375,9 +383,25 @@ export default function ConfigPage() {
375383
const updatedConfig = { ...agentConfig, isConfigured: true }
376384
setAgentConfig(updatedConfig)
377385

386+
// Dismiss connecting toast and show success
387+
connectingToast.dismiss()
388+
toast({
389+
title: "Connected",
390+
description: "Agent initialized successfully!",
391+
})
392+
378393
router.push("/chat")
379394
} catch (err) {
380395
console.error("Failed to connect agent:", err)
396+
397+
// Dismiss connecting toast and show error
398+
connectingToast.dismiss()
399+
toast({
400+
title: "Connection Failed",
401+
description: err instanceof Error ? err.message : "Unknown error occurred",
402+
variant: "destructive",
403+
})
404+
381405
alert(
382406
`Failed to connect agent: ${err instanceof Error ? err.message : "Unknown error"}. ` +
383407
(agentConfig.llmProvider === "ollama" && llmConnected === "error"
@@ -411,7 +435,7 @@ export default function ConfigPage() {
411435

412436
<div className="flex-1 flex flex-col overflow-hidden">
413437
<div className="border-b border-white/10 modern-card border-l-0 border-r-0 border-t-0 rounded-none flex-shrink-0">
414-
<div className="flex items-center justify-between p-4 sm:p-6">
438+
<div className="flex items-center justify-between p-4 sm:p-6 h-[73px] sm:h-[89px]">
415439
<div className="flex items-center gap-2 sm:gap-4">
416440
<h2 className="text-xl sm:text-2xl font-bold modern-text-primary">Agent Configuration</h2>
417441
<Badge className="modern-badge font-medium px-2 py-1 text-xs sm:px-3 sm:py-1 sm:text-sm">Setup</Badge>
@@ -788,7 +812,7 @@ export default function ConfigPage() {
788812
{isInitializing ? (
789813
<>
790814
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
791-
Connecting...
815+
Connecting
792816
</>
793817
) : (
794818
<>

‎apps/playground/app/developer/page.tsx‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Input } from "@/components/ui/input"
99
import { Textarea } from "@/components/ui/textarea"
1010
import { Button } from "@/components/ui/button"
1111
import { ScrollArea } from "@/components/ui/scroll-area"
12-
import { Play, Zap, Terminal } from "lucide-react"
12+
import { Play, Zap, Terminal, X, Loader2 } from "lucide-react"
1313
import {
1414
Collapsible,
1515
CollapsibleContent,
@@ -48,6 +48,7 @@ export default function DeveloperPage() {
4848
const [toolCalls, setToolCalls] = useState<ToolCall[]>([])
4949
const [formData, setFormData] = useState<Record<string, any>>({})
5050
const [parsedSchema, setParsedSchema] = useState<any>(null)
51+
const [isExecuting, setIsExecuting] = useState(false)
5152

5253
// Restore agent session on page load
5354
useAgentRestore()
@@ -195,7 +196,8 @@ export default function DeveloperPage() {
195196
}
196197

197198
const runTool = async (params: Record<string, any>) => {
198-
if (!selectedTool) return
199+
if (!selectedTool || isExecuting) return
200+
setIsExecuting(true)
199201
const id = String(Date.now())
200202
setToolCalls(prev => [...prev, { id, tool: selectedEndpoint || "", method: selectedMethod, params: JSON.stringify(params, null, 2), status: "pending" }])
201203
try {
@@ -205,17 +207,23 @@ export default function DeveloperPage() {
205207
setToolCalls(prev => prev.map(c => c.id === id ? { ...c, status: "success", response: JSON.stringify(res, null, 2) } : c))
206208
} catch (err: any) {
207209
setToolCalls(prev => prev.map(c => c.id === id ? { ...c, status: "error", response: String(err?.message || err) } : c))
210+
} finally {
211+
setIsExecuting(false)
208212
}
209213
}
210214

215+
const removeToolCall = (id: string) => {
216+
setToolCalls(prev => prev.filter(c => c.id !== id))
217+
}
218+
211219
return (
212220
<div className="modern-container min-h-screen">
213221
<div className="flex min-h-screen">
214222
<Sidebar currentPage="developer" />
215223

216224
<div className="flex-1 flex flex-col min-h-screen">
217225
<div className="border-b border-white/10 modern-card border-l-0 border-r-0 border-t-0 rounded-none flex-shrink-0">
218-
<div className="flex items-center justify-between p-4 sm:p-6">
226+
<div className="flex items-center justify-between p-4 sm:p-6 h-[73px] sm:h-[89px]">
219227
<div className="flex items-center gap-4">
220228
<h2 className="text-xl sm:text-2xl font-bold modern-text-primary">Developer Portal</h2>
221229
<Badge className="modern-badge font-medium px-3 py-1">Tools</Badge>
@@ -297,11 +305,20 @@ export default function DeveloperPage() {
297305
<div className="pt-4 border-t border-white/10">
298306
<Button
299307
onClick={() => runTool(formData)}
300-
disabled={!isInitialized || !selectedEndpoint || !selectedMethod}
308+
disabled={!isInitialized || !selectedEndpoint || !selectedMethod || isExecuting}
301309
className="w-full modern-button-primary"
302310
>
303-
<Play className="w-4 h-4 mr-2" />
304-
Execute API Call
311+
{isExecuting ? (
312+
<>
313+
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
314+
Executing...
315+
</>
316+
) : (
317+
<>
318+
<Play className="w-4 h-4 mr-2" />
319+
Execute API Call
320+
</>
321+
)}
305322
</Button>
306323
</div>
307324
</div>
@@ -343,6 +360,15 @@ export default function DeveloperPage() {
343360
>
344361
{call.status}
345362
</Badge>
363+
<Button
364+
variant="ghost"
365+
size="sm"
366+
onClick={() => removeToolCall(call.id)}
367+
className="h-6 w-6 p-0 hover:bg-red-500/20 hover:text-red-400"
368+
title="Remove this API call"
369+
>
370+
<X className="w-3 h-3 sm:w-4 sm:h-4" />
371+
</Button>
346372
</div>
347373
</div>
348374

‎apps/playground/app/layout.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import type { Metadata } from "next"
33
import { GeistSans } from "geist/font/sans"
44
import { GeistMono } from "geist/font/mono"
55
import "./globals.css"
6+
import Script from "next/script"
7+
import { Toaster } from "@/components/ui/toaster"
68

79
export const metadata: Metadata = {
810
title: "Polkadot Agent Playground",
9-
description: "Interactive environment for exploring Polkadot Agent Kit capabilities",
10-
generator: "v0.app",
11+
description: "Interactive environment for exploring Polkadot Agent Kit on-chain capabilities",
1112
}
1213

1314
export default function RootLayout({
@@ -17,7 +18,22 @@ export default function RootLayout({
1718
}>) {
1819
return (
1920
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} dark`}>
20-
<body className="antialiased">{children}</body>
21+
<head>
22+
{/* put this in the <head> */}
23+
{process.env.NODE_ENV === "development" && (
24+
<Script
25+
src="//unpkg.com/react-grab/dist/index.global.js"
26+
crossOrigin="anonymous"
27+
strategy="beforeInteractive"
28+
data-enabled="true"
29+
/>
30+
)}
31+
{/* rest of your scripts go under */}
32+
</head>
33+
<body className="antialiased">
34+
{children}
35+
<Toaster />
36+
</body>
2137
</html>
2238
)
2339
}

‎apps/playground/components/sidebar.tsx‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,12 @@ export default function Sidebar({ currentPage }: SidebarProps) {
3131

3232
return (
3333
<div className={`${sidebarCollapsed ? "w-16" : "w-80"} transition-all duration-300 modern-sidebar`}>
34-
<div className={`flex items-center ${sidebarCollapsed ? "justify-center" : "justify-between"} p-4 border-b border-white/10`}>
34+
<div className={`flex items-center ${sidebarCollapsed ? "justify-center" : "justify-between"} p-4 sm:p-6 border-b border-white/10 h-[73px] sm:h-[89px]`}>
3535
{!sidebarCollapsed && (
3636
<div className="flex items-center gap-3">
37-
<div className="w-10 h-10 modern-logo flex items-center justify-center">
38-
<Terminal className="w-5 h-5" />
39-
</div>
4037
<div>
4138
<h1 className="font-bold text-xl modern-gradient-text">Polkadot Agent Kit</h1>
42-
<p className="text-xs modern-text-secondary">Playground v0.1.0</p>
39+
<p className="text-xs modern-text-secondary">Playground v2.1.3</p>
4340
</div>
4441
</div>
4542
)}
@@ -78,23 +75,6 @@ export default function Sidebar({ currentPage }: SidebarProps) {
7875
{!sidebarCollapsed && <span className="font-medium">Developer Portal</span>}
7976
</Button>
8077
</div>
81-
82-
<div className="p-4 mt-auto">
83-
{sidebarCollapsed ? (
84-
<div className="flex justify-center">
85-
<div className={`w-3 h-3 rounded-full ${isInitialized ? "bg-green-400" : "bg-red-400"}`} />
86-
</div>
87-
) : (
88-
<div className="modern-form-section">
89-
<div className="flex items-center gap-2 text-xs">
90-
<div className={`w-2 h-2 rounded-full ${isInitialized ? "bg-green-400" : "bg-red-400"}`} />
91-
<span className="modern-text-secondary">
92-
{isInitialized ? "Agent Configured" : "Configuration Required"}
93-
</span>
94-
</div>
95-
</div>
96-
)}
97-
</div>
9878
</div>
9979
)
10080
}

‎apps/playground/public/elastic-labs.png‎

60 KB
Loading

‎apps/playground/public/placeholder-logo.png‎

-568 Bytes
Binary file not shown.

‎apps/playground/public/placeholder-logo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/playground/public/placeholder-user.jpg‎

-1.6 KB
Binary file not shown.

‎apps/playground/public/placeholder.jpg‎

-1.04 KB
Binary file not shown.

0 commit comments

Comments
 (0)