graphdb-workbench
Version:
The web application for GraphDB APIs
553 lines (531 loc) • 42.5 kB
HTML
<link href="css/ttyg/agent-settings-modal.css?v=3.2.0-TR-design-system-1" rel="stylesheet"/>
<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=3.2.0-TR-design-system-1" rel="stylesheet"/>
<link href="css/multiselect-search.css?v=3.2.0-TR-design-system-1" rel="stylesheet"/>
<div class="modal-header">
<button type="button" class="close" ng-click="close()"></button>
<h4 class="modal-title">{{(
operation === AGENT_OPERATION.EDIT ? 'ttyg.agent.create_agent_modal.title.edit '
: operation === AGENT_OPERATION.CLONE ? 'ttyg.agent.create_agent_modal.title.clone'
: 'ttyg.agent.create_agent_modal.title.create') | translate}}</h4>
</div>
<div class="modal-body">
<form novalidate name="agentSettingsForm" id="agentSettingsForm" class="agent-settings-form" guide-selector="agent-form">
<div class="form-group agent-name-label">
<label for="name" uib-popover="{{'ttyg.agent.create_agent_modal.form.agent_name.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.agent_name.label'
| translate}}</label>
<input type="text" class="form-control" id="name" name="name" ng-model="agentFormModel.name"
required autocomplete="off" guide-selector="agent-name"
placeholder="{{'ttyg.agent.create_agent_modal.form.agent_name.placeholder' | translate}}">
<div class="alert alert-danger"
ng-if="agentSettingsForm.name.$touched && agentSettingsForm.name.$invalid">
{{'required.field' | translate}}
</div>
</div>
<div>
<button class="external-config-btn" ng-click="openExternalIntegrationConfig()"
ng-if="operation !== AGENT_OPERATION.CREATE"
uib-popover="{{'ttyg.agent.create_agent_modal.form.external_config.tooltip' | translate}}"
popover-trigger="mouseenter">
<i class="fa-regular fa-plug-circle-plus"></i>
{{'ttyg.agent.create_agent_modal.form.external_config.label' | translate}}
</button>
</div>
<div class="form-group repository-id">
<label for="repositoryId"
uib-popover="{{'ttyg.agent.create_agent_modal.form.repository.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.repository.label' |
translate}}</label>
<select class="form-control" id="repositoryId" name="repositoryId" ng-model="agentFormModel.repositoryId"
required ng-change="onRepositoryChange()" guide-selector="repository-id"
ng-options="repository.value as repository.label for repository in activeRepositoryList">
</select>
<div class="alert alert-danger"
ng-if="agentSettingsForm.repositoryId.$touched && agentSettingsForm.repositoryId.$invalid">
{{'required.field' | translate}}
</div>
</div>
<div class="form-row clearfix">
<div class="form-group llm-model" ng-class="{'col-md-3': showContextSize, 'col-md-4': !showContextSize}">
<label for="model">{{'ttyg.agent.create_agent_modal.form.model.label' | translate}}</label>
<help-info-popover help-info="helpInfoForModel"></help-info-popover>
<input type="text" class="form-control" id="model" name="model" ng-model="agentFormModel.model" guide-selector="model"
required autocomplete="off">
<div class="alert alert-danger"
ng-if="agentSettingsForm.model.$touched && agentSettingsForm.model.$invalid">
{{'required.field' | translate}}
</div>
</div>
<div ng-if="showContextSize" class="form-group context-size col-md-3">
<div class="context-size-wrapper">
<label for="contextSize">
<span uib-popover="{{'ttyg.agent.create_agent_modal.form.context_size.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.context_size.label' | translate}}</span>
</label>
<button type="button"
class="btn btn-link btn-sm reset-context-size-btn"
ng-click="onRestoreDefaultContextSize()"
gdb-tooltip="{{'ttyg.agent.create_agent_modal.form.context_size.restore_default_btn.tooltip' | translate}}">
<i class="fa fa-arrow-rotate-left"></i>
</button>
<div class="input-with-unit">
<input type="number" id="contextSize" name="contextSize"
class="form-control"
min="1"
ng-model="agentFormModel.contextSize"
required autocomplete="off">
<span class="token-unit-label">
{{'ttyg.agent.create_agent_modal.form.context_size.field_addon' | translate}}
</span>
</div>
</div>
<div class="alert alert-danger"
ng-if="agentSettingsForm.contextSize.$touched && agentSettingsForm.contextSize.$invalid">
{{'required.field' | translate}}
</div>
</div>
<div class="form-group temperature" ng-class="{'col-md-3': showContextSize, 'col-md-4': !showContextSize}" guide-selector="temperature-control">
<label for="temperature">
<span uib-popover="{{'ttyg.agent.create_agent_modal.form.temperature.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.temperature.label' | translate}}</span>
<i class="fa fa-triangle-exclamation text-warning high-temperature-warning"
ng-if="showHighTemperatureWarning"
uib-popover="{{'ttyg.agent.create_agent_modal.form.temperature.high_temperature_warning' | translate}}"
popover-trigger="mouseenter"></i>
</label>
<input type="text" id="temperature" name="temperature" readonly
class="form-control" ng-class="{'has-warning': showHighTemperatureWarning}"
ng-model="agentFormModel.temperature.value">
<input id="temperatureSlider" name="temperature" type="range" guide-selector="temperature-control-input"
min="{{agentFormModel.temperature.minValue}}"
max="{{agentFormModel.temperature.maxValue}}" step="{{agentFormModel.temperature.step}}"
ng-change="onTemperatureChange()"
ng-model="agentFormModel.temperature.value"/>
</div>
<div class="form-group top-p" ng-class="{'col-md-3': showContextSize, 'col-md-4': !showContextSize}" guide-selector="top-p-control">
<label for="topP" uib-popover="{{'ttyg.agent.create_agent_modal.form.top_p.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.top_p.label' |
translate}}</label>
<input type="text" class="form-control" id="topP" name="topP" readonly
ng-model="agentFormModel.topP.value">
<input id="topPSlider" name="topP" type="range" min="{{agentFormModel.topP.minValue}}" guide-selector="top-p-control-input"
max="{{agentFormModel.topP.maxValue}}" step="{{agentFormModel.topP.step}}"
ng-model="agentFormModel.topP.value"/>
</div>
<!-- Hidden for now because currently this property doesn't work in openai, but in the future it will -->
<!-- <div class="form-group seed col-md-4 pr-0">-->
<!-- <label for="seed">{{'ttyg.agent.create_agent_modal.form.seed.label' | translate}}</label>-->
<!-- <input type="number" class="form-control" id="seed" name="seed" min="0" ng-model="agentFormModel.seed"-->
<!-- placeholder="{{'ttyg.agent.create_agent_modal.form.seed.hint' | translate}}">-->
<!-- </div>-->
</div>
<div class="form-group extraction-methods-group">
<label for="extractionMethods"
uib-popover="{{'ttyg.agent.create_agent_modal.form.extraction_method.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.extraction_method.label' |
translate}}</label>
<div id="extractionMethods" name="extractionMethods"
ng-model="agentFormModel.assistantExtractionMethods.extractionMethods"
required class="accordion extraction-methods"
ng-class="{'has-error': agentSettingsForm.extractionMethods.$touched && agentSettingsForm.extractionMethods.$invalid}">
<div ng-repeat="extractionMethod in agentFormModel.assistantExtractionMethods.extractionMethods"
class="extraction-method">
<div id="{{extractionMethod.method + '_method_heading'}}" class="extraction-method-heading"
ng-class="{'selected': extractionMethod.selected}" guide-selector="query-method-{{extractionMethod.method}}">
<div class="mr-0 extraction-method-toggle">
<input type="checkbox" id="{{extractionMethod.method + '_checkbox'}}" guide-selector="query-method-{{extractionMethod.method}}-input"
name="{{extractionMethod.method}}" class="switch"
ng-click="toggleExtractionMethod(extractionMethod, $event)"
ng-model="extractionMethod.selected"/>
<label for="{{extractionMethod.method + '_checkbox'}}"></label>
</div>
<a class="btn btn-link panel-toggle-link"
aria-expanded="false" aria-controls="{{extractionMethod.method + '_method_content'}}"
ng-click="onExtractionMethodPanelToggle(extractionMethod)">
<span class="mr-1" ng-if="extractionMethod.method !== extractionMethods.SIMILARITY"
uib-popover="{{'ttyg.agent.create_agent_modal.form.' + extractionMethod.method + '.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.' + extractionMethod.method + '.label' | translate}}</span>
<span class="mr-1" ng-if="extractionMethod.method === extractionMethods.SIMILARITY"
uib-popover-template="'js/angular/ttyg/templates/modal/similarity-extraction-method-tooltip.html'"
popover-popup-close-delay="800"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.' + extractionMethod.method + '.label' | translate}}</span>
<i class="fa fa-chevron-down toggle-icon"
ng-class="{'expanded': extractionMethod.expanded}">
</i>
</a>
</div>
<div id="{{extractionMethod.method + '_method_content'}}"
class="show extraction-method-content"
aria-labelledby="{{extractionMethod.method + '_method_heading'}}"
data-parent="#extractionMethods">
<!-- SPARQL method settings -->
<div ng-if="extractionMethod.expanded && extractionMethod.method === extractionMethods.SPARQL"
class="extraction-method-options"
ng-class="{'has-error': extractionMethod.selected && !extractionMethod.sparqlOption}">
<div class="sparql-option ontology-graph-option" guide-selector="sparql-ontology-graph-option">
<label class="radio-inline"
uib-popover="{{'ttyg.agent.create_agent_modal.form.ontology_graph.tooltip' | translate}}"
popover-trigger="mouseenter">
<input type="radio" name="sparqlOption" ng-required="extractionMethod.selected" guide-selector="sparql-ontology-graph-option-input"
ng-model="extractionMethod.sparqlOption" value="ontologyGraph">
{{'ttyg.agent.create_agent_modal.form.ontology_graph.label' | translate}}
</label>
<div class="panel" ng-show="extractionMethod.sparqlOption === 'ontologyGraph'">
<div class="form-group">
<input type="text" class="form-control" id="ontologyGraph" guide-selector="sparql-ontology-graph-input"
name="ontologyGraph"
ng-required="extractionMethod.selected && extractionMethod.sparqlOption === 'ontologyGraph'"
ng-model="extractionMethod.ontologyGraph">
</div>
</div>
</div>
<div class="sparql-option sparql-query-option" guide-selector="sparql-query-option">
<label class="radio-inline"
uib-popover="{{'ttyg.agent.create_agent_modal.form.construct_query.tooltip' | translate}}"
popover-trigger="mouseenter">
<input type="radio" name="sparqlOption" ng-required="extractionMethod.selected" guide-selector="sparql-query-option-input"
ng-model="extractionMethod.sparqlOption" value="sparqlQuery">
{{'ttyg.agent.create_agent_modal.form.construct_query.label' | translate}}
</label>
<div class="panel" ng-show="extractionMethod.sparqlOption === 'sparqlQuery'">
<div class="form-group">
<textarea type="text" class="form-control" id="sparqlQuery" guide-selector="sparql-query-input"
name="sparqlQuery" rows="10"
ng-required="extractionMethod.selected && extractionMethod.sparqlOption === 'sparqlQuery'"
ng-minlength="extractionMethod.sparqlQuery.minLength"
ng-maxlength="extractionMethod.sparqlQuery.maxLength"
ng-model="extractionMethod.sparqlQuery.value">
</textarea>
</div>
</div>
</div>
<div class="alert alert-danger sparql-method-option-required-error mb-0"
ng-if="extractionMethod.selected && !extractionMethod.sparqlOption">
{{'ttyg.agent.create_agent_modal.form.sparql_search.required_option' | translate}}
</div>
<div class="add-missing-namespaces-option mt-1" guide-selector="add-missing-namespaces-option">
<input id="addMissingNamespaces" name="addMissingNamespaces" type="checkbox" guide-selector="add-missing-namespaces-input"
ng-model="extractionMethod.addMissingNamespaces">
<label for="addMissingNamespaces"
uib-popover="{{'ttyg.agent.create_agent_modal.form.add_missing_namespaces.tooltip' | translate}}"
popover-trigger="mouseenter">{{
'ttyg.agent.create_agent_modal.form.add_missing_namespaces.label' | translate
}}</label>
</div>
</div>
<!-- FTS method settings -->
<div
ng-if="extractionMethod.expanded && extractionMethod.method === extractionMethods.FTS_SEARCH"
ng-class="{'has-error': agentSettingsForm.$error.FTSDisabled || agentSettingsForm.repositoryId.$invalid}"
class="extraction-method-options">
<button ng-if="agentFormModel.repositoryId" class="btn btn-link btn-sm pull-right"
ng-click="checkIfFTSEnabled()"
gdb-tooltip="{{'ttyg.agent.create_agent_modal.form.fts_search.btn.reload.tooltip' | translate}}">
<i class="fa fa-arrows-rotate"></i>
</button>
<div class="alert alert-danger missing-repositoryid-error mb-0"
ng-if="agentSettingsForm.repositoryId.$invalid">
{{'ttyg.agent.create_agent_modal.form.missing_repository_id' | translate}}
</div>
<div ng-if="!ftsEnabled && agentFormModel.repositoryId" class="fts-disabled-message"
ng-bind-html="getFTSDisabledHelpMessage()">
</div>
<div class="form-group max-triples" ng-show="ftsEnabled && agentFormModel.repositoryId">
<label for="{{extractionMethods.FTS_SEARCH + '_maxNumberOfTriplesPerCall'}}"
uib-popover="{{'ttyg.agent.create_agent_modal.form.fts_search_max_number_of_triples_per_call.tooltip' | translate}}"
popover-trigger="mouseenter">
{{'ttyg.agent.create_agent_modal.form.fts_search_max_number_of_triples_per_call.label'
|
translate}}
</label>
<input type="number" class="form-control" guide-selector="max-triples-per-call-input"
id="{{extractionMethods.FTS_SEARCH + '_maxNumberOfTriplesPerCall'}}"
name="maxNumberOfTriplesPerCall" min="0"
ng-model="extractionMethod.maxNumberOfTriplesPerCall"
placeholder="{{'ttyg.agent.create_agent_modal.form.fts_search_max_number_of_triples_per_call.placeholder' | translate}}">
</div>
</div>
<!-- Similarity method settings -->
<div ng-if="extractionMethod.expanded && extractionMethod.method === extractionMethods.SIMILARITY"
ng-class="{'has-error': agentSettingsForm.$error.missingIndex || agentSettingsForm.repositoryId.$invalid}"
class="extraction-method-options">
<button ng-if="agentFormModel.repositoryId" class="btn btn-link btn-sm pull-right"
ng-click="updateSimilaritySearchPanel()"
ng-disabled="disabled"
gdb-tooltip="{{'ttyg.agent.create_agent_modal.form.similarity_index.btn.reload.tooltip' | translate}}">
<i class="fa fa-arrows-rotate"></i>
</button>
<div class="alert alert-danger missing-repositoryid-error mb-0"
ng-if="agentSettingsForm.repositoryId.$invalid">
{{'ttyg.agent.create_agent_modal.form.missing_repository_id' | translate}}
</div>
<div ng-if="agentFormModel.repositoryId && !hasConnectorData()" class="no-similarity-index-message">
<div>{{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.message_1' |
translate}}
<a href="" ng-click="goToCreateSimilarityView($event)">
{{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.link_text_here_1' | translate}}
</a>
{{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.message_2' |
translate}}
<a href="" ng-click="goToConnectorsView($event)">
{{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.link_text_here_2' | translate}}
</a>
</div>
<div>{{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.message_3' | translate}}</div>
<div>
<a href="{{documentationUrlForSimilarity}}" target="_blank">{{'ttyg.agent.create_agent_modal.form.similarity_index.no_similarity_index.message_4' | translate}}</a>
<i class="fa fa-arrow-up-right-from-square"></i>
</div>
</div>
<div ng-show="hasConnectorData()">
<div class="form-group similarity-index">
<div class="similarity-layout"
ng-class="{'one-col': !shouldShowVectorFields(extractionMethod)}">
<div class="left-col">
<div class="connector-instances-group">
<label for="connectorInstances"
uib-popover="{{'ttyg.agent.create_agent_modal.form.similarity_connector.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.similarity_connector.label' | translate}}</label>
<span ng-if="extractionMethodLoaderFlags.similarity_search"
onto-loader-fancy
size="16"></span>
<select class="form-control"
id="connectorInstances"
name="connectorInstances"
guide-selector="similarity-connector-select"
ng-required="extractionMethod.selected"
ng-if="!extractionMethodLoaderFlags.similarity_search"
ng-model="extractionMethod.similarityIndex"
ng-change="onSimilarityIndexChange(extractionMethod)"
ng-options="option.value as option.label group by option.group for option in similarityOptionsGrouped">
</select>
<div class="alert alert-danger"
ng-if="extractionMethod.similarityIndex.$touched && extractionMethod.similarityIndex.$invalid">
{{'required.field' | translate}}
</div>
</div>
<div class="form-group similarity-index-threshold">
<label for="similarityIndexThreshold"
uib-popover="{{'ttyg.agent.create_agent_modal.form.similarity_threshold.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.similarity_threshold.label'
| translate}}</label>
<input type="text" class="form-control" id="similarityIndexThreshold"
name="similarityIndexThreshold" readonly
ng-model="extractionMethod.similarityIndexThreshold.value">
<input id="similarityIndexThresholdSlider"
name="similarityIndexThreshold"
type="range" ng-required="extractionMethod.selected"
min="{{extractionMethod.similarityIndexThreshold.minValue}}"
max="{{extractionMethod.similarityIndexThreshold.maxValue}}"
step="0.1"
ng-model="extractionMethod.similarityIndexThreshold.value"/>
</div>
<div class="form-group similarity-max-triples">
<label
for="{{extractionMethods.SIMILARITY + '_maxNumberOfTriplesPerCall'}}"
uib-popover="{{'ttyg.agent.create_agent_modal.form.similarity_search_max_number_of_triples_per_call.tooltip' | translate}}"
popover-trigger="mouseenter">
{{'ttyg.agent.create_agent_modal.form.similarity_search_max_number_of_triples_per_call.label'
| translate}}</label>
<input type="number" class="form-control"
id="{{extractionMethods.SIMILARITY + '_maxNumberOfTriplesPerCall'}}"
name="maxNumberOfTriplesPerCall" min="0"
ng-model="extractionMethod.maxNumberOfTriplesPerCall"
placeholder="{{'ttyg.agent.create_agent_modal.form.similarity_search_max_number_of_triples_per_call.placeholder' | translate}}">
</div>
</div>
<div class="right-col">
<div class="vector-fields-group"
ng-if="shouldShowVectorFields(extractionMethod)">
<label for="vectorFieldsSelect">{{'ttyg.agent.create_agent_modal.form.vector_fields_in_connector.label' | translate}}</label>
<multi-select-dropdown id="vectorFieldsSelect"
class="form-control"
items="vectorFields"
label-keys="vectorFieldsMultiselectLabels"
on-change="onVectorFieldsChange(selected, extractionMethod)"
placeholder="{{'ttyg.agent.create_agent_modal.form.vector_fields_in_connector.search_placeholder' | translate}}">
</multi-select-dropdown>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Retrieval method settings -->
<div
ng-if="extractionMethod.expanded && extractionMethod.method === extractionMethods.RETRIEVAL"
ng-class="{'has-error': agentSettingsForm.$error.missingConnector || agentSettingsForm.repositoryId.$invalid}"
class="extraction-method-options">
<button ng-if="agentFormModel.repositoryId" class="btn btn-link btn-sm pull-right"
ng-click="updateRetrievalConnectorPanel()"
ng-disabled="disabled"
gdb-tooltip="{{'ttyg.agent.create_agent_modal.form.retrieval_search.btn.reload.tooltip' | translate}}">
<i class="fa fa-arrows-rotate"></i>
</button>
<div class="alert alert-danger missing-repositoryid-error mb-0"
ng-if="agentSettingsForm.repositoryId.$invalid">
{{'ttyg.agent.create_agent_modal.form.missing_repository_id' | translate}}
</div>
<div ng-if="agentFormModel.repositoryId && !retrievalConnectors.length" class="no-retrieval-connector-message">
{{'ttyg.agent.create_agent_modal.form.retrieval_search.no_retrieval_connectors.message_1'
| translate}}
<a href="" ng-click="goToConnectorsView($event)">
{{'ttyg.agent.create_agent_modal.form.retrieval_search.no_retrieval_connectors.message_2'
| translate}}
</a>
{{'ttyg.agent.create_agent_modal.form.retrieval_search.no_retrieval_connectors.message_3'
| translate}}.
</div>
<div ng-show="retrievalConnectors.length">
<div class="form-group retrieval-connector">
<label for="retrievalConnectorInstance"
uib-popover="{{'ttyg.agent.create_agent_modal.form.connector_id.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.connector_id.label'
| translate}}</label>
<span ng-if="extractionMethodLoaderFlags.retrieval_search" onto-loader-fancy
size="16"></span>
<select class="form-control" id="retrievalConnectorInstance"
name="retrievalConnectorInstance"
ng-required="extractionMethod.selected"
ng-if="!extractionMethodLoaderFlags.retrieval_search"
ng-model="extractionMethod.retrievalConnectorInstance"
ng-options="retrievalConnector.value as retrievalConnector.label for retrievalConnector in retrievalConnectors">
</select>
<div class="alert alert-danger"
ng-if="extractionMethod.retrievalConnectorInstance.$touched && extractionMethod.retrievalConnectorInstance.$invalid">
{{'required.field' | translate}}
</div>
</div>
<div class="form-group query-template">
<label for="queryTemplate"
uib-popover="{{'ttyg.agent.create_agent_modal.form.query_template.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.query_template.label'
|
translate}}</label>
<textarea type="text" class="form-control" id="queryTemplate" name="queryTemplate"
rows="10" ng-required="extractionMethod.selected"
ng-minlength="extractionMethod.queryTemplate.minLength"
ng-maxlength="extractionMethod.queryTemplate.maxLength"
ng-model="extractionMethod.queryTemplate.value">
</textarea>
<div class="alert alert-danger"
ng-if="extractionMethod.name.$touched && extractionMethod.name.$invalid">
{{'required.field' | translate}}
</div>
</div>
<div class="form-group retrieval-connector-max-triples">
<label for="{{extractionMethods.RETRIEVAL + '_maxNumberOfTriplesPerCall'}}"
uib-popover="{{'ttyg.agent.create_agent_modal.form.retrieval_search_max_number_of_triples_per_call.tooltip' | translate}}"
popover-trigger="mouseenter">
{{'ttyg.agent.create_agent_modal.form.retrieval_search_max_number_of_triples_per_call.label'
| translate}}</label>
<input type="number" class="form-control"
id="{{extractionMethods.RETRIEVAL + '_maxNumberOfTriplesPerCall'}}"
name="maxNumberOfTriplesPerCall" min="0"
ng-model="extractionMethod.maxNumberOfTriplesPerCall"
placeholder="{{'ttyg.agent.create_agent_modal.form.retrieval_search_max_number_of_triples_per_call.placeholder' | translate}}">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-danger extraction-method-required-error"
ng-if="agentSettingsForm.extractionMethods.$touched && agentSettingsForm.extractionMethods.$invalid">
{{'ttyg.agent.create_agent_modal.form.extraction_method.required' | translate}}
</div>
</div>
<div id="additionalExtractionMethods" class="form-group additional-extraction-methods">
<label uib-popover="{{'ttyg.agent.create_agent_modal.form.additional_query_methods.tooltip' | translate}}"
popover-trigger="mouseenter">
{{'ttyg.agent.create_agent_modal.form.additional_query_methods.label' | translate}}
</label>
<div ng-repeat="extractionMethod in agentFormModel.additionalExtractionMethods.additionalExtractionMethods"
class="additional-extraction-method">
<div ng-if="ExtractionMethodTemplates[extractionMethod.method]">
<div ng-include="'js/angular/ttyg/templates/' + ExtractionMethodTemplates[extractionMethod.method] + '.html'"></div>
</div>
</div>
</div>
<div class="form-group user-instructions">
<div class="toolbar">
<label for="userInstruction"
uib-popover="{{'ttyg.agent.create_agent_modal.form.user_instruction.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.user_instruction.label' |
translate}}</label>
<div class="actions">
<copy-to-clipboard
tooltip-text="ttyg.agent.create_agent_modal.form.user_instruction.btn.copy_instruction.tooltip"
text-to-copy="{{agentFormModel.instructions.userInstruction}}"></copy-to-clipboard>
<button class="btn btn-link btn-sm create-chat-btn"
ng-click="onRestoreDefaultUserInstructions()"
gdb-tooltip="{{'ttyg.agent.create_agent_modal.form.user_instruction.btn.restore_default.tooltip' | translate}}">
<i class="fa fa-arrow-rotate-left"></i>
</button>
</div>
</div>
<textarea type="text" class="form-control" id="userInstruction" name="userInstruction" rows="5" guide-selector="user-instructions"
ng-model="agentFormModel.instructions.userInstruction"
placeholder="{{'ttyg.agent.create_agent_modal.form.user_instruction.placeholder' | translate}}">
</textarea>
</div>
<div class="text-xs-center">
<button type="button" ng-click="showAdvancedSettings = !showAdvancedSettings"
class="btn btn-link btn-sm toggle-advanced-settings">
<span ng-hide="showAdvancedSettings">{{'ttyg.agent.create_agent_modal.advanced_settings.show' | translate}}<em
class="icon-caret-down"></em></span>
<span ng-show="showAdvancedSettings">{{'ttyg.agent.create_agent_modal.advanced_settings.hide' | translate}}<em
class="icon-caret-up"></em></span>
</button>
</div>
<div ng-show="showAdvancedSettings" class="advanced-settings">
<div class="form-group system-instructions">
<div class="toolbar">
<label for="systemInstruction">
<span
uib-popover="{{'ttyg.agent.create_agent_modal.form.system_instruction.tooltip' | translate}}"
popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.system_instruction.label' | translate}}</span>
<i class="fa fa-triangle-exclamation text-warning overriding-system-instructions-warning"
ng-if="showSystemInstructionWarning"
uib-popover="{{'ttyg.agent.create_agent_modal.form.system_instruction.overriding_system_instruction_warning.body' | translate}}"
popover-trigger="mouseenter"></i>
</label>
<div class="actions">
<copy-to-clipboard
tooltip-text="ttyg.agent.create_agent_modal.form.system_instruction.btn.copy_instruction.tooltip"
text-to-copy="{{agentFormModel.instructions.systemInstruction}}"></copy-to-clipboard>
<button class="btn btn-link btn-sm create-chat-btn"
ng-click="onRestoreDefaultSystemInstructions()"
gdb-tooltip="{{'ttyg.agent.create_agent_modal.form.system_instruction.btn.restore_default.tooltip' | translate}}">
<i class="fa fa-arrow-rotate-left"></i>
</button>
</div>
</div>
<textarea type="text" class="form-control" id="systemInstruction" name="systemInstruction" rows="5"
placeholder="{{'ttyg.agent.create_agent_modal.form.system_instruction.placeholder' | translate}}"
ng-class="{'has-warning': showSystemInstructionWarning}"
ng-model="agentFormModel.instructions.systemInstruction"
ng-change="onSystemInstructionChange()">
</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="onExplainAgentSettings()" class="btn explain-agent-settings-btn">
{{'ttyg.agent.create_agent_modal.btn.explain_settings.label' | translate}}
</button>
<div>
<button type="button" ng-click="cancel()" class="btn cancel-btn">
{{'ttyg.agent.create_agent_modal.btn.cancel.label' | translate}}
</button>
<button type="button" ng-click="ok()" ng-disabled="agentSettingsForm.$invalid || savingAgent" guide-selector="save-agent-settings"
class="btn btn-primary save-agent-settings-btn">
<span>{{(operation === AGENT_OPERATION.EDIT ? 'ttyg.agent.create_agent_modal.btn.save.label'
: operation === AGENT_OPERATION.CLONE ? 'ttyg.agent.create_agent_modal.btn.save.label'
: 'ttyg.agent.create_agent_modal.btn.create.label') | translate}}</span>
<span class="saving-agent-loader" ng-if="savingAgent" onto-loader-fancy hide-message="true"
size="15"></span>
</button>
</div>
</div>