app/routes/ai-draft.tsx

Functions

Imports

It imports app/components/editor/frontmatter-fields.tsx, app/components/frame.tsx, app/lib/ai.server.ts, app/lib/content.server.ts, app/lib/context.ts, app/lib/projects.server.ts, app/lib/roles.ts, app/lib/voice.server.ts. No module of this repo imports it.

Source

1// One AI draft, read-only, beside the person's own. Using it is the person's decision: "Use as my
2// draft" puts its text in their working draft (autosave), where they edit it before anything reaches
3// the site. Nothing here writes to the site.
4
5import { useRef, useState } from "react";
6import { Form, Link, redirect, useNavigation } from "react-router";
7import { Banner } from "capsomer/react/banner";
8import { Button } from "capsomer/react/button";
9import { ConfirmDialog } from "capsomer/react/confirm-dialog";
10import { Empty } from "capsomer/react/empty";
11import { Panel } from "capsomer/react/panel";
12import { Row, RowList } from "capsomer/react/row-list";
13import { Segmented } from "capsomer/react/segmented";
14import { Status } from "capsomer/react/status";
15import { Time } from "capsomer/react/time";
16import { PageHead } from "capsomer/react/page-head";
17
18import { FrontmatterFields } from "~/components/editor/frontmatter-fields";
19import { RouterLink } from "~/components/frame";
20
21import { readAiDraft } from "~/lib/ai.server";
22import { autosave } from "~/lib/content.server";
23import { getEnv, getViewer } from "~/lib/context";
24import { requireSiteProject } from "~/lib/projects.server";
25import { can } from "~/lib/roles";
26import { checkAgainstPack, readVoicePack } from "~/lib/voice.server";
27
28import type { Route } from "./+types/ai-draft";
29
30export function meta() {
31  return [{ title: "AI draft · Carrel" }];
32}
33
34function draftId(value: string | undefined): number {
35  const id = Number(value);
36  if (!Number.isInteger(id) || id <= 0) throw new Response("Not found", { status: 404 });
37  return id;
38}
39
40export async function loader({ params, context }: Route.LoaderArgs) {
41  const env = getEnv(context);
42  const viewer = getViewer(context);
43  const project = await requireSiteProject(env.DB, viewer, params.project, "read");
44  const draft = await readAiDraft(env.DB, project, viewer, params.item, draftId(params.id));
45  return {
46    project: { slug: project.slug, name: project.name },
47    itemId: params.item,
48    draft: { id: draft.id, client: draft.client, note: draft.note, createdAt: draft.createdAt, source: draft.source, baseVersion: draft.baseVersion },
49    canEdit: can(project.role, "edit"),
50    // The writing checks against this project's voice pack, run on every view: the pack may have changed since it was saved.
51    checks: checkAgainstPack(await readVoicePack(env.DB, project), draft.source),
52  };
53}
54
55export async function action({ params, context }: Route.ActionArgs) {
56  const env = getEnv(context);
57  const viewer = getViewer(context);
58  const project = await requireSiteProject(env.DB, viewer, params.project, "edit");
59  const draft = await readAiDraft(env.DB, project, viewer, params.item, draftId(params.id));
60  await autosave(env.DB, project, viewer, params.item, { source: draft.source, baseVersion: draft.baseVersion });
61  return redirect(`/p/${project.slug}/e/${encodeURIComponent(params.item)}`);
62}
63
64export default function AiDraft({ loaderData }: Route.ComponentProps) {
65  const { project, itemId, draft, canEdit, checks } = loaderData;
66  const editor = `/p/${project.slug}/e/${encodeURIComponent(itemId)}`;
67  const busy = useNavigation().state !== "idle";
68  const [asking, setAsking] = useState<HTMLElement | null>(null);
69  const [view, setView] = useState<"rendered" | "source">("rendered");
70  const form = useRef<HTMLFormElement>(null);
71  return (
72    <div className="app-page">
73      <PageHead
74        renderLink={RouterLink}
75        crumbs={[{ label: project.name, href: `/p/${project.slug}` }, { label: itemId, href: editor }, { label: "AI draft" }]}
76        title={`AI draft from ${draft.client}`}
77        lead={
78          <>
79            Saved <Time at={draft.createdAt} format="exact" />
80            {draft.note ? ` · ${draft.note}` : ""}
81          </>
82        }
83        actions={
84          <>
85            {canEdit ? (
86              <Form method="post" ref={form}>
87                <Button
88                  type="submit"
89                  variant="primary"
90                  pending={busy}
91                  onClick={(event) => {
92                    event.preventDefault();
93                    setAsking(event.currentTarget);
94                  }}
95                >
96                  Use as my draft
97                </Button>
98              </Form>
99            ) : null}
100            <Link to={`${editor}/history?compare=ai&ai=${draft.id}`} className="cap-btn">
101              Compare with my draft
102            </Link>
103            <Link to={editor} className="cap-btn">
104              Back to my draft
105            </Link>
106          </>
107        }
108      />
109      <Banner tone="info">
110        Written by an AI session, beside your own draft. It has not changed your draft or the site. Using it replaces your working draft in Carrel with this text, which you then edit
111        and save to the site as usual.
112      </Banner>
113      <FrontmatterFields source={draft.source} readOnly />
114      <Panel title="Writing checks" count={checks.issues.length} src="Against the project's Voice page" flush>
115        {checks.issues.length === 0 && !checks.voice ? (
116          <Empty kind="all-clear" flush title="Nothing flagged">
117            No stock AI phrasing found. Read it anyway: the checks catch habits, not whether it says something.
118          </Empty>
119        ) : (
120          <RowList label="Writing checks on this draft">
121            {checks.voice ? (
122              <Row
123                status={checks.voice.unlike ? <Status tone="warn">Unlike your posts</Status> : <Status tone="ok">Like your posts</Status>}
124                title={`Distance ${checks.voice.distance.toFixed(2)} from your published posts, flagged from ${checks.voice.threshold}`}
125                detail={`${checks.voice.furthest.join("; ")}.`}
126                href={`/p/${project.slug}/voice`}
127                renderLink={RouterLink}
128              />
129            ) : null}
130            {checks.issues.map((issue, i) => (
131              <Row key={i} title={issue.message} detail={issue.excerpt && !issue.message.includes(`"${issue.excerpt}"`) ? <q>{issue.excerpt}</q> : undefined} meta={issue.line ? `Line ${issue.line}` : undefined} />
132            ))}
133          </RowList>
134        )}
135      </Panel>
136      <Panel
137        title="The draft"
138        src={`${draft.source.trim().split(/\s+/).filter(Boolean).length.toLocaleString()} words`}
139        actions={<Segmented legend="View" hideLegend size="sm" value={view} onChange={setView} options={[{ value: "rendered", label: "As it reads" }, { value: "source", label: "Source" }]} />}
140      >
141        {view === "rendered" ? (
142          <div className="app-preview-pane">
143            {/* Sandboxed with no permissions, as the editor's preview is: the site's page runs no script. */}
144            <iframe title={`This AI draft as the site renders it`} src={`${editor}/ai/${draft.id}/preview`} sandbox="" />
145          </div>
146        ) : (
147          <pre className="app-ai-draft">{draft.source}</pre>
148        )}
149      </Panel>
150      <ConfirmDialog
151        open={asking !== null}
152        title="Use the AI draft as your draft?"
153        lead="Its text replaces your working draft in Carrel, and your current draft is not kept. Nothing is sent to the site: the text waits in the editor until you save it there."
154        body={[]}
155        action="Replace my draft"
156        returnTo={asking}
157        perform={async () => {
158          // Submitting the form itself does not press the button again, so it does not ask twice.
159          form.current?.requestSubmit();
160        }}
161        onClose={() => setAsking(null)}
162      />
163    </div>
164  );
165}