feat(assistant): add AI diagram disclosure

Persist disclosure labels and AI provenance metadata for
assistant-generated Mermaid diagrams.

Keep generated assistant diagrams on the whiteboard default
font path so labels do not render with the Excalidraw fallback
font or clip from mismatched metrics.

Signed-off-by: Hoang Pham <hoangmaths96@gmail.com>

Author: hweihwang

playwright/e2e/assistant.spec.ts

@@ -4,7 +4,32 @@
  */
 import { test } from '../support/fixtures/random-user'
 import { expect } from '@playwright/test'
-import { createWhiteboard, openFilesApp } from '../support/utils'
+import type { Page } from '@playwright/test'
+import {
+	captureBoardAuthFromSave,
+	createWhiteboard,
+	fetchBoardContent,
+	openFilesApp,
+	openWhiteboardFromFiles,
+} from '../support/utils'
+
+const MODAL_DISCLOSURE_TEXT = 'Output is generated by AI. Make sure to always double-check.'
+const DIAGRAM_DISCLOSURE_TEXT = 'Diagram shown here is generated by AI. Make sure to always double-check.'
+const AI_GENERATED_TYPE = 'assistant-mermaid'
+const normalizeText = (text = '') => text.replace(/\s+/g, ' ').trim()
+
+const ensureAssistantBoardReady = async (page: Page, boardName: string) => {
+	const assistantButton = page.getByRole('button', { name: 'Assistant', exact: true })
+
+	try {
+		await expect(assistantButton).toBeVisible({ timeout: 15000 })
+	} catch {
+		await openWhiteboardFromFiles(page, boardName)
+		await expect(assistantButton).toBeVisible({ timeout: 30000 })
+	}
+
+	return assistantButton
+}
 
 test.beforeEach(async ({ page }) => {
 	let taskIdCounter = 1
@@ -92,10 +117,32 @@ test.beforeEach(async ({ page }) => {
 test('Assistant Button', async ({ page }) => {
 	const boardName = `Assistant ${Date.now()}`
 	await createWhiteboard(page, { name: boardName })
-	await page.getByRole('button', { name: 'Assistant', exact: true }).click()
+	const assistantButton = await ensureAssistantBoardReady(page, boardName)
+	await assistantButton.click()
+	await expect(page.getByText(MODAL_DISCLOSURE_TEXT)).toBeVisible()
 	await page.getByRole('textbox', { name: 'Prompt to generate diagram' }).fill('abc')
+	const authFromSave = captureBoardAuthFromSave(page)
 	await page.getByRole('button', { name: 'Generate' }).click()
 	await expect(page.getByRole('textbox', { name: 'Prompt to generate diagram' })).not.toBeVisible()
+	const { fileId, jwt } = await authFromSave
+	const auth = { fileId, jwt }
+
+	await expect.poll(async () => {
+		const content = await fetchBoardContent(page, auth)
+		return content.elements.some((element) => normalizeText(element.text) === DIAGRAM_DISCLOSURE_TEXT)
+	}, {
+		timeout: 30000,
+		interval: 500,
+	}).toBe(true)
+
+	const content = await fetchBoardContent(page, auth)
+	const disclosureElement = content.elements.find((element) => normalizeText(element.text) === DIAGRAM_DISCLOSURE_TEXT)
+
+	expect(disclosureElement).toBeTruthy()
+	expect(disclosureElement.customData?.aiDisclosureLabel).toBe(true)
+	expect(disclosureElement.customData?.aiGenerated).toBe(AI_GENERATED_TYPE)
+	expect(content.elements.length).toBeGreaterThan(0)
+	expect(content.elements.every((element) => element.customData?.aiGenerated === AI_GENERATED_TYPE)).toBe(true)
 })
 
 test('Restart on false Assistant output', async ({ page }) => {
@@ -144,8 +191,11 @@ test('Restart on false Assistant output', async ({ page }) => {
 	)
 	const boardName = `Assistant invalid ${Date.now()}`
 	await createWhiteboard(page, { name: boardName })
-	await page.getByRole('button', { name: 'Assistant', exact: true }).click()
+	const assistantButton = await ensureAssistantBoardReady(page, boardName)
+	await assistantButton.click()
+	await expect(page.getByText(MODAL_DISCLOSURE_TEXT)).toBeVisible()
 	await page.getByRole('textbox', { name: 'Prompt to generate diagram' }).fill('abc')
 	await page.getByRole('button', { name: 'Generate' }).click()
 	await expect(page.getByRole('textbox', { name: 'Prompt to generate diagram' })).toHaveValue('abc')
+	await expect(page.getByText(MODAL_DISCLOSURE_TEXT)).toBeVisible()
 })

src/components/AssistantDialog.vue

@@ -7,9 +7,20 @@ import { NcTextField, NcButton, NcModal } from '@nextcloud/vue'
 import { t } from '@nextcloud/l10n'
 import { ScheduleTask } from '../services/assistant/api'
 import { parseMermaidToExcalidraw } from '@excalidraw/mermaid-to-excalidraw'
-import { convertToExcalidrawElements } from '@nextcloud/excalidraw'
+import { convertToExcalidrawElements, getCommonBounds } from '@nextcloud/excalidraw'
 import { defineComponent } from 'vue'
 
+const AI_GENERATED_TYPE = 'assistant-mermaid'
+const WHITEBOARD_DEFAULT_FONT_FAMILY = 3
+const WHITEBOARD_DEFAULT_FONT = 'Cascadia, monospace'
+const AI_DISCLOSURE_LABEL_GAP = 16
+const AI_DISCLOSURE_LABEL_FONT_FAMILY = 2
+const AI_DISCLOSURE_LABEL_FONT = 'Helvetica, Arial, sans-serif'
+const AI_DISCLOSURE_LABEL_FONT_SIZE = 14
+const AI_DISCLOSURE_LABEL_MIN_WIDTH = 280
+const AI_DISCLOSURE_LABEL_MAX_WIDTH = 440
+const AI_DISCLOSURE_LABEL_FONT_STRING = `${AI_DISCLOSURE_LABEL_FONT_SIZE}px ${AI_DISCLOSURE_LABEL_FONT}`
+
 export default defineComponent({
 	name: 'AssistantDialog',
 	components: {
@@ -40,29 +51,173 @@ export default defineComponent({
 	},
 	methods: {
 		t,
+		createAssistantMetadata(extraData = {}) {
+			return {
+				aiGenerated: AI_GENERATED_TYPE,
+				...extraData,
+			}
+		},
+		getAssistantDisclosureText() {
+			return t('whiteboard', 'Output is generated by AI. Make sure to always double-check.')
+		},
+		getDiagramDisclosureText() {
+			return t('whiteboard', 'Diagram shown here is generated by AI. Make sure to always double-check.')
+		},
 		onCancel() {
 			this.show = false
 			this.$emit('cancel')
 		},
-		async getExcalidrawElements(taskResponse) {
-			this.mermaidError = false
-
-			const { elements, files } = await parseMermaidToExcalidraw(taskResponse)
+		markAssistantGeneratedElements(elements) {
+			return elements.map((element) => ({
+				...element,
+				customData: {
+					...element.customData,
+					...this.createAssistantMetadata(),
+				},
+			}))
+		},
+		normalizeAssistantElements(elements) {
 			elements.forEach((element) => {
-				// set font family (6 should always be Nunito)
 				if (element.label) {
-					element.label.fontFamily = 6
+					element.label.fontFamily = WHITEBOARD_DEFAULT_FONT_FAMILY
 				}
 				if (element.type === 'text') {
-					element.fontFamily = 6
+					element.fontFamily = WHITEBOARD_DEFAULT_FONT_FAMILY
 				}
 				element.roughness = 0
 			})
-			const data = {
-				elements: convertToExcalidrawElements(elements, { regenerateIds: true }),
+		},
+		measureDisclosureTextWidth(text) {
+			if (typeof document === 'undefined') {
+				return text.length * AI_DISCLOSURE_LABEL_FONT_SIZE * 0.55
+			}
+
+			const canvas = document.createElement('canvas')
+			const context = canvas.getContext('2d')
+
+			if (!context) {
+				return text.length * AI_DISCLOSURE_LABEL_FONT_SIZE * 0.55
+			}
+
+			context.font = AI_DISCLOSURE_LABEL_FONT_STRING
+			return context.measureText(text).width
+		},
+		splitDisclosureWord(word, maxWidth) {
+			const segments = []
+			let currentSegment = ''
+
+			for (const character of word) {
+				const nextSegment = `${currentSegment}${character}`
+
+				if (currentSegment && this.measureDisclosureTextWidth(nextSegment) > maxWidth) {
+					segments.push(currentSegment)
+					currentSegment = character
+					continue
+				}
+
+				currentSegment = nextSegment
+			}
+
+			if (currentSegment) {
+				segments.push(currentSegment)
+			}
+
+			return segments
+		},
+		wrapDisclosureText(text, maxWidth) {
+			const words = text.split(/\s+/).filter(Boolean)
+
+			if (!words.length) {
+				return text
+			}
+
+			const lines = []
+			let currentLine = ''
+
+			words.forEach((word) => {
+				const segments = this.measureDisclosureTextWidth(word) > maxWidth
+					? this.splitDisclosureWord(word, maxWidth)
+					: [word]
+
+				segments.forEach((segment, index) => {
+					const nextLine = currentLine ? `${currentLine} ${segment}` : segment
+
+					if (this.measureDisclosureTextWidth(nextLine) <= maxWidth) {
+						currentLine = nextLine
+					} else {
+						if (currentLine) {
+							lines.push(currentLine)
+						}
+						currentLine = segment
+					}
+
+					if (index < segments.length - 1 && currentLine) {
+						lines.push(currentLine)
+						currentLine = ''
+					}
+				})
+			})
+
+			if (currentLine) {
+				lines.push(currentLine)
+			}
+
+			return lines.join('\n')
+		},
+		addAssistantDisclosureLabel(elements) {
+			if (!elements.length) {
+				return elements
+			}
+
+			const [minX, , maxX, maxY] = getCommonBounds(elements)
+			const diagramWidth = maxX - minX
+			const disclosureText = this.wrapDisclosureText(
+				this.getDiagramDisclosureText(),
+				Math.min(
+					AI_DISCLOSURE_LABEL_MAX_WIDTH,
+					Math.max(AI_DISCLOSURE_LABEL_MIN_WIDTH, diagramWidth * 0.8),
+				),
+			)
+			const [disclosureElement] = convertToExcalidrawElements([{
+				type: 'text',
+				x: minX,
+				y: maxY + AI_DISCLOSURE_LABEL_GAP,
+				text: disclosureText,
+				fontSize: AI_DISCLOSURE_LABEL_FONT_SIZE,
+				fontFamily: AI_DISCLOSURE_LABEL_FONT_FAMILY,
+				textAlign: 'center',
+				backgroundColor: 'transparent',
+				strokeColor: '#6b7280',
+				opacity: 80,
+				customData: this.createAssistantMetadata({
+					aiDisclosureLabel: true,
+				}),
+			}], { regenerateIds: true })
+
+			return [
+				...elements,
+				{
+					...disclosureElement,
+					x: minX + ((diagramWidth - disclosureElement.width) / 2),
+					y: maxY + AI_DISCLOSURE_LABEL_GAP,
+				},
+			]
+		},
+		async getExcalidrawElements(taskResponse) {
+			this.mermaidError = false
+
+			const { elements, files } = await parseMermaidToExcalidraw(taskResponse, {
+				fontFamily: WHITEBOARD_DEFAULT_FONT,
+			})
+			this.normalizeAssistantElements(elements)
+
+			const generatedElements = this.markAssistantGeneratedElements(
+				convertToExcalidrawElements(elements, { regenerateIds: true }),
+			)
+			return {
+				elements: this.addAssistantDisclosureLabel(generatedElements),
 				files,
 			}
-			return data
 		},
 		async onGetTask() {
 			this.waitingForTask = true
@@ -96,6 +251,12 @@ export default defineComponent({
 				<h2>
 					{{ t('whiteboard', 'Generate diagram') }}
 				</h2>
+				<div class="assistant-disclosure">
+					<span class="assistant-disclosure__badge">AI</span>
+					<p class="assistant-disclosure__text">
+						{{ getAssistantDisclosureText() }}
+					</p>
+				</div>
 				<div v-if="mermaidError" class="mermaid-error">
 					{{ t('whiteboard', 'Something went wrong, please try again') }}
 				</div>
@@ -123,27 +284,65 @@ export default defineComponent({
 .loading-icon {
 	padding: 30px;
 }
+
 h2 {
-    text-align: center;
+	text-align: center;
 }
+
 .assistant-dialog {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+	overflow: hidden;
+
 	form {
 		padding-inline: 10px;
 	}
 }
+
+.assistant-disclosure {
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	margin: 0 10px 14px;
+	padding: 8px 10px;
+	border: 1px solid transparent;
+	border-radius: 6px;
+	background:
+		linear-gradient(var(--color-background-assistant), var(--color-background-assistant)) padding-box,
+		var(--color-border-assistant) border-box;
+	color: var(--color-main-text);
+	font-size: var(--font-size-small);
+	line-height: 1.35;
+}
+
+.assistant-disclosure__badge {
+	flex: none;
+	min-width: 28px;
+	padding: 2px 6px;
+	border-radius: 6px;
+	background: var(--color-border-assistant);
+	font-size: 11px;
+	font-weight: 700;
+	line-height: 1.4;
+	text-align: center;
+}
+
+.assistant-disclosure__text {
+	margin: 0;
+	font-weight: 500;
+}
+
 .dialog-buttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
 	padding-block: 10px;
 }
+
 .mermaid-error {
 	text-align: center;
-    font-weight: bold;
+	font-weight: bold;
 }
 </style>

src/types/whiteboard.d.ts

@@ -10,11 +10,16 @@ export interface ElementCreatorInfo {
 	createdAt: number
 }
 
+export interface WhiteboardElementCustomData {
+	creator?: ElementCreatorInfo
+	lastModifiedBy?: ElementCreatorInfo
+	aiGenerated?: 'assistant-mermaid'
+	aiDisclosureLabel?: true
+	[key: string]: unknown
+}
+
 export type WhiteboardElement ={
-	customData?: {
-		creator?: ElementCreatorInfo
-		lastModifiedBy?: ElementCreatorInfo
-	},
+	customData?: WhiteboardElementCustomData,
 } & ExcalidrawLinearElement & ExcalidrawElement
 
 export interface CreatorDisplaySettings {