{#if autoScroll === false && history?.currentId}

{/if}

{#if atSelectedModel !== undefined || selectedToolIds.length > 0 || webSearchEnabled}

{#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 selectedToolIds.length > 0}

{selectedToolIds .map((id) => { return $tools.find((tool) => tool.id === id)?.name; }) .join(', ')}

{/if} {#if webSearchEnabled}

{$i18n.t('Search the web')}

{/if}

{/if} { dispatch('upload', e.detail); }} on:select={(e) => { const data = e.detail; if (data?.type === 'model') { atSelectedModel = data.data; } const chatInputElement = document.getElementById('chat-input'); chatInputElement?.focus(); }} />

{ if (inputFiles && inputFiles.length > 0) { const _inputFiles = Array.from(inputFiles); inputFilesHandler(_inputFiles); } else { toast.error($i18n.t(`File not found.`)); } filesInputElement.value = ''; }} /> {#if recording} { recording = false; await tick(); document.getElementById('chat-input')?.focus(); }} on:confirm={async (e) => { const { text, filename } = e.detail; prompt = `${prompt}${text} `; recording = false; await tick(); document.getElementById('chat-input')?.focus(); if ($settings?.speechAutoSend ?? false) { dispatch('submit', prompt); } }} /> {:else}

{ // check if selectedModels support image input dispatch('submit', 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} { files.splice(fileIdx, 1); files = files; }} on:click={() => { console.log(file); }} /> {/if} {/each}

{/if}

{ filesInputElement.click(); }} onClose={async () => { await tick(); const chatInput = document.getElementById('chat-input'); chatInput?.focus(); }} >

{#if $settings?.richTextInput ?? true}

0 || navigator.msMaxTouchPoints > 0 )} on:enter={async (e) => { if (prompt !== '') { dispatch('submit', prompt); } }} on:input={async (e) => { if (chatInputContainerElement) { chatInputContainerElement.style.height = ''; chatInputContainerElement.style.height = Math.min(chatInputContainerElement.scrollHeight, 200) + 'px'; } }} on:focus={async (e) => { if (chatInputContainerElement) { chatInputContainerElement.style.height = ''; chatInputContainerElement.style.height = Math.min(chatInputContainerElement.scrollHeight, 200) + 'px'; } }} on:keypress={(e) => { e = e.detail.event; }} on:keydown={async (e) => { e = e.detail.event; if (chatInputContainerElement) { chatInputContainerElement.style.height = ''; chatInputContainerElement.style.height = Math.min(chatInputContainerElement.scrollHeight, 200) + 'px'; } const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac const commandsContainerElement = document.getElementById('commands-container'); // Command/Ctrl + Shift + Enter to submit a message pair if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) { e.preventDefault(); createMessagePair(prompt); } // 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 (commandsContainerElement && e.key === 'ArrowUp') { e.preventDefault(); commandsElement.selectUp(); const commandOptionButton = [ ...document.getElementsByClassName('selected-command-option-button') ]?.at(-1); commandOptionButton.scrollIntoView({ block: 'center' }); } if (commandsContainerElement && e.key === 'ArrowDown') { e.preventDefault(); commandsElement.selectDown(); const commandOptionButton = [ ...document.getElementsByClassName('selected-command-option-button') ]?.at(-1); commandOptionButton.scrollIntoView({ block: 'center' }); } if (commandsContainerElement && 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 (commandsContainerElement && e.key === 'Tab') { e.preventDefault(); const commandOptionButton = [ ...document.getElementsByClassName('selected-command-option-button') ]?.at(-1); commandOptionButton?.click(); } if (e.key === 'Escape') { console.log('Escape'); atSelectedModel = undefined; selectedToolIds = []; webSearchEnabled = false; } }} on:paste={async (e) => { e = e.detail.event; console.log(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); } } } }} />

{:else}

{
											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) {
													dispatch('submit', prompt);
												}
											}
										}}
										on:keydown={async (e) => {
											const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
											const commandsContainerElement =
												document.getElementById('commands-container');

// Command/Ctrl + Shift + Enter to submit a message pair
											if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) {
												e.preventDefault();
												createMessagePair(prompt);
											}

// 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 (commandsContainerElement && e.key === 'ArrowUp') {
												e.preventDefault();
												commandsElement.selectUp();

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

if (commandsContainerElement && e.key === 'ArrowDown') {
												e.preventDefault();
												commandsElement.selectDown();

if (commandsContainerElement && 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 (commandsContainerElement && 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;
												selectedToolIds = [];
												webSearchEnabled = false;
											}
										}}
										rows="1"
										on:input={async (e) => {
											e.target.style.height = '';
											e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
											user = null;
										}}
										on:focus={async (e) => {
											e.target.style.height = '';
											e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
										}}
										on:paste={async (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);
													}
												}
											}
										}}
									/>
								{/if}

<div class="self-end mb-2 flex space-x-1 mr-1">
									{#if !history?.currentId || history.messages[history.currentId]?.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 {
														let stream = await navigator.mediaDevices
															.getUserMedia({ audio: true })
															.catch(function (err) {
																toast.error(
																	$i18n.t(
																		`Permission denied when accessing microphone: {{error}}`,
																		{
																			error: err
																		}
																	)
																);
																return null;
															});

if (stream) {
															recording = true;
															const tracks = stream.getTracks();
															tracks.forEach((track) => track.stop());
														}
														stream = null;
													} catch {
														toast.error($i18n.t('Permission denied when accessing microphone'));
													}
												}}
												aria-label="Voice Input"
											>
												<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 !history.currentId || history.messages[history.currentId]?.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 {
														let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
														// If the user grants the permission, proceed to show the call overlay

if (stream) {
															const tracks = stream.getTracks();
															tracks.forEach((track) => track.stop());
														}

stream = null;

showCallOverlay.set(true);
														showControls.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'));
													}
												}}
												aria-label="Call"
											>
												<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">
									<Tooltip content={$i18n.t('Stop')}>
										<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>
									</Tooltip>
								</div>
							{/if}
						</div>
					</form>
				{/if}
			</div>
		</div>
	</div>
</div>