@antelopejs/dms-ai 0.1.5 → 0.2.0

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useChatI18n } from "../composables/useChatI18n";
+import type { DiffHunk } from "../types/protocol";
+import { diffRows, limitRows } from "../utils/diff";
+
+interface Props {
+	hunks: DiffHunk[];
+	/** Rows shown before "Show all". */
+	limit?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), { limit: 40 });
+const { t } = useChatI18n();
+
+const isFull = ref(false);
+const rows = computed(() => diffRows(props.hunks));
+const shown = computed(() =>
+	isFull.value
+		? { rows: rows.value, hidden: 0 }
+		: limitRows(rows.value, props.limit),
+);
+</script>
+
+<template>
+	<div class="diff">
+		<div class="diff__lines">
+			<div
+				v-for="row in shown.rows"
+				:key="row.key"
+				class="ln"
+				:class="`is-${row.kind}`"
+			>
+				<span class="ln__num">{{ row.number }}</span>
+				<span class="ln__sign">{{ row.sign }}</span>
+				<span class="ln__text">{{ row.text }}</span>
+			</div>
+		</div>
+		<button
+			v-if="shown.hidden > 0"
+			type="button"
+			class="diff__more"
+			@click="isFull = true"
+		>
+			{{
+				t(
+					"dms_ai.panel.approvals.show_all_lines",
+					{ count: shown.hidden },
+					shown.hidden,
+				)
+			}}
+		</button>
+	</div>
+</template>
+
+<style scoped>
+.diff {
+	border: 1px solid var(--ui-border);
+	border-radius: var(--ai-radius-sm);
+	background: var(--dms-bg-field);
+	overflow: hidden;
+	font: 450 11.5px / 1.65 var(--ai-font-mono);
+}
+
+.diff__lines {
+	max-height: 280px;
+	padding: 4px 0;
+	overflow: auto;
+}
+
+.ln {
+	display: grid;
+	grid-template-columns: 34px 14px minmax(0, 1fr);
+	min-width: max-content;
+	white-space: pre;
+	color: var(--ui-text-toned);
+}
+
+.ln__num {
+	padding-right: 6px;
+	text-align: right;
+	color: var(--ui-text-dimmed);
+	user-select: none;
+}
+
+.ln__sign {
+	text-align: center;
+	color: var(--ui-text-dimmed);
+	user-select: none;
+}
+
+.ln.is-add {
+	background: var(--dms-success-tint);
+	box-shadow: inset 2px 0 0 var(--ui-success);
+}
+
+.ln.is-add .ln__sign {
+	color: var(--ui-success);
+}
+
+.ln.is-remove {
+	background: var(--dms-error-tint);
+	box-shadow: inset 2px 0 0 var(--ui-error);
+}
+
+.ln.is-remove .ln__sign {
+	color: var(--ui-error);
+}
+
+.ln.is-hunk {
+	color: var(--ui-text-dimmed);
+	background: color-mix(in srgb, var(--dms-accent-tint) 50%, transparent);
+}
+
+.diff__more {
+	display: block;
+	width: 100%;
+	padding: 5px 10px;
+	border: 0;
+	border-top: 1px solid var(--ui-border);
+	background: var(--dms-bg-muted);
+	color: var(--ui-text-muted);
+	font: 500 11px var(--ai-font-mono);
+	text-align: left;
+	cursor: pointer;
+}
+
+.diff__more:hover {
+	color: var(--ui-text-highlighted);
+}
+</style>

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useChatI18n } from "../composables/useChatI18n";
+import type { FullAutoState } from "../types/protocol";
+import { formatClock } from "../utils/format";
+
+interface Props {
+	fullAuto: FullAutoState;
+	nowMs: number;
+}
+
+interface Emits {
+	turnOff: [];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+const { t } = useChatI18n();
+
+const scope = computed<string>(() => {
+	const { duration, untilMs } = props.fullAuto;
+	if (duration === "30m" && untilMs !== undefined)
+		return t("dms_ai.panel.full_auto.banner_until", {
+			time: formatClock(Math.max(0, untilMs - props.nowMs)),
+		});
+	return t(`dms_ai.panel.full_auto.banner_${duration}`);
+});
+</script>
+
+<template>
+	<div class="cb-banner-auto" role="status">
+		<UIcon name="i-ph-lightning" class="cb-banner-auto__icon" />
+		<span class="cb-banner-auto__text">
+			<b>{{ t("dms_ai.common.mode.auto") }}</b>
+			· {{ scope }}
+		</span>
+		<UButton
+			size="xs"
+			color="neutral"
+			variant="outline"
+			:label="t('dms_ai.panel.full_auto.turn_off')"
+			@click="emit('turnOff')"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.cb-banner-auto {
+	display: flex;
+	flex: none;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 10px 8px 14px;
+	border-bottom: 1px solid var(--dms-error-line);
+	background: var(--dms-error-tint);
+	font-size: 12.5px;
+	color: var(--ui-text-toned);
+}
+
+.cb-banner-auto__icon {
+	width: 15px;
+	height: 15px;
+	flex: none;
+	color: var(--ui-error);
+}
+
+.cb-banner-auto__text {
+	flex: 1;
+	min-width: 0;
+}
+
+.cb-banner-auto__text b {
+	font-weight: 600;
+	color: var(--ui-text-highlighted);
+}
+</style>

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useChatI18n } from "../composables/useChatI18n";
+import type { FullAutoDuration } from "../types/protocol";
+
+interface Emits {
+	confirm: [duration: FullAutoDuration];
+}
+
+const emit = defineEmits<Emits>();
+const open = defineModel<boolean>("open", { required: true });
+const { t } = useChatI18n();
+
+const DURATIONS: readonly FullAutoDuration[] = ["turn", "30m", "chat"];
+
+const duration = ref<FullAutoDuration>("turn");
+const items = computed(() =>
+	DURATIONS.map((value) => ({
+		value,
+		label: t(`dms_ai.panel.full_auto.duration_${value}`),
+	})),
+);
+
+function confirm(): void {
+	emit("confirm", duration.value);
+	open.value = false;
+}
+</script>
+
+<template>
+	<UModal v-model:open="open" :title="t('dms_ai.panel.full_auto.title')">
+		<template #body>
+			<div class="full-auto">
+				<div class="full-auto__intro">
+					<DmsIconWell icon="i-ph-lightning" tone="error" size="lg" />
+					<p class="full-auto__text">
+						{{ t("dms_ai.panel.full_auto.description") }}
+					</p>
+				</div>
+				<span class="full-auto__label">
+					{{ t("dms_ai.panel.full_auto.turn_off_after") }}
+				</span>
+				<DmsSegmented
+					v-model="duration"
+					:items="items"
+					size="md"
+					block
+					:aria-label="t('dms_ai.panel.full_auto.turn_off_after')"
+				/>
+			</div>
+		</template>
+		<template #footer>
+			<div class="full-auto__foot">
+				<UButton
+					color="neutral"
+					variant="outline"
+					:label="t('dms_ai.common.cancel')"
+					@click="open = false"
+				/>
+				<UButton
+					color="error"
+					icon="i-ph-lightning"
+					class="full-auto__confirm"
+					:label="t('dms_ai.panel.full_auto.confirm')"
+					@click="confirm"
+				/>
+			</div>
+		</template>
+	</UModal>
+</template>
+
+<style scoped>
+.full-auto {
+	display: grid;
+	gap: 10px;
+}
+
+.full-auto__intro {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.full-auto__text {
+	margin: 0;
+	font-size: 13px;
+	line-height: 1.5;
+	color: var(--ui-text-muted);
+}
+
+.full-auto__label {
+	font-size: 12.5px;
+	font-weight: 600;
+	color: var(--ui-text-highlighted);
+}
+
+.full-auto__foot {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	width: 100%;
+}
+</style>

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

@@ -109,7 +109,7 @@ onBeforeUnmount(cancelStreamed);
 	margin: 12px 0 6px;
 	line-height: 1.3;
 	font-weight: 600;
-	color: var(--fg);
+	color: var(--ui-text-highlighted);
 }
 
 .chat-markdown :deep(h1) {
@@ -131,17 +131,17 @@ onBeforeUnmount(cancelStreamed);
 }
 
 .chat-markdown :deep(a) {
-	color: var(--accent);
+	color: var(--dms-accent);
 	text-decoration: underline;
 	text-underline-offset: 2px;
 }
 
 .chat-markdown :deep(code) {
-	font-family: var(--font-code);
+	font-family: var(--ai-font-mono);
 	font-size: 0.9em;
-	background: var(--surface-inset);
-	border: 1px solid var(--hair);
-	border-radius: var(--corner-sm);
+	background: var(--ui-bg-accented);
+	border: 1px solid var(--ui-border);
+	border-radius: 6px;
 	padding: 1px 4px;
 }
 
@@ -149,9 +149,9 @@ onBeforeUnmount(cancelStreamed);
 	margin: 0 0 8px;
 	padding: 10px 12px;
 	overflow-x: auto;
-	background: var(--surface-inset);
-	border: 1px solid var(--hair);
-	border-radius: var(--corner-md);
+	background: var(--ui-bg-accented);
+	border: 1px solid var(--ui-border);
+	border-radius: var(--ai-radius-sm);
 }
 
 .chat-markdown :deep(pre code) {
@@ -163,8 +163,8 @@ onBeforeUnmount(cancelStreamed);
 .chat-markdown :deep(blockquote) {
 	margin: 0 0 8px;
 	padding: 2px 0 2px 12px;
-	border-left: 3px solid var(--hair-strong);
-	color: var(--fg-tertiary);
+	border-left: 3px solid var(--ui-border-accented);
+	color: var(--ui-text-muted);
 }
 
 .chat-markdown :deep(table) {
@@ -177,20 +177,20 @@ onBeforeUnmount(cancelStreamed);
 
 .chat-markdown :deep(th),
 .chat-markdown :deep(td) {
-	border: 1px solid var(--hair);
+	border: 1px solid var(--ui-border);
 	padding: 4px 8px;
 	text-align: left;
 }
 
 .chat-markdown :deep(th) {
-	background: var(--surface-inset);
+	background: var(--ui-bg-accented);
 	font-weight: 600;
-	color: var(--fg);
+	color: var(--ui-text-highlighted);
 }
 
 .chat-markdown :deep(hr) {
 	border: 0;
-	border-top: 1px solid var(--hair);
+	border-top: 1px solid var(--ui-border);
 	margin: 12px 0;
 }
 </style>