Chatbot: Typing

<div class="{{ namespace }}chatbot__container {{ namespace }}stackXl">

	<!-- Chatbot -->
	<div class="{{ namespace }}chatbot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for componentClass in classes %} {{ componentClass }}{% endfor %}"
		 data-js-chatbot
		 {% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}
		{% if isLoading %} aria-busy="true"{% endif %}>
		<label class="sr-only" for="{{ id }}">{{ label }}</label>
		<div class="{{ namespace }}chatbot__bar">
			<input
				id="{{ id }}"
				class="{{ namespace }}chatbot__input form-control"
				data-chatbot-input
				type="text"
				name="{{ inputName }}"
				value="{{ value }}"
				placeholder="{{ placeholder }}"
				autocomplete="off"
				{% if isLoading %} readonly{% endif %}
				{% if suggestions.length and not value and not isLoading %} aria-describedby="{{ suggestionsHintId }}"{% endif %}
			/>
			{% if showClear %}
				{% render "@icon-btn-secondary--ghost", {
					classes: [namespace + "chatbot__clear"],
					icon: "icon-cross",
					action: clearActionLabel,
					attrs: {
						"data-chatbot-clear": "true"
					}
				}, true %}
			{% endif %}
			{% render "@btn-primary", {
				classes: [namespace + "chatbot__submit"],
				text: submitLabel,
				disabled: submitDisabled,
				attrs: {
					"data-chatbot-submit": "true"
				}
			}, true %}
			{% if tokenUsage %}
				{% render "@circular-progress--token-usage", {
					classes: [namespace + "chatbot__tokenUsage"],
					attrs: tokenUsage.attrs,
					progress: tokenUsage.progress,
					tokenUsageDanger: tokenUsage.danger,
					a11yLabel: tokenUsage.a11yLabel,
					a11yValueText: tokenUsage.a11yValueText
				}, true %}
			{% endif %}
		</div>

		{% if suggestions.length and not value and not isLoading %}
			<p class="sr-only" id="{{ suggestionsHintId }}">{{ suggestionsHint }}</p>
			<ul class="{{ namespace }}chatbot__suggestions list-unstyled" data-chatbot-suggestions>
				{% for suggestion in suggestions %}
					<li class="{{ namespace }}chatbot__suggestionItem">
						<button class="{{ namespace }}chatbot__suggestion" type="button" data-chatbot-suggestion value="{{ suggestion }}">
							<span class="{{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
							<span>{{ suggestion }}</span>
						</button>
					</li>
				{% endfor %}
			</ul>
		{% endif %}
	</div>

	{% if isLoading or answerText or noResultText %}
	<!-- Réponse -->
	<div class="{{ namespace }}chatbot__response {{ namespace }}stackXl">

		{% if showResponseHeading %}
			<h3 class="h3">Réponse</h3>
		{% endif %}

		{% if isLoading %}
			<p class="sr-only" role="status">{{ loadingLabel }}</p>
			<section aria-labelledby="{{ responseHeadingId }}">
				<h4 class="sr-only" id="{{ responseHeadingId }}">{{ responseHeading }}</h4>
				<div class="{{ namespace }}box -boxInsetLg {{ namespace }}chatbot__responseBox">
					<div class="{{ namespace }}stackSm" aria-hidden="true">
						{% for skeletonLine in ["100%", "100%", "100%", "100%", "40%"] %}
							{% render "@skeleton-unit--small", { inlineCSS: { "width": skeletonLine } }, true %}
						{% endfor %}
					</div>
				</div>
			</section>
		{% elseif answerText %}
			<section aria-labelledby="{{ responseHeadingId }}" aria-live="polite">
				<h4 class="sr-only" id="{{ responseHeadingId }}">{{ responseHeading }}</h4>
				{% render "@chat-message--chatbot-without-indicator", {
					classes: [namespace + "chatbot__responseBox"],
					text: answerText,
					rate: true,
					ratingActive: false
				}, true %}
			</section>
		{% elseif noResultText %}
			<section aria-labelledby="{{ responseHeadingId }}" aria-live="polite">
				<h4 class="sr-only" id="{{ responseHeadingId }}">{{ responseHeading }}</h4>
				<div class="{{ namespace }}box -boxInsetLg {{ namespace }}chatbot__responseBox">
					<div class="{{ namespace }}wysiwyg">
						<p>{{ noResultText }}</p>
					</div>
				</div>
			</section>
		{% endif %}
	</div>
	{% endif %}

</div>