Hotfix UI

web/.yalc/image-canvas/package.json

@@ -5,7 +5,6 @@
     "@ant-design/icons": "^5.2.6",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
-    "@heroicons/react": "^2.1.5",
     "@ice/jsx-runtime": "^0.2.0",
     "@ice/runtime": "^1.2.7",
     "@swc/helpers": "^0.5.1",

web/apps/web/package.json

@@ -20,7 +20,6 @@
     "@dagrejs/dagre": "^1.1.4",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@heroicons/react": "^2.1.5",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@monaco-editor/react": "^4.6.0",
     "@paralleldrive/cuid2": "^2.2.2",
@@ -49,7 +48,7 @@
     "jsonpath-plus": "^9.0.0",
     "jsonschema": "^1.4.1",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.475.0",
+    "lucide-react": "^0.476.0",
     "mitt": "^3.0.1",
     "mobx": "^6.13.1",
     "mobx-react-lite": "^4.0.7",

web/apps/web/src/app/globals.css

@@ -10,6 +10,10 @@
   }
 }
 
+.lucide {
+  stroke-width: 1.5px;
+}
+
 .assistant-md-viewer {
   padding: 0;
 

web/apps/web/src/app/shadcn-playground/ShadcnPlayground.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 // import Editor, { useMonaco, loader } from '@monaco-editor/react';
-// import InformationCircleIcon from '@heroicons/react/24/outline/esm/InformationCircleIcon';
 import {
   Accordion,
   AccordionItem,

web/apps/web/src/components/app/chat-sheet/index.tsx

@@ -2,11 +2,10 @@
 
 'use client';
 
-import { LoadingOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
 import { NodeIdEnum } from '@shellagent/flow-engine';
 import { getDefaultValueBySchema, TValues } from '@shellagent/form-engine';
-import { Drawer } from '@shellagent/ui';
+import { Drawer, Spinner } from '@shellagent/ui';
 import { usePrevious } from 'ahooks';
 import { useInjection } from 'inversify-react';
 import { difference, isEmpty, isEqual, keys, omit } from 'lodash-es';
@@ -120,7 +119,7 @@ const RunSheet: React.FC<{}> = observer(() => {
                 {appBuilderChatModel.previousTasksNumber > 1 ? 's' : ''} ahead)
               </span>
             )}
-            {appBuilderChatModel.isRunLoading ? <LoadingOutlined /> : null}
+            {appBuilderChatModel.isRunLoading ? <Spinner /> : null}
           </span>
         }
         onClose={appBuilderChatModel.closeRunDrawer}

web/apps/web/src/components/app/edges/event-button.tsx

@@ -1,4 +1,4 @@
-import CodeBracketSquareIcon from '@heroicons/react/24/outline/CodeBracketSquareIcon';
+import { SquareCodeIcon } from 'lucide-react';
 import React, { forwardRef } from 'react';
 
 export const EventButton = forwardRef<
@@ -17,7 +17,7 @@ export const EventButton = forwardRef<
       }}
       onClick={onClick}
       className="absolute nodrag nopan border rounded-default border-default bg-white font-medium text-xs z-99 px-1.5 py-0.5 cursor-pointer hover:bg-normal-primary-hover pointer-events-all">
-      <CodeBracketSquareIcon className="w-3.5 h-3.5 pointer-events-none" />
+      <SquareCodeIcon className="w-3.5 h-3.5 pointer-events-none" />
     </div>
   );
 });

web/apps/web/src/components/app/editable-title/index.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { PencilSquare, Heading, Input, Text } from '@shellagent/ui';
+import { Heading, IconButton, Input, Text } from '@shellagent/ui';
 import { useState } from 'react';
+import { SquarePenIcon } from 'lucide-react';
 
 import { validateCustomKey } from '@/stores/app/utils/validator';
 
@@ -44,11 +45,9 @@ export const EditableTitle: React.FC<EditableTitleProps> = ({
         <Heading size="h4" className="max-w-56 truncate">
           {value}
         </Heading>
-        <PencilSquare
+        <SquarePenIcon
           aria-label="Edit title"
-          size="sm"
-          color="subtle"
-          className="ml-1 cursor-pointer"
+          className="w-4 h-4 shrink-0 ml-1 cursor-pointer text-subtle"
           onClick={() => setIsEditing(true)}
         />
       </div>

web/apps/web/src/components/app/export-dialog/index.tsx

@@ -1,8 +1,3 @@
-import { ChevronDownIcon } from '@heroicons/react/16/solid';
-import {
-  ExclamationTriangleIcon,
-  XMarkIcon,
-} from '@heroicons/react/24/outline';
 import {
   Heading,
   AlertDialog,
@@ -13,18 +8,19 @@ import {
   AlertDialogFooter,
   Button,
   AlertDialogPortal,
-  ExportIcon,
   Text,
   Separator,
   TooltipProvider,
   Tooltip,
   TooltipTrigger,
   TooltipContent,
   IconButton,
+  ExportIcon,
 } from '@shellagent/ui';
 import { useBoolean } from 'ahooks';
 import { useInjection } from 'inversify-react';
 import { isEmpty } from 'lodash-es';
+import { ChevronDownIcon, XIcon, TriangleAlertIcon } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import React, { cloneElement, ReactElement } from 'react';
 
@@ -82,7 +78,7 @@ export const ExportDialog = observer(
                 </Button>
               </TooltipTrigger>
               {disabled ? (
-                <TooltipContent>please fix the issues</TooltipContent>
+                <TooltipContent>Please fix the issues</TooltipContent>
               ) : null}
             </Tooltip>
           </TooltipProvider>
@@ -94,9 +90,9 @@ export const ExportDialog = observer(
                 <AlertDialogTitle>
                   <div className="flex justify-between items-center">
                     <span className="rounded-full p-2 bg-warning-alt">
-                      <ExclamationTriangleIcon className="w-6 h-6 text-warning-default" />
+                      <TriangleAlertIcon className="w-6 h-6 text-warning-default" />
                     </span>
-                    <IconButton size="md" icon={XMarkIcon} onClick={onClose} />
+                    <IconButton size="md" icon={XIcon} onClick={onClose} />
                   </div>
                 </AlertDialogTitle>
               </AlertDialogHeader>

web/apps/web/src/components/app/header/extra-action/index.tsx

@@ -1,6 +1,6 @@
 // 'use client';
 
-// import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
+// import { EllipsisVerticalIcon } from 'lucide-react';
 // import {
 //   DropdownMenu,
 //   DropdownMenuTrigger,

web/apps/web/src/components/app/header/index.tsx

@@ -1,8 +1,3 @@
-import {
-  ArrowLeftIcon,
-  PencilSquareIcon,
-  PlayIcon,
-} from '@heroicons/react/24/outline';
 import {
   Button,
   Heading,
@@ -14,6 +9,7 @@ import {
   TooltipContent,
 } from '@shellagent/ui';
 import { useInjection } from 'inversify-react';
+import { PlayIcon, SquarePenIcon, ArrowLeftIcon } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
@@ -58,7 +54,7 @@ export const Header = observer(() => {
               <Heading size="h3">{appBuilder.metadata?.name}</Heading>
               <IconButton
                 onClick={() => appBuilder.setAppEditing(true)}
-                icon={PencilSquareIcon}
+                icon={SquarePenIcon}
                 variant="plain"
                 size="sm"
               />
@@ -88,7 +84,7 @@ export const Header = observer(() => {
               </Button>
             </TooltipTrigger>
             {appBuilder.runDisabled ? (
-              <TooltipContent>please fix the issues</TooltipContent>
+              <TooltipContent>Please fix the issues</TooltipContent>
             ) : null}
           </Tooltip>
         </TooltipProvider>

web/apps/web/src/components/app/header/publish/index.tsx

@@ -1,9 +1,3 @@
-import {
-  ArrowUpRightIcon,
-  ArrowUturnLeftIcon,
-  ChevronDownIcon,
-  XMarkIcon,
-} from '@heroicons/react/24/outline';
 import {
   Button,
   Heading,
@@ -15,14 +9,19 @@ import {
   TooltipTrigger,
   TooltipContent,
   ScrollArea,
-  SaveIcon,
 } from '@shellagent/ui';
 import { Dropdown } from 'antd';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useInjection } from 'inversify-react';
 import { isEmpty } from 'lodash-es';
-import { Check } from 'lucide-react';
+import {
+  Check,
+  Undo2Icon,
+  ChevronDownIcon,
+  XIcon,
+  SaveIcon,
+} from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import Link from 'next/link';
 import React, { useCallback } from 'react';
@@ -175,7 +174,7 @@ function Publish({ app_id, version_name, loading }: PublishProps) {
               size="md"
               variant="primary"
               color="tertiary"
-              icon={XMarkIcon}>
+              icon={XIcon}>
               Cancel
             </Button>
           </Link>
@@ -187,7 +186,7 @@ function Publish({ app_id, version_name, loading }: PublishProps) {
             size="md"
             variant="primary"
             color="brand"
-            icon={ArrowUturnLeftIcon}>
+            icon={Undo2Icon}>
             Restore
           </Button>
         </>

web/apps/web/src/components/app/node-form/widgets/button-editor.tsx

@@ -1,9 +1,8 @@
-import PlusIcon from '@heroicons/react/24/outline/esm/PlusIcon';
 import { useReactFlowStore } from '@shellagent/flow-engine';
 import { Button as IButtonType } from '@shellagent/shared/protocol/render-button';
 import { getButtonDisplayName } from '@shellagent/shared/utils';
-import { Button, XMark, IconButton, useFormContext } from '@shellagent/ui';
-import { useHover } from 'ahooks';
+import { Button, XMark, useFormContext } from '@shellagent/ui';
+import { PlusIcon } from 'lucide-react';
 import { useInjection } from 'inversify-react';
 import { debounce } from 'lodash-es';
 import { useRef, useCallback } from 'react';
@@ -32,7 +31,6 @@ const ButtonItem = ({
   onButtonMove: (startIndex: number, endIndex: number) => void;
 }) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const isHovered = useHover(buttonRef);
 
   const [{ isDragging }, drag, preview] = useDrag({
     type: 'BUTTON',

web/apps/web/src/components/app/node-form/widgets/context-selector.tsx

@@ -1,9 +1,4 @@
 /* eslint-disable */
-import {
-  CheckIcon,
-  RectangleStackIcon,
-  Square3Stack3DIcon,
-} from '@heroicons/react/24/outline';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,6 +17,7 @@ import {
   ContextModeEnum,
 } from '@shellagent/shared/protocol/extend-config';
 import { systemContextSchema } from '@shellagent/shared/protocol/pro-config';
+import { CheckIcon, GalleryVerticalEnd, LayersIcon } from 'lucide-react';
 
 interface VariableSelectProps {
   name: string;
@@ -40,12 +36,12 @@ const ModeOptions: Array<{
   {
     label: 'Custom Context Name',
     value: ContextModeEnum.Enum.custom,
-    icon: RectangleStackIcon,
+    icon: GalleryVerticalEnd,
   },
   {
     label: 'Select System Context',
     value: ContextModeEnum.Enum.system,
-    icon: Square3Stack3DIcon,
+    icon: LayersIcon,
   },
 ];
 

web/apps/web/src/components/app/node-form/widgets/message-preview.tsx

@@ -1,11 +1,8 @@
-import MicrophoneIcon from '@heroicons/react/24/outline/esm/MicrophoneIcon';
-import PlusCircleIcon from '@heroicons/react/24/outline/esm/PlusCircleIcon';
 import {
   CustomHandle,
   Position,
   Connection,
   useReactFlowStore,
-  getColor,
   getColorByIndex,
 } from '@shellagent/flow-engine';
 import { Button as IButtonType } from '@shellagent/shared/protocol/render-button';
@@ -18,6 +15,7 @@ import { getNewKey } from '@shellagent/shared/utils';
 import { IconButton, Button, Text } from '@shellagent/ui';
 import clsx from 'clsx';
 import { useInjection } from 'inversify-react';
+import { CirclePlusIcon, MicIcon } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import { useMemo, useState } from 'react';
 
@@ -90,7 +88,7 @@ const InputPreview = () => {
           className="ml-1 flex-shrink-0 hover:bg-transparent"
           variant="plain-gray"
           size="sm"
-          icon={PlusCircleIcon}
+          icon={CirclePlusIcon}
         />
         <Text className="flex-1 text-sm text-disabled block w-full text-center font-normal">
           Write a message
@@ -99,7 +97,7 @@ const InputPreview = () => {
           className="mr-1 flex-shrink-0 hover:bg-transparent"
           variant="plain-gray"
           size="sm"
-          icon={MicrophoneIcon}
+          icon={MicIcon}
         />
         <CustomHandle
           id={handleId}

web/apps/web/src/components/app/node-form/widgets/mode-select.tsx

@@ -1,9 +1,3 @@
-import {
-  CheckIcon,
-  CodeBracketSquareIcon,
-  RectangleStackIcon,
-  Square3Stack3DIcon,
-} from '@heroicons/react/24/outline';
 import {
   useFormEngineContext,
   getDefaultValueBySchema,
@@ -26,6 +20,12 @@ import {
 } from '@shellagent/ui';
 import { useInjection } from 'inversify-react';
 import { get } from 'lodash-es';
+import {
+  CheckIcon,
+  SquareCodeIcon,
+  LayersIcon,
+  GalleryVerticalEnd,
+} from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import { useMemo, useCallback, useEffect } from 'react';
 
@@ -40,17 +40,17 @@ const ModeOptions: Array<{
   {
     label: 'UI Mode',
     value: FieldModeEnum.Enum.ui,
-    icon: RectangleStackIcon,
+    icon: GalleryVerticalEnd,
   },
   {
     label: 'Ref Mode',
     value: FieldModeEnum.Enum.ref,
-    icon: Square3Stack3DIcon,
+    icon: LayersIcon,
   },
   {
     label: 'Code mode',
     value: FieldModeEnum.Enum.raw,
-    icon: CodeBracketSquareIcon,
+    icon: SquareCodeIcon,
   },
 ];
 
@@ -105,7 +105,7 @@ export const ModeSelect = observer(({ name, onChange }: IModeSelectProps) => {
   const IconMode = useMemo(
     () =>
       options.find(item => item.value === currentMode)?.icon ??
-      RectangleStackIcon,
+      GalleryVerticalEnd,
     [options, currentMode],
   );