</div> </div> <div class="alert alert-error mtop8 mbot0" ng-show="quickTestQueryEditor.quickTestQuery.dkuJSONError">JSON syntax error: <br/> {{quickTestQueryEditor.quickTestQuery.dkuJSONError}} </div> <div class="alert alert-error mtop8 mbot0" ng-show="$ctrl.quickTestError && !quickTestQueryEditor.quickTestQuery.dkuJSONError">{{$ctrl.quickTestError}}</div> </form> <div> <button class="btn btn--primary btn--dku-icon" ng-click="$ctrl.quickTest()" ng-disabled="quickTestQueryEditor.quickTestQuery.dkuJSONError || !$ctrl.quickTestEnabled"> <i class="dku-icon-play-outline-16"></i> Run test </button> </div> </div> <div class="quicktest-tabs quicktest-tabs--test"> <div class="nav nav-tabs object-nav horizontal-flex"> <a class="tab" ng-click="activeTab = 'response'" ng-class="{enabled: activeTab == 'response'}">Response</a> <a class="tab" ng-click="activeTab = 'trace'" ng-class="{enabled: activeTab == 'trace'}">Trace</a> <a class="tab" ng-click="activeTab = 'logs'" ng-class="{enabled: activeTab == 'logs'}">Log</a> <div class="nav-tab--actions"> <div ng-show="activeTab == 'response' && $ctrl.quickTestResponse && $ctrl.quickTestResponse.response.ok"> <a ng-click="uiState.response='TEXT'" ng-class="{'link-std': uiState.response=='TEXT'}">Formatted response</a> <span class="mleft4">|</span> <a class="mleft4" ng-click="uiState.response='FULL'" ng-class="{'link-std': uiState.response=='FULL'}">Full JSON response</a> </div> <div ng-show="activeTab == 'trace' && $ctrl.quickTestResponse && ($ctrl.quickTestResponse.fullTrace || $ctrl.quickTestResponse.traceOfPython)"> <a ng-click="uiState.trace='LLM'" ng-class="{'link-std': uiState.trace=='LLM'}" title="Only include the trace of the LLM itself">LLM trace</a> <span class="mleft4">|</span> <a class="mleft4" ng-click="uiState.trace='FULL'" ng-class="{'link-std': uiState.trace=='FULL'}" title="Include guardrails traces">Full trace</a> <span class="mleft4">|</span> <a class="mleft4" ng-click="uiState.trace='GRAPHICAL'" ng-class="{'link-std': uiState.trace=='GRAPHICAL'}" title="View full trace as tree">Graphical trace</a> <a class="mleft16 btn btn--primary btn--icon btn--text" toggle="tooltip" title="Copy trace to clipboard" ng-click="$ctrl.copyTraceToClipboard()"> <i class="cursor-pointer" ng-class="{'dku-icon-checkmark-16': traceCopied, 'dku-icon-trace-16': !traceCopied}"></i> </a> <a class="btn btn--primary btn--icon btn--text" toggle="tooltip" title="Explore trace"> <open-trace-explorer-btn trace="$ctrl.quickTestResponse.fullTrace"></open-trace-explorer-btn> </a> </div> </div> </div> <div class="quicktest-tab" ng-if="activeTab == 'response'"> <div ng-if="!$ctrl.quickTestResponse" class="alert alert-info"> Run the test query to get a response </div> <div ng-if="$ctrl.quickTestResponse"> <div ng-if="$ctrl.quickTestResponse.error"> <div ng-if="$ctrl.quickTestResponse.error" api-error-alert="$ctrl.quickTestResponse.error" closable="true" error-foldable="false"/> </div> <div ng-if="!$ctrl.quickTestResponse.error"> <div ng-if="!$ctrl.quickTestResponse.response.ok" class="alert alert-error"> {{$ctrl.quickTestResponse.response.errorMessage}} </div> <div ng-if="$ctrl.quickTestResponse.response.ok"> <div ng-if="uiState.response=='TEXT'"> <pre class="smart-log-tail-content" style="padding: 10px; font-size: 12px;">{{ $ctrl.quickTestResponse.response.text }}</pre> <prompt-studio-document-sources sources="$ctrl.quickTestResponse.response.additionalInformation.sources" class="mtop16"></prompt-studio-document-sources> <agent-artifacts artifacts="$ctrl.quickTestResponse.response.artifacts" class="mtop16"></agent-artifacts> </div> <div ng-if="uiState.response=='FULL'"> <pre class="smart-log-tail-content">{{ $ctrl.quickTestResponse.response | json }}</pre> </div> </div> </div> </div> </div> <div class="quicktest-tab" ng-if="activeTab == 'trace'"> <div ng-if="!$ctrl.quickTestResponse" class="alert alert-info"> Run the test query first </div> <div ng-if="$ctrl.quickTestResponse && !$ctrl.quickTestResponse.fullTrace && !$ctrl.quickTestResponse.traceOfPython" class="alert alert-info"> No trace recorded </div> <pre ng-if="$ctrl.quickTestResponse && uiState.trace=='FULL' && $ctrl.quickTestResponse.fullTrace" class="smart-log-tail-content">{{$ctrl.quickTestResponse.fullTrace | json }}</pre> <div ng-if="$ctrl.quickTestResponse && uiState.trace=='LLM' && !$ctrl.quickTestResponse.traceOfPython && $ctrl.quickTestResponse.fullTrace" class="alert alert-info"> No LLM trace recorded, check the full trace instead </div> <pre ng-if="$ctrl.quickTestResponse && uiState.trace=='LLM' && $ctrl.quickTestResponse.traceOfPython" class="smart-log-tail-content">{{ $ctrl.quickTestResponse.traceOfPython | json }}</pre> <div ng-if="$ctrl.quickTestResponse && uiState.trace=='GRAPHICAL' && !$ctrl.graphicalTrace"> No Graphical trace generated, check the full trace instead </div> <pre ng-if="$ctrl.quickTestResponse && uiState.trace=='GRAPHICAL' && $ctrl.graphicalTrace" class="smart-log-tail-content">{{ $ctrl.graphicalTrace }}</pre> </div> <div class="quicktest-tab" ng-if="activeTab == 'logs'"> <div ng-if="!$ctrl.quickTestResponse" class="alert alert-info"> Run the test query first </div> <div ng-if="$ctrl.quickTestResponse && !$ctrl.quickTestResponse.log" class="alert alert-info"> No logs recorded </div> <pre ng-if="$ctrl.quickTestResponse && $ctrl.quickTestResponse.log" smart-log-tail="$ctrl.quickTestResponse.log" /> </div> </div>