@lobehub/chat 0.46.1 → 0.48.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 0.48.0](https://github.com/lobehub/lobe-chat/compare/v0.47.0...v0.48.0)
+
+<sup>Released on **2023-08-15**</sup>
+
+#### ✨ Features
+
+- **misc**: Import SiOpenai icon and replace 'Tag' component in chat feature.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Import SiOpenai icon and replace 'Tag' component in chat feature ([98b0352](https://github.com/lobehub/lobe-chat/commit/98b0352))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.47.0](https://github.com/lobehub/lobe-chat/compare/v0.46.1...v0.47.0)
+
+<sup>Released on **2023-08-15**</sup>
+
+#### ✨ Features
+
+- **misc**: Add and update UI elements and agent configuration.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add and update UI elements and agent configuration ([eb7fbee](https://github.com/lobehub/lobe-chat/commit/eb7fbee))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.46.1](https://github.com/lobehub/lobe-chat/compare/v0.46.0...v0.46.1)
 
 <sup>Released on **2023-08-14**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.46.1",
+  "version": "0.48.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/const/meta.ts

@@ -4,6 +4,4 @@ export const DEFAULT_AVATAR = '🤖';
 export const DEFAULT_USER_AVATAR = '😀';
 export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
 export const DEFAULT_AGENT_META: MetaData = {};
-
-export const DEFAULT_INBOX_AVATAR =
-  'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp';
+export const DEFAULT_INBOX_AVATAR = '🤯';

package/src/features/AgentSetting/AgentConfig/index.tsx

@@ -1,11 +1,10 @@
-import { Form, ItemGroup } from '@lobehub/ui';
+import { Form, ItemGroup, SliderWithInput } from '@lobehub/ui';
 import { ConfigProvider, Input, Segmented, Select, Switch } from 'antd';
 import { useTheme } from 'antd-style';
 import { debounce } from 'lodash-es';
 import { BrainCog, MessagesSquare } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import SliderWithInput from 'src/components/SliderWithInput';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { AgentAction } from '@/store/session/slices/agentConfig';

package/src/features/AgentSetting/AgentPrompt/index.tsx

@@ -13,11 +13,11 @@ import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
-  input: css`
-    border: 1px solid ${token.colorBorderSecondary};
-  `,
   markdown: css`
-    border: 1px solid transparent;
+    border: unset;
+  `,
+  textarea: css`
+    background: ${token.colorFillTertiary};
   `,
 }));
 
@@ -60,7 +60,7 @@ const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
           editButtonSize={'small'}
           editing={editing}
           height={'auto'}
-          inputType={'block'}
+          inputType={'ghost'}
           onChange={(e) => {
             updateConfig({ systemRole: e });
           }}

package/src/features/SideBar/BottomActions.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
+import { ActionIcon, DiscordIcon, Icon } from '@lobehub/ui';
 import { Dropdown, MenuProps, Upload } from 'antd';
 import {
   Feather,
@@ -14,7 +14,6 @@ import Router from 'next/router';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import DiscordIcon from '@/components/DiscordIcon';
 import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB } from '@/const/url';
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';

package/src/pages/chat/SessionList/CollapseGroup.tsx

@@ -0,0 +1,50 @@
+import { Icon } from '@lobehub/ui';
+import { Collapse, CollapseProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronDown } from 'lucide-react';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css, prefixCls, token }) => ({
+  container: css`
+    border-radius: 0;
+    .${prefixCls}-collapse-header {
+      padding-inline: 16px !important;
+      color: ${token.colorTextDescription} !important;
+
+      &:hover {
+        color: ${token.colorText} !important;
+        background: ${token.colorFillTertiary};
+      }
+    }
+    .${prefixCls}-collapse-content-box {
+      padding: 0 !important;
+    }
+  `,
+  icon: css`
+    transition: all 100ms ${token.motionEaseOut};
+  `,
+}));
+
+const CollapseGroup = memo<CollapseProps>((props) => {
+  const { styles } = useStyles();
+  return (
+    <Collapse
+      bordered={false}
+      className={styles.container}
+      expandIcon={({ isActive }) => (
+        <Icon
+          className={styles.icon}
+          icon={ChevronDown}
+          size={{ fontSize: 16 }}
+          style={isActive ? {} : { rotate: '-90deg' }}
+        />
+      )}
+      expandIconPosition={'end'}
+      ghost
+      size={'small'}
+      {...props}
+    />
+  );
+});
+
+export default CollapseGroup;

package/src/pages/chat/SessionList/Inbox.tsx

@@ -1,21 +1,39 @@
 import { Avatar, List } from '@lobehub/ui';
+import { useHover } from 'ahooks';
 import Link from 'next/link';
-import { memo } from 'react';
+import { memo, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useSessionStore } from '@/store/session';
 
+const { Item } = List;
+
 const Inbox = memo(() => {
+  const ref = useRef(null);
+  const isHovering = useHover(ref);
   const { t } = useTranslation('common');
   const [activeId] = useSessionStore((s) => [s.activeId]);
 
+  const avatarRender = useMemo(
+    () => (
+      <Avatar
+        animation={isHovering}
+        avatar={DEFAULT_INBOX_AVATAR}
+        size={46}
+        style={{ padding: 3 }}
+      />
+    ),
+    [isHovering],
+  );
+
   return (
     <Link href={'/chat'}>
-      <List.Item
+      <Item
         active={activeId === INBOX_SESSION_ID}
-        avatar={<Avatar avatar={DEFAULT_INBOX_AVATAR} size={46} style={{ padding: 3 }} />}
+        avatar={avatarRender}
+        ref={ref}
         style={{ alignItems: 'center' }}
         title={t('inbox.title')}
       />

package/src/pages/chat/SessionList/List/AddButton.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '@lobehub/ui';
+import { Button, type ButtonProps } from 'antd';
+import { Plus } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+
+const AddButton = memo<ButtonProps>((props) => {
+  const { t } = useTranslation('common');
+  const createSession = useSessionStore((s) => s.createSession);
+  return (
+    <Flexbox style={{ margin: '12px 16px' }}>
+      <Button block icon={<Icon icon={Plus} />} onClick={createSession} {...props}>
+        {t('newAgent')}
+      </Button>
+    </Flexbox>
+  );
+});
+
+export default AddButton;

package/src/pages/chat/SessionList/List/Item/index.tsx

@@ -1,6 +1,6 @@
-import { Avatar, List } from '@lobehub/ui';
+import { SiOpenai } from '@icons-pack/react-simple-icons';
+import { Avatar, List, Tag } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { Tag } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -88,7 +88,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
     () =>
       !showModel ? undefined : (
         <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap' }}>
-          {showModel && <Tag bordered={false}>{model}</Tag>}
+          {showModel && <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>}
         </Flexbox>
       ),
     [showModel, model],

package/src/pages/chat/SessionList/List/index.tsx

@@ -5,6 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
+import AddButton from './AddButton';
 import SessionItem from './Item';
 import SkeletonList from './SkeletonList';
 
@@ -15,7 +16,7 @@ const SessionList = memo(() => {
 
   return !isInit ? (
     <SkeletonList />
-  ) : (
+  ) : list.length > 0 ? (
     <Flexbox>
       {list.map(({ id }) => (
         <Link href={`/chat/${id}`} key={id}>
@@ -23,6 +24,8 @@ const SessionList = memo(() => {
         </Link>
       ))}
     </Flexbox>
+  ) : (
+    <AddButton />
   );
 });
 

package/src/pages/chat/SessionList/index.tsx

@@ -1,10 +1,12 @@
 import { DraggablePanelBody } from '@lobehub/ui';
-import { memo } from 'react';
+import { CollapseProps } from 'antd';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import FolderPanel from '@/features/FolderPanel';
 
+import CollapseGroup from './CollapseGroup';
 import Header from './Header';
 import Inbox from './Inbox';
 import SessionList from './List';
@@ -12,17 +14,24 @@ import SessionList from './List';
 export const Sessions = memo(() => {
   const { t } = useTranslation('common');
 
+  const items: CollapseProps['items'] = useMemo(
+    () => [
+      {
+        children: <SessionList />,
+        key: 'sessionList',
+        label: t('sessionList'),
+      },
+    ],
+    [],
+  );
+
   return (
     <FolderPanel>
       <Header />
       <DraggablePanelBody style={{ padding: 0 }}>
-        <Flexbox gap={8}>
+        <Flexbox>
           <Inbox />
-
-          <Flexbox paddingInline={20} style={{ fontSize: 12, marginTop: 8 }}>
-            {t('sessionList')}
-          </Flexbox>
-          <SessionList />
+          <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
         </Flexbox>
       </DraggablePanelBody>
     </FolderPanel>

package/src/pages/chat/[id]/setting/Header.tsx

@@ -1,11 +1,10 @@
-import { ActionIcon, ChatHeader } from '@lobehub/ui';
+import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { Dropdown, MenuProps } from 'antd';
 import { FolderOutput, Share2 } from 'lucide-react';
 import Router from 'next/router';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import HeaderTitle from '@/components/HeaderTitle';
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { useSessionStore } from '@/store/session';
 
@@ -39,7 +38,7 @@ const Header = memo(() => {
 
   return (
     <ChatHeader
-      left={<HeaderTitle title={t('header.session')} />}
+      left={<ChatHeaderTitle title={t('header.session')} />}
       onBackClick={() => Router.back()}
       right={
         <>

package/src/pages/chat/features/Conversation/ChatList/MessageExtra.tsx

@@ -1,8 +1,9 @@
+import { SiOpenai } from '@icons-pack/react-simple-icons';
+import { Tag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Tag from '@/components/Tag';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 
@@ -44,7 +45,7 @@ const MessageExtra = ({
 
   const modelTag = (
     <div>
-      <Tag>{extra?.fromModel as string}</Tag>
+      <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
     </div>
   );
 

package/src/pages/chat/features/Conversation/Input/Action.tsx

@@ -1,11 +1,10 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, SliderWithInput } from '@lobehub/ui';
 import { Dropdown, Popover, Switch } from 'antd';
 import { BrainCog, Thermometer, Timer, TimerOff } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import SliderWithInput from '@/components/SliderWithInput';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 

package/src/pages/chat/features/Header/PluginTag.tsx

@@ -1,11 +1,10 @@
-import { Avatar, Icon } from '@lobehub/ui';
+import { Avatar, Icon, Tag } from '@lobehub/ui';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Tag from '@/components/Tag';
 import { PluginsMap } from '@/plugins';
 
 export interface PluginTagProps {

package/src/pages/chat/features/Header/index.tsx

@@ -1,5 +1,5 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
+import { ActionIcon, Avatar, ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
 import Router from 'next/router';
@@ -7,8 +7,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderTitle from '@/components/HeaderTitle';
-import Tag from '@/components/Tag';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
@@ -56,14 +54,11 @@ const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
         ) : (
           <Flexbox align={'flex-start'} gap={12} horizontal>
             <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
-            <HeaderTitle
+            <ChatHeaderTitle
               desc={displayDesc}
               tag={
                 <>
-                  <Tag>
-                    <SiOpenai size={'11px'} style={{ marginTop: 2 }} />
-                    {model}
-                  </Tag>
+                  <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
                   {plugins?.length > 0 && <PluginTag plugins={plugins} />}
                 </>
               }

package/src/pages/chat/features/Sidebar/Topic/DefaultContent.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { Tag, Typography } from 'antd';
+import { Icon, Tag } from '@lobehub/ui';
+import { Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { MessageSquareDashed } from 'lucide-react';
 import { memo } from 'react';

package/src/pages/settings/Header.tsx

@@ -1,18 +1,16 @@
-import { ChatHeader } from '@lobehub/ui';
+import { ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
 import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import pkg from '@/../package.json';
-import HeaderTitle from '@/components/HeaderTitle';
-import Tag from '@/components/Tag';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
 
   return (
     <ChatHeader
-      left={<HeaderTitle tag={<Tag>{`v${pkg.version}`}</Tag>} title={t('header.global')} />}
+      left={<ChatHeaderTitle tag={<Tag>{`v${pkg.version}`}</Tag>} title={t('header.global')} />}
       onBackClick={() => Router.back()}
       showBackButton
     />

package/src/pages/settings/Settings/Common.tsx

@@ -1,4 +1,4 @@
-import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
+import { Form, type ItemGroup, SliderWithInput, ThemeSwitch } from '@lobehub/ui';
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { changeLanguage } from 'i18next';
@@ -6,7 +6,6 @@ import { debounce } from 'lodash-es';
 import { AppWindow, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import SliderWithInput from 'src/components/SliderWithInput';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';

package/src/pages/welcome/Footer/index.tsx

@@ -1,10 +1,9 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, DiscordIcon } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { Book, Github } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Discord from '@/components/DiscordIcon';
 import { CHANGELOG, DISCORD, GITHUB } from '@/const/url';
 
 const Footer = memo(() => {
@@ -14,7 +13,11 @@ const Footer = memo(() => {
     <Flexbox align={'center'} horizontal justify={'space-between'} style={{ padding: 16 }}>
       <span style={{ color: theme.colorTextDescription }}>©{new Date().getFullYear()} LobeHub</span>
       <Flexbox horizontal>
-        <ActionIcon icon={Discord} onClick={() => window.open(DISCORD, '__blank')} size={'site'} />
+        <ActionIcon
+          icon={DiscordIcon}
+          onClick={() => window.open(DISCORD, '__blank')}
+          size={'site'}
+        />
         <ActionIcon icon={Book} onClick={() => window.open(CHANGELOG, '__blank')} size={'site'} />
         <ActionIcon icon={Github} onClick={() => window.open(GITHUB, '__blank')} size={'site'} />
       </Flexbox>

package/src/store/session/slices/chat/selectors/chat.ts

@@ -51,7 +51,7 @@ export const currentChatsWithGuideMessage = (s: SessionStore): ChatMessage[] =>
 
   const [activeId, isInbox] = [s.activeId, s.activeId === INBOX_SESSION_ID];
   const systemRole = agentSelectors.currentAgentSystemRole(s);
-
+  const meta = agentSelectors.currentAgentMeta(s);
   const emptyInboxGuideMessage = {
     content: isInbox
       ? t('inbox.defaultMessage')
@@ -61,7 +61,7 @@ export const currentChatsWithGuideMessage = (s: SessionStore): ChatMessage[] =>
     createAt: Date.now(),
     extra: {},
     id: 'default',
-    meta: {
+    meta: meta || {
       avatar: DEFAULT_INBOX_AVATAR,
     },
     role: 'assistant',

package/src/components/DiscordIcon/index.tsx

@@ -1,15 +0,0 @@
-import { type LucideIcon, createLucideIcon } from 'lucide-react';
-
-const Discord: LucideIcon = createLucideIcon('Discord', [
-  [
-    'path',
-    {
-      d: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z',
-      key: '18tl5t',
-    },
-  ],
-]);
-
-const DiscordIcon = (props: LucideIcon) => <Discord style={{ overflow: 'visible' }} {...props} />;
-
-export default DiscordIcon as LucideIcon;

package/src/components/HeaderTitle/index.tsx

@@ -1,76 +0,0 @@
-import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, token }) => ({
-  container: css`
-    position: relative;
-    overflow: hidden;
-    flex: 1;
-    max-width: 100%;
-  `,
-  desc: css`
-    overflow: hidden;
-
-    width: 100%;
-
-    font-size: 12px;
-    color: ${token.colorTextTertiary};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-  tag: css`
-    flex: none;
-  `,
-  title: css`
-    overflow: hidden;
-
-    font-size: 16px;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-  titleContainer: css`
-    flex: 1;
-  `,
-  titleWithDesc: css`
-    overflow: hidden;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `,
-}));
-
-export interface HeaderTitleProps {
-  desc?: string | ReactNode;
-  tag?: ReactNode;
-  title: string | ReactNode;
-}
-
-const HeaderTitle = memo<HeaderTitleProps>(({ title, desc, tag }) => {
-  const { styles } = useStyles();
-  if (desc)
-    return (
-      <Flexbox className={styles.container}>
-        <Flexbox align={'center'} className={styles.titleContainer} gap={8} horizontal>
-          <div className={styles.titleWithDesc}>{title}</div>
-          <Flexbox className={styles.tag} horizontal>
-            {tag}
-          </Flexbox>
-        </Flexbox>
-        <Flexbox align={'center'} horizontal>
-          <div className={styles.desc}>{desc}</div>
-        </Flexbox>
-      </Flexbox>
-    );
-  return (
-    <Flexbox align={'center'} className={styles.container} gap={8} horizontal>
-      <div className={styles.title}>{title}</div>
-      <Flexbox className={styles.tag} horizontal>
-        {tag}
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default HeaderTitle;

package/src/components/SliderWithInput/index.tsx

@@ -1,69 +0,0 @@
-import { InputNumber, type InputNumberProps, Slider } from 'antd';
-import { SliderSingleProps } from 'antd/es/slider';
-import { isNull } from 'lodash-es';
-import { memo, useCallback } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-export interface SliderWithInputProps extends SliderSingleProps {
-  controls?: InputNumberProps['controls'];
-  size?: InputNumberProps['size'];
-}
-
-const SliderWithInput = memo<SliderWithInputProps>(
-  ({
-    step,
-    value,
-    onChange,
-    max,
-    min,
-    defaultValue,
-    size,
-    controls,
-    style,
-    className,
-    disabled,
-    ...props
-  }) => {
-    const handleOnchange = useCallback((value: number | null) => {
-      if (Number.isNaN(value) || isNull(value)) return;
-      onChange?.(value);
-    }, []);
-
-    return (
-      <Flexbox
-        align={'center'}
-        className={className}
-        direction={'horizontal'}
-        gap={8}
-        style={style}
-      >
-        <Slider
-          defaultValue={defaultValue}
-          disabled={disabled}
-          max={max}
-          min={min}
-          onChange={handleOnchange}
-          step={step}
-          style={size === 'small' ? { flex: 1, margin: 0 } : { flex: 1 }}
-          tooltip={{ open: false }}
-          value={typeof value === 'number' ? value : 0}
-          {...props}
-        />
-        <InputNumber
-          controls={size !== 'small' || controls}
-          defaultValue={defaultValue}
-          disabled={disabled}
-          max={max}
-          min={min}
-          onChange={handleOnchange}
-          size={size}
-          step={Number.isNaN(step) || isNull(step) ? undefined : step}
-          style={{ flex: 1, maxWidth: size === 'small' ? 40 : 64 }}
-          value={typeof value === 'number' ? value : 0}
-        />
-      </Flexbox>
-    );
-  },
-);
-
-export default SliderWithInput;

package/src/components/Tag/index.tsx

@@ -1,51 +0,0 @@
-import { Tag as AntTag, type TagProps as AntTagProps } from 'antd';
-import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-const useStyles = createStyles(({ cx, css, token }) => ({
-  count: css`
-    display: flex;
-    align-items: center;
-
-    height: 20px;
-    padding: 0 8px;
-
-    font-size: 12px;
-    line-height: 1;
-
-    background: ${token.colorFillTertiary};
-    border: ${token.borderRadius}px;
-  `,
-  tag: cx(
-    css`
-      color: ${token.colorTextSecondary} !important;
-      background: ${token.colorFillSecondary};
-      border: ${token.borderRadius}px;
-
-      &:hover {
-        color: ${token.colorText};
-        background: ${token.colorFill};
-      }
-    `,
-  ),
-}));
-
-export interface TagProps extends AntTagProps {
-  icon?: ReactNode;
-}
-
-const Tag = memo<TagProps>(({ icon, children, ...props }) => {
-  const { styles } = useStyles();
-
-  return (
-    <AntTag bordered={false} className={styles.tag} {...props}>
-      <Flexbox align={'center'} gap={4} horizontal>
-        {icon}
-        {children}
-      </Flexbox>
-    </AntTag>
-  );
-});
-
-export default Tag;