diff --git a/frontend/src/components/features/launch/plugin-launch-modal.tsx b/frontend/src/components/features/launch/plugin-launch-modal.tsx
index 76390572d3..80b1c889cc 100644
--- a/frontend/src/components/features/launch/plugin-launch-modal.tsx
+++ b/frontend/src/components/features/launch/plugin-launch-modal.tsx
@@ -1,12 +1,13 @@
import React from "react";
import { useTranslation } from "react-i18next";
-import { IoClose, IoChevronDown, IoChevronForward } from "react-icons/io5";
+import { IoClose } from "react-icons/io5";
import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
import { BrandButton } from "#/components/features/settings/brand-button";
import { I18nKey } from "#/i18n/declaration";
import { PluginSpec } from "#/api/conversation-service/v1-conversation-service.types";
import { Typography } from "#/ui/typography";
import { cn } from "#/utils/utils";
+import { PluginLaunchPluginSection } from "./plugin-launch-plugin-section";
interface PluginLaunchModalProps {
plugins: PluginSpec[];
@@ -116,132 +117,6 @@ export function PluginLaunchModal({
onStartConversation(pluginConfigs, message);
};
- const renderParameterInput = (
- pluginIndex: number,
- paramKey: string,
- paramValue: unknown,
- ) => {
- const inputId = `plugin-${pluginIndex}-param-${paramKey}`;
- const inputClasses =
- "rounded-md border border-tertiary bg-base-secondary px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary";
-
- if (typeof paramValue === "boolean") {
- return (
-
-
- updateParameter(pluginIndex, paramKey, e.target.checked)
- }
- className="h-4 w-4 rounded border-tertiary bg-base-secondary accent-primary"
- />
-
-
- );
- }
-
- if (typeof paramValue === "number") {
- return (
-
-
-
- updateParameter(
- pluginIndex,
- paramKey,
- parseFloat(e.target.value) || 0,
- )
- }
- className={inputClasses}
- />
-
- );
- }
-
- // Default: string input
- return (
-
-
-
- updateParameter(pluginIndex, paramKey, e.target.value)
- }
- className={inputClasses}
- />
-
- );
- };
-
- const renderPluginSection = (plugin: PluginSpec, originalIndex: number) => {
- const isExpanded = expandedSections[originalIndex];
- const hasParams =
- plugin.parameters && Object.keys(plugin.parameters).length > 0;
-
- if (!hasParams) {
- return null;
- }
-
- return (
-
-
-
- {isExpanded && (
-
- {plugin.ref && (
-
- {t(I18nKey.LAUNCH$PLUGIN_REF)} {plugin.ref}
-
- )}
- {plugin.repo_path && (
-
- {t(I18nKey.LAUNCH$PLUGIN_PATH)} {plugin.repo_path}
-
- )}
-
- {Object.entries(plugin.parameters || {}).map(([key, value]) =>
- renderParameterInput(originalIndex, key, value),
- )}
-
-
- )}
-
- );
- };
-
const modalTitle =
pluginConfigs.length === 1
? getPluginDisplayName(pluginConfigs[0])
@@ -260,7 +135,7 @@ export function PluginLaunchModal({