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.
• Designer Etiketi: Aktif modun görsel göstergesidir. 
• Durum Göstergesi (yeşil nokta): Sistem aktif ve kullanılabilir.
• 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 Hızlı Aksiyon Kartları

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

• Build a profile page
• Create a settings page
• Design a dashboard with charts
• Build a landing page
• Create a form layout
• Design a card gallery
• Build a navigation menu
• Style my current page

Kullanım:

1. Kartlardan birine tıklayın.
2. Sistem ilgili Prompt'u otomatik oluşturur.
3. AI aksiyonu başlatır.

3.4 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 / Ask)

Açılır menü üzerinden seçilir:

• Designer (varsayılan — mor nokta ile gösterilir).
  
  • UI tasarımı odaklı mod.
  • Element oluşturma, stilleme ve düzenleme işlemleri yapar.
  • Ekranda doğrudan değişiklik gerçekleştirir.
• Ask (yeşil nokta ile gösterilir)
  
  • Read-only mod; yalnızca sorulara cevap verir. 
  • Sistemde herhangi bir değişiklik yapmaz.

Kullanım:

1. "Designer" açılır menüsüne tıklayın.
2. Mod seçin.
3. Komut girin.

4.4 Credits Göstergesi

• 250 credits etiketi mevcut kredi bakiyesini gösterir.

4.5 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.6 Send Button (Gönder)

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

4.7 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 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.