@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/OmnichatRulePanel/RuleStatus.tsx

@@ -0,0 +1,55 @@
+/* the rule's on/off switch (a two-click confirmation turns it on), since when and the post link */
+
+import { formatWhen } from "../../lib/format";
+import type { RuleEditor } from "../../hooks/useRuleEditor";
+import type { OmnichatRuleDetail } from "../../types/api";
+import { Switch } from "../ui/switch";
+
+export function RuleStatus({
+  editor: { rule, changed, busy, confirm, setConfirm, enable },
+  detail: d,
+  enabled,
+  thePost,
+}: {
+  editor: RuleEditor;
+  detail: OmnichatRuleDetail;
+  enabled: boolean;
+  thePost: string;
+}) {
+  return (
+    <div className="auto-rule-status">
+      <label
+        className="toggle-switch"
+        title={enabled ? "Ligada: responde os comentários que disparam" : "Desligada: nada é respondido"}
+      >
+        <Switch
+          checked={enabled || confirm}
+          disabled={!!busy || (!enabled && (!rule || changed))}
+          onCheckedChange={on => (on ? setConfirm(true) : enabled ? enable(false) : setConfirm(false))}
+        />
+        <span>
+          {busy === "enable" ? "Ligando…" : busy === "disable" ? "Desligando…" : enabled ? "Ligada" : "Desligada"}
+        </span>
+      </label>
+      <span className="subtle">
+        {enabled ? (
+          <>
+            Desde {formatWhen(rule?.enabled_at)}
+            {!d.published && ` · começa quando ${thePost} subir`}
+          </>
+        ) : !rule ? (
+          "Grave a regra para poder ligar"
+        ) : changed ? (
+          "Grave as mudanças antes de ligar"
+        ) : (
+          "Nada é respondido enquanto estiver desligada"
+        )}
+      </span>
+      {d.post && (
+        <a className="subtle-link push-end" href={d.post} target="_blank" rel="noreferrer">
+          Abrir no Instagram
+        </a>
+      )}
+    </div>
+  );
+}

package/studio/web/components/OmnichatRulePanel/index.tsx

@@ -0,0 +1,115 @@
+/* The full panel of one omnichat rule (a video's or an outside post's): on/off with a two-click
+   confirmation (turning on answers outside, on behalf of the account), the rule config, the
+   dry run, who did not get the DM and the record. Used by the /omnichat page. */
+
+import { useRuleEditor } from "../../hooks/useRuleEditor";
+import { capitalize } from "../../lib/format";
+import type { OmnichatState } from "../../types/api";
+import { MissingDmsPanel } from "../MissingDmsPanel";
+import { postExampleFor, postKindOf, type RuleTarget, toDisplay } from "../RuleForm";
+import { RuleLog } from "../RuleLog";
+import { RuleConfig } from "./RuleConfig";
+import { RuleDryRun } from "./RuleDryRun";
+import { RuleEnableConfirm } from "./RuleEnableConfirm";
+import { RuleSkeleton } from "./RuleSkeleton";
+import { RuleStatus } from "./RuleStatus";
+
+export { RuleSkeleton } from "./RuleSkeleton";
+
+export function OmnichatRulePanel({
+  target,
+  state,
+  defaultOpen,
+}: {
+  /* the rule's video, carousel or post: its API (lib/omnichat-api) and how the texts name the post */
+  target: RuleTarget;
+  state: OmnichatState | null;
+  /* the config accordion starts open (the rule's own screen) */
+  defaultOpen?: boolean;
+}) {
+  const editor = useRuleEditor(target);
+  const { d, readError, reload, rules, rule, form, busy, result, problems, confirm, dryRun, setDryRun, request } =
+    editor;
+
+  if (!d) return readError ? <p className="response error">{readError}</p> : <RuleSkeleton />;
+
+  const enabled = !!rule?.enabled;
+  const account = state?.account.ready ? state.account.username : null;
+  const onBehalf = account ? `em nome de ${account}` : "em nome da conta";
+  const post = d.post ?? postExampleFor(target);
+  const thePost = `o ${postKindOf(target)}`;
+  const publicReplies = form.public_replies
+    .split("\n")
+    .map(x => x.trim())
+    .filter(Boolean);
+  const log = d.log;
+
+  return (
+    <div className="auto-rule">
+      <RuleStatus editor={editor} detail={d} enabled={enabled} thePost={thePost} />
+
+      {confirm && !enabled && (
+        <RuleEnableConfirm
+          editor={editor}
+          detail={d}
+          onBehalf={onBehalf}
+          thePost={thePost}
+          publicReplies={publicReplies}
+        />
+      )}
+
+      {!d.published && (
+        <p className="hint">
+          {capitalize(thePost)} ainda não subiu: a regra pode ser preparada e ligada agora, e começa a responder quando
+          ele for publicado.
+        </p>
+      )}
+
+      <RuleConfig
+        editor={editor}
+        detail={d}
+        enabled={enabled}
+        onBehalf={onBehalf}
+        post={post}
+        thePost={thePost}
+        defaultOpen={defaultOpen}
+      />
+
+      {!!problems.length && (
+        <div className="warning">
+          Falta para ligar:
+          <ul className="auto-rule-problems">
+            {problems.map(p => (
+              <li key={p}>{capitalize(toDisplay(p))}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {result && (
+        <p className={`response ${result.ok ? "ok" : "error"}`}>
+          {capitalize(result.ok ? (result.output ?? "") : toDisplay(result.error ?? ""))}
+        </p>
+      )}
+      {dryRun != null && <RuleDryRun output={dryRun} onClose={() => setDryRun(null)} />}
+
+      {d.published && (
+        <MissingDmsPanel
+          target={target}
+          noRule={!rule}
+          hasPublicReplies={(rule?.public_replies ?? d.defaults.public_replies ?? []).length > 0}
+          onBehalf={onBehalf}
+          onSend={reload}
+        />
+      )}
+
+      <RuleLog
+        log={log}
+        error={d.log_error}
+        busy={!!busy}
+        onRetry={() => request("retry", () => rules.retry())}
+        retrying={busy === "retry"}
+      />
+    </div>
+  );
+}

package/studio/web/components/OmnichatRulePanel/rule-steps.ts

@@ -0,0 +1,67 @@
+/* The steps of the rule config: what each one is called, when it has something missing and the
+   one-line summary shown under its name in the stepper. */
+
+import type { OmnichatRuleDetail } from "../../types/api";
+import { DM_LIMIT, dmText, splitList, triggerLabel, type RuleForm } from "../RuleForm";
+
+export type StepId = "trigger" | "message" | "replies";
+export type DeliveryMode = "direct" | "button" | "follow";
+
+export const STEPS: { id: StepId; name: string }[] = [
+  { id: "trigger", name: "Gatilho" },
+  { id: "message", name: "Mensagem" },
+  { id: "replies", name: "Respostas" },
+];
+
+export const deliveryOf = (f: RuleForm): DeliveryMode => (f.require_follow ? "follow" : f.button ? "button" : "direct");
+
+/* the CLI refuses to turn on a rule whose DM uses {link} without a link */
+export const needsLink = (f: RuleForm, d: Pick<OmnichatRuleDetail, "defaults">) =>
+  (f.dm.trim() || d.defaults.dm || "").includes("{link}");
+
+const hostOf = (u: string) => {
+  try {
+    return new URL(u).host;
+  } catch {
+    return u;
+  }
+};
+
+export const publicRepliesOf = (f: RuleForm) =>
+  f.public_replies
+    .split("\n")
+    .map(x => x.trim())
+    .filter(Boolean);
+
+/* what is missing in a step (null: nothing) and its summary */
+export function stepInfo(
+  id: StepId,
+  f: RuleForm,
+  d: Pick<OmnichatRuleDetail, "defaults">,
+  post: string,
+): { missing: string | null; summary: string } {
+  switch (id) {
+    case "trigger": {
+      const noWord = !f.any_comment && !splitList(f.keywords).length;
+      return {
+        missing: noWord ? "Falta a palavra-chave" : null,
+        summary: noWord ? "Falta a palavra-chave" : triggerLabel(f),
+      };
+    }
+    case "message": {
+      const bytes = new TextEncoder().encode(dmText(f, d.defaults.dm, "x".repeat(30), post)).length;
+      const missing =
+        needsLink(f, d) && !f.link.trim() ? "Falta o link" : bytes > DM_LIMIT ? "DM acima do limite" : null;
+      return { missing, summary: missing ?? (f.link.trim() ? hostOf(f.link.trim()) : "Sem link") };
+    }
+    case "replies": {
+      const n = publicRepliesOf(f).length;
+      const mode = deliveryOf(f);
+      const delivery = mode === "follow" ? "Botão + seguir" : mode === "button" ? "Após o botão" : "Direta";
+      return {
+        missing: null,
+        summary: `${delivery} · ${n ? `${n} ${n === 1 ? "resposta" : "respostas"}` : "só a DM"}`,
+      };
+    }
+  }
+}

package/studio/web/components/OmnichatRulePanel/steps/MessageStep.tsx

@@ -0,0 +1,91 @@
+/* Step 2: the DM itself — the link it delivers (in the text or on a button), the text and whether it
+   quotes the post — with the preview of how it goes out. */
+
+import { DM_LIMIT, dmText, dmTextWithoutLink, linkInButton } from "../../RuleForm";
+import { Checkbox } from "../../ui/checkbox";
+import type { StepProps } from "./types";
+
+export function MessageStep({ editor: { form, busy, field }, detail: d, post, thePost }: StepProps) {
+  const bytes = new TextEncoder().encode(dmText(form, d.defaults.dm, "x".repeat(30), post)).length;
+  const linkLabel = form.link_label.trim() || d.defaults.link_label || "Abrir link";
+  return (
+    <>
+      <label className="field">
+        <span>Link</span>
+        <input
+          type="url"
+          value={form.link}
+          disabled={!!busy}
+          placeholder="https://…"
+          spellCheck={false}
+          onChange={e => field("link", e.target.value)}
+        />
+        {!form.link.trim() && d.found_link && (
+          <small>
+            Achado {d.found_link.found_in}: <span className="mono">{d.found_link.link}</span>{" "}
+            <button
+              type="button"
+              className="subtle-link"
+              disabled={!!busy}
+              onClick={() => field("link", d.found_link!.link)}
+            >
+              Usar este
+            </button>
+          </small>
+        )}
+      </label>
+      <div className="fields-row">
+        <div className="field wide">
+          <label className="check-toggle">
+            <Checkbox checked={form.link_button} disabled={!!busy} onCheckedChange={v => field("link_button", v)} />
+            <span>Link num botão</span>
+          </label>
+        </div>
+        {form.link_button && (
+          <label className="field">
+            <span>
+              Botão do link <em>até 20</em>
+            </span>
+            <input
+              value={form.link_label}
+              maxLength={20}
+              disabled={!!busy}
+              placeholder={d.defaults.link_label ?? ""}
+              onChange={e => field("link_label", e.target.value)}
+            />
+          </label>
+        )}
+      </div>
+      <label className="field">
+        <span>
+          Texto da DM{" "}
+          <em>
+            {"{username}"}, {"{link}"}, {"{post}"} ·{" "}
+            <span className={bytes > DM_LIMIT ? "error" : ""}>
+              {bytes}/{DM_LIMIT} bytes
+            </span>
+          </em>
+        </span>
+        <textarea
+          rows={3}
+          value={form.dm}
+          disabled={!!busy}
+          placeholder={d.defaults.dm ?? ""}
+          onChange={e => field("dm", e.target.value)}
+        />
+        <small className="dm-preview">
+          Prévia:{" "}
+          {linkInButton(form)
+            ? `${dmTextWithoutLink(form, d.defaults.dm, "fulano", post) || "(vazia)"} [${linkLabel} → ${form.link.trim()}]`
+            : dmText(form, d.defaults.dm, "fulano", post) || "(vazia)"}
+        </small>
+      </label>
+      <div className="field">
+        <label className="check-toggle">
+          <Checkbox checked={form.quote_post} disabled={!!busy} onCheckedChange={v => field("quote_post", v)} />
+          <span>Citar {thePost} na DM</span>
+        </label>
+      </div>
+    </>
+  );
+}

package/studio/web/components/OmnichatRulePanel/steps/RepliesStep.tsx

@@ -0,0 +1,201 @@
+/* Step 3: the replies — how the link reaches the person (straight in the DM, after a tap on a button, or
+   only for followers), the public reply under the comment and what to do with comments the account owner
+   already answered by hand. The button texts are collapsed: the defaults are already good. */
+
+import { BUTTON_TEXT_LIMIT, splitList } from "../../RuleForm";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion";
+import { Checkbox } from "../../ui/checkbox";
+import { Picker } from "../../ui/picker";
+import { deliveryOf, type DeliveryMode } from "../rule-steps";
+import type { StepProps } from "./types";
+
+const MODES: { id: DeliveryMode; label: string; about: string }[] = [
+  { id: "direct", label: "Direta", about: "A DM já chega com o link." },
+  { id: "button", label: "Após o botão", about: "O link vai depois do toque no botão." },
+  { id: "follow", label: "Botão + seguir", about: "Como o botão, só para quem segue a conta." },
+];
+
+export function RepliesStep({ editor: { form, busy, field, fields }, detail: d }: StepProps) {
+  const mode = deliveryOf(form);
+  return (
+    <>
+      <div className="field">
+        <span>Entrega do link</span>
+        <div className="segmented small" role="radiogroup" aria-label="Entrega do link">
+          {MODES.map(m => (
+            <button
+              key={m.id}
+              type="button"
+              role="radio"
+              aria-checked={mode === m.id}
+              className={mode === m.id ? "active" : ""}
+              disabled={!!busy}
+              onClick={() => fields({ button: m.id !== "direct", require_follow: m.id === "follow" })}
+            >
+              {m.label}
+            </button>
+          ))}
+        </div>
+        <small>{MODES.find(m => m.id === mode)?.about}</small>
+      </div>
+      {mode !== "direct" && (
+        <Accordion type="single" collapsible className="auto-rule-texts">
+          <AccordionItem value="texts">
+            <AccordionTrigger>
+              <span>Textos dos botões</span>
+            </AccordionTrigger>
+            <AccordionContent className="auto-rule-config-fields">
+              <div className="fields-row">
+                <label className="field wide">
+                  <span>
+                    Texto acima do botão{" "}
+                    <em>
+                      {"{username}"} · {form.opening_dm.length}/{BUTTON_TEXT_LIMIT}
+                    </em>
+                  </span>
+                  <textarea
+                    rows={2}
+                    value={form.opening_dm}
+                    maxLength={BUTTON_TEXT_LIMIT}
+                    disabled={!!busy}
+                    placeholder={d.defaults.opening_dm ?? ""}
+                    onChange={e => field("opening_dm", e.target.value)}
+                  />
+                </label>
+                <label className="field">
+                  <span>
+                    Botão <em>até 20</em>
+                  </span>
+                  <input
+                    value={form.button_label}
+                    maxLength={20}
+                    disabled={!!busy}
+                    placeholder={d.defaults.button_label ?? ""}
+                    onChange={e => field("button_label", e.target.value)}
+                  />
+                </label>
+              </div>
+              {mode === "follow" && (
+                <>
+                  <div className="fields-row">
+                    <label className="field wide">
+                      <span>
+                        Para quem não segue{" "}
+                        <em>
+                          {"{username}"} · {form.not_following_dm.length}/{BUTTON_TEXT_LIMIT}
+                        </em>
+                      </span>
+                      <textarea
+                        rows={3}
+                        value={form.not_following_dm}
+                        maxLength={BUTTON_TEXT_LIMIT}
+                        disabled={!!busy}
+                        placeholder={d.defaults.not_following_dm ?? ""}
+                        onChange={e => field("not_following_dm", e.target.value)}
+                      />
+                    </label>
+                    <label className="field">
+                      <span>
+                        Botão <em>até 20</em>
+                      </span>
+                      <input
+                        value={form.retry_label}
+                        maxLength={20}
+                        disabled={!!busy}
+                        placeholder={d.defaults.retry_label ?? ""}
+                        onChange={e => field("retry_label", e.target.value)}
+                      />
+                    </label>
+                  </div>
+                  <div className="fields-row">
+                    <div className="field wide">
+                      <label className="check-toggle">
+                        <Checkbox
+                          checked={form.follow_skip}
+                          disabled={!!busy}
+                          onCheckedChange={v => field("follow_skip", v)}
+                        />
+                        <span>Oferecer receber sem seguir</span>
+                      </label>
+                    </div>
+                    {form.follow_skip && (
+                      <label className="field">
+                        <span>
+                          Botão <em>até 20</em>
+                        </span>
+                        <input
+                          value={form.skip_label}
+                          maxLength={20}
+                          disabled={!!busy}
+                          placeholder={d.defaults.skip_label ?? ""}
+                          onChange={e => field("skip_label", e.target.value)}
+                        />
+                      </label>
+                    )}
+                  </div>
+                  {form.follow_skip && (
+                    <label className="field">
+                      <span>
+                        Mensagem sem seguir{" "}
+                        <em>
+                          {"{username}"}, {"{link}"}
+                        </em>
+                      </span>
+                      <textarea
+                        rows={3}
+                        value={form.skip_dm}
+                        disabled={!!busy}
+                        placeholder={d.defaults.skip_dm ?? ""}
+                        onChange={e => field("skip_dm", e.target.value)}
+                      />
+                    </label>
+                  )}
+                </>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      )}
+      <label className="field">
+        <span>
+          Resposta pública <em>uma por linha · vazio = só a DM</em>
+        </span>
+        <textarea
+          rows={3}
+          value={form.public_replies}
+          disabled={!!busy}
+          onChange={e => field("public_replies", e.target.value)}
+        />
+      </label>
+      <div className="fields-row">
+        <label className="field">
+          <span>Comentários já respondidos</span>
+          <Picker
+            aria-label="Comentários já respondidos"
+            value={form.already_replied}
+            disabled={!!busy}
+            onChange={v => field("already_replied", v === "send" ? "send" : "skip")}
+            options={[
+              { value: "skip", label: "Pular" },
+              { value: "send", label: "Mandar mesmo assim" },
+            ]}
+          />
+        </label>
+        {form.already_replied === "send" && (
+          <label className="field wide">
+            <span>
+              Só se a sua resposta disser… <em>opcional · vírgula</em>
+            </span>
+            <input
+              value={form.already_replied_if}
+              disabled={!!busy}
+              placeholder="te mandei, no direct"
+              onChange={e => field("already_replied_if", e.target.value)}
+            />
+            {!splitList(form.already_replied_if).length && <small>Vazio: manda sempre.</small>}
+          </label>
+        )}
+      </div>
+    </>
+  );
+}

package/studio/web/components/OmnichatRulePanel/steps/TriggerStep.tsx

@@ -0,0 +1,76 @@
+/* Step 1: what makes the rule answer — a keyword or any comment — and, for keywords, whether generic
+   requests ("quero", "me manda") count too. */
+
+import { Checkbox } from "../../ui/checkbox";
+import type { StepProps } from "./types";
+
+export function TriggerStep({ editor: { form, busy, field } }: StepProps) {
+  return (
+    <>
+      <div className="field">
+        <span>Dispara com</span>
+        <div className="segmented small" role="radiogroup" aria-label="Dispara com">
+          <button
+            type="button"
+            role="radio"
+            aria-checked={!form.any_comment}
+            className={!form.any_comment ? "active" : ""}
+            disabled={!!busy}
+            onClick={() => field("any_comment", false)}
+          >
+            Palavra-chave
+          </button>
+          <button
+            type="button"
+            role="radio"
+            aria-checked={form.any_comment}
+            className={form.any_comment ? "active" : ""}
+            disabled={!!busy}
+            onClick={() => field("any_comment", true)}
+          >
+            Qualquer comentário
+          </button>
+        </div>
+      </div>
+      {!form.any_comment && (
+        <>
+          <label className="field">
+            <span>
+              Palavras-chave <em>separe por vírgula</em>
+            </span>
+            <input
+              value={form.keywords}
+              disabled={!!busy}
+              placeholder="QUERO, LINK"
+              spellCheck={false}
+              onChange={e => field("keywords", e.target.value)}
+            />
+          </label>
+          <div className="field">
+            <label className="check-toggle">
+              <Checkbox
+                checked={form.generic_phrases}
+                disabled={!!busy}
+                onCheckedChange={v => field("generic_phrases", v)}
+              />
+              <span>Também pedidos genéricos (“quero”, “me manda”)</span>
+            </label>
+          </div>
+          {form.generic_phrases && (
+            <label className="field">
+              <span>
+                O que a DM entrega <em>opcional</em>
+              </span>
+              <input
+                value={form.offer}
+                disabled={!!busy}
+                placeholder="o repositório no GitHub, gratuito e open source"
+                onChange={e => field("offer", e.target.value)}
+              />
+            </label>
+          )}
+        </>
+      )}
+    </>
+  );
+}

package/studio/web/components/OmnichatRulePanel/steps/types.ts

@@ -0,0 +1,11 @@
+import type { RuleEditor } from "../../../hooks/useRuleEditor";
+import type { OmnichatRuleDetail } from "../../../types/api";
+
+/* what every step of the rule config receives: `post` is the link of the post (or an example) the DM
+   quotes, `thePost` how the texts name it ("o Reel", "o carrossel", "o post") */
+export type StepProps = {
+  editor: RuleEditor;
+  detail: OmnichatRuleDetail;
+  post: string;
+  thePost: string;
+};

package/studio/web/components/Palette.tsx

@@ -0,0 +1,17 @@
+import type { Color } from "../types/api";
+
+/* a reference's color swatches; `large` adds the hex and the name */
+export function Palette({ colors, large }: { colors: Color[]; large?: boolean }) {
+  if (!colors.length) return null;
+  return (
+    <div className={`palette${large ? " large" : ""}`}>
+      {colors.map((c, i) => (
+        <span key={`${c.hex}-${i}`} className="sample-color" title={`${c.hex} · ${c.name}`}>
+          <i style={{ background: c.hex }} />
+          {large && <b>{c.hex}</b>}
+          {large && <small>{c.name}</small>}
+        </span>
+      ))}
+    </div>
+  );
+}