diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte index e2fd03d8a5..7e1a765750 100644 --- a/src/lib/components/chat/MessageInput.svelte +++ b/src/lib/components/chat/MessageInput.svelte @@ -71,6 +71,9 @@ import Voice from '../icons/Voice.svelte'; import { getSessionUser } from '$lib/apis/auths'; import Terminal from '../icons/Terminal.svelte'; + import OptionsMenu from './MessageInput/OptionsMenu.svelte'; + import Component from '../icons/Component.svelte'; + import PlusAlt from '../icons/PlusAlt.svelte'; const i18n = getContext('i18n'); export let onChange: Function = () => {}; @@ -1657,7 +1660,6 @@
- +
- {#if $_user && (showToolsButton || (toggleFilters && toggleFilters.length > 0) || showWebSearchButton || showImageGenerationButton || showCodeInterpreterButton)} +
+ + { + await tick(); + + const chatInput = document.getElementById('chat-input'); + chatInput?.focus(); + }} + >
+ class="bg-transparent hover:bg-gray-100 text-gray-700 dark:text-white dark:hover:bg-gray-800 rounded-full size-8 flex justify-center items-center outline-hidden focus:outline-hidden" + > + +
+ -
- {#if showToolsButton} - + {#if showToolsButton} + + - - {/if} + + {toolServers.length + selectedToolIds.length} + + + + {/if} - {#each toggleFilters as filter, filterIdx (filter.id)} + {#each selectedFilterIds as filterId} + {@const filter = toggleFilters.find((f) => f.id === filterId)} + {#if filter} - - {/each} - {#if showWebSearchButton} - - {/if} + {/each} - {#if showImageGenerationButton} - - - - {/if} - {#if showCodeInterpreterButton} - - + + {/if} + + {#if imageGenerationEnabled} + + - - {/if} -
- {/if} + + + + + {/if} + + {#if codeInterpreterEnabled} + + + + {/if} +
diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte index 351c882388..6192e22180 100644 --- a/src/lib/components/chat/MessageInput/InputMenu.svelte +++ b/src/lib/components/chat/MessageInput/InputMenu.svelte @@ -10,14 +10,10 @@ import Dropdown from '$lib/components/common/Dropdown.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte'; - import DocumentArrowUpSolid from '$lib/components/icons/DocumentArrowUpSolid.svelte'; - import Switch from '$lib/components/common/Switch.svelte'; - import GlobeAltSolid from '$lib/components/icons/GlobeAltSolid.svelte'; - import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte'; - import CameraSolid from '$lib/components/icons/CameraSolid.svelte'; - import PhotoSolid from '$lib/components/icons/PhotoSolid.svelte'; - import CommandLineSolid from '$lib/components/icons/CommandLineSolid.svelte'; - import Spinner from '$lib/components/common/Spinner.svelte'; + import DocumentArrowUp from '$lib/components/icons/DocumentArrowUp.svelte'; + import Camera from '$lib/components/icons/Camera.svelte'; + import Note from '$lib/components/icons/Note.svelte'; + import Clip from '$lib/components/icons/Clip.svelte'; const i18n = getContext('i18n'); @@ -35,34 +31,13 @@ export let onClose: Function; - let tools = null; let show = false; - let showAllTools = false; - - $: if (show) { - init(); - } let fileUploadEnabled = true; $: fileUploadEnabled = fileUploadCapableModels.length === selectedModels.length && ($user?.role === 'admin' || $user?.permissions?.chat?.file_upload); - const init = async () => { - await _tools.set(await getTools(localStorage.token)); - if ($_tools) { - tools = $_tools.reduce((a, tool, i, arr) => { - a[tool.id] = { - name: tool.name, - description: tool.meta.description, - enabled: selectedToolIds.includes(tool.id) - }; - return a; - }, {}); - selectedToolIds = selectedToolIds.filter((id) => $_tools?.some((tool) => tool.id === id)); - } - }; - const detectMobile = () => { const userAgent = navigator.userAgent || navigator.vendor || window.opera; return /android|iphone|ipad|ipod|windows phone/i.test(userAgent); @@ -101,86 +76,36 @@
- {#if tools} - {#if Object.keys(tools).length > 0} -
- {#each Object.keys(tools) as toolId} - - {/each} -
- {#if Object.keys(tools).length > 3} - - {/if} -
- {/if} - {:else} -
- -
- -
- {/if} +
{$i18n.t('Upload Files')}
+ + { @@ -208,7 +133,7 @@ } }} > - +
{$i18n.t('Capture')}
 @@ -222,24 +147,63 @@ className="w-full" > { if (fileUploadEnabled) { - uploadFilesHandler(); + if (!detectMobile()) { + screenCaptureHandler(); + } else { + const cameraInputElement = document.getElementById('camera-input'); + + if (cameraInputElement) { + cameraInputElement.click(); + } + } } }} > - -
{$i18n.t('Upload Files')}
+ +
{$i18n.t('Attach Notes')}
+ + + + + { + if (fileUploadEnabled) { + if (!detectMobile()) { + screenCaptureHandler(); + } else { + const cameraInputElement = document.getElementById('camera-input'); + + if (cameraInputElement) { + cameraInputElement.click(); + } + } + } + }} + > + +
{$i18n.t('Attach Knowledge')}
 {#if fileUploadEnabled} {#if $config?.features?.enable_google_drive_integration} { uploadGoogleDriveHandler(); }} @@ -277,7 +241,7 @@ {#if $config?.features?.enable_onedrive_integration} { uploadOneDriveHandler('personal'); }} @@ -381,7 +345,7 @@
{$i18n.t('Microsoft OneDrive (personal)')}
 { uploadOneDriveHandler('organizations'); }} diff --git a/src/lib/components/chat/MessageInput/OptionsMenu.svelte b/src/lib/components/chat/MessageInput/OptionsMenu.svelte new file mode 100644 index 0000000000..d1928c913c --- /dev/null +++ b/src/lib/components/chat/MessageInput/OptionsMenu.svelte @@ -0,0 +1,309 @@ + + + { + if (e.detail === false) { + onClose(); + } + }} +> + + + + +
+ + {#if toggleFilters && toggleFilters.length > 0} + {#each toggleFilters as filter, filterIdx (filter.id)} + + + + {/each} + {/if} + + {#if showWebSearchButton} + + + + {/if} + + {#if showImageGenerationButton} + + + + {/if} + + {#if showCodeInterpreterButton} + + + + {/if} + + {#if tools} +
+ + {#if Object.keys(tools).length > 0} +
+ {#each Object.keys(tools) as toolId} + + {/each} +
+ {#if Object.keys(tools).length > 3} + + {/if} + {/if} + {:else} +
+ +
+ {/if} + +
+ diff --git a/src/lib/components/icons/Camera.svelte b/src/lib/components/icons/Camera.svelte new file mode 100644 index 0000000000..a553475fa1 --- /dev/null +++ b/src/lib/components/icons/Camera.svelte @@ -0,0 +1,22 @@ + + + diff --git a/src/lib/components/icons/Clip.svelte b/src/lib/components/icons/Clip.svelte new file mode 100644 index 0000000000..d3c89be163 --- /dev/null +++ b/src/lib/components/icons/Clip.svelte @@ -0,0 +1,18 @@ + + + diff --git a/src/lib/components/icons/Component.svelte b/src/lib/components/icons/Component.svelte new file mode 100644 index 0000000000..cafc7058ec --- /dev/null +++ b/src/lib/components/icons/Component.svelte @@ -0,0 +1,22 @@ + + + diff --git a/src/lib/components/icons/Grid.svelte b/src/lib/components/icons/Grid.svelte new file mode 100644 index 0000000000..8846f03107 --- /dev/null +++ b/src/lib/components/icons/Grid.svelte @@ -0,0 +1,22 @@ + + + diff --git a/src/lib/components/icons/PlusAlt.svelte b/src/lib/components/icons/PlusAlt.svelte new file mode 100644 index 0000000000..895fe0b763 --- /dev/null +++ b/src/lib/components/icons/PlusAlt.svelte @@ -0,0 +1,15 @@ + + + diff --git a/src/lib/components/icons/Union.svelte b/src/lib/components/icons/Union.svelte new file mode 100644 index 0000000000..71953329f4 --- /dev/null +++ b/src/lib/components/icons/Union.svelte @@ -0,0 +1,22 @@ + + +