mirror of
https://github.com/open-webui/open-webui.git
synced 2025-03-29 11:11:51 +01:00
refac: message input
This commit is contained in:
Timothy Jaeryang Baek
parent
2517a2b653
commit
b61138e676
@ -22,24 +22,27 @@
|
||||
import { blobToFile, compressImage, createMessagesList, findWordIndices } from '$lib/utils';
|
||||
import { transcribeAudio } from '$lib/apis/audio';
|
||||
import { uploadFile } from '$lib/apis/files';
|
||||
import { getTools } from '$lib/apis/tools';
|
||||
import { generateAutoCompletion } from '$lib/apis';
|
||||
import { deleteFileById } from '$lib/apis/files';
|
||||
|
||||
import { WEBUI_BASE_URL, WEBUI_API_BASE_URL, PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
|
||||
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import InputMenu from './MessageInput/InputMenu.svelte';
|
||||
import Headphone from '../icons/Headphone.svelte';
|
||||
import VoiceRecording from './MessageInput/VoiceRecording.svelte';
|
||||
import FileItem from '../common/FileItem.svelte';
|
||||
import FilesOverlay from './MessageInput/FilesOverlay.svelte';
|
||||
import Commands from './MessageInput/Commands.svelte';
|
||||
import XMark from '../icons/XMark.svelte';
|
||||
|
||||
import RichTextInput from '../common/RichTextInput.svelte';
|
||||
import { generateAutoCompletion } from '$lib/apis';
|
||||
import { error, text } from '@sveltejs/kit';
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import FileItem from '../common/FileItem.svelte';
|
||||
import Image from '../common/Image.svelte';
|
||||
import { deleteFileById } from '$lib/apis/files';
|
||||
|
||||
import XMark from '../icons/XMark.svelte';
|
||||
import Headphone from '../icons/Headphone.svelte';
|
||||
import GlobeAlt from '../icons/GlobeAlt.svelte';
|
||||
import PhotoSolid from '../icons/PhotoSolid.svelte';
|
||||
import Photo from '../icons/Photo.svelte';
|
||||
import CommandLine from '../icons/CommandLine.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@ -1112,19 +1115,57 @@
|
||||
</button>
|
||||
</InputMenu>
|
||||
|
||||
{#if $config?.features?.enable_web_search}
|
||||
<Tooltip content={$i18n.t('Search the internet')} placement="top">
|
||||
{#if $_user}
|
||||
{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
|
||||
<Tooltip content={$i18n.t('Search the internet')} placement="top">
|
||||
<button
|
||||
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
|
||||
type="button"
|
||||
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {webSearchEnabled
|
||||
? 'bg-blue-100 dark:bg-blue-500/20 text-blue-500 dark:text-blue-400'
|
||||
: 'bg-transparent text-gray-600 dark:text-gray-400 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}"
|
||||
>
|
||||
<GlobeAlt className="size-5" strokeWidth="1.75" />
|
||||
<span
|
||||
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
|
||||
>{$i18n.t('Web Search')}</span
|
||||
>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
{#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)}
|
||||
<Tooltip content={$i18n.t('Image generation')} placement="top">
|
||||
<button
|
||||
on:click|preventDefault={() =>
|
||||
(imageGenerationEnabled = !imageGenerationEnabled)}
|
||||
type="button"
|
||||
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {imageGenerationEnabled
|
||||
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
|
||||
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
|
||||
>
|
||||
<Photo className="size-5" strokeWidth="1.75" />
|
||||
<span
|
||||
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
|
||||
>{$i18n.t('Image')}</span
|
||||
>
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip content={$i18n.t('Code Intepreter')} placement="top">
|
||||
<button
|
||||
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
|
||||
on:click|preventDefault={() =>
|
||||
(codeInterpreterEnabled = !codeInterpreterEnabled)}
|
||||
type="button"
|
||||
class="px-1.5 sm:px-2.5 py-1.5 flex items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none gap-1 max-w-full overflow-hidden {webSearchEnabled
|
||||
? 'bg-blue-100 text-blue-500 border-slate-300'
|
||||
: 'bg-transparent text-gray-600 border-gray-200 hover:bg-gray-100'}"
|
||||
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {codeInterpreterEnabled
|
||||
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
|
||||
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
|
||||
>
|
||||
<GlobeAlt className="size-5" strokeWidth="1.75" />
|
||||
<CommandLine className="size-5" strokeWidth="1.75" />
|
||||
<span
|
||||
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
|
||||
>{$i18n.t('Web Search')}</span
|
||||
>{$i18n.t('Code Intepreter')}</span
|
||||
>
|
||||
</button>
|
||||
</Tooltip>
|
||||
@ -1187,7 +1228,7 @@
|
||||
<Tooltip content={$i18n.t('Call')}>
|
||||
<button
|
||||
class=" {webSearchEnabled
|
||||
? 'bg-blue-500 text-white hover:bg-blue-400 dark:bg-blue-100 dark:text-blue-900 dark:hover:bg-blue-50'
|
||||
? 'bg-blue-500 text-white hover:bg-blue-400 '
|
||||
: 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100'} transition rounded-full p-1.5 self-center"
|
||||
type="button"
|
||||
on:click={async () => {
|
||||
@ -1242,7 +1283,7 @@
|
||||
id="send-message-button"
|
||||
class="{prompt !== ''
|
||||
? webSearchEnabled
|
||||
? 'bg-blue-500 text-white hover:bg-blue-400 dark:bg-blue-100 dark:text-blue-900 dark:hover:bg-blue-50'
|
||||
? 'bg-blue-500 text-white hover:bg-blue-400 '
|
||||
: 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
|
||||
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 self-center"
|
||||
type="submit"
|
||||
|
||||
@ -25,8 +25,6 @@
|
||||
|
||||
export let selectedToolIds: string[] = [];
|
||||
|
||||
export let webSearchEnabled: boolean;
|
||||
export let imageGenerationEnabled: boolean;
|
||||
export let codeInterpreterEnabled: boolean;
|
||||
|
||||
export let onClose: Function;
|
||||
@ -34,18 +32,6 @@
|
||||
let tools = {};
|
||||
let show = false;
|
||||
|
||||
let showImageGeneration = false;
|
||||
|
||||
$: showImageGeneration =
|
||||
$config?.features?.enable_image_generation &&
|
||||
($user.role === 'admin' || $user?.permissions?.features?.image_generation);
|
||||
|
||||
let showWebSearch = false;
|
||||
|
||||
$: showWebSearch =
|
||||
$config?.features?.enable_web_search &&
|
||||
($user.role === 'admin' || $user?.permissions?.features?.web_search);
|
||||
|
||||
$: if (show) {
|
||||
init();
|
||||
}
|
||||
@ -134,56 +120,6 @@
|
||||
<hr class="border-black/5 dark:border-white/5 my-1" />
|
||||
{/if}
|
||||
|
||||
{#if showImageGeneration}
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
|
||||
on:click={() => {
|
||||
imageGenerationEnabled = !imageGenerationEnabled;
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 flex items-center gap-2">
|
||||
<PhotoSolid />
|
||||
<div class=" line-clamp-1">{$i18n.t('Image')}</div>
|
||||
</div>
|
||||
|
||||
<Switch state={imageGenerationEnabled} />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
|
||||
on:click={() => {
|
||||
codeInterpreterEnabled = !codeInterpreterEnabled;
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 flex items-center gap-2">
|
||||
<CommandLineSolid />
|
||||
<div class=" line-clamp-1">{$i18n.t('Code Intepreter')}</div>
|
||||
</div>
|
||||
|
||||
<Switch state={codeInterpreterEnabled} />
|
||||
</button>
|
||||
|
||||
{#if showWebSearch}
|
||||
<button
|
||||
class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
|
||||
on:click={() => {
|
||||
webSearchEnabled = !webSearchEnabled;
|
||||
}}
|
||||
>
|
||||
<div class="flex-1 flex items-center gap-2">
|
||||
<GlobeAltSolid />
|
||||
<div class=" line-clamp-1">{$i18n.t('Web Search')}</div>
|
||||
</div>
|
||||
|
||||
<Switch state={webSearchEnabled} />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if showImageGeneration || showWebSearch}
|
||||
<hr class="border-black/5 dark:border-white/5 my-1" />
|
||||
{/if}
|
||||
|
||||
{#if !$mobile}
|
||||
<Tooltip
|
||||
content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files') : ''}
|
||||
|
||||
19
src/lib/components/icons/CommandLine.svelte
Normal file
19
src/lib/components/icons/CommandLine.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
export let className = 'w-4 h-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
|
||||
/>
|
||||
</svg>
|
||||
21
src/lib/components/icons/Photo.svelte
Normal file
21
src/lib/components/icons/Photo.svelte
Normal file
@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
stroke-width={strokeWidth}
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m3 16 5-7 6 6.5m6.5 2.5L16 13l-4.286 6M14 10h.01M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"
|
||||
/>
|
||||
</svg>
|
||||
Loading…
x
Reference in New Issue
Block a user