streaming-mindmap-rendering

Skill do implementacji dynamicznego renderowania map myśli za pomocą biblioteki Mind Elixir. Pozwala wyświetlać mapy, które rozrastają się na bieżąco w miarę generowania danych przez model AI lub pobierania ich ze strumienia. Obsługuje przyrostowe aktualizacje i parsowanie tekstu ze strumienia, co czyni go idealnym dla aplikacji webowych wymagających wizualizacji hierarchicznych danych w czasie rzeczywistym. Wymaga React lub innego frameworka frontendowego oraz biblioteki mind-elixir.

1. Zainstaluj bibliotekę mind-elixir w swoim projekcie poleceniem npm install mind-elixir.
2. Utwórz komponent React, który będzie opakowaniem dla mind-elixir. Zaimportuj MindElixir i hooki useEffect oraz useRef z React.
3. 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).
4. 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.
5. Zwróć element div z referencją elRef jako kontener mapy. Ustaw odpowiednie wymiary (wysokość i szerokość) dla wyświetlania mapy myśli.
6. 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.