OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: convention

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-13 23:16:51 -07:00
parent a4a5614de5
commit e0e249c1b9
3 changed files with 51 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/lib/components/chat/Messages/CodeExecutionModal.svelte
View File

@ -5,24 +5,25 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let show = false; export let show = false;
export let code_execution = null; export let codeExecution = null;
</script> </script>
<Modal size="lg" bind:show> <Modal size="lg" bind:show>
<div> <div>
<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2"> <div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
<div class="text-lg font-medium self-center capitalize"> <div class="text-lg font-medium self-center capitalize">
{#if code_execution?.status == 'OK'} {#if codeExecution?.status == 'OK'}
&#x2705; <!-- Checkmark --> &#x2705; <!-- Checkmark -->
{:else if code_execution?.status == 'ERROR'} {:else if codeExecution?.status == 'ERROR'}
&#x274C; <!-- X mark --> &#x274C; <!-- X mark -->
{:else if code_execution?.status == 'PENDING'} {:else if codeExecution?.status == 'PENDING'}
&#x23F3; <!-- Hourglass --> &#x23F3; <!-- Hourglass -->
{:else} {:else}
&#x2049;&#xFE0F; <!-- Interrobang --> &#x2049;&#xFE0F; <!-- Interrobang -->
{/if} {/if}
{#if code_execution?.name}
{$i18n.t('Code execution')}: {code_execution?.name} {#if codeExecution?.name}
{$i18n.t('Code execution')}: {codeExecution?.name}
{:else} {:else}
{$i18n.t('Code execution')} {$i18n.t('Code execution')}
{/if} {/if}
@ -31,7 +32,7 @@
class="self-center" class="self-center"
on:click={() => { on:click={() => {
show = false; show = false;
code_execution = null; codeExecution = null;
}} }}
> >
<svg <svg
@ -57,13 +58,13 @@
</div> </div>
<CodeBlock <CodeBlock
id="codeexec-{code_execution?.id}-code" id="codeexec-{codeExecution?.id}-code"
lang={code_execution?.language} lang={codeExecution?.language}
code={code_execution?.code} code={codeExecution?.code}
allow_execution={false} allow_execution={false}
/> />
</div> </div>
{#if code_execution?.error} {#if codeExecution?.error}
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<hr class=" dark:border-gray-850 my-3" /> <hr class=" dark:border-gray-850 my-3" />
<div class="text-sm dark:text-gray-400"> <div class="text-sm dark:text-gray-400">
@ -71,14 +72,14 @@
</div> </div>
<CodeBlock <CodeBlock
id="codeexec-{code_execution?.id}-error" id="codeexec-{codeExecution?.id}-error"
lang="" lang=""
code={code_execution?.error} code={codeExecution?.error}
allow_execution={false} allow_execution={false}
/> />
</div> </div>
{/if} {/if}
{#if code_execution?.output} {#if codeExecution?.output}
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<hr class=" dark:border-gray-850 my-3" /> <hr class=" dark:border-gray-850 my-3" />
<div class="text-sm dark:text-gray-400"> <div class="text-sm dark:text-gray-400">
@ -86,21 +87,21 @@
</div> </div>
<CodeBlock <CodeBlock
id="codeexec-{code_execution?.id}-output" id="codeexec-{codeExecution?.id}-output"
lang="" lang=""
code={code_execution?.output} code={codeExecution?.output}
allow_execution={false} allow_execution={false}
/> />
</div> </div>
{/if} {/if}
{#if code_execution?.files && code_execution?.files.length > 0} {#if codeExecution?.files && codeExecution?.files.length > 0}
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<hr class=" dark:border-gray-850 my-3" /> <hr class=" dark:border-gray-850 my-3" />
<div class=" text-sm font-medium dark:text-gray-300"> <div class=" text-sm font-medium dark:text-gray-300">
{$i18n.t('Files')} {$i18n.t('Files')}
</div> </div>
<ul class="mt-1 list-disc pl-4 text-xs"> <ul class="mt-1 list-disc pl-4 text-xs">
{#each code_execution?.files as file} {#each codeExecution?.files as file}
<li> <li>
&#x1F4BE; <!-- Floppy disk --> &#x1F4BE; <!-- Floppy disk -->
<a href={file.url} target="_blank">{file.name}</a> <a href={file.url} target="_blank">{file.name}</a>

74
src/lib/components/chat/Messages/CodeExecutions.svelte
View File

@ -2,76 +2,62 @@
import CodeExecutionModal from './CodeExecutionModal.svelte'; import CodeExecutionModal from './CodeExecutionModal.svelte';
import Spinner from '$lib/components/common/Spinner.svelte'; import Spinner from '$lib/components/common/Spinner.svelte';
export let code_executions = []; export let codeExecutions = [];
let _code_executions = [];
$: _code_executions = code_executions.reduce((acc, code_execution) => {
let error = null;
let output = null;
let files = [];
let status = 'PENDING';
if (code_execution.result) {
output = code_execution.result.output;
if (code_execution.result.error) {
status = 'ERROR';
error = code_execution.result.error;
} else {
status = 'OK';
}
if (code_execution.result.files) {
files = code_execution.result.files;
}
}
acc.push({
id: code_execution.id,
name: code_execution.name,
code: code_execution.code,
language: code_execution.language || '',
status: status,
error: error,
output: output,
files: files
});
return acc;
}, []);
let selectedCodeExecution = null; let selectedCodeExecution = null;
let showCodeExecutionModal = false; let showCodeExecutionModal = false;
</script> </script>
<CodeExecutionModal bind:show={showCodeExecutionModal} code_execution={selectedCodeExecution} /> <CodeExecutionModal bind:show={showCodeExecutionModal} codeExecution={selectedCodeExecution} />
{#if _code_executions.length > 0} {#if codeExecutions.length > 0}
<div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap"> <div class="mt-1 mb-2 w-full flex gap-1 items-center flex-wrap">
{#each _code_executions as code_execution} {#each codeExecutions.map((execution) => {
let error = null;
let output = null;
let files = [];
let status = 'PENDING';
if (execution.result) {
output = execution.result.output;
if (execution.result.error) {
status = 'ERROR';
error = execution.result.error;
} else {
status = 'OK';
}
if (execution.result.files) {
files = execution.result.files;
}
}
return { id: execution.id, name: execution.name, code: execution.code, language: execution.language || '', status: status, error: error, output: output, files: files };
}) as execution (execution.id)}
<div class="flex gap-1 text-xs font-semibold"> <div class="flex gap-1 text-xs font-semibold">
<button <button
class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96" class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
on:click={() => { on:click={() => {
selectedCodeExecution = code_execution; selectedCodeExecution = execution;
showCodeExecutionModal = true; showCodeExecutionModal = true;
}} }}
> >
<div class="bg-white dark:bg-gray-700 rounded-full size-4"> <div class="bg-white dark:bg-gray-700 rounded-full size-4">
{#if code_execution.status == 'OK'} {#if execution.status == 'OK'}
&#x2705; <!-- Checkmark --> &#x2705; <!-- Checkmark -->
{:else if code_execution.status == 'ERROR'} {:else if execution.status == 'ERROR'}
&#x274C; <!-- X mark --> &#x274C; <!-- X mark -->
{:else if code_execution.status == 'PENDING'} {:else if execution.status == 'PENDING'}
<Spinner className="size-4" /> <Spinner className="size-4" />
{:else} {:else}
&#x2049;&#xFE0F; <!-- Interrobang --> &#x2049;&#xFE0F; <!-- Interrobang -->
{/if} {/if}
</div> </div>
<div <div
class="flex-1 mx-2 line-clamp-1 code-execution-name {code_execution.status == 'PENDING' class="flex-1 mx-2 line-clamp-1 code-execution-name {execution.status == 'PENDING'
? 'pulse' ? 'pulse'
: ''}" : ''}"
> >
{code_execution.name} {execution.name}
</div> </div>
</button> </button>
</div> </div>

3
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -528,8 +528,9 @@
{#if message.citations} {#if message.citations}
<Citations citations={message.citations} /> <Citations citations={message.citations} />
{/if} {/if}
{#if message.code_executions} {#if message.code_executions}
<CodeExecutions code_executions={message.code_executions} /> <CodeExecutions codeExecutions={message.code_executions} />
{/if} {/if}
</div> </div>
{/if} {/if}