feat: add Monaco Editor component for JSON function definition and update layout

Author: caperaven

app/ollama-tools/ollama-tools.css

@@ -1,5 +1,6 @@
 :host {
 	display: grid;
+	grid-template-rows: auto 1fr auto;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;

app/ollama-tools/ollama-tools.html

@@ -1,3 +1,26 @@
 <h2>Ollama Tool Calling</h2>
-<div class="container"></div>
+
+<monaco-editor id="tooling" language="json">
+[
+    {
+        "type": "function",
+        "function": {
+            "name": "age",
+            "description": "Return the age of a person",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "personAge": {
+                        "type": "integer",
+                        "description": "The age of the person"
+                    }
+                },
+                "required": ["personAge"]
+            }
+        }
+    }
+]
+</monaco-editor>
+
+
 <button data-action="callFunction">Call Function</button>

app/ollama-tools/ollama-tools.js

@@ -1,4 +1,5 @@
 import {OllamaModule, ChatRoles} from "./../../src/modules/ollama.js";
+import "./../../components/monaco-editor/monaco-editor.js";
 
 const tools = [
 	{