@tomako/tools-runtime 0.1.0

package/src/features/tools/email-template-generator/widget/email-template-generator.tsx

@@ -0,0 +1,358 @@
+"use client";
+
+import { ChevronDown, Loader2 } from "lucide-react";
+import { useRef, useState } from "react";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import { copyTextToClipboard } from "../../../../components/tools/workspace/tool-result-file-actions";
+import { Button } from "@tomako/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@tomako/ui/collapsible";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    EMAIL_TEMPLATE_LANGUAGES,
+    EMAIL_TEMPLATE_SCENARIOS,
+    EMAIL_TEMPLATE_TONES,
+    emailTemplateInputSchema,
+    type EmailTemplateInput,
+    type EmailTemplateLanguage,
+    type EmailTemplateResult,
+    type EmailTemplateScenario,
+    type EmailTemplateTone,
+} from "../../../../lib/tools/email-template-generator-schema";
+import {
+    fetchEmailTemplateTask,
+    sendEmailTemplateRevision,
+    submitEmailTemplate,
+} from "../../../../host/client";
+
+import { defaultForm, fileBase, isPlaceholder, wait } from "./helpers";
+import { EmailPreviewPanel } from "./preview-panel";
+import type { CopyMap, ErrorCategory, FormState, WidgetState } from "./types";
+
+export function EmailTemplateGenerator() {
+  const t = useTranslations("toolsPages.emailTemplateGenerator.widget");
+  const locale = useLocale() as AppLocale;
+  const copy = t.raw("copy") as CopyMap;
+
+  const [form, setForm] = useState<FormState>(defaultForm);
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+  const [copied, setCopied] = useState<string | null>(null);
+  const [revision, setRevision] = useState("");
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const settledRef = useRef(false);
+  const taskWatch = useLegacyLlmTaskWatch<EmailTemplateResult>();
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((current) => ({ ...current, [key]: value }));
+  }
+
+  function cleanup() {
+    taskWatch.stop();
+  }
+
+  function finishDone(data: EmailTemplateResult, taskId: string) {
+    if (taskWatch.isCancelled() || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setState({ phase: "done", data, taskId });
+  }
+
+  function finishError(category: ErrorCategory, taskId?: string, previous?: EmailTemplateResult) {
+    if (taskWatch.isCancelled() || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setState({ phase: "error", category, taskId, previous });
+  }
+
+  function startWatch(taskId: string, previous?: EmailTemplateResult) {
+    setState({ phase: "running", status: "PENDING", taskId, previous });
+    void wait(80).then(() => {
+      resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+
+    taskWatch.start(
+      taskId,
+      async (id) => {
+        const result = await fetchEmailTemplateTask(id);
+        if (result.data) return { settled: true, kind: "success", data: result.data };
+        if (result.status === "FAILED") return { settled: true, kind: "error", category: "task" };
+        if (result.status === "RESULT_INVALID") return { settled: true, kind: "error", category: "schema" };
+        return { settled: false, pendingWriteback: true };
+      },
+      {
+        onStatus: (status) => {
+          if (!taskWatch.isCancelled() && !settledRef.current) {
+            setState({ phase: "running", status, taskId, previous });
+          }
+        },
+        onSuccess: (data) => finishDone(data, taskId),
+        onError: (category) => finishError(category, taskId, previous),
+      },
+      {
+        pollIntervalMs: 3500,
+        graceWindowMs: 300_000,
+      },
+    );
+  }
+
+  function validateInput(): EmailTemplateInput | null {
+    const parsed = emailTemplateInputSchema.safeParse(form);
+    if (!parsed.success || isPlaceholder(form.productName) || isPlaceholder(form.brief)) {
+      setFieldError(t("errors.invalid"));
+      return null;
+    }
+    setFieldError(null);
+    return parsed.data;
+  }
+
+  async function generateTemplate() {
+    const parsed = validateInput();
+    if (!parsed) return;
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "submitting" });
+
+    try {
+      const submitted = await submitEmailTemplate(parsed, locale);
+      startWatch(submitted.taskId);
+    } catch {
+      finishError("submit");
+    }
+  }
+
+  async function reviseTemplate(current: EmailTemplateResult, taskId: string) {
+    const parsed = validateInput();
+    if (!parsed || revision.trim().length < 6) {
+      setFieldError(t("errors.revision"));
+      return;
+    }
+    setFieldError(null);
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "running", status: "STREAMING", taskId, previous: current });
+
+    try {
+      await sendEmailTemplateRevision(taskId, parsed, locale, revision, current);
+      setRevision("");
+      startWatch(taskId, current);
+    } catch {
+      finishError("submit", taskId, current);
+    }
+  }
+
+  async function copyText(key: string, value: string) {
+    const copiedToClipboard = await copyTextToClipboard(value);
+    if (copiedToClipboard) {
+      setCopied(key);
+      window.setTimeout(() => setCopied(null), 1600);
+      return;
+    }
+    setFieldError(t("errors.copy"));
+  }
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+  const result = state.phase === "done" ? state.data : state.phase === "error" ? state.previous : undefined;
+  const taskId = state.phase === "done" ? state.taskId : state.phase === "error" ? state.taskId : undefined;
+  const status =
+    state.phase === "running"
+      ? t.has(`status.${state.status}`)
+        ? t(`status.${state.status}`)
+        : t("status.default")
+      : "";
+  const base = fileBase(form.productName);
+
+  return (
+    <div className="space-y-8">
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,0.78fr)_minmax(0,1.22fr)] lg:items-stretch">
+        <div className="flex min-w-0 flex-col rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_16px_38px_rgba(17,17,17,0.06)] md:p-6">
+          <div className="mb-5">
+            <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 className="grid gap-4">
+            <Field label={t("productNameLabel")}>
+              <Input
+                value={form.productName}
+                placeholder={t("productNamePlaceholder")}
+                onChange={(event) => update("productName", event.target.value)}
+                disabled={busy}
+              />
+            </Field>
+            <Field label={t("audienceLabel")}>
+              <Input
+                value={form.audience}
+                placeholder={t("audiencePlaceholder")}
+                onChange={(event) => update("audience", event.target.value)}
+                disabled={busy}
+              />
+            </Field>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field label={t("scenarioLabel")}>
+                <Select
+                  value={form.scenario}
+                  onValueChange={(value) => update("scenario", value as EmailTemplateScenario)}
+                  disabled={busy}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {EMAIL_TEMPLATE_SCENARIOS.map((scenario) => (
+                      <SelectItem key={scenario} value={scenario}>
+                        {copy.scenarios[scenario]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field label={t("languageLabel")}>
+                <Select
+                  value={form.language}
+                  onValueChange={(value) => update("language", value as EmailTemplateLanguage)}
+                  disabled={busy}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {EMAIL_TEMPLATE_LANGUAGES.map((language) => (
+                      <SelectItem key={language} value={language}>
+                        {copy.languages[language]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+            </div>
+            <Field label={t("briefLabel")}>
+              <Textarea
+                rows={6}
+                value={form.brief}
+                placeholder={t("briefPlaceholder")}
+                onChange={(event) => update("brief", event.target.value)}
+                disabled={busy}
+              />
+            </Field>
+
+            <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen} className="rounded-2xl border border-[#E1DDD3]">
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm font-semibold text-[#111111] transition hover:bg-[#F7F6F2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/20"
+                  disabled={busy}
+                >
+                  <span>{t("advancedTitle")}</span>
+                  <ChevronDown
+                    className={`size-4 text-[#666666] transition-transform ${advancedOpen ? "rotate-180" : ""}`}
+                    aria-hidden
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="grid gap-4 border-t border-[#E1DDD3] p-4">
+                  <Field label={t("toneLabel")}>
+                    <Select
+                      value={form.tone}
+                      onValueChange={(value) => update("tone", value as EmailTemplateTone)}
+                      disabled={busy}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {EMAIL_TEMPLATE_TONES.map((tone) => (
+                          <SelectItem key={tone} value={tone}>
+                            {copy.tones[tone]}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </Field>
+                  <Field label={t("ctaLabel")} hint={t("optional")}>
+                    <Input
+                      value={form.primaryCta}
+                      placeholder={t("ctaPlaceholder")}
+                      onChange={(event) => update("primaryCta", event.target.value)}
+                      disabled={busy}
+                    />
+                  </Field>
+                  <Field label={t("brandNotesLabel")} hint={t("optional")}>
+                    <Textarea
+                      rows={3}
+                      value={form.brandNotes}
+                      placeholder={t("brandNotesPlaceholder")}
+                      onChange={(event) => update("brandNotes", event.target.value)}
+                      disabled={busy}
+                    />
+                  </Field>
+                  <Field label={t("mustIncludeLabel")} hint={t("optional")}>
+                    <Textarea
+                      rows={3}
+                      value={form.mustInclude}
+                      placeholder={t("mustIncludePlaceholder")}
+                      onChange={(event) => update("mustInclude", event.target.value)}
+                      disabled={busy}
+                    />
+                  </Field>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+
+          {fieldError ? (
+            <p className="mt-4 rounded-xl bg-[#FFF4EC] px-3 py-2 text-sm font-semibold text-[#9A2C15]">
+              {fieldError}
+            </p>
+          ) : null}
+
+          <Button
+            type="button"
+            className="mt-5 min-h-11 w-full whitespace-normal bg-[#111111] text-white shadow-none hover:bg-[#2A2A2A]"
+            onClick={() => void generateTemplate()}
+            disabled={busy}
+          >
+            {busy ? (
+              <>
+                <Loader2 className="size-4 animate-spin" aria-hidden />
+                {state.phase === "submitting" ? t("submitting") : t("running")}
+              </>
+            ) : (
+              t("generate")
+            )}
+          </Button>
+        </div>
+
+        <EmailPreviewPanel
+          base={base}
+          busy={busy}
+          copied={copied}
+          form={form}
+          onCopyText={(key, value) => void copyText(key, value)}
+          onGenerate={() => void generateTemplate()}
+          onRevise={(current, id) => void reviseTemplate(current, id)}
+          resultRef={resultRef}
+          revision={revision}
+          setRevision={setRevision}
+          state={state}
+          status={status}
+          t={t}
+          taskId={taskId}
+          result={result}
+        />
+      </div>
+    </div>
+  );
+}

package/src/features/tools/email-template-generator/widget/helpers.ts

@@ -0,0 +1,39 @@
+import type { FormState } from "./types";
+
+export const defaultForm: FormState = {
+  productName: "",
+  audience: "",
+  brief: "",
+  scenario: "newsletter",
+  tone: "clear",
+  language: "zh",
+  primaryCta: "",
+  brandNotes: "",
+  mustInclude: "",
+};
+
+export function compact(value: string): string {
+  return value.trim().replace(/\s+/g, "").toLowerCase();
+}
+
+export function isPlaceholder(value: string): boolean {
+  const normalized = compact(value).replace(/[，。,.!?！？、:：;；"'""''()（）[\]{}]/g, "");
+  return (
+    /^(test|demo|example|placeholder|随便|测试|示例|占位)+$/i.test(normalized) ||
+    /^[\d._-]+$/.test(normalized) ||
+    new Set([...normalized]).size <= 2
+  );
+}
+
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export function fileBase(productName: string): string {
+  const slug = productName
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9\u4e00-\u9fa5]+/gi, "-")
+    .replace(/^-+|-+$/g, "");
+  return slug || "email-template";
+}

package/src/features/tools/email-template-generator/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const EmailTemplateGenerator = dynamic(() =>
+  import("./email-template-generator").then((module) => module.EmailTemplateGenerator),
+);