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-08-12 15:52:31 -07:00
parent 58ee043cc8
commit 0986deaeb7
9 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -464,11 +464,11 @@ export default function AgentConfigurationPage() {
<div className="hidden lg:grid lg:grid-cols-2 w-full h-full">
<div className="bg-background h-full flex flex-col border-r border-border/40 overflow-hidden">
<div className="flex-shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="px-4 pt-4">
<div className="pt-4">
{isViewingOldVersion && (
<div className="mb-4">
<div className="mb-4 px-8">
<VersionAlert
versionData={versionData}
isActivating={activateVersionMutation.isPending}
@ -515,6 +515,7 @@ export default function AgentConfigurationPage() {
onToolsSave={handleToolsSave}
initialAccordion={initialAccordion}
agentMetadata={agent?.metadata}
isLoading={isSaving}
/>
) : (
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-full">
@ -554,10 +555,10 @@ export default function AgentConfigurationPage() {
<div className="lg:hidden flex flex-col h-full w-full">
<div className="flex-1 flex flex-col overflow-hidden">
<div className="flex-shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="px-4 py-2">
<div className="py-2">
{isViewingOldVersion && (
<div className="mb-4">
<div className="mb-4 px-8">
<VersionAlert
versionData={versionData}
isActivating={activateVersionMutation.isPending}
@ -603,6 +604,7 @@ export default function AgentConfigurationPage() {
onToolsSave={handleToolsSave}
initialAccordion={initialAccordion}
agentMetadata={agent?.metadata}
isLoading={isSaving}
/>
) : (
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-full">

4
frontend/src/components/agents/agent-builder-chat.tsx
View File

@ -367,7 +367,7 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
return (
<div className="flex flex-col h-full">
<div className="flex-1 overflow-hidden">
<div className="h-full overflow-y-auto scrollbar-hide">
<div className="h-full overflow-y-auto scrollbar-hide px-8">
<ThreadContent
messages={messages || []}
streamingTextContent={streamingTextContent}
@ -390,7 +390,7 @@ export const AgentBuilderChat = React.memo(function AgentBuilderChat({
<div ref={messagesEndRef} />
</div>
</div>
<div className="flex-shrink-0 md:pb-4 md:px-6 px-4">
<div className="flex-shrink-0 md:pb-4 px-8">
<ChatInput
ref={chatInputRef}
onSubmit={threadId ? handleSubmitMessage : handleSubmitFirstMessage}

5
frontend/src/components/agents/agent-mcp-configuration.tsx
View File

@ -14,6 +14,7 @@ interface AgentMCPConfigurationProps {
};
saveMode?: 'direct' | 'callback';
versionId?: string;
isLoading?: boolean;
}
export const AgentMCPConfiguration: React.FC<AgentMCPConfigurationProps> = ({
@ -23,7 +24,8 @@ export const AgentMCPConfiguration: React.FC<AgentMCPConfigurationProps> = ({
agentId,
versionData,
saveMode = 'direct',
versionId
versionId,
isLoading = false
}) => {
const allMCPs = [
...(configuredMCPs || []),
@ -92,6 +94,7 @@ export const AgentMCPConfiguration: React.FC<AgentMCPConfigurationProps> = ({
versionData={versionData}
saveMode={saveMode}
versionId={versionId}
isLoading={isLoading}
/>
);
};

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

@ -326,7 +326,7 @@ export const AgentPreview = ({ agent, agentMetadata }: AgentPreviewProps) => {
return (
<div className="h-full flex flex-col bg-muted dark:bg-muted/30">
<div className="flex-shrink-0 flex items-center gap-3 p-8">
<div className="flex-shrink-0 flex items-center gap-3 px-8 py-8">
<div className="flex-1">
</div>
<Badge variant="highlight" className="text-sm">Preview Mode</Badge>
@ -370,7 +370,7 @@ export const AgentPreview = ({ agent, agentMetadata }: AgentPreviewProps) => {
</div>
</div>
<div className="flex-shrink-0">
<div className="p-0 md:p-4 md:px-10">
<div className="px-8 md:pb-4">
<ChatInput
ref={chatInputRef}
onSubmit={threadId ? handleSubmitMessage : handleSubmitFirstMessage}

9
frontend/src/components/agents/agent-tools-configuration.tsx
View File

@ -10,9 +10,10 @@ interface AgentToolsConfigurationProps {
onToolsChange: (tools: Record<string, boolean | { enabled: boolean; description: string }>) => void;
disabled?: boolean;
isSunaAgent?: boolean;
isLoading?: boolean;
}
export const AgentToolsConfiguration = ({ tools, onToolsChange, disabled = false, isSunaAgent = false }: AgentToolsConfigurationProps) => {
export const AgentToolsConfiguration = ({ tools, onToolsChange, disabled = false, isSunaAgent = false, isLoading = false }: AgentToolsConfigurationProps) => {
const [searchQuery, setSearchQuery] = useState<string>('');
const isToolEnabled = (tool: boolean | { enabled: boolean; description: string } | undefined): boolean => {
@ -36,6 +37,10 @@ export const AgentToolsConfiguration = ({ tools, onToolsChange, disabled = false
return;
}
if (isLoading) {
return;
}
const updatedTools = {
...tools,
[toolName]: createToolValue(enabled, tools[toolName])
@ -99,7 +104,7 @@ export const AgentToolsConfiguration = ({ tools, onToolsChange, disabled = false
<Switch
checked={isToolEnabled(tools[toolName])}
onCheckedChange={(checked) => handleToolToggle(toolName, checked)}
disabled={disabled}
disabled={disabled || isLoading}
/>
</div>
</div>

2
frontend/src/components/agents/config/agent-builder-tab.tsx
View File

@ -39,7 +39,7 @@ export function AgentBuilderTab({
}
return (
<div className="px-4 h-full">
<div className="h-full">
<AgentBuilderChat
agentId={agentId}
formData={displayData}

62
frontend/src/components/agents/config/agent-header.tsx
View File

@ -41,6 +41,8 @@ interface AgentHeaderProps {
custom_mcps: any[];
agentpress_tools: any;
};
hasUnsavedChanges?: boolean;
onVersionCreated?: () => void;
}
export function AgentHeader({
@ -55,6 +57,8 @@ export function AgentHeader({
agentMetadata,
currentVersionId,
currentFormData,
hasUnsavedChanges,
onVersionCreated,
}: AgentHeaderProps) {
const [isProfileDialogOpen, setIsProfileDialogOpen] = useState(false);
const [isEditing, setIsEditing] = useState(false);
@ -114,9 +118,9 @@ export function AgentHeader({
return (
<>
<header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-3 z-20 w-full">
<header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-3 z-20 w-full px-8">
{/* Left side - Agent info */}
<div className="flex items-center gap-3 min-w-0 pl-4">
<div className="flex items-center gap-3 min-w-0">
<div className="relative flex-shrink-0">
{isSunaAgent ? (
<div className="h-9 w-9 rounded-lg bg-muted border flex items-center justify-center">
@ -195,7 +199,7 @@ export function AgentHeader({
</div>
{/* Right side - Version controls, tabs and actions aligned together */}
<div className="flex items-center gap-2 pr-4">
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{!isSunaAgent && currentFormData && (
<AgentVersionSwitcher
@ -227,40 +231,24 @@ export function AgentHeader({
)}
</div>
<TooltipProvider>
<Tabs value={activeTab} onValueChange={onTabChange}>
<TabsList className="grid grid-cols-2 h-9">
<Tooltip>
<TooltipTrigger asChild>
<TabsTrigger
value="agent-builder"
className="flex items-center gap-1.5 text-xs px-2 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
>
<Sparkles className="h-3 w-3" />
<span className="hidden md:inline">Build</span>
</TabsTrigger>
</TooltipTrigger>
<TooltipContent>
<p>Edit system prompt & behavior</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<TabsTrigger
value="configuration"
className="flex items-center gap-1.5 text-xs px-2 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
>
<Settings className="h-3 w-3" />
<span className="hidden md:inline">Config</span>
</TabsTrigger>
</TooltipTrigger>
<TooltipContent>
<p>Configure tools & settings</p>
</TooltipContent>
</Tooltip>
</TabsList>
</Tabs>
</TooltipProvider>
<Tabs value={activeTab} onValueChange={onTabChange}>
<TabsList className="grid grid-cols-2 h-9">
<TabsTrigger
value="agent-builder"
className="flex items-center gap-1.5 text-xs px-2"
>
<Sparkles className="h-3 w-3" />
<span className="hidden md:inline">Build</span>
</TabsTrigger>
<TabsTrigger
value="configuration"
className="flex items-center gap-1.5 text-xs px-2"
>
<Settings className="h-3 w-3" />
<span className="hidden md:inline">Config</span>
</TabsTrigger>
</TabsList>
</Tabs>
</div>
</header>
<ProfilePictureDialog

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

@ -48,6 +48,7 @@ interface ConfigurationTabProps {
mcps_editable?: boolean;
};
};
isLoading?: boolean;
}
export function ConfigurationTab({
@ -62,6 +63,7 @@ export function ConfigurationTab({
onToolsSave,
initialAccordion,
agentMetadata,
isLoading = false,
}: ConfigurationTabProps) {
const isSunaAgent = agentMetadata?.is_suna_default || false;
@ -120,7 +122,7 @@ export function ConfigurationTab({
return (
<div className="h-full flex flex-col">
<div className="flex-1 overflow-y-auto">
<div className="px-4 py-0 space-y-3">
<div className="px-8 py-0 space-y-3">
{isSunaAgent && (
<div className="p-4 bg-primary/10 border border-primary-200 rounded-xl">
<div className="flex items-center gap-3 mb-2">
@ -142,6 +144,7 @@ export function ConfigurationTab({
<button
className="w-full p-4 text-left group-hover:bg-muted/30 transition-all duration-300"
onClick={() => setOpenAccordion(openAccordion === 'system' ? '' : 'system')}
disabled={isLoading}
>
<div className="flex items-center gap-4 w-full">
<div className="relative flex-shrink-0">
@ -169,7 +172,7 @@ export function ConfigurationTab({
onSave={handleSystemPromptChange}
placeholder="Click to set system instructions..."
title="System Instructions"
disabled={!isSystemPromptEditable}
disabled={!isSystemPromptEditable || isLoading}
/>
</div>
</div>
@ -182,6 +185,7 @@ export function ConfigurationTab({
<button
className="w-full p-4 text-left group-hover:bg-muted/30 transition-all duration-300"
onClick={() => setOpenAccordion(openAccordion === 'model' ? '' : 'model')}
disabled={isLoading}
>
<div className="flex items-center gap-4 w-full">
<div className="relative flex-shrink-0">
@ -213,7 +217,7 @@ export function ConfigurationTab({
onFieldChange('model', model);
}
}}
disabled={isViewingOldVersion}
disabled={isViewingOldVersion || isLoading}
/>
</div>
</div>
@ -226,6 +230,7 @@ export function ConfigurationTab({
<button
className="w-full p-4 text-left group-hover:bg-muted/30 transition-all duration-300"
onClick={() => setOpenAccordion(openAccordion === 'tools' ? '' : 'tools')}
disabled={isLoading}
>
<div className="flex items-center gap-4 w-full">
<div className="relative flex-shrink-0">
@ -253,6 +258,7 @@ export function ConfigurationTab({
onToolsChange={areToolsEditable ? handleToolsChange : () => { }}
disabled={!areToolsEditable}
isSunaAgent={isSunaAgent}
isLoading={isLoading}
/>
</div>
</div>
@ -264,6 +270,7 @@ export function ConfigurationTab({
<button
className="w-full p-4 text-left group-hover:bg-muted/30 transition-all duration-300"
onClick={() => setOpenAccordion(openAccordion === 'integrations' ? '' : 'integrations')}
disabled={isLoading}
>
<div className="flex items-center gap-4 w-full">
<div className="relative flex-shrink-0">
@ -299,6 +306,7 @@ export function ConfigurationTab({
}}
saveMode="callback"
versionId={versionData?.version_id}
isLoading={isLoading}
/>
</div>
</div>
@ -309,6 +317,7 @@ export function ConfigurationTab({
<button
className="w-full p-4 text-left group-hover:bg-muted/30 transition-all duration-300"
onClick={() => setOpenAccordion(openAccordion === 'knowledge' ? '' : 'knowledge')}
disabled={isLoading}
>
<div className="flex items-center gap-4 w-full">
<div className="relative flex-shrink-0">
@ -344,6 +353,7 @@ export function ConfigurationTab({
<button
className="w-full p-4 text-left group-hover:bg-muted/30 transition-all duration-300"
onClick={() => setOpenAccordion(openAccordion === 'playbooks' ? '' : 'playbooks')}
disabled={isLoading}
>
<div className="flex items-center gap-4 w-full">
<div className="relative flex-shrink-0">
@ -379,6 +389,7 @@ export function ConfigurationTab({
<button
className="w-full p-4 text-left group-hover:bg-muted/30 transition-all duration-300"
onClick={() => setOpenAccordion(openAccordion === 'triggers' ? '' : 'triggers')}
disabled={isLoading}
>
<div className="flex items-center gap-4 w-full">
<div className="relative flex-shrink-0">

2
frontend/src/components/thread/content/ThreadContent.tsx
View File

@ -510,7 +510,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
className={`${containerClassName} flex flex-col-reverse ${shouldJustifyToTop ? 'justify-end min-h-full' : ''}`}
onScroll={handleScroll}
>
<div ref={contentRef} className="mx-auto max-w-3xl md:px-8 min-w-0 w-full">
<div ref={contentRef} className="mx-auto min-w-0 w-full">
<div className="space-y-8 min-w-0">
{(() => {