Skip to content

Commit 0c53b5c

Browse files
ikun97ikun97
authored
Hotfix UI (#365)
1 parent a6055cb commit 0c53b5c

File tree

75 files changed

+448
-842
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+448
-842
lines changed

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

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"@ant-design/icons": "^5.2.6",
66
"@emoji-mart/data": "^1.1.2",
77
"@emoji-mart/react": "^1.1.1",
8-
"@heroicons/react": "^2.1.5",
98
"@ice/jsx-runtime": "^0.2.0",
109
"@ice/runtime": "^1.2.7",
1110
"@swc/helpers": "^0.5.1",

‎web/apps/web/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
"@dagrejs/dagre": "^1.1.4",
2121
"@emotion/react": "^11.13.0",
2222
"@emotion/styled": "^11.13.0",
23-
"@heroicons/react": "^2.1.5",
2423
"@microsoft/fetch-event-source": "^2.0.1",
2524
"@monaco-editor/react": "^4.6.0",
2625
"@paralleldrive/cuid2": "^2.2.2",
@@ -49,7 +48,7 @@
4948
"jsonpath-plus": "^9.0.0",
5049
"jsonschema": "^1.4.1",
5150
"lodash-es": "^4.17.21",
52-
"lucide-react": "^0.475.0",
51+
"lucide-react": "^0.476.0",
5352
"mitt": "^3.0.1",
5453
"mobx": "^6.13.1",
5554
"mobx-react-lite": "^4.0.7",

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

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
}
1111
}
1212

13+
.lucide {
14+
stroke-width: 1.5px;
15+
}
16+
1317
.assistant-md-viewer {
1418
padding: 0;
1519

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use client';
22

33
// import Editor, { useMonaco, loader } from '@monaco-editor/react';
4-
// import InformationCircleIcon from '@heroicons/react/24/outline/esm/InformationCircleIcon';
54
import {
65
Accordion,
76
AccordionItem,

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22

33
'use client';
44

5-
import { LoadingOutlined } from '@ant-design/icons';
65
import { css } from '@emotion/react';
76
import { NodeIdEnum } from '@shellagent/flow-engine';
87
import { getDefaultValueBySchema, TValues } from '@shellagent/form-engine';
9-
import { Drawer } from '@shellagent/ui';
8+
import { Drawer, Spinner } from '@shellagent/ui';
109
import { usePrevious } from 'ahooks';
1110
import { useInjection } from 'inversify-react';
1211
import { difference, isEmpty, isEqual, keys, omit } from 'lodash-es';
@@ -120,7 +119,7 @@ const RunSheet: React.FC<{}> = observer(() => {
120119
{appBuilderChatModel.previousTasksNumber > 1 ? 's' : ''} ahead)
121120
</span>
122121
)}
123-
{appBuilderChatModel.isRunLoading ? <LoadingOutlined /> : null}
122+
{appBuilderChatModel.isRunLoading ? <Spinner /> : null}
124123
</span>
125124
}
126125
onClose={appBuilderChatModel.closeRunDrawer}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import CodeBracketSquareIcon from '@heroicons/react/24/outline/CodeBracketSquareIcon';
1+
import { SquareCodeIcon } from 'lucide-react';
22
import React, { forwardRef } from 'react';
33

44
export const EventButton = forwardRef<
@@ -17,7 +17,7 @@ export const EventButton = forwardRef<
1717
}}
1818
onClick={onClick}
1919
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">
20-
<CodeBracketSquareIcon className="w-3.5 h-3.5 pointer-events-none" />
20+
<SquareCodeIcon className="w-3.5 h-3.5 pointer-events-none" />
2121
</div>
2222
);
2323
});

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

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
'use client';
22

3-
import { PencilSquare, Heading, Input, Text } from '@shellagent/ui';
3+
import { Heading, IconButton, Input, Text } from '@shellagent/ui';
44
import { useState } from 'react';
5+
import { SquarePenIcon } from 'lucide-react';
56

67
import { validateCustomKey } from '@/stores/app/utils/validator';
78

@@ -44,11 +45,9 @@ export const EditableTitle: React.FC<EditableTitleProps> = ({
4445
<Heading size="h4" className="max-w-56 truncate">
4546
{value}
4647
</Heading>
47-
<PencilSquare
48+
<SquarePenIcon
4849
aria-label="Edit title"
49-
size="sm"
50-
color="subtle"
51-
className="ml-1 cursor-pointer"
50+
className="w-4 h-4 shrink-0 ml-1 cursor-pointer text-subtle"
5251
onClick={() => setIsEditing(true)}
5352
/>
5453
</div>

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

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import { ChevronDownIcon } from '@heroicons/react/16/solid';
2-
import {
3-
ExclamationTriangleIcon,
4-
XMarkIcon,
5-
} from '@heroicons/react/24/outline';
61
import {
72
Heading,
83
AlertDialog,
@@ -13,18 +8,19 @@ import {
138
AlertDialogFooter,
149
Button,
1510
AlertDialogPortal,
16-
ExportIcon,
1711
Text,
1812
Separator,
1913
TooltipProvider,
2014
Tooltip,
2115
TooltipTrigger,
2216
TooltipContent,
2317
IconButton,
18+
ExportIcon,
2419
} from '@shellagent/ui';
2520
import { useBoolean } from 'ahooks';
2621
import { useInjection } from 'inversify-react';
2722
import { isEmpty } from 'lodash-es';
23+
import { ChevronDownIcon, XIcon, TriangleAlertIcon } from 'lucide-react';
2824
import { observer } from 'mobx-react-lite';
2925
import React, { cloneElement, ReactElement } from 'react';
3026

@@ -82,7 +78,7 @@ export const ExportDialog = observer(
8278
</Button>
8379
</TooltipTrigger>
8480
{disabled ? (
85-
<TooltipContent>please fix the issues</TooltipContent>
81+
<TooltipContent>Please fix the issues</TooltipContent>
8682
) : null}
8783
</Tooltip>
8884
</TooltipProvider>
@@ -94,9 +90,9 @@ export const ExportDialog = observer(
9490
<AlertDialogTitle>
9591
<div className="flex justify-between items-center">
9692
<span className="rounded-full p-2 bg-warning-alt">
97-
<ExclamationTriangleIcon className="w-6 h-6 text-warning-default" />
93+
<TriangleAlertIcon className="w-6 h-6 text-warning-default" />
9894
</span>
99-
<IconButton size="md" icon={XMarkIcon} onClick={onClose} />
95+
<IconButton size="md" icon={XIcon} onClick={onClose} />
10096
</div>
10197
</AlertDialogTitle>
10298
</AlertDialogHeader>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// 'use client';
22

3-
// import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
3+
// import { EllipsisVerticalIcon } from 'lucide-react';
44
// import {
55
// DropdownMenu,
66
// DropdownMenuTrigger,

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

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import {
2-
ArrowLeftIcon,
3-
PencilSquareIcon,
4-
PlayIcon,
5-
} from '@heroicons/react/24/outline';
61
import {
72
Button,
83
Heading,
@@ -14,6 +9,7 @@ import {
149
TooltipContent,
1510
} from '@shellagent/ui';
1611
import { useInjection } from 'inversify-react';
12+
import { PlayIcon, SquarePenIcon, ArrowLeftIcon } from 'lucide-react';
1713
import { observer } from 'mobx-react-lite';
1814
import Link from 'next/link';
1915
import { useSearchParams } from 'next/navigation';
@@ -58,7 +54,7 @@ export const Header = observer(() => {
5854
<Heading size="h3">{appBuilder.metadata?.name}</Heading>
5955
<IconButton
6056
onClick={() => appBuilder.setAppEditing(true)}
61-
icon={PencilSquareIcon}
57+
icon={SquarePenIcon}
6258
variant="plain"
6359
size="sm"
6460
/>
@@ -88,7 +84,7 @@ export const Header = observer(() => {
8884
</Button>
8985
</TooltipTrigger>
9086
{appBuilder.runDisabled ? (
91-
<TooltipContent>please fix the issues</TooltipContent>
87+
<TooltipContent>Please fix the issues</TooltipContent>
9288
) : null}
9389
</Tooltip>
9490
</TooltipProvider>

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

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
import {
2-
ArrowUpRightIcon,
3-
ArrowUturnLeftIcon,
4-
ChevronDownIcon,
5-
XMarkIcon,
6-
} from '@heroicons/react/24/outline';
71
import {
82
Button,
93
Heading,
@@ -15,14 +9,19 @@ import {
159
TooltipTrigger,
1610
TooltipContent,
1711
ScrollArea,
18-
SaveIcon,
1912
} from '@shellagent/ui';
2013
import { Dropdown } from 'antd';
2114
import dayjs from 'dayjs';
2215
import relativeTime from 'dayjs/plugin/relativeTime';
2316
import { useInjection } from 'inversify-react';
2417
import { isEmpty } from 'lodash-es';
25-
import { Check } from 'lucide-react';
18+
import {
19+
Check,
20+
Undo2Icon,
21+
ChevronDownIcon,
22+
XIcon,
23+
SaveIcon,
24+
} from 'lucide-react';
2625
import { observer } from 'mobx-react-lite';
2726
import Link from 'next/link';
2827
import React, { useCallback } from 'react';
@@ -175,7 +174,7 @@ function Publish({ app_id, version_name, loading }: PublishProps) {
175174
size="md"
176175
variant="primary"
177176
color="tertiary"
178-
icon={XMarkIcon}>
177+
icon={XIcon}>
179178
Cancel
180179
</Button>
181180
</Link>
@@ -187,7 +186,7 @@ function Publish({ app_id, version_name, loading }: PublishProps) {
187186
size="md"
188187
variant="primary"
189188
color="brand"
190-
icon={ArrowUturnLeftIcon}>
189+
icon={Undo2Icon}>
191190
Restore
192191
</Button>
193192
</>

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import PlusIcon from '@heroicons/react/24/outline/esm/PlusIcon';
21
import { useReactFlowStore } from '@shellagent/flow-engine';
32
import { Button as IButtonType } from '@shellagent/shared/protocol/render-button';
43
import { getButtonDisplayName } from '@shellagent/shared/utils';
5-
import { Button, XMark, IconButton, useFormContext } from '@shellagent/ui';
6-
import { useHover } from 'ahooks';
4+
import { Button, XMark, useFormContext } from '@shellagent/ui';
5+
import { PlusIcon } from 'lucide-react';
76
import { useInjection } from 'inversify-react';
87
import { debounce } from 'lodash-es';
98
import { useRef, useCallback } from 'react';
@@ -32,7 +31,6 @@ const ButtonItem = ({
3231
onButtonMove: (startIndex: number, endIndex: number) => void;
3332
}) => {
3433
const buttonRef = useRef<HTMLButtonElement>(null);
35-
const isHovered = useHover(buttonRef);
3634

3735
const [{ isDragging }, drag, preview] = useDrag({
3836
type: 'BUTTON',

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

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
/* eslint-disable */
2-
import {
3-
CheckIcon,
4-
RectangleStackIcon,
5-
Square3Stack3DIcon,
6-
} from '@heroicons/react/24/outline';
72
import {
83
DropdownMenu,
94
DropdownMenuContent,
@@ -22,6 +17,7 @@ import {
2217
ContextModeEnum,
2318
} from '@shellagent/shared/protocol/extend-config';
2419
import { systemContextSchema } from '@shellagent/shared/protocol/pro-config';
20+
import { CheckIcon, GalleryVerticalEnd, LayersIcon } from 'lucide-react';
2521

2622
interface VariableSelectProps {
2723
name: string;
@@ -40,12 +36,12 @@ const ModeOptions: Array<{
4036
{
4137
label: 'Custom Context Name',
4238
value: ContextModeEnum.Enum.custom,
43-
icon: RectangleStackIcon,
39+
icon: GalleryVerticalEnd,
4440
},
4541
{
4642
label: 'Select System Context',
4743
value: ContextModeEnum.Enum.system,
48-
icon: Square3Stack3DIcon,
44+
icon: LayersIcon,
4945
},
5046
];
5147

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

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import MicrophoneIcon from '@heroicons/react/24/outline/esm/MicrophoneIcon';
2-
import PlusCircleIcon from '@heroicons/react/24/outline/esm/PlusCircleIcon';
31
import {
42
CustomHandle,
53
Position,
64
Connection,
75
useReactFlowStore,
8-
getColor,
96
getColorByIndex,
107
} from '@shellagent/flow-engine';
118
import { Button as IButtonType } from '@shellagent/shared/protocol/render-button';
@@ -18,6 +15,7 @@ import { getNewKey } from '@shellagent/shared/utils';
1815
import { IconButton, Button, Text } from '@shellagent/ui';
1916
import clsx from 'clsx';
2017
import { useInjection } from 'inversify-react';
18+
import { CirclePlusIcon, MicIcon } from 'lucide-react';
2119
import { observer } from 'mobx-react-lite';
2220
import { useMemo, useState } from 'react';
2321

@@ -90,7 +88,7 @@ const InputPreview = () => {
9088
className="ml-1 flex-shrink-0 hover:bg-transparent"
9189
variant="plain-gray"
9290
size="sm"
93-
icon={PlusCircleIcon}
91+
icon={CirclePlusIcon}
9492
/>
9593
<Text className="flex-1 text-sm text-disabled block w-full text-center font-normal">
9694
Write a message
@@ -99,7 +97,7 @@ const InputPreview = () => {
9997
className="mr-1 flex-shrink-0 hover:bg-transparent"
10098
variant="plain-gray"
10199
size="sm"
102-
icon={MicrophoneIcon}
100+
icon={MicIcon}
103101
/>
104102
<CustomHandle
105103
id={handleId}

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

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
import {
2-
CheckIcon,
3-
CodeBracketSquareIcon,
4-
RectangleStackIcon,
5-
Square3Stack3DIcon,
6-
} from '@heroicons/react/24/outline';
71
import {
82
useFormEngineContext,
93
getDefaultValueBySchema,
@@ -26,6 +20,12 @@ import {
2620
} from '@shellagent/ui';
2721
import { useInjection } from 'inversify-react';
2822
import { get } from 'lodash-es';
23+
import {
24+
CheckIcon,
25+
SquareCodeIcon,
26+
LayersIcon,
27+
GalleryVerticalEnd,
28+
} from 'lucide-react';
2929
import { observer } from 'mobx-react-lite';
3030
import { useMemo, useCallback, useEffect } from 'react';
3131

@@ -40,17 +40,17 @@ const ModeOptions: Array<{
4040
{
4141
label: 'UI Mode',
4242
value: FieldModeEnum.Enum.ui,
43-
icon: RectangleStackIcon,
43+
icon: GalleryVerticalEnd,
4444
},
4545
{
4646
label: 'Ref Mode',
4747
value: FieldModeEnum.Enum.ref,
48-
icon: Square3Stack3DIcon,
48+
icon: LayersIcon,
4949
},
5050
{
5151
label: 'Code mode',
5252
value: FieldModeEnum.Enum.raw,
53-
icon: CodeBracketSquareIcon,
53+
icon: SquareCodeIcon,
5454
},
5555
];
5656

@@ -105,7 +105,7 @@ export const ModeSelect = observer(({ name, onChange }: IModeSelectProps) => {
105105
const IconMode = useMemo(
106106
() =>
107107
options.find(item => item.value === currentMode)?.icon ??
108-
RectangleStackIcon,
108+
GalleryVerticalEnd,
109109
[options, currentMode],
110110
);
111111

0 commit comments

Comments
 (0)