+ const comma = result.indexOf(',');
+ if (comma === -1) {
+ reject(new Error('Unexpected file encoding'));
+ return;
+ }
+ resolve(result.slice(comma + 1));
+ };
+ reader.readAsDataURL(file);
+ });
+}
+
+function renderPendingAttachments() {
+ const el = _elements.attachments;
+ if (!el) {return;}
+
+ el.innerHTML = '';
+ if (!_pendingAttachments.length) {
+ el.classList.add('hidden');
+ return;
+ }
+
+ el.classList.remove('hidden');
+ for (let i = 0; i < _pendingAttachments.length; i++) {
+ const att = _pendingAttachments[i];
+ const chip = document.createElement('div');
+ chip.className = 'attachment-chip';
+
+ const name = document.createElement('span');
+ name.className = 'attachment-name';
+ name.textContent = att.filename || 'attachment';
+
+ const rm = document.createElement('button');
+ rm.className = 'attachment-remove';
+ rm.type = 'button';
+ rm.title = 'Remove attachment';
+ rm.textContent = '×';
+ rm.addEventListener('click', () => {
+ _pendingAttachments.splice(i, 1);
+ renderPendingAttachments();
+ });
+
+ chip.appendChild(name);
+ chip.appendChild(rm);
+ el.appendChild(chip);
+ }
+}
+
+function clearPendingAttachments() {
+ _pendingAttachments = [];
+ if (_elements.fileInput) {
+ _elements.fileInput.value = '';
+ }
+ renderPendingAttachments();
+}
+
// ── Message Action Buttons ──────────────────────────────────
function getMessageText(el) {
@@ -463,33 +533,38 @@ async function loadHistory(client) {
async function sendMessage(client, overrideText) {
const input = _elements.input;
- const rawText = overrideText ?? input?.value?.trim();
- if (!rawText || _sending) {return;}
+ const rawText = (overrideText ?? input?.value ?? '').trim();
+ const hasText = Boolean(rawText);
+ const hasAttachments = Boolean(_pendingAttachments.length > 0);
+ if ((!hasText && !hasAttachments) || _sending) {return;}
- // Check for slash commands first
- const cmd = parseSlashCommand(rawText);
- if (cmd) {
- if (!overrideText) {input.value = '';}
- hideSlashPopup();
- const handled = await handleSlashCommand(cmd, client);
- if (handled) {return;}
- // If not fully handled (e.g. /compact), fall through to send as message
+ // Check for slash commands first (text only)
+ if (hasText) {
+ const cmd = parseSlashCommand(rawText);
+ if (cmd) {
+ if (!overrideText) {input.value = '';}
+ hideSlashPopup();
+ const handled = await handleSlashCommand(cmd, client);
+ if (handled) {return;}
+ // If not fully handled (e.g. /compact), fall through to send as message
+ }
}
_sending = true;
_elements.sendBtn.disabled = true;
- if (!overrideText) {input.value = '';}
+ if (!overrideText && input) {input.value = '';}
// Apply search mode prefix
let messageText = rawText;
- if (_searchMode && !rawText.startsWith('/')) {
+ if (_searchMode && hasText && !rawText.startsWith('/')) {
messageText = `Search the web for: ${rawText}`;
setSearchMode(false);
}
- // Show user message (show original text, not the prefixed version)
- const displayText = _searchMode ? rawText : messageText;
- _elements.messages.appendChild(createMessageEl('user', rawText));
+ const userDisplay = hasText
+ ? rawText
+ : `Sent ${_pendingAttachments.length} attachment(s)`;
+ _elements.messages.appendChild(createMessageEl('user', userDisplay));
scrollToBottom();
// Create placeholder for assistant response
@@ -500,7 +575,7 @@ async function sendMessage(client, overrideText) {
scrollToBottom();
try {
- const stream = client.stream('agent.send', { message: messageText });
+ const stream = client.stream('agent.send', { message: messageText, attachments: _pendingAttachments });
stream.on('tool_start', (data) => {
const el = createToolEventEl('tool_start', data);
@@ -542,6 +617,7 @@ async function sendMessage(client, overrideText) {
} finally {
_sending = false;
if (_elements.sendBtn) {_elements.sendBtn.disabled = false;}
+ clearPendingAttachments();
scrollToBottom();
}
}
@@ -549,6 +625,7 @@ async function sendMessage(client, overrideText) {
// ── Search SVG Icon ─────────────────────────────────────────
const SEARCH_ICON = '';
+const ATTACH_ICON = '';
const COPY_ICON = '';
const CHECK_ICON = '';
const EDIT_ICON = '';
@@ -570,6 +647,12 @@ export const ChatPage = {
${SEARCH_ICON}
Search
+
+
+
@@ -587,6 +670,9 @@ export const ChatPage = {
input: el.querySelector('#chat-input'),
sendBtn: el.querySelector('#chat-send'),
searchBtn: el.querySelector('#chat-search'),
+ attachBtn: el.querySelector('#chat-attach'),
+ fileInput: el.querySelector('#chat-file'),
+ attachments: el.querySelector('#chat-attachments'),
slashPopup: el.querySelector('#slash-popup'),
};
@@ -620,6 +706,38 @@ export const ChatPage = {
setSearchMode(!_searchMode);
});
+ // Event: attach button
+ _elements.attachBtn.addEventListener('click', () => {
+ if (_elements.fileInput) {_elements.fileInput.click();}
+ });
+
+ // Event: file input change
+ _elements.fileInput.addEventListener('change', async () => {
+ const files = Array.from(_elements.fileInput.files ?? []);
+ if (files.length === 0) {return;}
+
+ const MAX_BYTES = 5 * 1024 * 1024;
+ for (const file of files) {
+ if (!isSupportedImageMime(file.type)) {
+ showSystemMessage(`Unsupported file type: ${file.type || file.name}`);
+ continue;
+ }
+ if (file.size > MAX_BYTES) {
+ showSystemMessage(`File too large (max 5MB): ${file.name}`);
+ continue;
+ }
+
+ try {
+ const data = await readFileAsBase64(file);
+ _pendingAttachments.push({ mimeType: file.type, data, filename: file.name });
+ } catch (err) {
+ showSystemMessage(`Failed to attach ${file.name}: ${err.message}`);
+ }
+ }
+
+ renderPendingAttachments();
+ });
+
// Event: send message
_elements.sendBtn.addEventListener('click', () => sendMessage(client));
@@ -695,5 +813,6 @@ export const ChatPage = {
_searchMode = false;
_slashPopupIndex = -1;
_elements = {};
+ _pendingAttachments = [];
},
};
diff --git a/src/gateway/ui/style.css b/src/gateway/ui/style.css
index 948a4af..0180e66 100644
--- a/src/gateway/ui/style.css
+++ b/src/gateway/ui/style.css
@@ -950,6 +950,48 @@ tr:hover td {
align-items: center;
gap: 8px;
padding: 8px 0;
+ flex-wrap: wrap;
+}
+
+.chat-attachments {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ flex-wrap: wrap;
+}
+
+.attachment-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 4px 10px;
+ border-radius: 999px;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border);
+ color: var(--text-secondary);
+ font-size: var(--font-size-sm);
+}
+
+.attachment-name {
+ max-width: 220px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.attachment-remove {
+ appearance: none;
+ border: 0;
+ background: transparent;
+ color: var(--text-muted);
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 1;
+ padding: 0;
+}
+
+.attachment-remove:hover {
+ color: var(--text-primary);
}
.btn-action {