github/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-04-19 03:27:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(webchat): add image paste support

Browse Source 
- Add paste event handler to chat textarea to capture clipboard images
- Add image preview UI with thumbnails and remove buttons
- Update sendChatMessage to pass attachments to chat.send RPC
- Add CSS styles for attachment preview (light/dark theme support)

Closes #1681 (image paste support portion)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
joeynyc
2026-01-25 13:45:09 -05:00
committed by Peter Steinberger
parent 08183fe009
commit fabdf2f6f7
6 changed files with 282 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
ui/src/styles/chat/layout.css
View File

@@ -103,7 +103,7 @@
bottom: 0;
flex-shrink: 0;
display: flex;
align-items: stretch;
flex-direction: column;
gap: 12px;
margin-top: auto; /* Push to bottom of flex container */
padding: 12px 4px 4px;
@@ -111,6 +111,92 @@
z-index: 10;
}
/* Image attachments preview */
.chat-attachments {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
background: var(--panel);
border-radius: 8px;
border: 1px solid var(--border);
}
.chat-attachment {
position: relative;
width: 80px;
height: 80px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg);
}
.chat-attachment__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chat-attachment__remove {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 12px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 150ms ease-out;
}
.chat-attachment:hover .chat-attachment__remove {
opacity: 1;
}
.chat-attachment__remove:hover {
background: rgba(220, 38, 38, 0.9);
}
.chat-attachment__remove svg {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
stroke-width: 2px;
}
/* Light theme attachment overrides */
:root[data-theme="light"] .chat-attachments {
background: #f8fafc;
border-color: rgba(16, 24, 40, 0.1);
}
:root[data-theme="light"] .chat-attachment {
border-color: rgba(16, 24, 40, 0.15);
background: #fff;
}
:root[data-theme="light"] .chat-attachment__remove {
background: rgba(0, 0, 0, 0.6);
}
/* Compose input row - horizontal layout */
.chat-compose__row {
display: flex;
align-items: stretch;
gap: 12px;
flex: 1;
}
:root[data-theme="light"] .chat-compose {
background: linear-gradient(to bottom, transparent, var(--bg-content) 20%);
}