alex/LocalAGI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add slack and github connectors

Browse Source
This commit is contained in:
mudler
2024-04-09 18:24:47 +02:00
parent 414a973282
commit 4453f43bec
11 changed files with 423 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
example/webui/create.html
View File

@@ -19,28 +19,25 @@
<input type="text" name="name" id="name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md bg-gray-700 text-white" placeholder="Name">
</div>
<div id="connectorsSection">
<div class="connector mb-4">
</div>
</div>
<button type="button" id="addConnectorButton" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Add Connector
</button>
<script>
const actions = `{{ range .Actions }}<option value="{{.}}">{{.}}</option>{{ end }}`;
const connectors = `{{ range .Connectors }}<option value="{{.}}">{{.}}</option>{{ end }}`;
document.getElementById('addConnectorButton').addEventListener('click', function() {
const connectorsSection = document.getElementById('connectorsSection');
const newConnectorIndex = connectorsSection.getElementsByClassName('connector').length;
const newConnectorHTML = `
<div class="connector mb-4">
<div class="mb-4">
<label for="connectorType${newConnectorIndex}" class="block text-lg font-medium text-gray-400">Connector Type</label>
<select name="connectors[${newConnectorIndex}].type" id="connectorType${newConnectorIndex}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md bg-gray-700 text-white">
{{ range .Connectors }}
<option value="{{.}}">{{.}}</option>
{{ end }}
</select>
`+connectors+` </select>
</div>
<div class="mb-4">
<label for="connectorConfig${newConnectorIndex}" class="block text-lg font-medium text-gray-400">Connector Config (JSON)</label>
@@ -54,31 +51,28 @@
</script>
<div class="mb-4" id="action_box">
<div class="action mb-4">
</div>
</div>
<button id="action_button" type="button" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Add action</button>
<script>
document.getElementById('action_button').addEventListener('click', function() {
const actionsSection = document.getElementById('action_box');
const ii = actionsSection.getElementsByClassName('connector').length;
const newConnectorHTML = `
const ii = actionsSection.getElementsByClassName('action').length;
const newActionHTML = `
<div class="action mb-4">
<label for="actionsName${ii}" class="block text-lg font-medium text-gray-400">Connector Type</label>
<label for="actionsName${ii}" class="block text-lg font-medium text-gray-400">Action</label>
<select name="actions[${ii}].name" id="actionsName${ii}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md bg-gray-700 text-white">
{{ range .Actions }}
<option value="{{.}}">{{.}}</option>
{{ end }}
</select>
`+actions+`</select>
<div class="mb-4">
<label for="actionsConfig${ii}" class="block text-lg font-medium text-gray-400">Connector Config (JSON)</label>
<textarea id="actionsConfig${ii}" name="actions[${ii}].config" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md bg-gray-700 text-white" placeholder='{"results":"5"}'></textarea>
<label for="actionsConfig${ii}" class="block text-lg font-medium text-gray-400">Action Config (JSON)</label>
<textarea id="actionsConfig${ii}" name="actions[${ii}].config" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md bg-gray-700 text-white" placeholder='{"results":"5"}'></textarea>
</div>
</div>
`;
actionsSection.insertAdjacentHTML('beforeend', newConnectorHTML);
actionsSection.insertAdjacentHTML('beforeend', newActionHTML);
});
</script>