Chat.svelte 58 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257
  1. <script lang="ts">
  2. import { v4 as uuidv4 } from 'uuid';
  3. import { toast } from 'svelte-sonner';
  4. import mermaid from 'mermaid';
  5. import { PaneGroup, Pane, PaneResizer } from 'paneforge';
  6. import { getContext, onDestroy, onMount, tick } from 'svelte';
  7. const i18n: Writable<i18nType> = getContext('i18n');
  8. import { goto } from '$app/navigation';
  9. import { page } from '$app/stores';
  10. import { get, type Unsubscriber, type Writable } from 'svelte/store';
  11. import type { i18n as i18nType } from 'i18next';
  12. import { WEBUI_BASE_URL } from '$lib/constants';
  13. import {
  14. chatId,
  15. chats,
  16. config,
  17. type Model,
  18. models,
  19. tags as allTags,
  20. settings,
  21. showSidebar,
  22. WEBUI_NAME,
  23. banners,
  24. user,
  25. socket,
  26. showControls,
  27. showCallOverlay,
  28. currentChatPage,
  29. temporaryChatEnabled,
  30. mobile,
  31. showOverview,
  32. chatTitle,
  33. showArtifacts,
  34. tools,
  35. toolServers
  36. } from '$lib/stores';
  37. import {
  38. convertMessagesToHistory,
  39. copyToClipboard,
  40. getMessageContentParts,
  41. createMessagesList,
  42. extractSentencesForAudio,
  43. promptTemplate,
  44. splitStream,
  45. sleep,
  46. removeDetails,
  47. getPromptVariables,
  48. processDetails,
  49. removeAllDetails
  50. } from '$lib/utils';
  51. import { generateChatCompletion } from '$lib/apis/ollama';
  52. import {
  53. createNewChat,
  54. getAllTags,
  55. getChatById,
  56. getChatList,
  57. getTagsById,
  58. updateChatById
  59. } from '$lib/apis/chats';
  60. import { generateOpenAIChatCompletion } from '$lib/apis/openai';
  61. import { processWeb, processWebSearch, processYoutubeVideo } from '$lib/apis/retrieval';
  62. import { createOpenAITextStream } from '$lib/apis/streaming';
  63. import { queryMemory } from '$lib/apis/memories';
  64. import { getAndUpdateUserLocation, getUserSettings } from '$lib/apis/users';
  65. import {
  66. chatCompleted,
  67. generateQueries,
  68. chatAction,
  69. generateMoACompletion,
  70. stopTask,
  71. getTaskIdsByChatId
  72. } from '$lib/apis';
  73. import { getTools } from '$lib/apis/tools';
  74. import Banner from '../common/Banner.svelte';
  75. import MessageInput from '$lib/components/chat/MessageInput.svelte';
  76. import Messages from '$lib/components/chat/Messages.svelte';
  77. import Navbar from '$lib/components/chat/Navbar.svelte';
  78. import ChatControls from './ChatControls.svelte';
  79. import EventConfirmDialog from '../common/ConfirmDialog.svelte';
  80. import Placeholder from './Placeholder.svelte';
  81. import NotificationToast from '../NotificationToast.svelte';
  82. import Spinner from '../common/Spinner.svelte';
  83. import { fade } from 'svelte/transition';
  84. export let chatIdProp = '';
  85. let loading = true;
  86. const eventTarget = new EventTarget();
  87. let controlPane;
  88. let controlPaneComponent;
  89. let messageInput;
  90. let autoScroll = true;
  91. let processing = '';
  92. let messagesContainerElement: HTMLDivElement;
  93. let navbarElement;
  94. let showEventConfirmation = false;
  95. let eventConfirmationTitle = '';
  96. let eventConfirmationMessage = '';
  97. let eventConfirmationInput = false;
  98. let eventConfirmationInputPlaceholder = '';
  99. let eventConfirmationInputValue = '';
  100. let eventCallback = null;
  101. let chatIdUnsubscriber: Unsubscriber | undefined;
  102. let selectedModels = [''];
  103. let atSelectedModel: Model | undefined;
  104. let selectedModelIds = [];
  105. $: selectedModelIds = atSelectedModel !== undefined ? [atSelectedModel.id] : selectedModels;
  106. let selectedToolIds = [];
  107. let selectedFilterIds = [];
  108. let imageGenerationEnabled = false;
  109. let webSearchEnabled = false;
  110. let codeInterpreterEnabled = false;
  111. let chat = null;
  112. let tags = [];
  113. let history = {
  114. messages: {},
  115. currentId: null
  116. };
  117. let taskIds = null;
  118. // Chat Input
  119. let prompt = '';
  120. let chatFiles = [];
  121. let files = [];
  122. let params = {};
  123. $: if (chatIdProp) {
  124. navigateHandler();
  125. }
  126. const navigateHandler = async () => {
  127. loading = true;
  128. prompt = '';
  129. messageInput?.setText('');
  130. files = [];
  131. selectedToolIds = [];
  132. selectedFilterIds = [];
  133. webSearchEnabled = false;
  134. imageGenerationEnabled = false;
  135. const storageChatInput = sessionStorage.getItem(
  136. `chat-input${chatIdProp ? `-${chatIdProp}` : ''}`
  137. );
  138. if (chatIdProp && (await loadChat())) {
  139. await tick();
  140. loading = false;
  141. window.setTimeout(() => scrollToBottom(), 0);
  142. await tick();
  143. if (storageChatInput) {
  144. try {
  145. const input = JSON.parse(storageChatInput);
  146. console.log(input);
  147. if (!$temporaryChatEnabled) {
  148. messageInput?.setText(input.prompt);
  149. files = input.files;
  150. selectedToolIds = input.selectedToolIds;
  151. selectedFilterIds = input.selectedFilterIds;
  152. webSearchEnabled = input.webSearchEnabled;
  153. imageGenerationEnabled = input.imageGenerationEnabled;
  154. codeInterpreterEnabled = input.codeInterpreterEnabled;
  155. }
  156. } catch (e) {}
  157. }
  158. const chatInput = document.getElementById('chat-input');
  159. chatInput?.focus();
  160. } else {
  161. await goto('/');
  162. }
  163. };
  164. $: if (selectedModels && chatIdProp !== '') {
  165. saveSessionSelectedModels();
  166. }
  167. const saveSessionSelectedModels = () => {
  168. if (selectedModels.length === 0 || (selectedModels.length === 1 && selectedModels[0] === '')) {
  169. return;
  170. }
  171. sessionStorage.selectedModels = JSON.stringify(selectedModels);
  172. console.log('saveSessionSelectedModels', selectedModels, sessionStorage.selectedModels);
  173. };
  174. let oldSelectedModelIds = [''];
  175. $: if (JSON.stringify(selectedModelIds) !== JSON.stringify(oldSelectedModelIds)) {
  176. onSelectedModelIdsChange();
  177. }
  178. const onSelectedModelIdsChange = () => {
  179. if (oldSelectedModelIds.filter((id) => id).length > 0) {
  180. resetInput();
  181. }
  182. oldSelectedModelIds = selectedModelIds;
  183. };
  184. const resetInput = () => {
  185. console.debug('resetInput');
  186. setToolIds();
  187. selectedFilterIds = [];
  188. webSearchEnabled = false;
  189. imageGenerationEnabled = false;
  190. codeInterpreterEnabled = false;
  191. };
  192. const setToolIds = async () => {
  193. if (!$tools) {
  194. tools.set(await getTools(localStorage.token));
  195. }
  196. if (selectedModels.length !== 1 && !atSelectedModel) {
  197. return;
  198. }
  199. const model = atSelectedModel ?? $models.find((m) => m.id === selectedModels[0]);
  200. if (model && model?.info?.meta?.toolIds) {
  201. selectedToolIds = [
  202. ...new Set(
  203. [...(model?.info?.meta?.toolIds ?? [])].filter((id) => $tools.find((t) => t.id === id))
  204. )
  205. ];
  206. } else {
  207. selectedToolIds = [];
  208. }
  209. };
  210. const showMessage = async (message) => {
  211. await tick();
  212. const _chatId = JSON.parse(JSON.stringify($chatId));
  213. let _messageId = JSON.parse(JSON.stringify(message.id));
  214. let messageChildrenIds = [];
  215. if (_messageId === null) {
  216. messageChildrenIds = Object.keys(history.messages).filter(
  217. (id) => history.messages[id].parentId === null
  218. );
  219. } else {
  220. messageChildrenIds = history.messages[_messageId].childrenIds;
  221. }
  222. while (messageChildrenIds.length !== 0) {
  223. _messageId = messageChildrenIds.at(-1);
  224. messageChildrenIds = history.messages[_messageId].childrenIds;
  225. }
  226. history.currentId = _messageId;
  227. await tick();
  228. await tick();
  229. await tick();
  230. if ($settings?.scrollOnBranchChange ?? true) {
  231. const messageElement = document.getElementById(`message-${message.id}`);
  232. if (messageElement) {
  233. messageElement.scrollIntoView({ behavior: 'smooth' });
  234. }
  235. }
  236. await tick();
  237. saveChatHandler(_chatId, history);
  238. };
  239. const chatEventHandler = async (event, cb) => {
  240. console.log(event);
  241. if (event.chat_id === $chatId) {
  242. await tick();
  243. let message = history.messages[event.message_id];
  244. if (message) {
  245. const type = event?.data?.type ?? null;
  246. const data = event?.data?.data ?? null;
  247. if (type === 'status') {
  248. if (message?.statusHistory) {
  249. message.statusHistory.push(data);
  250. } else {
  251. message.statusHistory = [data];
  252. }
  253. } else if (type === 'chat:completion') {
  254. chatCompletionEventHandler(data, message, event.chat_id);
  255. } else if (type === 'chat:message:delta' || type === 'message') {
  256. message.content += data.content;
  257. } else if (type === 'chat:message' || type === 'replace') {
  258. message.content = data.content;
  259. } else if (type === 'chat:message:files' || type === 'files') {
  260. message.files = data.files;
  261. } else if (type === 'chat:message:follow_ups') {
  262. message.followUps = data.follow_ups;
  263. if (autoScroll) {
  264. scrollToBottom('smooth');
  265. }
  266. } else if (type === 'chat:title') {
  267. chatTitle.set(data);
  268. currentChatPage.set(1);
  269. await chats.set(await getChatList(localStorage.token, $currentChatPage));
  270. } else if (type === 'chat:tags') {
  271. chat = await getChatById(localStorage.token, $chatId);
  272. allTags.set(await getAllTags(localStorage.token));
  273. } else if (type === 'source' || type === 'citation') {
  274. if (data?.type === 'code_execution') {
  275. // Code execution; update existing code execution by ID, or add new one.
  276. if (!message?.code_executions) {
  277. message.code_executions = [];
  278. }
  279. const existingCodeExecutionIndex = message.code_executions.findIndex(
  280. (execution) => execution.id === data.id
  281. );
  282. if (existingCodeExecutionIndex !== -1) {
  283. message.code_executions[existingCodeExecutionIndex] = data;
  284. } else {
  285. message.code_executions.push(data);
  286. }
  287. message.code_executions = message.code_executions;
  288. } else {
  289. // Regular source.
  290. if (message?.sources) {
  291. message.sources.push(data);
  292. } else {
  293. message.sources = [data];
  294. }
  295. }
  296. } else if (type === 'notification') {
  297. const toastType = data?.type ?? 'info';
  298. const toastContent = data?.content ?? '';
  299. if (toastType === 'success') {
  300. toast.success(toastContent);
  301. } else if (toastType === 'error') {
  302. toast.error(toastContent);
  303. } else if (toastType === 'warning') {
  304. toast.warning(toastContent);
  305. } else {
  306. toast.info(toastContent);
  307. }
  308. } else if (type === 'confirmation') {
  309. eventCallback = cb;
  310. eventConfirmationInput = false;
  311. showEventConfirmation = true;
  312. eventConfirmationTitle = data.title;
  313. eventConfirmationMessage = data.message;
  314. } else if (type === 'execute') {
  315. eventCallback = cb;
  316. try {
  317. // Use Function constructor to evaluate code in a safer way
  318. const asyncFunction = new Function(`return (async () => { ${data.code} })()`);
  319. const result = await asyncFunction(); // Await the result of the async function
  320. if (cb) {
  321. cb(result);
  322. }
  323. } catch (error) {
  324. console.error('Error executing code:', error);
  325. }
  326. } else if (type === 'input') {
  327. eventCallback = cb;
  328. eventConfirmationInput = true;
  329. showEventConfirmation = true;
  330. eventConfirmationTitle = data.title;
  331. eventConfirmationMessage = data.message;
  332. eventConfirmationInputPlaceholder = data.placeholder;
  333. eventConfirmationInputValue = data?.value ?? '';
  334. } else {
  335. console.log('Unknown message type', data);
  336. }
  337. history.messages[event.message_id] = message;
  338. }
  339. }
  340. };
  341. const onMessageHandler = async (event: {
  342. origin: string;
  343. data: { type: string; text: string };
  344. }) => {
  345. if (event.origin !== window.origin) {
  346. return;
  347. }
  348. // Replace with your iframe's origin
  349. if (event.data.type === 'input:prompt') {
  350. console.debug(event.data.text);
  351. const inputElement = document.getElementById('chat-input');
  352. if (inputElement) {
  353. messageInput?.setText(event.data.text);
  354. inputElement.focus();
  355. }
  356. }
  357. if (event.data.type === 'action:submit') {
  358. console.debug(event.data.text);
  359. if (prompt !== '') {
  360. await tick();
  361. submitPrompt(prompt);
  362. }
  363. }
  364. if (event.data.type === 'input:prompt:submit') {
  365. console.debug(event.data.text);
  366. if (event.data.text !== '') {
  367. await tick();
  368. submitPrompt(event.data.text);
  369. }
  370. }
  371. };
  372. let pageSubscribe = null;
  373. onMount(async () => {
  374. loading = true;
  375. console.log('mounted');
  376. window.addEventListener('message', onMessageHandler);
  377. $socket?.on('chat-events', chatEventHandler);
  378. pageSubscribe = page.subscribe(async (p) => {
  379. if (p.url.pathname === '/') {
  380. await tick();
  381. initNewChat();
  382. }
  383. });
  384. const storageChatInput = sessionStorage.getItem(
  385. `chat-input${chatIdProp ? `-${chatIdProp}` : ''}`
  386. );
  387. if (!chatIdProp) {
  388. loading = false;
  389. await tick();
  390. }
  391. if (storageChatInput) {
  392. prompt = '';
  393. messageInput?.setText('');
  394. files = [];
  395. selectedToolIds = [];
  396. selectedFilterIds = [];
  397. webSearchEnabled = false;
  398. imageGenerationEnabled = false;
  399. codeInterpreterEnabled = false;
  400. try {
  401. const input = JSON.parse(storageChatInput);
  402. console.log(input);
  403. if (!$temporaryChatEnabled) {
  404. messageInput?.setText(input.prompt);
  405. files = input.files;
  406. selectedToolIds = input.selectedToolIds;
  407. selectedFilterIds = input.selectedFilterIds;
  408. webSearchEnabled = input.webSearchEnabled;
  409. imageGenerationEnabled = input.imageGenerationEnabled;
  410. codeInterpreterEnabled = input.codeInterpreterEnabled;
  411. }
  412. } catch (e) {}
  413. }
  414. showControls.subscribe(async (value) => {
  415. if (controlPane && !$mobile) {
  416. try {
  417. if (value) {
  418. controlPaneComponent.openPane();
  419. } else {
  420. controlPane.collapse();
  421. }
  422. } catch (e) {
  423. // ignore
  424. }
  425. }
  426. if (!value) {
  427. showCallOverlay.set(false);
  428. showOverview.set(false);
  429. showArtifacts.set(false);
  430. }
  431. });
  432. const chatInput = document.getElementById('chat-input');
  433. chatInput?.focus();
  434. chats.subscribe(() => {});
  435. });
  436. onDestroy(() => {
  437. pageSubscribe();
  438. chatIdUnsubscriber?.();
  439. window.removeEventListener('message', onMessageHandler);
  440. $socket?.off('chat-events', chatEventHandler);
  441. });
  442. // File upload functions
  443. const uploadGoogleDriveFile = async (fileData) => {
  444. console.log('Starting uploadGoogleDriveFile with:', {
  445. id: fileData.id,
  446. name: fileData.name,
  447. url: fileData.url,
  448. headers: {
  449. Authorization: `Bearer ${token}`
  450. }
  451. });
  452. // Validate input
  453. if (!fileData?.id || !fileData?.name || !fileData?.url || !fileData?.headers?.Authorization) {
  454. throw new Error('Invalid file data provided');
  455. }
  456. const tempItemId = uuidv4();
  457. const fileItem = {
  458. type: 'file',
  459. file: '',
  460. id: null,
  461. url: fileData.url,
  462. name: fileData.name,
  463. collection_name: '',
  464. status: 'uploading',
  465. error: '',
  466. itemId: tempItemId,
  467. size: 0
  468. };
  469. try {
  470. files = [...files, fileItem];
  471. console.log('Processing web file with URL:', fileData.url);
  472. // Configure fetch options with proper headers
  473. const fetchOptions = {
  474. headers: {
  475. Authorization: fileData.headers.Authorization,
  476. Accept: '*/*'
  477. },
  478. method: 'GET'
  479. };
  480. // Attempt to fetch the file
  481. console.log('Fetching file content from Google Drive...');
  482. const fileResponse = await fetch(fileData.url, fetchOptions);
  483. if (!fileResponse.ok) {
  484. const errorText = await fileResponse.text();
  485. throw new Error(`Failed to fetch file (${fileResponse.status}): ${errorText}`);
  486. }
  487. // Get content type from response
  488. const contentType = fileResponse.headers.get('content-type') || 'application/octet-stream';
  489. console.log('Response received with content-type:', contentType);
  490. // Convert response to blob
  491. console.log('Converting response to blob...');
  492. const fileBlob = await fileResponse.blob();
  493. if (fileBlob.size === 0) {
  494. throw new Error('Retrieved file is empty');
  495. }
  496. console.log('Blob created:', {
  497. size: fileBlob.size,
  498. type: fileBlob.type || contentType
  499. });
  500. // Create File object with proper MIME type
  501. const file = new File([fileBlob], fileData.name, {
  502. type: fileBlob.type || contentType
  503. });
  504. console.log('File object created:', {
  505. name: file.name,
  506. size: file.size,
  507. type: file.type
  508. });
  509. if (file.size === 0) {
  510. throw new Error('Created file is empty');
  511. }
  512. // If the file is an audio file, provide the language for STT.
  513. let metadata = null;
  514. if (
  515. (file.type.startsWith('audio/') || file.type.startsWith('video/')) &&
  516. $settings?.audio?.stt?.language
  517. ) {
  518. metadata = {
  519. language: $settings?.audio?.stt?.language
  520. };
  521. }
  522. // Upload file to server
  523. console.log('Uploading file to server...');
  524. const uploadedFile = await uploadFile(localStorage.token, file, metadata);
  525. if (!uploadedFile) {
  526. throw new Error('Server returned null response for file upload');
  527. }
  528. console.log('File uploaded successfully:', uploadedFile);
  529. // Update file item with upload results
  530. fileItem.status = 'uploaded';
  531. fileItem.file = uploadedFile;
  532. fileItem.id = uploadedFile.id;
  533. fileItem.size = file.size;
  534. fileItem.collection_name = uploadedFile?.meta?.collection_name;
  535. fileItem.url = `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`;
  536. files = files;
  537. toast.success($i18n.t('File uploaded successfully'));
  538. } catch (e) {
  539. console.error('Error uploading file:', e);
  540. files = files.filter((f) => f.itemId !== tempItemId);
  541. toast.error(
  542. $i18n.t('Error uploading file: {{error}}', {
  543. error: e.message || 'Unknown error'
  544. })
  545. );
  546. }
  547. };
  548. const uploadWeb = async (url) => {
  549. console.log(url);
  550. const fileItem = {
  551. type: 'doc',
  552. name: url,
  553. collection_name: '',
  554. status: 'uploading',
  555. url: url,
  556. error: ''
  557. };
  558. try {
  559. files = [...files, fileItem];
  560. const res = await processWeb(localStorage.token, '', url);
  561. if (res) {
  562. fileItem.status = 'uploaded';
  563. fileItem.collection_name = res.collection_name;
  564. fileItem.file = {
  565. ...res.file,
  566. ...fileItem.file
  567. };
  568. files = files;
  569. }
  570. } catch (e) {
  571. // Remove the failed doc from the files array
  572. files = files.filter((f) => f.name !== url);
  573. toast.error(JSON.stringify(e));
  574. }
  575. };
  576. const uploadYoutubeTranscription = async (url) => {
  577. console.log(url);
  578. const fileItem = {
  579. type: 'doc',
  580. name: url,
  581. collection_name: '',
  582. status: 'uploading',
  583. context: 'full',
  584. url: url,
  585. error: ''
  586. };
  587. try {
  588. files = [...files, fileItem];
  589. const res = await processYoutubeVideo(localStorage.token, url);
  590. if (res) {
  591. fileItem.status = 'uploaded';
  592. fileItem.collection_name = res.collection_name;
  593. fileItem.file = {
  594. ...res.file,
  595. ...fileItem.file
  596. };
  597. files = files;
  598. }
  599. } catch (e) {
  600. // Remove the failed doc from the files array
  601. files = files.filter((f) => f.name !== url);
  602. toast.error(`${e}`);
  603. }
  604. };
  605. //////////////////////////
  606. // Web functions
  607. //////////////////////////
  608. const initNewChat = async () => {
  609. if ($user?.role !== 'admin' && $user?.permissions?.chat?.temporary_enforced) {
  610. await temporaryChatEnabled.set(true);
  611. }
  612. const availableModels = $models
  613. .filter((m) => !(m?.info?.meta?.hidden ?? false))
  614. .map((m) => m.id);
  615. if ($page.url.searchParams.get('models') || $page.url.searchParams.get('model')) {
  616. const urlModels = (
  617. $page.url.searchParams.get('models') ||
  618. $page.url.searchParams.get('model') ||
  619. ''
  620. )?.split(',');
  621. if (urlModels.length === 1) {
  622. const m = $models.find((m) => m.id === urlModels[0]);
  623. if (!m) {
  624. const modelSelectorButton = document.getElementById('model-selector-0-button');
  625. if (modelSelectorButton) {
  626. modelSelectorButton.click();
  627. await tick();
  628. const modelSelectorInput = document.getElementById('model-search-input');
  629. if (modelSelectorInput) {
  630. modelSelectorInput.focus();
  631. modelSelectorInput.value = urlModels[0];
  632. modelSelectorInput.dispatchEvent(new Event('input'));
  633. }
  634. }
  635. } else {
  636. selectedModels = urlModels;
  637. }
  638. } else {
  639. selectedModels = urlModels;
  640. }
  641. selectedModels = selectedModels.filter((modelId) =>
  642. $models.map((m) => m.id).includes(modelId)
  643. );
  644. } else {
  645. if (sessionStorage.selectedModels) {
  646. selectedModels = JSON.parse(sessionStorage.selectedModels);
  647. sessionStorage.removeItem('selectedModels');
  648. } else {
  649. if ($settings?.models) {
  650. selectedModels = $settings?.models;
  651. } else if ($config?.default_models) {
  652. console.log($config?.default_models.split(',') ?? '');
  653. selectedModels = $config?.default_models.split(',');
  654. }
  655. }
  656. selectedModels = selectedModels.filter((modelId) => availableModels.includes(modelId));
  657. }
  658. if (selectedModels.length === 0 || (selectedModels.length === 1 && selectedModels[0] === '')) {
  659. if (availableModels.length > 0) {
  660. selectedModels = [availableModels?.at(0) ?? ''];
  661. } else {
  662. selectedModels = [''];
  663. }
  664. }
  665. await showControls.set(false);
  666. await showCallOverlay.set(false);
  667. await showOverview.set(false);
  668. await showArtifacts.set(false);
  669. if ($page.url.pathname.includes('/c/')) {
  670. window.history.replaceState(history.state, '', `/`);
  671. }
  672. autoScroll = true;
  673. resetInput();
  674. await chatId.set('');
  675. await chatTitle.set('');
  676. history = {
  677. messages: {},
  678. currentId: null
  679. };
  680. chatFiles = [];
  681. params = {};
  682. if ($page.url.searchParams.get('youtube')) {
  683. uploadYoutubeTranscription(
  684. `https://www.youtube.com/watch?v=${$page.url.searchParams.get('youtube')}`
  685. );
  686. }
  687. if ($page.url.searchParams.get('load-url')) {
  688. await uploadWeb($page.url.searchParams.get('load-url'));
  689. }
  690. if ($page.url.searchParams.get('web-search') === 'true') {
  691. webSearchEnabled = true;
  692. }
  693. if ($page.url.searchParams.get('image-generation') === 'true') {
  694. imageGenerationEnabled = true;
  695. }
  696. if ($page.url.searchParams.get('code-interpreter') === 'true') {
  697. codeInterpreterEnabled = true;
  698. }
  699. if ($page.url.searchParams.get('tools')) {
  700. selectedToolIds = $page.url.searchParams
  701. .get('tools')
  702. ?.split(',')
  703. .map((id) => id.trim())
  704. .filter((id) => id);
  705. } else if ($page.url.searchParams.get('tool-ids')) {
  706. selectedToolIds = $page.url.searchParams
  707. .get('tool-ids')
  708. ?.split(',')
  709. .map((id) => id.trim())
  710. .filter((id) => id);
  711. }
  712. if ($page.url.searchParams.get('call') === 'true') {
  713. showCallOverlay.set(true);
  714. showControls.set(true);
  715. }
  716. if ($page.url.searchParams.get('q')) {
  717. const q = $page.url.searchParams.get('q') ?? '';
  718. messageInput?.setText(q);
  719. if (q) {
  720. if (($page.url.searchParams.get('submit') ?? 'true') === 'true') {
  721. await tick();
  722. submitPrompt(q);
  723. }
  724. }
  725. }
  726. selectedModels = selectedModels.map((modelId) =>
  727. $models.map((m) => m.id).includes(modelId) ? modelId : ''
  728. );
  729. const userSettings = await getUserSettings(localStorage.token);
  730. if (userSettings) {
  731. settings.set(userSettings.ui);
  732. } else {
  733. settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
  734. }
  735. const chatInput = document.getElementById('chat-input');
  736. setTimeout(() => chatInput?.focus(), 0);
  737. };
  738. const loadChat = async () => {
  739. chatId.set(chatIdProp);
  740. if ($temporaryChatEnabled) {
  741. temporaryChatEnabled.set(false);
  742. }
  743. chat = await getChatById(localStorage.token, $chatId).catch(async (error) => {
  744. await goto('/');
  745. return null;
  746. });
  747. if (chat) {
  748. tags = await getTagsById(localStorage.token, $chatId).catch(async (error) => {
  749. return [];
  750. });
  751. const chatContent = chat.chat;
  752. if (chatContent) {
  753. console.log(chatContent);
  754. selectedModels =
  755. (chatContent?.models ?? undefined) !== undefined
  756. ? chatContent.models
  757. : [chatContent.models ?? ''];
  758. if (!($user?.role === 'admin' || ($user?.permissions?.chat?.multiple_models ?? true))) {
  759. selectedModels = selectedModels.length > 0 ? [selectedModels[0]] : [''];
  760. }
  761. oldSelectedModelIds = selectedModels;
  762. history =
  763. (chatContent?.history ?? undefined) !== undefined
  764. ? chatContent.history
  765. : convertMessagesToHistory(chatContent.messages);
  766. chatTitle.set(chatContent.title);
  767. const userSettings = await getUserSettings(localStorage.token);
  768. if (userSettings) {
  769. await settings.set(userSettings.ui);
  770. } else {
  771. await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
  772. }
  773. params = chatContent?.params ?? {};
  774. chatFiles = chatContent?.files ?? [];
  775. autoScroll = true;
  776. await tick();
  777. if (history.currentId) {
  778. for (const message of Object.values(history.messages)) {
  779. if (message.role === 'assistant') {
  780. message.done = true;
  781. }
  782. }
  783. }
  784. const taskRes = await getTaskIdsByChatId(localStorage.token, $chatId).catch((error) => {
  785. return null;
  786. });
  787. if (taskRes) {
  788. taskIds = taskRes.task_ids;
  789. }
  790. await tick();
  791. return true;
  792. } else {
  793. return null;
  794. }
  795. }
  796. };
  797. const scrollToBottom = async (behavior = 'auto') => {
  798. await tick();
  799. if (messagesContainerElement) {
  800. messagesContainerElement.scrollTo({
  801. top: messagesContainerElement.scrollHeight,
  802. behavior
  803. });
  804. }
  805. };
  806. const chatCompletedHandler = async (chatId, modelId, responseMessageId, messages) => {
  807. const res = await chatCompleted(localStorage.token, {
  808. model: modelId,
  809. messages: messages.map((m) => ({
  810. id: m.id,
  811. role: m.role,
  812. content: m.content,
  813. info: m.info ? m.info : undefined,
  814. timestamp: m.timestamp,
  815. ...(m.usage ? { usage: m.usage } : {}),
  816. ...(m.sources ? { sources: m.sources } : {})
  817. })),
  818. filter_ids: selectedFilterIds.length > 0 ? selectedFilterIds : undefined,
  819. model_item: $models.find((m) => m.id === modelId),
  820. chat_id: chatId,
  821. session_id: $socket?.id,
  822. id: responseMessageId
  823. }).catch((error) => {
  824. toast.error(`${error}`);
  825. messages.at(-1).error = { content: error };
  826. return null;
  827. });
  828. if (res !== null && res.messages) {
  829. // Update chat history with the new messages
  830. for (const message of res.messages) {
  831. if (message?.id) {
  832. // Add null check for message and message.id
  833. history.messages[message.id] = {
  834. ...history.messages[message.id],
  835. ...(history.messages[message.id].content !== message.content
  836. ? { originalContent: history.messages[message.id].content }
  837. : {}),
  838. ...message
  839. };
  840. }
  841. }
  842. }
  843. await tick();
  844. if ($chatId == chatId) {
  845. if (!$temporaryChatEnabled) {
  846. chat = await updateChatById(localStorage.token, chatId, {
  847. models: selectedModels,
  848. messages: messages,
  849. history: history,
  850. params: params,
  851. files: chatFiles
  852. });
  853. currentChatPage.set(1);
  854. await chats.set(await getChatList(localStorage.token, $currentChatPage));
  855. }
  856. }
  857. taskIds = null;
  858. };
  859. const chatActionHandler = async (chatId, actionId, modelId, responseMessageId, event = null) => {
  860. const messages = createMessagesList(history, responseMessageId);
  861. const res = await chatAction(localStorage.token, actionId, {
  862. model: modelId,
  863. messages: messages.map((m) => ({
  864. id: m.id,
  865. role: m.role,
  866. content: m.content,
  867. info: m.info ? m.info : undefined,
  868. timestamp: m.timestamp,
  869. ...(m.sources ? { sources: m.sources } : {})
  870. })),
  871. ...(event ? { event: event } : {}),
  872. model_item: $models.find((m) => m.id === modelId),
  873. chat_id: chatId,
  874. session_id: $socket?.id,
  875. id: responseMessageId
  876. }).catch((error) => {
  877. toast.error(`${error}`);
  878. messages.at(-1).error = { content: error };
  879. return null;
  880. });
  881. if (res !== null && res.messages) {
  882. // Update chat history with the new messages
  883. for (const message of res.messages) {
  884. history.messages[message.id] = {
  885. ...history.messages[message.id],
  886. ...(history.messages[message.id].content !== message.content
  887. ? { originalContent: history.messages[message.id].content }
  888. : {}),
  889. ...message
  890. };
  891. }
  892. }
  893. if ($chatId == chatId) {
  894. if (!$temporaryChatEnabled) {
  895. chat = await updateChatById(localStorage.token, chatId, {
  896. models: selectedModels,
  897. messages: messages,
  898. history: history,
  899. params: params,
  900. files: chatFiles
  901. });
  902. currentChatPage.set(1);
  903. await chats.set(await getChatList(localStorage.token, $currentChatPage));
  904. }
  905. }
  906. };
  907. const getChatEventEmitter = async (modelId: string, chatId: string = '') => {
  908. return setInterval(() => {
  909. $socket?.emit('usage', {
  910. action: 'chat',
  911. model: modelId,
  912. chat_id: chatId
  913. });
  914. }, 1000);
  915. };
  916. const createMessagePair = async (userPrompt) => {
  917. messageInput?.setText('');
  918. if (selectedModels.length === 0) {
  919. toast.error($i18n.t('Model not selected'));
  920. } else {
  921. const modelId = selectedModels[0];
  922. const model = $models.filter((m) => m.id === modelId).at(0);
  923. const messages = createMessagesList(history, history.currentId);
  924. const parentMessage = messages.length !== 0 ? messages.at(-1) : null;
  925. const userMessageId = uuidv4();
  926. const responseMessageId = uuidv4();
  927. const userMessage = {
  928. id: userMessageId,
  929. parentId: parentMessage ? parentMessage.id : null,
  930. childrenIds: [responseMessageId],
  931. role: 'user',
  932. content: userPrompt ? userPrompt : `[PROMPT] ${userMessageId}`,
  933. timestamp: Math.floor(Date.now() / 1000)
  934. };
  935. const responseMessage = {
  936. id: responseMessageId,
  937. parentId: userMessageId,
  938. childrenIds: [],
  939. role: 'assistant',
  940. content: `[RESPONSE] ${responseMessageId}`,
  941. done: true,
  942. model: modelId,
  943. modelName: model.name ?? model.id,
  944. modelIdx: 0,
  945. timestamp: Math.floor(Date.now() / 1000)
  946. };
  947. if (parentMessage) {
  948. parentMessage.childrenIds.push(userMessageId);
  949. history.messages[parentMessage.id] = parentMessage;
  950. }
  951. history.messages[userMessageId] = userMessage;
  952. history.messages[responseMessageId] = responseMessage;
  953. history.currentId = responseMessageId;
  954. await tick();
  955. if (autoScroll) {
  956. scrollToBottom();
  957. }
  958. if (messages.length === 0) {
  959. await initChatHandler(history);
  960. } else {
  961. await saveChatHandler($chatId, history);
  962. }
  963. }
  964. };
  965. const addMessages = async ({ modelId, parentId, messages }) => {
  966. const model = $models.filter((m) => m.id === modelId).at(0);
  967. let parentMessage = history.messages[parentId];
  968. let currentParentId = parentMessage ? parentMessage.id : null;
  969. for (const message of messages) {
  970. let messageId = uuidv4();
  971. if (message.role === 'user') {
  972. const userMessage = {
  973. id: messageId,
  974. parentId: currentParentId,
  975. childrenIds: [],
  976. timestamp: Math.floor(Date.now() / 1000),
  977. ...message
  978. };
  979. if (parentMessage) {
  980. parentMessage.childrenIds.push(messageId);
  981. history.messages[parentMessage.id] = parentMessage;
  982. }
  983. history.messages[messageId] = userMessage;
  984. parentMessage = userMessage;
  985. currentParentId = messageId;
  986. } else {
  987. const responseMessage = {
  988. id: messageId,
  989. parentId: currentParentId,
  990. childrenIds: [],
  991. done: true,
  992. model: model.id,
  993. modelName: model.name ?? model.id,
  994. modelIdx: 0,
  995. timestamp: Math.floor(Date.now() / 1000),
  996. ...message
  997. };
  998. if (parentMessage) {
  999. parentMessage.childrenIds.push(messageId);
  1000. history.messages[parentMessage.id] = parentMessage;
  1001. }
  1002. history.messages[messageId] = responseMessage;
  1003. parentMessage = responseMessage;
  1004. currentParentId = messageId;
  1005. }
  1006. }
  1007. history.currentId = currentParentId;
  1008. await tick();
  1009. if (autoScroll) {
  1010. scrollToBottom();
  1011. }
  1012. if (messages.length === 0) {
  1013. await initChatHandler(history);
  1014. } else {
  1015. await saveChatHandler($chatId, history);
  1016. }
  1017. };
  1018. const chatCompletionEventHandler = async (data, message, chatId) => {
  1019. const { id, done, choices, content, sources, selected_model_id, error, usage } = data;
  1020. if (error) {
  1021. await handleOpenAIError(error, message);
  1022. }
  1023. if (sources) {
  1024. message.sources = sources;
  1025. }
  1026. if (choices) {
  1027. if (choices[0]?.message?.content) {
  1028. // Non-stream response
  1029. message.content += choices[0]?.message?.content;
  1030. } else {
  1031. // Stream response
  1032. let value = choices[0]?.delta?.content ?? '';
  1033. if (message.content == '' && value == '\n') {
  1034. console.log('Empty response');
  1035. } else {
  1036. message.content += value;
  1037. if (navigator.vibrate && ($settings?.hapticFeedback ?? false)) {
  1038. navigator.vibrate(5);
  1039. }
  1040. // Emit chat event for TTS
  1041. const messageContentParts = getMessageContentParts(
  1042. removeAllDetails(message.content),
  1043. $config?.audio?.tts?.split_on ?? 'punctuation'
  1044. );
  1045. messageContentParts.pop();
  1046. // dispatch only last sentence and make sure it hasn't been dispatched before
  1047. if (
  1048. messageContentParts.length > 0 &&
  1049. messageContentParts[messageContentParts.length - 1] !== message.lastSentence
  1050. ) {
  1051. message.lastSentence = messageContentParts[messageContentParts.length - 1];
  1052. eventTarget.dispatchEvent(
  1053. new CustomEvent('chat', {
  1054. detail: {
  1055. id: message.id,
  1056. content: messageContentParts[messageContentParts.length - 1]
  1057. }
  1058. })
  1059. );
  1060. }
  1061. }
  1062. }
  1063. }
  1064. if (content) {
  1065. // REALTIME_CHAT_SAVE is disabled
  1066. message.content = content;
  1067. if (navigator.vibrate && ($settings?.hapticFeedback ?? false)) {
  1068. navigator.vibrate(5);
  1069. }
  1070. // Emit chat event for TTS
  1071. const messageContentParts = getMessageContentParts(
  1072. removeAllDetails(message.content),
  1073. $config?.audio?.tts?.split_on ?? 'punctuation'
  1074. );
  1075. messageContentParts.pop();
  1076. // dispatch only last sentence and make sure it hasn't been dispatched before
  1077. if (
  1078. messageContentParts.length > 0 &&
  1079. messageContentParts[messageContentParts.length - 1] !== message.lastSentence
  1080. ) {
  1081. message.lastSentence = messageContentParts[messageContentParts.length - 1];
  1082. eventTarget.dispatchEvent(
  1083. new CustomEvent('chat', {
  1084. detail: {
  1085. id: message.id,
  1086. content: messageContentParts[messageContentParts.length - 1]
  1087. }
  1088. })
  1089. );
  1090. }
  1091. }
  1092. if (selected_model_id) {
  1093. message.selectedModelId = selected_model_id;
  1094. message.arena = true;
  1095. }
  1096. if (usage) {
  1097. message.usage = usage;
  1098. }
  1099. history.messages[message.id] = message;
  1100. if (done) {
  1101. message.done = true;
  1102. if ($settings.responseAutoCopy) {
  1103. copyToClipboard(message.content);
  1104. }
  1105. if ($settings.responseAutoPlayback && !$showCallOverlay) {
  1106. await tick();
  1107. document.getElementById(`speak-button-${message.id}`)?.click();
  1108. }
  1109. // Emit chat event for TTS
  1110. let lastMessageContentPart =
  1111. getMessageContentParts(
  1112. removeAllDetails(message.content),
  1113. $config?.audio?.tts?.split_on ?? 'punctuation'
  1114. )?.at(-1) ?? '';
  1115. if (lastMessageContentPart) {
  1116. eventTarget.dispatchEvent(
  1117. new CustomEvent('chat', {
  1118. detail: { id: message.id, content: lastMessageContentPart }
  1119. })
  1120. );
  1121. }
  1122. eventTarget.dispatchEvent(
  1123. new CustomEvent('chat:finish', {
  1124. detail: {
  1125. id: message.id,
  1126. content: message.content
  1127. }
  1128. })
  1129. );
  1130. history.messages[message.id] = message;
  1131. await chatCompletedHandler(
  1132. chatId,
  1133. message.model,
  1134. message.id,
  1135. createMessagesList(history, message.id)
  1136. );
  1137. }
  1138. console.log(data);
  1139. if (autoScroll) {
  1140. scrollToBottom();
  1141. }
  1142. };
  1143. //////////////////////////
  1144. // Chat functions
  1145. //////////////////////////
  1146. const submitPrompt = async (userPrompt, { _raw = false } = {}) => {
  1147. console.log('submitPrompt', userPrompt, $chatId);
  1148. const messages = createMessagesList(history, history.currentId);
  1149. const _selectedModels = selectedModels.map((modelId) =>
  1150. $models.map((m) => m.id).includes(modelId) ? modelId : ''
  1151. );
  1152. if (JSON.stringify(selectedModels) !== JSON.stringify(_selectedModels)) {
  1153. selectedModels = _selectedModels;
  1154. }
  1155. if (userPrompt === '' && files.length === 0) {
  1156. toast.error($i18n.t('Please enter a prompt'));
  1157. return;
  1158. }
  1159. if (selectedModels.includes('')) {
  1160. toast.error($i18n.t('Model not selected'));
  1161. return;
  1162. }
  1163. if (messages.length != 0 && messages.at(-1).done != true) {
  1164. // Response not done
  1165. return;
  1166. }
  1167. if (messages.length != 0 && messages.at(-1).error && !messages.at(-1).content) {
  1168. // Error in response
  1169. toast.error($i18n.t(`Oops! There was an error in the previous response.`));
  1170. return;
  1171. }
  1172. if (
  1173. files.length > 0 &&
  1174. files.filter((file) => file.type !== 'image' && file.status === 'uploading').length > 0
  1175. ) {
  1176. toast.error(
  1177. $i18n.t(`Oops! There are files still uploading. Please wait for the upload to complete.`)
  1178. );
  1179. return;
  1180. }
  1181. if (
  1182. ($config?.file?.max_count ?? null) !== null &&
  1183. files.length + chatFiles.length > $config?.file?.max_count
  1184. ) {
  1185. toast.error(
  1186. $i18n.t(`You can only chat with a maximum of {{maxCount}} file(s) at a time.`, {
  1187. maxCount: $config?.file?.max_count
  1188. })
  1189. );
  1190. return;
  1191. }
  1192. messageInput?.setText('');
  1193. // Reset chat input textarea
  1194. if (!($settings?.richTextInput ?? true)) {
  1195. const chatInputElement = document.getElementById('chat-input');
  1196. if (chatInputElement) {
  1197. await tick();
  1198. chatInputElement.style.height = '';
  1199. }
  1200. }
  1201. const _files = JSON.parse(JSON.stringify(files));
  1202. chatFiles.push(..._files.filter((item) => ['doc', 'file', 'collection'].includes(item.type)));
  1203. chatFiles = chatFiles.filter(
  1204. // Remove duplicates
  1205. (item, index, array) =>
  1206. array.findIndex((i) => JSON.stringify(i) === JSON.stringify(item)) === index
  1207. );
  1208. files = [];
  1209. messageInput?.setText('');
  1210. // Create user message
  1211. let userMessageId = uuidv4();
  1212. let userMessage = {
  1213. id: userMessageId,
  1214. parentId: messages.length !== 0 ? messages.at(-1).id : null,
  1215. childrenIds: [],
  1216. role: 'user',
  1217. content: userPrompt,
  1218. files: _files.length > 0 ? _files : undefined,
  1219. timestamp: Math.floor(Date.now() / 1000), // Unix epoch
  1220. models: selectedModels
  1221. };
  1222. // Add message to history and Set currentId to messageId
  1223. history.messages[userMessageId] = userMessage;
  1224. history.currentId = userMessageId;
  1225. // Append messageId to childrenIds of parent message
  1226. if (messages.length !== 0) {
  1227. history.messages[messages.at(-1).id].childrenIds.push(userMessageId);
  1228. }
  1229. // focus on chat input
  1230. const chatInput = document.getElementById('chat-input');
  1231. chatInput?.focus();
  1232. saveSessionSelectedModels();
  1233. await sendPrompt(history, userPrompt, userMessageId, { newChat: true });
  1234. };
  1235. const sendPrompt = async (
  1236. _history,
  1237. prompt: string,
  1238. parentId: string,
  1239. { modelId = null, modelIdx = null, newChat = false } = {}
  1240. ) => {
  1241. if (autoScroll) {
  1242. scrollToBottom();
  1243. }
  1244. let _chatId = JSON.parse(JSON.stringify($chatId));
  1245. _history = JSON.parse(JSON.stringify(_history));
  1246. const responseMessageIds: Record<PropertyKey, string> = {};
  1247. // If modelId is provided, use it, else use selected model
  1248. let selectedModelIds = modelId
  1249. ? [modelId]
  1250. : atSelectedModel !== undefined
  1251. ? [atSelectedModel.id]
  1252. : selectedModels;
  1253. // Create response messages for each selected model
  1254. for (const [_modelIdx, modelId] of selectedModelIds.entries()) {
  1255. const model = $models.filter((m) => m.id === modelId).at(0);
  1256. if (model) {
  1257. let responseMessageId = uuidv4();
  1258. let responseMessage = {
  1259. parentId: parentId,
  1260. id: responseMessageId,
  1261. childrenIds: [],
  1262. role: 'assistant',
  1263. content: '',
  1264. model: model.id,
  1265. modelName: model.name ?? model.id,
  1266. modelIdx: modelIdx ? modelIdx : _modelIdx,
  1267. timestamp: Math.floor(Date.now() / 1000) // Unix epoch
  1268. };
  1269. // Add message to history and Set currentId to messageId
  1270. history.messages[responseMessageId] = responseMessage;
  1271. history.currentId = responseMessageId;
  1272. // Append messageId to childrenIds of parent message
  1273. if (parentId !== null && history.messages[parentId]) {
  1274. // Add null check before accessing childrenIds
  1275. history.messages[parentId].childrenIds = [
  1276. ...history.messages[parentId].childrenIds,
  1277. responseMessageId
  1278. ];
  1279. }
  1280. responseMessageIds[`${modelId}-${modelIdx ? modelIdx : _modelIdx}`] = responseMessageId;
  1281. }
  1282. }
  1283. history = history;
  1284. // Create new chat if newChat is true and first user message
  1285. if (newChat && _history.messages[_history.currentId].parentId === null) {
  1286. _chatId = await initChatHandler(_history);
  1287. }
  1288. await tick();
  1289. _history = JSON.parse(JSON.stringify(history));
  1290. // Save chat after all messages have been created
  1291. await saveChatHandler(_chatId, _history);
  1292. await Promise.all(
  1293. selectedModelIds.map(async (modelId, _modelIdx) => {
  1294. console.log('modelId', modelId);
  1295. const model = $models.filter((m) => m.id === modelId).at(0);
  1296. if (model) {
  1297. const messages = createMessagesList(_history, parentId);
  1298. // If there are image files, check if model is vision capable
  1299. const hasImages = messages.some((message) =>
  1300. message.files?.some((file) => file.type === 'image')
  1301. );
  1302. if (hasImages && !(model.info?.meta?.capabilities?.vision ?? true)) {
  1303. toast.error(
  1304. $i18n.t('Model {{modelName}} is not vision capable', {
  1305. modelName: model.name ?? model.id
  1306. })
  1307. );
  1308. }
  1309. let responseMessageId =
  1310. responseMessageIds[`${modelId}-${modelIdx ? modelIdx : _modelIdx}`];
  1311. const chatEventEmitter = await getChatEventEmitter(model.id, _chatId);
  1312. scrollToBottom();
  1313. await sendPromptSocket(_history, model, responseMessageId, _chatId);
  1314. if (chatEventEmitter) clearInterval(chatEventEmitter);
  1315. } else {
  1316. toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
  1317. }
  1318. })
  1319. );
  1320. currentChatPage.set(1);
  1321. chats.set(await getChatList(localStorage.token, $currentChatPage));
  1322. };
  1323. const sendPromptSocket = async (_history, model, responseMessageId, _chatId) => {
  1324. const chatMessages = createMessagesList(history, history.currentId);
  1325. const responseMessage = _history.messages[responseMessageId];
  1326. const userMessage = _history.messages[responseMessage.parentId];
  1327. const chatMessageFiles = chatMessages
  1328. .filter((message) => message.files)
  1329. .flatMap((message) => message.files);
  1330. // Filter chatFiles to only include files that are in the chatMessageFiles
  1331. chatFiles = chatFiles.filter((item) => {
  1332. const fileExists = chatMessageFiles.some((messageFile) => messageFile.id === item.id);
  1333. return fileExists;
  1334. });
  1335. let files = JSON.parse(JSON.stringify(chatFiles));
  1336. files.push(
  1337. ...(userMessage?.files ?? []).filter((item) =>
  1338. ['doc', 'file', 'collection'].includes(item.type)
  1339. ),
  1340. ...(responseMessage?.files ?? []).filter((item) => ['web_search_results'].includes(item.type))
  1341. );
  1342. // Remove duplicates
  1343. files = files.filter(
  1344. (item, index, array) =>
  1345. array.findIndex((i) => JSON.stringify(i) === JSON.stringify(item)) === index
  1346. );
  1347. scrollToBottom();
  1348. eventTarget.dispatchEvent(
  1349. new CustomEvent('chat:start', {
  1350. detail: {
  1351. id: responseMessageId
  1352. }
  1353. })
  1354. );
  1355. await tick();
  1356. const stream =
  1357. model?.info?.params?.stream_response ??
  1358. $settings?.params?.stream_response ??
  1359. params?.stream_response ??
  1360. true;
  1361. let messages = [
  1362. params?.system || $settings.system
  1363. ? {
  1364. role: 'system',
  1365. content: `${promptTemplate(
  1366. params?.system ?? $settings?.system ?? '',
  1367. $user?.name,
  1368. $settings?.userLocation
  1369. ? await getAndUpdateUserLocation(localStorage.token).catch((err) => {
  1370. console.error(err);
  1371. return undefined;
  1372. })
  1373. : undefined
  1374. )}`
  1375. }
  1376. : undefined,
  1377. ...createMessagesList(_history, responseMessageId).map((message) => ({
  1378. ...message,
  1379. content: processDetails(message.content)
  1380. }))
  1381. ].filter((message) => message);
  1382. messages = messages
  1383. .map((message, idx, arr) => ({
  1384. role: message.role,
  1385. ...((message.files?.filter((file) => file.type === 'image').length > 0 ?? false) &&
  1386. message.role === 'user'
  1387. ? {
  1388. content: [
  1389. {
  1390. type: 'text',
  1391. text: message?.merged?.content ?? message.content
  1392. },
  1393. ...message.files
  1394. .filter((file) => file.type === 'image')
  1395. .map((file) => ({
  1396. type: 'image_url',
  1397. image_url: {
  1398. url: file.url
  1399. }
  1400. }))
  1401. ]
  1402. }
  1403. : {
  1404. content: message?.merged?.content ?? message.content
  1405. })
  1406. }))
  1407. .filter((message) => message?.role === 'user' || message?.content?.trim());
  1408. const res = await generateOpenAIChatCompletion(
  1409. localStorage.token,
  1410. {
  1411. stream: stream,
  1412. model: model.id,
  1413. messages: messages,
  1414. params: {
  1415. ...$settings?.params,
  1416. ...params,
  1417. stop:
  1418. (params?.stop ?? $settings?.params?.stop ?? undefined)
  1419. ? (params?.stop.split(',').map((token) => token.trim()) ?? $settings.params.stop).map(
  1420. (str) => decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
  1421. )
  1422. : undefined
  1423. },
  1424. files: (files?.length ?? 0) > 0 ? files : undefined,
  1425. filter_ids: selectedFilterIds.length > 0 ? selectedFilterIds : undefined,
  1426. tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
  1427. tool_servers: $toolServers,
  1428. features: {
  1429. image_generation:
  1430. $config?.features?.enable_image_generation &&
  1431. ($user?.role === 'admin' || $user?.permissions?.features?.image_generation)
  1432. ? imageGenerationEnabled
  1433. : false,
  1434. code_interpreter:
  1435. $config?.features?.enable_code_interpreter &&
  1436. ($user?.role === 'admin' || $user?.permissions?.features?.code_interpreter)
  1437. ? codeInterpreterEnabled
  1438. : false,
  1439. web_search:
  1440. $config?.features?.enable_web_search &&
  1441. ($user?.role === 'admin' || $user?.permissions?.features?.web_search)
  1442. ? webSearchEnabled || ($settings?.webSearch ?? false) === 'always'
  1443. : false,
  1444. memory: $settings?.memory ?? false
  1445. },
  1446. variables: {
  1447. ...getPromptVariables(
  1448. $user?.name,
  1449. $settings?.userLocation
  1450. ? await getAndUpdateUserLocation(localStorage.token).catch((err) => {
  1451. console.error(err);
  1452. return undefined;
  1453. })
  1454. : undefined
  1455. )
  1456. },
  1457. model_item: $models.find((m) => m.id === model.id),
  1458. session_id: $socket?.id,
  1459. chat_id: $chatId,
  1460. id: responseMessageId,
  1461. background_tasks: {
  1462. ...(!$temporaryChatEnabled &&
  1463. (messages.length == 1 ||
  1464. (messages.length == 2 &&
  1465. messages.at(0)?.role === 'system' &&
  1466. messages.at(1)?.role === 'user')) &&
  1467. (selectedModels[0] === model.id || atSelectedModel !== undefined)
  1468. ? {
  1469. title_generation: $settings?.title?.auto ?? true,
  1470. tags_generation: $settings?.autoTags ?? true
  1471. }
  1472. : {}),
  1473. follow_up_generation: $settings?.autoFollowUps ?? true
  1474. },
  1475. ...(stream && (model.info?.meta?.capabilities?.usage ?? false)
  1476. ? {
  1477. stream_options: {
  1478. include_usage: true
  1479. }
  1480. }
  1481. : {})
  1482. },
  1483. `${WEBUI_BASE_URL}/api`
  1484. ).catch(async (error) => {
  1485. toast.error(`${error}`);
  1486. responseMessage.error = {
  1487. content: error
  1488. };
  1489. responseMessage.done = true;
  1490. history.messages[responseMessageId] = responseMessage;
  1491. history.currentId = responseMessageId;
  1492. return null;
  1493. });
  1494. if (res) {
  1495. if (res.error) {
  1496. await handleOpenAIError(res.error, responseMessage);
  1497. } else {
  1498. if (taskIds) {
  1499. taskIds.push(res.task_id);
  1500. } else {
  1501. taskIds = [res.task_id];
  1502. }
  1503. }
  1504. }
  1505. await tick();
  1506. scrollToBottom();
  1507. };
  1508. const handleOpenAIError = async (error, responseMessage) => {
  1509. let errorMessage = '';
  1510. let innerError;
  1511. if (error) {
  1512. innerError = error;
  1513. }
  1514. console.error(innerError);
  1515. if ('detail' in innerError) {
  1516. // FastAPI error
  1517. toast.error(innerError.detail);
  1518. errorMessage = innerError.detail;
  1519. } else if ('error' in innerError) {
  1520. // OpenAI error
  1521. if ('message' in innerError.error) {
  1522. toast.error(innerError.error.message);
  1523. errorMessage = innerError.error.message;
  1524. } else {
  1525. toast.error(innerError.error);
  1526. errorMessage = innerError.error;
  1527. }
  1528. } else if ('message' in innerError) {
  1529. // OpenAI error
  1530. toast.error(innerError.message);
  1531. errorMessage = innerError.message;
  1532. }
  1533. responseMessage.error = {
  1534. content: $i18n.t(`Uh-oh! There was an issue with the response.`) + '\n' + errorMessage
  1535. };
  1536. responseMessage.done = true;
  1537. if (responseMessage.statusHistory) {
  1538. responseMessage.statusHistory = responseMessage.statusHistory.filter(
  1539. (status) => status.action !== 'knowledge_search'
  1540. );
  1541. }
  1542. history.messages[responseMessage.id] = responseMessage;
  1543. };
  1544. const stopResponse = async () => {
  1545. if (taskIds) {
  1546. for (const taskId of taskIds) {
  1547. const res = await stopTask(localStorage.token, taskId).catch((error) => {
  1548. toast.error(`${error}`);
  1549. return null;
  1550. });
  1551. }
  1552. taskIds = null;
  1553. const responseMessage = history.messages[history.currentId];
  1554. // Set all response messages to done
  1555. for (const messageId of history.messages[responseMessage.parentId].childrenIds) {
  1556. history.messages[messageId].done = true;
  1557. }
  1558. history.messages[history.currentId] = responseMessage;
  1559. if (autoScroll) {
  1560. scrollToBottom();
  1561. }
  1562. }
  1563. };
  1564. const submitMessage = async (parentId, prompt) => {
  1565. let userPrompt = prompt;
  1566. let userMessageId = uuidv4();
  1567. let userMessage = {
  1568. id: userMessageId,
  1569. parentId: parentId,
  1570. childrenIds: [],
  1571. role: 'user',
  1572. content: userPrompt,
  1573. models: selectedModels,
  1574. timestamp: Math.floor(Date.now() / 1000) // Unix epoch
  1575. };
  1576. if (parentId !== null) {
  1577. history.messages[parentId].childrenIds = [
  1578. ...history.messages[parentId].childrenIds,
  1579. userMessageId
  1580. ];
  1581. }
  1582. history.messages[userMessageId] = userMessage;
  1583. history.currentId = userMessageId;
  1584. await tick();
  1585. if (autoScroll) {
  1586. scrollToBottom();
  1587. }
  1588. await sendPrompt(history, userPrompt, userMessageId);
  1589. };
  1590. const regenerateResponse = async (message) => {
  1591. console.log('regenerateResponse');
  1592. if (history.currentId) {
  1593. let userMessage = history.messages[message.parentId];
  1594. let userPrompt = userMessage.content;
  1595. if (autoScroll) {
  1596. scrollToBottom();
  1597. }
  1598. if ((userMessage?.models ?? [...selectedModels]).length == 1) {
  1599. // If user message has only one model selected, sendPrompt automatically selects it for regeneration
  1600. await sendPrompt(history, userPrompt, userMessage.id);
  1601. } else {
  1602. // If there are multiple models selected, use the model of the response message for regeneration
  1603. // e.g. many model chat
  1604. await sendPrompt(history, userPrompt, userMessage.id, {
  1605. modelId: message.model,
  1606. modelIdx: message.modelIdx
  1607. });
  1608. }
  1609. }
  1610. };
  1611. const continueResponse = async () => {
  1612. console.log('continueResponse');
  1613. const _chatId = JSON.parse(JSON.stringify($chatId));
  1614. if (history.currentId && history.messages[history.currentId].done == true) {
  1615. const responseMessage = history.messages[history.currentId];
  1616. responseMessage.done = false;
  1617. await tick();
  1618. const model = $models
  1619. .filter((m) => m.id === (responseMessage?.selectedModelId ?? responseMessage.model))
  1620. .at(0);
  1621. if (model) {
  1622. await sendPromptSocket(history, model, responseMessage.id, _chatId);
  1623. }
  1624. }
  1625. };
  1626. const mergeResponses = async (messageId, responses, _chatId) => {
  1627. console.log('mergeResponses', messageId, responses);
  1628. const message = history.messages[messageId];
  1629. const mergedResponse = {
  1630. status: true,
  1631. content: ''
  1632. };
  1633. message.merged = mergedResponse;
  1634. history.messages[messageId] = message;
  1635. try {
  1636. const [res, controller] = await generateMoACompletion(
  1637. localStorage.token,
  1638. message.model,
  1639. history.messages[message.parentId].content,
  1640. responses
  1641. );
  1642. if (res && res.ok && res.body) {
  1643. const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
  1644. for await (const update of textStream) {
  1645. const { value, done, sources, error, usage } = update;
  1646. if (error || done) {
  1647. break;
  1648. }
  1649. if (mergedResponse.content == '' && value == '\n') {
  1650. continue;
  1651. } else {
  1652. mergedResponse.content += value;
  1653. history.messages[messageId] = message;
  1654. }
  1655. if (autoScroll) {
  1656. scrollToBottom();
  1657. }
  1658. }
  1659. await saveChatHandler(_chatId, history);
  1660. } else {
  1661. console.error(res);
  1662. }
  1663. } catch (e) {
  1664. console.error(e);
  1665. }
  1666. };
  1667. const initChatHandler = async (history) => {
  1668. let _chatId = $chatId;
  1669. if (!$temporaryChatEnabled) {
  1670. chat = await createNewChat(localStorage.token, {
  1671. id: _chatId,
  1672. title: $i18n.t('New Chat'),
  1673. models: selectedModels,
  1674. system: $settings.system ?? undefined,
  1675. params: params,
  1676. history: history,
  1677. messages: createMessagesList(history, history.currentId),
  1678. tags: [],
  1679. timestamp: Date.now()
  1680. });
  1681. _chatId = chat.id;
  1682. await chatId.set(_chatId);
  1683. await chats.set(await getChatList(localStorage.token, $currentChatPage));
  1684. currentChatPage.set(1);
  1685. window.history.replaceState(history.state, '', `/c/${_chatId}`);
  1686. } else {
  1687. _chatId = 'local';
  1688. await chatId.set('local');
  1689. }
  1690. await tick();
  1691. return _chatId;
  1692. };
  1693. const saveChatHandler = async (_chatId, history) => {
  1694. if ($chatId == _chatId) {
  1695. if (!$temporaryChatEnabled) {
  1696. chat = await updateChatById(localStorage.token, _chatId, {
  1697. models: selectedModels,
  1698. history: history,
  1699. messages: createMessagesList(history, history.currentId),
  1700. params: params,
  1701. files: chatFiles
  1702. });
  1703. currentChatPage.set(1);
  1704. await chats.set(await getChatList(localStorage.token, $currentChatPage));
  1705. }
  1706. }
  1707. };
  1708. </script>
  1709. <svelte:head>
  1710. <title>
  1711. {$chatTitle
  1712. ? `${$chatTitle.length > 30 ? `${$chatTitle.slice(0, 30)}...` : $chatTitle} • ${$WEBUI_NAME}`
  1713. : `${$WEBUI_NAME}`}
  1714. </title>
  1715. </svelte:head>
  1716. <audio id="audioElement" src="" style="display: none;" />
  1717. <EventConfirmDialog
  1718. bind:show={showEventConfirmation}
  1719. title={eventConfirmationTitle}
  1720. message={eventConfirmationMessage}
  1721. input={eventConfirmationInput}
  1722. inputPlaceholder={eventConfirmationInputPlaceholder}
  1723. inputValue={eventConfirmationInputValue}
  1724. on:confirm={(e) => {
  1725. if (e.detail) {
  1726. eventCallback(e.detail);
  1727. } else {
  1728. eventCallback(true);
  1729. }
  1730. }}
  1731. on:cancel={() => {
  1732. eventCallback(false);
  1733. }}
  1734. />
  1735. <div
  1736. class="h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
  1737. ? ' md:max-w-[calc(100%-260px)]'
  1738. : ' '} w-full max-w-full flex flex-col"
  1739. id="chat-container"
  1740. >
  1741. {#if !loading}
  1742. <div in:fade={{ duration: 50 }} class="w-full h-full flex flex-col">
  1743. {#if $settings?.backgroundImageUrl ?? null}
  1744. <div
  1745. class="absolute {$showSidebar
  1746. ? 'md:max-w-[calc(100%-260px)] md:translate-x-[260px]'
  1747. : ''} top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
  1748. style="background-image: url({$settings.backgroundImageUrl}) "
  1749. />
  1750. <div
  1751. class="absolute top-0 left-0 w-full h-full bg-linear-to-t from-white to-white/85 dark:from-gray-900 dark:to-gray-900/90 z-0"
  1752. />
  1753. {/if}
  1754. <PaneGroup direction="horizontal" class="w-full h-full">
  1755. <Pane defaultSize={50} class="h-full flex relative max-w-full flex-col">
  1756. <Navbar
  1757. bind:this={navbarElement}
  1758. chat={{
  1759. id: $chatId,
  1760. chat: {
  1761. title: $chatTitle,
  1762. models: selectedModels,
  1763. system: $settings.system ?? undefined,
  1764. params: params,
  1765. history: history,
  1766. timestamp: Date.now()
  1767. }
  1768. }}
  1769. {history}
  1770. title={$chatTitle}
  1771. bind:selectedModels
  1772. shareEnabled={!!history.currentId}
  1773. {initNewChat}
  1774. />
  1775. <div class="flex flex-col flex-auto z-10 w-full @container">
  1776. {#if $settings?.landingPageMode === 'chat' || createMessagesList(history, history.currentId).length > 0}
  1777. <div
  1778. class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden"
  1779. id="messages-container"
  1780. bind:this={messagesContainerElement}
  1781. on:scroll={(e) => {
  1782. autoScroll =
  1783. messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
  1784. messagesContainerElement.clientHeight + 5;
  1785. }}
  1786. >
  1787. <div class=" h-full w-full flex flex-col">
  1788. <Messages
  1789. chatId={$chatId}
  1790. bind:history
  1791. bind:autoScroll
  1792. bind:prompt
  1793. {selectedModels}
  1794. {atSelectedModel}
  1795. {sendPrompt}
  1796. {showMessage}
  1797. {submitMessage}
  1798. {continueResponse}
  1799. {regenerateResponse}
  1800. {mergeResponses}
  1801. {chatActionHandler}
  1802. {addMessages}
  1803. bottomPadding={files.length > 0}
  1804. />
  1805. </div>
  1806. </div>
  1807. <div class=" pb-2">
  1808. <MessageInput
  1809. bind:this={messageInput}
  1810. {history}
  1811. {taskIds}
  1812. {selectedModels}
  1813. bind:files
  1814. bind:prompt
  1815. bind:autoScroll
  1816. bind:selectedToolIds
  1817. bind:selectedFilterIds
  1818. bind:imageGenerationEnabled
  1819. bind:codeInterpreterEnabled
  1820. bind:webSearchEnabled
  1821. bind:atSelectedModel
  1822. toolServers={$toolServers}
  1823. transparentBackground={$settings?.backgroundImageUrl ?? false}
  1824. {stopResponse}
  1825. {createMessagePair}
  1826. onChange={(input) => {
  1827. if (!$temporaryChatEnabled) {
  1828. if (input.prompt !== null) {
  1829. sessionStorage.setItem(
  1830. `chat-input${$chatId ? `-${$chatId}` : ''}`,
  1831. JSON.stringify(input)
  1832. );
  1833. } else {
  1834. sessionStorage.removeItem(`chat-input${$chatId ? `-${$chatId}` : ''}`);
  1835. }
  1836. }
  1837. }}
  1838. on:upload={async (e) => {
  1839. const { type, data } = e.detail;
  1840. if (type === 'web') {
  1841. await uploadWeb(data);
  1842. } else if (type === 'youtube') {
  1843. await uploadYoutubeTranscription(data);
  1844. } else if (type === 'google-drive') {
  1845. await uploadGoogleDriveFile(data);
  1846. }
  1847. }}
  1848. on:submit={async (e) => {
  1849. if (e.detail || files.length > 0) {
  1850. await tick();
  1851. submitPrompt(
  1852. ($settings?.richTextInput ?? true)
  1853. ? e.detail.replaceAll('\n\n', '\n')
  1854. : e.detail
  1855. );
  1856. }
  1857. }}
  1858. />
  1859. <div
  1860. class="absolute bottom-1 text-xs text-gray-500 text-center line-clamp-1 right-0 left-0"
  1861. >
  1862. <!-- {$i18n.t('LLMs can make mistakes. Verify important information.')} -->
  1863. </div>
  1864. </div>
  1865. {:else}
  1866. <div class="overflow-auto w-full h-full flex items-center">
  1867. <Placeholder
  1868. {history}
  1869. {selectedModels}
  1870. bind:messageInput
  1871. bind:files
  1872. bind:prompt
  1873. bind:autoScroll
  1874. bind:selectedToolIds
  1875. bind:selectedFilterIds
  1876. bind:imageGenerationEnabled
  1877. bind:codeInterpreterEnabled
  1878. bind:webSearchEnabled
  1879. bind:atSelectedModel
  1880. transparentBackground={$settings?.backgroundImageUrl ?? false}
  1881. toolServers={$toolServers}
  1882. {stopResponse}
  1883. {createMessagePair}
  1884. on:upload={async (e) => {
  1885. const { type, data } = e.detail;
  1886. if (type === 'web') {
  1887. await uploadWeb(data);
  1888. } else if (type === 'youtube') {
  1889. await uploadYoutubeTranscription(data);
  1890. }
  1891. }}
  1892. on:submit={async (e) => {
  1893. if (e.detail || files.length > 0) {
  1894. await tick();
  1895. submitPrompt(
  1896. ($settings?.richTextInput ?? true)
  1897. ? e.detail.replaceAll('\n\n', '\n')
  1898. : e.detail
  1899. );
  1900. }
  1901. }}
  1902. />
  1903. </div>
  1904. {/if}
  1905. </div>
  1906. </Pane>
  1907. <ChatControls
  1908. bind:this={controlPaneComponent}
  1909. bind:history
  1910. bind:chatFiles
  1911. bind:params
  1912. bind:files
  1913. bind:pane={controlPane}
  1914. chatId={$chatId}
  1915. modelId={selectedModelIds?.at(0) ?? null}
  1916. models={selectedModelIds.reduce((a, e, i, arr) => {
  1917. const model = $models.find((m) => m.id === e);
  1918. if (model) {
  1919. return [...a, model];
  1920. }
  1921. return a;
  1922. }, [])}
  1923. {submitPrompt}
  1924. {stopResponse}
  1925. {showMessage}
  1926. {eventTarget}
  1927. />
  1928. </PaneGroup>
  1929. </div>
  1930. {:else if loading}
  1931. <div class=" flex items-center justify-center h-full w-full">
  1932. <div class="m-auto">
  1933. <Spinner className="size-5" />
  1934. </div>
  1935. </div>
  1936. {/if}
  1937. </div>