CustomUi

export interface CustomUi {
  library?: LibraryUI
  reportConsumption?: ReportConsumptionUI
  dossierConsumption?: DossierConsumptionUI
  botConsumption?: BotConsumptionUI
  dossierAuthoring?: DossierAuthoringUI
}

library?: {
  navigationBar?: {
    enabled?: boolean;
    sortAndFilter?: boolean;
    title?: boolean;
    searchBar?: boolean;
    createNew?: {
      enabled?: boolean;
    };
    notification?: boolean;
    multiSelect?: {
      enabled?: boolean;
    };
    account?: {
      enabled?: boolean;
    };
    user?: {
      enabled?: boolean;
    };
  };
  sidebar?: {
    enabled?: boolean;
    show?: boolean;
  };
}

reportConsumption?: {
  enabled?: boolean;
  goToLibrary?: boolean;
  pageBy?: boolean;
  reset?: boolean;
  reExecute?: boolean;
  filter?: boolean;
  rePrompt?: boolean;
  account?: {
    enabled?: boolean;
  };
  share?: {
    enabled?: boolean;
  };
}

dossierConsumption?: {
  navigationBar?: {
    enabled?: boolean;
    goToLibrary?: boolean;
    title?: boolean;
    toc?: boolean;
    reset?: boolean;
    reprompt?: boolean;
    share?: boolean;
    comment?: boolean;
    notification?: boolean;
    filter?: boolean;
    options?: boolean;
    bookmark?: boolean;
    undoRedo?: boolean;
    search?: boolean;
    edit?: boolean;
    dockedToc?: {
      isOpen?: boolean;
      isDocked?: boolean;
    };
  };
}

botConsumption?: {
  aiBot?: {
    titleBar?: {
      enabled?: boolean;
    };
    snapshotPanel?: {
      enabled?: boolean;
    };
    topicsPanel?: {
      enabled?: boolean;
    };
    chatPanel?: {
      showClearHistory?: boolean;
      showGiveTopics?: boolean;
      showWelcomePageBotImg?: boolean;
      showCopyBtn?: boolean;
      shouldLoadHistory?: boolean;
      shouldSaveToHistory?: boolean;
    };
  };
  navigationBar?: {
    enabled?: boolean;
  };
}

dossierAuthoring?: {
  toolbar?: {
    tableOfContents?: { visible?: boolean; };
    undo?: { visible?: boolean; };
    redo?: { visible?: boolean; };
    refresh?: { visible?: boolean; };
    save?: { visible?: boolean; };
    more?: { visible?: boolean; };
    nlp?: { visible?: boolean; };
    freeformLayout?: { visible?: boolean; };
    pauseDataRetrieval?: { visible?: boolean; };
    dividerLeft?: { visible?: boolean; };
    dividerRight?: { visible?: boolean; };
    addData?: { visible?: boolean; };
    addChapter?: { visible?: boolean; };
    addPage?: { visible?: boolean; };
    insertVisualization?: { visible?: boolean; };
    insertFilter?: { visible?: boolean; };
    insertText?: { visible?: boolean; };
    insertImage?: { visible?: boolean; };
    insertHtml?: { visible?: boolean; };
    insertShape?: { visible?: boolean; };
    insertStack?: { visible?: boolean; };
    insertInfoWindow?: { visible?: boolean; };
    responsiveViewEditor?: { visible?: boolean; };
    responsivePreview?: { visible?: boolean; };
  };
  menubar?: {
    library?: { visible?: boolean; };
  };
}

import { useMstrEmbedConfig } from "embed-dossier-mstr-react"

const MyDossierComponent = () => {
  const config = useMstrEmbedConfig({
    customUi: {
      dossierConsumption: {
        navigationBar: {
          enabled: true,
          title: true,
          toc: true,
          share: true,
          filter: false,
          options: true,
          dockedToc: {
            isOpen: true,
            isDocked: true,
          },
        },
      },
    },
  })

  return <div>{/* Your component using the config */}</div>
}