Skip to content

GitLab

"backend/vscode:/vscode.git/clone" did not exist on "02a4412dfc077a82ce59e82a3444d6087f4aa790"
Unverified Commit c869652e authored by Timothy Jaeryang Baek's avatar Timothy Jaeryang Baek Committed by GitHub
Browse files

Merge pull request #4322 from open-webui/dev 

0.3.12
parents d3146d20 240a3014
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1045 additions and 706 deletions
requirements.lock
View file @ c869652e
......@@ -57,13 +57,13 @@ beautifulsoup4==4.12.3
# via unstructured
bidict==0.23.1
# via python-socketio
black==24.4.2
black==24.8.0
# via open-webui
blinker==1.8.2
# via flask
boto3==1.34.110
boto3==1.34.153
# via open-webui
botocore==1.34.110
botocore==1.34.155
# via boto3
# via s3transfer
build==1.2.1
......@@ -179,7 +179,7 @@ frozenlist==1.4.1
fsspec==2024.3.1
# via huggingface-hub
# via torch
google-ai-generativelanguage==0.6.4
google-ai-generativelanguage==0.6.6
# via google-generativeai
google-api-core==2.19.0
# via google-ai-generativelanguage
......@@ -196,7 +196,7 @@ google-auth==2.29.0
# via kubernetes
google-auth-httplib2==0.2.0
# via google-api-python-client
google-generativeai==0.5.4
google-generativeai==0.7.2
# via open-webui
googleapis-common-protos==1.63.0
# via google-api-core
......@@ -502,7 +502,7 @@ pypandoc==1.13
pyparsing==2.4.7
# via httplib2
# via oletools
pypdf==4.2.0
pypdf==4.3.1
# via open-webui
# via unstructured-client
pypika==0.48.9
......@@ -533,7 +533,7 @@ python-magic==0.4.27
python-multipart==0.0.9
# via fastapi
# via open-webui
python-pptx==0.6.23
python-pptx==1.0.0
# via open-webui
python-socketio==5.11.3
# via open-webui
......@@ -684,6 +684,7 @@ typing-extensions==4.11.0
# via opentelemetry-sdk
# via pydantic
# via pydantic-core
# via python-pptx
# via sqlalchemy
# via torch
# via typer
......@@ -718,7 +719,7 @@ uvicorn==0.22.0
# via open-webui
uvloop==0.19.0
# via uvicorn
validators==0.28.1
validators==0.33.0
# via open-webui
watchfiles==0.21.0
# via uvicorn
......
src/app.css
View file @ c869652e
......@@ -158,3 +158,12 @@ input[type='number'] {
.password {
-webkit-text-security: disc;
}
.codespan {
color: #eb5757;
border-width: 0px;
padding: 3px 8px;
font-size: 0.8em;
font-weight: 600;
@apply rounded-md dark:bg-gray-800 bg-gray-100 mx-0.5;
}
src/lib/apis/chats/index.ts
View file @ c869652e
......@@ -32,10 +32,15 @@ export const createNewChat = async (token: string, chat: object) => {
return res;
};
export const getChatList = async (token: string = '') => {
export const getChatList = async (token: string = '', page: number | null = null) => {
let error = null;
const searchParams = new URLSearchParams();
const res = await fetch(`${WEBUI_API_BASE_URL}/chats/`, {
if (page !== null) {
searchParams.append('page', `${page}`);
}
const res = await fetch(`${WEBUI_API_BASE_URL}/chats/?${searchParams.toString()}`, {
method: 'GET',
headers: {
Accept: 'application/json',
......
src/lib/components/chat/Chat.svelte
View file @ c869652e
......@@ -25,7 +25,8 @@
user,
socket,
showCallOverlay,
tools
tools,
currentChatPage
} from '$lib/stores';
import {
convertMessagesToHistory,
......@@ -421,7 +422,9 @@
params: params,
files: chatFiles
});
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
}
}
};
......@@ -467,7 +470,9 @@
params: params,
files: chatFiles
});
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
}
}
};
......@@ -627,7 +632,9 @@
tags: [],
timestamp: Date.now()
});
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
await chatId.set(chat.id);
} else {
await chatId.set('local');
......@@ -703,7 +710,9 @@
})
);
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
return _responses;
};
......@@ -803,8 +812,8 @@
...(params ?? $settings.params ?? {}),
stop:
params?.stop ?? $settings?.params?.stop ?? undefined
? (params?.stop ?? $settings.params.stop).map((str) =>
decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
? (params?.stop.split(',').map((token) => token.trim()) ?? $settings.params.stop).map(
(str) => decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
)
: undefined,
num_predict: params?.max_tokens ?? $settings?.params?.max_tokens ?? undefined,
......@@ -949,7 +958,9 @@
params: params,
files: chatFiles
});
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
}
}
} else {
......@@ -1103,8 +1114,8 @@
seed: params?.seed ?? $settings?.params?.seed ?? undefined,
stop:
params?.stop ?? $settings?.params?.stop ?? undefined
? (params?.stop ?? $settings.params.stop).map((str) =>
decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
? (params?.stop.split(',').map((token) => token.trim()) ?? $settings.params.stop).map(
(str) => decodeURIComponent(JSON.parse('"' + str.replace(/\"/g, '\\"') + '"'))
)
: undefined,
temperature: params?.temperature ?? $settings?.params?.temperature ?? undefined,
......@@ -1128,7 +1139,6 @@
if (res && res.ok && res.body) {
const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
let lastUsage = null;
for await (const update of textStream) {
const { value, done, citations, error, usage } = update;
......@@ -1154,7 +1164,7 @@
}
if (usage) {
lastUsage = usage;
responseMessage.info = { ...usage, openai: true };
}
if (citations) {
......@@ -1208,10 +1218,6 @@
document.getElementById(`speak-button-${responseMessage.id}`)?.click();
}
if (lastUsage) {
responseMessage.info = { ...lastUsage, openai: true };
}
if ($chatId == _chatId) {
if ($settings.saveChatHistory ?? true) {
chat = await updateChatById(localStorage.token, _chatId, {
......@@ -1221,7 +1227,9 @@
params: params,
files: chatFiles
});
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
}
}
} else {
......@@ -1386,7 +1394,9 @@
if ($settings.saveChatHistory ?? true) {
chat = await updateChatById(localStorage.token, _chatId, { title: _title });
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
}
};
......
src/lib/components/chat/MessageInput.svelte
View file @ c869652e
......@@ -384,7 +384,7 @@
{#if atSelectedModel !== undefined}
<div
class="px-3 py-2.5 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-50% from-white dark:from-gray-900"
class="px-3 py-2.5 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-50% from-white dark:from-gray-900 z-50"
>
<div class="flex items-center gap-2 text-sm dark:text-gray-500">
<img
......
src/lib/components/chat/MessageInput/Models.svelte
View file @ c869652e
......@@ -147,8 +147,8 @@
<div class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden">
{#each filteredModels as model, modelIdx}
<button
class=" px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
? ' bg-gray-50 dark:bg-gray-850 selected-command-option-button'
class="px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx
? 'bg-gray-50 dark:bg-gray-850 selected-command-option-button'
: ''}"
type="button"
on:click={() => {
......@@ -159,13 +159,18 @@
}}
on:focus={() => {}}
>
<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
<div class="flex font-medium text-black dark:text-gray-100 line-clamp-1">
<img
src={model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
alt={model?.name ?? model.id}
class="rounded-full size-6 items-center mr-2"
/>
{model.name}
</div>
<!-- <div class=" text-xs text-gray-600 line-clamp-1">
{doc.title}
</div> -->
</div> -->
</button>
{/each}
</div>
......
src/lib/components/chat/Messages.svelte
View file @ c869652e
<script lang="ts">
import { v4 as uuidv4 } from 'uuid';
import { chats, config, settings, user as _user, mobile } from '$lib/stores';
import { chats, config, settings, user as _user, mobile, currentChatPage } from '$lib/stores';
import { tick, getContext, onMount } from 'svelte';
import { toast } from 'svelte-sonner';
......@@ -90,7 +90,8 @@
history: history
});
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
};
const confirmEditResponseMessage = async (messageId, content) => {
......@@ -146,12 +147,14 @@
await tick();
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
if ($settings?.scrollOnBranchChange ?? true) {
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
setTimeout(() => {
scrollToBottom();
}, 100);
}
};
const showNextMessage = async (message) => {
......@@ -195,12 +198,14 @@
await tick();
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
if ($settings?.scrollOnBranchChange ?? true) {
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
setTimeout(() => {
scrollToBottom();
}, 100);
}
};
const deleteMessageHandler = async (messageId) => {
......
src/lib/components/chat/Messages/CodeBlock.svelte
View file @ c869652e
......@@ -218,7 +218,7 @@ __builtins__.input = input`);
}
</script>
<div class="mb-4" dir="ltr">
<div class="my-2" dir="ltr">
<div
class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto"
>
......
src/lib/components/chat/Messages/CompareMessages.svelte
View file @ c869652e
......@@ -118,47 +118,47 @@
currentMessageId = message.id;
let messageId = message.id;
console.log(messageId);
//
let messageChildrenIds = history.messages[messageId].childrenIds;
while (messageChildrenIds.length !== 0) {
messageId = messageChildrenIds.at(-1);
messageChildrenIds = history.messages[messageId].childrenIds;
}
history.currentId = messageId;
dispatch('change');
}
}}
>
<ResponseMessage
message={groupedMessages[model].messages[groupedMessagesIdx[model]]}
siblings={groupedMessages[model].messages.map((m) => m.id)}
isLastMessage={true}
{updateChatMessages}
{confirmEditResponseMessage}
showPreviousMessage={() => showPreviousMessage(model)}
showNextMessage={() => showNextMessage(model)}
{readOnly}
{rateMessage}
{copyToClipboard}
{continueGeneration}
regenerateResponse={async (message) => {
regenerateResponse(message);
await tick();
groupedMessagesIdx[model] = groupedMessages[model].messages.length - 1;
}}
on:save={async (e) => {
console.log('save', e);
const message = e.detail;
history.messages[message.id] = message;
await updateChatById(localStorage.token, chatId, {
messages: messages,
history: history
});
}}
/>
{#key history.currentId}
<ResponseMessage
message={groupedMessages[model].messages[groupedMessagesIdx[model]]}
siblings={groupedMessages[model].messages.map((m) => m.id)}
isLastMessage={true}
{updateChatMessages}
{confirmEditResponseMessage}
showPreviousMessage={() => showPreviousMessage(model)}
showNextMessage={() => showNextMessage(model)}
{readOnly}
{rateMessage}
{copyToClipboard}
{continueGeneration}
regenerateResponse={async (message) => {
regenerateResponse(message);
await tick();
groupedMessagesIdx[model] = groupedMessages[model].messages.length - 1;
}}
on:save={async (e) => {
console.log('save', e);
const message = e.detail;
history.messages[message.id] = message;
await updateChatById(localStorage.token, chatId, {
messages: messages,
history: history
});
}}
/>
{/key}
</div>
{/if}
{/each}
......
src/lib/components/chat/Messages/HTMLRenderer.svelte 0 → 100644
View file @ c869652e
<script lang="ts">
import Image from '$lib/components/common/Image.svelte';
import CodeBlock from './CodeBlock.svelte';
/* The html content of the tag */
export let html; //: string;
let parsedHTML = [html];
export let images;
export let codes;
// all images are in {{IMAGE_0}}, {{IMAGE_1}}.... format
// all codes are in {{CODE_0}}, {{CODE_1}}.... format
const rules = [];
rules.forEach((rule) => {
parsedHTML = parsedHTML.map((substr) => substr.split(rule.regex)).flat();
});
</script>
{#each parsedHTML as part}
{@const match = rules.find((rule) => rule.regex.test(part))}
{#if match}
<svelte:component this={match.component} {...match.props}>
{@html part}
</svelte:component>
{:else}
{@html part}
{/if}
{/each}
src/lib/components/chat/Messages/MarkdownInlineTokens.svelte 0 → 100644
View file @ c869652e
<script lang="ts">
import type { Token } from 'marked';
import { unescapeHtml } from '$lib/utils';
import Image from '$lib/components/common/Image.svelte';
export let id: string;
export let tokens: Token[];
</script>
{#each tokens as token}
{#if token.type === 'escape'}
{unescapeHtml(token.text)}
{:else if token.type === 'html'}
{@html token.text}
{:else if token.type === 'link'}
<a href={token.href} target="_blank" rel="nofollow" title={token.title}>{token.text}</a>
{:else if token.type === 'image'}
<Image src={token.href} alt={token.text} />
{:else if token.type === 'strong'}
<strong>
<svelte:self id={`${id}-strong`} tokens={token.tokens} />
</strong>
{:else if token.type === 'em'}
<em>
<svelte:self id={`${id}-em`} tokens={token.tokens} />
</em>
{:else if token.type === 'codespan'}
<code class="codespan">{unescapeHtml(token.text.replaceAll('&amp;', '&'))}</code>
{:else if token.type === 'br'}
<br />
{:else if token.type === 'del'}
<del>
<svelte:self id={`${id}-del`} tokens={token.tokens} />
</del>
{:else if token.type === 'text'}
{unescapeHtml(token.text)}
{/if}
{/each}
src/lib/components/chat/Messages/MarkdownTokens.svelte 0 → 100644
View file @ c869652e
<script lang="ts">
import { marked } from 'marked';
import type { Token } from 'marked';
import { revertSanitizedResponseContent, unescapeHtml } from '$lib/utils';
import { onMount } from 'svelte';
import Image from '$lib/components/common/Image.svelte';
import CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte';
import MarkdownInlineTokens from '$lib/components/chat/Messages/MarkdownInlineTokens.svelte';
export let id: string;
export let tokens: Token[];
export let top = true;
let containerElement;
const headerComponent = (depth: number) => {
return 'h' + depth;
};
const renderer = new marked.Renderer();
// For code blocks with simple backticks
renderer.codespan = (code) => {
return `<code class="codespan">${code.replaceAll('&amp;', '&')}</code>`;
};
let codes = [];
renderer.code = (code, lang) => {
codes.push({
code: code,
lang: lang
});
codes = codes;
const codeId = `${id}-${codes.length}`;
const interval = setInterval(() => {
const codeElement = document.getElementById(`code-${codeId}`);
if (codeElement) {
clearInterval(interval);
// If the code is already loaded, don't load it again
if (codeElement.innerHTML) {
return;
}
new CodeBlock({
target: codeElement,
props: {
id: `${id}-${codes.length}`,
lang: lang,
code: revertSanitizedResponseContent(code)
},
hydrate: true,
$$inline: true
});
}
}, 10);
return `<div id="code-${id}-${codes.length}"></div>`;
};
let images = [];
renderer.image = (href, title, text) => {
images.push({
href: href,
title: title,
text: text
});
images = images;
const imageId = `${id}-${images.length}`;
const interval = setInterval(() => {
const imageElement = document.getElementById(`image-${imageId}`);
if (imageElement) {
clearInterval(interval);
// If the image is already loaded, don't load it again
if (imageElement.innerHTML) {
return;
}
console.log('image', href, text);
new Image({
target: imageElement,
props: {
src: href,
alt: text
},
$$inline: true
});
}
}, 10);
return `<div id="image-${id}-${images.length}"></div>`;
};
// Open all links in a new tab/window (from https://github.com/markedjs/marked/issues/655#issuecomment-383226346)
const origLinkRenderer = renderer.link;
renderer.link = (href, title, text) => {
const html = origLinkRenderer.call(renderer, href, title, text);
return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ');
};
const { extensions, ...defaults } = marked.getDefaults() as marked.MarkedOptions & {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
extensions: any;
};
$: if (tokens) {
images = [];
codes = [];
}
</script>
<div bind:this={containerElement} class="flex flex-col">
{#each tokens as token, tokenIdx (`${id}-${tokenIdx}`)}
{#if token.type === 'code'}
{#if token.lang === 'mermaid'}
<pre class="mermaid">{revertSanitizedResponseContent(token.text)}</pre>
{:else}
<CodeBlock
id={`${id}-${tokenIdx}`}
lang={token?.lang ?? ''}
code={revertSanitizedResponseContent(token?.text ?? '')}
/>
{/if}
{:else}
{@html marked.parse(token.raw, {
...defaults,
gfm: true,
breaks: true,
renderer
})}
{/if}
{/each}
</div>
src/lib/components/chat/Settings/Chats.svelte
View file @ c869652e
......@@ -2,7 +2,7 @@
import fileSaver from 'file-saver';
const { saveAs } = fileSaver;
import { chats, user, settings } from '$lib/stores';
import { chats, user, settings, scrollPaginationEnabled, currentChatPage } from '$lib/stores';
import {
archiveAllChats,
......@@ -62,7 +62,9 @@
}
}
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
scrollPaginationEnabled.set(true);
};
const exportChats = async () => {
......@@ -77,7 +79,10 @@
await archiveAllChats(localStorage.token).catch((error) => {
toast.error(error);
});
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
scrollPaginationEnabled.set(true);
};
const deleteAllChatsHandler = async () => {
......@@ -85,7 +90,10 @@
await deleteAllChats(localStorage.token).catch((error) => {
toast.error(error);
});
await chats.set(await getChatList(localStorage.token));
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
scrollPaginationEnabled.set(true);
};
const toggleSaveChatHistory = async () => {
......
src/lib/components/chat/Settings/Interface.svelte
View file @ c869652e
......@@ -22,6 +22,7 @@
let responseAutoCopy = false;
let widescreenMode = false;
let splitLargeChunks = false;
let scrollOnBranchChange = true;
let userLocation = false;
// Interface
......@@ -39,6 +40,11 @@
saveSettings({ splitLargeChunks: splitLargeChunks });
};
const togglesScrollOnBranchChange = async () => {
scrollOnBranchChange = !scrollOnBranchChange;
saveSettings({ scrollOnBranchChange: scrollOnBranchChange });
};
const togglewidescreenMode = async () => {
widescreenMode = !widescreenMode;
saveSettings({ widescreenMode: widescreenMode });
......@@ -141,6 +147,7 @@
chatBubble = $settings.chatBubble ?? true;
widescreenMode = $settings.widescreenMode ?? false;
splitLargeChunks = $settings.splitLargeChunks ?? false;
scrollOnBranchChange = $settings.scrollOnBranchChange ?? true;
chatDirection = $settings.chatDirection ?? 'LTR';
userLocation = $settings.userLocation ?? false;
......@@ -318,6 +325,28 @@
</div>
</div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
{$i18n.t('Scroll to bottom when switching between branches')}
</div>
<button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
togglesScrollOnBranchChange();
}}
type="button"
>
{#if scrollOnBranchChange === true}
<span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else}
<span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if}
</button>
</div>
</div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
......
src/lib/components/chat/Tags.svelte
View file @ c869652e
......@@ -8,7 +8,13 @@
getTagsById,
updateChatById
} from '$lib/apis/chats';
import { tags as _tags, chats, pinnedChats } from '$lib/stores';
import {
tags as _tags,
chats,
pinnedChats,
currentChatPage,
scrollPaginationEnabled
} from '$lib/stores';
import { createEventDispatcher, onMount } from 'svelte';
const dispatch = createEventDispatcher();
......@@ -46,11 +52,7 @@
tags: tags
});
console.log($_tags);
await _tags.set(await getAllChatTags(localStorage.token));
console.log($_tags);
if ($_tags.map((t) => t.name).includes(tagName)) {
if (tagName === 'pinned') {
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
......@@ -62,8 +64,11 @@
dispatch('close');
}
} else {
await chats.set(await getChatList(localStorage.token));
// if the tag we deleted is no longer a valid tag, return to main chat list view
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
await scrollPaginationEnabled.set(true);
}
};
......
src/lib/components/common/Image.svelte
View file @ c869652e
......@@ -5,19 +5,21 @@
export let src = '';
export let alt = '';
let _src = '';
export let className = '';
let _src = '';
$: _src = src.startsWith('/') ? `${WEBUI_BASE_URL}${src}` : src;
let showImagePreview = false;
</script>
<ImagePreview bind:show={showImagePreview} src={_src} {alt} />
<button
class={className}
on:click={() => {
console.log('image preview');
showImagePreview = true;
}}
>
<img src={_src} {alt} class=" max-h-96 rounded-lg" draggable="false" data-cy="image" />
<img src={_src} {alt} class=" rounded-lg cursor-pointer" draggable="false" data-cy="image" />
</button>
<ImagePreview bind:show={showImagePreview} src={_src} {alt} />
src/lib/components/common/ImagePreview.svelte
View file @ c869652e
......@@ -7,6 +7,8 @@
let mounted = false;
let previewElement = null;
const downloadImage = (url, filename) => {
fetch(url)
.then((response) => response.blob())
......@@ -34,14 +36,14 @@
mounted = true;
});
$: if (mounted) {
if (show) {
window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden';
} else {
window.removeEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'unset';
}
$: if (show && previewElement) {
document.body.appendChild(previewElement);
window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden';
} else if (previewElement) {
window.removeEventListener('keydown', handleKeyDown);
document.body.removeChild(previewElement);
document.body.style.overflow = 'unset';
}
</script>
......@@ -49,9 +51,10 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
bind:this={previewElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
>
<div class=" absolute left-0 w-full flex justify-between">
<div class=" absolute left-0 w-full flex justify-between select-none">
<div>
<button
class=" p-5"
......@@ -95,6 +98,6 @@
</button>
</div>
</div>
<img {src} {alt} class=" mx-auto h-full object-scale-down" />
<img {src} {alt} class=" mx-auto h-full object-scale-down select-none" draggable="false" />
</div>
{/if}
src/lib/components/common/Loader.svelte 0 → 100644
View file @ c869652e
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
const dispatch = createEventDispatcher();
let loaderElement: HTMLElement;
onMount(() => {
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
dispatch('visible');
// observer.unobserve(loaderElement); // Stop observing until content is loaded
}
});
},
{
root: null, // viewport
rootMargin: '0px',
threshold: 0.1 // When 10% of the loader is visible
}
);
observer.observe(loaderElement);
});
</script>
<div bind:this={loaderElement}>
<slot />
</div>
src/lib/components/layout/Sidebar.svelte
View file @ c869652e
......@@ -11,7 +11,9 @@
showSidebar,
mobile,
showArchivedChats,
pinnedChats
pinnedChats,
scrollPaginationEnabled,
currentChatPage
} from '$lib/stores';
import { onMount, getContext, tick } from 'svelte';
......@@ -34,6 +36,8 @@
import UserMenu from './Sidebar/UserMenu.svelte';
import ChatItem from './Sidebar/ChatItem.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Spinner from '../common/Spinner.svelte';
import Loader from '../common/Loader.svelte';
const BREAKPOINT = 768;
......@@ -50,6 +54,10 @@
let filteredChatList = [];
// Pagination variables
let chatListLoading = false;
let allChatsLoaded = false;
$: filteredChatList = $chats.filter((chat) => {
if (search === '') {
return true;
......@@ -70,6 +78,29 @@
}
});
const enablePagination = async () => {
// Reset pagination variables
currentChatPage.set(1);
allChatsLoaded = false;
await chats.set(await getChatList(localStorage.token, $currentChatPage));
// Enable pagination
scrollPaginationEnabled.set(true);
};
const loadMoreChats = async () => {
chatListLoading = true;
currentChatPage.set($currentChatPage + 1);
const newChatList = await getChatList(localStorage.token, $currentChatPage);
// once the bottom of the list has been reached (no results) there is no need to continue querying
allChatsLoaded = newChatList.length === 0;
await chats.set([...$chats, ...newChatList]);
chatListLoading = false;
};
onMount(async () => {
mobile.subscribe((e) => {
if ($showSidebar && e) {
......@@ -82,9 +113,8 @@
});
showSidebar.set(window.innerWidth > BREAKPOINT);
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
await chats.set(await getChatList(localStorage.token));
await enablePagination();
let touchstart;
let touchend;
......@@ -185,7 +215,11 @@
await tick();
goto('/');
}
await chats.set(await getChatList(localStorage.token));
allChatsLoaded = false;
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
}
};
......@@ -410,7 +444,10 @@
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
placeholder={$i18n.t('Search')}
bind:value={search}
on:focus={() => {
on:focus={async () => {
// TODO: migrate backend for more scalable search mechanism
scrollPaginationEnabled.set(false);
await chats.set(await getChatList(localStorage.token)); // when searching, load all chats
enrichChatsWithContent($chats);
}}
/>
......@@ -422,7 +459,7 @@
<button
class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
on:click={async () => {
await chats.set(await getChatList(localStorage.token));
await enablePagination();
}}
>
{$i18n.t('all')}
......@@ -431,12 +468,17 @@
<button
class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
on:click={async () => {
scrollPaginationEnabled.set(false);
let chatIds = await getChatListByTagName(localStorage.token, tag.name);
if (chatIds.length === 0) {
await tags.set(await getAllChatTags(localStorage.token));
chatIds = await getChatList(localStorage.token);
// if the tag we deleted is no longer a valid tag, return to main chat list view
await enablePagination();
}
await chats.set(chatIds);
chatListLoading = false;
}}
>
{tag.name}
......@@ -527,6 +569,21 @@
}}
/>
{/each}
{#if $scrollPaginationEnabled && !allChatsLoaded}
<Loader
on:visible={(e) => {
if (!chatListLoading) {
loadMoreChats();
}
}}
>
<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
<Spinner className=" size-4" />
<div class=" ">Loading...</div>
</div>
</Loader>
{/if}
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment