@lobehub/chat 1.83.8 → 1.84.1

package/src/app/[variants]/(main)/_layout/Desktop/SideBar/TopActions.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, ActionIconProps } from '@lobehub/ui';
 import { Compass, FolderClosed, MessageSquare } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
@@ -10,6 +10,12 @@ import { SidebarTabKey } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
+const ICON_SIZE: ActionIconProps['size'] = {
+  blockSize: 40,
+  size: 24,
+  strokeWidth: 2,
+};
+
 export interface TopActionProps {
   isPinned?: boolean | null;
   tab?: SidebarTabKey;
@@ -20,6 +26,10 @@ const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
   const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
   const { showMarket, enableKnowledgeBase } = useServerConfigStore(featureFlagsSelectors);
 
+  const isChatActive = tab === SidebarTabKey.Chat && !isPinned;
+  const isFilesActive = tab === SidebarTabKey.Files;
+  const isDiscoverActive = tab === SidebarTabKey.Discover;
+
   return (
     <Flexbox gap={8}>
       <Link
@@ -31,32 +41,32 @@ const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
         }}
       >
         <ActionIcon
-          active={tab === SidebarTabKey.Chat && !isPinned}
+          active={isChatActive}
           icon={MessageSquare}
-          placement={'right'}
-          size="large"
+          size={ICON_SIZE}
           title={t('tab.chat')}
+          tooltipProps={{ placement: 'right' }}
         />
       </Link>
       {enableKnowledgeBase && (
         <Link aria-label={t('tab.files')} href={'/files'}>
           <ActionIcon
-            active={tab === SidebarTabKey.Files}
+            active={isFilesActive}
             icon={FolderClosed}
-            placement={'right'}
-            size="large"
+            size={ICON_SIZE}
             title={t('tab.files')}
+            tooltipProps={{ placement: 'right' }}
           />
         </Link>
       )}
       {showMarket && (
         <Link aria-label={t('tab.discover')} href={'/discover'}>
           <ActionIcon
-            active={tab === SidebarTabKey.Discover}
+            active={isDiscoverActive}
             icon={Compass}
-            placement={'right'}
-            size="large"
+            size={ICON_SIZE}
             title={t('tab.discover')}
+            tooltipProps={{ placement: 'right' }}
           />
         </Link>
       )}

package/src/app/[variants]/(main)/_layout/Desktop/SideBar/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { SideNav } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { parseAsBoolean, useQueryState } from 'nuqs';
 import { Suspense, memo } from 'react';
 
@@ -24,36 +25,27 @@ const Top = () => {
 };
 
 const Nav = memo(() => {
+  const theme = useTheme();
   const inZenMode = useGlobalStore(systemStatusSelectors.inZenMode);
   const { showPinList } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     !inZenMode && (
       <SideNav
-        avatar={
-          <div className={electronStylish.nodrag}>
-            <Avatar />
-          </div>
-        }
-        bottomActions={
-          <div className={electronStylish.nodrag}>
-            <BottomActions />
-          </div>
-        }
-        className={electronStylish.draggable}
+        avatar={<Avatar />}
+        bottomActions={<BottomActions />}
+        className={electronStylish.nodrag}
         style={{
           height: '100%',
           zIndex: 100,
           ...(isDesktop
             ? { background: 'transparent', borderInlineEnd: 0, paddingBlockStart: 8 }
-            : {}),
+            : { background: theme.colorBgLayout }),
         }}
         topActions={
           <Suspense>
-            <div className={electronStylish.nodrag}>
-              <Top />
-              {showPinList && <PinList />}
-            </div>
+            <Top />
+            {showPinList && <PinList />}
           </Suspense>
         }
       />

package/src/app/[variants]/(main)/_layout/Mobile/NavBar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Icon } from '@lobehub/ui';
-import { MobileTabBar, type MobileTabBarProps } from '@lobehub/ui/mobile';
+import { TabBar, type TabBarProps } from '@lobehub/ui/mobile';
 import { createStyles } from 'antd-style';
 import { Compass, MessageSquare, User } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -9,6 +9,7 @@ import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { MOBILE_TABBAR_HEIGHT } from '@/const/layoutTokens';
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
@@ -35,7 +36,7 @@ const NavBar = memo(() => {
 
   const { showMarket } = useServerConfigStore(featureFlagsSelectors);
 
-  const items: MobileTabBarProps['items'] = useMemo(
+  const items: TabBarProps['items'] = useMemo(
     () =>
       [
         {
@@ -68,11 +69,18 @@ const NavBar = memo(() => {
           },
           title: t('tab.me'),
         },
-      ].filter(Boolean) as MobileTabBarProps['items'],
+      ].filter(Boolean) as TabBarProps['items'],
     [t],
   );
 
-  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} />;
+  return (
+    <TabBar
+      activeKey={activeKey}
+      className={styles.container}
+      height={MOBILE_TABBAR_HEIGHT}
+      items={items}
+    />
+  );
 });
 
 NavBar.displayName = 'NavBar';

package/src/app/[variants]/(main)/changelog/_layout/Desktop/Container.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox
+      align={'center'}
+      style={{
+        background: theme.colorBgContainerSecondary,
+        height: '100%',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+      }}
+      width={'100%'}
+    >
+      <Flexbox
+        gap={24}
+        paddingBlock={24}
+        paddingInline={16}
+        style={{
+          width: 'min(100%, 1024px)',
+        }}
+      >
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Container;

package/src/app/[variants]/(main)/changelog/_layout/Desktop/index.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import Hero from '../../features/Hero';
+import Container from './Container';
+
+type Props = { children: ReactNode };
+
+const Layout = ({ children }: Props) => {
+  return (
+    <Container>
+      <Hero />
+      {children}
+    </Container>
+  );
+};
+
+Layout.displayName = 'DesktopChangelogLayout';
+
+export default Layout;

package/src/app/[variants]/(main)/changelog/_layout/Mobile/Header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -13,9 +13,9 @@ const Header = memo(() => {
 
   const router = useRouter();
   return (
-    <MobileNavBar
+    <ChatHeader
       center={
-        <MobileNavBarTitle
+        <ChatHeader.Title
           title={
             <Flexbox align={'center'} gap={4} horizontal>
               {t('title')}

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/SendMore.tsx

@@ -1,5 +1,4 @@
-import { Hotkey, Icon } from '@lobehub/ui';
-import { Button, Dropdown } from 'antd';
+import { Button, Dropdown, Hotkey, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { BotMessageSquare, LucideCheck, LucideChevronDown, MessageSquarePlus } from 'lucide-react';
 import { memo } from 'react';
@@ -93,7 +92,7 @@ const SendMore = memo<SendMoreProps>(({ disabled, isMac }) => {
       <Button
         aria-label={t('input.more')}
         className={styles.arrow}
-        icon={<Icon icon={LucideChevronDown} />}
+        icon={LucideChevronDown}
         type={'primary'}
       />
     </Dropdown>

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/ShortcutHint.tsx

@@ -28,10 +28,10 @@ const ShortcutHint = memo(() => {
       horizontal
       style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
     >
-      <Hotkey keys={sendShortcut} style={{ color: 'inherit' }} variant={'pure'} />
+      <Hotkey keys={sendShortcut} style={{ color: 'inherit' }} variant={'borderless'} />
       <span>{t('input.send')}</span>
       <span>/</span>
-      <Hotkey keys={wrapperShortcut} style={{ color: 'inherit' }} variant={'pure'} />
+      <Hotkey keys={wrapperShortcut} style={{ color: 'inherit' }} variant={'borderless'} />
       <span>{t('input.warp')}</span>
     </Flexbox>
   );

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -1,4 +1,5 @@
-import { Button, Space } from 'antd';
+import { Button } from '@lobehub/ui';
+import { Space } from 'antd';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 import { Suspense, memo, useEffect, useState } from 'react';
@@ -79,7 +80,7 @@ const Footer = memo<FooterProps>(({ onExpandChange, expand }) => {
         flex={'none'}
         gap={8}
         horizontal
-        padding={'0 24px'}
+        paddingInline={16}
       >
         <Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}>
           {expand && <LocalFiles />}
@@ -91,7 +92,7 @@ const Footer = memo<FooterProps>(({ onExpandChange, expand }) => {
             {isAIGenerating ? (
               <Button
                 className={styles.loadingButton}
-                icon={<StopLoadingIcon />}
+                icon={StopLoadingIcon}
                 onClick={stopGenerateMessage}
               >
                 {t('input.stop')}

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files/index.tsx

@@ -1,4 +1,4 @@
-import { ImageGallery } from '@lobehub/ui';
+import { PreviewGroup } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -20,11 +20,11 @@ const Files = memo(() => {
         padding={'4px 8px 8px'}
         style={{ overflow: 'scroll', width: '100%' }}
       >
-        <ImageGallery>
+        <PreviewGroup>
           {list.map((i) => (
             <FileItem {...i} key={i.id} loading={i.status === 'pending'} />
           ))}
-        </ImageGallery>
+        </PreviewGroup>
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/InputArea/index.tsx

@@ -1,4 +1,5 @@
-import { ActionIcon, MobileSafeArea, TextArea } from '@lobehub/ui';
+import { ActionIcon, TextArea } from '@lobehub/ui';
+import { SafeArea } from '@lobehub/ui/mobile';
 import { useSize } from 'ahooks';
 import { createStyles } from 'antd-style';
 import { TextAreaRef } from 'antd/es/input/TextArea';
@@ -100,7 +101,7 @@ const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
               className={styles.expandButton}
               icon={expand ? ChevronDown : ChevronUp}
               onClick={() => setExpand?.(!expand)}
-              size={{ blockSize: 24, borderRadius: '50%', fontSize: 14 }}
+              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}
               style={expand ? { top: 6 } : {}}
             />
           )}
@@ -137,15 +138,15 @@ const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
               placeholder={t('sendPlaceholder')}
               ref={ref}
               style={{ height: 36, paddingBlock: 6 }}
-              type={expand ? 'pure' : 'block'}
               value={value}
+              variant={expand ? 'borderless' : 'filled'}
             />
           </InnerContainer>
         </Flexbox>
         {bottomAddons && (
           <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>
         )}
-        {safeArea && !isFocused && <MobileSafeArea position={'bottom'} />}
+        {safeArea && !isFocused && <SafeArea position={'bottom'} />}
       </Flexbox>
     );
   },

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Send.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, type ActionIconSize, Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { ActionIcon, type ActionIconSize, Button } from '@lobehub/ui';
 import { Loader2, SendHorizontal } from 'lucide-react';
 import { memo } from 'react';
 
@@ -14,7 +13,7 @@ const MobileChatSendButton = memo<MobileChatSendButtonProps>(
   ({ loading, onStop, onSend, disabled }) => {
     const size: ActionIconSize = {
       blockSize: 36,
-      fontSize: 16,
+      size: 16,
     };
 
     return loading ? (
@@ -22,7 +21,7 @@ const MobileChatSendButton = memo<MobileChatSendButtonProps>(
     ) : (
       <Button
         disabled={disabled}
-        icon={(<Icon icon={SendHorizontal} />) as any}
+        icon={SendHorizontal}
         onClick={onSend}
         style={{ flex: 'none' }}
         type={'primary'}

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/InboxWelcome/AgentsSuggest.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon, Avatar, Grid } from '@lobehub/ui';
+import { ActionIcon, Avatar, Block, Grid } from '@lobehub/ui';
 import { Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { RefreshCw } from 'lucide-react';
@@ -27,16 +27,10 @@ const useStyles = createStyles(({ css, token, responsive }) => ({
     height: 100%;
     min-height: 110px;
     padding: 16px;
-    border-radius: ${token.borderRadius}px;
-
-    color: ${token.colorText};
+    border-radius: ${token.borderRadiusLG}px;
 
     background: ${token.colorBgContainer};
 
-    &:hover {
-      background: ${token.colorBgElevated};
-    }
-
     ${responsive.mobile} {
       min-height: 72px;
     }
@@ -78,9 +72,9 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
   const agentLength = mobile ? 2 : 4;
 
   const loadingCards = Array.from({ length: agentLength }).map((_, index) => (
-    <Flexbox className={styles.card} key={index}>
+    <Block className={styles.card} key={index}>
       <Skeleton active avatar paragraph={{ rows: 2 }} title={false} />
-    </Flexbox>
+    </Block>
   ));
 
   const handleRefresh = () => {
@@ -98,7 +92,7 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
         <ActionIcon
           icon={RefreshCw}
           onClick={handleRefresh}
-          size={{ blockSize: 24, fontSize: 14 }}
+          size={{ blockSize: 24, size: 14 }}
           title={t('guide.agents.replaceBtn')}
         />
       </Flexbox>
@@ -113,9 +107,9 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
                   key={item.identifier}
                   prefetch={false}
                 >
-                  <Flexbox className={styles.card} gap={8} horizontal>
+                  <Block className={styles.card} clickable gap={12} horizontal variant={'outlined'}>
                     <Avatar avatar={item.meta.avatar} style={{ flex: 'none' }} />
-                    <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
+                    <Flexbox gap={2} style={{ overflow: 'hidden', width: '100%' }}>
                       <Paragraph className={styles.cardTitle} ellipsis={{ rows: 1 }}>
                         {item.meta.title}
                       </Paragraph>
@@ -123,7 +117,7 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
                         {item.meta.description}
                       </Paragraph>
                     </Flexbox>
-                  </Flexbox>
+                  </Block>
                 </Link>
               ))}
       </Grid>

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/InboxWelcome/QuestionSuggest.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Block } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { shuffle } from 'lodash-es';
 import { ArrowRight } from 'lucide-react';
@@ -16,8 +16,6 @@ import { useChatStore } from '@/store/chat';
 
 const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
-    cursor: pointer;
-
     padding-block: 12px;
     padding-inline: 24px;
     border-radius: 48px;
@@ -26,10 +24,6 @@ const useStyles = createStyles(({ css, token, responsive }) => ({
 
     background: ${token.colorBgContainer};
 
-    &:hover {
-      background: ${token.colorBgElevated};
-    }
-
     ${responsive.mobile} {
       padding-block: 8px;
       padding-inline: 16px;
@@ -75,7 +69,7 @@ const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
         <Link href={USAGE_DOCUMENTS} target={'_blank'}>
           <ActionIcon
             icon={ArrowRight}
-            size={{ blockSize: 24, fontSize: 16 }}
+            size={{ blockSize: 24, size: 16 }}
             title={t('guide.questions.moreBtn')}
           />
         </Link>
@@ -84,9 +78,10 @@ const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
         {qa.slice(0, mobile ? 2 : 5).map((item) => {
           const text = t(`guide.qa.${item}` as any, { appName: BRANDING_NAME });
           return (
-            <Flexbox
+            <Block
               align={'center'}
               className={styles.card}
+              clickable
               gap={8}
               horizontal
               key={item}
@@ -94,9 +89,10 @@ const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
                 updateInputMessage(text);
                 sendMessage({ isWelcomeQuestion: true });
               }}
+              variant={'outlined'}
             >
               {t(text)}
-            </Flexbox>
+            </Block>
           );
         })}
       </Flexbox>

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/OpeningQuestions.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Block } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,20 +11,11 @@ import { useChatStore } from '@/store/chat';
 
 const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
-    cursor: pointer;
-
-    padding-block: 12px;
-    padding-inline: 24px;
+    padding-block: 8px;
+    padding-inline: 16px;
     border-radius: 48px;
-
-    color: ${token.colorText};
-
     background: ${token.colorBgContainer};
 
-    &:hover {
-      background: ${token.colorBgElevated};
-    }
-
     ${responsive.mobile} {
       padding-block: 8px;
       padding-inline: 16px;
@@ -32,7 +24,7 @@ const useStyles = createStyles(({ css, token, responsive }) => ({
 
   container: css`
     padding-block: 0;
-    padding-inline: 20px;
+    padding-inline: 64px 16px;
   `,
 
   title: css`
@@ -58,16 +50,20 @@ const OpeningQuestions = memo<OpeningQuestionsProps>(({ mobile, questions }) =>
       <Flexbox gap={8} horizontal wrap={'wrap'}>
         {questions.slice(0, mobile ? 2 : 5).map((question) => {
           return (
-            <div
+            <Block
               className={styles.card}
+              clickable
               key={question}
               onClick={() => {
                 updateInputMessage(question);
                 sendMessage({ isWelcomeQuestion: true });
               }}
+              paddingBlock={8}
+              paddingInline={12}
+              variant={'outlined'}
             >
               {question}
-            </div>
+            </Block>
           );
         })}
       </Flexbox>

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/WelcomeMessage.tsx

@@ -1,4 +1,4 @@
-import { ChatItem } from '@lobehub/ui';
+import { ChatItem } from '@lobehub/ui/chat';
 import isEqual from 'fast-deep-equal';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -45,7 +45,7 @@ const WelcomeMessage = () => {
       editing={false}
       message={message}
       placement={'left'}
-      type={type === 'chat' ? 'block' : 'pure'}
+      variant={type === 'chat' ? 'bubble' : 'docs'}
     />
   );
 

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ZenModeToast/Toast.tsx

@@ -43,7 +43,8 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 
   text: css`
-    font-size: ${token.fontSizeLG}px;
+    font-size: 16px;
+    font-weight: 500;
     color: ${token.colorBgBase};
   `,
 
@@ -51,8 +52,8 @@ const useStyles = createStyles(({ css, token }) => ({
     display: flex;
     align-items: center;
 
-    padding-block: 12px;
-    padding-inline: 16px;
+    padding-block: 8px;
+    padding-inline: 24px;
     border-radius: 9999px;
 
     background: ${token.colorText};

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/Header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Dropdown, MenuProps } from 'antd';
+import { ActionIcon, Dropdown, Icon, type MenuProps } from '@lobehub/ui';
+import { App } from 'antd';
 import type { ItemType } from 'antd/es/menu/interface';
 import { LucideCheck, MoreHorizontal, Search, Trash } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';