Skip to content

[ZEPPELIN-6745] Add AI Assistant message and answer state UI - #5567

Open
kimyenac wants to merge 4 commits into
apache:branch-voidmatcha-assistant-storybook-tempfrom
kimyenac:ZEPPELIN-6745
Open

kimyenac wants to merge 4 commits into
apache:branch-voidmatcha-assistant-storybook-tempfrom
kimyenac:ZEPPELIN-6745

Conversation

@kimyenac

@kimyenac kimyenac commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

What is this PR for?

Add the AI Assistant message and answer state UI: user and Assistant messages are shown distinctly, and an answer displays its loading, streaming, tool-use, completed and error states. Everything is driven by fixture props. There is no server, transport or panel state. The components live in projects/zeppelin-react/src/entities/assistant/ui.

Base: branch-voidmatcha-assistant-storybook-temp (branched at 4599ad2d9). This PR adds only the four commits below: new files under entities/assistant/ui, plus the removal of the temporary Assistant/Setup story. The base already contains the prerequisite PRs it depends on: ZEPPELIN-6740 (#5562, Storybook), ZEPPELIN-6741 (#5561, the shared contract reused here) and ZEPPELIN-6743 (#5565). Once those merge, the base goes back to master.

Commits:

  1. Message item and answer view types
    • AssistantMessageItem renders a question or an answer:
      • A question is a right-aligned bubble, always shown as typed. It never goes through the content renderer.
      • An answer is a full-width body under an "AI / Assistant" label. While it streams, it is marked aria-busy and shows a caret.
    • AssistantAnswerView is the display union (loading / streaming / done / error). It reuses AssistantMessage and AssistantToolCallRef from the ZEPPELIN-6741 contract.
  2. Answer status, tool log and error displays
    • AssistantAnswer renders one view at a time. Each state fully replaces the last.
    • The progress line (role="status") reads "Thinking…", "Writing answer…" or "Running <tool>…".
    • AssistantToolLog is open while a tool runs and collapses once the answer completes. A tool whose tool_call.done carried no name is labelled "Tool".
    • AssistantAnswerError is an antd Alert (role="alert"):
      • failed (run.failed) and stream (AssistantStreamError) are errors with Retry.
      • connection (AssistantConnectionError) is a warning with Reload conversation, because the answer may have finished on the server.
      • With no onRetry, no button is shown.
      • A partial answer that arrived before the error is kept.
  3. Stories
    • Assistant/Message: User, CompletedReply, StreamingReply, LongContent, Conversation.
    • Assistant/Status: Loading, Streaming, ToolRunning, Completed, CompletedWithTools, Failed, StreamError, ConnectionLost, ErrorWithoutRetry.
    • Assistant/Status/StateSwitcher switches the fixture from the Controls panel, so you can check that the states stay consistent in both themes.
  4. Review: remove the temporary theme check story
    • Assistant/Setup › TemporaryThemeCheck (AssistantScope.stories.tsx) was a placeholder until the Assistant UI stories landed. Nothing else referenced it.

Styling uses @vanilla-extract/css through the Assistant theme contract only, so light and dark need no per-component rules. The HTML/CSS screens in voidmatcha/assistant-storybook-share were used as a design reference. The code is written from scratch.

Markdown (ZEPPELIN-6744): that PR is not open yet, so answers render through a renderContent slot that defaults to plain text (white-space: pre-wrap). There is no second Markdown renderer here. When ZEPPELIN-6744 merges, a follow-up commit makes its component the default.

Out of scope (per the issue / ZEPPELIN-6748): run event → view derivation, panel mounting in AssistantWorkspace, real tool calls, approval, persistence and WebSocket handling.

What type of PR is it?

Feature

Todos

  • Use the ZEPPELIN-6744 Markdown component as the default renderContent once it merges

What is the Jira issue?

How should this be tested?

In zeppelin-web-angular/projects/zeppelin-react:

  • npm ci, npm test (142 passed, 12 new), npm run typecheck, npm run lint and npm run build:storybook all pass.
    • typecheck needs npm ci in zeppelin-web-angular first, because the SDK resolves rxjs from there.
    • The new files also pass the frontend's prettier --check.
  • npm run storybook: both themes checked manually for every story above, including StateSwitcher.
  • The specs were mutation-checked: making the connection error say "Retry", keeping the progress line on error, dropping the "Tool" fallback, rendering a question through renderContent, or keeping the tool log open each fails exactly the intended test.

npm run test:storybook:

  • With --workers=1, all 30 tests pass.
  • With the default config (3 workers), 1–5 tests time out between runs.
    • The traces show asset requests to the python3 -m http.server web server failing (status -1) and a blank page.
    • The base branch's own story alone (at 4599ad2d9) reproduces this: with --repeat-each=8, 1–2 of 16 time out.
    • So it is a problem with the existing smoke-test server, not with these stories. I left it untouched here.

Screenshots (if appropriate)

See the Assistant/Message and Assistant/Status stories.

Questions:

  • Does the license files need to update? No. There are no new dependencies.
  • Is there breaking changes for older versions? No. Only new files are added.
  • Does this needs documentation? No.

@voidmatcha
voidmatcha changed the base branch from master to branch-voidmatcha-assistant-storybook-temp October 12, 2026 04:40

@voidmatcha voidmatcha left a comment •

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The message and answer states are easy to inspect in Storybook, and the components can be developed independently of the server. Thanks for putting these together.

Could you remove the TemporaryThemeCheck story now that the actual Assistant stories are available?

The PR description still says this was opened against master, but the current base is the temporary Storybook branch. Please update that explanation so the diff and dependencies are clear to reviewers.

Since different contributors are building the UI pieces, we may want one integration pass to align the design and state presentation afterward. I can open a follow-up issue if that becomes necessary.

@kimyenac

Copy link
Copy Markdown
Contributor Author

Thanks for the review!

  • Removed the TemporaryThemeCheck story in 1cc3ea2. AssistantScope.stories.tsx had no other stories or references. Tests, typecheck, lint, build:storybook and the Storybook smoke test (30/30) pass.
  • Updated the description: the base is now the temporary Storybook branch, and it lists the prerequisite PRs this depends on.
  • Agreed on the integration pass. Happy to help align these with the other pieces once they land.

@voidmatcha voidmatcha left a comment •

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 Once the prerequisite PRs merge, I will retarget this PR to master and check the final diff and CI before merging.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants