revamp config page + add api keys

apps/rowboat/app/actions.ts

@@ -1,10 +1,10 @@
 'use server';
 
 import { redirect } from "next/navigation";
-import { SimulationData, EmbeddingDoc, GetInformationToolResult, DataSource, PlaygroundChat, AgenticAPIChatRequest, AgenticAPIChatResponse, convertFromAgenticAPIChatMessages, WebpageCrawlResponse, Workflow, WorkflowAgent, CopilotAPIRequest, CopilotAPIResponse, CopilotMessage, CopilotWorkflow, convertToCopilotWorkflow, convertToCopilotApiMessage, convertToCopilotMessage, CopilotAssistantMessage, CopilotChatContext, convertToCopilotApiChatContext, Scenario, ClientToolCallRequestBody, ClientToolCallJwt, ClientToolCallRequest, WithStringId, Project, WorkflowTool, WorkflowPrompt } from "./lib/types";
+import { SimulationData, EmbeddingDoc, GetInformationToolResult, DataSource, PlaygroundChat, AgenticAPIChatRequest, AgenticAPIChatResponse, convertFromAgenticAPIChatMessages, WebpageCrawlResponse, Workflow, WorkflowAgent, CopilotAPIRequest, CopilotAPIResponse, CopilotMessage, CopilotWorkflow, convertToCopilotWorkflow, convertToCopilotApiMessage, convertToCopilotMessage, CopilotAssistantMessage, CopilotChatContext, convertToCopilotApiChatContext, Scenario, ClientToolCallRequestBody, ClientToolCallJwt, ClientToolCallRequest, WithStringId, Project, WorkflowTool, WorkflowPrompt, ApiKey } from "./lib/types";
 import { ObjectId, WithId } from "mongodb";
 import { generateObject, generateText, tool, embed } from "ai";
-import { dataSourcesCollection, embeddingsCollection, projectsCollection, webpagesCollection, agentWorkflowsCollection, scenariosCollection, projectMembersCollection } from "@/app/lib/mongodb";
+import { dataSourcesCollection, embeddingsCollection, projectsCollection, webpagesCollection, agentWorkflowsCollection, scenariosCollection, projectMembersCollection, apiKeysCollection } from "@/app/lib/mongodb";
 import { z } from 'zod';
 import { openai } from "@ai-sdk/openai";
 import FirecrawlApp, { ScrapeResponse } from '@mendable/firecrawl-js';
@@ -979,3 +979,93 @@ export async function executeClientTool(
     const result = await callClientToolWebhook(toolCall, projectId);
     return result;
 }
+
+export async function createApiKey(projectId: string): Promise<WithStringId<z.infer<typeof ApiKey>>> {
+    await projectAuthCheck(projectId);
+
+    // count existing keys
+    const count = await apiKeysCollection.countDocuments({ projectId });
+    if (count >= 3) {
+        throw new Error('Maximum number of API keys reached');
+    }
+
+    // create key
+    const key = crypto.randomBytes(32).toString('hex');
+    const doc: z.infer<typeof ApiKey> = {
+        projectId,
+        key,
+        createdAt: new Date().toISOString(),
+    };
+    await apiKeysCollection.insertOne(doc);
+    const { _id, ...rest } = doc as WithStringId<z.infer<typeof ApiKey>>;
+    return { ...rest, _id: _id.toString() };
+}
+
+export async function deleteApiKey(projectId: string, id: string) {
+    await projectAuthCheck(projectId);
+    await apiKeysCollection.deleteOne({ projectId, _id: new ObjectId(id) });
+}
+
+export async function listApiKeys(projectId: string): Promise<WithStringId<z.infer<typeof ApiKey>>[]> {
+    await projectAuthCheck(projectId);
+    const keys = await apiKeysCollection.find({ projectId }).toArray();
+    return keys.map(k => ({ ...k, _id: k._id.toString() }));
+}
+
+export async function updateProjectName(projectId: string, name: string) {
+    await projectAuthCheck(projectId);
+    await projectsCollection.updateOne({ _id: projectId }, { $set: { name } });
+    revalidatePath(`/projects/${projectId}`, 'layout');
+}
+
+export async function deleteProject(projectId: string) {
+    await projectAuthCheck(projectId);
+
+    // delete api keys
+    await apiKeysCollection.deleteMany({
+        projectId,
+    });
+
+    // delete embeddings
+    const sources = await dataSourcesCollection.find({
+        projectId,
+    }, {
+        projection: {
+            _id: true,
+        }
+    }).toArray();
+
+    const ids = sources.map(s => s._id);
+
+    // delete data sources
+    await embeddingsCollection.deleteMany({
+        sourceId: { $in: ids.map(i => i.toString()) },
+    });
+    await dataSourcesCollection.deleteMany({
+        _id: {
+            $in: ids,
+        }
+    });
+
+    // delete project members
+    await projectMembersCollection.deleteMany({
+        projectId,
+    });
+
+    // delete workflows
+    await agentWorkflowsCollection.deleteMany({
+        projectId,
+    });
+
+    // delete scenarios
+    await scenariosCollection.deleteMany({
+        projectId,
+    });
+
+    // delete project
+    await projectsCollection.deleteOne({
+        _id: projectId,
+    });
+
+    redirect('/projects');
+}

apps/rowboat/app/lib/components/copy-button.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { CopyIcon, CheckIcon } from "lucide-react";
+import { useState } from "react";
+
+export function CopyButton({
+    onCopy,
+    label,
+    successLabel,
+}: {
+    onCopy: () => void;
+    label: string;
+    successLabel: string;
+}) {
+    const [showCopySuccess, setShowCopySuccess] = useState(false);
+    const handleCopy = () => {
+        onCopy();
+        setShowCopySuccess(true);
+        setTimeout(() => {
+            setShowCopySuccess(false);
+        }, 500);
+    }
+    return <button onClick={handleCopy} className="0 text-gray-300 hover:text-gray-700 flex items-center gap-1 group">
+        {showCopySuccess ? (
+            <CheckIcon size={16} />
+        ) : (
+            <CopyIcon size={16} />
+        )}
+        <div className="text-xs hidden group-hover:block">
+            {showCopySuccess ? successLabel : label}
+        </div>
+    </button>
+}

apps/rowboat/app/lib/mongodb.ts

@@ -1,5 +1,5 @@
 import { MongoClient } from "mongodb";
-import { PlaygroundChat, DataSource, EmbeddingDoc, Project, Webpage, ChatClientId, Workflow, Scenario, ProjectMember } from "./types";
+import { PlaygroundChat, DataSource, EmbeddingDoc, Project, Webpage, ChatClientId, Workflow, Scenario, ProjectMember, ApiKey } from "./types";
 import { z } from 'zod';
 
 const client = new MongoClient(process.env["MONGODB_CONNECTION_STRING"] || "mongodb://localhost:27017");
@@ -12,3 +12,4 @@ export const projectMembersCollection = db.collection<z.infer<typeof ProjectMemb
 export const webpagesCollection =  db.collection<z.infer<typeof Webpage>>('webpages');
 export const agentWorkflowsCollection = db.collection<z.infer<typeof Workflow>>("agent_workflows");
 export const scenariosCollection = db.collection<z.infer<typeof Scenario>>("scenarios");
+export const apiKeysCollection = db.collection<z.infer<typeof ApiKey>>("api_keys");

apps/rowboat/app/lib/types.ts

@@ -109,6 +109,13 @@ export const ProjectMember = z.object({
     lastUpdatedAt: z.string().datetime(),
 });
 
+export const ApiKey = z.object({
+    projectId: z.string(),
+    key: z.string(),
+    createdAt: z.string().datetime(),
+    lastUsedAt: z.string().datetime().optional(),
+});
+
 export const GetInformationToolResultItem = z.object({
     title: z.string(),
     content: z.string(),

apps/rowboat/app/projects/[projectId]/config/app.tsx

@@ -1,49 +1,447 @@
 'use client';
 
 import { Metadata } from "next";
-import { Secret } from "./secret";
-import { Divider, Spinner } from "@nextui-org/react";
-import { useEffect, useState } from "react";
-import { Project } from "@/app/lib/types";
-import { getProjectConfig } from "@/app/actions";
-import { EmbedCode } from "./embed";
-import { WebhookUrl } from "./webhook-url";
-import { z } from 'zod';
+import { Spinner, Textarea, Button, Dropdown, DropdownMenu, DropdownItem, DropdownTrigger, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Input, useDisclosure } from "@nextui-org/react";
+import { ReactNode, useEffect, useState, useCallback } from "react";
+import { getProjectConfig, updateProjectName, updateWebhookUrl, createApiKey, deleteApiKey, listApiKeys, deleteProject, rotateSecret } from "@/app/actions";
+import { CopyButton } from "@/app/lib/components/copy-button";
+import { EditableField } from "@/app/lib/components/editable-field";
+import { EyeIcon, EyeOffIcon, CopyIcon, MoreVerticalIcon, PlusIcon, EllipsisVerticalIcon } from "lucide-react";
 
 export const metadata: Metadata = {
     title: "Project config",
 };
 
-export default function App({
+export function Section({
+    title,
+    children,
+}: {
+    title: string;
+    children: React.ReactNode;
+}) {
+    return <div className="w-full flex flex-col gap-4 border border-gray-200 p-4 rounded-md">
+        <h2 className="font-semibold pt-4">{title}</h2>
+        {children}
+    </div>;
+}
+
+export function SectionRow({
+    children,
+}: {
+    children: ReactNode;
+}) {
+    return <div className="flex flex-row items-center">{children}</div>;
+}
+
+export function LeftLabel({
+    label,
+}: {
+    label: string;
+}) {
+    return <div className="w-1/2">
+        <div className="text-gray-600 font-semibold text-right text-sm pr-2">{label}:</div>
+    </div>;
+}
+
+export function RightContent({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return <div className="w-1/2">{children}</div>;
+}
+
+export function BasicSettingsSection({
     projectId,
 }: {
     projectId: string;
 }) {
-    const [isLoading, setIsLoading] = useState(true);
-    const [project, setProject] = useState<z.infer<typeof Project> | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [projectName, setProjectName] = useState<string | null>(null);
 
     useEffect(() => {
-        let ignore = false;
-
-        async function fetchProjectConfig() {
-            setIsLoading(true);
-            const project = await getProjectConfig(projectId);
-            if (!ignore) {
-                setProject(project);
-                setIsLoading(false);
-            }
-        }
-        fetchProjectConfig();
-
-        return () => {
-            ignore = true;
-        };
+        setLoading(true);
+        getProjectConfig(projectId).then((project) => {
+            setProjectName(project?.name);
+            setLoading(false);
+        });
     }, [projectId]);
 
-    const standardEmbedCode = `<!-- RowBoat Chat Widget -->
+    async function updateName(name: string) {
+        setLoading(true);
+        await updateProjectName(projectId, name);
+        setProjectName(name);
+        setLoading(false);
+    }
+
+    return <Section title="Basic settings">
+        <SectionRow>
+            <LeftLabel label="Project name" />
+            <RightContent>
+                <div className="flex flex-row gap-2 items-center">
+                    {loading && <Spinner size="sm" />}
+                    {!loading && <EditableField
+                        value={projectName || ''}
+                        onChange={updateName}
+                    />}
+                </div>
+            </RightContent>
+        </SectionRow>
+
+        <SectionRow>
+            <LeftLabel label="Project ID" />
+            <RightContent>
+                <div className="flex flex-row gap-2 items-center">
+                    <div className="text-gray-600 text-sm font-mono">{projectId}</div>
+                    <CopyButton
+                        onCopy={() => {
+                            navigator.clipboard.writeText(projectId);
+                        }}
+                        label="Copy"
+                        successLabel="Copied"
+                    />
+                </div>
+            </RightContent>
+        </SectionRow>
+    </Section>;
+}
+
+function ApiKeyDisplay({ apiKey }: { apiKey: string }) {
+    const [isVisible, setIsVisible] = useState(false);
+
+    const formattedKey = isVisible ? apiKey : `${apiKey.slice(0, 2)}${'•'.repeat(5)}${apiKey.slice(-2)}`;
+
+    return (
+        <div className="flex flex-col gap-1">
+            <div className="text-sm font-mono break-all">{formattedKey}</div>
+            <div className="flex flex-row gap-2 items-center">
+                <button
+                    onClick={() => setIsVisible(!isVisible)}
+                    className="text-gray-300 hover:text-gray-700"
+                >
+                    {isVisible ? (
+                        <EyeOffIcon className="w-4 h-4" />
+                    ) : (
+                        <EyeIcon className="w-4 h-4" />
+                    )}
+                </button>
+                <CopyButton
+                    onCopy={() => {
+                        navigator.clipboard.writeText(apiKey);
+                    }}
+                    label="Copy"
+                    successLabel="Copied"
+                />
+            </div>
+        </div>
+    );
+}
+
+export function ApiKeysSection({
+    projectId,
+}: {
+    projectId: string;
+}) {
+    const [keys, setKeys] = useState<Array<{
+        _id: string;
+        key: string;
+        createdAt: string;
+    }>>([]);
+    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={<PlusIcon className="w-4 h-4" />}
+                    variant="flat"
+                    isDisabled={loading}
+                >
+                    Create API key
+                </Button>
+            </div>
+
+            {loading && <Spinner size="sm" />}
+            {!loading && <div className="border rounded-lg text-sm">
+                <div className="flex items-center border-b 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 last:border-b-0 p-4">
+                            <div className="flex-[3] p-2">
+                                <ApiKeyDisplay apiKey={key.key} />
+                            </div>
+                            <div className="flex-1 p-2">
+                                {new Date(key.createdAt).toLocaleDateString()}
+                            </div>
+                            <div className="flex-1 p-2">Never</div>
+                            <div className="w-10 p-2">
+                                <Dropdown>
+                                    <DropdownTrigger>
+                                        <button className="text-muted-foreground hover:text-foreground">
+                                            <EllipsisVerticalIcon size={16} />
+                                        </button>
+                                    </DropdownTrigger>
+                                    <DropdownMenu>
+                                        <DropdownItem
+                                            className="text-destructive"
+                                            onClick={() => 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,
+}: {
+    projectId: string;
+}) {
+    const [loading, setLoading] = useState(false);
+    const [hidden, setHidden] = useState(true);
+    const [secret, setSecret] = useState<string | null>(null);
+
+    const formattedSecret = hidden ? `${secret?.slice(0, 2)}${'•'.repeat(5)}${secret?.slice(-2)}` : secret;
+
+    useEffect(() => {
+        setLoading(true);
+        getProjectConfig(projectId).then((project) => {
+            setSecret(project.secret);
+            setLoading(false);
+        });
+    }, [projectId]);
+
+    const handleRotateSecret = async () => {
+        if (!confirm("Are you sure you want to rotate the secret? All existing signatures will become invalid.")) {
+            return;
+        }
+        setLoading(true);
+        try {
+            const newSecret = await rotateSecret(projectId);
+            setSecret(newSecret);
+        } catch (error) {
+            console.error('Failed to rotate secret:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return <Section title="Secret">
+        <p className="text-sm">
+            The project secret is used for:
+        </p>
+        <ul className="list-disc list-inside text-sm">
+            <li>Signing tool-call requests sent to your webhook</li>
+            <li>Signing user-data sent through the chat widget</li>
+        </ul>
+        <SectionRow>
+            <LeftLabel label="Project secret" />
+            <RightContent>
+                <div className="flex flex-row gap-2 items-center">
+                    {loading && <Spinner size="sm" />}
+                    {!loading && secret && <div className="flex flex-row gap-2 items-center">
+                        <div className="text-gray-600 text-sm font-mono break-all">
+                            {formattedSecret}
+                        </div>
+                        <button
+                            onClick={() => setHidden(!hidden)}
+                            className="text-gray-300 hover:text-gray-700 flex items-center gap-1 group"
+                        >
+                            {hidden ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />}
+                        </button>
+                        <CopyButton
+                            onCopy={() => {
+                                navigator.clipboard.writeText(secret);
+                            }}
+                            label="Copy"
+                            successLabel="Copied"
+                        />
+                        <Button
+                            size="sm"
+                            variant="flat"
+                            color="warning"
+                            onClick={handleRotateSecret}
+                            isDisabled={loading}
+                        >
+                            Rotate
+                        </Button>
+                    </div>}
+                </div>
+            </RightContent>
+        </SectionRow>
+    </Section>;
+}
+
+export function WebhookUrlSection({
+    projectId,
+}: {
+    projectId: string;
+}) {
+    const [loading, setLoading] = useState(false);
+    const [webhookUrl, setWebhookUrl] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        getProjectConfig(projectId).then((project) => {
+            setWebhookUrl(project.webhookUrl || null);
+            setLoading(false);
+        });
+    }, [projectId]);
+
+    async function update(url: string) {
+        setLoading(true);
+        await updateWebhookUrl(projectId, url);
+        setWebhookUrl(url);
+        setLoading(false);
+    }
+
+    function validate(url: string) {
+        try {
+            const parsedUrl = new URL(url);
+            if (parsedUrl.protocol !== 'https:') {
+                return { valid: false, errorMessage: 'URL must use HTTPS' };
+            }
+            return { valid: true };
+        } catch {
+            return { valid: false, errorMessage: 'Please enter a valid URL' };
+        }
+    }
+
+    return <Section title="Webhook URL">
+        <p className="text-sm">
+            Tool calls issued through the chat widget will be posted to this URL.
+        </p>
+        <SectionRow>
+            <LeftLabel label="Webhook URL" />
+            <RightContent>
+                <div className="flex flex-row gap-2 items-center">
+                    {loading && <Spinner size="sm" />}
+                    {!loading && <EditableField
+                        value={webhookUrl || ''}
+                        onChange={update}
+                        validate={validate}
+                    />}
+                </div>
+            </RightContent>
+        </SectionRow>
+    </Section>;
+}
+
+export function ChatWidgetSection({
+    projectId,
+}: {
+    projectId: string;
+}) {
+    const [loading, setLoading] = useState(false);
+    const [chatClientId, setChatClientId] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        getProjectConfig(projectId).then((project) => {
+            setChatClientId(project.chatClientId);
+            setLoading(false);
+        });
+    }, [projectId]);
+
+    const code = `<!-- RowBoat Chat Widget -->
 <script>
     window.ROWBOAT_CONFIG = {
-        clientId: '${project?.chatClientId}'
+        clientId: '${chatClientId}'
     };
     (function(d) {
         var s = d.createElement('script');
@@ -53,25 +451,122 @@ export default function App({
     })(document);
 </script>`;
 
-    const nextJsEmbedCode = `// Add this to your Next.js page or layout
-import Script from 'next/script'
+    return <Section title="Chat widget">
+        <p className="text-sm">
+            To use the chat widget, copy and paste this code snippet just before the closing &lt;/body&gt; tag of your website:
+        </p>
+        {loading && <Spinner size="sm" />}
+        {!loading && <Textarea
+            variant="bordered"
+            size="sm"
+            defaultValue={code}
+            className="max-w-full cursor-pointer font-mono"
+            readOnly
+            endContent={<CopyButton
+                onCopy={() => {
+                    navigator.clipboard.writeText(code);
+                }}
+                label="Copy"
+                successLabel="Copied"
+            />}
+        />}
+    </Section>;
+}
 
-export default function YourComponent() {
-  return (
-    <>
-      <Script id="rowboat-config">
-        {\`window.ROWBOAT_CONFIG = {
-          clientId: '${project?.chatClientId}'
-        };\`}
-      </Script>
-      <Script
-        src="https://chat.rowboatlabs.com/bootstrap.js"
-        strategy="lazyOnload"
-      />
-    </>
-  )
-}`
+export function DeleteProjectSection({
+    projectId,
+}: {
+    projectId: string;
+}) {
+    const [loading, setLoading] = useState(false);
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [projectName, setProjectName] = useState("");
+    const [projectNameInput, setProjectNameInput] = useState("");
+    const [confirmationInput, setConfirmationInput] = useState("");
     
+    const isValid = projectNameInput === projectName && confirmationInput === "delete project";
+
+    useEffect(() => {
+        setLoading(true);
+        getProjectConfig(projectId).then((project) => {
+            setProjectName(project.name);
+            setLoading(false);
+        });
+    }, [projectId]);
+
+    const handleDelete = async () => {
+        if (!isValid) return;
+        setLoading(true);
+        await deleteProject(projectId);
+        setLoading(false);
+    };
+
+    return (
+        <Section title="Delete project">
+            {loading && <Spinner size="sm" />}
+            {!loading && <div className="flex flex-col gap-4">
+                <p className="text-sm">
+                    Deleting a project will permanently remove all associated data, including workflows, sources, and API keys.
+                    This action cannot be undone.
+                </p>
+                <div>
+                    <Button 
+                        color="danger" 
+                        size="sm"
+                        onPress={onOpen}
+                        isDisabled={loading}
+                        isLoading={loading}
+                    >
+                        Delete project
+                    </Button>
+                </div>
+
+                <Modal isOpen={isOpen} onClose={onClose}>
+                    <ModalContent>
+                        <ModalHeader>Delete Project</ModalHeader>
+                        <ModalBody>
+                            <div className="flex flex-col gap-4">
+                                <p>
+                                    This action cannot be undone. Please type in the following to confirm:
+                                </p>
+                                <Input
+                                    label="Project name"
+                                    placeholder={projectName}
+                                    value={projectNameInput}
+                                    onChange={(e) => setProjectNameInput(e.target.value)}
+                                />
+                                <Input
+                                    label='Type "delete project" to confirm'
+                                    placeholder="delete project"
+                                    value={confirmationInput}
+                                    onChange={(e) => setConfirmationInput(e.target.value)}
+                                />
+                            </div>
+                        </ModalBody>
+                        <ModalFooter>
+                            <Button variant="light" onPress={onClose}>
+                                Cancel
+                            </Button>
+                            <Button 
+                                color="danger" 
+                                onPress={handleDelete}
+                                isDisabled={!isValid}
+                            >
+                                Delete Project
+                            </Button>
+                        </ModalFooter>
+                    </ModalContent>
+                </Modal>
+            </div>}
+        </Section>
+    );
+}
+
+export default function App({
+    projectId,
+}: {
+    projectId: string;
+}) {
     return <div className="flex flex-col h-full">
         <div className="shrink-0 flex justify-between items-center pb-4 border-b border-b-gray-100">
             <div className="flex flex-col">
@@ -79,45 +574,13 @@ export default function YourComponent() {
             </div>
         </div>
         <div className="grow overflow-auto py-4">
-            <div className="max-w-[768px] mx-auto">
-                {isLoading && <div className="flex items-center gap-1">
-                    <Spinner size="sm" />
-                    <div>Loading project config...</div>
-                </div>}
-                {!isLoading && project && <div className="flex flex-col gap-4">
-                    <h2 className="font-semibold">Credentials</h2>
-                    <Secret
-                        initialSecret={project.secret}
-                        projectId={projectId}
-                    />
-
-                    <Divider />
-
-                    <div className="flex flex-col gap-4">
-                        <h2 className="text-xl font-semibold">Add the chat widget to your website</h2>
-                        <p className="text-gray-600">Copy and paste this code snippet just before the closing &lt;/body&gt; tag of your website:</p>
-                        <EmbedCode key="standard-embed-code" embedCode={standardEmbedCode} />
-                    </div>
-
-                    <div className="flex flex-col gap-4">
-                        <h2 className="text-lg font-medium">Using Next.js?</h2>
-                        <p className="text-gray-600">If you&apos;re using Next.js, use this code instead:</p>
-                        <EmbedCode key="nextjs-embed-code" embedCode={nextJsEmbedCode} />
-                    </div>
-
-                    <Divider />
-
-                    <div>
-                        <h2 className="text-xl font-semibold">Webhook settings</h2>
-                        <p className="mb-4">
-                            You can configure a webhook that will respond to tool calls.
-                        </p>
-                        <WebhookUrl
-                            initialUrl={project?.webhookUrl}
-                            projectId={projectId}
-                        />
-                    </div>
-                </div>}
+            <div className="max-w-[768px] mx-auto flex flex-col gap-4">
+                <BasicSettingsSection projectId={projectId} />
+                <SecretSection projectId={projectId} />
+                <ApiKeysSection projectId={projectId} />
+                <WebhookUrlSection projectId={projectId} />
+                <ChatWidgetSection projectId={projectId} />
+                <DeleteProjectSection projectId={projectId} />
             </div>
         </div>
     </div>;

apps/rowboat/app/projects/[projectId]/config/embed.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Textarea, Button } from "@nextui-org/react";
-import { CheckIcon, CopyIcon } from 'lucide-react';
-
-interface EmbedCodeProps {
-    embedCode: string;
-}
-
-export function EmbedCode({ embedCode }: EmbedCodeProps) {
-    const [isCopied, setIsCopied] = React.useState(false);
-
-    const handleCopy = () => {
-        navigator.clipboard.writeText(embedCode);
-        setIsCopied(true);
-        setTimeout(() => setIsCopied(false), 1000);
-    };
-
-    return (
-        <div className="relative">
-            <Textarea
-                labelPlacement="outside"
-                variant="bordered"
-                defaultValue={embedCode}
-                className="max-w-full cursor-pointer"
-                readOnly
-                onClick={handleCopy}
-            />
-            <div className="absolute bottom-2 right-2">
-                <Button
-                    variant="flat"
-                    size="sm"
-                    onClick={handleCopy}
-                    isIconOnly
-                >
-                    {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
-                </Button>
-            </div>
-        </div>
-    );
-}

apps/rowboat/app/projects/[projectId]/config/secret.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import { Button, Input } from "@nextui-org/react";
-import { useState } from "react";
-import { rotateSecret } from "@/app/actions";
-import { CheckIcon, CopyIcon } from "lucide-react";
-
-export function Secret({
-    initialSecret,
-    projectId
-}: {
-    initialSecret: string,
-    projectId: string
-}) {
-    const getMaskedSecret = (secret: string) => {
-        if (!secret) return '';
-        if (secret.length <= 8) return secret;
-        return `${secret.slice(0, 4)}${'•'.repeat(16)}${secret.slice(-4)}`;
-    };
-
-    const [maskedSecret, setMaskedSecret] = useState(getMaskedSecret(initialSecret));
-    const [showNewSecret, setShowNewSecret] = useState<string | null>(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [showCopySuccess, setShowCopySuccess] = useState(false);
-
-    const handleRegenerate = async () => {
-        if (!window.confirm('Are you sure you want to regenerate the webhook secret? This will invalidate the current secret key immediately.')) {
-            return;
-        }
-        try {
-            setIsLoading(true);
-            const newSecret = await rotateSecret(projectId);
-            setShowNewSecret(newSecret);
-            setMaskedSecret(getMaskedSecret(newSecret));
-        } catch (error) {
-            console.error('Failed to regenerate webhook secret:', error);
-            // You might want to add a toast or error message here
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleCopy = async () => {
-        if (showNewSecret) {
-            await navigator.clipboard.writeText(showNewSecret);
-            setShowCopySuccess(true);
-            setTimeout(() => {
-                setShowCopySuccess(false);
-            }, 1500);
-        }
-    };
-
-    return (
-        <div className="mt-4">
-            <div className="text-sm text-gray-600 mb-2">Project Secret</div>
-            <div className="flex gap-2 items-center">
-                <Input
-                    value={showNewSecret || maskedSecret}
-                    readOnly
-                    variant="bordered"
-                    className="font-mono"
-                    endContent={
-                        showNewSecret ? (
-                            <Button
-                                isIconOnly
-                                variant="light"
-                                onClick={handleCopy}
-                            >
-                                {showCopySuccess ? (
-                                    <CheckIcon size={16} />
-                                ) : (
-                                    <CopyIcon size={16} />
-                                )}
-                            </Button>
-                        ) : null
-                    }
-                />
-                <Button
-                    color="primary"
-                    variant="flat"
-                    onClick={handleRegenerate}
-                    isLoading={isLoading}
-                >
-                    Regenerate
-                </Button>
-            </div>
-            {showNewSecret && (
-                <div className="text-sm text-red-600 mt-2">
-                    Make sure to copy your new secret key. It won&apos;t be shown again!
-                </div>
-            )}
-        </div>
-    );
-} 

apps/rowboat/app/projects/[projectId]/config/webhook-url.tsx

@@ -1,81 +0,0 @@
-'use client';
-
-import { Button, Input } from "@nextui-org/react";
-import { useState } from "react";
-import { updateWebhookUrl } from "@/app/actions";
-
-export function WebhookUrl({ 
-    initialUrl,
-    projectId 
-}: { 
-    initialUrl?: string,
-    projectId: string
-}) {
-    const [url, setUrl] = useState(initialUrl || '');
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [showSuccess, setShowSuccess] = useState(false);
-
-    const handleUpdate = async () => {
-        try {
-            setIsLoading(true);
-            setError(null);
-            setShowSuccess(false);
-            
-            // URL validation
-            let parsedUrl;
-            try {
-                parsedUrl = new URL(url);
-            } catch {
-                setError('Please enter a valid URL');
-                return;
-            }
-
-            // Ensure HTTPS scheme
-            if (parsedUrl.protocol !== 'https:') {
-                setError('URL must use HTTPS');
-                return;
-            }
-
-            await updateWebhookUrl(projectId, url);
-            setShowSuccess(true);
-            setTimeout(() => {
-                setShowSuccess(false);
-            }, 3000);
-        } catch (error) {
-            console.error('Failed to update webhook URL:', error);
-            setError('Failed to update webhook URL');
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    return (
-        <div className="flex flex-col gap-2">
-            <div className="flex gap-2 items-end">
-                <Input
-                    label="Webhook URL"
-                    labelPlacement="outside"
-                    placeholder="https://example.com/webhook"
-                    value={url}
-                    onChange={(e) => {
-                        setUrl(e.target.value);
-                        setError(null);
-                        setShowSuccess(false);
-                    }}
-                    className="flex-grow"
-                    isInvalid={!!error}
-                    errorMessage={error}
-                    description={showSuccess ? "Webhook URL updated successfully" : undefined}
-                />
-                <Button 
-                    color="primary"
-                    onClick={handleUpdate}
-                    isLoading={isLoading}
-                >
-                    Update
-                </Button>
-            </div>
-        </div>
-    );
-} 

apps/rowboat/app/projects/[projectId]/nav.tsx

@@ -4,8 +4,6 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import clsx from "clsx";
 import Menu from "./menu";
-import { Project, WithStringId } from "@/app/lib/types";
-import { z } from "zod";
 import { getProjectConfig } from "@/app/actions";
 import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
 
@@ -15,31 +13,14 @@ export function Nav({
     projectId: string;
 }) {
     const [collapsed, setCollapsed] = useState(false);
-    const [project, setProject] = useState<WithStringId<z.infer<typeof Project>>>({
-        _id: projectId,
-        name: projectId,
-        createdAt: "",
-        lastUpdatedAt: "",
-        createdByUserId: "",
-        secret: "",
-        chatClientId: "",
-    });
+    const [projectName, setProjectName] = useState<string | null>(null);
 
     useEffect(() => {
-        let ignore = false;
-
         async function getProject() {
             const project = await getProjectConfig(projectId);
-            if (ignore) {
-                return;
-            }
-            setProject(project);
+            setProjectName(project.name);
         }
         getProject();
-
-        return () => {
-            ignore = true;
-        };
     }, [projectId]);
 
     function toggleCollapse() {
@@ -56,14 +37,14 @@ export function Nav({
                 {collapsed && <ChevronsRightIcon size={16} className="m-auto" />}
             </button>
         </Tooltip>
-        {!collapsed && project && <div className="flex flex-col gap-1">
+        {!collapsed && <div className="flex flex-col gap-1">
             <Tooltip content="Change project" showArrow placement="bottom-end">
                 <Link className="relative group flex flex-col px-2 py-2 border border-gray-200 rounded-md hover:border-gray-500" href="/projects">
                     <div className="absolute top-[-7px] left-1 px-1 bg-gray-100 text-xs text-gray-400 group-hover:text-gray-600">
                         Project
                     </div>
                     <div className="truncate text-sm">
-                        {project.name}
+                        {projectName || projectId}
                     </div>
                 </Link>
             </Tooltip>

apps/rowboat/app/projects/[projectId]/playground/copy-as-json-button.tsx

@@ -1,28 +1,11 @@
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
+import { CopyButton } from "@/app/lib/components/copy-button";
 
 export function CopyAsJsonButton({ onCopy }: { onCopy: () => void }) {
-    const [showCopySuccess, setShowCopySuccess] = useState(false);
-
-    const handleCopyChat = () => {
-        onCopy();
-        setShowCopySuccess(true);
-        setTimeout(() => {
-            setShowCopySuccess(false);
-        }, 500);
-    };
-
-    return <button
-        onClick={handleCopyChat}
-        className="absolute top-0 right-0 text-gray-300 hover:text-gray-700 flex items-center gap-1 group"
-    >
-        {showCopySuccess ? (
-            <CheckIcon size={16} />
-        ) : (
-            <CopyIcon size={16} />
-        )}
-        <div className="text-xs hidden group-hover:block">
-            {showCopySuccess ? 'Copied' : 'Copy as JSON'}
-        </div>
-    </button>
+    return <div className="absolute top-0 right-0">
+        <CopyButton
+            onCopy={onCopy}
+            label="Copy as JSON"
+            successLabel="Copied"
+        />
+    </div>
 }