Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve workflow card

This commit is contained in:
Saumya 2025-07-21 10:49:06 +05:30
parent 025da780ac
commit 99c5ed3aa8
1 changed files with 50 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/agents/workflows/agent-workflows-configuration.tsx
View File

@ -2,7 +2,7 @@
import React, { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { Plus, AlertCircle, Workflow, Trash2 } from 'lucide-react';
import { Plus, AlertCircle, Workflow, Trash2, Calendar } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
@ -137,10 +137,10 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
const getStatusBadge = (status: AgentWorkflow['status']) => {
const colors = {
draft: 'text-gray-700 bg-gray-100',
active: 'text-green-700 bg-green-100',
paused: 'text-yellow-700 bg-yellow-100',
archived: 'text-red-700 bg-red-100'
draft: 'text-gray-700 bg-gray-100 dark:text-gray-300 dark:bg-gray-800',
active: 'text-green-700 bg-green-100 dark:text-green-300 dark:bg-green-900',
paused: 'text-yellow-700 bg-yellow-100 dark:text-yellow-300 dark:bg-yellow-900',
archived: 'text-red-700 bg-red-100 dark:text-red-300 dark:bg-red-900'
};
return (
@ -188,26 +188,25 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
) : (
<div className="grid gap-4">
{workflows.map((workflow) => (
<div key={workflow.id} className="group">
<Card
key={workflow.id}
className="p-4 cursor-pointer hover:opacity-80 transition-colors"
className="p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer"
onClick={() => handleWorkflowClick(workflow.id)}
>
<div className="flex items-center justify-between">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-3">
<h4 className="font-semibold">{workflow.name}</h4>
<h4 className="text-lg font-semibold">{workflow.name}</h4>
<div className="flex items-center space-x-2 mt-2">
{getStatusBadge(workflow.status)}
{workflow.is_default && <Badge variant="outline">Default</Badge>}
</div>
<p className="text-sm text-muted-foreground mt-1">{workflow.description}</p>
<div className="flex items-center gap-4 mt-2">
<span className="text-xs text-muted-foreground">
Created {new Date(workflow.created_at).toLocaleDateString()}
</span>
<p className="mt-3 text-sm text-muted-foreground">{workflow.description}</p>
<div className="flex items-center text-xs mt-4">
<Calendar className="h-4 w-4 mr-1" />
<span>Created {new Date(workflow.created_at).toLocaleDateString()}</span>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex-shrink-0 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<Button
variant="ghost"
size="sm"
@ -220,21 +219,6 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
<Workflow className="h-4 w-4" />
Execute
</Button>
<Button
variant="ghost"
size="sm"
onClick={(e) => {
e.stopPropagation();
handleUpdateWorkflowStatus(
workflow.id,
workflow.status === 'active' ? 'paused' : 'active'
);
}}
disabled={updateWorkflowMutation.isPending}
className="text-xs"
>
{workflow.status === 'active' ? 'Deactivate' : 'Activate'}
</Button>
<Button
variant="ghost"
size="sm"
@ -250,6 +234,7 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
</div>
</div>
</Card>
</div>
))}
</div>
)}