Skip to content

Commit 4f36af2

Browse files
caperavencaperaven
committed
feat: add Tab Sheet component and integrate into Ollama tools and routes
1 parent 40f2069 commit 4f36af2

File tree

11 files changed

+131
-43
lines changed

11 files changed

+131
-43
lines changed

‎app/home/home.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@ <h2>Home</h2>
1313
<li><a href="/activity-state">Activity State</a></li>
1414
<li><a href="/web-nn">Web NN</a></li>
1515
<li><a href="/monaco-editor">Monaco Editor</a></li>
16+
<li><a href="/tab-sheet">Tab Sheet</a></li>
1617
</ul>

‎app/ollama-tools/ollama-tools.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,26 @@ <h2>Ollama Tool Calling</h2>
66
<div data-width="1fr">
77
<section>
88
<h2>Tools Definitions</h2>
9-
<monaco-editor data-language="json">
10-
[
11-
{
12-
"type": "function",
13-
"function": {
14-
"name": "age",
15-
"description": "Return the age of a person",
16-
"parameters": {
17-
"type": "object",
18-
"properties": {
19-
"personAge": {
20-
"type": "integer",
21-
"description": "The age of the person"
22-
}
23-
},
24-
"required": ["personAge"]
9+
<monaco-editor id="tools" data-language="json">
10+
[
11+
{
12+
"type": "function",
13+
"function": {
14+
"name": "age",
15+
"description": "Return the age of a person",
16+
"parameters": {
17+
"type": "object",
18+
"properties": {
19+
"personAge": {
20+
"type": "integer",
21+
"description": "The age of the person"
2522
}
26-
}
23+
},
24+
"required": ["personAge"]
2725
}
28-
];
26+
}
27+
}
28+
]
2929
</monaco-editor>
3030
</section>
3131
</div>

‎app/ollama-tools/ollama-tools.js‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,6 @@ import "./../../components/monaco-editor/monaco-editor.js";
33
import "./../../components/dynamic-columns/dynamic-columns.js";
44
import "./../../components/dynamic-rows/dynamic-rows.js";
55

6-
const tools = [
7-
{
8-
"type": "function",
9-
"function": {
10-
"name": "age",
11-
"description": "Return the age of a person",
12-
"parameters": {
13-
"type": "object",
14-
"properties": {
15-
"personAge": {
16-
"type": "integer",
17-
"description": "The age of the person"
18-
}
19-
},
20-
"required": ["personAge"]
21-
}
22-
}
23-
}
24-
];
25-
266
export default class OllamaToolsView extends HTMLElement {
277
static tag = "ollama-tools-view";
288

@@ -59,6 +39,8 @@ export default class OllamaToolsView extends HTMLElement {
5939
text: "Do you know how old the person is?"
6040
});
6141

42+
const tools = JSON.parse(this.shadowRoot.querySelector("#tools").value);
43+
6244
const callResult = await OllamaModule.chat({
6345
"model": "llama3.2",
6446
"tools": tools,
@@ -75,8 +57,6 @@ export default class OllamaToolsView extends HTMLElement {
7557
const functionName = functionDefinition.function.name;
7658
const functionArgs = functionDefinition.function.arguments;
7759

78-
console.log(functionName, functionArgs);
79-
8060
const functionCallMessage = await OllamaModule.create_message({
8161
role: ChatRoles.TOOL,
8262
text: `22`
@@ -95,7 +75,7 @@ export default class OllamaToolsView extends HTMLElement {
9575
result.push(data);
9676
}
9777

98-
this.shadowRoot.querySelector(".container").textContent = JSON.parse(result[0]).message.content;
78+
this.shadowRoot.querySelector("text-area").textContent = JSON.parse(result[0]).message.content;
9979
}
10080
}
10181

‎app/routes.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@ export const routes = Object.freeze({
22
"home": "/",
33
"about": "/about",
44
"form": "/form",
5-
"ollama": "/ollama",
5+
"ollama": "/ollama",
6+
"ollama-tools": "/ollama-tools",
67
"dynamic-columns": "/dynamic-layout",
78
"main-menu": "/main-menu",
89
"material-icons": "/material-icons",
910
"activity-state": "/activity-state",
10-
"web-nn": "/web-nn"
11+
"web-nn": "/web-nn",
12+
"monaco-editor": "/monaco-editor",
13+
"tab-sheet": "/tab-sheet",
1114
});

‎app/tab-sheet/tab-sheet.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
h2 {
2+
color: darkslateblue;
3+
}

‎app/tab-sheet/tab-sheet.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<h2>Tab Sheet</h2>
2+
3+
<tab-sheet>
4+
<div slot="tab" for="tab1">Tab 1</div>
5+
<div slot="tab" for="tab2">Tab 2</div>
6+
<div slot="tab" for="tab3">Tab 3</div>
7+
8+
<div id="tab1">Tab 1 content</div>
9+
<div id="tab1">Tab 2 content</div>
10+
<div id="tab1">Tab 3 content</div>
11+
</tab-sheet>

‎app/tab-sheet/tab-sheet.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import "./../../components/tab-sheet/tab-sheet.js";
2+
3+
export default class TabSheetView extends HTMLElement {
4+
static tag = "tab-sheet-view";
5+
6+
constructor() {
7+
super();
8+
this.attachShadow({ mode: "open" });
9+
}
10+
11+
async connectedCallback() {
12+
this.shadowRoot.innerHTML = await api.call("component", "load_html", {
13+
url: import.meta.url,
14+
});
15+
}
16+
17+
load(data) {
18+
}
19+
}
20+
21+
customElements.define(TabSheetView.tag, TabSheetView);

‎components/monaco-editor/monaco-editor.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ export default class MonacoEditor extends HTMLElement {
1717
get theme() {
1818
return this.dataset.theme ?? "vs-dark";
1919
}
20+
21+
get value() {
22+
return this.#editor?.getValue();
23+
}
24+
25+
set value(value) {
26+
this.#editor?.setValue(value);
27+
}
2028

2129
constructor() {
2230
super();

‎components/tab-sheet/tab-sheet.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
:host {
2+
display: flex;
3+
}
4+
5+
.tab-sheet {
6+
display: flex;
7+
flex-direction: column;
8+
flex: 1;
9+
}
10+
11+
.header {
12+
display: flex;
13+
flex-direction: row;
14+
align-items: center;
15+
justify-content: start;
16+
}
17+
18+
.content {
19+
flex: 1;
20+
}
21+
22+
:host(.bottom) .tab-sheet {
23+
flex-direction: column-reverse;
24+
}
25+
26+
:host(.right) .tab-sheet {
27+
flex-direction: row-reverse;
28+
}
29+
30+
:host(.left) .tab-sheet {
31+
flex-direction: row;
32+
}
33+
34+
:host(.right) .header, :host(.left) .header {
35+
flex-direction: column;
36+
}

‎components/tab-sheet/tab-sheet.html.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export const HTML = `
2+
<link rel="stylesheet" href="${new URL("./tab-sheet.css", import.meta.url).href}" />
3+
<slot name="prefix"></slot>
4+
<div class="tab-sheet">
5+
<div class="header">
6+
<slot name="tab"></slot>
7+
</div>
8+
<div class="content">
9+
<slot></slot>
10+
</div>
11+
</div>
12+
<slot name="suffix"></slot>
13+
`

0 commit comments

Comments
 (0)