[UI/UX] Kapa AI Assistant Widget on Documentation Site's Dark Mode Compatibility

[MouhibKhammassi]

Screenshot

Description

The "Ask AI" widget (powered by Kapa.ai) on superset.apache.org is a highly valuable tool, but its current interface feels rudimentary and contains several visual and accessibility hurdles. As Superset is a leading data visualization tool, its documentation assistant should reflect that same outlook and high-quality user experience.

Current Issues:

• Accessibility Bug (Ghost Button): The "Send" button (up-arrow) in the input field has extremely low contrast, making it nearly invisible against the light background when there is text in the box.
• Flat Chat Hierarchy: There is no visual distinction between user messages and AI responses (e.g., no message bubbles, background color changes, or alignment differences). This makes scanning longer conversations difficult.
• Inefficient Use of Space: The suggestion buttons are oversized for the text they contain, creating awkward whitespace.
• Stylistic Inconsistency: The action buttons (Copy, New Chat, Feedback) look like default unstyled browser elements.
• Dark Mode Sync: The modal currently lacks proper synchronization with the documentation site's dark mode preference.

Proposed Solution:
Since the Kapa widget uses stable IDs (#kapa-modal-content) and is built on Mantine UI, we can implement a highly functional, sleek interface without modifying the third-party React source code.

I propose applying targeted CSS overrides within the Docusaurus custom.css and tweaking the Kapa config in docusaurus.config.js to:

1. Fix the contrast of the send button.
2. Introduce distinct message bubbles (user vs. AI).
3. Refine button styling and typography to match the main Superset application's modern feel.
4. Add a proper dark mode to the modal.
5. Improve the positioning of the buttons on the modal.

I have experience with frontend development and modern CSS/UI design. I would love to take ownership/collaboration of this issue and submit a fix with the necessary configuration updates and CSS overrides to resolve these pain points.
I would appreciate collaboration from the design team to ensure the CSS overrides (colors, spacing, typography scales) perfectly match the Apache Superset style guidelines.

Labels: design:review, design:suggest

[hainenber]

Thanks for the suggestion but the Kapa.ai integration is to help with data around Superset, i.e documentation and project's issue management. It doesn't have to strictly follow Superset's design guideline and IMO, its look is sleek enough for general usage (yes, I'm aware that there might be biases involved).

Due to above points, I'll close this off as it's not exactly issue per se.

[MouhibKhammassi]

Sorry for the late reply, but I wanted to point out that there might be some problems with the chatbot modal. namely, how it doesn't work with light/dark mode and how the send button becomes invisible (it gets highlighted with the same color as the background when there’s text in the bar). They might be small problems, but I do believe they should be fixed.

[Antonkapa]

Anton from the kapa.ai team here! Wanted to share our new Dark mode docs, we recently re-did the Widget quite a bit, allowing for further customization: https://docs.kapa.ai/integrations/website-widget/configuration/theming#color-scheme

[MouhibKhammassi]

Thank you for showcasing this documentation! I'm definitely interested in implementing a proper dark mode for the chatbot modal with these new updates. Since the repo/codebase for the chatbot component doesn't seem to be available from what I know, could you let me know how I can get permission or where I should submit the changes to work on this?

[Antonkapa]

Thank you for showcasing this documentation! I'm definitely interested in implementing a proper dark mode for the chatbot modal with these new updates. Since the repo/codebase for the chatbot component doesn't seem to be available from what I know, could you let me know how I can get permission or where I should submit the changes to work on this?

Awesome @MouhibKhammassi, you can find our documentation here https://docs.kapa.ai/ and chat with our own kapa.ai chatbot to help find what you are looking for! The Apache superset widget is in the docs/docusaurus.config.ts file

[MouhibKhammassi]

thank you Anton ! ill start working on it

[fowlerp397-tech]

Thanks for the info! Could you clarify where I can submit my changes for the chatbot modal? I'd love to contribute once I have access to the repo or get the necessary permissions.

…

On Fri, Apr 3, 2026, 6:50 AM MouhibKhammassi ***@***.***> wrote: *MouhibKhammassi* left a comment (apache/superset#39062) <#39062 (comment)> thank you Anton ! ill start working on it — Reply to this email directly, view it on GitHub <#39062?email_source=notifications&email_token=B72HASO4AZVQYS3FLOTA22D4T6QPFA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMJYGMYTKNBQGAYKM4TFMFZW63VKON2WE43DOJUWEZLEUVSXMZLOOSWGM33PORSXEX3DNRUWG2Y#issuecomment-4183154000>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B72HASO2TFKIZ7YC2MOKWXD4T6QPFAVCNFSM6AAAAACXKQQEDKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DCOBTGE2TIMBQGA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[MouhibKhammassi]

Thanks for the info! Could you clarify where I can submit my changes for

the chatbot modal? I'd love to contribute once I have access to the repo or

get the necessary permissions.

On Fri, Apr 3, 2026, 6:50 AM MouhibKhammassi @.***>

wrote:

MouhibKhammassi left a comment (#39062)

#39062 (comment)

thank you Anton ! ill start working on it

—

Reply to this email directly, view it on GitHub

#39062,

or unsubscribe

https://github.com/notifications/unsubscribe-auth/B72HASO2TFKIZ7YC2MOKWXD4T6QPFAVCNFSM6AAAAACXKQQEDKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DCOBTGE2TIMBQGA

.

You are receiving this because you are subscribed to this thread.Message

ID: @.***>

I'm already handling the issue

[MouhibKhammassi]

hey i did a pull request and i was wondering if someone could check it out and review it?