Lanjut ke konten
Samkarsa Logbook

Ketik untuk mencari…

↑↓untuk navigasi
Esc

Jualan v1.5.0-084: Smart Streamer Jump & Transformasi Visual Data Visualisation Catalogue di VibesChat

Implementasi Smart Streamer Jump untuk eliminasi tampilan script saat streaming, self-hosted Plotly, dan transformasi visual grafik bergaya Data Visualisation Catalogue.

1mnt baca

Rilis ini membawa pembaruan besar pada pengalaman visual grafik di VibesChat (blonjo-ui & mcp-server), menghapus seluruh kebocoran script mentah saat streaming, serta mentransformasikan tampilan visualisasi data ke standar The Data Visualisation Catalogue.

  • Kebocoran Script saat Typewriter Streaming: Saat AI menghasilkan grafik (```chart:plotly ... ```), efek animasi typewriter sebelumnya mengetik kode JSON huruf demi huruf di layar pengguna sebelum tag penutup ``` tiba, merusak estetika antarmuka.
  • Tampilan Script Mentah: Pada komponen grafik sebelumnya terdapat tombol toggle “Lihat Data Mentah” dan dump JSON pada error fallback yang menampilkan script internal.
  • Gaya Visual Default & Kaku: Grafik bawaan Plotly terasa teknis dengan garis grid vertikal penuh, ketiadaan badge taksonomi, dan format angka mentah.

  • Menambahkan deteksi awal rentang blok visual (visualBlockRanges) untuk format chart, plotly, mermaid, dot, graphml, dan cypher.
  • Saat interval streaming mencapai awal blok grafik, kursor streaming secara instan melompat (jump) ke akhir blok penutup (```).
  • Pengguna tidak lagi melihat baris kode diketik di layar; grafik visual langsung muncul utuh dan streaming teks naratif berlanjut mulus setelah grafik.

  • Header Editorial & Taksonomi:
    • Badge taksonomi otomatis: 📈 TREN WAKTU (LINE / SPLINE), 📊 KOMPARASI KATEGORI (BAR), 🍩 KOMPOSISI & PROPORSI (DONUT).
    • Judul analitik tebal dan kartu pill takeaway metrik kunci (misal: Total Belanja: Rp 188,1 Jt | Penjualan: Rp 182,2 Jt).
    • Tombol unduh PNG resolusi tinggi tanpa tombol toggle script mentah.
  • Polesan Kurva & Grid Minimalis:
    • Spline Smoothing: Garis tren melengkung halus dengan gradien transparan lembut (fill: 'tozeroy', opasitas 8%) di bawah garis.
    • Rounded Bar Caps: Ujung bar dibuat melengkung halus (cornerradius: 6).
    • Zero Vertical Grid: Garis grid vertikal dihilangkan sepenuhnya, hanya menyisakan garis horizontal titik-titik lembut (griddash: 'dot') untuk memaksimalkan rasio data-ke-tinta (Data-Ink Ratio).
    • Smart Hovertemplate: Format mata uang Indonesia yang presisi (<b>%{x}</b><br>Nominal: <b>Rp %{y:,.0f}</b>).

  • Library Plotly Basic disimpan langsung di server lokal (blonjo/public/plotly.min.js, 1.0 MB), menghilangkan latensi dan ketergantungan pada CDN eksternal dengan fallback aman.

  • Mengarahkan model AI untuk memilih tipe grafik sesuai fungsi komunikasi data (Line/Spline untuk multi-periode arus kas, Bar untuk komparasi produk/supplier, Donut untuk proporsi).