diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css index fb2205001..7ccb1286b 100644 --- a/ui/src/styles/components.css +++ b/ui/src/styles/components.css @@ -1371,13 +1371,13 @@ @media (max-width: 480px) { .chat-compose__actions { - flex-wrap: wrap; - gap: 6px; + gap: 4px; } .chat-compose__actions .btn { - padding: 6px 10px; + padding: 4px 8px; font-size: 13px; + flex-shrink: 0; } .chat-compose__actions .btn-kbd { @@ -1500,49 +1500,3 @@ flex-wrap: wrap; gap: 8px; } - -/* Delete session confirmation modal */ -.chat-delete-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.6); - display: flex; - align-items: center; - justify-content: center; - z-index: 100; - backdrop-filter: blur(2px); -} - -.chat-delete-card { - background: var(--card); - border: 1px solid var(--border); - border-radius: 8px; - padding: 20px 24px; - max-width: 360px; - text-align: center; -} - -.chat-delete-title { - font-size: 16px; - font-weight: 600; - margin-bottom: 8px; -} - -.chat-delete-sub { - font-size: 13px; - color: var(--muted); - margin-bottom: 16px; - word-break: break-word; -} - -.chat-delete-actions { - display: flex; - gap: 8px; - justify-content: center; -} - -.chat-delete-hint { - margin-top: 12px; - font-size: 11px; - color: var(--muted); -} diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts index d444cfd21..a1be2b22e 100644 --- a/ui/src/ui/app-render.ts +++ b/ui/src/ui/app-render.ts @@ -498,13 +498,10 @@ export function renderApp(state: AppViewState) { assistantName: state.assistantName, assistantAvatar: state.assistantAvatar, // Delete session (disabled for main session) - showDeleteConfirm: state.chatDeleteConfirm, isMainSession: state.sessionKey === "main" || parseAgentSessionKey(state.sessionKey)?.rest === "main", - onDeleteClick: () => (state.chatDeleteConfirm = true), - onDeleteConfirm: async () => { - state.chatDeleteConfirm = false; + onDelete: async () => { const { deleteSession } = await import("./controllers/sessions"); await deleteSession(state as Parameters[0], state.sessionKey); // Switch to main session after deletion @@ -517,7 +514,6 @@ export function renderApp(state: AppViewState) { }); void loadChatHistory(state); }, - onDeleteCancel: () => (state.chatDeleteConfirm = false), }) : nothing} diff --git a/ui/src/ui/app.ts b/ui/src/ui/app.ts index c4b9e737e..50ffcdf76 100644 --- a/ui/src/ui/app.ts +++ b/ui/src/ui/app.ts @@ -130,7 +130,6 @@ export class MoltbotApp extends LitElement { @state() chatThinkingLevel: string | null = null; @state() chatQueue: ChatQueueItem[] = []; @state() chatAttachments: ChatAttachment[] = []; - @state() chatDeleteConfirm = false; // Sidebar state for tool output viewing @state() sidebarOpen = false; @state() sidebarContent: string | null = null; diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts index c7c8b38aa..148a855d8 100644 --- a/ui/src/ui/views/chat.ts +++ b/ui/src/ui/views/chat.ts @@ -69,11 +69,8 @@ export type ChatProps = { onSplitRatioChange?: (ratio: number) => void; onChatScroll?: (event: Event) => void; // Delete session - showDeleteConfirm?: boolean; isMainSession?: boolean; - onDeleteClick?: () => void; - onDeleteConfirm?: () => void; - onDeleteCancel?: () => void; + onDelete?: () => void; }; const COMPACTION_TOAST_DURATION_MS = 5000; @@ -246,44 +243,7 @@ export function renderChat(props: ChatProps) { `; return html` -
{ - // Escape to cancel delete confirmation - if (e.key === "Escape" && props.showDeleteConfirm && props.onDeleteCancel) { - e.preventDefault(); - props.onDeleteCancel(); - } - // Enter to confirm delete - if (e.key === "Enter" && props.showDeleteConfirm && props.onDeleteConfirm) { - e.preventDefault(); - props.onDeleteConfirm(); - } - }} - > - ${props.showDeleteConfirm - ? html` - - ` - : nothing} - +
${props.disabledReason ? html`
${props.disabledReason}
` : nothing} @@ -404,15 +364,19 @@ export function renderChat(props: ChatProps) { > ${canAbort ? "Stop" : "New session"} - ${props.onDeleteClick + ${props.onDelete ? html` ` : nothing}