added custom icon pack for special cases (#405)

2023-05-30 01:16:24 -03:00 · 2023-05-30 01:16:24 -03:00 · 263274d266
commit 263274d266
parent 09cb59d9d6 1981321b1a
54 changed files with 1646 additions and 17 deletions
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@ -19,6 +19,7 @@ import { typesContext } from "./typesContext";
 import { APITemplateType, TemplateVariableType } from "../types/api";
 import { v4 as uuidv4 } from "uuid";
 import { addEdge } from "reactflow";
+import _ from "lodash";

 const TabsContextInitialValue: TabsContextType = {
  save: () => {},
@ -58,23 +59,29 @@ export function TabsProvider({ children }: { children: ReactNode }) {
    return newNodeId.current;
  }
  function save() {
-    let Saveflows = [...flows];
-    if (Saveflows.length !== 0)
+    // added clone deep to avoid mutating the original object
+    let Saveflows = _.cloneDeep(flows);
+    if (Saveflows.length !== 0) {
      Saveflows.forEach((flow) => {
        if (flow.data && flow.data?.nodes)
          flow.data?.nodes.forEach((node) => {
+            console.log(node.data.type);
+            //looking for file fields to prevent saving the content and breaking the flow for exceeding the the data limite for local storage
            Object.keys(node.data.node.template).forEach((key) => {
+              console.log(node.data.node.template[key].type);
              if (node.data.node.template[key].type === "file") {
-                // ! Commenting this out for now, as it is causing issues with the file upload
-                // node.data.node.template[key].content = "";
+                console.log(node.data.node.template[key]);
+                node.data.node.template[key].content = null;
+                node.data.node.template[key].value = "";
              }
            });
          });
      });
-    window.localStorage.setItem(
-      "tabsData",
-      JSON.stringify({ tabIndex, flows: Saveflows, id })
-    );
+      window.localStorage.setItem(
+        "tabsData",
+        JSON.stringify({ tabIndex, flows: Saveflows, id })
+      );
+    }
  }
  useEffect(() => {
    //save tabs locally
--- a/src/frontend/src/icons/Airbyte/airbyte.svg
+++ b/src/frontend/src/icons/Airbyte/airbyte.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#505AA5;}
+</style>
+<path class="st0" d="M349.6,124.45c48.94-54.99,129.98-71.12,196.61-39.38c88.52,42.17,120.82,149.6,72.62,232.48L510.41,503.76
+	c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l131.26-225.49c34.97-60.15,11.58-138.11-52.6-168.8
+	c-48.16-23.03-107.02-11.53-142.6,28.08c-19.62,21.74-30.64,49.82-31.01,79.01c-0.37,29.2,9.94,57.53,29.01,79.76
+	c3.43,3.99,7.12,7.75,11.04,11.25l-76.63,131.88c-3,5.16-6.99,9.67-11.74,13.3c-4.76,3.62-10.18,6.28-15.97,7.82
+	c-5.79,1.54-11.83,1.93-17.77,1.16c-5.94-0.78-11.67-2.71-16.87-5.68l83.19-143.17c-11.95-17.11-20.53-36.31-25.29-56.58
+	L261.1,360.8c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l131.83-226.76
+	C336.06,141.32,342.43,132.55,349.6,124.45z M501.76,196.63c31.75,18.21,42.71,58.7,24.34,90.22L399.69,503.74
+	c-6.06,10.41-16.03,18-27.72,21.11c-11.69,3.11-24.15,1.49-34.64-4.51l117.38-201.93c-9.42-1.97-18.29-5.94-26.01-11.65
+	c-7.72-5.71-14.1-13.01-18.7-21.4c-4.6-8.4-7.31-17.68-7.95-27.22c-0.64-9.54,0.82-19.1,4.27-28.02c3.45-8.92,8.8-17,15.7-23.67
+	c6.9-6.67,15.17-11.77,24.24-14.95c9.08-3.18,18.74-4.37,28.32-3.49S493.43,191.83,501.76,196.63z M455.78,237.39
+	c-2.17,1.66-4,3.72-5.36,6.08h-0.01c-2.06,3.55-3.02,7.62-2.75,11.71c0.27,4.09,1.76,8,4.27,11.25c2.51,3.25,5.94,5.69,9.84,7
+	c3.91,1.32,8.12,1.45,12.1,0.39c3.99-1.06,7.56-3.27,10.28-6.35c2.72-3.08,4.46-6.89,5-10.95c0.54-4.06-0.15-8.19-1.97-11.87
+	c-1.82-3.67-4.71-6.73-8.28-8.78c-2.37-1.36-4.99-2.24-7.71-2.6c-2.72-0.35-5.48-0.18-8.12,0.53
+	C460.43,234.52,457.95,235.73,455.78,237.39z"/>
+</svg>
--- a/src/frontend/src/icons/Airbyte/index.tsx
+++ b/src/frontend/src/icons/Airbyte/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as AirbyteSVG } from "./airbyte.svg";
+
+export const AirbyteIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <AirbyteSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/AzLogo/az_logo.svg
+++ b/src/frontend/src/icons/AzLogo/az_logo.svg
@ -0,0 +1,49 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="103px" height="103px" viewBox="0 0 103 103" enable-background="new 0 0 103 103" xml:space="preserve">  <image id="image0" width="103" height="103" x="0" y="0"
+    href="data:image/png;base64,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
+rkJggg==" />
+</svg>
--- a/src/frontend/src/icons/AzLogo/index.tsx
+++ b/src/frontend/src/icons/AzLogo/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as AzSVG } from "./az_logo.svg";
+
+export const AzIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <AzSVG ref={ref} {...props} />;
+  }
+);
--- a/src/frontend/src/icons/Bing/bing.svg
+++ b/src/frontend/src/icons/Bing/bing.svg
--- a/src/frontend/src/icons/Bing/index.tsx
+++ b/src/frontend/src/icons/Bing/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as BingSVG } from "./bing.svg";
+
+export const BingIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <BingSVG ref={ref} {...props} />;
+  }
+);
--- a/src/frontend/src/icons/ChromaIcon/index.tsx
+++ b/src/frontend/src/icons/ChromaIcon/index.tsx
@ -1,10 +1,9 @@
 import React, { forwardRef } from "react";
 import { ReactComponent as ChromaSVG } from "./chroma.svg";

-const ChromaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
-  (props, ref) => {
-    return <ChromaSVG ref={ref} {...props} />;
-  }
-);
-
-export default ChromaIcon;
+export const ChromaIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <ChromaSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/Cohere/cohere.svg
+++ b/src/frontend/src/icons/Cohere/cohere.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="165.883 110.821 117.8 117.78" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1, 0, 0, 1, 97.842941, -127.708488)">
+    <defs>
+      <rect id="SVGID_1_" x="68.05" y="238.52" width="117.78" height="117.78"/>
+    </defs>
+    <clipPath id="SVGID_00000075852095293250014550000008258792261602485387_">
+      <rect x="68.05" y="238.52" width="117.78" height="117.78" transform="matrix(1, 0, 0, 1, 0, 0)" style="overflow: visible;"/>
+    </clipPath>
+    <g style="clip-path:url(#SVGID_00000075852095293250014550000008258792261602485387_);">
+      <path class="st2" d="M106.21,308.65c3.17,0,9.48-0.17,18.19-3.76c10.16-4.18,30.37-11.77,44.94-19.57 c10.2-5.45,14.66-12.67,14.66-22.38c0-13.48-10.93-24.41-24.41-24.41h-56.49c-19.37,0-35.06,15.7-35.06,35.06 S82.75,308.65,106.21,308.65z" style="clip-rule: evenodd; fill: rgb(58, 89, 77); fill-rule: evenodd;"/>
+      <path class="st3" d="M115.77,332.79c0-9.49,5.71-18.05,14.48-21.69l17.79-7.38c17.99-7.47,37.8,5.76,37.8,25.24 c0,15.09-12.24,27.33-27.33,27.32l-19.26,0C126.28,356.27,115.77,345.76,115.77,332.79z" style="clip-rule: evenodd; fill: rgb(189, 143, 192); fill-rule: evenodd;"/>
+      <path class="st4" d="M88.27,313.27L88.27,313.27c-11.16,0-20.21,9.05-20.21,20.21v2.62c0,11.16,9.05,20.21,20.21,20.21h0 c11.16,0,20.21-9.05,20.21-20.21v-2.62C108.48,322.32,99.43,313.27,88.27,313.27z" style="fill: rgb(238, 118, 92);"/>
+    </g>
+  </g>
+</svg>
--- a/src/frontend/src/icons/Cohere/index.tsx
+++ b/src/frontend/src/icons/Cohere/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as CohereSVG } from "./cohere.svg";
+
+export const CohereIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <CohereSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/Evernote/evernote-icon.svg
+++ b/src/frontend/src/icons/Evernote/evernote-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 32 32" fill="#7fce2c"><path d="M29.343 16.818c.1 1.695-.08 3.368-.305 5.045-.225 1.712-.508 3.416-.964 5.084-.3 1.067-.673 2.1-1.202 3.074-.65 1.192-1.635 1.87-2.992 1.924l-3.832.036c-.636-.017-1.278-.146-1.9-.297-1.192-.3-1.862-1.1-2.06-2.3-.186-1.08-.173-2.187.04-3.264.252-1.23 1-1.96 2.234-2.103.817-.1 1.65-.077 2.476-.1.205-.007.275.098.203.287-.196.53-.236 1.07-.098 1.623.053.207-.023.307-.26.305a7.77 7.77 0 0 0-1.123.053c-.636.086-.96.47-.96 1.112 0 .205.026.416.066.622.103.507.45.78.944.837 1.123.127 2.247.138 3.37-.05.675-.114 1.08-.54 1.16-1.208.152-1.3.155-2.587-.228-3.845-.33-1.092-1.006-1.565-2.134-1.7l-3.36-.54c-1.06-.193-1.7-.887-1.92-1.9-.13-.572-.14-1.17-.214-1.757-.013-.106-.074-.208-.1-.3-.04.1-.106.212-.117.326-.066.68-.053 1.373-.185 2.04-.16.8-.404 1.566-.67 2.33-.185.535-.616.837-1.205.8a37.76 37.76 0 0 1-7.123-1.353l-.64-.207c-.927-.26-1.487-.903-1.74-1.787l-1-3.853-.74-4.3c-.115-.755-.2-1.523-.083-2.293.154-1.112.914-1.903 2.04-1.964l3.558-.062c.127 0 .254.003.373-.026a1.23 1.23 0 0 0 1.01-1.255l-.05-3.036c-.048-1.576.8-2.38 2.156-2.622a10.58 10.58 0 0 1 4.91.26c.933.275 1.467.923 1.715 1.83.058.22.146.3.37.287l2.582.01 3.333.37c.686.095 1.364.25 2.032.42 1.165.298 1.793 1.112 1.962 2.256l.357 3.355.3 5.577.01 2.277zm-4.534-1.155c-.02-.666-.07-1.267-.444-1.784a1.66 1.66 0 0 0-2.469-.15c-.364.4-.494.88-.564 1.4-.008.034.106.126.16.126l.8-.053c.768.007 1.523.113 2.25.393.066.026.136.04.265.077zM8.787 1.154a3.82 3.82 0 0 0-.278 1.592l.05 2.934c.005.357-.075.45-.433.45L5.1 6.156c-.583 0-1.143.1-1.554.278l5.2-5.332c.02.013.04.033.06.053z"/></svg>
--- a/src/frontend/src/icons/Evernote/index.tsx
+++ b/src/frontend/src/icons/Evernote/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as EvernoteSVG } from "./evernote-icon.svg";
+
+export const EvernoteIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <EvernoteSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/FacebookMessenger/Facebook_Messenger_logo_2020.svg
+++ b/src/frontend/src/icons/FacebookMessenger/Facebook_Messenger_logo_2020.svg
@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><radialGradient id="a" cx="101.9" cy="809" r="1.1" gradientTransform="matrix(800 0 0 -800 -81386 648000)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#09f"/><stop offset=".6" style="stop-color:#a033ff"/><stop offset=".9" style="stop-color:#ff5280"/><stop offset="1" style="stop-color:#ff7061"/></radialGradient><path fill="url(#a)" d="M400 0C174.7 0 0 165.1 0 388c0 116.6 47.8 217.4 125.6 287 6.5 5.8 10.5 14 10.7 22.8l2.2 71.2a32 32 0 0 0 44.9 28.3l79.4-35c6.7-3 14.3-3.5 21.4-1.6 36.5 10 75.3 15.4 115.8 15.4 225.3 0 400-165.1 400-388S625.3 0 400 0z"/><path fill="#FFF" d="m159.8 501.5 117.5-186.4a60 60 0 0 1 86.8-16l93.5 70.1a24 24 0 0 0 28.9-.1l126.2-95.8c16.8-12.8 38.8 7.4 27.6 25.3L522.7 484.9a60 60 0 0 1-86.8 16l-93.5-70.1a24 24 0 0 0-28.9.1l-126.2 95.8c-16.8 12.8-38.8-7.3-27.5-25.2z"/>
+</svg>
--- a/src/frontend/src/icons/FacebookMessenger/index.tsx
+++ b/src/frontend/src/icons/FacebookMessenger/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as FacebookMessengerSVG } from "./Facebook_Messenger_logo_2020.svg";
+
+export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <FacebookMessengerSVG ref={ref} {...props} />;
+  }
+);
--- a/src/frontend/src/icons/GitBook/gitbook-svgrepo-com.svg
+++ b/src/frontend/src/icons/GitBook/gitbook-svgrepo-com.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M10.802 17.77a.703.703 0 1 1-.002 1.406.703.703 0 0 1 .002-1.406m11.024-4.347a.703.703 0 1 1 .001-1.406.703.703 0 0 1-.001 1.406m0-2.876a2.176 2.176 0 0 0-2.174 2.174c0 .233.039.465.115.691l-7.181 3.823a2.165 2.165 0 0 0-1.784-.937c-.829 0-1.584.475-1.95 1.216l-6.451-3.402c-.682-.358-1.192-1.48-1.138-2.502.028-.533.212-.947.493-1.107.178-.1.392-.092.62.027l.042.023c1.71.9 7.304 3.847 7.54 3.956.363.169.565.237 1.185-.057l11.564-6.014c.17-.064.368-.227.368-.474 0-.342-.354-.477-.355-.477-.658-.315-1.669-.788-2.655-1.25-2.108-.987-4.497-2.105-5.546-2.655-.906-.474-1.635-.074-1.765.006l-.252.125C7.78 6.048 1.46 9.178 1.1 9.397.457 9.789.058 10.57.006 11.539c-.08 1.537.703 3.14 1.824 3.727l6.822 3.518a2.175 2.175 0 0 0 2.15 1.862 2.177 2.177 0 0 0 2.173-2.14l7.514-4.073c.38.298.853.461 1.337.461A2.176 2.176 0 0 0 24 12.72a2.176 2.176 0 0 0-2.174-2.174"/></svg>
--- a/src/frontend/src/icons/GitBook/index.tsx
+++ b/src/frontend/src/icons/GitBook/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as GitBookSVG } from "./gitbook-svgrepo-com.svg";
+
+export const GitBookIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <GitBookSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/Google/google.svg
+++ b/src/frontend/src/icons/Google/google.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
--- a/src/frontend/src/icons/Google/index.tsx
+++ b/src/frontend/src/icons/Google/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as GoogleSVG } from "./google.svg";
+
+export const GoogleIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <GoogleSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/HuggingFace/hf-logo.svg
+++ b/src/frontend/src/icons/HuggingFace/hf-logo.svg
--- a/src/frontend/src/icons/HuggingFace/index.tsx
+++ b/src/frontend/src/icons/HuggingFace/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as HugginFaceSVG } from "./hf-logo.svg";
+
+export const HugginFaceIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <HugginFaceSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/IFixIt/ifixit-seeklogo.com.svg
+++ b/src/frontend/src/icons/IFixIt/ifixit-seeklogo.com.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="8.4 8.4 51.2 51.2"><path fill="#0071BA" d="M34 8.4C19.813 8.4 8.4 19.813 8.4 34S19.813 59.6 34 59.6 59.6 48.187 59.6 34 48.187 8.4 34 8.4zm9.493 13.226c.64.32 1.28.747 1.707 1.173 1.173 1.173 1.6 2.24 1.28 3.2l-5.44 7.467c-.106.32-.106 1.066 0 1.387l5.333 7.253c.107.32.213.96.107 1.28-.854 1.6-2.348 2.773-3.84 3.307-.32 0-.534 0-.747-.106l-7.253-5.333c-.32-.214-.854-.214-1.281-.107l-7.573 5.547c-.64.213-1.173.106-1.813-.32-1.387-.96-2.347-2.133-2.667-3.413 0-.427 0-.533.213-.747l5.333-7.359a1.705 1.705 0 0 0-.213-1.6l-5.12-6.934c-.106-.106-.106-.32-.213-.533.107-2.027 1.6-3.093 3.307-4.267.32-.107.854-.107 1.173 0l7.36 5.546c.427.107 1.174.107 1.494-.106L42 21.626c.533-.213.96-.106 1.387 0h.106z"/></svg>
--- a/src/frontend/src/icons/IFixIt/index.tsx
+++ b/src/frontend/src/icons/IFixIt/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as IFixItSVG } from "./ifixit-seeklogo.com.svg";
+
+export const IFixIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <IFixItSVG ref={ref} {...props} />;
+  }
+);
--- a/src/frontend/src/icons/Meta/index.tsx
+++ b/src/frontend/src/icons/Meta/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as MetaSVG } from "./meta-icon.svg";
+
+export const MetaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <MetaSVG ref={ref} {...props} />;
+  }
+);
--- a/src/frontend/src/icons/Meta/meta-icon.svg
+++ b/src/frontend/src/icons/Meta/meta-icon.svg
@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 287.56 191"><defs><style>.cls-1{fill:#0081fb;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="62.34" y1="101.45" x2="260.34" y2="91.45" gradientTransform="matrix(1, 0, 0, -1, 0, 192)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0064e1"/><stop offset="0.4" stop-color="#0064e1"/><stop offset="0.83" stop-color="#0073ee"/><stop offset="1" stop-color="#0082fb"/></linearGradient><linearGradient id="linear-gradient-2" x1="41.42" y1="53" x2="41.42" y2="126" gradientTransform="matrix(1, 0, 0, -1, 0, 192)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0082fb"/><stop offset="1" stop-color="#0064e0"/></linearGradient></defs><title>facebook-meta</title><path class="cls-1" d="M31.06,126c0,11,2.41,19.41,5.56,24.51A19,19,0,0,0,53.19,160c8.1,0,15.51-2,29.79-21.76,11.44-15.83,24.92-38,34-52l15.36-23.6c10.67-16.39,23-34.61,37.18-47C181.07,5.6,193.54,0,206.09,0c21.07,0,41.14,12.21,56.5,35.11,16.81,25.08,25,56.67,25,89.27,0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191V160c17.63,0,22-16.2,22-34.74,0-26.42-6.16-55.74-19.73-76.69-9.63-14.86-22.11-23.94-35.84-23.94-14.85,0-26.8,11.2-40.23,31.17-7.14,10.61-14.47,23.54-22.7,38.13l-9.06,16c-18.2,32.27-22.81,39.62-31.91,51.75C84.74,183,71.12,191,53.19,191c-21.27,0-34.72-9.21-43-23.09C3.34,156.6,0,141.76,0,124.85Z"/><path class="cls-2" d="M24.49,37.3C38.73,15.35,59.28,0,82.85,0c13.65,0,27.22,4,41.39,15.61,15.5,12.65,32,33.48,52.63,67.81l7.39,12.32c17.84,29.72,28,45,33.93,52.22,7.64,9.26,13,12,19.94,12,17.63,0,22-16.2,22-34.74l27.4-.86c0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191c-12.8,0-24.14-2.78-36.68-14.61-9.64-9.08-20.91-25.21-29.58-39.71L146.08,93.6c-12.94-21.62-24.81-37.74-31.68-45C107,40.71,97.51,31.23,82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78Z"/><path class="cls-3" d="M82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78C38.61,71.62,31.06,99.34,31.06,126c0,11,2.41,19.41,5.56,24.51L10.14,167.91C3.34,156.6,0,141.76,0,124.85,0,94.1,8.44,62.05,24.49,37.3,38.73,15.35,59.28,0,82.85,0Z"/></svg>
--- a/src/frontend/src/icons/Midjorney/Midjourney_Emblem.svg
+++ b/src/frontend/src/icons/Midjorney/Midjourney_Emblem.svg
@ -0,0 +1,53 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2610 8012 c-45 -46 -40 -75 33 -211 322 -590 537 -1208 602 -1731
+18 -144 20 -479 5 -658 -59 -689 -297 -1317 -642 -1699 -55 -60 -65 -91 -48
+-134 32 -77 91 -78 210 -5 329 204 794 374 1220 447 122 21 166 23 460 24 339
+0 391 -5 680 -56 248 -44 543 -126 761 -210 74 -28 146 -53 160 -56 37 -7 84
+20 99 57 17 41 -4 178 -62 404 -184 725 -604 1516 -1152 2170 -541 645 -1266
+1213 -2034 1593 -207 102 -246 111 -292 65z m434 -358 c315 -173 669 -414 966
+-658 840 -690 1492 -1625 1817 -2604 49 -149 113 -406 101 -411 -5 -1 -48 11
+-96 27 -281 98 -619 175 -942 214 -253 31 -641 31 -861 0 -313 -44 -605 -125
+-894 -247 -60 -26 -116 -49 -124 -53 -10 -4 -8 5 7 29 33 55 136 266 175 360
+200 485 304 1171 256 1689 -44 477 -234 1100 -495 1622 -24 48 -44 90 -44 93
+0 10 15 3 134 -61z"/>
+<path d="M4488 7314 c-34 -18 -48 -43 -48 -86 0 -45 11 -58 102 -120 258 -177
+615 -508 801 -743 419 -527 861 -1426 1118 -2275 28 -90 58 -173 67 -183 30
+-34 59 -38 144 -22 44 8 124 18 177 21 118 7 213 -16 425 -100 179 -72 222
+-72 251 -2 17 41 13 59 -66 261 -239 616 -555 1206 -873 1630 -51 69 -180 230
+-196 245 -3 3 -30 32 -59 65 -574 632 -1141 1093 -1551 1260 -68 27 -211 65
+-245 65 -11 -1 -32 -7 -47 -16z m1052 -798 c149 -129 577 -558 704 -706 315
+-367 625 -874 873 -1430 70 -157 143 -335 143 -349 0 -5 -48 7 -107 27 -104
+35 -114 36 -253 36 -80 1 -165 -1 -189 -4 l-44 -4 -52 164 c-214 677 -543
+1383 -902 1935 -47 72 -104 155 -126 185 -61 80 -221 272 -246 294 -11 11 -21
+23 -21 28 0 11 55 -33 220 -176z"/>
+<path d="M8080 3632 c-47 -2 -699 -44 -1355 -87 -209 -14 -456 -29 -550 -35
+-93 -6 -264 -17 -380 -25 -115 -8 -291 -19 -390 -25 -99 -6 -349 -22 -555 -35
+-206 -14 -586 -38 -845 -55 -258 -17 -607 -39 -775 -50 -168 -11 -451 -29
+-630 -40 -483 -29 -478 -28 -500 -96 -13 -39 -5 -60 123 -300 l65 -121 -166
+-114 c-269 -185 -366 -239 -429 -239 -14 0 -37 -13 -54 -29 -41 -41 -40 -91 2
+-133 29 -29 33 -30 95 -25 87 7 197 60 378 184 305 210 381 253 446 253 48 0
+100 -32 259 -159 215 -171 296 -220 426 -260 108 -34 213 -38 315 -12 119 29
+202 75 377 205 201 151 243 171 353 171 108 0 155 -22 295 -135 159 -129 202
+-160 279 -199 91 -46 168 -64 271 -64 154 1 284 63 475 224 178 150 257 185
+393 176 101 -7 160 -35 290 -141 265 -215 368 -266 545 -266 161 0 281 54 490
+222 81 64 176 132 212 150 60 30 72 33 165 33 93 0 105 -2 166 -32 38 -19 114
+-74 176 -127 61 -52 133 -111 159 -132 112 -86 294 -143 363 -114 36 15 61 55
+61 98 0 44 -58 92 -110 92 -84 0 -145 34 -310 175 -210 180 -301 227 -466 241
+-162 15 -304 -45 -524 -221 -211 -169 -307 -209 -442 -185 -55 10 -175 57
+-166 65 2 2 59 31 128 66 250 125 637 344 800 453 213 142 640 463 665 500 20
+28 18 86 -3 113 -20 27 -61 39 -122 35z m-280 -219 c0 -9 -274 -205 -396 -285
+-230 -150 -745 -429 -916 -497 l-56 -23 -69 53 c-184 142 -385 181 -574 113
+-92 -33 -171 -84 -324 -209 -66 -54 -149 -112 -185 -129 -58 -27 -75 -31 -155
+-31 -133 0 -185 27 -424 222 -210 171 -383 216 -576 151 -81 -28 -154 -73
+-320 -198 -77 -58 -169 -119 -205 -135 -60 -28 -74 -30 -175 -30 -106 0 -113
+1 -187 37 -98 46 -143 77 -293 199 -217 174 -307 218 -424 204 l-57 -7 -56
+104 c-30 57 -52 106 -49 109 6 7 241 24 791 59 173 11 560 36 860 55 300 19
+718 46 930 60 212 13 493 32 625 40 132 9 449 29 705 45 609 40 1205 79 1355
+89 172 12 175 12 175 4z"/>
+</g>
+</svg>
--- a/src/frontend/src/icons/Midjorney/index.tsx
+++ b/src/frontend/src/icons/Midjorney/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as MidjorneySVG } from "./Midjourney_Emblem.svg";
+
+export const MidjorneyIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <MidjorneySVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/Notion/Notion-logo.svg
+++ b/src/frontend/src/icons/Notion/Notion-logo.svg
@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z" fill="#fff"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z" fill="#000"/>
+</svg>
--- a/src/frontend/src/icons/Notion/index.tsx
+++ b/src/frontend/src/icons/Notion/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as NotionSVG } from "./Notion-logo.svg";
+
+export const NotionIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <NotionSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/OpenAi/index.tsx
+++ b/src/frontend/src/icons/OpenAi/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as OpenAiSVG } from "./openAI.svg";
+
+export const OpenAiIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <OpenAiSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/OpenAi/openAI.svg
+++ b/src/frontend/src/icons/OpenAi/openAI.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><rect fill="#10A37F" width="512" height="512" rx="104.187" ry="105.042"/><path fill="#fff" fill-rule="nonzero" d="M378.68 230.011a71.432 71.432 0 003.654-22.541 71.383 71.383 0 00-9.783-36.064c-12.871-22.404-36.747-36.236-62.587-36.236a72.31 72.31 0 00-15.145 1.604 71.362 71.362 0 00-53.37-23.991h-.453l-.17.001c-31.297 0-59.052 20.195-68.673 49.967a71.372 71.372 0 00-47.709 34.618 72.224 72.224 0 00-9.755 36.226 72.204 72.204 0 0018.628 48.395 71.395 71.395 0 00-3.655 22.541 71.388 71.388 0 009.783 36.064 72.187 72.187 0 0077.728 34.631 71.375 71.375 0 0053.374 23.992H271l.184-.001c31.314 0 59.06-20.196 68.681-49.995a71.384 71.384 0 0047.71-34.619 72.107 72.107 0 009.736-36.194 72.201 72.201 0 00-18.628-48.394l-.003-.004zM271.018 380.492h-.074a53.576 53.576 0 01-34.287-12.423 44.928 44.928 0 001.694-.96l57.032-32.943a9.278 9.278 0 004.688-8.06v-80.459l24.106 13.919a.859.859 0 01.469.661v66.586c-.033 29.604-24.022 53.619-53.628 53.679zm-115.329-49.257a53.563 53.563 0 01-7.196-26.798c0-3.069.268-6.146.79-9.17.424.254 1.164.706 1.695 1.011l57.032 32.943a9.289 9.289 0 009.37-.002l69.63-40.205v27.839l.001.048a.864.864 0 01-.345.691l-57.654 33.288a53.791 53.791 0 01-26.817 7.17 53.746 53.746 0 01-46.506-26.818v.003zm-15.004-124.506a53.5 53.5 0 0127.941-23.534c0 .491-.028 1.361-.028 1.965v65.887l-.001.054a9.27 9.27 0 004.681 8.053l69.63 40.199-24.105 13.919a.864.864 0 01-.813.074l-57.66-33.316a53.746 53.746 0 01-26.805-46.5 53.787 53.787 0 017.163-26.798l-.003-.003zm198.055 46.089l-69.63-40.204 24.106-13.914a.863.863 0 01.813-.074l57.659 33.288a53.71 53.71 0 0126.835 46.491c0 22.489-14.033 42.612-35.133 50.379v-67.857c.003-.025.003-.051.003-.076a9.265 9.265 0 00-4.653-8.033zm23.993-36.111a81.919 81.919 0 00-1.694-1.01l-57.032-32.944a9.31 9.31 0 00-4.684-1.266 9.31 9.31 0 00-4.684 1.266l-69.631 40.205v-27.839l-.001-.048c0-.272.129-.528.346-.691l57.654-33.26a53.696 53.696 0 0126.816-7.177c29.644 0 53.684 24.04 53.684 53.684a53.91 53.91 0 01-.774 9.077v.003zm-150.831 49.618l-24.111-13.919a.859.859 0 01-.469-.661v-66.587c.013-29.628 24.053-53.648 53.684-53.648a53.719 53.719 0 0134.349 12.426c-.434.237-1.191.655-1.694.96l-57.032 32.943a9.272 9.272 0 00-4.687 8.057v.053l-.04 80.376zm13.095-28.233l31.012-17.912 31.012 17.9v35.812l-31.012 17.901-31.012-17.901v-35.8z"/></svg>
--- a/src/frontend/src/icons/PowerPoint/PowerPoint.svg
+++ b/src/frontend/src/icons/PowerPoint/PowerPoint.svg
@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1919.95 1786"
+	 enable-background="new 0 0 1919.95 1786" xml:space="preserve">
+<metadata>
+	<sfw  xmlns="&ns_sfw;">
+		<slices></slices>
+		<sliceSourceBounds  bottomLeftOrigin="true" height="1786" width="1919.95" x="-936.475" y="-869"></sliceSourceBounds>
+	</sfw>
+</metadata>
+<path fill="#ED6C47" d="M1160.9,982.3L1026.95,0h-10.002C529.872,1.422,135.372,395.922,133.95,882.998V893L1160.9,982.3z"/>
+<path fill="#FF8F6B" d="M1036.952,0h-10.002v893l446.5,178.6l446.5-178.6v-10.002C1918.528,395.922,1524.028,1.422,1036.952,0z"/>
+<path fill="#D35230" d="M1919.95,893v9.823c-1.398,487.185-395.992,881.779-883.177,883.177h-19.646
+	c-487.185-1.398-881.779-395.992-883.177-883.177V893H1919.95z"/>
+<path opacity="0.1" enable-background="new    " d="M1071.6,438.909v952.831c-0.222,33.109-20.286,62.852-50.901,75.458
+	c-9.748,4.123-20.224,6.249-30.809,6.251H344.698c-12.502-14.288-24.557-29.469-35.72-44.65
+	c-113.755-151.749-175.176-336.324-175.028-525.977v-19.646c-0.261-171.062,49.733-338.433,143.773-481.327
+	c9.823-15.181,20.092-30.362,31.255-44.65h680.912C1034.876,357.54,1071.26,393.924,1071.6,438.909z"/>
+<path opacity="0.2" enable-background="new    " d="M1026.95,483.56v952.831c-0.002,10.584-2.128,21.061-6.251,30.808
+	c-12.606,30.615-42.35,50.679-75.459,50.901H385.329c-14.127-14.342-27.682-29.237-40.632-44.65
+	c-12.502-14.288-24.557-29.469-35.72-44.65c-113.755-151.749-175.176-336.325-175.028-525.977v-19.646
+	c-0.261-171.062,49.733-338.433,143.773-481.327H945.24C990.226,402.19,1026.61,438.574,1026.95,483.56z"/>
+<path opacity="0.2" enable-background="new    " d="M1026.95,483.56v863.531c-0.34,44.985-36.724,81.369-81.709,81.71H308.978
+	c-113.755-151.749-175.176-336.325-175.028-525.977v-19.646c-0.261-171.062,49.733-338.433,143.773-481.327H945.24
+	C990.226,402.19,1026.61,438.574,1026.95,483.56z"/>
+<path opacity="0.2" enable-background="new    " d="M982.3,483.56v863.531c-0.34,44.985-36.724,81.369-81.709,81.71H308.978
+	c-113.755-151.749-175.176-336.325-175.028-525.977v-19.646c-0.261-171.062,49.733-338.433,143.773-481.327h622.867
+	C945.576,402.19,981.96,438.574,982.3,483.56z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="170.6454" y1="1450.1008" x2="811.6547" y2="339.8992" gradientTransform="matrix(1 0 0 -1 0 1788)">
+	<stop  offset="0" style="stop-color:#CA4C28"/>
+	<stop  offset="0.5" style="stop-color:#C5401E"/>
+	<stop  offset="1" style="stop-color:#B62F14"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M81.843,401.85h818.613c45.201,0,81.843,36.643,81.843,81.843v818.613
+	c0,45.201-36.643,81.844-81.843,81.844H81.843C36.643,1384.15,0,1347.507,0,1302.307V483.693C0,438.493,36.643,401.85,81.843,401.85
+	z"/>
+<path fill="#FFFFFF" d="M500.08,620.144c53.289-3.596,106.119,11.883,149.042,43.668c35.8,31.961,54.929,78.599,51.883,126.493
+	c0.585,33.294-8.287,66.071-25.584,94.524c-17.512,27.964-42.742,50.263-72.646,64.207c-34.187,15.9-71.564,23.751-109.259,22.95
+	H389.973v192.441H283.929V620.144H500.08z M389.884,888.848h91.265c28.933,2.125,57.641-6.438,80.683-24.066
+	c19.058-18.282,29.047-44.063,27.281-70.413c0-59.98-34.857-89.97-104.57-89.97h-94.658V888.848z"/>
+</svg>
--- a/src/frontend/src/icons/PowerPoint/index.tsx
+++ b/src/frontend/src/icons/PowerPoint/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as PowerPointSVG } from "./PowerPoint.svg";
+
+export const PowerPointIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <PowerPointSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/QDrant/QDrant.svg
+++ b/src/frontend/src/icons/QDrant/QDrant.svg
@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="168.419 120.023 131.984 152.407" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="paint0_linear_425_56" x1="62.128" x2="41.202" y1="105.54" y2="105.54" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1, 0, 0, 1, 168.420441, 120.02298)">
+      <stop stop-color="#FF3364" offset="0"/>
+      <stop stop-color="#C91540" stop-opacity="0" offset="1"/>
+    </linearGradient>
+  </defs>
+  <g clip-rule="evenodd" fill-rule="evenodd" transform="matrix(1, 0, 0, 1, 168.420441, 120.02298)">
+    <path d="m103.79 140.09-3.0389-83.784-5.5036-22.089 36.735 3.8889v101.35l-22.44 12.951z" fill="#24386c"/>
+    <path d="m131.98 38.1-22.44 12.96-46.308-10.158-54.203 22.069-9.0306-24.871 32.99-19.05 33-19.05 32.991 19.05z" fill="#7589be"/>
+    <path d="m0 38.1 22.44 12.96 13.008 38.686 43.921 35.142-13.378 27.512-33-19.051-32.991-19.05v-76.2" fill="#b2bfe8"/>
+    <path d="m80.868 104.56-14.877 21.932v25.91l21.11-12.18 10.877-16.242" fill="#24386c"/>
+    <path d="m66 100.59-21.119-36.565 4.5489-12.119 17.293-8.3844 20.378 20.504z" fill="#7589be"/>
+    <path d="m44.881 64.022 21.11 12.18v24.38l-19.524 0.84001-11.81-15.08 10.224-22.32" fill="#b2bfe8"/>
+    <path d="m65.991 76.2 21.11-12.179 14.367 23.922-17.386 14.365-18.091-1.7272z" fill="#24386c"/>
+    <path d="m87.101 140.22 22.44 12.181v-101.34l-21.78-12.57-21.77-12.57-21.78 12.57-21.77 12.57v50.289l21.77 12.57 21.78 12.571 21.11-12.191zm0-51.83-21.11 12.19-21.11-12.19v-24.37l21.11-12.19 21.11 12.19v24.37" fill="#dc244c"/>
+  </g>
+  <path d="M 234.421 246.523 L 234.421 220.609 L 213.421 208.523 L 213.421 234.394 L 234.421 246.523 Z" fill="url(#paint0_linear_425_56)"/>
+</svg>
--- a/src/frontend/src/icons/QDrant/index.tsx
+++ b/src/frontend/src/icons/QDrant/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as QDrantSVG } from "./QDrant.svg";
+
+export const QDrantIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <QDrantSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/ReadTheDocs/index.tsx
+++ b/src/frontend/src/icons/ReadTheDocs/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as ReadTheDocsSVG } from "./readthedocsio-icon.svg";
+
+export const ReadTheDocsIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <ReadTheDocsSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/ReadTheDocs/readthedocsio-icon.svg
+++ b/src/frontend/src/icons/ReadTheDocs/readthedocsio-icon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M28.81 30.85c-.74.08-1.314.678-1.365 1.42s.436 1.413 1.157 1.594c0 0 3.736 1.25 10.097 1.763 5.108.417 10.9-.353 10.9-.353.6.008 1.15-.334 1.407-.876s.175-1.184-.21-1.644-1.004-.652-1.582-.493c0 0-5.666.705-10.276.32-6.07-.48-9.385-1.603-9.385-1.603-.244-.06-.5-.06-.742 0zm0-7.6c-.704.113-1.238.696-1.288 1.408s.398 1.364 1.08 1.573c0 0 3.736 1.25 10.097 1.763 5.108.417 10.9-.353 10.9-.353.544-.07 1-.423 1.223-.928s.14-1.086-.193-1.523-.87-.663-1.416-.594c0 0-5.666.705-10.276.32-6.07-.48-9.385-1.603-9.385-1.603-.244-.06-.5-.06-.742 0zm0-7.604c-.74.08-1.314.678-1.365 1.42s.436 1.413 1.157 1.594c0 0 3.736 1.218 10.097 1.763 5.108.417 10.9-.353 10.9-.353.544-.07 1-.423 1.223-.928s.14-1.086-.193-1.523-.87-.663-1.416-.594c0 0-5.666.705-10.276.32-6.07-.48-9.385-1.603-9.385-1.603-.244-.06-.5-.06-.742 0zm0-7.604c-.74.08-1.314.678-1.365 1.42s.436 1.413 1.157 1.594c0 0 3.736 1.25 10.097 1.763 5.108.417 10.9-.353 10.9-.353.6.008 1.15-.334 1.407-.876s.175-1.184-.21-1.644-1.004-.652-1.582-.493c0 0-5.666.705-10.276.32-6.07-.48-9.385-1.603-9.385-1.603-.244-.06-.5-.06-.742 0zM18.16.024c-8 0-10.966 2.5-10.966 2.5v59.667s2.907-2.5 12.265-2.116 11.288 3.664 22.79 3.895c11.5.32 14.392-1.763 14.392-1.763l.167-60.828S51.63 2.855 41.558 2.92C31.486 2.92 29.065.354 19.82.034a42.3 42.3 0 0 0-1.657-.029zm6.685 3.895s4.84 1.603 13.784 2.052c7.558.385 15.137-.737 15.137-.737v54.06s-3.836 2.02-13.425 1.314c-7.43-.545-15.607-3.344-15.607-3.344zm-4.668 1.4c.86 0 1.555.696 1.555 1.555s-.696 1.555-1.555 1.555c0 0-2.504.013-4.033.32-2.567.32-4.31 1.186-4.31 1.186-.49.308-1.113.315-1.61.02s-.788-.847-.75-1.425.394-1.087.926-1.318c0 0 2.273-1.186 5.442-1.507 1.83-.32 4.337-.32 4.337-.32zm-1.492 7.623a26.95 26.95 0 0 1 1.492 0c.8.068 1.413.737 1.413 1.54s-.614 1.47-1.413 1.54c0 0-2.504.013-4.033.32-2.567.32-4.31 1.186-4.31 1.186-.74.322-1.605.02-1.982-.696s-.14-1.6.546-2.03c0 0 2.273-1.218 5.442-1.507.916 0 2 0 2.845-.32zm1.492 7.597c.86 0 1.555.696 1.555 1.555s-.696 1.555-1.555 1.555c0 0-2.504-.016-4.033 0-2.567.32-4.31 1.186-4.31 1.186-.74.322-1.605.02-1.982-.696s-.14-1.6.546-2.03c0 0 2.273-1.186 5.442-1.507 1.83-.32 4.337-.32 4.337-.32z" fill="#32322a"/></svg>
--- a/src/frontend/src/icons/Searx/Searx_logo.svg
+++ b/src/frontend/src/icons/Searx/Searx_logo.svg
@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="330.93661"
+   height="303.22852"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="searx_logo.svg"
+   inkscape:export-filename="/home/a/magnif.png"
+   inkscape:export-xdpi="23.1774"
+   inkscape:export-ydpi="203.1774">
+  <defs
+     id="defs4">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3857">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop3859" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop3861" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3790">
+      <stop
+         style="stop-color:#a9a9a9;stop-opacity:1;"
+         offset="0"
+         id="stop3792" />
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="1"
+         id="stop3794" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3790"
+       id="radialGradient3798"
+       cx="294.45947"
+       cy="208.37973"
+       fx="294.45947"
+       fy="208.37973"
+       r="107.58125"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3857"
+       id="linearGradient3865"
+       x1="120.68947"
+       y1="239.61774"
+       x2="120.68947"
+       y2="602.17517"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3790"
+       id="linearGradient3912"
+       x1="186.74416"
+       y1="354.42426"
+       x2="255.84358"
+       y2="254.35953"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.2227304,0,0,0.89945099,-289.31433,113.40259)" />
+    <filter
+       inkscape:collect="always"
+       id="filter4024"
+       x="-0.12996517"
+       width="1.2599303"
+       y="-0.14709377"
+       height="1.2941875"
+       color-interpolation-filters="sRGB">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="6.4759344"
+         id="feGaussianBlur4026" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="-11.542922"
+     inkscape:cy="142.31651"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1855"
+     inkscape:window-height="1056"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="-24"
+     fit-margin-bottom="-6" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-61.719803,-34.870671)">
+    <path
+       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 70.523181,34.870671 c -7.11959,15.242893 -10.17798,31.779192 -8.22563,48.814566 5.01677,43.774133 41.675309,79.324503 91.536109,95.162893 -6.62576,-22.40752 -5.34093,-44.9362 2.6395,-65.84431 C 108.73618,98.821131 74.828141,70.195435 70.523181,34.870671 z"
+       id="path3814-0-7"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m 303.77876,36.21406 c 7.11959,15.242893 10.17798,31.779192 8.22563,48.814566 -5.01677,43.774134 -41.67531,79.324504 -91.53611,95.162894 6.62576,-22.40752 5.34093,-44.9362 -2.6395,-65.84431 47.73698,-14.18269 81.64502,-42.808386 85.94998,-78.13315 z"
+       id="path3814-0"
+       inkscape:connector-curvature="0" />
+    <path
+       transform="matrix(0.6556593,-0.75505688,0.75505688,0.6556593,0,0)"
+       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       d="m -5.0905523,259.06055 18.4167573,0 c 6.220455,0 11.228257,16.68196 11.228257,37.40349 l 0,172.83701 c 0,20.72153 -5.007802,37.40349 -11.228257,37.40349 l -18.4167573,0 c -6.2204547,0 -11.2282577,-16.68196 -11.2282577,-37.40349 l 0,-172.83701 c 0,-20.72153 5.007803,-37.40349 11.2282577,-37.40349 z"
+       id="rect3804"
+       inkscape:connector-curvature="0" />
+    <path
+       sodipodi:type="arc"
+       style="fill:url(#radialGradient3798);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       id="path2987"
+       sodipodi:cx="294.45947"
+       sodipodi:cy="208.37973"
+       sodipodi:rx="107.58125"
+       sodipodi:ry="107.58125"
+       d="m 402.04073,208.37973 a 107.58125,107.58125 0 1 1 -215.16251,0 107.58125,107.58125 0 1 1 215.16251,0 z"
+       transform="translate(-107.07617,-60.609153)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:url(#linearGradient3865);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       id="path3757"
+       sodipodi:cx="131.82491"
+       sodipodi:cy="299.29346"
+       sodipodi:rx="101.52033"
+       sodipodi:ry="101.52033"
+       d="m 233.34524,299.29346 a 101.52033,101.52033 0 1 1 -203.040667,0 101.52033,101.52033 0 1 1 203.040667,0 z"
+       transform="matrix(0.76865672,0,0,0.76865672,85.80266,-82.535889)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       id="path3800"
+       sodipodi:cx="183.34268"
+       sodipodi:cy="156.35687"
+       sodipodi:rx="27.274118"
+       sodipodi:ry="27.274118"
+       d="m 210.6168,156.35687 a 27.274118,27.274118 0 1 1 -54.54824,0 27.274118,27.274118 0 1 1 54.54824,0 z"
+       transform="translate(5,-7.1428572)" />
+    <path
+       sodipodi:type="arc"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+       id="path3802"
+       sodipodi:cx="197.9899"
+       sodipodi:cy="203.32896"
+       sodipodi:rx="5.5558391"
+       sodipodi:ry="5.5558391"
+       d="m 203.54574,203.32896 a 5.5558391,5.5558391 0 1 1 -11.11168,0 5.5558391,5.5558391 0 1 1 11.11168,0 z"
+       transform="translate(1.4847712,-63.564549)" />
+    <rect
+       style="fill:#ffffff;fill-opacity:0.82211531;fill-rule:nonzero;stroke:none;filter:url(#filter4024)"
+       id="rect3916"
+       width="2.2392972"
+       height="159.43797"
+       x="19.525793"
+       y="337.8396"
+       rx="2.8666623"
+       ry="9.0007057"
+       transform="matrix(0.74466525,-0.84318084,0.84318084,0.74466525,-35.543204,-26.349917)" />
+  </g>
+</svg>
--- a/src/frontend/src/icons/Searx/index.tsx
+++ b/src/frontend/src/icons/Searx/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as SearxSVG } from "./Searx_logo.svg";
+
+export const SearxIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <SearxSVG ref={ref} {...props} />;
+  }
+);
--- a/src/frontend/src/icons/Serper/index.tsx
+++ b/src/frontend/src/icons/Serper/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as SerperSVG } from "./serper.svg";
+
+export const SerperIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <SerperSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/Serper/serper.svg
+++ b/src/frontend/src/icons/Serper/serper.svg
@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">  <image id="image0" width="48" height="48" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACGVBMVEUAAACVyvSRzvOPzfSQ
+zfSRzPSQzfSQzfSQzfSQyPSUyfKRzvOQzfSRzvSQzfOOxvGO0PaQzfSQzfSQzfSTzvWZzP+RzPSQ
+zfSPzfOA1f+Qy/KPzfSQzfSQzfSPzfSRzfSPzPWPy/iRzfWQzfSRz/GPzfORzvWSzfaPzvaQzPOP
+zPWQzfWQzfSQzfSQzvSMzPKSzvOPzfSQzfWRzvWQzvWN0PKTzPKQzfOQzfSQzfSAv/+Rz/WQzfWQ
+zfSPzfOQzfSQzPORzPSPzfSRzPSqqv+QzfWQzfSQzvSQzfSRzfWPzPX///+RzvSQzfSQzPSQzvSL
+0f+QzvWSy/WQzfWQzfSQzfSPzfWRzfWRzPWRzPWT0feQzPOQzfOQzPOL0fOPzPORzfSPzfOQzPaQ
+zfSQzfSPy/KQzfWQzfSQzfSPzPOPz/eQzPSQzvSQzfSQzPSPzvSQzvSQzfWPzvWQzfOQzPSJxOuP
+zPWQzfSQzvSPz/SV1eqQzPSQzfWPy/OQzfSOzfGQzvSRzfOfv/+PzfSQzfSQzvWQzfWSyO2PzvOQ
+zfSRzfSRzfSSzvOA//+PzvSOxv+OzfKPzPWQzfSRzPKSzPSQzfSQzfOQzfSOzvWPzfOQzfSSzvSR
+zfSRzPSW0vCRzPSSzvOQzfOQzvSQzfSIzO6OzfWS2/+RzfSSzPCQzfWQzvWQzfORz/KQzfSRy/WQ
+zfSQzfSQzfT////309j7AAAAsXRSTlMAGFiQuNnu+Y8XE23KyWwSG/X0jhoFb/KABifQ5aNwSDIi
+M84lUpY4OZdQZ/z4hxQViWVoxCYox/6KBE/z/WvxbniLdAOVy+jkfxkBXeGmjAuqMa3snntmfash
+aldVFrC0mTfBqDt64udpIHOl0dRytdxJheMNS9rtMAzPw0DrJL9WCGC8fNsOgkdhpD8CWQk9kuo8
+RvvFnzQp+i+7jRFfKsaRdQ9NB/AjTGOYOvZKttg9JvjTAAAAAWJLR0RLaQuFUAAAAAd0SU1FB+cF
+HgMFK2w+nRoAAANfSURBVEjHhVX5QxJREH6eKGQmiIQheJflgXiRYhalmCRlYWqGZZdHB6WllZra
+aZaVmZUWppZJduj+h8089mIXcH7Ynfnmm7fvzcybJUQqUdExsXHxCkV8XGxCdCLZRpSqHUyQJO1M
+jkDfFZPCyEStSQ1D16bpmJCSslsfip++h/UbMoymzKysbJMxw8BCOblyfl5geXX+XjG6ryCwSd1+
+Kf9AIeJFxSVSh7lUgZ5CSzBcRtcprwi118oq9FmDIvLo+gerw2RDQ79RIzqvDYDaQ+HzraoFQh1/
+cj3NTwQ+IYdprrSsdQQtO4koCcg5ytZXjecV7f+Yqb7BoW4sPy7KgRZPbmuiegyoikre5TzRzJW4
+1mXm4YoiAE6ipsTSFPOOUy3irjCc5h12LCt2ogq7hV/JeQZ57tazbe0dWDHHOc5TgjvvBAX7OZ9f
+5zxYzZ5As3VdAOMi7+oGqwpQK7wv8ehl2Abfzs4r4EvnrKtYbzOJhlejkA03w1wTLGUPoxZ22wtU
+D81RhkCBDPSJ0t9/XTg1uQFUDYmFZ5oA3mSYW11hiucF6m1yB54DAjgI5l3LvZABQ+AbJvfh+UAA
+H47QezGqaRuTTYxM8DwimOxxEZo8IVStY/KxOCAXl5IFEOeTEaHSjR5ZgGRLVNIt9U972JBn0i09
+Dz60IC/GpoaxVC8lh5akNUic09CiE5K0YuFeCZzE10FDawo6f4YzXLRw2G0GJ4eZHzGjM6KAN+B9
+y33PQVuDNh8/vN6BMS0KmGWY95w+F2g+kgTvAg7Ux8HlEFL5YV60X2zvj0R6gQZgoFg/fab6QgEY
+i1+40+HNLANFiTepNCgVDNMz2vKVTmJrG+fw4RRYQg3nmmKBj/hmE91p3SQHLy/ibKRqKjJWtHxE
+f3cRS49f5RtQj0fVRQWM7+j0iXLzY22wtaW13fRTgFaR42UNbQ5aKhJBjMho4Iddbh1OrQgRRhzG
+634BqKHjXqMNTdfPonf+lxizYL2ZqoVQ/OUkmt+NYNRCv6GwywZAom+Rrr8hddTUBX6xv/84BdA5
+1/2Xwutr8i+P57DZ73V5/2X7/dlDXpeDhRr8JIRUh/uxq0P/2EGafGo53WaPilCg5M4Vq5htXelb
+ItuIeVKzueVWKNxbmz6P7D9P/gNwmex8k7QhUQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wNS0z
+MFQwMzowNTo0MyswMDowMLa1rmEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDUtMzBUMDM6MDU6
+NDMrMDA6MDDH6BbdAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDIzLTA1LTMwVDAzOjA1OjQzKzAw
+OjAwkP03AgAAAABJRU5ErkJggg==" />
+</svg>
--- a/src/frontend/src/icons/Slack/index.tsx
+++ b/src/frontend/src/icons/Slack/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as SlackSVG } from "./slack-icon.svg";
+
+export const SlackIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <SlackSVG ref={ref} {...props} />;
+  }
+);
--- a/src/frontend/src/icons/Slack/slack-icon.svg
+++ b/src/frontend/src/icons/Slack/slack-icon.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 122.78" style="enable-background:new 0 0 122.88 122.78" xml:space="preserve"><style type="text/css"><![CDATA[
+	.st0{fill:#E01E5A;}
+	.st1{fill:#ECB22E;}
+	.st2{fill:#2EB67D;}
+	.st3{fill:#36C5F0;}
+]]></style><g><path class="st0" d="M25.91,77.62c0,7.14-5.77,12.9-12.9,12.9S0.1,84.75,0.1,77.62c0-7.14,5.77-12.9,12.9-12.9h12.9V77.62 L25.91,77.62z M32.36,77.62c0-7.14,5.77-12.9,12.9-12.9s12.9,5.77,12.9,12.9v32.26c0,7.14-5.77,12.9-12.9,12.9 s-12.9-5.77-12.9-12.9V77.62L32.36,77.62z"/><path class="st3" d="M45.26,25.81c-7.14,0-12.9-5.77-12.9-12.9c0-7.14,5.77-12.9,12.9-12.9s12.9,5.77,12.9,12.9v12.9H45.26 L45.26,25.81z M45.26,32.36c7.14,0,12.9,5.77,12.9,12.9c0,7.14-5.77,12.9-12.9,12.9H12.9C5.77,58.17,0,52.4,0,45.26 c0-7.14,5.77-12.9,12.9-12.9H45.26L45.26,32.36z"/><path class="st2" d="M96.97,45.26c0-7.14,5.77-12.9,12.9-12.9c7.14,0,12.9,5.77,12.9,12.9c0,7.14-5.77,12.9-12.9,12.9h-12.9V45.26 L96.97,45.26z M90.52,45.26c0,7.14-5.77,12.9-12.9,12.9c-7.14,0-12.9-5.77-12.9-12.9V12.9c0-7.14,5.77-12.9,12.9-12.9 c7.14,0,12.9,5.77,12.9,12.9V45.26L90.52,45.26z"/><path class="st1" d="M77.62,96.97c7.14,0,12.9,5.77,12.9,12.9c0,7.14-5.77,12.9-12.9,12.9c-7.14,0-12.9-5.77-12.9-12.9v-12.9H77.62 L77.62,96.97z M77.62,90.52c-7.14,0-12.9-5.77-12.9-12.9c0-7.14,5.77-12.9,12.9-12.9h32.36c7.14,0,12.9,5.77,12.9,12.9 c0,7.14-5.77,12.9-12.9,12.9H77.62L77.62,90.52z"/></g></svg>
--- a/src/frontend/src/icons/Weaviate/index.tsx
+++ b/src/frontend/src/icons/Weaviate/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as WeaviateSVG } from "./weaviate.svg";
+
+export const WeaviateIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <WeaviateSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/Weaviate/weaviate.svg
+++ b/src/frontend/src/icons/Weaviate/weaviate.svg
--- a/src/frontend/src/icons/Wikipedia/Wikipedia.svg
+++ b/src/frontend/src/icons/Wikipedia/Wikipedia.svg
@ -0,0 +1,424 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://web.resource.org/cc/"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="128"
+   height="128"
+   id="svg14662"
+   sodipodi:version="0.32"
+   inkscape:version="0.43"
+   sodipodi:docname="Wikipedia's W.svg"
+   sodipodi:docbase="D:\var\mediawiki\svg\Inkscape">
+  <metadata
+     id="metadata87">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/GPL/2.0/" />
+        <dc:title>Wikipedia's W</dc:title>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>STyx</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:source>none</dc:source>
+        <dc:subject>
+          <rdf:Bag>
+            <rdf:li>Wikipedia</rdf:li>
+            <rdf:li>favicon</rdf:li>
+          </rdf:Bag>
+        </dc:subject>
+        <dc:date>2007-06-26</dc:date>
+        <dc:rights>
+          <cc:Agent>
+            <dc:title>GFDL</dc:title>
+          </cc:Agent>
+        </dc:rights>
+        <dc:description>W de Wikipédia</dc:description>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title>Inkscape</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/GPL/2.0/">
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/Reproduction" />
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/Distribution" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/Notice" />
+        <cc:permits
+           rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/ShareAlike" />
+        <cc:requires
+           rdf:resource="http://web.resource.org/cc/SourceCode" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:window-height="978"
+     inkscape:window-width="1045"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     inkscape:zoom="7.453125"
+     inkscape:cx="64.636948"
+     inkscape:cy="75.677942"
+     inkscape:window-x="57"
+     inkscape:window-y="0"
+     inkscape:current-layer="svg14662" />
+  <defs
+     id="defs14664">
+    <linearGradient
+       id="linearGradient3261">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="0"
+         id="stop3263" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="0.5"
+         id="stop3269" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="1"
+         id="stop3265" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3219">
+      <stop
+         style="stop-color:#0e7309;stop-opacity:1"
+         offset="0"
+         id="stop3221" />
+      <stop
+         style="stop-color:#70d13e;stop-opacity:1"
+         offset="1"
+         id="stop3223" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3205">
+      <stop
+         style="stop-color:#2c8300;stop-opacity:1"
+         offset="0"
+         id="stop3207" />
+      <stop
+         style="stop-color:#3db800;stop-opacity:1"
+         offset="0.25"
+         id="stop3215" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0.5"
+         id="stop3213" />
+      <stop
+         style="stop-color:#69cf35;stop-opacity:1"
+         offset="1"
+         id="stop3209" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3197">
+      <stop
+         style="stop-color:#002f32;stop-opacity:1"
+         offset="0"
+         id="stop3199" />
+      <stop
+         style="stop-color:#045b04;stop-opacity:1"
+         offset="1"
+         id="stop3201" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3339">
+      <stop
+         style="stop-color:#e8e8e8;stop-opacity:1"
+         offset="0"
+         id="stop3341" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0.5"
+         id="stop3347" />
+      <stop
+         style="stop-color:#e8e8e8;stop-opacity:1"
+         offset="1"
+         id="stop3343" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3327">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop3329" />
+      <stop
+         style="stop-color:#fdd99a;stop-opacity:1"
+         offset="0.5"
+         id="stop3335" />
+      <stop
+         style="stop-color:#c39539;stop-opacity:1"
+         offset="1"
+         id="stop3331" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3319">
+      <stop
+         style="stop-color:#7d491f;stop-opacity:1"
+         offset="0"
+         id="stop3321" />
+      <stop
+         style="stop-color:#926600;stop-opacity:1"
+         offset="1"
+         id="stop3323" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3282">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="0"
+         id="stop3284" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="1"
+         id="stop3286" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient14709">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop14711" />
+      <stop
+         style="stop-color:#5eb2ff;stop-opacity:1"
+         offset="1"
+         id="stop14713" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient14685">
+      <stop
+         style="stop-color:#0917a0;stop-opacity:1"
+         offset="0"
+         id="stop14687" />
+      <stop
+         style="stop-color:#0345f4;stop-opacity:1"
+         offset="1"
+         id="stop14689" />
+    </linearGradient>
+    <linearGradient
+       x1="96.125"
+       y1="11.1875"
+       x2="96.125"
+       y2="52.101334"
+       id="linearGradient14691"
+       xlink:href="#linearGradient14685"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       x1="96.125"
+       y1="11.1875"
+       x2="96.125"
+       y2="52.101334"
+       id="linearGradient14699"
+       xlink:href="#linearGradient14685"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(447.42856,636.93359)" />
+    <radialGradient
+       cx="546.31165"
+       cy="705.48486"
+       r="25.28125"
+       fx="546.31165"
+       fy="705.48486"
+       id="radialGradient14715"
+       xlink:href="#linearGradient14709"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.032821,0,-3.289062e-8,1.717338,-565.7183,-518.4991)" />
+    <linearGradient
+       x1="96.125"
+       y1="11.1875"
+       x2="96.125"
+       y2="52.101334"
+       id="linearGradient14723"
+       xlink:href="#linearGradient14685"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(447.42856,636.93359)" />
+    <filter
+       id="filter14824">
+      <feGaussianBlur
+         id="feGaussianBlur14826"
+         stdDeviation="0.37332047"
+         inkscape:collect="always" />
+    </filter>
+    <linearGradient
+       x1="96.125"
+       y1="11.1875"
+       x2="96.125"
+       y2="52.101334"
+       id="linearGradient14833"
+       xlink:href="#linearGradient14685"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(458.16198,644.6232)" />
+    <linearGradient
+       x1="96.125"
+       y1="11.1875"
+       x2="96.125"
+       y2="52.101334"
+       id="linearGradient14842"
+       xlink:href="#linearGradient14685"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(458.16198,644.6232)" />
+    <radialGradient
+       cx="546.31165"
+       cy="705.48486"
+       r="25.28125"
+       fx="546.31165"
+       fy="705.48486"
+       id="radialGradient3288"
+       xlink:href="#linearGradient3282"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.0328206,0,-3.2890618e-8,1.7173381,-565.71835,-518.49911)" />
+    <linearGradient
+       x1="96.125"
+       y1="11.1875"
+       x2="96.125"
+       y2="52.101334"
+       id="linearGradient3296"
+       xlink:href="#linearGradient14685"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(447.42856,636.93359)" />
+    <linearGradient
+       x1="96.381813"
+       y1="30.666691"
+       x2="96.381813"
+       y2="13.187494"
+       id="linearGradient3302"
+       xlink:href="#linearGradient3282"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.934851,0,0,0.934851,453.691,638.9931)" />
+    <linearGradient
+       x1="41.945538"
+       y1="46.665127"
+       x2="41.945538"
+       y2="82.333244"
+       id="linearGradient3325"
+       xlink:href="#linearGradient3319"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       cx="53.60223"
+       cy="59.728882"
+       r="17.834057"
+       fx="53.60223"
+       fy="59.728882"
+       id="radialGradient3333"
+       xlink:href="#linearGradient3327"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,1.655849,-1.639188,0,152.1501,-32.92373)" />
+    <linearGradient
+       x1="28.429483"
+       y1="61.798298"
+       x2="58.95916"
+       y2="61.798298"
+       id="linearGradient3345"
+       xlink:href="#linearGradient3339"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       id="filter3385">
+      <feGaussianBlur
+         id="feGaussianBlur3387"
+         stdDeviation="0.14607691"
+         inkscape:collect="always" />
+    </filter>
+    <linearGradient
+       x1="83.28125"
+       y1="123.09795"
+       x2="83.28125"
+       y2="66.310989"
+       id="linearGradient3203"
+       xlink:href="#linearGradient3197"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       cx="491.52231"
+       cy="670.92523"
+       r="36.426601"
+       fx="491.52231"
+       fy="670.92523"
+       id="radialGradient3211"
+       xlink:href="#linearGradient3205"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,2.023783,-1.958054,0,1805.23,-312.4948)" />
+    <linearGradient
+       x1="517.02167"
+       y1="705.48438"
+       x2="517.02167"
+       y2="745.30084"
+       id="linearGradient3240"
+       xlink:href="#linearGradient3219"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-1,0,0,1,983.3261,0)" />
+    <linearGradient
+       x1="517.02167"
+       y1="705.48438"
+       x2="517.02167"
+       y2="745.30084"
+       id="linearGradient3243"
+       xlink:href="#linearGradient3219"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-0.120047,0)" />
+    <radialGradient
+       cx="479.68311"
+       cy="709.6579"
+       r="5.0058851"
+       fx="479.68311"
+       fy="709.6579"
+       id="radialGradient3267"
+       xlink:href="#linearGradient3261"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.233976,-0.151603,0.190797,1.552993,-247.6349,-320.152)" />
+    <filter
+       id="filter3331">
+      <feGaussianBlur
+         id="feGaussianBlur3333"
+         stdDeviation="0.355"
+         inkscape:collect="always" />
+    </filter>
+    <filter
+       id="filter3335">
+      <feGaussianBlur
+         id="feGaussianBlur3337"
+         stdDeviation="0.26694977"
+         inkscape:collect="always" />
+    </filter>
+    <filter
+       id="filter3339">
+      <feGaussianBlur
+         id="feGaussianBlur3341"
+         stdDeviation="0.23870038"
+         inkscape:collect="always" />
+    </filter>
+  </defs>
+  <g
+     id="g2036"
+     transform="translate(0.999998,0)">
+    <path
+       sodipodi:nodetypes="ccccccccsccccsscccsscccc"
+       id="V1"
+       d="M 95.868706,23.909104 L 95.868706,26.048056 C 93.047361,26.549147 90.911826,27.435559 89.462097,28.707293 C 87.385251,30.595808 84.936539,33.486281 83.330062,37.378719 L 50.644589,104.09089 L 48.469874,104.09089 L 15.65694,36.511576 C 14.128742,33.043075 12.051176,30.923395 11.424244,30.152531 C 10.44463,28.957874 9.2397119,28.023288 7.8095029,27.34877 C 6.3792686,26.674401 4.449448,26.24083 2.0200347,26.048056 L 2.0200347,23.909104 L 33.947916,23.909104 L 33.947916,26.048056 C 30.264562,26.394989 28.508523,27.011623 27.411399,27.89796 C 26.314212,28.784446 25.765634,29.921365 25.76566,31.308721 C 25.765634,33.235773 26.666868,36.241865 28.469368,40.327004 L 52.701762,86.285559 L 76.394453,40.905099 C 78.236045,36.434562 79.763939,33.332122 79.764002,31.597768 C 79.763939,30.48019 79.195764,29.410715 78.059498,28.389341 C 76.92308,27.368114 75.637251,26.645496 72.933606,26.221484 C 72.737621,26.183021 72.404568,26.125211 71.934408,26.048056 L 71.934408,23.909104 L 95.868706,23.909104 z "
+       style="font-size:178.22499084px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Times New Roman" />
+    <path
+       sodipodi:nodetypes="ccccccccsccccsscccsscccc"
+       id="V2"
+       d="M 123.97997,23.909104 L 123.97997,26.048056 C 121.15863,26.549147 119.0231,27.435559 117.57337,28.707293 C 115.49652,30.595808 113.04781,33.486281 111.44133,37.378719 L 82.755857,104.09089 L 80.581143,104.09089 L 50.268209,36.511576 C 48.74001,33.043075 46.662445,30.923395 46.035513,30.152531 C 45.055898,28.957874 43.850981,28.023288 42.420772,27.34877 C 40.990537,26.674401 39.694911,26.24083 37.265497,26.048056 L 37.265497,23.909104 L 68.559185,23.909104 L 68.559185,26.048056 C 64.875831,26.394989 63.119792,27.011623 62.022668,27.89796 C 60.925481,28.784446 60.376903,29.921365 60.376928,31.308721 C 60.376903,33.235773 61.278137,36.241865 63.080637,40.327004 L 84.813031,86.285559 L 104.50572,40.905099 C 106.34731,36.434562 107.87521,33.332122 107.87527,31.597768 C 107.87521,30.48019 107.30703,29.410715 106.17077,28.389341 C 105.03435,27.368114 103.11433,26.645496 100.41068,26.221484 C 100.2147,26.183021 99.88164,26.125211 99.41148,26.048056 L 99.41148,23.909104 L 123.97997,23.909104 z "
+       style="font-size:178.22499084px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Times New Roman" />
+  </g>
+</svg>
--- a/src/frontend/src/icons/Wikipedia/index.tsx
+++ b/src/frontend/src/icons/Wikipedia/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as WikipediaSVG } from "./Wikipedia.svg";
+
+export const WikipediaIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <WikipediaSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/Wolfram/index.tsx
+++ b/src/frontend/src/icons/Wolfram/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as WolframSVG } from "./wolfram.svg";
+
+export const WolframIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <WolframSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/Wolfram/wolfram.svg
+++ b/src/frontend/src/icons/Wolfram/wolfram.svg
--- a/src/frontend/src/icons/Word/index.tsx
+++ b/src/frontend/src/icons/Word/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as WordSVG } from "./word.svg";
+
+export const WordIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <WordSVG ref={ref} {...props} />;
+  }
+);
--- a/src/frontend/src/icons/Word/word.svg
+++ b/src/frontend/src/icons/Word/word.svg
@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1881.25 1750"
+	 enable-background="new 0 0 1881.25 1750" xml:space="preserve">
+<metadata>
+	<sfw  xmlns="&ns_sfw;">
+		<slices></slices>
+		<sliceSourceBounds  bottomLeftOrigin="true" height="1750" width="1881.25" x="-938.5" y="-851"></sliceSourceBounds>
+	</sfw>
+</metadata>
+<path fill="#41A5EE" d="M1801.056,0H517.694C473.404,0,437.5,35.904,437.5,80.194c0,0,0,0,0,0V437.5l743.75,218.75l700-218.75
+	V80.194C1881.25,35.904,1845.346,0,1801.056,0L1801.056,0z"/>
+<path fill="#2B7CD3" d="M1881.25,437.5H437.5V875l743.75,131.25l700-131.25V437.5z"/>
+<path fill="#185ABD" d="M437.5,875v437.5l700,87.5l743.75-87.5V875H437.5z"/>
+<path fill="#103F91" d="M517.694,1750h1283.363c44.29,0,80.194-35.904,80.194-80.194l0,0V1312.5H437.5v357.306
+	C437.5,1714.096,473.404,1750,517.694,1750L517.694,1750z"/>
+<path opacity="0.1" enable-background="new    " d="M969.806,350H437.5v1093.75h532.306c44.23-0.144,80.05-35.964,80.194-80.194
+	V430.194C1049.856,385.964,1014.036,350.144,969.806,350z"/>
+<path opacity="0.2" enable-background="new    " d="M926.056,393.75H437.5V1487.5h488.556c44.23-0.144,80.05-35.964,80.194-80.194
+	V473.944C1006.106,429.714,970.286,393.894,926.056,393.75z"/>
+<path opacity="0.2" enable-background="new    " d="M926.056,393.75H437.5V1400h488.556c44.23-0.144,80.05-35.964,80.194-80.194
+	V473.944C1006.106,429.714,970.286,393.894,926.056,393.75z"/>
+<path opacity="0.2" enable-background="new    " d="M882.306,393.75H437.5V1400h444.806c44.23-0.144,80.05-35.964,80.194-80.194
+	V473.944C962.356,429.714,926.536,393.894,882.306,393.75z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="167.2057" y1="1420.9117" x2="795.2943" y2="333.0883" gradientTransform="matrix(1 0 0 -1 0 1752)">
+	<stop  offset="0" style="stop-color:#2368C4"/>
+	<stop  offset="0.5" style="stop-color:#1A5DBE"/>
+	<stop  offset="1" style="stop-color:#1146AC"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M80.194,393.75h802.112c44.29,0,80.194,35.904,80.194,80.194v802.113
+	c0,44.29-35.904,80.194-80.194,80.194H80.194c-44.29,0-80.194-35.904-80.194-80.194V473.944C0,429.654,35.904,393.75,80.194,393.75z
+	"/>
+<path fill="#FFFFFF" d="M329.088,1008.788c1.575,12.381,2.625,23.144,3.106,32.375h1.837c0.7-8.75,2.158-19.294,4.375-31.631
+	c2.217-12.338,4.215-22.765,5.994-31.281l84.35-363.913h109.069l87.5,358.444c5.084,22.288,8.723,44.881,10.894,67.637h1.444
+	c1.631-22.047,4.671-43.966,9.1-65.625l69.781-360.631h99.269l-122.588,521.5H577.238L494.113,790.3
+	c-2.406-9.931-5.162-22.925-8.181-38.894c-3.019-15.969-4.9-27.65-5.644-35h-1.444c-0.962,8.487-2.844,21.088-5.644,37.8
+	c-2.8,16.713-5.046,29.079-6.738,37.1l-78.138,344.269h-117.95L147.131,614.337h101.062l75.994,364.656
+	C325.894,986.475,327.513,996.45,329.088,1008.788z"/>
+</svg>
--- a/src/frontend/src/icons/hackerNews/Y_Combinator_logo.svg
+++ b/src/frontend/src/icons/hackerNews/Y_Combinator_logo.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<rect fill="#FB651E" x="0" y="0" width="256" height="256"></rect>
+		<path d="M119.373653,144.745813 L75.43296,62.4315733 L95.5144533,62.4315733 L121.36192,114.52416 C121.759575,115.452022 122.2235,116.413008 122.753707,117.407147 C123.283914,118.401285 123.747838,119.428546 124.145493,120.48896 C124.410597,120.886615 124.609422,121.251127 124.741973,121.582507 C124.874525,121.913886 125.007075,122.212123 125.139627,122.477227 C125.802386,123.802744 126.39886,125.095105 126.929067,126.354347 C127.459274,127.613589 127.923198,128.773399 128.320853,129.833813 C129.381268,127.580433 130.541078,125.1614 131.80032,122.57664 C133.059562,119.99188 134.351922,117.307747 135.67744,114.52416 L161.92256,62.4315733 L180.612267,62.4315733 L136.27392,145.739947 L136.27392,198.826667 L119.373653,198.826667 L119.373653,144.745813 Z" fill="#FFFFFF"></path>
+	</g>
+</svg>
--- a/src/frontend/src/icons/hackerNews/index.tsx
+++ b/src/frontend/src/icons/hackerNews/index.tsx
@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as HackerNewsSVG } from "./Y_Combinator_logo.svg";
+
+export const HackerNewsIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <HackerNewsSVG ref={ref} {...props} />;
+});
--- a/src/frontend/src/icons/index.tsx
+++ b/src/frontend/src/icons/index.tsx
@ -1 +0,0 @@
-export { default as ChromaIcon } from "./ChromaIcon";
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@ -20,7 +20,32 @@ import { Connection, Edge, Node, ReactFlowInstance, addEdge } from "reactflow";
 import { FlowType, NodeType } from "./types/flow";
 import { APITemplateType, TemplateVariableType } from "./types/api";
 import _ from "lodash";
-import { ChromaIcon } from "./icons";
+import { ChromaIcon } from "./icons/ChromaIcon";
+import { AirbyteIcon } from "./icons/Airbyte";
+import { AzIcon } from "./icons/AzLogo";
+import { BingIcon } from "./icons/Bing";
+import { CohereIcon } from "./icons/Cohere";
+import { EvernoteIcon } from "./icons/Evernote";
+import { FBIcon } from "./icons/FacebookMessenger";
+import { GitBookIcon } from "./icons/GitBook";
+import { GoogleIcon } from "./icons/Google";
+import { HackerNewsIcon } from "./icons/hackerNews";
+import { HugginFaceIcon } from "./icons/HuggingFace";
+import { IFixIcon } from "./icons/IFixIt";
+import { MetaIcon } from "./icons/Meta";
+import { MidjorneyIcon } from "./icons/Midjorney";
+import { NotionIcon } from "./icons/Notion";
+import { OpenAiIcon } from "./icons/OpenAi";
+import { PowerPointIcon } from "./icons/PowerPoint";
+import { QDrantIcon } from "./icons/QDrant";
+import { ReadTheDocsIcon } from "./icons/ReadTheDocs";
+import { SearxIcon } from "./icons/Searx";
+import { SlackIcon } from "./icons/Slack";
+import { WeaviateIcon } from "./icons/Weaviate";
+import { WikipediaIcon } from "./icons/Wikipedia";
+import { WolframIcon } from "./icons/Wolfram";
+import { WordIcon } from "./icons/Word";
+import { SerperIcon } from "./icons/Serper";
 import { v4 as uuidv4 } from "uuid";

 export function classNames(...classes: Array<string>) {
@ -125,6 +150,38 @@ export const nodeIcons: {
  >;
 } = {
  Chroma: ChromaIcon,
+  AirbyteJSONLoader: AirbyteIcon,
+  // SerpAPIWrapper: SerperIcon,
+  // AZLyricsLoader: AzIcon,
+  BingSearchAPIWrapper: BingIcon,
+  Cohere: CohereIcon,
+  CohereEmbeddings: CohereIcon,
+  EverNoteLoader: EvernoteIcon,
+  FacebookChatLoader: FBIcon,
+  GitbookLoader: GitBookIcon,
+  GoogleSearchAPIWrapper: GoogleIcon,
+  GoogleSearchResults: GoogleIcon,
+  GoogleSearchRun: GoogleIcon,
+  HNLoader: HackerNewsIcon,
+  HuggingFaceHub: HugginFaceIcon,
+  HuggingFaceEmbeddings: HugginFaceIcon,
+  IFixitLoader: IFixIcon,
+  Meta: MetaIcon,
+  Midjorney: MidjorneyIcon,
+  NotionDirectoryLoader: NotionIcon,
+  ChatOpenAI: OpenAiIcon,
+  OpenAI: OpenAiIcon,
+  OpenAIEmbeddings: OpenAiIcon,
+  PowerPoint: PowerPointIcon,
+  Qdrant: QDrantIcon,
+  ReadTheDocs: ReadTheDocsIcon,
+  Searx: SearxIcon,
+  SlackDirectoryLoader: SlackIcon,
+  // Weaviate: WeaviateIcon,
+  // WikipediaAPIWrapper: WikipediaIcon,
+  // WolframAlphaQueryRun: WolframIcon,
+  // WolframAlphaAPIWrapper: WolframIcon,
+  Word: WordIcon,
  agents: RocketLaunchIcon,
  chains: LinkIcon,
  memories: CpuChipIcon,
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 32 32" fill="#7fce2c"><path d="M29.343 16.818c.1 1.695-.08 3.368-.305 5.045-.225 1.712-.508 3.416-.964 5.084-.3 1.067-.673 2.1-1.202 3.074-.65 1.192-1.635 1.87-2.992 1.924l-3.832.036c-.636-.017-1.278-.146-1.9-.297-1.192-.3-1.862-1.1-2.06-2.3-.186-1.08-.173-2.187.04-3.264.252-1.23 1-1.96 2.234-2.103.817-.1 1.65-.077 2.476-.1.205-.007.275.098.203.287-.196.53-.236 1.07-.098 1.623.053.207-.023.307-.26.305a7.77 7.77 0 0 0-1.123.053c-.636.086-.96.47-.96 1.112 0 .205.026.416.066.622.103.507.45.78.944.837 1.123.127 2.247.138 3.37-.05.675-.114 1.08-.54 1.16-1.208.152-1.3.155-2.587-.228-3.845-.33-1.092-1.006-1.565-2.134-1.7l-3.36-.54c-1.06-.193-1.7-.887-1.92-1.9-.13-.572-.14-1.17-.214-1.757-.013-.106-.074-.208-.1-.3-.04.1-.106.212-.117.326-.066.68-.053 1.373-.185 2.04-.16.8-.404 1.566-.67 2.33-.185.535-.616.837-1.205.8a37.76 37.76 0 0 1-7.123-1.353l-.64-.207c-.927-.26-1.487-.903-1.74-1.787l-1-3.853-.74-4.3c-.115-.755-.2-1.523-.083-2.293.154-1.112.914-1.903 2.04-1.964l3.558-.062c.127 0 .254.003.373-.026a1.23 1.23 0 0 0 1.01-1.255l-.05-3.036c-.048-1.576.8-2.38 2.156-2.622a10.58 10.58 0 0 1 4.91.26c.933.275 1.467.923 1.715 1.83.058.22.146.3.37.287l2.582.01 3.333.37c.686.095 1.364.25 2.032.42 1.165.298 1.793 1.112 1.962 2.256l.357 3.355.3 5.577.01 2.277zm-4.534-1.155c-.02-.666-.07-1.267-.444-1.784a1.66 1.66 0 0 0-2.469-.15c-.364.4-.494.88-.564 1.4-.008.034.106.126.16.126l.8-.053c.768.007 1.523.113 2.25.393.066.026.136.04.265.077zM8.787 1.154a3.82 3.82 0 0 0-.278 1.592l.05 2.934c.005.357-.075.45-.433.45L5.1 6.156c-.583 0-1.143.1-1.554.278l5.2-5.332c.02.013.04.033.06.053z"/></svg>
				`@ -0,0 +1 @@`
				<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 287.56 191"><defs><style>.cls-1{fill:#0081fb;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="62.34" y1="101.45" x2="260.34" y2="91.45" gradientTransform="matrix(1, 0, 0, -1, 0, 192)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0064e1"/><stop offset="0.4" stop-color="#0064e1"/><stop offset="0.83" stop-color="#0073ee"/><stop offset="1" stop-color="#0082fb"/></linearGradient><linearGradient id="linear-gradient-2" x1="41.42" y1="53" x2="41.42" y2="126" gradientTransform="matrix(1, 0, 0, -1, 0, 192)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0082fb"/><stop offset="1" stop-color="#0064e0"/></linearGradient></defs><title>facebook-meta</title><path class="cls-1" d="M31.06,126c0,11,2.41,19.41,5.56,24.51A19,19,0,0,0,53.19,160c8.1,0,15.51-2,29.79-21.76,11.44-15.83,24.92-38,34-52l15.36-23.6c10.67-16.39,23-34.61,37.18-47C181.07,5.6,193.54,0,206.09,0c21.07,0,41.14,12.21,56.5,35.11,16.81,25.08,25,56.67,25,89.27,0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191V160c17.63,0,22-16.2,22-34.74,0-26.42-6.16-55.74-19.73-76.69-9.63-14.86-22.11-23.94-35.84-23.94-14.85,0-26.8,11.2-40.23,31.17-7.14,10.61-14.47,23.54-22.7,38.13l-9.06,16c-18.2,32.27-22.81,39.62-31.91,51.75C84.74,183,71.12,191,53.19,191c-21.27,0-34.72-9.21-43-23.09C3.34,156.6,0,141.76,0,124.85Z"/><path class="cls-2" d="M24.49,37.3C38.73,15.35,59.28,0,82.85,0c13.65,0,27.22,4,41.39,15.61,15.5,12.65,32,33.48,52.63,67.81l7.39,12.32c17.84,29.72,28,45,33.93,52.22,7.64,9.26,13,12,19.94,12,17.63,0,22-16.2,22-34.74l27.4-.86c0,19.38-3.82,33.62-10.32,44.87C271,180.13,258.72,191,238.13,191c-12.8,0-24.14-2.78-36.68-14.61-9.64-9.08-20.91-25.21-29.58-39.71L146.08,93.6c-12.94-21.62-24.81-37.74-31.68-45C107,40.71,97.51,31.23,82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78Z"/><path class="cls-3" d="M82.35,31.23c-12.27,0-22.69,8.61-31.41,21.78C38.61,71.62,31.06,99.34,31.06,126c0,11,2.41,19.41,5.56,24.51L10.14,167.91C3.34,156.6,0,141.76,0,124.85,0,94.1,8.44,62.05,24.49,37.3,38.73,15.35,59.28,0,82.85,0Z"/></svg>
				`@ -1 +0,0 @@`
				`export { default as ChromaIcon } from "./ChromaIcon";`