mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-25 18:55:19 +02:00
Merge branch 'dev' of github.com:rowboatlabs/rowboat into dev
This commit is contained in:
tusharmagar
commit
f9d2c31238
31 changed files with 781 additions and 529 deletions
|
|
@ -4,14 +4,10 @@ import { Metadata } from "next";
|
|||
import { Spinner, Dropdown, DropdownMenu, DropdownItem, DropdownTrigger, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Input, useDisclosure, Divider, Textarea } from "@heroui/react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { getProjectConfig, updateProjectName, updateWebhookUrl, createApiKey, deleteApiKey, listApiKeys, deleteProject, rotateSecret } from "../../../actions/project_actions";
|
||||
import { getProjectConfig, updateProjectName, updateWebhookUrl, deleteProject, rotateSecret } from "../../../actions/project_actions";
|
||||
import { CopyButton } from "../../../../components/common/copy-button";
|
||||
import { InputField } from "../../../lib/components/input-field";
|
||||
import { EyeIcon, EyeOffIcon, Settings, Plus, MoreVertical } from "lucide-react";
|
||||
import { WithStringId } from "../../../lib/types/types";
|
||||
import { ApiKey } from "../../../lib/types/project_types";
|
||||
import { z } from "zod";
|
||||
import { RelativeTime } from "@primer/react";
|
||||
import { Label } from "../../../lib/components/label";
|
||||
import { FormSection } from "../../../lib/components/form-section";
|
||||
import { Panel } from "@/components/common/panel-common";
|
||||
|
|
@ -108,156 +104,6 @@ export function BasicSettingsSection({
|
|||
</Section>;
|
||||
}
|
||||
|
||||
export function ApiKeysSection({
|
||||
projectId,
|
||||
}: {
|
||||
projectId: string;
|
||||
}) {
|
||||
const [keys, setKeys] = useState<WithStringId<z.infer<typeof ApiKey>>[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [message, setMessage] = useState<{
|
||||
type: 'success' | 'error' | 'info';
|
||||
text: string;
|
||||
} | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadKeys = async () => {
|
||||
const keys = await listApiKeys(projectId);
|
||||
setKeys(keys);
|
||||
setLoading(false);
|
||||
};
|
||||
loadKeys();
|
||||
}, [projectId]);
|
||||
|
||||
const handleCreateKey = async () => {
|
||||
setLoading(true);
|
||||
setMessage(null);
|
||||
try {
|
||||
const key = await createApiKey(projectId);
|
||||
setLoading(false);
|
||||
setMessage({
|
||||
type: 'success',
|
||||
text: 'API key created successfully',
|
||||
});
|
||||
setKeys([...keys, key]);
|
||||
|
||||
setTimeout(() => {
|
||||
setMessage(null);
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: error instanceof Error ? error.message : "Failed to create API key",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteKey = async (id: string) => {
|
||||
if (!window.confirm("Are you sure you want to delete this API key? This action cannot be undone.")) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setMessage(null);
|
||||
await deleteApiKey(projectId, id);
|
||||
setKeys(keys.filter((k) => k._id !== id));
|
||||
setLoading(false);
|
||||
setMessage({
|
||||
type: 'info',
|
||||
text: 'API key deleted successfully',
|
||||
});
|
||||
setTimeout(() => {
|
||||
setMessage(null);
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
setMessage({
|
||||
type: 'error',
|
||||
text: error instanceof Error ? error.message : "Failed to delete API key",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return <Section title="API keys">
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
API keys are used to authenticate requests to the Rowboat API.
|
||||
</p>
|
||||
<Button
|
||||
onClick={handleCreateKey}
|
||||
size="sm"
|
||||
startContent={<Plus className="h-4 w-4" />}
|
||||
variant="primary"
|
||||
disabled={loading}
|
||||
>
|
||||
Create API key
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
{loading && <Spinner size="sm" />}
|
||||
{!loading && <div className="border border rounded-lg text-sm">
|
||||
<div className="flex items-center border-b border p-4">
|
||||
<div className="flex-3 font-normal">API Key</div>
|
||||
<div className="flex-1 font-normal">Created</div>
|
||||
<div className="flex-1 font-normal">Last Used</div>
|
||||
<div className="w-10"></div>
|
||||
</div>
|
||||
{message?.type === 'success' && <div className="flex flex-col p-2">
|
||||
<div className="text-sm bg-green-50 text-green-500 p-2 rounded-md">{message.text}</div>
|
||||
</div>}
|
||||
{message?.type === 'error' && <div className="flex flex-col p-2">
|
||||
<div className="text-sm bg-red-50 text-red-500 p-2 rounded-md">{message.text}</div>
|
||||
</div>}
|
||||
{message?.type === 'info' && <div className="flex flex-col p-2">
|
||||
<div className="text-sm bg-yellow-50 text-yellow-500 p-2 rounded-md">{message.text}</div>
|
||||
</div>}
|
||||
<div className="flex flex-col">
|
||||
{keys.map((key) => (
|
||||
<div key={key._id} className="flex items-start border-b border last:border-b-0 p-4">
|
||||
<div className="flex-3 p-2">
|
||||
<ApiKeyDisplay apiKey={key.key} />
|
||||
</div>
|
||||
<div className="flex-1 p-2">
|
||||
<RelativeTime date={new Date(key.createdAt)} />
|
||||
</div>
|
||||
<div className="flex-1 p-2">
|
||||
{key.lastUsedAt ? <RelativeTime date={new Date(key.lastUsedAt)} /> : 'Never'}
|
||||
</div>
|
||||
<div className="w-10 p-2">
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<button className="text-muted-foreground hover:text-foreground">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu>
|
||||
<DropdownItem
|
||||
key='delete'
|
||||
className="text-destructive"
|
||||
onPress={() => handleDeleteKey(key._id)}
|
||||
>
|
||||
Delete
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{keys.length === 0 && (
|
||||
<div className="p-4 text-center text-muted-foreground">
|
||||
No API keys created yet
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</Section>;
|
||||
}
|
||||
|
||||
export function SecretSection({
|
||||
projectId,
|
||||
}: {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { getProjectConfig, createApiKey, deleteApiKey, listApiKeys, deleteProjec
|
|||
import { CopyButton } from "../../../../../components/common/copy-button";
|
||||
import { EyeIcon, EyeOffIcon, PlusIcon, Trash2Icon } from "lucide-react";
|
||||
import { WithStringId } from "../../../../lib/types/types";
|
||||
import { ApiKey } from "../../../../lib/types/project_types";
|
||||
import { ApiKey } from "@/src/entities/models/api-key";
|
||||
import { z } from "zod";
|
||||
import { RelativeTime } from "@primer/react";
|
||||
import { Label } from "../../../../lib/components/label";
|
||||
|
|
@ -224,7 +224,7 @@ function ApiKeyDisplay({ apiKey, onDelete }: { apiKey: string; onDelete: () => v
|
|||
}
|
||||
|
||||
function ApiKeysSection({ projectId }: { projectId: string }) {
|
||||
const [keys, setKeys] = useState<WithStringId<z.infer<typeof ApiKey>>[]>([]);
|
||||
const [keys, setKeys] = useState<z.infer<typeof ApiKey>[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [message, setMessage] = useState<{
|
||||
type: 'success' | 'error' | 'info';
|
||||
|
|
@ -270,7 +270,7 @@ function ApiKeysSection({ projectId }: { projectId: string }) {
|
|||
try {
|
||||
setLoading(true);
|
||||
await deleteApiKey(projectId, id);
|
||||
setKeys(keys.filter((k) => k._id !== id));
|
||||
setKeys(keys.filter((k) => k.id !== id));
|
||||
setMessage({
|
||||
type: 'info',
|
||||
text: 'API key deleted successfully',
|
||||
|
|
@ -325,11 +325,11 @@ function ApiKeysSection({ projectId }: { projectId: string }) {
|
|||
)}
|
||||
|
||||
{keys.map((key) => (
|
||||
<div key={key._id} className="grid grid-cols-12 items-center border-b border-gray-200 dark:border-gray-700 last:border-0 p-4">
|
||||
<div key={key.id} className="grid grid-cols-12 items-center border-b border-gray-200 dark:border-gray-700 last:border-0 p-4">
|
||||
<div className="col-span-7">
|
||||
<ApiKeyDisplay
|
||||
apiKey={key.key}
|
||||
onDelete={() => handleDeleteKey(key._id)}
|
||||
onDelete={() => handleDeleteKey(key.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 text-sm text-gray-500">
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ import { CopilotMessage } from "../../../lib/types/copilot_types";
|
|||
import { Workflow } from "@/app/lib/types/workflow_types";
|
||||
import { DataSource } from "@/app/lib/types/datasource_types";
|
||||
import { z } from "zod";
|
||||
import { Action as WorkflowDispatch } from "../workflow/workflow_editor";
|
||||
import { Action as WorkflowDispatch } from "@/app/projects/[projectId]/workflow/workflow_editor";
|
||||
import { Panel } from "@/components/common/panel-common";
|
||||
import { ComposeBoxCopilot } from "@/components/common/compose-box-copilot";
|
||||
import { Messages } from "./components/messages";
|
||||
import { CopyIcon, CheckIcon, PlusIcon, XIcon, InfoIcon } from "lucide-react";
|
||||
import { CopyIcon, CheckIcon, PlusIcon, XIcon, InfoIcon, Sparkles } from "lucide-react";
|
||||
import { useCopilot } from "./use-copilot";
|
||||
import { BillingUpgradeModal } from "@/components/common/billing-upgrade-modal";
|
||||
import { WithStringId } from "@/app/lib/types/types";
|
||||
|
|
@ -225,7 +225,7 @@ const App = forwardRef<{ handleCopyChat: () => void; handleUserMessage: (message
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="shrink-0 px-1 pb-6">
|
||||
<div className="shrink-0 px-1">
|
||||
{responseError && (
|
||||
<div className="mb-4 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex gap-2 justify-between items-center text-sm">
|
||||
<p className="text-red-600 dark:text-red-400">{responseError}</p>
|
||||
|
|
@ -322,16 +322,11 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
|
|||
variant="copilot"
|
||||
tourTarget="copilot"
|
||||
showWelcome={messages.length === 0}
|
||||
title={
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-semibold text-zinc-700 dark:text-zinc-300">
|
||||
Skipper
|
||||
</div>
|
||||
<Tooltip content="A copilot to help you build and modify your workflow">
|
||||
<InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
icon={<Sparkles className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />}
|
||||
title="Skipper"
|
||||
subtitle="Build your assistant"
|
||||
rightActions={
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
|
|
@ -342,10 +337,6 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
|
|||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
rightActions={
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
import { Spinner } from "@heroui/react";
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { useEffect, useRef, useState, useCallback, useMemo } from "react";
|
||||
import { z } from "zod";
|
||||
import { Workflow} from "@/app/lib/types/workflow_types";
|
||||
import MarkdownContent from "@/app/lib/components/markdown-content";
|
||||
|
|
@ -153,16 +153,7 @@ function InternalAssistantMessage({ content }: { content: string }) {
|
|||
);
|
||||
}
|
||||
|
||||
type ActionPanelBlock = {
|
||||
part: {
|
||||
type: 'action';
|
||||
action: any;
|
||||
} | {
|
||||
type: 'streaming_action';
|
||||
action: any;
|
||||
};
|
||||
actionIndex: number;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* AssistantMessage component that renders copilot responses with action cards.
|
||||
|
|
@ -194,26 +185,24 @@ function AssistantMessage({
|
|||
// Remove autoApplyEnabled and useEffect for auto-apply
|
||||
|
||||
// parse actions from parts
|
||||
let parsed: z.infer<typeof CopilotResponsePart>[] = [];
|
||||
for (const block of blocks) {
|
||||
if (block.type === 'text') {
|
||||
parsed.push({
|
||||
type: 'text',
|
||||
content: block.content,
|
||||
});
|
||||
} else {
|
||||
parsed.push(enrich(block.content));
|
||||
const parsed = useMemo(() => {
|
||||
const result: z.infer<typeof CopilotResponsePart>[] = [];
|
||||
for (const block of blocks) {
|
||||
if (block.type === 'text') {
|
||||
result.push({
|
||||
type: 'text',
|
||||
content: block.content,
|
||||
});
|
||||
} else {
|
||||
result.push(enrich(block.content));
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}, [blocks]);
|
||||
|
||||
// Only render text outside the panel
|
||||
const textBlocks = parsed.filter(part => part.type === 'text');
|
||||
// All cards (action and streaming_action) go inside the panel
|
||||
const cardBlocks: ActionPanelBlock[] = parsed
|
||||
.map((part, actionIndex) => ({ part, actionIndex }))
|
||||
.filter(({ part }) => part.type === 'action' || part.type === 'streaming_action') as ActionPanelBlock[];
|
||||
const hasCards = cardBlocks.length > 0;
|
||||
const totalActions = cardBlocks.filter(({ part }) => part.type === 'action').length;
|
||||
// Count action cards for tracking
|
||||
const actionParts = parsed.filter(part => part.type === 'action' || part.type === 'streaming_action');
|
||||
const totalActions = parsed.filter(part => part.type === 'action').length;
|
||||
const appliedCount = Array.from(appliedActions).length;
|
||||
const pendingCount = Math.max(0, totalActions - appliedCount);
|
||||
const allApplied = pendingCount === 0 && totalActions > 0;
|
||||
|
|
@ -307,9 +296,14 @@ function AssistantMessage({
|
|||
// Memoized handleApplyAll for useEffect dependencies
|
||||
const handleApplyAll = useCallback(() => {
|
||||
// Find all unapplied action indices
|
||||
const unapplied = cardBlocks
|
||||
const unapplied = parsed
|
||||
.map((part, idx) => ({ part, actionIndex: idx }))
|
||||
.filter(({ part, actionIndex }) => part.type === 'action' && !appliedActions.has(actionIndex))
|
||||
.map(({ part, actionIndex }) => ({ action: part.action, actionIndex }));
|
||||
.map(({ part, actionIndex }) => ({
|
||||
action: part.type === 'action' ? part.action : null,
|
||||
actionIndex
|
||||
}))
|
||||
.filter(({ action }) => action !== null);
|
||||
|
||||
// Synchronously apply all unapplied actions
|
||||
unapplied.forEach(({ action, actionIndex }) => {
|
||||
|
|
@ -322,7 +316,7 @@ function AssistantMessage({
|
|||
unapplied.forEach(({ actionIndex }) => next.add(actionIndex));
|
||||
return next;
|
||||
});
|
||||
}, [cardBlocks, appliedActions, setAppliedActions, applyAction]);
|
||||
}, [parsed, appliedActions, setAppliedActions, applyAction]);
|
||||
|
||||
// Manual single apply (from card)
|
||||
const handleSingleApply = (action: any, actionIndex: number) => {
|
||||
|
|
@ -343,37 +337,20 @@ function AssistantMessage({
|
|||
// Removed useEffect for auto-apply
|
||||
|
||||
// Find streaming/ongoing card and extract name
|
||||
const streamingBlock = cardBlocks.find(({ part }) => part.type === 'streaming_action');
|
||||
const streamingPart = parsed.find(part => part.type === 'streaming_action');
|
||||
let streamingLine = '';
|
||||
if (streamingBlock && streamingBlock.part.type === 'streaming_action' && streamingBlock.part.action && streamingBlock.part.action.name) {
|
||||
streamingLine = `Generating ${streamingBlock.part.action.name}...`;
|
||||
if (streamingPart && streamingPart.type === 'streaming_action' && streamingPart.action && streamingPart.action.name) {
|
||||
streamingLine = `Generating ${streamingPart.action.name}...`;
|
||||
}
|
||||
|
||||
// Find the first card index
|
||||
const firstCardIdx = parsed.findIndex(part => part.type === 'action' || part.type === 'streaming_action');
|
||||
// Group blocks into: beforePanel, cardBlocks, afterPanel
|
||||
const beforePanel = firstCardIdx === -1 ? parsed : parsed.slice(0, firstCardIdx);
|
||||
const panelBlocks = firstCardIdx === -1 ? [] : parsed.slice(firstCardIdx).filter(part => part.type === 'action' || part.type === 'streaming_action');
|
||||
// Find where the card blocks end (first non-card after first card)
|
||||
let afterPanelStart = firstCardIdx;
|
||||
if (firstCardIdx !== -1) {
|
||||
for (let i = firstCardIdx; i < parsed.length; i++) {
|
||||
if (parsed[i].type !== 'action' && parsed[i].type !== 'streaming_action') {
|
||||
afterPanelStart = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
const afterPanel = (firstCardIdx !== -1 && afterPanelStart > firstCardIdx) ? parsed.slice(afterPanelStart) : [];
|
||||
|
||||
// Only show Apply All button if all cards are loaded (no streaming_action cards) and streaming is finished
|
||||
const allCardsLoaded = !loading && panelBlocks.length > 0 && panelBlocks.every(part => part.type === 'action');
|
||||
const allCardsLoaded = !loading && actionParts.length > 0 && actionParts.every(part => part.type === 'action');
|
||||
// When all cards are loaded, show summary of agents created/updated
|
||||
let completedSummary = '';
|
||||
if (allCardsLoaded && totalActions > 0) {
|
||||
// Count how many are create vs edit
|
||||
const createCount = cardBlocks.filter(({ part }) => part.type === 'action' && part.action.action === 'create_new').length;
|
||||
const editCount = cardBlocks.filter(({ part }) => part.type === 'action' && part.action.action === 'edit').length;
|
||||
const createCount = parsed.filter(part => part.type === 'action' && part.action.action === 'create_new').length;
|
||||
const editCount = parsed.filter(part => part.type === 'action' && part.action.action === 'edit').length;
|
||||
const parts = [];
|
||||
if (createCount > 0) parts.push(`${createCount} agent${createCount > 1 ? 's' : ''} created`);
|
||||
if (editCount > 0) parts.push(`${editCount} agent${editCount > 1 ? 's' : ''} updated`);
|
||||
|
|
@ -381,51 +358,13 @@ function AssistantMessage({
|
|||
}
|
||||
|
||||
// Detect if any card has an error or is cancelled
|
||||
const hasPanelWarning = cardBlocks.some(
|
||||
({ part }) =>
|
||||
const hasPanelWarning = parsed.some(
|
||||
part =>
|
||||
part.type === 'action' &&
|
||||
part.action &&
|
||||
(part.action.error || ('cancelled' in part.action && part.action.cancelled))
|
||||
);
|
||||
|
||||
// Ticker summary for collapsed state (two lines)
|
||||
const ticker = (
|
||||
<div className="flex flex-col">
|
||||
{allCardsLoaded && completedSummary ? (
|
||||
<span className="font-medium text-xs sm:text-sm">{completedSummary}</span>
|
||||
) : streamingLine && (
|
||||
<span className="font-medium text-xs sm:text-sm">{streamingLine}</span>
|
||||
)}
|
||||
<span className="font-medium text-xs sm:text-sm">{appliedCount} applied, {pendingCount} pending</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const applyAllButton = (
|
||||
<button
|
||||
onClick={handleApplyAll}
|
||||
disabled={allApplied} // Changed to allApplied
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium text-sm transition-colors duration-200
|
||||
${
|
||||
allApplied
|
||||
? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-400 cursor-not-allowed border border-zinc-200 dark:border-zinc-700 shadow-none'
|
||||
: 'bg-blue-100 dark:bg-zinc-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-zinc-800 border border-blue-200 dark:border-zinc-800 shadow-sm'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{allApplied ? (
|
||||
<>
|
||||
<CheckCheckIcon size={16} />
|
||||
All applied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCheckIcon size={16} />
|
||||
Apply all
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
// Utility to filter out divider/empty markdown blocks
|
||||
function isNonDividerMarkdown(content: string) {
|
||||
const trimmed = content.trim();
|
||||
|
|
@ -435,9 +374,6 @@ function AssistantMessage({
|
|||
);
|
||||
}
|
||||
|
||||
// Restore panelOpen state if missing
|
||||
const [panelOpen, setPanelOpen] = useState(false); // collapsed by default
|
||||
|
||||
// At the end of the render, call onStatusBarChange with the current status bar props
|
||||
// Track the latest status bar info
|
||||
const latestStatusBar = useRef<any>(null);
|
||||
|
|
|
|||
|
|
@ -363,11 +363,12 @@ export function AgentConfig({
|
|||
});
|
||||
showSavedMessage();
|
||||
}}
|
||||
placeholder="Type agent instructions..."
|
||||
markdown
|
||||
multiline
|
||||
mentions
|
||||
mentionsAtValues={atMentions}
|
||||
className="h-full min-h-0 overflow-auto !mb-0 !mt-0"
|
||||
className="h-full min-h-0 overflow-auto !mb-0 !mt-0 min-h-[300px]"
|
||||
/>
|
||||
</div>
|
||||
{/* Examples Section */}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { Chat } from "./components/chat";
|
|||
import { Panel } from "@/components/common/panel-common";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tooltip } from "@heroui/react";
|
||||
import { CheckIcon, CopyIcon, PlusIcon, InfoIcon, BugIcon, BugOffIcon } from "lucide-react";
|
||||
import { CheckIcon, CopyIcon, PlusIcon, InfoIcon, BugIcon, BugOffIcon, MessageCircle } from "lucide-react";
|
||||
|
||||
export function App({
|
||||
hidden = false,
|
||||
|
|
@ -56,16 +56,11 @@ export function App({
|
|||
className={`${hidden ? 'hidden' : 'block'}`}
|
||||
variant="playground"
|
||||
tourTarget="playground"
|
||||
title={
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-semibold text-zinc-700 dark:text-zinc-300">
|
||||
Playground
|
||||
</div>
|
||||
<Tooltip content="Test your workflow and chat with your agents in real-time">
|
||||
<InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
icon={<MessageCircle className="w-5 h-5 text-blue-600 dark:text-blue-400" />}
|
||||
title="Playground"
|
||||
subtitle="Chat with your assistant"
|
||||
rightActions={
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
|
|
@ -90,10 +85,6 @@ export function App({
|
|||
<BugOffIcon className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
rightActions={
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
|
|
|
|||
|
|
@ -22,13 +22,17 @@ interface SelectComposioToolkitProps {
|
|||
tools: z.infer<typeof Workflow.shape.tools>;
|
||||
onSelectToolkit: (toolkit: ToolkitType) => void;
|
||||
initialToolkitSlug?: string | null;
|
||||
filterByTriggers?: boolean; // New prop to filter toolkits that have triggers
|
||||
filterByTools?: boolean; // New prop to filter toolkits that have tools
|
||||
}
|
||||
|
||||
export function SelectComposioToolkit({
|
||||
projectId,
|
||||
tools,
|
||||
onSelectToolkit,
|
||||
initialToolkitSlug
|
||||
initialToolkitSlug,
|
||||
filterByTriggers = false,
|
||||
filterByTools = false
|
||||
}: SelectComposioToolkitProps) {
|
||||
const [toolkits, setToolkits] = useState<ToolkitType[]>([]);
|
||||
const [projectConfig, setProjectConfig] = useState<ProjectType | null>(null);
|
||||
|
|
@ -59,17 +63,16 @@ export function SelectComposioToolkit({
|
|||
cursor = response.next_cursor;
|
||||
} while (cursor !== null);
|
||||
|
||||
// // Only show those toolkits that
|
||||
// // - either do not require authentication, OR
|
||||
// // - have oauth2 managed by Composio
|
||||
// const filteredToolkits = allToolkits.filter(toolkit => {
|
||||
// const noAuth = toolkit.no_auth;
|
||||
// const hasOAuth2 = toolkit.auth_schemes.includes('OAUTH2');
|
||||
// const hasComposioManagedOAuth2 = toolkit.composio_managed_auth_schemes.includes('OAUTH2');
|
||||
// return noAuth || hasOAuth2;
|
||||
// });
|
||||
// Filter toolkits based on the filter props
|
||||
let finalToolkits = allToolkits;
|
||||
if (filterByTriggers) {
|
||||
finalToolkits = finalToolkits.filter(toolkit => toolkit.meta.triggers_count > 0);
|
||||
}
|
||||
if (filterByTools) {
|
||||
finalToolkits = finalToolkits.filter(toolkit => toolkit.meta.tools_count > 0);
|
||||
}
|
||||
|
||||
setToolkits(allToolkits);
|
||||
setToolkits(finalToolkits);
|
||||
setError(null);
|
||||
} catch (err: any) {
|
||||
setError('Unable to load all Composio toolkits. Please check your connection and try again.');
|
||||
|
|
@ -78,7 +81,7 @@ export function SelectComposioToolkit({
|
|||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [projectId]);
|
||||
}, [projectId, filterByTriggers, filterByTools]);
|
||||
|
||||
const handleSelectToolkit = useCallback((toolkit: ToolkitType) => {
|
||||
onSelectToolkit(toolkit);
|
||||
|
|
@ -125,7 +128,14 @@ export function SelectComposioToolkit({
|
|||
return (
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800 dark:border-gray-200 mx-auto"></div>
|
||||
<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">Loading Composio toolkits...</p>
|
||||
<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
{filterByTriggers
|
||||
? 'Loading Composio toolkits with triggers...'
|
||||
: filterByTools
|
||||
? 'Loading Composio toolkits with tools...'
|
||||
: 'Loading Composio toolkits...'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -161,7 +171,13 @@ export function SelectComposioToolkit({
|
|||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search toolkits..."
|
||||
placeholder={
|
||||
filterByTriggers
|
||||
? "Search toolkits with triggers..."
|
||||
: filterByTools
|
||||
? "Search toolkits with tools..."
|
||||
: "Search toolkits..."
|
||||
}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-8 pr-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-md
|
||||
|
|
@ -173,6 +189,8 @@ export function SelectComposioToolkit({
|
|||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
{filteredToolkits.length} {filteredToolkits.length === 1 ? 'toolkit' : 'toolkits'}
|
||||
{filterByTriggers && ' with triggers'}
|
||||
{filterByTools && ' with tools'}
|
||||
</div>
|
||||
<div className="h-4 w-px bg-gray-200 dark:bg-gray-700" />
|
||||
</div>
|
||||
|
|
@ -204,6 +222,7 @@ export function SelectComposioToolkit({
|
|||
isConnected={isConnected}
|
||||
workflowTools={tools}
|
||||
onSelectToolkit={() => handleSelectToolkit(toolkit)}
|
||||
showTriggerCounts={filterByTriggers}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
|
@ -212,7 +231,14 @@ export function SelectComposioToolkit({
|
|||
{filteredToolkits.length === 0 && !loading && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{searchQuery ? 'No toolkits found matching your search.' : 'No toolkits available.'}
|
||||
{searchQuery
|
||||
? 'No toolkits found matching your search.'
|
||||
: filterByTriggers
|
||||
? 'No toolkits with triggers available.'
|
||||
: filterByTools
|
||||
? 'No toolkits with tools available.'
|
||||
: 'No toolkits available.'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ interface ToolkitCardProps {
|
|||
isConnected: boolean;
|
||||
onSelectToolkit: () => void;
|
||||
workflowTools: z.infer<typeof Workflow.shape.tools>;
|
||||
showTriggerCounts?: boolean; // New prop to show trigger counts instead of tool counts
|
||||
}
|
||||
|
||||
export function ToolkitCard({
|
||||
|
|
@ -37,6 +38,7 @@ export function ToolkitCard({
|
|||
isConnected,
|
||||
onSelectToolkit,
|
||||
workflowTools,
|
||||
showTriggerCounts = false,
|
||||
}: ToolkitCardProps) {
|
||||
const handleCardClick = useCallback(() => {
|
||||
onSelectToolkit();
|
||||
|
|
@ -69,9 +71,11 @@ export function ToolkitCard({
|
|||
variant="faded"
|
||||
size="sm"
|
||||
>
|
||||
{selectedToolsCount > 0
|
||||
? `${toolkit.meta.tools_count} tools, ${selectedToolsCount} selected`
|
||||
: `${toolkit.meta.tools_count} tools`
|
||||
{showTriggerCounts
|
||||
? `${toolkit.meta.triggers_count} triggers`
|
||||
: selectedToolsCount > 0
|
||||
? `${toolkit.meta.tools_count} tools, ${selectedToolsCount} selected`
|
||||
: `${toolkit.meta.tools_count} tools`
|
||||
}
|
||||
</Chip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ export function ToolsConfig({
|
|||
tools={tools}
|
||||
onSelectToolkit={handleSelectToolkit}
|
||||
initialToolkitSlug={initialToolkitSlug}
|
||||
filterByTools={true}
|
||||
/>
|
||||
</div>
|
||||
</Tab>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,210 @@
|
|||
"use client";
|
||||
import React from "react";
|
||||
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Spinner, Tooltip, Input } from "@heroui/react";
|
||||
import { RadioIcon, RedoIcon, UndoIcon, RocketIcon, PenLine, AlertTriangle, DownloadIcon, SettingsIcon, ChevronDownIcon, ZapIcon } from "lucide-react";
|
||||
|
||||
interface TopBarProps {
|
||||
localProjectName: string;
|
||||
projectNameError: string | null;
|
||||
onProjectNameChange: (value: string) => void;
|
||||
publishing: boolean;
|
||||
isLive: boolean;
|
||||
showCopySuccess: boolean;
|
||||
canUndo: boolean;
|
||||
canRedo: boolean;
|
||||
showCopilot: boolean;
|
||||
onUndo: () => void;
|
||||
onRedo: () => void;
|
||||
onDownloadJSON: () => void;
|
||||
onPublishWorkflow: () => void;
|
||||
onChangeMode: (mode: 'draft' | 'live') => void;
|
||||
onRevertToLive: () => void;
|
||||
onToggleCopilot: () => void;
|
||||
onSettingsModalOpen: () => void;
|
||||
onTriggersModalOpen: () => void;
|
||||
}
|
||||
|
||||
export function TopBar({
|
||||
localProjectName,
|
||||
projectNameError,
|
||||
onProjectNameChange,
|
||||
publishing,
|
||||
isLive,
|
||||
showCopySuccess,
|
||||
canUndo,
|
||||
canRedo,
|
||||
showCopilot,
|
||||
onUndo,
|
||||
onRedo,
|
||||
onDownloadJSON,
|
||||
onPublishWorkflow,
|
||||
onChangeMode,
|
||||
onRevertToLive,
|
||||
onToggleCopilot,
|
||||
onSettingsModalOpen,
|
||||
onTriggersModalOpen,
|
||||
}: TopBarProps) {
|
||||
return (
|
||||
<div className="rounded-xl bg-white/70 dark:bg-zinc-800/70 shadow-sm backdrop-blur-sm border border-zinc-200 dark:border-zinc-800 px-5 py-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="workflow-version-selector flex items-center gap-4 px-2 text-gray-800 dark:text-gray-100">
|
||||
{/* Project Name Editor */}
|
||||
<div className="flex flex-col min-w-0 max-w-xs">
|
||||
<Input
|
||||
type="text"
|
||||
value={localProjectName}
|
||||
onChange={(e) => onProjectNameChange(e.target.value)}
|
||||
isInvalid={!!projectNameError}
|
||||
errorMessage={projectNameError}
|
||||
placeholder="Project name..."
|
||||
variant="bordered"
|
||||
size="sm"
|
||||
classNames={{
|
||||
base: "max-w-xs",
|
||||
input: "text-base font-semibold px-2",
|
||||
inputWrapper: "min-h-[28px] h-[28px] border-gray-200 dark:border-gray-700 px-0"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-4 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{publishing && <Spinner size="sm" />}
|
||||
{isLive && <div className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1.5">
|
||||
<RadioIcon size={16} />
|
||||
Live workflow
|
||||
</div>}
|
||||
{!isLive && <div className="bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400 px-2 py-1 rounded-md text-xs font-medium flex items-center gap-1.5">
|
||||
<PenLine size={16} />
|
||||
Draft workflow
|
||||
</div>}
|
||||
|
||||
{/* Download JSON icon button, with tooltip, to the left of the menu */}
|
||||
<Tooltip content="Download Assistant JSON">
|
||||
<button
|
||||
onClick={onDownloadJSON}
|
||||
className="p-1.5 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
|
||||
aria-label="Download JSON"
|
||||
type="button"
|
||||
>
|
||||
<DownloadIcon size={20} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{showCopySuccess && <div className="flex items-center gap-2">
|
||||
<div className="text-green-500">Copied to clipboard</div>
|
||||
</div>}
|
||||
<div className="flex items-center gap-2">
|
||||
{isLive && <div className="flex items-center gap-2">
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2">
|
||||
<AlertTriangle size={16} />
|
||||
This version is locked. Changes applied will not be reflected.
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{!isLive && <>
|
||||
<button
|
||||
className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
|
||||
title="Undo"
|
||||
disabled={!canUndo}
|
||||
onClick={onUndo}
|
||||
>
|
||||
<UndoIcon size={16} />
|
||||
</button>
|
||||
<button
|
||||
className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
|
||||
title="Redo"
|
||||
disabled={!canRedo}
|
||||
onClick={onRedo}
|
||||
>
|
||||
<RedoIcon size={16} />
|
||||
</button>
|
||||
</>}
|
||||
|
||||
{/* Deploy CTA - always visible */}
|
||||
<div className="flex">
|
||||
<Button
|
||||
variant="solid"
|
||||
size="md"
|
||||
onPress={onPublishWorkflow}
|
||||
className="gap-2 px-4 bg-green-600 hover:bg-green-700 text-white font-semibold text-sm rounded-r-none"
|
||||
startContent={<RocketIcon size={16} />}
|
||||
data-tour-target="deploy"
|
||||
>
|
||||
Deploy
|
||||
</Button>
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button
|
||||
variant="solid"
|
||||
size="md"
|
||||
className="min-w-0 px-2 bg-green-600 hover:bg-green-700 border-l-1 border-green-500 text-white font-semibold text-sm rounded-l-none"
|
||||
>
|
||||
<ChevronDownIcon size={14} />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Deploy actions">
|
||||
<DropdownItem
|
||||
key="settings"
|
||||
startContent={<SettingsIcon size={16} />}
|
||||
onPress={onSettingsModalOpen}
|
||||
>
|
||||
API & SDK settings
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="manage-triggers"
|
||||
startContent={<ZapIcon size={16} />}
|
||||
onPress={onTriggersModalOpen}
|
||||
>
|
||||
Manage triggers
|
||||
</DropdownItem>
|
||||
{!isLive ? (
|
||||
<>
|
||||
<DropdownItem
|
||||
key="view-live"
|
||||
startContent={<RadioIcon size={16} />}
|
||||
onPress={() => onChangeMode('live')}
|
||||
>
|
||||
View live version
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="reset-to-live"
|
||||
startContent={<AlertTriangle size={16} />}
|
||||
onPress={onRevertToLive}
|
||||
className="text-red-600 dark:text-red-400"
|
||||
>
|
||||
Reset to live version
|
||||
</DropdownItem>
|
||||
</>
|
||||
) : null}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
{isLive && <div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="solid"
|
||||
size="md"
|
||||
onPress={() => onChangeMode('draft')}
|
||||
className="gap-2 px-4 bg-gray-600 hover:bg-gray-700 text-white font-semibold text-sm"
|
||||
>
|
||||
Switch to draft
|
||||
</Button>
|
||||
</div>}
|
||||
|
||||
{!isLive && <Button
|
||||
variant="solid"
|
||||
size="md"
|
||||
onPress={onToggleCopilot}
|
||||
className="gap-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm"
|
||||
startContent={showCopilot ? null : <span className="text-indigo-300">✨</span>}
|
||||
>
|
||||
{showCopilot ? "Hide Skipper" : "Skipper"}
|
||||
</Button>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -299,6 +299,7 @@ export function TriggersModal({
|
|||
tools={[]} // Empty array since we're not using this for tools
|
||||
onSelectToolkit={handleSelectToolkit}
|
||||
initialToolkitSlug={null}
|
||||
filterByTriggers={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ import { InputField } from "@/app/lib/components/input-field";
|
|||
import { VoiceSection } from "../config/components/voice";
|
||||
import { ChatWidgetSection } from "../config/components/project";
|
||||
import { TriggersModal } from "./components/TriggersModal";
|
||||
import { TopBar } from "./components/TopBar";
|
||||
|
||||
enablePatches();
|
||||
|
||||
|
|
@ -1221,161 +1222,31 @@ export function WorkflowEditor({
|
|||
onSelectTool: handleSelectTool,
|
||||
onSelectPrompt: handleSelectPrompt,
|
||||
}}>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<div className="shrink-0 flex justify-between items-center pb-6">
|
||||
<div className="workflow-version-selector flex items-center gap-4 px-2 text-gray-800 dark:text-gray-100">
|
||||
{/* Project Name Editor */}
|
||||
<div className="flex flex-col min-w-0 max-w-xs">
|
||||
<InputField
|
||||
type="text"
|
||||
value={localProjectName}
|
||||
onChange={handleProjectNameChange}
|
||||
error={projectNameError}
|
||||
placeholder="Project name..."
|
||||
className="text-lg font-semibold !min-h-[24px] !py-0.5 !border !border-gray-200 dark:!border-gray-700 !rounded-lg"
|
||||
inline={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{state.present.publishing && <Spinner size="sm" />}
|
||||
{isLive && <div className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2">
|
||||
<RadioIcon size={16} />
|
||||
Live workflow
|
||||
</div>}
|
||||
{!isLive && <div className="bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400 px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2">
|
||||
<PenLine size={16} />
|
||||
Draft workflow
|
||||
</div>}
|
||||
|
||||
{/* Download JSON icon button, with tooltip, to the left of the menu */}
|
||||
<Tooltip content="Download Assistant JSON">
|
||||
<button
|
||||
onClick={handleDownloadJSON}
|
||||
className="p-1.5 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
|
||||
aria-label="Download JSON"
|
||||
type="button"
|
||||
>
|
||||
<DownloadIcon size={20} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{showCopySuccess && <div className="flex items-center gap-2">
|
||||
<div className="text-green-500">Copied to clipboard</div>
|
||||
</div>}
|
||||
<div className="flex items-center gap-2">
|
||||
{isLive && <div className="flex items-center gap-2">
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2">
|
||||
<AlertTriangle size={16} />
|
||||
This version is locked. Changes applied will not be reflected.
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{!isLive && <>
|
||||
<button
|
||||
className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
|
||||
title="Undo"
|
||||
disabled={state.currentIndex <= 0}
|
||||
onClick={() => dispatch({ type: "undo" })}
|
||||
>
|
||||
<UndoIcon size={16} />
|
||||
</button>
|
||||
<button
|
||||
className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
|
||||
title="Redo"
|
||||
disabled={state.currentIndex >= state.patches.length}
|
||||
onClick={() => dispatch({ type: "redo" })}
|
||||
>
|
||||
<RedoIcon size={16} />
|
||||
</button>
|
||||
</>}
|
||||
|
||||
{/* Deploy CTA - always visible */}
|
||||
<div className="flex">
|
||||
<Button
|
||||
variant="solid"
|
||||
size="md"
|
||||
onPress={handlePublishWorkflow}
|
||||
className="gap-2 px-4 bg-green-600 hover:bg-green-700 text-white font-semibold text-sm rounded-r-none"
|
||||
startContent={<RocketIcon size={16} />}
|
||||
data-tour-target="deploy"
|
||||
>
|
||||
Deploy
|
||||
</Button>
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button
|
||||
variant="solid"
|
||||
size="md"
|
||||
className="min-w-0 px-2 bg-green-600 hover:bg-green-700 border-l-1 border-green-500 text-white font-semibold text-sm rounded-l-none"
|
||||
>
|
||||
<ChevronDownIcon size={14} />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Deploy actions">
|
||||
<DropdownItem
|
||||
key="settings"
|
||||
startContent={<SettingsIcon size={16} />}
|
||||
onPress={onSettingsModalOpen}
|
||||
>
|
||||
API & SDK settings
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="manage-triggers"
|
||||
startContent={<ZapIcon size={16} />}
|
||||
onPress={onTriggersModalOpen}
|
||||
>
|
||||
Manage triggers
|
||||
</DropdownItem>
|
||||
{!isLive ? (
|
||||
<>
|
||||
<DropdownItem
|
||||
key="view-live"
|
||||
startContent={<RadioIcon size={16} />}
|
||||
onPress={() => onChangeMode('live')}
|
||||
>
|
||||
View live version
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="reset-to-live"
|
||||
startContent={<AlertTriangle size={16} />}
|
||||
onPress={handleRevertToLive}
|
||||
className="text-red-600 dark:text-red-400"
|
||||
>
|
||||
Reset to live version
|
||||
</DropdownItem>
|
||||
</>
|
||||
) : null}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
{isLive && <div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="solid"
|
||||
size="md"
|
||||
onPress={() => onChangeMode('draft')}
|
||||
className="gap-2 px-4 bg-gray-600 hover:bg-gray-700 text-white font-semibold text-sm"
|
||||
>
|
||||
Switch to draft
|
||||
</Button>
|
||||
</div>}
|
||||
|
||||
{!isLive && <Button
|
||||
variant="solid"
|
||||
size="md"
|
||||
onPress={() => setShowCopilot(!showCopilot)}
|
||||
className="gap-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm"
|
||||
startContent={showCopilot ? null : <Sparkles size={16} />}
|
||||
>
|
||||
{showCopilot ? "Hide Skipper" : "Skipper"}
|
||||
</Button>}
|
||||
</div>
|
||||
</div>
|
||||
<ResizablePanelGroup direction="horizontal" className="grow flex overflow-auto gap-1">
|
||||
<div className="h-full flex flex-col gap-5">
|
||||
{/* Top Bar - Isolated like sidebar */}
|
||||
<TopBar
|
||||
localProjectName={localProjectName}
|
||||
projectNameError={projectNameError}
|
||||
onProjectNameChange={handleProjectNameChange}
|
||||
publishing={state.present.publishing}
|
||||
isLive={isLive}
|
||||
showCopySuccess={showCopySuccess}
|
||||
canUndo={state.currentIndex > 0}
|
||||
canRedo={state.currentIndex < state.patches.length}
|
||||
showCopilot={showCopilot}
|
||||
onUndo={() => dispatch({ type: "undo" })}
|
||||
onRedo={() => dispatch({ type: "redo" })}
|
||||
onDownloadJSON={handleDownloadJSON}
|
||||
onPublishWorkflow={handlePublishWorkflow}
|
||||
onChangeMode={onChangeMode}
|
||||
onRevertToLive={handleRevertToLive}
|
||||
onToggleCopilot={() => setShowCopilot(!showCopilot)}
|
||||
onSettingsModalOpen={onSettingsModalOpen}
|
||||
onTriggersModalOpen={onTriggersModalOpen}
|
||||
/>
|
||||
|
||||
{/* Content Area */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 flex overflow-auto gap-1 rounded-xl bg-zinc-50 dark:bg-zinc-900">
|
||||
<ResizablePanel minSize={10} defaultSize={PANEL_RATIOS.entityList}>
|
||||
<div className="flex flex-col h-full">
|
||||
<EntityList
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default function AppLayout({ children, useAuth = false, useBilling = fals
|
|||
return (
|
||||
<div className="h-screen flex gap-5 p-5 bg-zinc-50 dark:bg-zinc-900">
|
||||
{/* Sidebar with improved shadow and blur */}
|
||||
<div className="overflow-hidden rounded-xl bg-white/70 dark:bg-zinc-800/70 shadow-sm backdrop-blur-sm">
|
||||
<div className="h-full overflow-hidden rounded-xl bg-white/70 dark:bg-zinc-800/70 shadow-sm backdrop-blur-sm">
|
||||
<Sidebar
|
||||
projectId={projectId ?? undefined}
|
||||
useAuth={useAuth}
|
||||
|
|
@ -53,8 +53,8 @@ export default function AppLayout({ children, useAuth = false, useBilling = fals
|
|||
</div>
|
||||
|
||||
{/* Main content area */}
|
||||
<main className="flex gap-2 flex-col flex-1 overflow-auto rounded-xl bg-white dark:bg-zinc-800 shadow-sm p-4">
|
||||
{billingPastDue && <div className="shrink-0">
|
||||
<main className="flex-1 h-full overflow-auto">
|
||||
{billingPastDue && <div className="shrink-0 mb-2">
|
||||
<div className="bg-red-50 text-red-500 px-2 py-1 text-sm rounded-md flex items-center gap-2">
|
||||
<span>Your subscription is past due. Please update your payment information to avoid losing access to your projects.</span>
|
||||
<Button
|
||||
|
|
@ -68,9 +68,7 @@ export default function AppLayout({ children, useAuth = false, useBilling = fals
|
|||
</Button>
|
||||
</div>
|
||||
</div>}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</div>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue