1. Genel Bakış

Bu ekran, Kuika AI ile etkileşim kurulan chat panelidir. Kullanıcılar bu panel üzerinden:

• AI ile sohbet edebilir,
• Hızlı aksiyonları başlatabilir,
• Dosya / görsel yükleyebilir,
• Sesli giriş kullanabilir,
• Agent / Plan modları arasında geçiş yapabilir.

2. Ne İşe Yarar?

Bu panel, uygulama geliştirme veya yönetim süreçlerinde AI destekli komutlar vermek için kullanılır. Kullanıcı:

• Doğrudan komut yazabilir,
• Ön tanımlı aksiyonları seçebilir,
• UI üzerinden bağlamsal işlem başlatabilir.

3. Ana Bileşenler

3.1 Header Alanı

• Kuika AI Başlığı: Aktif AI oturumunu gösterir.
• Aktif Mod Etiketi (Designer / Builder / Ask): O anda seçili olan modu gösterir. Örneğin ekran görüntüsünde "BUILDER" etiketi aktif moda işaret eder.
• ALPHA Etiketi: Builder modunun henüz alfa (deneysel) aşamada olduğunu belirtir.
• PLAN Etiketi: Kullanıcının mevcut abonelik planını header üzerinden de gösteren kısayol etiketidir; tıklandığında plan detaylarına yönlendirir.
• Durum Göstergesi (yeşil nokta): Sistem aktif ve kullanılabilir.
• Ayarlar (dişli) ikonu: Panel / hesap ayarlarını açar.
• Geçmiş ikonu: Önceki revert noktalarına erişim sağlar.
• Arama ikonu: Geçmiş chat içinde arama yapar.
• Kapat (X) Butonu: Paneli kapatır.

3.2 Chat Sekmeleri

• Chat 1: Aktif sohbeti temsil eder. 
• "+" Butonu: Yeni chat başlatır.

3.3 Karşılama (Empty State) Ekranı‍

Yeni bir chat açıldığında veya henüz mesaj gönderilmediğinde ortada karşılama ekranı görüntülenir:

• Kuika AI ikonu ve başlığı
• Alt metin: "Ask me anything about your application."
• Bu ekran, kullanıcıyı hızlı aksiyon kartlarını kullanmaya veya doğrudan komut yazmaya yönlendirir.

3.4 Hızlı Aksiyon Kartları‍

Kullanıcıya hazır kullanım senaryoları sunar:

• Dashboard with charts
• Login page with auth
• Style my page
• Add a DB table

Kullanım:

1. Kartlardan birine tıklayın.
2. Sistem ilgili prompt'u otomatik oluşturur.
3. AI, seçili moda (Designer / Builder / Ask) göre aksiyonu başlatır.

3.5 Kategori Etiketleri (Build & Design / Data & Logic / Platform)‍

Panelde işlem kapsamını gösteren gruplandırılmış etiketler yer alır:

• Build & Design: Screen Design, Styling, Screens, Validations
• Data & Logic: Actions, Datasources, Database, APIs, Custom Code
• Platform: Translation, Auth & Roles, Project, History

Bu etiketler, Builder modunun kapsadığı arayüz, backend/veri ve platform seviyesindeki (çoklu dil, yetkilendirme, proje yönetimi, geçmiş) işlemleri görsel olarak temsil eder. Her etiket, ilgili konudaki komutlar için kısayol/bağlam görevi görür.

• Translation: Uygulama içi çoklu dil / çeviri yönetimiyle ilgili işlemleri temsil eder.
• Auth & Roles: Kullanıcı kimlik doğrulama ve rol/izin yönetimiyle ilgili işlemleri temsil eder.
• Project: Proje düzeyinde ayarlar ve yapılandırmalarla ilgili işlemleri temsil eder.
• History: Proje veya chat geçmişine hızlı erişim sağlar (Revert panelinden bağımsız, genel proje geçmişi olabilir).

3.6 Mesaj Giriş Alanı‍

Placeholder: Ask Kuika AI... (/ for commands, @ for mentions). Bu alan kullanıcıdan komut almak için kullanılır. / ile komut listesi, @ ile element veya sayfa mention'ı açılır.

4. Alt Toolbar (Input Aksiyonları)

4.1 Select Element (Hedef Seçim)

• İkon: hedef (target) simgesi
• Amaç: UI üzerinde bir elementi seçerek AI’a bağlam vermek
• Kullanım:
  
  1. Butona tıklayın.
  2. Ekranda bir element seçin.
  3. AI seçilen elemente göre işlem yapar.

4.2 Attachment (Dosya Ekleme)

• İkon: ataç
• Açıldığında:
  
  • Image: Görsel yükleme
  • File: Dosya yükleme

Kullanım:

1. Ataç ikonuna tıklayın.
2. Tür seçin (Image / File)
3. Dosya yükleyin.
4. AI, yüklenen içeriği analiz eder.

4.3 Mode Selector (Designer / Builder / Ask)‍

Açılır menü üzerinden üç mod arasından seçim yapılır:

• Designer (mavi nokta)
  
  • UI design only — yalnızca arayüz oluşturma, stilleme ve düzenleme işlemleri yapar.
  • Backend/veri katmanına dokunmaz.
• Builder (turuncu nokta, ALPHA etiketli)
  
  • Full capabilities — UI tasarımı, backend, data binding, actions ve logic dahil tüm yetenekleri kapsar.
  • Sayfa tasarımının yanında veri kaynakları, veritabanı, API bağlantıları ve özel kod gibi işlemleri de gerçekleştirebilir.
  • Şu an alfa (deneysel) aşamada olduğu için sonuçlar test edilerek kullanılmalıdır.
• Ask (yeşil nokta, FREE etiketli)
  
  • Read-only mod; yalnızca sorulara cevap verir.
  • Sistemde herhangi bir değişiklik yapmaz, ücretsizdir.

Kullanım:

1. Mode selector'a (örn. "Builder") tıklayın.
2. Açılan menüden Designer, Builder veya Ask modunu seçin.
3. Komutunuzu girin.

4.4 Plan Butonu

• İkon: pano/clipboard simgesi, "Plan" etiketiyle gösterilir.
• Amaç: Kullanıcının mevcut abonelik/kullanım planını görüntülemesini ve yönetmesini sağlar.
• Bu buton hem alt toolbar'da hem de header'da ("PLAN" etiketi olarak) yer alır; ikisi de aynı plan detay ekranına yönlendirir.

Kullanım:

1. "Plan" butonuna tıklayın.
2. Mevcut plan bilgisi ve varsa yükseltme seçenekleri görüntülenir.

4.5 Credits Göstergesi

• Örn. "243 credits" etiketi, mevcut kredi bakiyesini gösterir.
• Kredi tüketimi seçilen moda göre değişebilir (Builder modu, kapsamı geniş olduğundan daha fazla kredi tüketebilir; Ask modu ücretsizdir).

4.6 Voice Input (Sesli Giriş)

• İkon: mikrofon
• Amaç: Yazmadan komut vermek.

Kullanım:

1. Mikrofon ikonuna tıklayın.
2. Konuşun.
3. Sistem sesi metne çevirir.

4.7 Send Button (Gönder)

• Sağ alt köşedeki ok ikonudur.
• Komutu AI'a gönderir.

4.8 Revert / History Paneli‍

Header'daki geçmiş ikonu tıklandığında Revert — History paneli açılır.

• Amaç: AI'a gönderilen her mesaj sonrasında otomatik checkpoint oluşturulur. Bu panel üzerinden önceki herhangi bir noktaya geri dönülebilir.
• "No revert points yet" mesajı: Henüz hiç AI mesajı gönderilmediğinde görünür.
• Her checkpoint en üstte olacak şekilde, en yeniden eskiye doğru listelenir.

5. Adım Adım Kullanım (Mode Bazlı Senaryolar)

5.1 Designer Mode – UI Tasarımı Gerçekleştirme

Amaç: UI elementlerini oluşturmak, stillemek ve düzenlemek.

Adımlar

1. Alt Toolbar'dan mode seçiciyi aç.
2. Designer seç.
3. Input alanına şu komutu yaz:

Create a dashboard with sales and revenue charts

4. Gönder butonuna bas.

Beklenen Sistem Davranışı

• AI doğrudan UI aksiyonu alır.
• Dashboard sayfası oluşturulur.
• Chart elementleri eklenir ve layout düzenlenir.

5.2 Builder Mode –Uçtan Uca Uygulama Geliştirme

Amaç: Arayüz ile birlikte backend, veri bağlama ve iş mantığını birlikte oluşturmak.

Adımlar:

1. Mode seçiciden Builder seç.
2. Input alanına şu komutu yaz: Create a login page with authentication and connect it to the users database
3. Gönder butonuna bas.

Beklenen Sistem Davranışı:

• AI, UI elementlerini oluşturur.
• Gerekli veri kaynağı / veritabanı bağlantısını kurar.
• Action ve logic (örn. doğrulama, giriş kontrolü) katmanını devreye alır.

5.3 Ask Mode – Bilgi Alma

Amaç: Sadece bilgi almak, sistemde değişiklik yapmamak.

Adımlar

1. Mode seçiciden Ask seç. 
2. Komut:

How should I design a dashboard for analytics?

3. Gönder.

Beklenen Sistem Davranışı

• AI açıklama yapar.
• Best practice önerileri sunar.
• Herhangi bir aksiyon alınmaz.

5.4 Platform Etiketleri Üzerinden Hızlı Erişim

Amaç: Çeviri, yetkilendirme, proje ayarları veya geçmişe hızlı erişmek.

Adımlar:

1. "Platform" kategorisi altından ilgili etiketi seçin (örn. Auth & Roles).
2. Sistem, seçilen konuya özel bir prompt/bağlam oluşturur veya ilgili paneli açar.
3. Gerekirse komutunuzu detaylandırıp gönderin.

Beklenen Sistem Davranışı:

• Seçilen kategoriye göre AI ilgili modülü açar (örn. rol/izin yönetimi ekranı) veya konuya özel öneriler sunar.