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
• Durum Göstergesi (yeşil nokta): Sistem aktif ve kullanılabilir
• Kapat (X) Butonu: Paneli kapatır

3.2 Chat Sekmeleri

• Chat 1: Aktif sohbet
• "+" Butonu: Yeni chat başlatır

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

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 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.4 Mode Selector (Ask / Agent / Plan)

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

• Ask
  
  • Basit soru-cevap modu
  • Aksiyon tetiklemez
• Agent
  
  • Aktif olarak işlem yapar
  • UI / sistem üzerinde değişiklik yapabilir
• Plan
  
  • Aksiyon öncesi plan üretir
  • Adım adım öneri sunar

Kullanım:

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

4.5 Send Button (Gönder)

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

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

5.1 Agent Mode – Aksiyon Gerçekleştirme

Amaç: Sistem üzerinde doğrudan değişiklik yapmak (UI, DB, sayfa oluşturma vb.)

Adımlar

1. Alt Toolbar’dan mode seçiciyi aç. 
2. Agent 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 aksiyon alır.
• Dashboard oluşturulur.
• Chart elementleri eklenir.
• Gerekli yapılandırmalar yapılır.

5.2 Plan Mode – Aksiyon Öncesi Planlama

Amaç: İşlem yapmadan önce AI’ın nasıl ilerleyeceğini görmek. 

Adımlar

1. Mode seçiciden Plan seç
2. Komutu gir:

Create a dashboard with user analytics

3. Gönder.

Beklenen Sistem Davranışı

• AI doğrudan işlem yapmaz
• Adım adım plan üretir.
• Örnek çıktı:
  
  • Veri modeli oluştur.
  • Chart bileşenlerini ekle.
  • Layout düzenle.

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.