Workspace

Workspace bileşeni, MonoChat arayüzünde kapsamlı, çok panelli görünümler oluşturmak için tasarlanmış esnek bir tam ekran düzeni sağlar. Üç sütunlu bir yapı olarak düzenlenmiştir:

• Sol Sütun (opsiyonel): Menüler veya gezinme panelleri için sıklıkla kullanılır. Daraltılabilir.
• Orta Sütun: Görünümlerin render edildiği ana içerik alanıdır. En geniş bölüm olup workspace’in merkezidir.
• Sağ Sütun (opsiyonel): Yardımcı widget’lar veya bağlamsal bilgiler için sabit genişlik alanı.

Bu yapı, özellikle orta paneldeki içeriği organize etmek için yerleşik Tab bileşeni ile birleştirildiğinde, zengin ve duyarlı panolar veya yönetim arayüzleri oluşturmayı sağlar.

---

Kullanım

Bir Workspace render etmek için Custom View fonksiyonunuz, düzen ve tab konfigürasyonunu tanımlayan bir obje döndürmelidir. Aşağıdaki örnek, sol panelin daraltılabilir olduğu ve orta sütunda tab tabanlı içerik yapısı bulunan standart bir kullanım durumunu göstermektedir.

CustomFunction(async function ({ sdk }, reject, resolve) {
  resolve(async function CustomFunction({ sdk }) {
    return {
      isTemplateLeftCollapsible: true,
      tabs: {
        name: 'bbTabs',
        queryParamKey: 'bbTab',
        isNoPadding: true,
        listHeader: {
          title: 'BaytiBot',
          iconName: 'robot',
        },
        panes: [
          {
            id: 'leads',
            iconName: 'crown',
            text: 'Leads',
            isActive: true,
            customFunctionPathString: sdk.utils.absolutePathString('leads/index.js'),
          },
          {
            id: 'appointments',
            iconName: 'calendar',
            text: 'Appointments',
            isActive: false,
            customFunctionPathString: sdk.utils.absolutePathString('appointments/index.js'),
          },
          {
            id: 'properties',
            iconName: 'building',
            text: 'Properties',
            isActive: false,
            customFunctionPathString: sdk.utils.absolutePathString('properties/index.js'),
          },
          {
            id: 'projects',
            iconName: 'strategy',
            text: 'Projects',
            isActive: false,
            customFunctionPathString: sdk.utils.absolutePathString('projects/index.js'),
          },
          {
            id: 'settings',
            iconName: 'gear-six',
            text: 'Settings',
            isActive: false,
            customFunctionPathString: sdk.utils.absolutePathString('settings/index.js'),
          },
        ],
      },
    }
  })
})

---

Parametreler

Anahtar	Tür	Açıklama
isTemplateLeftCollapsible	boolean	Sol sütunun daraltılabilirliğini etkinleştirir veya devre dışı bırakır.
tabs.name	string	Tab grubunun benzersiz tanımlayıcısı.
tabs.queryParamKey	string	Seçili tab durumunu korumak için kullanılan URL query anahtarı.
tabs.isNoPadding	boolean	Tab paneli alanındaki iç dolgu kaldırılır.
tabs.listHeader.title	string	Tab panelinin üst kısmında görüntülenen başlık.
tabs.listHeader.iconName	string	Başlığın yanında gösterilecek ikon.
tabs.panes[]	array	Her tab öğesini ve yüklediği fonksiyonu tanımlar.
panes[].id	string	Benzersiz tab tanımlayıcısı.
panes[].iconName	string	Tab’ı temsil eden ikon adı.
panes[].text	string	Tab üzerinde gösterilen etiket metni.
panes[].isActive	boolean	Tab’ın başlangıçta aktif olduğunu işaretler. Sadece biri true olmalıdır.
panes[].customFunctionPathString	string	Tab için görünümü render eden fonksiyonun yolu.

---

İpuçları

• Diğer özel fonksiyonlara tam yolları dinamik olarak çözmek için sdk.utils.absolutePathString(path) kullanın.
• Render çakışmalarını önlemek için yalnızca bir tab’ı isActive: true olarak bırakın.
• Koşullara göre panelleri dinamik olarak gösterip gizleyebilirsiniz; bu, rol tabanlı UI özelleştirmesine olanak tanır.