@antelopejs/dms-ai 0.1.4 → 0.1.5

package/frontend-vue/app/chat/components/ComposerInput.vue

@@ -0,0 +1,742 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from "vue";
+import { ATTACH_LABEL, MAX_ATTACHMENTS } from "../constants/attachments";
+import {
+	NEWLINE_HOTKEY_MODIFIER,
+	SEND_HOTKEY,
+} from "../constants/conversation";
+import {
+	exceedsSizeLimit,
+	formatBytes,
+	isInlineImage,
+	type PendingAttachment,
+	readFileAsAttachment,
+} from "../utils/attachments";
+
+import type { GenerationMode } from "../types/settings";
+
+interface Props {
+	isDisabled: boolean;
+	isRunning: boolean;
+	generationMode: GenerationMode;
+	builderAvailable: boolean;
+}
+
+const props = defineProps<Props>();
+
+const ATTACH_ICON = "i-ph-paperclip";
+const ATTACH_REMOVE_ICON = "i-ph-x";
+const ATTACH_FILE_ICON = "i-ph-file";
+interface Emits {
+	submit: [content: string, attachments: PendingAttachment[]];
+	stop: [];
+	"update:generationMode": [mode: GenerationMode];
+}
+
+const emit = defineEmits<Emits>();
+
+const activeMode = computed<GenerationMode>(() =>
+	props.generationMode === "safe" && props.builderAvailable ? "safe" : "vibe",
+);
+
+function selectGeneration(mode: GenerationMode): void {
+	if (mode === "safe" && !props.builderAvailable) return;
+	if (mode !== props.generationMode) emit("update:generationMode", mode);
+}
+
+const draft = ref("");
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const attachments = ref<PendingAttachment[]>([]);
+const errorMsg = ref("");
+const dragDepth = ref(0);
+const isDragging = ref(false);
+
+const isInputDisabled = computed<boolean>(() => props.isDisabled);
+
+const MAX_HEIGHT_PX = 160;
+
+function autoGrow(): void {
+	const el = textareaRef.value;
+	if (el === null) return;
+	el.style.height = "auto";
+	el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT_PX)}px`;
+}
+
+const isSendDisabled = computed<boolean>(() => {
+	if (isInputDisabled.value) return true;
+	return draft.value.trim().length === 0 && attachments.value.length === 0;
+});
+
+async function addFiles(files: FileList | File[]): Promise<void> {
+	errorMsg.value = "";
+	const incoming = Array.from(files);
+	if (incoming.length === 0) return;
+
+	const room = MAX_ATTACHMENTS - attachments.value.length;
+	if (room <= 0) {
+		errorMsg.value = `Up to ${MAX_ATTACHMENTS} files per message.`;
+		return;
+	}
+
+	const accepted = incoming.slice(0, room);
+	if (accepted.length < incoming.length) {
+		errorMsg.value = `Up to ${MAX_ATTACHMENTS} files per message.`;
+	}
+
+	for (const file of accepted) {
+		if (exceedsSizeLimit(file)) {
+			errorMsg.value = `"${file.name}" is too large (max 25 MB).`;
+			continue;
+		}
+		try {
+			attachments.value = [
+				...attachments.value,
+				await readFileAsAttachment(file),
+			];
+		} catch {
+			errorMsg.value = `Could not read "${file.name}".`;
+		}
+	}
+}
+
+function removeAttachment(id: string): void {
+	attachments.value = attachments.value.filter((a) => a.id !== id);
+}
+
+function openFilePicker(): void {
+	if (isInputDisabled.value) return;
+	fileInputRef.value?.click();
+}
+
+function onFileChange(event: Event): void {
+	const input = event.target as HTMLInputElement;
+	if (input.files !== null) void addFiles(input.files);
+	input.value = "";
+}
+
+function onPaste(event: ClipboardEvent): void {
+	const files = event.clipboardData?.files;
+	if (files === undefined || files.length === 0) return;
+	event.preventDefault();
+	void addFiles(files);
+}
+
+function hasFiles(event: DragEvent): boolean {
+	return event.dataTransfer?.types.includes("Files") ?? false;
+}
+
+function onDragEnter(event: DragEvent): void {
+	if (isInputDisabled.value || !hasFiles(event)) return;
+	dragDepth.value += 1;
+	isDragging.value = true;
+}
+
+function onDragOver(event: DragEvent): void {
+	if (isInputDisabled.value || !hasFiles(event)) return;
+	event.preventDefault();
+}
+
+function onDragLeave(): void {
+	if (dragDepth.value === 0) return;
+	dragDepth.value -= 1;
+	if (dragDepth.value === 0) isDragging.value = false;
+}
+
+function onDrop(event: DragEvent): void {
+	dragDepth.value = 0;
+	isDragging.value = false;
+	if (isInputDisabled.value) return;
+	const files = event.dataTransfer?.files;
+	if (files === undefined || files.length === 0) return;
+	event.preventDefault();
+	void addFiles(files);
+}
+
+function submitDraft(): void {
+	if (isSendDisabled.value) return;
+	const content = draft.value;
+	emit("submit", content, attachments.value);
+	draft.value = "";
+	attachments.value = [];
+	errorMsg.value = "";
+	void nextTick(autoGrow);
+}
+
+function onStop(): void {
+	emit("stop");
+}
+
+function shouldSubmitOnKey(event: KeyboardEvent): boolean {
+	if (event.key !== SEND_HOTKEY) return false;
+	if (event[NEWLINE_HOTKEY_MODIFIER]) return false;
+	return true;
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	if (!shouldSubmitOnKey(event)) return;
+	event.preventDefault();
+	submitDraft();
+}
+</script>
+
+<template>
+	<form
+		class="composer"
+		:class="{ 'composer-dragging': isDragging }"
+		@submit.prevent="submitDraft"
+		@dragenter="onDragEnter"
+		@dragover="onDragOver"
+		@dragleave="onDragLeave"
+		@drop="onDrop"
+	>
+		<div v-if="isDragging" class="composer-dropzone">
+			<UIcon :name="ATTACH_ICON" class="size-[18px]" />
+			Drop files to attach
+		</div>
+
+		<ul v-if="attachments.length > 0" class="composer-chips">
+			<li v-for="att in attachments" :key="att.id" class="chip">
+				<img
+					v-if="isInlineImage(att.mimeType) && att.dataUrl"
+					:src="att.dataUrl"
+					:alt="att.name"
+					class="chip-thumb"
+				/>
+				<UIcon v-else :name="ATTACH_FILE_ICON" class="chip-ic size-[16px]" />
+				<span class="chip-meta">
+					<span class="chip-name">{{ att.name }}</span>
+					<span class="chip-size">{{ formatBytes(att.size) }}</span>
+				</span>
+				<button
+					type="button"
+					class="chip-remove"
+					:aria-label="`Remove ${att.name}`"
+					title="Remove"
+					@click="removeAttachment(att.id)"
+				>
+					<UIcon :name="ATTACH_REMOVE_ICON" class="size-[13px]" />
+				</button>
+			</li>
+		</ul>
+
+		<p v-if="errorMsg" class="composer-error" role="alert">{{ errorMsg }}</p>
+
+		<div class="composer-field">
+			<textarea
+				ref="textareaRef"
+				v-model="draft"
+				class="composer-input"
+				:placeholder="
+					isRunning
+						? 'Queue a follow-up message…'
+						: 'Ask AntelopeJS to modify this page'
+				"
+				rows="1"
+				aria-label="message input"
+				:disabled="isInputDisabled"
+				@keydown="onKeydown"
+				@input="autoGrow"
+				@paste="onPaste"
+			/>
+			<button
+				type="button"
+				class="composer-attach"
+				:aria-label="ATTACH_LABEL"
+				:title="ATTACH_LABEL"
+				:disabled="isInputDisabled"
+				@click="openFilePicker"
+			>
+				<UIcon :name="ATTACH_ICON" class="size-[17px]" />
+			</button>
+		</div>
+
+		<input
+			ref="fileInputRef"
+			type="file"
+			multiple
+			class="composer-fileinput"
+			aria-hidden="true"
+			tabindex="-1"
+			@change="onFileChange"
+		/>
+
+		<div class="composer-sendrow">
+			<div class="composer-mode">
+				<div class="composer-toggle" role="group" aria-label="Generation mode">
+					<div class="mode-opt">
+						<button
+							type="button"
+							class="seg"
+							:class="{
+								'seg-active': activeMode === 'safe',
+								'seg-disabled': !builderAvailable,
+							}"
+							aria-describedby="dms-ai-composer-tip-safe"
+							:aria-disabled="!builderAvailable"
+							@click="selectGeneration('safe')"
+						>
+							<svg
+								class="seg-ic"
+								viewBox="0 0 24 24"
+								width="13"
+								height="13"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path
+									d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+								/>
+							</svg>
+							Safe code
+						</button>
+						<div
+							id="dms-ai-composer-tip-safe"
+							class="composer-tip"
+							role="tooltip"
+						>
+							<b>Safe code</b>
+							<p>
+								Acts only through the Builder (MCP) — emits configurations it
+								accepts, never raw code. Predictable diffs, safer deploys.
+							</p>
+							<p v-if="!builderAvailable" class="tip-note">
+								Safe code unlocks once the Builder module is loaded.
+							</p>
+						</div>
+					</div>
+					<div class="mode-opt">
+						<button
+							type="button"
+							class="seg"
+							:class="{ 'seg-active': activeMode === 'vibe' }"
+							aria-describedby="dms-ai-composer-tip-vibe"
+							@click="selectGeneration('vibe')"
+						>
+							<svg
+								class="seg-ic"
+								viewBox="0 0 24 24"
+								width="13"
+								height="13"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path
+									d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"
+								/>
+								<path d="m14 7 3 3" />
+								<path d="M5 6v4" />
+								<path d="M19 14v4" />
+								<path d="M10 2v2" />
+								<path d="M7 8H3" />
+								<path d="M21 16h-4" />
+								<path d="M11 3H9" />
+							</svg>
+							Vibe code
+						</button>
+						<div
+							id="dms-ai-composer-tip-vibe"
+							class="composer-tip"
+							role="tooltip"
+						>
+							<b>Vibe code</b>
+							<p>
+								Free to write custom code and bespoke pages beyond the Builder's
+								blocks — full creative range.
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="composer-actions">
+				<button
+					v-if="isRunning"
+					type="button"
+					class="composer-stop"
+					title="Stop"
+					aria-label="Stop"
+					:disabled="isDisabled"
+					@click="onStop"
+				>
+					<svg
+						viewBox="0 0 24 24"
+						width="16"
+						height="16"
+						fill="currentColor"
+						stroke="none"
+					>
+						<rect x="6" y="6" width="12" height="12" rx="2" />
+					</svg>
+				</button>
+				<button
+					type="submit"
+					class="composer-send"
+					:disabled="isSendDisabled"
+					:title="isRunning ? 'Queue to send after the current turn' : 'Send'"
+					aria-label="Send"
+				>
+					<svg
+						viewBox="0 0 24 24"
+						width="18"
+						height="18"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<line x1="22" y1="2" x2="11" y2="13" />
+						<polygon points="22 2 15 22 11 13 2 9 22 2" />
+					</svg>
+				</button>
+			</div>
+		</div>
+	</form>
+</template>
+
+<style scoped>
+.composer {
+	position: relative;
+	border-top: 1px solid var(--hair);
+	padding: 12px 14px 14px;
+	background: var(--surface-side);
+}
+
+.composer-dragging {
+	outline: 2px dashed var(--accent-bg-strong);
+	outline-offset: -6px;
+}
+
+.composer-dropzone {
+	position: absolute;
+	inset: 4px;
+	z-index: 20;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	border-radius: var(--corner-lg);
+	background: color-mix(in oklab, var(--surface-side) 88%, transparent);
+	color: var(--accent);
+	font-size: 13px;
+	font-weight: 600;
+	pointer-events: none;
+}
+
+.composer-fileinput {
+	display: none;
+}
+
+.composer-chips {
+	list-style: none;
+	margin: 0 0 8px;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	max-width: 220px;
+	padding: 4px 6px 4px 5px;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-md);
+}
+
+.chip-thumb {
+	width: 28px;
+	height: 28px;
+	flex: 0 0 auto;
+	object-fit: cover;
+	border-radius: 5px;
+}
+
+.chip-ic {
+	flex: 0 0 auto;
+	color: var(--fg-tertiary);
+	margin-left: 3px;
+}
+
+.chip-meta {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	line-height: 1.25;
+}
+
+.chip-name {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--fg);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.chip-size {
+	font-size: 10px;
+	color: var(--fg-tertiary);
+}
+
+.chip-remove {
+	flex: 0 0 auto;
+	display: grid;
+	place-items: center;
+	width: 20px;
+	height: 20px;
+	border: none;
+	background: transparent;
+	border-radius: 5px;
+	color: var(--fg-tertiary);
+	cursor: pointer;
+}
+
+.chip-remove:hover {
+	background: var(--danger-bg);
+	color: var(--danger-400);
+}
+
+.composer-error {
+	margin: 0 0 8px;
+	font-size: 11.5px;
+	color: var(--danger-400);
+}
+
+/* Sits inside the input field, bottom-right of the textarea. */
+.composer-attach {
+	width: 26px;
+	height: 26px;
+	flex: 0 0 auto;
+	align-self: flex-end;
+	display: grid;
+	place-items: center;
+	border: none;
+	background: transparent;
+	border-radius: var(--corner-sm);
+	color: var(--fg-tertiary);
+	cursor: pointer;
+	transition:
+		background var(--dur-fast),
+		color var(--dur-fast);
+}
+
+.composer-attach:hover:not(:disabled) {
+	background: var(--surface-card-2);
+	color: var(--fg);
+}
+
+.composer-attach:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.composer-field {
+	display: flex;
+	align-items: flex-end;
+	gap: 6px;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-lg);
+	padding: 8px 10px;
+}
+
+.composer-field:focus-within {
+	border-color: var(--accent-bg-strong);
+}
+
+.composer-input {
+	flex: 1;
+	resize: none;
+	background: transparent;
+	border: none;
+	outline: none;
+	color: var(--fg);
+	font: inherit;
+	font-size: 13.5px;
+	line-height: 1.4;
+	min-height: 22px;
+	max-height: 160px;
+	overflow-y: auto;
+}
+
+.composer-input::placeholder {
+	color: var(--fg-tertiary);
+}
+
+.composer-sendrow {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-top: 10px;
+}
+
+.composer-mode {
+	position: relative;
+}
+
+.composer-toggle {
+	display: inline-flex;
+	gap: 2px;
+	padding: 3px;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-md);
+}
+
+.mode-opt {
+	display: inline-flex;
+}
+
+.seg {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 30px;
+	padding: 0 12px;
+	border: none;
+	background: transparent;
+	border-radius: var(--corner-sm);
+	font: inherit;
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--fg-tertiary);
+	cursor: pointer;
+	transition:
+		background var(--dur-fast),
+		color var(--dur-fast);
+}
+
+.seg-ic {
+	flex: 0 0 auto;
+}
+
+.seg-active {
+	background: var(--accent);
+	color: var(--accent-fg);
+}
+
+.seg-disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+
+.composer-tip {
+	position: absolute;
+	bottom: calc(100% + 10px);
+	left: 0;
+	z-index: 10;
+	width: 268px;
+	max-width: 78vw;
+	padding: 13px 14px;
+	background: var(--surface-card);
+	border: 1px solid var(--hair-strong);
+	border-radius: var(--corner-lg);
+	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35);
+	opacity: 0;
+	visibility: hidden;
+	transform: translateY(4px);
+	transition:
+		opacity var(--dur-fast),
+		transform var(--dur-fast),
+		visibility var(--dur-fast);
+	pointer-events: none;
+}
+
+.mode-opt:hover .composer-tip,
+.mode-opt:focus-within .composer-tip {
+	opacity: 1;
+	visibility: visible;
+	transform: none;
+}
+
+.composer-tip b {
+	display: block;
+	margin-bottom: 5px;
+	font-size: 12.5px;
+	color: var(--fg);
+}
+
+.composer-tip p {
+	margin: 0 0 8px;
+	font-size: 12px;
+	line-height: 1.5;
+	color: var(--fg-tertiary);
+}
+
+.composer-tip p:last-child {
+	margin-bottom: 0;
+}
+
+.composer-tip .tip-note {
+	padding: 7px 9px;
+	border: 1px solid color-mix(in oklab, var(--warning-400) 30%, transparent);
+	border-radius: 7px;
+	background: var(--warning-bg);
+	font-size: 11px;
+	line-height: 1.45;
+	color: var(--warning-400);
+}
+
+.composer-actions {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.composer-send {
+	width: 40px;
+	height: 40px;
+	flex: 0 0 auto;
+	display: grid;
+	place-items: center;
+	border: none;
+	border-radius: var(--corner-md);
+	background: var(--accent);
+	color: var(--accent-fg);
+	cursor: pointer;
+}
+
+.composer-send:hover:not(:disabled) {
+	background: var(--accent-strong);
+}
+
+.composer-send:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.composer-stop {
+	width: 40px;
+	height: 40px;
+	flex: 0 0 auto;
+	display: grid;
+	place-items: center;
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-md);
+	background: var(--surface-card-2);
+	color: var(--fg);
+	cursor: pointer;
+}
+
+.composer-stop:hover:not(:disabled) {
+	background: var(--danger-bg);
+	border-color: color-mix(in srgb, var(--danger-400) 35%, transparent);
+	color: var(--danger-400);
+}
+
+.composer-stop:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+</style>