@tomako/tools-runtime 0.1.0

package/src/features/tools/product-agreement-generator/widget/product-agreement-generator.tsx

@@ -0,0 +1,671 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { Tabs, TabsList, TabsTrigger } from "@tomako/ui/tabs";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import { resolvePrimaryLocale } from "../../../../i18n/locale-fallback";
+import {
+    RefreshCcw,
+    ShieldCheck,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { ApiError } from "../../../../lib/api/errors";
+import {
+    PRODUCT_AGREEMENT_DOCUMENTS,
+    PRODUCT_AGREEMENT_PRODUCT_TYPES,
+    PRODUCT_AGREEMENT_REGIONS,
+    productAgreementInputSchema,
+    stringifyAgentAgreementResult,
+    type ProductAgreementAgentResult,
+    type ProductAgreementProductType,
+    type ProductAgreementRegion,
+} from "../../../../lib/tools/product-agreement-generator-schema";
+import {
+    fetchProductAgreementDraftTask,
+    sendProductAgreementRevision,
+    streamTaskEvents,
+    submitProductAgreementDraft,
+} from "../../../../host/client";
+
+import {
+    agreementTabDocuments,
+    agreementTabOrder,
+    defaultForm,
+} from "./constants";
+import { AgreementInputOutputPreview, MultiSelectMenu } from "./form-controls";
+import {
+    createMessageId,
+    isPlaceholderProductName,
+    isValidEmail,
+    isWeakProductDescription,
+    wait,
+} from "./helpers";
+import { ResultShell } from "./result-shell";
+import type {
+    AgreementTab,
+    ChatMessage,
+    FormCopy,
+    FormState,
+    GenerationState,
+    LoadingMode,
+    ModuleCopy,
+    PreviewCopy,
+    ResolveOptions,
+    SupplementModule,
+} from "./types";
+
+export function ProductAgreementGenerator() {
+  const locale = useLocale();
+  const t = useTranslations("toolsPages.productAgreementGenerator.widget");
+  const [form, setForm] = useState<FormState>(defaultForm);
+  const [state, setState] = useState<GenerationState>({ phase: "idle" });
+  const [agreementTab, setAgreementTab] = useState<AgreementTab>("starter");
+  const [activeSupplement, setActiveSupplement] = useState<SupplementModule>("risk");
+  const [activeDocumentIndex, setActiveDocumentIndex] = useState(0);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [agentInstruction, setAgentInstruction] = useState("");
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const activeTaskIdRef = useRef<string | null>(null);
+  const resultLookupVersionRef = useRef(0);
+  const resultSectionRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    return () => {
+      eventSourceRef.current?.close();
+      activeTaskIdRef.current = null;
+      resultLookupVersionRef.current += 1;
+    };
+  }, []);
+
+  const copy = useMemo(
+    () =>
+      ({
+        agreementTabs: t.raw("agreementTabs"),
+        productTypes: t.raw("productTypes"),
+        regions: t.raw("regions"),
+        dataCategories: t.raw("dataCategories"),
+        features: t.raw("features"),
+        documentLabels: t.raw("documentLabels"),
+      }) as FormCopy,
+    [t],
+  );
+
+  const supplementModules = useMemo(
+    () => t.raw("supplementModules") as ModuleCopy,
+    [t],
+  );
+  const revisionExamples = useMemo(
+    () => t.raw("revisionExamples") as readonly string[],
+    [t],
+  );
+  const previewCopy = useMemo(() => t.raw("preview") as PreviewCopy, [t]);
+  const valueJoiner = resolvePrimaryLocale(locale) === "zh" ? "、" : ", ";
+
+  const result =
+    state.phase === "done"
+      ? state.data
+      : state.phase === "loading"
+        ? state.previous ?? null
+        : state.phase === "error"
+          ? state.previous ?? null
+          : null;
+  const activeDocument = result?.documents[activeDocumentIndex] ?? result?.documents[0] ?? null;
+  const currentTaskId =
+    state.phase === "done" || state.phase === "loading" || state.phase === "error"
+      ? state.taskId
+      : undefined;
+  const isLoading = state.phase === "loading";
+  const isRevising = state.phase === "loading" && state.mode === "revision";
+  const canSubmit = !isLoading;
+  const canRevise = Boolean(result && currentTaskId && canSubmit);
+  const primaryActionLabel = isLoading
+    ? state.phase === "loading" && state.mode === "revision"
+      ? t("updatingAgent")
+      : t("generatingAgent")
+    : result
+      ? t("regenerateAgent")
+      : t("generateAgent");
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((current) => ({ ...current, [key]: value }));
+  }
+
+  function selectAgreementTab(tab: AgreementTab) {
+    setAgreementTab(tab);
+    setForm((current) => ({
+      ...current,
+      documents: agreementTabDocuments[tab],
+    }));
+  }
+
+  function validateForm(): boolean {
+    const productName = form.productName.trim();
+    const productDescription = form.productDescription.trim();
+
+    if (!productName) {
+      setFormError(t("errors.productNameRequired"));
+      return false;
+    }
+    if (isPlaceholderProductName(productName, t("productNamePlaceholder"))) {
+      setFormError(t("errors.productNamePlaceholder"));
+      return false;
+    }
+    if (!productDescription) {
+      setFormError(t("errors.descriptionRequired"));
+      return false;
+    }
+    if (isWeakProductDescription(productDescription, t("descriptionPlaceholder"))) {
+      setFormError(t("errors.descriptionPlaceholder"));
+      return false;
+    }
+    if (form.documents.length === 0) {
+      setFormError(t("errors.documents"));
+      return false;
+    }
+    if (!isValidEmail(form.contactEmail)) {
+      setFormError(t("errors.email"));
+      return false;
+    }
+
+    const parsed = productAgreementInputSchema.safeParse(form);
+    if (!parsed.success) {
+      setFormError(t("errors.required"));
+      return false;
+    }
+
+    setFormError(null);
+    return true;
+  }
+
+  function formatAgentError(err: unknown): string {
+    if (err instanceof ApiError) {
+      if (err.status === 409) return t("errors.notReady");
+      if (err.status === 502 || err.status === 503 || err.status === 504) {
+        return t("errors.gateway");
+      }
+      return t("errors.agent");
+    }
+    return err instanceof Error ? err.message : t("errors.agent");
+  }
+
+  function isActiveLookup(taskId: string, version: number): boolean {
+    return activeTaskIdRef.current === taskId && resultLookupVersionRef.current === version;
+  }
+
+  async function resolveAgentTask(taskId: string, options: ResolveOptions = {}) {
+    const {
+      final = false,
+      retries = final ? 20 : 0,
+      mode = "initial",
+      previous = null,
+      successMessage,
+    } = options;
+    const lookupVersion = ++resultLookupVersionRef.current;
+
+    for (let attempt = 0; attempt <= retries; attempt += 1) {
+      const task = await fetchProductAgreementDraftTask(taskId);
+      if (!isActiveLookup(taskId, lookupVersion)) return;
+
+      if (task.data && task.data.documents.length > 0) {
+        setState({ phase: "done", data: task.data, taskId });
+        setActiveDocumentIndex(0);
+        if (successMessage) {
+          setChatMessages((messages) => [
+            ...messages,
+            {
+              id: createMessageId(),
+              role: "agent",
+              content: successMessage,
+            },
+          ]);
+        }
+        return;
+      }
+
+      if (task.status === "FAILED") {
+        setState({
+          phase: "error",
+          message: task.error || t("errors.agent"),
+          taskId,
+          previous: previous ?? undefined,
+        });
+        return;
+      }
+
+      if (task.status === "RESULT_INVALID") {
+        setState({
+          phase: "error",
+          message: t("errors.resultInvalid"),
+          taskId,
+          previous: previous ?? undefined,
+        });
+        return;
+      }
+
+      if (attempt < retries) {
+        setState({
+          phase: "loading",
+          status: task.status,
+          taskId,
+          mode,
+          previous: previous ?? undefined,
+        });
+        await wait(1500);
+      }
+    }
+
+    if (isActiveLookup(taskId, lookupVersion) && final) {
+      setState({
+        phase: "error",
+        message: t("errors.noResult"),
+        taskId,
+        previous: previous ?? undefined,
+      });
+    }
+  }
+
+  function attachTaskStream(
+    taskId: string,
+    mode: LoadingMode,
+    previous?: ProductAgreementAgentResult | null,
+    successMessage?: string,
+  ) {
+    eventSourceRef.current?.close();
+    eventSourceRef.current = streamTaskEvents(taskId, {
+      onStatus: (nextStatus: string) => {
+        setState({
+          phase: "loading",
+          status: nextStatus,
+          taskId,
+          mode,
+          previous: previous ?? undefined,
+        });
+        if (
+          nextStatus === "AWAITING_INPUT" ||
+          nextStatus === "SUCCEEDED" ||
+          nextStatus === "FAILED"
+        ) {
+          void resolveAgentTask(taskId, {
+            final: nextStatus === "SUCCEEDED" || nextStatus === "FAILED",
+            retries: nextStatus === "AWAITING_INPUT" ? 20 : 0,
+            mode,
+            previous,
+            successMessage,
+          });
+        }
+      },
+      onResult: async () => {
+        await resolveAgentTask(taskId, {
+          retries: 10,
+          mode,
+          previous,
+          successMessage,
+        });
+      },
+      onFailure: (_status: string, message: string) => {
+        if (activeTaskIdRef.current === taskId) {
+          resultLookupVersionRef.current += 1;
+          eventSourceRef.current?.close();
+          eventSourceRef.current = null;
+          setState({
+            phase: "error",
+            message: message || "Agent 任务失败，请重试",
+            taskId,
+            previous: previous ?? undefined,
+          });
+        }
+      },
+      onError: () => {
+        if (activeTaskIdRef.current === taskId) {
+          setState({
+            phase: "loading",
+            status: "RECONNECTING",
+            taskId,
+            mode,
+            previous: previous ?? undefined,
+          });
+        }
+      },
+      onDone: () => {
+        eventSourceRef.current = null;
+        void resolveAgentTask(taskId, {
+          final: true,
+          retries: 20,
+          mode,
+          previous,
+          successMessage,
+        });
+      },
+    });
+  }
+
+  async function generateWithAgent() {
+    if (!validateForm() || !canSubmit) return;
+    eventSourceRef.current?.close();
+    activeTaskIdRef.current = null;
+    resultLookupVersionRef.current += 1;
+    setCopied(false);
+    setActiveDocumentIndex(0);
+    setState({ phase: "loading", status: "PENDING", mode: "initial" });
+    scrollResultIntoView();
+
+    try {
+      const { taskId, status } = await submitProductAgreementDraft(form, locale);
+      activeTaskIdRef.current = taskId;
+      setState({ phase: "loading", status, taskId, mode: "initial" });
+      attachTaskStream(taskId, "initial");
+    } catch (err) {
+      setState({
+        phase: "error",
+        message: formatAgentError(err),
+      });
+    }
+  }
+
+  async function reviseWithAgent(instruction: string) {
+    const trimmed = instruction.trim();
+    if (!trimmed || !result || !currentTaskId || !canSubmit) return;
+    if (!validateForm()) return;
+
+    const previous = result;
+    eventSourceRef.current?.close();
+    activeTaskIdRef.current = currentTaskId;
+    resultLookupVersionRef.current += 1;
+    setFormError(null);
+    setAgentInstruction("");
+    setChatMessages((messages) => [
+      ...messages,
+      {
+        id: createMessageId(),
+        role: "user",
+        content: trimmed,
+      },
+    ]);
+    setState({
+      phase: "loading",
+      status: "STREAMING",
+      taskId: currentTaskId,
+      mode: "revision",
+      previous,
+    });
+    scrollResultIntoView();
+
+    try {
+      await sendProductAgreementRevision(currentTaskId, form, locale, trimmed, previous);
+      attachTaskStream(currentTaskId, "revision", previous, t("conversation.updated"));
+    } catch (err) {
+      const message = formatAgentError(err);
+      setState({
+        phase: "error",
+        message,
+        taskId: currentTaskId,
+        previous,
+      });
+      setChatMessages((messages) => [
+        ...messages,
+        {
+          id: createMessageId(),
+          role: "agent",
+          content: message,
+          tone: "error",
+        },
+      ]);
+    }
+  }
+
+  function reset() {
+    eventSourceRef.current?.close();
+    eventSourceRef.current = null;
+    activeTaskIdRef.current = null;
+    resultLookupVersionRef.current += 1;
+    setForm(defaultForm);
+    setState({ phase: "idle" });
+    setAgreementTab("starter");
+    setActiveSupplement("risk");
+    setActiveDocumentIndex(0);
+    setFormError(null);
+    setCopied(false);
+    setAgentInstruction("");
+    setChatMessages([]);
+  }
+
+  async function copyResult() {
+    if (!result) return;
+    try {
+      await navigator.clipboard.writeText(
+        stringifyAgentAgreementResult(result, {
+          reviewHeading: t("download.reviewHeading"),
+          riskHeading: t("download.riskHeading"),
+          missingInfoHeading: t("download.missingInfoHeading"),
+          jurisdictionHeading: t("download.jurisdictionHeading"),
+        }),
+      );
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setFormError(t("errors.copy"));
+    }
+  }
+
+  function downloadResult() {
+    if (!result) return;
+    const text = stringifyAgentAgreementResult(result, {
+      reviewHeading: t("download.reviewHeading"),
+      riskHeading: t("download.riskHeading"),
+      missingInfoHeading: t("download.missingInfoHeading"),
+      jurisdictionHeading: t("download.jurisdictionHeading"),
+    });
+    const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${form.productName || "product"}-agreement-drafts.txt`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+
+  function moduleInstruction(module: SupplementModule): string {
+    if (module === "publish") return t("revision.publishInstruction");
+    if (module === "risk") return t("revision.riskInstruction");
+    return t("revision.notesInstruction");
+  }
+
+  function scrollResultIntoView() {
+    window.setTimeout(() => {
+      resultSectionRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }, 0);
+  }
+
+  return (
+    <div className="grid gap-5">
+      <Tabs
+        value={agreementTab}
+        onValueChange={(value) => selectAgreementTab(value as AgreementTab)}
+      >
+        <TabsList
+          aria-label={t("agreementTypeLabel")}
+          className="grid h-auto w-full grid-cols-1 gap-2 rounded-none border-0 bg-transparent p-0 px-1 sm:grid-cols-3"
+        >
+          {agreementTabOrder.map((tab) => {
+            const tabCopy = copy.agreementTabs[tab];
+            return (
+              <TabsTrigger
+                key={tab}
+                value={tab}
+                className="min-h-16 w-full rounded-[1.25rem] border border-[#D8D4CA] bg-white px-5 text-base font-semibold text-[#555555] shadow-none transition hover:border-[#111111] hover:text-[#111111] data-[state=active]:border-[#B7FF3E] data-[state=active]:bg-[#F1FFD9] data-[state=active]:text-[#111111] data-[state=active]:shadow-[0_14px_28px_rgba(183,255,62,0.18)]"
+              >
+                {tabCopy.label}
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+      </Tabs>
+
+      <section className="overflow-hidden rounded-[1.75rem] border border-[#CFC9BC] bg-white shadow-[0_22px_60px_rgba(17,17,17,0.1)]">
+        <div className="bg-white p-5 md:p-7">
+          <div className="flex items-start gap-3">
+            <span className="flex size-11 shrink-0 items-center justify-center rounded-full bg-[#B7FF3E] text-[#111111]">
+              <ShieldCheck aria-hidden className="size-5" />
+            </span>
+            <div>
+              <p className="text-base font-semibold text-[#111111]">{t("formTitle")}</p>
+              <p className="mt-1 text-sm leading-6 text-[#666666]">{t("formHint")}</p>
+            </div>
+          </div>
+
+          <div className="mt-5 grid gap-5 lg:grid-cols-[minmax(0,31rem)_minmax(0,1fr)] lg:items-start">
+            <div className="rounded-[1.5rem] border border-[#E1DDD3] bg-white p-5">
+              <div className="grid content-start gap-5">
+                <Field label={t("productNameLabel")}>
+                  <Input
+                    className="h-12 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35"
+                    placeholder={t("productNamePlaceholder")}
+                    value={form.productName}
+                    onChange={(event) => update("productName", event.target.value)}
+                  />
+                </Field>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Field label={t("productTypeLabel")}>
+                    <Select
+                      value={form.productType}
+                      onValueChange={(value) =>
+                        update("productType", value as ProductAgreementProductType)
+                      }
+                    >
+                      <SelectTrigger className="h-12 w-full rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] text-[#111111] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {PRODUCT_AGREEMENT_PRODUCT_TYPES.map((type) => (
+                          <SelectItem key={type} value={type}>
+                            {copy.productTypes[type]}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </Field>
+                  <Field label={t("regionLabel")}>
+                    <Select
+                      value={form.primaryRegion}
+                      onValueChange={(value) =>
+                        update("primaryRegion", value as ProductAgreementRegion)
+                      }
+                    >
+                      <SelectTrigger className="h-12 w-full rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] text-[#111111] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {PRODUCT_AGREEMENT_REGIONS.map((region) => (
+                          <SelectItem key={region} value={region}>
+                            {copy.regions[region]}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </Field>
+                </div>
+
+                <Field label={t("descriptionLabel")}>
+                  <Textarea
+                    className="min-h-36 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35"
+                    placeholder={t("descriptionPlaceholder")}
+                    value={form.productDescription}
+                    onChange={(event) => update("productDescription", event.target.value)}
+                  />
+                </Field>
+
+                <MultiSelectMenu
+                  title={t("documentTitle")}
+                  placeholder={t("documentPlaceholder")}
+                  joiner={valueJoiner}
+                  options={PRODUCT_AGREEMENT_DOCUMENTS}
+                  values={form.documents}
+                  labels={copy.documentLabels}
+                  required
+                  onChange={(values) => update("documents", values)}
+                />
+
+                {formError ? (
+                  <p className="rounded-2xl border border-[#FFD2C2] bg-[#FFF4EC] px-4 py-3 text-sm font-semibold leading-6 text-[#8A260F]">
+                    {formError}
+                  </p>
+                ) : null}
+
+                <div className="grid gap-3 border-t border-[#ECE7DD] pt-5">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => void generateWithAgent()}
+                    disabled={!canSubmit}
+                    className="inline-flex min-h-12 w-full items-center justify-center rounded-full bg-[#111111] px-5 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-[#111111] disabled:pointer-events-none disabled:opacity-55"
+                  >
+                    {primaryActionLabel}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={reset}
+                    className="inline-flex min-h-12 w-fit items-center gap-2 rounded-full border border-[#CFC9BC] bg-white px-5 text-sm font-semibold text-[#111111] transition hover:-translate-y-0.5"
+                  >
+                    <RefreshCcw aria-hidden className="size-4" />
+                    {t("reset")}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <AgreementInputOutputPreview
+              form={form}
+              copy={copy}
+              preview={previewCopy}
+              joiner={valueJoiner}
+            />
+          </div>
+        </div>
+      </section>
+
+
+      <ResultShell
+        resultSectionRef={resultSectionRef}
+        state={state}
+        result={result}
+        activeDocument={activeDocument}
+        form={form}
+        copy={copy}
+        supplementModules={supplementModules}
+        revisionExamples={revisionExamples}
+        valueJoiner={valueJoiner}
+        activeSupplement={activeSupplement}
+        setActiveSupplement={setActiveSupplement}
+        setActiveDocumentIndex={setActiveDocumentIndex}
+        agentInstruction={agentInstruction}
+        setAgentInstruction={setAgentInstruction}
+        chatMessages={chatMessages}
+        copied={copied}
+        isRevising={isRevising}
+        canRevise={canRevise}
+        t={t}
+        update={update}
+        generateWithAgent={() => void generateWithAgent()}
+        reviseWithAgent={(instruction) => void reviseWithAgent(instruction)}
+        copyResult={() => void copyResult()}
+        downloadResult={downloadResult}
+        moduleInstruction={moduleInstruction}
+      />
+    </div>
+  );
+}