root
/
open-webui
mirror of https://github.com/open-webui/open-webui.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: disable run button when code is running

This commit is contained in:
Timothy J. Baek 2024-05-16 20:47:13 -10:00
parent a2933bf89d
commit b27b035caa
1 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/lib/components/chat/Messages/CodeBlock.svelte
View File

@ -1,4 +1,5 @@
<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';
@ -10,7 +11,7 @@
export let lang = ''; export let lang = '';
export let code = ''; export let code = '';
let executed = false; let executing = false;
let stdout = null; let stdout = null;
let stderr = null; let stderr = null;
@ -142,7 +143,7 @@
stdout = null; stdout = null;
stderr = null; stderr = null;
executed = true; executing = true;
let pyodide = await loadPyodide({ let pyodide = await loadPyodide({
indexURL: '/pyodide/', indexURL: '/pyodide/',
@ -194,6 +195,8 @@
console.error('Error:', error); console.error('Error:', error);
stderr = error; stderr = error;
} }
executing = false;
}; };
$: highlightedCode = code ? hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value : ''; $: highlightedCode = code ? hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value : '';
@ -208,12 +211,16 @@
<div class="flex items-center"> <div class="flex items-center">
{#if lang === 'python' || checkPythonCode(code)} {#if lang === 'python' || checkPythonCode(code)}
<button {#if executing}
class="copy-code-button bg-none border-none p-1" <div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div>
on:click={() => { {:else}
executePython(code); <button
}}>Run</button class="copy-code-button bg-none border-none p-1"
> on:click={() => {
executePython(code);
}}>Run</button
>
{/if}
{/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
@ -223,25 +230,28 @@
<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; {executed && 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 '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>
{#if executed} {#if executing}
<div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg"> <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-gray-500 text-xs mb-1">STDOUT/STDERR</div>
<div class="text-sm"> <div class="text-sm">Running...</div>
{#if stdout} </div>
{stdout} {:else if stdout || stderr}
{:else if result} <div class="bg-[#202123] text-white px-4 py-4 rounded-b-lg">
{result} <div class=" text-gray-500 text-xs mb-1">STDOUT/STDERR</div>
{:else if stderr} <div class="text-sm">{stdout || stderr}</div>
{stderr}
{:else} {#if result}
Running... <div class=" text-gray-300 text-xs mt-2 mb-1">Result</div>
{/if} <div class="text-sm">{result}</div>
</div> {/if}
</div> </div>
{/if} {/if}
</div> </div>