@lobehub/chat 0.101.6 → 0.102.0

package/src/app/chat/(mobile)/features/ChatHeader.tsx

@@ -1,7 +1,8 @@
-import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { Clock3, Settings } from 'lucide-react';
+import { ActionIcon, Icon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { Dropdown, MenuProps } from 'antd';
+import { Clock3, MoreHorizontal, Settings, Share2 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
@@ -15,6 +16,7 @@ import ShareButton from '../../features/ChatHeader/ShareButton';
 const MobileHeader = memo(() => {
   const { t } = useTranslation('chat');
   const router = useRouter();
+  const [open, setOpen] = useState(false);
 
   const [isInbox, title] = useSessionStore((s) => [
     sessionSelectors.isInboxSession(s),
@@ -25,21 +27,37 @@ const MobileHeader = memo(() => {
 
   const displayTitle = isInbox ? t('inbox.title') : title;
 
+  const items: MenuProps['items'] = [
+    {
+      icon: <Icon icon={Share2} />,
+      key: 'share',
+      label: t('share', { ns: 'common' }),
+      onClick: () => setOpen(true),
+    },
+    !isInbox && {
+      icon: <Icon icon={Settings} />,
+      key: 'settings',
+      label: t('header.session', { ns: 'setting' }),
+      onClick: () => router.push(pathString('/chat/settings', { hash: location.hash })),
+    },
+  ].filter(Boolean) as MenuProps['items'];
+
   return (
     <MobileNavBar
       center={<MobileNavBarTitle title={displayTitle} />}
       onBackClick={() => router.push('/chat')}
       right={
         <>
-          <ShareButton />
           <ActionIcon icon={Clock3} onClick={() => toggleConfig()} size={MOBILE_HEADER_ICON_SIZE} />
-          {!isInbox && (
-            <ActionIcon
-              icon={Settings}
-              onClick={() => router.push(pathString('/chat/settings', { hash: location.hash }))}
-              size={MOBILE_HEADER_ICON_SIZE}
-            />
-          )}
+          <ShareButton mobile open={open} setOpen={setOpen} />
+          <Dropdown
+            menu={{
+              items,
+            }}
+            trigger={['click']}
+          >
+            <ActionIcon icon={MoreHorizontal} />
+          </Dropdown>
         </>
       }
       showBackButton

package/src/app/chat/(mobile)/features/ChatInput/Mobile.tsx

@@ -1,20 +1,36 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
 import InputAreaInner from '@/app/chat/features/ChatInput/InputAreaInner';
+import STT from '@/app/chat/features/ChatInput/STT';
 import SaveTopic from '@/app/chat/features/ChatInput/Topic';
 
 import SendButton from './SendButton';
-import { useStyles } from './style.mobile';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      padding: 12px 0;
+      background: ${token.colorBgLayout};
+      border-top: 1px solid ${rgba(token.colorBorder, 0.25)};
+    `,
+    inner: css`
+      padding: 0 8px;
+    `,
+  };
+});
 
 const ChatInputArea = memo(() => {
-  const { cx, styles } = useStyles();
+  const { styles } = useStyles();
 
   return (
-    <Flexbox className={cx(styles.container)} gap={12}>
-      <ActionBar rightAreaStartRender={<SaveTopic />} />
+    <Flexbox className={styles.container} gap={12}>
+      <ActionBar mobile padding={'0 8px'} rightAreaStartRender={<SaveTopic mobile />} />
       <Flexbox className={styles.inner} gap={8} horizontal>
+        <STT mobile />
         <InputAreaInner mobile />
         <SendButton />
       </Flexbox>

package/src/app/chat/features/ChatHeader/ShareButton/index.tsx

@@ -1,32 +1,40 @@
 import { ActionIcon, Modal } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import useMergeState from 'use-merge-value';
 
-import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
 const Inner = dynamic(() => import('./Inner'));
+interface ShareButtonProps {
+  mobile?: boolean;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+}
 
-const ShareButton = memo(() => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+const ShareButton = memo<ShareButtonProps>(({ mobile, setOpen, open }) => {
+  const [isModalOpen, setIsModalOpen] = useMergeState(false, {
+    defaultValue: false,
+    onChange: setOpen,
+    value: open,
+  });
   const { t } = useTranslation('common');
   const [shareLoading] = useSessionStore((s) => [s.shareLoading]);
-  const { mobile } = useResponsive();
-
-  const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 };
 
   return (
     <>
-      <ActionIcon
-        icon={Share2}
-        loading={shareLoading}
-        onClick={() => setIsModalOpen(true)}
-        size={size}
-        title={t('share')}
-      />
+      {!mobile && (
+        <ActionIcon
+          icon={Share2}
+          loading={shareLoading}
+          onClick={() => setIsModalOpen(true)}
+          size={DESKTOP_HEADER_ICON_SIZE}
+          title={t('share')}
+        />
+      )}
       <Modal
         centered={false}
         footer={null}

package/src/app/chat/features/ChatInput/ActionBar/config.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import STT from '../STT';
 import Clear from './Clear';
 import FileUpload from './FileUpload';
 import History from './History';
@@ -7,15 +6,26 @@ import ModelSwitch from './ModelSwitch';
 import Temperature from './Temperature';
 import Token from './Token';
 
-export const actionMap: Record<string, FC> = {
+export const actionMap = {
   clear: Clear,
   fileUpload: FileUpload,
   history: History,
   model: ModelSwitch,
+  stt: STT,
   temperature: Temperature,
   token: Token,
-};
+} as const;
+
+type ActionMap = typeof actionMap;
+
+export type ActionKeys = keyof ActionMap;
+
+type getActionList = (mobile?: boolean) => ActionKeys[];
 
 // we can make these action lists configurable in the future
-export const leftActionList = ['model', 'fileUpload', 'temperature', 'history', 'token'];
-export const rightActionList = ['clear'];
+export const getLeftActionList: getActionList = (mobile) =>
+  ['model', 'fileUpload', 'temperature', 'history', !mobile && 'stt', 'token'].filter(
+    Boolean,
+  ) as ActionKeys[];
+
+export const getRightActionList: getActionList = () => ['clear'].filter(Boolean) as ActionKeys[];

package/src/app/chat/features/ChatInput/ActionBar/index.tsx

@@ -1,9 +1,9 @@
-import { ReactNode, memo } from 'react';
+import { ReactNode, memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { actionMap, leftActionList, rightActionList } from './config';
+import { ActionKeys, actionMap, getLeftActionList, getRightActionList } from './config';
 
-const RenderActionList = ({ dataSource }: { dataSource: string[] }) => (
+const RenderActionList = ({ dataSource }: { dataSource: ActionKeys[] }) => (
   <>
     {dataSource.map((key) => {
       const Render = actionMap[key];
@@ -13,23 +13,47 @@ const RenderActionList = ({ dataSource }: { dataSource: string[] }) => (
 );
 
 export interface ActionBarProps {
+  leftAreaEndRender?: ReactNode;
+  leftAreaStartRender?: ReactNode;
+  mobile?: boolean;
+  padding?: number | string;
   rightAreaEndRender?: ReactNode;
   rightAreaStartRender?: ReactNode;
 }
 
-const ActionBar = memo<ActionBarProps>(({ rightAreaStartRender, rightAreaEndRender }) => {
-  return (
-    <Flexbox align={'center'} flex={'none'} horizontal justify={'space-between'} padding={'0 16px'}>
-      <Flexbox align={'center'} flex={1} gap={4} horizontal>
-        <RenderActionList dataSource={leftActionList} />
-      </Flexbox>
-      <Flexbox align={'center'} flex={0} gap={4} horizontal justify={'flex-end'}>
-        {rightAreaStartRender}
-        <RenderActionList dataSource={rightActionList} />
-        {rightAreaEndRender}
+const ActionBar = memo<ActionBarProps>(
+  ({
+    padding = '0 16px',
+    mobile,
+    rightAreaStartRender,
+    rightAreaEndRender,
+    leftAreaStartRender,
+    leftAreaEndRender,
+  }) => {
+    const leftActionList = useMemo(() => getLeftActionList(mobile), [mobile]);
+    const rightActionList = useMemo(() => getRightActionList(mobile), [mobile]);
+
+    return (
+      <Flexbox
+        align={'center'}
+        flex={'none'}
+        horizontal
+        justify={'space-between'}
+        padding={padding}
+      >
+        <Flexbox align={'center'} flex={1} gap={4} horizontal>
+          {leftAreaStartRender}
+          <RenderActionList dataSource={leftActionList} />
+          {leftAreaEndRender}
+        </Flexbox>
+        <Flexbox align={'center'} flex={0} gap={4} horizontal justify={'flex-end'}>
+          {rightAreaStartRender}
+          <RenderActionList dataSource={rightActionList} />
+          {rightAreaEndRender}
+        </Flexbox>
       </Flexbox>
-    </Flexbox>
-  );
-});
+    );
+  },
+);
 
 export default ActionBar;

package/src/app/chat/features/ChatInput/STT/index.tsx

@@ -0,0 +1,146 @@
+import { ActionIcon, Alert, Highlighter, Icon } from '@lobehub/ui';
+import { Button, Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import { Mic, MicOff } from 'lucide-react';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSTT } from '@/hooks/useSTT';
+import { useSessionStore } from '@/store/session';
+import { ChatMessageError } from '@/types/chatMessage';
+import { getMessageError } from '@/utils/fetch';
+
+const useStyles = createStyles(({ css, token }) => ({
+  recording: css`
+    width: 8px;
+    height: 8px;
+    background: ${token.colorError};
+    border-radius: 50%;
+  `,
+}));
+
+const STT = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const [error, setError] = useState<ChatMessageError>();
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+
+  const [loading, updateInputMessage] = useSessionStore((s) => [
+    !!s.chatLoadingId,
+    s.updateInputMessage,
+  ]);
+
+  const setDefaultError = useCallback(
+    (err?: any) => {
+      setError({ body: err, message: t('stt.responseError', { ns: 'error' }), type: 500 });
+    },
+    [t],
+  );
+
+  const { start, isLoading, stop, formattedTime, time, response, isRecording } = useSTT({
+    onError: (err) => {
+      stop();
+      setDefaultError(err);
+    },
+    onErrorRetry: (err) => {
+      stop();
+      setDefaultError(err);
+    },
+    onSuccess: async () => {
+      if (!response) return;
+      if (response.status === 200) return;
+      const message = await getMessageError(response);
+      if (message) {
+        setError(message);
+      } else {
+        setDefaultError();
+      }
+      stop();
+    },
+    onTextChange: (text) => {
+      if (loading) stop();
+      if (text) updateInputMessage(text);
+    },
+  });
+
+  const icon = isLoading ? MicOff : Mic;
+  const Render: any = !mobile ? ActionIcon : Button;
+  const iconRender: any = !mobile ? icon : <Icon icon={icon} />;
+  const desc = t('stt.action');
+
+  const handleTriggerStartStop = useCallback(() => {
+    if (loading) return;
+    if (!isLoading) {
+      start();
+    } else {
+      stop();
+    }
+  }, [loading, isLoading, start, stop]);
+
+  const handleCloseError = useCallback(() => {
+    setError(undefined);
+    stop();
+  }, [stop]);
+
+  const handleRetry = useCallback(() => {
+    setError(undefined);
+    start();
+  }, [start]);
+
+  return (
+    <Dropdown
+      dropdownRender={
+        error
+          ? () => (
+              <Alert
+                action={
+                  <Button onClick={handleRetry} size={'small'} type={'primary'}>
+                    {t('retry', { ns: 'common' })}
+                  </Button>
+                }
+                closable
+                extra={
+                  error.body && (
+                    <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+                      {JSON.stringify(error.body, null, 2)}
+                    </Highlighter>
+                  )
+                }
+                message={error.message}
+                onClose={handleCloseError}
+                style={{ alignItems: 'center' }}
+                type="error"
+              />
+            )
+          : undefined
+      }
+      menu={{
+        activeKey: 'time',
+        items: [
+          {
+            key: 'time',
+            label: (
+              <Flexbox align={'center'} gap={8} horizontal>
+                <div className={styles.recording} />
+                {time > 0 ? formattedTime : t(isRecording ? 'stt.loading' : 'stt.prettifying')}
+              </Flexbox>
+            ),
+          },
+        ],
+      }}
+      open={!!error || isRecording || isLoading}
+      placement={mobile ? 'topRight' : 'top'}
+      trigger={['click']}
+    >
+      <Render
+        icon={iconRender}
+        onClick={handleTriggerStartStop}
+        placement={'bottom'}
+        style={{ flex: 'none' }}
+        title={desc}
+      />
+    </Dropdown>
+  );
+});
+
+export default STT;

package/src/app/chat/features/ChatInput/Topic/index.tsx

@@ -1,6 +1,5 @@
 import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
-import { useResponsive } from 'antd-style';
 import { LucideGalleryVerticalEnd, LucideMessageSquarePlus } from 'lucide-react';
 import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -10,13 +9,12 @@ import HotKeys from '@/components/HotKeys';
 import { PREFIX_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
 import { useSessionStore } from '@/store/session';
 
-const SaveTopic = memo(() => {
+const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
   const [hasTopic, openNewTopicOrSaveTopic] = useSessionStore((s) => [
     !!s.activeTopicId,
     s.openNewTopicOrSaveTopic,
   ]);
-  const { mobile } = useResponsive();
 
   const icon = hasTopic ? LucideMessageSquarePlus : LucideGalleryVerticalEnd;
   const Render = mobile ? ActionIcon : Button;

package/src/app/chat/features/Conversation/ChatList/Actions/Assistant.tsx

@@ -6,14 +6,14 @@ import { useCustomActions } from './customAction';
 
 export const AssistantActionsBar: RenderAction = memo(({ text, id, onActionClick, error }) => {
   const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
-  const { translate } = useCustomActions();
+  const { translate, tts } = useCustomActions();
   if (id === 'default') return;
 
   if (error) return <ErrorActionsBar onActionClick={onActionClick} text={text} />;
 
   return (
     <ActionIconGroup
-      dropdownMenu={[edit, copy, regenerate, divider, translate, divider, del]}
+      dropdownMenu={[edit, copy, regenerate, divider, tts, translate, divider, del]}
       items={[regenerate, copy]}
       onActionClick={onActionClick}
       type="ghost"

package/src/app/chat/features/Conversation/ChatList/Actions/User.tsx

@@ -5,11 +5,11 @@ import { useCustomActions } from './customAction';
 
 export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
-  const { translate } = useCustomActions();
+  const { translate, tts } = useCustomActions();
 
   return (
     <ActionIconGroup
-      dropdownMenu={[edit, copy, regenerate, divider, translate, divider, del]}
+      dropdownMenu={[edit, copy, regenerate, divider, tts, translate, divider, del]}
       items={[regenerate, edit]}
       onActionClick={onActionClick}
       type="ghost"

package/src/app/chat/features/Conversation/ChatList/Actions/customAction.ts

@@ -1,5 +1,5 @@
 import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
-import { LanguagesIcon } from 'lucide-react';
+import { LanguagesIcon, Play } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 import { localeOptions } from '@/locales/options';
@@ -14,10 +14,17 @@ export const useCustomActions = () => {
     })),
     icon: LanguagesIcon,
     key: 'translate',
-    label: t('translateTo'),
+    label: t('translate.action'),
+  } as ActionIconGroupItems;
+
+  const tts = {
+    icon: Play,
+    key: 'tts',
+    label: t('tts.action'),
   } as ActionIconGroupItems;
 
   return {
     translate,
+    tts,
   };
 };

package/src/app/chat/features/Conversation/ChatList/Actions/index.ts

@@ -20,10 +20,11 @@ interface ActionsClick {
 }
 
 export const useActionsClick = (): ChatListProps['onActionsClick'] => {
-  const [deleteMessage, resendMessage, translateMessage] = useSessionStore((s) => [
+  const [deleteMessage, resendMessage, translateMessage, ttsMessage] = useSessionStore((s) => [
     s.deleteMessage,
     s.resendMessage,
     s.translateMessage,
+    s.ttsMessage,
   ]);
 
   return (action, { id, error }) => {
@@ -42,6 +43,12 @@ export const useActionsClick = (): ChatListProps['onActionsClick'] => {
         },
         trigger: action.key === 'regenerate',
       },
+      {
+        onClick: () => {
+          ttsMessage(id);
+        },
+        trigger: action.key === 'tts',
+      },
       {
         onClick: () => {
           /**

package/src/app/chat/features/Conversation/ChatList/Extras/Assistant.tsx

@@ -1,39 +1,45 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { RenderMessageExtra, Tag } from '@lobehub/ui';
-import { Divider } from 'antd';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
+import { ChatMessage } from '@/types/chatMessage';
 
+import ExtraContainer from './ExtraContainer';
+import TTS from './TTS';
 import Translate from './Translate';
 
-export const AssistantMessageExtra: RenderMessageExtra = memo(({ extra, id }) => {
-  const model = useSessionStore(agentSelectors.currentAgentModel);
-
-  const showModelTag = extra?.fromModel && model !== extra?.fromModel;
-  const hasTranslate = !!extra?.translate;
-
-  const showExtra = showModelTag || hasTranslate;
-
-  const loading = useSessionStore((s) => s.chatLoadingId === id);
-
-  if (!showExtra) return;
-
-  return (
-    <Flexbox gap={8} style={{ marginTop: 8 }}>
-      {showModelTag && (
-        <div>
-          <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
-        </div>
-      )}
-      {extra.translate && (
+export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
+  ({ extra, id, content }) => {
+    const model = useSessionStore(agentSelectors.currentAgentModel);
+    const loading = useSessionStore((s) => s.chatLoadingId === id);
+
+    const showModelTag = extra?.fromModel && model !== extra?.fromModel;
+    const showExtra = extra?.showModelTag || extra?.translate || extra?.tts;
+    if (!showExtra) return;
+
+    return (
+      <Flexbox gap={8} style={{ marginTop: 8 }}>
+        {showModelTag && (
+          <div>
+            <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
+          </div>
+        )}
         <div>
-          <Divider style={{ margin: '12px 0' }} />
-          <Translate id={id} loading={loading} {...extra.translate} />
+          {extra?.tts && (
+            <ExtraContainer>
+              <TTS content={content} id={id} loading={loading} {...extra?.tts} />
+            </ExtraContainer>
+          )}
+          {extra?.translate && (
+            <ExtraContainer>
+              <Translate id={id} loading={loading} {...extra?.translate} />
+            </ExtraContainer>
+          )}
         </div>
-      )}
-    </Flexbox>
-  );
-});
+      </Flexbox>
+    );
+  },
+);