feat(web): add composer enter behavior setting (#586)

2026-08-05 06:24:37 +00:00 · 2026-05-07 08:27:13 +08:00
parent 6df84df756
commit 08d3d9e111
9 changed files with 398 additions and 5 deletions
@@ -0,0 +1,68 @@
+# Web Enter Behavior Setting Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a persisted Web setting that switches composer Enter behavior between send and newline modes.
+
+**Architecture:** Store the preference in a dedicated Web hook backed by localStorage, surface it through the existing settings dropdown UI, and branch the composer Enter handling based on the selected mode while preserving IME and autocomplete behavior.
+
+**Tech Stack:** React 19, TypeScript, Vitest, Testing Library, localStorage-backed hooks, project i18n dictionaries.
+
+---
+
+## File Structure
+
+- New: `web/src/hooks/useComposerEnterBehavior.ts` — composer enter behavior type, options, storage helpers, React hook
+- New: `web/src/hooks/useComposerEnterBehavior.test.ts` — helper-level regression tests
+- Modify: `web/src/routes/settings/index.tsx` — add settings dropdown and wire hook
+- Modify: `web/src/routes/settings/index.test.tsx` — assert new setting renders and uses i18n key
+- Modify: `web/src/components/AssistantChat/HappyComposer.tsx` — apply behavior to Enter handling
+- Modify: `web/src/lib/locales/en.ts` — English labels
+- Modify: `web/src/lib/locales/zh-CN.ts` — Chinese labels
+
+### Task 1: Preference hook
+
+**Files:**
+- Create: `web/src/hooks/useComposerEnterBehavior.ts`
+- Test: `web/src/hooks/useComposerEnterBehavior.test.ts`
+
+- [ ] Define `ComposerEnterBehavior = 'send' | 'newline'`
+- [ ] Add helper `getComposerEnterBehaviorOptions()` returning the two values with translation keys
+- [ ] Add localStorage-backed parser with default fallback to `send`
+- [ ] Add `useComposerEnterBehavior()` hook consistent with existing hook patterns
+- [ ] Add helper tests for options, default fallback, invalid fallback, valid stored value
+
+### Task 2: Settings integration + i18n
+
+**Files:**
+- Modify: `web/src/routes/settings/index.tsx`
+- Modify: `web/src/routes/settings/index.test.tsx`
+- Modify: `web/src/lib/locales/en.ts`
+- Modify: `web/src/lib/locales/zh-CN.ts`
+
+- [ ] Add i18n keys for chat section, enter key label, send option, newline option
+- [ ] Add dropdown open/close state and refs in settings page
+- [ ] Render the new Chat section using the existing settings dropdown UI pattern
+- [ ] Show translated current label from selected behavior option
+- [ ] Extend settings page tests to assert the new setting renders and translation key is used
+
+### Task 3: Composer behavior
+
+**Files:**
+- Modify: `web/src/components/AssistantChat/HappyComposer.tsx`
+
+- [ ] Read composer enter behavior from the new hook
+- [ ] Keep IME guard unchanged
+- [ ] Keep suggestion selection precedence on Enter unchanged
+- [ ] In `send` mode keep plain Enter send behavior
+- [ ] In `newline` mode allow plain Enter default newline behavior, but send on Ctrl/Cmd+Enter
+- [ ] Keep Shift+Enter newline behavior in both modes
+
+### Task 4: Verification
+
+**Files:**
+- No source change required unless verification exposes defects
+
+- [ ] Run: `cd web && bun run test -- src/hooks/useComposerEnterBehavior.test.ts src/routes/settings/index.test.tsx`
+- [ ] Run: `cd web && bun run typecheck`
+- [ ] Review diff to confirm scope is limited to Web setting + i18n + composer logic
@@ -0,0 +1,83 @@
+# Web Enter Behavior Setting Design
+
+**Date:** 2026-05-06  
+**Issue:** [#570](https://github.com/tiann/hapi/issues/570)
+
+## Goal
+
+Add a Web setting that controls what Enter does in the chat composer. Default stays **send**. Users can switch to **newline** mode. In newline mode, plain Enter inserts a newline and Ctrl/Cmd+Enter sends.
+
+## Scope
+
+- Add a persisted Web preference for composer enter behavior
+- Expose the preference in the Web settings page
+- Apply the preference in `HappyComposer`
+- Add i18n strings in English and Simplified Chinese
+- Add focused regression tests for preference helpers and settings rendering
+
+## Non-Goals
+
+- No per-session override
+- No mobile-only special case
+- No backend / shared protocol change
+
+## Behavior
+
+### Mode: `send` (default)
+- Enter: send
+- Shift+Enter: newline
+- Ctrl/Cmd+Enter: keep current non-send behavior; plain Enter remains the only send shortcut
+
+### Mode: `newline`
+- Enter: newline
+- Ctrl/Cmd+Enter: send
+- Shift+Enter: newline
+
+### Shared rules
+- IME composition must remain untouched
+- When autocomplete suggestions are open, Enter should still select the highlighted suggestion first
+- Existing send button remains available in all modes
+
+## Storage
+
+Use localStorage key:
+
+- `hapi-composer-enter-behavior`
+
+Allowed values:
+
+- `send`
+- `newline`
+
+Fallback:
+
+- invalid / missing value => `send`
+
+## UI
+
+Add a new settings section item in Web settings:
+
+- Section: Chat
+- Label: Enter Key
+- Options:
+  - Send message
+  - Insert newline
+
+This should follow the existing dropdown interaction pattern already used in settings.
+
+## Files
+
+- New: `web/src/hooks/useComposerEnterBehavior.ts`
+- New: `web/src/hooks/useComposerEnterBehavior.test.ts`
+- Modify: `web/src/routes/settings/index.tsx`
+- Modify: `web/src/routes/settings/index.test.tsx`
+- Modify: `web/src/components/AssistantChat/HappyComposer.tsx`
+- Modify: `web/src/lib/locales/en.ts`
+- Modify: `web/src/lib/locales/zh-CN.ts`
+
+## Testing
+
+- Verify helper options + storage fallback logic
+- Verify settings page shows the new translated setting and selected label
+- Run targeted web tests
+- Run `web` typecheck