Skip to content

feat(chat): implicit prompt loading with badge dropdown#76

Merged
Zhang-Henry merged 2 commits intomainfrom
feat/implicit-prompt-badge-dropdown
Mar 26, 2026
Merged

feat(chat): implicit prompt loading with badge dropdown#76
Zhang-Henry merged 2 commits intomainfrom
feat/implicit-prompt-badge-dropdown

Conversation

@MarkSiqiZhang
Copy link
Copy Markdown
Collaborator

@MarkSiqiZhang MarkSiqiZhang commented Mar 22, 2026

Summary

  • Previously, selecting a task filled the chat input with a long prompt string like `Please help me with "Literature survey" and use these skills
  • When users select a task card (e.g., "Literature survey"), the prompt is now hidden behind a compact badge chip at the top of the input
    container, instead of filling the textarea with raw prompt text
  • Users can click the dropdown arrow to expand and edit the full prompt inline
  • The textarea stays clean for typing additional instructions, which are appended to the prompt on submit
  • Chat history displays a styled badge with the task name, keeping conversations readable

Changes

  • AttachedPrompt type added to ChatMessage to carry prompt metadata through the message flow
  • useChatComposerState — new attachedPrompt state; handleSubmit prepends prompt text and clears it after send
  • PromptBadgeDropdown — new component rendering the badge chip with collapsible editable prompt
  • GuidedPromptStarter / SkillShortcutsPanel — use setAttachedPrompt instead of setInput to attach prompts implicitly
  • MessageComponent — renders attached prompt badge in user message bubbles
  • i18n — all 3 locales (en, zh-CN, ko) updated

Test plan

  • Click a task card (e.g., "Literature survey") → badge chip appears, textarea stays empty
  • Click dropdown arrow on badge → full prompt text shown and editable
  • Type additional instructions → submit → verify combined message sent correctly
  • Click ✕ on badge → prompt removed, textarea returns to normal
  • Switch tasks → badge updates to new task
  • Submit with badge only (no extra text) → prompt sent as-is
  • Chat history shows badge + user text, not raw prompt

Zhang-Henry
Zhang-Henry reviewed Mar 22, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@Zhang-Henry Zhang-Henry left a comment

Choose a reason for hiding this comment

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

Code Review

Overall clean implementation — the badge + editable dropdown approach is well-designed. A few items to address:

Bug: attachedPrompt not cleared on slash command execution

useChatComposerState.ts — The slash command handler (line ~542) has its own cleanup and returns early, bypassing the main reset path where setAttachedPrompt(null) is called. If a user attaches a prompt then runs a /command, the badge will persist.

Fix: Add setAttachedPrompt(null) to the slash command cleanup block.

Performance: onUpdate fires on every keystroke

PromptBadgeDropdown.tsx — The editable textarea calls onUpdate → setAttachedPrompt on every onChange, causing the entire composer to re-render per keystroke. Consider updating on onBlur instead, or debouncing.

Minor

  • Empty message bubble: When submitting with only an attached prompt (no user text), message.content is "" — the bubble shows a badge with blank body. Consider hiding the content div or showing a prompt summary.
  • Circular useEffect: The editText sync effect re-fires on self-triggered promptText changes. Keying on prompt.scenarioId instead of prompt.promptText would be cleaner (especially if switching to blur-based updates).
  • Accessibility: PromptBadgeDropdown lacks Escape-to-close and aria-expanded/aria-controls.

Positive

  • Clean AttachedPrompt type and ChatMessage extension
  • Full i18n coverage (en/zh-CN/ko)
  • Good backward-compatible fallback via optional setAttachedPrompt prop
  • Correct thinking mode prefix fix (currentInput → messageContent)

@MarkSiqiZhang
Copy link
Copy Markdown
Collaborator Author

MarkSiqiZhang commented Mar 23, 2026

Thanks for the thorough review! All items addressed:

Bug fix — Added setAttachedPrompt(null) to the slash command cleanup block so the badge is cleared on early return.

Performance — Switched to blur-based updates. The text area now uses local state for keystroke responsiveness and only calls onUpdate on blur.

Minor items:

  • Empty bubble: content div is now conditionally rendered only when message.content?.trim() is truthy.
  • Circular effect: dependency changed from prompt.promptText to prompt.scenarioId — editText only resets when switching tasks.
  • Accessibility: added aria-expanded, aria-controls, and Escape-to-close on the dropdown.

@MarkSiqiZhang @Zhang-Henry
feat(chat): implicit prompt loading with badge dropdown
35440a9 
When selecting a task card, the prompt is hidden behind a badge chip
at the top of the input container. Users can click the dropdown arrow
to expand and edit the prompt, while the textarea stays clean.
@MarkSiqiZhang @Zhang-Henry
fix(chat): address code review feedback for implicit prompt loading
9a86366 
- Clear attachedPrompt on slash command execution to prevent stale badge
- Update prompt text on blur instead of every keystroke to avoid re-renders
- Hide empty content div when submitting with only an attached prompt
- Sync editText on scenarioId change instead of promptText to avoid circular effect
- Add aria-expanded, aria-controls, and Escape-to-close for accessibility
@Zhang-Henry Zhang-Henry force-pushed the feat/implicit-prompt-badge-dropdown branch from fb5796b to 9a86366 Compare March 26, 2026 06:42
@Zhang-Henry Zhang-Henry merged commit e96791b into main Mar 26, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Zhang-Henry Zhang-Henry Zhang-Henry left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@MarkSiqiZhang @Zhang-Henry