agent-desk-ng/web/app/(dashboard)/dashboard/knowledge/_components/knowledge-bulk-move-dialog.tsx

// Modified by the independent AgentDesk fork for support reliability and availability.
"use client";

import { useEffect, useMemo, useState } from "react";

import { OptionCombobox } from "@/components/option-combobox";
import { ProjectDialog } from "@/components/project-dialog";
import { Button } from "@/components/ui/button";
import {
  fetchKnowledgeDirectories,
  type KnowledgeDirectory,
} from "@/lib/api/admin";
import { useI18n } from "@/i18n/provider";

type KnowledgeBulkMoveDialogProps = {
  open: boolean;
  knowledgeBaseId: number;
  moving: boolean;
  selectedCount: number;
  onOpenChange: (open: boolean) => void;
  onSubmit: (directoryId: number) => void;
};

function flattenDirectoryOptions(
  directories: KnowledgeDirectory[],
): Array<{ value: string; label: string }> {
  const result: Array<{ value: string; label: string }> = [];
  for (const item of directories) {
    result.push({ value: String(item.id), label: item.name });
    for (const child of item.children ?? []) {
      result.push({ value: String(child.id), label: `${item.name} / ${child.name}` });
    }
  }
  return result;
}

export function KnowledgeBulkMoveDialog({
  open,
  knowledgeBaseId,
  moving,
  selectedCount,
  onOpenChange,
  onSubmit,
}: KnowledgeBulkMoveDialogProps) {
  const t = useI18n();
  const [directoryResult, setDirectoryResult] = useState<{
    knowledgeBaseId: number;
    directories: KnowledgeDirectory[];
  }>({ knowledgeBaseId, directories: [] });
  const [targetDirectoryId, setTargetDirectoryId] = useState("0");
  const [selectionScope, setSelectionScope] = useState({ knowledgeBaseId, open });

  // A new base or dialog opening is a new selection session. Reset before the
  // children render, rather than exposing the previous target for one frame.
  if (selectionScope.knowledgeBaseId !== knowledgeBaseId || selectionScope.open !== open) {
    setSelectionScope({ knowledgeBaseId, open });
    setTargetDirectoryId("0");
  }

  useEffect(() => {
    if (!open) {
      return;
    }
    let active = true;
    fetchKnowledgeDirectories(knowledgeBaseId)
      .then((result) => {
        if (active) setDirectoryResult({ knowledgeBaseId, directories: result });
      })
      .catch((error) => {
        if (!active) return;
        console.error(error);
        setDirectoryResult({ knowledgeBaseId, directories: [] });
      });
    return () => { active = false; };
  }, [knowledgeBaseId, open]);

  const directoryOptions = useMemo(() => [
    { value: "0", label: t("knowledge.rootContent") },
    ...flattenDirectoryOptions(directoryResult.knowledgeBaseId === knowledgeBaseId ? directoryResult.directories : []),
  ], [directoryResult, knowledgeBaseId, t]);

  return (
    <ProjectDialog
      open={open}
      onOpenChange={onOpenChange}
      title={t("knowledge.batchMove")}
      description={t("knowledge.batchMoveDescription", { count: selectedCount })}
      size="sm"
      footer={
        <>
          <Button
            type="button"
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={moving}
          >
            {t("knowledge.cancel")}
          </Button>
          <Button
            type="button"
            onClick={() => onSubmit(Number(targetDirectoryId))}
            disabled={moving || selectedCount <= 0}
          >
            {moving ? t("knowledge.moving") : t("knowledge.move")}
          </Button>
        </>
      }
    >
      <div className="space-y-2">
        <div className="text-sm font-medium">{t("knowledge.targetDirectory")}</div>
        <OptionCombobox
          value={targetDirectoryId}
          onChange={(value) => setTargetDirectoryId(value ?? "0")}
          options={directoryOptions}
          placeholder={t("knowledge.selectDirectory")}
          searchPlaceholder={t("knowledge.searchDirectory")}
          emptyText={t("knowledge.emptyDirectory")}
        />
      </div>
    </ProjectDialog>
  );
}