feat: Move Vector Stores to Bundle (#9475)

* feat: Move Vector Stores to Bundle

* [autofix.ci] apply automated fixes

* Update src/frontend/src/icons/vectorstores/index.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update tests for new sidebar layout

---------

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

src/frontend/src/icons/lazyIconImports.ts

@@ -315,6 +315,10 @@ export const lazyIconsMapping = {
     import("@/icons/Upstash").then((mod) => ({ default: mod.UpstashSvgIcon })),
   Vectara: () =>
     import("@/icons/VectaraIcon").then((mod) => ({ default: mod.VectaraIcon })),
+  VectorStores: () =>
+    import("@/icons/vectorstores").then((mod) => ({
+      default: mod.VectorStoresIcon,
+    })),
   VertexAI: () =>
     import("@/icons/VertexAI").then((mod) => ({ default: mod.VertexAIIcon })),
   WatsonxAI: () =>

src/frontend/src/icons/vectorstores/VectorStores.jsx

@@ -0,0 +1,29 @@
+const SvgVectorStores = (props) => (
+  <svg
+    fill={props.isDark ? "#ffffff" : "#0A0A0A"}
+    fillRule="evenodd"
+    style={{ flex: "none", lineHeight: 1 }}
+    viewBox="0 0 32 32"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="m26,24c-1.1046,0-2,.8954-2,2,0,.0764.0142.1488.0225.2229-2.2808,1.7963-5.0792,2.7771-8.0225,2.7771-4.2617,0-8-3.9722-8-8.5,0-4.687,3.813-8.5,8.5-8.5h.5v-2h-.5c-5.7896,0-10.5,4.7104-10.5,10.5,0,1.8839.5304,3.6896,1.4371,5.2565-2.7133-2.3843-4.4371-5.869-4.4371-9.7565,0-2.1152.4917-4.1328,1.4619-5.9956l-1.7744-.9238c-1.104,2.1211-1.6875,4.5137-1.6875,6.9194,0,8.271,6.729,15,15,15,3.3744,0,6.5818-1.1193,9.2048-3.1662.244.106.5123.1662.7952.1662,1.1046,0,2-.8954,2-2s-.8954-2-2-2Z" />
+    <rect
+      x="11"
+      y="20"
+      width="2"
+      height="2"
+      transform="translate(33 9) rotate(90)"
+    />
+    <rect
+      x="19"
+      y="10"
+      width="2"
+      height="2"
+      transform="translate(31 -9) rotate(90)"
+    />
+    <path d="m16,1c-3.3744,0-6.5818,1.1193-9.2048,3.1662-.244-.106-.5123-.1662-.7952-.1662-1.1046,0-2,.8954-2,2s.8954,2,2,2,2-.8954,2-2c0-.0764-.0142-.1488-.0225-.2229,2.2808-1.7963,5.0792-2.7771,8.0225-2.7771,4.2617,0,8,3.9722,8,8.5,0,4.687-3.813,8.5-8.5,8.5h-.5v2h.5c5.7896,0,10.5-4.7104,10.5-10.5,0-1.8853-.5322-3.6917-1.4401-5.2593,2.715,2.3843,4.4401,5.8704,4.4401,9.7593,0,2.1152-.4917,4.1328-1.4619,5.9956l1.7744.9238c1.104-2.1211,1.6875-4.5137,1.6875-6.9194C31,7.729,24.271,1,16,1Z" />
+  </svg>
+);
+export default SvgVectorStores;

src/frontend/src/icons/vectorstores/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgVectorStores from "./VectorStores";
+
+export const VectorStoresIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <SvgVectorStores ref={ref} {...props} />;
+});

src/frontend/src/icons/vectorstores/vectorstores.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <path d="m26,24c-1.1046,0-2,.8954-2,2,0,.0764.0142.1488.0225.2229-2.2808,1.7963-5.0792,2.7771-8.0225,2.7771-4.2617,0-8-3.9722-8-8.5,0-4.687,3.813-8.5,8.5-8.5h.5v-2h-.5c-5.7896,0-10.5,4.7104-10.5,10.5,0,1.8839.5304,3.6896,1.4371,5.2565-2.7133-2.3843-4.4371-5.869-4.4371-9.7565,0-2.1152.4917-4.1328,1.4619-5.9956l-1.7744-.9238c-1.104,2.1211-1.6875,4.5137-1.6875,6.9194,0,8.271,6.729,15,15,15,3.3744,0,6.5818-1.1193,9.2048-3.1662.244.106.5123.1662.7952.1662,1.1046,0,2-.8954,2-2s-.8954-2-2-2Z"/>
+  <rect x="11" y="20" width="2" height="2" transform="translate(33 9) rotate(90)"/>
+  <rect x="19" y="10" width="2" height="2" transform="translate(31 -9) rotate(90)"/>
+  <path d="m16,1c-3.3744,0-6.5818,1.1193-9.2048,3.1662-.244-.106-.5123-.1662-.7952-.1662-1.1046,0-2,.8954-2,2s.8954,2,2,2,2-.8954,2-2c0-.0764-.0142-.1488-.0225-.2229,2.2808-1.7963,5.0792-2.7771,8.0225-2.7771,4.2617,0,8,3.9722,8,8.5,0,4.687-3.813,8.5-8.5,8.5h-.5v2h.5c5.7896,0,10.5-4.7104,10.5-10.5,0-1.8853-.5322-3.6917-1.4401-5.2593,2.715,2.3843,4.4401,5.8704,4.4401,9.7593,0,2.1152-.4917,4.1328-1.4619,5.9956l1.7744.9238c1.104-2.1211,1.6875-4.5137,1.6875-6.9194C31,7.729,24.271,1,16,1Z"/>
+  <rect id="_Transparent_Rectangle_" data-name="&amp;lt;Transparent Rectangle&amp;gt;" class="cls-1" width="32" height="32"/>
+</svg>

src/frontend/src/utils/styleUtils.ts

@@ -300,6 +300,7 @@ export const SIDEBAR_BUNDLES = [
   { display_name: "TwelveLabs", name: "twelvelabs", icon: "TwelveLabs" },
   { display_name: "Unstructured", name: "unstructured", icon: "Unstructured" },
   { display_name: "Vectara", name: "vectara", icon: "Vectara" },
+  { display_name: "Vector Stores", name: "vectorstores", icon: "Layers" },
   { display_name: "Vertex AI", name: "vertexai", icon: "VertexAI" },
   { display_name: "Wikipedia", name: "wikipedia", icon: "Wikipedia" },
   {

src/frontend/tests/core/features/filterSidebar.spec.ts

@@ -117,7 +117,6 @@ test(
 
     await expect(page.getByTestId("disclosure-data")).toBeVisible();
     await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
-    await expect(page.getByTestId("disclosure-vector stores")).toBeVisible();
     await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
     await expect(page.getByTestId("disclosure-tools")).toBeVisible();
 

src/frontend/tests/extended/features/filterEdge-shard-1.spec.ts

@@ -59,13 +59,13 @@ test(
       "disclosure-data",
       "disclosure-models",
       "disclosure-helpers",
-      "disclosure-vector stores",
       "disclosure-agents",
       "disclosure-logic",
       "disclosure-tools",
       "disclosure-bundles-langchain",
       "disclosure-bundles-assemblyai",
       "disclosure-bundles-datastax",
+      "disclosure-bundles-vector stores",
     ];
 
     const elementTestIds = [