@tomako/tools-runtime 0.1.0

package/src/features/tools/user-interview-insight-report-generator/user-interview-insight-report-generator.container.tsx

@@ -0,0 +1,23 @@
+import { createGuideStackContainer } from "../../../features/tools/shared/create-guide-stack-container";
+import { UserInterviewInsightReportGenerator } from "./widget";
+
+export const UserInterviewInsightReportGeneratorContainer =
+  createGuideStackContainer({
+    guideNamespace: "toolsPages.userInterviewInsightReportGenerator.guide",
+    Widget: UserInterviewInsightReportGenerator,
+    assets: {
+      hero: "/tools/user-interview-insight-report-generator-hero-pseo.webp",
+      support:
+        "/tools/user-interview-insight-report-generator-support-pseo.webp",
+      failure:
+        "/tools/user-interview-insight-report-generator-failure-pseo.webp",
+      resultUse:
+        "/tools/user-interview-insight-report-generator-result-use-pseo.webp",
+      standard:
+        "/tools/user-interview-insight-report-generator-standard-pseo.webp",
+    },
+    cta: {
+      primaryHref: "/tools/user-interview-guide-generator",
+      secondaryHref: "/tools/user-interview-record-generator",
+    },
+  });

package/src/features/tools/user-interview-insight-report-generator/user-interview-insight-report-generator.spec.ts

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const userInterviewInsightReportGeneratorSpec: ToolSpec = {
+  slug: "user-interview-insight-report-generator",
+  toolType: "analyzer",
+  seo: {
+    "publishedAt": "2026-06-29",
+    "updatedAt": "2026-06-30",
+    "readingTime": "8 min",
+    "featured": false,
+    "ogImage": "/tools/user-interview-insight-report-generator-hero-pseo.webp"
+  },
+  widget: {"id":"user-interview-insight-report-generator","mode":"custom"},
+};

package/src/features/tools/user-interview-insight-report-generator/widget/constants.ts

@@ -0,0 +1,8 @@
+import type { InterviewInsightInput } from "../../../../lib/tools/user-interview.schema";
+
+export const defaultForm: InterviewInsightInput = {
+  recordsText: "",
+  researchGoal: "",
+  decisionToMake: "",
+  language: "zh",
+};

package/src/features/tools/user-interview-insight-report-generator/widget/helpers.ts

@@ -0,0 +1,4 @@
+
+export function delay(ms: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}

package/src/features/tools/user-interview-insight-report-generator/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const UserInterviewInsightReportGenerator = dynamic(() =>
+  import("./user-interview-insight-report-generator").then((module) => module.UserInterviewInsightReportGenerator),
+);

package/src/features/tools/user-interview-insight-report-generator/widget/preview-panels.tsx

@@ -0,0 +1,55 @@
+"use client";
+import {
+    Target
+} from "lucide-react";
+
+export function PanelTitle({
+  icon: Icon,
+  title,
+}: {
+  icon: typeof Target;
+  title: string;
+}) {
+  return (
+    <div className="mb-4 flex items-center gap-2">
+      <span className="flex size-9 items-center justify-center rounded-full bg-[#F2C66D] text-[#111111]">
+        <Icon aria-hidden className="size-4" />
+      </span>
+      <h3 className="text-lg font-semibold text-[#111111]">{title}</h3>
+    </div>
+  );
+}
+
+export function ListPanel({
+  emptyLabel,
+  icon,
+  items,
+  title,
+}: {
+  emptyLabel: string;
+  icon: typeof Target;
+  items: readonly string[];
+  title: string;
+}) {
+  return (
+    <section className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+      <PanelTitle icon={icon} title={title} />
+      <ul className="grid gap-2">
+        {items.length ? (
+          items.map((item) => (
+            <li
+              className="rounded-2xl border border-[#E1DDD3] bg-[#F7F6F2] px-3 py-2 text-sm leading-6 text-[#3D3D3D]"
+              key={item}
+            >
+              {item}
+            </li>
+          ))
+        ) : (
+          <li className="rounded-2xl border border-[#E1DDD3] bg-[#F7F6F2] px-3 py-2 text-sm leading-6 text-[#777777]">
+            {emptyLabel}
+          </li>
+        )}
+      </ul>
+    </section>
+  );
+}

package/src/features/tools/user-interview-insight-report-generator/widget/result-shell.tsx

@@ -0,0 +1,122 @@
+"use client";
+import {
+    ToolResultActions,
+    ToolResultHeader
+} from "../../../../components/tools/workspace";
+import { useTranslations } from "../../../../i18n/client";
+import {
+    type UserInterviewInsightReportResult
+} from "../../../../lib/tools/user-interview.schema";
+import {
+    AlertTriangle,
+    BarChart3,
+    CheckCircle2,
+    GitBranch,
+    Lightbulb,
+    Map,
+    MessageSquareQuote,
+    ShieldAlert,
+    Target,
+    Users,
+    WalletCards
+} from "lucide-react";
+import { ListPanel, PanelTitle } from "./preview-panels";
+
+export function InsightResult({
+  copied,
+  data,
+  emptyLabel,
+  onCopy,
+  onReset,
+  t,
+  taskId,
+}: {
+  copied: boolean;
+  data: UserInterviewInsightReportResult;
+  emptyLabel: string;
+  onCopy: () => void;
+  onReset: () => void;
+  t: ReturnType<typeof useTranslations>;
+  taskId: string;
+}) {
+  return (
+    <div className="grid gap-5">
+      <ToolResultHeader
+        actions={
+          <ToolResultActions
+            copied={copied}
+            copiedLabel={t("copied")}
+            copyLabel={t("copy")}
+            onCopy={onCopy}
+            onReset={onReset}
+            resetLabel={t("reset")}
+          />
+        }
+        body={t("taskId", { taskId })}
+        eyebrow={t("resultReady")}
+        title={data.executiveSummary[0] || t("fallbackReportTitle")}
+      />
+
+      <ListPanel
+        emptyLabel={emptyLabel}
+        icon={BarChart3}
+        items={data.executiveSummary}
+        title={t("executiveSummary")}
+      />
+      <ListPanel
+        emptyLabel={emptyLabel}
+        icon={Users}
+        items={data.participantSegments}
+        title={t("participantSegments")}
+      />
+
+      <section className="rounded-[1.35rem] border border-[#E1DDD3] bg-white p-5">
+        <PanelTitle icon={GitBranch} title={t("themeClusters")} />
+        <div className="grid gap-3">
+          {data.themeClusters.map((theme) => (
+            <article
+              className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F7F6F2] p-4"
+              key={theme.theme}
+            >
+              <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
+                <h4 className="text-base font-semibold text-[#111111]">
+                  {theme.theme}
+                </h4>
+                <span className="w-fit rounded-full bg-[#F2C66D] px-3 py-1.5 text-xs font-semibold text-[#111111]">
+                  {t("confidence")}: {theme.confidence}
+                </span>
+              </div>
+              <ListPanel
+                emptyLabel={emptyLabel}
+                icon={MessageSquareQuote}
+                items={theme.evidence}
+                title={t("evidence")}
+              />
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ListPanel emptyLabel={emptyLabel} icon={Target} items={data.painPointRanking} title={t("painPointRanking")} />
+        <ListPanel emptyLabel={emptyLabel} icon={Map} items={data.alternativeMap} title={t("alternativeMap")} />
+      </div>
+      <ListPanel emptyLabel={emptyLabel} icon={ShieldAlert} items={data.evidenceStrength} title={t("evidenceStrength")} />
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ListPanel emptyLabel={emptyLabel} icon={Lightbulb} items={data.opportunityMap} title={t("opportunityMap")} />
+        <ListPanel emptyLabel={emptyLabel} icon={Target} items={data.mvpRecommendation} title={t("mvpRecommendation")} />
+      </div>
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ListPanel emptyLabel={emptyLabel} icon={WalletCards} items={data.pricingSignals} title={t("pricingSignals")} />
+        <ListPanel emptyLabel={emptyLabel} icon={MessageSquareQuote} items={data.messagingSignals} title={t("messagingSignals")} />
+      </div>
+      <ListPanel emptyLabel={emptyLabel} icon={Lightbulb} items={data.nextExperiments} title={t("nextExperiments")} />
+      <ListPanel emptyLabel={emptyLabel} icon={ShieldAlert} items={data.risksAndUnknowns} title={t("risksAndUnknowns")} />
+      <div className="grid gap-4 xl:grid-cols-3">
+        <ListPanel emptyLabel={emptyLabel} icon={ShieldAlert} items={data.sampleLimitations} title={t("sampleLimitations")} />
+        <ListPanel emptyLabel={emptyLabel} icon={AlertTriangle} items={data.missingInfo} title={t("missingInfo")} />
+        <ListPanel emptyLabel={emptyLabel} icon={CheckCircle2} items={data.reviewChecklist} title={t("reviewChecklist")} />
+      </div>
+    </div>
+  );
+}

package/src/features/tools/user-interview-insight-report-generator/widget/types.ts

@@ -0,0 +1,16 @@
+import type { UserInterviewInsightReportResult } from "../../../../lib/tools/user-interview.schema";
+
+export type ErrorCode =
+  | "validation"
+  | "submitFailed"
+  | "taskFailed"
+  | "resultTimeout"
+  | "wrongResultType"
+  | "invalidResultSchema";
+
+export type ReportState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; taskId: string; status: string }
+  | { phase: "done"; taskId: string; data: UserInterviewInsightReportResult }
+  | { phase: "error"; code: ErrorCode; taskId?: string; detail?: string };

package/src/features/tools/user-interview-insight-report-generator/widget/user-interview-insight-report-generator.tsx

@@ -0,0 +1,293 @@
+"use client";
+import {
+    ToolErrorPanel,
+    ToolFormShell,
+    copyTextToClipboard
+} from "../../../../components/tools/workspace";
+import { Button } from "@tomako/ui/button";
+import { Field, Textarea } from "@tomako/ui/input";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import { hasMultipleInterviewRecords } from "../../../../lib/tools/input-quality";
+import { stringifyUserInterviewInsightReport } from "../../../../lib/tools/user-interview.format";
+import {
+    interviewInsightInputSchema,
+    type InterviewInsightInput
+} from "../../../../lib/tools/user-interview.schema";
+import {
+    fetchUserInterviewInsightReportTask,
+    submitUserInterviewInsightReport,
+} from "../../../../host/client";
+import {
+    BarChart3,
+    ClipboardList,
+    Loader2
+} from "lucide-react";
+import Image from "next/image";
+import { useRef, useState } from "react";
+import { defaultForm } from "./constants";
+import { delay } from "./helpers";
+import { InsightResult } from "./result-shell";
+import type { ReportState } from "./types";
+
+export function UserInterviewInsightReportGenerator() {
+  const locale = useLocale();
+  const t = useTranslations(
+    "toolsPages.userInterviewInsightReportGenerator.widget",
+  );
+  const language = locale === "en" ? "en" : "zh";
+  const resultRef = useRef<HTMLDivElement>(null);
+  const [form, setForm] = useState<InterviewInsightInput>({
+    ...defaultForm,
+    language,
+  });
+  const [state, setState] = useState<ReportState>({ phase: "idle" });
+  const [recordsError, setRecordsError] = useState<string | undefined>();
+  const [copied, setCopied] = useState(false);
+  const isBusy = state.phase === "submitting" || state.phase === "running";
+
+  function update<K extends keyof InterviewInsightInput>(
+    key: K,
+    value: InterviewInsightInput[K],
+  ) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+    if (key === "recordsText") setRecordsError(undefined);
+  }
+
+  function validate(): InterviewInsightInput | null {
+    const parsed = interviewInsightInputSchema.safeParse({ ...form, language });
+    if (!parsed.success) {
+      setRecordsError(t("fieldErrors.recordsText"));
+      return null;
+    }
+    if (!hasMultipleInterviewRecords(parsed.data.recordsText)) {
+      setRecordsError(t("fieldErrors.recordsText"));
+      return null;
+    }
+    setRecordsError(undefined);
+    return parsed.data;
+  }
+
+  async function pollUntilDone(taskId: string) {
+    for (let attempt = 0; attempt < 80; attempt += 1) {
+      const result = await fetchUserInterviewInsightReportTask(taskId);
+      if (result.data) {
+        setState({ phase: "done", taskId, data: 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 generate() {
+    const parsed = validate();
+    if (!parsed) {
+      setState({ phase: "idle" });
+      return;
+    }
+
+    setState({ phase: "submitting" });
+    setCopied(false);
+    window.setTimeout(
+      () => resultRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }),
+      50,
+    );
+
+    try {
+      const { taskId } = await submitUserInterviewInsightReport(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() {
+    setForm({ ...defaultForm, language });
+    setRecordsError(undefined);
+    setState({ phase: "idle" });
+    setCopied(false);
+  }
+
+  async function copyReport() {
+    if (state.phase !== "done") return;
+    const didCopy = await copyTextToClipboard(
+      stringifyUserInterviewInsightReport(state.data),
+    );
+    if (didCopy) {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    }
+  }
+
+  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 lg:grid-cols-[minmax(0,0.95fr)_minmax(320px,0.65fr)]">
+          <ToolFormShell
+            className="bg-white p-5 md:p-7"
+            hint={t("formHint")}
+            icon={<ClipboardList aria-hidden className="size-4 text-[#F2C66D]" />}
+            onSubmit={(event) => {
+              event.preventDefault();
+              void generate();
+            }}
+            title={t("formTitle")}
+          >
+            <div className="grid gap-4">
+              <Field error={recordsError} label={t("recordsLabel")}>
+                <Textarea
+                  aria-invalid={Boolean(recordsError)}
+                  className="min-h-80 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                  onChange={(event) => update("recordsText", event.target.value)}
+                  placeholder={t("recordsPlaceholder")}
+                  value={form.recordsText}
+                />
+              </Field>
+              <details className="rounded-2xl border border-[#D8D4CA] bg-white p-4">
+                <summary className="cursor-pointer text-sm font-semibold text-[#111111]">
+                  {t("advancedTitle")}
+                </summary>
+                <p className="mt-2 text-sm leading-6 text-[#666666]">
+                  {t("advancedHint")}
+                </p>
+                <div className="mt-4 grid gap-4">
+                  <Field label={t("researchGoalLabel")}>
+                    <Textarea
+                      className="min-h-20 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                      onChange={(event) => update("researchGoal", event.target.value)}
+                      placeholder={t("researchGoalPlaceholder")}
+                      value={form.researchGoal}
+                    />
+                  </Field>
+                  <Field label={t("decisionLabel")}>
+                    <Textarea
+                      className="min-h-20 rounded-2xl border-[#CFC9BC] bg-white px-4 py-3 text-[15px]"
+                      onChange={(event) =>
+                        update("decisionToMake", event.target.value)
+                      }
+                      placeholder={t("decisionPlaceholder")}
+                      value={form.decisionToMake}
+                    />
+                  </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>
+          </ToolFormShell>
+
+          <aside className="grid content-between gap-5 border-t border-[#E8E4DB] bg-[#F8F7F2] p-5 md:p-7 lg:border-l lg:border-t-0">
+            <figure className="relative overflow-hidden rounded-[1.5rem] bg-[#F7F6F2]">
+              <Image
+                src="/tools/user-interview-insight-report-generator-workspace-pseo.webp"
+                alt={t("workspaceVisualAlt")}
+                width={1672}
+                height={941}
+                sizes="(min-width: 1024px) 420px, 100vw"
+                className="block h-auto w-full"
+              />
+              <figcaption className="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1.5 text-xs font-semibold text-white shadow-[0_10px_24px_rgba(17,17,17,0.18)]">
+                {isBusy ? (
+                  <Loader2 aria-hidden className="size-3.5 animate-spin text-[#F2C66D]" />
+                ) : (
+                  <BarChart3 aria-hidden className="size-3.5 text-[#F2C66D]" />
+                )}
+                {state.phase === "running"
+                  ? state.status
+                  : t(`status.${state.phase}`)}
+              </figcaption>
+            </figure>
+            <div className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F8F7F2] 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" ? 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" ? (
+              <ToolErrorPanel
+                body={t(`errors.${state.code}.body`)}
+                detail={state.detail}
+                taskId={state.taskId}
+                taskIdLabel={
+                  state.taskId ? t("taskId", { taskId: state.taskId }) : undefined
+                }
+                title={t(`errors.${state.code}.title`)}
+              />
+            ) : null}
+            {state.phase === "done" ? (
+              <InsightResult
+                copied={copied}
+                data={state.data}
+                emptyLabel={t("noEvidence")}
+                onCopy={() => void copyReport()}
+                onReset={reset}
+                t={t}
+                taskId={state.taskId}
+              />
+            ) : null}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/features/tools/user-interview-record-generator/user-interview-record-generator.container.tsx

@@ -0,0 +1,18 @@
+import { createGuideStackContainer } from "../../../features/tools/shared/create-guide-stack-container";
+import { UserInterviewRecordGenerator } from "./widget";
+
+export const UserInterviewRecordGeneratorContainer = createGuideStackContainer({
+  guideNamespace: "toolsPages.userInterviewRecordGenerator.guide",
+  Widget: UserInterviewRecordGenerator,
+  assets: {
+    hero: "/tools/user-interview-record-generator-hero-pseo.webp",
+    support: "/tools/user-interview-record-generator-support-pseo.webp",
+    failure: "/tools/user-interview-record-generator-failure-pseo.webp",
+    resultUse: "/tools/user-interview-record-generator-result-use-pseo.webp",
+    standard: "/tools/user-interview-record-generator-standard-pseo.webp",
+  },
+  cta: {
+    primaryHref: "/tools/user-interview-insight-report-generator",
+    secondaryHref: "/tools/user-interview-guide-generator",
+  },
+});

package/src/features/tools/user-interview-record-generator/user-interview-record-generator.spec.ts

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const userInterviewRecordGeneratorSpec: ToolSpec = {
+  slug: "user-interview-record-generator",
+  toolType: "analyzer",
+  seo: {
+    "publishedAt": "2026-06-29",
+    "updatedAt": "2026-06-30",
+    "readingTime": "7 min",
+    "featured": false,
+    "ogImage": "/tools/user-interview-record-generator-hero-pseo.webp"
+  },
+  widget: {"id":"user-interview-record-generator","mode":"custom"},
+};

package/src/features/tools/user-interview-record-generator/widget/constants.ts

@@ -0,0 +1,9 @@
+import type { InterviewTranscriptInput } from "../../../../lib/tools/user-interview.schema";
+
+export const defaultForm: InterviewTranscriptInput = {
+  transcript: "",
+  productContext: "",
+  researchGoal: "",
+  participantContext: "",
+  language: "zh",
+};

package/src/features/tools/user-interview-record-generator/widget/helpers.ts

@@ -0,0 +1,4 @@
+
+export function delay(ms: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}

package/src/features/tools/user-interview-record-generator/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const UserInterviewRecordGenerator = dynamic(() =>
+  import("./user-interview-record-generator").then((module) => module.UserInterviewRecordGenerator),
+);

package/src/features/tools/user-interview-record-generator/widget/preview-panels.tsx

@@ -0,0 +1,48 @@
+"use client";
+import {
+    FileText
+} from "lucide-react";
+
+export function PanelTitle({
+  icon: Icon,
+  title,
+}: {
+  icon: typeof FileText;
+  title: string;
+}) {
+  return (
+    <div className="mb-4 flex items-center gap-2">
+      <span className="flex size-9 items-center justify-center rounded-full bg-[#F2C66D] text-[#111111]">
+        <Icon aria-hidden className="size-4" />
+      </span>
+      <h3 className="text-lg font-semibold text-[#111111]">{title}</h3>
+    </div>
+  );
+}
+
+export function EvidenceList({
+  items,
+  emptyLabel,
+}: {
+  items: readonly string[];
+  emptyLabel: string;
+}) {
+  return (
+    <ul className="grid gap-2">
+      {items.length ? (
+        items.map((item) => (
+          <li
+            className="rounded-2xl border border-[#E1DDD3] bg-white px-3 py-2 text-sm leading-6 text-[#3D3D3D]"
+            key={item}
+          >
+            {item}
+          </li>
+        ))
+      ) : (
+        <li className="rounded-2xl border border-[#E1DDD3] bg-white px-3 py-2 text-sm leading-6 text-[#777777]">
+          {emptyLabel}
+        </li>
+      )}
+    </ul>
+  );
+}