refine llm configs

[iceljc]

PR Type

Enhancement

---

Description

• Refactored LLM configuration into modular components for different capabilities

• Split monolithic chat config into separate Chat, Image Generation, Image Edit, Audio Transcription, and Realtime components

• Updated API to use capability-based filtering instead of simple type filtering

• Enhanced LLM model type and capability enums with new model types and capabilities

---

Diagram Walkthrough

flowchart LR
  A["agent-llm-config.svelte"] -->|imports| B["ChatConfig"]
  A -->|imports| C["ImageGenerationConfig"]
  A -->|imports| D["ImageEditConfig"]
  A -->|imports| E["AudioTranscriptionConfig"]
  A -->|imports| F["RealtimeConfig"]
  B -->|uses| G["getLlmConfigs"]
  C -->|uses| G
  D -->|uses| G
  E -->|uses| G
  F -->|uses| G
  G -->|filters by| H["LlmModelCapability"]
  H -->|includes| I["Chat, ImageGeneration, ImageEdit, AudioTranscription, Realtime"]

Loading

File Walkthrough

Relevant files

Enhancement

13 files agent-llm-config.svelte Refactored to use modular config components                            +37/-172 chat-config.svelte New Chat configuration component with provider and model selection +217/-0  image-generation-config.svelte New Image Generation configuration component                          +119/-0  image-edit-config.svelte New Image Edit configuration component                                      +119/-0  audio-transcription-config.svelte New Audio Transcription configuration component                    +119/-0  realtime-config.svelte New Realtime configuration component                                          +119/-0  agent-tabs.svelte Updated tab display text from Config to Configs                    +1/-1      +page.svelte Updated getLlmConfigs call to use new filter parameter      +1/-1      _agent.scss Added styling for agent config containers                                +7/-0      enums.js Extended LLM model types and added capability enums            +25/-5    agentTypes.js Added image, audio, and realtime config properties              +4/-0      commonTypes.js Replaced LlmConfigOption with LlmConfigFilter and enhanced model settings +8/-3      llm-provider-service.js Updated getLlmConfigs to use new filter-based API                +6/-9

---

[qodo-merge-pro]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided - [ ] Create ticket/issue <!-- /create_ticket --create_ticket=true --> </details></td></tr>
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-merge-pro]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Consolidate duplicated config components into one Refactor the five new, nearly identical Svelte components for LLM configurations into a single, reusable component. This generic component should accept props for customization (like capability and title) and use slots for unique fields, such as those in the ChatConfig. Examples: src/routes/page/agent/[agentId]/agent-components/llm-configs/image-generation-config.svelte [1-119] <script> import { Input } from '@sveltestrap/sveltestrap'; import { LlmModelCapability } from '$lib/helpers/enums'; /** @type {import('$agentTypes').AgentModel} */ export let agent; /** @type {import('$commonTypes').LlmConfig[]} */ export let llmConfigs = []; ... (clipped 109 lines) src/routes/page/agent/[agentId]/agent-components/llm-configs/image-edit-config.svelte [1-119] <script> import { Input } from '@sveltestrap/sveltestrap'; import { LlmModelCapability } from '$lib/helpers/enums'; /** @type {import('$agentTypes').AgentModel} */ export let agent; /** @type {import('$commonTypes').LlmConfig[]} */ export let llmConfigs = []; ... (clipped 109 lines) Solution Walkthrough: Before: // agent-llm-config.svelte <ChatConfig ... /> <ImageGenerationConfig ... /> <ImageEditConfig ... /> <AudioTranscriptionConfig ... /> <RealtimeConfig ... /> // image-generation-config.svelte (and 3 others are very similar) <script> // ... props: agent, llmConfigs, handleAgentChange let config = agent.llm_config?.image_generation || {}; // ... logic to filter providers and models based on LlmModelCapability.ImageGeneration // ... changeProvider, changeModel handlers </script> <h6>Image Generation</h6> <Input type="select" ...> <!-- Provider --> <Input type="select" ...> <!-- Model --> // chat-config.svelte <script> // ... similar logic to above, but with extra fields </script> <h6>Chat</h6> <Input ...> <!-- Provider --> <Input ...> <!-- Model --> <Input ...> <!-- Max recursive depth --> <Input ...> <!-- Max output tokens --> After: // agent-llm-config.svelte <GenericConfig title="Chat" capability={LlmModelCapability.Chat} config={agent.llm_config} ...> <!-- Extra fields for chat using a slot --> <Input ...> <!-- Max recursive depth --> <Input ...> <!-- Max output tokens --> {#if isReasoningModel} <Input ...> <!-- Reasoning effort --> {/if} </GenericConfig> <GenericConfig title="Image Generation" capability={LlmModelCapability.ImageGeneration} config={agent.llm_config?.image_generation} ... /> <GenericConfig title="Image Edit" capability={LlmModelCapability.ImageEdit} config={agent.llm_config?.image_edit} ... /> <GenericConfig title="Audio Transcription" capability={LlmModelCapability.AudioTranscription} config={agent.llm_config?.audio_transcription} ... /> <GenericConfig title="Realtime" capability={LlmModelCapability.Realtime} config={agent.llm_config?.realtime} ... /> // GenericConfig.svelte <script> export let title; export let capability; export let config; // ... generic logic to filter providers/models based on `capability` prop </script> <h6>{title}</h6> <Input ...> <!-- Provider --> <Input ...> <!-- Model --> <slot></slot> <!-- For extra fields --> Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies significant code duplication across the five new configuration components, proposing a much more maintainable and scalable solution using a single generic component with props and slots.	High
Possible issue	Prevent TypeError from spreading null Prevent a potential TypeError by ensuring chatConfig is an object before spreading it. Change ...chatConfig to ...(chatConfig || {}). src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte [17-30] export const fetchLlmConfig = () => { const chatConfig = chatConfigCmp?.fetchConfig(); const imageGenerationConfig = imageGenerationConfigCmp?.fetchConfig(); const imageEditConfig = imageEditConfigCmp?.fetchConfig(); const audioTranscriptionConfig = audioTranscriptionConfigCmp?.fetchConfig(); const realtimeConfig = realtimeConfigCmp?.fetchConfig(); return { - ...chatConfig, + ...(chatConfig || {}), image_generation: imageGenerationConfig ? {...imageGenerationConfig} : null, image_edit: imageEditConfig ? {...imageEditConfig} : null, audio_transcription: audioTranscriptionConfig ? {...audioTranscriptionConfig} : null, realtime: realtimeConfig ? {...realtimeConfig} : null }; } Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a potential TypeError from spreading a null value, which can occur if chatConfigCmp.fetchConfig() returns null. This is a valid bug fix.	Medium
	✅ Remove incorrect property reset Suggestion Impact: The commit removed the line setting config.reasoning_effort_level = null within changeProvider, aligning with the suggestion. code diff: if (!!!provider) { models = []; config.model = null; - config.reasoning_effort_level = null; handleAgentChange(); return; } In changeProvider, remove the line config.reasoning_effort_level = null; as this property is not part of the audio transcription configuration. src/routes/page/agent/[agentId]/agent-components/llm-configs/audio-transcription-config.svelte [59-75] async function changeProvider(e) { const provider = e.target.value; config.provider = provider || null; if (!!!provider) { models = []; config.model = null; - config.reasoning_effort_level = null; handleAgentChange(); return; } config.is_inherit = false; models = getLlmModels(provider); config.model = models[0]?.name; handleAgentChange(); } [Suggestion processed] Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies that config.reasoning_effort_level is an extraneous property for the audio transcription config, likely a copy-paste error. Removing it improves code correctness and removes dead code.	Low
Update