Archived
feat: add prompt enter behavior setting
This commit is contained in:
Federico Jaramillo Martinez
@@ -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);
|
||||
|
||||
@@ -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<void>;
|
||||
@state() private drafts: Record<string, string> = {};
|
||||
@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 {
|
||||
<button class="secondary" ?disabled=${this.loading} @click=${() => { void this.onReload?.(); }}>Reload</button>
|
||||
</div>
|
||||
${this.renderMessages()}
|
||||
${this.renderPromptEnterPreferenceCard()}
|
||||
${this.configResponse === undefined && this.loading ? html`<div class="loading-card">Loading shortcuts…</div>` : html`
|
||||
<div class="config-path-card">
|
||||
<span>Config file</span>
|
||||
@@ -100,6 +121,40 @@ export class SettingsShortcutsPanel extends LitElement {
|
||||
return null;
|
||||
}
|
||||
|
||||
private renderPromptEnterPreferenceCard(): TemplateResult {
|
||||
return html`
|
||||
<section class="prompt-enter-card" aria-labelledby="prompt-enter-preference-title">
|
||||
<div class="prompt-enter-copy">
|
||||
<span class="card-eyebrow">Chat composer</span>
|
||||
<h3 id="prompt-enter-preference-title">Enter key behavior</h3>
|
||||
<p>Choose what plain Enter does in this browser.</p>
|
||||
</div>
|
||||
<div class="prompt-enter-options" role="radiogroup" aria-label="Plain Enter behavior in the chat composer">
|
||||
${PROMPT_ENTER_OPTIONS.map((option) => html`
|
||||
<label class="prompt-enter-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="prompt-enter-preference"
|
||||
.value=${option.value}
|
||||
.checked=${this.promptEnterPreference === option.value}
|
||||
@change=${() => { this.updatePromptEnterPreference(option.value); }}
|
||||
>
|
||||
<span>
|
||||
<strong>${option.label}</strong>
|
||||
<small>${option.description}</small>
|
||||
</span>
|
||||
</label>
|
||||
`)}
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
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; }
|
||||
}
|
||||
|
||||
@@ -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<string, string>();
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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<MediaQueryList, "matches">;
|
||||
export type PromptEnterPreferenceStorage = Pick<Storage, "getItem" | "setItem">;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user