Skip to content

Commit

Permalink
fix up editor ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@not-nullptr
not-nullptr committed Apr 26, 2024
1 parent 3c98a17 commit 2943c7b
Show file tree
Hide file tree
Showing 3 changed files with 250 additions and 175 deletions.
28 changes: 11 additions & 17 deletions src/lib/fncaller/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,11 @@ export class FunctionCaller<T extends FunctionSchema> {
},
) {
if (!browser) return;
localStorage.setItem("aiTasks", JSON.stringify(schema));
// convert everything in fnMap to strings
const fnMapString = {} as any;
for (const key in fnMap) {
fnMapString[key] = fnMap[key].toString();
}
localStorage.setItem("aiFunctions", JSON.stringify(fnMapString));
}
async getFunction(query: string, history: Message[]) {
const settings = get(settingsStore);
Expand All @@ -69,22 +67,18 @@ export class FunctionCaller<T extends FunctionSchema> {
messages: [
{
role: "system",
content: `Functions: ${
(JSON.stringify(this.schema), null, 4)
}\nSchema: ${JSON.stringify(
{
function: {
type: Object.keys(this.schema).join(" | "),
required: false,
},
params: {
type: "Map<string, any>",
required: false,
},
content: `Functions: ${JSON.stringify(
this.schema,
)}\nSchema: ${JSON.stringify({
function: {
type: Object.keys(this.schema).join(" | "),
required: false,
},
null,
4,
)}\n\n${settings.enforceJsonOutput ? "OUTPUT IN ONLY PARSABLE JSON, without any explanations. Ensure a parser would be able to parse the output" : ""}If a function doesn't match the query, return exact string { function: null }. Else, pick a function, and return it in the format { function: "functionName", params: { key: value } }. Only pick a function if the user asks.`,
params: {
type: "Map<string, any>",
required: false,
},
})}\n\n${!settings.enforceJsonOutput ? "OUTPUT IN ONLY PARSABLE JSON, without any explanations. Ensure a parser would be able to parse the output. " : ""}If a function doesn't match the query, return exact string { function: null }. Else, pick a function, fill in the parameters from the function's schema, and return it in the format { function: "functionName", params: { key: value } }. Only pick a function if the user asks.`,
},
{
role: "user",
Expand Down
312 changes: 161 additions & 151 deletions src/routes/edit/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,167 +83,177 @@
};
</script>

<main class="p-4 w-screen h-screen" in:dumbTransitionIn={{}} out:dumbTransitionOut={{}}>
{#each Object.entries($toolsStore.schema) as [name, item]}
<div class="mb-8">
<h1
on:input={(e) => {
updateToolName(name, e.currentTarget.textContent || "");
}}
contenteditable
class="font-bold text-2xl outline-none mb-2"
>
{name}
</h1>
<details>
<summary>Display</summary>
<span>Description:</span>
<span
<main
class="p-4 w-screen h-screen flex flex-col"
in:dumbTransitionIn={{}}
out:dumbTransitionOut={{}}
>
<div class="overflow-y-auto flex-grow pb-4">
{#each Object.entries($toolsStore.schema) as [name, item]}
<div class="mb-8">
<h1
on:input={(e) => {
updateToolSchema(name, { description: e.currentTarget.textContent || "" });
updateToolName(name, e.currentTarget.textContent || "");
}}
contenteditable
class="outline-none"
class="font-bold text-2xl outline-none mb-2"
>
{item.description}
</span>
<br />
<span>Icon URL:</span>
<input
on:input={(e) => {
updateToolIcon(name, e.currentTarget.value);
}}
value={$toolsStore.fns[name].icon || ""}
class="outline-none w-full bg-transparent"
/>
<img src={$toolsStore.fns[name].icon} alt="Icon" class="w-12 h-12" />
</details>
<details>
<summary>Params</summary>
<div>
{#each Object.entries(item.params) as [paramName, param]}
<div>
<h2
on:input={(e) => {
{name}
</h1>
<details>
<summary>Display</summary>
<span>Description:</span>
<span
on:input={(e) => {
updateToolSchema(name, {
description: e.currentTarget.textContent || "",
});
}}
contenteditable
class="outline-none"
>
{item.description}
</span>
<br />
<span>Icon URL:</span>
<input
on:input={(e) => {
updateToolIcon(name, e.currentTarget.value);
}}
value={$toolsStore.fns[name].icon || ""}
class="outline-none w-full bg-transparent"
/>
<img src={$toolsStore.fns[name].icon} alt="Icon" class="w-12 h-12" />
</details>
<details>
<summary>Params</summary>
<div>
{#each Object.entries(item.params) as [paramName, param]}
<div>
<h2
on:input={(e) => {
const params = { ...item.params };
delete params[paramName];
params[e.currentTarget.textContent || ""] = param;
updateToolSchema(name, { params });
}}
contenteditable
class="font-bold text-lg outline-none"
>
{paramName}
</h2>
<p
on:input={(e) => {
updateToolSchema(name, {
params: {
...item.params,
[paramName]: {
...param,
description: e.currentTarget.textContent || "",
},
},
});
}}
contenteditable
class="outline-none"
>
{param.description}
</p>
<label for="type">Type</label>
<select
id="type"
on:change={(e) => {
updateToolSchemaUnsafe(name, {
params: {
...item.params,
[paramName]: {
...param,
type: e.currentTarget.value,
},
},
});
}}
value={param.type}
>
<option value="string">String</option>
<option value="number">Number</option>
<option value="boolean">Boolean</option>
</select>
<label for="required">Required</label>
<input
id="required"
type="checkbox"
on:change={(e) => {
updateToolSchemaUnsafe(name, {
params: {
...item.params,
[paramName]: {
...param,
required: e.currentTarget.checked,
},
},
});
}}
checked={param.required}
/>
</div>
<button
class="border-2 mt-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
on:click={() => {
const params = { ...item.params };
delete params[paramName];
params[e.currentTarget.textContent || ""] = param;
updateToolSchema(name, { params });
}}
contenteditable
class="font-bold text-lg outline-none"
>
{paramName}
</h2>
<p
on:input={(e) => {
updateToolSchema(name, {
params: {
...item.params,
[paramName]: {
...param,
description: e.currentTarget.textContent || "",
},
},
});
}}
contenteditable
class="outline-none"
>
{param.description}
</p>
<label for="type">Type</label>
<select
id="type"
on:change={(e) => {
updateToolSchemaUnsafe(name, {
params: {
...item.params,
[paramName]: {
...param,
type: e.currentTarget.value,
},
},
});
}}
value={param.type}
>
<option value="string">String</option>
<option value="number">Number</option>
<option value="boolean">Boolean</option>
</select>
<label for="required">Required</label>
<input
id="required"
type="checkbox"
on:change={(e) => {
updateToolSchemaUnsafe(name, {
params: {
...item.params,
[paramName]: {
...param,
required: e.currentTarget.checked,
},
},
});
}}
checked={param.required}
/>
</div>
<button
class="border-2 mt-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
on:click={() => {
const params = { ...item.params };
delete params[paramName];
updateToolSchema(name, { params });
}}
>
Delete Param
</button>
{/each}
Delete Param
</button>
{/each}
</div>
<button
on:click={() => {
const params = { ...item.params };
params["new-param"] = {
description: "A new param",
type: "string",
required: false,
};
updateToolSchema(name, { params });
}}
class="border-2 border-gray-300 mt-2 mb-8 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
>
Add Param
</button>
</details>
<div class="flex gap-4">
<a
href="/edit/{encodeURIComponent(name)}"
class="text-black no-underline hover:text-black active:text-black hover:no-underline border-2 mt-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
>
Edit Code
</a>
<button
class="border-2 mt-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
on:click={() => deleteTool(name)}
>
Delete Tool
</button>
</div>
<button
on:click={() => {
const params = { ...item.params };
params["new-param"] = {
description: "A new param",
type: "string",
required: false,
};
updateToolSchema(name, { params });
}}
class="border-2 border-gray-300 mt-2 mb-8 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
>
Add Param
</button>
</details>
<div class="flex gap-4">
<a
href="/edit/{encodeURIComponent(name)}"
class="text-black no-underline hover:text-black active:text-black hover:no-underline border-2 mt-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
>
Edit Code
</a>
<button
class="border-2 mt-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
on:click={() => deleteTool(name)}
>
Delete Tool
</button>
</div>
</div>
{/each}
{/each}

<button
class="border-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
on:click={createTool}
>
Create Tool
</button>
<button
class="border-2 absolute bottom-0 left-0 m-4 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
on:click={() => goto("/")}
>
Go back
</button>
<button
class="border-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
on:click={createTool}
>
Create Tool
</button>
</div>
<div class="bg-white border-t-2 border-t-gray-300 flex-shrink-0 p-4 w-full">
<button
class="border-2 border-gray-300 rounded-lg py-2 px-4 hover:bg-gray-300 active:bg-gray-400 active:border-gray-400 transition-all ease-out duration-200"
on:click={() => goto("/")}
>
Go back
</button>
</div>
</main>
Loading

0 comments on commit 2943c7b

Please sign in to comment.