@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/VideoOmnichatPanel.tsx

@@ -0,0 +1,287 @@
+/* The short omnichat section of the Publish stage (the video's Reel or, with `carousel`, the
+   content's carousel): it comes on, asks only for the term and turns on when saved, because
+   writing the term is the authorization (user decision). DM, replies and the rest of the rule
+   live on the /omnichat page. */
+
+import { useEffect, useState, type FormEvent, type ReactNode } from "react";
+import { Link } from "@tanstack/react-router";
+import { useOmnichatRule, useOmnichatState } from "../hooks/useOmnichat";
+import type { ClientResponse } from "hono/client";
+import { api, send, type ActionResult } from "../lib/api";
+import { ruleApi } from "../lib/omnichat-api";
+import { capitalize, formatDayTime, timeAgo } from "../lib/format";
+import type { VideoDetail } from "../types/api";
+import { Power } from "./icons";
+import { RuleSkeleton } from "./OmnichatRulePanel";
+import { toDisplay, triggerLabel } from "./RuleForm";
+import { Skeleton } from "./ui/skeleton";
+import { Switch } from "./ui/switch";
+
+function SectionStatus({ variant, children }: { variant: "ok" | "warning" | "subtle"; children: ReactNode }) {
+  return <span className={`omnichat-status ${variant}`}>{children}</span>;
+}
+
+/* `carousel`: the rule of the content's carousel (videos/<slug>/carousel), on its Publish stage */
+export function VideoOmnichatPanel({ video, carousel = false }: { video: VideoDetail; carousel?: boolean }) {
+  const { state, reload: reloadState } = useOmnichatState(false);
+  const target = { slug: video.slug, carousel };
+  const { detail: d, error: readError, reload } = useOmnichatRule(target);
+  const pageLink = (children: ReactNode, className = "link") => (
+    <Link
+      to="/omnichat/$kind/$id"
+      params={{ kind: carousel ? "carousel" : "video", id: video.slug }}
+      className={className}
+    >
+      {children}
+    </Link>
+  );
+  const thePost = carousel ? "o carrossel" : "o Reel";
+  const rule = d?.rule ?? null;
+  const enabled = !!rule?.enabled;
+  /* null: the default, on without a rule and what the rule is when it exists; the switch only
+     keeps the wish while the rule is not on */
+  const [wants, setWants] = useState<boolean | null>(null);
+  /* with omnichat.instagram.enable_on_publish, the rule turns on by itself when the Reel goes up,
+     unless the user turned it off (disabled_at): without a rule, with the narration's term */
+  const auto = !!d?.on_publish?.enable && !d.published && !enabled && !rule?.any_comment && !rule?.disabled_at;
+  const wantsOn = enabled || (wants ?? (!rule || auto));
+  const ruleKeywords = (rule?.keywords ?? []).join(", ");
+  /* without a rule, the term comes from the narration's ask ("comenta REA que eu te mando o link") */
+  const narrationTerm = d?.on_publish?.term ?? "";
+  const autoTerm = rule ? ruleKeywords : narrationTerm;
+  const [term, setTerm] = useState("");
+  useEffect(() => {
+    setTerm(ruleKeywords || narrationTerm);
+  }, [ruleKeywords, narrationTerm]);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [result, setResult] = useState<ActionResult>(null);
+
+  const request = async <R extends ClientResponse<unknown, number, "json" | "text" | "redirect">>(
+    name: string,
+    call: () => Promise<R>,
+  ) => {
+    setBusy(name);
+    setResult(null);
+    const r = await send(call());
+    setBusy(null);
+    if (!r.ok) setResult(r);
+    return r;
+  };
+  const enableWithTerm = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!term.trim()) return;
+    setWants(true);
+    const r = await request("enable", () => ruleApi(target).term(term));
+    reload();
+    if (r.ok) setWants(null);
+  };
+  const disable = async () => {
+    const r = await request("disable", () => ruleApi(target).enable(false));
+    reload();
+    if (r.ok) setWants(false);
+  };
+  const enableAgent = async () => {
+    await request("agent", () => api.omnichat.agent.$post({ json: { enable: true } }));
+    reloadState();
+  };
+
+  if (!d) {
+    return (
+      <section className="omnichat">
+        <header>
+          <h3>Omnichat no Instagram</h3>
+        </header>
+        {readError ? <p className="response error">{readError}</p> : <RuleSkeleton />}
+      </section>
+    );
+  }
+
+  const account = state?.account.ready ? state.account.username : null;
+  const anyComment = !!rule?.any_comment;
+  const generic = rule ? rule.generic_phrases !== false : true;
+  const publicReplies = rule?.public_replies ?? d.defaults.public_replies ?? [];
+  /* the rule's DM (or the default one) uses {link}: without a link, the CLI won't turn on */
+  const needsLink = (rule?.dm || d.defaults.dm || "").includes("{link}");
+  const link = rule?.link || d.found_link?.link || "";
+  const found = !rule?.link && !!d.found_link;
+  const showTerm = !enabled && wantsOn && !anyComment;
+  const ready = !!term.trim() && (!needsLink || !!link);
+  const t = d.log?.totals;
+
+  /* one line: what blocks first (account and token), then the rule */
+  let line: ReactNode;
+  if (!state) line = <Skeleton className="row" aria-busy="true" style={{ width: 240 }} />;
+  else if (!state.account.ready) {
+    line = (
+      <SectionStatus variant="warning">
+        Instagram não conectado: conecte em{" "}
+        <Link to="/settings/$category" params={{ category: "platforms" }} className="link">
+          Configurações → Plataformas
+        </Link>
+      </SectionStatus>
+    );
+  } else if (state.comments?.ready === false) {
+    line = (
+      <SectionStatus variant="warning">
+        O token não tem permissão para ler os comentários: {pageLink("veja como resolver")}
+      </SectionStatus>
+    );
+  } else if (enabled) {
+    if (state.pause)
+      line = (
+        <SectionStatus variant="warning">
+          Ligada, em pausa até {formatDayTime(state.pause.until)}: {state.pause.reason}
+        </SectionStatus>
+      );
+    else if (state.agent && !state.agent.loaded) {
+      line = (
+        <SectionStatus variant="warning">
+          Ligada, mas o agente está desligado: nada é respondido sozinho.{" "}
+          <button className="button small" disabled={!!busy} onClick={enableAgent}>
+            <Power className="ic" /> {busy === "agent" ? "Ligando…" : "Ligar o agente"}
+          </button>
+        </SectionStatus>
+      );
+    } else if (!d.published)
+      line = <SectionStatus variant="subtle">Ligada: começa a responder quando {thePost} subir</SectionStatus>;
+    else if (d.log?.warning) line = <SectionStatus variant="warning">{d.log.warning}</SectionStatus>;
+    else {
+      line = (
+        <SectionStatus variant="ok">
+          Ligada e respondendo{t ? ` · ${t.dms} ${t.dms === 1 ? "DM" : "DMs"}` : ""}
+          {t?.queued ? ` · ${t.queued} na fila` : ""}
+          {d.log?.checked_at ? ` · conferido ${timeAgo(d.log.checked_at)}` : ""}
+        </SectionStatus>
+      );
+    }
+  } else if (!wantsOn)
+    line = (
+      <SectionStatus variant="subtle">
+        Desligada: nada é respondido {carousel ? "neste carrossel" : "neste vídeo"}
+      </SectionStatus>
+    );
+  else if (anyComment)
+    line = (
+      <SectionStatus variant="subtle">
+        Esta regra dispara com qualquer comentário: ligue pela {pageLink("página do Omnichat")}
+      </SectionStatus>
+    );
+  else if (auto && autoTerm && (!needsLink || link))
+    line = (
+      <SectionStatus variant="subtle">
+        Liga sozinha com “{autoTerm}” quando {thePost} subir
+      </SectionStatus>
+    );
+  else if (!term.trim()) line = <SectionStatus variant="warning">Falta o termo</SectionStatus>;
+  else if (needsLink && !link) line = <SectionStatus variant="warning">Falta o link</SectionStatus>;
+  else
+    line = (
+      <SectionStatus variant="subtle">
+        {d.published ? "Pronta para ligar" : `Pronta: liga agora e começa quando ${thePost} subir`}
+      </SectionStatus>
+    );
+
+  return (
+    <section className="omnichat">
+      <header>
+        <h3>
+          Omnichat no Instagram{" "}
+          <span className="subtle">Quem comenta o termo recebe o link por DM e uma resposta no comentário</span>
+        </h3>
+      </header>
+      <div className="auto-rule-status">
+        <label
+          className="toggle-switch"
+          title={enabled ? "Ligada: responde os comentários que disparam" : "Desligada: nada é respondido"}
+        >
+          {/* turning off what would turn on by itself is saved, otherwise the post going up would turn it on anyway */}
+          <Switch
+            checked={wantsOn}
+            disabled={!!busy}
+            onCheckedChange={on => (enabled || (auto && !on) ? !on && disable() : setWants(on))}
+          />
+          <span>{busy === "enable" ? "Ligando…" : busy === "disable" ? "Desligando…" : "Auto-resposta"}</span>
+        </label>
+        {line}
+        {pageLink("Abrir no Omnichat", "subtle-link push-end")}
+      </div>
+
+      {showTerm && (
+        <form className="omnichat-term" onSubmit={enableWithTerm}>
+          <label className="field">
+            <span>
+              Termo <em>a palavra que a pessoa comenta · maiúscula e acento não contam</em>
+            </span>
+            <div className="setting-row">
+              <input
+                value={term}
+                disabled={!!busy}
+                placeholder="REA"
+                spellCheck={false}
+                aria-label="Termo"
+                onChange={e => {
+                  setTerm(e.target.value);
+                  setResult(null);
+                }}
+              />
+              <button className="button primary" type="submit" disabled={!!busy || !ready}>
+                <Power className="ic" /> {busy === "enable" ? "Ligando…" : "Ligar com este termo"}
+              </button>
+            </div>
+          </label>
+        </form>
+      )}
+
+      {(rule || wantsOn) && (
+        <dl className="data">
+          {!showTerm && rule && (
+            <>
+              <dt>Termo</dt>
+              <dd>
+                {triggerLabel(rule)}
+                {!anyComment && generic ? " · também pedidos genéricos" : ""}
+              </dd>
+            </>
+          )}
+          <dt>Link</dt>
+          <dd>
+            {link ? (
+              <>
+                <a className="link mono" href={link} target="_blank" rel="noreferrer">
+                  {link}
+                </a>
+                {found && <span className="subtle"> · achado {d.found_link!.found_in}</span>}
+                {" · "}
+                {pageLink("trocar no Omnichat", "subtle-link")}
+              </>
+            ) : needsLink ? (
+              <>
+                <span className="warning">
+                  Falta o link: nada {carousel ? "no conteúdo" : "no vídeo"} para a DM entregar.
+                </span>{" "}
+                {pageLink("Preencher no Omnichat")}
+              </>
+            ) : (
+              <>A DM vai sem link · {pageLink("trocar no Omnichat", "subtle-link")}</>
+            )}
+          </dd>
+        </dl>
+      )}
+
+      {showTerm && (
+        <p className="hint">
+          Quem comentar o termo{generic ? " ou pedir o link (“quero”, “me manda”…)" : ""} recebe a DM
+          {publicReplies.length ? " e uma resposta no comentário" : ""},{" "}
+          {account ? `em nome de ${account}` : "em nome da conta"}.
+          {d.published
+            ? " Os comentários dos últimos 7 dias também entram."
+            : auto
+              ? ` Liga sozinha quando ${thePost} subir; o botão liga agora.`
+              : ` Começa quando ${thePost} subir.`}{" "}
+          DM, respostas e o resto da regra ficam no Omnichat.
+        </p>
+      )}
+      {result && !result.ok && <p className="response error">{capitalize(toDisplay(result.error ?? ""))}</p>}
+    </section>
+  );
+}

package/studio/web/components/VoiceAvatar.tsx

@@ -0,0 +1,33 @@
+/* The voice avatar: a liquid orb in the voice's own colors (the same for the same voice), drawn by
+   lib/orb.ts, which shares one WebGL context among all the avatars on the page. It flows on its own
+   and, while a voice plays, reacts to it (useAvatarAudioReactive). */
+
+import { useEffect, useRef } from "react";
+import { attachOrb } from "../lib/orb";
+
+/* `framed`: the same orb, but filling a whole 9:16 frame (no circular crop), like the
+   "o agente de IA escolhe" reference card. `still`: drawn once, no flow (the menu icon). */
+export function VoiceAvatar({
+  seed,
+  size = 72,
+  framed = false,
+  still = false,
+}: {
+  seed: string;
+  size?: number;
+  framed?: boolean;
+  still?: boolean;
+}) {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  useEffect(
+    () => (canvas.current ? attachOrb(canvas.current, { seed, fill: framed, still }) : undefined),
+    [seed, framed, still],
+  );
+  return (
+    <canvas
+      ref={canvas}
+      className={`voice-avatar${framed ? " frame" : ""}`}
+      style={framed ? undefined : { width: size, height: size }}
+    />
+  );
+}

package/studio/web/components/VoiceCarousel.tsx

@@ -0,0 +1,196 @@
+/* The carousel (Configurações → Voz). The center voice is the selected one; the neighbors are
+   smaller and lighter. From there it becomes the active voice, or opens to edit. The carousel's
+   last item adds a voice. */
+
+import { useEffect, useRef, useState } from "react";
+import { useAvatarAudioReactive } from "../hooks/useAvatarAudioReactive";
+import { useVoiceProfilePreview } from "../hooks/useVoiceProfilePreview";
+import type { ActionResult } from "../lib/api";
+import type { VoiceProfile } from "../types/api";
+import { ArrowLeft, ArrowRight, Check, Pause, Pencil, Play, Plus } from "./icons";
+import { VoiceAvatar } from "./VoiceAvatar";
+import { ProviderIcons } from "./VoiceProfileCard";
+
+export function VoiceCarousel({
+  profiles,
+  defaultId,
+  focus,
+  onActivate,
+  onEdit,
+  onAdd,
+}: {
+  profiles: VoiceProfile[];
+  defaultId: string | null;
+  focus: string | null;
+  onActivate: (id: string) => Promise<{ ok: boolean; output?: string; error?: string }>;
+  onEdit: (id: string) => void;
+  onAdd: () => void;
+}) {
+  const total = profiles.length; /* after the last voice comes the "+": it opens the modal, it is not a carousel step */
+  const last = Math.max(0, total - 1);
+  const initial = Math.max(
+    0,
+    profiles.findIndex(p => p.id === (focus ?? defaultId)),
+  );
+  const [index, setIndex] = useState(initial);
+  const [activating, setActivating] = useState(false);
+  const [result, setResult] = useState<ActionResult>(null);
+  const { listening, error: sampleError, listen, stop, analyser, clearError } = useVoiceProfilePreview();
+  const root = useRef<HTMLDivElement>(null);
+  /* the center avatar moves faster while the voice plays; the edit/listen overlay pulses with it, same size */
+  useAvatarAudioReactive(listening === "playing", root, analyser, r =>
+    Array.from(r.querySelectorAll<HTMLElement>(".carousel-item.d0 .voice-avatar, .carousel-actions")),
+  );
+
+  /* the voice just created or edited comes to the center */
+  useEffect(() => {
+    const i = profiles.findIndex(p => p.id === focus);
+    if (i >= 0) setIndex(i);
+  }, [focus, profiles.length]);
+  useEffect(() => {
+    setIndex(i => Math.min(i, last));
+  }, [last]);
+
+  const profile = profiles[index] as VoiceProfile | undefined;
+  const active = !!profile && profile.id === defaultId;
+  const go = (i: number) => {
+    stop();
+    clearError();
+    setResult(null);
+    setIndex(Math.max(0, Math.min(last, i)));
+  };
+  const activate = async () => {
+    if (!profile) return;
+    setActivating(true);
+    setResult(await onActivate(profile.id));
+    setActivating(false);
+  };
+
+  const play = () => {
+    if (!profile) return;
+    setResult(null);
+    listen(profile.id);
+  };
+
+  return (
+    <div
+      ref={root}
+      className="carousel"
+      tabIndex={0}
+      role="group"
+      aria-label="Vozes"
+      onKeyDown={e => {
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          go(index - 1);
+        }
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          go(index + 1);
+        }
+      }}
+    >
+      <div className="carousel-canvas">
+        <div className="carousel-window">
+          <div className="carousel-rail" style={{ transform: `translateX(calc(${-(index + 0.5)} * var(--slot)))` }}>
+            {profiles.map((p, i) => (
+              <button
+                key={p.id}
+                type="button"
+                className={`carousel-item d${Math.min(Math.abs(i - index), 3)}${p.id === defaultId ? " active" : ""}`}
+                onClick={() => go(i)}
+                aria-label={p.name}
+                aria-current={i === index}
+                tabIndex={-1}
+              >
+                <VoiceAvatar seed={p.avatar || p.id} size={160} />
+              </button>
+            ))}
+            <button
+              type="button"
+              className={`carousel-item more d${Math.min(Math.abs(total - index), 3)}`}
+              onClick={onAdd}
+              aria-label="Adicionar voz"
+              title="Adicionar voz"
+            >
+              <span className="avatar-more large">
+                <Plus />
+              </span>
+            </button>
+          </div>
+        </div>
+        {profile && (
+          <div className="carousel-actions">
+            <button
+              type="button"
+              onClick={() => onEdit(profile.id)}
+              aria-label={`Editar ${profile.name}`}
+              title="Editar"
+            >
+              <Pencil />
+            </button>
+            <button
+              type="button"
+              onClick={play}
+              disabled={listening === "generating"}
+              aria-label={listening === "playing" ? "Parar a amostra" : `Ouvir ${profile.name}`}
+              title={
+                listening === "generating" ? "Gerando a amostra…" : listening === "playing" ? "Parar" : "Ouvir voz"
+              }
+            >
+              {listening === "playing" ? <Pause weight="fill" /> : <Play weight="fill" />}
+            </button>
+          </div>
+        )}
+        <button
+          type="button"
+          className="carousel-arrow start"
+          onClick={() => go(index - 1)}
+          disabled={index === 0}
+          aria-label="Voz anterior"
+        >
+          <ArrowLeft weight="bold" />
+        </button>
+        <button
+          type="button"
+          className="carousel-arrow end"
+          onClick={() => go(index + 1)}
+          disabled={index >= last}
+          aria-label="Próxima voz"
+        >
+          <ArrowRight weight="bold" />
+        </button>
+      </div>
+
+      <div className="carousel-caption">
+        {profile ? (
+          <>
+            <h3>
+              {profile.name}
+              {active && <span className="default-profile">Ativa</span>}
+            </h3>
+            <ProviderIcons order={profile.order} size={32} />
+            {!active && (
+              <div className="profile-actions center">
+                <button className="button" disabled={activating} onClick={activate}>
+                  <Check className="ic" /> {activating ? "Ativando…" : "Usar esta voz"}
+                </button>
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            <h3>Nenhuma voz ainda</h3>
+            <p className="carousel-empty">
+              Clique no + para clonar a sua voz ou informar uma que já existe nos provedores
+            </p>
+          </>
+        )}
+        {result && (
+          <p className={`response ${result.ok ? "ok" : "error"}`}>{result.ok ? result.output : result.error}</p>
+        )}
+        {!result && sampleError && <p className="response error">{sampleError}</p>}
+      </div>
+    </div>
+  );
+}

package/studio/web/components/VoiceCategory.tsx

@@ -0,0 +1,9 @@
+/* Configurações → Voz and the /voice page: the voice carousel with the providers card beside it */
+
+import type { Settings } from "../types/api";
+import { VoiceProfilesSettings } from "./VoiceProfilesSettings";
+import { VoiceProvidersCard } from "./VoiceProvidersCard";
+
+export function VoiceCategory({ settings, reload }: { settings: Settings; reload: () => void }) {
+  return <VoiceProfilesSettings settings={settings} reload={reload} aside={<VoiceProvidersCard />} />;
+}

package/studio/web/components/VoiceModal.tsx

@@ -0,0 +1,39 @@
+/* The two-half frame the voice modal uses, in the create view (CloneVoiceDialog) and in the edit
+   one (EditVoiceDialog, in VoiceProfilesSettings): the modal shell. `locked`: with something in
+   progress (recording, creating) the modal doesn't close. */
+
+import { useEffect, type ReactNode } from "react";
+import { X } from "./icons";
+
+export function VoiceModal({
+  title,
+  onClose,
+  locked = false,
+  children,
+}: {
+  title: string;
+  onClose: () => void;
+  locked?: boolean;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    const key = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !locked) onClose();
+    };
+    window.addEventListener("keydown", key);
+    return () => window.removeEventListener("keydown", key);
+  }, [onClose, locked]);
+  return (
+    <div className="modal-backdrop" onClick={() => !locked && onClose()}>
+      <div className="modal wide" role="dialog" aria-modal="true" aria-label={title} onClick={e => e.stopPropagation()}>
+        <header className="modal-top">
+          <h2>{title}</h2>
+          <button type="button" className="button small" onClick={onClose} disabled={locked} aria-label="Fechar">
+            <X weight="bold" />
+          </button>
+        </header>
+        <div className="clone-frame">{children}</div>
+      </div>
+    </div>
+  );
+}

package/studio/web/components/VoiceProfileCard.tsx

@@ -0,0 +1,75 @@
+/* A voice profile as a pickable card (new video and Voice stage). */
+
+import type { ListenPhase } from "../hooks/useVoiceProfilePreview";
+import { PROVIDER_NAME } from "../lib/providers";
+import type { VoiceProfile } from "../types/api";
+import { Pause, Play } from "./icons";
+import { ProviderLogo } from "./ProviderLogo";
+import { VoiceAvatar } from "./VoiceAvatar";
+
+/* only each provider's logo, in try order; the name shows on hover */
+export function ProviderIcons({ order, size }: { order: string[]; size: number }) {
+  return (
+    <span className="provider-icons">
+      {order.map((id, i) => {
+        const name = PROVIDER_NAME[id] ?? id;
+        const hint = order.length > 1 ? `${i + 1}º · ${name}` : name;
+        return (
+          <span key={id} className="hint" data-hint={hint} role="img" aria-label={hint}>
+            <ProviderLogo id={id} size={size} />
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
+export function VoiceProfileCard({
+  profile,
+  chosen,
+  onChoose,
+  listening,
+  onListen,
+}: {
+  profile: VoiceProfile;
+  chosen: boolean;
+  onChoose: () => void;
+  /* with `onListen`, the card gets the listen button (icon only) in the bottom corner; `listening` is this voice's phase */
+  listening?: ListenPhase;
+  onListen?: () => void;
+}) {
+  const button = (
+    <button
+      type="button"
+      className={`voice-profile${chosen ? " chosen" : ""}`}
+      onClick={onChoose}
+      aria-pressed={chosen}
+    >
+      <VoiceAvatar seed={profile.avatar || profile.id} size={72} />
+      <b>{profile.name}</b>
+    </button>
+  );
+  if (!onListen) return button;
+  /* the listen button is a sibling, not a child: a button inside a button is not valid HTML */
+  return (
+    <div className="voice-profile-card" data-voice={profile.id}>
+      {button}
+      <button
+        type="button"
+        className={`voice-profile-listen${listening ? " active" : ""}`}
+        onClick={onListen}
+        disabled={listening === "generating"}
+        aria-label={`${listening === "playing" ? "Parar" : "Ouvir"} a voz ${profile.name}`}
+        title={listening === "generating" ? "Gerando a amostra…" : listening === "playing" ? "Parar" : "Ouvir"}
+      >
+        {listening === "generating" ? (
+          <span className="spinning" aria-hidden="true" />
+        ) : listening === "playing" ? (
+          <Pause weight="fill" />
+        ) : (
+          <Play weight="fill" />
+        )}
+      </button>
+    </div>
+  );
+}