feat: add swipe functionality for multiple response alternatives

- Added swipe system to Message struct with backward compatibility
- Implemented swipe navigation UI with left/right arrows and counter
- Added generate_response_only and generate_response_stream commands
- Swipes persist properly when navigating between alternatives
- Updated message rendering to support swipe controls
This commit is contained in:
2025-10-13 22:29:58 -07:00
parent 90bbeb4468
commit f82ec6f6a8
3 changed files with 1169 additions and 192 deletions

View File

@@ -231,6 +231,7 @@ body {
.message {
display: flex;
animation: slideIn 0.3s ease;
position: relative;
}
@keyframes slideIn {
@@ -286,6 +287,182 @@ body {
margin-top: 12px;
}
/* Message action buttons */
.message-actions {
position: absolute;
top: 8px;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.2s ease;
}
.message.user .message-actions {
right: 8px;
}
.message.assistant .message-actions {
right: 8px;
}
.message:hover .message-actions {
opacity: 1;
}
.message-action-btn {
width: 24px;
height: 24px;
border: none;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 6px;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
padding: 0;
}
.message-action-btn:hover {
background: rgba(0, 0, 0, 0.7);
color: var(--text-primary);
transform: scale(1.1);
}
.message-action-btn:active {
transform: scale(0.9);
}
.message-action-btn svg {
width: 14px;
height: 14px;
}
/* Swipe navigation */
.swipe-controls {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
width: fit-content;
opacity: 0;
transition: opacity 0.2s ease;
}
.message.assistant:hover .swipe-controls {
opacity: 1;
}
.swipe-controls.always-visible {
opacity: 1;
}
.swipe-btn {
width: 20px;
height: 20px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: var(--text-secondary);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
padding: 0;
}
.swipe-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.2);
color: var(--text-primary);
}
.swipe-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.swipe-btn svg {
width: 12px;
height: 12px;
}
.swipe-counter {
font-size: 11px;
color: var(--text-secondary);
min-width: 32px;
text-align: center;
user-select: none;
}
/* Edit mode for messages */
.message-edit-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.message-edit-textarea {
width: 100%;
background: var(--bg-tertiary);
border: 1px solid var(--accent);
border-radius: 8px;
padding: 12px;
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
resize: vertical;
min-height: 60px;
}
.message-edit-textarea:focus {
outline: none;
border-color: var(--accent-hover);
}
.message-edit-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.message-edit-btn {
padding: 6px 12px;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.message-edit-btn.save {
background: var(--accent);
color: white;
}
.message-edit-btn.save:hover {
background: var(--accent-hover);
}
.message-edit-btn.cancel {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border);
}
.message-edit-btn.cancel:hover {
background: var(--border);
}
.message-content code {
background: rgba(0, 0, 0, 0.3);
padding: 2px 6px;