sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/workflows/$wfSlug/$formId.tsx

@@ -0,0 +1,542 @@
+import { ChatMessages } from "@/components/chat/chat";
+import { ChatProvider } from "@/components/chat/chat-context";
+import { Container } from "@/components/header/container";
+import { ConfirmationModal } from "@/components/modals/modals";
+import { NewSubmissionModal } from "@/components/modals/new-submission";
+import { SidebarRight } from "@/components/sidebar/sidebar-right";
+import { UnsavedBadge } from "@/components/unsaved-badge";
+import { catchNotFound } from "@/lib/not-found";
+import { membershipMiddleware } from "@/middleware";
+import { unnamedField } from "@sea/dal/defaults";
+import { cloneForm as cloneFormDAL, deleteForm as deleteFormDAL, getForm } from "@sea/dal/form";
+import { db, schema } from "@sea/db";
+import type { ChatModel } from "@sea/db/schema";
+import { chatModelSchema } from "@sea/db/schema";
+import type { Form, FormDerived, FormField } from "@sea/db/types";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuItemDumb,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { Highlighted } from "@sea/ui/components/ui/highlight";
+import { Input } from "@sea/ui/components/ui/input";
+import { Textarea } from "@sea/ui/components/ui/textarea";
+import { H1 } from "@sea/ui/components/ui/typography";
+import { invariant } from "@sea/util/invariant";
+import { subName } from "@sea/util/sub-name";
+import { useDebouncer } from "@tanstack/react-pacer/debouncer";
+import { createFileRoute, Link, useNavigate, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import type { UIMessage } from "ai";
+import { formatRelative } from "date-fns";
+import { and, asc, desc, eq, isNull, sql } from "drizzle-orm";
+import { ClipboardCopyIcon, CopyIcon, MoreHorizontalIcon, PlusIcon, TrashIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+import { useEffect, useState } from "react";
+import * as z from "zod/v4";
+import { GroupCard } from "./-components/group";
+
+const getFormFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formId: string }) => data)
+  .handler(async ({ context: { member }, data: { formId } }) => {
+    const { organizationId } = member;
+    const form = await db.query.form.findFirst({
+      where: and(
+        eq(schema.form.organizationId, organizationId),
+        isNull(schema.form.deletedAt),
+        eq(schema.form.id, formId),
+      ),
+      with: {
+        workflow: true,
+        submissions: {
+          with: { deal: true },
+          where: isNull(schema.submission.deletedAt),
+          orderBy: desc(schema.submission.updatedAt),
+        },
+        conversation: {
+          with: {
+            messages: { orderBy: asc(schema.message.createdAt) },
+          },
+        },
+        groups: {
+          orderBy: [
+            asc(schema.formGroup.order),
+            asc(schema.formGroup.createdAt),
+            asc(schema.formGroup.id),
+          ],
+          with: {
+            fields: {
+              orderBy: [
+                asc(schema.formField.order),
+                asc(schema.formField.createdAt),
+                asc(schema.formField.id),
+              ],
+            },
+            derived: {
+              orderBy: [asc(schema.formDerived.name)],
+            },
+          },
+        },
+      },
+    });
+
+    if (!form) {
+      throw catchNotFound({ formId });
+    }
+
+    const { data: chatModelRaw } = chatModelSchema.safeParse(form.conversation.model);
+    const chatModel: ChatModel = chatModelRaw ?? "gpt-4.1";
+    const messageDraft = form.conversation.messages.find((m) => m.status === "draft")?.content;
+
+    return {
+      form: {
+        ...form,
+        conversation: {
+          ...form.conversation,
+          messages: form.conversation.messages.filter((m) => m.status === "sent"),
+        },
+      },
+      chatModel,
+      messageDraft,
+    };
+  });
+
+const updateUpdatedAtFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formId: string }) => data)
+  .handler(async ({ context: { member }, data: { formId } }) => {
+    await db
+      .update(schema.form)
+      .set({ updatedAt: new Date() })
+      .where(
+        and(eq(schema.form.id, formId), eq(schema.form.organizationId, member.organizationId)),
+      );
+  });
+
+const renameFormSchema = z.object({
+  name: z.string(),
+  hint: z.string(),
+});
+const renameFormFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .validator(({ id, formData }: { id: string; formData: FormData }) => {
+    const raw = Object.fromEntries(formData);
+    const data = renameFormSchema.parse(raw);
+    return { ...data, id };
+  })
+  .handler(async ({ context: { member }, data: { id, name, hint } }) => {
+    await db
+      .update(schema.form)
+      .set({ name, hint })
+      .where(and(eq(schema.form.organizationId, member.organizationId), eq(schema.form.id, id)));
+  });
+
+const addGroupFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formId: string }) => data)
+  .handler(async ({ context: { member }, data: { formId } }) => {
+    const form = await getForm({ member, formId });
+    const [max] = await db
+      .select({ max: sql<number>`max(${schema.formGroup.order})::int` })
+      .from(schema.formGroup)
+      .where(eq(schema.formGroup.formId, formId));
+    const order = max ? max.max + 1 : 0;
+    const [group] = await db
+      .insert(schema.formGroup)
+      .values({
+        formId: form.id,
+        name: "New group",
+        order,
+      })
+      .returning();
+    invariant(group);
+    await db.insert(schema.formField).values({
+      formGroupId: group.id,
+      name: unnamedField,
+      order: 0,
+    });
+  });
+
+const cloneFormFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formId: string }) => data)
+  .handler(async ({ context: { member }, data: { formId } }) => {
+    const { newForm } = await cloneFormDAL({ member, formId });
+    return { formId: newForm.id };
+  });
+
+const deleteFormFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formId: string }) => data)
+  .handler(async ({ context: { member }, data: { formId } }) => {
+    await deleteFormDAL({ member, formId });
+  });
+
+const storeMessageDraftFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { conversationId: string; content: string }) => data)
+  .handler(async ({ context: { member }, data: { conversationId, content } }) => {
+    const conversation = await db.query.conversation.findFirst({
+      where: and(
+        eq(schema.conversation.organizationId, member.organizationId),
+        eq(schema.conversation.id, conversationId),
+        isNull(schema.conversation.deletedAt),
+      ),
+    });
+    invariant(conversation);
+    await db
+      .insert(schema.message)
+      .values({
+        id: nanoid(),
+        conversationId,
+        role: "user",
+        status: "draft",
+        content,
+      })
+      .onConflictDoUpdate({
+        target: [schema.message.conversationId, schema.message.status],
+        targetWhere: eq(schema.message.status, "draft"),
+        set: { content },
+      });
+  });
+
+export const Route = createFileRoute("/_authed/_app/workflows/$wfSlug/$formId")({
+  component: RouteComponent,
+  loader: ({ params: { formId } }) => getFormFn({ data: { formId } }),
+});
+
+function RouteComponent() {
+  const router = useRouter();
+  const navigate = useNavigate();
+  const [unsaved, setUnsaved] = useState(false);
+  const { wfSlug, formId } = Route.useParams();
+  const { form, chatModel, messageDraft } = Route.useLoaderData();
+
+  // These three blocks control effectively all of the state for the form groups
+  // and the fields within them. This has become a bit complex with optimstic stuff,
+  // complex re-ordering and needing to invalidate stuff from LLM chats etc.
+  // Probably time to switch to a library to manage this...
+  const [groupFields, setGroupFields] = useState<Record<string, FormField[]>>(() =>
+    form.groups.reduce(
+      (acc, group) => {
+        acc[group.id] = group.fields;
+        return acc;
+      },
+      {} as Record<string, FormField[]>,
+    ),
+  );
+
+  const [groupDerived, setGroupDerived] = useState<Record<string, FormDerived[]>>(() =>
+    form.groups.reduce(
+      (acc, group) => {
+        acc[group.id] = group.derived;
+        return acc;
+      },
+      {} as Record<string, FormDerived[]>,
+    ),
+  );
+
+  const storeMessageDraft = async (content: string) => {
+    await storeMessageDraftFn({ data: { conversationId: form.conversation.id, content } });
+  };
+
+  const debouncedUpdateUpdatedAt = useDebouncer(() => updateUpdatedAtFn({ data: { formId } }), {
+    wait: 5_000,
+  });
+
+  useEffect(() => {
+    if (unsaved === false) {
+      // Whenever unsaved ticks over to false, update the
+      // submission.updatedAt value
+      debouncedUpdateUpdatedAt.maybeExecute();
+    }
+  }, [unsaved]);
+
+  useEffect(() => {
+    // As GroupCard doesn't automatically notice the change in form
+    // when invalidate() is called, this function notices the top-level change
+    // and drills down the state change.
+    const newGroupFields = form.groups.reduce(
+      (acc, group) => {
+        acc[group.id] = group.fields;
+        return acc;
+      },
+      {} as Record<string, FormField[]>,
+    );
+    setGroupFields(newGroupFields);
+  }, [form]);
+
+  useEffect(() => {
+    // As GroupCard doesn't automatically notice the change in form
+    // when invalidate() is called, this function notices the top-level change
+    // and drills down the state change.
+    const newGroupDerived = form.groups.reduce(
+      (acc, group) => {
+        acc[group.id] = group.derived;
+        return acc;
+      },
+      {} as Record<string, FormDerived[]>,
+    );
+    setGroupDerived(newGroupDerived);
+  }, [form]);
+
+  const setGroupFieldsForId = (groupId: string, updater: (prev: FormField[]) => FormField[]) => {
+    setGroupFields((prev) => ({
+      ...prev,
+      [groupId]: updater(prev[groupId] || []),
+    }));
+  };
+
+  const setGroupDerivedForId = (
+    groupId: string,
+    updater: (prev: FormDerived[]) => FormDerived[],
+  ) => {
+    setGroupDerived((prev) => ({
+      ...prev,
+      [groupId]: updater(prev[groupId] || []),
+    }));
+  };
+
+  const label = form?.name ?? "New form";
+  const crumbs = [
+    { href: "workflows", label: "Workflows" },
+    { href: wfSlug, label: form.workflow.name },
+    { href: formId, label },
+  ];
+
+  const addGroup = async () => {
+    await addGroupFn({ data: { formId: form.id } });
+    router.invalidate();
+  };
+
+  const handleCloneForm = async () => {
+    const { formId: newFormId } = await cloneFormFn({
+      data: { formId: form.id },
+    });
+    navigate({ to: "/redirects/forms/$id", params: { id: newFormId } });
+  };
+
+  const handleDeleteForm = async () => {
+    await deleteFormFn({ data: { formId: form.id } });
+    navigate({ to: "/workflows/$wfSlug", params: { wfSlug } });
+  };
+
+  const copyFormDefinition = async () => {
+    const formMeta: string[] = [`# ${form.name}`];
+    if (form.hint?.trim()) {
+      formMeta.push(form.hint.trim());
+    }
+
+    const groupSections = form.groups.map((group) => {
+      const groupLines: string[] = [`## ${group.name}`];
+
+      if (group.hint?.trim()) {
+        groupLines.push(`Hint: ${group.hint.trim()}`);
+      }
+
+      groupLines.push(`Collection: ${group.multi ? "Yes" : "No"}`);
+
+      const fieldLines = group.fields
+        .map((field) => {
+          const lines = [`- ${field.name}`];
+          lines.push(`  - Type: ${field.type ?? "string"}`);
+
+          if (field.hint?.trim()) {
+            lines.push(`  - Description: ${field.hint.trim()}`);
+          }
+
+          return lines.join("\n");
+        })
+        .filter(Boolean);
+
+      if (fieldLines.length > 0) {
+        groupLines.push("", fieldLines.join("\n"));
+      }
+
+      return groupLines.join("\n");
+    });
+    const formDefinition = [...formMeta, ...groupSections].filter(Boolean).join("\n\n");
+
+    try {
+      await navigator.clipboard.writeText(formDefinition);
+    } catch (error) {
+      // Clipboard access can fail (e.g. permissions, unsupported context);
+      // log for now so we have a hook for future UX or error reporting.
+      console.error("Failed to copy form definition to clipboard", error);
+    }
+  };
+
+  const sidebar = (
+    <SidebarRight className="border-none">
+      <ChatMessages
+        initInput={messageDraft ?? undefined}
+        conversationId={form.conversation.id}
+        chatModel={chatModel}
+        instructions="Why not try something like... 'please generate a form for historical revenue data capture'"
+        onInputChange={storeMessageDraft}
+        onInputBlur={() => {
+          router.invalidate();
+        }}
+      />
+    </SidebarRight>
+  );
+
+  return (
+    <ChatProvider
+      conversationId={form.conversation.id}
+      initMessages={form.conversation.messages as UIMessage[]}
+      chatType="form"
+    >
+      <Container crumbs={crumbs} sidebar={sidebar}>
+        <div className="flex items-center justify-between">
+          <div>
+            <RenameFormModal form={form} />
+            <p className="text-muted-foreground text-xs">{form.hint}</p>
+          </div>
+          <div className="flex flex-col gap-1">
+            <Link to="/workflows/$wfSlug" params={{ wfSlug: wfSlug }} className="text-primary">
+              {form.workflow.name}
+            </Link>
+            <UnsavedBadge unsaved={unsaved} />
+          </div>
+        </div>
+        <div className="flex items-center justify-end gap-2">
+          <DropdownMenu modal={true}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                aria-label="More actions"
+                aria-haspopup="menu"
+              >
+                <MoreHorizontalIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuGroup>
+                <DropdownMenuItem onClick={handleCloneForm}>
+                  <CopyIcon /> Clone form
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={copyFormDefinition}>
+                  <ClipboardCopyIcon /> Copy to clipboard
+                </DropdownMenuItem>
+                <DropdownMenuItemDumb>
+                  <ConfirmationModal
+                    title="Confirmation"
+                    message={`Are you sure you want to delete the ${form.name} form?`}
+                    action={handleDeleteForm}
+                  >
+                    <div className="flex w-full items-center gap-2">
+                      <TrashIcon /> Delete form
+                    </div>
+                  </ConfirmationModal>
+                </DropdownMenuItemDumb>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" disabled={form.submissions.length === 0}>
+                Existing submissions ({form.submissions.length})
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-48">
+              {form.submissions.map((submission) => (
+                <DropdownMenuItem className="cursor-pointer" asChild>
+                  <Link
+                    to="/redirects/submissions/$id"
+                    params={{
+                      id: submission.id,
+                    }}
+                    className="flex flex-col items-start"
+                  >
+                    <div className="text-sm">{submission.deal.name}</div>
+                    <div>
+                      <Highlighted>{subName(submission)}</Highlighted>
+                    </div>
+                    <div className="text-muted-foreground text-xs">
+                      {formatRelative(submission.createdAt, new Date())}
+                    </div>
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <NewSubmissionModal formId={form.id} size="sm" />
+        </div>
+        {form.groups.map((group) => (
+          <GroupCard
+            key={group.id}
+            group={group}
+            setUnsaved={setUnsaved}
+            fields={groupFields[group.id] || []}
+            setFields={setGroupFieldsForId.bind(null, group.id)}
+            derived={groupDerived[group.id] || []}
+            setDerived={setGroupDerivedForId.bind(null, group.id)}
+            lastField={group.order === form.groups.length - 1}
+          />
+        ))}
+        <div className="flex flex-row flex-wrap items-center justify-between gap-2">
+          <Button onClick={addGroup}>
+            <PlusIcon /> New group
+          </Button>
+        </div>
+      </Container>
+    </ChatProvider>
+  );
+}
+
+function RenameFormModal({ form }: { form: Form }) {
+  const router = useRouter();
+  return (
+    <Dialog>
+      <DialogTrigger className="w-fit">
+        <H1 className="w-fit cursor-pointer hover:underline">{form.name}</H1>
+      </DialogTrigger>
+      <DialogContent>
+        <form
+          onSubmit={async (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            await renameFormFn({ data: { id: form.id, formData } });
+            router.invalidate();
+          }}
+          className="grid gap-4"
+        >
+          <DialogHeader>
+            <DialogTitle>Edit form</DialogTitle>
+          </DialogHeader>
+          <Input name="name" placeholder="Name" defaultValue={form.name} />
+          <Textarea
+            name="hint"
+            placeholder="Data extraction hints for form"
+            defaultValue={form.hint}
+          />
+          <DialogFooter>
+            <DialogClose>Cancel</DialogClose>
+            <DialogClose asChild>
+              <Button type="submit" variant="secondary">
+                Save
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/apps/main/src/routes/_authed/_app/workflows/$wfSlug/-components/derived.tsx

@@ -0,0 +1,154 @@
+import { useUpdateState } from "@/hooks/use-update-state";
+import * as zfd from "@/lib/zfd";
+import { membershipMiddleware } from "@/middleware";
+import { unnamedField } from "@sea/dal/defaults";
+import { getFormGroup } from "@sea/dal/form";
+import { db, schema } from "@sea/db";
+import type { FormDerived } from "@sea/db/types";
+import { Button } from "@sea/ui/components/ui/button";
+import { Input } from "@sea/ui/components/ui/input";
+import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
+import { useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { and, eq } from "drizzle-orm";
+import { DotIcon, XIcon } from "lucide-react";
+import { useRef } from "react";
+import { toast } from "sonner";
+import * as z from "zod/v4";
+
+const updateDerivedSchema = zfd.formData({
+  name: zfd.text(z.string().default(unnamedField)),
+  prompt: zfd.text(z.string().default("")),
+});
+const updateDerivedFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator(
+    (data: { formId: string; formGroupId: string; formFieldId: string; formData: FormData }) => {
+      const parsed = updateDerivedSchema.parse(data.formData);
+      return { ...parsed, ...data };
+    },
+  )
+  .handler(
+    async ({ context: { member }, data: { formId, formGroupId, formFieldId, name, prompt } }) => {
+      // validate access to the group
+      const group = await getFormGroup({ member, formId, formGroupId });
+      await db
+        .update(schema.formDerived)
+        .set({ name, prompt })
+        .where(
+          and(eq(schema.formDerived.formGroupId, group.id), eq(schema.formDerived.id, formFieldId)),
+        );
+    },
+  );
+
+const deleteDerivedFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { formId: string; formGroupId: string; formDerivedId: string }) => data)
+  .handler(async ({ context: { member }, data: { formId, formGroupId, formDerivedId } }) => {
+    // validate access to the group
+    const group = await getFormGroup({ member, formId, formGroupId });
+    try {
+      await db
+        .delete(schema.formDerived)
+        .where(
+          and(
+            eq(schema.formDerived.formGroupId, group.id),
+            eq(schema.formDerived.id, formDerivedId),
+          ),
+        );
+      return { deleted: true };
+    } catch (_) {
+      return { deleted: false };
+    }
+  });
+
+export function DerivedLine({
+  derived,
+  formId,
+  setUnsaved,
+}: {
+  derived: FormDerived;
+  formId: string;
+  setUnsaved: (u: boolean) => void;
+}) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const router = useRouter();
+  const { formGroupId, id: formFieldId } = derived;
+
+  const [name, setName] = useUpdateState<string>(derived.name);
+  const [prompt, setPrompt] = useUpdateState<string>(derived.prompt);
+
+  const updateName = (v: string) => {
+    setName(v);
+    update();
+  };
+  const updatePrompt = (v: string) => {
+    setPrompt(v);
+    update();
+  };
+
+  const update = () => {
+    setUnsaved(true);
+    updateDebounced();
+  };
+
+  const updateDebounced = useDebouncedCallback(
+    async () => {
+      const form = formRef.current;
+      if (!form) return;
+      const formData = new FormData(form);
+      await updateDerivedFn({ data: { formId, formGroupId, formFieldId, formData } });
+      router.invalidate();
+      setUnsaved(false);
+    },
+    { wait: 1000 },
+  );
+
+  const deleteField = async () => {
+    const { deleted } = await deleteDerivedFn({
+      data: { formId, formGroupId, formDerivedId: formFieldId },
+    });
+    if (deleted) {
+      router.invalidate();
+    } else {
+      toast.warning("Cannot delete this field as it is being used, clone the form instead");
+    }
+  };
+
+  return (
+    <div className="group dark:hover:bg-brand-950 -mr-6 -ml-6 px-4 py-2 hover:bg-gray-50">
+      <form ref={formRef}>
+        <div className="relative flex flex-row items-center gap-2">
+          <div className="items-center">
+            <DotIcon className="text-gray-400" size={16} />
+          </div>
+          <Input
+            name="name"
+            type="text"
+            value={name !== unnamedField ? name : ""}
+            placeholder="Derived field name..."
+            onChange={(e) => updateName(e.target.value)}
+            className="min-w-[20ch] shrink-0 basis-1/3 border-0 !shadow-none !ring-0"
+          />
+          <Input
+            name="prompt"
+            type="text"
+            placeholder="AI prompt..."
+            value={prompt}
+            onChange={(e) => updatePrompt(e.target.value)}
+            className="border-0 !shadow-none !ring-0"
+          />
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            onClick={deleteField}
+            className="invisible group-hover:visible"
+          >
+            <XIcon />
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}