@lobehub/chat 1.123.4 → 1.124.1

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;

package/src/features/Portal/Thread/Chat/ChatInput/index.tsx

@@ -4,63 +4,70 @@ import { Alert } from '@lobehub/ui';
 import Link from 'next/link';
 import { memo } from 'react';
 import { Trans } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
-import DesktopChatInput, { FooterRender } from '@/features/ChatInput/Desktop';
+import { type ActionKeys, ChatInputProvider, DesktopChatInput } from '@/features/ChatInput';
+import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
+import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
-import Footer from './Footer';
-import TextArea from './TextArea';
+import { useSendThreadMessage } from './useSend';
 
-const leftActions = ['stt', 'portalToken'] as ActionKeys[];
-
-const rightActions = [] as ActionKeys[];
-
-const renderTextArea = (onSend: () => void) => <TextArea onSend={onSend} />;
-const renderFooter: FooterRender = (props) => <Footer {...props} />;
+const threadActions: ActionKeys[] = ['typo', 'stt', 'portalToken'];
 
 const Desktop = memo(() => {
-  const [inputHeight, hideThreadLimitAlert, updateSystemStatus] = useGlobalStore((s) => [
-    systemStatusSelectors.threadInputHeight(s),
+  const [hideThreadLimitAlert, updateSystemStatus] = useGlobalStore((s) => [
     systemStatusSelectors.systemStatus(s).hideThreadLimitAlert,
     s.updateSystemStatus,
   ]);
 
+  const { send, disabled, generating, stop } = useSendThreadMessage();
+
   return (
-    <>
+    <WideScreenContainer>
       {!hideThreadLimitAlert && (
-        <Alert
-          banner
-          closable
-          message={
-            <Trans i18nKey={'notSupportMultiModals'} ns={'thread'}>
-              子话题暂不支持文件/图片上传，如有需求，欢迎留言：
-              <Link
-                href={'https://github.com/lobehub/lobe-chat/discussions/4717'}
-                style={{ textDecoration: 'underline' }}
-              >
-                💬 讨论
-              </Link>
-            </Trans>
-          }
-          onClose={() => {
-            updateSystemStatus({ hideThreadLimitAlert: true });
-          }}
-          type={'info'}
-        />
+        <Flexbox paddingBlock={'0 6px'} paddingInline={12}>
+          <Alert
+            closable
+            message={
+              <Trans i18nKey={'notSupportMultiModals'} ns={'thread'}>
+                子话题暂不支持文件/图片上传，如有需求，欢迎留言：
+                <Link
+                  href={'https://github.com/lobehub/lobe-chat/discussions/4717'}
+                  style={{ textDecoration: 'underline' }}
+                >
+                  💬 讨论
+                </Link>
+              </Trans>
+            }
+            onClose={() => {
+              updateSystemStatus({ hideThreadLimitAlert: true });
+            }}
+            type={'info'}
+          />
+        </Flexbox>
       )}
-      <DesktopChatInput
-        inputHeight={inputHeight}
-        leftActions={leftActions}
-        onInputHeightChange={(height) => {
-          updateSystemStatus({ threadInputHeight: height });
+
+      <ChatInputProvider
+        chatInputEditorRef={(instance) => {
+          if (!instance) return;
+          useChatStore.setState({ threadInputEditor: instance });
+        }}
+        leftActions={threadActions}
+        onSend={() => {
+          send();
+        }}
+        sendButtonProps={{
+          disabled,
+          generating,
+          onStop: stop,
+          shape: 'round',
         }}
-        renderFooter={renderFooter}
-        renderTextArea={renderTextArea}
-        rightActions={rightActions}
-      />
-    </>
+      >
+        <DesktopChatInput />
+      </ChatInputProvider>
+    </WideScreenContainer>
   );
 });
 

package/src/features/Portal/Thread/Chat/ChatInput/useSend.ts

@@ -1,5 +1,8 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
+import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
+import { getAgentStoreState } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
 import { threadSelectors } from '@/store/chat/selectors';
 import { SendMessageParams } from '@/types/message';
@@ -10,41 +13,64 @@ export type UseSendMessageParams = Pick<
 >;
 
 export const useSendThreadMessage = () => {
+  const [loading, setLoading] = useState(false);
+  const canNotSend = useChatStore(threadSelectors.isSendButtonDisabledByMessage);
+  const generating = useChatStore((s) => threadSelectors.isThreadAIGenerating(s));
+  const stop = useChatStore((s) => s.stopGenerateMessage);
   const [sendMessage, updateInputMessage] = useChatStore((s) => [
     s.sendThreadMessage,
     s.updateThreadInputMessage,
   ]);
+  const checkGeminiChineseWarning = useGeminiChineseWarning();
 
-  const isSendButtonDisabledByMessage = useChatStore(threadSelectors.isSendButtonDisabledByMessage);
-
-  const canSend = !isSendButtonDisabledByMessage;
-
-  const send = useCallback((params: UseSendMessageParams = {}) => {
+  const handleSend = async (params: UseSendMessageParams = {}) => {
     const store = useChatStore.getState();
+
     if (threadSelectors.isThreadAIGenerating(store)) return;
+    const canNotSend = threadSelectors.isSendButtonDisabledByMessage(store);
+
+    if (canNotSend) return;
+
+    const threadInputEditor = store.threadInputEditor;
 
-    const isSendButtonDisabledByMessage = threadSelectors.isSendButtonDisabledByMessage(
-      useChatStore.getState(),
-    );
+    if (!threadInputEditor) {
+      console.warn('not found threadInputEditor instance');
+      return;
+    }
 
-    const canSend = !isSendButtonDisabledByMessage;
-    if (!canSend) return;
+    const inputMessage = threadInputEditor.getMarkdownContent();
 
     // if there is no message and no image, then we should not send the message
-    if (!store.threadInputMessage) return;
+    if (!inputMessage) return;
 
-    sendMessage({ message: store.threadInputMessage, ...params });
+    // Check for Chinese text warning with Gemini model
+    const agentStore = getAgentStoreState();
+    const currentModel = agentSelectors.currentAgentModel(agentStore);
+    const shouldContinue = await checkGeminiChineseWarning({
+      model: currentModel,
+      prompt: inputMessage,
+      scenario: 'chat',
+    });
 
-    updateInputMessage('');
+    if (!shouldContinue) return;
+
+    updateInputMessage(inputMessage);
 
-    // const hasSystemRole = agentSelectors.hasSystemRole(useAgentStore.getState());
-    // const agentSetting = useAgentStore.getState().agentSettingInstance;
+    sendMessage({ message: inputMessage, ...params });
+
+    updateInputMessage('');
+    threadInputEditor.clearContent();
+    threadInputEditor.focus();
+  };
 
-    // // if there is a system role, then we need to use agent setting instance to autocomplete agent meta
-    // if (hasSystemRole && !!agentSetting) {
-    //   agentSetting.autocompleteAllMeta();
-    // }
-  }, []);
+  const send = async (params: UseSendMessageParams = {}) => {
+    setLoading(true);
+    await handleSend(params);
+    setLoading(false);
+  };
 
-  return useMemo(() => ({ canSend, send }), [canSend]);
+  return useMemo(
+    () => ({ disabled: canNotSend, generating, loading, send, stop }),
+    [canNotSend, send, generating, stop, loading],
+  );
 };

package/src/features/Portal/Thread/Chat/index.tsx

@@ -11,7 +11,7 @@ interface ConversationProps {
 }
 
 const Conversation = memo<ConversationProps>(({ mobile }) => (
-  <Flexbox height={'100%'}>
+  <>
     <Suspense
       fallback={
         <Flexbox flex={1} height={'100%'}>
@@ -22,7 +22,7 @@ const Conversation = memo<ConversationProps>(({ mobile }) => (
       <ChatList mobile={mobile} />
     </Suspense>
     <ChatInput />
-  </Flexbox>
+  </>
 ));
 
 export default Conversation;

package/src/features/Portal/Thread/Header/index.tsx

@@ -40,7 +40,7 @@ const Header = memo(() => {
       paddingBlock={6}
       paddingInline={8}
       style={{
-        background: `linear-gradient(to bottom, ${theme.colorBgContainerSecondary}, ${theme.colorFillQuaternary})`,
+        borderBottom: `1px solid ${theme.colorBorderSecondary}`,
       }}
       title={<Title />}
     />

package/src/hooks/useHotkeys/chatScope.ts

@@ -2,8 +2,8 @@ import isEqual from 'fast-deep-equal';
 import { useEffect } from 'react';
 import { useHotkeysContext } from 'react-hotkeys-hook';
 
+import { useSend } from '@/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/useSend';
 import { useClearCurrentMessages } from '@/features/ChatInput/ActionBar/Clear';
-import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
@@ -75,8 +75,10 @@ export const useToggleRightPanelHotkey = () => {
 };
 
 export const useAddUserMessageHotkey = () => {
-  const { send } = useSendMessage();
-  return useHotkeyById(HotkeyEnum.AddUserMessage, () => send({ onlyAddUserMessage: true }));
+  const { send } = useSend();
+  return useHotkeyById(HotkeyEnum.AddUserMessage, () => {
+    send({ onlyAddUserMessage: true });
+  });
 };
 
 export const useClearCurrentMessagesHotkey = () => {