feat(appkit): ui for the no-config chat

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

Author: hubertzub-db

apps/dev-playground/client/src/lib/nav.ts

@@ -98,6 +98,13 @@ export const NAV_GROUPS: ReadonlyArray<NavGroup> = [
           "Chat agent over Databricks Model Serving with tools auto-discovered from AppKit plugins.",
         icon: BotIcon,
       },
+      {
+        to: "/agent-chat-full",
+        label: "Custom Agent (full no-config chat)",
+        description:
+          "Drop-in <ChatApp /> with zero props — defaults to /api/agents/chat with the full UX.",
+        icon: MessageCircleIcon,
+      },
       {
         to: "/genie",
         label: "Genie",

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

@@ -25,6 +25,7 @@ import { Route as DataVisualizationRouteRouteImport } from './routes/data-visual
 import { Route as ChartInferenceRouteRouteImport } from './routes/chart-inference.route'
 import { Route as ArrowAnalyticsRouteRouteImport } from './routes/arrow-analytics.route'
 import { Route as AnalyticsRouteRouteImport } from './routes/analytics.route'
+import { Route as AgentChatFullRouteRouteImport } from './routes/agent-chat-full.route'
 import { Route as AgentRouteRouteImport } from './routes/agent.route'
 import { Route as IndexRouteImport } from './routes/index'
 
@@ -108,6 +109,11 @@ const AnalyticsRouteRoute = AnalyticsRouteRouteImport.update({
   path: '/analytics',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AgentChatFullRouteRoute = AgentChatFullRouteRouteImport.update({
+  id: '/agent-chat-full',
+  path: '/agent-chat-full',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AgentRouteRoute = AgentRouteRouteImport.update({
   id: '/agent',
   path: '/agent',
@@ -122,6 +128,7 @@ const IndexRoute = IndexRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/agent': typeof AgentRouteRoute
+  '/agent-chat-full': typeof AgentChatFullRouteRoute
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/chart-inference': typeof ChartInferenceRouteRoute
@@ -142,6 +149,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/agent': typeof AgentRouteRoute
+  '/agent-chat-full': typeof AgentChatFullRouteRoute
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/chart-inference': typeof ChartInferenceRouteRoute
@@ -163,6 +171,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/agent': typeof AgentRouteRoute
+  '/agent-chat-full': typeof AgentChatFullRouteRoute
   '/analytics': typeof AnalyticsRouteRoute
   '/arrow-analytics': typeof ArrowAnalyticsRouteRoute
   '/chart-inference': typeof ChartInferenceRouteRoute
@@ -185,6 +194,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/agent'
+    | '/agent-chat-full'
     | '/analytics'
     | '/arrow-analytics'
     | '/chart-inference'
@@ -205,6 +215,7 @@ export interface FileRouteTypes {
   to:
     | '/'
     | '/agent'
+    | '/agent-chat-full'
     | '/analytics'
     | '/arrow-analytics'
     | '/chart-inference'
@@ -225,6 +236,7 @@ export interface FileRouteTypes {
     | '__root__'
     | '/'
     | '/agent'
+    | '/agent-chat-full'
     | '/analytics'
     | '/arrow-analytics'
     | '/chart-inference'
@@ -246,6 +258,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AgentRouteRoute: typeof AgentRouteRoute
+  AgentChatFullRouteRoute: typeof AgentChatFullRouteRoute
   AnalyticsRouteRoute: typeof AnalyticsRouteRoute
   ArrowAnalyticsRouteRoute: typeof ArrowAnalyticsRouteRoute
   ChartInferenceRouteRoute: typeof ChartInferenceRouteRoute
@@ -378,6 +391,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AnalyticsRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/agent-chat-full': {
+      id: '/agent-chat-full'
+      path: '/agent-chat-full'
+      fullPath: '/agent-chat-full'
+      preLoaderRoute: typeof AgentChatFullRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/agent': {
       id: '/agent'
       path: '/agent'
@@ -398,6 +418,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AgentRouteRoute: AgentRouteRoute,
+  AgentChatFullRouteRoute: AgentChatFullRouteRoute,
   AnalyticsRouteRoute: AnalyticsRouteRoute,
   ArrowAnalyticsRouteRoute: ArrowAnalyticsRouteRoute,
   ChartInferenceRouteRoute: ChartInferenceRouteRoute,

apps/dev-playground/client/src/routes/agent-chat-full.route.tsx

@@ -0,0 +1,18 @@
+import { ChatApp } from "@databricks/appkit-ui/react/chat";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/agent-chat-full")({
+  component: AgentChatFullRoute,
+});
+
+/**
+ * No-config showcase of `<ChatApp />`. For the build-your-own variant
+ * that wires `useChat` by hand, see `agent.route.tsx`.
+ */
+function AgentChatFullRoute() {
+  return (
+    <div className="h-svh bg-background">
+      <ChatApp api="/api/agents/chat" />
+    </div>
+  );
+}

docs/docs/api/appkit-ui/chat/ApprovalEntry.mdx

@@ -0,0 +1,69 @@
+# ApprovalEntry
+
+Approval-gate lifecycle, owned by `ChatApp`.
+
+
+## ApprovalEntry
+
+Approval-gate lifecycle, owned by `ChatApp`.
+
+
+**Source:** [`packages/appkit-ui/src/react/chat/app/chat-app.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/chat/app/chat-app.tsx)
+
+
+### Props
+
+This component extends standard HTML element attributes.
+
+
+
+### Usage
+
+```tsx
+import { ApprovalEntry } from '@databricks/appkit-ui';
+
+<ApprovalEntry /* props */ />
+```
+
+
+## ChatApp
+
+Drop-in chat against an `agents()`-backed AppKit server. Fills its
+parent — provide a sized container. For history, feedback, or file
+attachments, wrap `useChat` directly instead.
+
+
+**Source:** [`packages/appkit-ui/src/react/chat/app/chat-app.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/chat/app/chat-app.tsx)
+
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `api` | `string` |  | `/api/agents/chat` | Chat endpoint URL. Defaults to `/api/agents/chat`. |
+| `emptyState` | `ReactNode` |  | - | Empty-state node shown when there are no messages yet. |
+| `placeholder` | `string` |  | - | Placeholder text for the default composer. |
+| `composerCaption` | `string \| null` |  | - | Caption shown below the composer. Pass `null` to suppress. |
+| `renderMessage` | `((props: ChatMessageProps<TMessage>) => ReactNode)` |  | - | Override per-message rendering. Return undefined to fall through. |
+| `renderToolCall` | `((props: ChatToolCallProps) => ReactNode)` |  | - | Override tool-call rendering. Return undefined to fall through. |
+| `renderComposer` | `((props: ChatComposerProps<TMessage>) => ReactNode)` |  | - | Override the composer entirely. |
+| `onApprovalDecision` | `((decision: ApprovalDecision) => void \| Promise<void>)` |  | - | Called when the user clicks Allow / Deny. Throw to keep the card `pending`. Defaults to a POST against approveUrl. |
+| `approveUrl` | `string` |  | - | Defaults to `api` with `/chat` swapped for `/approve`. |
+| `className` | `string` |  | - | - |
+| `id` | `string` |  | - | Stable chat id. Defaults to a fresh UUID per mount. |
+| `onError` | `((error: Error) => void)` |  | - | Called on stream errors. |
+| `headers` | `Resolvable<Record<string, string> \| Headers>` |  | - | Extra fetch headers forwarded to the transport. |
+| `messages` | `TMessage[]` |  | - | Initial messages (e.g. when hydrating from history). |
+| `onData` | `ChatOnDataCallback<TMessage>` |  | - | Fires for every `data-*` chunk (e.g. `data-approval-pending`). |
+| `onStreamPart` | `((chunk: UIMessageChunk) => void)` |  | - | Fires synchronously for every chunk. Unaffected by render throttling. |
+
+
+
+### Usage
+
+```tsx
+import { ChatApp } from '@databricks/appkit-ui';
+
+<ChatApp /* props */ />
+```
+