@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/analytics/web/index.stx

@@ -0,0 +1,356 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Web Analytics')
+<PageLayout>
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div class="flex items-center space-x-2">
+          <div class="h-5 w-5 text-gray-500 dark:text-neutral-400 i-hugeicons-calendar-03"></div>
+          <span class="font-medium text-gray-700 text-sm dark:text-neutral-300">{{ dateRangeDisplay }}</span>
+        </div>
+        <div class="flex flex-wrap gap-2 items-center">
+          <span class="text-gray-500 text-sm dark:text-neutral-400">compared to</span>
+          <div class="relative">
+            <select x-model="comparisonType" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+              <option value="no-comparison">No comparison</option>
+              <option value="previous-period">Previous period</option>
+              <option value="previous-year">Previous year</option>
+            </select>
+          </div>
+          <button type="button" class="inline-flex items-center px-3 py-1.5 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+            <div class="mr-1 h-4 w-4 i-hugeicons-settings-01"></div>
+            Auto
+          </button>
+        </div>
+      </div>
+
+      <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 mb-8 p-4 bg-black dark:bg-neutral-900 rounded-lg">
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.realtime }}</div>
+          <div class="text-gray-400 text-sm">Realtime</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">2.2k</div>
+          <div class="text-gray-400 text-sm">People</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">3k</div>
+          <div class="text-gray-400 text-sm">Views</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.avgTimeOnSite }}</div>
+          <div class="text-gray-400 text-sm">Avg time on site</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.bounceRate }}</div>
+          <div class="text-gray-400 text-sm">Bounce rate</div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+          <div class="font-bold text-4xl text-white">{{ analyticsOverview.eventCompletions }}</div>
+          <div class="text-gray-400 text-sm">Event completions</div>
+        </div>
+      </div>
+
+      <div class="mb-8 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="mb-4">
+          <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Traffic Overview</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Daily page views and unique visitors</p>
+        </div>
+        <div class="h-80 w-full"><canvas id="traffic_chart"></canvas></div>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-2">
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Pages</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Pages</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Entries</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Views</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="page in pagesData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-blue-100/50 dark:bg-blue-900/50" :style="'width: ' + page.percentage + '%'"></div>
+                      <span class="relative z-10">{{ page.path }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.entries }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.views }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ page.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/pages" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all pages</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Referrers</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Sources</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Views</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="referrer in referrersData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-green-100/50 dark:bg-green-900/50" :style="'width: ' + referrer.percentage + '%'"></div>
+                      <span class="relative z-10">{{ referrer.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.views }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ referrer.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/referrers" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all referrers</StxLink></div>
+        </div>
+      </div>
+
+      <div class="grid gap-8 grid-cols-1 lg:grid-cols-3 mt-8">
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Device Types</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Device Types</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="device in deviceData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-purple-100/50 dark:bg-purple-900/50" :style="'width: ' + device.percentage + '%'"></div>
+                      <span class="relative z-10">{{ device.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ device.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ device.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/devices" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all devices</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Browsers</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Browsers</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="browser in browserData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-amber-100/50 dark:bg-amber-900/50" :style="'width: ' + browser.percentage + '%'"></div>
+                      <span class="relative z-10">{{ browser.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ browser.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ browser.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/browsers" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all browsers</StxLink></div>
+        </div>
+
+        <div>
+          <div class="mb-4"><h3 class="font-medium text-gray-900 text-lg dark:text-white">Countries</h3></div>
+          <div class="overflow-hidden border border-gray-200 rounded-lg dark:border-neutral-700">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Countries</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">Visitors</th>
+                  <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs tracking-wider uppercase dark:text-neutral-300">%</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="country in countriesData">
+                  <tr class="relative hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                    <td class="px-4 py-3 text-gray-900 text-sm whitespace-nowrap dark:text-white">
+                      <div class="absolute inset-0 bg-rose-100/50 dark:bg-rose-900/50" :style="'width: ' + country.percentage + '%'"></div>
+                      <span class="relative z-10"><span class="mr-2">{{ country.flag }}</span>{{ country.name }}</span>
+                    </td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ country.visitors }}</span></td>
+                    <td class="relative px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300"><span class="relative z-10">{{ country.percentage }}%</span></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex justify-end mt-2"><StxLink to="/analytics/countries" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View all countries</StxLink></div>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+// Static analytics tables + overview — moved out of the former
+// `<script server>` block (stacksjs/stacks#1838).
+const pagesRaw = [
+  { path: '/', entries: 1800, visitors: 1800, views: 2100 },
+  { path: '/blog', entries: 113, visitors: 113, views: 139 },
+  { path: '/about', entries: 51, visitors: 51, views: 77 },
+  { path: '/contact', entries: 42, visitors: 42, views: 51 },
+  { path: '/products', entries: 37, visitors: 37, views: 60 },
+  { path: '/guide/get-started.html', entries: 21, visitors: 29, views: 45 },
+  { path: '/docs', entries: 16, visitors: 17, views: 202 },
+  { path: '/guide/intro.html', entries: 12, visitors: 17, views: 22 },
+  { path: '/guide/get-started', entries: 9, visitors: 12, views: 13 },
+  { path: '/team', entries: 9, visitors: 10, views: 15 },
+]
+
+const referrersRaw = [
+  { name: 'Direct / Unknown', visitors: 1400, views: 2100 },
+  { name: 'X/Twitter', visitors: 545, views: 580 },
+  { name: 'Google', visitors: 46, views: 50 },
+  { name: 'stacksjs.com', visitors: 45, views: 63 },
+  { name: 'stacksjs.netlify.app', visitors: 38, views: 60 },
+  { name: 'github.com', visitors: 34, views: 47 },
+  { name: 'DuckDuckGo', visitors: 32, views: 35 },
+  { name: 'Bing', visitors: 22, views: 24 },
+  { name: 'Baidu', visitors: 8, views: 8 },
+  { name: 'npmjs.com', visitors: 7, views: 7 },
+]
+
+const deviceData = [
+  { name: 'Desktop', visitors: 1300, percentage: 60 },
+  { name: 'Phone', visitors: 874, percentage: 38 },
+  { name: 'Tablet', visitors: 5, percentage: 2 },
+]
+
+const browserData = [
+  { name: 'Chrome', visitors: 1300, percentage: 58 },
+  { name: 'Safari', visitors: 579, percentage: 26 },
+  { name: 'Edge', visitors: 129, percentage: 6 },
+  { name: 'Firefox', visitors: 92, percentage: 4 },
+  { name: 'Mozilla', visitors: 24, percentage: 1 },
+]
+
+const countriesRaw = [
+  { name: 'United States of America', visitors: 768, flag: '🇺🇸' },
+  { name: 'Germany', visitors: 140, flag: '🇩🇪' },
+  { name: 'United Kingdom', visitors: 87, flag: '🇬🇧' },
+  { name: 'India', visitors: 83, flag: '🇮🇳' },
+  { name: 'Indonesia', visitors: 80, flag: '🇮🇩' },
+]
+
+const totalPageViews = pagesRaw.reduce((s, p) => s + p.views, 0)
+const totalReferrerViews = referrersRaw.reduce((s, r) => s + r.views, 0)
+const totalCountryVisitors = countriesRaw.reduce((s, c) => s + c.visitors, 0)
+
+const pagesData = pagesRaw.map(p => ({ ...p, percentage: Math.round((p.views / totalPageViews) * 100) }))
+const referrersData = referrersRaw.map(r => ({ ...r, percentage: Math.round((r.views / totalReferrerViews) * 100) }))
+const countriesData = countriesRaw.map(c => ({ ...c, percentage: Math.round((c.visitors / totalCountryVisitors) * 100) }))
+
+const analyticsOverview = {
+  realtime: 0,
+  people: 2200,
+  views: 3000,
+  avgTimeOnSite: '03:36',
+  bounceRate: '89%',
+  eventCompletions: 0,
+}
+
+const dateRangeDisplay = state('All Time: Sep 7, 2023 to Mar 6, 2025')
+const comparisonType = state('no-comparison')
+
+const trafficData = state<Array<{ date: string, pageViews: number, visitors: number }>>([
+  { date: '2023-11-01', pageViews: 100, visitors: 80 },
+  { date: '2023-11-15', pageViews: 250, visitors: 180 },
+  { date: '2023-12-01', pageViews: 150, visitors: 120 },
+  { date: '2023-12-15', pageViews: 220, visitors: 170 },
+  { date: '2024-01-01', pageViews: 180, visitors: 140 },
+  { date: '2024-01-15', pageViews: 320, visitors: 240 },
+  { date: '2024-02-01', pageViews: 280, visitors: 210 },
+  { date: '2024-02-15', pageViews: 400, visitors: 300 },
+  { date: '2024-03-01', pageViews: 350, visitors: 270 },
+  { date: '2024-03-15', pageViews: 300, visitors: 230 },
+  { date: '2024-04-01', pageViews: 250, visitors: 190 },
+  { date: '2024-04-15', pageViews: 200, visitors: 150 },
+  { date: '2024-05-01', pageViews: 150, visitors: 120 },
+  { date: '2024-05-15', pageViews: 120, visitors: 90 },
+  { date: '2024-06-01', pageViews: 100, visitors: 80 },
+  { date: '2024-06-15', pageViews: 130, visitors: 100 },
+  { date: '2024-07-01', pageViews: 150, visitors: 120 },
+  { date: '2024-07-15', pageViews: 120, visitors: 90 },
+  { date: '2024-08-01', pageViews: 100, visitors: 80 },
+  { date: '2024-08-15', pageViews: 80, visitors: 60 },
+  { date: '2024-09-01', pageViews: 100, visitors: 80 },
+  { date: '2024-09-15', pageViews: 120, visitors: 90 },
+  { date: '2024-10-01', pageViews: 150, visitors: 120 },
+  { date: '2024-10-15', pageViews: 100, visitors: 80 },
+  { date: '2024-11-01', pageViews: 80, visitors: 60 },
+  { date: '2024-11-15', pageViews: 120, visitors: 90 },
+  { date: '2024-12-01', pageViews: 300, visitors: 230 },
+  { date: '2024-12-15', pageViews: 150, visitors: 120 },
+  { date: '2025-01-01', pageViews: 100, visitors: 80 },
+  { date: '2025-01-15', pageViews: 80, visitors: 60 },
+  { date: '2025-02-01', pageViews: 60, visitors: 40 },
+])
+
+let chartHandle: { destroy: () => void } | null = null
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+  chartHandle = useChart({
+    Chart: Ctor,
+    id: 'traffic_chart',
+    type: 'line',
+    data: {
+      labels: trafficData().map(item => item.date),
+      datasets: [
+        { label: 'Page Views', data: trafficData().map(item => item.pageViews), backgroundColor: 'rgba(147, 197, 253, 0.3)', borderColor: 'rgba(59, 130, 246, 0.8)', borderWidth: 2, tension: 0.4, fill: true },
+        { label: 'Visitors', data: trafficData().map(item => item.visitors), backgroundColor: 'rgba(147, 197, 253, 0.1)', borderColor: 'rgba(96, 165, 250, 0.8)', borderWidth: 2, tension: 0.4, fill: false },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { grid: { display: false }, ticks: { maxTicksLimit: 4 } },
+        y: { beginAtZero: true, grid: { borderDash: [2, 4], color: 'rgba(160, 174, 192, 0.2)' }, ticks: { maxTicksLimit: 6 } },
+      },
+      plugins: { legend: { display: true, position: 'top' }, tooltip: { mode: 'index', intersect: false } },
+    },
+  })
+})
+
+onDestroy(() => {
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+@endsection

package/views/dashboard/buddy/index.stx

@@ -0,0 +1,198 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="flex overflow-hidden h-screen bg-gray-100 dark:bg-neutral-900">
+  <div class="flex flex-col w-80 bg-white dark:bg-neutral-800 border-gray-200 border-r">
+    <div class="flex-none p-4 border-b border-gray-200 dark:border-neutral-700">
+      <h2 class="font-semibold text-gray-900 text-lg dark:text-white">Conversations</h2>
+      <p class="text-gray-500 text-sm dark:text-neutral-400">Ask any question you may have.</p>
+    </div>
+
+    <div class="overflow-y-auto flex-1">
+      <template :for="chat in conversations">
+        <div @click="selectConversation({{ chat.id }})" class="p-4 cursor-pointer border-b border-gray-200 {{ isActive(chat.id) ? 'bg-blue-50' : 'hover:bg-gray-50' }}">
+          <div class="flex items-start justify-between">
+            <div class="flex items-center space-x-3">
+              <div class="relative">
+                <div class="flex items-center justify-center h-10 w-10 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full">
+                  <span class="font-medium text-sm text-white">{{ chat.name.charAt(0) }}</span>
+                </div>
+                <div :show="{{ chat.status === 'online' ? 'true' : 'false' }}" class="absolute h-3 w-3 bg-green-400 border-2 border-white rounded-full -bottom-0.5 -right-0.5"></div>
+              </div>
+              <div>
+                <h3 class="font-medium text-gray-900 text-sm">{{ chat.name }}</h3>
+                <p class="mt-1 line-clamp-1 text-gray-500 text-sm">{{ chat.lastMessage }}</p>
+              </div>
+            </div>
+            <div class="flex items-center space-x-2">
+              <span class="text-gray-500 text-xs whitespace-nowrap">{{ chat.timestamp }}</span>
+              <span :show="{{ chat.unread ? 'true' : 'false' }}" class="h-2 w-2 bg-blue-500 rounded-full"></span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <div class="flex flex-1 flex-col">
+    <div class="flex-none p-4 bg-white dark:bg-neutral-800 border-b border-gray-200">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+          <div class="flex items-center justify-center h-10 w-10 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full">
+            <span class="font-medium text-sm text-white">AI</span>
+          </div>
+          <div>
+            <h2 class="font-semibold text-gray-900 text-lg">Buddy</h2>
+            <p class="text-gray-500 text-sm">Always here to help</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="overflow-y-auto flex-1 p-4 bg-gray-50 dark:bg-neutral-900">
+      <div class="flex flex-col mx-auto space-y-4 max-w-3xl">
+        <template :for="message in messages">
+          <div class="flex items-start space-x-4 {{ message.type === 'ai' ? '' : 'justify-end' }}">
+            <div :show="{{ message.type === 'ai' ? 'true' : 'false' }}" class="flex items-center justify-center h-10 w-10 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full">
+              <span class="font-medium text-sm text-white">AI</span>
+            </div>
+
+            <div class="rounded-lg p-4 shadow max-w-lg {{ message.type === 'ai' ? 'bg-white dark:bg-neutral-800' : 'bg-blue-500 text-white' }}">
+              <div class="flex items-center justify-between mb-1">
+                <span class="font-medium">{{ message.user.name }}</span>
+                <span class="text-sm opacity-75">{{ message.timestamp }}</span>
+              </div>
+              <p>{{ message.content }}</p>
+
+              <div :show="{{ message.codeSnippet ? 'true' : 'false' }}" class="mt-3 p-4 text-white bg-gray-800 rounded-md">
+                <pre><code>{{ message.codeSnippet?.code }}</code></pre>
+              </div>
+            </div>
+
+            <img :show="{{ message.type === 'human' ? 'true' : 'false' }}" src="{{ message.user.avatar }}" alt="{{ message.user.name }}" class="h-10 w-10 rounded-full" />
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div class="flex-none p-4 bg-white dark:bg-neutral-800 border-gray-200 border-t">
+      <div class="mx-auto max-w-3xl">
+        <div class="flex items-center space-x-4">
+          <input x-model="newMessage" type="text" placeholder="Ask anything about your project..." @keyup.enter="sendMessage()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+          <button @click="sendMessage()" class="px-6 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Send</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+interface User {
+  id: number
+  name: string
+  email: string
+  avatar: string
+}
+
+interface Conversation {
+  id: number
+  name: string
+  lastMessage: string
+  timestamp: string
+  unread: boolean
+  type: 'ai' | 'human'
+  status: 'online' | 'offline'
+}
+
+interface Message {
+  id: number
+  content: string
+  timestamp: string
+  type: 'ai' | 'human'
+  codeSnippet?: { language: string, code: string }
+  user: User
+}
+
+const activeConversation = state(1)
+const newMessage = state('')
+
+const conversations = state<Conversation[]>([
+  { id: 1, name: 'New Project Setup', lastMessage: 'I can help you set up a new Stacks.js project with TypeScript', timestamp: 'Moments ago', unread: true, type: 'ai', status: 'online' },
+  { id: 2, name: 'Database Migration', lastMessage: 'Here\'s how to run your first migration in Stacks.js', timestamp: '2h ago', unread: false, type: 'ai', status: 'online' },
+  { id: 3, name: 'API Documentation', lastMessage: 'Generated API documentation for your endpoints', timestamp: '1d ago', unread: false, type: 'ai', status: 'online' },
+])
+
+const messages = state<Message[]>([
+  {
+    id: 1,
+    type: 'human',
+    user: { id: 1, name: 'Chris', email: 'chris@stacksjs.com', avatar: 'https://avatars.githubusercontent.com/u/6228425?v=4' },
+    content: 'How do I create a new Stacks.js project with TypeScript?',
+    timestamp: '2:30 PM',
+  },
+  {
+    id: 2,
+    type: 'ai',
+    user: { id: 0, name: 'Buddy', email: 'ai@stacksjs.com', avatar: '' },
+    content: 'I can help you set up a new Stacks.js project. First, let\'s create a new project using the CLI:',
+    timestamp: '2:31 PM',
+    codeSnippet: { language: 'bash', code: 'npm create stacks@latest my-app\ncd my-app\npnpm install' },
+  },
+])
+
+function isActive(id: number): boolean {
+  return activeConversation() === id
+}
+
+function selectConversation(id: number): void {
+  activeConversation.set(id)
+}
+
+function nowTime(): string {
+  return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function sendMessage(): void {
+  const content = newMessage().trim()
+  if (!content)
+    return
+  const list = messages()
+  const human: Message = {
+    id: list.length + 1,
+    type: 'human',
+    user: { id: 1, name: 'Chris', email: 'chris@stacksjs.com', avatar: '/avatars/chris.jpg' },
+    content,
+    timestamp: nowTime(),
+  }
+  messages.set([...list, human])
+  newMessage.set('')
+
+  setTimeout(() => {
+    const next = messages()
+    const ai: Message = {
+      id: next.length + 1,
+      type: 'ai',
+      user: { id: 0, name: 'Buddy', email: 'ai@stacksjs.com', avatar: '/avatars/stacks-ai.jpg' },
+      content: 'I\'m processing your request. How can I help you with Stacks.js?',
+      timestamp: nowTime(),
+    }
+    messages.set([...next, ai])
+  }, 1000)
+}
+</script>
+
+<style scoped>
+.h-screen {
+  height: 100vh;
+  max-height: 100vh;
+}
+
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
+
+@endsection