@tomako/tools-runtime 0.1.0

package/src/features/tools/commercial-bp-generator/widget/commercial-bp-generator.tsx

@@ -0,0 +1,676 @@
+"use client";
+
+import {
+    ImageIcon,
+    Loader2,
+    Upload,
+    X
+} from "lucide-react";
+import Image from "next/image";
+import { type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+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, TabsContent, TabsList, TabsTrigger } from "@tomako/ui/tabs";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    COMMERCIAL_BP_DENSITIES,
+    COMMERCIAL_BP_LANGUAGES,
+    COMMERCIAL_BP_MAX_REFERENCE_IMAGES,
+    COMMERCIAL_BP_PURPOSES,
+    COMMERCIAL_BP_STYLE_PRESETS,
+    type CommercialBpDensity,
+    type CommercialBpInput,
+    type CommercialBpLanguage,
+    type CommercialBpPurpose,
+    type CommercialBpReferenceImage,
+    type CommercialBpResult,
+    commercialBpInputSchema
+} from "../../../../lib/tools/commercial-bp-generator-schema";
+import { fetchImageGenerationResult } from "../../../../host/client";
+import {
+    type LlmTaskWatchPollOutcome,
+    fetchCommercialBpTask,
+    sendCommercialBpRevision,
+    submitCommercialBp,
+} from "../../../../host/client";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+    GRACE_WINDOW_MS,
+    IMAGE_STATUS_POLL_MS,
+    POLL_INTERVAL_MS,
+    defaultForm,
+} from "./constants";
+import {
+    formatBytes,
+    isPlaceholder,
+    mergeImageTaskResult,
+    normalizeReferenceImage,
+    wait
+} from "./helpers";
+import { ResultShell } from "./result-shell";
+import { StyleOption } from "./style-option";
+import type {
+    CopyMap,
+    ErrorCategory,
+    FormState,
+    WidgetState,
+} from "./types";
+
+export function CommercialBpGenerator() {
+  const t = useTranslations("toolsPages.commercialBpGenerator.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 [referenceError, setReferenceError] = useState<string | null>(null);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+  const [revision, setRevision] = useState("");
+
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const referenceInputRef = useRef<HTMLInputElement | null>(null);
+  const cancelledRef = useRef(false);
+  const imagePollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const settledRef = useRef(false);
+  const latestResultRef = useRef<CommercialBpResult | undefined>(undefined);
+  const { start: startTaskWatch, stop: stopTaskWatch } =
+    useLegacyLlmTaskWatch<CommercialBpResult>();
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((current) => ({ ...current, [key]: value }));
+  }
+
+  async function addReferenceImages(event: ChangeEvent<HTMLInputElement>) {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = "";
+    if (!files.length) return;
+
+    const remaining = COMMERCIAL_BP_MAX_REFERENCE_IMAGES - form.referenceImages.length;
+    if (remaining <= 0) {
+      setReferenceError(t("errors.referenceImageLimit"));
+      return;
+    }
+
+    setReferenceError(files.length > remaining ? t("errors.referenceImageLimit") : null);
+    const selectedFiles = files.slice(0, remaining);
+    const nextImages: CommercialBpReferenceImage[] = [];
+
+    for (const file of selectedFiles) {
+      try {
+        nextImages.push(await normalizeReferenceImage(file));
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "read";
+        setReferenceError(
+          message === "type"
+            ? t("errors.referenceImageType")
+            : message === "size"
+              ? t("errors.referenceImageSize")
+              : message === "large"
+                ? t("errors.referenceImageLarge")
+                : t("errors.referenceImageRead"),
+        );
+      }
+    }
+
+    if (nextImages.length) {
+      setForm((current) => ({
+        ...current,
+        referenceImages: [...current.referenceImages, ...nextImages].slice(
+          0,
+          COMMERCIAL_BP_MAX_REFERENCE_IMAGES,
+        ),
+      }));
+    }
+  }
+
+  function removeReferenceImage(id: string) {
+    setReferenceError(null);
+    setForm((current) => ({
+      ...current,
+      referenceImages: current.referenceImages.filter((image) => image.id !== id),
+    }));
+  }
+
+  const cleanup = useCallback(() => {
+    stopTaskWatch();
+    if (imagePollTimerRef.current) clearInterval(imagePollTimerRef.current);
+    imagePollTimerRef.current = null;
+  }, [stopTaskWatch]);
+
+  useEffect(() => {
+    return () => {
+      cancelledRef.current = true;
+      cleanup();
+    };
+  }, [cleanup]);
+
+  function finishDone(data: CommercialBpResult, taskId: string) {
+    if (cancelledRef.current || settledRef.current) return;
+    if (data.resultStatus !== "final") {
+      latestResultRef.current = data;
+      setState({ phase: "running", status: "AWAITING_FINAL", taskId, data });
+      return;
+    }
+    settledRef.current = true;
+    cleanup();
+    latestResultRef.current = data;
+    setState({ phase: "done", data, taskId });
+  }
+
+  function finishError(category: ErrorCategory, taskId?: string) {
+    if (cancelledRef.current || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setState({ phase: "error", category, taskId, previous: latestResultRef.current });
+  }
+
+  async function pollOnce(taskId: string): Promise<LlmTaskWatchPollOutcome> {
+    const result = await fetchCommercialBpTask(taskId);
+    if (cancelledRef.current || settledRef.current) {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+
+    if (result.data) {
+      latestResultRef.current = result.data;
+      setState({ phase: "running", status: result.status, taskId, data: result.data });
+      if (result.data.resultStatus === "final") {
+        return { settled: true as const, kind: "success" as const, data: result.data };
+      }
+      return { settled: false as const, pendingWriteback: true as const };
+    }
+    if (result.status === "FAILED") {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+    if (result.status === "RESULT_INVALID") {
+      return { settled: true as const, kind: "error" as const, category: "schema" as const };
+    }
+    setState({ phase: "running", status: result.status, taskId, data: latestResultRef.current });
+    return { settled: false as const };
+  }
+
+  function startWatch(taskId: string) {
+    latestResultRef.current = undefined;
+    setState({ phase: "running", status: "PENDING", taskId });
+    void wait(80).then(() => {
+      resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+    startTaskWatch(
+      taskId,
+      pollOnce,
+      {
+        onStatus: (status) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState({ phase: "running", status, taskId, data: latestResultRef.current });
+          }
+        },
+        onSuccess: (data) => finishDone(data, taskId),
+        onError: (category) => finishError(category === "timeout" ? "timeout" : category, taskId),
+      },
+      { pollIntervalMs: POLL_INTERVAL_MS, graceWindowMs: GRACE_WINDOW_MS },
+    );
+  }
+
+  function validateInput(): CommercialBpInput | null {
+    const parsed = commercialBpInputSchema.safeParse(form);
+    const weakManual = form.contextMode === "manual" && isPlaceholder(form.productContext);
+    const weakManualFields =
+      form.contextMode === "manual" &&
+      (isPlaceholder(form.productName) ||
+        isPlaceholder(form.positioning) ||
+        isPlaceholder(form.targetUsers));
+    if (
+      !parsed.success ||
+      weakManualFields ||
+      weakManual
+    ) {
+      setFieldError(t("errors.invalid"));
+      return null;
+    }
+    setFieldError(null);
+    return parsed.data;
+  }
+
+  async function generateDeck() {
+    const parsed = validateInput();
+    if (!parsed) return;
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "submitting" });
+
+    try {
+      const submitted = await submitCommercialBp(parsed, locale);
+      startWatch(submitted.taskId);
+    } catch {
+      finishError("submit");
+    }
+  }
+
+  async function reviseDeck(current: CommercialBpResult, taskId: string) {
+    const parsed = validateInput();
+    if (!parsed || revision.trim().length < 6) {
+      setFieldError(t("errors.revision"));
+      return;
+    }
+    setFieldError(null);
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    latestResultRef.current = current;
+    setState({ phase: "running", status: "STREAMING", taskId, data: current });
+
+    try {
+      await sendCommercialBpRevision(taskId, parsed, locale, revision, current);
+      setRevision("");
+      startWatch(taskId);
+    } catch {
+      finishError("submit", taskId);
+    }
+  }
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+  const selectedStyle = useMemo(() => form.stylePreset, [form.stylePreset]);
+  const currentResult =
+    state.phase === "done"
+      ? state.data
+      : state.phase === "running"
+        ? state.data
+        : state.phase === "error"
+          ? state.previous
+          : undefined;
+
+  useEffect(() => {
+    const pendingTaskIds = [
+      ...new Set(
+        (currentResult?.slides ?? [])
+          .filter((slide) => slide.imageTaskId && !slide.imageUrl && slide.status !== "failed")
+          .map((slide) => slide.imageTaskId as string),
+      ),
+    ];
+
+    if (!pendingTaskIds.length) {
+      if (imagePollTimerRef.current) clearInterval(imagePollTimerRef.current);
+      imagePollTimerRef.current = null;
+      return;
+    }
+
+    let disposed = false;
+
+    async function refreshImageTasks() {
+      for (const imageTaskId of pendingTaskIds) {
+        try {
+          const imageResult = await fetchImageGenerationResult(imageTaskId);
+          if (disposed || !["SUCCEEDED", "FAILED", "PROCESSING", "PENDING"].includes(imageResult.status)) {
+            continue;
+          }
+          setState((current) => {
+            const result =
+              current.phase === "done"
+                ? current.data
+                : current.phase === "running"
+                  ? current.data
+                  : current.phase === "error"
+                    ? current.previous
+                    : undefined;
+            if (!result) return current;
+            const nextResult = mergeImageTaskResult(
+              result,
+              imageTaskId,
+              imageResult.status,
+              imageResult.imageUrl,
+            );
+            latestResultRef.current = nextResult;
+            if (current.phase === "done") return { ...current, data: nextResult };
+            if (current.phase === "running") return { ...current, data: nextResult };
+            if (current.phase === "error") return { ...current, previous: nextResult };
+            return current;
+          });
+        } catch {}
+      }
+    }
+
+    void refreshImageTasks();
+    if (imagePollTimerRef.current) clearInterval(imagePollTimerRef.current);
+    imagePollTimerRef.current = setInterval(() => void refreshImageTasks(), IMAGE_STATUS_POLL_MS);
+
+    return () => {
+      disposed = true;
+    };
+  }, [currentResult?.slides]);
+
+  return (
+    <div className="max-w-full overflow-hidden">
+      <div className="space-y-8">
+      <div className="grid min-w-0 gap-6 lg:grid-cols-[0.92fr_1.08fr] lg:items-start">
+        <div className="min-w-0 rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_16px_38px_rgba(17,17,17,0.06)] md:p-6">
+          <Tabs
+            value={form.contextMode}
+            onValueChange={(value) => update("contextMode", value as FormState["contextMode"])}
+            className="min-w-0 w-full"
+          >
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="url" disabled={busy}>
+                {t("urlMode")}
+              </TabsTrigger>
+              <TabsTrigger value="manual" disabled={busy}>
+                {t("manualMode")}
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="url" className="mt-4">
+              <Field label={t("productUrlLabel")}>
+                <Input
+                  value={form.productUrl}
+                  placeholder={t("productUrlPlaceholder")}
+                  onChange={(event) => update("productUrl", event.target.value)}
+                  disabled={busy}
+                />
+              </Field>
+            </TabsContent>
+            <TabsContent value="manual" className="mt-4">
+              <Field label={t("productContextLabel")}>
+                <Textarea
+                  rows={5}
+                  value={form.productContext}
+                  placeholder={t("productContextPlaceholder")}
+                  onChange={(event) => update("productContext", event.target.value)}
+                  disabled={busy}
+                />
+              </Field>
+            </TabsContent>
+          </Tabs>
+
+          <div className="mt-5 grid min-w-0 gap-4">
+            {form.contextMode === "manual" ? (
+              <>
+                <Field label={t("productNameLabel")}>
+                  <Input
+                    value={form.productName}
+                    placeholder={t("productNamePlaceholder")}
+                    onChange={(event) => update("productName", event.target.value)}
+                    disabled={busy}
+                  />
+                </Field>
+                <Field label={t("positioningLabel")}>
+                  <Input
+                    value={form.positioning}
+                    placeholder={t("positioningPlaceholder")}
+                    onChange={(event) => update("positioning", event.target.value)}
+                    disabled={busy}
+                  />
+                </Field>
+                <Field label={t("targetUsersLabel")}>
+                  <Input
+                    value={form.targetUsers}
+                    placeholder={t("targetUsersPlaceholder")}
+                    onChange={(event) => update("targetUsers", event.target.value)}
+                    disabled={busy}
+                  />
+                </Field>
+              </>
+            ) : null}
+            <div className="grid gap-4 sm:grid-cols-3">
+              <Field label={t("purposeLabel")}>
+                <Select
+                  value={form.purpose}
+                  onValueChange={(value) => update("purpose", value as CommercialBpPurpose)}
+                  disabled={busy}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {COMMERCIAL_BP_PURPOSES.map((purpose) => (
+                      <SelectItem key={purpose} value={purpose}>
+                        {copy.purposes[purpose]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field label={t("densityLabel")}>
+                <Select
+                  value={form.density}
+                  onValueChange={(value) => update("density", value as CommercialBpDensity)}
+                  disabled={busy}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {COMMERCIAL_BP_DENSITIES.map((density) => (
+                      <SelectItem key={density} value={density}>
+                        {copy.densities[density]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field label={t("languageLabel")}>
+                <Select
+                  value={form.language}
+                  onValueChange={(value) => update("language", value as CommercialBpLanguage)}
+                  disabled={busy}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {COMMERCIAL_BP_LANGUAGES.map((language) => (
+                      <SelectItem key={language} value={language}>
+                        {copy.languages[language]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+            </div>
+
+            <div className="min-w-0 overflow-hidden">
+              <div className="mb-2 flex items-center justify-between">
+                <p className="text-[12.5px] font-medium text-foreground">{t("styleLabel")}</p>
+                <p className="text-[11px] text-faint">{t("styleHint")}</p>
+              </div>
+              <div className="w-full min-w-0 overflow-hidden">
+                <div className="flex w-full min-w-0 gap-3 overflow-x-auto px-1 pb-2 [scrollbar-width:thin]">
+                  {COMMERCIAL_BP_STYLE_PRESETS.map((preset) => (
+                    <StyleOption
+                      key={preset}
+                      preset={preset}
+                      selected={selectedStyle === preset}
+                      copy={copy}
+                      disabled={busy}
+                      onSelect={() => update("stylePreset", preset)}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <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>
+
+            <div className="min-w-0">
+              <div className="mb-1.5 flex items-center justify-between">
+                <span className="text-[12.5px] font-medium text-foreground">
+                  {t("referenceImagesLabel")}
+                </span>
+                <span className="text-[11px] text-faint">{t("optional")}</span>
+              </div>
+              <input
+                ref={referenceInputRef}
+                type="file"
+                accept="image/png,image/jpeg,image/webp"
+                multiple
+                className="hidden"
+                onChange={(event) => void addReferenceImages(event)}
+                disabled={busy || form.referenceImages.length >= COMMERCIAL_BP_MAX_REFERENCE_IMAGES}
+              />
+              <div className="rounded-[1rem] border border-dashed border-[#D8D4CA] bg-[#F7F6F2] p-3">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="min-w-0">
+                    <p className="text-sm font-semibold text-[#111111]">
+                      {form.referenceImages.length
+                        ? t("referenceImagesCount", {
+                            count: form.referenceImages.length,
+                            max: COMMERCIAL_BP_MAX_REFERENCE_IMAGES,
+                          })
+                        : t("referenceImagesEmpty")}
+                    </p>
+                    <p className="mt-1 text-xs leading-5 text-[#666666]">
+                      {t("referenceImagesHint")}
+                    </p>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="min-h-10 shrink-0"
+                    onClick={() => referenceInputRef.current?.click()}
+                    disabled={busy || form.referenceImages.length >= COMMERCIAL_BP_MAX_REFERENCE_IMAGES}
+                  >
+                    <Upload className="size-4" aria-hidden />
+                    {t("referenceImagesButton")}
+                  </Button>
+                </div>
+
+                {form.referenceImages.length ? (
+                  <div className="mt-3 grid min-w-0 gap-2 sm:grid-cols-2">
+                    {form.referenceImages.map((referenceImage) => (
+                      <div
+                        key={referenceImage.id}
+                        className="flex min-w-0 items-center gap-3 rounded-xl border border-[#E1DDD3] bg-white p-2"
+                      >
+                        <div className="relative size-14 shrink-0 overflow-hidden rounded-lg bg-[#EEEAE0]">
+                          <Image
+                            src={referenceImage.dataUrl}
+                            alt={referenceImage.name}
+                            fill
+                            unoptimized
+                            sizes="56px"
+                            className="object-cover"
+                          />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-xs font-semibold text-[#111111]">
+                            {referenceImage.name}
+                          </p>
+                          <p className="mt-0.5 text-[11px] text-[#777777]">
+                            {t("referenceImageMeta", {
+                              width: referenceImage.width,
+                              height: referenceImage.height,
+                              size: formatBytes(referenceImage.size),
+                            })}
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          className="flex size-8 shrink-0 items-center justify-center rounded-full text-[#777777] transition hover:bg-[#F1EFE8] hover:text-[#111111] disabled:opacity-50"
+                          onClick={() => removeReferenceImage(referenceImage.id)}
+                          disabled={busy}
+                          aria-label={t("removeReferenceImage", { name: referenceImage.name })}
+                        >
+                          <X className="size-4" aria-hidden />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="mt-3 flex items-center gap-2 rounded-xl bg-white px-3 py-2 text-xs text-[#777777]">
+                    <ImageIcon className="size-4" aria-hidden />
+                    <span>{t("referenceImagesPlaceholder")}</span>
+                  </div>
+                )}
+              </div>
+              {referenceError ? (
+                <p className="mt-2 text-xs font-semibold text-[#9A2C15]">{referenceError}</p>
+              ) : null}
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <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>
+              <Field label={t("mustAvoidLabel")} hint={t("optional")}>
+                <Textarea
+                  rows={3}
+                  value={form.mustAvoid}
+                  placeholder={t("mustAvoidPlaceholder")}
+                  onChange={(event) => update("mustAvoid", event.target.value)}
+                  disabled={busy}
+                />
+              </Field>
+            </div>
+          </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 hover:bg-[#2A2A2A]"
+            onClick={() => void generateDeck()}
+            disabled={busy}
+          >
+            {busy ? (
+              <>
+                <Loader2 className="size-4 animate-spin" aria-hidden />
+                {state.phase === "submitting" ? t("submitting") : t("running")}
+              </>
+            ) : (
+              t("generate")
+            )}
+          </Button>
+        </div>
+
+        <div className="min-w-0 overflow-hidden rounded-[1.5rem] border border-[#D8D4CA] bg-[#F7F6F2] shadow-[0_16px_38px_rgba(17,17,17,0.04)]">
+          <Image
+            src="/tools/commercial-bp-generator-workspace.webp"
+            alt={t("workspaceVisualAlt")}
+            width={1600}
+            height={1000}
+            sizes="(min-width: 1024px) 50vw, 100vw"
+            priority
+            className="aspect-[16/10] h-auto w-full object-cover"
+          />
+        </div>
+      </div>
+
+      <div ref={resultRef} className="scroll-mt-24">
+        <ResultShell
+          state={state}
+          t={t}
+          busy={busy}
+          revision={revision}
+          setRevision={setRevision}
+          onRetry={() => void generateDeck()}
+          onRevise={(result, taskId) => void reviseDeck(result, taskId)}
+        />
+      </div>
+      </div>
+    </div>
+  );
+}