@fraza/module-ai 0.0.0-stage → 0.4.22

package/dist/admin/AiInputForm.client.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Checkbox, Input, Select, Textarea } from "@fraza/core/shared/components";
+function AiInputForm({ fields, values, errors, onChange, disabled = false }) {
+  const set = (key, value) => onChange({ ...values, [key]: value });
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: fields.map((field) => {
+    const common = {
+      label: field.label,
+      description: field.description ?? void 0,
+      error: errors[field.key],
+      required: field.required,
+      disabled
+    };
+    if (field.kind === "boolean") {
+      return /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: field.label,
+          checked: Boolean(values[field.key]),
+          onChange: (checked) => set(field.key, checked),
+          disabled
+        },
+        field.key
+      );
+    }
+    if (field.kind === "select") {
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          ...common,
+          value: values[field.key] ?? "",
+          onChange: (value) => set(field.key, value),
+          options: field.options.map((option) => ({ value: option, label: option }))
+        },
+        field.key
+      );
+    }
+    if (field.kind === "text") {
+      const long = field.maxLength === null || field.maxLength > 1e3;
+      return /* @__PURE__ */ jsx(Textarea, { ...common, rows: long ? 7 : 4, resizable: true, value: values[field.key] ?? "", onChange: (value) => set(field.key, value) }, field.key);
+    }
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...common,
+        type: field.kind === "number" ? "number" : "text",
+        value: values[field.key] ?? "",
+        onChange: (value) => set(field.key, value)
+      },
+      field.key
+    );
+  }) });
+}
+export {
+  AiInputForm as default
+};

package/dist/admin/AiPage.client.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from "react";
+import { AdminHeader } from "@fraza/core/features/admin/components";
+import { Badge, Button, Card, FilterTabs, RelativeDate, StatCard, Table, TABLE_MIN_HEIGHT } from "@fraza/core/shared/components";
+import { apiFetch } from "@fraza/core/shared/http";
+import { useToast } from "@fraza/core/toast";
+import { formatDuration, formatTokens, TRIGGER_LABELS } from "./format.js";
+import { AI_API } from "./paths.js";
+const PAGE_SIZE = 25;
+const USAGE_DAYS = 30;
+const STATUS_TABS = [
+  { key: "all", label: "Tous" },
+  { key: "success", label: "R\xE9ussis" },
+  { key: "error", label: "En \xE9chec" }
+];
+function ConfigCard({ status, onTest, testing }) {
+  const config = status == null ? void 0 : status.config;
+  const rows = config ? [
+    ["Fournisseur", config.providerLabel ?? config.provider ?? "Non d\xE9fini"],
+    ["Mod\xE8le", config.model ?? "Non d\xE9fini"],
+    ["Cl\xE9 d'API", config.hasKey ? "Pr\xE9sente" : "Absente"],
+    ...config.baseUrl ? [["Adresse", config.baseUrl]] : []
+  ] : [];
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      header: /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-semibold leading-5 text-fg", children: "Configuration" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-[12.5px] text-fg-muted", children: "Lue dans les variables d'environnement FRAZA_MODULE_AI_*." })
+        ] }),
+        config && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: onTest, loading: testing, disabled: !config.configured || testing, children: "Tester" })
+      ] }),
+      children: !config ? /* @__PURE__ */ jsx("p", { className: "text-[13px] text-fg-muted", children: "Chargement\u2026" }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-2", children: rows.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-[12px] text-fg-muted", children: label }),
+          /* @__PURE__ */ jsx("dd", { className: "break-words text-[13px] text-fg", children: value })
+        ] }, label)) }),
+        config.problem && /* @__PURE__ */ jsx("p", { className: "text-[13px] text-danger-ink", children: config.problem }),
+        status.unmatchedCustomizations.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-[13px] text-warning-ink", children: [
+          "ai.js ajuste des prompts que personne ne d\xE9clare : ",
+          status.unmatchedCustomizations.join(", "),
+          ". V\xE9rifier leur nom, ou installer le module qui les fournit."
+        ] })
+      ] })
+    }
+  );
+}
+function UsageBlock({ usage }) {
+  const totals = usage == null ? void 0 : usage.totals;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [
+      /* @__PURE__ */ jsx(StatCard, { title: `Jetons envoy\xE9s, ${USAGE_DAYS} jours`, value: totals ? formatTokens(totals.inputTokens) : "", loading: !usage }),
+      /* @__PURE__ */ jsx(StatCard, { title: `Jetons re\xE7us, ${USAGE_DAYS} jours`, value: totals ? formatTokens(totals.outputTokens) : "", loading: !usage }),
+      /* @__PURE__ */ jsx(StatCard, { title: "Appels en \xE9chec", value: totals ? `${totals.errors} sur ${totals.calls}` : "", tone: (totals == null ? void 0 : totals.errors) ? "warning" : "default", loading: !usage })
+    ] }),
+    (usage == null ? void 0 : usage.byPrompt.length) > 0 && /* @__PURE__ */ jsx(Card, { title: "Par prompt", padding: "sm", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col divide-y divide-line-soft", children: usage.byPrompt.map((row) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-3 py-2 text-[13px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-fg", children: row.prompt }),
+      /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-fg-muted", children: [
+        row.calls,
+        " appels \xB7 ",
+        formatTokens(row.inputTokens + row.outputTokens),
+        " jetons"
+      ] })
+    ] }, row.prompt)) }) })
+  ] });
+}
+function PromptsCard({ prompts }) {
+  return /* @__PURE__ */ jsx(Card, { title: "Prompts d\xE9clar\xE9s", subtitle: "Par les modules et par le fichier ai.js du projet.", children: !prompts ? /* @__PURE__ */ jsx("p", { className: "text-[13px] text-fg-muted", children: "Chargement\u2026" }) : prompts.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[13px] text-fg-muted", children: "Aucun prompt pour l'instant. Les modules compatibles et le fichier ai.js en d\xE9clarent." }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col divide-y divide-line-soft", children: prompts.map((prompt) => /* @__PURE__ */ jsxs("li", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 py-2 text-[13px]", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-fg", children: prompt.name }),
+    prompt.label && /* @__PURE__ */ jsx("span", { className: "text-fg-secondary", children: prompt.label }),
+    /* @__PURE__ */ jsxs("span", { className: "text-fg-muted", children: [
+      prompt.target ? `\xC9cran ${prompt.target}` : "Code seulement",
+      " \xB7 ",
+      prompt.source
+    ] }),
+    prompt.customized && /* @__PURE__ */ jsx(Badge, { dot: false, children: "Ajust\xE9 par ai.js" }),
+    !prompt.enabled && /* @__PURE__ */ jsx(Badge, { variant: "cancelled", children: "D\xE9sactiv\xE9" })
+  ] }, prompt.name)) }) });
+}
+function useRuns(status, page, reload) {
+  const toast = useToast();
+  const [state, setState] = useState({ runs: [], total: 0, loading: true });
+  useEffect(() => {
+    let cancelled = false;
+    setState((s) => ({ ...s, loading: true }));
+    const query = new URLSearchParams({ page: String(page), limit: String(PAGE_SIZE), ...status ? { status } : {} });
+    apiFetch(`${AI_API}/runs?${query}`).then((data) => {
+      if (!cancelled) setState({ runs: data.runs, total: data.pagination.total, loading: false });
+    }).catch((error) => {
+      if (cancelled) return;
+      setState({ runs: [], total: 0, loading: false });
+      toast.error(error.message || "L'historique n'a pas pu \xEAtre charg\xE9.");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [status, page, reload, toast]);
+  return state;
+}
+const RUN_COLUMNS = [
+  { key: "prompt", label: "Prompt", mobile: "title", render: (r) => /* @__PURE__ */ jsx("span", { className: "font-mono text-fg", children: r.prompt }), mobileRender: (r) => r.prompt },
+  {
+    key: "status",
+    label: "R\xE9sultat",
+    render: (r) => r.status === "success" ? /* @__PURE__ */ jsx(Badge, { variant: "success", children: "R\xE9ussi" }) : /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "danger", children: "\xC9chec" }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-[320px] truncate text-[12px] text-fg-muted", title: r.errorMessage ?? "", children: r.errorMessage })
+    ] })
+  },
+  { key: "trigger", label: "Origine", render: (r) => TRIGGER_LABELS[r.trigger] ?? r.trigger },
+  { key: "model", label: "Mod\xE8le", className: "w-full max-w-0", render: (r) => /* @__PURE__ */ jsx("span", { className: "block truncate", title: r.model ?? "", children: r.model ?? "\u2014" }) },
+  { key: "tokens", label: "Jetons", render: (r) => r.inputTokens === null && r.outputTokens === null ? "\u2014" : `${formatTokens(r.inputTokens)} / ${formatTokens(r.outputTokens)}` },
+  { key: "duration", label: "Dur\xE9e", render: (r) => formatDuration(r.durationMs) },
+  { key: "createdAt", label: "Date", mobile: "subtitle", render: (r) => /* @__PURE__ */ jsx(RelativeDate, { date: r.createdAt }), mobileRender: (r) => /* @__PURE__ */ jsx(RelativeDate, { date: r.createdAt }) }
+];
+function AiPage() {
+  const toast = useToast();
+  const [status, setStatus] = useState(null);
+  const [usage, setUsage] = useState(null);
+  const [testing, setTesting] = useState(false);
+  const [filter, setFilter] = useState("all");
+  const [page, setPage] = useState(1);
+  const [reload, setReload] = useState(0);
+  const runs = useRuns(filter === "all" ? "" : filter, page, reload);
+  useEffect(() => {
+    apiFetch(`${AI_API}/status`).then(setStatus).catch((error) => toast.error(error.message || "La configuration n'a pas pu \xEAtre lue."));
+  }, [toast]);
+  useEffect(() => {
+    apiFetch(`${AI_API}/usage?days=${USAGE_DAYS}`).then((data) => setUsage(data.usage)).catch((error) => toast.error(error.message || "La consommation n'a pas pu \xEAtre lue."));
+  }, [toast, reload]);
+  const test = useCallback(async () => {
+    var _a;
+    setTesting(true);
+    try {
+      const data = await apiFetch(`${AI_API}/test`, { method: "POST" });
+      toast.success(`Le fournisseur r\xE9pond. ${((_a = data.data) == null ? void 0 : _a.message) ?? ""}`.trim());
+    } catch (error) {
+      toast.error(error.message || "Le test a \xE9chou\xE9.");
+    } finally {
+      setTesting(false);
+      setReload((n) => n + 1);
+      setPage(1);
+    }
+  }, [toast]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx(AdminHeader, { title: "IA", description: "Fournisseur d'IA, prompts d\xE9clar\xE9s, jetons consomm\xE9s et historique des appels." }),
+    /* @__PURE__ */ jsx(ConfigCard, { status, onTest: test, testing }),
+    /* @__PURE__ */ jsx(UsageBlock, { usage }),
+    /* @__PURE__ */ jsx(PromptsCard, { prompts: (status == null ? void 0 : status.prompts) ?? null }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-3 sm:flex-row sm:items-center", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-semibold text-fg", children: "Historique des appels" }),
+        /* @__PURE__ */ jsx(FilterTabs, { tabs: STATUS_TABS, value: filter, onChange: (value) => {
+          setFilter(value);
+          setPage(1);
+        } })
+      ] }),
+      /* @__PURE__ */ jsx(Card, { padding: "none", children: /* @__PURE__ */ jsx(
+        Table,
+        {
+          columns: RUN_COLUMNS,
+          data: runs.runs,
+          loading: runs.loading,
+          minHeight: TABLE_MIN_HEIGHT,
+          currentPage: page,
+          totalPages: Math.max(1, Math.ceil(runs.total / PAGE_SIZE)),
+          onPageChange: setPage,
+          limit: PAGE_SIZE,
+          total: runs.total,
+          emptyMessage: "Aucun appel",
+          emptyDescription: "Les appels au fournisseur appara\xEEtront ici, sans le texte envoy\xE9 ni la r\xE9ponse."
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  AiPage as default
+};

package/dist/admin/AiResults.client.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from "react";
+import { AI_CLASSES, Badge, Button } from "@fraza/core/shared/components";
+import { apiFetch } from "@fraza/core/shared/http";
+import { useToast } from "@fraza/core/toast";
+import { AI_API } from "./paths.js";
+function formatValue(value) {
+  if (value === null || value === void 0 || value === "") return "\u2014";
+  if (Array.isArray(value)) return value.map(formatValue).join(", ");
+  if (typeof value === "boolean") return value ? "Oui" : "Non";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function Answer({ data, labels }) {
+  return /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-2", children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[12px] text-fg-muted", children: labels[key] ?? key }),
+    /* @__PURE__ */ jsx("dd", { className: `whitespace-pre-line break-words text-[15px] leading-[21px] text-fg ${AI_CLASSES.voice}`, children: formatValue(value) })
+  ] }, key)) });
+}
+function AiResults({ target, id, labels = {}, onApply }) {
+  const toast = useToast();
+  const [results, setResults] = useState([]);
+  const [busy, setBusy] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    const query = new URLSearchParams({ target, id: String(id) });
+    apiFetch(`${AI_API}/results?${query}`).then((data) => {
+      if (!cancelled) setResults((data == null ? void 0 : data.results) ?? []);
+    }).catch(() => {
+      if (!cancelled) setResults([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [target, id]);
+  const dismiss = useCallback(async (result, used) => {
+    setBusy(result.id);
+    try {
+      await apiFetch(`${AI_API}/results/${result.id}/dismiss`, { method: "POST" });
+      setResults((current) => current.filter((r) => r.id !== result.id));
+      if (used) toast.success("La proposition est appliqu\xE9e. Relire avant d'enregistrer.");
+    } catch (error) {
+      toast.error(error.message || "La proposition n'a pas pu \xEAtre retir\xE9e.");
+    } finally {
+      setBusy(null);
+    }
+  }, [toast]);
+  if (results.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: results.map((result) => (
+    // The answer waits in the AI's voice, on a card edged with the accent.
+    /* @__PURE__ */ jsx("div", { className: `${AI_CLASSES.arrive} rounded-card border ${AI_CLASSES.card}`, children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(Badge, { variant: "ai", children: "Propos\xE9 par l'IA" }) }),
+      /* @__PURE__ */ jsx(Answer, { data: result.data, labels }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", disabled: busy === result.id, onClick: () => dismiss(result, false), children: "Ignorer" }),
+        onApply && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            disabled: busy === result.id,
+            onClick: () => {
+              onApply(result.data, result);
+              dismiss(result, true);
+            },
+            children: "Appliquer"
+          }
+        )
+      ] })
+    ] }) }, result.id)
+  )) });
+}
+export {
+  AiResults as default
+};