hub/frontend/src/views/Agent.vue

<script setup>
  import {
    ref, watch,
    onMounted, onUnmounted,
  } from "vue";

  import * as backend from '../backend';
  import * as ui from '../ui';

  const props = defineProps({
    id: {
      type: String,
      required: true,
    },
  });

  const agent = ref({});
  const kindInfo = ref({});
  const configFields = ref([]);


  // === State Management === //

  async function loadAgentData (agentId) {
    const _agent = await backend.getAgent(agentId);
    if (!_agent) {
      ui.alert("Agent not found");
      return;
    }

    agent.value = {
      id: _agent.id,
      name: _agent.name,
      agentname: _agent.agentname,
      description: _agent.description,
      picture: _agent.picture,
    };

    backend.sendAction("get-agent-kind-info", {kind: _agent.kind}).then(res => {
      kindInfo.value.description = res.info.description;
    });

    backend.sendAction('get-agent-config-fields', {agentId}).then(res => {
      configFields.value = res.fields.map(field => ({
        name: field.name,
        type: field.type,
        value: field.value,
        default: null,
        enabled: field.value != null,
      }));
    });
  }

  // This won't fire when immediately, the mounted callback will take care
  watch(() => props.id, newId => {
    loadAgentData(newId);
  })

  onMounted(async () => {
    loadAgentData(props.id);
  });

  function updateIdentifier() {
    const value = prompt(`Enter a new identifier for ${agent.value.name}`);
    if (value) {
      backend.sendAction("update-agent", {
        agentId: agent.value.id,
        agentname: value,
      }).then(res => {
        ui.alert(res.error ?
          'Error updating agent identifier' :
          'Agent identifier updated'
        );
        if (!res.error) {
          agent.value.agentname = value;
          backend.invalidateCache({agents: true});
        }
      });
    } else {
      ui.alert("Cancelled identifier update");
    }
  }

  function updateName() {
    const value = prompt(`Enter a new name for ${agent.value.name}`);
    if (value) {
      backend.sendAction("update-agent", {
        agentId: agent.value.id,
        agentname: value,
      }).then(res => {
        ui.alert(res.error ?
          'Error updating agent name' :
          'Agent name updated'
        );
        if (!res.error) {
          agent.value.name = value;
          backend.invalidateCache({agents: true});
        }
      });
    } else {
      ui.alert("Cancelled name update");
    }
  }
  async function saveChanges() {
    const dataObject = {};
    for (let field of configFields.value) {
      if (field.enabled) {
        dataObject[field.name] = field.value;
      }
    }

    let res = await backend.sendAction("update-agent", {
      agentId: agent.value.id,
      data: dataObject,
    });

    ui.alert(res.error ?
      'Error updating agent' :
      'Agent updated'
    );

    if (!res.error) {
      backend.invalidateCache({agents: true});
    }
  }
</script>

<template>
  <main>
    <h1>{{ agent.name || `Agent-${id}` }}</h1>
    <section class="top-section">
      <div>
        <span class="label">Agent ID</span>
        <span class="value">{{id}}</span>
      </div>
      <div>
        <span class="label">Identifier</span>
        <span class="value">{{agent.agentname}}</span>
        <button @click="updateIdentifier">Edit</button>
      </div>
      <div>
        <button @click="updateName">Change Name</button>
      </div>
    </section>
    <section>
      <p style="padding-bottom: 1em; border-bottom: 1px solid var(--color-border)">{{ kindInfo.description }}</p>

      <div v-for="(configField, index) in configFields" :key="index">
        <span class="label">{{ configField.name }}</span>
        <input type="checkbox" v-model="configField.enabled" />
        <br>
        <textarea v-model="configField.value" class="config-input" :disabled="!configField.enabled"/>
      </div>
      
      <button type="submit" @click="saveChanges()">Save</button>
    </section>
  </main>
</template>

<style scoped>
  section {
    margin: 1em;
    padding: 1em;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
  }

  .top-section {
    display: flex;
    flex-direction: row;
  }

  .top-section > div {
    margin-right: 2em;
  }

  .label {
    font-size: 80%;
    font-weight: bold;
    margin-right: 0.5em;
  }

  .value {
    padding: 0 0.5em;
    padding-top: 0.35em;

    border: 1px solid var(--color-border);
    font-family: monospace;
  }

  textarea.config-input {
    width: 100%;
    resize: vertical;
    height: 5em;
  }
</style>