{#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')); return; } let reader = new FileReader(); reader.onload = (event) => { files = [ ...files, { type: 'image', url: `${event.target.result}` } ]; }; reader.readAsDataURL(file); } else { uploadFileHandler(file); } }); } else { toast.error($i18n.t(`File not found.`)); } filesInputElement.value = ''; }} /> {#if recording} { recording = false; await tick(); document.getElementById('chat-textarea')?.focus(); }} on:confirm={async (e) => { const response = e.detail; prompt = `${prompt}${response} `; recording = false; await tick(); document.getElementById('chat-textarea')?.focus(); if ($settings?.speechAutoSend ?? false) { submitPrompt(prompt); } }} /> {:else}

{ // check if selectedModels support image input submitPrompt(prompt); }} >

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

{ if (availableToolIds.includes(e.id) || ($_user?.role ?? 'user') === 'admin') { a[e.id] = { name: e.name, description: e.meta.description, enabled: false }; } return a; }, {})} uploadFilesHandler={() => { filesInputElement.click(); }} onClose={async () => { await tick(); chatTextAreaElement?.focus(); }} >

{
										if (
											!$mobile ||
											!(
												'ontouchstart' in window ||
												navigator.maxTouchPoints > 0 ||
												navigator.msMaxTouchPoints > 0
											)
										) {
											// Prevent Enter key from creating a new line
											if (e.key === 'Enter' && !e.shiftKey) {
												e.preventDefault();
											}

// Submit the prompt when Enter key is pressed
											if (prompt !== '' && e.key === 'Enter' && !e.shiftKey) {
												submitPrompt(prompt);
											}
										}
									}}
									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 (e.shiftKey) {
												prompt = `${prompt}\n`;
											} else 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')}>
											<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={async () => {
													try {
														const res = await navigator.mediaDevices
															.getUserMedia({ audio: true })
															.catch(function (err) {
																toast.error(
																	$i18n.t(
																		`Permission denied when accessing microphone: {{error}}`,
																		{
																			error: err
																		}
																	)
																);
																return null;
															});

if (res) {
															recording = true;
														}
													} catch {
														toast.error($i18n.t('Permission denied when accessing microphone'));
													}
												}}
											>
												<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>
											</button>
										</Tooltip>
									{/if}
								</div>
							</div>
						</div>
						<div class="flex items-end w-10">
							{#if messages.length == 0 || messages.at(-1).done == true}
								{#if prompt === ''}
									<div class=" flex items-center mb-1">
										<Tooltip content={$i18n.t('Call')}>
											<button
												class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-2 self-center"
												type="button"
												on:click={async () => {
													if (selectedModels.length > 1) {
														toast.error($i18n.t('Select only one model to call'));

return;
													}

if ($config.audio.stt.engine === 'web') {
														toast.error(
															$i18n.t('Call feature is not supported when using Web STT engine')
														);

return;
													}
													// check if user has access to getUserMedia
													try {
														await navigator.mediaDevices.getUserMedia({ audio: true });
														// If the user grants the permission, proceed to show the call overlay

showCallOverlay.set(true);
													} catch (err) {
														// If the user denies the permission or an error occurs, show an error message
														toast.error($i18n.t('Permission denied when accessing media devices'));
													}
												}}
											>
												<Headphone className="size-6" />
											</button>
										</Tooltip>
									</div>
								{:else}
									<div class=" flex items-center mb-1">
										<Tooltip content={$i18n.t('Send message')}>
											<button
												id="send-message-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-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 m-0.5 self-center"
												type="submit"
												disabled={prompt === ''}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													viewBox="0 0 16 16"
													fill="currentColor"
													class="size-6"
												>
													<path
														fill-rule="evenodd"
														d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
														clip-rule="evenodd"
													/>
												</svg>
											</button>
										</Tooltip>
									</div>
								{/if}
							{:else}
								<div class=" flex items-center mb-1.5">
									<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-full p-1.5"
										on:click={() => {
											stopResponse();
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											fill="currentColor"
											class="size-6"
										>
											<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>
								</div>
							{/if}
						</div>
					</form>
				{/if}

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