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

fix chat input

This commit is contained in:
marko-kraemer 2025-08-10 17:30:00 -07:00
parent 796b42b4b5
commit 6796216a4f
8 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/api.py
View File

@ -53,7 +53,6 @@ async def lifespan(app: FastAPI):
instance_id
)
# Workflows are now initialized via triggers module
sandbox_api.initialize(db)

2
frontend/src/app/auth/page.tsx
View File

@ -287,7 +287,7 @@ function LoginContent() {
</div>
<div className="w-full max-w-sm">
<div className="mb-4 flex items-center flex-col gap-4 justify-center">
{customAgentsEnabled && <ReleaseBadge className='mb-4' text="Custom Agents, Workflows, and more!" link="/changelog" />}
{customAgentsEnabled && <ReleaseBadge className='mb-4' text="Custom Agents, Playbooks, and more!" link="/changelog" />}
<h1 className="text-2xl font-semibold text-foreground">
{isSignUp ? 'Create your account' : 'Log into your account'}
</h1>

4
frontend/src/components/agents/agent-config-modal.tsx
View File

@ -162,7 +162,7 @@ export const AgentConfigModal: React.FC<AgentConfigModalProps> = ({
</TabsTrigger>
<TabsTrigger value="workflows" className="text-xs">
<Workflow className="h-3 w-3 mr-1" />
Workflows
Playbooks
</TabsTrigger>
</TabsList>
@ -284,7 +284,7 @@ export const AgentConfigModal: React.FC<AgentConfigModalProps> = ({
/>
) : (
<div className="flex items-center justify-center h-32">
<p className="text-sm text-muted-foreground">Select an agent to configure workflows</p>
<p className="text-sm text-muted-foreground">Select an agent to configure playbooks</p>
</div>
)}
</div>

9
frontend/src/components/agents/config/configuration-tab.tsx
View File

@ -162,7 +162,6 @@ export function ConfigurationTab({
<div className="bg-muted rounded-xl h-10 w-10 flex items-center justify-center transition-all duration-300 group-hover:scale-105">
<Settings className="h-5 w-5 text-muted-foreground" />
</div>
</div>
<div className="text-left flex-1">
<h4 className="text-sm font-semibold text-foreground mb-1 group-hover:text-primary transition-colors duration-300">System Prompt</h4>
@ -173,7 +172,7 @@ export function ConfigurationTab({
</button>
<div
className={`overflow-hidden transition-all duration-300 ease-out ${openAccordion === 'system'
? 'max-h-96 opacity-100'
? 'max-h-auto opacity-100'
: 'max-h-0 opacity-0'
}`}
>
@ -212,7 +211,7 @@ export function ConfigurationTab({
</button>
<div
className={`overflow-hidden transition-all duration-300 ease-out ${openAccordion === 'model'
? 'max-h-96 opacity-100'
? 'max-h-auto opacity-100'
: 'max-h-0 opacity-0'
}`}
>
@ -245,7 +244,6 @@ export function ConfigurationTab({
<div className="bg-muted rounded-xl h-10 w-10 flex items-center justify-center transition-all duration-300 group-hover:scale-105">
<Wrench className="h-5 w-5 text-muted-foreground" />
</div>
</div>
<div className="text-left flex-1">
<h4 className="text-sm font-semibold text-foreground mb-1 group-hover:text-primary transition-colors duration-300">Default Tools</h4>
@ -283,7 +281,6 @@ export function ConfigurationTab({
<div className="bg-muted rounded-xl h-10 w-10 flex items-center justify-center transition-all duration-300 group-hover:scale-105">
<Server className="h-5 w-5 text-muted-foreground" />
</div>
</div>
<div className="text-left flex-1">
<h4 className="text-sm font-semibold text-foreground mb-1 group-hover:text-primary transition-colors duration-300">Integrations</h4>
@ -328,7 +325,6 @@ export function ConfigurationTab({
<div className="bg-muted rounded-xl h-10 w-10 flex items-center justify-center transition-all duration-300 group-hover:scale-105">
<BookOpen className="h-5 w-5 text-muted-foreground" />
</div>
</div>
<div className="text-left flex-1">
<h4 className="text-sm font-semibold text-foreground mb-1 group-hover:text-primary transition-colors duration-300">Knowledge Base</h4>
@ -363,7 +359,6 @@ export function ConfigurationTab({
<div className="bg-muted rounded-xl h-10 w-10 flex items-center justify-center transition-all duration-300 group-hover:scale-105">
<Workflow className="h-5 w-5 text-muted-foreground" />
</div>
</div>
<div className="text-left flex-1">
<h4 className="text-sm font-semibold text-foreground mb-1 group-hover:text-primary transition-colors duration-300">Playbooks</h4>

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

@ -46,8 +46,8 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
const handleCreateWorkflow = useCallback(async () => {
try {
const defaultWorkflow = {
name: 'Untitled Workflow',
description: 'A new workflow',
name: 'Untitled Playbook',
description: 'A new playbook',
steps: []
};
const newWorkflow = await createWorkflowMutation.mutateAsync({
@ -160,9 +160,9 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
<div className="mx-auto w-12 h-12 bg-muted rounded-full flex items-center justify-center mb-4 border">
<Workflow className="h-8 w-8 text-muted-foreground" />
</div>
<h3 className="text-sm font-semibold mb-2">No Agent Workflows</h3>
<h3 className="text-sm font-semibold mb-2">No Agent Playbooks</h3>
<p className="text-muted-foreground mb-6 max-w-sm mx-auto">
Create workflows to automate tasks and streamline your agent's operations.
Create playbook to automate tasks and streamline your agent's operations.
</p>
</div>
) : (
@ -232,9 +232,9 @@ export function AgentWorkflowsConfiguration({ agentId, agentName }: AgentWorkflo
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete Workflow</AlertDialogTitle>
<AlertDialogTitle>Delete Playbook</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to delete workflow {workflowToDelete?.name}? This action cannot be undone.
Are you sure you want to delete playbook {workflowToDelete?.name}? This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>

2
frontend/src/components/dashboard/dashboard-content.tsx
View File

@ -266,7 +266,7 @@ export function DashboardContent() {
/>
</div>
<div className="w-full pt-4">
<Examples onSelectPrompt={setInputValue} count={5} />
<Examples onSelectPrompt={setInputValue} count={4} />
</div>
</div>

2
frontend/src/components/home/sections/hero-section.tsx
View File

@ -350,7 +350,7 @@ export function HeroSection() {
{/* Examples section - right after chat input */}
<div className="w-full pt-2">
<Examples onSelectPrompt={setInputValue} count={5} />
<Examples onSelectPrompt={setInputValue} count={4} />
</div>
</div>

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

@ -20,8 +20,8 @@ import { useQueryClient } from '@tanstack/react-query';
import { ToolCallInput } from './floating-tool-preview';
import { ChatSnack } from './chat-snack';
import { Brain, Zap, Workflow, Database, ArrowDown } from 'lucide-react';
import { FaGoogle, FaDiscord } from 'react-icons/fa';
import { SiNotion } from 'react-icons/si';
import { useComposioToolkitIcon } from '@/hooks/react-query/composio/use-composio';
import { Skeleton } from '@/components/ui/skeleton';
import { AgentConfigModal } from '@/components/agents/agent-config-modal';
import { IntegrationsRegistry } from '@/components/agents/integrations-registry';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@ -154,6 +154,11 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
const deleteFileMutation = useFileDelete();
const queryClient = useQueryClient();
// Fetch actual integration icons
const { data: googleDriveIcon } = useComposioToolkitIcon('googledrive', { enabled: true });
const { data: slackIcon } = useComposioToolkitIcon('slack', { enabled: true });
const { data: notionIcon } = useComposioToolkitIcon('notion', { enabled: true });
// Show usage preview logic:
// - Always show to free users when showToLowCreditUsers is true
// - For paid users, only show when they're at 70% or more of their cost limit (30% or below remaining)
@ -348,7 +353,7 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
</button>
)}
<Card
className={`-mb-2 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none overflow-visible ${enableAdvancedConfig && selectedAgentId ? '' : 'rounded-3xl'} relative z-20`}
className={`-mb-2 shadow-none w-full max-w-4xl mx-auto bg-transparent border-none overflow-visible ${enableAdvancedConfig && selectedAgentId ? '' : 'rounded-3xl'} relative z-10`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={(e) => {
@ -419,53 +424,72 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
</Card>
{enableAdvancedConfig && selectedAgentId && (
<div className="w-full max-w-4xl mx-auto -mt-12 relative z-10">
<div className="bg-muted/30 border border-border/50 rounded-b-3xl px-4 py-2 pt-8 transition-all duration-300 ease-out">
<div className="flex items-center justify-between gap-1 overflow-x-auto scrollbar-none relative z-20">
<div className="w-full max-w-4xl mx-auto -mt-12 relative z-20">
<div className="bg-gradient-to-b from-transparent via-transparent to-muted/30 pt-8 pb-2 px-4 rounded-b-3xl border border-t-0 border-border/50 transition-all duration-300 ease-out">
<div className="flex items-center justify-between gap-1 overflow-x-auto scrollbar-none relative">
<button
onClick={() => setRegistryDialogOpen(true)}
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative pointer-events-auto"
>
<div className="flex items-center -space-x-0.5">
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
<FaGoogle className="w-2.5 h-2.5" />
</div>
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
<FaDiscord className="w-2.5 h-2.5" />
</div>
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
<SiNotion className="w-2.5 h-2.5" />
</div>
{googleDriveIcon?.icon_url && slackIcon?.icon_url && notionIcon?.icon_url ? (
<>
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={googleDriveIcon.icon_url} className="w-2.5 h-2.5" alt="Google Drive" />
</div>
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={slackIcon.icon_url} className="w-2.5 h-2.5" alt="Slack" />
</div>
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={notionIcon.icon_url} className="w-2.5 h-2.5" alt="Notion" />
</div>
</>
) : (
<>
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
<Skeleton className="w-2.5 h-2.5 rounded" />
</div>
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
<Skeleton className="w-2.5 h-2.5 rounded" />
</div>
<div className="w-4 h-4 bg-white dark:bg-muted border border-border rounded-full flex items-center justify-center shadow-sm">
<Skeleton className="w-2.5 h-2.5 rounded" />
</div>
</>
)}
</div>
<span className="text-xs font-medium">Integrations</span>
</button>
<button
onClick={() => router.push(`/agents/config/${selectedAgentId}?tab=configuration&accordion=instructions`)}
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative pointer-events-auto"
>
<Brain className="h-3.5 w-3.5 flex-shrink-0" />
<span className="text-xs font-medium">Instructions</span>
</button>
<button
onClick={() => router.push(`/agents/config/${selectedAgentId}?tab=configuration&accordion=knowledge`)}
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative pointer-events-auto"
>
<Database className="h-3.5 w-3.5 flex-shrink-0" />
<span className="text-xs font-medium">Knowledge</span>
</button>
<button
onClick={() => router.push(`/agents/config/${selectedAgentId}?tab=configuration&accordion=triggers`)}
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative pointer-events-auto"
>
<Zap className="h-3.5 w-3.5 flex-shrink-0" />
<span className="text-xs font-medium">Triggers</span>
</button>
<button
onClick={() => router.push(`/agents/config/${selectedAgentId}?tab=configuration&accordion=workflows`)}
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative"
className="flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-all duration-200 px-2.5 py-1.5 rounded-lg hover:bg-muted/50 border border-transparent hover:border-border/30 flex-shrink-0 cursor-pointer relative pointer-events-auto"
>
<Workflow className="h-3.5 w-3.5 flex-shrink-0" />
<span className="text-xs font-medium">Workflows</span>
<span className="text-xs font-medium">Playbooks</span>
</button>
</div>
</div>