root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-2911): improve chat attachment compose and preview UX

Browse Source 
- Add attachment-first chat compose flow with paperclip picker, drag-and-drop, and paste support in ChatView input
- Render pending attachment preview chips with per-file remove actions and drag-over visual affordance
- Display sent message attachments with image/file presentation and accessible focus/interaction styling
- Update ChatView tests and icon mocks to cover attachment-only sends, file selection, and preview behavior

Fusion-Task-Id: FN-2911
This commit is contained in:
Fusion
2026-04-28 23:11:16 -07:00
committed by gsxdsm
parent 83ad6e45ab
commit bdfb08f380
7 changed files with 594 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
packages/dashboard/app/components/ChatView.css
View File

@@ -642,11 +642,18 @@
/* Input area */
.chat-input-area {
position: relative;
padding: 12px 16px;
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.chat-input-row {
display: flex;
align-items: flex-end;
gap: 8px;
gap: var(--space-sm);
width: 100%;
}
/* === Chat Skill Menu === */
@@ -778,6 +785,128 @@
transform: scale(0.97);
}
.chat-attach-btn {
min-width: calc(var(--space-lg) * 2);
min-height: calc(var(--space-lg) * 2);
align-self: flex-end;
}
.chat-input-wrapper {
flex: 1;
}
.chat-input-wrapper--dragover {
border: 1px dashed var(--todo);
border-radius: var(--radius-md);
}
.chat-attachment-previews {
display: flex;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
overflow-x: auto;
border-top: 1px solid var(--border);
background: var(--surface);
width: 100%;
}
.chat-attachment-preview {
width: calc(var(--space-xl) * 3);
height: calc(var(--space-xl) * 3);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
position: relative;
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.chat-attachment-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chat-attachment-preview-name {
font-size: 0.625rem;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-muted);
padding: var(--space-xs);
}
.chat-attachment-remove {
position: absolute;
top: calc(var(--space-xs) * -1);
right: calc(var(--space-xs) * -1);
background: color-mix(in srgb, var(--color-error) 80%, transparent);
color: var(--text);
border: none;
border-radius: var(--radius-pill);
width: calc(var(--space-md) * 2);
height: calc(var(--space-md) * 2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.chat-attachment-remove:hover {
background: color-mix(in srgb, var(--color-error) 90%, transparent);
}
.chat-attachment-remove:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
.chat-attachment-remove:active {
transform: scale(0.97);
}
.chat-message-attachments {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-xs);
}
.chat-message-attachment-link {
display: inline-flex;
border-radius: var(--radius-sm);
}
.chat-message-attachment {
max-width: calc(var(--space-xl) * 12);
border-radius: var(--radius-sm);
}
.chat-message-attachment-file {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface) 50%, transparent);
font-size: 0.75rem;
color: var(--text-muted);
text-decoration: none;
}
.chat-message-attachment-file:hover {
background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.chat-message-attachment-file:focus-visible,
.chat-message-attachment-link:focus-visible {
outline: none;
box-shadow: var(--focus-ring-strong);
}
/* === Chat Pending Message === */
.chat-pending-message {
display: flex;
@@ -884,4 +1013,21 @@
.chat-tool-calls-group-status {
justify-content: flex-start;
}
.chat-attach-btn,
.chat-input-send,
.chat-input-stop {
min-width: calc(var(--space-lg) * 2.25);
min-height: calc(var(--space-lg) * 2.25);
}
.chat-attachment-preview {
width: calc(var(--space-xl) * 2.5);
height: calc(var(--space-xl) * 2.5);
}
.chat-attachment-remove {
width: calc(var(--space-lg) * 2.25);
height: calc(var(--space-lg) * 2.25);
}
}