@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/videos/app/components/NewCompositionPopover.tsx

@@ -1,192 +0,0 @@
-import {
-  PromptComposer,
-  useSendToAgentChat,
-  useT,
-} from "@agent-native/core/client";
-import { IconPlus } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-
-type NewCompositionPopoverProps = {
-  isNew: boolean;
-  onNavigate: (path: string) => void;
-  onGeneratingChange?: (generating: boolean) => void;
-};
-
-export function NewCompositionPopover({
-  isNew,
-  onNavigate,
-  onGeneratingChange,
-}: NewCompositionPopoverProps) {
-  const [open, setOpen] = useState(false);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [submitError, setSubmitError] = useState<string | null>(null);
-  const { send, codeRequiredDialog } = useSendToAgentChat();
-  const t = useT();
-
-  // Auto-save after the agent finishes generating a new composition
-  useEffect(() => {
-    if (!isGenerating) return;
-
-    const finish = () => {
-      setIsGenerating(false);
-      onGeneratingChange?.(false);
-      sessionStorage.removeItem("videos:new-composition-generating");
-      window.dispatchEvent(new CustomEvent("videos:new-composition-status"));
-      setTimeout(() => {
-        const match = window.location.pathname.match(/\/c\/([^/]+)/);
-        if (match && match[1] !== "new") {
-          try {
-            window.dispatchEvent(
-              new CustomEvent("videos.auto-save", {
-                detail: { compositionId: match[1] },
-              }),
-            );
-          } catch (error) {
-            console.error("[AI Auto-Save] Failed:", error);
-          }
-        }
-      }, 2000);
-    };
-
-    const handleChatRunning = (event: Event) => {
-      const detail = (event as CustomEvent).detail;
-      if (detail?.isRunning === false) finish();
-    };
-    const handleRunError = (event: Event) => {
-      const detail = (event as CustomEvent).detail;
-      const message =
-        typeof detail?.message === "string"
-          ? detail.message
-          : t("newComposition.runFailed");
-      sessionStorage.setItem("videos:new-composition-error", message);
-      finish();
-    };
-
-    window.addEventListener("agentNative.chatRunning", handleChatRunning);
-    window.addEventListener("agent-chat:run-error", handleRunError);
-    return () => {
-      window.removeEventListener("agentNative.chatRunning", handleChatRunning);
-      window.removeEventListener("agent-chat:run-error", handleRunError);
-    };
-  }, [isGenerating, onGeneratingChange, t]);
-
-  async function fileToDataUrl(file: File): Promise<string> {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = reject;
-      reader.readAsDataURL(file);
-    });
-  }
-
-  async function handleSubmit(text: string, files: File[]) {
-    const trimmed = text.trim();
-    if (!trimmed) return;
-    setSubmitError(null);
-
-    let context =
-      "The user wants to generate a new Videos composition. Use the Videos app's composition flow and actions, especially save-composition and navigate. Do not route this as an app source-code generation request unless the user explicitly asks to edit the app's code.";
-
-    const allowed = files.filter(
-      (f) => f.type.match(/^(image|video)\//) || f.name.endsWith(".svg"),
-    );
-    try {
-      if (allowed.length > 0) {
-        const attachments = await Promise.all(
-          allowed.map(async (f) => ({
-            name: f.name,
-            path: await fileToDataUrl(f),
-          })),
-        );
-        context +=
-          "\n\nAttached files:\n" +
-          attachments.map((a) => `- ${a.name}: ${a.path}`).join("\n");
-      }
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : t("newComposition.readFailed");
-      setSubmitError(message);
-      setIsGenerating(false);
-      onGeneratingChange?.(false);
-      return;
-    }
-
-    const result = send({
-      message: trimmed,
-      context,
-      submit: true,
-      type: "content",
-      newTab: true,
-    });
-    if (result === null) {
-      setSubmitError(t("newComposition.startFailed"));
-      setIsGenerating(false);
-      onGeneratingChange?.(false);
-      return;
-    }
-
-    setIsGenerating(true);
-    onGeneratingChange?.(true);
-    sessionStorage.setItem(
-      "videos:new-composition-generating",
-      String(Date.now()),
-    );
-    sessionStorage.removeItem("videos:new-composition-error");
-    window.dispatchEvent(new CustomEvent("videos:new-composition-status"));
-    setOpen(false);
-    onNavigate("/c/new");
-  }
-
-  return (
-    <>
-      {codeRequiredDialog}
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <button
-            className={cn(
-              "flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-dashed px-3 py-2.5 text-xs font-medium transition-all",
-              isNew
-                ? "border-primary/40 bg-primary/8 text-primary"
-                : "border-border text-muted-foreground hover:border-primary/30 hover:text-primary/80 hover:bg-primary/5",
-            )}
-          >
-            <IconPlus size={14} />
-            {t("newComposition.button")}
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="right"
-          align="start"
-          sideOffset={8}
-          className="w-[calc(100vw-2rem)] max-w-[420px] rounded-xl border-border bg-card p-3 shadow-xl sm:w-[420px]"
-        >
-          <div className="mb-2 px-1">
-            <h3 className="text-sm font-semibold text-foreground">
-              {t("newComposition.title")}
-            </h3>
-            <p className="mt-1 text-xs text-muted-foreground">
-              {t("newComposition.description")}
-            </p>
-          </div>
-          <PromptComposer
-            autoFocus
-            attachmentsEnabled
-            placeholder={t("newComposition.placeholder")}
-            draftScope="videos:new-composition"
-            onSubmit={handleSubmit}
-          />
-          {submitError ? (
-            <p className="mt-2 px-1 text-xs text-destructive">{submitError}</p>
-          ) : null}
-        </PopoverContent>
-      </Popover>
-    </>
-  );
-}

package/corpus/templates/videos/app/components/PropsEditor.tsx

@@ -1,210 +0,0 @@
-import { useT } from "@agent-native/core/client";
-
-import type { CompositionEntry } from "@/remotion/registry";
-
-type PropsEditorProps = {
-  composition: CompositionEntry;
-  props: Record<string, any>;
-  onPropsChange: (props: Record<string, any>) => void;
-};
-
-function renderField(
-  key: string,
-  value: any,
-  onChange: (key: string, value: any) => void,
-  depth = 0,
-): React.ReactNode {
-  if (Array.isArray(value)) {
-    return (
-      <div key={key} className="space-y-2">
-        <label className="block text-xs font-medium text-muted-foreground uppercase tracking-wider">
-          {key}
-        </label>
-        <div className="space-y-2 pl-3 border-l border-border">
-          {value.map((item, i) => (
-            <div key={i} className="space-y-1.5">
-              <span className="text-[10px] text-muted-foreground/60 font-mono">
-                [{i}]
-              </span>
-              {typeof item === "object" && item !== null ? (
-                <div className="space-y-1.5">
-                  {Object.entries(item).map(([k, v]) =>
-                    renderField(
-                      k,
-                      v,
-                      (subKey, subVal) => {
-                        const newArr = [...value];
-                        newArr[i] = { ...item, [subKey]: subVal };
-                        onChange(key, newArr);
-                      },
-                      depth + 1,
-                    ),
-                  )}
-                </div>
-              ) : (
-                renderField(
-                  String(i),
-                  item,
-                  (_, v) => {
-                    const newArr = [...value];
-                    newArr[i] = v;
-                    onChange(key, newArr);
-                  },
-                  depth + 1,
-                )
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  if (typeof value === "object" && value !== null) {
-    return (
-      <div key={key} className="space-y-2">
-        <label className="block text-xs font-medium text-muted-foreground uppercase tracking-wider">
-          {key}
-        </label>
-        <div className="space-y-1.5 pl-3 border-l border-border">
-          {Object.entries(value).map(([k, v]) =>
-            renderField(
-              k,
-              v,
-              (subKey, subVal) => {
-                onChange(key, { ...value, [subKey]: subVal });
-              },
-              depth + 1,
-            ),
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  // Color input
-  if (typeof value === "string" && /^#[0-9a-fA-F]{3,8}$/.test(value)) {
-    return (
-      <div key={key} className="flex items-center gap-2">
-        <label className="text-xs text-muted-foreground min-w-0 flex-shrink-0 capitalize">
-          {key}
-        </label>
-        <div className="flex items-center gap-1.5 flex-1 justify-end">
-          <input
-            type="color"
-            value={value}
-            onChange={(e) => onChange(key, e.target.value)}
-            className="w-6 h-6 rounded border border-border cursor-pointer bg-transparent"
-          />
-          <input
-            type="text"
-            value={value}
-            onChange={(e) => onChange(key, e.target.value)}
-            className="w-20 text-xs bg-secondary border border-border rounded px-2 py-1 text-foreground/80 font-mono focus:outline-none focus:ring-1 focus:ring-primary/40"
-          />
-        </div>
-      </div>
-    );
-  }
-
-  // String input
-  if (typeof value === "string") {
-    const isMultiline = value.includes("\n") || value.length > 40;
-    return (
-      <div key={key} className="space-y-1">
-        <label className="text-xs text-muted-foreground capitalize">
-          {key}
-        </label>
-        {isMultiline ? (
-          <textarea
-            value={value}
-            onChange={(e) => onChange(key, e.target.value)}
-            rows={3}
-            className="w-full text-xs bg-secondary border border-border rounded-lg px-3 py-2 text-foreground/80 resize-none focus:outline-none focus:ring-1 focus:ring-primary/40"
-          />
-        ) : (
-          <input
-            type="text"
-            value={value}
-            onChange={(e) => onChange(key, e.target.value)}
-            className="w-full text-xs bg-secondary border border-border rounded-lg px-3 py-2 text-foreground/80 focus:outline-none focus:ring-1 focus:ring-primary/40"
-          />
-        )}
-      </div>
-    );
-  }
-
-  // Number input
-  if (typeof value === "number") {
-    return (
-      <div key={key} className="flex items-center gap-2">
-        <label className="text-xs text-muted-foreground capitalize flex-shrink-0">
-          {key}
-        </label>
-        <input
-          type="number"
-          value={value}
-          onChange={(e) => onChange(key, Number(e.target.value))}
-          className="w-full text-xs bg-secondary border border-border rounded-lg px-3 py-2 text-foreground/80 font-mono focus:outline-none focus:ring-1 focus:ring-primary/40"
-        />
-      </div>
-    );
-  }
-
-  // Boolean
-  if (typeof value === "boolean") {
-    return (
-      <div key={key} className="flex items-center gap-2">
-        <label className="text-xs text-muted-foreground capitalize flex-1">
-          {key}
-        </label>
-        <button
-          onClick={() => onChange(key, !value)}
-          className={`w-8 h-5 rounded-full transition-colors ${
-            value ? "bg-primary" : "bg-secondary"
-          }`}
-        >
-          <div
-            className={`w-3.5 h-3.5 bg-white rounded-full transition-transform mx-0.5 ${
-              value ? "translate-x-3" : "translate-x-0"
-            }`}
-          />
-        </button>
-      </div>
-    );
-  }
-
-  return null;
-}
-
-export function PropsEditor({
-  composition,
-  props,
-  onPropsChange,
-}: PropsEditorProps) {
-  const t = useT();
-
-  const handleChange = (key: string, value: any) => {
-    onPropsChange({ ...props, [key]: value });
-  };
-
-  return (
-    <div className="space-y-3 p-4 border-t">
-      {/* Props fields */}
-      {Object.entries(props).length > 0 ? (
-        Object.entries(props).map(([key, value]) =>
-          renderField(key, value, handleChange),
-        )
-      ) : (
-        <div className="text-center py-6 px-4 bg-muted/30 rounded-lg border border-dashed border-border">
-          <p className="text-xs text-muted-foreground">
-            {t("raw.props.emptyTitle")}
-          </p>
-          <p className="text-xs text-muted-foreground/60 mt-1">
-            {t("raw.props.emptyDescription")}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}

package/corpus/templates/videos/app/components/QuestionFlow.tsx

@@ -1,40 +0,0 @@
-import {
-  GuidedQuestionFlow,
-  type GuidedQuestion,
-} from "@agent-native/core/client";
-import type { QuestionFlowQuestion } from "@shared/api";
-
-interface QuestionFlowProps {
-  questions: QuestionFlowQuestion[];
-  onSubmit: (answers: Record<string, any>) => void;
-  onSkip: () => void;
-  title?: string;
-  description?: string;
-  skipLabel?: string;
-  submitLabel?: string;
-}
-
-export function QuestionFlow({
-  questions,
-  onSubmit,
-  onSkip,
-  title,
-  description,
-  skipLabel,
-  submitLabel,
-}: QuestionFlowProps) {
-  return (
-    <GuidedQuestionFlow
-      questions={questions as GuidedQuestion[]}
-      onSubmit={onSubmit}
-      onSkip={onSkip}
-      title={title ?? "Tune the video before generation"}
-      description={
-        description ??
-        "Pick the animation direction, timing, and audience. Use Other when the preset choices miss."
-      }
-      skipLabel={skipLabel}
-      submitLabel={submitLabel}
-    />
-  );
-}