feat: Add Perplexity Models Component (#3351)

src/frontend/package-lock.json

@@ -1079,6 +1079,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {

src/frontend/src/icons/Perplexity/Perplexity.jsx

@@ -0,0 +1,21 @@
+const SvgPerplexity = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 509.64" // Adjust viewBox if needed
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      fill="#1F1F1F"
+      d="M115.613 0h280.774C459.974 0 512 52.025 512 115.612v278.415c0 63.587-52.026 115.613-115.613 115.613H115.613C52.026 509.64 0 457.614 0 394.027V115.612C0 52.025 52.026 0 115.613 0z"
+    />
+    <path
+      fill="#fff"
+      fillRule="nonzero"
+      d="M348.851 128.063l-68.946 58.302h68.946v-58.302zm-83.908 48.709l100.931-85.349v94.942h32.244v143.421h-38.731v90.004l-94.442-86.662v83.946h-17.023v-83.906l-96.596 86.246v-89.628h-37.445V186.365h38.732V90.768l95.309 84.958v-83.16h17.023l-.002 84.206zm-29.209 26.616c-34.955.02-69.893 0-104.83 0v109.375h20.415v-27.121l84.415-82.254zm41.445 0l82.208 82.324v27.051h21.708V203.388c-34.617 0-69.274.02-103.916 0zm-42.874-17.023l-64.669-57.646v57.646h64.669zm13.617 124.076v-95.2l-79.573 77.516v88.731l79.573-71.047zm17.252-95.022v94.863l77.19 70.83c0-29.485-.012-58.943-.012-88.425l-77.178-77.268z"
+    />
+  </svg>
+);
+
+export default SvgPerplexity;

src/frontend/src/icons/Perplexity/index.tsx

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

src/frontend/src/utils/styleUtils.ts

@@ -1,4 +1,5 @@
 import { AIMLIcon } from "@/icons/AIML";
+import Perplexity from "@/icons/Perplexity/Perplexity";
 import { AthenaIcon } from "@/icons/athena/index";
 import { freezeAllIcon } from "@/icons/freezeAll";
 import {
@@ -599,4 +600,5 @@ export const nodeIconsLucide: iconsType = {
   athenaIcon: AthenaIcon,
   OptionIcon: OptionIcon,
   Option: OptionIcon,
+  Perplexity,
 };