@kiali/chatbot

An AI-powered chatbot component for Kiali. The UI is built with PatternFly 6, while Kiali currently uses PatternFly 5. This repository contains:

• The reusable PF6 chatbot library (root src/, built with Rollup)
• A PF5 demo app under dev/ to validate embedding the PF6 chatbot inside a PF5 application

Published on npm: @kiali/chatbot

Why PF6 inside a PF5 app?

Kiali uses PF5 today, but the chatbot leverages PF6 components. To embed the chatbot in Kiali, we isolate and wrap the PF6 UI so it can run inside a PF5 application without conflicts. The dev/ app demonstrates the exact integration approach you can mirror in Kiali.

Develop and test locally

• Start the dev app (PF5 mock-up running this library):

cd dev
yarn install
yarn start

• When you change the library, rebuild it so the dev app picks up changes:

# from the repository root
yarn build

The dev app links the library via @kiali/chatbot: link:../, so rerun yarn build at the root after edits to see updates reflected in the running dev app.

• See more details in dev/README.md.

Integration files and data flow

• src/components/KialiChatBot/KialiChatBot.tsx
  • Wraps PatternFly Chatbot primitives to render the toggle, header, conversation drawer, message list, and footer.
  • Manages display modes (overlay, docked, fullscreen), branding, and model selection.
  • Coordinates conversation history and renders messages from the hook.
• src/useChatbot/useChatbot.ts
  • React hook that communicates with the AI agent endpoint.
  • Manages message state, sending queries, handling responses, timeouts (including 429), and conversation IDs.

In the PF5 demo (dev/), the files src/Chatbot.tsx and src/ChatbotWindow.tsx show how to embed the PF6 chatbot component in a PF5 application. In Kiali, keep analogous integration components so PF6 (chatbot) and PF5 (app) coexist cleanly.

CI/CD and support policy

• A GitHub Action publishes a new version to npm after merges to main when src/** or package.json change and the version is bumped.
• This library is intended for Kiali use. While published to npm for convenience, it is not a general-purpose chatbot solution. Support is focused on Kiali integration only.

Build the library

yarn build

Outputs dist/ with bundles and type declarations per rollup.config.js and tsconfig.json.

Screenshots

Graph:

Graph (dark mode):

License

Apache-2.0

Next steps

Improve messages:

• https://www.patternfly.org/patternfly-ai/chatbot/messages#custom-message-content
• https://www.patternfly.org/patternfly-ai/chatbot/messages#messages-with-quick-responses

Pending to improve:

• https://github.com/patternfly/chatbot/issues/659
• https://github.com/patternfly/chatbot/issues/629
• https://github.com/patternfly/chatbot/issues/658