refac

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

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import Collapsible from '$lib/components/common/Collapsible.svelte';
 	import ToolCallDisplay from '$lib/components/common/ToolCallDisplay.svelte';
+	import { resolveChatMessageToolCall } from '$lib/apis/chats';
 	import { settings } from '$lib/stores';
+	import { toast } from 'svelte-sonner';
 
 	import Markdown from './Markdown.svelte';
 	import ConsecutiveDetailsGroup from './Markdown/ConsecutiveDetailsGroup.svelte';
@@ -13,6 +15,8 @@
 	} from './structuredOutput';
 
 	export let id = '';
+	export let chatId = '';
+	export let messageId = '';
 	export let output: OutputItem[] = [];
 	export let done = true;
 	export let model = null;
@@ -32,8 +36,30 @@
 
 	const getDetailTitle = (detailToken: OutputDetailToken): any => detailToken.summary;
 	const getDetailAttributes = (detailToken: OutputDetailToken): any => detailToken.attributes;
+	let resolvingCallId = '';
 
-	$: detailButtonClassName = `w-fit py-0.5 ${
+	const resolveToolCall = async (callId: string, approved: boolean) => {
+		if (!chatId || !messageId || !callId || resolvingCallId) {
+			return;
+		}
+
+		resolvingCallId = callId;
+		try {
+			await resolveChatMessageToolCall(
+				localStorage.token,
+				chatId,
+				messageId,
+				callId,
+				approved ? 'approve' : 'reject'
+			);
+		} catch (err) {
+			toast.error(String(err));
+		} finally {
+			resolvingCallId = '';
+		}
+	};
+
+	$: detailButtonClassName = `py-0.5 ${
 		compactPreview ? 'text-xs' : 'text-[0.9375rem]'
 	} text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition`;
 
@@ -46,6 +72,8 @@
 			<div class="markdown-prose">
 				<Markdown
 					id={`${id}-${displayItem.id}`}
+					{chatId}
+					{messageId}
 					content={formatMessageContent(displayItem.text)}
 					{model}
 					{save}
@@ -71,6 +99,9 @@
 			tokens={displayItem.tokens}
 			messageDone={done}
 			{compactPreview}
+			resolvable={!!chatId && !!messageId && save}
+			{resolvingCallId}
+			onResolve={resolveToolCall}
 		>
 			<div slot="content">
 				{#each displayItem.tokens as detailToken, detailIndex}
@@ -80,6 +111,9 @@
 							attributes={detailToken.attributes}
 							resultContent={detailToken.text}
 							grouped={true}
+							resolvable={!!chatId && !!messageId && save}
+							resolving={resolvingCallId === detailToken.attributes?.id}
+							onResolve={(approved) => resolveToolCall(detailToken.attributes?.id ?? '', approved)}
 							open={$settings?.expandDetails ?? false}
 							className="w-full"
 							buttonClassName={detailButtonClassName}
@@ -97,8 +131,11 @@
 								<div class="markdown-prose">
 									<Markdown
 										id={`${id}-${displayItem.id}-${detailIndex}-detail`}
+										{chatId}
+										{messageId}
 										content={detailToken.text}
 										{done}
+										{save}
 										{preview}
 										{compactPreview}
 										{editCodeBlock}
@@ -127,6 +164,9 @@
 				id={`${id}-${displayItem.id}-tool-call`}
 				attributes={detailToken.attributes}
 				resultContent={detailToken.text}
+				resolvable={!!chatId && !!messageId && save}
+				resolving={resolvingCallId === detailToken.attributes?.id}
+				onResolve={(approved) => resolveToolCall(detailToken.attributes?.id ?? '', approved)}
 				open={$settings?.expandDetails ?? false}
 				className="w-full space-y-2"
 				buttonClassName={detailButtonClassName}
@@ -144,8 +184,11 @@
 					<div class="markdown-prose">
 						<Markdown
 							id={`${id}-${displayItem.id}-detail`}
+							{chatId}
+							{messageId}
 							content={detailToken.text}
 							{done}
+							{save}
 							{preview}
 							{compactPreview}
 							{editCodeBlock}