minne/templates/knowledge/relationship_table.html

<div id="relationship_table_section"
  class="overflow-x-auto shadow rounded-box border border-base-content/5 bg-base-100">
  <table class="table">
    <thead>
      <tr>
        <th>Origin</th>
        <th>Target</th>
        <th>Type</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for relationship in relationships %}
      <tr>
        <!-- Origin column -->
        <td>
          {% for entity in entities if entity.id == relationship.in %}
          <span> {{ entity.name }}
          </span>
          {% else %}
          {{ relationship.in }}
          {% endfor %}
        </td>
        <!-- Target column -->
        <td>
          {% for entity in entities if entity.id == relationship.out %}
          <span>
            {{ entity.name }}
          </span>
          {% else %}
          {{ relationship.out }}
          {% endfor %}
        </td>
        <td>{{ relationship.metadata.relationship_type }}</td>
        <td>
          <button class="btn btn-sm btn-outline" hx-delete="/knowledge-relationship/{{ relationship.id }}"
            hx-target="#relationship_table_section" hx-swap="outerHTML">
            {% include "icons/delete_icon.html" %}
          </button>
        </td>
      </tr>
      {% endfor %}
      <!-- New linking row -->
      <tr id="new_relationship">
        <td>
          <select name="in_" class="select select-bordered w-full new_relationship_input">
            <option disabled selected>Select Origin</option>
            {% for entity in entities %}
            <option value="{{ entity.id }}">
              {{ entity.name }}
            </option>
            {% endfor %}
          </select>
        </td>
        <td>
          <select name="out" class="select select-bordered w-full new_relationship_input">
            <option disabled selected>Select Target</option>
            {% for entity in entities %}
            <option value="{{ entity.id }}">{{ entity.name }}</option>
            {% endfor %}
          </select>
        </td>
        <td>
          <input id="relationship_type_input" name="relationship_type" type="text" placeholder="RelatedTo"
            class="input input-bordered w-full new_relationship_input" />
        </td>
        <td>
          <button id="save_relationship_button" type="button" class="btn btn-primary btn-sm"
            hx-post="/knowledge-relationship" hx-target="#relationship_table_section" hx-swap="outerHTML"
            hx-include=".new_relationship_input">
            Save
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<script>
  document.getElementById('relationship_type_input').addEventListener('keydown', function (event) {
    if (event.key === 'Enter') {
      event.preventDefault(); // Prevent form submission if within a form
      document.getElementById('save_relationship_button').click();
    }
  });
</script>