From 3de84be5707f3e836183ea650d75438ea877bce3 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 29 Oct 2025 14:40:52 -0500
Subject: [PATCH] image composition

---
 src/lib/helpers/enums.js                      |  1 +
 src/lib/helpers/types/agentTypes.js           |  3 +-
 .../agent-components/agent-llm-config.svelte  | 29 ++++++-------------
 3 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
index 7f70fcc4..11ed7675 100644
--- a/src/lib/helpers/enums.js
+++ b/src/lib/helpers/enums.js
@@ -228,6 +228,7 @@ const llmModelCapability = {
     ImageGeneration: "ImageGeneration",
     ImageEdit: "ImageEdit",
     ImageVariation: "ImageVariation",
+    ImageComposition: "ImageComposition",
     Embedding: "Embedding",
     AudioTranscription: "AudioTranscription",
     AudioGeneration: "AudioGeneration",
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 28e4a1b3..d3fb5a06 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -18,8 +18,7 @@
  * @property {number} max_recursion_depth
  * @property {number?} [max_output_tokens]
  * @property {string?} [reasoning_effort_level]
- * @property {any} [image_generation]
- * @property {any} [image_edit]
+ * @property {any} [image_composition]
  * @property {any} [audio_transcription]
  * @property {any} [realtime]
  */
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
index 3ba4a5d6..4e1cc315 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
@@ -2,7 +2,7 @@
     import { onMount } from 'svelte';
     import { Card, CardBody } from '@sveltestrap/sveltestrap';
     import { getLlmConfigs } from '$lib/services/llm-provider-service';
-    import { LlmModelCapability } from '$lib/helpers/enums';
+    import { LlmModelCapability, LlmModelType } from '$lib/helpers/enums';
 	import ChatConfig from './llm-configs/chat-config.svelte';
 	import LlmBasicConfig from './llm-configs/llm-basic-config.svelte';
     
@@ -14,14 +14,12 @@
 
     export const fetchLlmConfig = () => {
         const chatConfig = chatConfigCmp?.fetchConfig();
-        const imageGenerationConfig = imageGenerationConfigCmp?.fetchConfig();
-        const imageEditConfig = imageEditConfigCmp?.fetchConfig();
+        const imageCompositionConfig = imageCompositionConfigCmp?.fetchConfig();
         const audioTranscriptionConfig = audioTranscriptionConfigCmp?.fetchConfig();
         const realtimeConfig = realtimeConfigCmp?.fetchConfig();
         return {
             ...chatConfig,
-            image_generation: imageGenerationConfig ? {...imageGenerationConfig} : null,
-            image_edit: imageEditConfig ? {...imageEditConfig} : null,
+            image_composition: imageCompositionConfig ? {...imageCompositionConfig} : null,
             audio_transcription: audioTranscriptionConfig ? {...audioTranscriptionConfig} : null,
             realtime: realtimeConfig ? {...realtimeConfig} : null
         };
@@ -30,9 +28,7 @@
     /** @type {any} */
     let chatConfigCmp;
     /** @type {any} */
-    let imageGenerationConfigCmp;
-    /** @type {any} */
-    let imageEditConfigCmp;
+    let imageCompositionConfigCmp;
     /** @type {any} */
     let audioTranscriptionConfigCmp;
     /** @type {any} */
@@ -65,19 +61,12 @@
                 {handleAgentChange}
             />
             <LlmBasicConfig
-                title="Image Generation"
-                bind:this={imageGenerationConfigCmp}
-                llmConfigOptions={llmConfigs}
-                llmConfig={agent.llm_config?.image_generation}
-                modelCapability={LlmModelCapability.ImageGeneration} 
-                {handleAgentChange}
-            />
-            <LlmBasicConfig
-                title="Image Edit"
-                bind:this={imageEditConfigCmp}
+                title="Image Composition"
+                bind:this={imageCompositionConfigCmp}
                 llmConfigOptions={llmConfigs}
-                llmConfig={agent.llm_config?.image_edit}
-                modelCapability={LlmModelCapability.ImageEdit} 
+                llmConfig={agent.llm_config?.image_composition}
+                modelType={LlmModelType.Image}
+                modelCapability={LlmModelCapability.ImageComposition} 
                 {handleAgentChange}
             />
             <LlmBasicConfig