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

wip

This commit is contained in:
marko-kraemer 2025-07-09 19:47:52 +02:00
parent 738f513766
commit 1d9e364523
17 changed files with 193 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/app/(dashboard)/agents/_components/agent-builder-chat.tsx
View File

@ -1,7 +1,6 @@
'use client';
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Loader2 } from 'lucide-react';
import { ChatInput, ChatInputHandles } from '@/components/thread/chat-input/chat-input';
import { ThreadContent } from '@/components/thread/content/ThreadContent';
import { useAgentStream } from '@/hooks/useAgentStream';
@ -11,10 +10,6 @@ import { useInitiateAgentWithInvalidation } from '@/hooks/react-query/dashboard/
import { useAgentBuilderChatHistory } from '@/hooks/react-query/agents/use-agents';
import { toast } from 'sonner';
import { UnifiedMessage } from '@/components/thread/types';
import { StylePicker } from './style-picker';
import { EditableText } from '@/components/ui/editable';
import { Badge } from '@/components/ui/badge';
import { Check, Clock } from 'lucide-react';
import { BillingError } from '@/lib/api';
import { useQueryClient } from '@tanstack/react-query';
import { agentKeys } from '@/hooks/react-query/agents/keys';
@ -387,7 +382,7 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
<div className="flex w-20 aspect-square items-center justify-center rounded-2xl bg-muted-foreground/10 p-4 mb-4">
<div className="text-4xl">🤖</div>
</div>
<p className='w-[60%] text-2xl'>Lets start with a brief <span className='text-primary/80 font-semibold'>description</span> of what you'd like to build</p>
<p className='w-[60%] text-2xl'>I'm your <span className='text-primary/80 font-semibold'>Agent Builder</span>. Describe the exact workflows and tasks you want to automate, and I'll configure your agent to handle them.</p>
</div>
}
/>

7
frontend/src/app/(dashboard)/agents/_components/agent-preview.tsx
View File

@ -359,7 +359,8 @@ export const AgentPreview = ({ agent }: AgentPreviewProps) => {
<div className="flex w-20 aspect-square items-center justify-center rounded-2xl bg-muted-foreground/10 p-4 mb-4">
<div className="text-4xl">{avatar}</div>
</div>
<p className='w-[60%] text-2xl'>Start conversation with your new agent <span className='text-primary/80 font-semibold'>{agent.name}</span></p>
<p className='w-[60%] text-2xl mb-3'>Start conversation with your new agent <span className='text-primary/80 font-semibold'>{agent.name}</span></p>
<p className='w-[70%] text-sm text-muted-foreground/60'>Test your agent's configuration and chat back and forth to see how it performs with your current settings, tools, and knowledge base.</p>
</div>
}
/>
@ -381,6 +382,10 @@ export const AgentPreview = ({ agent }: AgentPreviewProps) => {
agentName={agent.name}
hideAttachments={false}
bgColor='bg-muted-foreground/10'
selectedAgentId={agent.agent_id}
onAgentSelect={() => {
toast.info("You can only test the agent you are currently configuring");
}}
/>
</div>
</div>

2
frontend/src/app/(dashboard)/agents/_components/agents-grid.tsx
View File

@ -194,7 +194,7 @@ export const AgentsGrid = ({
};
const handleCustomize = (agentId: string) => {
router.push(`/agents/new/${agentId}`);
router.push(`/agents/config/${agentId}`);
setSelectedAgent(null);
};

5
frontend/src/app/(dashboard)/agents/_components/mcp/mcp-configuration-new.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Plus, Settings, Zap, Code2, Server, Store } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { MCPConfigurationProps, MCPConfiguration as MCPConfigurationType } from './types';
import { ConfiguredMcpList } from './configured-mcp-list';
import { CustomMCPDialog } from './custom-mcp-dialog';
@ -155,6 +155,9 @@ export const MCPConfigurationNew: React.FC<MCPConfigurationProps> = ({
)}
<Dialog open={showRegistryDialog} onOpenChange={setShowRegistryDialog}>
<DialogContent className="p-0 max-w-6xl max-h-[90vh] overflow-y-auto">
<DialogHeader className="sr-only">
<DialogTitle>Select Integration</DialogTitle>
</DialogHeader>
<PipedreamRegistry onToolsSelected={handleToolsSelected} />
</DialogContent>
</Dialog>

2
frontend/src/app/(dashboard)/agents/_components/results-info.tsx
View File

@ -51,7 +51,7 @@ export const ResultsInfo = ({
};
const newAgent = await createAgentMutation.mutateAsync(defaultAgentData);
router.push(`/agents/new/${newAgent.agent_id}`);
router.push(`/agents/config/${newAgent.agent_id}`);
} catch (error) {
console.error('Error creating agent:', error);
}

0
frontend/src/app/(dashboard)/agents/new/[agentId]/layout.tsx → frontend/src/app/(dashboard)/agents/config/[agentId]/layout.tsx
View File

8
frontend/src/app/(dashboard)/agents/new/[agentId]/page.tsx → frontend/src/app/(dashboard)/agents/config/[agentId]/page.tsx
View File

@ -294,12 +294,12 @@ export default function AgentConfigurationPage() {
<div className='w-auto flex items-center gap-2'>
<TabsList className="grid h-auto w-full grid-cols-2 bg-muted-foreground/10">
<TabsTrigger value="agent-builder" className="w-48 flex items-center gap-1.5 px-2">
<span className="truncate">Agent Builder</span>
<Badge variant="beta">
<span className="truncate">Prompt to configure</span>
{/* <Badge variant="beta">
Beta
</Badge>
</Badge> */}
</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
<TabsTrigger value="manual">Config</TabsTrigger>
</TabsList>
</div>
</div>

0
frontend/src/app/(dashboard)/agents/new/[agentId]/workflow/[workflowId]/page.tsx → frontend/src/app/(dashboard)/agents/config/[agentId]/workflow/[workflowId]/page.tsx
View File

0
frontend/src/app/(dashboard)/agents/new/[agentId]/workflow/layout.tsx → frontend/src/app/(dashboard)/agents/config/[agentId]/workflow/layout.tsx
View File

2
frontend/src/app/(dashboard)/agents/page.tsx
View File

@ -184,7 +184,7 @@ export default function AgentsPage() {
};
const newAgent = await createAgentMutation.mutateAsync(defaultAgentData);
router.push(`/agents/new/${newAgent.agent_id}`);
router.push(`/agents/config/${newAgent.agent_id}`);
} catch (error) {
console.error('Error creating agent:', error);
}

2
frontend/src/app/(dashboard)/dashboard/_components/dashboard-content.tsx
View File

@ -237,6 +237,8 @@ export function DashboardContent() {
hideAttachments={false}
selectedAgentId={selectedAgentId}
onAgentSelect={setSelectedAgentId}
enableAdvancedConfig={true}
onConfigureAgent={(agentId) => router.push(`/agents/config/${agentId}`)}
/>
</div>
<Examples onSelectPrompt={setInputValue} />

1
frontend/src/components/agents/triggers/agent-triggers-configuration.tsx
View File

@ -16,7 +16,6 @@ import {
useTriggerProviders
} from '@/hooks/react-query/triggers';
import { toast } from 'sonner';
import { getTriggerIcon } from './utils';
import { OneClickIntegrations } from './one-click-integrations';
interface AgentTriggersConfigurationProps {

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

@ -57,7 +57,7 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
agentId,
workflow: defaultWorkflow
});
router.push(`/agents/new/${agentId}/workflow/${newWorkflow.id}`);
router.push(`/agents/config/${agentId}/workflow/${newWorkflow.id}`);
} catch (error) {
toast.error('Failed to create workflow');
}
@ -77,7 +77,7 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
}, []);
const handleWorkflowClick = useCallback((workflowId: string) => {
router.push(`/agents/new/${agentId}/workflow/${workflowId}`);
router.push(`/agents/config/${agentId}/workflow/${workflowId}`);
}, [agentId, router]);
const handleDeleteWorkflow = useCallback((workflow: AgentWorkflow) => {

138
frontend/src/components/thread/chat-input/agent-selector.tsx
View File

@ -1,138 +0,0 @@
'use client';
import React, { useEffect, useState } from 'react';
import { Check, ChevronsUpDown, Plus, Bot } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from '@/components/ui/command';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover';
import { useAgents } from '@/hooks/react-query/agents/use-agents';
import { Badge } from '@/components/ui/badge';
import { useRouter } from 'next/navigation';
interface AgentSelectorProps {
selectedAgentId?: string;
onAgentSelect: (agentId: string | undefined) => void;
disabled?: boolean;
className?: string;
}
export function AgentSelector({
selectedAgentId,
onAgentSelect,
disabled = false,
className,
}: AgentSelectorProps) {
const [open, setOpen] = useState(false);
const router = useRouter();
const { data: agentsResponse, isLoading } = useAgents({
limit: 100,
sort_by: 'name',
sort_order: 'asc'
});
const agents = agentsResponse?.agents || [];
const selectedAgent = agents?.find(a => a.agent_id === selectedAgentId);
const defaultAgent = agents?.find(a => a.is_default);
useEffect(() => {
if (!selectedAgentId && defaultAgent && !isLoading) {
onAgentSelect(defaultAgent.agent_id);
}
}, [selectedAgentId, defaultAgent, isLoading, onAgentSelect]);
const handleCreateNew = () => {
setOpen(false);
router.push('/agents');
};
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className={cn(
'w-full justify-between text-xs h-8',
!selectedAgent && 'text-muted-foreground',
className
)}
disabled={disabled}
>
<span className="flex items-center gap-2 truncate">
<Bot className="h-3 w-3" />
{selectedAgent?.name || 'Select an agent...'}
</span>
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0">
<Command>
<CommandInput placeholder="Search agents..." className="h-9" />
<CommandList>
<CommandEmpty>No agents found.</CommandEmpty>
<CommandGroup>
{agents?.map((agent) => (
<CommandItem
key={agent.agent_id}
value={agent.agent_id}
onSelect={() => {
onAgentSelect(agent.agent_id);
setOpen(false);
}}
>
<Check
className={cn(
'mr-2 h-4 w-4',
selectedAgentId === agent.agent_id
? 'opacity-100'
: 'opacity-0'
)}
/>
<div className="flex-1">
<div className="flex items-center gap-2">
<span className="font-medium">{agent.name}</span>
{agent.is_default && (
<Badge variant="secondary" className="text-xs h-4 px-1">
Default
</Badge>
)}
</div>
{agent.description && (
<p className="text-xs text-muted-foreground truncate">
{agent.description}
</p>
)}
</div>
</CommandItem>
))}
</CommandGroup>
<CommandGroup>
<CommandItem
onSelect={handleCreateNew}
className="text-muted-foreground"
>
<Plus className="mr-2 h-4 w-4" />
Create new agent
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}

54
frontend/src/components/thread/chat-input/chat-input.tsx
View File

@ -7,17 +7,16 @@ import React, {
forwardRef,
useImperativeHandle,
} from 'react';
import { motion } from 'framer-motion';
import { Loader2, X } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { handleFiles } from './file-upload-handler';
import { MessageInput } from './message-input';
import { AttachmentGroup } from '../attachment-group';
import { useModelSelection } from './_use-model-selection';
import { AgentSelector } from './agent-selector';
import { useFileDelete } from '@/hooks/react-query/files';
import { useQueryClient } from '@tanstack/react-query';
import { FloatingToolPreview, ToolCallInput } from './floating-tool-preview';
import { Settings2, Sparkles, Brain, ChevronRight, Zap, Workflow } from 'lucide-react';
import { Button } from '@/components/ui/button';
export interface ChatInputHandles {
getPendingFiles: () => File[];
@ -50,6 +49,8 @@ export interface ChatInputProps {
showToolPreview?: boolean;
onExpandToolPreview?: () => void;
isLoggedIn?: boolean;
enableAdvancedConfig?: boolean;
onConfigureAgent?: (agentId: string) => void;
}
export interface UploadedFile {
@ -85,6 +86,8 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
showToolPreview = false,
onExpandToolPreview,
isLoggedIn = true,
enableAdvancedConfig = false,
onConfigureAgent,
},
ref,
) => {
@ -244,8 +247,9 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
agentName={agentName}
isVisible={showToolPreview}
/>
<Card
className="-mb-2 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none rounded-3xl overflow-hidden"
className={`-mb-2 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none overflow-hidden ${enableAdvancedConfig && selectedAgentId ? '' : 'rounded-3xl'}`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={(e) => {
@ -267,7 +271,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
}}
>
<div className="w-full text-sm flex flex-col justify-between items-start rounded-lg">
<CardContent className={`w-full p-1.5 pb-2 ${bgColor} rounded-3xl border`}>
<CardContent className={`w-full p-1.5 ${enableAdvancedConfig && selectedAgentId ? 'pb-1' : 'pb-2'} ${bgColor} border ${enableAdvancedConfig && selectedAgentId ? 'rounded-t-3xl' : 'rounded-3xl'}`}>
<AttachmentGroup
files={uploadedFiles || []}
sandboxId={sandboxId}
@ -311,6 +315,46 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
onAgentSelect={onAgentSelect}
/>
</CardContent>
{enableAdvancedConfig && selectedAgentId && (
<div
className="w-full border-t border-border/30 bg-muted/20 px-4 py-2.5 rounded-b-3xl border-l border-r border-b border-border cursor-pointer hover:bg-muted/30 transition-colors"
onClick={() => onConfigureAgent?.(selectedAgentId)}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3 min-w-0 flex-1">
<div className="flex items-center gap-2 text-xs min-w-0 flex-1">
<div className="flex items-center gap-1 text-muted-foreground">
<span className="hidden sm:inline">Integrations</span>
<span className="sm:hidden">Integrations</span>
<div className="flex items-center gap-1 ml-1">
<div className="w-4 h-4 bg-red-500 rounded-sm flex items-center justify-center text-white text-xs font-bold">G</div>
<div className="w-4 h-4 bg-blue-500 rounded-sm flex items-center justify-center text-white text-xs font-bold">D</div>
<div className="w-4 h-4 bg-black rounded-sm flex items-center justify-center text-white text-xs font-bold">N</div>
</div>
</div>
<div className="w-1 h-1 bg-muted-foreground/60 rounded-full hidden sm:block" />
<div className="flex items-center gap-1 text-muted-foreground">
<Brain className="h-2.5 w-2.5 flex-shrink-0" />
<span className="hidden sm:inline">Instructions</span>
<span className="sm:hidden">Instructions</span>
</div>
<div className="w-1 h-1 bg-muted-foreground/60 rounded-full hidden sm:block" />
<div className="flex items-center gap-1 text-muted-foreground hidden sm:flex">
<Zap className="h-2.5 w-2.5 flex-shrink-0" />
<span>Triggers</span>
</div>
<div className="w-1 h-1 bg-muted-foreground/60 rounded-full hidden sm:block" />
<div className="flex items-center gap-1 text-muted-foreground hidden sm:flex">
<Workflow className="h-2.5 w-2.5 flex-shrink-0" />
<span>Workflows</span>
</div>
</div>
</div>
<ChevronRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
</div>
</div>
)}
</div>
</Card>

180
frontend/src/components/thread/chat-input/chat-settings-dropdown.tsx
View File

@ -137,6 +137,12 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
setIsOpen(false);
};
const handleAgentSettings = (agentId: string, e: React.MouseEvent) => {
e.stopPropagation();
setIsOpen(false);
router.push(`/agents/config/${agentId}`);
};
const handleSearchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
e.stopPropagation();
if (e.key === 'ArrowDown') {
@ -168,6 +174,65 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
setDialogOpen(true);
};
const renderAgentItem = (agent: any, index: number) => {
const isSelected = agent.id === selectedAgentId;
const isHighlighted = index === highlightedIndex;
const hasSettings = agent.type === 'custom' && agent.id;
return (
<TooltipProvider key={agent.id || 'default'}>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuItem
className={cn(
"flex items-center gap-3 px-4 py-2.5 cursor-pointer hover:bg-accent/40 transition-colors duration-200 group",
isHighlighted && "bg-accent/40",
index === 0 && "rounded-t-xl",
index === filteredAgents.length - 1 && "rounded-b-xl"
)}
onClick={() => handleAgentSelect(agent.id)}
onMouseEnter={() => setHighlightedIndex(index)}
>
<div className="flex-shrink-0">
{agent.icon}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-medium text-sm text-foreground/90 truncate">
{agent.name}
</span>
</div>
<span className="text-xs text-muted-foreground/80 truncate leading-relaxed">
{agent.description}
</span>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
{hasSettings && (
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 hover:bg-muted/60 rounded-full opacity-0 group-hover:opacity-70 transition-opacity duration-200"
onClick={(e) => handleAgentSettings(agent.id, e)}
>
<Settings className="h-3 w-3" />
</Button>
)}
{isSelected && (
<div className="h-6 w-6 rounded-full bg-blue-500/10 flex items-center justify-center">
<Check className="h-3 w-3 text-blue-600/80" />
</div>
)}
</div>
</DropdownMenuItem>
</TooltipTrigger>
<TooltipContent side="left" className="text-xs max-w-xs">
<p className="truncate">{truncateString(agent.description, 35)}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};
const agentDisplay = getAgentDisplay();
return (
@ -180,18 +245,27 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
<Button
variant="ghost"
size="sm"
className="px-3 py-2 text-sm font-medium hover:bg-accent"
className={cn(
"px-2.5 py-1.5 text-sm font-normal hover:bg-accent/40 transition-all duration-200 rounded-xl",
"focus:ring-1 focus:ring-ring focus:ring-offset-1 focus:outline-none",
isOpen && "bg-accent/40"
)}
disabled={disabled}
style={{
borderRadius: '12px'
}}
>
<div className="flex items-center gap-2">
{agentDisplay.icon}
<span className="hidden sm:inline-block truncate max-w-[80px]">
<div className="flex-shrink-0">
{agentDisplay.icon}
</div>
<span className="hidden sm:inline-block truncate max-w-[80px] font-normal">
{agentDisplay.name}
</span>
<ChevronDown size={14} className="opacity-50" />
<ChevronDown
size={12}
className={cn(
"opacity-50 transition-transform duration-200",
isOpen && "rotate-180"
)}
/>
</div>
</Button>
</DropdownMenuTrigger>
@ -204,15 +278,16 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
<DropdownMenuContent
align="end"
className="w-80 p-0 border"
sideOffset={4}
className="w-88 p-0 border-0 shadow-md bg-card/98 backdrop-blur-sm"
sideOffset={6}
style={{
borderRadius: '16px'
borderRadius: '20px'
}}
>
<div className="p-4 border-b">
{/* Search Header */}
<div className="p-4 pb-3">
<div className="relative">
<Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
<Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/60" />
<input
ref={searchInputRef}
type="text"
@ -220,81 +295,42 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={handleSearchInputKeyDown}
className="w-full pl-10 pr-3 py-2 text-sm bg-transparent border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
className={cn(
"w-full pl-10 pr-3 py-2 text-sm bg-muted/40 border-0 rounded-xl",
"focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-0 focus:bg-muted/60",
"placeholder:text-muted-foreground/60 transition-all duration-200"
)}
/>
</div>
</div>
<div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent">
{/* Agent List */}
<div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent px-1.5">
{agentsLoading ? (
<div className="px-4 py-3 text-sm text-muted-foreground text-center">
Loading agents...
<div className="px-4 py-6 text-sm text-muted-foreground/70 text-center">
<div className="animate-pulse">Loading agents...</div>
</div>
) : filteredAgents.length === 0 ? (
<div className="px-4 py-3 text-sm text-muted-foreground text-center">
No agents found
<div className="px-4 py-6 text-sm text-muted-foreground/70 text-center">
<Search className="h-6 w-6 mx-auto mb-2 opacity-40" />
<p>No agents found</p>
<p className="text-xs mt-1 opacity-60">Try adjusting your search</p>
</div>
) : (
filteredAgents.map((agent, index) => {
const isSelected = agent.id === selectedAgentId;
const isHighlighted = index === highlightedIndex;
return (
<TooltipProvider key={agent.id || 'default'}>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuItem
className={cn(
"flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent border-b m-0",
isHighlighted && "bg-accent",
index === filteredAgents.length - 1 && "border-b-0"
)}
style={{
borderRadius: '0'
}}
onClick={() => handleAgentSelect(agent.id)}
onMouseEnter={() => setHighlightedIndex(index)}
>
<div className="flex-shrink-0">
{agent.icon}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-semibold text-sm truncate">
{agent.name}
</span>
{agent.type === 'custom' && (
<Badge variant="outline" className="text-xs px-1 py-0 h-4">
custom
</Badge>
)}
</div>
<span className="text-xs text-muted-foreground truncate">
{agent.description}
</span>
</div>
{isSelected && (
<Check className="h-4 w-4 text-blue-500 flex-shrink-0" />
)}
</DropdownMenuItem>
</TooltipTrigger>
<TooltipContent side="left" className="text-xs max-w-xs">
<p className="truncate">{truncateString(agent.description, 35)}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
})
<div className="space-y-0.5">
{filteredAgents.map((agent, index) => renderAgentItem(agent, index))}
</div>
)}
</div>
<div className="border-t p-4">
{/* Footer Actions */}
<div className="p-4 pt-3 border-t border-border/40">
<div className="flex items-center justify-between gap-2">
<Button
variant="outline"
size="sm"
onClick={handleExploreAll}
className="text-xs flex items-center gap-2"
className="text-xs flex items-center gap-1.5 rounded-lg hover:bg-accent/30 transition-colors duration-200 border-border/50"
>
<Search className="h-3 w-3" />
Explore All
@ -304,11 +340,11 @@ export const ChatSettingsDropdown: React.FC<ChatSettingsDropdownProps> = ({
variant="outline"
size="sm"
onClick={handleMoreOptions}
className="text-xs flex items-center gap-1"
className="text-xs flex items-center gap-1.5 rounded-lg hover:bg-accent/30 transition-colors duration-200 border-border/50"
>
<Settings className="h-3 w-3" />
More Options
<ChevronRight className="h-3 w-3" />
<ChevronRight className="h-2.5 w-2.5" />
</Button>
</div>
</div>

26
frontend/src/components/thread/chat-input/message-input.tsx
View File

@ -48,6 +48,7 @@ interface MessageInputProps {
refreshCustomModels?: () => void;
selectedAgentId?: string;
onAgentSelect?: (agentId: string | undefined) => void;
enableAdvancedConfig?: boolean;
}
export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
@ -84,6 +85,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
selectedAgentId,
onAgentSelect,
enableAdvancedConfig = false,
},
ref,
) => {
@ -127,18 +129,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
const renderDropdown = () => {
if (isLoggedIn) {
if (!customAgentsEnabled || flagsLoading) {
return <ModelSelector
selectedModel={selectedModel}
onModelChange={onModelChange}
modelOptions={modelOptions}
subscriptionStatus={subscriptionStatus}
canAccessModel={canAccessModel}
refreshCustomModels={refreshCustomModels}
billingModalOpen={billingModalOpen}
setBillingModalOpen={setBillingModalOpen}
/>
} else {
if (enableAdvancedConfig || (customAgentsEnabled && !flagsLoading)) {
return <ChatSettingsDropdown
selectedAgentId={selectedAgentId}
onAgentSelect={onAgentSelect}
@ -150,6 +141,17 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
refreshCustomModels={refreshCustomModels}
disabled={loading || (disabled && !isAgentRunning)}
/>
} else {
return <ModelSelector
selectedModel={selectedModel}
onModelChange={onModelChange}
modelOptions={modelOptions}
subscriptionStatus={subscriptionStatus}
canAccessModel={canAccessModel}
refreshCustomModels={refreshCustomModels}
billingModalOpen={billingModalOpen}
setBillingModalOpen={setBillingModalOpen}
/>
}
}
return <ChatDropdown />;