diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css index 27dfe62d1..3b90f491b 100644 --- a/ui/src/styles/components.css +++ b/ui/src/styles/components.css @@ -1369,6 +1369,26 @@ } } +@media (max-width: 480px) { + .chat-compose__row { + flex-direction: column; + } + + .chat-compose__actions { + gap: 4px; + justify-content: flex-end; + } + + .chat-compose__actions .btn { + padding: 4px 8px; + font-size: 13px; + } + + .chat-compose__actions .btn-kbd { + display: none; + } +} + /* =========================================== QR Code =========================================== */ diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts index d692693cb..3be692d87 100644 --- a/ui/src/ui/app-render.ts +++ b/ui/src/ui/app-render.ts @@ -497,6 +497,23 @@ export function renderApp(state: AppViewState) { onSplitRatioChange: (ratio: number) => state.handleSplitRatioChange(ratio), assistantName: state.assistantName, assistantAvatar: state.assistantAvatar, + // Delete session (disabled for main session) + isMainSession: + state.sessionKey === "main" || + parseAgentSessionKey(state.sessionKey)?.rest === "main", + onDelete: async () => { + const { deleteSession } = await import("./controllers/sessions"); + await deleteSession(state as Parameters[0], state.sessionKey); + // Switch to main session after deletion + const mainKey = state.sessionsResult?.mainSessionKey ?? "main"; + state.sessionKey = mainKey; + state.applySettings({ + ...state.settings, + sessionKey: mainKey, + lastActiveSessionKey: mainKey, + }); + void loadChatHistory(state); + }, }) : nothing} diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts index f5fb6e80b..d92ac2ce5 100644 --- a/ui/src/ui/views/chat.ts +++ b/ui/src/ui/views/chat.ts @@ -68,6 +68,9 @@ export type ChatProps = { onCloseSidebar?: () => void; onSplitRatioChange?: (ratio: number) => void; onChatScroll?: (event: Event) => void; + // Delete session + isMainSession?: boolean; + onDelete?: () => void; }; const COMPACTION_TOAST_DURATION_MS = 5000; @@ -361,6 +364,22 @@ export function renderChat(props: ChatProps) { > ${canAbort ? "Stop" : "New session"} + ${props.onDelete + ? html` + + ` + : nothing}