{#if autoScroll === false && messages.length > 0}

{/if}

{#if prompt.charAt(0) === '/'} {:else if messages.length == 0 && suggestionPrompts.length !== 0} {/if}

{ let reader = new FileReader(); reader.onload = (event) => { files = [ ...files, { type: 'image', url: `${event.target.result}` } ]; inputFiles = null; filesInputElement.value = ''; }; if ( inputFiles && inputFiles.length > 0 && ['image/gif', 'image/jpeg', 'image/png'].includes(inputFiles[0]['type']) ) { reader.readAsDataURL(inputFiles[0]); } else { toast.error(`Unsupported File Type '${inputFiles[0]['type']}'.`); inputFiles = null; } }} />

{ submitPrompt(prompt); }} > {#if files.length > 0}

{#each files as file, fileIdx}

{#if file.type === 'image'} input

{:else if file.type === 'doc'}

{file.name}

Document

{/if}

{/each}

{/if}

{#if fileUploadEnabled}

{/if}

{
								if (e.keyCode == 13 && !e.shiftKey) {
									e.preventDefault();
								}
								if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
									submitPrompt(prompt);
								}
							}}
							on:keydown={async (e) => {
								if (prompt === '' && e.key == 'ArrowUp') {
									e.preventDefault();

const userMessageElement = [
										...document.getElementsByClassName('user-message')
									]?.at(-1);

const editButton = [
										...document.getElementsByClassName('edit-user-message-button')
									]?.at(-1);

console.log(userMessageElement);

userMessageElement.scrollIntoView({ block: 'center' });
									editButton?.click();
								}

if (prompt.charAt(0) === '/' && e.key === 'ArrowUp') {
									promptsElement.selectUp();

const commandOptionButton = [
										...document.getElementsByClassName('selected-command-option-button')
									]?.at(-1);
									commandOptionButton.scrollIntoView({ block: 'center' });
								}

if (prompt.charAt(0) === '/' && e.key === 'ArrowDown') {
									promptsElement.selectDown();

if (prompt.charAt(0) === '/' && e.key === 'Enter') {
									e.preventDefault();

const commandOptionButton = [
										...document.getElementsByClassName('selected-command-option-button')
									]?.at(-1);

commandOptionButton?.click();
								}

if (prompt.charAt(0) === '/' && e.key === 'Tab') {
									e.preventDefault();

const commandOptionButton = [
										...document.getElementsByClassName('selected-command-option-button')
									]?.at(-1);

commandOptionButton?.click();
								} else if (e.key === 'Tab') {
									const words = findWordIndices(prompt);

if (words.length > 0) {
										const word = words.at(0);
										const fullPrompt = prompt;

prompt = prompt.substring(0, word?.endIndex + 1);
										await tick();

e.target.scrollTop = e.target.scrollHeight;
										prompt = fullPrompt;
										await tick();

e.preventDefault();
										e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
									}
								}
							}}
							rows="1"
							on:input={(e) => {
								e.target.style.height = '';
								e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
							}}
							on:paste={(e) => {
								const clipboardData = e.clipboardData || window.clipboardData;

if (clipboardData && clipboardData.items) {
									for (const item of clipboardData.items) {
										if (item.type.indexOf('image') !== -1) {
											const blob = item.getAsFile();
											const reader = new FileReader();

reader.onload = function (e) {
												files = [
													...files,
													{
														type: 'image',
														url: `${e.target.result}`
													}
												];
											};

reader.readAsDataURL(blob);
										}
									}
								}
							}}
						/>

<div class="self-end mb-2 flex space-x-0.5 mr-2">
							{#if messages.length == 0 || messages.at(-1).done == true}
								{#if speechRecognitionEnabled}
									<button
										class=" text-gray-600 dark:text-gray-300 transition rounded-lg p-1.5 mr-0.5 self-center"
										type="button"
										on:click={() => {
											speechRecognitionHandler();
										}}
									>
										{#if speechRecognitionListening}
											<svg
												class=" w-5 h-5 translate-y-[0.5px]"
												fill="currentColor"
												viewBox="0 0 24 24"
												xmlns="http://www.w3.org/2000/svg"
												><style>
													.spinner_qM83 {
														animation: spinner_8HQG 1.05s infinite;
													}
													.spinner_oXPr {
														animation-delay: 0.1s;
													}
													.spinner_ZTLf {
														animation-delay: 0.2s;
													}
													@keyframes spinner_8HQG {
														0%,
														57.14% {
															animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
															transform: translate(0);
														}
														28.57% {
															animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
															transform: translateY(-6px);
														}
														100% {
															transform: translate(0);
														}
													}
												</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
													class="spinner_qM83 spinner_oXPr"
													cx="12"
													cy="12"
													r="2.5"
												/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
											>
										{:else}
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 20 20"
												fill="currentColor"
												class="w-5 h-5 translate-y-[0.5px]"
											>
												<path d="M7 4a3 3 0 016 0v6a3 3 0 11-6 0V4z" />
												<path
													d="M5.5 9.643a.75.75 0 00-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-1.5v-1.546A6.001 6.001 0 0016 10v-.357a.75.75 0 00-1.5 0V10a4.5 4.5 0 01-9 0v-.357z"
												/>
											</svg>
										{/if}
									</button>
								{/if}
								<button
									class="{prompt !== ''
										? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
										: 'text-white bg-gray-100 dark:text-gray-800 dark:bg-gray-600 disabled'} transition rounded-lg p-1 mr-0.5 w-7 h-7 self-center"
									type="submit"
									disabled={prompt === ''}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 20 20"
										fill="currentColor"
										class="w-5 h-5"
									>
										<path
											fill-rule="evenodd"
											d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
											clip-rule="evenodd"
										/>
									</svg>
								</button>
							{:else}
								<button
									class="bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800 transition rounded-lg p-1.5"
									on:click={stopResponse}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 24 24"
										fill="currentColor"
										class="w-5 h-5"
									>
										<path
											fill-rule="evenodd"
											d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm6-2.438c0-.724.588-1.312 1.313-1.312h4.874c.725 0 1.313.588 1.313 1.313v4.874c0 .725-.588 1.313-1.313 1.313H9.564a1.312 1.312 0 01-1.313-1.313V9.564z"
											clip-rule="evenodd"
										/>
									</svg>
								</button>
							{/if}
						</div>
					</div>
				</form>

<div class="mt-1.5 text-xs text-gray-500 text-center">
					LLMs can make mistakes. Verify important information.
				</div>
			</div>
		</div>
	</div>
</div>