feat: implement expandable chat input with double-click detection and gradient tooltip

- Add expand button with Maximize2/Minimize2 icons
- Implement 3-state height management (normal/50%/80%)
- Smart double-click detection with 300ms delay
- Height calculation based on session-view - 200px message space
- Custom CSS tooltip with dark gradient background and backdrop blur
- Send button anchored at bottom via margin-top: auto
- Smooth CSS transitions throughout
- Double-click at 80% now reduces to 50% (not normal)
- Removed all debug console.log statements
This commit is contained in:
bizzkoot
2026-01-11 21:59:28 +08:00
parent bf9cef4cd5
commit 0d8a844af8
3 changed files with 103 additions and 44 deletions

View File

@@ -13,7 +13,7 @@
}
.prompt-input-actions {
@apply flex flex-col items-center justify-between;
@apply flex flex-col items-center;
align-self: stretch;
height: 100%;
padding: 0.5rem 0.25rem;
@@ -122,6 +122,7 @@
background-color: rgba(15, 23, 42, 0.04);
transition: background-color 0.15s ease, color 0.15s ease;
padding: 0;
position: relative;
}
.prompt-expand-button:hover:not(:disabled) {
@@ -140,6 +141,33 @@
cursor: not-allowed;
}
.prompt-expand-button::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 8px);
right: 0;
background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
color: var(--text-primary);
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem;
line-height: 1.4;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-base);
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 1000;
backdrop-filter: blur(8px);
}
.prompt-expand-button:hover::after {
opacity: 1;
transform: translateY(0);
}
.prompt-overlay-text {
display: inline-flex;
align-items: center;
@@ -211,6 +239,7 @@
@apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
background-color: var(--accent-primary);
color: var(--text-inverted);
margin-top: auto;
}
.send-button.shell-mode {