snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify model controls in prompt actions

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-05-10 22:38:58 +02:00
parent 7a98d52054
commit afcb716997
3 changed files with 11 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/src/components/PiWebApp.ts
+1 -1
View File
@@ -305,7 +305,7 @@ export class PiWebApp extends LitElement {
<div class="mobile-navigation-panel">${this.renderNavigationPanel(true)}</div>
${state.selectedSession ? html`
<chat-view .sessionId=${state.selectedSession.id} .messages=${state.messages} .messageStart=${state.messagePageStart} .messageTotal=${state.messagePageTotal} .hasMore=${state.messagePageStart > 0} .loadingMore=${state.isLoadingEarlierMessages} .isReceivingPartialStream=${state.isReceivingPartialStream} .isCompacting=${state.status?.isCompacting === true} .pendingMessageCount=${state.status?.pendingMessageCount ?? 0} .status=${state.status} .activity=${state.activity} .onLoadMore=${() => this.withChatPrependTransition(() => this.sessions.loadEarlierMessages())}></chat-view>
<prompt-editor .sessionId=${state.selectedSession.id} .cwd=${state.selectedWorkspace?.path} .disabled=${state.selectedSession.archived === true} .canSteer=${state.status?.isStreaming === true} .isCompacting=${state.status?.isCompacting === true} .canStop=${state.status?.isStreaming === true || state.status?.isBashRunning === true || state.status?.isCompacting === true || (state.status?.pendingMessageCount ?? 0) > 0} .status=${state.status} .onSend=${(text: string, streamingBehavior?: "steer" | "followUp") => this.sessions.send(text, streamingBehavior)} .onStop=${() => this.sessions.stopActiveWork()} .onSelectModel=${() => { void this.openModelDialog(); }} .onCycleModel=${(direction: "forward" | "backward") => { void this.sessions.cycleModel(direction); }} .onSelectThinking=${() => { void this.openThinkingDialog(); }} .onCycleThinking=${() => { void this.sessions.cycleThinkingLevel(); }}></prompt-editor>
<prompt-editor .sessionId=${state.selectedSession.id} .cwd=${state.selectedWorkspace?.path} .disabled=${state.selectedSession.archived === true} .canSteer=${state.status?.isStreaming === true} .isCompacting=${state.status?.isCompacting === true} .canStop=${state.status?.isStreaming === true || state.status?.isBashRunning === true || state.status?.isCompacting === true || (state.status?.pendingMessageCount ?? 0) > 0} .status=${state.status} .onSend=${(text: string, streamingBehavior?: "steer" | "followUp") => this.sessions.send(text, streamingBehavior)} .onStop=${() => this.sessions.stopActiveWork()} .onSelectModel=${() => { void this.openModelDialog(); }} .onSelectThinking=${() => { void this.openThinkingDialog(); }}></prompt-editor>
<status-bar .status=${state.status} .workspace=${state.selectedWorkspace}></status-bar>
${state.commandDialog !== undefined ? html`<command-picker .title=${state.commandDialog.title} .options=${state.commandDialog.options} .onPick=${(value: string) => this.sessions.respondToCommand(state.commandDialog?.requestId ?? "", value)} .onCancel=${() => { this.sessions.cancelCommand(); }}></command-picker>` : null}
${state.modelDialog !== undefined ? html`<command-picker title=${state.modelDialog.title} .searchable=${true} .options=${state.modelDialog.options} .selectedValue=${state.modelDialog.selectedValue} .onPick=${(value: string) => { void this.pickModel(value); }} .onCancel=${() => { this.setState({ modelDialog: undefined }); }}></command-picker>` : null}
src/client/src/components/PromptEditor.ts
+1 -8
View File
@@ -17,9 +17,7 @@ export class PromptEditor extends LitElement {
@property({ attribute: false }) onSend?: (text: string, streamingBehavior?: "steer" | "followUp") => void;
@property({ attribute: false }) onStop?: () => void;
@property({ attribute: false }) onSelectModel?: () => void;
@property({ attribute: false }) onCycleModel?: (direction: "forward" | "backward") => void;
@property({ attribute: false }) onSelectThinking?: () => void;
@property({ attribute: false }) onCycleThinking?: () => void;
@query("textarea") private textarea?: HTMLTextAreaElement;
@state() private draft = "";
@state() private completions: CompletionItem[] = [];
@@ -80,13 +78,8 @@ export class PromptEditor extends LitElement {
const provider = status.model?.provider !== undefined && status.model.provider !== "" ? `${status.model.provider}/` : "";
return html`
<div class="compact-status" aria-label="Session status">
<span class="model-controls">
<button class="cycle-model" title="Previous model" @click=${() => this.onCycleModel?.("backward")}>‹</button>
<button class="select-model" title="Select model" @click=${() => this.onSelectModel?.()}>${provider}${model}</button>
<button class="cycle-model" title="Next model" @click=${() => this.onCycleModel?.("forward")}>›</button>
</span>
<button class="thinking-cycle" title="Cycle thinking level" @click=${() => this.onCycleThinking?.()}>think ${status.thinkingLevel ?? "off"}</button>
<button class="thinking-select" title="Select thinking level" @click=${() => this.onSelectThinking?.()}>⌄</button>
<button class="select-thinking" title="Select thinking level" @click=${() => this.onSelectThinking?.()}>think ${status.thinkingLevel ?? "off"}</button>
</div>
`;
}
src/client/src/components/shared.ts
+8 -10
View File
@@ -284,12 +284,11 @@ export const promptEditorStyles = css`
footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border-top: 1px solid #30363d; }
footer.shell-mode { border-top-color: #3fb950; background: #0f1b12; }
.editor-wrap { position: relative; min-width: 0; }
.actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; white-space: nowrap; }
.compact-status { display: flex; min-width: 0; align-items: center; gap: 6px; color: #8b949e; font-size: 12px; flex: 1 1 280px; }
.compact-status > button, .model-controls { flex: 0 1 auto; min-width: 0; }
.model-controls { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.compact-status button { overflow: hidden; text-overflow: ellipsis; }
.compact-status .model-controls button:nth-child(2) { max-width: min(36vw, 260px); }
.actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
.compact-status { display: flex; min-width: 0; align-items: center; gap: 6px; color: #8b949e; font-size: 12px; flex: 1 1 0; }
.compact-status > button { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.select-model { max-width: min(42vw, 320px); }
.select-thinking { max-width: 110px; }
textarea { box-sizing: border-box; width: 100%; min-height: 54px; max-height: 220px; resize: none; overflow-y: auto; border-radius: 8px; border: 1px solid #30363d; background: #0d1117; color: #e6edf3; padding: 8px; font: 16px/1.4 system-ui, sans-serif; }
.shell-mode textarea { border-color: #3fb950; box-shadow: 0 0 0 1px #3fb95055; }
.mode-hint { position: absolute; right: 8px; bottom: 8px; max-width: calc(100% - 16px); border: 1px solid #238636; border-radius: 999px; background: #0f2a16; color: #3fb950; padding: 2px 8px; font-size: 12px; pointer-events: none; }
@@ -299,14 +298,13 @@ export const promptEditorStyles = css`
footer { gap: 8px; padding: 8px; }
.actions { gap: 6px; }
.compact-status { flex: 1 1 220px; gap: 4px; }
.compact-status .model-controls button:nth-child(2) { max-width: min(50vw, 230px); }
.select-model { max-width: min(58vw, 260px); }
button { padding: 6px 8px; }
}
@media (max-width: 430px) {
.compact-status { flex-basis: 170px; font-size: 11px; }
.cycle-model, .thinking-select { display: none; }
.compact-status .model-controls button:nth-child(2) { max-width: 42vw; }
.thinking-cycle { max-width: 70px; }
.select-model { max-width: 48vw; }
.select-thinking { max-width: 70px; }
button { padding: 5px 7px; }
}
`;