If your keyboard cannot paste a screenshot, use Paste image and allow clipboard access, or choose Attach image. Your caption stays in the draft.
+If your keyboard cannot paste a screenshot, use Paste image and allow clipboard access, or choose Attach image. Your caption stays in the draft. Attach up to eight still PNG, JPEG or WebP images, each up to 8 MiB and 25 million pixels. Review previews before sending. Remove an image to replace it.
- - diff --git a/tests/backend/test_conversation_images.py b/tests/backend/test_conversation_images.py index 93307892..41bc4b8a 100644 --- a/tests/backend/test_conversation_images.py +++ b/tests/backend/test_conversation_images.py @@ -336,3 +336,34 @@ def test_archive_resource_citations_resolve_only_to_authenticated_source_route() links = BeautifulSoup(html, "html.parser").find_all("a") assert links[0]["href"] == "/von/api/otter-archive/artifacts/" + artifact assert not links[1].has_attr("href") + + +def test_picker_upload_validates_bytes_and_returns_request_descriptor(monkeypatch): + from flask import Blueprint, Flask + from src.backend.server.routes.conversation_image_routes import register_image_routes + + stored = [] + + def store(**kwargs): + info = images.inspect_image(kwargs['data']) + stored.append(kwargs) + return {**info, 'concept_id': '#V#phone_image', 'filename': kwargs['filename']} + + monkeypatch.setattr(images, 'store_image', store) + app = Flask(__name__) + bp = Blueprint('picker_test', __name__) + register_image_routes(bp) + app.register_blueprint(bp, url_prefix='/von') + client = app.test_client() + assert client.post('/von/api/images/upload').status_code == 401 + with override_current_actor('#V#owner', None): + assert client.post('/von/api/images/upload').status_code == 400 + invalid = client.post('/von/api/images/upload', data={'file': (io.BytesIO(b'bad'), 'phone.png')}) + assert invalid.status_code == 400 + assert invalid.json['error'] == 'invalid_image' + response = client.post('/von/api/images/upload', data={'file': (io.BytesIO(png()), 'phone.png')}) + assert response.status_code == 201 + assert response.json['image_attachment']['concept_id'] == '#V#phone_image' + assert response.json['image_attachment']['content_type'] == 'image/png' + assert len(stored) == 1 + assert stored[0]['user_concept_id'] == '#V#owner' diff --git a/tests/browser/composerControls.cjs b/tests/browser/composerControls.cjs index edb5ca8f..0325df85 100644 --- a/tests/browser/composerControls.cjs +++ b/tests/browser/composerControls.cjs @@ -82,6 +82,8 @@ async function bounds(page, selector) { await page.keyboard.press('Tab'); await expect(send).toBeFocused(); await page.keyboard.press('Tab'); + await expect(page.getByRole('button', { name: 'Attach image', exact: true })).toBeFocused(); + await page.keyboard.press('Tab'); if (profile.desktop) { await expect(mic).toBeFocused(); await page.keyboard.press('Tab'); diff --git a/tests/browser/imagePicker.cjs b/tests/browser/imagePicker.cjs new file mode 100644 index 00000000..1d753c5f --- /dev/null +++ b/tests/browser/imagePicker.cjs @@ -0,0 +1,87 @@ +// Local production-template/module fixture; no authentication or model requests. +// Run with PLAYWRIGHT_BROWSERS_PATH=/tmp/von-playwright node tests/browser/imagePicker.cjs .run/image-picker +const assert = require('node:assert/strict'); +const fs = require('node:fs'); +const http = require('node:http'); +const path = require('node:path'); +const { chromium, expect } = require('@playwright/test'); + +const root = path.resolve(__dirname, '../../src/frontend/web/von_interface'); +const markup = fs.readFileSync(path.join(root, 'templates/chat_tab.html'), 'utf8') + .replace(/{%[\s\S]*?%}/g, '').replace(/{{[\s\S]*?}}/g, ''); +const evidence = process.argv[2]; +if (evidence) fs.mkdirSync(evidence, { recursive: true }); +const server = http.createServer((req, res) => { + if (req.url === '/') { + res.setHeader('Content-Type', 'text/html; charset=utf-8'); + res.end(` + ${markup}`); + return; + } + const file = path.resolve(root, `.${req.url}`); + if (!file.startsWith(`${root}/static/`) || !fs.existsSync(file)) { + res.writeHead(404).end(); + return; + } + res.setHeader('Content-Type', file.endsWith('.css') ? 'text/css' : 'text/javascript'); + res.end(fs.readFileSync(file)); +}); + + +(async () => { + await new Promise(resolve => server.listen(0, '127.0.0.1', resolve)); + const browser = await chromium.launch({headless:true}); + const results = []; + try { + for (const width of [360, 412, 1440]) { + const page = await browser.newPage({viewport:{width, height:900}, isMobile:width < 800, hasTouch:width < 800}); + let uploads = 0; + const png = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+a2ioAAAAASUVORK5CYII=', 'base64'); + await page.route('**/von/api/images/upload', route => { + uploads++; + return route.fulfill({json:{image_attachment:{concept_id:`#V#fixture-${uploads}`, filename:'phone.png'}}}); + }); + await page.route('**/von/api/images/*/original', route => route.fulfill({contentType:'image/png', body:png})); + await page.goto(`http://127.0.0.1:${server.address().port}`); + await page.evaluate(async () => { + document.querySelector('#messagesContainer').style.display = 'none'; + document.querySelector('#scrollableField').textContent = 'Image picker acceptance draft'; + const images = await import('/static/js/utils/conversationImages.js'); + const { initialiseCompactChatComposer } = await import('/static/js/components/compactComposer.js'); + initialiseCompactChatComposer(document.querySelector('.chat-composer')); + const panel = document.createElement('div'); panel.id = 'conversationImageComposer'; + document.querySelector('.chat-composer').append(panel); + const render = () => images.renderImageComposer(panel, 'fixture', render); + images.initialiseImagePicker(async files => { + for (const file of files) await images.uploadConversationImage(file, 'fixture', {}, render); + }, message => { + document.querySelector('#uploadFileStatus').textContent = message; + document.querySelector('#chatAttachmentStatus').classList.remove('hidden'); + }); + window.fixtureImages = images; + }); + const button = page.getByRole('button', {name:'Attach image', exact:true}); + await expect(button).toBeVisible(); + const box = await button.boundingBox(); + assert(box.width >= 44 && box.height >= 44); + const chooser = page.waitForEvent('filechooser'); + await button.click(); + await (await chooser).setFiles({name:'phone.png', mimeType:'image/png', buffer:png}); + await expect(page.locator('#conversationImageComposer img')).toBeVisible(); + await expect(page.locator('#conversationImageComposer img')).toHaveJSProperty('naturalWidth', 1); + await page.getByRole('button', {name:'Remove phone.png', exact:true}).click(); + await expect(page.locator('#conversationImageComposer img')).toHaveCount(0); + await page.locator('#attachImageInput').setInputFiles({name:'replacement.png', mimeType:'image/png', buffer:png}); + await expect(page.locator('#conversationImageComposer img')).toBeVisible(); + const overflow = await page.locator('.chat-composer').evaluate(el => el.scrollWidth > el.clientWidth); + assert(!overflow, `composer overflow at ${width}`); + if (evidence) await page.screenshot({path:path.join(evidence, `${width}-preview.png`)}); + const ids = await page.evaluate(() => window.fixtureImages.takeImages('fixture')); + assert.deepEqual(ids, ['#V#fixture-2']); + results.push({width, uploads, ids, overflow}); + await page.close(); + } + if (evidence) fs.writeFileSync(path.join(evidence, 'results.json'), JSON.stringify(results, null, 2)); + console.log(JSON.stringify(results)); + } finally { await browser.close(); server.close(); } +})().catch(error => { console.error(error); server.close(); process.exitCode = 1; }); diff --git a/tests/browser/imagePickerAuthenticated.cjs b/tests/browser/imagePickerAuthenticated.cjs new file mode 100644 index 00000000..dc2b5ed5 --- /dev/null +++ b/tests/browser/imagePickerAuthenticated.cjs @@ -0,0 +1,140 @@ +// Operator-prepared disposable AgentTest only. Actual uploads/originals and PWA +// shell; generation is intercepted to preserve the fixture's no-model boundary. +process.env.PLAYWRIGHT_BROWSERS_PATH ||= '/tmp/von-playwright'; +const { chromium, expect } = require('@playwright/test'); +const assert = require('node:assert/strict'); +const fs = require('node:fs'); +const path = require('node:path'); +const crypto = require('node:crypto'); +const [url, revision, actor, output = '.run/image-picker-authenticated'] = process.argv.slice(2); +assert(url && revision && actor, 'Supply fixture URL, exact revision and synthetic actor'); +assert(['localhost', '127.0.0.1'].includes(new URL(url).hostname)); +const png = fs.readFileSync(path.join(__dirname, 'fixtures/attachment.png')); +fs.mkdirSync(output, { recursive: true }); +const report = { revision, actor, url, generation: 'intercepted; no model or persisted turn claim', profiles: [] }; +const save = () => fs.writeFileSync(path.join(output, 'results.json'), JSON.stringify(report, null, 2)); + +(async () => { + const browser = await chromium.launch({ headless: true }); + try { + report.browser = browser.version(); + for (const width of [360, 412, 1440]) { + const context = await browser.newContext({ viewport: { width, height: 900 }, isMobile: width < 800, hasTouch: width < 800 }); + const page = await context.newPage(); + page.setDefaultTimeout(20000); + const result = { width, requests: [], uploads: [] }; + report.profiles.push(result); + // Install before opening the page: this test must never invoke a model. + await page.route('**/von/generate*', async route => { + const body = route.request().postDataJSON(); + result.requests.push({ prompt: body.prompt, image_attachment_ids: body.image_attachment_ids, + session_id: body.conversation_session_id, window_session: !!route.request().headers()['x-von-window-session'] }); + await route.fulfill({ json: { response: 'Fixture request received.', success: true, + terminal_status: 'completed', session_id: body.conversation_session_id, llm_debug: { model: 'fixture-no-model' } } }); + }); + await page.goto(`${url}/von/`); + const health = await (await context.request.get(`${url}/health`)).json(); + assert.equal(health.agent_test_instance, true); + assert.equal(health.version_details.git_commit, revision); + result.served_revision = health.version_details.git_commit; + const login = page.waitForResponse(r => r.url().endsWith('/api/auth/browser-test-login') && r.request().method() === 'POST'); + await page.getByRole('button', { name: /Browser test login/i }).click(); + assert.equal((await login).status(), 200); + await expect.poll(() => page.evaluate(async () => { + const auth = await (await fetch('/von/api/auth/status')).json(); + return auth.authenticated && auth.user_concept_id; + }).catch(() => null), { timeout: 20000 }).toBe(actor); + const created = page.waitForResponse(r => r.url().endsWith('/api/session/create_chat_session') && r.request().method() === 'POST'); + await page.getByRole('button', { name: 'New conversation', exact: true }).click(); + const creation = await created; + assert.equal(creation.status(), 200); + result.created_session_id = (await creation.json()).session_id; + assert(result.created_session_id); + const input = page.locator('#promptInput'); + await expect(input).toBeEnabled(); + await input.fill('Describe this screenshot\nKeep my caption'); + // Verify the actual served PWA shell and controlling worker. + result.pwa = await page.evaluate(async () => { + const manifest = await (await fetch(document.querySelector('link[rel=manifest]').href)).json(); + await navigator.serviceWorker.register('/von/service-worker.js', { scope: '/von/', updateViaCache: 'none' }); + const registration = await navigator.serviceWorker.ready; + return { display: manifest.display, start_url: manifest.start_url, scope: registration.scope, + script: registration.active.scriptURL, secure: isSecureContext }; + }); + await expect.poll(() => page.evaluate(() => !!navigator.serviceWorker.controller)).toBe(true); + assert.equal(result.pwa.display, 'standalone'); + assert.equal(result.pwa.secure, true); + const attach = page.getByRole('button', { name: 'Attach image', exact: true }); + await expect(attach).toBeVisible(); + const box = await attach.boundingBox(); + assert(box.width >= 44 && box.height >= 44); + async function upload(name, chooser = false) { + const response = page.waitForResponse(r => r.url().endsWith('/api/images/upload') && r.request().method() === 'POST'); + const file = { name, mimeType: 'image/png', buffer: png }; + if (chooser) { + const selected = page.waitForEvent('filechooser'); + await attach.click(); + await (await selected).setFiles(file); + } else await page.locator('#attachImageInput').setInputFiles(file); + const uploaded = await response; + assert.equal(uploaded.status(), 201); + const descriptor = (await uploaded.json()).image_attachment; + result.uploads.push(descriptor.concept_id); + assert.equal(descriptor.sha256, crypto.createHash('sha256').update(png).digest('hex')); + const original = await context.request.get(`${url}/von/api/images/${encodeURIComponent(descriptor.concept_id)}/original`); + assert.equal(original.status(), 200); + assert.deepEqual(await original.body(), png); + await expect(page.locator('#conversationImageComposer img')).toBeVisible(); + await expect.poll(() => page.locator('#conversationImageComposer img').evaluate(img => img.naturalWidth)).toBeGreaterThan(0); + return descriptor.concept_id; + } + const removed = await upload('phone.png', true); + await page.getByRole('button', { name: 'Remove phone.png', exact: true }).click(); + await expect(page.locator('#conversationImageComposer img')).toHaveCount(0); + const replacement = await upload('replacement.png'); + await page.locator('#attachImageInput').dispatchEvent('cancel'); + await expect(input).toHaveValue('Describe this screenshot\nKeep my caption'); + result.overflow = await page.locator('.chat-composer').evaluate(el => el.scrollWidth > el.clientWidth); + assert.equal(result.overflow, false); + await page.screenshot({ path: path.join(output, `${width}-preview.png`) }); + await page.locator('#sendButton').click(); + await expect.poll(() => result.requests.length).toBe(1); + assert.deepEqual(result.requests[0].image_attachment_ids, [replacement]); + assert.equal(result.requests[0].session_id, result.created_session_id); + assert(!result.requests[0].image_attachment_ids.includes(removed)); + assert.equal(result.requests[0].prompt, 'Describe this screenshot\nKeep my caption'); + assert(result.requests[0].window_session); + await expect(page.locator('#conversationImageComposer')).toBeEmpty(); + await input.fill('Next text-only request'); + await page.locator('#sendButton').click(); + await expect.poll(() => result.requests.length).toBe(2); + assert.equal(result.requests[1].image_attachment_ids, undefined); + result.original_bytes_verified = true; + result.request_binding_verified = true; + // One mobile profile exercises recovery against actual retry upload. + if (width === 360) { + await input.fill('Preserve this failed-upload draft'); + await page.route('**/von/api/images/upload', r => r.fulfill({ status: 503, json: { error: 'Fixture upload failure' } })); + await page.locator('#attachImageInput').setInputFiles({ name: 'retry.png', mimeType: 'image/png', buffer: png }); + const retry = page.getByRole('button', { name: 'Retry upload of retry.png', exact: true }); + await expect(retry).toBeVisible(); + await expect(input).toHaveValue('Preserve this failed-upload draft'); + await expect(page.locator('#sendButton')).toBeDisabled(); + assert.equal(result.requests.length, 2); + await page.unroute('**/von/api/images/upload'); + const retried = page.waitForResponse(r => r.url().endsWith('/api/images/upload')); + await retry.click(); + assert.equal((await retried).status(), 201); + await expect(retry).toHaveCount(0); + await page.getByRole('button', { name: 'Remove retry.png', exact: true }).click(); + result.upload_failure_recovery = true; + } + save(); + await context.close(); + } + report.passed = true; + save(); + console.log(JSON.stringify({ passed: true, revision, widths: report.profiles.map(p => p.width) })); + } catch (error) { report.error = String(error); save(); throw error; } + finally { await browser.close(); } +})().catch(error => { console.error(error); process.exitCode = 1; }); diff --git a/tests/frontend/chatAttachmentWorkflowInput.test.js b/tests/frontend/chatAttachmentWorkflowInput.test.js index adb7cbbb..8ef54e1b 100644 --- a/tests/frontend/chatAttachmentWorkflowInput.test.js +++ b/tests/frontend/chatAttachmentWorkflowInput.test.js @@ -76,6 +76,34 @@ describe('chat attachment workflow input binding', () => { delete global.fetch; }); + test('phone image without MIME binds only to its next request, after preview and removal', async () => { + const { __testOnly_uploadFilesToVon, sendMessage } = require(chatTabModulePath); + const bodies = []; + let uploaded = 0; + global.fetch = jest.fn(async (url, options = {}) => { + if (url === '/von/api/images/upload') return {ok:true, json:async () => ({image_attachment:{concept_id:`#V#phone-${++uploaded}`, filename:'phone.png'}})}; + if (String(url).startsWith('/von/generate')) { + bodies.push(JSON.parse(options.body)); + return {ok:true, json:async () => ({response:'Image received.', llm_debug:{model:'test-model'}})}; + } + if (String(url).startsWith('/von/history/length')) return {ok:true, json:async () => ({history_length:0, authenticated:true})}; + if (String(url).startsWith('/von/api/render_markdown')) return {ok:true, json:async () => ({html:JSON.parse(options.body).text || ''})}; + return {ok:true, json:async () => ({})}; + }); + await __testOnly_uploadFilesToVon([new File(['png'], 'phone.png')]); + expect(document.querySelector('#conversationImageComposer img')).not.toBeNull(); + document.querySelector('#conversationImageComposer button[aria-label^=Remove]').click(); + await __testOnly_uploadFilesToVon([new File(['png'], 'replacement.png')]); + document.querySelector('#promptInput').value = 'Describe this screenshot'; + await sendMessage(); + expect(bodies[0].image_attachment_ids).toEqual(['#V#phone-2']); + expect(bodies[0]).not.toHaveProperty('workflow_inputs'); + document.querySelector('#promptInput').value = 'Now a text-only question'; + await sendMessage(); + expect(bodies[1]).not.toHaveProperty('image_attachment_ids'); + expect(fetch.mock.calls.some(([url]) => url === '/von/api/files/upload')).toBe(false); + }); + test('explicit clipboard image preserves caption and binds to only the next message', async () => { const { __testOnly_uploadFilesToVon, sendMessage } = require(chatTabModulePath); const { initialiseImagePicker } = require('../../src/frontend/web/von_interface/static/js/utils/conversationImages.js');