@lobehub/chat 1.123.4 → 1.124.1

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>
   );
 });
 

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

@@ -1,82 +1,107 @@
 'use client';
 
-import { DraggablePanel } from '@lobehub/ui';
-import { ReactNode, memo, useCallback, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { ChatInput, ChatInputActionBar } from '@lobehub/editor/react';
+import { Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
 
-import { CHAT_TEXTAREA_HEIGHT, CHAT_TEXTAREA_MAX_HEIGHT } from '@/const/layoutTokens';
+import { useChatInputStore } from '@/features/ChatInput/store';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 
-import { ActionKeys } from '../ActionBar/config';
-import LocalFiles from './FilePreview';
-import Head from './Header';
+import ActionBar from '../ActionBar';
+import InputEditor from '../InputEditor';
+import SendArea from '../SendArea';
+import TypoBar from '../TypoBar';
+import FilePreview from './FilePreview';
 
-export type FooterRender = (params: {
-  expand: boolean;
-  onExpandChange: (expand: boolean) => void;
-}) => ReactNode;
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    .show-on-hover {
+      opacity: 0;
+    }
 
-interface DesktopChatInputProps {
-  inputHeight: number;
-  leftActions: ActionKeys[];
-  onInputHeightChange?: (height: number) => void;
-  renderFooter: FooterRender;
-  renderTextArea: (onSend: () => void) => ReactNode;
-  rightActions: ActionKeys[];
-}
+    &:hover {
+      .show-on-hover {
+        opacity: 1;
+      }
+    }
+  `,
+  footnote: css`
+    font-size: 10px;
+  `,
+  fullscreen: css`
+    position: absolute;
+    z-index: 100;
+    inset: 0;
 
-const DesktopChatInput = memo<DesktopChatInputProps>(
-  ({
-    leftActions,
-    rightActions,
-    renderTextArea,
-    inputHeight,
-    onInputHeightChange,
-    renderFooter,
-  }) => {
-    const [expand, setExpand] = useState<boolean>(false);
-    const onSend = useCallback(() => {
-      setExpand(false);
-    }, []);
+    width: 100%;
+    height: 100%;
+    padding: 12px;
 
-    return (
-      <>
-        {!expand && leftActions.includes('fileUpload') && <LocalFiles />}
-        <DraggablePanel
-          fullscreen={expand}
-          maxHeight={CHAT_TEXTAREA_MAX_HEIGHT}
-          minHeight={CHAT_TEXTAREA_HEIGHT}
-          onSizeChange={(_, size) => {
-            if (!size) return;
-            const height =
-              typeof size.height === 'string' ? Number.parseInt(size.height) : size.height;
-            if (!height) return;
+    background: ${token.colorBgContainerSecondary};
+  `,
+}));
 
-            onInputHeightChange?.(height);
-          }}
-          placement="bottom"
-          size={{ height: inputHeight, width: '100%' }}
-          style={{ zIndex: 10 }}
-        >
-          <Flexbox
-            gap={8}
-            height={'100%'}
-            paddingBlock={'4px 16px'}
-            style={{ minHeight: CHAT_TEXTAREA_HEIGHT, position: 'relative' }}
-          >
-            <Head
-              expand={expand}
-              leftActions={leftActions}
-              rightActions={rightActions}
-              setExpand={setExpand}
+const DesktopChatInput = memo<{ showFootnote?: boolean }>(({ showFootnote }) => {
+  const { t } = useTranslation('chat');
+  const [slashMenuRef, expand, showTypoBar, editor, leftActions] = useChatInputStore((s) => [
+    s.slashMenuRef,
+    s.expand,
+    s.showTypoBar,
+    s.editor,
+    s.leftActions,
+  ]);
+
+  const { styles, cx } = useStyles();
+
+  const chatKey = useChatStore(chatSelectors.currentChatKey);
+
+  useEffect(() => {
+    if (editor) editor.focus();
+  }, [chatKey, editor]);
+
+  const fileNode = leftActions.flat().includes('fileUpload') && <FilePreview />;
+
+  return (
+    <>
+      {!expand && fileNode}
+      <Flexbox
+        className={cx(styles.container, expand && styles.fullscreen)}
+        gap={8}
+        paddingBlock={showFootnote ? '0 8px' : '0 12px'}
+        paddingInline={12}
+      >
+        <ChatInput
+          footer={
+            <ChatInputActionBar
+              left={<ActionBar />}
+              right={<SendArea />}
+              style={{
+                paddingRight: 8,
+              }}
             />
-            {renderTextArea(onSend)}
-            {renderFooter({ expand, onExpandChange: setExpand })}
-          </Flexbox>
-        </DraggablePanel>
-      </>
-    );
-  },
-);
+          }
+          fullscreen={expand}
+          header={showTypoBar && <TypoBar />}
+          slashMenuRef={slashMenuRef}
+        >
+          {expand && fileNode}
+          <InputEditor />
+        </ChatInput>
+        {showFootnote && !expand && (
+          <Center style={{ pointerEvents: 'none', zIndex: 100 }}>
+            <Text className={styles.footnote} type={'secondary'}>
+              {t('input.disclaimer')}
+            </Text>
+          </Center>
+        )}
+      </Flexbox>
+    </>
+  );
+});
 
 DesktopChatInput.displayName = 'DesktopChatInput';