feat(ui): edit session label in Chat tab
Adds a label input field in the Chat tab controls, allowing users to edit the current session's label without navigating to the Sessions tab. Fixes #3414 Changes: - ui/src/ui/app-render.helpers.ts: Add label input with patchSession on change - ui/src/styles/components.css: Styles for label input
This commit is contained in:
parent
6372242da7
commit
1dc6964008
@ -1484,3 +1484,23 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Chat controls label input */
|
||||||
|
.chat-controls__label {
|
||||||
|
width: 120px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-controls__label:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-controls__label::placeholder {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import { iconForTab, pathForTab, titleForTab, type Tab } from "./navigation";
|
|||||||
import { icons } from "./icons";
|
import { icons } from "./icons";
|
||||||
import { loadChatHistory } from "./controllers/chat";
|
import { loadChatHistory } from "./controllers/chat";
|
||||||
import { refreshChat } from "./app-chat";
|
import { refreshChat } from "./app-chat";
|
||||||
|
import { patchSession } from "./controllers/sessions";
|
||||||
import { syncUrlWithSessionKey } from "./app-settings";
|
import { syncUrlWithSessionKey } from "./app-settings";
|
||||||
import type { SessionsListResult } from "./types";
|
import type { SessionsListResult } from "./types";
|
||||||
import type { ThemeMode } from "./theme";
|
import type { ThemeMode } from "./theme";
|
||||||
@ -46,6 +47,10 @@ export function renderChatControls(state: AppViewState) {
|
|||||||
state.sessionsResult,
|
state.sessionsResult,
|
||||||
mainSessionKey,
|
mainSessionKey,
|
||||||
);
|
);
|
||||||
|
const activeSession = state.sessionsResult?.sessions?.find(
|
||||||
|
(row) => row.key === state.sessionKey,
|
||||||
|
);
|
||||||
|
const sessionLabel = activeSession?.label ?? "";
|
||||||
const disableThinkingToggle = state.onboarding;
|
const disableThinkingToggle = state.onboarding;
|
||||||
const disableFocusToggle = state.onboarding;
|
const disableFocusToggle = state.onboarding;
|
||||||
const showThinking = state.onboarding ? false : state.settings.chatShowThinking;
|
const showThinking = state.onboarding ? false : state.settings.chatShowThinking;
|
||||||
@ -88,6 +93,22 @@ export function renderChatControls(state: AppViewState) {
|
|||||||
)}
|
)}
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="chat-controls__label"
|
||||||
|
.value=${sessionLabel}
|
||||||
|
?disabled=${!state.connected}
|
||||||
|
placeholder="Label"
|
||||||
|
title="Session label"
|
||||||
|
@change=${(e: Event) => {
|
||||||
|
const value = (e.target as HTMLInputElement).value.trim();
|
||||||
|
void patchSession(
|
||||||
|
state as Parameters<typeof patchSession>[0],
|
||||||
|
state.sessionKey,
|
||||||
|
{ label: value || null },
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<button
|
<button
|
||||||
class="btn btn--sm btn--icon"
|
class="btn btn--sm btn--icon"
|
||||||
?disabled=${state.chatLoading || !state.connected}
|
?disabled=${state.chatLoading || !state.connected}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user