add common cmp

Author: Jicheng Lu

src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte

@@ -2,11 +2,9 @@
     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 ChatConfig from './llm-configs/chat-config.svelte';
-	import ImageGenerationConfig from './llm-configs/image-generation-config.svelte';
-	import ImageEditConfig from './llm-configs/image-edit-config.svelte';
-	import AudioTranscriptionConfig from './llm-configs/audio-transcription-config.svelte';
-	import RealtimeConfig from './llm-configs/realtime-config.svelte';
+	import LlmBasicConfig from './llm-configs/llm-basic-config.svelte';
     
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
@@ -49,7 +47,6 @@
 
     async function init() {
         llmConfigs = await getLlmConfigs();
-        
     }
 </script>
 
@@ -62,10 +59,38 @@
 
         <div class="agent-utility-container">
             <ChatConfig bind:this={chatConfigCmp} {agent} {llmConfigs} {handleAgentChange} />
-            <ImageGenerationConfig bind:this={imageGenerationConfigCmp} {agent} {llmConfigs} {handleAgentChange} />
-            <ImageEditConfig bind:this={imageEditConfigCmp} {agent} {llmConfigs} {handleAgentChange} />
-            <AudioTranscriptionConfig bind:this={audioTranscriptionConfigCmp} {agent} {llmConfigs} {handleAgentChange} />
-            <RealtimeConfig bind:this={realtimeConfigCmp} {agent} {llmConfigs} {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}
+                llmConfigOptions={llmConfigs}
+                llmConfig={agent.llm_config?.image_edit}
+                modelCapability={LlmModelCapability.ImageEdit} 
+                {handleAgentChange}
+            />
+            <LlmBasicConfig
+                title="Audio Transcription"
+                bind:this={audioTranscriptionConfigCmp}
+                llmConfigOptions={llmConfigs}
+                llmConfig={agent.llm_config?.audio_transcription}
+                modelCapability={LlmModelCapability.AudioTranscription} 
+                {handleAgentChange}
+            />
+            <LlmBasicConfig
+                title="Realtime"
+                bind:this={realtimeConfigCmp}
+                llmConfigOptions={llmConfigs}
+                llmConfig={agent.llm_config?.realtime}
+                modelCapability={LlmModelCapability.Realtime} 
+                {handleAgentChange}
+            />
         </div>
     </CardBody>
 </Card>

src/routes/page/agent/[agentId]/agent-components/llm-configs/image-edit-config.svelte

@@ -1,12 +1,20 @@
 <script>
     import { Input } from '@sveltestrap/sveltestrap';
-	import { LlmModelCapability } from '$lib/helpers/enums';
     
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
+    /** @type {string} */
+    export let title;
+
+    /** @type {string} */
+    export let modelType = '';
+
+    /** @type {string} */
+    export let modelCapability;
+
+    /** @type {any} */
+    export let llmConfig;
 
     /** @type {import('$commonTypes').LlmConfig[]} */
-    export let llmConfigs = [];
+    export let llmConfigOptions = [];
 
     /** @type {() => void} */
     export let handleAgentChange = () => {};
@@ -23,21 +31,20 @@
         };
     }
 
-    let config = agent.llm_config?.audio_transcription || {};
-
     /** @type {import('$commonTypes').LlmConfig[]} */
-    let innerLlmConfigs = [];
+    let innerLlmConfigOptions = [];
 
     /** @type {string[]} */
     let providers = [];
 
     /** @type {import('$commonTypes').LlmModelSetting[]} */
     let models = [];
 
+    let config = llmConfig || {};
     $: {
-        if (llmConfigs.length > 0 && innerLlmConfigs.length === 0) {
-            innerLlmConfigs = llmConfigs;
-            const innerProviders = innerLlmConfigs.filter(x => x.models?.some(y => y.capabilities?.includes(LlmModelCapability.AudioTranscription)));
+        if (llmConfigOptions.length > 0 && innerLlmConfigOptions.length === 0) {
+            innerLlmConfigOptions = llmConfigOptions;
+            const innerProviders = innerLlmConfigOptions.filter(x => x.models?.some(y => (!!modelType && y.type === modelType) || y.capabilities?.includes(modelCapability)));
             providers = ['', ...innerProviders.map(x => x.provider)];
             if (!!config.provider) {
                 models = getLlmModels(config.provider);
@@ -51,8 +58,8 @@
 
     /** @param {string} provider */
     function getLlmModels(provider) {
-        return innerLlmConfigs.find(x => x.provider === provider)?.models
-                             ?.filter(x => x.capabilities?.includes(LlmModelCapability.AudioTranscription)) || [];
+        return innerLlmConfigOptions.find(x => x.provider === provider)?.models
+                                   ?.filter(x => (!!modelType && x.type === modelType) || x.capabilities?.includes(modelCapability)) || [];
     }
 
     /** @param {any} e */
@@ -81,7 +88,7 @@
 
 <div class="agent-config-container">
     <div class="text-center">
-        <h6 class="mt-1 mb-2">Audio Transcription</h6>
+        <h6 class="mt-1 mb-2">{title}</h6>
     </div>
 
     <div class="mb-3 row">