From 100f5a57e715125789362e328b5d013f9f52e4f1 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 2 Apr 2025 23:56:15 -0700
Subject: [PATCH] refac

---
 src/lib/components/common/Collapsible.svelte | 74 +++++++++++++-------
 1 file changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index aa841a4f7..02216459a 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -197,41 +197,63 @@
 		</div>
 	{/if}
 
-	{#if !grow}
-		{#if open && !hide}
-			<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
-				{#if attributes?.type === 'tool_calls'}
-					{@const args = decode(attributes?.arguments)}
-					{@const result = decode(attributes?.result ?? '')}
-					{@const files = parseJSONString(decode(attributes?.files ?? ''))}
+	{#if attributes?.type === 'tool_calls'}
+		{@const args = decode(attributes?.arguments)}
+		{@const result = decode(attributes?.result ?? '')}
+		{@const files = parseJSONString(decode(attributes?.files ?? ''))}
 
-					{#if attributes?.done === 'true'}
-						<Markdown
-							id={`tool-calls-${attributes?.id}-result`}
-							content={`> \`\`\`json
+		{#if !grow}
+			{#if open && !hide}
+				<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
+					{#if attributes?.type === 'tool_calls'}
+						{#if attributes?.done === 'true'}
+							<Markdown
+								id={`tool-calls-${attributes?.id}-result`}
+								content={`> \`\`\`json
 > ${formatJSONString(args)}
 > ${formatJSONString(result)}
 > \`\`\``}
-						/>
+							/>
 
-						{#if typeof files === 'object'}
-							{#each files ?? [] as file, idx}
-								{#if file.startsWith('data:image/')}
-									<Image id={`tool-calls-${attributes?.id}-result-${idx}`} src={file} alt="Image" />
-								{/if}
-							{/each}
-						{/if}
-					{:else}
-						<Markdown
-							id={`tool-calls-${attributes?.id}-result`}
-							content={`> \`\`\`json
+							{#if typeof files === 'object'}
+								{#each files ?? [] as file, idx}
+									{#if file.startsWith('data:image/')}
+										<Image
+											id={`tool-calls-${attributes?.id}-result-${idx}`}
+											src={file}
+											alt="Image"
+										/>
+									{/if}
+								{/each}
+							{/if}
+						{:else}
+							<Markdown
+								id={`tool-calls-${attributes?.id}-result`}
+								content={`> \`\`\`json
 > ${formatJSONString(args)}
 > \`\`\``}
-						/>
+							/>
+						{/if}
+					{:else}
+						<slot name="content" />
 					{/if}
-				{:else}
-					<slot name="content" />
+				</div>
+			{/if}
+
+			{#if attributes?.done === 'true'}
+				{#if typeof files === 'object'}
+					{#each files ?? [] as file, idx}
+						{#if file.startsWith('data:image/')}
+							<Image id={`tool-calls-${attributes?.id}-result-${idx}`} src={file} alt="Image" />
+						{/if}
+					{/each}
 				{/if}
+			{/if}
+		{/if}
+	{:else if !grow}
+		{#if open && !hide}
+			<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
+				<slot name="content" />
 			</div>
 		{/if}
 	{/if}