feat: add Ollama Tools section with HTML, CSS, and JavaScript components for tool functionality

Author: caperaven

app/home/home.html

@@ -3,6 +3,7 @@ <h2>Home</h2>
 <ul>
     <li><a href="/form">Form</a></li>
     <li><a href="/ollama">Ollama</a></li>
+    <li><a href="/ollama-tools">Ollama Tools</a></li>
     <li><a href="/kanban">Kanban</a></li>
     <li><a href="/canvas">Canvas</a></li>
     <li><a href="/dynamic-layout">Dynamic Layout</a></li>

app/ollama-tools/ollama-tools.css

@@ -0,0 +1,6 @@
+:host {
+	display: grid;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}

app/ollama-tools/ollama-tools.html

@@ -0,0 +1,3 @@
+<h2>Ollama Tool Calling</h2>
+<div class="container"></div>
+<button data-action="callFunction">Call Function</button>

app/ollama-tools/ollama-tools.js

@@ -0,0 +1,59 @@
+import {OllamaModule} from "./../../src/modules/ollama.js";
+
+const tools = [
+	{
+		"type": "function",
+		"function": {
+			"name": "example_function",
+			"description": "This is an example function",
+			"parameters": [
+				{
+					"type": "object",
+					"properties": {
+						"option": {
+							"type": "string",
+							"description": "The value to return",
+							"enum": ["option1", "option2"]
+						}
+					}
+				}
+			],
+		}
+	}
+]
+
+export default class OllamaToolsView extends HTMLElement {
+	static tag = "ollama-tools-view";
+
+	#onClickHandler = this.#onClick.bind(this);
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	async connectedCallback() {
+		this.shadowRoot.innerHTML = await api.call("component", "load_html", {
+			url: import.meta.url,
+		});
+
+		this.addEventListener("click", this.#onClickHandler);
+	}
+
+	async disconnectedCallback() {
+		this.removeEventListener("click", this.#onClickHandler);
+	}
+
+	#onClick(event) {
+		const target = event.composedPath()[0];
+		if (target.dataset.action != null) {
+			this[target.dataset.action].call(this, event);
+		}
+	}
+
+	callFunction(event) {
+		alert("click")
+	}
+}
+
+customElements.define(OllamaToolsView.tag, OllamaToolsView);

src/modules/ollama.js

@@ -21,6 +21,7 @@ const GENERATE_OPTIONAL_ARGS = Object.freeze([
 	"raw",
 	"keep_alive",
 ]);
+
 const CHAT_OPTIONAL_ARGS = Object.freeze([
 	"tools",
 	"role",