diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte index 2d0bee01e0..a6cea0c073 100644 --- a/src/lib/components/chat/Chat.svelte +++ b/src/lib/components/chat/Chat.svelte @@ -1269,18 +1269,17 @@ /> + - - {/if} diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte index 1ede59f2da..7c1c877049 100644 --- a/src/lib/components/chat/MessageInput.svelte +++ b/src/lib/components/chat/MessageInput.svelte @@ -440,292 +440,212 @@ {/if} -
-
-
-
-
- {#if autoScroll === false && messages.length > 0} -
+
+
+
+
+ {#if autoScroll === false && messages.length > 0} +
+ +
+ {/if} +
+ +
+ {#if prompt.charAt(0) === '/'} + + {:else if prompt.charAt(0) === '#'} + { + console.log(e); + uploadYoutubeTranscription(e.detail); + }} + on:url={(e) => { + console.log(e); + uploadWeb(e.detail); + }} + on:select={(e) => { + console.log(e); + files = [ + ...files, + { + type: e?.detail?.type ?? 'doc', + ...e.detail, + upload_status: true + } + ]; + }} + /> + {/if} + + { + atSelectedModel = e.detail; + chatTextAreaElement?.focus(); + }} + /> + + {#if atSelectedModel !== undefined} +
+
+ model profile model.id === atSelectedModel.id)?.info?.meta + ?.profile_image_url ?? + ($i18n.language === 'dg-DG' + ? `/doge.png` + : `${WEBUI_BASE_URL}/static/favicon.png`)} + /> +
+ Talking to {atSelectedModel.name} +
+
+
- {/if} -
- -
- {#if prompt.charAt(0) === '/'} - - {:else if prompt.charAt(0) === '#'} - { - console.log(e); - uploadYoutubeTranscription(e.detail); - }} - on:url={(e) => { - console.log(e); - uploadWeb(e.detail); - }} - on:select={(e) => { - console.log(e); - files = [ - ...files, - { - type: e?.detail?.type ?? 'doc', - ...e.detail, - upload_status: true - } - ]; - }} - /> - {/if} - - { - atSelectedModel = e.detail; - chatTextAreaElement?.focus(); - }} - /> - - {#if atSelectedModel !== undefined} -
-
- model profile model.id === atSelectedModel.id)?.info?.meta - ?.profile_image_url ?? - ($i18n.language === 'dg-DG' - ? `/doge.png` - : `${WEBUI_BASE_URL}/static/favicon.png`)} - /> -
- Talking to {atSelectedModel.name} -
-
-
- -
-
- {/if} -
+
+ {/if}
+
-
-
-
- { - if (inputFiles && inputFiles.length > 0) { - const _inputFiles = Array.from(inputFiles); - _inputFiles.forEach((file) => { - if ( - ['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type']) - ) { - if (visionCapableModels.length === 0) { - toast.error($i18n.t('Selected model(s) do not support image inputs')); - inputFiles = null; - filesInputElement.value = ''; - return; - } - let reader = new FileReader(); - reader.onload = (event) => { - files = [ - ...files, - { - type: 'image', - url: `${event.target.result}` - } - ]; - inputFiles = null; - filesInputElement.value = ''; - }; - reader.readAsDataURL(file); - } else if ( - SUPPORTED_FILE_TYPE.includes(file['type']) || - SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1)) - ) { - uploadDoc(file); - filesInputElement.value = ''; - } else { - toast.error( - $i18n.t( - `Unknown File Type '{{file_type}}', but accepting and treating as plain text`, - { file_type: file['type'] } - ) - ); - uploadDoc(file); +
+
+
+ { + if (inputFiles && inputFiles.length > 0) { + const _inputFiles = Array.from(inputFiles); + _inputFiles.forEach((file) => { + if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) { + if (visionCapableModels.length === 0) { + toast.error($i18n.t('Selected model(s) do not support image inputs')); + inputFiles = null; filesInputElement.value = ''; + return; } - }); - } else { - toast.error($i18n.t(`File not found.`)); - } - }} - /> -
{ - // check if selectedModels support image input - submitPrompt(prompt, user); - }} - > - {#if files.length > 0} -
- {#each files as file, fileIdx} -
- {#if file.type === 'image'} -
- input - {#if atSelectedModel ? visionCapableModels.length === 0 : selectedModels.length !== visionCapableModels.length} - !visionCapableModels.includes(id)) - .join(', ') - })} + let reader = new FileReader(); + reader.onload = (event) => { + files = [ + ...files, + { + type: 'image', + url: `${event.target.result}` + } + ]; + inputFiles = null; + filesInputElement.value = ''; + }; + reader.readAsDataURL(file); + } else if ( + SUPPORTED_FILE_TYPE.includes(file['type']) || + SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1)) + ) { + uploadDoc(file); + filesInputElement.value = ''; + } else { + toast.error( + $i18n.t( + `Unknown File Type '{{file_type}}', but accepting and treating as plain text`, + { file_type: file['type'] } + ) + ); + uploadDoc(file); + filesInputElement.value = ''; + } + }); + } else { + toast.error($i18n.t(`File not found.`)); + } + }} + /> + { + // check if selectedModels support image input + submitPrompt(prompt, user); + }} + > + {#if files.length > 0} +
+ {#each files as file, fileIdx} +
+ {#if file.type === 'image'} +
+ input + {#if atSelectedModel ? visionCapableModels.length === 0 : selectedModels.length !== visionCapableModels.length} + !visionCapableModels.includes(id)) + .join(', ') + })} + > + - - - - - {/if} -
- {:else if file.type === 'doc'} -
-
- {#if file.upload_status} - - - - - {:else} - - {/if} -
- -
-
- {file.name} -
- -
{$i18n.t('Document')}
-
-
- {:else if file.type === 'collection'} -
-
+ + + + {/if} +
+ {:else if file.type === 'doc'} +
+
+ {#if file.upload_status} -
- -
-
- {file?.title ?? `#${file.name}`} -
- -
{$i18n.t('Collection')}
-
-
- {/if} - -
- -
-
- {/each} -
- {/if} - -
-
- { - filesInputElement.click(); - }} - onClose={async () => { - await tick(); - chatTextAreaElement?.focus(); - }} - > - - -
- -