feat: Workflows function calling support

[ramedina86]

No description provided.

[madeindjs]

You might need to use the ESM import, it might improve bundle size. From their sample, they use

Suggested change

	import * as monaco from "monaco-editor";
	import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

Not tested though

[ramedina86]

Monaco import was a mess back in the day. I'll create a task and you can look into it in detail, perform tests, etc.

[madeindjs]

Suggested change

	const toolForm: Ref<ToolForm> = ref(toolFormInitValue);
	const toolForm = ref<ToolForm>(toolFormInitValue);

[ramedina86]

This syntax is really nice, I didn't know it existed, thanks for bringing it up.

[madeindjs]

Optional, but I think it's a better pattern to use computed here. For example.

Suggested change

	function getToolFromForm(): Tool {
	const { type, code, graphId } = toolForm.value;
	if (type == "function") {
	return {
	...JSON.parse(code),
	type,
	};
	}
	if (type == "graph") {
	return {
	type,
	graph_ids: [graphId],
	};
	}
	throw "Unexpected tool type.";
	}
	function validateToolForm(form: ToolForm): string[] {
	let errors = [];
	const { name } = form;
	if (!name) {
	errors.push("The name cannot be empty.");
	}
	if (Object.keys(tools.value).includes(name)) {
	errors.push("An existing tool with the specified name already exists.");
	}
	return errors;
	}
	const tooolFromForm = computed<Tool | null>(() => {
	const { type, code, graphId } = toolForm.value;
	if (type == "function") {
	return {
	...JSON.parse(code),
	type,
	};
	}
	if (type == "graph") {
	return {
	type,
	graph_ids: [graphId],
	};
	}
	return null;
	});
	const toolFormErrors = computed<string[]>(() => {
	let errors = [];
	const { name } = form;
	if (!name) {
	errors.push("The name cannot be empty.");
	}
	if (Object.keys(tools.value).includes(name)) {
	errors.push("An existing tool with the specified name already exists.");
	}
	return errors;
	});

[madeindjs]

can't it be scoped ?

[madeindjs]

If it's clickable, it should be a button (with type="button", otherwise it sends parent form)

Suggested change

	<div
	v-for="(tool, toolName) in tools"
	:key="toolName"
	class="tool"
	@click="editTool(toolName)"
	>
	<div class="toolName">{{ toolName }}</div>
	<button class="delete" @click.stop="deleteTool(toolName)">
	<i class="material-symbols-outlined">delete</i>
	</button>
	</div>
	<button
	v-for="(tool, toolName) in tools"
	:key="toolName"
	class="tool"
	type="button"
	@click="editTool(toolName)"
	>
	<div class="toolName">{{ toolName }}</div>
	<button class="delete" @click.stop="deleteTool(toolName)">
	<i class="material-symbols-outlined">delete</i>
	</button>
	</button>

Otherwise, you need to declare more attributes

Suggested change

	<div
	v-for="(tool, toolName) in tools"
	:key="toolName"
	class="tool"
	@click="editTool(toolName)"
	>
	<div class="toolName">{{ toolName }}</div>
	<button class="delete" @click.stop="deleteTool(toolName)">
	<i class="material-symbols-outlined">delete</i>
	</button>
	</div>
	<div
	v-for="(tool, toolName) in tools"
	:key="toolName"
	class="tool"
	tabindex="0"
	@click="editTool(toolName)"
	@keydown.enter="editTool(toolName)"
	>
	<div class="toolName">{{ toolName }}</div>
	<button class="delete" @click.stop="deleteTool(toolName)">
	<i class="material-symbols-outlined">delete</i>
	</button>
	</div>

[ramedina86]

otherwise it sends parent form

I don't understand this one

[ramedina86]

Agreed that it needs tabindex and keydown.enter though

[madeindjs]

otherwise it sends parent form

I was referring to the type attribute of the <button>. If you don't specify the type="button", it's by default <button type="submit"> (doc). This can make the button submit the parent form if there is any

<form onsubmit="alert('submited')">
  <input type="submit" value="This button triggers submit form" />
  <button type="submit">This button triggers submit form</button>
  <button>This button triggers submit form</button>

  <button type="button">This button doesn't triggers submit form</button>
</form>

Check this codepen

So it's always good to specify type="button" to avoid weird behavior

[ramedina86]

Ah I didn't know! Thought it was button by default

[madeindjs]

This variant doesn't exist, no ?

writer-framework/src/ui/src/wds/WdsButton.vue

Line 11 in aa9b61c

type WdsButtonVariant = "primary" | "secondary" | "tertiary";

[madeindjs]

Could we create a task to have icon attribute in WdsButton ? For example, here you should have a gap between the icon and the test Figma

[ramedina86]

It does have a gap, the WdsButton is actually a flex with a gap in it, so whatever you put in the slot comes with a gap.