supermemory/apps/web/components
vorflux b6913a0375 feat: highlight chat shows inline reply and uses highlight as assistant's first message (#944)
## Summary

Changes the highlight "Chat" button behavior:

- **Before**: Clicking "Chat" immediately opened the chat view with "Tell me more about XYZ" sent as the user's first message
- **After**: Clicking "Chat" reveals an inline reply input right under the highlight card. The user types their response, and when they submit:
  - The highlight content appears as the **assistant's first message** (prefixed with "Here is a highlight from your memories:")
  - The user's reply appears as the second message
  - A fresh chat thread is created (no overwriting existing conversations)

### Files Changed

- **`apps/web/components/highlights-card.tsx`** - Added inline reply input UI with send/cancel buttons, keyboard handling (Enter/Escape), auto-focus, and state reset on item navigation or items refresh
- **`apps/web/components/chat/index.tsx`** - Added `queuedHighlightContent` prop, fresh thread creation for highlight chats, deferred `setMessages` to ensure correct Chat instance targeting, and `awaitingHighlightInjectionRef` for safe reply dispatch
- **`apps/web/app/(app)/page.tsx`** - Added `queuedHighlightContent` state, updated `handleHighlightsChat` to accept highlight content + user reply, cleared stale highlight content in `handleHomeChatStart`
- **`apps/web/components/dashboard-view.tsx`** - Updated `onHighlightsChat` type signature
- **`apps/web/components/memories-grid.tsx`** - Updated `HighlightsProps.onChat` type signature

## Testing

### TypeScript
- `npx tsc --noEmit` — no new type errors (all errors are pre-existing in unrelated files)

### Biome
- `bunx biome check --write` — clean on all changed files (pre-existing warnings only in dashboard-view.tsx)

### Automated Tests (via testing subagent)
- **25 passed / 0 failed / 1 skipped** (26 total)
- Tests covered: inline reply input visibility, keyboard handling (Enter/Escape), reply state reset on navigation, highlight content injection as assistant message, user reply dispatch, fresh thread creation, stale highlight content prevention, pagination dot handler
- The testing agent discovered and fixed a race condition where `setMessages` was called before `useChat` had recreated its internal Chat object after `setFallbackChatId` — the fix defers `setMessages` to a separate effect gated on `currentChatId` matching the target
- 1 test skipped (T12): Nova FAB button not separately visible from highlights card button at 1440px viewport — expected structural behavior

---
**Session Details**
- Session: [View Session](https://supermemory.us1.vorflux.com/agent-sessions/9cbf2106-b7b9-4d7c-b275-2a7e72417793)
- Requested by: Soham Daga (soham@supermemory.com)
- Address comments on this PR. Add `(aside)` to your comment to have me ignore it.
2026-05-16 08:11:08 +00:00
..
add-document fix: Add plugin document rendering and MCP preview support (#938) 2026-05-15 18:26:37 +00:00
chat feat: highlight chat shows inline reply and uses highlight as assistant's first message (#944) 2026-05-16 08:11:08 +00:00
document-cards fix: Add plugin document rendering and MCP preview support (#938) 2026-05-15 18:26:37 +00:00
document-modal fix: Add plugin document rendering and MCP preview support (#938) 2026-05-15 18:26:37 +00:00
integrations fix: Add plugin document rendering and MCP preview support (#938) 2026-05-15 18:26:37 +00:00
mcp-modal chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
memory-graph feat: make graph popover content scrollable and add View full button (#920) 2026-05-11 02:09:36 +00:00
nova feat(nova): add hermes plugin instructions (#832) 2026-04-06 23:18:38 +00:00
onboarding add responsivness in share graph, bookmark section, navigation controls (#940) 2026-05-15 08:37:01 -07:00
settings feat: add connector sync visibility to NOVA settings page (#930) 2026-05-12 11:59:56 +05:30
text-editor chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
add-space-modal.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
animated-gradient-background.tsx feat: major iteration on the app (#896) 2026-05-02 23:58:58 +00:00
connect-ai-modal.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
dashboard-view.tsx feat: highlight chat shows inline reply and uses highlight as assistant's first message (#944) 2026-05-16 08:11:08 +00:00
document-icon.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
documents-command-palette.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
ensure-workspace.tsx feat: enhanced the integration page for more conversion (#899) 2026-05-04 17:41:52 +00:00
error-boundary.tsx error boundaries 2026-02-12 16:41:12 -08:00
feedback-modal.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
fullscreen-note-modal.tsx fix: improve settings sidebar overflow (#924) 2026-05-10 17:56:28 -07:00
graph-layout-view.tsx feat: make graph popover content scrollable and add View full button (#920) 2026-05-11 02:09:36 +00:00
header.tsx fix: Add plugin document rendering and MCP preview support (#938) 2026-05-15 18:26:37 +00:00
highlights-card.tsx feat: highlight chat shows inline reply and uses highlight as assistant's first message (#944) 2026-05-16 08:11:08 +00:00
initial-header.tsx fix: redirect new users to onboarding from plugin connect page (#908) 2026-05-11 10:57:43 -07:00
integration-icons.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
integrations-view.tsx add codex plugin logo and add in description (#943) 2026-05-15 08:25:43 -07:00
memories-grid.tsx feat: highlight chat shows inline reply and uses highlight as assistant's first message (#944) 2026-05-16 08:11:08 +00:00
mobile-banner.tsx chore: remove the new folder and fix imports (#740) 2026-02-16 14:30:29 -07:00
next-app-research-cta.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
query-client.tsx chore: remove the new folder and fix imports (#740) 2026-02-16 14:30:29 -07:00
quick-note-card.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
remove-connection-dialog.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
select-spaces-modal.tsx fix: Add plugin document rendering and MCP preview support (#938) 2026-05-15 18:26:37 +00:00
share-modal.tsx add responsivness in share graph, bookmark section, navigation controls (#940) 2026-05-15 08:37:01 -07:00
space-selector.tsx fix: Add plugin document rendering and MCP preview support (#938) 2026-05-15 18:26:37 +00:00
spinner.tsx feat: mobile responsive, lint formats, toast, render issue fix (#688) 2026-01-21 03:11:53 +00:00
superloader.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
timeline-view.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
user-profile-menu.tsx chore: improve the codebase with react doctor (#917) 2026-05-09 19:12:01 +00:00
utils.ts chore: remove the new folder and fix imports (#740) 2026-02-16 14:30:29 -07:00