diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte index 0ed409a2b..24a5b680d 100644 --- a/src/lib/components/chat/Chat.svelte +++ b/src/lib/components/chat/Chat.svelte @@ -3,13 +3,13 @@ import { toast } from 'svelte-sonner'; import mermaid from 'mermaid'; - import { getContext, onMount, tick } from 'svelte'; + import { getContext, onDestroy, onMount, tick } from 'svelte'; import { goto } from '$app/navigation'; import { page } from '$app/stores'; - import type { Writable } from 'svelte/store'; + import type { Unsubscriber, Writable } from 'svelte/store'; import type { i18n as i18nType } from 'i18next'; - import { OLLAMA_API_BASE_URL, OPENAI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants'; + import { WEBUI_BASE_URL } from '$lib/constants'; import { chatId, @@ -19,13 +19,11 @@ models, settings, showSidebar, - tags as _tags, WEBUI_NAME, banners, user, socket, showCallOverlay, - tools, currentChatPage, temporaryChatEnabled } from '$lib/stores'; @@ -33,17 +31,13 @@ convertMessagesToHistory, copyToClipboard, extractSentencesForAudio, - getUserPosition, promptTemplate, splitStream } from '$lib/utils'; import { generateChatCompletion } from '$lib/apis/ollama'; import { - addTagById, createNewChat, - deleteTagById, - getAllChatTags, getChatById, getChatList, getTagsById, @@ -66,8 +60,6 @@ import MessageInput from '$lib/components/chat/MessageInput.svelte'; import Messages from '$lib/components/chat/Messages.svelte'; import Navbar from '$lib/components/layout/Navbar.svelte'; - import CallOverlay from './MessageInput/CallOverlay.svelte'; - import { error } from '@sveltejs/kit'; import ChatControls from './ChatControls.svelte'; import EventConfirmDialog from '../common/ConfirmDialog.svelte'; @@ -118,6 +110,8 @@ let params = {}; + let chatIdUnsubscriber: Unsubscriber | undefined; + $: if (history.currentId !== null) { let _messages = []; @@ -207,47 +201,51 @@ } }; - onMount(async () => { - const onMessageHandler = async (event) => { - if (event.origin === window.origin) { - // Replace with your iframe's origin - console.log('Message received from iframe:', event.data); - if (event.data.type === 'input:prompt') { - console.log(event.data.text); + const onMessageHandler = async (event: { + origin: string; + data: { type: string; text: string }; + }) => { + if (event.origin !== window.origin) { + return; + } - const inputElement = document.getElementById('chat-textarea'); + // Replace with your iframe's origin + if (event.data.type === 'input:prompt') { + console.debug(event.data.text); - if (inputElement) { - prompt = event.data.text; - inputElement.focus(); - } - } + const inputElement = document.getElementById('chat-textarea'); - if (event.data.type === 'action:submit') { - console.log(event.data.text); - - if (prompt !== '') { - await tick(); - submitPrompt(prompt); - } - } - - if (event.data.type === 'input:prompt:submit') { - console.log(event.data.text); - - if (prompt !== '') { - await tick(); - submitPrompt(event.data.text); - } - } + if (inputElement) { + prompt = event.data.text; + inputElement.focus(); } - }; - window.addEventListener('message', onMessageHandler); + } - $socket.on('chat-events', chatEventHandler); + if (event.data.type === 'action:submit') { + console.debug(event.data.text); + + if (prompt !== '') { + await tick(); + submitPrompt(prompt); + } + } + + if (event.data.type === 'input:prompt:submit') { + console.debug(event.data.text); + + if (prompt !== '') { + await tick(); + submitPrompt(event.data.text); + } + } + }; + + onMount(async () => { + window.addEventListener('message', onMessageHandler); + $socket?.on('chat-events', chatEventHandler); if (!$chatId) { - chatId.subscribe(async (value) => { + chatIdUnsubscriber = chatId.subscribe(async (value) => { if (!value) { await initNewChat(); } @@ -257,12 +255,12 @@ await goto('/'); } } + }); - return () => { - window.removeEventListener('message', onMessageHandler); - - $socket.off('chat-events'); - }; + onDestroy(() => { + chatIdUnsubscriber?.(); + window.removeEventListener('message', onMessageHandler); + $socket?.off('chat-events'); }); ////////////////////////// @@ -595,11 +593,11 @@ }; const sendPrompt = async ( - prompt, - parentId, + prompt: string, + parentId: string, { modelId = null, modelIdx = null, newChat = false } = {} ) => { - let _responses = []; + let _responses: string[] = []; // If modelId is provided, use it, else use selected model let selectedModelIds = modelId @@ -609,7 +607,7 @@ : selectedModels; // Create response messages for each selected model - const responseMessageIds = {}; + const responseMessageIds: Record = {}; for (const [_modelIdx, modelId] of selectedModelIds.entries()) { const model = $models.filter((m) => m.id === modelId).at(0); @@ -739,13 +737,13 @@ ); currentChatPage.set(1); - await chats.set(await getChatList(localStorage.token, $currentChatPage)); + chats.set(await getChatList(localStorage.token, $currentChatPage)); return _responses; }; const sendPromptOllama = async (model, userPrompt, responseMessageId, _chatId) => { - let _response = null; + let _response: string | null = null; const responseMessage = history.messages[responseMessageId]; const userMessage = history.messages[responseMessage.parentId]; @@ -776,7 +774,7 @@ ...messages ] .filter((message) => message?.content?.trim()) - .map((message, idx, arr) => { + .map((message) => { // Prepare the base message object const baseMessage = { role: message.role, diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts index 3acedd2ba..35ed39888 100644 --- a/src/lib/utils/index.ts +++ b/src/lib/utils/index.ts @@ -600,7 +600,8 @@ export const extractSentencesForAudio = (text: string) => { if (lastIndex >= 0) { const previousText = mergedTexts[lastIndex]; const wordCount = previousText.split(/\s+/).length; - if (wordCount < 2) { + const charCount = previousText.length; + if (wordCount < 4 || charCount < 50) { mergedTexts[lastIndex] = previousText + ' ' + currentText; } else { mergedTexts.push(currentText);