feat(appkit-ui): add Genie chat React components#116
feat(appkit-ui): add Genie chat React components#116calvarjorge wants to merge 4 commits intofeat/genie-pluginfrom
Conversation
Add plug-and-play React components for Genie AI/BI chat: - useGenieChat hook: manages SSE streaming, conversation persistence via URL params, and history replay on page refresh - GenieChat: all-in-one component wiring hook + UI - GenieChatMessage: renders messages with markdown (via marked), avatars, and collapsible SQL query attachments - GenieChatMessageList: scrollable message list with auto-scroll, loading skeletons, and streaming status indicator - GenieChatInput: textarea with Enter-to-send and auto-resize Also adds Genie demo page to dev-playground at /genie and fixes conversation history ordering in the backend (reverse to chronological). Signed-off-by: Jorge Calvar <jorge.calvar@databricks.com>
calvarjorge
force-pushed
the
feat/genie-dev-playground
branch
from
2266458 to
5907634
Compare
pkosiec
left a comment
pkosiec
left a comment
There was a problem hiding this comment.
Overall it looks really nice 👌 Well done! A few comments from my side.
apps/dev-playground/.env.dist
Outdated
| OTEL_EXPORTER_OTLP_ENDPOINT='http://localhost:4318' | ||
| OTEL_RESOURCE_ATTRIBUTES='service.sample_attribute=dev' | ||
| OTEL_SERVICE_NAME='dev-playground' | ||
| GENIE_SPACE_ID= |
There was a problem hiding this comment.
It should be DATABRICKS_GENIE_SPACE_ID, right?
There was a problem hiding this comment.
Yes, a bit more clear this way, changed. There's an important consideration here. For Genie, appkit does not automatically read the env vars to determine the Genie space. Because multiple Genie spaces are supported by the plugin, the space IDs are passed when creating the plugin as a parameter (dict of alias to space id). This is opposed to the Analytics plugin where we can just use the only env var to determine the warehouse.
This is why the code was working as is without the DATABRICKS_GENIE_SPACE_ID var set.
There was a problem hiding this comment.
Btw, I discussed this with Mario, and will implement a default behavior when the Genie plugin is created without config.
There was a problem hiding this comment.
Could you please double check the styling? Here are some issues I found:
https://github.com/user-attachments/assets/d8f6b8c7-2a48-47d6-8bb2-c9672413ca18
Also:
There was a problem hiding this comment.
Also, we should ensure those components are documented in the same way as data / or general UI components.
I think we don't need a live preview but we do need at least example usage - see e.g.
https://databricks.github.io/appkit/docs/api/appkit-ui/data/AreaChart
There was a problem hiding this comment.
sure, i documented them
| <Button | ||
| variant="ghost" | ||
| size="sm" | ||
| onClick={reset} | ||
| className="text-xs text-muted-foreground" | ||
| > | ||
| New conversation | ||
| </Button> |
There was a problem hiding this comment.
Just a suggestion - maybe we could put the button on the top right side near the "Genie chat" header? I think that would be a most common place for such button.
|
|
||
| return allMessages.slice(0, maxMessages); | ||
| // Genie API returns newest-first; reverse to chronological order | ||
| return allMessages.slice(0, maxMessages).reverse(); |
There was a problem hiding this comment.
I wonder if we should fetch all at once or use the pagination to lazy load the messages an in the chat instead? this seems like it will have really bad performance (specially in the UI) if a chat has thousands of messages
There was a problem hiding this comment.
Yep, for long conversations, this is something needed. I'm not sure how common this case is, but we should probably handle it. Do you mind if I implement this in a subsequent PR to avoid continuing to build on this one?
- Rename GENIE_SPACE_ID to DATABRICKS_GENIE_SPACE_ID in env and code - Hide textarea scrollbar; only show overflow-y when content exceeds max height - Skip rendering empty assistant bubbles during loading, show only the spinner - Remove shadow from nested SQL query cards to fix corner shadow artifacts - Move "New conversation" button to top-right of chat widget Signed-off-by: Jorge Calvar <jorge.calvar@databricks.com>
Extend the doc generator to scan genie, multi-genie, and chat component directories. Add JSDoc descriptions to all Genie components and props, create usage examples for GenieChat and MultiGenieChat, and generate 8 new doc pages under a "Genie components" sidebar category. Signed-off-by: Jorge Calvar <jorge.calvar@databricks.com>
calvarjorge
force-pushed
the
feat/genie-dev-playground
branch
from
8ccb407 to
410fcae
Compare
Signed-off-by: Jorge Calvar <jorge.calvar@databricks.com>
calvarjorge
force-pushed
the
feat/genie-dev-playground
branch
from
35ceb8f to
758557b
Compare
3 participants
Summary
@databricks/appkit-uifor Genie:GenieChat,GenieChatMessage,GenieChatMessageList,GenieChatInput, anduseGenieChathook?conversationId=xxx), and history replay on page refreshmarked)/geniewith nav link and home page card