refac: convention

src/lib/components/chat/Messages/CodeExecutionModal.svelte

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

src/lib/components/chat/Messages/CodeExecutions.svelte

@@ -2,76 +2,62 @@
 	import CodeExecutionModal from './CodeExecutionModal.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 
-	export let code_executions = [];
-
-	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;
-	}, []);
+	export let codeExecutions = [];
 
 	let selectedCodeExecution = null;
 	let showCodeExecutionModal = false;
 </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">
-		{#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">
 				<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"
 					on:click={() => {
-						selectedCodeExecution = code_execution;
+						selectedCodeExecution = execution;
 						showCodeExecutionModal = true;
 					}}
 				>
 					<div class="bg-white dark:bg-gray-700 rounded-full size-4">
-						{#if code_execution.status == 'OK'}
+						{#if execution.status == 'OK'}
 							&#x2705; <!-- Checkmark -->
-						{:else if code_execution.status == 'ERROR'}
+						{:else if execution.status == 'ERROR'}
 							&#x274C; <!-- X mark -->
-						{:else if code_execution.status == 'PENDING'}
+						{:else if execution.status == 'PENDING'}
 							<Spinner className="size-4" />
 						{:else}
 							&#x2049;&#xFE0F; <!-- Interrobang -->
 						{/if}
 					</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'
 							: ''}"
 					>
-						{code_execution.name}
+						{execution.name}
 					</div>
 				</button>
 			</div>

src/lib/components/chat/Messages/ResponseMessage.svelte

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