@lobehub/chat 1.83.7 → 1.84.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, ScrollShadow } from '@lobehub/ui';
 import { EditableMessage } from '@lobehub/ui/chat';
 import { Skeleton } from 'antd';
 import { Edit } from 'lucide-react';
@@ -86,13 +86,15 @@ const SystemRole = memo(() => {
         style={{ cursor: 'pointer' }}
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
-      <Flexbox
+      <ScrollShadow
         className={cx(styles.promptBox, styles.animatedContainer)}
         height={expanded ? 200 : 0}
         onClick={handleOpen}
         onDoubleClick={(e) => {
           if (e.altKey) handleOpenWithEdit(e);
         }}
+        paddingInline={16}
+        size={25}
         style={{
           opacity: expanded ? 1 : 0,
           overflow: 'hidden',
@@ -100,50 +102,42 @@ const SystemRole = memo(() => {
         }}
       >
         {isLoading ? (
-          <Skeleton
-            active
-            avatar={false}
-            style={{ marginTop: 12, paddingInline: 16 }}
-            title={false}
-          />
+          <Skeleton active avatar={false} title={false} />
         ) : (
-          <>
-            <EditableMessage
-              classNames={{ markdown: styles.prompt }}
-              editing={editing}
-              model={{
-                extra: (
-                  <AgentInfo
-                    meta={meta}
-                    onAvatarClick={() => {
-                      setOpen(false);
-                      setEditing(false);
-                      openChatSettings();
-                    }}
-                    style={{ marginBottom: 16 }}
-                  />
-                ),
-              }}
-              onChange={(e) => {
-                updateAgentConfig({ systemRole: e });
-              }}
-              onEditingChange={setEditing}
-              onOpenChange={setOpen}
-              openModal={open}
-              placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
-              styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
-              text={{
-                cancel: t('cancel'),
-                confirm: t('ok'),
-                edit: t('edit'),
-                title: t('settingAgent.prompt.title', { ns: 'setting' }),
-              }}
-              value={systemRole}
-            />
-            <div className={styles.promptMask} />
-          </>
+          <EditableMessage
+            classNames={{ markdown: styles.prompt }}
+            editing={editing}
+            model={{
+              extra: (
+                <AgentInfo
+                  meta={meta}
+                  onAvatarClick={() => {
+                    setOpen(false);
+                    setEditing(false);
+                    openChatSettings();
+                  }}
+                  style={{ marginBottom: 16 }}
+                />
+              ),
+            }}
+            onChange={(e) => {
+              updateAgentConfig({ systemRole: e });
+            }}
+            onEditingChange={setEditing}
+            onOpenChange={setOpen}
+            openModal={open}
+            placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
+            styles={{ markdown: { opacity: systemRole ? undefined : 0.5, overflow: 'visible' } }}
+            text={{
+              cancel: t('cancel'),
+              confirm: t('ok'),
+              edit: t('edit'),
+              title: t('settingAgent.prompt.title', { ns: 'setting' }),
+            }}
+            value={systemRole}
+          />
         )}
-      </Flexbox>
+      </ScrollShadow>
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/chat/(workspace)/@topic/features/SystemRole/style.ts

@@ -7,13 +7,7 @@ export const useStyles = createStyles(({ css, token }) => ({
       opacity 0.3s ease;
   `,
   prompt: css`
-    overflow: hidden auto;
-
-    padding-block: 0 16px;
-    padding-inline: 16px;
-
     opacity: 0.75;
-
     transition: opacity 200ms ${token.motionEaseOut};
 
     &:hover {
@@ -22,20 +16,6 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   promptBox: css`
     position: relative;
-    overflow: hidden;
-    border-block-end: 1px solid ${token.colorBorder};
-  `,
-  promptMask: css`
-    pointer-events: none;
-
-    position: absolute;
-    z-index: 10;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-
-    width: 100%;
-    height: 32px;
-
-    background: linear-gradient(to bottom, transparent, ${token.colorBgLayout});
+    border-block-end: 1px solid ${token.colorBorderSecondary};
   `,
 }));

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

@@ -12,8 +12,8 @@ const preformat = (id: string) =>
 const useStyles = createStyles(({ css, token, responsive }) => ({
   container: css`
     color: ${token.colorTextQuaternary};
-    background: ${token.colorBgLayout};
-    box-shadow: 0 3px 4px -2px ${token.colorBgLayout};
+    background: ${token.colorBgContainerSecondary};
+    box-shadow: 0 3px 4px -2px ${token.colorBgContainerSecondary};
 
     ${responsive.mobile} {
       background: ${token.colorBgContainer};

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

@@ -1,5 +1,5 @@
-import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
-import { App, Dropdown, type MenuProps, Typography } from 'antd';
+import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps } from '@lobehub/ui';
+import { App, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { MoreVertical, PencilLine, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -128,11 +128,7 @@ const Content = memo<TopicContentProps>(({ id, title, active, showMore }) => {
           }}
           onEditingChange={toggleEditing}
           showEditIcon={false}
-          size={'small'}
-          style={{
-            height: 28,
-          }}
-          type={'pure'}
+          style={{ height: 28 }}
           value={title}
         />
       )}

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

@@ -1,5 +1,5 @@
-import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
-import { App, Dropdown, type MenuProps, Typography } from 'antd';
+import { ActionIcon, Dropdown, EditableText, Icon, type MenuProps } from '@lobehub/ui';
+import { App, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import {
   LucideCopy,
@@ -186,11 +186,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
           }}
           onEditingChange={toggleEditing}
           showEditIcon={false}
-          size={'small'}
-          style={{
-            height: 28,
-          }}
-          type={'pure'}
+          style={{ height: 28 }}
           value={title}
         />
       )}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { EmptyCard } from '@lobehub/ui';
+import { GuideCard } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -48,16 +48,16 @@ const TopicListContent = memo(() => {
     <>
       {topicLength === 0 && visible && (
         <Flexbox paddingInline={8}>
-          <EmptyCard
+          <GuideCard
             alt={t('guide.desc')}
             cover={imageUrl(`empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`)}
-            desc={t('guide.desc')}
-            height={120}
-            imageProps={{
+            coverProps={{
               priority: true,
             }}
-            onVisibleChange={(visible) => {
-              updateGuideState({ topic: visible });
+            desc={t('guide.desc')}
+            height={120}
+            onClose={() => {
+              updateGuideState({ topic: false });
             }}
             style={{ flex: 'none', marginBottom: 12 }}
             title={t('guide.title')}

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

@@ -47,8 +47,8 @@ const TopicSearchBar = memo<{ onClear?: () => void }>(({ onClear }) => {
       onPressEnter={startSearchTopic}
       placeholder={t('searchPlaceholder')}
       spotlight={!mobile}
-      type={mobile ? 'block' : 'ghost'}
       value={tempValue}
+      variant={'filled'}
     />
   );
 });

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/HeaderAction.tsx

@@ -17,7 +17,7 @@ import { HotkeyEnum } from '@/types/hotkey';
 import SettingButton from '../../../features/SettingButton';
 import ShareButton from '../../../features/ShareButton';
 
-const HeaderAction = memo(() => {
+const HeaderAction = memo<{ className?: string }>(({ className }) => {
   const { t } = useTranslation('chat');
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleRightPanel));
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
@@ -28,7 +28,7 @@ const HeaderAction = memo(() => {
   const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
 
   return (
-    <Flexbox gap={4} horizontal>
+    <Flexbox className={className} gap={4} horizontal>
       <ShareButton />
       <Tooltip hotkey={hotkey} title={t('toggleRightPanel.title', { ns: 'hotkey' })}>
         <ActionIcon

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx

@@ -1,25 +1,21 @@
 'use client';
 
-import { ActionIcon, Avatar, Tooltip } from '@lobehub/ui';
+import { Avatar } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
-import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { parseAsBoolean, useQueryState } from 'nuqs';
 import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
-import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
-import { HotkeyEnum } from '@/types/hotkey';
 
+import TogglePanelButton from '../../../../features/TogglePanelButton';
 import Tags from './Tags';
 
 const useStyles = createStyles(({ css }) => ({
@@ -44,9 +40,7 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 
-const Main = memo(() => {
-  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleLeftPanel));
-
+const Main = memo<{ className?: string }>(({ className }) => {
   const { t } = useTranslation(['chat', 'hotkey']);
   const { styles } = useStyles();
   useInitAgentConfig();
@@ -64,27 +58,11 @@ const Main = memo(() => {
 
   const displayTitle = isInbox ? t('inbox.title') : title;
   const showSessionPanel = useGlobalStore(systemStatusSelectors.showSessionPanel);
-  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
-
-  const ToggleAction = (
-    <Tooltip hotkey={hotkey} title={t('toggleLeftPanel.title', { ns: 'hotkey' })}>
-      <ActionIcon
-        icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
-        onClick={() => {
-          updateSystemStatus({
-            sessionsWidth: showSessionPanel ? 0 : 320,
-            showSessionPanel: !showSessionPanel,
-          });
-        }}
-        size={DESKTOP_HEADER_ICON_SIZE}
-      />
-    </Tooltip>
-  );
 
   if (!init)
     return (
-      <Flexbox align={'center'} gap={8} horizontal>
-        {!isPinned && ToggleAction}
+      <Flexbox align={'center'} className={className} gap={8} horizontal>
+        {!isPinned && !showSessionPanel && <TogglePanelButton />}
         <Skeleton
           active
           avatar={{ shape: 'circle', size: 28 }}
@@ -95,8 +73,8 @@ const Main = memo(() => {
     );
 
   return (
-    <Flexbox align={'center'} gap={4} horizontal>
-      {!isPinned && ToggleAction}
+    <Flexbox align={'center'} className={className} gap={12} horizontal>
+      {!isPinned && !showSessionPanel && <TogglePanelButton />}
       <Avatar
         avatar={avatar}
         background={backgroundColor}
@@ -112,7 +90,7 @@ const Main = memo(() => {
   );
 });
 
-export default () => (
+export default memo<{ className?: string }>(({ className }) => (
   <Suspense
     fallback={
       <Skeleton
@@ -123,6 +101,6 @@ export default () => (
       />
     }
   >
-    <Main />
+    <Main className={className} />
   </Suspense>
-);
+));

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags/KnowledgeTag.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon, Tag } from '@lobehub/ui';
-import { Dropdown, MenuProps } from 'antd';
+import { Dropdown, Icon, type MenuProps, Tag } from '@lobehub/ui';
 import { LibraryBig } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags/index.tsx

@@ -13,9 +13,9 @@ import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selector
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
+import HistoryLimitTags from './HistoryLimitTags';
 import KnowledgeTag from './KnowledgeTag';
 import SearchTags from './SearchTags';
-import HistoryLimitTags from './HistoryLimitTags';
 
 const TitleTags = memo(() => {
   const [model, provider, hasKnowledge, isLoading] = useAgentStore((s) => [
@@ -37,7 +37,7 @@ const TitleTags = memo(() => {
   return isLoading && isLogin ? (
     <Skeleton.Button active size={'small'} style={{ height: 20 }} />
   ) : (
-    <Flexbox align={'center'} horizontal>
+    <Flexbox align={'center'} gap={4} horizontal>
       <ModelSwitchPanel>
         <ModelTag model={model} />
       </ModelSwitchPanel>

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/index.tsx

@@ -16,17 +16,9 @@ const Header = () => {
     showHeader && (
       <ChatHeader
         className={electronStylish.draggable}
-        left={
-          <div className={electronStylish.nodrag}>
-            <Main />
-          </div>
-        }
-        right={
-          <div className={electronStylish.nodrag}>
-            <HeaderAction />
-          </div>
-        }
-        style={{ height: 48, minHeight: 48, paddingInline: 8, position: 'initial', zIndex: 11 }}
+        left={<Main className={electronStylish.nodrag} />}
+        right={<HeaderAction className={electronStylish.nodrag} />}
+        style={{ paddingInline: 8, position: 'initial', zIndex: 11 }}
       />
     )
   );

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx

@@ -3,7 +3,6 @@
 import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { rgba } from 'polished';
 import { PropsWithChildren, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -17,7 +16,7 @@ import { chatPortalSelectors, portalThreadSelectors } from '@/store/chat/selecto
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   content: css`
     display: flex;
     flex-direction: column;
@@ -28,25 +27,18 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     height: 100%;
     background: ${token.colorBgLayout};
   `,
-  header: css`
-    border-block-end: 1px solid ${token.colorBorder};
-  `,
   panel: css`
     overflow: hidden;
     height: 100%;
-    background: ${isDarkMode ? rgba(token.colorBgElevated, 0.8) : token.colorBgElevated};
-  `,
-
-  thread: css`
-    background: ${token.colorBgLayout};
+    background: ${token.colorBgContainerSecondary};
   `,
 }));
 
 const PortalPanel = memo(({ children }: PropsWithChildren) => {
-  const { styles, cx } = useStyles();
+  const { styles } = useStyles();
   const { md = true } = useResponsive();
 
-  const [showInspector, showToolUI, showArtifactUI, showThread] = useChatStore((s) => [
+  const [showPortal, showToolUI, showArtifactUI, showThread] = useChatStore((s) => [
     chatPortalSelectors.showPortal(s),
     chatPortalSelectors.showPluginUI(s),
     chatPortalSelectors.showArtifactUI(s),
@@ -78,8 +70,7 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
         content: styles.content,
       }}
       defaultSize={{ width: tmpWidth }}
-      expand={showInspector}
-      hanlderStyle={{ display: 'none' }}
+      expand={showPortal}
       maxWidth={CHAT_PORTAL_MAX_WIDTH}
       minWidth={
         showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
@@ -87,9 +78,12 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
       mode={md ? 'fixed' : 'float'}
       onSizeChange={handleSizeChange}
       placement={'right'}
-      showHandlerWhenUnexpand={false}
-      showHandlerWideArea={false}
+      showHandleWhenCollapsed={false}
+      showHandleWideArea={false}
       size={{ height: '100%', width: portalWidth }}
+      styles={{
+        handle: { display: 'none' },
+      }}
     >
       <DraggablePanelContainer
         style={{
@@ -99,7 +93,7 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
           minWidth: CHAT_PORTAL_WIDTH,
         }}
       >
-        <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
+        <Flexbox className={styles.panel}>{children}</Flexbox>
       </DraggablePanelContainer>
     </DraggablePanel>
   );

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx

@@ -18,11 +18,10 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 100% !important;
   `,
   drawer: css`
-    z-index: 10;
-    background: ${token.colorBgLayout};
+    z-index: 20;
   `,
   header: css`
-    border-block-end: 1px solid ${token.colorBorder};
+    border-block-end: 1px solid ${token.colorBorderSecondary};
   `,
 }));
 
@@ -59,7 +58,7 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
       mode={md ? 'fixed' : 'float'}
       onExpandChange={handleExpand}
       placement={'right'}
-      showHandlerWideArea={false}
+      showHandleWideArea={false}
     >
       <DraggablePanelContainer
         style={{

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Mobile/ChatHeader/ChatHeaderTitle.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
-import { MobileNavBarTitle } from '@lobehub/ui/mobile';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { useTheme } from 'antd-style';
 import { ChevronDown } from 'lucide-react';
 import { memo } from 'react';
@@ -28,14 +28,14 @@ const ChatHeaderTitle = memo(() => {
   const displayTitle = isInbox ? t('inbox.title') : title;
 
   return (
-    <MobileNavBarTitle
+    <ChatHeader.Title
       desc={
         <Flexbox align={'center'} gap={4} horizontal onClick={() => toggleConfig()}>
           <span>{topic?.title || t('title', { ns: 'topic' })}</span>
           <ActionIcon
             active
             icon={ChevronDown}
-            size={{ blockSize: 14, borderRadius: '50%', fontSize: 12 }}
+            size={{ blockSize: 14, borderRadius: '50%', size: 12 }}
             style={{
               background: theme.colorFillSecondary,
               color: theme.colorTextDescription,

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Mobile/ChatHeader/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar } from '@lobehub/ui/mobile';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { memo, useState } from 'react';
 
 import { INBOX_SESSION_ID } from '@/const/session';
@@ -18,7 +18,7 @@ const MobileHeader = memo(() => {
   const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
 
   return (
-    <MobileNavBar
+    <ChatHeader
       center={<ChatHeaderTitle />}
       onBackClick={() =>
         router.push('/chat', { query: { session: INBOX_SESSION_ID }, replace: true })