{# {% set selectorContext = llm_selector %} #}
{# {% set selectorContext = services_single_selector %} #}
{# {% set selectorContext = services_multi_selector %} #}
<!--
<div class="vf-chatbot-modal" data-vf-js-chatbot-modal>
  {# <div class="vf-chatbot-modal__container"> #}
    <div class="vf-chatbot-modal__header">
      <div class="vf-chatbot-modal__header-left">
        {# {% render "@vf-chatbot-selector", selectorContext %} #}
      </div>
      <div class="vf-chatbot-modal__controls">
        <button
          class="vf-chatbot-modal__control"
          data-vf-js-chatbot-minimize
          aria-label="Minimize chat"
        >
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M20 14H4v-2h16v2z"/>
          </svg>
        </button>
        <button
          class="vf-chatbot-modal__control"
          data-vf-js-chatbot-close
          aria-label="Close chat"
        >
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
          </svg>
        </button>
      </div>
    </div>

    <div class="vf-chatbot-modal__content | vf-u-background-color-ui--grey--light">
      <div class="vf-chatbot-modal__chat" data-vf-js-chatbot-modal-chat>
        {# {% if welcome_message %} #}
          <div class="vf-chatbot-modal__welcome" data-vf-js-chatbot-modal-welcome>
            <div class="vf-chatbot-modal__welcome-content">
              <div class="vf-chatbot-modal__welcome-logo">
                <img src="/assets/vf-chatbot/assets/vf-chatbot--icon-64x64-dark-green.svg" alt="AI Assistant">
              </div>
              <h2 class="vf-chatbot-modal__welcome-title">{{ welcome_title | default('AI assistant') }}</h2>
              <p class="vf-chatbot-modal__welcome-description">
                {# {{ welcome_description | default("Welcome! I'm here to help you.") }} #}
              </p>

              <div class="vf-chatbot-modal__welcome-suggestions">
                <p class="vf-chatbot-modal__welcome-suggestions-title">Try asking me:</p>
                <div class="vf-chatbot-standalone__welcome-suggestions-grid" data-vf-js-chatbot-standalone-suggestions-grid>
                </div>
              </div>
            </div>
          </div>
          {# <div class="vf-chatbot-message vf-chatbot-message--assistant">
              <div class="vf-chatbot-message__avatar">
                <img src="{{ ai_icon | default('../../assets/vf-chatbot/assets/vf-chatbot--icon.svg') }}" alt="AI Assistant">
              </div>
              <div class="vf-chatbot-message__content">
                {{ welcome_message | default('Hello! How can I help you today?') }}
              </div>
            </div> #}
        {# {% endif %} #}
        <div class="vf-chatbot-modal__messages" data-vf-js-chatbot-modal-messages>
          <div class="vf-chatbot-modal__loading" data-vf-js-chatbot-modal-loading style="display: none;">
            <div class="vf-chatbot-message vf-chatbot-message--assistant">
              <div class="vf-chatbot-message__avatar">
                <div class="vf-chatbot-message__avatar-image">
                <img src="../../assets/vf-chatbot/assets/vf-chatbot--icon-16x16-dark-green.svg" alt="AI Assistant">
                </div>
                <span class="vf-chatbot-message__avatar-name">AI Assistant</span>
              </div>
              <div class="vf-chatbot-modal__loading-dots">
                ...
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
      {# {% if disclaimer %} #}
        <div class="vf-chatbot-modal__disclaimer" data-vf-js-chatbot-modal-disclaimer>
          <div class="vf-banner vf-banner--alert vf-banner--info">
            <div class="vf-banner__content">
              <p class="vf-banner__text">{{ disclaimer }}</p>
              <button role="button" aria-label="close notification banner" class="vf-button vf-button--icon vf-button--dismiss | vf-banner__button" data-vf-js-chatbot-disclaimer-close>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <title>dismiss banner</title><path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z"/></svg>
              </button>
            </div>
          </div>
        </div>
      {# {% endif %} #}

      {# {% render "@vf-chatbot-dialog", {
        title: "Close chat and delete conversation?",
        message: "Are you sure you want to close the chat?",
        submessage: "Your current conversation history will be permanently deleted.",
        cancelLabel: "Keep chat open",
        confirmLabel: "Close and delete"
      } %} #}
      <div class="vf-chatbot-modal__input-container">
        <textarea
          class="vf-chatbot-modal__input"
          placeholder="{{ input_placeholder | default('Ask me ...') }}"
          rows="1"
          data-vf-js-chatbot-modal-input
          maxlength="1000"
        ></textarea>
        <button
          class="vf-chatbot-modal__send-button"
          aria-label="Send message"
          data-vf-js-chatbot-modal-send
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4v3z" fill="white"/>
          </svg>
        </button>
      </div>
  {# </div> #}
</div>-->