@lobehub/chat 1.123.4 → 1.124.1

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

@@ -0,0 +1,134 @@
+import { isDesktop } from '@lobechat/const';
+import { HotkeyEnum } from '@lobechat/types';
+import { isCommandPressed } from '@lobechat/utils';
+import {
+  INSERT_TABLE_COMMAND,
+  ReactCodeblockPlugin,
+  ReactHRPlugin,
+  ReactLinkPlugin,
+  ReactListPlugin,
+  ReactTablePlugin,
+} from '@lobehub/editor';
+import { Editor, SlashMenu, useEditorState } from '@lobehub/editor/react';
+import { Table2Icon } from 'lucide-react';
+import { memo, useEffect, useRef } from 'react';
+import { useHotkeysContext } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
+
+import { useUserStore } from '@/store/user';
+import { preferenceSelectors } from '@/store/user/selectors';
+
+import { useChatInputStore, useStoreApi } from '../store';
+
+const InputEditor = memo<{ defaultRows?: number }>(({ defaultRows = 2 }) => {
+  const [editor, slashMenuRef, send, updateMarkdownContent] = useChatInputStore((s) => [
+    s.editor,
+    s.slashMenuRef,
+    s.handleSendButton,
+    s.updateMarkdownContent,
+  ]);
+
+  const storeApi = useStoreApi();
+
+  const state = useEditorState(editor);
+  const { enableScope, disableScope } = useHotkeysContext();
+  const { t } = useTranslation(['editor', 'chat']);
+
+  const isChineseInput = useRef(false);
+
+  const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
+
+  useEffect(() => {
+    const fn = (e: BeforeUnloadEvent) => {
+      if (!state.isEmpty) {
+        // set returnValue to trigger alert modal
+        // Note: No matter what value is set, the browser will display the standard text
+        e.returnValue = 'You are typing something, are you sure you want to leave?';
+      }
+    };
+    window.addEventListener('beforeunload', fn);
+    return () => {
+      window.removeEventListener('beforeunload', fn);
+    };
+  }, [state.isEmpty]);
+
+  return (
+    <Editor
+      autoFocus
+      content={''}
+      editor={editor}
+      onBlur={() => {
+        disableScope(HotkeyEnum.AddUserMessage);
+      }}
+      onChange={() => {
+        updateMarkdownContent();
+      }}
+      onCompositionEnd={() => {
+        isChineseInput.current = false;
+      }}
+      onCompositionStart={() => {
+        isChineseInput.current = true;
+      }}
+      onContextMenu={async ({ event: e, editor }) => {
+        if (isDesktop) {
+          e.preventDefault();
+          const { electronSystemService } = await import('@/services/electron/system');
+
+          const selectionValue = editor.getSelectionDocument('markdown') as unknown as string;
+          const hasSelection = !!selectionValue;
+
+          await electronSystemService.showContextMenu('editor', {
+            hasSelection,
+            value: selectionValue,
+          });
+        }
+      }}
+      onFocus={() => {
+        enableScope(HotkeyEnum.AddUserMessage);
+      }}
+      onInit={(editor) => storeApi.setState({ editor })}
+      onPressEnter={({ event: e }) => {
+        if (e.altKey || e.shiftKey || isChineseInput.current) return;
+        const commandKey = isCommandPressed(e);
+        // when user like cmd + enter to send message
+        if (useCmdEnterToSend) {
+          if (commandKey) send();
+        } else {
+          if (!commandKey) send();
+        }
+      }}
+      placeholder={t('sendPlaceholder', { ns: 'chat' })}
+      plugins={[
+        ReactListPlugin,
+        ReactLinkPlugin,
+        ReactCodeblockPlugin,
+        ReactHRPlugin,
+        ReactTablePlugin,
+      ]}
+      slashOption={{
+        items: [
+          {
+            icon: Table2Icon,
+            key: 'table',
+            label: t('typobar.table'),
+            onSelect: (editor) => {
+              editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns: '3', rows: '3' });
+            },
+          },
+        ],
+        renderComp: (props) => {
+          return <SlashMenu {...props} getPopupContainer={() => (slashMenuRef as any)?.current} />;
+        },
+      }}
+      style={{
+        minHeight: defaultRows > 1 ? defaultRows * 23 : undefined,
+      }}
+      type={'text'}
+      variant={'chat'}
+    />
+  );
+});
+
+InputEditor.displayName = 'InputEditor';
+
+export default InputEditor;

package/src/{app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files → features/ChatInput/Mobile/FilePreview}/FileItem/File.tsx

@@ -5,10 +5,9 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import FileIcon from '@/components/FileIcon';
+import UploadDetail from '@/features/ChatInput/components/UploadDetail';
 import { UploadFileItem } from '@/types/files';
 
-import UploadDetail from '../../../../../../../../../../../features/ChatInput/components/UploadDetail';
-
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
     cursor: pointer;

package/src/features/ChatInput/Mobile/FilePreview/index.tsx

@@ -0,0 +1,44 @@
+import { PreviewGroup, ScrollShadow } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatInputStore } from '@/features/ChatInput/store';
+import { filesSelectors, useFileStore } from '@/store/file';
+
+import FileItem from './FileItem';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    overflow-x: scroll;
+    width: 100%;
+  `,
+}));
+
+const FilePreview = memo(() => {
+  const expand = useChatInputStore((s) => s.expand);
+  const list = useFileStore(filesSelectors.chatUploadFileList, isEqual);
+  const { styles } = useStyles();
+  if (!list || list?.length === 0) return null;
+
+  return (
+    <ScrollShadow
+      className={styles.container}
+      hideScrollBar
+      horizontal
+      orientation={'horizontal'}
+      size={8}
+    >
+      <Flexbox gap={6} horizontal paddingBlock={8} paddingInline={expand ? 0 : 12}>
+        <PreviewGroup>
+          {list.map((i) => (
+            <FileItem {...i} key={i.id} loading={i.status === 'pending'} />
+          ))}
+        </PreviewGroup>
+      </Flexbox>
+    </ScrollShadow>
+  );
+});
+
+export default FilePreview;

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

@@ -0,0 +1,72 @@
+'use client';
+
+import { ChatInput, ChatInputActionBar } from '@lobehub/editor/react';
+import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatInputStore } from '@/features/ChatInput/store';
+
+import ActionBar from '../ActionBar';
+import InputEditor from '../InputEditor';
+import SendArea from '../SendArea';
+
+const FilePreview = dynamic(() => import('./FilePreview'), { ssr: false });
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css``,
+  fullscreen: css`
+    position: absolute;
+    z-index: 100;
+    inset: 0;
+
+    width: 100%;
+    height: 100%;
+    padding: 12px;
+
+    background: ${token.colorBgLayout};
+  `,
+}));
+
+const DesktopChatInput = memo(() => {
+  const [slashMenuRef, expand] = useChatInputStore((s) => [s.slashMenuRef, s.expand]);
+  const leftActions = useChatInputStore((s) => s.leftActions);
+
+  const { styles, cx } = useStyles();
+
+  const fileNode = leftActions.flat().includes('fileUpload') && <FilePreview />;
+
+  return (
+    <>
+      {!expand && fileNode}
+      <Flexbox
+        className={cx(styles.container, expand && styles.fullscreen)}
+        paddingBlock={'0 12px'}
+        paddingInline={12}
+      >
+        <ChatInput
+          footer={
+            <ChatInputActionBar
+              left={<div />}
+              right={<SendArea />}
+              style={{
+                paddingRight: 8,
+              }}
+            />
+          }
+          fullscreen={expand}
+          header={<ChatInputActionBar left={<ActionBar />} />}
+          slashMenuRef={slashMenuRef}
+        >
+          {expand && fileNode}
+          <InputEditor defaultRows={1} />
+        </ChatInput>
+      </Flexbox>
+    </>
+  );
+});
+
+DesktopChatInput.displayName = 'DesktopChatInput';
+
+export default DesktopChatInput;

package/src/features/ChatInput/SendArea/ExpandButton.tsx

@@ -0,0 +1,30 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Maximize2Icon, Minimize2Icon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useChatInputStore } from '@/features/ChatInput/store';
+
+const ExpandButton = memo(() => {
+  const { t } = useTranslation('editor');
+  const [expand, setExpand, editor] = useChatInputStore((s) => [s.expand, s.setExpand, s.editor]);
+  return (
+    <ActionIcon
+      className="show-on-hover"
+      icon={expand ? Minimize2Icon : Maximize2Icon}
+      onClick={() => {
+        setExpand?.(!expand);
+        editor?.focus();
+      }}
+      size={{ blockSize: 32, size: 16, strokeWidth: 2.3 }}
+      style={{
+        zIndex: 10,
+      }}
+      title={t(expand ? 'actions.expand.off' : 'actions.expand.on')}
+    />
+  );
+});
+
+ExpandButton.displayName = 'ExpandButton';
+
+export default ExpandButton;

package/src/features/ChatInput/SendArea/SendButton.tsx

@@ -0,0 +1,29 @@
+import { SendButton as Send } from '@lobehub/editor/react';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { selectors, useChatInputStore } from '../store';
+
+const SendButton = memo(() => {
+  const sendMenu = useChatInputStore((s) => s.sendMenu);
+  const shape = useChatInputStore((s) => s.sendButtonProps?.shape);
+  const { generating, disabled } = useChatInputStore(selectors.sendButtonProps, isEqual);
+  const [send, handleStop] = useChatInputStore((s) => [s.handleSendButton, s.handleStop]);
+
+  return (
+    <Send
+      disabled={disabled}
+      generating={generating}
+      menu={sendMenu as any}
+      onClick={() => send()}
+      onStop={() => handleStop()}
+      placement={'topRight'}
+      shape={shape}
+      trigger={['hover']}
+    />
+  );
+});
+
+SendButton.displayName = 'SendButton';
+
+export default SendButton;

package/src/features/ChatInput/SendArea/ShortcutHint.tsx

@@ -0,0 +1,52 @@
+import { Hotkey, Text, combineKeys } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useUserStore } from '@/store/user';
+import { preferenceSelectors } from '@/store/user/selectors';
+import { KeyEnum } from '@/types/hotkey';
+
+const ShortcutHint = memo(() => {
+  const { t } = useTranslation('chat');
+  const theme = useTheme();
+
+  const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
+
+  const sendShortcut = useCmdEnterToSend
+    ? combineKeys([KeyEnum.Mod, KeyEnum.Enter])
+    : KeyEnum.Enter;
+
+  const wrapperShortcut = useCmdEnterToSend
+    ? KeyEnum.Enter
+    : combineKeys([KeyEnum.Mod, KeyEnum.Enter]);
+
+  return (
+    <Text fontSize={12} style={{ color: theme.colorTextQuaternary, userSelect: 'none', zIndex: 1 }}>
+      <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'} paddingBlock={4}>
+        <Hotkey
+          keys={sendShortcut}
+          style={{ color: 'inherit' }}
+          styles={{
+            kbdStyle: { color: 'inherit' },
+          }}
+          variant={'borderless'}
+        />
+        <span>{t('input.send')}</span>
+        <span>/</span>
+        <Hotkey
+          keys={wrapperShortcut}
+          style={{ color: 'inherit' }}
+          styles={{
+            kbdStyle: { color: 'inherit' },
+          }}
+          variant={'borderless'}
+        />
+        <span>{t('input.warp')}</span>
+      </Flexbox>
+    </Text>
+  );
+});
+
+export default ShortcutHint;

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

@@ -0,0 +1,36 @@
+import isEqual from 'fast-deep-equal';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ActionKey, actionMap } from '../ActionBar/config';
+import { useChatInputStore } from '../store';
+import ExpandButton from './ExpandButton';
+import SendButton from './SendButton';
+
+const mapActionsToItems = (keys: ActionKey[]) =>
+  keys.map((actionKey) => {
+    const Render = actionMap[actionKey];
+    return <Render key={actionKey} />;
+  });
+
+const SendArea = memo(() => {
+  const allowExpand = useChatInputStore((s) => s.allowExpand);
+  const rightActions = useChatInputStore((s) => s.rightActions, isEqual);
+
+  const items = useMemo(
+    () => mapActionsToItems((rightActions as ActionKey[]) || []),
+    [rightActions],
+  );
+
+  return (
+    <Flexbox align={'center'} flex={'none'} gap={6} horizontal>
+      {allowExpand && <ExpandButton />}
+      {items}
+      <SendButton />
+    </Flexbox>
+  );
+});
+
+SendArea.displayName = 'SendArea';
+
+export default SendArea;

package/src/features/ChatInput/StoreUpdater.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { ForwardedRef, memo, useImperativeHandle } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { ChatInputEditor, useChatInputEditor } from './hooks/useChatInputEditor';
+import { PublicState, useStoreApi } from './store';
+
+export interface StoreUpdaterProps extends Partial<PublicState> {
+  chatInputEditorRef?: ForwardedRef<ChatInputEditor | null>;
+}
+
+const StoreUpdater = memo<StoreUpdaterProps>(
+  ({
+    chatInputEditorRef,
+    mobile,
+    sendButtonProps,
+    leftActions,
+    rightActions,
+    onSend,
+    onMarkdownContentChange,
+  }) => {
+    const storeApi = useStoreApi();
+    const useStoreUpdater = createStoreUpdater(storeApi);
+    const editor = useChatInputEditor();
+
+    useStoreUpdater('mobile', mobile);
+    useStoreUpdater('leftActions', leftActions);
+    useStoreUpdater('rightActions', rightActions);
+
+    useStoreUpdater('sendButtonProps', sendButtonProps);
+    useStoreUpdater('onSend', onSend);
+    useStoreUpdater('onMarkdownContentChange', onMarkdownContentChange);
+
+    useImperativeHandle(chatInputEditorRef, () => editor);
+
+    return null;
+  },
+);
+
+export default StoreUpdater;

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

@@ -0,0 +1,139 @@
+import { useEditorState } from '@lobehub/editor/react';
+import {
+  ChatInputActionBar,
+  ChatInputActions,
+  type ChatInputActionsProps,
+  CodeLanguageSelect,
+} from '@lobehub/editor/react';
+import { useTheme } from 'antd-style';
+import {
+  BoldIcon,
+  CodeXmlIcon,
+  ItalicIcon,
+  LinkIcon,
+  ListIcon,
+  ListOrderedIcon,
+  MessageSquareQuote,
+  SquareDashedBottomCodeIcon,
+  StrikethroughIcon,
+} from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useChatInputStore } from '@/features/ChatInput/store';
+
+const TypoBar = memo(() => {
+  const { t } = useTranslation('editor');
+  const editor = useChatInputStore((s) => s.editor);
+  const editorState = useEditorState(editor);
+  const theme = useTheme();
+
+  return (
+    <ChatInputActionBar
+      left={
+        <ChatInputActions
+          items={
+            [
+              {
+                active: editorState.isBold,
+                icon: BoldIcon,
+                key: 'bold',
+                label: t('typobar.bold'),
+                onClick: editorState.bold,
+              },
+              {
+                active: editorState.isItalic,
+                icon: ItalicIcon,
+                key: 'italic',
+                label: t('typobar.italic'),
+                onClick: editorState.italic,
+              },
+              // TODO: 目前 markdown 不支持 <u>
+              // {
+              //   active: editorState.isUnderline,
+              //   icon: UnderlineIcon,
+              //   key: 'underline',
+              //   label: t('typobar.underline'),
+              //   onClick: editorState.underline,
+              // },
+              {
+                active: editorState.isStrikethrough,
+                icon: StrikethroughIcon,
+                key: 'strikethrough',
+                label: t('typobar.strikethrough'),
+                onClick: editorState.strikethrough,
+              },
+              {
+                type: 'divider',
+              },
+
+              {
+                icon: ListIcon,
+                key: 'bulletList',
+                label: t('typobar.bulletList'),
+                onClick: editorState.bulletList,
+              },
+              {
+                icon: ListOrderedIcon,
+                key: 'numberlist',
+                label: t('typobar.numberList'),
+                onClick: editorState.numberList,
+              },
+              {
+                active: editorState.isBlockquote,
+                icon: MessageSquareQuote,
+                key: 'blockquote',
+                label: t('typobar.blockquote'),
+                onClick: editorState.blockquote,
+              },
+              {
+                icon: LinkIcon,
+                key: 'link',
+                label: t('typobar.link'),
+                onClick: editorState.insertLink,
+              },
+              {
+                type: 'divider',
+              },
+              {
+                active: editorState.isCode,
+                icon: CodeXmlIcon,
+                key: 'code',
+                label: t('typobar.code'),
+                onClick: editorState.code,
+              },
+              {
+                icon: SquareDashedBottomCodeIcon,
+                key: 'codeblock',
+                label: t('typobar.codeblock'),
+                onClick: editorState.codeblock,
+              },
+              editorState.isCodeblock && {
+                children: (
+                  <CodeLanguageSelect
+                    onSelect={(value) => editorState.updateCodeblockLang(value)}
+                    value={editorState.codeblockLang}
+                  />
+                ),
+                disabled: !editorState.isCodeblock,
+                key: 'codeblockLang',
+              },
+            ].filter(Boolean) as ChatInputActionsProps['items']
+          }
+          onClick={() => {
+            editor?.focus();
+          }}
+        />
+      }
+      style={{
+        background: theme.colorFillQuaternary,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+      }}
+    />
+  );
+});
+
+TypoBar.displayName = 'TypoBar';
+
+export default TypoBar;

package/src/features/ChatInput/hooks/useChatInputEditor.ts

@@ -0,0 +1,36 @@
+import { IEditor } from '@lobehub/editor';
+import { useMemo } from 'react';
+
+import { useChatInputStore } from '@/features/ChatInput/store';
+
+export interface ChatInputEditor {
+  clearContent: () => void;
+  focus: () => void;
+  getJSONState: () => any;
+  getMarkdownContent: () => string;
+  instance: IEditor;
+  setExpand: (expand: boolean) => void;
+  setJSONState: (content: any) => void;
+}
+export const useChatInputEditor = () => {
+  const [editor, getMarkdownContent, getJSONState, setExpand, setJSONState] = useChatInputStore(
+    (s) => [s.editor, s.getMarkdownContent, s.getJSONState, s.setExpand, s.setJSONState],
+  );
+
+  return useMemo<ChatInputEditor>(
+    () => ({
+      clearContent: () => {
+        editor?.cleanDocument();
+      },
+      focus: () => {
+        editor?.focus();
+      },
+      getJSONState,
+      getMarkdownContent,
+      instance: editor!,
+      setExpand,
+      setJSONState,
+    }),
+    [editor],
+  );
+};

package/src/features/ChatInput/index.ts

@@ -0,0 +1,7 @@
+export type { ActionKey, ActionKeys } from './ActionBar/config';
+export { ChatInputProvider } from './ChatInputProvider';
+export { default as DesktopChatInput } from './Desktop';
+export type { ChatInputEditor } from './hooks/useChatInputEditor';
+export { useChatInputEditor } from './hooks/useChatInputEditor';
+export { default as MobileChatInput } from './Mobile';
+export type { SendButtonHandler } from './store/initialState';