chore: import upstream snapshot with attribution

2026-07-13 13:00:43 +08:00
commit e4dcfc49aa
1668 changed files with 324490 additions and 0 deletions
@@ -0,0 +1,118 @@
+"use client";
+
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  summarizeVisualizeConfig,
+  type VisualizeFormConfig,
+} from "@/lib/visualize-types";
+import {
+  CollapsibleConfigSection,
+  Field,
+  INPUT_CLS,
+} from "@/components/chat/home/composer-field";
+
+interface VisualizeConfigPanelProps {
+  value: VisualizeFormConfig;
+  onChange: (next: VisualizeFormConfig) => void;
+  /**
+   * When provided, the panel is wrapped in a `CollapsibleConfigSection`.
+   * Omit both to render bare for the chat Activity panel.
+   */
+  collapsed?: boolean;
+  onToggleCollapsed?: () => void;
+}
+
+export default memo(function VisualizeConfigPanel({
+  value,
+  onChange,
+  collapsed,
+  onToggleCollapsed,
+}: VisualizeConfigPanelProps) {
+  const { t } = useTranslation();
+  const update = <K extends keyof VisualizeFormConfig>(
+    key: K,
+    val: VisualizeFormConfig[K],
+  ) => onChange({ ...value, [key]: val });
+
+  // Manim modes need extra knobs (render quality, style hint) — match what
+  // the legacy Animator panel exposed so users don't lose granularity when
+  // they pick "Animation" / "Storyboard" here.
+  const isManim =
+    value.render_mode === "manim_video" || value.render_mode === "manim_image";
+
+  const body = (
+    <>
+      <Field label={t("Render Mode")} width="w-[140px]">
+        <select
+          value={value.render_mode}
+          onChange={(e) =>
+            update(
+              "render_mode",
+              e.target.value as VisualizeFormConfig["render_mode"],
+            )
+          }
+          className={`${INPUT_CLS} w-full`}
+        >
+          <option value="auto">{t("Auto")}</option>
+          <option value="chartjs">{t("Chart.js")}</option>
+          <option value="svg">{t("SVG")}</option>
+          <option value="mermaid">{t("Mermaid")}</option>
+          <option value="html">{t("HTML")}</option>
+          <option value="manim_video">{t("Animation")}</option>
+          <option value="manim_image">{t("Storyboard")}</option>
+        </select>
+      </Field>
+
+      {isManim ? (
+        <>
+          <Field label={t("Quality")} width="w-[100px]">
+            <select
+              value={value.quality}
+              onChange={(e) =>
+                update(
+                  "quality",
+                  e.target.value as VisualizeFormConfig["quality"],
+                )
+              }
+              className={`${INPUT_CLS} w-full`}
+            >
+              <option value="low">{t("Low")}</option>
+              <option value="medium">{t("Medium")}</option>
+              <option value="high">{t("High")}</option>
+            </select>
+          </Field>
+
+          <Field label={t("Style Hint")} width="min-w-[160px] flex-1">
+            <input
+              type="text"
+              value={value.style_hint}
+              onChange={(e) => update("style_hint", e.target.value)}
+              placeholder={t("Style, pacing, color...")}
+              className={`${INPUT_CLS} w-full`}
+            />
+          </Field>
+        </>
+      ) : null}
+    </>
+  );
+
+  if (collapsed === undefined) {
+    return (
+      <div className="flex flex-wrap items-end gap-x-3 gap-y-2 px-3.5 py-2.5">
+        {body}
+      </div>
+    );
+  }
+
+  return (
+    <CollapsibleConfigSection
+      collapsed={collapsed}
+      summary={summarizeVisualizeConfig(value, t)}
+      onToggleCollapsed={onToggleCollapsed ?? (() => undefined)}
+      bodyClassName="flex flex-wrap items-end gap-x-3 gap-y-2 px-3.5 pb-2.5"
+    >
+      {body}
+    </CollapsibleConfigSection>
+  );
+});