feat:change icons

Author: mohamadch91

services/webui/package-lock.json

@@ -69,6 +69,7 @@
         "runtime-env-cra": "^0.2.4",
         "styled-components": "^6.1.8",
         "swagger-typescript-api": "^13.0.23",
+        "@remixicon/react": "^4.3.0",
         "swr": "^2.2.4",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"

services/webui/package.json

@@ -25,6 +25,7 @@ import {
     CommandLineIcon,
     UserIcon,
 } from '@heroicons/react/24/outline'
+import { RiChatSmileAiLine, RiChatSmileLine } from '@remixicon/react'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { Popover, Transition } from '@headlessui/react'
 import { Fragment, useEffect, useState } from 'react'
@@ -274,7 +275,7 @@ export default function Sidebar({ currentPage }: ISidebar) {
             {
                 name: 'Agent AI',
                 page: 'ai',
-                icon: UserIcon,
+                icon: RiChatSmileAiLine,
                 isPreview: true,
             },
 

services/webui/src/components/Layout/Sidebar/index.tsx

@@ -2,6 +2,7 @@ import { useState } from "react"
 import Agents from "../../components/AIComponents/Agents"
 import AIChat from "./chat/AIChat"
 import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline"
+import { RiArrowLeftLine, RiArrowRightLine } from "@remixicon/react"
 
 
 export default function AI() {
@@ -33,7 +34,7 @@ export default function AI() {
                                         className="text-slate-950 dark:text-slate-200 w-full justify-end flex pr-2 cursor-pointer"
                                         onClick={() => setIsOpen(false)}
                                     >
-                                        <ArrowRightIcon className="w-5" />
+                                        <RiArrowLeftLine className="w-5" />
                                     </span>
                                 </>
                             ) : (
@@ -42,7 +43,7 @@ export default function AI() {
                                         className="text-slate-950 dark:text-slate-200 w-full justify-start flex pr-2 cursor-pointer"
                                         onClick={() => setIsOpen(true)}
                                     >
-                                        <ArrowLeftIcon className="w-5" />
+                                        <RiArrowRightLine className="w-5" />
                                     </span>
                                 </>
                             )}