feat(appkit-ui): add Genie chat React components#116
feat(appkit-ui): add Genie chat React components#116calvarjorge wants to merge 1 commit 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.
| 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.
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
| <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.
2 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