ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-11 20:05:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: Dynamically load CodeEditor to improve first-screen loading speed

Browse source
This commit is contained in:
Shirasawa 2025-09-17 07:08:39 +00:00
parent 9f9f1a1517
commit 001775d6c3
3 changed files with 45 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/lib/components/admin/Functions/FunctionEditor.svelte
View file

@ -4,7 +4,6 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import CodeEditor from '$lib/components/common/CodeEditor.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Badge from '$lib/components/common/Badge.svelte'; import Badge from '$lib/components/common/Badge.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
@ -367,20 +366,22 @@ class Pipe:
</div> </div>
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg"> <div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
<CodeEditor {#await import('$lib/components/common/CodeEditor.svelte') then { default: CodeEditor }}
bind:this={codeEditor} <CodeEditor
value={content} bind:this={codeEditor}
lang="python" value={content}
{boilerplate} lang="python"
onChange={(e) => { {boilerplate}
_content = e; onChange={(e) => {
}} _content = e;
onSave={async () => { }}
if (formElement) { onSave={async () => {
formElement.requestSubmit(); if (formElement) {
} formElement.requestSubmit();
}} }
/> }}
/>
{/await}
</div> </div>
<div class="pb-3 flex justify-between"> <div class="pb-3 flex justify-between">

25
src/lib/components/chat/Messages/CodeBlock.svelte
View file

@ -7,7 +7,6 @@
import 'highlight.js/styles/github-dark.min.css'; import 'highlight.js/styles/github-dark.min.css';
import PyodideWorker from '$lib/workers/pyodide.worker?worker'; import PyodideWorker from '$lib/workers/pyodide.worker?worker';
import CodeEditor from '$lib/components/common/CodeEditor.svelte';
import SvgPanZoom from '$lib/components/common/SVGPanZoom.svelte'; import SvgPanZoom from '$lib/components/common/SVGPanZoom.svelte';
import { config } from '$lib/stores'; import { config } from '$lib/stores';
import { executeCode } from '$lib/apis/utils'; import { executeCode } from '$lib/apis/utils';
@ -481,17 +480,19 @@
{#if !collapsed} {#if !collapsed}
{#if edit} {#if edit}
<CodeEditor {#await import('$lib/components/common/CodeEditor.svelte') then { default: CodeEditor }}
value={code} <CodeEditor
{id} value={code}
{lang} {id}
onSave={() => { {lang}
saveCode(); onSave={() => {
}} saveCode();
onChange={(value) => { }}
_code = value; onChange={(value) => {
}} _code = value;
/> }}
/>
{/await}
{:else} {:else}
<pre <pre
class=" hljs p-4 px-5 overflow-x-auto" class=" hljs p-4 px-5 overflow-x-auto"

31
src/lib/components/workspace/Tools/ToolkitEditor.svelte
View file

@ -3,7 +3,6 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import CodeEditor from '$lib/components/common/CodeEditor.svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Badge from '$lib/components/common/Badge.svelte'; import Badge from '$lib/components/common/Badge.svelte';
@ -286,20 +285,22 @@ class Tools:
</div> </div>
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg"> <div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
<CodeEditor {#await import('$lib/components/common/CodeEditor.svelte') then { default: CodeEditor }}
bind:this={codeEditor} <CodeEditor
value={content} bind:this={codeEditor}
lang="python" value={content}
{boilerplate} lang="python"
onChange={(e) => { {boilerplate}
_content = e; onChange={(e) => {
}} _content = e;
onSave={async () => { }}
if (formElement) { onSave={async () => {
formElement.requestSubmit(); if (formElement) {
} formElement.requestSubmit();
}} }
/> }}
/>
{/await}
</div> </div>
<div class="pb-3 flex justify-between"> <div class="pb-3 flex justify-between">