hub/frontend/src/views/Agent.vue

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

  import TitleBar from '../components/TitleBar.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);
  });

  // === Prompt === //
  const promptInstructionEnabled = ref(false);
  const promptInstruction = ref("");
  const promptInput = ref("");

  const promptInputElem = ref(null);
  const promptHistory = ref([
    //{instruction: 'Do something', input: 'With this data', output: "Doing thing with the data"},
    //{input: 'Do this thing specifically', output: "Ok, I'll do the thing"},
    //{input: 'Now, do something else', loading: true},
  ]);

  async function sendPrompt () {
    let instruction = promptInstruction.value;
    let input = promptInput.value;

    promptInstruction.value = "";
    promptInput.value = "";

    let payload = {agentId: agent.value.id};
    let historyEntry = reactive({loading: true});

    if (promptInstructionEnabled.value) {
      payload.instruction = instruction;
      payload.input = input;

      historyEntry.instruction = instruction;
      historyEntry.input = input;
    } else {
      // uhm
      payload.instruction = input;
      historyEntry.input = input;
    }

    promptHistory.value.push(historyEntry);
    let res = await backend.sendAction("send-agent-prompt", payload);

    if (res.error) {
      historyEntry.error = res.error;
    } else {
      historyEntry.output = res.response;
    }
    historyEntry.loading = false;
  }

  function promptKeyDown (event, stage) {
    if (event.key == "Enter" && event.ctrlKey) {
      event.preventDefault();
      switch (stage) {
        case 1:
          promptInputElem.value.focus();
          break;
        case 2:
          sendPrompt();
          break;
      }
    }
  }

  // === Configuration === //

  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>
    <TitleBar>
      <h1>{{ agent.name || `Agent-${id}` }}</h1>
    </TitleBar>

    <section class="top-section">
      <p style="white-space: pre-wrap; padding-bottom: 1em; border-bottom: 1px solid var(--color-border)">{{ kindInfo.description }}</p>

      <div class="basic-config" style="padding-top: 1em;">
        <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>
      </div>
    </section>
    <section>
      <h3>Prompt</h3>

      <div>
        <span class="label">Enable Instruction/Input</span>
        <input type="checkbox" v-model="promptInstructionEnabled" />
      </div>
      <textarea v-if="promptInstructionEnabled" v-model="promptInstruction" class="config-input" @keydown="promptKeyDown($event, 1)" />
      <textarea v-model="promptInput" class="config-input" ref="promptInputElem" @keydown="promptKeyDown($event, 2)" />
      <div>
        <button @click="sendPrompt()">Send Prompt</button>
      </div>

      <div v-for="entry in promptHistory" class="prompt-history-entry">
        <div v-if="entry.instruction">
          <div class="label">Instruction</div>
          <pre>{{entry.instruction}}</pre>
        </div>
        <div>
          <div class="label" v-if="entry.instruction">Input</div>
          <div class="label" v-else>Prompt</div>
          <pre>{{entry.input}}</pre>
        </div>
        <div>
          <div class="label">Output</div>
          <div v-if="entry.loading">Loading...</div>
          <pre v-if="entry.output">{{entry.output}}</pre>
        </div>
      </div>

    </section>
    <section>
      <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);
  }

  .basic-config > div {
    margin-right: 2em;
    display: inline-block;
  }

  .prompt-history-entry {
    border-top: 1px dashed var(--color-border);
    padding: 1em 0;
  }
  
  .prompt-history-entry pre {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.5em;
    white-space: pre-wrap;
  }

  .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>