apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-25 18:55:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tools UI updates

Browse source 
* Make UI UX fixes to tools and tool configs

* Fix font sizing and dark mode issues for tool labels

* Remove subtitle in tools selection list
This commit is contained in:
Akhilesh Sudhakar 2025-07-24 19:19:28 +05:30 • committed by GitHub
parent a298036b4b
commit da58903f67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 289 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

27
apps/rowboat/app/projects/[projectId]/tools/components/Composio.tsx
View file

@ -18,15 +18,19 @@ type ToolkitType = z.infer<typeof ZToolkit>;
type ToolkitListResponse = z.infer<ReturnType<typeof ZListResponse<typeof ZToolkit>>>;
type ProjectType = z.infer<typeof Project>;
export function Composio({
projectId,
tools,
onAddTool
}: {
interface ComposioProps {
projectId: string;
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: z.infer<typeof WorkflowTool>) => void;
}) {
initialToolkitSlug?: string | null;
}
export function Composio({
projectId,
tools,
onAddTool,
initialToolkitSlug
}: ComposioProps) {
const [toolkits, setToolkits] = useState<ToolkitType[]>([]);
const [projectConfig, setProjectConfig] = useState<ProjectType | null>(null);
const [loading, setLoading] = useState(true);
@ -97,6 +101,17 @@ export function Composio({
loadAllToolkits();
}, [loadAllToolkits]);
// Auto-select toolkit if initialToolkitSlug is provided
useEffect(() => {
if (initialToolkitSlug && toolkits.length > 0) {
const toolkit = toolkits.find(t => t.slug === initialToolkitSlug);
if (toolkit) {
setSelectedToolkit(toolkit);
setIsToolsPanelOpen(true);
}
}
}, [initialToolkitSlug, toolkits]);
const filteredToolkits = toolkits.filter(toolkit => {
const searchLower = searchQuery.toLowerCase();
return (

3
apps/rowboat/app/projects/[projectId]/tools/components/ComposioToolsPanel.tsx
View file

@ -200,9 +200,6 @@ export function ComposioToolsPanel({
<div className="flex items-center justify-between mb-4">
<div>
<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Select Tools</h4>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Check the tools you want to add to your workflow
</p>
</div>
{hasChanges && (
<Button

3
apps/rowboat/app/projects/[projectId]/tools/components/McpToolsPanel.tsx
View file

@ -121,9 +121,6 @@ export function McpToolsPanel({
<div className="flex items-center justify-between mb-4">
<div>
<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Select Tools</h4>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Check the tools you want to add to your workflow
</p>
</div>
{hasChanges && (
<Button

23
apps/rowboat/app/projects/[projectId]/tools/components/ToolkitAuthModal.tsx
View file

@ -318,7 +318,7 @@ export function ToolkitAuthModal({
<Modal
isOpen={isOpen}
onOpenChange={onClose}
size="md"
size="lg"
classNames={{
base: "bg-white dark:bg-gray-900",
header: "border-b border-gray-200 dark:border-gray-800",
@ -415,15 +415,15 @@ export function ToolkitAuthModal({
) : (
// Auth options view
<div className="space-y-4">
<div className="text-sm text-gray-600 dark:text-gray-400">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-4 mt-2">
Choose how you&apos;d like to authenticate with this toolkit:
</div>
<div className="space-y-3">
<div className="space-y-6">
{/* OAuth2 Composio Managed */}
{toolkit.composio_managed_auth_schemes.includes('OAUTH2') && (
<HeroButton
className="w-full justify-start gap-3 h-auto py-4 px-4"
className="w-full justify-start gap-3 h-auto py-5 px-5 border-2 border-blue-500 bg-blue-50 dark:bg-blue-900/20"
variant="bordered"
onPress={handleComposioOAuth2}
isDisabled={processing}
@ -432,8 +432,11 @@ export function ToolkitAuthModal({
<div className="bg-green-100 dark:bg-green-900/20 p-2 rounded-lg">
<Shield className="h-5 w-5 text-green-600 dark:text-green-400" />
</div>
<div className="text-left">
<div className="font-medium">Connect using OAuth2</div>
<div className="text-left flex flex-col gap-1">
<div className="flex items-center gap-2">
<div className="font-medium text-base">Connect using OAuth2</div>
<span className="inline-block px-2 py-0.5 text-xs rounded-full bg-blue-500 text-white font-semibold">Most popular</span>
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
Secure authentication managed by Composio
</div>
@ -446,7 +449,7 @@ export function ToolkitAuthModal({
{(toolkit.composio_managed_auth_schemes.includes('OAUTH2') ||
toolkit.auth_config_details?.some(config => config.mode === 'OAUTH2')) && (
<HeroButton
className="w-full justify-start gap-3 h-auto py-4 px-4"
className="w-full justify-start gap-3 h-auto py-5 px-5"
variant="bordered"
onPress={() => handleCustomAuth('OAUTH2')}
isDisabled={processing}
@ -456,7 +459,7 @@ export function ToolkitAuthModal({
<Shield className="h-5 w-5 text-orange-600 dark:text-orange-400" />
</div>
<div className="text-left">
<div className="font-medium">Connect using custom OAuth2 app</div>
<div className="font-medium text-base">Connect using custom OAuth2 app</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
Use your own OAuth2 configuration
</div>
@ -468,7 +471,7 @@ export function ToolkitAuthModal({
{toolkit.auth_config_details?.filter(config => config.mode !== 'OAUTH2').map(config => (
<HeroButton
key={config.mode}
className="w-full justify-start gap-3 h-auto py-4 px-4"
className="w-full justify-start gap-3 h-auto py-5 px-5"
variant="bordered"
onPress={() => handleCustomAuth(config.mode)}
isDisabled={processing}
@ -478,7 +481,7 @@ export function ToolkitAuthModal({
{getAuthMethodIcon(config.mode)}
</div>
<div className="text-left">
<div className="font-medium">Connect using {getAuthMethodName(config.mode)}</div>
<div className="font-medium text-base">Connect using {getAuthMethodName(config.mode)}</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
Enter your credentials
</div>

17
apps/rowboat/app/projects/[projectId]/tools/components/ToolsConfig.tsx
View file

@ -9,17 +9,21 @@ import type { Key } from 'react';
import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
import { z } from 'zod';
interface ToolsConfigProps {
projectId: string;
useComposioTools: boolean;
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: Partial<z.infer<typeof WorkflowTool>>) => void;
initialToolkitSlug?: string | null;
}
export function ToolsConfig({
projectId,
useComposioTools,
tools,
onAddTool,
}: {
projectId: string;
useComposioTools: boolean;
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: Partial<z.infer<typeof WorkflowTool>>) => void;
}) {
initialToolkitSlug
}: ToolsConfigProps) {
let defaultActiveTab = 'mcp';
if (useComposioTools) {
defaultActiveTab = 'composio';
@ -46,6 +50,7 @@ export function ToolsConfig({
projectId={projectId}
tools={tools}
onAddTool={onAddTool}
initialToolkitSlug={initialToolkitSlug}
/>
</div>
</Tab>