use hero-icons, instead of styled-icons/heroicons

11 files changed, 64 insertions, 127 deletions

diff --git a/extension/react-app/package-lock.json b/extension/react-app/package-lock.json
index 76ce378f..ec5f78fe 100644
--- a/extension/react-app/package-lock.json
+++ b/extension/react-app/package-lock.json
@@ -8,9 +8,7 @@
       "name": "react-app",
       "version": "0.0.0",
       "dependencies": {
-        "@styled-icons/heroicons-outline": "^10.47.0",
-        "@styled-icons/heroicons-solid": "^10.47.0",
-        "@styled-icons/styled-icon": "^10.7.0",
+        "@heroicons/react": "^2.0.18",
         "@types/vscode-webview": "^1.57.1",
         "@uiw/react-markdown-preview": "^4.1.13",
         "downshift": "^7.6.0",
@@ -781,6 +779,14 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
       "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw=="
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -864,56 +870,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@styled-icons/heroicons-outline": {
-      "version": "10.47.0",
-      "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-outline/-/heroicons-outline-10.47.0.tgz",
-      "integrity": "sha512-C7bcJ/YPVKACoQLSBDM9DkgmrO1HmqAaru9kqYK2V+GaGUW5raf6dyTLo7GUYt/CJ7p3qWxsBz3SX6djzdaODQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "@styled-icons/styled-icon": "^10.7.0"
-      },
-      "funding": {
-        "type": "GitHub",
-        "url": "https://github.com/sponsors/jacobwgillespie"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "styled-components": "*"
-      }
-    },
-    "node_modules/@styled-icons/heroicons-solid": {
-      "version": "10.47.0",
-      "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-solid/-/heroicons-solid-10.47.0.tgz",
-      "integrity": "sha512-j+tJx2NzLG2tc91IXJVwKNjsI/osxmak+wmLfnfBsB+49srpxMYjuLPMtl9ZY/xgbNsWO36O+/N5Zf5bkgiKcQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "@styled-icons/styled-icon": "^10.7.0"
-      },
-      "funding": {
-        "type": "GitHub",
-        "url": "https://github.com/sponsors/jacobwgillespie"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "styled-components": "*"
-      }
-    },
-    "node_modules/@styled-icons/styled-icon": {
-      "version": "10.7.0",
-      "resolved": "https://registry.npmjs.org/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz",
-      "integrity": "sha512-SCrhCfRyoY8DY7gUkpz+B0RqUg/n1Zaqrr2+YKmK/AyeNfCcoHuP4R9N4H0p/NA1l7PTU10ZkAWSLi68phnAjw==",
-      "dependencies": {
-        "@babel/runtime": "^7.19.0"
-      },
-      "funding": {
-        "type": "GitHub",
-        "url": "https://github.com/sponsors/jacobwgillespie"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "styled-components": ">=4.1.0 <6"
-      }
-    },
     "node_modules/@swc/core": {
       "version": "1.3.73",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.73.tgz",
@@ -5310,6 +5266,12 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
       "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw=="
     },
+    "@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "requires": {}
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -5377,32 +5339,6 @@
         "fastq": "^1.6.0"
       }
     },
-    "@styled-icons/heroicons-outline": {
-      "version": "10.47.0",
-      "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-outline/-/heroicons-outline-10.47.0.tgz",
-      "integrity": "sha512-C7bcJ/YPVKACoQLSBDM9DkgmrO1HmqAaru9kqYK2V+GaGUW5raf6dyTLo7GUYt/CJ7p3qWxsBz3SX6djzdaODQ==",
-      "requires": {
-        "@babel/runtime": "^7.20.7",
-        "@styled-icons/styled-icon": "^10.7.0"
-      }
-    },
-    "@styled-icons/heroicons-solid": {
-      "version": "10.47.0",
-      "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-solid/-/heroicons-solid-10.47.0.tgz",
-      "integrity": "sha512-j+tJx2NzLG2tc91IXJVwKNjsI/osxmak+wmLfnfBsB+49srpxMYjuLPMtl9ZY/xgbNsWO36O+/N5Zf5bkgiKcQ==",
-      "requires": {
-        "@babel/runtime": "^7.20.7",
-        "@styled-icons/styled-icon": "^10.7.0"
-      }
-    },
-    "@styled-icons/styled-icon": {
-      "version": "10.7.0",
-      "resolved": "https://registry.npmjs.org/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz",
-      "integrity": "sha512-SCrhCfRyoY8DY7gUkpz+B0RqUg/n1Zaqrr2+YKmK/AyeNfCcoHuP4R9N4H0p/NA1l7PTU10ZkAWSLi68phnAjw==",
-      "requires": {
-        "@babel/runtime": "^7.19.0"
-      }
-    },
     "@swc/core": {
       "version": "1.3.73",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.73.tgz",
diff --git a/extension/react-app/package.json b/extension/react-app/package.json
index 79aa8424..4c5ab26c 100644
--- a/extension/react-app/package.json
+++ b/extension/react-app/package.json
@@ -9,9 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@styled-icons/heroicons-outline": "^10.47.0",
-    "@styled-icons/heroicons-solid": "^10.47.0",
-    "@styled-icons/styled-icon": "^10.7.0",
+    "@heroicons/react": "^2.0.18",
     "@types/vscode-webview": "^1.57.1",
     "@uiw/react-markdown-preview": "^4.1.13",
     "downshift": "^7.6.0",
diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index fe9b3a95..97b79ff5 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
 
-import { Clipboard, CheckCircle } from "@styled-icons/heroicons-outline";
+import { ClipboardIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
 
 import StyledCode from "./StyledCode";
 
@@ -52,9 +52,12 @@ function CopyButton(props: { textToCopy: string; visible: boolean }) {
         }}
       >
         {clicked ? (
-          <CheckCircle color="#00ff00" size="1.5em" />
+          <CheckCircleIcon color="#00ff00" className="h-6 w-6" />
         ) : (
-          <Clipboard color={hovered ? "#00ff00" : "white"} size="1.5em" />
+          <ClipboardIcon
+            color={hovered ? "#00ff00" : "white"}
+            className="h-6 w-6"
+          />
         )}
       </StyledCopyButton>
     </>
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index ba87cb9f..35c36726 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -15,7 +15,7 @@ import {
 } from ".";
 import PillButton from "./PillButton";
 import HeaderButtonWithText from "./HeaderButtonWithText";
-import { DocumentPlus } from "@styled-icons/heroicons-outline";
+import { DocumentPlusIcon } from "@heroicons/react/24/outline";
 import { ContextItem } from "../../../schema/FullState";
 import { postVscMessage } from "../vscode";
 import { GUIClientContext } from "../App";
@@ -297,7 +297,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                 props.onToggleAddContext();
               }}
             >
-              <DocumentPlus width="1.6em"></DocumentPlus>
+              <DocumentPlusIcon className="h-6 w-6" />
             </HeaderButtonWithText>
           ))}
       </div>
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index 6d753988..6d03c820 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -1,6 +1,6 @@
 import styled, { keyframes } from "styled-components";
 import { Button } from ".";
-import { Play } from "@styled-icons/heroicons-outline";
+import { PlayIcon } from "@heroicons/react/24/outline";
 import { useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 
@@ -33,7 +33,7 @@ function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
       {vscMediaUrl ? (
         <img src={`${vscMediaUrl}/play_button.png`} width="22px" />
       ) : (
-        <Play />
+        <PlayIcon />
       )}
       CONTINUE
     </StyledButton>
diff --git a/extension/react-app/src/components/Loader.tsx b/extension/react-app/src/components/Loader.tsx
index 90eff793..3bf10b1e 100644
--- a/extension/react-app/src/components/Loader.tsx
+++ b/extension/react-app/src/components/Loader.tsx
@@ -1,7 +1,7 @@
-import { Play } from "@styled-icons/heroicons-outline";
 import { useSelector } from "react-redux";
-import styled from "styled-components";
 import { RootStore } from "../redux/store";
+import styled from "styled-components";
+import { PlayIcon } from "@heroicons/react/24/outline";
 
 const DEFAULT_SIZE = "28px";
 
@@ -31,7 +31,7 @@ function Loader(props: { size?: string }) {
       {vscMediaUrl ? (
         <img src={`${vscMediaUrl}/play_button.png`} width="22px" />
       ) : (
-        <Play width={props.size || DEFAULT_SIZE} />
+        <PlayIcon width={props.size || DEFAULT_SIZE} />
       )}
     </FlashingDiv>
   );
diff --git a/extension/react-app/src/components/Onboarding.tsx b/extension/react-app/src/components/Onboarding.tsx
index b7c80416..dd93df26 100644
--- a/extension/react-app/src/components/Onboarding.tsx
+++ b/extension/react-app/src/components/Onboarding.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { ArrowLeft, ArrowRight } from "@styled-icons/heroicons-outline";
+import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
 import { defaultBorderRadius } from ".";
 import Loader from "./Loader";
 
@@ -109,7 +109,7 @@ const Onboarding = () => {
             hidden={counter === 0}
             onClick={() => setCounter((prev) => Math.max(prev - 1, 0))}
           >
-            <ArrowLeft width="18px" strokeWidth="2px" /> Previous
+            <ArrowLeftIcon width="18px" strokeWidth="2px" /> Previous
           </StyledSpan>
           <span hidden={counter === 0}>{" | "}</span>
           <StyledSpan onClick={() => setCounter((prev) => prev + 1)}>
@@ -118,7 +118,7 @@ const Onboarding = () => {
               : counter === 3
               ? "Get Started"
               : "Next"}{" "}
-            <ArrowRight width="18px" strokeWidth="2px" />
+            <ArrowRightIcon width="18px" strokeWidth="2px" />
           </StyledSpan>
         </p>
       </div>
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index e3d05711..ae744c44 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -9,10 +9,10 @@ import {
   vscForeground,
 } from ".";
 import {
-  Trash,
-  PaintBrush,
-  ExclamationTriangle,
-} from "@styled-icons/heroicons-outline";
+  TrashIcon,
+  PaintBrushIcon,
+  ExclamationTriangleIcon,
+} from "@heroicons/react/24/outline";
 import { GUIClientContext } from "../App";
 import { useDispatch } from "react-redux";
 import {
@@ -171,10 +171,7 @@ const PillButton = (props: PillButtonProps) => {
                     client?.setEditingAtIndices([props.index]);
                   }}
                 >
-                  <PaintBrush
-                    style={{ margin: "auto" }}
-                    width="1.6em"
-                  ></PaintBrush>
+                  <PaintBrushIcon style={{ margin: "auto" }} width="1.6em" />
                 </ButtonDiv>
               )}
 
@@ -189,7 +186,7 @@ const PillButton = (props: PillButtonProps) => {
                   dispatch(setBottomMessage(undefined));
                 }}
               >
-                <Trash style={{ margin: "auto" }} width="1.6em"></Trash>
+                <TrashIcon style={{ margin: "auto" }} width="1.6em" />
               </ButtonDiv>
             </GridDiv>
           )}
@@ -206,7 +203,7 @@ const PillButton = (props: PillButtonProps) => {
             <CircleDiv
               data-tooltip-id={`circle-div-${props.item.description.name}`}
             >
-              <ExclamationTriangle
+              <ExclamationTriangleIcon
                 style={{ margin: "auto" }}
                 width="1.0em"
                 strokeWidth={2}
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 2cfe7ecd..4726b609 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -9,13 +9,13 @@ import {
   vscForeground,
 } from ".";
 import {
-  ChevronDown,
-  ChevronRight,
-  ArrowPath,
-  XMark,
-  MagnifyingGlass,
-} from "@styled-icons/heroicons-outline";
-import { StopCircle } from "@styled-icons/heroicons-solid";
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ArrowPathIcon,
+  XMarkIcon,
+  MagnifyingGlassIcon,
+  StopCircleIcon,
+} from "@heroicons/react/24/outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import { getMetaKeyLabel, isMetaEquivalentKeyPressed } from "../util";
@@ -170,9 +170,9 @@ function StepContainer(props: StepContainerProps) {
             <div className="m-2">
               {!isUserInput &&
                 (props.open ? (
-                  <ChevronDown size="1.4em" />
+                  <ChevronDownIcon className="h-6 w-6" />
                 ) : (
-                  <ChevronRight size="1.4em" />
+                  <ChevronRightIcon className="h-6 w-6" />
                 ))}
               {props.historyNode.observation?.title ||
                 (props.historyNode.step.name as any)}
@@ -195,7 +195,7 @@ function StepContainer(props: StepContainerProps) {
                     client?.showLogsAtIndex(props.index);
                   }}
                 >
-                  <MagnifyingGlass size="1.4em" />
+                  <MagnifyingGlassIcon className="h-6 w-6" />
                 </HeaderButtonWithText>
               )}
               <HeaderButtonWithText
@@ -210,9 +210,12 @@ function StepContainer(props: StepContainerProps) {
                 }
               >
                 {props.historyNode.active ? (
-                  <StopCircle size="1.6em" onClick={props.onDelete} />
+                  <StopCircleIcon
+                    className="h-6 w-6"
+                    onClick={props.onDelete}
+                  />
                 ) : (
-                  <XMark size="1.6em" onClick={props.onDelete} />
+                  <XMarkIcon className="h-6 w-6" onClick={props.onDelete} />
                 )}
               </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
@@ -223,7 +226,7 @@ function StepContainer(props: StepContainerProps) {
                     props.onRetry();
                   }}
                 >
-                  <ArrowPath size="1.6em" onClick={props.onRetry} />
+                  <ArrowPathIcon className="h-6 w-6" onClick={props.onRetry} />
                 </HeaderButtonWithText>
               ) : (
                 <></>
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 0ff3e74f..ed11851f 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
 import { buttonColor, secondaryDark, vscBackground } from ".";
 import HeaderButtonWithText from "./HeaderButtonWithText";
-import { Play, XMark } from "@styled-icons/heroicons-outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 import { RootStore } from "../redux/store";
 import { useSelector } from "react-redux";
 import { HistoryNode } from "../../../schema/HistoryNode";
@@ -37,7 +37,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
           }}
           text="Delete"
         >
-          <XMark size="1.6em" />
+          <XMarkIcon className="h-6 w-6" />
         </HeaderButtonWithText>
       </div>
     </StyledDiv>
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index bf8d8281..57185ea0 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -13,10 +13,10 @@ import { HistoryNode } from "../../../schema/HistoryNode";
 import StepContainer from "../components/StepContainer";
 import { GUIClientContext } from "../App";
 import {
-  BookOpen,
-  ChatBubbleOvalLeftEllipsis,
-  Trash,
-} from "@styled-icons/heroicons-outline";
+  BookOpenIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import ComboBox from "../components/ComboBox";
 import TextDialog from "../components/TextDialog";
 import HeaderButtonWithText from "../components/HeaderButtonWithText";
@@ -536,14 +536,14 @@ If you already have an LLM deployed on your own infrastructure, or would like to
           }}
           text="Clear"
         >
-          <Trash size="1.6em" />
+          <TrashIcon className="h-6 w-6" />
         </HeaderButtonWithText>
         <a
           href="https://continue.dev/docs/how-to-use-continue"
           className="no-underline"
         >
           <HeaderButtonWithText text="Docs">
-            <BookOpen size="1.6em" />
+            <BookOpenIcon className="h-6 w-6" />
           </HeaderButtonWithText>
         </a>
         <HeaderButtonWithText
@@ -557,7 +557,7 @@ If you already have an LLM deployed on your own infrastructure, or would like to
           }}
           text="Feedback"
         >
-          <ChatBubbleOvalLeftEllipsis size="1.6em" />
+          <ChatBubbleOvalLeftEllipsisIcon className="h-6 w-6" />
         </HeaderButtonWithText>
       </Footer>
     </>