From c7a376d86b2f445f5cf8e787171550a8cd214042 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Tue, 16 Jul 2024 08:19:41 +0000
Subject: [PATCH 1/5] feat: Workflows

---
 src/ui/src/builder/BuilderApp.vue             |   5 +
 src/ui/src/builder/BuilderSidebar.vue         |  15 +-
 .../BuilderSidebarWorkflowsToolkit.vue        | 191 ++++++++++++++++++
 src/ui/src/builder/BuilderSwitcher.vue        |   9 +-
 src/ui/src/builder/builderManager.ts          |   2 +-
 .../src/builder/workflows/WorkflowsArrow.vue  |  35 ++++
 .../src/builder/workflows/WorkflowsCanvas.vue | 169 ++++++++++++++++
 .../builder/workflows/WorkflowsNodeBox.vue    | 103 ++++++++++
 .../src/builder/workflows/nodeTemplateDefs.ts | 126 ++++++++++++
 src/ui/src/core/index.ts                      |   1 +
 src/ui/src/writerTypes.ts                     |  33 ++-
 11 files changed, 679 insertions(+), 10 deletions(-)
 create mode 100644 src/ui/src/builder/BuilderSidebarWorkflowsToolkit.vue
 create mode 100644 src/ui/src/builder/workflows/WorkflowsArrow.vue
 create mode 100644 src/ui/src/builder/workflows/WorkflowsCanvas.vue
 create mode 100644 src/ui/src/builder/workflows/WorkflowsNodeBox.vue
 create mode 100644 src/ui/src/builder/workflows/nodeTemplateDefs.ts

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index e98f5fea5..42bf43348 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -6,6 +6,7 @@
 				<BuilderSidebar></BuilderSidebar>
 			</div>
 			<div
+				v-if="builderMode !== 'workflows'"
 				class="builderMain"
 				:class="{
 					buildMode: builderMode !== 'preview',
@@ -68,6 +69,9 @@
 					</div>
 				</div>
 			</div>
+			<div v-if="builderMode == 'workflows'">
+				<WorkflowsCanvas></WorkflowsCanvas>
+			</div>
 		</div>
 		<!-- INSTANCE TRACKERS -->
 
@@ -135,6 +139,7 @@ import BuilderInstanceTracker from "./BuilderInstanceTracker.vue";
 import BuilderInsertionOverlay from "./BuilderInsertionOverlay.vue";
 import BuilderInsertionLabel from "./BuilderInsertionLabel.vue";
 import { isPlatformMac } from "../core/detectPlatform";
+import WorkflowsCanvas from "./workflows/WorkflowsCanvas.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderSidebar.vue b/src/ui/src/builder/BuilderSidebar.vue
index 14c2d4ed4..78ab73ffc 100644
--- a/src/ui/src/builder/BuilderSidebar.vue
+++ b/src/ui/src/builder/BuilderSidebar.vue
@@ -1,13 +1,24 @@
 <template>
 	<div class="BuilderSidebar">
-		<BuilderSidebarToolbar class="toolbar"></BuilderSidebarToolbar>
-		<BuilderSidebarTree class="tree"></BuilderSidebarTree>
+		<template v-if="builderMode == 'workflows'">
+			<BuilderSidebarWorkflowsToolkit></BuilderSidebarWorkflowsToolkit>
+		</template>
+		<template v-else>
+			<BuilderSidebarToolbar class="toolbar"></BuilderSidebarToolbar>
+			<BuilderSidebarTree class="tree"></BuilderSidebarTree>
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { computed, inject } from "vue";
 import BuilderSidebarToolbar from "./BuilderSidebarToolbar.vue";
+import BuilderSidebarWorkflowsToolkit from "./BuilderSidebarWorkflowsToolkit.vue";
 import BuilderSidebarTree from "./BuilderSidebarTree.vue";
+import injectionKeys from "../injectionKeys";
+
+const ssbm = inject(injectionKeys.builderManager);
+const builderMode = computed(() => ssbm.getMode());
 </script>
 
 <style scoped>
diff --git a/src/ui/src/builder/BuilderSidebarWorkflowsToolkit.vue b/src/ui/src/builder/BuilderSidebarWorkflowsToolkit.vue
new file mode 100644
index 000000000..c8c591db0
--- /dev/null
+++ b/src/ui/src/builder/BuilderSidebarWorkflowsToolkit.vue
@@ -0,0 +1,191 @@
+<template>
+	<div class="BuilderSidebarWorkflowsToolkit">
+		<div class="sectionTitle">
+			<i class="material-symbols-outlined"> handyman </i>
+			<h3>Workflows Toolkit</h3>
+		</div>
+		<div class="categories">
+			<template
+				v-for="(categoryData, category) in categoriesData"
+				:key="category"
+			>
+				<div v-if="categoryData.isVisible !== false" class="category">
+					<div class="title">
+						<i class="material-symbols-outlined">{{
+							categoryData.icon ?? "question_mark"
+						}}</i>
+						<h4>{{ category }}</h4>
+
+						<div
+							class="drop-arrow"
+							@click="toggleCollapseCategory(category)"
+						>
+							<i class="material-symbols-outlined">
+								{{
+									categoryData.isCollapsed
+										? "expand_more"
+										: "expand_less"
+								}}
+							</i>
+						</div>
+					</div>
+
+					<div v-show="!categoryData.isCollapsed" class="components">
+						<div
+							v-for="(
+								definition, type
+							) in definitionsByDisplayCategory[category]"
+							:key="type"
+							class="component button"
+							:title="definition.description"
+							draggable="true"
+							:data-component-type="type"
+							@dragend="handleDragEnd($event)"
+							@dragstart="handleDragStart($event, type)"
+						>
+							{{ definition.name ?? type }}
+							<i
+								v-if="type.startsWith('custom_')"
+								class="material-symbols-outlined"
+								title="(Custom component template)"
+								>manga</i
+							>
+						</div>
+					</div>
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Ref, computed, inject, ref } from "vue";
+import injectionKeys from "../injectionKeys";
+import nodeTemplateDefs from "./workflows/nodeTemplateDefs";
+
+const wf = inject(injectionKeys.core);
+
+type CategoryData = {
+	isVisible?: boolean;
+	isCollapsed?: boolean;
+	icon?: string;
+};
+
+const categoriesData: Ref<Record<string, CategoryData>> = ref({
+	Content: {
+		icon: "toc",
+		isCollapsed: false,
+	},
+});
+
+function toggleCollapseCategory(categoryId: string) {
+	const categoryData = categoriesData.value[categoryId];
+	categoryData.isCollapsed = !categoryData.isCollapsed;
+}
+
+const definitionsByDisplayCategory = computed(() => {
+	const types = Object.keys(nodeTemplateDefs);
+	const result: Record<string, Record<string, any>> = {};
+
+	types.map((type) => {
+		const definition = nodeTemplateDefs[type];
+		const isMatch = Object.keys(categoriesData.value).includes(
+			definition.category,
+		);
+		let displayCategory: string;
+		if (!isMatch) {
+			displayCategory = "Other";
+		} else {
+			displayCategory = definition.category;
+		}
+		if (!result[displayCategory]) {
+			result[displayCategory] = {};
+		}
+		result[displayCategory][type] = definition;
+	});
+
+	return result;
+});
+
+const handleDragStart = (ev: DragEvent, type: string) => {
+	ev.dataTransfer.setData(
+		`application/json;writer=node`,
+		JSON.stringify({ type }),
+	);
+};
+
+const handleDragEnd = (ev: DragEvent) => {};
+</script>
+
+<style scoped>
+@import "./sharedStyles.css";
+
+.BuilderSidebarWorkflowsToolkit {
+	font-size: 0.7rem;
+}
+
+.BuilderSidebarWorkflowsToolkit > .sectionTitle {
+	padding: 16px;
+	position: sticky;
+	top: 0;
+	background: var(--builderBackgroundColor);
+	font-size: 0.875rem;
+	height: 40px;
+}
+
+h3 {
+	font-weight: 500;
+	font-size: 0.875rem;
+}
+
+.categories {
+	padding: 0 12px 12px 12px;
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+}
+
+.category .title {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px;
+	gap: 8px;
+}
+
+.category .title h4 {
+	flex: 1 0 auto;
+}
+
+.category .components {
+	padding: 4px 0 4px 0;
+}
+
+.component {
+	padding: 8px;
+	border-radius: 4px;
+	cursor: grab;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	height: 33px;
+}
+
+.component:hover {
+	background: var(--builderSubtleHighlightColor);
+}
+
+.drop-arrow {
+	border-radius: 50%;
+	min-width: 24px;
+	min-height: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.drop-arrow:hover {
+	background: var(--builderSubtleSeparatorColor);
+}
+</style>
diff --git a/src/ui/src/builder/BuilderSwitcher.vue b/src/ui/src/builder/BuilderSwitcher.vue
index 6fef6fedc..9b388e761 100644
--- a/src/ui/src/builder/BuilderSwitcher.vue
+++ b/src/ui/src/builder/BuilderSwitcher.vue
@@ -14,6 +14,13 @@
 				logEntryCount
 			}}</span>
 		</div>
+		<div
+			:class="{ active: activeId == 'workflows' }"
+			@click="selectOption('workflows')"
+		>
+			<i class="icon material-symbols-outlined"> preview </i>
+			Workflows
+		</div>
 		<div
 			:class="{ active: activeId == 'preview' }"
 			@click="selectOption('preview')"
@@ -31,7 +38,7 @@ const ssbm = inject(injectionKeys.builderManager);
 
 let selectedId: Ref<string> = ref(null);
 
-const selectOption = (optionId: "ui" | "code" | "preview") => {
+const selectOption = (optionId: "ui" | "code" | "workflows" | "preview") => {
 	selectedId.value = optionId;
 	ssbm.setMode(optionId);
 	if (ssbm.getMode() != "preview") return;
diff --git a/src/ui/src/builder/builderManager.ts b/src/ui/src/builder/builderManager.ts
index 2547872d0..a5e57c0de 100644
--- a/src/ui/src/builder/builderManager.ts
+++ b/src/ui/src/builder/builderManager.ts
@@ -44,7 +44,7 @@ export function generateBuilderManager() {
 	};
 
 	type State = {
-		mode: "ui" | "code" | "preview";
+		mode: "ui" | "code" | "workflows" | "preview";
 		selection: {
 			componentId: Component["id"];
 			instancePath: string;
diff --git a/src/ui/src/builder/workflows/WorkflowsArrow.vue b/src/ui/src/builder/workflows/WorkflowsArrow.vue
new file mode 100644
index 000000000..bd427560b
--- /dev/null
+++ b/src/ui/src/builder/workflows/WorkflowsArrow.vue
@@ -0,0 +1,35 @@
+<template>
+	<g>
+		<!-- Arrow Line -->
+		<line
+			:x1="props.arrow.x1"
+			:y1="props.arrow.y1"
+			:x2="props.arrow.x2"
+			:y2="props.arrow.y2"
+			:stroke="props.arrow.color"
+			stroke-width="1"
+			marker-end="url(#arrowhead)"
+		/>
+	</g>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+	arrow: {
+		x1: number;
+		y1: number;
+		x2: number;
+		y2: number;
+		color: string;
+	};
+}>();
+</script>
+
+<style scoped>
+@import "../sharedStyles.css";
+
+.WorkflowsArrow {
+}
+</style>
diff --git a/src/ui/src/builder/workflows/WorkflowsCanvas.vue b/src/ui/src/builder/workflows/WorkflowsCanvas.vue
new file mode 100644
index 000000000..25bbff756
--- /dev/null
+++ b/src/ui/src/builder/workflows/WorkflowsCanvas.vue
@@ -0,0 +1,169 @@
+<template>
+	<div
+		ref="rootEl"
+		class="WorkflowsCanvas"
+		@dragover="handleCanvasDragover"
+		@drop="handleCanvasDrop"
+	>
+		<svg width="100%" height="100%">
+			<WorkflowsArrow
+				v-for="(arrow, arrowId) in arrows"
+				:key="arrowId"
+				:arrow="arrow"
+				@click="handleArrowClick"
+			></WorkflowsArrow>
+		</svg>
+		<WorkflowsNodeBox
+			v-for="(node, nodeId) in nodes"
+			:key="nodeId"
+			:data-writer-id="nodeId"
+			:node="node"
+			draggable="true"
+			@click="() => handleNodeClick(nodeId)"
+			@drag="handleNodeDrag"
+			@dragstart="handleNodeDragStart"
+			@out-select="(outId) => handleNodeOutSelect(nodeId, outId)"
+		></WorkflowsNodeBox>
+	</div>
+</template>
+
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import WorkflowsArrow from "./WorkflowsArrow.vue";
+import { Ref, computed, ref } from "vue";
+import { onMounted } from "vue";
+import { type WorkflowsComponent } from "../../writerTypes";
+
+const rootEl: Ref<HTMLElement> = ref(null);
+
+let activeNodeOut: { outId: string; fromNodeId: string } | null = null;
+
+const nodes: Ref<Record<string, WorkflowsComponent>> = ref({});
+
+let arrows = ref([]);
+
+let nodeClickOffset = { x: 0, y: 0 };
+
+function handleCanvasDragover(ev: DragEvent) {
+	ev.preventDefault();
+}
+
+function handleCanvasDrop(ev: DragEvent) {
+	ev.preventDefault();
+	const rawDragData = ev.dataTransfer.getData("application/json;writer=node");
+	if (!rawDragData) return;
+	const dragData = JSON.parse(rawDragData);
+	const id = `abcd${Math.floor(Math.random() * 2000)}`;
+	const canvasCBR = rootEl.value.getBoundingClientRect();
+	const x = ev.pageX - canvasCBR.x;
+	const y = ev.pageY - canvasCBR.y;
+	nodes.value[id] = {
+		id,
+		x,
+		y,
+		content: {},
+		type: dragData.type,
+		outs: [],
+	};
+}
+
+function handleNodeDragStart(ev: DragEvent) {
+	const el = ev.target as HTMLElement;
+	const nodeId = el.dataset.writerId;
+	var img = new Image();
+	img.src =
+		"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+	ev.dataTransfer.setDragImage(img, 0, 0);
+	nodeClickOffset = {
+		x: ev.offsetX,
+		y: ev.offsetY,
+	};
+}
+
+function handleNodeDrag(ev: DragEvent) {
+	const el = ev.target as HTMLElement;
+	const nodeId = el.dataset.writerId;
+	const canvasCBR = rootEl.value.getBoundingClientRect();
+	const x = ev.pageX - canvasCBR.x - nodeClickOffset.x;
+	const y = ev.pageY - canvasCBR.y - nodeClickOffset.y;
+	nodes.value[nodeId].x = Math.max(0, x);
+	nodes.value[nodeId].y = Math.max(0, y);
+	refreshArrows();
+}
+
+function handleNodeOutSelect(nodeId, outId) {
+	activeNodeOut = {
+		fromNodeId: nodeId,
+		outId,
+	};
+}
+
+function handleNodeClick(nodeId: string) {
+	if (!activeNodeOut) return;
+	if (activeNodeOut.fromNodeId == nodeId) return;
+	nodes.value[activeNodeOut.fromNodeId].outs.push({
+		toNodeId: nodeId,
+		outId: activeNodeOut.outId,
+	});
+	activeNodeOut = null;
+	refreshArrows();
+}
+
+function handleArrowClick() {
+	console.log("Arrow has been clicked");
+}
+
+function refreshArrows() {
+	arrows.value = [];
+	const canvasCBR = rootEl.value.getBoundingClientRect();
+
+	Object.entries(nodes.value)
+		.filter(([nodeId, node]) => node.outs?.length > 0)
+		.forEach(([nodeId, node]) => {
+			const fromNodeId = nodeId;
+			node.outs.forEach((out) => {
+				const fromEl = document.querySelector(
+					`[data-writer-id="${fromNodeId}"] [data-writer-socket-id="${out.outId}"]`,
+				);
+				const toEl = document.querySelector(
+					`[data-writer-id="${out.toNodeId}"]`,
+				);
+				if (!fromEl || !toEl) return;
+				const fromCBR = fromEl.getBoundingClientRect();
+				const toCBR = toEl.getBoundingClientRect();
+				arrows.value.push({
+					x1: fromCBR.x - canvasCBR.x + fromCBR.width / 2,
+					y1: fromCBR.y - canvasCBR.y + fromCBR.height / 2,
+					x2: toCBR.x - canvasCBR.x,
+					y2: toCBR.y - canvasCBR.y + toCBR.height / 2,
+					color: getComputedStyle(fromEl).backgroundColor,
+				});
+			});
+		});
+}
+
+onMounted(() => {
+	refreshArrows();
+});
+</script>
+
+<style scoped>
+@import "../sharedStyles.css";
+
+.WorkflowsCanvas {
+	background: var(--builderBackgroundColor);
+	position: relative;
+	height: 100%;
+	width: 100%;
+	min-height: 100%;
+	min-width: 100%;
+	overflow: hidden;
+}
+
+svg {
+	position: absolute;
+	background: var(--builderSubtleSeparatorColor);
+	top: 0;
+	left: 0;
+}
+</style>
diff --git a/src/ui/src/builder/workflows/WorkflowsNodeBox.vue b/src/ui/src/builder/workflows/WorkflowsNodeBox.vue
new file mode 100644
index 000000000..070d2eec7
--- /dev/null
+++ b/src/ui/src/builder/workflows/WorkflowsNodeBox.vue
@@ -0,0 +1,103 @@
+<template>
+	<div class="WorkflowsNodeBox">
+		<div class="title">{{ nodeDef.name }}</div>
+		<div class="main">
+			{{ nodeDef.description }}
+		</div>
+		<div class="outputs">
+			<div
+				v-for="(out, outId) in nodeDef.outs"
+				:key="outId"
+				class="output"
+			>
+				{{ out.name }}
+				<div
+					class="ball"
+					:class="out.style"
+					:data-writer-socket-id="outId"
+					@click="$emit('outSelect', outId)"
+				></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { WorkflowsComponent } from "../../writerTypes";
+import nodeTemplates from "./nodeTemplateDefs";
+
+const props = defineProps<{
+	node: WorkflowsComponent;
+}>();
+
+const nodeDef = nodeTemplates[props.node.type];
+
+defineEmits(["outSelect"]);
+</script>
+
+<style scoped>
+@import "../sharedStyles.css";
+
+.WorkflowsNodeBox {
+	background: var(--builderBackgroundColor);
+	border-radius: 12px;
+	width: 240px;
+	position: absolute;
+	box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
+	top: v-bind("`${props.node.y}px`");
+	left: v-bind("`${props.node.x}px`");
+}
+
+.title {
+	background: #ede2ff;
+	padding: 16px;
+	border-radius: 12px 12px 0 0;
+	border-top: 1px solid var(--builderSeparatorColor);
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-right: 1px solid var(--builderSeparatorColor);
+}
+
+.main {
+	padding: 16px;
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-right: 1px solid var(--builderSeparatorColor);
+}
+
+.outputs {
+	border: 1px solid var(--builderSeparatorColor);
+	border-radius: 0 0 12px 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px 0 12px 16px;
+}
+
+.output {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: right;
+	font-size: 10px;
+	font-style: normal;
+	font-weight: 500;
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+}
+
+.output .ball {
+	margin-right: -8px;
+	height: 16px;
+	width: 16px;
+	border-radius: 50%;
+	border: 1px solid var(--builderBackgroundColor);
+	cursor: pointer;
+}
+
+.output .ball.success {
+	background: var(--builderSuccessColor);
+}
+
+.output .ball.error {
+	background: var(--builderErrorColor);
+}
+</style>
diff --git a/src/ui/src/builder/workflows/nodeTemplateDefs.ts b/src/ui/src/builder/workflows/nodeTemplateDefs.ts
new file mode 100644
index 000000000..c9d0fcbac
--- /dev/null
+++ b/src/ui/src/builder/workflows/nodeTemplateDefs.ts
@@ -0,0 +1,126 @@
+import { FieldType } from "../../writerTypes";
+
+const httpcall = {
+	name: "HTTP call",
+	description: "Helps you make HTTP calls",
+	category: "Content",
+	fields: {
+		conversation: {
+			name: "Conversation",
+			desc: "An array with messages or a writer.ai.Conversation object.",
+			type: FieldType.Object,
+		},
+		assistantInitials: {
+			name: "Assistant initials",
+			default: "AI",
+			type: FieldType.Text,
+		},
+		userInitials: {
+			name: "User initials",
+			default: "YOU",
+			type: FieldType.Text,
+		},
+		useMarkdown: {
+			name: "Use Markdown",
+			desc: "If active, the output will be sanitized; unsafe elements will be removed.",
+			default: "no",
+			type: FieldType.Text,
+			options: {
+				yes: "Yes",
+				no: "No",
+			},
+		},
+		enableFileUpload: {
+			name: "Enable file upload",
+			default: "no",
+			type: FieldType.Text,
+			options: {
+				single: "Single file",
+				multiple: "Multiple files",
+				no: "No",
+			},
+		},
+		placeholder: {
+			name: "Placeholder",
+			default: "What do you need?",
+			type: FieldType.Text,
+		},
+	},
+	outs: {
+		success: {
+			name: "Success",
+			description: "If the HTTP call succeeds.",
+			style: "success",
+		},
+		exception: {
+			name: "Error",
+			description: "If the HTTP call doesn't succeed.",
+			style: "error",
+		},
+	},
+};
+
+const pythonfunc = {
+	name: "Python function",
+	description: "Run Python functions",
+	category: "Content",
+	fields: {
+		conversation: {
+			name: "Conversation",
+			desc: "An array with messages or a writer.ai.Conversation object.",
+			type: FieldType.Object,
+		},
+		assistantInitials: {
+			name: "Assistant initials",
+			default: "AI",
+			type: FieldType.Text,
+		},
+		userInitials: {
+			name: "User initials",
+			default: "YOU",
+			type: FieldType.Text,
+		},
+		useMarkdown: {
+			name: "Use Markdown",
+			desc: "If active, the output will be sanitized; unsafe elements will be removed.",
+			default: "no",
+			type: FieldType.Text,
+			options: {
+				yes: "Yes",
+				no: "No",
+			},
+		},
+		enableFileUpload: {
+			name: "Enable file upload",
+			default: "no",
+			type: FieldType.Text,
+			options: {
+				single: "Single file",
+				multiple: "Multiple files",
+				no: "No",
+			},
+		},
+		placeholder: {
+			name: "Placeholder",
+			default: "What do you need?",
+			type: FieldType.Text,
+		},
+	},
+	outs: {
+		success: {
+			name: "Success",
+			description: "If the function doesn't raise an Exception.",
+			style: "success",
+		},
+		exception: {
+			name: "Exception",
+			description: "If the function raises an Exception.",
+			style: "error",
+		},
+	},
+};
+
+export default {
+	httpcall,
+	pythonfunc,
+};
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 04c434292..9331d454d 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -6,6 +6,7 @@ import {
 	ComponentMap,
 	InstancePath,
 	MailItem,
+	UIComponent,
 	UserFunction,
 } from "../writerTypes";
 import {
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 7ad8500ff..e9c12df3b 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -1,9 +1,9 @@
-import { generateCore } from "./core"
-import { generateBuilderManager } from "./builder/builderManager"
+import { generateCore } from "./core";
+import { generateBuilderManager } from "./builder/builderManager";
 
-export type Core = ReturnType<typeof generateCore>
+export type Core = ReturnType<typeof generateCore>;
 
-type ComponentId = string
+type ComponentId = string;
 
 /**
  * Basic building block of applications.
@@ -14,15 +14,25 @@ export type Component = {
 	id: ComponentId;
 	parentId: string;
 	type: string;
-	position: number;
 	content: Record<string, string>;
 	isCodeManaged?: boolean;
 	handlers?: Record<string, string>;
-	visible?: boolean | string;
 	binding?: {
 		eventType: string;
 		stateRef: string;
 	};
+	position?: number;
+	visible?: boolean | string;
+	x?: number;
+	y?: number;
+	outs?: Record<
+		string,
+		{
+			name: string;
+			description: string;
+			style: string;
+		}
+	>;
 };
 
 /**
@@ -125,3 +135,14 @@ export type ComponentMap = Record<Component["id"], Component>;
 export type MailItem = { type: string; payload: Record<string, string> };
 
 export type UserFunction = { name: string; args: string[] };
+
+export type WorkflowsNode = {
+	type: string;
+	content: Record<string, string>;
+	x: number;
+	y: number;
+	outs: {
+		outId: string;
+		toNodeId: string;
+	}[];
+};

From f88ff0c8ab9e20f9514bf16640981830172d9a29 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Tue, 23 Jul 2024 12:23:35 +0000
Subject: [PATCH 2/5] feat: Workflows

---
 src/ui/src/builder/BuilderApp.vue             |  15 +
 src/ui/src/builder/BuilderFieldsText.vue      |   3 +-
 src/ui/src/builder/BuilderSidebarTree.vue     |  11 +
 src/ui/src/builder/builderManager.ts          |   2 +-
 src/ui/src/builder/useComponentActions.ts     |   2 +-
 .../src/builder/workflows/WorkflowsCanvas.vue |  68 +++--
 .../builder/workflows/WorkflowsNodeBox.vue    |  10 +-
 src/ui/src/builder/workflows/workflowsCore.ts |   0
 src/ui/src/core/index.ts                      |   8 +-
 src/ui/src/core/templateMap.ts                |  13 +-
 src/ui/src/core_components/root/CoreRoot.vue  |   2 +-
 .../src/workflow_components/CoreHTTPCall.vue  |  91 ++++++
 .../CorePythonFunction.vue                    |  53 ++++
 .../src/workflow_components/CoreSetState.vue  |  57 ++++
 .../src/workflow_components/CoreWorkflow.vue  | 260 ++++++++++++++++++
 .../CoreWriterCompletion.vue                  |  55 ++++
 .../workflow_components/WorkflowsArrow.vue    |  87 ++++++
 .../workflow_components/WorkflowsNodeBox.vue  | 112 ++++++++
 .../workflow_components/WorkflowsNodeOuts.vue |  97 +++++++
 src/ui/src/writerTypes.ts                     |  23 +-
 src/writer/core.py                            |  12 +-
 src/writer/core_ui.py                         |   3 +
 22 files changed, 929 insertions(+), 55 deletions(-)
 create mode 100644 src/ui/src/builder/workflows/workflowsCore.ts
 create mode 100644 src/ui/src/workflow_components/CoreHTTPCall.vue
 create mode 100644 src/ui/src/workflow_components/CorePythonFunction.vue
 create mode 100644 src/ui/src/workflow_components/CoreSetState.vue
 create mode 100644 src/ui/src/workflow_components/CoreWorkflow.vue
 create mode 100644 src/ui/src/workflow_components/CoreWriterCompletion.vue
 create mode 100644 src/ui/src/workflow_components/WorkflowsArrow.vue
 create mode 100644 src/ui/src/workflow_components/WorkflowsNodeBox.vue
 create mode 100644 src/ui/src/workflow_components/WorkflowsNodeOuts.vue

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 42bf43348..83e04c26c 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -71,6 +71,16 @@
 			</div>
 			<div v-if="builderMode == 'workflows'">
 				<WorkflowsCanvas></WorkflowsCanvas>
+				<div
+					v-if="ssbm.isSelectionActive()"
+					:key="selectedId ?? 'noneSelected'"
+					class="settingsBar"
+					:class="{
+						collapsed: ssbm.isSettingsBarCollapsed(),
+					}"
+				>
+					<BuilderSettings></BuilderSettings>
+				</div>
 			</div>
 		</div>
 		<!-- INSTANCE TRACKERS -->
@@ -258,6 +268,11 @@ function handleRendererDrop(ev: DragEvent) {
 function handleRendererClick(ev: PointerEvent): void {
 	if (builderMode.value === "preview") return;
 
+	const unselectableEl: HTMLElement = (ev.target as HTMLElement).closest(
+		"[data-writer-unselectable]",
+	);
+	if (unselectableEl) return;
+
 	const targetEl: HTMLElement = (ev.target as HTMLElement).closest(
 		"[data-writer-id]",
 	);
diff --git a/src/ui/src/builder/BuilderFieldsText.vue b/src/ui/src/builder/BuilderFieldsText.vue
index a06dab652..65aa35631 100644
--- a/src/ui/src/builder/BuilderFieldsText.vue
+++ b/src/ui/src/builder/BuilderFieldsText.vue
@@ -16,7 +16,7 @@
 		</template>
 		<template v-else-if="templateField.control == FieldControl.Textarea">
 			<BuilderTemplateInput
-				multiline="true"
+				:multiline="true"
 				variant="text"
 				class="content"
 				:value="component.content[fieldKey]"
@@ -44,6 +44,7 @@ const props = defineProps<{
 }>();
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
+
 const templateField = computed(() => {
 	const { type } = component.value;
 	const definition = wf.getComponentDefinition(type);
diff --git a/src/ui/src/builder/BuilderSidebarTree.vue b/src/ui/src/builder/BuilderSidebarTree.vue
index b3cb18341..5aefe88e2 100644
--- a/src/ui/src/builder/BuilderSidebarTree.vue
+++ b/src/ui/src/builder/BuilderSidebarTree.vue
@@ -68,6 +68,10 @@
 				<i class="material-symbols-outlined"> add </i>
 				Add Page
 			</button>
+			<button @click="addWorkflow">
+				<i class="material-symbols-outlined"> add </i>
+				Add Workflow
+			</button>
 		</div>
 	</div>
 </template>
@@ -180,6 +184,13 @@ async function addPage() {
 	await nextTick();
 	ssbm.setSelection(pageId);
 }
+
+async function addWorkflow() {
+	const pageId = createAndInsertComponent("workflow", "root");
+	wf.setActivePageId(pageId);
+	await nextTick();
+	ssbm.setSelection(pageId);
+}
 </script>
 
 <style scoped>
diff --git a/src/ui/src/builder/builderManager.ts b/src/ui/src/builder/builderManager.ts
index a5e57c0de..a5bea64ed 100644
--- a/src/ui/src/builder/builderManager.ts
+++ b/src/ui/src/builder/builderManager.ts
@@ -100,7 +100,7 @@ export function generateBuilderManager() {
 				`.ComponentRenderer [data-writer-id="${componentId}"]`,
 			);
 			resolvedInstancePath =
-				componentFirstElement.dataset.writerInstancePath;
+				componentFirstElement?.dataset?.writerInstancePath;
 		}
 
 		state.value.selection = {
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index 1bee56827..2140c6185 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -793,7 +793,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	): Component["id"] {
 		const component = wf.getComponentById(componentId);
 		if (!component || component.type == "root") return null;
-		if (component.type == "page") return componentId;
+		if (component.type == "page" || component.type == "workflow") return componentId;
 		return getContainingPageId(component.parentId);
 	}
 
diff --git a/src/ui/src/builder/workflows/WorkflowsCanvas.vue b/src/ui/src/builder/workflows/WorkflowsCanvas.vue
index 25bbff756..f25568f35 100644
--- a/src/ui/src/builder/workflows/WorkflowsCanvas.vue
+++ b/src/ui/src/builder/workflows/WorkflowsCanvas.vue
@@ -14,15 +14,15 @@
 			></WorkflowsArrow>
 		</svg>
 		<WorkflowsNodeBox
-			v-for="(node, nodeId) in nodes"
-			:key="nodeId"
-			:data-writer-id="nodeId"
+			v-for="node in nodes"
+			:key="node.id"
+			:data-writer-id="node.id"
 			:node="node"
 			draggable="true"
-			@click="() => handleNodeClick(nodeId)"
+			@click="() => handleNodeClick(node.id)"
 			@drag="handleNodeDrag"
 			@dragstart="handleNodeDragStart"
-			@out-select="(outId) => handleNodeOutSelect(nodeId, outId)"
+			@out-select="(outId) => handleNodeOutSelect(node.id, outId)"
 		></WorkflowsNodeBox>
 	</div>
 </template>
@@ -31,15 +31,19 @@
 import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
 import WorkflowsArrow from "./WorkflowsArrow.vue";
 import { Ref, computed, ref } from "vue";
-import { onMounted } from "vue";
-import { type WorkflowsComponent } from "../../writerTypes";
+import { onMounted, inject } from "vue";
+import { type Component } from "../../writerTypes";
+import injectionKeys from "../../injectionKeys";
+
+const nodes = computed(() => ss.getComponents("workflow1"));
+
+const ss = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
 
 const rootEl: Ref<HTMLElement> = ref(null);
 
 let activeNodeOut: { outId: string; fromNodeId: string } | null = null;
 
-const nodes: Ref<Record<string, WorkflowsComponent>> = ref({});
-
 let arrows = ref([]);
 
 let nodeClickOffset = { x: 0, y: 0 };
@@ -57,14 +61,15 @@ function handleCanvasDrop(ev: DragEvent) {
 	const canvasCBR = rootEl.value.getBoundingClientRect();
 	const x = ev.pageX - canvasCBR.x;
 	const y = ev.pageY - canvasCBR.y;
-	nodes.value[id] = {
+	ss.addComponent({
 		id,
+		parentId: "workflow1",
 		x,
 		y,
 		content: {},
 		type: dragData.type,
 		outs: [],
-	};
+	});
 }
 
 function handleNodeDragStart(ev: DragEvent) {
@@ -86,8 +91,11 @@ function handleNodeDrag(ev: DragEvent) {
 	const canvasCBR = rootEl.value.getBoundingClientRect();
 	const x = ev.pageX - canvasCBR.x - nodeClickOffset.x;
 	const y = ev.pageY - canvasCBR.y - nodeClickOffset.y;
-	nodes.value[nodeId].x = Math.max(0, x);
-	nodes.value[nodeId].y = Math.max(0, y);
+
+	const node = ss.getComponentById(nodeId);
+
+	node.x = Math.max(0, x);
+	node.y = Math.max(0, y);
 	refreshArrows();
 }
 
@@ -99,12 +107,26 @@ function handleNodeOutSelect(nodeId, outId) {
 }
 
 function handleNodeClick(nodeId: string) {
-	if (!activeNodeOut) return;
+	if (!activeNodeOut) {
+		ssbm.setSelection(nodeId, `root:0,workflow1:0,${nodeId}:0`);
+		return;
+	}
 	if (activeNodeOut.fromNodeId == nodeId) return;
-	nodes.value[activeNodeOut.fromNodeId].outs.push({
-		toNodeId: nodeId,
-		outId: activeNodeOut.outId,
-	});
+
+	console.log("cat man", activeNodeOut);
+
+	const node = ss.getComponentById(activeNodeOut.fromNodeId);
+
+	node.outs = [
+		...node.outs,
+		{
+			toNodeId: nodeId,
+			outId: activeNodeOut.outId,
+		},
+	];
+
+	console.log(node.outs);
+
 	activeNodeOut = null;
 	refreshArrows();
 }
@@ -117,10 +139,12 @@ function refreshArrows() {
 	arrows.value = [];
 	const canvasCBR = rootEl.value.getBoundingClientRect();
 
-	Object.entries(nodes.value)
-		.filter(([nodeId, node]) => node.outs?.length > 0)
-		.forEach(([nodeId, node]) => {
-			const fromNodeId = nodeId;
+	const nodes = ss.getComponents("workflow1");
+
+	nodes
+		.filter((node) => node.outs?.length > 0)
+		.forEach((node) => {
+			const fromNodeId = node.id;
 			node.outs.forEach((out) => {
 				const fromEl = document.querySelector(
 					`[data-writer-id="${fromNodeId}"] [data-writer-socket-id="${out.outId}"]`,
diff --git a/src/ui/src/builder/workflows/WorkflowsNodeBox.vue b/src/ui/src/builder/workflows/WorkflowsNodeBox.vue
index 070d2eec7..fdda4352e 100644
--- a/src/ui/src/builder/workflows/WorkflowsNodeBox.vue
+++ b/src/ui/src/builder/workflows/WorkflowsNodeBox.vue
@@ -2,7 +2,12 @@
 	<div class="WorkflowsNodeBox">
 		<div class="title">{{ nodeDef.name }}</div>
 		<div class="main">
+			<BuilderFieldsText
+				:component-id="node.id"
+				field-key="functionName"
+			></BuilderFieldsText>
 			{{ nodeDef.description }}
+			{{ nodeDef.outs }}
 		</div>
 		<div class="outputs">
 			<div
@@ -23,11 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import { WorkflowsComponent } from "../../writerTypes";
+import { Component } from "../../writerTypes";
+import BuilderFieldsText from "../BuilderFieldsText.vue";
 import nodeTemplates from "./nodeTemplateDefs";
 
 const props = defineProps<{
-	node: WorkflowsComponent;
+	node: Component;
 }>();
 
 const nodeDef = nodeTemplates[props.node.type];
diff --git a/src/ui/src/builder/workflows/workflowsCore.ts b/src/ui/src/builder/workflows/workflowsCore.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 9331d454d..1e959119d 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -6,7 +6,6 @@ import {
 	ComponentMap,
 	InstancePath,
 	MailItem,
-	UIComponent,
 	UserFunction,
 } from "../writerTypes";
 import {
@@ -111,6 +110,13 @@ export function generateCore() {
 		const isFixApplied = auditAndFixComponents(initData.components);
 		if (!isFixApplied) return;
 		await sendComponentUpdate();
+
+		addComponent({
+			id: "workflow1",
+			type: "workflow",
+			parentId: "root",
+			content: {},
+		});
 	}
 
 	function getSessionTimestamp() {
diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index b9a476552..90bb35223 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -53,11 +53,17 @@ import CoreReuse from "../core_components/other/CoreReuse.vue";
 import CorePDF from "../core_components/embed/CorePDF.vue";
 import CoreIFrame from "../core_components/embed/CoreIFrame.vue";
 import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
+import CoreMapbox from "../core_components/embed/CoreMapbox.vue";
 // root
 import CorePage from "../core_components/root/CorePage.vue";
 import CoreRoot from "../core_components/root/CoreRoot.vue";
 
-import CoreMapbox from "../core_components/embed/CoreMapbox.vue";
+// workflows
+import CoreWorkflow from "../workflow_components/CoreWorkflow.vue";
+import CorePythonFunction from "../workflow_components/CorePythonFunction.vue";
+import CoreHTTPCall from "../workflow_components/CoreHTTPCall.vue";
+import CoreSetState from "../workflow_components/CoreSetState.vue";
+import CoreWriterCompletion from "../workflow_components/CoreWriterCompletion.vue";
 
 import { WriterComponentDefinition } from "../writerTypes";
 import { h } from "vue";
@@ -115,6 +121,11 @@ const templateMap = {
 	switchinput: CoreSwitchInput,
 	reuse: CoreReuse,
 	avatar: CoreAvatar,
+	pythonfunc: CorePythonFunction,
+	workflow: CoreWorkflow,
+	httpcall: CoreHTTPCall,
+	setstate: CoreSetState,
+	writercompletion: CoreWriterCompletion,
 };
 
 if (WRITER_LIVE_CCT === "yes") {
diff --git a/src/ui/src/core_components/root/CoreRoot.vue b/src/ui/src/core_components/root/CoreRoot.vue
index 3352fa06f..aca332913 100644
--- a/src/ui/src/core_components/root/CoreRoot.vue
+++ b/src/ui/src/core_components/root/CoreRoot.vue
@@ -48,7 +48,7 @@ export default {
 		name: "Root",
 		category: "Root",
 		description,
-		allowedChildrenTypes: ["page"],
+		allowedChildrenTypes: ["page", "workflow"],
 		fields: {
 			appName: {
 				name: "App name",
diff --git a/src/ui/src/workflow_components/CoreHTTPCall.vue b/src/ui/src/workflow_components/CoreHTTPCall.vue
new file mode 100644
index 000000000..0e81d842a
--- /dev/null
+++ b/src/ui/src/workflow_components/CoreHTTPCall.vue
@@ -0,0 +1,91 @@
+<template>
+	<WorkflowsNodeBox :component="component" class="CoreHTTPCall">
+		<div class="content">
+			<div class="method">
+				{{ fields.method.value?.toUpperCase() }}
+			</div>
+			<div class="url">
+				{{ fields.url.value }}
+			</div>
+		</div>
+	</WorkflowsNodeBox>
+</template>
+
+<script lang="ts">
+import { FieldType } from "../writerTypes";
+import { computed, inject } from "vue";
+
+export default {
+	writer: {
+		name: "HTTP call",
+		description: "Execute HTTP calls",
+		category: "Content",
+		allowedParentTypes: ["workflow"],
+		fields: {
+			url: {
+				name: "URL",
+				type: FieldType.Text,
+			},
+			method: {
+				name: "Method",
+				type: FieldType.Text,
+				options: {
+					get: "GET",
+					put: "PUT",
+					post: "POST",
+					delete: "DELETE",
+				},
+				default: "get",
+			},
+		},
+		outs: {
+			success: {
+				name: "Success",
+				description: "If the function doesn't raise an Exception.",
+				style: "success",
+			},
+			responseError: {
+				name: "Response Error",
+				description: "If the function raises an Exception.",
+				style: "error",
+			},
+			connectionError: {
+				name: "Connection Error",
+				description: "If the function raises an Exception.",
+				style: "error",
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+const fields = inject(injectionKeys.evaluatedFields);
+
+const component = computed(() => wf.getComponentById(componentId));
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreHTTPCall {
+}
+
+.content {
+	gap: 4px;
+}
+
+.method {
+	background-color: #b5eeee;
+	padding: 2px 4px 2px 4px;
+	border-radius: 4px;
+	display: inline;
+}
+
+.url {
+}
+</style>
diff --git a/src/ui/src/workflow_components/CorePythonFunction.vue b/src/ui/src/workflow_components/CorePythonFunction.vue
new file mode 100644
index 000000000..6fe2d1a41
--- /dev/null
+++ b/src/ui/src/workflow_components/CorePythonFunction.vue
@@ -0,0 +1,53 @@
+<template>
+	<WorkflowsNodeBox :component="component" class="CorePythonFunction">
+		I'm a Python function
+	</WorkflowsNodeBox>
+</template>
+
+<script lang="ts">
+import { FieldType } from "../writerTypes";
+import { computed, inject } from "vue";
+
+export default {
+	writer: {
+		name: "Python function",
+		description: "Run Python functions",
+		category: "Content",
+		allowedParentTypes: ["workflow"],
+		fields: {
+			functionName: {
+				name: "Function name",
+				type: FieldType.Object,
+			},
+		},
+		outs: {
+			success: {
+				name: "Success",
+				description: "If the function doesn't raise an Exception.",
+				style: "success",
+			},
+			exception: {
+				name: "Exception",
+				description: "If the function raises an Exception.",
+				style: "error",
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+
+const component = computed(() => wf.getComponentById(componentId));
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CorePythonFunction {
+}
+</style>
diff --git a/src/ui/src/workflow_components/CoreSetState.vue b/src/ui/src/workflow_components/CoreSetState.vue
new file mode 100644
index 000000000..a560b0dc5
--- /dev/null
+++ b/src/ui/src/workflow_components/CoreSetState.vue
@@ -0,0 +1,57 @@
+<template>
+	<WorkflowsNodeBox :component="component" class="CoreSetState">
+		I'm used to set state
+	</WorkflowsNodeBox>
+</template>
+
+<script lang="ts">
+import { FieldType } from "../writerTypes";
+import { computed, inject } from "vue";
+
+export default {
+	writer: {
+		name: "Set state",
+		description: "Set the value for a state element",
+		category: "Content",
+		allowedParentTypes: ["workflow"],
+		fields: {
+			element: {
+				name: "State element",
+				type: FieldType.Text,
+			},
+			value: {
+				name: "Value",
+				type: FieldType.Text,
+			},
+		},
+		outs: {
+			success: {
+				name: "Success",
+				description: "If the function doesn't raise an Exception.",
+				style: "success",
+			},
+			error: {
+				name: "Error",
+				description: "If the function raises an Exception.",
+				style: "error",
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+
+const component = computed(() => wf.getComponentById(componentId));
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreSetState {
+}
+</style>
diff --git a/src/ui/src/workflow_components/CoreWorkflow.vue b/src/ui/src/workflow_components/CoreWorkflow.vue
new file mode 100644
index 000000000..fd9422570
--- /dev/null
+++ b/src/ui/src/workflow_components/CoreWorkflow.vue
@@ -0,0 +1,260 @@
+<template>
+	<div
+		ref="rootEl"
+		class="CoreWorkflow"
+		@dragover="handleDragover"
+		@drop="handleDrop"
+		@drag="handleDrag"
+		@dragstart="handleDragstart"
+	>
+		<svg width="100%" height="100%">
+			<WorkflowsArrow
+				v-for="(arrow, arrowId) in arrows"
+				:key="arrowId"
+				:arrow="arrow"
+				@click="handleArrowClick"
+			></WorkflowsArrow>
+		</svg>
+		<template v-for="component in children" :key="component.id">
+			<component
+				:is="renderProxiedComponent(component.id)"
+				:data-writer-unselectable="isUnselectable"
+				:style="{
+					top: `${component.y - renderOffset.y}px`,
+					left: `${component.x - renderOffset.x}px`,
+				}"
+				@drag="(ev: DragEvent) => handleNodeDrag(ev, component.id)"
+				@dragstart="(ev: DragEvent) => handleNodeDragStart(ev)"
+				@click="(ev: MouseEvent) => handleNodeClick(ev, component.id)"
+				@out-select="
+					(outId: string) => handleNodeOutSelect(component.id, outId)
+				"
+			></component>
+		</template>
+	</div>
+</template>
+
+<script lang="ts">
+import { type Component, FieldType } from "../writerTypes";
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import WorkflowsNodeOuts from "./WorkflowsNodeOuts.vue";
+import WorkflowsArrow from "./WorkflowsArrow.vue";
+import { render } from "vue";
+
+const description =
+	"A container component representing a single page within the application.";
+
+export default {
+	writer: {
+		name: "Workflow",
+		category: "Root",
+		description,
+		allowedChildrenTypes: ["*"],
+		allowedParentTypes: ["root"],
+		fields: {
+			key: {
+				name: "Workflow key",
+				desc: "Unique identifier. It's needed to enable navigation to this Page.",
+				type: FieldType.IdKey,
+			},
+		},
+		previewField: "key",
+	},
+};
+</script>
+<script setup lang="ts">
+import { Ref, computed, inject, onMounted, ref } from "vue";
+import { useComponentActions } from "../builder/useComponentActions";
+import { useDragDropComponent } from "../builder/useDragDropComponent";
+import injectionKeys from "../injectionKeys";
+const renderProxiedComponent = inject(injectionKeys.renderProxiedComponent);
+
+const rootEl: Ref<HTMLElement | null> = ref(null);
+const fields = inject(injectionKeys.evaluatedFields);
+const wf = inject(injectionKeys.core);
+const wfbm = inject(injectionKeys.builderManager);
+const arrows = ref([]);
+const renderOffset = ref({ x: 0, y: 0 });
+let clickOffset = { x: 0, y: 0 };
+
+const workflowComponentId = inject(injectionKeys.componentId);
+
+const children = computed(() =>
+	wf.getComponents(workflowComponentId, { sortedByPosition: true }),
+);
+
+const { createAndInsertComponent } = useComponentActions(wf, wfbm);
+const { getComponentInfoFromDrag } = useDragDropComponent(wf);
+
+const activeNodeOut: Ref<{
+	fromComponentId: string;
+	outId: string;
+} | null> = ref(null);
+
+function refreshArrows() {
+	const a = [];
+	const canvasCBR = rootEl.value?.getBoundingClientRect();
+	if (!canvasCBR) return;
+	const nodes = wf.getComponents(workflowComponentId);
+
+	nodes
+		.filter((node) => node.outs?.length > 0)
+		.forEach((node) => {
+			const fromNodeId = node.id;
+			node.outs.forEach((out) => {
+				const fromEl = document.querySelector(
+					`[data-writer-id="${fromNodeId}"] [data-writer-socket-id="${out.outId}"]`,
+				);
+				const toEl = document.querySelector(
+					`[data-writer-id="${out.toNodeId}"]`,
+				);
+				if (!fromEl || !toEl) return;
+				const fromCBR = fromEl.getBoundingClientRect();
+				const toCBR = toEl.getBoundingClientRect();
+				a.push({
+					x1: fromCBR.x - canvasCBR.x + fromCBR.width / 2,
+					y1: fromCBR.y - canvasCBR.y + fromCBR.height / 2,
+					x2: toCBR.x - canvasCBR.x,
+					y2: toCBR.y - canvasCBR.y + toCBR.height / 2,
+					color: getComputedStyle(fromEl).backgroundColor,
+				});
+			});
+		});
+	arrows.value = a;
+}
+
+const isUnselectable = computed(() => {
+	if (activeNodeOut.value === null) return null;
+	return true;
+});
+
+function handleNodeOutSelect(componentId: Component["id"], outId: string) {
+	activeNodeOut.value = {
+		fromComponentId: componentId,
+		outId,
+	};
+}
+
+function handleDragstart(ev: DragEvent) {
+	var img = new Image();
+	img.src =
+		"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+	ev.dataTransfer.setDragImage(img, 0, 0);
+	clickOffset = getAdjustedCoordinates(ev);
+}
+
+function handleDrag(ev: DragEvent) {
+	ev.preventDefault();
+	const { x, y } = getAdjustedCoordinates(ev);
+	renderOffset.value.x = Math.max(
+		0,
+		renderOffset.value.x - (x - clickOffset.x),
+	);
+	renderOffset.value.y = Math.max(
+		0,
+		renderOffset.value.y - (y - clickOffset.y),
+	);
+	refreshArrows();
+}
+
+function handleDragover(ev: DragEvent) {
+	ev.preventDefault();
+	ev.stopPropagation();
+}
+
+function getAdjustedCoordinates(ev: DragEvent) {
+	const canvasCBR = rootEl.value.getBoundingClientRect();
+	const x = ev.pageX - canvasCBR.x + renderOffset.value.x;
+	const y = ev.pageY - canvasCBR.y + renderOffset.value.y;
+	return { x, y };
+}
+
+function handleDrop(ev: DragEvent) {
+	ev.preventDefault();
+	ev.stopPropagation();
+	const dropInfo = getComponentInfoFromDrag(ev);
+
+	if (!dropInfo) return;
+	const { draggedType, draggedId } = dropInfo;
+	if (draggedId) return;
+
+	const { x, y } = getAdjustedCoordinates(ev);
+
+	createNode(draggedType, x, y);
+}
+
+function handleArrowClick() {}
+
+function handleNodeDragStart(ev: DragEvent) {
+	ev.stopPropagation();
+	var img = new Image();
+	img.src =
+		"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+	ev.dataTransfer.setDragImage(img, 0, 0);
+	clickOffset = {
+		x: ev.offsetX,
+		y: ev.offsetY,
+	};
+}
+
+function handleNodeDrag(ev: DragEvent, componentId: Component["id"]) {
+	ev.preventDefault();
+	ev.stopPropagation();
+	const { x, y } = getAdjustedCoordinates(ev);
+	const component = wf.getComponentById(componentId);
+	component.x = x - clickOffset.x;
+	component.y = y - clickOffset.y;
+	refreshArrows();
+}
+
+function handleNodeClick(ev: MouseEvent, componentId: Component["id"]) {
+	if (!activeNodeOut.value) return;
+	if (activeNodeOut.value.fromComponentId == componentId) return;
+
+	const component = wf.getComponentById(activeNodeOut.value.fromComponentId);
+
+	component.outs = [
+		...(component.outs ?? []),
+		{
+			toNodeId: componentId,
+			outId: activeNodeOut.value.outId,
+		},
+	];
+
+	activeNodeOut.value = null;
+	refreshArrows();
+}
+
+function createNode(type: string, x: number, y: number) {
+	const componentId = createAndInsertComponent(type, workflowComponentId);
+	const component = wf.getComponentById(componentId);
+	component.x = x;
+	component.y = y;
+}
+
+onMounted(() => {
+	refreshArrows();
+});
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreWorkflow {
+	display: flex;
+	width: 100%;
+	min-height: 100%;
+	background: var(--builderSubtleSeparatorColor);
+	flex: 1 0 auto;
+	flex-direction: row;
+	align-items: stretch;
+}
+
+.component.CoreWorkflow.selected {
+	background: var(--builderSubtleSeparatorColor);
+}
+
+.nodeWrapper {
+	position: absolute;
+}
+</style>
diff --git a/src/ui/src/workflow_components/CoreWriterCompletion.vue b/src/ui/src/workflow_components/CoreWriterCompletion.vue
new file mode 100644
index 000000000..72d3b708e
--- /dev/null
+++ b/src/ui/src/workflow_components/CoreWriterCompletion.vue
@@ -0,0 +1,55 @@
+<template>
+	<WorkflowsNodeBox :component="component" class="CoreWriterCompletion">
+		I'm a Writer completion
+	</WorkflowsNodeBox>
+</template>
+
+<script lang="ts">
+import { FieldControl, FieldType } from "../writerTypes";
+import { computed, inject } from "vue";
+
+export default {
+	writer: {
+		name: "Writer Completion",
+		description: "Execute Writer completions",
+		category: "Content",
+		allowedParentTypes: ["workflow"],
+		fields: {
+			text: {
+				name: "Text",
+				type: FieldType.Text,
+				control: FieldControl.Textarea,
+				desc: "The text to complete.",
+			},
+		},
+		outs: {
+			success: {
+				name: "Success",
+				description: "If the function doesn't raise an Exception.",
+				style: "success",
+			},
+			error: {
+				name: "Error",
+				description: "If the function raises an Exception.",
+				style: "error",
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+
+const component = computed(() => wf.getComponentById(componentId));
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreWriterCompletion {
+}
+</style>
diff --git a/src/ui/src/workflow_components/WorkflowsArrow.vue b/src/ui/src/workflow_components/WorkflowsArrow.vue
new file mode 100644
index 000000000..cca00c46e
--- /dev/null
+++ b/src/ui/src/workflow_components/WorkflowsArrow.vue
@@ -0,0 +1,87 @@
+<template>
+	<g @click="handleClick">
+		<path :d="pathD" :style="{ stroke: props.arrow.color }"></path>
+		<path
+			:d="pathD"
+			:style="{
+				stroke: props.arrow.color,
+				strokeWidth: 12,
+				opacity: isSelected ? `0.2` : `0`,
+			}"
+		></path>
+	</g>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const props = defineProps<{
+	arrow: {
+		x1: number;
+		y1: number;
+		x2: number;
+		y2: number;
+		color: string;
+	};
+}>();
+
+const isSelected = ref(false);
+
+function handleClick() {
+	isSelected.value = true;
+}
+
+const pathD = computed(() => {
+	const xDif = props.arrow.x2 - props.arrow.x1;
+	const yDif = props.arrow.y2 - props.arrow.y1;
+
+	const protrusionLength = Math.max(
+		Math.min(
+			Math.sqrt(xDif * xDif + yDif * yDif),
+			0.8 * Math.abs(xDif),
+			50,
+		),
+		0,
+	);
+
+	const points = [
+		{ x: props.arrow.x1, y: props.arrow.y1 },
+		{ x: props.arrow.x1 + protrusionLength, y: props.arrow.y1 },
+		{
+			x: props.arrow.x1 + protrusionLength,
+			y: props.arrow.y1 + yDif * 0.25,
+		},
+		{ x: props.arrow.x1 + xDif * 0.5, y: props.arrow.y1 + yDif * 0.5 },
+		{
+			x: props.arrow.x2 - protrusionLength,
+			y: props.arrow.y1 + yDif * 0.75,
+		},
+		{ x: props.arrow.x2 - protrusionLength, y: props.arrow.y2 },
+		{ x: props.arrow.x2, y: props.arrow.y2 },
+	];
+
+	let s: string;
+
+	if (xDif > 50) {
+		s = `M ${points[0].x} ${points[0].y}`;
+		s += `C ${points[3].x} ${points[0].y}, ${points[3].x} ${points[6].y}, ${points[6].x} ${points[6].y}`;
+	} else {
+		s = `M ${points[0].x} ${points[0].y}`;
+		s += `C ${points[1].x} ${points[1].y}, ${points[2].x} ${points[2].y}, ${points[3].x} ${points[3].y}`;
+		s += `C ${points[4].x} ${points[4].y}, ${points[5].x} ${points[5].y}, ${points[6].x} ${points[6].y}`;
+	}
+
+	return s;
+});
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.WorkflowsArrow {
+}
+
+path {
+	fill: none;
+}
+</style>
diff --git a/src/ui/src/workflow_components/WorkflowsNodeBox.vue b/src/ui/src/workflow_components/WorkflowsNodeBox.vue
new file mode 100644
index 000000000..87b267b9f
--- /dev/null
+++ b/src/ui/src/workflow_components/WorkflowsNodeBox.vue
@@ -0,0 +1,112 @@
+<template>
+	<div class="WorkflowsNodeBox">
+		<div class="title">{{ def.name }}</div>
+		<div class="main">
+			<slot></slot>
+		</div>
+		<div class="outputs">
+			{{ component.outs }}
+			<div v-for="(out, outId) in def.outs" :key="outId" class="output">
+				{{ out.name }}
+				<div
+					class="ball"
+					:class="out.style"
+					:data-writer-socket-id="outId"
+					:data-writer-unselectable="true"
+					@click.capture="
+						(ev: DragEvent) => handleOutClick(ev, outId)
+					"
+				></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { Component } from "../writerTypes";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+
+const props = defineProps<{
+	component: Component;
+}>();
+
+const def = computed(() => {
+	return wf?.getComponentDefinition(props.component.type);
+});
+
+const emit = defineEmits(["outSelect"]);
+
+function handleOutClick(ev: DragEvent, outId: string) {
+	ev.stopPropagation();
+	emit("outSelect", outId);
+}
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.WorkflowsNodeBox {
+	background: var(--builderBackgroundColor);
+	border-radius: 12px;
+	width: 240px;
+	position: absolute;
+	box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
+}
+
+.title {
+	background: #ede2ff;
+	padding: 12px 16px 12px 16px;
+	border-radius: 12px 12px 0 0;
+	border-top: 1px solid var(--builderSeparatorColor);
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-right: 1px solid var(--builderSeparatorColor);
+}
+
+.main {
+	font-size: 12.5px;
+	padding: 12px 16px 12px 16px;
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-right: 1px solid var(--builderSeparatorColor);
+}
+
+.outputs {
+	border: 1px solid var(--builderSeparatorColor);
+	border-radius: 0 0 12px 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px 0 12px 16px;
+}
+
+.output {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: right;
+	font-size: 10px;
+	font-style: normal;
+	font-weight: 500;
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+}
+
+.output .ball {
+	margin-right: -8px;
+	height: 16px;
+	width: 16px;
+	border-radius: 50%;
+	border: 1px solid var(--builderBackgroundColor);
+	cursor: pointer;
+}
+
+.output .ball.success {
+	background: var(--builderSuccessColor);
+}
+
+.output .ball.error {
+	background: var(--builderErrorColor);
+}
+</style>
diff --git a/src/ui/src/workflow_components/WorkflowsNodeOuts.vue b/src/ui/src/workflow_components/WorkflowsNodeOuts.vue
new file mode 100644
index 000000000..525cf8d53
--- /dev/null
+++ b/src/ui/src/workflow_components/WorkflowsNodeOuts.vue
@@ -0,0 +1,97 @@
+<template>
+	<div class="WorkflowsNodeOuts">
+		<div class="outputs">
+			<div v-for="(out, outId) in def.outs" :key="outId" class="output">
+				{{ out.name }}
+				<div
+					class="ball"
+					:class="out.style"
+					:data-writer-socket-id="outId"
+					@click="$emit('outSelect', outId)"
+				></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { Component } from "../writerTypes";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+
+const props = defineProps<{
+	component: Component;
+}>();
+
+const def = computed(() => {
+	return wf?.getComponentDefinition(props.component.type);
+});
+
+defineEmits(["outSelect"]);
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.WorkflowsNodeOuts {
+	background: var(--builderBackgroundColor);
+	border-radius: 12px;
+	width: 240px;
+	box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
+}
+
+.title {
+	background: #ede2ff;
+	padding: 16px;
+	border-radius: 12px 12px 0 0;
+	border-top: 1px solid var(--builderSeparatorColor);
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-right: 1px solid var(--builderSeparatorColor);
+}
+
+.main {
+	padding: 16px;
+	border-left: 1px solid var(--builderSeparatorColor);
+	border-right: 1px solid var(--builderSeparatorColor);
+}
+
+.outputs {
+	border: 1px solid var(--builderSeparatorColor);
+	border-radius: 0 0 12px 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px 0 12px 16px;
+}
+
+.output {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: right;
+	font-size: 10px;
+	font-style: normal;
+	font-weight: 500;
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+}
+
+.output .ball {
+	margin-right: -8px;
+	height: 16px;
+	width: 16px;
+	border-radius: 50%;
+	border: 1px solid var(--builderBackgroundColor);
+	cursor: pointer;
+}
+
+.output .ball.success {
+	background: var(--builderSuccessColor);
+}
+
+.output .ball.error {
+	background: var(--builderErrorColor);
+}
+</style>
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index e9c12df3b..60bc8afe3 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -25,14 +25,10 @@ export type Component = {
 	visible?: boolean | string;
 	x?: number;
 	y?: number;
-	outs?: Record<
-		string,
-		{
-			name: string;
-			description: string;
-			style: string;
-		}
-	>;
+	outs?: {
+		outId: string;
+		toNodeId: string;
+	}[];
 };
 
 /**
@@ -135,14 +131,3 @@ export type ComponentMap = Record<Component["id"], Component>;
 export type MailItem = { type: string; payload: Record<string, string> };
 
 export type UserFunction = { name: string; args: string[] };
-
-export type WorkflowsNode = {
-	type: string;
-	content: Record<string, string>;
-	x: number;
-	y: number;
-	outs: {
-		outId: string;
-		toNodeId: string;
-	}[];
-};
diff --git a/src/writer/core.py b/src/writer/core.py
index 8cb2cf442..0d6e5e63a 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1092,12 +1092,12 @@ def __init__(self, session_state: WriterState, session_component_tree: core_ui.C
         self.wf = session_state
         self.ct = session_component_tree
 
-    def evaluate_field(self, instance_path: InstancePath, field_key: str, as_json=False, default_field_value="") -> Any:
+    def evaluate_field(self, instance_path: InstancePath, field_key: str, as_json=False, default_field_value="", base_context={}) -> Any:
         def replacer(matched):
             if matched.string[0] == "\\":  # Escaped @, don't evaluate
                 return matched.string
             expr = matched.group(1).strip()
-            expr_value = self.evaluate_expression(expr, instance_path)
+            expr_value = self.evaluate_expression(expr, instance_path, base_context)
 
             serialised_value = None
             try:
@@ -1123,8 +1123,8 @@ def replacer(matched):
         else:
             raise ValueError(f"Couldn't acquire a component by ID '{component_id}'")
 
-    def get_context_data(self, instance_path: InstancePath) -> Dict[str, Any]:
-        context: Dict[str, Any] = {}
+    def get_context_data(self, instance_path: InstancePath, base_context={}) -> Dict[str, Any]:
+        context: Dict[str, Any] = base_context
         for i in range(len(instance_path)):
             path_item = instance_path[i]
             component_id = path_item["componentId"]
@@ -1211,10 +1211,10 @@ def parse_expression(self, expr: str, instance_path: Optional[InstancePath] = No
         return accessors
 
 
-    def evaluate_expression(self, expr: str, instance_path: Optional[InstancePath]) -> Any:
+    def evaluate_expression(self, expr: str, instance_path: Optional[InstancePath] = None, base_context = {}) -> Any:
         context_data = None
         if instance_path:
-            context_data = self.get_context_data(instance_path)
+            context_data = self.get_context_data(instance_path, base_context)
         context_ref: Any = context_data
         state_ref: Any = self.wf.user_state.state
         accessors: List[str] = self.parse_expression(expr, instance_path)
diff --git a/src/writer/core_ui.py b/src/writer/core_ui.py
index d5fbd94d0..a4ca8ee21 100644
--- a/src/writer/core_ui.py
+++ b/src/writer/core_ui.py
@@ -45,6 +45,9 @@ class Component(BaseModel):
     handlers: Optional[Dict[str, str]] = None
     visible: Optional[Union[bool, str]] = None
     binding: Optional[Dict] = None
+    outs: Optional[Any] = None
+    x: Optional[int] = None
+    y: Optional[int] = None
 
     def to_dict(self) -> Dict:
         """

From b3a864818112de009507c79e40268cbc332accb5 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 29 Jul 2024 08:47:50 +0000
Subject: [PATCH 3/5] feat: Workflows

---
 src/ui/src/core/templateMap.ts                |  2 +
 .../workflow_components/CoreTwitterPost.vue   | 85 +++++++++++++++++++
 .../src/workflow_components/CoreWorkflow.vue  | 34 +++++++-
 .../CoreWriterCompletion.vue                  | 14 +++
 .../workflow_components/WorkflowsArrow.vue    | 11 +--
 .../workflow_components/WorkflowsNodeBox.vue  |  1 -
 6 files changed, 133 insertions(+), 14 deletions(-)
 create mode 100644 src/ui/src/workflow_components/CoreTwitterPost.vue

diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index 90bb35223..0c27530a1 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -64,6 +64,7 @@ import CorePythonFunction from "../workflow_components/CorePythonFunction.vue";
 import CoreHTTPCall from "../workflow_components/CoreHTTPCall.vue";
 import CoreSetState from "../workflow_components/CoreSetState.vue";
 import CoreWriterCompletion from "../workflow_components/CoreWriterCompletion.vue";
+import CoreTwitterPost from "../workflow_components/CoreTwitterPost.vue";
 
 import { WriterComponentDefinition } from "../writerTypes";
 import { h } from "vue";
@@ -126,6 +127,7 @@ const templateMap = {
 	httpcall: CoreHTTPCall,
 	setstate: CoreSetState,
 	writercompletion: CoreWriterCompletion,
+	twitterpost: CoreTwitterPost,
 };
 
 if (WRITER_LIVE_CCT === "yes") {
diff --git a/src/ui/src/workflow_components/CoreTwitterPost.vue b/src/ui/src/workflow_components/CoreTwitterPost.vue
new file mode 100644
index 000000000..936075e2d
--- /dev/null
+++ b/src/ui/src/workflow_components/CoreTwitterPost.vue
@@ -0,0 +1,85 @@
+<template>
+	<WorkflowsNodeBox :component="component" class="CoreTwitterPost">
+		<div class="content"></div>
+	</WorkflowsNodeBox>
+</template>
+
+<script lang="ts">
+import { FieldControl, FieldType } from "../writerTypes";
+import { computed, inject } from "vue";
+
+export default {
+	writer: {
+		name: "Post to Twitter (X)",
+		description: "Enables you to post to Twitter.",
+		category: "Content",
+		allowedParentTypes: ["workflow"],
+		fields: {
+			text: {
+				name: "Text",
+				type: FieldType.Text,
+				control: FieldControl.Textarea,
+			},
+			accessToken: {
+				name: "Access Token",
+				type: FieldType.Text,
+			},
+			accessTokenSecret: {
+				name: "Access Token Secret",
+				type: FieldType.Text,
+			},
+			apiKey: {
+				name: "API key",
+				type: FieldType.Text,
+			},
+			apiKeySecret: {
+				name: "API key secret",
+				type: FieldType.Text,
+			},
+		},
+		outs: {
+			success: {
+				name: "Success",
+				description: "If the function doesn't raise an Exception.",
+				style: "success",
+			},
+			error: {
+				name: "Error",
+				description: "If the operation fails.",
+				style: "error",
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+const fields = inject(injectionKeys.evaluatedFields);
+
+const component = computed(() => wf.getComponentById(componentId));
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreTwitterPost {
+}
+
+.content {
+	gap: 4px;
+}
+
+.method {
+	background-color: #b5eeee;
+	padding: 2px 4px 2px 4px;
+	border-radius: 4px;
+	display: inline;
+}
+
+.url {
+}
+</style>
diff --git a/src/ui/src/workflow_components/CoreWorkflow.vue b/src/ui/src/workflow_components/CoreWorkflow.vue
index fd9422570..cb3d191bb 100644
--- a/src/ui/src/workflow_components/CoreWorkflow.vue
+++ b/src/ui/src/workflow_components/CoreWorkflow.vue
@@ -25,6 +25,7 @@
 				}"
 				@drag="(ev: DragEvent) => handleNodeDrag(ev, component.id)"
 				@dragstart="(ev: DragEvent) => handleNodeDragStart(ev)"
+				@dragend="handleNodeDragend"
 				@click="(ev: MouseEvent) => handleNodeClick(ev, component.id)"
 				@out-select="
 					(outId: string) => handleNodeOutSelect(component.id, outId)
@@ -40,6 +41,7 @@ import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
 import WorkflowsNodeOuts from "./WorkflowsNodeOuts.vue";
 import WorkflowsArrow from "./WorkflowsArrow.vue";
 import { render } from "vue";
+import { watch } from "vue";
 
 const description =
 	"A container component representing a single page within the application.";
@@ -146,6 +148,7 @@ function handleDragstart(ev: DragEvent) {
 function handleDrag(ev: DragEvent) {
 	ev.preventDefault();
 	const { x, y } = getAdjustedCoordinates(ev);
+	if (x < 0 || y < 0) return;
 	renderOffset.value.x = Math.max(
 		0,
 		renderOffset.value.x - (x - clickOffset.x),
@@ -179,6 +182,7 @@ function handleDrop(ev: DragEvent) {
 	if (draggedId) return;
 
 	const { x, y } = getAdjustedCoordinates(ev);
+	if (x < 0 || y < 0) return;
 
 	createNode(draggedType, x, y);
 }
@@ -201,13 +205,20 @@ function handleNodeDrag(ev: DragEvent, componentId: Component["id"]) {
 	ev.preventDefault();
 	ev.stopPropagation();
 	const { x, y } = getAdjustedCoordinates(ev);
+	if (x < 0 || y < 0) return;
+
 	const component = wf.getComponentById(componentId);
 	component.x = x - clickOffset.x;
 	component.y = y - clickOffset.y;
 	refreshArrows();
 }
 
+function handleNodeDragend(ev: DragEvent) {
+	ev.preventDefault();
+}
+
 function handleNodeClick(ev: MouseEvent, componentId: Component["id"]) {
+	console.log("clicko");
 	if (!activeNodeOut.value) return;
 	if (activeNodeOut.value.fromComponentId == componentId) return;
 
@@ -232,6 +243,23 @@ function createNode(type: string, x: number, y: number) {
 	component.y = y;
 }
 
+watch(children, async (postChildren, preChildren) => {
+	// Remove references when a node is deleted
+
+	const preIds = preChildren.map((c) => c.id);
+	const postIds = postChildren.map((c) => c.id);
+	const removedIds = preIds.filter((cId) => !postIds.includes(cId));
+	console.log(removedIds);
+	removedIds.forEach((removedId) => {
+		postChildren.forEach((c) => {
+			if (!c.outs || c.outs.length == 0) return;
+			c.outs = c.outs.filter((out) => out.toNodeId !== removedId);
+		});
+	});
+	refreshArrows();
+	await wf.sendComponentUpdate();
+});
+
 onMounted(() => {
 	refreshArrows();
 });
@@ -248,13 +276,11 @@ onMounted(() => {
 	flex: 1 0 auto;
 	flex-direction: row;
 	align-items: stretch;
+	position: relative;
+	overflow: hidden;
 }
 
 .component.CoreWorkflow.selected {
 	background: var(--builderSubtleSeparatorColor);
 }
-
-.nodeWrapper {
-	position: absolute;
-}
 </style>
diff --git a/src/ui/src/workflow_components/CoreWriterCompletion.vue b/src/ui/src/workflow_components/CoreWriterCompletion.vue
index 72d3b708e..a1070982b 100644
--- a/src/ui/src/workflow_components/CoreWriterCompletion.vue
+++ b/src/ui/src/workflow_components/CoreWriterCompletion.vue
@@ -21,6 +21,20 @@ export default {
 				control: FieldControl.Textarea,
 				desc: "The text to complete.",
 			},
+			modelId: {
+				name: "Model",
+				type: FieldType.Text,
+				options: {
+					"palmyra-x-003-instruct": "palmyra-x-003-instruct",
+					"palmyra-x-002-instruct": "palmyra-x-002-instruct",
+					"palmyra-x-32k-instruct": "palmyra-x-32k-instruct",
+					"palmyra-x-002-32k": "palmyra-x-002-32k",
+					"palmyra-med-32k": "palmyra-med-32k",
+					"palmyra-med": "palmyra-med",
+					"palmyra-fin-32k": "palmyra-fin-32k",
+				},
+				init: "palmyra-x-002-instruct",
+			},
 		},
 		outs: {
 			success: {
diff --git a/src/ui/src/workflow_components/WorkflowsArrow.vue b/src/ui/src/workflow_components/WorkflowsArrow.vue
index cca00c46e..cee3637ba 100644
--- a/src/ui/src/workflow_components/WorkflowsArrow.vue
+++ b/src/ui/src/workflow_components/WorkflowsArrow.vue
@@ -35,14 +35,7 @@ const pathD = computed(() => {
 	const xDif = props.arrow.x2 - props.arrow.x1;
 	const yDif = props.arrow.y2 - props.arrow.y1;
 
-	const protrusionLength = Math.max(
-		Math.min(
-			Math.sqrt(xDif * xDif + yDif * yDif),
-			0.8 * Math.abs(xDif),
-			50,
-		),
-		0,
-	);
+	const protrusionLength = 30;
 
 	const points = [
 		{ x: props.arrow.x1, y: props.arrow.y1 },
@@ -62,7 +55,7 @@ const pathD = computed(() => {
 
 	let s: string;
 
-	if (xDif > 50) {
+	if (xDif > protrusionLength) {
 		s = `M ${points[0].x} ${points[0].y}`;
 		s += `C ${points[3].x} ${points[0].y}, ${points[3].x} ${points[6].y}, ${points[6].x} ${points[6].y}`;
 	} else {
diff --git a/src/ui/src/workflow_components/WorkflowsNodeBox.vue b/src/ui/src/workflow_components/WorkflowsNodeBox.vue
index 87b267b9f..385016aad 100644
--- a/src/ui/src/workflow_components/WorkflowsNodeBox.vue
+++ b/src/ui/src/workflow_components/WorkflowsNodeBox.vue
@@ -5,7 +5,6 @@
 			<slot></slot>
 		</div>
 		<div class="outputs">
-			{{ component.outs }}
 			<div v-for="(out, outId) in def.outs" :key="outId" class="output">
 				{{ out.name }}
 				<div

From 808d2f53ff1333f1004c59d9fb3ddf8a1593e7f0 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 29 Jul 2024 15:19:23 +0000
Subject: [PATCH 4/5] feat: Workflows

---
 src/ui/src/core/templateMap.ts                |  4 ++
 .../workflow_components/CoreCreateFile.vue    | 61 +++++++++++++++++
 .../workflow_components/CoreWriterKGAdd.vue   | 68 +++++++++++++++++++
 3 files changed, 133 insertions(+)
 create mode 100644 src/ui/src/workflow_components/CoreCreateFile.vue
 create mode 100644 src/ui/src/workflow_components/CoreWriterKGAdd.vue

diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index 0c27530a1..8f0f9ed8c 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -65,6 +65,8 @@ import CoreHTTPCall from "../workflow_components/CoreHTTPCall.vue";
 import CoreSetState from "../workflow_components/CoreSetState.vue";
 import CoreWriterCompletion from "../workflow_components/CoreWriterCompletion.vue";
 import CoreTwitterPost from "../workflow_components/CoreTwitterPost.vue";
+import CoreCreateFile from "../workflow_components/CoreCreateFile.vue";
+import CoreWriterKGAdd from "../workflow_components/CoreWriterKGAdd.vue";
 
 import { WriterComponentDefinition } from "../writerTypes";
 import { h } from "vue";
@@ -128,6 +130,8 @@ const templateMap = {
 	setstate: CoreSetState,
 	writercompletion: CoreWriterCompletion,
 	twitterpost: CoreTwitterPost,
+	createfile: CoreCreateFile,
+	writerkgadd: CoreWriterKGAdd,
 };
 
 if (WRITER_LIVE_CCT === "yes") {
diff --git a/src/ui/src/workflow_components/CoreCreateFile.vue b/src/ui/src/workflow_components/CoreCreateFile.vue
new file mode 100644
index 000000000..a225e9f36
--- /dev/null
+++ b/src/ui/src/workflow_components/CoreCreateFile.vue
@@ -0,0 +1,61 @@
+<template>
+	<WorkflowsNodeBox :component="component" class="CoreCreateFile">
+		I'm used to create files from content
+	</WorkflowsNodeBox>
+</template>
+
+<script lang="ts">
+import { FieldType } from "../writerTypes";
+import { computed, inject } from "vue";
+
+export default {
+	writer: {
+		name: "Create file",
+		description: "Create a file from content",
+		category: "Content",
+		allowedParentTypes: ["workflow"],
+		fields: {
+			fileName: {
+				name: "File name",
+				type: FieldType.Text,
+			},
+			content: {
+				name: "Content",
+				type: FieldType.Text,
+			},
+			fileType: {
+				name: "File type",
+				type: FieldType.Text,
+			},
+		},
+		outs: {
+			success: {
+				name: "Success",
+				description: "If the function doesn't raise an Exception.",
+				style: "success",
+			},
+			error: {
+				name: "Error",
+				description: "If the function raises an Exception.",
+				style: "error",
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+
+const component = computed(() => wf.getComponentById(componentId));
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreCreateFile {
+}
+</style>
diff --git a/src/ui/src/workflow_components/CoreWriterKGAdd.vue b/src/ui/src/workflow_components/CoreWriterKGAdd.vue
new file mode 100644
index 000000000..60eb8acdc
--- /dev/null
+++ b/src/ui/src/workflow_components/CoreWriterKGAdd.vue
@@ -0,0 +1,68 @@
+<template>
+	<WorkflowsNodeBox :component="component" class="CoreWriterKGAdd">
+		I'm a Writer KG node
+	</WorkflowsNodeBox>
+</template>
+
+<script lang="ts">
+import { FieldControl, FieldType } from "../writerTypes";
+import { computed, inject } from "vue";
+
+export default {
+	writer: {
+		name: "Add File to Writer KG",
+		description: "Add file to an existing Writer Knowledge Graph",
+		category: "Content",
+		allowedParentTypes: ["workflow"],
+		fields: {
+			text: {
+				name: "Text",
+				type: FieldType.Text,
+				control: FieldControl.Textarea,
+				desc: "The text to complete.",
+			},
+			modelId: {
+				name: "Model",
+				type: FieldType.Text,
+				options: {
+					"palmyra-x-003-instruct": "palmyra-x-003-instruct",
+					"palmyra-x-002-instruct": "palmyra-x-002-instruct",
+					"palmyra-x-32k-instruct": "palmyra-x-32k-instruct",
+					"palmyra-x-002-32k": "palmyra-x-002-32k",
+					"palmyra-med-32k": "palmyra-med-32k",
+					"palmyra-med": "palmyra-med",
+					"palmyra-fin-32k": "palmyra-fin-32k",
+				},
+				init: "palmyra-x-002-instruct",
+			},
+		},
+		outs: {
+			success: {
+				name: "Success",
+				description: "If the function doesn't raise an Exception.",
+				style: "success",
+			},
+			error: {
+				name: "Error",
+				description: "If the function raises an Exception.",
+				style: "error",
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+
+const component = computed(() => wf.getComponentById(componentId));
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreWriterKGAdd
+</style>

From 650b63b6de12d96a449873bb4bb1d03166a8e5ce Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Thu, 15 Aug 2024 17:49:10 +0000
Subject: [PATCH 5/5] feat: Workflows

---
 src/ui/src/core/templateMap.ts                |  2 +
 .../workflow_components/CoreCreateFile.vue    | 10 ++-
 .../src/workflow_components/CoreHTTPCall.vue  | 21 +++--
 .../CorePythonFunction.vue                    |  6 +-
 .../src/workflow_components/CoreSetState.vue  | 18 +++-
 .../workflow_components/CoreTwitterPost.vue   |  6 +-
 .../CoreWriterCompletion.vue                  | 17 +++-
 .../workflow_components/CoreWriterKGAdd.vue   | 38 +++++----
 .../src/workflow_components/CoreWriterSQL.vue | 82 +++++++++++++++++++
 .../workflow_components/WorkflowsNodeBox.vue  | 48 +++++++++--
 src/writer/core.py                            | 42 ++++++----
 11 files changed, 234 insertions(+), 56 deletions(-)
 create mode 100644 src/ui/src/workflow_components/CoreWriterSQL.vue

diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index b30f28e51..3a896b5ac 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -69,6 +69,7 @@ import CoreWriterCompletion from "../workflow_components/CoreWriterCompletion.vu
 import CoreTwitterPost from "../workflow_components/CoreTwitterPost.vue";
 import CoreCreateFile from "../workflow_components/CoreCreateFile.vue";
 import CoreWriterKGAdd from "../workflow_components/CoreWriterKGAdd.vue";
+import CoreWriterSQL from "../workflow_components/CoreWriterSQL.vue";
 
 import { WriterComponentDefinition } from "../writerTypes";
 import { h } from "vue";
@@ -136,6 +137,7 @@ const templateMap = {
 	createfile: CoreCreateFile,
 	writerkgadd: CoreWriterKGAdd,
 	jsonviewer: CoreJsonViewer,
+	writersql: CoreWriterSQL,
 };
 
 if (WRITER_LIVE_CCT === "yes") {
diff --git a/src/ui/src/workflow_components/CoreCreateFile.vue b/src/ui/src/workflow_components/CoreCreateFile.vue
index a225e9f36..6ab1da4bb 100644
--- a/src/ui/src/workflow_components/CoreCreateFile.vue
+++ b/src/ui/src/workflow_components/CoreCreateFile.vue
@@ -1,5 +1,9 @@
 <template>
-	<WorkflowsNodeBox :component="component" class="CoreCreateFile">
+	<WorkflowsNodeBox
+		:component="component"
+		variant="tool"
+		class="CoreCreateFile"
+	>
 		I'm used to create files from content
 	</WorkflowsNodeBox>
 </template>
@@ -19,8 +23,8 @@ export default {
 				name: "File name",
 				type: FieldType.Text,
 			},
-			content: {
-				name: "Content",
+			data: {
+				name: "Data",
 				type: FieldType.Text,
 			},
 			fileType: {
diff --git a/src/ui/src/workflow_components/CoreHTTPCall.vue b/src/ui/src/workflow_components/CoreHTTPCall.vue
index 0e81d842a..b36fe128d 100644
--- a/src/ui/src/workflow_components/CoreHTTPCall.vue
+++ b/src/ui/src/workflow_components/CoreHTTPCall.vue
@@ -1,12 +1,16 @@
 <template>
-	<WorkflowsNodeBox :component="component" class="CoreHTTPCall">
+	<WorkflowsNodeBox
+		:component="component"
+		variant="tool"
+		class="CoreHTTPCall"
+	>
 		<div class="content">
-			<div class="method">
+			<span class="method">
 				{{ fields.method.value?.toUpperCase() }}
-			</div>
-			<div class="url">
+			</span>
+			<span class="url">
 				{{ fields.url.value }}
-			</div>
+			</span>
 		</div>
 	</WorkflowsNodeBox>
 </template>
@@ -76,14 +80,15 @@ const component = computed(() => wf.getComponentById(componentId));
 }
 
 .content {
-	gap: 4px;
+	display: block;
 }
 
 .method {
-	background-color: #b5eeee;
+	background-color: #f0f0f0;
 	padding: 2px 4px 2px 4px;
+	margin: 2px 0 2px 0;
 	border-radius: 4px;
-	display: inline;
+	display: inline-block;
 }
 
 .url {
diff --git a/src/ui/src/workflow_components/CorePythonFunction.vue b/src/ui/src/workflow_components/CorePythonFunction.vue
index 6fe2d1a41..f5e83ec0f 100644
--- a/src/ui/src/workflow_components/CorePythonFunction.vue
+++ b/src/ui/src/workflow_components/CorePythonFunction.vue
@@ -1,5 +1,9 @@
 <template>
-	<WorkflowsNodeBox :component="component" class="CorePythonFunction">
+	<WorkflowsNodeBox
+		:component="component"
+		variant="tool"
+		class="CorePythonFunction"
+	>
 		I'm a Python function
 	</WorkflowsNodeBox>
 </template>
diff --git a/src/ui/src/workflow_components/CoreSetState.vue b/src/ui/src/workflow_components/CoreSetState.vue
index a560b0dc5..c52fc0b48 100644
--- a/src/ui/src/workflow_components/CoreSetState.vue
+++ b/src/ui/src/workflow_components/CoreSetState.vue
@@ -1,6 +1,11 @@
 <template>
-	<WorkflowsNodeBox :component="component" class="CoreSetState">
-		I'm used to set state
+	<WorkflowsNodeBox
+		:component="component"
+		variant="tool"
+		class="CoreSetState"
+	>
+		Set <span class="highlight">{{ fields.element.value }}</span> to
+		<span class="highlight">{{ fields.value.value }}</span>
 	</WorkflowsNodeBox>
 </template>
 
@@ -45,6 +50,7 @@ import injectionKeys from "../injectionKeys";
 
 const wf = inject(injectionKeys.core);
 const componentId = inject(injectionKeys.componentId);
+const fields = inject(injectionKeys.evaluatedFields);
 
 const component = computed(() => wf.getComponentById(componentId));
 </script>
@@ -54,4 +60,12 @@ const component = computed(() => wf.getComponentById(componentId));
 
 .CoreSetState {
 }
+
+.highlight {
+	background-color: #f0f0f0;
+	padding: 2px 4px 2px 4px;
+	margin: 2px 0 2px 0;
+	border-radius: 4px;
+	display: inline-block;
+}
 </style>
diff --git a/src/ui/src/workflow_components/CoreTwitterPost.vue b/src/ui/src/workflow_components/CoreTwitterPost.vue
index 936075e2d..cc5d560b7 100644
--- a/src/ui/src/workflow_components/CoreTwitterPost.vue
+++ b/src/ui/src/workflow_components/CoreTwitterPost.vue
@@ -1,5 +1,9 @@
 <template>
-	<WorkflowsNodeBox :component="component" class="CoreTwitterPost">
+	<WorkflowsNodeBox
+		:component="component"
+		variant="tool"
+		class="CoreTwitterPost"
+	>
 		<div class="content"></div>
 	</WorkflowsNodeBox>
 </template>
diff --git a/src/ui/src/workflow_components/CoreWriterCompletion.vue b/src/ui/src/workflow_components/CoreWriterCompletion.vue
index a1070982b..c6c2b5206 100644
--- a/src/ui/src/workflow_components/CoreWriterCompletion.vue
+++ b/src/ui/src/workflow_components/CoreWriterCompletion.vue
@@ -1,6 +1,10 @@
 <template>
-	<WorkflowsNodeBox :component="component" class="CoreWriterCompletion">
-		I'm a Writer completion
+	<WorkflowsNodeBox
+		:component="component"
+		variant="writer"
+		class="CoreWriterCompletion"
+	>
+		Complete text <span class="highlight">{{ fields.text.value }}</span>
 	</WorkflowsNodeBox>
 </template>
 
@@ -57,6 +61,7 @@ import injectionKeys from "../injectionKeys";
 
 const wf = inject(injectionKeys.core);
 const componentId = inject(injectionKeys.componentId);
+const fields = inject(injectionKeys.evaluatedFields);
 
 const component = computed(() => wf.getComponentById(componentId));
 </script>
@@ -66,4 +71,12 @@ const component = computed(() => wf.getComponentById(componentId));
 
 .CoreWriterCompletion {
 }
+
+.highlight {
+	background-color: #f0f0f0;
+	padding: 2px 4px 2px 4px;
+	margin: 2px 0 2px 0;
+	border-radius: 4px;
+	display: inline-block;
+}
 </style>
diff --git a/src/ui/src/workflow_components/CoreWriterKGAdd.vue b/src/ui/src/workflow_components/CoreWriterKGAdd.vue
index 60eb8acdc..20c32388f 100644
--- a/src/ui/src/workflow_components/CoreWriterKGAdd.vue
+++ b/src/ui/src/workflow_components/CoreWriterKGAdd.vue
@@ -1,5 +1,9 @@
 <template>
-	<WorkflowsNodeBox :component="component" class="CoreWriterKGAdd">
+	<WorkflowsNodeBox
+		:component="component"
+		variant="tool"
+		class="CoreWriterKGAdd"
+	>
 		I'm a Writer KG node
 	</WorkflowsNodeBox>
 </template>
@@ -15,25 +19,24 @@ export default {
 		category: "Content",
 		allowedParentTypes: ["workflow"],
 		fields: {
-			text: {
-				name: "Text",
+			data: {
+				name: "Data",
 				type: FieldType.Text,
 				control: FieldControl.Textarea,
-				desc: "The text to complete.",
 			},
-			modelId: {
-				name: "Model",
+			type: {
+				name: "Type",
+				type: FieldType.Text,
+				init: "text/plain",
+			},
+			name: {
+				name: "Name",
+				type: FieldType.Text,
+				init: "myfile.txt",
+			},
+			graphId: {
+				name: "Graph id",
 				type: FieldType.Text,
-				options: {
-					"palmyra-x-003-instruct": "palmyra-x-003-instruct",
-					"palmyra-x-002-instruct": "palmyra-x-002-instruct",
-					"palmyra-x-32k-instruct": "palmyra-x-32k-instruct",
-					"palmyra-x-002-32k": "palmyra-x-002-32k",
-					"palmyra-med-32k": "palmyra-med-32k",
-					"palmyra-med": "palmyra-med",
-					"palmyra-fin-32k": "palmyra-fin-32k",
-				},
-				init: "palmyra-x-002-instruct",
 			},
 		},
 		outs: {
@@ -64,5 +67,6 @@ const component = computed(() => wf.getComponentById(componentId));
 <style scoped>
 @import "../renderer/sharedStyles.css";
 
-.CoreWriterKGAdd
+.CoreWriterKGAdd {
+}
 </style>
diff --git a/src/ui/src/workflow_components/CoreWriterSQL.vue b/src/ui/src/workflow_components/CoreWriterSQL.vue
new file mode 100644
index 000000000..6fc0879f0
--- /dev/null
+++ b/src/ui/src/workflow_components/CoreWriterSQL.vue
@@ -0,0 +1,82 @@
+<template>
+	<WorkflowsNodeBox
+		:component="component"
+		variant="writer"
+		class="CoreWriterSQL"
+	>
+		Complete text <span class="highlight">{{ fields.text.value }}</span>
+	</WorkflowsNodeBox>
+</template>
+
+<script lang="ts">
+import { FieldControl, FieldType } from "../writerTypes";
+import { computed, inject } from "vue";
+
+export default {
+	writer: {
+		name: "SQL Tool",
+		description: "Execute Writer completions",
+		category: "Content",
+		allowedParentTypes: ["workflow"],
+		fields: {
+			text: {
+				name: "Text",
+				type: FieldType.Text,
+				control: FieldControl.Textarea,
+				desc: "The text to complete.",
+			},
+			modelId: {
+				name: "Model",
+				type: FieldType.Text,
+				options: {
+					"palmyra-x-003-instruct": "palmyra-x-003-instruct",
+					"palmyra-x-002-instruct": "palmyra-x-002-instruct",
+					"palmyra-x-32k-instruct": "palmyra-x-32k-instruct",
+					"palmyra-x-002-32k": "palmyra-x-002-32k",
+					"palmyra-med-32k": "palmyra-med-32k",
+					"palmyra-med": "palmyra-med",
+					"palmyra-fin-32k": "palmyra-fin-32k",
+				},
+				init: "palmyra-x-002-instruct",
+			},
+		},
+		outs: {
+			success: {
+				name: "Success",
+				description: "If the function doesn't raise an Exception.",
+				style: "success",
+			},
+			error: {
+				name: "Error",
+				description: "If the function raises an Exception.",
+				style: "error",
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import WorkflowsNodeBox from "./WorkflowsNodeBox.vue";
+import injectionKeys from "../injectionKeys";
+
+const wf = inject(injectionKeys.core);
+const componentId = inject(injectionKeys.componentId);
+const fields = inject(injectionKeys.evaluatedFields);
+
+const component = computed(() => wf.getComponentById(componentId));
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreWriterSQL {
+}
+
+.highlight {
+	background-color: #f0f0f0;
+	padding: 2px 4px 2px 4px;
+	margin: 2px 0 2px 0;
+	border-radius: 4px;
+	display: inline-block;
+}
+</style>
diff --git a/src/ui/src/workflow_components/WorkflowsNodeBox.vue b/src/ui/src/workflow_components/WorkflowsNodeBox.vue
index 385016aad..c99f629e2 100644
--- a/src/ui/src/workflow_components/WorkflowsNodeBox.vue
+++ b/src/ui/src/workflow_components/WorkflowsNodeBox.vue
@@ -1,8 +1,19 @@
 <template>
-	<div class="WorkflowsNodeBox">
-		<div class="title">{{ def.name }}</div>
+	<div class="WorkflowsNodeBox" :class="props.variant">
+		<div class="title">
+			<i v-if="props.variant == 'tool'" class="material-symbols-outlined"
+				>settings</i
+			>
+			<img
+				v-if="props.variant == 'writer'"
+				src="../assets/logo.svg"
+				alt="Writer Framework logo"
+			/>
+			{{ def.name }}
+		</div>
 		<div class="main">
 			<slot></slot>
+			<div></div>
 		</div>
 		<div class="outputs">
 			<div v-for="(out, outId) in def.outs" :key="outId" class="output">
@@ -30,6 +41,7 @@ const wf = inject(injectionKeys.core);
 
 const props = defineProps<{
 	component: Component;
+	variant?: string;
 }>();
 
 const def = computed(() => {
@@ -56,16 +68,42 @@ function handleOutClick(ev: DragEvent, outId: string) {
 }
 
 .title {
-	background: #ede2ff;
-	padding: 12px 16px 12px 16px;
+	display: flex;
+	gap: 12px;
+	padding: 14px 16px 14px 16px;
 	border-radius: 12px 12px 0 0;
 	border-top: 1px solid var(--builderSeparatorColor);
 	border-left: 1px solid var(--builderSeparatorColor);
 	border-right: 1px solid var(--builderSeparatorColor);
+	align-items: center;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 12px;
+	letter-spacing: 1.3px;
+	text-transform: uppercase;
+}
+
+.title img {
+	width: 18px;
+}
+
+.title i {
+	font-size: 16px;
+}
+
+.WorkflowsNodeBox.writer .title {
+	color: #4f4f4f;
+	background: linear-gradient(264deg, #f6effd 0.71%, #e4e9ff 100%);
+}
+
+.WorkflowsNodeBox.tool .title {
+	background: #4f4f4f;
+	color: #ffffff;
 }
 
 .main {
-	font-size: 12.5px;
+	font-size: 14px;
 	padding: 12px 16px 12px 16px;
 	border-left: 1px solid var(--builderSeparatorColor);
 	border-right: 1px solid var(--builderSeparatorColor);
diff --git a/src/writer/core.py b/src/writer/core.py
index 0d6e5e63a..80b218032 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1099,26 +1099,33 @@ def replacer(matched):
             expr = matched.group(1).strip()
             expr_value = self.evaluate_expression(expr, instance_path, base_context)
 
-            serialised_value = None
             try:
-                serialised_value = state_serialiser.serialise(expr_value)
+                if as_json:
+                    serialised_value = state_serialiser.serialise(expr_value)
+                    return json.dumps(serialised_value)
+                return expr_value
             except BaseException:
                 raise ValueError(
                     f"""Couldn't serialise value of type "{ type(expr_value) }" when evaluating field "{ field_key }".""")
 
-            if as_json:
-                return json.dumps(serialised_value)
-            return str(serialised_value)
-
         component_id = instance_path[-1]["componentId"]
         component = self.ct.get_component(component_id)
         if component:
             field_value = component.content.get(field_key) or default_field_value
-            replaced = self.template_regex.sub(replacer, field_value)
+            replaced = None
+            full_match = self.template_regex.fullmatch(field_value)
+
+            if full_match is None:
+                print(f"Did not obtain full match for {field_key}")
+                replaced = self.template_regex.sub(lambda m: str(replacer(m)), field_value)
+            else:
+                print(f"Obtained full match for {field_key}")
+                replaced = replacer(full_match)
 
             if as_json:
                 return json.loads(replaced)
             else:
+                print(f"Returning {field_key} as {type(replaced)}")
                 return replaced
         else:
             raise ValueError(f"Couldn't acquire a component by ID '{component_id}'")
@@ -1212,27 +1219,28 @@ def parse_expression(self, expr: str, instance_path: Optional[InstancePath] = No
 
 
     def evaluate_expression(self, expr: str, instance_path: Optional[InstancePath] = None, base_context = {}) -> Any:
-        context_data = None
+        context_data = base_context
+        result = None
         if instance_path:
             context_data = self.get_context_data(instance_path, base_context)
         context_ref: Any = context_data
         state_ref: Any = self.wf.user_state.state
         accessors: List[str] = self.parse_expression(expr, instance_path)
+
         for accessor in accessors:
-            if isinstance(state_ref, (StateProxy, dict)):
+            if isinstance(state_ref, (StateProxy, dict)) and state_ref.get(accessor):
                 state_ref = state_ref.get(accessor)
-
-            if context_ref and isinstance(context_ref, dict):
+                result = state_ref
+            elif isinstance(state_ref, (list)) and state_ref[int(accessor)] is not None:
+                state_ref = state_ref[int(accessor)]
+                result = state_ref
+            elif isinstance(context_ref, dict) and context_ref.get(accessor):
                 context_ref = context_ref.get(accessor)
-
-        result = None
-        if context_ref:
-            result = context_ref
-        elif state_ref:
-            result = state_ref
+                result = context_ref
 
         if isinstance(result, StateProxy):
             return result.to_dict()
+
         return result