S
streaming-mindmap-rendering
Implement real-time streaming mindmap rendering using Mind Elixir in web applications. Supports streaming text parsing and incremental updates.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Implement real-time streaming mindmap rendering using Mind Elixir in web applications. Supports streaming text parsing and incremental updates.
How to use
- Zainstaluj bibliotekę mind-elixir w swoim projekcie poleceniem npm install mind-elixir.
- Utwórz komponent React, który będzie opakowaniem dla mind-elixir. Zaimportuj MindElixir i hooki useEffect oraz useRef z React.
- W komponencie utwórz referencję do elementu DOM (elRef) oraz do instancji mind-elixir (meRef). W efekcie useEffect zainicjalizuj nową instancję MindElixir, przekazując element DOM i konfigurację (np. kierunek renderowania).
- Dodaj drugi efekt useEffect, który będzie nasłuchiwać zmian danych. Gdy dane się zmienią, wywołaj metodę refresh() na instancji mind-elixir, aby zaktualizować wizualizację mapy.
- Zwróć element div z referencją elRef jako kontener mapy. Ustaw odpowiednie wymiary (wysokość i szerokość) dla wyświetlania mapy myśli.
- Podłącz komponent do źródła danych ze strumienia (np. odpowiedź z API AI) i przekazuj dane jako prop — komponent automatycznie zaktualizuje mapę w miarę napływania nowych informacji.