feat: add integrations category in the sidebar (#3843)

* feat: Add skipFallback parameter to ForwardedIconComponent

This commit adds a new skipFallback parameter to the ForwardedIconComponent in the genericIconComponent module. The skipFallback parameter allows developers to skip rendering the fallback component when using Suspense. This can be useful in cases where the fallback component is not needed or should be handled differently.

* feat: Add skipFallback parameter to IconComponentProps

* feat: Add skipFallback parameter to IconComponentProps and ForwardedIconComponent

This commit adds the skipFallback parameter to the IconComponentProps and ForwardedIconComponent. This parameter allows skipping the fallback icon rendering when the specified icon is not found. The skipFallback parameter is used in the ParentDisclosureComponent to conditionally render the chevron-down or chevron-right icon based on the component's state.

The commit also updates the defaultOpen value in the ParentDisclosureComponent in the ExtraSidebarComponent. The defaultOpen value is set to true, ensuring that the "Integrations" section is always expanded when the component is rendered.

* refactor: Update ExtraSidebarComponent layout and styling

* [autofix.ci] apply automated fixes

* move file

* move file

* move file

* move file

* move file

* Update NotionLogo size

* Update size of AssemblyAI logo

* Update colors and names for AssemblyAI in styleUtils.ts

* Update BUNDLES_SIDEBAR_FOLDER_NAMES in constants.ts

* [autofix.ci] apply automated fixes

* add changes from pr #3934

* chore: add cache.db to .gitignore

---------

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

.gitignore

@@ -275,3 +275,4 @@ src/frontend/temp
 .history
 
 .dspy_cache/
+cache.db

docs/docs/Integrations/integrations-assemblyai.md

@@ -45,7 +45,7 @@ This component allows you to submit an audio or video file for transcription.
     - Audio File: The audio or video file to transcribe.
     - Speech Model (Optional): Select the class of models. Default is *Best*. See [speech models](https://www.assemblyai.com/docs/speech-to-text/speech-recognition#select-the-speech-model-with-best-and-nano) for more info.
     - Automatic Language Detection (Optional): Enable automatic language detection.
-    - Language (Optional): The language of the audio file. Can be set manually if automatic language detection is disabled. 
+    - Language (Optional): The language of the audio file. Can be set manually if automatic language detection is disabled.
             See [supported languages](https://www.assemblyai.com/docs/getting-started/supported-languages) for a list of supported language codes.
     - Enable Speaker Labels (Optional): Detect speakers in an audio file and what each speaker said.
     - Expected Number of Speakers (Optional): Set the expected number of speakers, if Speaker Labels is enabled.
@@ -163,4 +163,3 @@ If you encounter issues:
 4. Review the Langflow logs for any error messages.
 
 For more advanced usage, refer to the [AssemblyAI API documentation](https://www.assemblyai.com/docs/). If you need more help, you can reach out to the [AssemblyAI support](https://www.assemblyai.com/contact/support).
-

src/backend/base/pyproject.toml

@@ -125,7 +125,6 @@ pytest-flakefinder = "^1.1.0"
 types-markdown = "^3.7.0.20240822"
 assemblyai = "^0.33.0"
 
-
 [tool.pytest.ini_options]
 minversion = "6.0"
 #addopts = "-ra"

src/frontend/src/components/genericIconComponent/index.tsx

@@ -17,6 +17,7 @@ export const ForwardedIconComponent = memo(
         stroke,
         strokeWidth,
         id = "",
+        skipFallback = false,
       }: IconComponentProps,
       ref,
     ) => {
@@ -56,7 +57,7 @@ export const ForwardedIconComponent = memo(
       );
 
       return (
-        <Suspense fallback={fallback}>
+        <Suspense fallback={skipFallback ? undefined : fallback}>
           <TargetIcon
             className={className}
             style={style}

src/frontend/src/constants/constants.ts

@@ -729,7 +729,12 @@ export const PRIORITY_SIDEBAR_ORDER = [
   "embeddings",
 ];
 
-export const BUNDLES_SIDEBAR_FOLDER_NAMES = ["notion", "Notion"];
+export const BUNDLES_SIDEBAR_FOLDER_NAMES = [
+  "notion",
+  "Notion",
+  "AssemblyAI",
+  "assemblyai",
+];
 
 export const AUTHORIZED_DUPLICATE_REQUESTS = [
   "/health",

src/frontend/src/icons/AssemblyAI/AssemblyAI.jsx

@@ -1,7 +1,7 @@
 const AssemblyAISVG = (props) => (
   <svg
-    width="501"
-    height="434"
+    width="1.1em"
+    height="1.1em"
     viewBox="0 0 501 434"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/frontend/src/icons/Notion/NotionLogo.jsx

@@ -1,8 +1,8 @@
 const SvgNotionLogo = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
+    width="1.1em"
+    height="1.1em"
     fill="none"
     viewBox="0 0 100 100"
     {...props}

src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx

@@ -33,7 +33,8 @@ export default function ParentDisclosureComponent({
                 ))}
                 <div>
                   <IconComponent
-                    name="ChevronsUpDownIcon"
+                    skipFallback
+                    name={open ? "chevron-down" : "chevron-right"}
                     className={`${
                       open || defaultOpen ? "" : ""
                     } h-4 w-4 text-foreground`}

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -245,6 +245,35 @@ export default function ExtraSidebar(): JSX.Element {
               <div key={index}></div>
             ),
           )}
+        <>
+          <ParentDisclosureComponent
+            defaultOpen={true}
+            key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Bundle`}
+            button={{
+              title: "Integrations",
+              Icon: nodeIconsLucide.unknown,
+            }}
+            testId="bundle-extended-disclosure"
+          >
+            {Object.keys(dataFilter)
+              .sort(sortKeys)
+              .filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x))
+              .map((SBSectionName: keyof APIObjectType, index) =>
+                Object.keys(dataFilter[SBSectionName]).length > 0 ? (
+                  <SidebarCategoryComponent
+                    key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
+                    search={search}
+                    getFilterEdge={getFilterEdge}
+                    category={dataFilter[SBSectionName]}
+                    name={SBSectionName}
+                    onDragStart={onDragStart}
+                  />
+                ) : (
+                  <div key={index}></div>
+                ),
+              )}
+          </ParentDisclosureComponent>
+        </>
         <ParentDisclosureComponent
           defaultOpen={search.length !== 0 || getFilterEdge.length !== 0}
           key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Advanced`}
@@ -306,39 +335,6 @@ export default function ExtraSidebar(): JSX.Element {
             </a>
           )}
         </ParentDisclosureComponent>
-        {ENABLE_MVPS && (
-          <>
-            <Separator />
-
-            <ParentDisclosureComponent
-              defaultOpen={search.length !== 0 || getFilterEdge.length !== 0}
-              key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Bundle`}
-              button={{
-                title: "Bundles",
-                Icon: nodeIconsLucide.unknown,
-              }}
-              testId="bundle-extended-disclosure"
-            >
-              {Object.keys(dataFilter)
-                .sort(sortKeys)
-                .filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x))
-                .map((SBSectionName: keyof APIObjectType, index) =>
-                  Object.keys(dataFilter[SBSectionName]).length > 0 ? (
-                    <SidebarCategoryComponent
-                      key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
-                      search={search}
-                      getFilterEdge={getFilterEdge}
-                      category={dataFilter[SBSectionName]}
-                      name={SBSectionName}
-                      onDragStart={onDragStart}
-                    />
-                  ) : (
-                    <div key={index}></div>
-                  ),
-                )}
-            </ParentDisclosureComponent>
-          </>
-        )}
       </div>
     </div>
   );

src/frontend/src/style/applies.css

@@ -231,7 +231,7 @@
     @apply fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1;
   }
   .parent-disclosure-arrangement {
-    @apply flex w-full select-none items-center justify-between bg-background px-5 py-3;
+    @apply flex w-full select-none items-center justify-between bg-background pl-5 pr-3 py-3;
   }
   .components-disclosure-arrangement {
     @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2;

src/frontend/src/types/components/index.ts

@@ -369,6 +369,7 @@ export type IconComponentProps = {
   stroke?: string;
   strokeWidth?: number;
   id?: string;
+  skipFallback?: boolean;
 };
 
 export type InputProps = {

src/frontend/src/utils/styleUtils.ts

@@ -297,6 +297,8 @@ export const nodeColors: { [char: string]: string } = {
   wrappers: "#E6277A",
   notion: "#000000",
   Notion: "#000000",
+  AssemblyAI: "#213ED7",
+  assemblyai: "#213ED7",
   helpers: "#31A3CC",
   prototypes: "#E6277A",
   astra_assistants: "#272541",
@@ -325,6 +327,8 @@ export const nodeNames: { [char: string]: string } = {
   models: "Models",
   notion: "Notion",
   Notion: "Notion",
+  AssemblyAI: "AssemblyAI",
+  assemblyai: "AssemblyAI",
   model_specs: "Model Specs",
   chains: "Chains",
   agents: "Agents",
@@ -391,6 +395,7 @@ export const nodeIconsLucide: iconsType = {
   Amazon: AWSIcon,
   Anthropic: AnthropicIcon,
   ChatAnthropic: AnthropicIcon,
+  assemblyai: AssemblyAIIcon,
   AssemblyAI: AssemblyAIIcon,
   AstraDB: AstraDBIcon,
   BingSearchAPIWrapper: BingIcon,