Test

                            </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">
        <div class="noflex">
            <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>
            <a class="tab" ng-click="activeTab = 'schema'" ng-class="{enabled: activeTab == 'schema'}" ng-show="$ctrl.agentToolType == 'DatasetRowAppend' || $ctrl.agentToolType == 'DatasetRowLookup'">Dataset Schema</a>
            <a class="tab" ng-click="activeTab = 'descriptor'" ng-class="{enabled: activeTab == 'descriptor'}">Tool Descriptor</a>
        </div>

        <div class="nav-tab--actions">
            <div ng-show="activeTab == 'response' && $ctrl.quickTestResponse && $ctrl.quickTestResponse.response && !$ctrl.quickTestResponse.response.error && $ctrl.quickTestResponse.response.output.text">
                <a ng-click="showFullResponse=false" ng-class="{'link-std': !showFullResponse}">Formatted 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">
                <a class="mleft4" ng-click="uiState.trace='FULL'" ng-class="{'link-std': uiState.trace=='FULL'}" title="Include guardrails traces">Text 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 ng-if="activeTab == 'response'" class="quicktest-tab">
        <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 api-error-alert="$ctrl.quickTestResponse.error" closable="true" error-foldable="false"/>
            </div>

            <div ng-if="!$ctrl.quickTestResponse.error">
                <div ng-if="!$ctrl.quickTestResponse.response.error">

                    <div ng-if="showFullResponse">
                        <pre class="smart-log-tail-content">{{ $ctrl.quickTestResponse.response | json }}</pre>
                    </div>

                    <div ng-if="!showFullResponse">
                        <div ng-switch on="$ctrl.agentToolType">

                            <div ng-switch-when="LLMMeshLLMQuery">
                                <div ng-if="$ctrl.quickTestResponse.response.output.response">
                                    <h4 class="settings-section-title mtop8">Text response</h4>
                                    <pre class="smart-log-tail-content mbot30">{{ $ctrl.quickTestResponse.response.output.response }}</pre>
                                </div>
                                <div ng-if="!$ctrl.quickTestResponse.response.output.response">
                                    <h4 class="settings-section-title mtop8">Tool output</h4>
                                    <div class="alert alert-error">Invalid output from LLM Mesh query tool</div>
                                </div>
                            </div>

                            <div ng-switch-when="VectorStoreSearch">
                                <div ng-if="$ctrl.quickTestResponse.response.output.documents">
                                    <h4 class="settings-section-title mtop8">
                                        <ng-pluralize count="$ctrl.quickTestResponse.response.output.documents.length"
                                                      when="{'0': 'No documents',
                                                     '1': '1 document',
                                                     'other': '{} documents'}"></ng-pluralize>
                                    </h4>
                                    <div class="tool-agent--documents">
                                        <ul>
                                            <li ng-repeat="document in $ctrl.quickTestResponse.response.output.documents">
                                                <span class="prompt-studio-sources__desc">Content:</span> {{ document.text }}
                                                <div ng-repeat="(meta, desc) in document.metadata">
                                                    <span class="prompt-studio-sources__desc">{{ meta }}:</span> {{ desc }}
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div ng-if="!$ctrl.quickTestResponse.response.output.documents">
                                    <h4 class="settings-section-title mtop8">Tool output</h4>
                                    <div class="alert alert-error">Invalid output from vector store search tool</div>
                                </div>
                            </div>

                            <div ng-switch-when="GRELCalculator">
                                <div ng-if="$ctrl.quickTestResponse.response.output.result">
                                    <h4 class="settings-section-title mtop8">Result of calculation</h4>
                                    <pre class="smart-log-tail-content mbot30">{{ $ctrl.quickTestResponse.response.output.result }}</pre>
                                </div>
                                <div ng-if="!$ctrl.quickTestResponse.response.output.result">
                                    <h4 class="settings-section-title mtop8">Tool output</h4>
                                    <div class="alert alert-error">Invalid output from calculator tool</div>
                                </div>
                            </div>

                            <div ng-switch-default>
                                <h4 class="settings-section-title mtop8">Tool output</h4>
                                <pre class="smart-log-tail-content">{{$ctrl.quickTestResponse.response.output | json}}</pre>
                            </div>

                        </div>

                        <h4 class="settings-section-title">Artifacts</h4>
                        <agent-artifacts artifacts="$ctrl.quickTestResponse.response.artifacts" class="mtop16"></agent-artifacts>
                        <pre ng-if="$ctrl.quickTestResponse.response.artifacts == false" class="smart-log-tail-content">No artifacts</pre>

                        <h4 class="settings-section-title">Sources</h4>
                        <div ng-if="$ctrl.quickTestResponse.response.sources != false">
                            <pre class="smart-log-tail-content">{{$ctrl.quickTestResponse.response.sources | json}}</pre>
                        </div>
                        <pre ng-if="$ctrl.quickTestResponse.response.sources == false" class="smart-log-tail-content">No sources</pre>

                    </div>
                </div>

                <div ng-if="$ctrl.quickTestResponse.response.error">
                    <h4 class="settings-section-title mtop8">Tool error <i class="dku-icon-warning-outline-16" style="vertical-align: bottom"/></h4>
                    <div class="alert alert-warning">
                        <pre class="smart-log-tail-content">{{$ctrl.quickTestResponse.response.error}}</pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div ng-show="activeTab == 'trace'" class="quicktest-tab">
        <div ng-if="!$ctrl.quickTestResponse" class="alert alert-info">
            Run the test query first
        </div>

        <div ng-if="$ctrl.quickTestResponse && !$ctrl.quickTestResponse.fullTrace" 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=='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 ng-show="activeTab == 'logs'" class="quicktest-tab">
        <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 ng-show="activeTab == 'schema' && ($ctrl.agentToolType == 'DatasetRowAppend' || $ctrl.agentToolType == 'DatasetRowLookup')" class="quicktest-tab">
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th>Column Name</th>
                <th>Type</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="column in $ctrl.datasetSchema.columns">
                <td>{{ column.name }}</td>
                <td>{{ column.type }}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div ng-show="activeTab == 'descriptor'" class="quicktest-tab">
        <div ng-if="$ctrl.descriptorError" api-error-alert="$ctrl.descriptorError" closable="true" error-foldable="false"/>
        <pre ng-if="$ctrl.descriptor" class="smart-log-tail-content mbot16">{{ $ctrl.descriptor | json }}</pre>
        <a class="btn btn--secondary"  ng-click="$ctrl.loadDescriptor()">
            <i class="icon-refresh"></i>
            <span ng-if="!$ctrl.descriptor">Load</span><span ng-if="$ctrl.descriptor">Reload</span>
        </a>
    </div>
</div>