chore: Merge for release

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.8.3rc9"
+version = "0.8.3rc10"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"

src/ui/src/builder/panels/BuilderLogWorkflowExecutionTrace.vue

@@ -1,5 +1,36 @@
 <template>
 	<div class="BuiderLogWorkflowExecutionTrace">
+		<div v-if="trace.length > 0" class="trace">
+			<div
+				v-for="(entry, entryId) in trace"
+				:key="entryId"
+				class="traceEntry"
+			>
+				<div class="type">
+					<span v-if="entry.type == 'functionCall'">⚡️</span>
+					<span v-if="entry.type == 'reasoning'">🧠</span>
+				</div>
+				<div class="main">
+					<div v-if="entry.thought">
+						<strong>Thought.</strong> {{ entry.thought }}
+					</div>
+					<div v-if="entry.action">
+						<strong>Action.</strong> {{ entry.action }}
+					</div>
+					<div v-if="entry.name">
+						{{ entry.name }}
+					</div>
+					<div v-if="entry.parameters">
+						<SharedJsonViewer
+							:hide-root="true"
+							:data="entry.parameters"
+							:initial-depth="1"
+							class="data"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
 		<div class="details">
 			<div>
 				<h3>Result</h3>
@@ -55,10 +86,10 @@
 			</div>
 		</div>
 
-		<div class="trace">
+		<div class="callStack">
 			<h3>Call stack</h3>
 			<div
-				v-for="(component, componentId) in trace"
+				v-for="(component, componentId) in callStack"
 				:key="componentId"
 				class="component"
 				:class="{
@@ -118,15 +149,17 @@ const props = defineProps<{
 	executionItem: WorkflowExecutionLog["summary"][number];
 }>();
 
-const trace = computed(() => {
-	const traceArr: Component["id"][] =
-		props.executionItem.executionEnvironment?.["trace"];
+const callStack = computed(() => {
+	const callStackArr: Component["id"][] =
+		props.executionItem.executionEnvironment?.["call_stack"] ?? [];
 
-	const trace = Object.fromEntries(
-		traceArr.map((cid) => [cid, wf.getComponentById(cid)]),
+	return Object.fromEntries(
+		callStackArr.map((cid) => [cid, wf.getComponentById(cid)]),
 	);
+});
 
-	return trace;
+const trace = computed(() => {
+	return props.executionItem.executionEnvironment?.["trace"] ?? [];
 });
 
 async function selectBlock(componentId: Component["id"]) {
@@ -143,6 +176,7 @@ async function selectBlock(componentId: Component["id"]) {
 .BuiderLogWorkflowExecutionTrace {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 1fr 1fr;
 	gap: 48px;
 }
 
@@ -174,34 +208,62 @@ h3 {
 }
 
 .environment {
-	flex: 0 0 30%;
 }
 
-.trace {
-	flex: 0 0 30%;
+.callStack {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
+	grid-template-columns: 3 / 3;
 }
 
-.trace .component {
+.callStack .component {
 	display: flex;
 	align-items: center;
 	border-radius: 8px;
 	padding: 8px;
 	border: 1px solid var(--builderSeparatorColor);
 }
 
-.trace .component > div {
+.callStack .component > div {
 	flex: 1 0 auto;
 }
 
-.trace .component .eyebrow {
+.callStack .component .eyebrow {
 	font-size: 12px;
 	color: var(--builderSecondaryTextColor);
 }
 
-.trace .component.active {
+.callStack .component.active {
 	border-color: var(--builderSelectedColor);
 }
+
+.trace {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	grid-column-start: 1;
+	grid-column-end: 4;
+}
+
+.trace .traceEntry {
+	display: flex;
+	align-items: center;
+	border-radius: 8px;
+	border: 1px solid var(--builderSeparatorColor);
+}
+
+.trace .traceEntry .type {
+	flex: 0 0 72px;
+	font-size: 20px;
+	height: 100%;
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	background: var(--builderSubtleSeparatorColor);
+}
+
+.trace .traceEntry .main {
+	padding: 8px;
+}
 </style>

src/ui/src/builder/useComponentActions.ts

@@ -166,7 +166,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		parentId: Component["id"],
 		position?: number,
 		initProperties?: Partial<
-			Omit<Component, "id" | "type" | "parent" | "handlers" | "position">
+			Omit<Component, "type" | "parent" | "handlers" | "position">
 		>,
 		initializer?: (parentId: Component["id"]) => void,
 	): Component["id"] {
@@ -176,6 +176,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 			position,
 			initProperties,
 		);
+		component.id = initProperties?.id ?? component.id;
 		const transactionId = `create-${component.id}`;
 		ssbm.openMutationTransaction(transactionId, `Create`);
 		wf.addComponent(component);
@@ -979,6 +980,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	}
 
 	return {
+		generateNewComponentId,
 		moveComponent,
 		moveComponentUp,
 		moveComponentDown,

src/ui/src/components/workflows/WorkflowsAutogen.vue

@@ -0,0 +1,142 @@
+<template>
+	<div class="WorkflowsAutogen">
+		<template v-if="!isBusy">
+			<div class="main">
+				<WdsTextareaInput
+					v-model="prompt"
+					rows="8"
+					placeholder="Describe the blocks you'd like to generate..."
+				></WdsTextareaInput>
+			</div>
+			<div class="buttons">
+				<WdsButton @click="handleAutogen">
+					<i class="material-symbols-outlined">bolt</i> Generate
+				</WdsButton>
+				<WdsButton variant="tertiary" @click="handleCancel">
+					Cancel
+				</WdsButton>
+			</div>
+		</template>
+
+		<template v-else>
+			<WorkflowsLifeLoading></WorkflowsLifeLoading>
+			<h2>Generating...</h2>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import WdsButton from "@/wds/WdsButton.vue";
+import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
+import WorkflowsLifeLoading from "./WorkflowsLifeLoading.vue";
+import { Component } from "@/writerTypes";
+import { useComponentActions } from "@/builder/useComponentActions";
+import injectionKeys from "@/injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const wfbm = inject(injectionKeys.builderManager);
+
+const { generateNewComponentId } = useComponentActions(wf, wfbm);
+
+const isBusy = ref(false);
+const prompt = ref("");
+
+const emits = defineEmits(["blockGeneration"]);
+
+function handleCancel() {
+	emits("blockGeneration", null);
+}
+
+/**
+ * The generation happens with simple ids (aig1, aig2, ...).
+ * Component ids are altered to preserve uniqueness across blueprints.
+ */
+function alterIds(components: Component[]) {
+	const mapping: Record<string, string> = {};
+
+	// Switch ids
+
+	components.forEach((c) => {
+		const newId = generateNewComponentId();
+		mapping[c.id] = newId;
+		c.id = newId;
+	});
+
+	// Switch out ids
+
+	components.forEach((c) => {
+		c.outs?.forEach((out) => {
+			out.toNodeId = mapping[out.toNodeId];
+		});
+	});
+
+	// Switch results
+
+	components.forEach((c) => {
+		Object.entries(mapping).forEach(([originalId, newId]) => {
+			const regex = new RegExp(
+				`(@{\\s*results\\.)aig${originalId}\\b`,
+				"g",
+			);
+			Object.entries(c.content).forEach(([fieldKey, field]) => {
+				const newField = field.replace(regex, (_match, capturedAig) =>
+					_match.replace(capturedAig, newId),
+				);
+				c.content[fieldKey] = newField;
+			});
+		});
+	});
+
+	return components;
+}
+
+async function handleAutogen() {
+	const description = prompt.value;
+	isBusy.value = true;
+	const response = await fetch("/api/autogen", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({ description }),
+	});
+
+	isBusy.value = false;
+
+	if (!response.ok) {
+		throw new Error(`Error: ${response.status} - ${response.statusText}`);
+	}
+
+	const data = await response.json(); // Assuming the response is JSON
+
+	const components: Component[] = alterIds(data.blueprint?.components);
+	emits("blockGeneration", { components });
+}
+</script>
+
+<style scoped>
+.WorkflowsAutogen {
+	display: flex;
+	gap: 24px;
+	flex-direction: column;
+	align-items: center;
+}
+
+.main {
+	width: 100%;
+}
+
+h2 {
+	margin: 0;
+	font-size: 24px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 160%;
+}
+
+.buttons {
+	display: flex;
+	gap: 16px;
+}
+</style>