File Browser

pnpm add @reopt-ai/brandapp-sdk@4.2.0 \
  @reopt-ai/opt-filemanager@0.1.0

"use client";

import {
  FileManager,
  createBrandappFilesConnector,
} from "@reopt-ai/opt-filemanager";
import { useState } from "react";

// Import this once from an App Router page or layout.
import "@reopt-ai/opt-filemanager/styles.css";
import { createFileBrowserClient } from "./file-browser-client";

export function BrandappFileBrowser() {
  // Keep one connector instance so navigation state and the connector's
  // file/folder identity cache survive client re-renders.
  const [connector] = useState(() =>
    createBrandappFilesConnector({
      // This client only knows same-origin routes. BRANDAPP_CLIENT_SECRET
      // remains in a server-only SDK factory.
      client: createFileBrowserClient(),
    }),
  );

  return (
    <FileManager
      connector={connector}
      locale="en"
      initialSort={{ field: "name", order: "asc" }}
      initialViewMode="list"
      uploadConcurrency={3}
    />
  );
}