Skip to content

Commit 3e8ee15

Browse files
markokraemermarkokraemer
authored
Merge pull request #1132 from sunzhengya/feature/zanyar-fe
feat(data-provider-tool): add enhanced UI components for data provide…
2 parents 8c0beb6 + 88dc5df commit 3e8ee15

File tree

2 files changed

+186
-180
lines changed

2 files changed

+186
-180
lines changed

‎frontend/src/components/thread/tool-views/data-provider-tool/DataProviderEndpointsToolView.tsx

Lines changed: 98 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { cn } from '@/lib/utils';
1919
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
2020
import { Badge } from '@/components/ui/badge';
2121
import { extractDataProviderEndpointsData } from './_utils';
22+
import { ScrollArea } from '@/components/ui/scroll-area';
2223

2324
const PROVIDER_CONFIG = {
2425
'linkedin': {
@@ -147,113 +148,115 @@ export function DataProviderEndpointsToolView({
147148
</div>
148149
</div>
149150
) : (
150-
<div className="p-4 space-y-6">
151-
<div className="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-900/50 rounded-lg border border-zinc-200 dark:border-zinc-800">
152-
<div className={cn(
153-
"w-12 h-12 rounded-lg flex items-center justify-center shadow-sm border-2",
154-
`bg-gradient-to-br ${providerConfig.color}`,
155-
"border-white/20"
156-
)}>
157-
<IconComponent className="h-6 w-6 text-white drop-shadow-sm" />
158-
</div>
151+
<ScrollArea className="h-full w-full">
152+
<div className="p-4 space-y-6">
153+
<div className="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-900/50 rounded-lg border border-zinc-200 dark:border-zinc-800">
154+
<div className={cn(
155+
"w-12 h-12 rounded-lg flex items-center justify-center shadow-sm border-2",
156+
`bg-gradient-to-br ${providerConfig.color}`,
157+
"border-white/20"
158+
)}>
159+
<IconComponent className="h-6 w-6 text-white drop-shadow-sm" />
160+
</div>
159161

160-
<div className="flex-1">
161-
<h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
162-
{providerConfig.name}
163-
</h3>
164-
<p className="text-sm text-zinc-500 dark:text-zinc-400">
165-
{endpointCount > 0 ? `${endpointCount} endpoints loaded and ready` : 'Endpoints loaded and ready'}
166-
</p>
167-
</div>
162+
<div className="flex-1">
163+
<h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
164+
{providerConfig.name}
165+
</h3>
166+
<p className="text-sm text-zinc-500 dark:text-zinc-400">
167+
{endpointCount > 0 ? `${endpointCount} endpoints loaded and ready` : 'Endpoints loaded and ready'}
168+
</p>
169+
</div>
168170

169-
<Badge
170-
variant="secondary"
171-
className={cn(
172-
"text-xs font-medium",
173-
actualIsSuccess
174-
? "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-300 dark:border-emerald-800"
175-
: "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800"
176-
)}
177-
>
178-
{actualIsSuccess ? (
179-
<CheckCircle className="h-3 w-3 mr-1" />
180-
) : (
181-
<AlertTriangle className="h-3 w-3 mr-1" />
182-
)}
183-
{actualIsSuccess ? 'Connected' : 'Failed'}
184-
</Badge>
185-
</div>
186-
<div className="space-y-4">
187-
<div className="flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
188-
<Database className="h-4 w-4" />
189-
<span>Provider Status</span>
190-
<ChevronRight className="h-3 w-3 text-zinc-400" />
171+
<Badge
172+
variant="secondary"
173+
className={cn(
174+
"text-xs font-medium",
175+
actualIsSuccess
176+
? "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-300 dark:border-emerald-800"
177+
: "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800"
178+
)}
179+
>
180+
{actualIsSuccess ? (
181+
<CheckCircle className="h-3 w-3 mr-1" />
182+
) : (
183+
<AlertTriangle className="h-3 w-3 mr-1" />
184+
)}
185+
{actualIsSuccess ? 'Connected' : 'Failed'}
186+
</Badge>
191187
</div>
192-
<div className="grid gap-3">
193-
<div className="flex items-center justify-between p-3 bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800">
194-
<div className="flex items-center gap-3">
195-
<div className="w-2 h-2 rounded-full bg-emerald-500"></div>
196-
<span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
197-
Connection Status
198-
</span>
199-
</div>
200-
<Badge
201-
variant="secondary"
202-
className={cn(
203-
"text-xs font-medium",
204-
actualIsSuccess
205-
? "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-300 dark:border-emerald-800"
206-
: "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800"
207-
)}
208-
>
209-
{actualIsSuccess ? (
210-
<CheckCircle className="h-3 w-3 mr-1" />
211-
) : (
212-
<AlertTriangle className="h-3 w-3 mr-1" />
213-
)}
214-
{actualIsSuccess ? 'Active' : 'Inactive'}
215-
</Badge>
188+
<div className="space-y-4">
189+
<div className="flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
190+
<Database className="h-4 w-4" />
191+
<span>Provider Status</span>
192+
<ChevronRight className="h-3 w-3 text-zinc-400" />
216193
</div>
194+
<div className="grid gap-3">
195+
<div className="flex items-center justify-between p-3 bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800">
196+
<div className="flex items-center gap-3">
197+
<div className="w-2 h-2 rounded-full bg-emerald-500"></div>
198+
<span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
199+
Connection Status
200+
</span>
201+
</div>
202+
<Badge
203+
variant="secondary"
204+
className={cn(
205+
"text-xs font-medium",
206+
actualIsSuccess
207+
? "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-300 dark:border-emerald-800"
208+
: "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800"
209+
)}
210+
>
211+
{actualIsSuccess ? (
212+
<CheckCircle className="h-3 w-3 mr-1" />
213+
) : (
214+
<AlertTriangle className="h-3 w-3 mr-1" />
215+
)}
216+
{actualIsSuccess ? 'Active' : 'Inactive'}
217+
</Badge>
218+
</div>
217219

218-
<div className="flex items-center justify-between p-3 bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800">
219-
<div className="flex items-center gap-3">
220-
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
221-
<span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
222-
Endpoints Available
223-
</span>
220+
<div className="flex items-center justify-between p-3 bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800">
221+
<div className="flex items-center gap-3">
222+
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
223+
<span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
224+
Endpoints Available
225+
</span>
226+
</div>
227+
<Badge variant="outline" className="text-xs">
228+
{endpointCount > 0 ? `${endpointCount} endpoints` : 'Ready'}
229+
</Badge>
224230
</div>
225-
<Badge variant="outline" className="text-xs">
226-
{endpointCount > 0 ? `${endpointCount} endpoints` : 'Ready'}
227-
</Badge>
228-
</div>
229231

230-
<div className="flex items-center justify-between p-3 bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800">
231-
<div className="flex items-center gap-3">
232-
<div className="w-2 h-2 rounded-full bg-purple-500"></div>
233-
<span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
234-
Data Provider
232+
<div className="flex items-center justify-between p-3 bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800">
233+
<div className="flex items-center gap-3">
234+
<div className="w-2 h-2 rounded-full bg-purple-500"></div>
235+
<span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
236+
Data Provider
237+
</span>
238+
</div>
239+
<span className="text-sm text-zinc-600 dark:text-zinc-400 font-mono">
240+
{serviceName || 'linkedin'}
235241
</span>
236242
</div>
237-
<span className="text-sm text-zinc-600 dark:text-zinc-400 font-mono">
238-
{serviceName || 'linkedin'}
239-
</span>
240243
</div>
241-
</div>
242-
{actualIsSuccess && (
243-
<div className="p-4 bg-emerald-50 dark:bg-emerald-900/10 rounded-lg border border-emerald-200 dark:border-emerald-800/50">
244-
<div className="flex items-center gap-2 mb-2">
245-
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400/70" />
246-
<span className="text-sm font-medium text-emerald-800 dark:text-emerald-300/70">
247-
Provider Ready
248-
</span>
244+
{actualIsSuccess && (
245+
<div className="p-4 bg-emerald-50 dark:bg-emerald-900/10 rounded-lg border border-emerald-200 dark:border-emerald-800/50">
246+
<div className="flex items-center gap-2 mb-2">
247+
<CheckCircle className="h-4 w-4 text-emerald-600 dark:text-emerald-400/70" />
248+
<span className="text-sm font-medium text-emerald-800 dark:text-emerald-300/70">
249+
Provider Ready
250+
</span>
251+
</div>
252+
<p className="text-xs text-emerald-700 dark:text-emerald-300/70">
253+
Data provider endpoints have been loaded successfully and are ready to process requests.
254+
</p>
249255
</div>
250-
<p className="text-xs text-emerald-700 dark:text-emerald-300/70">
251-
Data provider endpoints have been loaded successfully and are ready to process requests.
252-
</p>
253-
</div>
254-
)}
256+
)}
257+
</div>
255258
</div>
256-
</div>
259+
</ScrollArea>
257260
)}
258261
</CardContent>
259262

0 commit comments

Comments
 (0)