@lobehub/chat 1.123.4 → 1.124.0

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

@@ -11,9 +11,10 @@ import { Flexbox } from 'react-layout-kit';
 
 import { BRANDING_NAME } from '@/const/branding';
 import { USAGE_DOCUMENTS } from '@/const/url';
-import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 
+import { useSend } from '../../../ChatInput/useSend';
+
 const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
     padding-block: 12px;
@@ -60,7 +61,7 @@ const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
-  const { send: sendMessage } = useSendMessage();
+  const { send: sendMessage } = useSend();
 
   return (
     <Flexbox gap={8} width={'100%'}>

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

@@ -6,9 +6,10 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 
+import { useSend } from '../../ChatInput/useSend';
+
 const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
     padding-block: 8px;
@@ -42,7 +43,7 @@ const OpeningQuestions = memo<OpeningQuestionsProps>(({ mobile, questions }) =>
   const [updateInputMessage] = useChatStore((s) => [s.updateInputMessage]);
 
   const { styles } = useStyles();
-  const { send: sendMessage } = useSendMessage();
+  const { send: sendMessage } = useSend();
 
   return (
     <div className={styles.container}>

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

@@ -1,7 +1,12 @@
 'use client';
 
 import { ActionIcon } from '@lobehub/ui';
-import { PanelRightClose, PanelRightOpen } from 'lucide-react';
+import {
+  PanelLeftRightDashedIcon,
+  PanelRightClose,
+  PanelRightOpen,
+  SquareChartGanttIcon,
+} from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -20,15 +25,26 @@ import ShareButton from '../../../features/ShareButton';
 const HeaderAction = memo<{ className?: string }>(({ className }) => {
   const { t } = useTranslation('chat');
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleRightPanel));
-  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+  const [showAgentSettings, wideScreen, toggleConfig, toggleWideScreen] = useGlobalStore((s) => [
     systemStatusSelectors.showChatSideBar(s),
+    systemStatusSelectors.wideScreen(s),
     s.toggleChatSideBar,
+    s.toggleWideScreen,
   ]);
 
   const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <Flexbox className={className} gap={4} horizontal>
+      <ActionIcon
+        icon={wideScreen ? SquareChartGanttIcon : PanelLeftRightDashedIcon}
+        onClick={() => toggleWideScreen()}
+        size={DESKTOP_HEADER_ICON_SIZE}
+        title={t(wideScreen ? 'toggleWideScreen.off' : 'toggleWideScreen.on')}
+        tooltipProps={{
+          placement: 'bottom',
+        }}
+      />
       <ShareButton />
       <ActionIcon
         icon={showAgentSettings ? PanelRightClose : PanelRightOpen}

package/src/features/ChatInput/ActionBar/STT/common.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Alert, Button, Dropdown, Highlighter } from '@lobehub/ui';
+import { Alert, Button, Highlighter } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { Mic, MicOff } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -7,6 +7,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { ChatMessageError } from '@/types/message';
 
+import Action from '../components/Action';
+
 const useStyles = createStyles(({ css, token }) => ({
   recording: css`
     width: 8px;
@@ -49,35 +51,36 @@ const CommonSTT = memo<{
     };
 
     return (
-      <Dropdown
-        menu={{
-          // @ts-expect-error 等待 antd 修复
-          activeKey: 'time',
-          items: [
-            {
-              key: 'title',
-              label: (
-                <Flexbox>
-                  <div style={{ fontWeight: 'bolder' }}>{t('stt.action')}</div>
-                </Flexbox>
-              ),
-            },
-            {
-              key: 'time',
-              label: (
-                <Flexbox align={'center'} gap={8} horizontal>
-                  <div className={styles.recording} />
-                  {time > 0 ? formattedTime : t(isRecording ? 'stt.loading' : 'stt.prettifying')}
-                </Flexbox>
-              ),
-            },
-          ],
-        }}
-        onOpenChange={handleDropdownVisibleChange}
-        open={dropdownOpen || !!error || isRecording || isLoading}
-        placement={mobile ? 'topRight' : 'top'}
-        popupRender={
-          error
+      <Action
+        active={isRecording}
+        dropdown={{
+          menu: {
+            // @ts-expect-error 等待 antd 修复
+            activeKey: 'time',
+            items: [
+              {
+                key: 'title',
+                label: (
+                  <Flexbox>
+                    <div style={{ fontWeight: 'bolder' }}>{t('stt.action')}</div>
+                  </Flexbox>
+                ),
+              },
+              {
+                key: 'time',
+                label: (
+                  <Flexbox align={'center'} gap={8} horizontal>
+                    <div className={styles.recording} />
+                    {time > 0 ? formattedTime : t(isRecording ? 'stt.loading' : 'stt.prettifying')}
+                  </Flexbox>
+                ),
+              },
+            ],
+          },
+          onOpenChange: handleDropdownVisibleChange,
+          open: dropdownOpen || !!error || isRecording || isLoading,
+          placement: mobile ? 'topRight' : 'top',
+          popupRender: error
             ? () => (
                 <Alert
                   action={
@@ -103,23 +106,14 @@ const CommonSTT = memo<{
                   type="error"
                 />
               )
-            : undefined
-        }
-        trigger={['click']}
-      >
-        <ActionIcon
-          active={isRecording}
-          icon={isLoading ? MicOff : Mic}
-          onClick={handleTriggerStartStop}
-          size={mobile ? { blockSize: 36, size: 16 } : 22}
-          style={{ flex: 'none' }}
-          title={dropdownOpen ? '' : desc}
-          tooltipProps={{
-            placement: 'bottom',
-          }}
-          variant={mobile ? 'outlined' : 'borderless'}
-        />
-      </Dropdown>
+            : undefined,
+          trigger: ['click'],
+        }}
+        icon={isLoading ? MicOff : Mic}
+        onClick={handleTriggerStartStop}
+        title={dropdownOpen ? undefined : desc}
+        variant={mobile ? 'outlined' : 'borderless'}
+      />
     );
   },
 );

package/src/features/ChatInput/{Topic → ActionBar/SaveTopic}/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Hotkey, Tooltip } from '@lobehub/ui';
+import { ActionIcon, Hotkey } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
 import { LucideGalleryVerticalEnd, LucideMessageSquarePlus } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -54,11 +54,22 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
     );
   } else {
     return (
-      <Tooltip hotkey={hotkey} title={desc}>
-        <Button aria-label={desc} icon={icon} loading={isValidating} onClick={() => mutate()} />
-      </Tooltip>
+      <ActionIcon
+        aria-label={desc}
+        icon={icon}
+        loading={isValidating}
+        onClick={() => mutate()}
+        size={{ blockSize: 32, size: 16, strokeWidth: 2.3 }}
+        title={desc}
+        tooltipProps={{
+          hotkey,
+        }}
+        variant={'outlined'}
+      />
     );
   }
 });
 
+SaveTopic.displayName = 'SaveTopic';
+
 export default SaveTopic;

package/src/features/ChatInput/ActionBar/Typo/index.tsx

@@ -0,0 +1,22 @@
+import { TypeIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useChatInputStore } from '../../store';
+import Action from '../components/Action';
+
+const Typo = memo(() => {
+  const { t } = useTranslation('editor');
+  const [showTypoBar, setShowTypoBar] = useChatInputStore((s) => [s.showTypoBar, s.setShowTypoBar]);
+
+  return (
+    <Action
+      active={showTypoBar}
+      icon={TypeIcon}
+      onClick={() => setShowTypoBar(!showTypoBar)}
+      title={t(showTypoBar ? 'actions.typobar.off' : 'actions.typobar.on')}
+    />
+  );
+});
+
+export default Typo;

package/src/features/ChatInput/ActionBar/components/Action.tsx

@@ -51,6 +51,10 @@ const Action = memo<ActionProps>(
           placement: 'bottom',
         }}
         {...rest}
+        size={{
+          blockSize: 36,
+          size: 20,
+        }}
       />
     );
 

package/src/features/ChatInput/ActionBar/config.ts

@@ -4,9 +4,11 @@ import Knowledge from './Knowledge';
 import Model from './Model';
 import Params from './Params';
 import STT from './STT';
+import SaveTopic from './SaveTopic';
 import Search from './Search';
 import { MainToken, PortalToken } from './Token';
 import Tools from './Tools';
+import Typo from './Typo';
 import Upload from './Upload';
 
 export const actionMap = {
@@ -18,10 +20,14 @@ export const actionMap = {
   model: Model,
   params: Params,
   portalToken: PortalToken,
+  saveTopic: SaveTopic,
   search: Search,
   stt: STT,
   temperature: Params,
   tools: Tools,
+  typo: Typo,
 } as const;
 
-export type ActionKeys = keyof typeof actionMap;
+export type ActionKey = keyof typeof actionMap;
+
+export type ActionKeys = ActionKey | ActionKey[] | '---';

package/src/features/ChatInput/ActionBar/index.tsx

@@ -1,55 +1,44 @@
-import { ChatInputActionBar } from '@lobehub/ui/chat';
-import { ReactNode, memo } from 'react';
+import { ChatInputActions, type ChatInputActionsProps } from '@lobehub/editor/react';
+import { memo, useMemo } from 'react';
 
-import { ActionKeys, actionMap } from './config';
+import { ActionKeys, actionMap } from '../ActionBar/config';
+import { useChatInputStore } from '../store';
 
-const RenderActionList = ({ dataSource }: { dataSource: ActionKeys[] }) => (
-  <>
-    {dataSource.map((key) => {
-      const Render = actionMap[key];
-      return <Render key={key} />;
-    })}
-  </>
-);
-
-export interface ActionBarProps {
-  leftActions: ActionKeys[];
-  leftAreaEndRender?: ReactNode;
-  leftAreaStartRender?: ReactNode;
-  padding?: number | string;
-  rightActions: ActionKeys[];
-  rightAreaEndRender?: ReactNode;
-  rightAreaStartRender?: ReactNode;
-}
-
-const ActionBar = memo<ActionBarProps>(
-  ({
-    padding = '0 8px',
-    rightAreaStartRender,
-    rightAreaEndRender,
-    leftAreaStartRender,
-    leftAreaEndRender,
-    leftActions,
-    rightActions,
-  }) => (
-    <ChatInputActionBar
-      leftAddons={
-        <>
-          {leftAreaStartRender}
-          <RenderActionList dataSource={leftActions} />
-          {leftAreaEndRender}
-        </>
+const mapActionsToItems = (keys: ActionKeys[]): ChatInputActionsProps['items'] =>
+  keys.map((actionKey, index) => {
+    if (typeof actionKey === 'string') {
+      if (actionKey === '---') {
+        return {
+          key: `divider-${index}`,
+          type: 'divider',
+        };
       }
-      padding={padding}
-      rightAddons={
-        <>
-          {rightAreaStartRender}
-          <RenderActionList dataSource={rightActions} />
-          {rightAreaEndRender}
-        </>
-      }
-    />
-  ),
-);
+      const Render = actionMap[actionKey];
+      return {
+        alwaysDisplay: actionKey === 'mainToken',
+        children: <Render key={actionKey} />,
+        key: actionKey,
+      };
+    } else {
+      return {
+        children: actionKey.map((groupActionKey) => {
+          const Render = actionMap[groupActionKey];
+          return {
+            children: <Render key={groupActionKey} />,
+            key: groupActionKey,
+          };
+        }),
+        key: `group-${index}`,
+        type: 'collapse',
+      };
+    }
+  });
+
+const ActionToolbar = memo(() => {
+  const leftActions = useChatInputStore((s) => s.leftActions);
+  const mobile = useChatInputStore((s) => s.mobile);
+  const items = useMemo(() => mapActionsToItems(leftActions), [leftActions]);
+  return <ChatInputActions collapseOffset={mobile ? 48 : 80} items={items} />;
+});
 
-export default ActionBar;
+export default ActionToolbar;

package/src/features/ChatInput/ChatInputProvider.tsx

@@ -0,0 +1,54 @@
+import { useEditor } from '@lobehub/editor/react';
+import { ReactNode, memo, useRef } from 'react';
+
+import StoreUpdater, { StoreUpdaterProps } from './StoreUpdater';
+import { Provider, createStore } from './store';
+
+interface ChatInputProviderProps extends StoreUpdaterProps {
+  children: ReactNode;
+}
+
+export const ChatInputProvider = memo<ChatInputProviderProps>(
+  ({
+    children,
+    leftActions,
+    rightActions,
+    mobile,
+    sendButtonProps,
+    onSend,
+    sendMenu,
+    chatInputEditorRef,
+    onMarkdownContentChange,
+  }) => {
+    const editor = useEditor();
+    const slashMenuRef = useRef<HTMLDivElement>(null);
+
+    return (
+      <Provider
+        createStore={() =>
+          createStore({
+            editor,
+            leftActions,
+            mobile,
+            rightActions,
+            sendButtonProps,
+            sendMenu,
+            slashMenuRef,
+          })
+        }
+      >
+        <StoreUpdater
+          chatInputEditorRef={chatInputEditorRef}
+          leftActions={leftActions}
+          mobile={mobile}
+          onMarkdownContentChange={onMarkdownContentChange}
+          onSend={onSend}
+          rightActions={rightActions}
+          sendButtonProps={sendButtonProps}
+          sendMenu={sendMenu}
+        />
+        {children}
+      </Provider>
+    );
+  },
+);

package/src/features/ChatInput/Desktop/FilePreview/FileItem/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Text } from '@lobehub/ui';
+import { ActionIcon, Block, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { Trash2Icon } from 'lucide-react';
 import { memo } from 'react';
@@ -26,17 +26,13 @@ const useStyles = createStyles(({ css, token }) => ({
       ${token.boxShadowTertiary};
   `,
   container: css`
+    user-select: none;
+
     position: relative;
 
     width: 180px;
     height: 64px;
     border-radius: 8px;
-
-    background: ${token.colorBgContainer};
-
-    :hover {
-      background: ${token.colorBgElevated};
-    }
   `,
   image: css`
     margin-block: 0 !important;
@@ -58,15 +54,28 @@ const FileItem = memo<FileItemProps>((props) => {
   const [removeChatUploadFile] = useFileStore((s) => [s.removeChatUploadFile]);
 
   return (
-    <Flexbox align={'center'} className={styles.container} horizontal>
+    <Block align={'center'} className={styles.container} horizontal variant={'outlined'}>
       <Center flex={1} height={64} padding={4} style={{ maxWidth: 64 }}>
         <Content {...props} />
       </Center>
       <Flexbox flex={1} gap={4} style={{ paddingBottom: 4, paddingInline: 4 }}>
-        <Text ellipsis={{ tooltip: true }} style={{ fontSize: 12, maxWidth: 100 }}>
+        <Text
+          ellipsis={{
+            tooltip: {
+              styles: {
+                body: {
+                  fontSize: 12,
+                  whiteSpace: 'balance',
+                  wordBreak: 'break-all',
+                },
+              },
+              title: file.name,
+            },
+          }}
+          style={{ fontSize: 12, maxWidth: 88 }}
+        >
           {file.name}
         </Text>
-
         <UploadDetail size={file.size} status={status} tasks={tasks} uploadState={uploadState} />
       </Flexbox>
       <Flexbox className={styles.actions}>
@@ -80,7 +89,7 @@ const FileItem = memo<FileItemProps>((props) => {
           title={t('delete', { ns: 'common' })}
         />
       </Flexbox>
-    </Flexbox>
+    </Block>
   );
 });
 

package/src/features/ChatInput/Desktop/FilePreview/FileList.tsx

@@ -1,42 +1,43 @@
+import { ScrollShadow } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { lighten } from 'polished';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useChatInputStore } from '@/features/ChatInput/store';
 import { fileChatSelectors, useFileStore } from '@/store/file';
 
 import FileItem from './FileItem';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css }) => ({
   container: css`
     overflow-x: scroll;
-
     width: 100%;
-    border-start-start-radius: 8px;
-    border-start-end-radius: 8px;
-
-    background: ${lighten(0.01, token.colorBgLayout)};
   `,
 }));
 
 const FileList = memo(() => {
+  const expand = useChatInputStore((s) => s.expand);
+
   const inputFilesList = useFileStore(fileChatSelectors.chatUploadFileList);
   const showFileList = useFileStore(fileChatSelectors.chatUploadFileListHasItem);
   const { styles } = useStyles();
 
-  if (!inputFilesList.length) return null;
+  if (!inputFilesList.length || !showFileList) return null;
 
   return (
-    <Flexbox
+    <ScrollShadow
       className={styles.container}
-      gap={6}
+      hideScrollBar
       horizontal
-      padding={showFileList ? '16px 16px 12px' : 0}
+      orientation={'horizontal'}
+      size={8}
     >
-      {inputFilesList.map((item) => (
-        <FileItem key={item.id} {...item} />
-      ))}
-    </Flexbox>
+      <Flexbox gap={6} horizontal paddingBlock={8} paddingInline={expand ? 0 : 12}>
+        {inputFilesList.map((item) => (
+          <FileItem key={item.id} {...item} />
+        ))}
+      </Flexbox>
+    </ScrollShadow>
   );
 });