@lobehub/chat 1.123.4 → 1.124.0

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

package/src/features/ChatInput/store/action.ts

@@ -0,0 +1,75 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { PublicState, State, initialState } from './initialState';
+
+export interface Action {
+  getJSONState: () => any;
+  getMarkdownContent: () => string;
+  handleSendButton: () => void;
+  handleStop: () => void;
+  setExpand: (expend: boolean) => void;
+  setJSONState: (content: any) => void;
+  setShowTypoBar: (show: boolean) => void;
+  updateMarkdownContent: () => void;
+}
+
+export type Store = Action & State;
+
+// const t = setNamespace('ChatInput');
+
+type CreateStore = (
+  initState?: Partial<PublicState>,
+) => StateCreator<Store, [['zustand/devtools', never]]>;
+
+export const store: CreateStore = (publicState) => (set, get) => ({
+  ...initialState,
+  ...publicState,
+
+  getJSONState: () => {
+    return get().editor?.getDocument('json');
+  },
+  getMarkdownContent: () => {
+    return String(get().editor?.getDocument('markdown') || '').trimEnd();
+  },
+  handleSendButton: () => {
+    if (!get().editor) return;
+
+    const editor = get().editor;
+
+    get().onSend?.({
+      clearContent: () => editor?.cleanDocument(),
+      editor: editor!,
+      getMarkdownContent: get().getMarkdownContent,
+    });
+  },
+
+  handleStop: () => {
+    if (!get().editor) return;
+
+    get().sendButtonProps?.onStop?.({ editor: get().editor! });
+  },
+
+  setExpand: (expand) => {
+    set({ expand });
+  },
+
+  setJSONState: (content) => {
+    get().editor?.setDocument('json', content);
+  },
+
+  setShowTypoBar: (showTypoBar) => {
+    set({ showTypoBar });
+  },
+
+  updateMarkdownContent: () => {
+    if (!get().onMarkdownContentChange) return;
+
+    const content = get().getMarkdownContent();
+
+    if (content === get().markdownContent) return;
+
+    get().onMarkdownContentChange?.(content);
+
+    set({ markdownContent: content });
+  },
+});

package/src/features/ChatInput/store/index.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { StoreApiWithSelector } from '@lobechat/types';
+import { createContext } from 'zustand-utils';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { Store, store } from './action';
+import { State } from './initialState';
+
+export type { PublicState, State } from './initialState';
+
+export const createStore = (initState?: Partial<State>) =>
+  createWithEqualityFn(subscribeWithSelector(store(initState)), shallow);
+
+export const {
+  useStore: useChatInputStore,
+  useStoreApi,
+  Provider,
+} = createContext<StoreApiWithSelector<Store>>();
+
+export { selectors } from './selectors';

package/src/features/ChatInput/store/initialState.ts

@@ -0,0 +1,54 @@
+import type { IEditor } from '@lobehub/editor';
+import type { ChatInputProps } from '@lobehub/editor/react';
+import type { MenuProps } from '@lobehub/ui/es/Menu';
+
+import { ActionKeys } from '@/features/ChatInput';
+
+export type SendButtonHandler = (params: {
+  clearContent: () => void;
+  editor: IEditor;
+  getMarkdownContent: () => string;
+}) => Promise<void> | void;
+
+export interface SendButtonProps {
+  disabled?: boolean;
+  generating: boolean;
+  onStop: (params: { editor: IEditor }) => void;
+  shape?: 'round' | 'default';
+}
+
+export const initialSendButtonState: SendButtonProps = {
+  disabled: false,
+  generating: false,
+  onStop: () => {},
+};
+
+export interface PublicState {
+  allowExpand?: boolean;
+  expand?: boolean;
+  leftActions: ActionKeys[];
+  mobile?: boolean;
+  onMarkdownContentChange?: (content: string) => void;
+  onSend?: SendButtonHandler;
+  rightActions: ActionKeys[];
+  sendButtonProps?: SendButtonProps;
+  sendMenu?: MenuProps;
+  showTypoBar?: boolean;
+}
+
+export interface State extends PublicState {
+  editor?: IEditor;
+  isContentEmpty: boolean;
+  markdownContent: string;
+  slashMenuRef: ChatInputProps['slashMenuRef'];
+}
+
+export const initialState: State = {
+  allowExpand: true,
+  expand: false,
+  isContentEmpty: false,
+  leftActions: [],
+  markdownContent: '',
+  rightActions: [],
+  slashMenuRef: { current: null },
+};

package/src/features/ChatInput/store/selectors.ts

@@ -0,0 +1,5 @@
+import { SendButtonProps, State, initialSendButtonState } from './initialState';
+
+export const selectors = {
+  sendButtonProps: (s: State): SendButtonProps => s.sendButtonProps || initialSendButtonState,
+};

package/src/features/Conversation/components/BackBottom/style.ts

@@ -8,7 +8,7 @@ export const useStyles = createStyles(({ token, css, stylish, cx, responsive })
       pointer-events: none;
 
       position: absolute;
-      z-index: 1000;
+      z-index: 50;
       inset-block-end: 16px;
       inset-inline-end: 16px;
       transform: translateY(16px);

package/src/features/Conversation/components/SkeletonList.tsx

@@ -3,7 +3,8 @@
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+
+import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   message: css`
@@ -30,7 +31,13 @@ const SkeletonList = memo<SkeletonListProps>(({ mobile }) => {
   const { cx, styles } = useStyles();
 
   return (
-    <Flexbox gap={24} padding={mobile ? 8 : 12} style={{ marginTop: 24 }}>
+    <WideScreenContainer
+      flex={1}
+      gap={24}
+      height={'100%'}
+      padding={mobile ? 8 : 12}
+      style={{ marginTop: 24 }}
+    >
       <Skeleton
         active
         avatar={{ size: mobile ? 32 : 40 }}
@@ -45,7 +52,7 @@ const SkeletonList = memo<SkeletonListProps>(({ mobile }) => {
         paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }}
         title={false}
       />
-    </Flexbox>
+    </WideScreenContainer>
   );
 });
 export default SkeletonList;

package/src/features/Conversation/components/VirtualizedList/index.tsx

@@ -1,13 +1,10 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { Loader2Icon } from 'lucide-react';
-import React, { ReactNode, memo, useCallback, useEffect, useRef, useState } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
+import { ReactNode, forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
-import { isServerMode } from '@/const/version';
+import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 
@@ -21,8 +18,17 @@ interface VirtualizedListProps {
   mobile?: boolean;
 }
 
+const List = forwardRef(({ ...props }, ref) => {
+  return (
+    <Flexbox>
+      <WideScreenContainer id={'chatlist-list'} ref={ref} {...props} />
+    </Flexbox>
+  );
+});
+
 const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemContent }) => {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const prevDataLengthRef = useRef(dataSource.length);
   const [atBottom, setAtBottom] = useState(true);
   const [isScrolling, setIsScrolling] = useState(false);
 
@@ -32,71 +38,74 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
     chatSelectors.isCurrentChatLoaded(s),
   ]);
 
-  useEffect(() => {
-    if (virtuosoRef.current) {
-      virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
-    }
-  }, [id]);
-
-  const prevDataLengthRef = useRef(dataSource.length);
-
   const getFollowOutput = useCallback(() => {
     const newFollowOutput = dataSource.length > prevDataLengthRef.current ? 'auto' : false;
     prevDataLengthRef.current = dataSource.length;
     return newFollowOutput;
   }, [dataSource.length]);
 
-  const theme = useTheme();
+  const scrollToBottom = useCallback(
+    (behavior: 'auto' | 'smooth' = 'smooth') => {
+      if (atBottom) return;
+      if (!virtuosoRef.current) return;
+      virtuosoRef.current.scrollToIndex({ align: 'end', behavior, index: 'LAST' });
+    },
+    [atBottom],
+  );
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [id]);
+
   // overscan should be 3 times the height of the window
   const overscan = typeof window !== 'undefined' ? window.innerHeight * 3 : 0;
 
   // first time loading or not loaded
-  if (isFirstLoading) return <SkeletonList mobile={mobile} />;
-
-  if (!isCurrentChatLoaded)
-    // use skeleton list when not loaded in server mode due to the loading duration is much longer than client mode
-    return isServerMode ? (
-      <SkeletonList mobile={mobile} />
-    ) : (
-      // in client mode and switch page, using the center loading for smooth transition
-      <Center height={'100%'} width={'100%'}>
-        <Icon icon={Loader2Icon} size={32} spin style={{ color: theme.colorTextTertiary }} />
-      </Center>
-    );
+  if (isFirstLoading || !isCurrentChatLoaded) return <SkeletonList mobile={mobile} />;
 
   return (
     <VirtuosoContext value={virtuosoRef}>
-      <Flexbox height={'100%'}>
-        <Virtuoso
-          atBottomStateChange={setAtBottom}
-          atBottomThreshold={50 * (mobile ? 2 : 1)}
-          computeItemKey={(_, item) => item}
-          data={dataSource}
-          followOutput={getFollowOutput}
-          increaseViewportBy={overscan}
-          initialTopMostItemIndex={dataSource?.length - 1}
-          isScrolling={setIsScrolling}
-          itemContent={itemContent}
-          ref={virtuosoRef}
-        />
+      <Virtuoso
+        atBottomStateChange={setAtBottom}
+        atBottomThreshold={50 * (mobile ? 2 : 1)}
+        components={{
+          List,
+        }}
+        computeItemKey={(_, item) => item}
+        data={dataSource}
+        followOutput={getFollowOutput}
+        increaseViewportBy={overscan}
+        initialTopMostItemIndex={dataSource?.length - 1}
+        isScrolling={setIsScrolling}
+        itemContent={itemContent}
+        ref={virtuosoRef}
+      />
+      <WideScreenContainer
+        onChange={() => {
+          if (!atBottom) return;
+          setTimeout(scrollToBottom, 100);
+        }}
+        style={{
+          position: 'relative',
+        }}
+      >
         <AutoScroll
           atBottom={atBottom}
           isScrolling={isScrolling}
           onScrollToBottom={(type) => {
-            const virtuoso = virtuosoRef.current;
             switch (type) {
               case 'auto': {
-                virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
+                scrollToBottom();
                 break;
               }
               case 'click': {
-                virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
+                scrollToBottom('smooth');
                 break;
               }
             }
           }}
         />
-      </Flexbox>
+      </WideScreenContainer>
     </VirtuosoContext>
   );
 });

package/src/features/Conversation/components/WideScreenContainer/index.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo, useEffect } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { CONVERSATION_MIN_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    align-self: center;
+    transition: width 0.25s ${token.motionEaseInOut};
+  `,
+}));
+
+interface WideScreenContainerProps extends FlexboxProps {
+  onChange?: () => void;
+}
+
+const WideScreenContainer = memo<WideScreenContainerProps>(
+  ({ children, className, onChange, ...rest }) => {
+    const { cx, styles } = useStyles();
+    const wideScreen = useGlobalStore(systemStatusSelectors.wideScreen);
+
+    useEffect(() => {
+      onChange?.();
+    }, [wideScreen]);
+
+    return (
+      <Flexbox
+        className={cx(styles.container, className)}
+        width={wideScreen ? '100%' : `min(${CONVERSATION_MIN_WIDTH}px, 100%)`}
+        {...rest}
+      >
+        {children}
+      </Flexbox>
+    );
+  },
+);
+
+export default WideScreenContainer;