Agenten-Plattform/web/templates/new.html

{#-
 Agenten Plattform
	(c) 2024 Magnus Bender
		Institute of Humanities-Centered Artificial Intelligence (CHAI)
		Universitaet Hamburg
		https://www.chai.uni-hamburg.de/~bender
	source code released under the terms of GNU Public License Version 3
	https://www.gnu.org/licenses/gpl-3.0.txt
-#}
{% extends "base.html" %}
{% set title = "New" %}
{% block maincontent %}
	<div class="row">
		<div class="col">
		</div>
		<div class="col">
			<a href="/app/table" class="btn btn-secondary">&larr; Back to Messages</a>
		</div>
	</div>

	<h2>Create New Riddle</h2>

	<div class="mb-3">
		<label for="message_id" class="form-label">Riddle ID</label>
		<input type="text" name="id" class="message-attribute form-control" id="message_id">
	</div>
	<div class="mb-3">
		<label for="message_id" class="form-label">Riddle Question</label>
		<input type="text" name="riddle.question" class="message-attribute form-control" id="message_id">
	</div>
	<div class="mb-3">
		<label for="message_context" class="form-label">Riddle Context</label>
		<textarea class="form-control message-attribute" name="riddle.context" id="message_context" rows="2"></textarea>
	</div>

	<h3>Steps</h3>
	<div class="mb-3">
		<div class="form-check form-check-inline">
			<input class="form-check-input message-attribute" name="status.extract.required" type="checkbox" id="message_extract" value="true" checked>
			<label class="form-check-label" for="message_extract">Extract</label>
		</div>
		<div class="form-check form-check-inline">
			<input class="form-check-input message-attribute" name="status.solve.required" type="checkbox" id="message_solve" value="true" checked>
			<label class="form-check-label" for="message_solve">Solve</label>
		</div>
		<div class="form-check form-check-inline">
			<input class="form-check-input message-attribute" name="status.validate.required"  type="checkbox" id="message_validate" value="true" checked>
			<label class="form-check-label" for="message_validate">Validate</label>
		</div>
	</div>

	<h3>Files</h3>
	<p>
		Manually add files to the shared directory and then select them here to assign them to a riddle.
		Shared directory is <code>{{SHARE_PATH}}</code> which should be linked to the host using docker to, e.g., <code>./data/share</code>.
	</p>

	<datalist id="dataFiles">
		{% for f in shared_data %}
			<option value="{{f}}">
		{% endfor %}
	</datalist>
	<datalist id="schemaFiles">
		{% for f in shared_schema %}
			<option value="{{f}}">
		{% endfor %}
	</datalist>

	<template id="filesTemplate">
		<div class="mb-3 row" id="filesRow{cnt}">
			<div class="col col-sm-1">
				{cnt}
			</div>
			<div class="col">
				<label for="fileType{cnt}" class="form-label">File Type</label>
				<select id="fileType{cnt}" name="data.{cnt}.type" class="form-select message-attribute">
					<option>Select Type</option>
					{% for t in RiddleDataType %}
						<option value="{{t.value}}" { {{- t.value -}} _selected}>{{t.name}}</option>
					{% endfor %}
				</select>
			</div>
			<div class="col">
				<label for="inputFile{cnt}" class="form-label">Input File</label>
				<input class="form-control message-attribute" name="data.{cnt}.file_plain"
					list="dataFiles" id="inputFile{cnt}" value="{file_plain}" placeholder="Type to search files">
			</div>
			<div class="col">
				<label for="schemaFile{cnt}" class="form-label">Schema File</label>
				<input class="form-control message-attribute" name="data.{cnt}.file_extracted"
					list="schemaFiles" id="schemaFile{cnt}" value="{file_extracted}" placeholder="Type to search files">
			</div>
			<div class="col col-sm-1">
				<button type="button" id="removeFile{cnt}" class="btn btn-danger">Remove</button>
			</div>
		</div>
	</template>

	<div id="filesRender">
	</div>
	<div class="mb-3 row">
		<div class="col col-sm-1">
			<button type="button" id="addFile" class="btn btn-secondary">Add</button>
		</div>
	</div>

	<h2>JSON Representation</h2>

	<div class="mb-3">
		<div class="form-floating">
			<textarea class="form-control" id="message_content">
				{{- AgentMessage(id="",riddle={"context":"","question":""}).model_dump_json(indent=2) -}}
			</textarea>
			<label for="message_content">Message to send</label>
		</div>
	</div>
	<button type="submit" class="btn btn-primary" id="send_message">Send Message</button>

	{% include "modal.html" %}
	
{% endblock %}
{% block morehead %}
	<script>
		const basic_message = '{{ AgentMessage(id="",riddle={"context":"","question":""}).model_dump_json()|safe }}';
	</script>
{% endblock %}
{% block morefoot %}
	<script src="/static/new.js"></script>
{% endblock %}