From c693b8f92eb4c70eb65a0d6a3e3a7509978c943b Mon Sep 17 00:00:00 2001 From: marko-kraemer Date: Sun, 10 Aug 2025 19:00:17 -0700 Subject: [PATCH] wip --- .../agents/composio/composio-connector.tsx | 314 ++++++++++-------- .../components/home/first-bento-animation.tsx | 2 +- .../components/home/third-bento-animation.tsx | 18 +- frontend/src/lib/home.tsx | 2 +- 4 files changed, 189 insertions(+), 147 deletions(-) diff --git a/frontend/src/components/agents/composio/composio-connector.tsx b/frontend/src/components/agents/composio/composio-connector.tsx index 26809bba..32878c68 100644 --- a/frontend/src/components/agents/composio/composio-connector.tsx +++ b/frontend/src/components/agents/composio/composio-connector.tsx @@ -5,7 +5,7 @@ import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; -import { ArrowLeft, Check, AlertCircle, Plus, ExternalLink, ChevronRight, Search, Save, Loader2, User, Settings, Info, Eye, Zap, Wrench } from 'lucide-react'; +import { ArrowLeft, Check, AlertCircle, Plus, ExternalLink, ChevronRight, Search, Save, Loader2, User, Settings, Info, Eye, Zap } from 'lucide-react'; import { useCreateComposioProfile, useComposioTools } from '@/hooks/react-query/composio/use-composio'; import { useComposioProfiles } from '@/hooks/react-query/composio/use-composio-profiles'; import { useComposioToolkitDetails } from '@/hooks/react-query/composio/use-composio'; @@ -330,17 +330,28 @@ const ToolPreviewCard = ({ tool, searchTerm }: { }; return ( -
+
-
- +

{highlightText(tool.name, searchTerm)}

-

+

{highlightText(tool.description, searchTerm)}

+ {tool.tags && tool.tags.length > 0 && ( +
+ {tool.tags.slice(0, 3).map((tag, index) => ( + + {tag} + + ))} + {tool.tags.length > 3 && ( + +{tool.tags.length - 3} + )} +
+ )}
); @@ -720,31 +731,12 @@ export const ComposioConnector: React.FC = ({ {currentStep !== Step.ToolsSelection ? ( <> - -
- {app.logo ? ( - {app.name} - ) : ( -
- {app.name.charAt(0)} -
- )} -
- - {stepConfigs.find(config => config.id === currentStep)?.title} - -

- {stepConfigs.find(config => config.id === currentStep)?.description} -

-
-
-
= ({ animate="center" exit="exit" transition={{ duration: 0.3, ease: "easeInOut" }} - className="grid grid-cols-4 gap-0 h-full" + className="flex flex-col h-full" > -
+
+
+ {app.logo ? ( + {app.name} + ) : ( +
+ {app.name.charAt(0)} +
+ )} +
+

Connect to {app.name}

+

+ Choose how you'd like to authenticate and preview available tools +

+
+
+ + {availableToolsPreview.length} tools available +
+
+
+ +
+ {/* Left Panel - Connection Options */} +

Connect to {app.name}

@@ -813,92 +829,120 @@ export const ComposioConnector: React.FC = ({ ))} -

- )} -
-
-
- - {existingProfiles.length > 0 ? 'or' : ''} - -
-
- -
- -
- - {existingProfiles.length > 0 && ( - - )} -
-
-
-
- {isLoadingToolsPreview ? ( -
- {[...Array(3)].map((_, i) => ( -
-
-
-
-
-
-
-
- ))}
- ) : ( - <> - {filteredToolsPreview.length > 0 ? ( -
- {filteredToolsPreview.slice(0, 6).map((tool) => ( - - ))} - {filteredToolsPreview.length > 6 && ( -
- +{filteredToolsPreview.length - 6} more tools available -
- )} -
+ )} + +
+
+
+ + {existingProfiles.length > 0 ? 'or' : ''} + +
+
+ +
+ +
+ + {existingProfiles.length > 0 && ( + + )} +
+
+ + {/* Right Panel - Tools Preview */} +
+
+
+

+ + Available Tools +

+
+ + setToolsPreviewSearchTerm(e.target.value)} + className="pl-9 h-8 text-sm bg-muted/30 border-muted" + /> +
+
+
+ + +
+ {isLoadingToolsPreview ? ( +
+ {[...Array(6)].map((_, i) => ( +
+
+
+
+
+
+
+
+
+
+
+
+ ))} +
+ ) : ( + <> + {filteredToolsPreview.length > 0 ? ( +
+ {filteredToolsPreview.map((tool) => ( + + ))} +
+ ) : ( +
+
+ +
+

+ {toolsPreviewSearchTerm ? `No tools found matching "${toolsPreviewSearchTerm}"` : 'No tools available'} +

+
+ )} + + )} +
+
@@ -1076,29 +1120,6 @@ export const ComposioConnector: React.FC = ({ ) : ( <> - -
- {app.logo ? ( - {app.name} - ) : ( -
- {app.name.charAt(0) || 'T'} -
- )} -
- - Configure {app.name} Tools - -

- Select tools to add to your agent -

-
-
- {currentStep === Step.ToolsSelection && ( = ({ animate="center" exit="exit" transition={{ duration: 0.3, ease: "easeInOut" }} - className="flex-1 flex flex-col min-h-0" + className="flex-1 flex flex-col min-h-0 h-full" > -
+
+
+ {app.logo ? ( + {app.name} + ) : ( +
+ {app.name.charAt(0) || 'T'} +
+ )} +
+

+ Configure {app.name} Tools +

+

+ Select tools to add to your agent +

+
+
@@ -1145,7 +1187,7 @@ export const ComposioConnector: React.FC = ({
- +
{toolsError && ( @@ -1183,7 +1225,7 @@ export const ComposioConnector: React.FC = ({ )}
-
+
{selectedCount > 0 ? ( diff --git a/frontend/src/components/home/first-bento-animation.tsx b/frontend/src/components/home/first-bento-animation.tsx index 026153ea..5595aa67 100644 --- a/frontend/src/components/home/first-bento-animation.tsx +++ b/frontend/src/components/home/first-bento-animation.tsx @@ -87,7 +87,7 @@ export function FirstBentoAnimation() { Kortix Symbol
diff --git a/frontend/src/components/home/third-bento-animation.tsx b/frontend/src/components/home/third-bento-animation.tsx index 64cf11b5..f701d290 100644 --- a/frontend/src/components/home/third-bento-animation.tsx +++ b/frontend/src/components/home/third-bento-animation.tsx @@ -20,7 +20,7 @@ const taskConfigs: TaskConfig[] = [ ), status: 'completed', - className: 'bg-green-500/10 border border-green-500/20 text-green-600', + className: 'bg-muted border border-border text-muted-foreground', }, { title: 'Meeting scheduled', @@ -30,7 +30,7 @@ const taskConfigs: TaskConfig[] = [ ), status: 'completed', - className: 'bg-green-500/10 border border-green-500/20 text-green-600', + className: 'bg-muted border border-border text-muted-foreground', }, { title: 'Reports generated', @@ -40,7 +40,7 @@ const taskConfigs: TaskConfig[] = [ ), status: 'processing', - className: 'bg-blue-500/10 border border-blue-500/20 text-blue-600', + className: 'bg-accent border border-border text-foreground', }, { title: 'Data analyzed', @@ -50,7 +50,7 @@ const taskConfigs: TaskConfig[] = [ ), status: 'pending', - className: 'bg-gray-500/10 border border-gray-500/20 text-gray-600', + className: 'bg-muted/50 border border-border/50 text-muted-foreground/70', }, ]; @@ -153,7 +153,7 @@ export function AITaskExecution({ ease: 'easeOut', }} className={`flex items-center gap-3 p-3 rounded-lg transition-all duration-300 ${ - index <= currentTaskIndex ? task.className : 'bg-gray-500/5 border border-gray-500/10 text-gray-400' + index <= currentTaskIndex ? task.className : 'bg-muted/30 border border-border/30 text-muted-foreground/50' }`} > {/* Status indicator */} @@ -162,9 +162,9 @@ export function AITaskExecution({ - + @@ -172,10 +172,10 @@ export function AITaskExecution({ ) : ( -
+
)}
diff --git a/frontend/src/lib/home.tsx b/frontend/src/lib/home.tsx index d5f82136..58f587fa 100644 --- a/frontend/src/lib/home.tsx +++ b/frontend/src/lib/home.tsx @@ -1225,7 +1225,7 @@ export const siteConfig = { }, ctaSection: { id: 'cta', - title: 'Launch Your First AI Agent Today', + title: 'Launch Your First AI Worker Today', backgroundImage: '/holo.png', button: { text: 'Get Started for free',