feat: add genie to template (#153)

* feat: add genie to template

* fix: redo imports of Time to fix interop issue

Author: calvarjorge

packages/appkit/src/connectors/genie/client.ts

@@ -12,7 +12,9 @@ import type {
   GenieStreamEvent,
 } from "./types";
 
-const { Time, TimeUnits } = SDK;
+const { TimeUnits } = SDK;
+const Time = SDK.Time ?? (SDK as any).default.Time;
+
 const logger = createLogger("connectors:genie");
 
 type CreateMessageWaiter = Waiter<GenieMessage, GenieMessage>;

template/client/src/App.tsx

@@ -11,6 +11,9 @@ import { AnalyticsPage } from './pages/analytics/AnalyticsPage';
 {{- if .plugins.lakebase}}
 import { LakebasePage } from './pages/lakebase/LakebasePage';
 {{- end}}
+{{- if .plugins.genie}}
+import { GeniePage } from './pages/genie/GeniePage';
+{{- end}}
 
 const navLinkClass = ({ isActive }: { isActive: boolean }) =>
   `px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
@@ -37,6 +40,11 @@ function Layout() {
           <NavLink to="/lakebase" className={navLinkClass}>
             Lakebase
           </NavLink>
+{{- end}}
+{{- if .plugins.genie}}
+          <NavLink to="/genie" className={navLinkClass}>
+            Genie
+          </NavLink>
 {{- end}}
         </nav>
       </header>
@@ -58,6 +66,9 @@ const router = createBrowserRouter([
 {{- end}}
 {{- if .plugins.lakebase}}
       { path: '/lakebase', element: <LakebasePage /> },
+{{- end}}
+{{- if .plugins.genie}}
+      { path: '/genie', element: <GeniePage /> },
 {{- end}}
     ],
   },

template/client/src/pages/genie/GeniePage.tsx

@@ -0,0 +1,19 @@
+{{if .plugins.genie -}}
+import { GenieChat } from '@databricks/appkit-ui/react';
+
+export function GeniePage() {
+  return (
+    <div className="space-y-6 w-full max-w-4xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold text-foreground">Genie</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Ask questions about your data using Databricks AI/BI Genie.
+        </p>
+      </div>
+      <div className="h-[600px] border rounded-lg overflow-hidden">
+        <GenieChat alias="default" />
+      </div>
+    </div>
+  );
+}
+{{- end}}

template/databricks.yml.tmpl

@@ -13,9 +13,15 @@ resources:
       description: "{{.appDescription}}"
       source_code_path: ./
 
+{{- if .plugins.genie}}
+      user_api_scopes:
+        - dashboards.genie
+{{- end}}
+{{- if not .plugins.genie}}
       # Uncomment to enable on behalf of user API scopes. Available scopes: sql, dashboards.genie, files.files
       # user_api_scopes:
       #   - sql
+{{- end}}
 {{- if .bundle.resources}}
 
       # The resources which this app has access to.