Skip to content

GitLab

"docs/source/en/api/pipelines/dance_diffusion.mdx" did not exist on "ac3738462b1732193908b0fb7e557bedac3c57a5"
Commit 064d307d authored by Robin Kroonen's avatar Robin Kroonen
Browse files

Merge branch 'dev' of https://github.com/open-webui/open-webui into dev

parents dc6db5e8 ab271c82
Show whitespace changes
Inline Side-by-side
Showing with 1060 additions and 68 deletions
scripts/prepare-pyodide.js 0 → 100644
View file @ 064d307d
const packages = [
'requests',
'beautifulsoup4',
'numpy',
'pandas',
'matplotlib',
'scikit-learn',
'scipy',
'regex',
'seaborn'
];
import { loadPyodide } from 'pyodide';
import { writeFile, copyFile, readdir } from 'fs/promises';
async function downloadPackages() {
console.log('Setting up pyodide + micropip');
const pyodide = await loadPyodide({
packageCacheDir: 'static/pyodide'
});
await pyodide.loadPackage('micropip');
const micropip = pyodide.pyimport('micropip');
console.log('Downloading Pyodide packages:', packages);
await micropip.install(packages);
console.log('Pyodide packages downloaded, freezing into lock file');
const lockFile = await micropip.freeze();
await writeFile('static/pyodide/pyodide-lock.json', lockFile);
}
async function copyPyodide() {
console.log('Copying Pyodide files into static directory');
// Copy all files from node_modules/pyodide to static/pyodide
for await (const entry of await readdir('node_modules/pyodide')) {
await copyFile(`node_modules/pyodide/${entry}`, `static/pyodide/${entry}`);
}
}
await downloadPackages();
await copyPyodide();
src/app.html
View file @ 064d307d
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
title="Open WebUI" title="Open WebUI"
href="/opensearch.xml" href="/opensearch.xml"
/> />
<script> <script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC // On page load or when changing themes, best to add inline in `head` to avoid FOUC
(() => { (() => {
......
src/lib/apis/memories/index.ts 0 → 100644
View file @ 064d307d
import { WEBUI_API_BASE_URL } from '$lib/constants';
export const getMemories = async (token: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/memories`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const addNewMemory = async (token: string, content: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/memories/add`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({
content: content
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const queryMemory = async (token: string, content: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/memories/query`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({
content: content
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const deleteMemoryById = async (token: string, id: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/memories/${id}`, {
method: 'DELETE',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.then((json) => {
return json;
})
.catch((err) => {
error = err.detail;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const deleteMemoriesByUserId = async (token: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/memories/user`, {
method: 'DELETE',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.then((json) => {
return json;
})
.catch((err) => {
error = err.detail;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};
src/lib/apis/openai/index.ts
View file @ 064d307d
import { OPENAI_API_BASE_URL } from '$lib/constants'; import { OPENAI_API_BASE_URL } from '$lib/constants';
import { promptTemplate } from '$lib/utils'; import { promptTemplate } from '$lib/utils';
export const getOpenAIConfig = async (token: string = '') => {
let error = null;
const res = await fetch(`${OPENAI_API_BASE_URL}/config`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
...(token && { authorization: `Bearer ${token}` })
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.log(err);
if ('detail' in err) {
error = err.detail;
} else {
error = 'Server connection failed';
}
return null;
});
if (error) {
throw error;
}
return res;
};
export const updateOpenAIConfig = async (token: string = '', enable_openai_api: boolean) => {
let error = null;
const res = await fetch(`${OPENAI_API_BASE_URL}/config/update`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
...(token && { authorization: `Bearer ${token}` })
},
body: JSON.stringify({
enable_openai_api: enable_openai_api
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.log(err);
if ('detail' in err) {
error = err.detail;
} else {
error = 'Server connection failed';
}
return null;
});
if (error) {
throw error;
}
return res;
};
export const getOpenAIUrls = async (token: string = '') => { export const getOpenAIUrls = async (token: string = '') => {
let error = null; let error = null;
......
src/lib/apis/users/index.ts
View file @ 064d307d
...@@ -115,6 +115,33 @@ export const getUsers = async (token: string) => { ...@@ -115,6 +115,33 @@ export const getUsers = async (token: string) => {
return res ? res : []; return res ? res : [];
}; };
export const getUserById = async (token: string, userId: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/users/${userId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.log(err);
error = err.detail;
return null;
});
if (error) {
throw error;
}
return res;
};
export const deleteUserById = async (token: string, userId: string) => { export const deleteUserById = async (token: string, userId: string) => {
let error = null; let error = null;
......
src/lib/components/chat/MessageInput.svelte
View file @ 064d307d
...@@ -327,7 +327,6 @@ ...@@ -327,7 +327,6 @@
}; };
onMount(() => { onMount(() => {
console.log(document.getElementById('sidebar'));
window.setTimeout(() => chatTextAreaElement?.focus(), 0); window.setTimeout(() => chatTextAreaElement?.focus(), 0);
const dropZone = document.querySelector('body'); const dropZone = document.querySelector('body');
...@@ -358,7 +357,7 @@ ...@@ -358,7 +357,7 @@
if (inputFiles && inputFiles.length > 0) { if (inputFiles && inputFiles.length > 0) {
inputFiles.forEach((file) => { inputFiles.forEach((file) => {
console.log(file, file.name.split('.').at(-1)); console.log(file, file.name.split('.').at(-1));
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) { if (['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])) {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = (event) => { reader.onload = (event) => {
files = [ files = [
...@@ -506,6 +505,7 @@ ...@@ -506,6 +505,7 @@
> >
<div class="flex items-center gap-2 text-sm dark:text-gray-500"> <div class="flex items-center gap-2 text-sm dark:text-gray-500">
<img <img
crossorigin="anonymous"
alt="model profile" alt="model profile"
class="size-5 max-w-[28px] object-cover rounded-full" class="size-5 max-w-[28px] object-cover rounded-full"
src={$modelfiles.find((modelfile) => modelfile.tagName === selectedModel.id) src={$modelfiles.find((modelfile) => modelfile.tagName === selectedModel.id)
...@@ -547,7 +547,9 @@ ...@@ -547,7 +547,9 @@
if (inputFiles && inputFiles.length > 0) { if (inputFiles && inputFiles.length > 0) {
const _inputFiles = Array.from(inputFiles); const _inputFiles = Array.from(inputFiles);
_inputFiles.forEach((file) => { _inputFiles.forEach((file) => {
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) { if (
['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(file['type'])
) {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = (event) => { reader.onload = (event) => {
files = [ files = [
...@@ -584,7 +586,8 @@ ...@@ -584,7 +586,8 @@
}} }}
/> />
<form <form
class=" flex flex-col relative w-full rounded-3xl px-1.5 border border-gray-100 dark:border-gray-850 bg-white dark:bg-gray-900 dark:text-gray-100" dir={$settings?.chatDirection ?? 'LTR'}
class=" flex flex-col relative w-full rounded-3xl px-1.5 bg-gray-50 dark:bg-gray-850 dark:text-gray-100"
on:submit|preventDefault={() => { on:submit|preventDefault={() => {
submitPrompt(prompt, user); submitPrompt(prompt, user);
}} }}
...@@ -754,7 +757,7 @@ ...@@ -754,7 +757,7 @@
<textarea <textarea
id="chat-textarea" id="chat-textarea"
bind:this={chatTextAreaElement} bind:this={chatTextAreaElement}
class="scrollbar-hidden dark:bg-gray-900 dark:text-gray-100 outline-none w-full py-3 px-3 {fileUploadEnabled class="scrollbar-hidden bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-3 px-3 {fileUploadEnabled
? '' ? ''
: ' pl-4'} rounded-xl resize-none h-[48px]" : ' pl-4'} rounded-xl resize-none h-[48px]"
placeholder={chatInputPlaceholder !== '' placeholder={chatInputPlaceholder !== ''
...@@ -995,7 +998,7 @@ ...@@ -995,7 +998,7 @@
id="send-message-button" id="send-message-button"
class="{prompt !== '' class="{prompt !== ''
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 ' ? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
: 'text-white bg-gray-100 dark:text-gray-900 dark:bg-gray-800 disabled'} transition rounded-full p-1.5 self-center" : 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 self-center"
type="submit" type="submit"
disabled={prompt === ''} disabled={prompt === ''}
> >
......
src/lib/components/chat/Messages.svelte
View file @ 064d307d
<script lang="ts"> <script lang="ts">
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { chats, config, modelfiles, settings, user } from '$lib/stores'; import { chats, config, modelfiles, settings, user as _user, mobile } from '$lib/stores';
import { tick, getContext } from 'svelte'; import { tick, getContext } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
import Spinner from '../common/Spinner.svelte'; import Spinner from '../common/Spinner.svelte';
import { imageGenerations } from '$lib/apis/images'; import { imageGenerations } from '$lib/apis/images';
import { copyToClipboard, findWordIndices } from '$lib/utils'; import { copyToClipboard, findWordIndices } from '$lib/utils';
import CompareMessages from './Messages/CompareMessages.svelte';
import { stringify } from 'postcss';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
...@@ -22,15 +24,16 @@ ...@@ -22,15 +24,16 @@
export let continueGeneration: Function; export let continueGeneration: Function;
export let regenerateResponse: Function; export let regenerateResponse: Function;
export let user = $_user;
export let prompt; export let prompt;
export let suggestionPrompts; export let suggestionPrompts = [];
export let processing = ''; export let processing = '';
export let bottomPadding = false; export let bottomPadding = false;
export let autoScroll; export let autoScroll;
export let selectedModels;
export let history = {}; export let history = {};
export let messages = []; export let messages = [];
export let selectedModels;
export let selectedModelfiles = []; export let selectedModelfiles = [];
$: if (autoScroll && bottomPadding) { $: if (autoScroll && bottomPadding) {
...@@ -62,7 +65,8 @@ ...@@ -62,7 +65,8 @@
childrenIds: [], childrenIds: [],
role: 'user', role: 'user',
content: userPrompt, content: userPrompt,
...(history.messages[messageId].files && { files: history.messages[messageId].files }) ...(history.messages[messageId].files && { files: history.messages[messageId].files }),
models: selectedModels.filter((m, mIdx) => selectedModels.indexOf(m) === mIdx)
}; };
let messageParentId = history.messages[messageId].parentId; let messageParentId = history.messages[messageId].parentId;
...@@ -78,7 +82,7 @@ ...@@ -78,7 +82,7 @@
history.currentId = userMessageId; history.currentId = userMessageId;
await tick(); await tick();
await sendPrompt(userPrompt, userMessageId, chatId); await sendPrompt(userPrompt, userMessageId);
}; };
const updateChatMessages = async () => { const updateChatMessages = async () => {
...@@ -294,7 +298,7 @@ ...@@ -294,7 +298,7 @@
{#if message.role === 'user'} {#if message.role === 'user'}
<UserMessage <UserMessage
on:delete={() => messageDeleteHandler(message.id)} on:delete={() => messageDeleteHandler(message.id)}
user={$user} {user}
{readOnly} {readOnly}
{message} {message}
isFirstMessage={messageIdx === 0} isFirstMessage={messageIdx === 0}
...@@ -308,7 +312,7 @@ ...@@ -308,7 +312,7 @@
{showNextMessage} {showNextMessage}
copyToClipboard={copyToClipboardWithToast} copyToClipboard={copyToClipboardWithToast}
/> />
{:else} {:else if $mobile || (history.messages[message.parentId]?.models?.length ?? 1) === 1}
{#key message.id} {#key message.id}
<ResponseMessage <ResponseMessage
{message} {message}
...@@ -336,6 +340,38 @@ ...@@ -336,6 +340,38 @@
}} }}
/> />
{/key} {/key}
{:else}
{#key message.parentId}
<CompareMessages
bind:history
{messages}
{chatId}
parentMessage={history.messages[message.parentId]}
{messageIdx}
{selectedModelfiles}
{updateChatMessages}
{confirmEditResponseMessage}
{rateMessage}
copyToClipboard={copyToClipboardWithToast}
{continueGeneration}
{regenerateResponse}
on:change={async () => {
await updateChatById(localStorage.token, chatId, {
messages: messages,
history: history
});
if (autoScroll) {
const element = document.getElementById('messages-container');
autoScroll =
element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
}
}}
/>
{/key}
{/if} {/if}
</div> </div>
</div> </div>
......
src/lib/components/chat/Messages/CodeBlock.svelte
View file @ 064d307d
<script lang="ts"> <script lang="ts">
import Spinner from '$lib/components/common/Spinner.svelte';
import { copyToClipboard } from '$lib/utils'; import { copyToClipboard } from '$lib/utils';
import hljs from 'highlight.js'; import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.min.css'; import 'highlight.js/styles/github-dark.min.css';
import { loadPyodide } from 'pyodide';
import { tick } from 'svelte';
import PyodideWorker from '$lib/workers/pyodide.worker?worker';
export let id = '';
export let lang = ''; export let lang = '';
export let code = ''; export let code = '';
let executing = false;
let stdout = null;
let stderr = null;
let result = null;
let copied = false; let copied = false;
const copyCode = async () => { const copyCode = async () => {
...@@ -17,24 +29,233 @@ ...@@ -17,24 +29,233 @@
}, 1000); }, 1000);
}; };
const checkPythonCode = (str) => {
// Check if the string contains typical Python syntax characters
const pythonSyntax = [
'def ',
'else:',
'elif ',
'try:',
'except:',
'finally:',
'yield ',
'lambda ',
'assert ',
'nonlocal ',
'del ',
'True',
'False',
'None',
' and ',
' or ',
' not ',
' in ',
' is ',
' with '
];
for (let syntax of pythonSyntax) {
if (str.includes(syntax)) {
return true;
}
}
// If none of the above conditions met, it's probably not Python code
return false;
};
const executePython = async (code) => {
if (!code.includes('input') && !code.includes('matplotlib')) {
executePythonAsWorker(code);
} else {
result = null;
stdout = null;
stderr = null;
executing = true;
document.pyodideMplTarget = document.getElementById(`plt-canvas-${id}`);
let pyodide = await loadPyodide({
indexURL: '/pyodide/',
stdout: (text) => {
console.log('Python output:', text);
if (stdout) {
stdout += `${text}\n`;
} else {
stdout = `${text}\n`;
}
},
stderr: (text) => {
console.log('An error occured:', text);
if (stderr) {
stderr += `${text}\n`;
} else {
stderr = `${text}\n`;
}
},
packages: ['micropip']
});
try {
const micropip = pyodide.pyimport('micropip');
await micropip.set_index_urls('https://pypi.org/pypi/{package_name}/json');
let packages = [
code.includes('requests') ? 'requests' : null,
code.includes('bs4') ? 'beautifulsoup4' : null,
code.includes('numpy') ? 'numpy' : null,
code.includes('pandas') ? 'pandas' : null,
code.includes('matplotlib') ? 'matplotlib' : null,
code.includes('sklearn') ? 'scikit-learn' : null,
code.includes('scipy') ? 'scipy' : null,
code.includes('re') ? 'regex' : null,
code.includes('seaborn') ? 'seaborn' : null
].filter(Boolean);
console.log(packages);
await micropip.install(packages);
result = await pyodide.runPythonAsync(`from js import prompt
def input(p):
return prompt(p)
__builtins__.input = input`);
result = await pyodide.runPython(code);
if (!result) {
result = '[NO OUTPUT]';
}
console.log(result);
console.log(stdout);
console.log(stderr);
const pltCanvasElement = document.getElementById(`plt-canvas-${id}`);
if (pltCanvasElement?.innerHTML !== '') {
pltCanvasElement.classList.add('pt-4');
}
} catch (error) {
console.error('Error:', error);
stderr = error;
}
executing = false;
}
};
const executePythonAsWorker = async (code) => {
result = null;
stdout = null;
stderr = null;
executing = true;
let packages = [
code.includes('requests') ? 'requests' : null,
code.includes('bs4') ? 'beautifulsoup4' : null,
code.includes('numpy') ? 'numpy' : null,
code.includes('pandas') ? 'pandas' : null,
code.includes('sklearn') ? 'scikit-learn' : null,
code.includes('scipy') ? 'scipy' : null,
code.includes('re') ? 'regex' : null,
code.includes('seaborn') ? 'seaborn' : null
].filter(Boolean);
console.log(packages);
const pyodideWorker = new PyodideWorker();
pyodideWorker.postMessage({
id: id,
code: code,
packages: packages
});
setTimeout(() => {
if (executing) {
executing = false;
stderr = 'Execution Time Limit Exceeded';
pyodideWorker.terminate();
}
}, 60000);
pyodideWorker.onmessage = (event) => {
console.log('pyodideWorker.onmessage', event);
const { id, ...data } = event.data;
console.log(id, data);
data['stdout'] && (stdout = data['stdout']);
data['stderr'] && (stderr = data['stderr']);
data['result'] && (result = data['result']);
executing = false;
};
pyodideWorker.onerror = (event) => {
console.log('pyodideWorker.onerror', event);
executing = false;
};
};
$: highlightedCode = code ? hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value : ''; $: highlightedCode = code ? hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value : '';
</script> </script>
{#if code} {#if code}
<div class="mb-4"> <div class="mb-4" dir="ltr">
<div <div
class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto" class="flex justify-between bg-[#202123] text-white text-xs px-4 pt-1 pb-0.5 rounded-t-lg overflow-x-auto"
> >
<div class="p-1">{@html lang}</div> <div class="p-1">{@html lang}</div>
<div class="flex items-center">
{#if ['', 'python'].includes(lang) && (lang === 'python' || checkPythonCode(code))}
{#if executing}
<div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div>
{:else}
<button
class="copy-code-button bg-none border-none p-1"
on:click={() => {
executePython(code);
}}>Run</button
>
{/if}
{/if}
<button class="copy-code-button bg-none border-none p-1" on:click={copyCode} <button class="copy-code-button bg-none border-none p-1" on:click={copyCode}
>{copied ? 'Copied' : 'Copy Code'}</button >{copied ? 'Copied' : 'Copy Code'}</button
> >
</div> </div>
</div>
<pre <pre
class=" hljs p-4 px-5 overflow-x-auto" class=" hljs p-4 px-5 overflow-x-auto"
style="border-top-left-radius: 0px; border-top-right-radius: 0px;"><code style="border-top-left-radius: 0px; border-top-right-radius: 0px; {(executing ||
stdout ||
stderr ||
result) &&
'border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;'}"><code
class="language-{lang} rounded-t-none whitespace-pre">{@html highlightedCode || code}</code class="language-{lang} rounded-t-none whitespace-pre">{@html highlightedCode || code}</code
></pre> ></pre>
<div
id="plt-canvas-{id}"
class="bg-[#202123] text-white max-w-full overflow-x-auto scrollbar-hidden"
/>
{#if executing}
<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
<div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
<div class="text-sm">Running...</div>
</div>
{:else if stdout || stderr || result}
<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
<div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
<div class="text-sm">{stdout || stderr || result}</div>
</div>
{/if}
</div> </div>
{/if} {/if}
src/lib/components/chat/Messages/CompareMessages.svelte 0 → 100644
View file @ 064d307d
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { updateChatById } from '$lib/apis/chats';
import { onMount, tick } from 'svelte';
import ResponseMessage from './ResponseMessage.svelte';
export let chatId;
export let history;
export let messages = [];
export let messageIdx;
export let parentMessage;
export let selectedModelfiles;
export let updateChatMessages: Function;
export let confirmEditResponseMessage: Function;
export let rateMessage: Function;
export let copyToClipboard: Function;
export let continueGeneration: Function;
export let regenerateResponse: Function;
const dispatch = createEventDispatcher();
let currentMessageId;
let groupedMessagesIdx = {};
let groupedMessages = {};
$: groupedMessages = parentMessage?.models.reduce((a, model) => {
const modelMessages = parentMessage?.childrenIds
.map((id) => history.messages[id])
.filter((m) => m.model === model);
return {
...a,
[model]: { messages: modelMessages }
};
}, {});
const showPreviousMessage = (model) => {
groupedMessagesIdx[model] = Math.max(0, groupedMessagesIdx[model] - 1);
let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].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');
};
const showNextMessage = (model) => {
groupedMessagesIdx[model] = Math.min(
groupedMessages[model].messages.length - 1,
groupedMessagesIdx[model] + 1
);
let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].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');
};
onMount(async () => {
await tick();
currentMessageId = messages[messageIdx].id;
for (const model of parentMessage?.models) {
const idx = groupedMessages[model].messages.findIndex((m) => m.id === currentMessageId);
if (idx !== -1) {
groupedMessagesIdx[model] = idx;
} else {
groupedMessagesIdx[model] = 0;
}
}
});
</script>
<div>
<div
class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
id="responses-container-{parentMessage.id}"
>
{#each Object.keys(groupedMessages) as model}
{#if groupedMessagesIdx[model] !== undefined && groupedMessages[model].messages.length > 0}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class=" snap-center min-w-80 w-full max-w-full m-1 border {history.messages[
currentMessageId
].model === model
? 'border-gray-100 dark:border-gray-700 border-[1.5px]'
: 'border-gray-50 dark:border-gray-850 '} transition p-5 rounded-3xl"
on:click={() => {
currentMessageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].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]]}
modelfiles={selectedModelfiles}
siblings={groupedMessages[model].messages.map((m) => m.id)}
isLastMessage={true}
{updateChatMessages}
{confirmEditResponseMessage}
showPreviousMessage={() => showPreviousMessage(model)}
showNextMessage={() => showNextMessage(model)}
{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
});
}}
/>
</div>
{/if}
{/each}
</div>
</div>
src/lib/components/chat/Messages/Name.svelte
View file @ 064d307d
<div class=" self-center font-bold mb-0.5 line-clamp-1"> <div class=" self-center font-bold mb-0.5 line-clamp-1 contents">
<slot /> <slot />
</div> </div>
src/lib/components/chat/Messages/Placeholder.svelte
View file @ 064d307d
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
> >
{#if model in modelfiles} {#if model in modelfiles}
<img <img
crossorigin="anonymous"
src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`} src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
alt="modelfile" alt="modelfile"
class=" size-[2.7rem] rounded-full border-[1px] border-gray-200 dark:border-none" class=" size-[2.7rem] rounded-full border-[1px] border-gray-200 dark:border-none"
...@@ -50,6 +51,7 @@ ...@@ -50,6 +51,7 @@
/> />
{:else} {:else}
<img <img
crossorigin="anonymous"
src={$i18n.language === 'dg-DG' src={$i18n.language === 'dg-DG'
? `/doge.png` ? `/doge.png`
: `${WEBUI_BASE_URL}/static/favicon.png`} : `${WEBUI_BASE_URL}/static/favicon.png`}
......
src/lib/components/chat/Messages/ProfileImage.svelte
View file @ 064d307d
<script lang="ts"> <script lang="ts">
import { settings } from '$lib/stores';
import { WEBUI_BASE_URL } from '$lib/constants';
export let src = '/user.png'; export let src = '/user.png';
</script> </script>
<div class=" mr-3"> <div class={($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}>
<img {src} class=" w-8 object-cover rounded-full" alt="profile" draggable="false" /> <img
crossorigin="anonymous"
src={src.startsWith(WEBUI_BASE_URL) ||
src.startsWith('https://www.gravatar.com/avatar/') ||
src.startsWith('data:') ||
src.startsWith('/')
? src
: `/user.png`}
class=" w-8 object-cover rounded-full"
alt="profile"
draggable="false"
/>
</div> </div>
src/lib/components/chat/Messages/ResponseMessage.svelte
View file @ 064d307d
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
let selectedCitation = null; let selectedCitation = null;
$: tokens = marked.lexer(sanitizeResponseContent(message.content)); $: tokens = marked.lexer(sanitizeResponseContent(message?.content));
const renderer = new marked.Renderer(); const renderer = new marked.Renderer();
...@@ -332,7 +332,11 @@ ...@@ -332,7 +332,11 @@
<CitationsModal bind:show={showCitationModal} citation={selectedCitation} /> <CitationsModal bind:show={showCitationModal} citation={selectedCitation} />
{#key message.id} {#key message.id}
<div class=" flex w-full message-{message.id}" id="message-{message.id}"> <div
class=" flex w-full message-{message.id}"
id="message-{message.id}"
dir={$settings.chatDirection}
>
<ProfileImage <ProfileImage
src={modelfiles[message.model]?.imageUrl ?? src={modelfiles[message.model]?.imageUrl ??
($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)} ($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
...@@ -434,9 +438,10 @@ ...@@ -434,9 +438,10 @@
{:else if message.content === ''} {:else if message.content === ''}
<Skeleton /> <Skeleton />
{:else} {:else}
{#each tokens as token} {#each tokens as token, tokenIdx}
{#if token.type === 'code'} {#if token.type === 'code'}
<CodeBlock <CodeBlock
id={`${message.id}-${tokenIdx}`}
lang={token.lang} lang={token.lang}
code={revertSanitizedResponseContent(token.text)} code={revertSanitizedResponseContent(token.text)}
/> />
...@@ -494,7 +499,7 @@ ...@@ -494,7 +499,7 @@
class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500" class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
> >
{#if siblings.length > 1} {#if siblings.length > 1}
<div class="flex self-center"> <div class="flex self-center min-w-fit" dir="ltr">
<button <button
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition" class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
on:click={() => { on:click={() => {
...@@ -518,7 +523,7 @@ ...@@ -518,7 +523,7 @@
</button> </button>
<div <div
class="text-sm tracking-widest font-semibold self-center dark:text-gray-100" class="text-sm tracking-widest font-semibold self-center dark:text-gray-100 min-w-fit"
> >
{siblings.indexOf(message.id) + 1}/{siblings.length} {siblings.indexOf(message.id) + 1}/{siblings.length}
</div> </div>
...@@ -889,7 +894,9 @@ ...@@ -889,7 +894,9 @@
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button" : 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
on:click={regenerateResponse} on:click={() => {
regenerateResponse(message);
}}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
......
src/lib/components/chat/Messages/UserMessage.svelte
View file @ 064d307d
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
import { modelfiles, settings } from '$lib/stores'; import { modelfiles, settings } from '$lib/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import { user as _user } from '$lib/stores';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
...@@ -54,7 +56,7 @@ ...@@ -54,7 +56,7 @@
}; };
</script> </script>
<div class=" flex w-full user-message"> <div class=" flex w-full user-message" dir={$settings.chatDirection}>
{#if !($settings?.chatBubble ?? true)} {#if !($settings?.chatBubble ?? true)}
<ProfileImage <ProfileImage
src={message.user src={message.user
...@@ -63,7 +65,7 @@ ...@@ -63,7 +65,7 @@
: user?.profile_image_url ?? '/user.png'} : user?.profile_image_url ?? '/user.png'}
/> />
{/if} {/if}
<div class="w-full overflow-hidden"> <div class="w-full overflow-hidden pl-1">
{#if !($settings?.chatBubble ?? true)} {#if !($settings?.chatBubble ?? true)}
<div> <div>
<Name> <Name>
...@@ -74,7 +76,7 @@ ...@@ -74,7 +76,7 @@
{$i18n.t('You')} {$i18n.t('You')}
<span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span> <span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
{/if} {/if}
{:else if $settings.showUsername} {:else if $settings.showUsername || $_user.name !== user.name}
{user.name} {user.name}
{:else} {:else}
{$i18n.t('You')} {$i18n.t('You')}
...@@ -239,7 +241,7 @@ ...@@ -239,7 +241,7 @@
> >
{#if !($settings?.chatBubble ?? true)} {#if !($settings?.chatBubble ?? true)}
{#if siblings.length > 1} {#if siblings.length > 1}
<div class="flex self-center"> <div class="flex self-center" dir="ltr">
<button <button
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition" class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
on:click={() => { on:click={() => {
...@@ -368,7 +370,7 @@ ...@@ -368,7 +370,7 @@
{#if $settings?.chatBubble ?? true} {#if $settings?.chatBubble ?? true}
{#if siblings.length > 1} {#if siblings.length > 1}
<div class="flex self-center"> <div class="flex self-center" dir="ltr">
<button <button
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition" class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
on:click={() => { on:click={() => {
......
src/lib/components/chat/ModelSelector/Selector.svelte
View file @ 064d307d
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
export let items = [{ value: 'mango', label: 'Mango' }]; export let items = [{ value: 'mango', label: 'Mango' }];
export let className = ' w-[30rem]'; export let className = 'w-[30rem]';
let show = false; let show = false;
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
let ollamaVersion = null; let ollamaVersion = null;
$: filteredItems = searchValue $: filteredItems = searchValue
? items.filter((item) => item.value.includes(searchValue.toLowerCase())) ? items.filter((item) => item.value.toLowerCase().includes(searchValue.toLowerCase()))
: items; : items;
const pullModelHandler = async () => { const pullModelHandler = async () => {
...@@ -203,7 +203,9 @@ ...@@ -203,7 +203,9 @@
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content <DropdownMenu.Content
class=" z-40 {className} max-w-[calc(100vw-1rem)] justify-start rounded-xl bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50 outline-none " class=" z-40 {$mobile
? `w-full`
: `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-xl bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50 outline-none "
transition={flyAndScale} transition={flyAndScale}
side={$mobile ? 'bottom' : 'bottom-start'} side={$mobile ? 'bottom' : 'bottom-start'}
sideOffset={4} sideOffset={4}
......
src/lib/components/chat/Settings/Account.svelte
View file @ 064d307d
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
if ( if (
files.length > 0 && files.length > 0 &&
['image/gif', 'image/jpeg', 'image/png'].includes(files[0]['type']) ['image/gif', 'image/webp', 'image/jpeg', 'image/png'].includes(files[0]['type'])
) { ) {
reader.readAsDataURL(files[0]); reader.readAsDataURL(files[0]);
} }
......
src/lib/components/chat/Settings/Connections.svelte
View file @ 064d307d
...@@ -5,28 +5,27 @@ ...@@ -5,28 +5,27 @@
import { getOllamaUrls, getOllamaVersion, updateOllamaUrls } from '$lib/apis/ollama'; import { getOllamaUrls, getOllamaVersion, updateOllamaUrls } from '$lib/apis/ollama';
import { import {
getOpenAIConfig,
getOpenAIKeys, getOpenAIKeys,
getOpenAIUrls, getOpenAIUrls,
updateOpenAIConfig,
updateOpenAIKeys, updateOpenAIKeys,
updateOpenAIUrls updateOpenAIUrls
} from '$lib/apis/openai'; } from '$lib/apis/openai';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import Switch from '$lib/components/common/Switch.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let getModels: Function; export let getModels: Function;
// External // External
let OLLAMA_BASE_URL = '';
let OLLAMA_BASE_URLS = ['']; let OLLAMA_BASE_URLS = [''];
let OPENAI_API_KEY = '';
let OPENAI_API_BASE_URL = '';
let OPENAI_API_KEYS = ['']; let OPENAI_API_KEYS = [''];
let OPENAI_API_BASE_URLS = ['']; let OPENAI_API_BASE_URLS = [''];
let showOpenAI = false; let ENABLE_OPENAI_API = false;
const updateOpenAIHandler = async () => { const updateOpenAIHandler = async () => {
OPENAI_API_BASE_URLS = await updateOpenAIUrls(localStorage.token, OPENAI_API_BASE_URLS); OPENAI_API_BASE_URLS = await updateOpenAIUrls(localStorage.token, OPENAI_API_BASE_URLS);
...@@ -52,6 +51,10 @@ ...@@ -52,6 +51,10 @@
onMount(async () => { onMount(async () => {
if ($user.role === 'admin') { if ($user.role === 'admin') {
OLLAMA_BASE_URLS = await getOllamaUrls(localStorage.token); OLLAMA_BASE_URLS = await getOllamaUrls(localStorage.token);
const config = await getOpenAIConfig(localStorage.token);
ENABLE_OPENAI_API = config.ENABLE_OPENAI_API;
OPENAI_API_BASE_URLS = await getOpenAIUrls(localStorage.token); OPENAI_API_BASE_URLS = await getOpenAIUrls(localStorage.token);
OPENAI_API_KEYS = await getOpenAIKeys(localStorage.token); OPENAI_API_KEYS = await getOpenAIKeys(localStorage.token);
} }
...@@ -70,16 +73,18 @@ ...@@ -70,16 +73,18 @@
<div class="mt-2 space-y-2 pr-1.5"> <div class="mt-2 space-y-2 pr-1.5">
<div class="flex justify-between items-center text-sm"> <div class="flex justify-between items-center text-sm">
<div class=" font-medium">{$i18n.t('OpenAI API')}</div> <div class=" font-medium">{$i18n.t('OpenAI API')}</div>
<button
class=" text-xs font-medium text-gray-500" <div class="mt-1">
type="button" <Switch
on:click={() => { bind:state={ENABLE_OPENAI_API}
showOpenAI = !showOpenAI; on:change={async () => {
}}>{showOpenAI ? $i18n.t('Hide') : $i18n.t('Show')}</button updateOpenAIConfig(localStorage.token, ENABLE_OPENAI_API);
> }}
/>
</div>
</div> </div>
{#if showOpenAI} {#if ENABLE_OPENAI_API}
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
{#each OPENAI_API_BASE_URLS as url, idx} {#each OPENAI_API_BASE_URLS as url, idx}
<div class="flex w-full gap-2"> <div class="flex w-full gap-2">
......
src/lib/components/chat/Settings/Interface.svelte
View file @ 064d307d
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
let promptSuggestions = []; let promptSuggestions = [];
let showUsername = false; let showUsername = false;
let chatBubble = true; let chatBubble = true;
let chatDirection: 'LTR' | 'RTL' = 'LTR';
const toggleSplitLargeChunks = async () => { const toggleSplitLargeChunks = async () => {
splitLargeChunks = !splitLargeChunks; splitLargeChunks = !splitLargeChunks;
...@@ -76,6 +77,11 @@ ...@@ -76,6 +77,11 @@
} }
}; };
const toggleChangeChatDirection = async () => {
chatDirection = chatDirection === 'LTR' ? 'RTL' : 'LTR';
saveSettings({ chatDirection });
};
const updateInterfaceHandler = async () => { const updateInterfaceHandler = async () => {
if ($user.role === 'admin') { if ($user.role === 'admin') {
promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions); promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
...@@ -114,6 +120,7 @@ ...@@ -114,6 +120,7 @@
chatBubble = settings.chatBubble ?? true; chatBubble = settings.chatBubble ?? true;
fullScreenMode = settings.fullScreenMode ?? false; fullScreenMode = settings.fullScreenMode ?? false;
splitLargeChunks = settings.splitLargeChunks ?? false; splitLargeChunks = settings.splitLargeChunks ?? false;
chatDirection = settings.chatDirection ?? 'LTR';
}); });
</script> </script>
...@@ -210,6 +217,7 @@ ...@@ -210,6 +217,7 @@
</div> </div>
</div> </div>
{#if !$settings.chatBubble}
<div> <div>
<div class=" py-0.5 flex w-full justify-between"> <div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium"> <div class=" self-center text-xs font-medium">
...@@ -231,6 +239,7 @@ ...@@ -231,6 +239,7 @@
</button> </button>
</div> </div>
</div> </div>
{/if}
<div> <div>
<div class=" py-0.5 flex w-full justify-between"> <div class=" py-0.5 flex w-full justify-between">
...@@ -255,6 +264,24 @@ ...@@ -255,6 +264,24 @@
</div> </div>
</div> </div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Chat direction')}</div>
<button
class="p-1 px-3 text-xs flex rounded transition"
on:click={toggleChangeChatDirection}
type="button"
>
{#if chatDirection === 'LTR'}
<span class="ml-2 self-center">{$i18n.t('LTR')}</span>
{:else}
<span class="ml-2 self-center">{$i18n.t('RTL')}</span>
{/if}
</button>
</div>
</div>
<hr class=" dark:border-gray-700" /> <hr class=" dark:border-gray-700" />
<div> <div>
......
src/lib/components/chat/Settings/Personalization.svelte 0 → 100644
View file @ 064d307d
<script lang="ts">
import { getBackendConfig } from '$lib/apis';
import { setDefaultPromptSuggestions } from '$lib/apis/configs';
import Switch from '$lib/components/common/Switch.svelte';
import { config, models, settings, user } from '$lib/stores';
import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
import { toast } from 'svelte-sonner';
import ManageModal from './Personalization/ManageModal.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
export let saveSettings: Function;
let showManageModal = false;
// Addons
let enableMemory = false;
onMount(async () => {
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
enableMemory = settings?.memory ?? false;
});
</script>
<ManageModal bind:show={showManageModal} />
<form
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit|preventDefault={() => {
dispatch('save');
}}
>
<div class=" pr-1.5 overflow-y-scroll max-h-[25rem]">
<div>
<div class="flex items-center justify-between mb-1">
<Tooltip
content="This is an experimental feature, it may not function as expected and is subject to change at any time."
>
<div class="text-sm font-medium">
{$i18n.t('Memory')}
<span class=" text-xs text-gray-500">({$i18n.t('Experimental')})</span>
</div>
</Tooltip>
<div class="mt-1">
<Switch
bind:state={enableMemory}
on:change={async () => {
saveSettings({ memory: enableMemory });
}}
/>
</div>
</div>
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">
<div>
You can personalize your interactions with LLMs by adding memories through the 'Manage'
button below, making them more helpful and tailored to you.
</div>
<!-- <div class="mt-3">
To understand what LLM remembers or teach it something new, just chat with it:
<div>- “Remember that I like concise responses.”</div>
<div>- “I just got a puppy!”</div>
<div>- “What do you remember about me?”</div>
<div>- “Where did we leave off on my last project?”</div>
</div> -->
</div>
<div class="mt-3 mb-1 ml-1">
<button
type="button"
class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"
on:click={() => {
showManageModal = true;
}}
>
Manage
</button>
</div>
</div>
<div class="flex justify-end text-sm font-medium">
<button
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
type="submit"
>
{$i18n.t('Save')}
</button>
</div>
</form>
src/lib/components/chat/Settings/Personalization/AddMemoryModal.svelte 0 → 100644
View file @ 064d307d
<script>
import { createEventDispatcher, getContext } from 'svelte';
import Modal from '$lib/components/common/Modal.svelte';
import { addNewMemory } from '$lib/apis/memories';
import { toast } from 'svelte-sonner';
const dispatch = createEventDispatcher();
export let show;
const i18n = getContext('i18n');
let loading = false;
let content = '';
const submitHandler = async () => {
loading = true;
const res = await addNewMemory(localStorage.token, content).catch((error) => {
toast.error(error);
return null;
});
if (res) {
console.log(res);
toast.success('Memory added successfully');
content = '';
show = false;
dispatch('save');
}
loading = false;
};
</script>
<Modal bind:show size="sm">
<div>
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
<div class=" text-lg font-medium self-center">{$i18n.t('Add Memory')}</div>
<button
class="self-center"
on:click={() => {
show = false;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5"
>
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
<form
class="flex flex-col w-full"
on:submit|preventDefault={() => {
submitHandler();
}}
>
<div class="">
<textarea
bind:value={content}
class=" bg-transparent w-full text-sm resize-none rounded-xl p-3 outline outline-1 outline-gray-100 dark:outline-gray-800"
rows="3"
placeholder={$i18n.t('Enter a detail about yourself for your LLMs to recall')}
/>
<div class="text-xs text-gray-500">
ⓘ Refer to yourself as "User" (e.g., "User is learning Spanish")
</div>
</div>
<div class="flex justify-end pt-1 text-sm font-medium">
<button
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-3xl flex flex-row space-x-1 items-center {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
disabled={loading}
>
{$i18n.t('Add')}
{#if loading}
<div class="ml-2 self-center">
<svg
class=" w-4 h-4"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
><style>
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style><path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
>
</div>
{/if}
</button>
</div>
</form>
</div>
</div>
</div>
</Modal>
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