fix: enhance dropdown component with refresh button and clean up parameter render logic (#8493)

* fix: enhance dropdown component with refresh button and clean up parameter render logic

- Added a refresh button to the dropdown component, improving user interaction.
- Refactored parameter render component to remove unnecessary wrapping around the render function.
- Updated package-lock.json to remove extraneous dependencies.

* [autofix.ci] apply automated fixes

* refactor(OutputComponent): replace DropdownMenu with Popover and Command components

- Updated OutputComponent to use Popover and Command components for improved UI interaction.
- Refactored dropdown logic to enhance accessibility and user experience.
- Added a reference for the button to manage focus visibility.

* refactor: update Memory Chatbot configuration and remove unused RefreshParameterComponent

- Changed display names and output methods in Memory Chatbot JSON configuration for clarity and consistency.
- Introduced a new output method for retrieving messages as text.
- Removed the RefreshParameterComponent and its references from the parameter render component to streamline the codebase.

* refactor: update dropdown component layout for improved styling

- Changed the layout classes in the dropdown component to enhance responsiveness and visual consistency.
- Adjusted flex properties to ensure proper alignment and spacing based on the presence of filtered metadata.

* refactor: streamline dropdown component structure and enhance button functionality

- Removed redundant rendering functions for refresh and custom option dialogs, integrating them directly into the dropdown's main structure.
- Improved layout and styling for better responsiveness and visual consistency.
- Adjusted class names for better alignment and spacing, particularly in relation to filtered metadata.
- Ensured the refresh button is consistently displayed based on dialog input conditions.

* refactor: enhance dropdown component styling for better readability

- Updated text size in dropdown options for improved visibility.
- Increased padding in command items for better touch targets and visual consistency.

* refactor: adjust dropdown component styling for improved usability

- Reduced padding in the search input for a more compact design.
- Updated text size in the search input for better readability.
- Enhanced layout of filtered metadata display for clearer visibility.

* refactor: enhance dropdown component rendering and styling

- Added console log for filtered metadata to assist in debugging.
- Adjusted class names in dropdown options for better responsiveness based on filtered metadata length.

* feat: add data-testid attributes for refresh buttons and simplify memoization in ParameterRenderComponent

- Added data-testid attributes to refresh buttons in Dropdown component for improved testability.
- Removed unnecessary useMemo in ParameterRenderComponent to streamline rendering logic.
- Introduced a new test for the refresh dropdown list functionality to ensure proper behavior.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/tests/extended/features/refresh-dropdown-list.spec.ts

@@ -0,0 +1,43 @@
+import { test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+
+test(
+  "refresh dropdown list",
+  { tag: ["@release", "@components"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.ANTHROPIC_API_KEY,
+      "ANTHROPIC_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page
+      .getByRole("heading", { name: "Portfolio Website Code Generator" })
+      .click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page, {
+      skipAdjustScreenView: true,
+      skipSelectGptModel: true,
+    });
+
+    await page.waitForTimeout(3000);
+
+    await page.getByTestId("dropdown_str_model_name").first().click();
+    await page.getByTestId("refresh-dropdown-list-model_name").first().click();
+    await page.getByText("Loading Options").isVisible({ timeout: 5000 });
+  },
+);