refac: tool call display

backend/open_webui/utils/middleware.py

@@ -1191,33 +1191,42 @@ async def process_chat_response(
                             tool_calls_display_content = ""
                             for tool_call in tool_calls:
 
+                                tool_call_id = tool_call.get("id", "")
+                                tool_name = tool_call.get("function", {}).get(
+                                    "name", ""
+                                )
+                                tool_arguments = tool_call.get("function", {}).get(
+                                    "arguments", ""
+                                )
+
                                 tool_result = None
                                 for result in results:
-                                    tool_call_id = result.get("tool_call_id", "")
-                                    tool_name = ""
-
-                                    if tool_call.get("id", "") == tool_call_id:
-                                        tool_name = tool_call.get("function", {}).get(
-                                            "name", ""
-                                        )
-                                        tool_result = result
+                                    if tool_call_id == result.get("tool_call_id", ""):
+                                        tool_result = result.get("content", None)
                                         break
 
                                 if tool_result:
-                                    tool_calls_display_content = f"{tool_calls_display_content}\nExecuted `{tool_name}` with the following arguments:\n```\n{tool_call.get('function', {}).get('arguments', '')}\n```\n> {tool_result.get('content', '')}"
+                                    tool_calls_display_content = f'{tool_calls_display_content}\n<details type="tool_calls" done="true" name="{tool_name}" arguments="{html.escape(json.dumps(tool_arguments))}" result="{html.escape(json.dumps(tool_result))}">\n<summary>Tool Executed</summary>\n</details>'
                                 else:
-                                    tool_calls_display_content = f"{tool_calls_display_content}\nExecuted `{tool_call.get('function', {}).get('name', '')}` with the following arguments:\n```\n{tool_call.get('function', {}).get('arguments', '')}\n```"
+                                    tool_calls_display_content = f'{tool_calls_display_content}\n<details type="tool_calls" done="false" name="{tool_name}" arguments="{html.escape(json.dumps(tool_arguments))}">\n<summary>Executing...</summary>\n</details>'
 
                             if not raw:
-                                content = f'{content}\n<details type="tool_calls" done="true" content="{html.escape(json.dumps(tool_calls))}" results="{html.escape(json.dumps(results))}">\n<summary>Tool Executed</summary>\n{tool_calls_display_content}\n</details>\n'
+                                content = f"{content}\n{tool_calls_display_content}\n"
                         else:
                             tool_calls_display_content = ""
 
                             for tool_call in tool_calls:
-                                tool_calls_display_content = f"{tool_calls_display_content}\nExecuting `{tool_call.get('function', {}).get('name', '')}` with the following arguments:\n```\n{tool_call.get('function', {}).get('arguments', '')}\n```"
+                                tool_name = tool_call.get("function", {}).get(
+                                    "name", ""
+                                )
+                                tool_arguments = tool_call.get("function", {}).get(
+                                    "arguments", ""
+                                )
+
+                                tool_calls_display_content = f'{tool_calls_display_content}\n<details type="tool_calls" done="false" name="{tool_name}" arguments="{html.escape(json.dumps(tool_arguments))}">\n<summary>Executing...</summary>\n</details>'
 
                             if not raw:
-                                content = f'{content}\n<details type="tool_calls" done="false" content="{html.escape(json.dumps(tool_calls))}">\n<summary>Tool Executing...</summary>\n{tool_calls_display_content}\n</details>\n'
+                                content = f"{content}\n{tool_calls_display_content}\n"
 
                     elif block["type"] == "reasoning":
                         reasoning_display_content = "\n".join(

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

@@ -11,7 +11,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	export let id;
+	export let id = '';
 	export let content;
 	export let model = null;
 	export let save = false;

src/lib/components/common/Collapsible.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { decode } from 'html-entities';
+
 	import { getContext, createEventDispatcher } from 'svelte';
 	const i18n = getContext('i18n');
 
@@ -32,12 +34,16 @@
 	import ChevronUp from '../icons/ChevronUp.svelte';
 	import ChevronDown from '../icons/ChevronDown.svelte';
 	import Spinner from './Spinner.svelte';
+	import CodeBlock from '../chat/Messages/CodeBlock.svelte';
+	import Markdown from '../chat/Messages/Markdown.svelte';
 
 	export let open = false;
-	export let id = '';
+
 	export let className = '';
 	export let buttonClassName =
 		'w-fit text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition';
+
+	export let id = '';
 	export let title = null;
 	export let attributes = null;
 
@@ -93,6 +99,20 @@
 						{:else}
 							{$i18n.t('Analyzing...')}
 						{/if}
+					{:else if attributes?.type === 'tool_calls'}
+						{#if attributes?.done === 'true'}
+							<Markdown
+								content={$i18n.t('View Result from `{{NAME}}`', {
+									NAME: attributes.name
+								})}
+							/>
+						{:else}
+							<Markdown
+								content={$i18n.t('Executing `{{NAME}}`...', {
+									NAME: attributes.name
+								})}
+							/>
+						{/if}
 					{:else}
 						{title}
 					{/if}
@@ -140,7 +160,24 @@
 	{#if !grow}
 		{#if open && !hide}
 			<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
-				<slot name="content" />
+				{#if attributes?.type === 'tool_calls'}
+					{#if attributes?.done === 'true'}
+						<Markdown
+							content={`> \`\`\`json
+> ${JSON.parse(decode(attributes?.arguments))}
+> ${JSON.parse(decode(attributes?.result))}
+> \`\`\``}
+						/>
+					{:else}
+						<Markdown
+							content={`> \`\`\`json
+> ${JSON.parse(decode(attributes?.arguments))}
+> \`\`\``}
+						/>
+					{/if}
+				{:else}
+					<slot name="content" />
+				{/if}
 			</div>
 		{/if}
 	{/if}