{#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} { selectedModel = e.detail; chatTextAreaElement?.focus(); }} /> {#if selectedModel !== undefined}

modelfile.tagName === selectedModel.id) ?.imageUrl ?? ($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)} />

Talking to {selectedModel.custom_info?.displayName ?? selectedModel.name}

{/if}

{ if (inputFiles && inputFiles.length > 0) { const _inputFiles = Array.from(inputFiles); _inputFiles.forEach((file) => { if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) { if (selectedModel !== undefined) { if (!(selectedModel.custom_info?.vision_capable ?? true)) { toast.error($i18n.t('Selected model does not support image inputs.')); 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.`)); } }} />

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

{#each files as file, fileIdx}

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

{: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}

{#if fileUploadEnabled}

{/if}

{
									if (
										window.innerWidth > 1024 ||
										!(
											'ontouchstart' in window ||
											navigator.maxTouchPoints > 0 ||
											navigator.msMaxTouchPoints > 0
										)
									) {
										if (e.keyCode == 13 && !e.shiftKey) {
											e.preventDefault();
										}
										if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
											submitPrompt(prompt, user);
										}
									}
								}}
								on:keydown={async (e) => {
									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');
										selectedModel = 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>
</div>