Test

                            </div>
        </div>
        <div class="alert alert-error mtop8 mbot0"
             ng-show="quickTestQueryEditor.quickTestQuery.dkuJSONError">JSON syntax error: <br/>
            {{quickTestQueryEditor.quickTestQuery.dkuJSONError}}
        </div>
    </form>

    <div>
        <button class="btn btn--primary btn--dku-icon" ng-click="$ctrl.quickTest()" ng-disabled="$ctrl.quickTestQuery.dkuJSONError || !$ctrl.quickTestEnabled">
            <i class="dku-icon-play-outline-16"></i>
            Run test
        </button>
    </div>
</div>

<div class="quicktest-tabs">
    <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="showFullResponse=false" ng-class="{'link-std': !showFullResponse}">Text response</a>
                <span class="mleft4">|</span>
                <a class="mleft4" ng-click="showFullResponse=true" ng-class="{'link-std': showFullResponse}">Full JSON response</a>
            </div>
            <div ng-show="activeTab == 'trace' && $ctrl.quickTestResponse && ($ctrl.quickTestResponse.fullTrace || $ctrl.quickTestResponse.traceOfPython)">
                <a ng-click="$scope.showFullTrace=false" ng-class="{'link-std': !$scope.showFullTrace}" title="Only include the trace of the LLM itself">LLM trace</a>
                <span class="mleft4">|</span>
                <a class="mleft4" ng-click="$scope.showFullTrace=true" ng-class="{'link-std': $scope.showFullTrace}" title="Include guardrails traces">Full trace</a>
                <a class="mleft16 btn btn--primary btn--icon btn--text"
                    toggle="tooltip"
                    title="Copy trace to clipboard">
                    <i class="cursor-pointer" 
                       ng-class="{'dku-icon-checkmark-16': traceCopied, 'dku-icon-trace-16': !traceCopied}"
                       ng-click="$ctrl.copyTraceToClipboard()">
                    </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">
                    <pre ng-if="!showFullResponse" class="smart-log-tail-content" style="padding: 10px; font-size: 12px;">{{ $ctrl.quickTestResponse.response.text }}</pre>
                    <pre ng-if="showFullResponse" class="smart-log-tail-content">{{ $ctrl.quickTestResponse.response | json }}</pre>
                    <prompt-studio-sources ng-if="$ctrl.canShowSources" sources="$ctrl.quickTestResponse.response.sources" class="mtop16"></prompt-studio-sources>
                </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>

        <div ng-if="$ctrl.quickTestResponse && !$scope.showFullTrace && !$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 && ($scope.showFullTrace && $ctrl.quickTestResponse.fullTrace || !$scope.showFullTrace && $ctrl.quickTestResponse.traceOfPython)" class="smart-log-tail-content" >{{ $scope.showFullTrace ? $ctrl.quickTestResponse.fullTrace : $ctrl.quickTestResponse.traceOfPython | json }}</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>