MessageInput.svelte 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039
  1. <script lang="ts">
  2. import { toast } from 'svelte-sonner';
  3. import { v4 as uuidv4 } from 'uuid';
  4. import { onMount, tick, getContext, createEventDispatcher, onDestroy } from 'svelte';
  5. const dispatch = createEventDispatcher();
  6. import {
  7. type Model,
  8. mobile,
  9. settings,
  10. showSidebar,
  11. models,
  12. config,
  13. showCallOverlay,
  14. tools,
  15. user as _user,
  16. showControls
  17. } from '$lib/stores';
  18. import { blobToFile, findWordIndices } from '$lib/utils';
  19. import { transcribeAudio } from '$lib/apis/audio';
  20. import { uploadFile } from '$lib/apis/files';
  21. import { WEBUI_BASE_URL, WEBUI_API_BASE_URL } from '$lib/constants';
  22. import Tooltip from '../common/Tooltip.svelte';
  23. import InputMenu from './MessageInput/InputMenu.svelte';
  24. import Headphone from '../icons/Headphone.svelte';
  25. import VoiceRecording from './MessageInput/VoiceRecording.svelte';
  26. import FileItem from '../common/FileItem.svelte';
  27. import FilesOverlay from './MessageInput/FilesOverlay.svelte';
  28. import Commands from './MessageInput/Commands.svelte';
  29. import XMark from '../icons/XMark.svelte';
  30. import RichTextInput from '../common/RichTextInput.svelte';
  31. const i18n = getContext('i18n');
  32. export let transparentBackground = false;
  33. export let createMessagePair: Function;
  34. export let stopResponse: Function;
  35. export let autoScroll = false;
  36. export let atSelectedModel: Model | undefined;
  37. export let selectedModels: [''];
  38. export let history;
  39. export let prompt = '';
  40. export let files = [];
  41. export let availableToolIds = [];
  42. export let selectedToolIds = [];
  43. export let webSearchEnabled = false;
  44. let recording = false;
  45. let chatInputContainerElement;
  46. let chatInputElement;
  47. let filesInputElement;
  48. let commandsElement;
  49. let inputFiles;
  50. let dragged = false;
  51. let user = null;
  52. export let placeholder = '';
  53. let visionCapableModels = [];
  54. $: visionCapableModels = [...(atSelectedModel ? [atSelectedModel] : selectedModels)].filter(
  55. (model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
  56. );
  57. $: if (prompt) {
  58. if (chatInputContainerElement) {
  59. chatInputContainerElement.style.height = '';
  60. chatInputContainerElement.style.height =
  61. Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
  62. }
  63. }
  64. const scrollToBottom = () => {
  65. const element = document.getElementById('messages-container');
  66. element.scrollTo({
  67. top: element.scrollHeight,
  68. behavior: 'smooth'
  69. });
  70. };
  71. const uploadFileHandler = async (file) => {
  72. console.log(file);
  73. const tempItemId = uuidv4();
  74. const fileItem = {
  75. type: 'file',
  76. file: '',
  77. id: null,
  78. url: '',
  79. name: file.name,
  80. collection_name: '',
  81. status: 'uploading',
  82. size: file.size,
  83. error: '',
  84. itemId: tempItemId
  85. };
  86. if (fileItem.size == 0) {
  87. toast.error($i18n.t('You cannot upload an empty file.'));
  88. return null;
  89. }
  90. files = [...files, fileItem];
  91. // Check if the file is an audio file and transcribe/convert it to text file
  92. if (['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/x-m4a'].includes(file['type'])) {
  93. const res = await transcribeAudio(localStorage.token, file).catch((error) => {
  94. toast.error(error);
  95. return null;
  96. });
  97. if (res) {
  98. console.log(res);
  99. const blob = new Blob([res.text], { type: 'text/plain' });
  100. file = blobToFile(blob, `${file.name}.txt`);
  101. fileItem.name = file.name;
  102. fileItem.size = file.size;
  103. }
  104. }
  105. try {
  106. // During the file upload, file content is automatically extracted.
  107. const uploadedFile = await uploadFile(localStorage.token, file);
  108. if (uploadedFile) {
  109. if (uploadedFile.error) {
  110. toast.warning(uploadedFile.error);
  111. }
  112. fileItem.status = 'uploaded';
  113. fileItem.file = uploadedFile;
  114. fileItem.id = uploadedFile.id;
  115. fileItem.collection_name = uploadedFile?.meta?.collection_name;
  116. fileItem.url = `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`;
  117. files = files;
  118. } else {
  119. files = files.filter((item) => item?.itemId !== tempItemId);
  120. }
  121. } catch (e) {
  122. toast.error(e);
  123. files = files.filter((item) => item?.itemId !== tempItemId);
  124. }
  125. };
  126. const inputFilesHandler = async (inputFiles) => {
  127. inputFiles.forEach((file) => {
  128. console.log(file, file.name.split('.').at(-1));
  129. if (
  130. ($config?.file?.max_size ?? null) !== null &&
  131. file.size > ($config?.file?.max_size ?? 0) * 1024 * 1024
  132. ) {
  133. toast.error(
  134. $i18n.t(`File size should not exceed {{maxSize}} MB.`, {
  135. maxSize: $config?.file?.max_size
  136. })
  137. );
  138. return;
  139. }
  140. if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) {
  141. if (visionCapableModels.length === 0) {
  142. toast.error($i18n.t('Selected model(s) do not support image inputs'));
  143. return;
  144. }
  145. let reader = new FileReader();
  146. reader.onload = (event) => {
  147. files = [
  148. ...files,
  149. {
  150. type: 'image',
  151. url: `${event.target.result}`
  152. }
  153. ];
  154. };
  155. reader.readAsDataURL(file);
  156. } else {
  157. uploadFileHandler(file);
  158. }
  159. });
  160. };
  161. const handleKeyDown = (event: KeyboardEvent) => {
  162. if (event.key === 'Escape') {
  163. console.log('Escape');
  164. dragged = false;
  165. }
  166. };
  167. const onDragOver = (e) => {
  168. e.preventDefault();
  169. // Check if a file is being dragged.
  170. if (e.dataTransfer?.types?.includes('Files')) {
  171. dragged = true;
  172. } else {
  173. dragged = false;
  174. }
  175. };
  176. const onDragLeave = () => {
  177. dragged = false;
  178. };
  179. const onDrop = async (e) => {
  180. e.preventDefault();
  181. console.log(e);
  182. if (e.dataTransfer?.files) {
  183. const inputFiles = Array.from(e.dataTransfer?.files);
  184. if (inputFiles && inputFiles.length > 0) {
  185. console.log(inputFiles);
  186. inputFilesHandler(inputFiles);
  187. }
  188. }
  189. dragged = false;
  190. };
  191. onMount(() => {
  192. window.setTimeout(() => {
  193. const chatInput = document.getElementById('chat-input');
  194. chatInput?.focus();
  195. }, 0);
  196. window.addEventListener('keydown', handleKeyDown);
  197. const dropZone = document.getElementById('chat-container');
  198. dropZone?.addEventListener('dragover', onDragOver);
  199. dropZone?.addEventListener('drop', onDrop);
  200. dropZone?.addEventListener('dragleave', onDragLeave);
  201. });
  202. onDestroy(() => {
  203. window.removeEventListener('keydown', handleKeyDown);
  204. const dropZone = document.getElementById('chat-container');
  205. dropZone?.removeEventListener('dragover', onDragOver);
  206. dropZone?.removeEventListener('drop', onDrop);
  207. dropZone?.removeEventListener('dragleave', onDragLeave);
  208. });
  209. </script>
  210. <FilesOverlay show={dragged} />
  211. <div class="w-full font-primary">
  212. <div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
  213. <div class="flex flex-col px-2.5 max-w-6xl w-full">
  214. <div class="relative">
  215. {#if autoScroll === false && history?.currentId}
  216. <div
  217. class=" absolute -top-12 left-0 right-0 flex justify-center z-30 pointer-events-none"
  218. >
  219. <button
  220. class=" bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full pointer-events-auto"
  221. on:click={() => {
  222. autoScroll = true;
  223. scrollToBottom();
  224. }}
  225. >
  226. <svg
  227. xmlns="http://www.w3.org/2000/svg"
  228. viewBox="0 0 20 20"
  229. fill="currentColor"
  230. class="w-5 h-5"
  231. >
  232. <path
  233. fill-rule="evenodd"
  234. d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
  235. clip-rule="evenodd"
  236. />
  237. </svg>
  238. </button>
  239. </div>
  240. {/if}
  241. </div>
  242. <div class="w-full relative">
  243. {#if atSelectedModel !== undefined}
  244. <div
  245. class="px-3 py-1 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-white dark:from-gray-900 z-10"
  246. >
  247. <div class="flex items-center gap-2 text-sm dark:text-gray-500">
  248. <img
  249. crossorigin="anonymous"
  250. alt="model profile"
  251. class="size-4 max-w-[28px] object-cover rounded-full"
  252. src={$models.find((model) => model.id === atSelectedModel.id)?.info?.meta
  253. ?.profile_image_url ??
  254. ($i18n.language === 'dg-DG'
  255. ? `/doge.png`
  256. : `${WEBUI_BASE_URL}/static/favicon.png`)}
  257. />
  258. <div>
  259. Talking to <span class=" font-medium">{atSelectedModel.name}</span>
  260. </div>
  261. </div>
  262. <div>
  263. <button
  264. class="flex items-center"
  265. on:click={() => {
  266. atSelectedModel = undefined;
  267. }}
  268. >
  269. <XMark />
  270. </button>
  271. </div>
  272. </div>
  273. {/if}
  274. <Commands
  275. bind:this={commandsElement}
  276. bind:prompt
  277. bind:files
  278. on:upload={(e) => {
  279. dispatch('upload', e.detail);
  280. }}
  281. on:select={(e) => {
  282. const data = e.detail;
  283. if (data?.type === 'model') {
  284. atSelectedModel = data.data;
  285. }
  286. const chatInputElement = document.getElementById('chat-input');
  287. chatInputElement?.focus();
  288. }}
  289. />
  290. </div>
  291. </div>
  292. </div>
  293. <div class="{transparentBackground ? 'bg-transparent' : 'bg-white dark:bg-gray-900'} ">
  294. <div class="max-w-6xl px-4 mx-auto inset-x-0">
  295. <div class="">
  296. <input
  297. bind:this={filesInputElement}
  298. bind:files={inputFiles}
  299. type="file"
  300. hidden
  301. multiple
  302. on:change={async () => {
  303. if (inputFiles && inputFiles.length > 0) {
  304. const _inputFiles = Array.from(inputFiles);
  305. inputFilesHandler(_inputFiles);
  306. } else {
  307. toast.error($i18n.t(`File not found.`));
  308. }
  309. filesInputElement.value = '';
  310. }}
  311. />
  312. {#if recording}
  313. <VoiceRecording
  314. bind:recording
  315. on:cancel={async () => {
  316. recording = false;
  317. await tick();
  318. document.getElementById('chat-input')?.focus();
  319. }}
  320. on:confirm={async (e) => {
  321. const { text, filename } = e.detail;
  322. prompt = `${prompt}${text} `;
  323. recording = false;
  324. await tick();
  325. document.getElementById('chat-input')?.focus();
  326. if ($settings?.speechAutoSend ?? false) {
  327. dispatch('submit', prompt);
  328. }
  329. }}
  330. />
  331. {:else}
  332. <form
  333. class="w-full flex gap-1.5"
  334. on:submit|preventDefault={() => {
  335. // check if selectedModels support image input
  336. dispatch('submit', prompt);
  337. }}
  338. >
  339. <div
  340. class="flex-1 flex flex-col relative w-full rounded-3xl px-1.5 bg-gray-50 dark:bg-gray-850 dark:text-gray-100"
  341. dir={$settings?.chatDirection ?? 'LTR'}
  342. >
  343. {#if files.length > 0}
  344. <div class="mx-1 mt-2.5 mb-1 flex flex-wrap gap-2">
  345. {#each files as file, fileIdx}
  346. {#if file.type === 'image'}
  347. <div class=" relative group">
  348. <div class="relative">
  349. <img
  350. src={file.url}
  351. alt="input"
  352. class=" h-16 w-16 rounded-xl object-cover"
  353. />
  354. {#if atSelectedModel ? visionCapableModels.length === 0 : selectedModels.length !== visionCapableModels.length}
  355. <Tooltip
  356. className=" absolute top-1 left-1"
  357. content={$i18n.t('{{ models }}', {
  358. models: [...(atSelectedModel ? [atSelectedModel] : selectedModels)]
  359. .filter((id) => !visionCapableModels.includes(id))
  360. .join(', ')
  361. })}
  362. >
  363. <svg
  364. xmlns="http://www.w3.org/2000/svg"
  365. viewBox="0 0 24 24"
  366. fill="currentColor"
  367. class="size-4 fill-yellow-300"
  368. >
  369. <path
  370. fill-rule="evenodd"
  371. d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
  372. clip-rule="evenodd"
  373. />
  374. </svg>
  375. </Tooltip>
  376. {/if}
  377. </div>
  378. <div class=" absolute -top-1 -right-1">
  379. <button
  380. class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
  381. type="button"
  382. on:click={() => {
  383. files.splice(fileIdx, 1);
  384. files = files;
  385. }}
  386. >
  387. <svg
  388. xmlns="http://www.w3.org/2000/svg"
  389. viewBox="0 0 20 20"
  390. fill="currentColor"
  391. class="w-4 h-4"
  392. >
  393. <path
  394. d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
  395. />
  396. </svg>
  397. </button>
  398. </div>
  399. </div>
  400. {:else}
  401. <FileItem
  402. item={file}
  403. name={file.name}
  404. type={file.type}
  405. size={file?.size}
  406. loading={file.status === 'uploading'}
  407. dismissible={true}
  408. edit={true}
  409. on:dismiss={() => {
  410. files.splice(fileIdx, 1);
  411. files = files;
  412. }}
  413. on:click={() => {
  414. console.log(file);
  415. }}
  416. />
  417. {/if}
  418. {/each}
  419. </div>
  420. {/if}
  421. <div class=" flex">
  422. <div class=" ml-0.5 self-end mb-1.5 flex space-x-1">
  423. <InputMenu
  424. bind:webSearchEnabled
  425. bind:selectedToolIds
  426. tools={$tools.reduce((a, e, i, arr) => {
  427. if (availableToolIds.includes(e.id) || ($_user?.role ?? 'user') === 'admin') {
  428. a[e.id] = {
  429. name: e.name,
  430. description: e.meta.description,
  431. enabled: false
  432. };
  433. }
  434. return a;
  435. }, {})}
  436. uploadFilesHandler={() => {
  437. filesInputElement.click();
  438. }}
  439. uploadGoogleDriveHandler={async () => {
  440. try {
  441. if (!import.meta.env.VITE_GOOGLE_API_KEY || !import.meta.env.VITE_GOOGLE_CLIENT_ID) {
  442. throw new Error('Google Drive API credentials not configured');
  443. }
  444. const fileData = await createPicker();
  445. if (fileData) {
  446. dispatch('upload', { type: 'google-drive', data: fileData });
  447. }
  448. } catch (error) {
  449. console.error('Google Drive Error:', error);
  450. toast.error('Error accessing Google Drive: ' + error.message);
  451. }
  452. }}
  453. onClose={async () => {
  454. await tick();
  455. const chatInput = document.getElementById('chat-input');
  456. chatInput?.focus();
  457. }}
  458. >
  459. <button
  460. class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-2 outline-none focus:outline-none"
  461. type="button"
  462. aria-label="More"
  463. >
  464. <svg
  465. xmlns="http://www.w3.org/2000/svg"
  466. viewBox="0 0 16 16"
  467. fill="currentColor"
  468. class="size-5"
  469. >
  470. <path
  471. d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
  472. />
  473. </svg>
  474. </button>
  475. </InputMenu>
  476. </div>
  477. {#if $settings?.richTextInput ?? true}
  478. <div
  479. bind:this={chatInputContainerElement}
  480. id="chat-input-container"
  481. class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-[48px] overflow-auto"
  482. >
  483. <RichTextInput
  484. bind:this={chatInputElement}
  485. id="chat-input"
  486. trim={true}
  487. placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
  488. bind:value={prompt}
  489. shiftEnter={!$mobile ||
  490. !(
  491. 'ontouchstart' in window ||
  492. navigator.maxTouchPoints > 0 ||
  493. navigator.msMaxTouchPoints > 0
  494. )}
  495. on:enter={async (e) => {
  496. if (prompt !== '') {
  497. dispatch('submit', prompt);
  498. }
  499. }}
  500. on:input={async (e) => {
  501. if (chatInputContainerElement) {
  502. chatInputContainerElement.style.height = '';
  503. chatInputContainerElement.style.height =
  504. Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
  505. }
  506. }}
  507. on:focus={async (e) => {
  508. if (chatInputContainerElement) {
  509. chatInputContainerElement.style.height = '';
  510. chatInputContainerElement.style.height =
  511. Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
  512. }
  513. }}
  514. on:keypress={(e) => {
  515. e = e.detail.event;
  516. }}
  517. on:keydown={async (e) => {
  518. e = e.detail.event;
  519. if (chatInputContainerElement) {
  520. chatInputContainerElement.style.height = '';
  521. chatInputContainerElement.style.height =
  522. Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
  523. }
  524. const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
  525. const commandsContainerElement =
  526. document.getElementById('commands-container');
  527. // Command/Ctrl + Shift + Enter to submit a message pair
  528. if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) {
  529. e.preventDefault();
  530. createMessagePair(prompt);
  531. }
  532. // Check if Ctrl + R is pressed
  533. if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
  534. e.preventDefault();
  535. console.log('regenerate');
  536. const regenerateButton = [
  537. ...document.getElementsByClassName('regenerate-response-button')
  538. ]?.at(-1);
  539. regenerateButton?.click();
  540. }
  541. if (prompt === '' && e.key == 'ArrowUp') {
  542. e.preventDefault();
  543. const userMessageElement = [
  544. ...document.getElementsByClassName('user-message')
  545. ]?.at(-1);
  546. const editButton = [
  547. ...document.getElementsByClassName('edit-user-message-button')
  548. ]?.at(-1);
  549. console.log(userMessageElement);
  550. userMessageElement.scrollIntoView({ block: 'center' });
  551. editButton?.click();
  552. }
  553. if (commandsContainerElement && e.key === 'ArrowUp') {
  554. e.preventDefault();
  555. commandsElement.selectUp();
  556. const commandOptionButton = [
  557. ...document.getElementsByClassName('selected-command-option-button')
  558. ]?.at(-1);
  559. commandOptionButton.scrollIntoView({ block: 'center' });
  560. }
  561. if (commandsContainerElement && e.key === 'ArrowDown') {
  562. e.preventDefault();
  563. commandsElement.selectDown();
  564. const commandOptionButton = [
  565. ...document.getElementsByClassName('selected-command-option-button')
  566. ]?.at(-1);
  567. commandOptionButton.scrollIntoView({ block: 'center' });
  568. }
  569. if (commandsContainerElement && e.key === 'Enter') {
  570. e.preventDefault();
  571. const commandOptionButton = [
  572. ...document.getElementsByClassName('selected-command-option-button')
  573. ]?.at(-1);
  574. if (e.shiftKey) {
  575. prompt = `${prompt}\n`;
  576. } else if (commandOptionButton) {
  577. commandOptionButton?.click();
  578. } else {
  579. document.getElementById('send-message-button')?.click();
  580. }
  581. }
  582. if (commandsContainerElement && e.key === 'Tab') {
  583. e.preventDefault();
  584. const commandOptionButton = [
  585. ...document.getElementsByClassName('selected-command-option-button')
  586. ]?.at(-1);
  587. commandOptionButton?.click();
  588. }
  589. if (e.key === 'Escape') {
  590. console.log('Escape');
  591. atSelectedModel = undefined;
  592. }
  593. }}
  594. on:paste={async (e) => {
  595. e = e.detail.event;
  596. console.log(e);
  597. const clipboardData = e.clipboardData || window.clipboardData;
  598. if (clipboardData && clipboardData.items) {
  599. for (const item of clipboardData.items) {
  600. if (item.type.indexOf('image') !== -1) {
  601. const blob = item.getAsFile();
  602. const reader = new FileReader();
  603. reader.onload = function (e) {
  604. files = [
  605. ...files,
  606. {
  607. type: 'image',
  608. url: `${e.target.result}`
  609. }
  610. ];
  611. };
  612. reader.readAsDataURL(blob);
  613. }
  614. }
  615. }
  616. }}
  617. />
  618. </div>
  619. {:else}
  620. <textarea
  621. id="chat-input"
  622. bind:this={chatInputElement}
  623. class="scrollbar-hidden bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-3 px-1 rounded-xl resize-none h-[48px]"
  624. placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
  625. bind:value={prompt}
  626. on:keypress={(e) => {
  627. if (
  628. !$mobile ||
  629. !(
  630. 'ontouchstart' in window ||
  631. navigator.maxTouchPoints > 0 ||
  632. navigator.msMaxTouchPoints > 0
  633. )
  634. ) {
  635. // Prevent Enter key from creating a new line
  636. if (e.key === 'Enter' && !e.shiftKey) {
  637. e.preventDefault();
  638. }
  639. // Submit the prompt when Enter key is pressed
  640. if (prompt !== '' && e.key === 'Enter' && !e.shiftKey) {
  641. dispatch('submit', prompt);
  642. }
  643. }
  644. }}
  645. on:keydown={async (e) => {
  646. const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
  647. const commandsContainerElement =
  648. document.getElementById('commands-container');
  649. // Command/Ctrl + Shift + Enter to submit a message pair
  650. if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) {
  651. e.preventDefault();
  652. createMessagePair(prompt);
  653. }
  654. // Check if Ctrl + R is pressed
  655. if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
  656. e.preventDefault();
  657. console.log('regenerate');
  658. const regenerateButton = [
  659. ...document.getElementsByClassName('regenerate-response-button')
  660. ]?.at(-1);
  661. regenerateButton?.click();
  662. }
  663. if (prompt === '' && e.key == 'ArrowUp') {
  664. e.preventDefault();
  665. const userMessageElement = [
  666. ...document.getElementsByClassName('user-message')
  667. ]?.at(-1);
  668. const editButton = [
  669. ...document.getElementsByClassName('edit-user-message-button')
  670. ]?.at(-1);
  671. console.log(userMessageElement);
  672. userMessageElement.scrollIntoView({ block: 'center' });
  673. editButton?.click();
  674. }
  675. if (commandsContainerElement && e.key === 'ArrowUp') {
  676. e.preventDefault();
  677. commandsElement.selectUp();
  678. const commandOptionButton = [
  679. ...document.getElementsByClassName('selected-command-option-button')
  680. ]?.at(-1);
  681. commandOptionButton.scrollIntoView({ block: 'center' });
  682. }
  683. if (commandsContainerElement && e.key === 'ArrowDown') {
  684. e.preventDefault();
  685. commandsElement.selectDown();
  686. const commandOptionButton = [
  687. ...document.getElementsByClassName('selected-command-option-button')
  688. ]?.at(-1);
  689. commandOptionButton.scrollIntoView({ block: 'center' });
  690. }
  691. if (commandsContainerElement && e.key === 'Enter') {
  692. e.preventDefault();
  693. const commandOptionButton = [
  694. ...document.getElementsByClassName('selected-command-option-button')
  695. ]?.at(-1);
  696. if (e.shiftKey) {
  697. prompt = `${prompt}\n`;
  698. } else if (commandOptionButton) {
  699. commandOptionButton?.click();
  700. } else {
  701. document.getElementById('send-message-button')?.click();
  702. }
  703. }
  704. if (commandsContainerElement && e.key === 'Tab') {
  705. e.preventDefault();
  706. const commandOptionButton = [
  707. ...document.getElementsByClassName('selected-command-option-button')
  708. ]?.at(-1);
  709. commandOptionButton?.click();
  710. } else if (e.key === 'Tab') {
  711. const words = findWordIndices(prompt);
  712. if (words.length > 0) {
  713. const word = words.at(0);
  714. const fullPrompt = prompt;
  715. prompt = prompt.substring(0, word?.endIndex + 1);
  716. await tick();
  717. e.target.scrollTop = e.target.scrollHeight;
  718. prompt = fullPrompt;
  719. await tick();
  720. e.preventDefault();
  721. e.target.setSelectionRange(word?.startIndex, word.endIndex + 1);
  722. }
  723. e.target.style.height = '';
  724. e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
  725. }
  726. if (e.key === 'Escape') {
  727. console.log('Escape');
  728. atSelectedModel = undefined;
  729. }
  730. }}
  731. rows="1"
  732. on:input={async (e) => {
  733. e.target.style.height = '';
  734. e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
  735. user = null;
  736. }}
  737. on:focus={async (e) => {
  738. e.target.style.height = '';
  739. e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
  740. }}
  741. on:paste={async (e) => {
  742. const clipboardData = e.clipboardData || window.clipboardData;
  743. if (clipboardData && clipboardData.items) {
  744. for (const item of clipboardData.items) {
  745. if (item.type.indexOf('image') !== -1) {
  746. const blob = item.getAsFile();
  747. const reader = new FileReader();
  748. reader.onload = function (e) {
  749. files = [
  750. ...files,
  751. {
  752. type: 'image',
  753. url: `${e.target.result}`
  754. }
  755. ];
  756. };
  757. reader.readAsDataURL(blob);
  758. }
  759. }
  760. }
  761. }}
  762. />
  763. {/if}
  764. <div class="self-end mb-2 flex space-x-1 mr-1">
  765. {#if !history?.currentId || history.messages[history.currentId]?.done == true}
  766. <Tooltip content={$i18n.t('Record voice')}>
  767. <button
  768. id="voice-input-button"
  769. 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"
  770. type="button"
  771. on:click={async () => {
  772. try {
  773. let stream = await navigator.mediaDevices
  774. .getUserMedia({ audio: true })
  775. .catch(function (err) {
  776. toast.error(
  777. $i18n.t(
  778. `Permission denied when accessing microphone: {{error}}`,
  779. {
  780. error: err
  781. }
  782. )
  783. );
  784. return null;
  785. });
  786. if (stream) {
  787. recording = true;
  788. const tracks = stream.getTracks();
  789. tracks.forEach((track) => track.stop());
  790. }
  791. stream = null;
  792. } catch {
  793. toast.error($i18n.t('Permission denied when accessing microphone'));
  794. }
  795. }}
  796. aria-label="Voice Input"
  797. >
  798. <svg
  799. xmlns="http://www.w3.org/2000/svg"
  800. viewBox="0 0 20 20"
  801. fill="currentColor"
  802. class="w-5 h-5 translate-y-[0.5px]"
  803. >
  804. <path d="M7 4a3 3 0 016 0v6a3 3 0 11-6 0V4z" />
  805. <path
  806. 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"
  807. />
  808. </svg>
  809. </button>
  810. </Tooltip>
  811. {/if}
  812. </div>
  813. </div>
  814. </div>
  815. <div class="flex items-end w-10">
  816. {#if !history.currentId || history.messages[history.currentId]?.done == true}
  817. {#if prompt === ''}
  818. <div class=" flex items-center mb-1">
  819. <Tooltip content={$i18n.t('Call')}>
  820. <button
  821. class=" text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full p-2 self-center"
  822. type="button"
  823. on:click={async () => {
  824. if (selectedModels.length > 1) {
  825. toast.error($i18n.t('Select only one model to call'));
  826. return;
  827. }
  828. if ($config.audio.stt.engine === 'web') {
  829. toast.error(
  830. $i18n.t('Call feature is not supported when using Web STT engine')
  831. );
  832. return;
  833. }
  834. // check if user has access to getUserMedia
  835. try {
  836. let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  837. // If the user grants the permission, proceed to show the call overlay
  838. if (stream) {
  839. const tracks = stream.getTracks();
  840. tracks.forEach((track) => track.stop());
  841. }
  842. stream = null;
  843. showCallOverlay.set(true);
  844. showControls.set(true);
  845. } catch (err) {
  846. // If the user denies the permission or an error occurs, show an error message
  847. toast.error($i18n.t('Permission denied when accessing media devices'));
  848. }
  849. }}
  850. aria-label="Call"
  851. >
  852. <Headphone className="size-6" />
  853. </button>
  854. </Tooltip>
  855. </div>
  856. {:else}
  857. <div class=" flex items-center mb-1">
  858. <Tooltip content={$i18n.t('Send message')}>
  859. <button
  860. id="send-message-button"
  861. class="{prompt !== ''
  862. ? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
  863. : '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"
  864. type="submit"
  865. disabled={prompt === ''}
  866. >
  867. <svg
  868. xmlns="http://www.w3.org/2000/svg"
  869. viewBox="0 0 16 16"
  870. fill="currentColor"
  871. class="size-6"
  872. >
  873. <path
  874. fill-rule="evenodd"
  875. 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"
  876. clip-rule="evenodd"
  877. />
  878. </svg>
  879. </button>
  880. </Tooltip>
  881. </div>
  882. {/if}
  883. {:else}
  884. <div class=" flex items-center mb-1.5">
  885. <Tooltip content={$i18n.t('Stop')}>
  886. <button
  887. 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"
  888. on:click={() => {
  889. stopResponse();
  890. }}
  891. >
  892. <svg
  893. xmlns="http://www.w3.org/2000/svg"
  894. viewBox="0 0 24 24"
  895. fill="currentColor"
  896. class="size-6"
  897. >
  898. <path
  899. fill-rule="evenodd"
  900. 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"
  901. clip-rule="evenodd"
  902. />
  903. </svg>
  904. </button>
  905. </Tooltip>
  906. </div>
  907. {/if}
  908. </div>
  909. </form>
  910. {/if}
  911. </div>
  912. </div>
  913. </div>
  914. </div>