diff --git a/.changeset/mobile-enter-newline.md b/.changeset/mobile-enter-newline.md index fd2296b..1151cd2 100644 --- a/.changeset/mobile-enter-newline.md +++ b/.changeset/mobile-enter-newline.md @@ -2,4 +2,4 @@ "@jmfederico/pi-web": patch --- -Keep Enter/Return in the mobile chat composer for new lines, and send messages there only from the send button. +Add a Keyboard shortcuts setting for choosing whether Enter sends chat messages or inserts new lines in this browser, while preserving the desktop-vs-mobile default (desktop Enter sends; mobile/coarse/narrow Enter inserts a new line). diff --git a/package-lock.json b/package-lock.json index de4644b..ea3cc33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1575,7 +1575,7 @@ "typebox": "1.1.38" }, "bin": { - "pi-ai": "./dist/cli.js" + "pi-ai": "dist/cli.js" }, "engines": { "node": ">=22.19.0" diff --git a/src/client/src/components/PromptEditor.ts b/src/client/src/components/PromptEditor.ts index 944c3a9..85d022e 100644 --- a/src/client/src/components/PromptEditor.ts +++ b/src/client/src/components/PromptEditor.ts @@ -13,7 +13,7 @@ import { machineSessionKey } from "../machineKeys"; import { detectPromptCompletionTrigger, fileCompletionInsertText, type PromptCompletionTrigger } from "../promptCompletions"; import { clearDraft, loadDraft, saveDraft } from "../promptDraftStorage"; import { loadAttachmentDelivery, saveAttachmentDelivery } from "../attachmentPreferences"; -import { createMobilePromptEnterMedia, shouldSendPromptOnEnter } from "../promptEnterBehavior"; +import { createMobilePromptEnterMedia, readPromptEnterPreference, shouldSendPromptOnEnter } from "../promptEnterBehavior"; import { promptEditorStyles, type CompletionItem } from "./shared"; import { renderAttachIcon, renderSendIcon, renderQueueIcon, renderSteerIcon, renderStopIcon, renderThinkingGauge } from "./promptEditorIcons"; import { thinkingGauge, thinkingLevelLabel } from "../../../shared/thinkingLevels"; @@ -343,7 +343,7 @@ export class PromptEditor extends LitElement { if (completion !== undefined) this.pick(completion); return true; } - if (!shouldSendPromptOnEnter(this.mobilePromptEnterMedia)) { + if (!shouldSendPromptOnEnter(this.mobilePromptEnterMedia, readPromptEnterPreference())) { return insertNewlineContinueMarkup(view) || insertNewlineAndIndent(view); } this.send(this.canSteer || this.isCompacting ? "followUp" : undefined); diff --git a/src/client/src/components/settings/SettingsShortcutsPanel.ts b/src/client/src/components/settings/SettingsShortcutsPanel.ts index 34db3f0..c0847a9 100644 --- a/src/client/src/components/settings/SettingsShortcutsPanel.ts +++ b/src/client/src/components/settings/SettingsShortcutsPanel.ts @@ -3,9 +3,28 @@ import { customElement, property, state } from "lit/decorators.js"; import type { AppAction } from "../../actions"; import type { PiWebConfigResponse, PiWebConfigValues, PiWebShortcutConfig } from "../../api"; import { formatShortcut, isShortcutSequenceStarter, parseShortcutInput, resolveShortcutBindings, shortcutSequenceTimeoutMs, shortcutTokenFromEvent, type ShortcutBindingResolution } from "../../keyboardShortcuts"; +import { readPromptEnterPreference, writePromptEnterPreference, type PromptEnterPreference } from "../../promptEnterBehavior"; const RECORD_SHORTCUT_LISTENER_OPTIONS = { capture: true } as const; +const PROMPT_ENTER_OPTIONS: readonly { value: PromptEnterPreference; label: string; description: string }[] = [ + { + value: "auto", + label: "Auto/default", + description: "Desktop-like Enter sends; mobile, coarse pointer, or narrow screens insert a new line.", + }, + { + value: "send", + label: "Enter sends message", + description: "Plain Enter sends the chat message from this browser.", + }, + { + value: "newline", + label: "Enter inserts new line", + description: "Plain Enter adds a line break; use the send button to send.", + }, +]; + @customElement("settings-shortcuts-panel") export class SettingsShortcutsPanel extends LitElement { @property({ attribute: false }) actions: AppAction[] = []; @@ -18,6 +37,7 @@ export class SettingsShortcutsPanel extends LitElement { @property({ attribute: false }) onSave?: (config: PiWebConfigValues) => void | Promise; @state() private drafts: Record = {}; @state() private localError = ""; + @state() private promptEnterPreference: PromptEnterPreference = readPromptEnterPreference(); @state() private recording: RecordingState | undefined; private recordingTimer: number | undefined; private recordingListenerActive = false; @@ -75,6 +95,7 @@ export class SettingsShortcutsPanel extends LitElement { ${this.renderMessages()} + ${this.renderPromptEnterPreferenceCard()} ${this.configResponse === undefined && this.loading ? html`
Loading shortcuts…
` : html`
Config file @@ -100,6 +121,40 @@ export class SettingsShortcutsPanel extends LitElement { return null; } + private renderPromptEnterPreferenceCard(): TemplateResult { + return html` +
+
+ Chat composer +

Enter key behavior

+

Choose what plain Enter does in this browser.

+
+
+ ${PROMPT_ENTER_OPTIONS.map((option) => html` + + `)} +
+
+ `; + } + + private updatePromptEnterPreference(preference: PromptEnterPreference): void { + this.promptEnterPreference = preference; + writePromptEnterPreference(preference); + } + private renderShortcutRow(action: AppAction, resolution: ShortcutBindingResolution | undefined): TemplateResult { const shortcuts = this.configResponse?.config.shortcuts; const configured = shortcutPreference(action.id, shortcuts); @@ -291,13 +346,22 @@ export class SettingsShortcutsPanel extends LitElement { button:disabled, input:disabled { opacity: .55; cursor: not-allowed; } .primary { border-color: var(--pi-accent); background: var(--pi-selection-bg); color: var(--pi-text-bright); } .secondary { flex: 0 0 auto; } - .message, .loading-card, .config-path-card { border: 1px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); padding: 12px; } + .message, .loading-card, .config-path-card, .prompt-enter-card { border: 1px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); padding: 12px; } .message { margin-bottom: 12px; } .error-message { border-color: var(--pi-danger); color: var(--pi-danger); background: color-mix(in srgb, var(--pi-danger) 10%, var(--pi-surface)); } .success-message { border-color: var(--pi-success-border); color: var(--pi-success); background: var(--pi-success-surface); } .loading-card, .config-path-card { color: var(--pi-muted); } .config-path-card { display: grid; gap: 5px; margin-bottom: 14px; } - .config-path-card span { color: var(--pi-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; } + .config-path-card span, .card-eyebrow { color: var(--pi-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; } + .prompt-enter-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(260px, 1fr); gap: 12px; align-items: start; margin-bottom: 14px; } + .prompt-enter-copy { display: grid; gap: 5px; min-width: 0; } + .prompt-enter-copy p, .prompt-enter-option small { font-size: 12px; } + .prompt-enter-options { display: grid; gap: 7px; } + .prompt-enter-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; color: var(--pi-text); } + .prompt-enter-option input { box-sizing: border-box; width: 14px; min-width: 14px; height: 14px; margin: 3px 0 0; padding: 0; border: 0; background: transparent; accent-color: var(--pi-accent); font-family: inherit; } + .prompt-enter-option input:focus { border-color: transparent; box-shadow: none; outline: 2px solid var(--pi-accent-border); outline-offset: 2px; } + .prompt-enter-option span { display: grid; gap: 2px; } + .prompt-enter-option small { color: var(--pi-muted); line-height: 1.35; } code { border: 1px solid var(--pi-border-muted); border-radius: 5px; background: var(--pi-bg); padding: 1px 4px; color: var(--pi-text); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; } .shortcut-group { margin: 0 0 16px; } .shortcut-group h3 { margin: 0 0 8px; color: var(--pi-muted); font-size: 12px; text-transform: uppercase; } @@ -330,6 +394,7 @@ export class SettingsShortcutsPanel extends LitElement { @media (max-width: 760px) { .section-heading { display: grid; gap: 12px; } .section-heading .secondary { justify-self: start; } + .prompt-enter-card { grid-template-columns: minmax(0, 1fr); } .shortcut-row { grid-template-columns: minmax(0, 1fr); align-items: start; } .shortcut-status, .shortcut-actions { justify-content: flex-start; } } diff --git a/src/client/src/promptEnterBehavior.test.ts b/src/client/src/promptEnterBehavior.test.ts index bb5eabe..b3a14a9 100644 --- a/src/client/src/promptEnterBehavior.test.ts +++ b/src/client/src/promptEnterBehavior.test.ts @@ -1,17 +1,86 @@ import { describe, expect, it } from "vitest"; -import { MOBILE_PROMPT_ENTER_MEDIA_QUERY, shouldSendPromptOnEnter, type PromptEnterMedia } from "./promptEnterBehavior"; +import { + MOBILE_PROMPT_ENTER_MEDIA_QUERY, + parsePromptEnterPreference, + PROMPT_ENTER_PREFERENCE_STORAGE_KEY, + readPromptEnterPreference, + shouldSendPromptOnEnter, + writePromptEnterPreference, + type PromptEnterMedia, +} from "./promptEnterBehavior"; describe("promptEnterBehavior", () => { it("uses the expected mobile media query", () => { expect(MOBILE_PROMPT_ENTER_MEDIA_QUERY).toBe("(pointer: coarse), (max-width: 760px)"); }); - it("sends on Enter outside the mobile environment", () => { - expect(shouldSendPromptOnEnter({ matches: false } satisfies PromptEnterMedia)).toBe(true); - expect(shouldSendPromptOnEnter(undefined)).toBe(true); + it("uses the environment default when the preference is auto", () => { + expect(shouldSendPromptOnEnter({ matches: false } satisfies PromptEnterMedia, "auto")).toBe(true); + expect(shouldSendPromptOnEnter(undefined, "auto")).toBe(true); + expect(shouldSendPromptOnEnter({ matches: true } satisfies PromptEnterMedia, "auto")).toBe(false); }); - it("keeps Enter as a newline in the mobile environment", () => { - expect(shouldSendPromptOnEnter({ matches: true } satisfies PromptEnterMedia)).toBe(false); + it("lets explicit preferences override the environment", () => { + expect(shouldSendPromptOnEnter({ matches: true } satisfies PromptEnterMedia, "send")).toBe(true); + expect(shouldSendPromptOnEnter({ matches: false } satisfies PromptEnterMedia, "newline")).toBe(false); + expect(shouldSendPromptOnEnter(undefined, "newline")).toBe(false); + }); + + it("parses local storage preference values", () => { + expect(parsePromptEnterPreference("auto")).toBe("auto"); + expect(parsePromptEnterPreference("send")).toBe("send"); + expect(parsePromptEnterPreference("newline")).toBe("newline"); + expect(parsePromptEnterPreference(null)).toBe("auto"); + expect(parsePromptEnterPreference("return")).toBe("auto"); + }); + + it("reads and writes the stored preference", () => { + const storage = new FakeStorage(); + + expect(readPromptEnterPreference(storage)).toBe("auto"); + writePromptEnterPreference("send", storage); + expect(storage.value(PROMPT_ENTER_PREFERENCE_STORAGE_KEY)).toBe("send"); + expect(readPromptEnterPreference(storage)).toBe("send"); + + writePromptEnterPreference("newline", storage); + expect(storage.value(PROMPT_ENTER_PREFERENCE_STORAGE_KEY)).toBe("newline"); + expect(readPromptEnterPreference(storage)).toBe("newline"); + + writePromptEnterPreference("auto", storage); + expect(storage.value(PROMPT_ENTER_PREFERENCE_STORAGE_KEY)).toBe("auto"); + expect(readPromptEnterPreference(storage)).toBe("auto"); + }); + + it("ignores storage failures", () => { + const storage = new ThrowingStorage(); + + expect(readPromptEnterPreference(storage)).toBe("auto"); + expect(() => { writePromptEnterPreference("send", storage); }).not.toThrow(); }); }); + +class FakeStorage { + private readonly values = new Map(); + + getItem(key: string): string | null { + return this.values.get(key) ?? null; + } + + setItem(key: string, value: string): void { + this.values.set(key, value); + } + + value(key: string): string | undefined { + return this.values.get(key); + } +} + +class ThrowingStorage { + getItem(): string | null { + throw new Error("blocked"); + } + + setItem(): void { + throw new Error("blocked"); + } +} diff --git a/src/client/src/promptEnterBehavior.ts b/src/client/src/promptEnterBehavior.ts index faef8ac..b47fcb3 100644 --- a/src/client/src/promptEnterBehavior.ts +++ b/src/client/src/promptEnterBehavior.ts @@ -1,11 +1,48 @@ export const MOBILE_PROMPT_ENTER_MEDIA_QUERY = "(pointer: coarse), (max-width: 760px)"; +export const PROMPT_ENTER_PREFERENCE_STORAGE_KEY = "pi-web.promptEnterPreference"; +export type PromptEnterPreference = "auto" | "send" | "newline"; export type PromptEnterMedia = Pick; +export type PromptEnterPreferenceStorage = Pick; export function createMobilePromptEnterMedia(): PromptEnterMedia | undefined { return typeof window !== "undefined" && "matchMedia" in window ? window.matchMedia(MOBILE_PROMPT_ENTER_MEDIA_QUERY) : undefined; } -export function shouldSendPromptOnEnter(media = createMobilePromptEnterMedia()): boolean { +export function parsePromptEnterPreference(value: string | null): PromptEnterPreference { + if (value === "send" || value === "newline") return value; + return "auto"; +} + +export function readPromptEnterPreference(storage = browserStorage()): PromptEnterPreference { + if (storage === undefined) return "auto"; + try { + return parsePromptEnterPreference(storage.getItem(PROMPT_ENTER_PREFERENCE_STORAGE_KEY)); + } catch { + return "auto"; + } +} + +export function writePromptEnterPreference(preference: PromptEnterPreference, storage = browserStorage()): void { + if (storage === undefined) return; + try { + storage.setItem(PROMPT_ENTER_PREFERENCE_STORAGE_KEY, preference); + } catch { + // Ignore localStorage quota/privacy errors; Auto remains the safe fallback. + } +} + +export function shouldSendPromptOnEnter(media = createMobilePromptEnterMedia(), preference = readPromptEnterPreference()): boolean { + if (preference === "send") return true; + if (preference === "newline") return false; return media?.matches !== true; } + +function browserStorage(): PromptEnterPreferenceStorage | undefined { + if (typeof window === "undefined") return undefined; + try { + return window.localStorage; + } catch { + return undefined; + } +}