feat: add grok-2 model

Author: pnd280

docs/changelog.md

@@ -10,6 +10,12 @@ Consider giving a star ⭐ on [Github](https://github.com/pnd280/complexity).
 
 **EXPERIMENTAL** features are subjected to change/removal without prior notice.
 
+## v0.0.5.2
+
+_Release date: 29th Oct, 2024_
+
+-   Added Grok-2 model.
+
 ## v0.0.5.1
 
 _Release date: 26th Oct, 2024_

package.json

@@ -1,7 +1,7 @@
 {
   "name": "complexity",
   "displayName": "Complexity - Perplexity AI Supercharged",
-  "version": "0.0.5.1",
+  "version": "0.0.5.2",
   "author": "pnd280",
   "description": "⚡ Supercharge your Perplexity AI",
   "type": "module",

src/content-script/components/QueryBox/consts.ts

@@ -32,6 +32,12 @@ export const languageModels = [
     code: "gpt4",
     provider: "OpenAI",
   },
+  {
+    label: "Grok-2",
+    shortLabel: "Grok-2",
+    code: "grok",
+    provider: "xAI",
+  },
   {
     label: "Sonar Huge",
     shortLabel: "Sonar XL",

src/content-script/components/QueryBox/index.tsx

@@ -23,6 +23,7 @@ import BlackForestLabs from "@/shared/components/icons/BlackForestLabsIcon";
 import MistralAiIcon from "@/shared/components/icons/MistralAiIcon";
 import PlaygroundAiIcon from "@/shared/components/icons/PlaygroundAiIcon";
 import StabilityAiIcon from "@/shared/components/icons/StabilityAiIcon";
+import XAiIcon from "@/shared/components/icons/xAi";
 
 export type LanguageModel = (typeof languageModels)[number];
 type Provider = (typeof languageModels)[number]["provider"];
@@ -38,6 +39,7 @@ export const languageModelIcons: Record<LanguageModel["code"], ReactNode> = {
   o1: <AiOutlineOpenAI />,
   gpt4o: <AiOutlineOpenAI />,
   gpt4: <AiOutlineOpenAI />,
+  grok: <XAiIcon />,
   llama_x_large: <SiPerplexity />,
   experimental: <SiPerplexity />,
   turbo: <SiPerplexity />,

src/shared/components/icons/xAi.tsx

@@ -0,0 +1,32 @@
+import { SVGProps } from "react";
+
+export default function XAiIcon({ ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="0.8em"
+      height="0.8em"
+      viewBox="0 0 1000 1000"
+      {...props}
+    >
+      <g>
+        <polygon
+          fill="currentColor"
+          points="226.83 411.15 501.31 803.15 623.31 803.15 348.82 411.15 226.83 411.15"
+        />
+        <polygon
+          fill="currentColor"
+          points="348.72 628.87 226.69 803.15 348.77 803.15 409.76 716.05 348.72 628.87"
+        />
+        <polygon
+          fill="currentColor"
+          points="651.23 196.85 440.28 498.12 501.32 585.29 773.31 196.85 651.23 196.85"
+        />
+        <polygon
+          fill="currentColor"
+          points="673.31 383.25 673.31 803.15 773.31 803.15 773.31 240.44 673.31 383.25"
+        />
+      </g>
+    </svg>
+  );
+}