@tomako/tools-runtime 0.1.0

package/src/features/tools/social-platform-asset-adapter/widget/social-platform-asset-adapter.tsx

@@ -0,0 +1,641 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { Checkbox } from "@tomako/ui/checkbox";
+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 {
+    hasUsableSocialAssetMaterial,
+    socialPlatformAssetAdapterInputSchema,
+    type SocialAssetGoal,
+    type SocialAssetPlatform,
+    type SocialAssetTone,
+    type SocialPlatformAssetAdapterInput,
+} from "../../../../lib/tools/social-platform-asset-adapter-schema";
+import { cn } from "@tomako/ui/cn";
+import {
+    AlertTriangle,
+    ImagePlus,
+    Layers3,
+    Loader2,
+    Trash2,
+} from "lucide-react";
+import NextImage from "next/image";
+import { useMemo, useRef, useState } from "react";
+
+import {
+    fetchSocialPlatformAssetAdapterTask,
+    submitSocialPlatformAssetAdapter,
+} from "../../../../host/client";
+
+import {
+    designAssetAccept,
+    goals,
+    maxDesignAssetCount,
+    platforms,
+    tones,
+} from "./constants";
+import {
+    createMediaExports,
+    defaultInput,
+    delay,
+    formatBytes,
+    prepareDesignAsset,
+    stringifyAdapterResult,
+} from "./helpers";
+import { AdapterResult, MediaExportPanel } from "./result-shell";
+import type { AdapterState, DesignAsset, ImageUploadErrorCode, MediaExport } from "./types";
+
+export function SocialPlatformAssetAdapter() {
+  const locale = useLocale();
+  const language = locale === "en" ? "en" : "zh";
+  const t = useTranslations("toolsPages.socialPlatformAssetAdapter.widget");
+  const resultRef = useRef<HTMLDivElement>(null);
+  const designAssetInputRef = useRef<HTMLInputElement>(null);
+  const [input, setInput] = useState<SocialPlatformAssetAdapterInput>(() =>
+    defaultInput(language),
+  );
+  const [state, setState] = useState<AdapterState>({ phase: "idle" });
+  const [mediaExports, setMediaExports] = useState<MediaExport[]>([]);
+  const [isAdaptingMedia, setIsAdaptingMedia] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [imageError, setImageError] = useState<ImageUploadErrorCode | null>(null);
+
+  const isBusy =
+    isAdaptingMedia || state.phase === "submitting" || state.phase === "running";
+  const platformLabels = t.raw("platforms") as Record<SocialAssetPlatform, string>;
+  const goalLabels = t.raw("goals") as Record<SocialAssetGoal, string>;
+  const toneLabels = t.raw("tones") as Record<SocialAssetTone, string>;
+
+  const statusText = useMemo(() => {
+    if (state.phase === "submitting") return t("status.submitting");
+    if (state.phase === "running") return state.status;
+    if (state.phase === "done") return t("status.done");
+    if (state.phase === "error") return t("status.error");
+    return t("status.idle");
+  }, [state, t]);
+
+  function updateInput<T extends keyof SocialPlatformAssetAdapterInput>(
+    key: T,
+    value: SocialPlatformAssetAdapterInput[T],
+  ) {
+    setInput((prev) => ({ ...prev, [key]: value, language }));
+  }
+
+  function togglePlatform(platform: SocialAssetPlatform) {
+    setInput((prev) => {
+      const exists = prev.platforms.includes(platform);
+      const next = exists
+        ? prev.platforms.filter((item) => item !== platform)
+        : [...prev.platforms, platform];
+      return { ...prev, platforms: next, language };
+    });
+  }
+
+  function validateInput(): SocialPlatformAssetAdapterInput | null {
+    const parsed = socialPlatformAssetAdapterInputSchema.safeParse({
+      ...input,
+      language,
+    });
+    if (!parsed.success) return null;
+    if (!hasUsableSocialAssetMaterial(parsed.data)) return null;
+    return parsed.data;
+  }
+
+  async function addDesignAssets(fileList: FileList | null) {
+    const files = Array.from(fileList ?? []);
+    if (files.length === 0) return;
+
+    setImageError(null);
+    const availableSlots = maxDesignAssetCount - input.designAssets.length;
+    if (availableSlots <= 0) {
+      setImageError("tooMany");
+      return;
+    }
+
+    if (files.length > availableSlots) setImageError("tooMany");
+
+    const nextAssets: DesignAsset[] = [];
+    for (const file of files.slice(0, availableSlots)) {
+      try {
+        nextAssets.push(await prepareDesignAsset(file));
+      } catch (error) {
+        const code = error instanceof Error ? error.message : "cannotRead";
+        setImageError(
+          code === "unsupported" ||
+            code === "tooLarge" ||
+            code === "tooMany" ||
+            code === "compressedTooLarge"
+            ? code
+            : "cannotRead",
+        );
+      }
+    }
+
+    if (nextAssets.length > 0) {
+      setInput((prev) => ({
+        ...prev,
+        designAssets: [...prev.designAssets, ...nextAssets].slice(
+          0,
+          maxDesignAssetCount,
+        ),
+        language,
+      }));
+      setMediaExports([]);
+    }
+  }
+
+  function removeDesignAsset(id: string) {
+    setImageError(null);
+    setInput((prev) => ({
+      ...prev,
+      designAssets: prev.designAssets.filter((asset) => asset.id !== id),
+      language,
+    }));
+    setMediaExports((prev) => prev.filter((item) => !item.id.startsWith(id)));
+  }
+
+  async function pollUntilDone(taskId: string) {
+    for (let attempt = 0; attempt < 80; attempt += 1) {
+      const result = await fetchSocialPlatformAssetAdapterTask(taskId);
+
+      if (result.data) {
+        setState({ phase: "done", taskId, result: result.data });
+        setCopied(false);
+        return;
+      }
+
+      if (result.status === "FAILED") {
+        setState({ phase: "error", code: "taskFailed", detail: result.error, taskId });
+        return;
+      }
+
+      if (result.status === "RESULT_INVALID") {
+        setState({
+          phase: "error",
+          code:
+            result.error === "wrong_result_type"
+              ? "wrongResultType"
+              : "invalidResultSchema",
+          detail: result.error,
+          taskId,
+        });
+        return;
+      }
+
+      setState({
+        phase: "running",
+        taskId,
+        status:
+          result.status === "AWAITING_RESULT"
+            ? t("status.awaitingResult")
+            : result.status,
+      });
+      await delay(attempt < 8 ? 1400 : 2200);
+    }
+
+    setState({ phase: "error", code: "resultTimeout", taskId });
+  }
+
+  async function generateAssets() {
+    const parsed = validateInput();
+    window.setTimeout(
+      () => resultRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }),
+      50,
+    );
+
+    if (!parsed) {
+      setState({ phase: "error", code: "validation" });
+      setCopied(false);
+      return;
+    }
+
+    setState({ phase: "submitting" });
+    setCopied(false);
+    setMediaExports([]);
+
+    if (parsed.designAssets.length > 0) {
+      setIsAdaptingMedia(true);
+      try {
+        setMediaExports(
+          await createMediaExports(parsed.designAssets[0], parsed.platforms),
+        );
+      } catch {
+        setImageError("cannotRead");
+      } finally {
+        setIsAdaptingMedia(false);
+      }
+    }
+
+    try {
+      const { taskId } = await submitSocialPlatformAssetAdapter(parsed, locale);
+      setState({ phase: "running", taskId, status: t("status.running") });
+      await pollUntilDone(taskId);
+    } catch (error) {
+      setState({
+        phase: "error",
+        code: "submitFailed",
+        detail: error instanceof Error ? error.message : undefined,
+      });
+    }
+  }
+
+  function reset() {
+    setInput(defaultInput(language));
+    setState({ phase: "idle" });
+    setMediaExports([]);
+    setIsAdaptingMedia(false);
+    setCopied(false);
+    setImageError(null);
+  }
+
+  async function copyResult() {
+    if (state.phase !== "done") return;
+    await navigator.clipboard.writeText(stringifyAdapterResult(state.result));
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1600);
+  }
+
+  function downloadResult() {
+    if (state.phase !== "done") return;
+    const blob = new Blob([stringifyAdapterResult(state.result)], {
+      type: "text/markdown;charset=utf-8",
+    });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = "social-platform-assets.md";
+    anchor.click();
+    URL.revokeObjectURL(url);
+  }
+
+  function downloadMediaExport(item: MediaExport) {
+    const anchor = document.createElement("a");
+    anchor.href = item.dataUrl;
+    anchor.download = `${item.platform}-${item.width}x${item.height}.jpg`;
+    anchor.click();
+  }
+
+  return (
+    <div className="grid gap-6">
+      <section className="overflow-hidden rounded-[1.5rem] border border-[#D8D4CA] bg-white shadow-[0_18px_60px_rgba(17,17,17,0.08)]">
+        <div className="grid gap-0 lg:grid-cols-[minmax(0,0.95fr)_minmax(320px,0.65fr)]">
+          <form
+            className="bg-white p-5 md:p-7"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void generateAssets();
+            }}
+          >
+            <div className="mb-6">
+              <p className="inline-flex rounded-full bg-[#111111] px-3 py-1.5 text-xs font-semibold text-white">
+                {t("formTitle")}
+              </p>
+              <p className="mt-3 max-w-2xl text-sm leading-6 text-[#555555]">
+                {t("formHint")}
+              </p>
+            </div>
+
+            <div className="grid gap-4">
+              <div className="grid gap-4 md:grid-cols-2">
+                <Field label={t("sourceTitleLabel")}>
+                  <Textarea
+                    className="min-h-24 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                    onChange={(event) =>
+                      updateInput("sourceTitle", event.target.value)
+                    }
+                    placeholder={t("sourceTitlePlaceholder")}
+                    value={input.sourceTitle}
+                  />
+                </Field>
+                <Field label={t("sourceCopyLabel")}>
+                  <Textarea
+                    className="min-h-24 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                    onChange={(event) =>
+                      updateInput("sourceCopy", event.target.value)
+                    }
+                    placeholder={t("sourceCopyPlaceholder")}
+                    value={input.sourceCopy}
+                  />
+                </Field>
+                <div className="block md:col-span-2">
+                  <div className="mb-1.5 flex items-center justify-between gap-3">
+                    <span className="text-[12.5px] font-medium text-foreground">
+                      {t("designAssetsLabel")}
+                    </span>
+                    <span className="text-[11px] text-faint">
+                      {t("designAssetsHint", {
+                        count: input.designAssets.length,
+                        max: maxDesignAssetCount,
+                      })}
+                    </span>
+                  </div>
+                  <div className="rounded-2xl border border-dashed border-[#CFC9BC] bg-white p-3">
+                    <Input
+                      accept={designAssetAccept}
+                      className="sr-only"
+                      multiple
+                      onChange={(event) => {
+                        void addDesignAssets(event.currentTarget.files);
+                        event.currentTarget.value = "";
+                      }}
+                      ref={designAssetInputRef}
+                      type="file"
+                    />
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                      <p className="text-sm leading-6 text-[#777777]">
+                        {input.designAssets.length > 0
+                          ? t("designAssetsReady", {
+                              count: input.designAssets.length,
+                            })
+                          : t("designAssetsEmpty")}
+                      </p>
+                      <Button
+                        className="h-10 rounded-xl border-[#CFC9BC]"
+                        disabled={isBusy}
+                        onClick={() => designAssetInputRef.current?.click()}
+                        type="button"
+                        variant="outline"
+                      >
+                        <ImagePlus aria-hidden className="size-4" />
+                        {t("designAssetsButton")}
+                      </Button>
+                    </div>
+                    {imageError ? (
+                      <p className="mt-2 text-xs font-semibold text-[#A83A24]">
+                        {t(`imageErrors.${imageError}`)}
+                      </p>
+                    ) : null}
+                    {input.designAssets.length > 0 ? (
+                      <div className="mt-3 grid gap-2">
+                        {input.designAssets.map((asset) => (
+                          <div
+                            className="grid grid-cols-[72px_minmax(0,1fr)_auto] items-center gap-3 rounded-xl border border-[#E1DDD3] bg-[#F8F7F2] p-2"
+                            key={asset.id}
+                          >
+                            <NextImage
+                              alt={asset.name}
+                              className="h-14 w-[72px] rounded-lg border border-[#D8D4CA] object-cover"
+                              height={56}
+                              src={asset.dataUrl}
+                              unoptimized
+                              width={72}
+                            />
+                            <div className="min-w-0">
+                              <p className="truncate text-sm font-semibold text-[#111111]">
+                                {asset.name}
+                              </p>
+                              <p className="text-xs text-[#777777]">
+                                {t("designAssetMeta", {
+                                  width: asset.width,
+                                  height: asset.height,
+                                  size: formatBytes(asset.size),
+                                })}
+                              </p>
+                            </div>
+                            <Button
+                              aria-label={t("designAssetsRemove")}
+                              className="size-9 rounded-xl border-[#CFC9BC] p-0"
+                              disabled={isBusy}
+                              onClick={() => removeDesignAsset(asset.id)}
+                              type="button"
+                              variant="outline"
+                            >
+                              <Trash2 aria-hidden className="size-4" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+                <Field label={t("tagsLabel")}>
+                  <Textarea
+                    className="min-h-24 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                    onChange={(event) => updateInput("tags", event.target.value)}
+                    placeholder={t("tagsPlaceholder")}
+                    value={input.tags}
+                  />
+                </Field>
+              </div>
+
+              <Field label={t("platformsLabel")}>
+                <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+                  {platforms.map((platform) => {
+                    const selected = input.platforms.includes(platform);
+                    return (
+                      <label
+                        className={cn(
+                          "flex cursor-pointer items-center gap-3 rounded-2xl border p-3 text-sm font-semibold transition",
+                          selected
+                            ? "border-[#111111] bg-[#F1F0EA] shadow-[0_8px_18px_rgba(17,17,17,0.06)]"
+                            : "border-[#D8D4CA] bg-white hover:bg-[#F8F7F2]",
+                        )}
+                        key={platform}
+                      >
+                        <Checkbox
+                          checked={selected}
+                          className="border-[#8A857A] data-[state=checked]:border-[#111111] data-[state=checked]:bg-[#111111]"
+                          onCheckedChange={() => togglePlatform(platform)}
+                        />
+                        <span>{platformLabels[platform]}</span>
+                      </label>
+                    );
+                  })}
+                </div>
+              </Field>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <Field label={t("goalLabel")}>
+                  <Select
+                    onValueChange={(value) =>
+                      updateInput("campaignGoal", value as SocialAssetGoal)
+                    }
+                    value={input.campaignGoal}
+                  >
+                    <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {goals.map((goal) => (
+                        <SelectItem key={goal} value={goal}>
+                          {goalLabels[goal]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+
+                <Field label={t("toneLabel")}>
+                  <Select
+                    onValueChange={(value) =>
+                      updateInput("tone", value as SocialAssetTone)
+                    }
+                    value={input.tone}
+                  >
+                    <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white px-4 text-[15px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {tones.map((tone) => (
+                        <SelectItem key={tone} value={tone}>
+                          {toneLabels[tone]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </div>
+
+              <details className="rounded-2xl border border-[#D8D4CA] bg-[#F8F7F2] p-4">
+                <summary className="cursor-pointer text-sm font-semibold text-[#111111]">
+                  {t("advancedTitle")}
+                </summary>
+                <div className="mt-4 grid gap-4">
+                  <Field label={t("audienceLabel")}>
+                    <Textarea
+                      className="min-h-20 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                      onChange={(event) => updateInput("audience", event.target.value)}
+                      placeholder={t("audiencePlaceholder")}
+                      value={input.audience}
+                    />
+                  </Field>
+                  <Field label={t("constraintsLabel")}>
+                    <Textarea
+                      className="min-h-20 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                      onChange={(event) =>
+                        updateInput("constraints", event.target.value)
+                      }
+                      placeholder={t("constraintsPlaceholder")}
+                      value={input.constraints}
+                    />
+                  </Field>
+                </div>
+              </details>
+
+              <Button
+                className="h-12 w-full rounded-2xl bg-[#111111] px-5 text-[15px] text-white hover:bg-[#2A2A2A]"
+                disabled={isBusy}
+                type="submit"
+              >
+                {isBusy ? t("generating") : t("generate")}
+              </Button>
+            </div>
+          </form>
+
+          <aside className="grid content-between gap-5 border-t border-[#E1DDD3] bg-[#F8F7F2] p-5 md:p-7 lg:border-l lg:border-t-0">
+            <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5">
+              <div className="flex items-center justify-between gap-3">
+                <span className="rounded-full bg-[#111111] px-3 py-1 text-xs font-semibold text-white">
+                  {statusText}
+                </span>
+                {isBusy ? (
+                  <Loader2 aria-hidden className="size-5 animate-spin text-[#111111]" />
+                ) : (
+                  <Layers3 aria-hidden className="size-5 text-[#111111]" />
+                )}
+              </div>
+              <div className="mt-6 grid grid-cols-2 gap-3">
+                {(t.raw("previewCards") as readonly string[]).map((item) => (
+                  <div
+                    className="rounded-2xl border border-[#E1DDD3] bg-[#F8F7F2] p-3 text-sm font-semibold leading-5 text-[#3D3D3D]"
+                    key={item}
+                  >
+                    {item}
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="rounded-[1.25rem] border border-[#D8D4CA] bg-white p-4">
+              <h3 className="text-base font-semibold text-[#111111]">
+                {t("workspaceVisualTitle")}
+              </h3>
+              <p className="mt-2 text-sm leading-6 text-[#555555]">
+                {t("workspaceVisualBody")}
+              </p>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <section ref={resultRef}>
+        {state.phase === "idle" && mediaExports.length === 0 && !isAdaptingMedia ? null : (
+          <div className="grid gap-5">
+            <MediaExportPanel
+              isBusy={isAdaptingMedia}
+              items={mediaExports}
+              onDownload={downloadMediaExport}
+              platformLabels={platformLabels}
+              t={t}
+            />
+
+            {state.phase === "idle" ? null : (
+              <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_18px_60px_rgba(17,17,17,0.08)] md:p-7">
+                {state.phase === "submitting" || state.phase === "running" ? (
+                  <div className="grid gap-4 text-center">
+                    <Loader2
+                      aria-hidden
+                      className="mx-auto size-8 animate-spin text-[#111111]"
+                    />
+                    <h3 className="text-2xl font-semibold text-[#111111]">
+                      {state.phase === "submitting"
+                        ? t("resultPendingTitle")
+                        : state.status}
+                    </h3>
+                    <p className="mx-auto max-w-xl text-sm leading-6 text-[#555555]">
+                      {t("resultPendingHint")}
+                    </p>
+                  </div>
+                ) : null}
+
+                {state.phase === "error" ? (
+                  <div className="rounded-[1.25rem] border border-[#F1C2B8] bg-[#FFF1EC] p-5">
+                    <div className="flex items-start gap-3">
+                      <AlertTriangle
+                        aria-hidden
+                        className="mt-1 size-5 shrink-0 text-[#A83A24]"
+                      />
+                      <div>
+                        <h3 className="text-lg font-semibold text-[#7A2818]">
+                          {t(`errors.${state.code}.title`)}
+                        </h3>
+                        <p className="mt-2 text-sm leading-6 text-[#7A2818]">
+                          {t(`errors.${state.code}.body`)}
+                        </p>
+                        {state.taskId ? (
+                          <p className="mt-3 text-xs font-semibold text-[#7A2818]/72">
+                            {t("taskId", { taskId: state.taskId })}
+                          </p>
+                        ) : null}
+                      </div>
+                    </div>
+                  </div>
+                ) : null}
+
+                {state.phase === "done" ? (
+                  <AdapterResult
+                    copied={copied}
+                    onCopy={() => void copyResult()}
+                    onDownload={downloadResult}
+                    onReset={reset}
+                    platformLabels={platformLabels}
+                    result={state.result}
+                    t={t}
+                    taskId={state.taskId}
+                  />
+                ) : null}
+              </div>
+            )}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/features/tools/social-platform-asset-adapter/widget/types.ts

@@ -0,0 +1,40 @@
+import type {
+    SocialAssetPlatform,
+    SocialPlatformAssetAdapterInput,
+    SocialPlatformAssetAdapterResult,
+} from "../../../../lib/tools/social-platform-asset-adapter-schema";
+
+export type AdapterErrorCode =
+  | "validation"
+  | "submitFailed"
+  | "taskFailed"
+  | "resultTimeout"
+  | "wrongResultType"
+  | "invalidResultSchema";
+
+export type AdapterState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; taskId: string; status: string }
+  | { phase: "done"; taskId: string; result: SocialPlatformAssetAdapterResult }
+  | { phase: "error"; code: AdapterErrorCode; detail?: string; taskId?: string };
+
+export type DesignAsset = SocialPlatformAssetAdapterInput["designAssets"][number];
+
+export type MediaExport = {
+  id: string;
+  assetName: string;
+  platform: SocialAssetPlatform;
+  width: number;
+  height: number;
+  ratio: string;
+  dataUrl: string;
+  size: number;
+};
+
+export type ImageUploadErrorCode =
+  | "unsupported"
+  | "tooLarge"
+  | "tooMany"
+  | "cannotRead"
+  | "compressedTooLarge";