f8d2dbc7e6
* feat(chat): attach images by dropping them on the chat Images could be attached with the attach button or by pasting, but a drop on the chat did nothing: the window's document drop handler left images to the canvas, so they were dropped silently. Images dropped anywhere on the chat panel now attach, through the same path as the attach button and paste, with the same limits and errors. While images are dragged over the panel, an outline over the composer says where they go, or why they cannot be attached while a reply runs or four images are already attached. SVG images are drawn as PNGs, since vision models take raster images. A drag without images, such as a .fig, is left to the window, which opens documents. The canvas and the chat share AppDropOverlay, a typed feedback component with a light tint over surfaces and a cover over fields. * fix(chat): style tables, menus, and link prompts in AI replies vue-stream-markdown drew tables with semibold, filled rows at 14px, with copy, download, and fullscreen buttons above each; its tooltips doubled with the browser's, and the link confirmation it teleports out of the message had no app colors, since the token mapping sat on the message element only. The token mapping now lives in markdown.css on the renderer's .stream-markdown elements, so teleported dialogs and menus use app colors. Tables use regular weight, a light header, and the chat density's size, with copy as their only action; task items show their checkbox in place of the bullet; the copy menu and link prompt follow the app's menus and dialogs. Hover labels use the app's tooltip, while click menus keep the renderer's. Links no longer request each site's favicon. * fix(chat): keep an SVG drawn after sending out of the next message Drawing a dropped SVG as PNG takes a moment. A message sent or cleared meanwhile no longer gets the image added to the following draft: each draft has a generation that sending and clearing advance, and an image finished for an earlier one is dropped.
77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
import { toUint8Array } from 'js-base64'
|
|
|
|
import { expect, test } from '#tests/helpers/chat/fixture'
|
|
|
|
test('completed responses release streaming parser history', async ({ configuredChat: chat }) => {
|
|
await chat.submit('Show a code block')
|
|
|
|
const markdown = chat.page.locator('[data-slot="chat-markdown"] .markdown-content').last()
|
|
await expect(markdown).toHaveAttribute('data-markdown-mode', 'static')
|
|
await expect(markdown.locator('.shiki').first()).toBeVisible()
|
|
})
|
|
|
|
test('code blocks follow light and dark themes', async ({ configuredChat: chat }) => {
|
|
await chat.submit('Show a code block')
|
|
const code = chat.assistantMessage().locator('.shiki').first()
|
|
await expect(code).toHaveCSS('background-color', 'rgb(30, 30, 30)')
|
|
await expect(code.locator('span').filter({ hasText: 'const' }).first()).not.toHaveCSS(
|
|
'color',
|
|
'rgb(240, 240, 240)'
|
|
)
|
|
|
|
await chat.page.evaluate(async () => {
|
|
const themeModulePath = '/src/app/shell/theme.ts'
|
|
const themeModule = await import(themeModulePath)
|
|
themeModule.useAppTheme().setTheme('light')
|
|
})
|
|
await chat.page.waitForFunction(() => document.documentElement.dataset.theme === 'light')
|
|
await expect(
|
|
chat.page.locator('[data-slot="chat-markdown"] .markdown-content').last()
|
|
).toHaveClass(/light/)
|
|
await expect(code).toHaveCSS('background-color', 'rgb(255, 255, 255)')
|
|
})
|
|
|
|
test('Markdown blocks unsafe links and cross-origin images', async ({ configuredChat: chat }) => {
|
|
const approvedImageURL = new URL('/assets/approved.png', chat.page.url()).href
|
|
await chat.page.route(approvedImageURL, async (route) => {
|
|
await route.fulfill({
|
|
body: Buffer.from(
|
|
toUint8Array(
|
|
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEAQH/69cbGAAAAABJRU5ErkJggg=='
|
|
)
|
|
),
|
|
contentType: 'image/png'
|
|
})
|
|
})
|
|
await chat.submit('Show unsafe Markdown')
|
|
|
|
const assistant = chat.assistantMessage()
|
|
await expect(assistant.locator('a[href^="javascript:"]')).toHaveCount(0)
|
|
await expect(assistant.locator('img[src^="data:"]')).toHaveCount(0)
|
|
await expect(assistant.getByRole('img', { name: 'approved' })).toHaveAttribute(
|
|
'src',
|
|
approvedImageURL
|
|
)
|
|
await expect(assistant.getByRole('img', { name: 'unapproved' })).toHaveCount(0)
|
|
await expect(assistant.getByRole('img', { name: 'insecure' })).toHaveCount(0)
|
|
await expect(assistant.getByRole('link', { name: 'safe' })).toHaveAttribute(
|
|
'href',
|
|
'https://openpencil.dev/'
|
|
)
|
|
})
|
|
|
|
test('tables read as part of the reply, with copy as their only action', async ({
|
|
configuredChat: chat
|
|
}) => {
|
|
await chat.submit('Show a markdown table')
|
|
const assistant = chat.assistantMessage()
|
|
const cell = assistant.getByRole('cell', { name: 'Hover', exact: true })
|
|
await expect(cell).toHaveCSS('font-weight', '400')
|
|
await expect(cell).toHaveCSS('font-size', '11px')
|
|
const controls = assistant.locator('[data-stream-markdown="table-controls"] button')
|
|
await expect(controls).toHaveCount(1)
|
|
// Links show no favicon: that would request `/favicon.ico` from every linked site.
|
|
await expect(assistant.getByRole('link', { name: 'the guide' })).toBeVisible()
|
|
await expect(assistant.locator('[data-stream-markdown="link-favicon"]')).toHaveCount(0)
|
|
})
|