mirror of https://github.com/kortix-ai/suna.git
chore(ui): agent builder setup
This commit is contained in:
Soumyadas15
parent
546d5078ea
commit
4c465424f0
|
|
@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
|
|||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { useAgent, useUpdateAgent } from '@/hooks/react-query/agents/use-agents';
|
||||
import { AgentMCPConfiguration } from '../../_components/agent-mcp-configuration';
|
||||
import { toast } from 'sonner';
|
||||
|
|
@ -277,92 +278,116 @@ export default function AgentConfigurationPage() {
|
|||
<div className="flex-1 flex overflow-hidden">
|
||||
<div className="w-1/2 border-r bg-background overflow-y-auto scrollbar-hide">
|
||||
<div className="p-12 flex flex-col min-h-full">
|
||||
<div className="flex justify-end">
|
||||
{getSaveStatusBadge()}
|
||||
</div>
|
||||
|
||||
<div className='flex items-center'>
|
||||
<StylePicker
|
||||
agentId={agentId}
|
||||
currentEmoji={currentStyle.avatar}
|
||||
currentColor={currentStyle.color}
|
||||
onStyleChange={handleStyleChange}
|
||||
>
|
||||
<div
|
||||
className="h-16 w-16 flex items-center justify-center rounded-2xl text-2xl cursor-pointer hover:opacity-80 transition-opacity"
|
||||
style={{ backgroundColor: currentStyle.color }}
|
||||
>
|
||||
{currentStyle.avatar}
|
||||
<Tabs defaultValue="custom" className="w-full h-full flex flex-col">
|
||||
<div className='w-full flex items-center justify-center'>
|
||||
<div className='w-56'>
|
||||
<TabsList className="grid w-full grid-cols-2 -mt-2">
|
||||
<TabsTrigger value="custom">Custom</TabsTrigger>
|
||||
<TabsTrigger value="agent-builder">Agent Builder</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
</StylePicker>
|
||||
<div className='flex flex-col ml-3'>
|
||||
<EditableText
|
||||
value={formData.name}
|
||||
onSave={(value) => handleFieldChange('name', value)}
|
||||
className="text-xl font-semibold bg-transparent"
|
||||
placeholder="Click to add agent name..."
|
||||
/>
|
||||
<EditableText
|
||||
value={formData.description}
|
||||
onSave={(value) => handleFieldChange('description', value)}
|
||||
className="text-muted-foreground"
|
||||
placeholder="Click to add description..."
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<TabsContent value="custom" className="flex-1 flex flex-col">
|
||||
<div className="flex justify-end mb-4">
|
||||
{getSaveStatusBadge()}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-8'>
|
||||
<div className='text-sm font-semibold text-muted-foreground mb-2'>Instructions</div>
|
||||
<EditableText
|
||||
value={formData.system_prompt}
|
||||
onSave={(value) => handleFieldChange('system_prompt', value)}
|
||||
className='bg-transparent hover:bg-transparent border-none focus-visible:ring-0 shadow-none flex-1'
|
||||
placeholder='Click to set system instructions...'
|
||||
multiline={true}
|
||||
minHeight="300px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div ref={accordionRef} className="mt-auto pt-6">
|
||||
<Accordion
|
||||
type="multiple"
|
||||
defaultValue={[]}
|
||||
className="space-y-2"
|
||||
onValueChange={scrollToAccordion}
|
||||
>
|
||||
<AccordionItem value="tools" className="border-b">
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings2 className="h-4 w-4" />
|
||||
AgentPress Tools
|
||||
<div className='flex items-center'>
|
||||
<StylePicker
|
||||
agentId={agentId}
|
||||
currentEmoji={currentStyle.avatar}
|
||||
currentColor={currentStyle.color}
|
||||
onStyleChange={handleStyleChange}
|
||||
>
|
||||
<div
|
||||
className="h-16 w-16 flex items-center justify-center rounded-2xl text-2xl cursor-pointer hover:opacity-80 transition-opacity"
|
||||
style={{ backgroundColor: currentStyle.color }}
|
||||
>
|
||||
{currentStyle.avatar}
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pb-4">
|
||||
<AgentToolsConfiguration
|
||||
tools={formData.agentpress_tools}
|
||||
onToolsChange={(tools) => handleFieldChange('agentpress_tools', tools)}
|
||||
</StylePicker>
|
||||
<div className='flex flex-col ml-3'>
|
||||
<EditableText
|
||||
value={formData.name}
|
||||
onSave={(value) => handleFieldChange('name', value)}
|
||||
className="text-xl font-semibold bg-transparent"
|
||||
placeholder="Click to add agent name..."
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<EditableText
|
||||
value={formData.description}
|
||||
onSave={(value) => handleFieldChange('description', value)}
|
||||
className="text-muted-foreground"
|
||||
placeholder="Click to add description..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AccordionItem value="mcp" className="border-b">
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
MCP Servers
|
||||
<Badge className="ml-auto bg-purple-600/30 text-purple-600 dark:text-purple-300">New</Badge>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pb-4">
|
||||
<AgentMCPConfiguration
|
||||
mcps={formData.configured_mcps}
|
||||
onMCPsChange={(mcps) => handleFieldChange('configured_mcps', mcps)}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-8'>
|
||||
<div className='text-sm font-semibold text-muted-foreground mb-2'>Instructions</div>
|
||||
<EditableText
|
||||
value={formData.system_prompt}
|
||||
onSave={(value) => handleFieldChange('system_prompt', value)}
|
||||
className='bg-transparent hover:bg-transparent border-none focus-visible:ring-0 shadow-none flex-1'
|
||||
placeholder='Click to set system instructions...'
|
||||
multiline={true}
|
||||
minHeight="300px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div ref={accordionRef} className="mt-auto pt-6">
|
||||
<Accordion
|
||||
type="multiple"
|
||||
defaultValue={[]}
|
||||
className="space-y-2"
|
||||
onValueChange={scrollToAccordion}
|
||||
>
|
||||
<AccordionItem value="tools" className="border-b">
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings2 className="h-4 w-4" />
|
||||
AgentPress Tools
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pb-4">
|
||||
<AgentToolsConfiguration
|
||||
tools={formData.agentpress_tools}
|
||||
onToolsChange={(tools) => handleFieldChange('agentpress_tools', tools)}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="mcp" className="border-b">
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
MCP Servers
|
||||
<Badge className="ml-auto bg-purple-600/30 text-purple-600 dark:text-purple-300">New</Badge>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pb-4">
|
||||
<AgentMCPConfiguration
|
||||
mcps={formData.configured_mcps}
|
||||
onMCPsChange={(mcps) => handleFieldChange('configured_mcps', mcps)}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="agent-builder" className="flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="text-6xl">🚧</div>
|
||||
<h3 className="text-lg font-medium">Agent Builder Coming Soon</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
We're working on an intuitive agent builder interface.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue