Merge pull request #645 from writer/dev

chore: Merge for release

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.8.0rc7"
+version = "0.8.0rc8"
 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/BuilderApp.vue

@@ -105,31 +105,34 @@ import { isPlatformMac } from "../core/detectPlatform";
 import BuilderHeader from "./BuilderHeader.vue";
 import BuilderTooltip from "./BuilderTooltip.vue";
 import BuilderComponentShortcuts from "./BuilderComponentShortcuts.vue";
+import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
+import BuilderCodePanel from "./BuilderCodePanel.vue";
+import BuilderLogPanel from "./BuilderLogPanel.vue";
 
-const BuilderSettings = defineAsyncComponent(
-	() => import("./BuilderSettings.vue"),
-);
-const BuilderSidebar = defineAsyncComponent(
-	() => import("./BuilderSidebar.vue"),
-);
-const ComponentRenderer = defineAsyncComponent(
-	() => import("@/renderer/ComponentRenderer.vue"),
-);
-const BuilderInstanceTracker = defineAsyncComponent(
-	() => import("./BuilderInstanceTracker.vue"),
-);
-const BuilderInsertionOverlay = defineAsyncComponent(
-	() => import("./BuilderInsertionOverlay.vue"),
-);
-const BuilderInsertionLabel = defineAsyncComponent(
-	() => import("./BuilderInsertionLabel.vue"),
-);
-const BuilderCodePanel = defineAsyncComponent(
-	() => import("./BuilderCodePanel.vue"),
-);
-const BuilderLogPanel = defineAsyncComponent(
-	() => import("./BuilderLogPanel.vue"),
-);
+const BuilderSettings = defineAsyncComponent({
+	loader: () => import("./BuilderSettings.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const BuilderSidebar = defineAsyncComponent({
+	loader: () => import("./BuilderSidebar.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const ComponentRenderer = defineAsyncComponent({
+	loader: () => import("@/renderer/ComponentRenderer.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const BuilderInstanceTracker = defineAsyncComponent({
+	loader: () => import("./BuilderInstanceTracker.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const BuilderInsertionOverlay = defineAsyncComponent({
+	loader: () => import("./BuilderInsertionOverlay.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const BuilderInsertionLabel = defineAsyncComponent({
+	loader: () => import("./BuilderInsertionLabel.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/BuilderAsyncLoader.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="BuilderAsyncLoader">
+		<LoadingSymbol />
+	</div>
+</template>
+
+<script setup lang="ts">
+import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
+</script>
+
+<style scoped>
+.BuilderAsyncLoader {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>

src/ui/src/builder/BuilderCodePanel.vue

@@ -17,11 +17,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from "vue";
-import BuilderEmbeddedCodeEditor from "./BuilderEmbeddedCodeEditor.vue";
+import { computed, defineAsyncComponent, inject, ref, watch } from "vue";
 import BuilderPanel, { type BuilderPanelAction } from "./BuilderPanel.vue";
+import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import injectionKeys from "@/injectionKeys";
 
+const BuilderEmbeddedCodeEditor = defineAsyncComponent({
+	loader: () => import("./BuilderEmbeddedCodeEditor.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+
 const wf = inject(injectionKeys.core);
 
 const wfbm = inject(injectionKeys.builderManager);

src/ui/src/builder/BuilderHeader.vue

@@ -49,7 +49,7 @@
 			variant="primary"
 			size="small"
 			class="panelToggler"
-			title="Toggle Code panel"
+			data-automation-action="toggle-code-panel"
 			:class="{ active: ssbm.openPanels.has('code') }"
 			@click="togglePanel('code')"
 		>
@@ -60,6 +60,7 @@
 			variant="primary"
 			size="small"
 			class="panelToggler"
+			data-automation-action="toggle-log-panel"
 			title="Toggle Log panel"
 			:class="{ active: ssbm.openPanels.has('log') }"
 			@click="togglePanel('log')"

src/ui/src/builder/BuilderLogWorkflowExecution.vue

@@ -31,10 +31,10 @@
 				</div>
 				<div class="result">
 					<BuilderModal
-						v-if="displayedDetails !== null"
+						v-if="displayedItemId == itemId"
 						:close-action="{
 							desc: 'Close',
-							fn: () => (displayedDetails = null),
+							fn: () => (displayedItemId = null),
 						}"
 						icon="find_in_page"
 						modal-title="Details"
@@ -48,10 +48,10 @@
 									environment of the direct dependents of this
 									block. There, it's accessible via @{result}.
 								</p>
-								<div class="data">
+								<div class="data" data-automation-key="result">
 									<SharedJsonViewer
-										v-if="displayedDetails?.result"
-										:data="displayedDetails.result"
+										v-if="item?.result"
+										:data="item.result"
 										:initial-depth="1"
 										class="data"
 									/>
@@ -68,12 +68,8 @@
 								</p>
 								<div class="data">
 									<SharedJsonViewer
-										v-if="
-											displayedDetails?.executionEnvironment
-										"
-										:data="
-											displayedDetails.executionEnvironment
-										"
+										v-if="item?.executionEnvironment"
+										:data="item.executionEnvironment"
 										:initial-depth="1"
 										class="data"
 									/>
@@ -89,10 +85,13 @@
 									determine the result of 'Run workflow'
 									blocks and 'Chat completion' tool calls.
 								</p>
-								<div class="data">
+								<div
+									class="data"
+									data-automation-key="return-value"
+								>
 									<SharedJsonViewer
-										v-if="displayedDetails?.returnValue"
-										:data="displayedDetails.returnValue"
+										v-if="item?.returnValue"
+										:data="item.returnValue"
 										:initial-depth="1"
 										class="data"
 									/>
@@ -111,15 +110,7 @@
 						"
 						variant="secondary"
 						size="small"
-						@click="
-							() =>
-								(displayedDetails = {
-									executionEnvironment:
-										item.executionEnvironment,
-									result: item.result,
-									returnValue: item.returnValue,
-								})
-						"
+						@click="() => (displayedItemId = itemId)"
 					>
 						<i class="material-symbols-outlined">find_in_page</i>
 						Details
@@ -128,12 +119,18 @@
 				<div class="time">
 					{{ formatExecutionTime(item.executionTimeInSeconds) }}
 				</div>
+				<div
+					v-if="item.message"
+					v-dompurify-html="marked.parse(item.message)"
+					class="message markdown"
+				></div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { marked } from "marked";
 import injectionKeys from "@/injectionKeys";
 import { WorkflowExecutionLog } from "./builderManager";
 import { computed, inject, nextTick, ref } from "vue";
@@ -151,7 +148,7 @@ const { goToComponentParentPage } = useComponentActions(wf, wfbm);
 const props = defineProps<{
 	executionLog: WorkflowExecutionLog;
 }>();
-const displayedDetails = ref(null);
+const displayedItemId = ref<number | null>(null);
 
 type EnrichedExecutionLog = WorkflowExecutionLog & {
 	summary: {
@@ -239,7 +236,7 @@ function formatExecutionTime(timeInSeconds: number): string {
 	grid-row: 1 / 3;
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 80px;
-	grid-template-rows: 1fr;
+	grid-template-rows: 1fr auto;
 	align-items: center;
 	padding: 8px;
 	border-radius: 6px;
@@ -290,6 +287,12 @@ function formatExecutionTime(timeInSeconds: number): string {
 	grid-row: 1 / 2;
 }
 
+.item .message {
+	grid-column: 1 / 5;
+	grid-row: 2 / 3;
+	margin-top: 8px;
+}
+
 .detailsModalContent {
 	display: flex;
 	flex-direction: column;
@@ -308,4 +311,11 @@ function formatExecutionTime(timeInSeconds: number): string {
 	margin-top: 8px;
 	font-size: 14px;
 }
+
+.markdown :deep(code) {
+	font-family: monospace;
+	font-size: 13px;
+	background-color: rgba(0, 0, 0, 0.05);
+	padding: 2px;
+}
 </style>

src/ui/src/builder/BuilderSettings.vue

@@ -19,7 +19,7 @@
 				class="windowAction"
 				tabindex="0"
 				title="Close (Esc)"
-				data-automation-action="close"
+				data-automation-action="close-settings"
 				@click="closeSettings"
 			>
 				<i class="material-symbols-outlined">close</i>
@@ -68,14 +68,19 @@
 
 <script setup lang="ts">
 import { marked } from "marked";
-import { inject, computed, ref, watch } from "vue";
+import { inject, computed, ref, watch, defineAsyncComponent } from "vue";
 import injectionKeys from "../injectionKeys";
 
-import BuilderSettingsHandlers from "./BuilderSettingsHandlers.vue";
 import BuilderSettingsProperties from "./BuilderSettingsProperties.vue";
 import BuilderSettingsBinding from "./BuilderSettingsBinding.vue";
 import BuilderSettingsVisibility from "./BuilderSettingsVisibility.vue";
 import BuilderCopyText from "./BuilderCopyText.vue";
+import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
+
+const BuilderSettingsHandlers = defineAsyncComponent({
+	loader: () => import("./BuilderSettingsHandlers.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);

src/ui/src/builder/BuilderSidebarTree.vue

@@ -50,11 +50,19 @@
 			</div>
 		</div>
 		<div class="add">
-			<button v-if="rootType == 'root'" @click="addPage">
+			<button
+				v-if="rootType == 'root'"
+				data-automation-action="add-page"
+				@click="addPage"
+			>
 				<i class="material-symbols-outlined"> add </i>
 				Add Page
 			</button>
-			<button v-if="rootType == 'workflows_root'" @click="addWorkflow">
+			<button
+				v-if="rootType == 'workflows_root'"
+				data-automation-action="add-workflow"
+				@click="addWorkflow"
+			>
 				<i class="material-symbols-outlined"> add </i>
 				Add Workflow
 			</button>

src/ui/src/builder/BuilderSwitcher.vue

@@ -1,11 +1,16 @@
 <template>
 	<div class="BuilderSwitcher">
-		<div :class="{ active: activeId == 'ui' }" @click="selectOption('ui')">
+		<div
+			data-automation-action="set-mode-ui"
+			:class="{ active: activeId == 'ui' }"
+			@click="selectOption('ui')"
+		>
 			<i class="icon material-symbols-outlined"> brush </i>
 			UI
 		</div>
 		<div
 			v-if="isWorkflowsFeatureFlagged"
+			data-automation-action="set-mode-workflows"
 			:class="{ active: activeId == 'workflows' }"
 			@click="selectOption('workflows')"
 		>
@@ -14,6 +19,7 @@
 		</div>
 		<div
 			:class="{ active: activeId == 'preview' }"
+			data-automation-action="set-mode-preview"
 			@click="selectOption('preview')"
 		>
 			<i class="icon material-symbols-outlined"> preview </i>

src/ui/src/builder/builderManager.ts

@@ -18,6 +18,7 @@ export type WorkflowExecutionLog = {
 	summary: {
 		componentId: Component["id"];
 		outcome: string;
+		message?: string;
 		executionTimeInSeconds: number;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		result: any;

src/ui/src/components/core/content/CoreChatBot/CoreChatbotAvatar.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="CoreChatbotAvatar">{{ initials }}</div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+	initials: { type: String, required: true },
+});
+</script>
+
+<style scoped>
+.CoreChatbotAvatar {
+	border-radius: 50%;
+	background: var(--avatarBackgroundColor);
+	color: var(--avatarTextColor);
+	margin-top: 6px;
+	height: 32px;
+	width: 32px;
+	flex: 0 0 32px;
+	display: flex;
+	font-weight: 500;
+	font-size: 0.75rem;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	text-transform: uppercase;
+}
+</style>