feat(appkit-ui): add Genie chat React components

apps/dev-playground/.env.dist

@@ -6,3 +6,4 @@ NODE_ENV='development'
 OTEL_EXPORTER_OTLP_ENDPOINT='http://localhost:4318'
 OTEL_RESOURCE_ATTRIBUTES='service.sample_attribute=dev'
 OTEL_SERVICE_NAME='dev-playground'
+GENIE_SPACE_ID=

apps/dev-playground/client/src/routeTree.gen.ts

@@ -13,6 +13,7 @@ import { Route as TypeSafetyRouteRouteImport } from './routes/type-safety.route'
 import { Route as TelemetryRouteRouteImport } from './routes/telemetry.route'
 import { Route as SqlHelpersRouteRouteImport } from './routes/sql-helpers.route'
 import { Route as ReconnectRouteRouteImport } from './routes/reconnect.route'
+import { Route as GenieRouteRouteImport } from './routes/genie.route'
 import { Route as DataVisualizationRouteRouteImport } from './routes/data-visualization.route'
 import { Route as ArrowAnalyticsRouteRouteImport } from './routes/arrow-analytics.route'
 import { Route as AnalyticsRouteRouteImport } from './routes/analytics.route'
@@ -38,6 +39,11 @@ const ReconnectRouteRoute = ReconnectRouteRouteImport.update({
   path: '/reconnect',
   getParentRoute: () => rootRouteImport,
 } as any)
+const GenieRouteRoute = GenieRouteRouteImport.update({
+  id: '/genie',
+  path: '/genie',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DataVisualizationRouteRoute = DataVisualizationRouteRouteImport.update({
   id: '/data-visualization',
   path: '/data-visualization',
@@ -64,6 +70,7 @@ export interface FileRoutesByFullPath {
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+  '/genie': typeof GenieRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
@@ -74,6 +81,7 @@ export interface FileRoutesByTo {
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+  '/genie': typeof GenieRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
@@ -85,6 +93,7 @@ export interface FileRoutesById {
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/data-visualization': typeof DataVisualizationRouteRoute
+  '/genie': typeof GenieRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
@@ -97,6 +106,7 @@ export interface FileRouteTypes {
     | '/analytics'
     | '/arrow-analytics'
     | '/data-visualization'
+    | '/genie'
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
@@ -107,6 +117,7 @@ export interface FileRouteTypes {
     | '/analytics'
     | '/arrow-analytics'
     | '/data-visualization'
+    | '/genie'
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
@@ -117,6 +128,7 @@ export interface FileRouteTypes {
     | '/analytics'
     | '/arrow-analytics'
     | '/data-visualization'
+    | '/genie'
     | '/reconnect'
     | '/sql-helpers'
     | '/telemetry'
@@ -128,6 +140,7 @@ export interface RootRouteChildren {
   AnalyticsRouteRoute: typeof AnalyticsRouteRoute
   ArrowAnalyticsRouteRoute: typeof ArrowAnalyticsRouteRoute
   DataVisualizationRouteRoute: typeof DataVisualizationRouteRoute
+  GenieRouteRoute: typeof GenieRouteRoute
   ReconnectRouteRoute: typeof ReconnectRouteRoute
   SqlHelpersRouteRoute: typeof SqlHelpersRouteRoute
   TelemetryRouteRoute: typeof TelemetryRouteRoute
@@ -164,6 +177,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ReconnectRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/genie': {
+      id: '/genie'
+      path: '/genie'
+      fullPath: '/genie'
+      preLoaderRoute: typeof GenieRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/data-visualization': {
       id: '/data-visualization'
       path: '/data-visualization'
@@ -200,6 +220,7 @@ const rootRouteChildren: RootRouteChildren = {
   AnalyticsRouteRoute: AnalyticsRouteRoute,
   ArrowAnalyticsRouteRoute: ArrowAnalyticsRouteRoute,
   DataVisualizationRouteRoute: DataVisualizationRouteRoute,
+  GenieRouteRoute: GenieRouteRoute,
   ReconnectRouteRoute: ReconnectRouteRoute,
   SqlHelpersRouteRoute: SqlHelpersRouteRoute,
   TelemetryRouteRoute: TelemetryRouteRoute,

apps/dev-playground/client/src/routes/__root.tsx

@@ -72,6 +72,14 @@ function RootComponent() {
                     SQL Helpers
                   </Button>
                 </Link>
+                <Link to="/genie" className="no-underline">
+                  <Button
+                    variant="ghost"
+                    className="text-foreground hover:text-secondary-foreground"
+                  >
+                    Genie
+                  </Button>
+                </Link>
                 <ThemeSelector />
               </div>
             </nav>

apps/dev-playground/client/src/routes/genie.route.tsx

@@ -0,0 +1,29 @@
+import { GenieChat } from "@databricks/appkit-ui/react";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/genie")({
+  component: GenieRoute,
+});
+
+function GenieRoute() {
+  return (
+    <div className="min-h-screen bg-background">
+      <main className="max-w-4xl mx-auto px-6 py-12">
+        <div className="flex flex-col gap-6">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight text-foreground">
+              Genie Chat
+            </h1>
+            <p className="text-muted-foreground mt-2">
+              Ask natural language questions about your data using AI/BI Genie.
+            </p>
+          </div>
+
+          <div className="border rounded-lg h-[600px] flex flex-col">
+            <GenieChat alias="demo" />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

apps/dev-playground/client/src/routes/index.tsx

@@ -162,6 +162,25 @@ function IndexRoute() {
               </Button>
             </div>
           </Card>
+
+          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
+            <div className="flex flex-col h-full">
+              <h3 className="text-2xl font-semibold text-foreground mb-3">
+                Genie Chat
+              </h3>
+              <p className="text-muted-foreground mb-6 flex-grow">
+                Ask natural language questions about your data using AI/BI
+                Genie. Features SSE streaming, markdown rendering, and
+                conversation persistence.
+              </p>
+              <Button
+                onClick={() => navigate({ to: "/genie" })}
+                className="w-full"
+              >
+                Try Genie Chat
+              </Button>
+            </div>
+          </Card>
         </div>
 
         <div className="text-center pt-12 border-t border-border">

apps/dev-playground/server/index.ts

@@ -1,4 +1,4 @@
-import { analytics, createApp, server } from "@databricks/appkit";
+import { analytics, createApp, genie, server } from "@databricks/appkit";
 import { WorkspaceClient } from "@databricks/sdk-experimental";
 import { reconnect } from "./reconnect-plugin";
 import { telemetryExamples } from "./telemetry-example-plugin";
@@ -19,6 +19,9 @@ createApp({
     reconnect(),
     telemetryExamples(),
     analytics({}),
+    genie({
+      spaces: { demo: process.env.GENIE_SPACE_ID ?? "placeholder" },
+    }),
   ],
   ...(process.env.APPKIT_E2E_TEST && { client: createMockClient() }),
 }).then((appkit) => {