npm - @lobehub/chat - Versions diffs - 1.123.4 → 1.124.0 - Mend

@lobehub/chat 1.123.4 → 1.124.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

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

@@ -1,82 +1,95 @@
 'use client';
-import { DraggablePanel } from '@lobehub/ui';
-import { ReactNode, memo, useCallback, useState } from 'react';
+import { ChatInput, ChatInputActionBar } from '@lobehub/editor/react';
+import { createStyles } from 'antd-style';
+import { memo, useEffect } from 'react';
 import { 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 ShortcutHint from '../SendArea/ShortcutHint';
+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;
+      }
+    }
+  `,
+  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 [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)}
+        paddingBlock={showFootnote ? 0 : '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 && <ShortcutHint />}
+      </Flexbox>
+    </>
+  );
+});
 DesktopChatInput.displayName = 'DesktopChatInput';

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

@@ -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 RENAMED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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;