<pa-accordion>
  <pa-accordion-item
    #searchBox
    id="search-box"
    [itemTitle]="'search.configuration.search-box.section-title' | translate"
    [description]="'search.configuration.search-box.section-description' | translate"
    (expandedChange)="updateHeight()">
    <pa-accordion-item-body>
      <ng-container [formGroup]="searchBoxForm">
        <div class="config-form-field">
          <pa-toggle
            formControlName="setPreselectedFilters"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="updateHeight()">
            <span class="toggle-label">
              {{ 'search.configuration.search-box.preselected-filters.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.search-box.preselected-filters.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="preselectedFiltersEnabled">
            <nsi-info-card>
              <span [innerHTML]="'search.configuration.search-box.preselected-filters.info-box' | translate"></span>
            </nsi-info-card>
            <nsi-expandable-textarea
              formControlName="preselectedFilterExpression"
              resizable
              rows="4"
              modalTitle="search.configuration.search-box.preselected-filters.filter-expression.textarea-label"
              (resizing)="updateHeight()">
              {{ 'search.configuration.search-box.preselected-filters.filter-expression.textarea-label' | translate }}
            </nsi-expandable-textarea>
          </div>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="rephraseQuery"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="updateHeight()">
            <span class="toggle-label">
              {{ 'search.configuration.search-box.rephrase.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.search-box.rephrase.toggle-description' | translate }}
          </div>
        </div>
        @if (rephraseQueryEnabled) {
          <div class="config-form-field">
            <pa-toggle
              formControlName="useRephrasePrompt"
              withBackground
              spaceBetweenLabelAndToggle
              (valueChange)="updateHeight()">
              <span
                class="toggle-label"
                fullProBadge>
                {{ 'search.configuration.search-box.rephrase-prompt.toggle-label' | translate }}
              </span>
            </pa-toggle>
            <div class="config-form-help">
              {{ 'search.configuration.search-box.rephrase-prompt.toggle-description' | translate }}
            </div>
            <div
              class="extra-fields"
              [class.visible]="useRephrasePromptEnabled">
              <nsi-expandable-textarea
                formControlName="rephrasePrompt"
                resizable
                rows="4"
                modalTitle="search.configuration.search-box.rephrase-prompt.textarea-label"
                (resizing)="updateHeight()">
                {{ 'search.configuration.search-box.rephrase-prompt.textarea-label' | translate }}
              </nsi-expandable-textarea>
            </div>
          </div>
        }
        @if (((semanticModels | async) || []).length > 2 || multipleSources) {
          <div class="config-form-field">
            <div class="title-xs title-with-badge">
              {{ 'search.configuration.search-box.semantic-model.title' | translate }}
              <nsi-badge kind="tertiary">{{ 'generic.badge.beta' | translate }}</nsi-badge>
            </div>
            <div class="config-form-help">
              {{ 'search.configuration.search-box.semantic-model.description' | translate }}
            </div>
            @if (multipleSources) {
              <nsi-info-card type="warning">
                {{ 'retrieval-agents.workflow.node-types.advanced_ask.form.vectorset-warning' | translate }}
              </nsi-info-card>
            } @else {
              <div class="extra-fields visible">
                <pa-select
                  formControlName="vectorset"
                  [label]="'search.configuration.search-box.semantic-model.select-label' | translate"
                  [options]="(semanticModels | async) || []"></pa-select>
              </div>
            }
          </div>
        }
        <div class="config-form-field">
          <pa-toggle
            formControlName="semanticReranking"
            withBackground
            spaceBetweenLabelAndToggle>
            <span class="toggle-label">
              {{ 'search.configuration.search-box.semantic-reranking.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.search-box.semantic-reranking.toggle-description' | translate }}
          </div>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="rrfBoosting"
            withBackground
            spaceBetweenLabelAndToggle>
            <span class="toggle-label">
              {{ 'search.configuration.search-box.rrf-boosting.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.search-box.rrf-boosting.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="rrfBoostingEnabled">
            <pa-input
              formControlName="rrfSemanticBoosting"
              type="number"
              [help]="'search.configuration.search-box.rrf-boosting.help' | translate"
              step="0.1"></pa-input>
          </div>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="limitParagraphs"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="updateHeight()">
            <span class="toggle-label">
              {{ 'search.configuration.search-box.limit-paragraphs.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.search-box.limit-paragraphs.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="limitParagraphsEnabled">
            <pa-input
              externalLabel
              formControlName="paragraphsLimit"
              type="number"></pa-input>
          </div>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="showHiddenResources"
            withBackground
            spaceBetweenLabelAndToggle>
            <span class="toggle-label">
              {{ 'search.configuration.search-box.show-hidden-resources.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.search-box.show-hidden-resources.toggle-description' | translate }}
          </div>
        </div>
        <div class="config-form-field">
          <div class="title-xs">{{ 'search.configuration.search-box.select-results-used.title' | translate }}</div>
          <pa-radio-group formControlName="generateAnswerWith">
            <pa-radio value="semantic-and-full-text">
              {{ 'search.configuration.search-box.select-results-used.semantic-and-full-text' | translate }}
            </pa-radio>
            <pa-radio value="only-semantic">
              {{ 'search.configuration.search-box.select-results-used.semantic-only' | translate }}
            </pa-radio>
          </pa-radio-group>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="useSecurityGroups"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="updateHeight()">
            <span class="toggle-label">
              {{ 'search.configuration.search-box.security-groups.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.search-box.security-groups.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="securityGroupsEnabled">
            <nsi-info-card type="warning">
              {{ 'search.configuration.search-box.security-groups.info-box' | translate }}
            </nsi-info-card>
            <nsi-expandable-textarea
              formControlName="securityGroups"
              resizable
              rows="4"
              help="search.configuration.search-box.security-groups.textarea-help"
              modalTitle="search.configuration.search-box.security-groups.toggle-label"
              (resizing)="updateHeight()">
              {{ 'search.configuration.search-box.security-groups.toggle-label' | translate }}
            </nsi-expandable-textarea>
          </div>
        </div>
      </ng-container>
    </pa-accordion-item-body>
  </pa-accordion-item>
  <pa-accordion-item
    #generativeAnswer
    id="generative-answer"
    [itemTitle]="'search.configuration.generative-answer.section-title' | translate"
    [description]="'search.configuration.generative-answer.section-description' | translate"
    (expandedChange)="updateHeight()">
    <pa-accordion-item-body>
      <ng-container [formGroup]="generativeAnswerForm">
        <div class="config-form-field">
          <pa-toggle
            formControlName="generateAnswer"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="updateHeight()">
            <span class="toggle-label">
              {{ 'search.configuration.generative-answer.generate-answer.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.generative-answer.generate-answer.toggle-description' | translate }}
          </div>
        </div>
        @if (generateAnswerEnabled) {
          <div class="config-form-field">
            <pa-toggle
              formControlName="usePrompt"
              withBackground
              spaceBetweenLabelAndToggle
              (valueChange)="updateHeight()">
              <span class="toggle-label">
                {{ 'search.configuration.generative-answer.prompt.toggle-label' | translate }}
              </span>
            </pa-toggle>
            <div class="config-form-help">
              {{ 'search.configuration.generative-answer.prompt.toggle-description' | translate }}
            </div>
            <div
              class="extra-fields"
              [class.visible]="usePromptEnabled">
              <nsi-expandable-textarea
                formControlName="prompt"
                resizable
                rows="4"
                help="search.configuration.generative-answer.prompt.textarea-help"
                modalTitle="search.configuration.generative-answer.prompt.textarea-label"
                (resizing)="updateHeight()">
                {{ 'search.configuration.generative-answer.prompt.textarea-label' | translate }}
              </nsi-expandable-textarea>
            </div>
          </div>
          <div class="config-form-field">
            <pa-toggle
              formControlName="useSystemPrompt"
              withBackground
              spaceBetweenLabelAndToggle
              (valueChange)="updateHeight()">
              <span class="toggle-label">
                {{ 'search.configuration.generative-answer.system-prompt.toggle-label' | translate }}
              </span>
            </pa-toggle>
            <div class="config-form-help">
              {{ 'search.configuration.generative-answer.system-prompt.toggle-description' | translate }}
            </div>
            <div
              class="extra-fields"
              [class.visible]="useSystemPromptEnabled">
              <nsi-expandable-textarea
                formControlName="systemPrompt"
                resizable
                rows="4"
                help="search.configuration.generative-answer.prompt.textarea-help"
                modalTitle="search.configuration.generative-answer.system-prompt.textarea-label"
                (resizing)="updateHeight()">
                {{ 'search.configuration.generative-answer.system-prompt.textarea-label' | translate }}
              </nsi-expandable-textarea>
            </div>
          </div>
          <div class="config-form-field">
            <pa-toggle
              formControlName="limitTokenConsumption"
              withBackground
              spaceBetweenLabelAndToggle
              (valueChange)="updateHeight()">
              <span class="toggle-label">
                {{ 'search.configuration.generative-answer.limit-token.toggle-label' | translate }}
              </span>
            </pa-toggle>
            <div class="config-form-help">
              {{ 'search.configuration.generative-answer.limit-token.toggle-description' | translate }}
            </div>
            <div
              class="extra-fields"
              [class.visible]="limitTokenConsumptionEnabled">
              <pa-input
                formControlName="tokenConsumptionLimit"
                type="number">
                {{ 'search.configuration.generative-answer.limit-token.max-input' | translate }}
              </pa-input>
            </div>
            <div
              class="extra-fields"
              [class.visible]="limitTokenConsumptionEnabled">
              <pa-input
                formControlName="outputTokenConsumptionLimit"
                type="number">
                {{ 'search.configuration.generative-answer.limit-token.max-output' | translate }}
              </pa-input>
            </div>
          </div>

          <ng-container formGroupName="ragStrategies">
            <div class="subsection-title">
              {{ 'search.configuration.generative-answer.rag-strategies.title' | translate }}
            </div>
            <div class="config-form-field">
              <pa-toggle
                formControlName="includeTextualHierarchy"
                withBackground
                spaceBetweenLabelAndToggle
                (valueChange)="updateHeight()">
                <span class="toggle-label">
                  {{
                    'search.configuration.generative-answer.rag-strategies.textual-hierarchy.toggle-label' | translate
                  }}
                </span>
              </pa-toggle>
              <div class="config-form-help">
                {{
                  'search.configuration.generative-answer.rag-strategies.textual-hierarchy.toggle-description'
                    | translate
                }}
              </div>
            </div>
            <div class="config-form-field">
              <pa-toggle
                formControlName="includeNeighbouringParagraphs"
                withBackground
                spaceBetweenLabelAndToggle
                (valueChange)="updateHeight()">
                <span class="toggle-label">
                  {{
                    'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.toggle-label'
                      | translate
                  }}
                </span>
              </pa-toggle>
              <div class="config-form-help">
                {{
                  'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.toggle-description'
                    | translate
                }}
              </div>
              <div
                class="extra-fields"
                [class.visible]="includeNeighbouringParagraphsEnabled">
                <div>
                  <label
                    for="before"
                    class="extra-label">
                    {{
                      'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.preceding'
                        | translate
                    }}
                  </label>
                  <pa-input
                    id="before"
                    formControlName="precedingParagraphs"
                    type="number"
                    externalLabel></pa-input>
                </div>
                <div>
                  <label
                    for="after"
                    class="extra-label">
                    {{
                      'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.succeeding'
                        | translate
                    }}
                  </label>
                  <pa-input
                    id="after"
                    formControlName="succeedingParagraphs"
                    type="number"
                    externalLabel></pa-input>
                </div>
              </div>
            </div>
            <div class="config-form-field">
              <pa-toggle
                formControlName="entireResourceAsContext"
                withBackground
                spaceBetweenLabelAndToggle
                (valueChange)="updateHeight()">
                <span class="toggle-label">
                  {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.toggle-label' | translate }}
                </span>
              </pa-toggle>
              <div class="config-form-help">
                {{
                  'search.configuration.generative-answer.rag-strategies.entire-resource.toggle-description' | translate
                }}
              </div>
              <div
                class="extra-fields"
                [class.visible]="entireResourceAsContextEnabled">
                <div class="extra-label">
                  {{
                    'search.configuration.generative-answer.rag-strategies.entire-resource.limit-resources' | translate
                  }}
                </div>
                <pa-input
                  formControlName="maxNumberOfResources"
                  type="number">
                  {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.input-label' | translate }}
                </pa-input>
              </div>
              <div
                class="extra-fields"
                [class.visible]="entireResourceAsContextEnabled">
                <pa-toggle
                  formControlName="includeRemaining"
                  spaceBetweenLabelAndToggle>
                  <span class="toggle-label">
                    {{
                      'search.configuration.generative-answer.rag-strategies.entire-resource.include-remaining-label'
                        | translate
                    }}
                  </span>
                </pa-toggle>
              </div>
              <div
                class="extra-fields"
                [class.visible]="entireResourceAsContextEnabled">
                <div class="extra-label">
                  {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.exclude' | translate }}
                </div>
                <pa-input formControlName="excludeFilter">
                  {{
                    'search.configuration.generative-answer.rag-strategies.entire-resource.exclude-label' | translate
                  }}
                </pa-input>
              </div>
            </div>
            <div class="config-form-field">
              <pa-toggle
                formControlName="metadatasRagStrategy"
                withBackground
                spaceBetweenLabelAndToggle
                (valueChange)="updateHeight()">
                <span class="toggle-label">
                  {{ 'search.configuration.generative-answer.rag-strategies.metadatas.toggle-label' | translate }}
                </span>
              </pa-toggle>
              <div class="config-form-help">
                {{ 'search.configuration.generative-answer.rag-strategies.metadatas.toggle-description' | translate }}
              </div>
              <div
                class="extra-fields"
                [class.visible]="metadatasEnabled"
                formGroupName="metadatas">
                @for (metadata of metadataIds; track metadata) {
                  <pa-checkbox [formControlName]="metadata">
                    <code>{{ metadata }}</code>
                  </pa-checkbox>
                }
              </div>
            </div>
            @if (isGraphSearchEnabled | async) {
              <div class="config-form-field">
                <pa-toggle
                  formControlName="graphRagStrategy"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateHeight()">
                  <span class="toggle-label">
                    {{ 'search.configuration.generative-answer.rag-strategies.graph.toggle-label' | translate }}
                    <nsi-badge kind="tertiary">BETA</nsi-badge>
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{ 'search.configuration.generative-answer.rag-strategies.graph.toggle-description' | translate }}
                </div>
                <div
                  class="extra-fields"
                  [class.visible]="graphEnabled"
                  formGroupName="graph">
                  <pa-input
                    formControlName="hops"
                    type="number"
                    [help]="'search.configuration.generative-answer.rag-strategies.graph.hops-description' | translate">
                    {{ 'search.configuration.generative-answer.rag-strategies.graph.hops' | translate }}
                  </pa-input>
                  <pa-input
                    formControlName="top_k"
                    type="number"
                    [help]="
                      'search.configuration.generative-answer.rag-strategies.graph.top_k-description' | translate
                    ">
                    {{ 'search.configuration.generative-answer.rag-strategies.graph.top_k' | translate }}
                  </pa-input>
                  <pa-checkbox
                    formControlName="exclude_processor_relations"
                    [help]="
                      'search.configuration.generative-answer.rag-strategies.graph.exclude_processor_relations_help'
                        | translate
                    ">
                    {{
                      'search.configuration.generative-answer.rag-strategies.graph.exclude_processor_relations'
                        | translate
                    }}
                  </pa-checkbox>
                  <pa-checkbox
                    formControlName="relation_text_as_paragraphs"
                    [help]="
                      'search.configuration.generative-answer.rag-strategies.graph.relation_text_as_paragraphs_help'
                        | translate
                    ">
                    {{
                      'search.configuration.generative-answer.rag-strategies.graph.relation_text_as_paragraphs'
                        | translate
                    }}
                  </pa-checkbox>
                  <pa-checkbox
                    formControlName="generative_relation_ranking"
                    [help]="
                      'search.configuration.generative-answer.rag-strategies.graph.generative_relation_ranking_help'
                        | translate
                    ">
                    {{
                      'search.configuration.generative-answer.rag-strategies.graph.generative_relation_ranking'
                        | translate
                    }}
                  </pa-checkbox>
                  <pa-checkbox
                    formControlName="suggest_query_entity_detection"
                    [help]="
                      'search.configuration.generative-answer.rag-strategies.graph.suggest_query_entity_detection_help'
                        | translate
                    ">
                    {{
                      'search.configuration.generative-answer.rag-strategies.graph.suggest_query_entity_detection'
                        | translate
                    }}
                  </pa-checkbox>
                </div>
              </div>
            }
            <div class="config-form-field">
              <pa-toggle
                formControlName="fieldsAsContext"
                withBackground
                spaceBetweenLabelAndToggle
                (valueChange)="updateHeight()">
                <span class="toggle-label">
                  {{ 'search.configuration.generative-answer.rag-strategies.specific-fields.toggle-label' | translate }}
                </span>
              </pa-toggle>
              <div class="config-form-help">
                {{
                  'search.configuration.generative-answer.rag-strategies.specific-fields.toggle-description' | translate
                }}
              </div>
              <div
                class="extra-fields"
                [class.visible]="fieldsAsContextEnabled">
                <nsi-expandable-textarea
                  formControlName="fieldIds"
                  resizable
                  rows="4"
                  modalTitle="search.configuration.generative-answer.rag-strategies.specific-fields.field-ids.textarea-label"
                  (resizing)="updateHeight()">
                  {{
                    'search.configuration.generative-answer.rag-strategies.specific-fields.field-ids.textarea-label'
                      | translate
                  }}
                </nsi-expandable-textarea>
                <nsi-info-card>
                  {{
                    'search.configuration.generative-answer.rag-strategies.specific-fields.field-ids.info-box'
                      | translate
                  }}
                </nsi-info-card>
                <nsi-expandable-textarea
                  formControlName="dataAugmentationFieldPrefixes"
                  resizable
                  rows="4"
                  modalTitle="search.configuration.generative-answer.rag-strategies.specific-fields.field-prefixes.textarea-label"
                  (resizing)="updateHeight()">
                  {{
                    'search.configuration.generative-answer.rag-strategies.specific-fields.field-prefixes.textarea-label'
                      | translate
                  }}
                </nsi-expandable-textarea>
                <nsi-info-card>
                  {{
                    'search.configuration.generative-answer.rag-strategies.specific-fields.field-prefixes.info-box'
                      | translate
                  }}
                </nsi-info-card>
              </div>
            </div>
            <div class="config-form-field">
              <pa-toggle
                formControlName="conversationalRagStrategy"
                withBackground
                spaceBetweenLabelAndToggle
                (valueChange)="updateHeight()">
                <span class="toggle-label">
                  {{ 'search.configuration.generative-answer.rag-strategies.conversational.toggle-label' | translate }}
                </span>
              </pa-toggle>
              <div class="config-form-help">
                {{
                  'search.configuration.generative-answer.rag-strategies.conversational.toggle-description' | translate
                }}
              </div>
              <div
                class="extra-fields"
                [class.visible]="conversationalStrategyEnabled"
                formGroupName="conversationOptions">
                <pa-checkbox formControlName="attachmentsText">
                  {{
                    'search.configuration.generative-answer.rag-strategies.conversational.option.attachments_text'
                      | translate
                  }}
                </pa-checkbox>
                <pa-checkbox formControlName="attachmentsImages">
                  {{
                    'search.configuration.generative-answer.rag-strategies.conversational.option.attachments_images'
                      | translate
                  }}
                </pa-checkbox>
                <pa-checkbox formControlName="full">
                  {{ 'search.configuration.generative-answer.rag-strategies.conversational.option.full' | translate }}
                </pa-checkbox>
              </div>
              <div
                class="extra-fields"
                [class.visible]="conversationalStrategyEnabled && !fullMessagesEnabled">
                <div class="extra-label">
                  {{ 'search.configuration.generative-answer.rag-strategies.conversational.max-messages' | translate }}
                </div>
                <pa-input
                  formControlName="maxMessages"
                  type="number">
                  {{ 'search.configuration.generative-answer.rag-strategies.conversational.input-label' | translate }}
                </pa-input>
              </div>
              <div></div>
            </div>
            @if (isRagImagesEnabled | async) {
              <div class="config-form-field">
                <pa-toggle
                  formControlName="includePageImages"
                  withBackground
                  spaceBetweenLabelAndToggle
                  (valueChange)="updateHeight()">
                  <span class="toggle-label">
                    {{ 'search.configuration.generative-answer.rag-strategies.page-images.toggle-label' | translate }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{
                    'search.configuration.generative-answer.rag-strategies.page-images.toggle-description' | translate
                  }}
                </div>
                <div
                  class="extra-fields"
                  [class.visible]="includePageImagesEnabled">
                  <div class="extra-label">
                    {{ 'search.configuration.generative-answer.rag-strategies.page-images.limit-images' | translate }}
                  </div>
                  <pa-input
                    formControlName="maxNumberOfImages"
                    type="number">
                    {{ 'search.configuration.generative-answer.rag-strategies.page-images.input-label' | translate }}
                  </pa-input>
                </div>
              </div>
              <div class="config-form-field">
                <pa-toggle
                  formControlName="includeParagraphImages"
                  withBackground
                  spaceBetweenLabelAndToggle>
                  <span class="toggle-label">
                    {{
                      'search.configuration.generative-answer.rag-strategies.paragraph-images.toggle-label' | translate
                    }}
                  </span>
                </pa-toggle>
                <div class="config-form-help">
                  {{
                    'search.configuration.generative-answer.rag-strategies.paragraph-images.toggle-description'
                      | translate
                  }}
                </div>
              </div>
            }
          </ng-container>
        }
      </ng-container>
    </pa-accordion-item-body>
  </pa-accordion-item>

  <pa-accordion-item
    #resultDisplay
    id="generative-answer"
    [itemTitle]="'retrieval-agents.workflow.node-types.advanced_ask.form.citations-and-json' | translate"
    (expandedChange)="updateHeight()">
    <pa-accordion-item-body>
      <ng-container [formGroup]="resultDisplayForm">
        <div class="config-form-field">
          <div class="extra-fields visible">
            <pa-radio-group
              formControlName="showResultType"
              (valueChange)="updateHeight()">
              <pa-radio value="all-resources">
                {{ 'retrieval-agents.workflow.node-types.advanced_ask.form.no-citations' | translate }}
              </pa-radio>
              <pa-radio
                value="citations"
                help="search.configuration.result-display.display-results.citations-radio-help">
                {{ 'retrieval-agents.workflow.node-types.advanced_ask.form.citations' | translate }}
              </pa-radio>
              <pa-radio
                value="llmCitations"
                help="search.configuration.result-display.display-results.llm-citations-radio-help">
                {{ 'retrieval-agents.workflow.node-types.advanced_ask.form.llm-citations' | translate }}
              </pa-radio>
            </pa-radio-group>
          </div>
        </div>
        @if (citationsEnabled) {
          <div class="config-form-field">
            <pa-toggle
              formControlName="customizeThreshold"
              withBackground
              spaceBetweenLabelAndToggle
              (valueChange)="updateHeight()">
              <span class="toggle-label">
                {{ 'search.configuration.result-display.citation-threshold.toggle-label' | translate }}
              </span>
            </pa-toggle>
            <div class="config-form-help">
              {{ 'search.configuration.result-display.citation-threshold.toggle-description' | translate }}
            </div>
            <div
              class="extra-fields"
              [class.visible]="customizeThresholdEnabled">
              <pa-slider
                formControlName="citationThreshold"
                step="0.01"
                max="1"></pa-slider>
            </div>
          </div>
        }
        <div class="config-form-field">
          <pa-toggle
            formControlName="jsonOutput"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="disableCitations($event, generateAnswerEnabled)">
            <span class="toggle-label">
              {{ 'search.configuration.result-display.json-schema.toggle-label' | translate }}
              <nsi-badge kind="tertiary">{{ 'generic.badge.beta' | translate }}</nsi-badge>
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.result-display.json-schema.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="jsonOutputEnabled">
            <nsi-info-card>
              {{ 'search.configuration.result-display.json-schema.info' | translate }}
            </nsi-info-card>
            <nsi-expandable-textarea
              formControlName="jsonSchema"
              resizable
              rows="4"
              modalTitle="search.configuration.result-display.json-schema.textarea-label"
              (resizing)="updateHeight()">
              {{ 'search.configuration.result-display.json-schema.textarea-label' | translate }}
            </nsi-expandable-textarea>
          </div>
        </div>
      </ng-container>
    </pa-accordion-item-body>
  </pa-accordion-item>
</pa-accordion>
