React Flow ve Yjs ile işbirlikçi AI belge düzenleme arayüzü

Breatic adlı bir React/TypeScript projesinde ilginç bir sorun çözülmüş: AI tarafından önerilen belge değişikliklerini gözden geçirenler, sadece "bu paragrafı değiştir" talimatını görmek yerine, tam olarak nelerin eklendiğini ve çıkarıldığını görebiliyor.

Proje, belge brifleri, React Flow canvas ve belge önerileri yapabilen bir ajanı birleştiriyor. Öneriler geldiğinde, sistem yapılandırılmış önerileri belge şemasına göre ayrıştırıyor ve kelime düzeyinde bir diff hesaplıyor. Gözden geçiren kişi ekleme ve çıkarmaları görsel olarak ayırt edebiliyor, bu çok daha net bir karar alma süreci sağlıyor.

UI kartı üç temel işlem sunuyor: hedefi bulma (belge içinde önerilen değişikliğin yerini gösterme), uygun önerileri yorum olarak ekleme, ve değişiklikleri doğrudan uygulama ya da ekleme. Bileşen, belge sürümü veya kart durumu değiştiğinde gösterilen durumu yeniden okuyor, bu işbirlikçi ortamlarda önemli, çünkü başka birinin aynı anda değişiklik yapabileceği riski var.

Yjs kullanarak gerçek zamanlı senkronizasyon sağlanmış. React Flow canvas üzerinde çalışan ekip, belgelere yapılan değişiklikleri anında görebiliyor. Kod yapısı, özellikle DocumentProposal bileşeninin diff mantığı, benzer işbirlikçi editör inşa edenler için referans olabilir.

Eğer React ile işbirlikçi arayüzler geliştiriyorsan, bu yaklaşım, kelime düzeyinde görselleştirme ve modüler aksiyonlar, uygulanabilir bir örnek sunuyor. Depo açık, kod incelenmeye hazır.