@lobehub/chat 1.44.3 → 1.45.1

package/src/app/(main)/discover/(detail)/provider/[slug]/features/InfoSidebar/SuggestionItem.tsx

@@ -1,9 +1,9 @@
 import { ProviderCombine } from '@lobehub/icons';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import { DiscoverProviderItem } from '@/types/discover';
 
@@ -44,17 +44,19 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 }));
 
 export interface SuggestionItemProps
-  extends Omit<DiscoverProviderItem, 'suggestions' | 'socialData'>,
-    FlexboxProps {}
+  extends Omit<DiscoverProviderItem, 'suggestions' | 'socialData'> {
+  className?: string;
+  style?: CSSProperties;
+}
 
 const SuggestionItem = memo<SuggestionItemProps>(
-  ({ className, meta, identifier, models, ...rest }) => {
+  ({ className, meta, identifier, models, style }) => {
     const { title, description } = meta;
     const { t } = useTranslation(['discover', 'providers']);
     const { cx, styles, theme } = useStyles();
 
     return (
-      <Flexbox className={cx(styles.container, className)} gap={12} key={identifier} {...rest}>
+      <Flexbox className={cx(styles.container, className)} gap={12} key={identifier} style={style}>
         <ProviderCombine provider={identifier} size={24} title={title} />
         <Flexbox gap={8} horizontal style={{ fontSize: 12, marginTop: -8 }}>
           <div style={{ color: theme.colorTextSecondary }}>@{meta.title}</div>

package/src/app/(main)/discover/(list)/_layout/Desktop/Nav.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChatHeader } from '@lobehub/ui';
+import { ChatHeader } from '@lobehub/ui/chat';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';

package/src/app/(main)/discover/(list)/_layout/Mobile/Header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { ActionIcon, MobileNavBar } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
+import { MobileNavBar } from '@lobehub/ui/mobile';
 import { createStyles } from 'antd-style';
 import { SearchIcon } from 'lucide-react';
 import { memo, useState } from 'react';

package/src/app/(main)/discover/_layout/Desktop/Header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChatHeader } from '@lobehub/ui';
+import { ChatHeader } from '@lobehub/ui/chat';
 import Link from 'next/link';
 import { memo } from 'react';
 

package/src/app/(main)/discover/components/VirtuosoGridList/index.tsx

@@ -1,5 +1,5 @@
-import { Grid } from '@lobehub/ui';
-import { memo } from 'react';
+import { DivProps, Grid } from '@lobehub/ui';
+import { forwardRef, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { VirtuosoGrid, VirtuosoGridProps } from 'react-virtuoso';
 
@@ -10,7 +10,11 @@ export const VirtuosoList = memo<VirtuosoGridProps<any, any>>(({ data, ...rest }
   const initialItemCount = data && data?.length >= 8 ? 8 : data?.length;
   return (
     <VirtuosoGrid
-      components={{ List: (props, ref) => <Flexbox gap={16} ref={ref} {...props} /> }}
+      components={{
+        List: forwardRef<HTMLDivElement, DivProps>((props, ref) => (
+          <Flexbox gap={16} ref={ref} {...props} />
+        )),
+      }}
       customScrollParent={scrollParent}
       data={data}
       initialItemCount={initialItemCount}
@@ -31,9 +35,9 @@ const VirtuosoGridList = memo<VirtuosoGridProps<any, any>>(
     return (
       <VirtuosoGrid
         components={{
-          List: (props, ref) => (
+          List: forwardRef<HTMLDivElement, DivProps>((props, ref) => (
             <Grid gap={16} maxItemWidth={280} ref={ref} rows={rows} {...props} />
-          ),
+          )),
         }}
         customScrollParent={scrollParent}
         data={data}

package/src/app/(main)/discover/search/_layout/Mobile/Header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar } from '@lobehub/ui';
+import { MobileNavBar } from '@lobehub/ui/mobile';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import urlJoin from 'url-join';

package/src/app/(main)/files/(content)/@menu/features/KnowledgeBase/EmptyStatus.tsx

@@ -1,5 +1,6 @@
+import type { IconType } from '@lobehub/icons';
 import { createStyles } from 'antd-style';
-import React from 'react';
+import { forwardRef, memo } from 'react';
 import { Trans } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -21,7 +22,23 @@ const useStyles = createStyles(({ css, token }) => ({
     }
   `,
 }));
-const EmptyStatus = () => {
+
+const LineIcon: IconType = forwardRef(({ size = 130, style, ...rest }, ref) => (
+  <svg
+    fill="currentColor"
+    fillRule="evenodd"
+    ref={ref}
+    style={{ flex: 'none', lineHeight: 1, ...style }}
+    viewBox="0 0 126 64"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path d="M.5 63a.5.5 0 001 0h-1zM122 1l-2.887 5h5.774L122 1zM1.5 62.042a.5.5 0 10-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 101 0h-1zm1-1.916a.5.5 0 10-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 101 0h-1zm1.063-1.938a.5.5 0 10-.991-.13l.991.13zm-.418-2.274a.5.5 0 00.924.383l-.924-.383zm1.904-1.312a.5.5 0 10-.793-.609l.793.61zm.776-2.178a.5.5 0 00.61.793l-.61-.793zm2.304-.187a.5.5 0 00-.383-.924l.383.924zm1.761-1.497a.5.5 0 00.13.991l-.13-.991zm2.12.928a.5.5 0 100-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.018-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.018-1a.5.5 0 100 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.018-1a.5.5 0 100 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.018-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.12.928a.501.501 0 00-.13-.991l.13.991zm1.761-1.497a.501.501 0 00.383.924l-.383-.924zm2.304-.187a.5.5 0 00-.609-.793l.609.793zm.776-2.178a.5.5 0 10.793.609l-.793-.61zm1.904-1.312a.5.5 0 10-.924-.383l.924.383zm-.418-2.274a.5.5 0 10.991.13l-.991-.13zm1.063-1.938a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.916a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zM1.5 63v-.958h-1V63h1zm0-2.875v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834v-1.916h-1v1.916h1zm0-3.833v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834V40h-1v.958h1zm0-.958c0-.333.022-.66.063-.98l-.991-.13A8.574 8.574 0 00.5 40h1zm.569-2.87c.253-.61.584-1.18.98-1.696l-.793-.609a8.49 8.49 0 00-1.11 1.921l.923.383zm2.365-3.08a7.487 7.487 0 011.695-.981l-.383-.924a8.495 8.495 0 00-1.92 1.111l.608.793zm3.586-1.487c.32-.041.648-.063.98-.063v-1c-.376 0-.746.024-1.11.072l.13.991zM9 32.5h1.01v-1H9v1zm3.029 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.019v-1h-2.019v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.019v1zm4.038 0H114v-1h-1.01v1zm1.01 0c.376 0 .746-.024 1.11-.072l-.13-.991c-.32.041-.648.063-.98.063v1zm3.254-.645a8.506 8.506 0 001.921-1.111l-.609-.793a7.519 7.519 0 01-1.695.98l.383.924zm3.49-2.68a8.516 8.516 0 001.111-1.921l-.924-.383a7.527 7.527 0 01-.98 1.695l.793.609zm1.684-4.066c.048-.363.072-.733.072-1.109h-1c0 .332-.022.66-.063.98l.991.13zM122.5 24v-.958h-1V24h1zm0-2.875v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834v-1.916h-1v1.916h1zm0-3.833V7.708h-1v1.917h1zm0-3.833V3.875h-1v1.917h1z"></path>
+  </svg>
+));
+
+const EmptyStatus = memo(() => {
   const { styles } = useStyles();
   return (
     <Flexbox
@@ -31,16 +48,7 @@ const EmptyStatus = () => {
       paddingInline={20}
       width={'100%'}
     >
-      <svg
-        fill="currentColor"
-        fillRule="evenodd"
-        style={{ flex: 'none', height: 'fit-content', lineHeight: 1 }}
-        viewBox="0 0 126 64"
-        width={130}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M.5 63a.5.5 0 001 0h-1zM122 1l-2.887 5h5.774L122 1zM1.5 62.042a.5.5 0 10-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 101 0h-1zm1-1.916a.5.5 0 10-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 101 0h-1zm1.063-1.938a.5.5 0 10-.991-.13l.991.13zm-.418-2.274a.5.5 0 00.924.383l-.924-.383zm1.904-1.312a.5.5 0 10-.793-.609l.793.61zm.776-2.178a.5.5 0 00.61.793l-.61-.793zm2.304-.187a.5.5 0 00-.383-.924l.383.924zm1.761-1.497a.5.5 0 00.13.991l-.13-.991zm2.12.928a.5.5 0 100-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.018-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.018-1a.5.5 0 100 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.018-1a.5.5 0 100 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.018-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.12.928a.501.501 0 00-.13-.991l.13.991zm1.761-1.497a.501.501 0 00.383.924l-.383-.924zm2.304-.187a.5.5 0 00-.609-.793l.609.793zm.776-2.178a.5.5 0 10.793.609l-.793-.61zm1.904-1.312a.5.5 0 10-.924-.383l.924.383zm-.418-2.274a.5.5 0 10.991.13l-.991-.13zm1.063-1.938a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.916a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zM1.5 63v-.958h-1V63h1zm0-2.875v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834v-1.916h-1v1.916h1zm0-3.833v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834V40h-1v.958h1zm0-.958c0-.333.022-.66.063-.98l-.991-.13A8.574 8.574 0 00.5 40h1zm.569-2.87c.253-.61.584-1.18.98-1.696l-.793-.609a8.49 8.49 0 00-1.11 1.921l.923.383zm2.365-3.08a7.487 7.487 0 011.695-.981l-.383-.924a8.495 8.495 0 00-1.92 1.111l.608.793zm3.586-1.487c.32-.041.648-.063.98-.063v-1c-.376 0-.746.024-1.11.072l.13.991zM9 32.5h1.01v-1H9v1zm3.029 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.019v-1h-2.019v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.019v1zm4.038 0H114v-1h-1.01v1zm1.01 0c.376 0 .746-.024 1.11-.072l-.13-.991c-.32.041-.648.063-.98.063v1zm3.254-.645a8.506 8.506 0 001.921-1.111l-.609-.793a7.519 7.519 0 01-1.695.98l.383.924zm3.49-2.68a8.516 8.516 0 001.111-1.921l-.924-.383a7.527 7.527 0 01-.98 1.695l.793.609zm1.684-4.066c.048-.363.072-.733.072-1.109h-1c0 .332-.022.66-.063.98l.991.13zM122.5 24v-.958h-1V24h1zm0-2.875v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834v-1.916h-1v1.916h1zm0-3.833V7.708h-1v1.917h1zm0-3.833V3.875h-1v1.917h1z"></path>
-      </svg>
+      <LineIcon />
       <Flexbox align={'center'} className={styles.paragraph} horizontal>
         <Trans i18nKey={'knowledgeBase.list.empty'} ns={'file'}>
           点击 <kbd>+</kbd> 开始创建知识库
@@ -48,6 +56,6 @@ const EmptyStatus = () => {
       </Flexbox>
     </Flexbox>
   );
-};
+});
 
 export default EmptyStatus;

package/src/app/(main)/repos/[id]/evals/evaluation/EvaluationList/index.tsx

@@ -45,7 +45,7 @@ const EvaluationList = ({ knowledgeBaseId }: { knowledgeBaseId: string }) => {
   ]);
   const [isCheckingStatus, setCheckingStatus] = useState(false);
   const { modal } = App.useApp();
-  const actionRef = useRef<ActionType>();
+  const actionRef = useRef<ActionType>(null);
 
   const columns: ProColumns<RAGEvalEvaluationItem>[] = [
     {

package/src/app/(main)/settings/sync/features/DeviceInfo/SystemIcon.tsx

@@ -13,6 +13,8 @@ const SystemIcon = memo<{ title?: string }>(({ title }) => {
 
   if (['Mac OS', 'iOS', 'iPadOS'].includes(title)) return <SiApple size={24} />;
 
+  // Remove Microsoft brands in @icons-pack/react-simple-icons v10
+  // https://github.com/simple-icons/simple-icons/pull/10019
   if (['Windows'].includes(title)) return <SiWindows11 size={24} />;
 
   if (title === 'Android') return <SiAndroid size={24} />;

package/src/components/Branding/ProductLogo/Custom.tsx

@@ -1,8 +1,8 @@
-import type { DivProps, SvgProps } from '@lobehub/ui';
+import type { IconType } from '@lobehub/icons';
 import type { LobeChatProps } from '@lobehub/ui/brand';
 import { createStyles, useTheme } from 'antd-style';
 import Image, { ImageProps } from 'next/image';
-import { ReactNode, memo } from 'react';
+import { ReactNode, forwardRef, memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import { BRANDING_LOGO_URL, BRANDING_NAME } from '@/const/branding';
@@ -48,24 +48,23 @@ const CustomImageLogo = memo<Omit<ImageProps, 'alt' | 'src'> & { size: number }>
   },
 );
 
-const Divider = memo<SvgProps & DivProps & { size?: number }>(
-  ({ size = '1em', style, ...rest }) => (
-    <svg
-      fill="none"
-      height={size}
-      shapeRendering="geometricPrecision"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      style={{ flex: 'none', lineHeight: 1, ...style }}
-      viewBox="0 0 24 24"
-      width={size}
-      {...rest}
-    >
-      <path d="M16.88 3.549L7.12 20.451" />
-    </svg>
-  ),
-);
+const Divider: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => (
+  <svg
+    fill="none"
+    height={size}
+    ref={ref}
+    shapeRendering="geometricPrecision"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ flex: 'none', lineHeight: 1, ...style }}
+    viewBox="0 0 24 24"
+    width={size}
+    {...rest}
+  >
+    <path d="M16.88 3.549L7.12 20.451" />
+  </svg>
+));
 
 const CustomLogo = memo<LobeChatProps>(({ extra, size = 32, className, style, type, ...rest }) => {
   const theme = useTheme();

package/src/components/BrowserIcon/index.tsx

@@ -1,24 +1,24 @@
+import {
+  SiBrave,
+  SiFirefox,
+  SiGooglechrome,
+  SiMicrosoftedge,
+  SiOpera,
+  SiSafari,
+  SiSamsung,
+} from '@icons-pack/react-simple-icons';
 import React, { memo } from 'react';
 
-import Brave from './components/Brave';
-import Chrome from './components/Chrome';
-import Chromium from './components/Chromium';
-import Edge from './components/Edge';
-import Firefox from './components/Firefox';
-import Opera from './components/Opera';
-import Safari from './components/Safari';
-import Samsung from './components/Samsung';
-
 const lastVersion = {
-  'Brave': Brave,
-  'Chrome': Chrome,
-  'Chromium': Chromium,
-  'Edge': Edge,
-  'Firefox': Firefox,
-  'Mobile Safari': Safari,
-  'Opera': Opera,
-  'Safari': Safari,
-  'Samsung': Samsung,
+  'Brave': SiBrave,
+  'Chrome': SiGooglechrome,
+  'Chromium': SiGooglechrome,
+  'Edge': SiMicrosoftedge,
+  'Firefox': SiFirefox,
+  'Mobile Safari': SiSafari,
+  'Opera': SiOpera,
+  'Safari': SiSafari,
+  'Samsung': SiSamsung,
 };
 
 export type Browsers = keyof typeof lastVersion;
@@ -35,16 +35,5 @@ export const BrowserIcon = memo<BrowserIconProps>(({ browser, className, style,
 
   if (!Component) return null;
 
-  return (
-    <Component
-      className={className}
-      height={size}
-      style={{
-        ...style,
-        minHeight: size,
-        minWidth: size,
-      }}
-      width={size}
-    />
-  );
+  return <Component className={className} size={size} style={style} />;
 });

package/src/components/BubblesLoading/index.tsx

@@ -1,61 +1,69 @@
+import type { IconType } from '@lobehub/icons';
 import { css, cx, useTheme } from 'antd-style';
+import { forwardRef, memo } from 'react';
 import { Center } from 'react-layout-kit';
 
 const container = css`
   circle {
     animation: bubble 1.5s cubic-bezier(0.05, 0.2, 0.35, 1) infinite;
-  }
 
-  circle:nth-child(2) {
-    animation-delay: 0.3s;
-  }
+    &:nth-child(2) {
+      animation-delay: 0.3s;
+    }
 
-  circle:nth-child(3) {
-    animation-delay: 0.6s;
+    &:nth-child(3) {
+      animation-delay: 0.6s;
+    }
   }
 
   @keyframes bubble {
     0% {
       opacity: 1;
-
-      /* transform: translateY(0); */
     }
 
     25% {
       opacity: 0.5;
-
-      /* transform: translateY(-4px); */
     }
 
     75% {
       opacity: 0.25;
-
-      /* transform: translateY(4px); */
     }
 
     to {
       opacity: 1;
-
-      /* transform: translateY(0); */
     }
   }
 `;
 
-const Svg = () => (
-  <svg className={cx(container)} viewBox="0 0 60 32" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="7" cy="16" r="6"></circle>
-    <circle cx="30" cy="16" r="6"></circle>
-    <circle cx="53" cy="16" r="6"></circle>
-  </svg>
+const BubblesLoadingIcon: IconType = forwardRef(
+  ({ size = '1em', style, className, ...rest }, ref) => {
+    return (
+      <svg
+        className={cx(container, className)}
+        fill="currentColor"
+        fillRule="evenodd"
+        height={size}
+        ref={ref}
+        style={{ flex: 'none', lineHeight: 1, ...style }}
+        viewBox="0 0 60 32"
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <circle cx="7" cy="16" r="6"></circle>
+        <circle cx="30" cy="16" r="6"></circle>
+        <circle cx="53" cy="16" r="6"></circle>
+      </svg>
+    );
+  },
 );
 
-const BubblesLoading = () => {
+const BubblesLoading = memo(() => {
   const theme = useTheme();
   return (
     <Center style={{ fill: theme.colorTextSecondary, height: 24, width: 32 }}>
-      <Svg />
+      <BubblesLoadingIcon size={14} />
     </Center>
   );
-};
+});
 
 export default BubblesLoading;

package/src/components/FunctionModal/createModalHooks.ts

@@ -1,6 +1,6 @@
 import { App } from 'antd';
 import { ModalFuncProps } from 'antd/es/modal/interface';
-import { MutableRefObject, ReactNode, useRef } from 'react';
+import { MutableRefObject, ReactNode, RefObject, useRef } from 'react';
 
 import { closeIcon, useStyles } from './style';
 
@@ -21,10 +21,13 @@ const createModal = <T>(params: CreateModalProps | PropsFunc<T>) => {
   const useModal = () => {
     const { styles } = useStyles();
     const { modal } = App.useApp();
-    const instanceRef = useRef<ModalInstance>();
+    const instanceRef = useRef<ModalInstance>(null);
 
     const open = (outProps?: T) => {
-      const props = typeof params === 'function' ? params(instanceRef, outProps) : params;
+      const props =
+        typeof params === 'function'
+          ? params(instanceRef as RefObject<ModalInstance>, outProps)
+          : params;
 
       instanceRef.current = modal.confirm({
         className: styles.content,

package/src/components/StopLoading.tsx

@@ -1,17 +1,20 @@
-import { useTheme } from 'antd-style';
-import { memo } from 'react';
+import type { IconType } from '@lobehub/icons';
+import { cx, useTheme } from 'antd-style';
+import { forwardRef } from 'react';
 
-const StopLoadingIcon = memo(() => {
+const StopLoadingIcon: IconType = forwardRef(({ size = 16, className, style, ...rest }, ref) => {
   const theme = useTheme();
   return (
     <svg
-      className={'anticon'}
+      className={cx('anticon', className)}
       color="currentColor"
-      height={16}
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
       viewBox="0 0 1024 1024"
-      width={16}
+      width={size}
       xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
+      {...rest}
     >
       <g fill="none">
         <circle cx="512" cy="512" fill="none" r="426" stroke={theme.colorBorder} strokeWidth="72" />

package/src/features/ChatInput/Desktop/InputArea/index.tsx

@@ -1,7 +1,7 @@
 import { TextArea } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { TextAreaRef } from 'antd/es/input/TextArea';
-import { memo, useEffect, useRef } from 'react';
+import { RefObject, memo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useUserStore } from '@/store/user';
@@ -45,7 +45,7 @@ const InputArea = memo<InputAreaProps>(({ onSend, value, loading, onChange }) =>
 
   const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
 
-  useAutoFocus(ref);
+  useAutoFocus(ref as RefObject<TextAreaRef>);
 
   const hasValue = !!value;
 

package/src/features/InitClientDB/EnableModal.tsx

@@ -9,7 +9,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 import DataStyleModal from '@/components/DataStyleModal';
 import { useGlobalStore } from '@/store/global';
 
-import { PGliteSVG } from './PGliteSVG';
+import PGliteIcon from './PGliteIcon';
 
 const useStyles = createStyles(({ css, token, isDarkMode, responsive }) => ({
   desc: css`
@@ -59,7 +59,7 @@ const EnableClientDBModal = memo<EnableClientDBModalProps>(({ open }) => {
   const markPgliteEnabled = useGlobalStore((s) => s.markPgliteEnabled);
   const features = [
     {
-      avatar: PGliteSVG,
+      avatar: PGliteIcon,
       desc: t('clientDB.modal.features.pglite.desc'),
       title: t('clientDB.modal.features.pglite.title'),
     },

package/src/features/InitClientDB/{PGliteSVG.tsx → PGliteIcon.tsx}

@@ -1,22 +1,28 @@
-import { LucideIcon, LucideProps } from 'lucide-react';
+'use client';
+
+import type { IconType } from '@lobehub/icons';
 import { forwardRef } from 'react';
 
-// @ts-expect-error 类型感觉不对，未来修正
-export const PGliteSVG: LucideIcon = forwardRef<SVGElement, Partial<Omit<LucideProps, 'ref'>>>(
-  ({ size }, ref) => (
+const PGliteIcon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
     <svg
       fill="currentColor"
+      fillRule="evenodd"
       height={size}
-      ref={ref as any}
-      viewBox={'0 0 1024 1024'}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 1024 1024"
       width={size}
       xmlns="http://www.w3.org/2000/svg"
+      {...rest}
     >
+      <title>PGlite</title>
       <path
         clip-rule="evenodd"
-        d="M941.581 335.737v460.806c0 15.926-12.913 28.836-28.832 28.818l-115.283-.137c-15.243-.018-27.706-11.88-28.703-26.877.011-.569.018-1.138.018-1.711l-.004-172.904c0-47.745-38.736-86.451-86.454-86.451-46.245 0-84.052-36.359-86.342-82.068V191.496l201.708.149c79.484.058 143.892 64.553 143.892 144.092Zm-576-144.281v201.818c0 47.746 38.682 86.456 86.4 86.456h86.4v-5.796c0 66.816 54.13 120.98 120.902 120.98 28.617 0 51.815 23.213 51.815 51.848v149.644c0 .688.011 1.372.025 2.057-.943 15.065-13.453 26.992-28.746 26.992l-144.982-.007.986-201.586c.079-15.915-12.755-28.88-28.66-28.959-15.904-.079-28.861 12.763-28.94 28.678l-.986 201.741v.118l-172.174-.01V623.722c0-15.915-12.895-28.819-28.8-28.819-15.906 0-28.8 12.904-28.8 28.819v201.704l-143.642-.007c-15.905-.004-28.798-12.904-28.798-28.819V335.547c0-79.58 64.471-144.093 144.001-144.092l143.999.001Zm446.544 173.693c0-23.874-19.343-43.228-43.2-43.228-23.861 0-43.2 19.354-43.2 43.228 0 23.875 19.339 43.226 43.2 43.226 23.857 0 43.2-19.351 43.2-43.226Z"
-        fill-rule="evenodd"
-      />
+        d="M941.581 335.737v460.806c0 15.926-12.913 28.836-28.832 28.818l-115.283-.137c-15.243-.018-27.706-11.88-28.703-26.877.011-.569.018-1.138.018-1.711l-.004-172.904c0-47.745-38.736-86.451-86.454-86.451-46.245 0-84.052-36.359-86.342-82.068V191.496l201.708.149c79.484.058 143.892 64.553 143.892 144.092zm-576-144.281v201.818c0 47.746 38.682 86.456 86.4 86.456h86.4v-5.796c0 66.816 54.13 120.98 120.902 120.98 28.617 0 51.815 23.213 51.815 51.848v149.644c0 .688.011 1.372.025 2.057-.943 15.065-13.453 26.992-28.746 26.992l-144.982-.007.986-201.586c.079-15.915-12.755-28.88-28.66-28.959-15.904-.079-28.861 12.763-28.94 28.678l-.986 201.741v.118l-172.174-.01V623.722c0-15.915-12.895-28.819-28.8-28.819-15.906 0-28.8 12.904-28.8 28.819v201.704l-143.642-.007c-15.905-.004-28.798-12.904-28.798-28.819V335.547c0-79.58 64.471-144.093 144.001-144.092l143.999.001zm446.544 173.693c0-23.874-19.343-43.228-43.2-43.228-23.861 0-43.2 19.354-43.2 43.228 0 23.875 19.339 43.226 43.2 43.226 23.857 0 43.2-19.351 43.2-43.226z"
+      ></path>
     </svg>
-  ),
-);
+  );
+});
+
+export default PGliteIcon;

package/src/features/ShareModal/ShareImage/index.tsx

@@ -10,6 +10,7 @@ import { ImageType, imageTypeOptions, useScreenshot } from '@/hooks/useScreensho
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
+import { useStyles } from '../style';
 import Preview from './Preview';
 import { FieldType } from './type';
 
@@ -21,13 +22,15 @@ const DEFAULT_FIELD_VALUE: FieldType = {
   withSystemRole: false,
 };
 
-const ShareImage = memo(() => {
+const ShareImage = memo<{ mobile?: boolean }>(({ mobile }) => {
   const currentAgentTitle = useSessionStore(sessionMetaSelectors.currentAgentTitle);
   const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
   const { t } = useTranslation(['chat', 'common']);
+  const { styles } = useStyles();
   const { loading, onDownload, title } = useScreenshot({
     imageType: fieldValue.imageType,
     title: currentAgentTitle,
+    width: mobile ? 720 : undefined,
   });
 
   const settings: FormItemProps[] = [
@@ -61,29 +64,36 @@ const ShareImage = memo(() => {
   ];
 
   const isMobile = useIsMobile();
+
+  const button = (
+    <Button
+      block
+      loading={loading}
+      onClick={onDownload}
+      size={isMobile ? undefined : 'large'}
+      type={'primary'}
+    >
+      {t('shareModal.download')}
+    </Button>
+  );
+
   return (
-    <Flexbox gap={16} horizontal={!isMobile}>
-      <Preview title={title} {...fieldValue} />
-      <Flexbox gap={16}>
-        <Form
-          initialValues={DEFAULT_FIELD_VALUE}
-          items={settings}
-          itemsType={'flat'}
-          onValuesChange={(_, v) => setFieldValue(v)}
-          {...FORM_STYLE}
-        />
-        <Button
-          block
-          loading={loading}
-          onClick={onDownload}
-          size={'large'}
-          style={isMobile ? { bottom: 0, position: 'sticky' } : undefined}
-          type={'primary'}
-        >
-          {t('shareModal.download')}
-        </Button>
+    <>
+      <Flexbox className={styles.body} gap={16} horizontal={!isMobile}>
+        <Preview title={title} {...fieldValue} />
+        <Flexbox className={styles.sidebar} gap={16}>
+          <Form
+            initialValues={DEFAULT_FIELD_VALUE}
+            items={settings}
+            itemsType={'flat'}
+            onValuesChange={(_, v) => setFieldValue(v)}
+            {...FORM_STYLE}
+          />
+          {!isMobile && button}
+        </Flexbox>
       </Flexbox>
-    </Flexbox>
+      {isMobile && <Flexbox className={styles.footer}>{button}</Flexbox>}
+    </>
   );
 });
 

package/src/features/ShareModal/ShareJSON/Preview.tsx

@@ -7,8 +7,8 @@ const Preview = memo<{ content: string }>(({ content }) => {
   const { styles } = useContainerStyles();
 
   return (
-    <div className={styles.preview}>
-      <Highlighter language={'json'} wrap>
+    <div className={styles.preview} style={{ padding: 16 }}>
+      <Highlighter language={'json'} type={'pure'} wrap>
         {content}
       </Highlighter>
     </div>