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 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 class="pull-right">
            <div ng-show="activeTab == 'trace' && $ctrl.quickTestResponse && $ctrl.quickTestResponse.fullTrace" class="mtop30">
                <a class="link-std mleft4 vat" ng-click="$ctrl.copyTraceToClipboard()" title="Copy trace to clipboard">
                    <i class="cursor-pointer" ng-class="{'dku-icon-checkmark-16': traceCopied, 'dku-icon-copy-step-16': !traceCopied}"></i>
                </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="$ctrl.agentToolType == 'LLMMeshLLMQuery' && $ctrl.quickTestResponse.response.output.response"
                         dku-foldable open="true">
                        <h4 class="foldable-title settings-section-title mtop8" ng-click="foldableToggle()">
                            <i class="{{foldableOpen ? 'icon-caret-down' : 'icon-caret-right'}}"/>
                            Text response
                        </h4>
                        <pre ng-show="foldableOpen" class="smart-log-tail-content mbot30">{{ $ctrl.quickTestResponse.response.output.response }}</pre>
                    </div>

                    <div ng-if="$ctrl.agentToolType == 'VectorStoreSearch' && $ctrl.quickTestResponse.response.output.documents"
                         dku-foldable open="true">
                        <h4 class="foldable-title settings-section-title mtop8" ng-click="foldableToggle()">
                            <i class="{{foldableOpen ? 'icon-caret-down' : 'icon-caret-right'}}"/>
                            <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" ng-show="foldableOpen">
                            <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>

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

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

                <div ng-if="$ctrl.quickTestResponse.response.error">
                    <h4 class="settings-section-title mtop8">Tool error <small><i class="dku-icon-warning-outline-16"/></small></h4>
                    <pre class="smart-log-tail-content">{{$ctrl.quickTestResponse.response.error | json}}</pre>
                </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 && $ctrl.quickTestResponse.fullTrace" class="smart-log-tail-content">{{$ctrl.quickTestResponse.fullTrace | json}}</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>