app/routes/project.voice.tsx

Functions

Imports

It imports app/components/project-tabs.tsx, app/lib/context.ts, app/lib/projects.server.ts, app/lib/roles.ts, app/lib/sites.server.ts, app/lib/voice.server.ts. No module of this repo imports it.

Source

1// A site project's voice pack (voice.server.ts): what an AI session reads before it drafts a post here,
2// and what its drafts are checked against. The measures and excerpts come from the published posts; the
3// guide and the two word lists are the Owner's. Below them, the words the author keeps cutting from AI
4// drafts, offered for the list: the author adds one or sets it aside, and nothing is added on its own.
5
6import { Form, useNavigation } from "react-router";
7import { Banner } from "capsomer/react/banner";
8import { Button } from "capsomer/react/button";
9import { Empty } from "capsomer/react/empty";
10import { Field } from "capsomer/react/field";
11import { PageHead } from "capsomer/react/page-head";
12import { Panel } from "capsomer/react/panel";
13import { Row, RowList } from "capsomer/react/row-list";
14import { Time } from "capsomer/react/time";
15
16import { ProjectTabs } from "~/components/project-tabs";
17
18import { getEnv, getViewer } from "~/lib/context";
19import { requireSiteProject } from "~/lib/projects.server";
20import { can } from "~/lib/roles";
21import { siteEntry } from "~/lib/sites.server";
22import { briefOf, buildVoicePack, CUT_SUGGEST_AT, cutSuggestions, decideCut, listFrom, PACK_POSTS, readVoicePack, saveVoiceGuide } from "~/lib/voice.server";
23
24import type { Route } from "./+types/project.voice";
25
26export function meta({ loaderData: data }: Route.MetaArgs) {
27  return [{ title: data ? `Voice · ${data.project.name} · Carrel` : "Carrel" }];
28}
29
30export async function loader({ params, context }: Route.LoaderArgs) {
31  const env = getEnv(context);
32  const project = await requireSiteProject(env.DB, getViewer(context), params.project, "read");
33  const pack = await readVoicePack(env.DB, project);
34  return {
35    project: { slug: project.slug, name: project.name, site: siteEntry(project.site).name, mentions: can(project.role, "read_mentions") },
36    canManage: can(project.role, "manage"),
37    brief: briefOf(pack),
38    suggestions: await cutSuggestions(env.DB, project, pack),
39    limits: { posts: PACK_POSTS, cutAt: CUT_SUGGEST_AT },
40  };
41}
42
43export async function action({ params, request, context }: Route.ActionArgs) {
44  const env = getEnv(context);
45  const viewer = getViewer(context);
46  const form = await request.formData();
47  const intent = form.get("intent");
48  if (intent === "rebuild") {
49    const project = await requireSiteProject(env.DB, viewer, params.project, "read");
50    const pack = await buildVoicePack(env, project);
51    return { done: pack.profile ? `Rebuilt from ${pack.posts} published posts.` : `Read ${pack.posts} published posts: not enough text yet to measure (about 900 words).` };
52  }
53  const project = await requireSiteProject(env.DB, viewer, params.project, "manage");
54  if (intent === "save") {
55    await saveVoiceGuide(env.DB, project, {
56      guide: String(form.get("guide") ?? ""),
57      phrases: listFrom(String(form.get("phrases") ?? "")),
58      allow: listFrom(String(form.get("allow") ?? "")),
59    });
60    return { done: "Saved the guide and lists." };
61  }
62  if (intent === "add" || intent === "set-aside") {
63    const phrase = String(form.get("phrase") ?? "").trim();
64    if (!phrase) throw new Response("Bad request", { status: 400 });
65    await decideCut(env.DB, project, phrase, intent);
66    return { done: intent === "add" ? `Added "${phrase}" to the list.` : `Set "${phrase}" aside.` };
67  }
68  throw new Response("Bad request", { status: 400 });
69}
70
71export default function ProjectVoice({ loaderData, actionData }: Route.ComponentProps) {
72  const { project, canManage, brief, suggestions, limits } = loaderData;
73  const busy = useNavigation().state !== "idle";
74
75  return (
76    <div className="app-page">
77      <PageHead
78        title={project.name}
79        lead={`What an AI session reads before it drafts a post for ${project.site}, and what its drafts are checked against. Drafts are written from your own posts, and you still edit every one.`}
80      />
81
82      <ProjectTabs slug={project.slug} current="voice" mentions={project.mentions} />
83
84      {actionData?.done ? <Banner tone="ok">{actionData.done}</Banner> : null}
85
86      <Panel
87        title="From your published posts"
88        src={brief.builtAt ? `${brief.posts} posts` : "Not built yet"}
89        actions={
90          <Form method="post">
91            <Button type="submit" name="intent" value="rebuild" size="sm" pending={busy}>
92              Rebuild
93            </Button>
94          </Form>
95        }
96      >
97        {brief.builtAt ? (
98          <p>
99            Read from the newest {limits.posts} published posts, <Time at={brief.builtAt} />. Rebuild after publishing a few more.
100          </p>
101        ) : (
102          <p>Built from the newest {limits.posts} published posts the first time a session asks for it, or now with Rebuild.</p>
103        )}
104        {brief.measures.length > 0 ? (
105          <ul>
106            {brief.measures.map((m) => (
107              <li key={m}>{m}</li>
108            ))}
109          </ul>
110        ) : brief.builtAt ? (
111          <p>Not enough published text to measure yet: about 900 words are needed.</p>
112        ) : null}
113        {brief.excerpts.length > 0 ? (
114          <details>
115            <summary>The {brief.excerpts.length} excerpts a session writes from</summary>
116            {brief.excerpts.map((excerpt, i) => (
117              <blockquote key={i} className="app-voice-excerpt">
118                {excerpt}
119              </blockquote>
120            ))}
121          </details>
122        ) : null}
123      </Panel>
124
125      <Panel title="Your guide and lists" src={canManage ? "Yours to edit" : "The Owner edits these"}>
126        <Form method="post" className="app-fm" aria-label="Voice guide">
127          <Field label="Guide" help="Anything a session should know about how you write here: who reads it, what you never say, how you open and close.">
128            <textarea className="cap-input" name="guide" rows={6} defaultValue={brief.guide} readOnly={!canManage} />
129          </Field>
130          <Field label="Words and phrases to flag" help="One per line, on top of the shared list of stock AI phrasing.">
131            <textarea className="cap-input" name="phrases" rows={5} defaultValue={brief.phrases.join("\n")} readOnly={!canManage} />
132          </Field>
133          <Field label="Words to allow" help="One per line: words you use yourself that the shared list would flag.">
134            <textarea className="cap-input" name="allow" rows={3} defaultValue={brief.allow.join("\n")} readOnly={!canManage} />
135          </Field>
136          {canManage ? (
137            <div className="app-actions">
138              <Button type="submit" name="intent" value="save" variant="primary" pending={busy}>
139                Save
140              </Button>
141            </div>
142          ) : null}
143        </Form>
144      </Panel>
145
146      <Panel title="Words you keep cutting" count={suggestions.length} src={`Cut from AI drafts of ${limits.cutAt} or more posts, and kept in none`} flush>
147        {suggestions.length === 0 ? (
148          <Empty kind="nothing-yet" flush title="Nothing yet">
149            When you publish a post an AI session drafted, Carrel notes the words you cut. One you cut from {limits.cutAt} posts shows up here.
150          </Empty>
151        ) : (
152          <RowList label="Words you keep cutting">
153            {suggestions.map((s) => (
154              <Row
155                key={s.phrase}
156                title={s.phrase}
157                detail={`Cut from ${s.posts} posts`}
158                meta={<Time at={s.lastCutAt} />}
159                actions={
160                  canManage ? (
161                    <Form method="post" className="app-actions">
162                      <input type="hidden" name="phrase" value={s.phrase} />
163                      <Button type="submit" name="intent" value="add" size="sm">
164                        Add to list<span className="cap-sr-only">: {s.phrase}</span>
165                      </Button>
166                      <Button type="submit" name="intent" value="set-aside" size="sm" variant="quiet">
167                        Set aside<span className="cap-sr-only">: {s.phrase}</span>
168                      </Button>
169                    </Form>
170                  ) : undefined
171                }
172              />
173            ))}
174          </RowList>
175        )}
176      </Panel>
177    </div>
178  );
179}