Skip to content

feat(web): render AskUserQuestion result as an option list#1391

Merged
wbxl2000 merged 6 commits into
mainfrom
web/ask-user-question-result-card
Jul 5, 2026
Merged

feat(web): render AskUserQuestion result as an option list#1391
wbxl2000 merged 6 commits into
mainfrom
web/ask-user-question-result-card

Conversation

@wbxl2000

@wbxl2000 wbxl2000 commented Jul 5, 2026

Copy link
Copy Markdown
Collaborator

Related Issue

No related issue — small UX polish on existing tool / chat cards.

Problem

A few small rendering glitches in the chat UI:

  • The AskUserQuestion result card rendered the tool output as a raw JSON line (e.g. {"answers":{"q_0":"opt_0_1","q_1":"opt_1_0,opt_1_2"}}), which exposes synthesized ids and is hard to read at a glance.
  • The expanded body of every tool-call card carried a hard-coded 36px left indent (a magic number meant to align with the header name) that is not part of the design system.
  • The markdown diff code block did not match the other code blocks: it dyed added/removed code text green/red, used a text copy button, and had ad-hoc header sizing.

What changed

  • Added a dedicated web renderer for the AskUserQuestion result card. It parses the result and echoes the full option list, highlighting the chosen option(s) and dimming the rest, so the transcript shows both what was picked and what was passed over. It handles single- and multi-select, free-text "Other" answers, and the dismissed state. Because the input questions carry no ids, answers are zipped back to the questions by index. Includes unit tests for the parsing/decoding logic.
  • Dropped the stray left indent in the shared tool-call card body so expanded content aligns with the header instead. The design-system preview page mirrored the same rule and is updated to match.
  • Made the markdown diff block's shell identical to a regular code block (same container, header, icon copy button, padding, background, radius, shadow). The diff-specific row tinting — soft background, inset accent bar and a coloured +/- sign with the code text kept in the normal ink colour — is kept, matching the ~/diff panel.

Includes changesets for all three.

Checklist

  • I have read the CONTRIBUTING document.
  • I have linked a related issue, or explained the problem above.
  • I have added tests that prove my feature works.
  • Ran gen-changesets skill, or this PR needs no changeset.
  • Ran gen-docs skill, or this PR needs no doc update. (No user-facing docs page covers these cards, so no doc update is needed.)

Parse the AskUserQuestion tool result and echo the full option list, highlighting the chosen option(s) and dimming the rest, instead of dumping raw JSON. Handles single/multi select, free-text Other answers, and the dismissed state. Answers are zipped back to the input questions by index since the input carries no ids.
@changeset-bot

changeset-bot Bot commented Jul 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 624e9c6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@moonshot-ai/kimi-code Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new

pkg-pr-new Bot commented Jul 5, 2026

Copy link
Copy Markdown
pnpm dlx https://pkg.pr.new/@moonshot-ai/kimi-code@624e9c6
npx https://pkg.pr.new/@moonshot-ai/kimi-code@624e9c6

commit: 624e9c6

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f3b83ba2b8

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread apps/kimi-web/src/components/chat/tool-calls/AskUserTool.vue Outdated
wbxl2000 added 4 commits July 5, 2026 14:07
The expanded body of every tool-call card carried a hard-coded 36px left indent (a magic number meant to align with the header name). Drop it so expanded content aligns with the header's 11px padding instead. The design-system preview page mirrored the same rule and is updated to match.
Restyle the local ```diff renderer in chat Markdown to match the ~/diff panel: code text keeps the normal ink colour, the +/- sign carries the add/del colour, and rows use a soft background with an inset accent bar instead of dyeing the text green/red. The header and copy button now match the standard code-block chrome (height, hover, focus ring).
Make the local markdown diff renderer's shell identical to a regular code block: swap the text copy button for the same icon button, inherit the header's text-xs sizing, and keep the container / header / code-area padding, background, radius and shadow in lockstep with .code-block-container and .code-block-header. The diff-specific row tinting (soft background, inset accent bar, coloured sign) is kept since that is what makes it a diff.
Background launches and error cases return plain-text tool output (task_id/status lines, or a failure reason), not the { answers } JSON the card expects. The card used to render an empty, fully-unselected option list in those cases, hiding the task id or error. Now the card only renders the option list when the output parses as the answer payload; otherwise it shows the raw output. Addresses review feedback (P2).
@wbxl2000

wbxl2000 commented Jul 5, 2026

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 11084b4f29

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread apps/kimi-web/src/components/chat/tool-calls/AskUserTool.vue Outdated
The card hard-coded user-visible strings (Dismissed, answer/answers, Answered, the (+N more) summary), so Chinese-locale transcripts mixed in English. Move them into the en/zh tools locale files and read them via t(). Addresses review feedback (P2).
@wbxl2000

wbxl2000 commented Jul 5, 2026

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Hooray!

Reviewed commit: 624e9c6f4b

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

@wbxl2000 wbxl2000 merged commit c5c6282 into main Jul 5, 2026
10 checks passed
@wbxl2000 wbxl2000 deleted the web/ask-user-question-result-card branch July 5, 2026 18:36
@github-actions github-actions Bot mentioned this pull request Jul 5, 2026
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.

1 participant