@antelopejs/dms-ai 0.1.3 → 0.1.5

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

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import {
+	PERMISSION_BUTTONS,
+	PERMISSION_DECISIONS,
+	PERMISSION_INLINE_LABELS,
+	PERMISSION_LABELS,
+	type PermissionDecision,
+} from "../constants/permissions";
+import type { PermissionRequestData } from "../types/permission";
+import { stringifyValue } from "../utils/format";
+
+interface Props {
+	requests: PermissionRequestData[];
+}
+
+const props = defineProps<Props>();
+interface Emits {
+	decide: [requestId: string, decision: PermissionDecision];
+	decideAll: [decision: PermissionDecision];
+}
+
+const emit = defineEmits<Emits>();
+
+const expanded = ref<Set<string>>(new Set());
+
+const heading = computed<string>(() =>
+	props.requests.length > 1
+		? PERMISSION_INLINE_LABELS.HEADING_MANY
+		: PERMISSION_INLINE_LABELS.HEADING_ONE,
+);
+const showBulk = computed<boolean>(() => props.requests.length > 1);
+
+const argsTextById = computed<Record<string, string>>(() => {
+	const out: Record<string, string> = {};
+	for (const req of props.requests) {
+		out[req.requestId] = stringifyValue(req.args);
+	}
+	return out;
+});
+
+function isExpanded(id: string): boolean {
+	return expanded.value.has(id);
+}
+
+function toggleArgs(id: string): void {
+	const next = new Set(expanded.value);
+	if (next.has(id)) next.delete(id);
+	else next.add(id);
+	expanded.value = next;
+}
+
+function decide(id: string, decision: PermissionDecision): void {
+	emit("decide", id, decision);
+}
+
+function allowAll(): void {
+	emit("decideAll", PERMISSION_DECISIONS.ALLOW_ONCE);
+}
+
+function denyAll(): void {
+	emit("decideAll", PERMISSION_DECISIONS.DENY);
+}
+</script>
+
+<template>
+	<section class="perm-tray" role="group" :aria-label="heading">
+		<header class="perm-tray-head">
+			<span class="perm-tray-title">{{ heading }}</span>
+			<div v-if="showBulk" class="perm-bulk">
+				<button type="button" class="perm-bulk-btn deny" @click="denyAll">
+					{{ PERMISSION_INLINE_LABELS.DENY_ALL }}
+				</button>
+				<button type="button" class="perm-bulk-btn allow" @click="allowAll">
+					{{ PERMISSION_INLINE_LABELS.APPLY_ALL }}
+				</button>
+			</div>
+		</header>
+
+		<article v-for="req in requests" :key="req.requestId" class="perm-card">
+			<div class="perm-card-top">
+				<span class="perm-icon" aria-hidden="true">
+					<svg
+						viewBox="0 0 24 24"
+						width="14"
+						height="14"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path
+							d="M14.7 6.3a4 4 0 0 0-5.6 5.6l-6 6a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l6-6a4 4 0 0 0 5.6-5.6l-2.5 2.5-2-2 2.5-2.5z"
+						/>
+					</svg>
+				</span>
+				<div class="perm-card-text">
+					<span class="perm-tool">{{ req.toolName }}</span>
+					<span class="perm-summary">{{ req.summary }}</span>
+				</div>
+			</div>
+
+			<button
+				v-if="argsTextById[req.requestId].length > 0"
+				type="button"
+				class="perm-args-toggle"
+				:aria-expanded="isExpanded(req.requestId)"
+				@click="toggleArgs(req.requestId)"
+			>
+				{{
+					isExpanded(req.requestId)
+						? PERMISSION_LABELS.ARGS_TOGGLE_HIDE
+						: PERMISSION_LABELS.ARGS_TOGGLE_SHOW
+				}}
+			</button>
+			<pre v-if="isExpanded(req.requestId)" class="perm-args-pre">{{
+				argsTextById[req.requestId]
+			}}</pre>
+
+			<footer class="perm-actions">
+				<button
+					v-for="button in PERMISSION_BUTTONS"
+					:key="button.decision"
+					type="button"
+					class="perm-button"
+					:data-variant="button.variant"
+					@click="decide(req.requestId, button.decision)"
+				>
+					{{ button.label }}
+				</button>
+			</footer>
+		</article>
+	</section>
+</template>
+
+<style scoped>
+.perm-tray {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 10px 12px;
+	border-top: 1px solid var(--hair-strong);
+	background: var(--surface-inset);
+	max-height: 46vh;
+	overflow-y: auto;
+}
+
+.perm-tray-head {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.perm-tray-title {
+	flex: 1;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--fg-tertiary);
+}
+
+.perm-bulk {
+	display: flex;
+	gap: 6px;
+	flex: 0 0 auto;
+}
+
+.perm-bulk-btn {
+	padding: 5px 11px;
+	border-radius: var(--corner-md);
+	border: 1px solid transparent;
+	font: inherit;
+	font-size: 12px;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.perm-bulk-btn.allow {
+	background: var(--accent);
+	color: var(--accent-fg);
+}
+
+.perm-bulk-btn.allow:hover {
+	background: var(--accent-strong);
+}
+
+.perm-bulk-btn.deny {
+	background: transparent;
+	color: var(--danger-400);
+	border-color: color-mix(in srgb, var(--danger-400) 35%, transparent);
+}
+
+.perm-bulk-btn.deny:hover {
+	background: color-mix(in srgb, var(--danger-400) 18%, transparent);
+}
+
+.perm-card {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 11px 12px;
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-md);
+	background: var(--surface-card);
+}
+
+.perm-card-top {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.perm-icon {
+	width: 28px;
+	height: 28px;
+	flex: 0 0 auto;
+	display: grid;
+	place-items: center;
+	border-radius: 7px;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	color: var(--fg-secondary);
+}
+
+.perm-card-text {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.perm-tool {
+	font-family: var(--font-code);
+	font-size: 12.5px;
+	font-weight: 600;
+	color: var(--accent);
+}
+
+.perm-summary {
+	font-size: 12.5px;
+	line-height: 1.4;
+	color: var(--fg-secondary);
+	word-break: break-word;
+}
+
+.perm-args-toggle {
+	align-self: flex-start;
+	background: none;
+	border: none;
+	color: var(--accent);
+	font: inherit;
+	font-size: 12px;
+	padding: 0;
+	cursor: pointer;
+}
+
+.perm-args-toggle:hover {
+	text-decoration: underline;
+}
+
+.perm-args-pre {
+	margin: 0;
+	padding: 8px;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-sm);
+	font-family: var(--font-code);
+	font-size: 11px;
+	color: var(--fg-secondary);
+	white-space: pre-wrap;
+	word-break: break-word;
+	max-height: 200px;
+	overflow: auto;
+}
+
+.perm-actions {
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.perm-button {
+	padding: 6px 12px;
+	border-radius: var(--corner-md);
+	border: 1px solid transparent;
+	font: inherit;
+	font-size: 12px;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.perm-button[data-variant="primary"] {
+	background: var(--accent);
+	color: var(--accent-fg);
+}
+
+.perm-button[data-variant="primary"]:hover {
+	background: var(--accent-strong);
+}
+
+.perm-button[data-variant="secondary"] {
+	background: var(--surface-inset);
+	color: var(--fg);
+	border-color: var(--hair);
+}
+
+.perm-button[data-variant="secondary"]:hover {
+	background: var(--surface-card-2);
+}
+
+.perm-button[data-variant="danger"] {
+	background: var(--danger-bg);
+	color: var(--danger-400);
+	border-color: color-mix(in srgb, var(--danger-400) 35%, transparent);
+}
+
+.perm-button[data-variant="danger"]:hover {
+	background: color-mix(in srgb, var(--danger-400) 20%, transparent);
+}
+</style>

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

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { computed, reactive } from "vue";
+import type { QuestionRequestData } from "../types/question";
+
+interface Props {
+	requests: QuestionRequestData[];
+}
+
+const props = defineProps<Props>();
+interface Emits {
+	answer: [requestId: string, answers: string[]];
+}
+
+const emit = defineEmits<Emits>();
+
+interface Selection {
+	mode: "option" | "other";
+	option: string;
+	other: string;
+}
+
+const state = reactive<Record<string, Selection>>({});
+
+function keyOf(requestId: string, qIndex: number): string {
+	return `${requestId}#${qIndex}`;
+}
+
+function entryOf(requestId: string, qIndex: number): Selection {
+	const key = keyOf(requestId, qIndex);
+	const existing = state[key];
+	if (existing !== undefined) return existing;
+	const fresh: Selection = { mode: "option", option: "", other: "" };
+	state[key] = fresh;
+	return fresh;
+}
+
+function answerFor(requestId: string, qIndex: number): string {
+	const entry = state[keyOf(requestId, qIndex)];
+	if (entry === undefined) return "";
+	return entry.mode === "other" ? entry.other.trim() : entry.option;
+}
+
+function isOptionSelected(
+	requestId: string,
+	qIndex: number,
+	label: string,
+): boolean {
+	const entry = state[keyOf(requestId, qIndex)];
+	return entry?.mode === "option" && entry.option === label;
+}
+
+function isOtherActive(requestId: string, qIndex: number): boolean {
+	return state[keyOf(requestId, qIndex)]?.mode === "other";
+}
+
+function pickOption(requestId: string, qIndex: number, label: string): void {
+	const entry = entryOf(requestId, qIndex);
+	entry.mode = "option";
+	entry.option = label;
+}
+
+function pickOther(requestId: string, qIndex: number): void {
+	entryOf(requestId, qIndex).mode = "other";
+}
+
+function onOtherInput(requestId: string, qIndex: number, event: Event): void {
+	entryOf(requestId, qIndex).other = (event.target as HTMLInputElement).value;
+}
+
+const answerableById = computed<Record<string, boolean>>(() => {
+	const out: Record<string, boolean> = {};
+	for (const req of props.requests) {
+		out[req.requestId] = req.questions.every(
+			(_q, qi) => answerFor(req.requestId, qi).length > 0,
+		);
+	}
+	return out;
+});
+
+function submit(req: QuestionRequestData): void {
+	if (!answerableById.value[req.requestId]) return;
+	const answers = req.questions.map((_q, qi) => answerFor(req.requestId, qi));
+	emit("answer", req.requestId, answers);
+}
+</script>
+
+<template>
+	<section class="q-tray" role="group" aria-label="Question from the assistant">
+		<article v-for="req in requests" :key="req.requestId" class="q-card">
+			<div v-for="(question, qi) in req.questions" :key="qi" class="q-block">
+				<span class="q-header">{{ question.header }}</span>
+				<p class="q-question">{{ question.question }}</p>
+
+				<div class="q-options">
+					<button
+						v-for="option in question.options"
+						:key="option.label"
+						type="button"
+						class="q-option"
+						:data-selected="isOptionSelected(req.requestId, qi, option.label)"
+						:title="option.description"
+						@click="pickOption(req.requestId, qi, option.label)"
+					>
+						<span class="q-option-label">{{ option.label }}</span>
+						<span class="q-option-desc">{{ option.description }}</span>
+					</button>
+
+					<div class="q-other">
+						<button
+							type="button"
+							class="q-option q-other-toggle"
+							:data-selected="isOtherActive(req.requestId, qi)"
+							@click="pickOther(req.requestId, qi)"
+						>
+							<span class="q-option-label">Other…</span>
+						</button>
+						<input
+							v-if="isOtherActive(req.requestId, qi)"
+							type="text"
+							class="q-other-input"
+							placeholder="Type a custom answer"
+							@input="onOtherInput(req.requestId, qi, $event)"
+							@keydown.enter.prevent="submit(req)"
+						/>
+					</div>
+				</div>
+			</div>
+
+			<footer class="q-actions">
+				<button
+					type="button"
+					class="q-send"
+					:disabled="!answerableById[req.requestId]"
+					@click="submit(req)"
+				>
+					Send answer
+				</button>
+			</footer>
+		</article>
+	</section>
+</template>
+
+<style scoped>
+.q-tray {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 10px 12px;
+	border-top: 1px solid var(--hair-strong);
+	background: var(--surface-inset);
+	max-height: 52vh;
+	overflow-y: auto;
+}
+
+.q-card {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 12px;
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-md);
+	background: var(--surface-card);
+}
+
+.q-block {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.q-header {
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--fg-tertiary);
+}
+
+.q-question {
+	margin: 0;
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--fg);
+	word-break: break-word;
+}
+
+.q-options {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.q-option {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	text-align: left;
+	padding: 8px 10px;
+	border-radius: var(--corner-md);
+	border: 1px solid var(--hair);
+	background: var(--surface-inset);
+	color: var(--fg);
+	font: inherit;
+	cursor: pointer;
+}
+
+.q-option:hover {
+	background: var(--surface-card-2);
+}
+
+.q-option[data-selected="true"] {
+	border-color: var(--accent);
+	background: var(--accent-bg);
+}
+
+.q-option-label {
+	font-size: 12.5px;
+	font-weight: 600;
+	color: var(--fg);
+}
+
+.q-option-desc {
+	font-size: 11.5px;
+	line-height: 1.35;
+	color: var(--fg-secondary);
+	word-break: break-word;
+}
+
+.q-other {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.q-other-input {
+	padding: 7px 10px;
+	border-radius: var(--corner-md);
+	border: 1px solid var(--hair);
+	background: var(--surface-inset);
+	color: var(--fg);
+	font: inherit;
+	font-size: 12.5px;
+}
+
+.q-other-input:focus {
+	outline: none;
+	border-color: var(--accent);
+}
+
+.q-actions {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.q-send {
+	padding: 6px 14px;
+	border-radius: var(--corner-md);
+	border: 1px solid transparent;
+	background: var(--accent);
+	color: var(--accent-fg);
+	font: inherit;
+	font-size: 12px;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.q-send:hover:not(:disabled) {
+	background: var(--accent-strong);
+}
+
+.q-send:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+</style>

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

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { QueuedMessage } from "../types/conversation";
+
+interface Props {
+	queue: QueuedMessage[];
+}
+
+defineProps<Props>();
+
+const CANCEL_ICON = "i-ph-x";
+interface Emits {
+	cancel: [id: string];
+}
+
+defineEmits<Emits>();
+
+function attachmentLabel(message: QueuedMessage): string {
+	const count = message.attachments.length;
+	if (count === 0) return "";
+	return count === 1 ? "1 file" : `${count} files`;
+}
+</script>
+
+<template>
+	<ul class="queued" aria-label="Queued messages">
+		<li v-for="message in queue" :key="message.id" class="queued-item">
+			<span class="queued-tag" aria-hidden="true">Queued</span>
+			<span class="queued-text">{{ message.content }}</span>
+			<span v-if="attachmentLabel(message).length > 0" class="queued-att">
+				{{ attachmentLabel(message) }}
+			</span>
+			<button
+				type="button"
+				class="queued-cancel"
+				:aria-label="`Cancel queued message`"
+				title="Cancel"
+				@click="$emit('cancel', message.id)"
+			>
+				<UIcon :name="CANCEL_ICON" class="size-[13px]" />
+			</button>
+		</li>
+	</ul>
+</template>
+
+<style scoped>
+.queued {
+	list-style: none;
+	margin: 0;
+	padding: 8px 14px 0;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	background: var(--surface-side);
+}
+
+.queued-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 5px 8px;
+	background: var(--surface-inset);
+	border: 1px dashed var(--hair-strong);
+	border-radius: var(--corner-md);
+	font-size: 12.5px;
+}
+
+.queued-tag {
+	flex: 0 0 auto;
+	font-family: var(--font-code);
+	font-size: 9px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--fg-tertiary);
+}
+
+.queued-text {
+	flex: 1;
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: var(--fg-secondary);
+}
+
+.queued-att {
+	flex: 0 0 auto;
+	font-size: 10px;
+	color: var(--fg-tertiary);
+}
+
+.queued-cancel {
+	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;
+}
+
+.queued-cancel:hover {
+	background: var(--danger-bg);
+	color: var(--danger-400);
+}
+</style>