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

{/if}

{#if prompt.charAt(0) === '/'} {:else if prompt.charAt(0) === '#'} { console.log(e); uploadYoutubeTranscription(e.detail); }} on:url={(e) => { console.log(e); uploadWeb(e.detail); }} on:select={(e) => { console.log(e); files = [ ...files, { type: e?.detail?.type ?? 'doc', ...e.detail, upload_status: true } ]; }} /> {/if} { atSelectedModel = e.detail; chatTextAreaElement?.focus(); }} /> {#if atSelectedModel !== undefined}

model.id === atSelectedModel.id)?.info?.meta ?.profile_image_url ?? ($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)} />

Talking to {atSelectedModel.name}

{/if}

{ if (inputFiles && inputFiles.length > 0) { const _inputFiles = Array.from(inputFiles); _inputFiles.forEach((file) => { if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) { if (visionCapableModels.length === 0) { toast.error($i18n.t('Selected model(s) do not support image inputs')); inputFiles = null; filesInputElement.value = ''; return; } let reader = new FileReader(); reader.onload = (event) => { files = [ ...files, { type: 'image', url: `${event.target.result}` } ]; inputFiles = null; filesInputElement.value = ''; }; reader.readAsDataURL(file); } else if ( SUPPORTED_FILE_TYPE.includes(file['type']) || SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1)) ) { uploadDoc(file); filesInputElement.value = ''; } else { toast.error( $i18n.t( `Unknown File Type '{{file_type}}', but accepting and treating as plain text`, { file_type: file['type'] } ) ); uploadDoc(file); filesInputElement.value = ''; } }); } else { toast.error($i18n.t(`File not found.`)); } }} />

{ // check if selectedModels support image input submitPrompt(prompt, user); }} > {#if files.length > 0}

{#each files as file, fileIdx}

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

{#if atSelectedModel ? visionCapableModels.length === 0 : selectedModels.length !== visionCapableModels.length} !visionCapableModels.includes(id)) .join(', ') })} > {/if}

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

{#if file.upload_status} {:else} {/if}

{file.name}

{$i18n.t('Document')}

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

{file?.title ?? `#${file.name}`}

{$i18n.t('Collection')}

{/if}

{/each}

{/if}

{ filesInputElement.click(); }} onClose={async () => { await tick(); chatTextAreaElement?.focus(); }} >

{}}
							on:keydown={async (e) => {
								// Check if the device is not a mobile device or if it is a mobile device, check if it is not a touch device
								// This is to prevent the Enter key from submitting the prompt on mobile devices
								if (
									!$mobile ||
									!(
										'ontouchstart' in window ||
										navigator.maxTouchPoints > 0 ||
										navigator.msMaxTouchPoints > 0
									)
								) {
									// Check if Enter is pressed
									// Check if Shift key is not pressed
									if (e.key === 'Enter' && !e.shiftKey) {
										e.preventDefault();
									}

if (e.key === 'Enter' && !e.shiftKey && prompt !== '') {
										submitPrompt(prompt, user);
										return;
									}

if (e.key === 'Enter' && e.shiftKey && prompt !== '') {
										return;
									}
								}

const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac

// Check if Ctrl + R is pressed
								if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
									e.preventDefault();
									console.log('regenerate');

const regenerateButton = [
										...document.getElementsByClassName('regenerate-response-button')
									]?.at(-1);

regenerateButton?.click();
								}

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 (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowUp') {
									e.preventDefault();

(promptsElement || documentsElement || modelsElement).selectUp();

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

if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'ArrowDown') {
									e.preventDefault();

(promptsElement || documentsElement || modelsElement).selectDown();

if (['/', '#', '@'].includes(prompt.charAt(0)) && e.key === 'Enter') {
									e.preventDefault();

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

if (commandOptionButton) {
										commandOptionButton?.click();
									} else {
										document.getElementById('send-message-button')?.click();
									}
								}

if (['/', '#', '@'].includes(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);
									}

e.target.style.height = '';
									e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
								}

if (e.key === 'Escape') {
									console.log('Escape');
									atSelectedModel = undefined;
								}
							}}
							rows="1"
							on:input={(e) => {
								e.target.style.height = '';
								e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
								user = null;
							}}
							on:focus={(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-1 mr-1">
							{#if messages.length == 0 || messages.at(-1).done == true}
								<Tooltip content={$i18n.t('Record voice')}>
									{#if speechRecognitionEnabled}
										<button
											id="voice-input-button"
											class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-1.5 mr-0.5 self-center"
											type="button"
											on:click={() => {
												speechRecognitionHandler();
											}}
										>
											{#if isRecording}
												<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}
								</Tooltip>

<div class="mt-1.5 text-xs text-gray-500 text-center">
					{$i18n.t('LLMs can make mistakes. Verify important information.')}
				</div>
			</div>
		</div>
	</div>
</div>