@lobehub/chat 0.101.7 → 0.102.1

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

@@ -0,0 +1,13 @@
+import { Divider } from 'antd';
+import { PropsWithChildren, memo } from 'react';
+
+const ExtraContainer = memo<PropsWithChildren>(({ children }) => {
+  return (
+    <div>
+      <Divider style={{ margin: '8px 0' }} />
+      {children}
+    </div>
+  );
+});
+
+export default ExtraContainer;

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

@@ -0,0 +1,122 @@
+import { AudioPlayer } from '@lobehub/tts/react';
+import { ActionIcon, Alert, Highlighter } from '@lobehub/ui';
+import { Button } from 'antd';
+import { TrashIcon } from 'lucide-react';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useTTS } from '@/hooks/useTTS';
+import { useSessionStore } from '@/store/session';
+import { ChatMessageError, ChatTTS } from '@/types/chatMessage';
+import { getMessageError } from '@/utils/fetch';
+
+interface TTSProps extends ChatTTS {
+  content: string;
+  id: string;
+  loading?: boolean;
+}
+
+const TTS = memo<TTSProps>(({ id, init, content }) => {
+  const [isStart, setIsStart] = useState(false);
+  const [error, setError] = useState<ChatMessageError>();
+  const { t } = useTranslation('chat');
+
+  const [ttsMessage, clearTTS] = useSessionStore((s) => [s.ttsMessage, s.clearTTS]);
+
+  const setDefaultError = useCallback(
+    (err?: any) => {
+      setError({ body: err, message: t('tts.responseError', { ns: 'error' }), type: 500 });
+    },
+    [t],
+  );
+
+  const { isGlobalLoading, audio, start, stop, response } = useTTS(content, {
+    onError: (err) => {
+      stop();
+      setDefaultError(err);
+    },
+    onErrorRetry: (err) => {
+      stop();
+      setDefaultError(err);
+    },
+    onSuccess: async () => {
+      if (!response) return;
+      if (response.status === 200) return ttsMessage(id, true);
+      const message = await getMessageError(response);
+      if (message) {
+        setError(message);
+      } else {
+        setDefaultError();
+      }
+      stop();
+    },
+  });
+
+  const handleInitStart = useCallback(() => {
+    if (isStart) return;
+    start();
+    setIsStart(true);
+  }, [isStart]);
+
+  const handleDelete = useCallback(() => {
+    stop();
+    clearTTS(id);
+  }, [stop, id]);
+
+  const handleRetry = useCallback(() => {
+    setError(undefined);
+    start();
+  }, [start]);
+
+  useEffect(() => {
+    if (init) return;
+    handleInitStart();
+  }, [init]);
+
+  return (
+    <Flexbox align={'center'} horizontal style={{ minWidth: 160, width: '100%' }}>
+      {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={handleDelete}
+          style={{ alignItems: 'center', width: '100%' }}
+          type="error"
+        />
+      ) : (
+        <>
+          <AudioPlayer
+            audio={audio}
+            buttonSize={'small'}
+            isLoading={isGlobalLoading}
+            onInitPlay={handleInitStart}
+            onLoadingStop={stop}
+            timeRender={'tag'}
+            timeStyle={{ margin: 0 }}
+          />
+          <ActionIcon
+            icon={TrashIcon}
+            onClick={handleDelete}
+            size={'small'}
+            title={t('tts.clear')}
+          />
+        </>
+      )}
+    </Flexbox>
+  );
+});
+
+export default TTS;

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

@@ -1,24 +1,31 @@
 import { RenderMessageExtra } from '@lobehub/ui';
-import { Divider } from 'antd';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
+import { ChatMessage } from '@/types/chatMessage';
 
+import ExtraContainer from './ExtraContainer';
+import TTS from './TTS';
 import Translate from './Translate';
 
-export const UserMessageExtra: RenderMessageExtra = memo(({ extra, id }) => {
-  const hasTranslate = !!extra?.translate;
-
+export const UserMessageExtra: RenderMessageExtra = memo<ChatMessage>(({ extra, id, content }) => {
   const loading = useSessionStore((s) => s.chatLoadingId === id);
+
+  const showExtra = extra?.translate || extra?.tts;
+  if (!showExtra) return;
+
   return (
-    <Flexbox gap={8} style={{ marginTop: hasTranslate ? 8 : 0 }}>
+    <div style={{ marginTop: 8 }}>
+      {extra?.tts && (
+        <ExtraContainer>
+          <TTS content={content} id={id} loading={loading} {...extra?.tts} />
+        </ExtraContainer>
+      )}
       {extra?.translate && (
-        <div>
-          <Divider style={{ margin: '12px 0' }} />
-          <Translate id={id} {...extra.translate} loading={loading} />
-        </div>
+        <ExtraContainer>
+          <Translate id={id} {...extra?.translate} loading={loading} />
+        </ExtraContainer>
       )}
-    </Flexbox>
+    </div>
   );
 });

package/src/app/chat/settings/features/HeaderContent.tsx

@@ -5,7 +5,7 @@ import { HardDriveDownload } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { useSessionStore } from '@/store/session';
 
@@ -41,13 +41,15 @@ export const HeaderContent = memo<{ mobile?: boolean }>(() => {
     [],
   );
 
-  const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 };
-
   return (
     <>
       <SubmitAgentButton />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        <ActionIcon icon={HardDriveDownload} size={size} title={t('export', { ns: 'common' })} />
+        <ActionIcon
+          icon={HardDriveDownload}
+          size={HEADER_ICON_SIZE(mobile)}
+          title={t('export', { ns: 'common' })}
+        />
       </Dropdown>
     </>
   );

package/src/app/chat/settings/features/SubmitAgentButton/index.tsx

@@ -4,7 +4,7 @@ import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
 
 import Inner from './Inner';
 
@@ -12,13 +12,12 @@ const SubmitAgentButton = memo(() => {
   const { t } = useTranslation('setting');
   const { mobile } = useResponsive();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 };
   return (
     <>
       <ActionIcon
         icon={Share2}
         onClick={() => setIsModalOpen(true)}
-        size={size}
+        size={HEADER_ICON_SIZE(mobile)}
         title={t('submitAgentModal.tooltips')}
       />
       <Modal

package/src/app/settings/features/SideBar/List.tsx

@@ -1,5 +1,5 @@
 import { useResponsive } from 'antd-style';
-import { Bot, Settings2, Webhook } from 'lucide-react';
+import { Bot, Mic2, Settings2, Webhook } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,6 +17,7 @@ const List = memo(() => {
   const items = [
     { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common },
     { icon: Webhook, label: t('tab.llm'), value: SettingsTabs.LLM },
+    { icon: Mic2, label: t('tab.tts'), value: SettingsTabs.TTS },
     { icon: Bot, label: t('tab.agent'), value: SettingsTabs.Agent },
   ];
 

package/src/app/settings/features/SideBar/index.tsx

@@ -30,8 +30,8 @@ const SideBar = memo(() => {
             <Logo className={styles.logo} extra={'Settings'} size={36} type={'text'} />
           </div>
         </Flexbox>
-        <UpgradeAlert />
         <Flexbox gap={2} style={{ paddingInline: 8 }}>
+          <UpgradeAlert />
           <List />
         </Flexbox>
       </DraggablePanelBody>

package/src/app/settings/features/UpgradeAlert.tsx

@@ -21,10 +21,10 @@ const UpgradeAlert = memo(() => {
             </Button>
           </Link>
         }
-        banner
         closable
         message={`✨ ${t('upgradeVersion.newVersion', { version: latestVersion })}`}
         showIcon={false}
+        style={{ marginBottom: 6 }}
         type={'info'}
       />
     )

package/src/app/settings/tts/TTS/index.tsx

@@ -0,0 +1,73 @@
+import { Form, type ItemGroup } from '@lobehub/ui';
+import { Form as AntForm, Select, Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { debounce } from 'lodash-es';
+import { Mic, Webhook } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
+
+import { opeanaiSTTOptions, opeanaiTTSOptions, sttOptions } from './options';
+
+type SettingItemGroup = ItemGroup;
+
+const TTS_SETTING_KEY = 'tts';
+
+const TTS = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = AntForm.useForm();
+  const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings] = useGlobalStore((s) => [s.setSettings]);
+
+  const stt: SettingItemGroup = {
+    children: [
+      {
+        children: <Select options={sttOptions} />,
+        desc: t('settingTTS.sttService.desc'),
+        label: t('settingTTS.sttService.title'),
+        name: [TTS_SETTING_KEY, 'sttServer'],
+      },
+      {
+        children: <Switch />,
+        desc: t('settingTTS.sttAutoStop.desc'),
+        label: t('settingTTS.sttAutoStop.title'),
+        minWidth: undefined,
+        name: [TTS_SETTING_KEY, 'sttAutoStop'],
+        valuePropName: 'checked',
+      },
+    ],
+    icon: Mic,
+    title: t('settingTTS.stt'),
+  };
+
+  const openai: SettingItemGroup = {
+    children: [
+      {
+        children: <Select options={opeanaiTTSOptions} />,
+        label: t('settingTTS.openai.ttsModel'),
+        name: [TTS_SETTING_KEY, 'openAI', 'ttsModel'],
+      },
+      {
+        children: <Select options={opeanaiSTTOptions} />,
+        label: t('settingTTS.openai.sttModel'),
+        name: [TTS_SETTING_KEY, 'openAI', 'sttModel'],
+      },
+    ],
+    icon: Webhook,
+    title: t('llm.OpenAI.title'),
+  };
+
+  return (
+    <Form
+      form={form}
+      initialValues={settings}
+      items={[stt, openai]}
+      onValuesChange={debounce(setSettings, 100)}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default TTS;

package/src/app/settings/tts/TTS/options.ts

@@ -0,0 +1,30 @@
+import { SelectProps } from 'antd';
+
+export const opeanaiTTSOptions: SelectProps['options'] = [
+  {
+    label: 'tts-1',
+    value: 'tts-1',
+  },
+  {
+    label: 'tts-1-hd',
+    value: 'tts-1-hd',
+  },
+];
+
+export const opeanaiSTTOptions: SelectProps['options'] = [
+  {
+    label: 'whisper-1',
+    value: 'whisper-1',
+  },
+];
+
+export const sttOptions: SelectProps['options'] = [
+  {
+    label: 'OpenAI',
+    value: 'openai',
+  },
+  {
+    label: 'Browser',
+    value: 'browser',
+  },
+];

package/src/app/settings/tts/index.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import TTS from './TTS';
+
+export default memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.TTS);
+  const { t } = useTranslation('setting');
+  return (
+    <>
+      <PageTitle title={t('tab.llm')} />
+      <TTS />
+    </>
+  );
+});

package/src/app/settings/tts/layout.tsx

@@ -0,0 +1 @@
+export { default } from '../layout.server';

package/src/app/settings/tts/page.tsx

@@ -0,0 +1,3 @@
+import Index from './index';
+
+export default () => <Index />;

package/src/components/HotKeys/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { createStyles } from 'antd-style';
-import { Fragment, memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
@@ -56,12 +56,9 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
   const content = (
     <Flexbox align={'center'} className={styles} gap={2} horizontal>
       {keysGroup.map((key, index) => (
-        <Fragment key={index}>
-          <kbd>
-            <span style={{ visibility }}>{key.toUpperCase()}</span>
-          </kbd>
-          {index + 1 < keysGroup.length && <span>+</span>}
-        </Fragment>
+        <kbd key={index}>
+          <span style={{ visibility }}>{key.toUpperCase()}</span>
+        </kbd>
       ))}
     </Flexbox>
   );

package/src/const/layoutTokens.ts

@@ -14,3 +14,6 @@ export const FORM_STYLE: FormProps = {
   style: { maxWidth: MAX_WIDTH, width: '100%' },
 };
 export const MOBILE_HEADER_ICON_SIZE = { blockSize: 36, fontSize: 22 };
+export const DESKTOP_HEADER_ICON_SIZE = { fontSize: 24 };
+export const HEADER_ICON_SIZE = (mobile?: boolean) =>
+  mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE;

package/src/const/settings.ts

@@ -2,12 +2,13 @@ import { getClientConfig } from '@/config/client';
 import { DEFAULT_OPENAI_MODEL_LIST } from '@/const/llm';
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { LanguageModel } from '@/types/llm';
-import { LobeAgentConfig } from '@/types/session';
+import { LobeAgentConfig, LobeAgentTTSConfig } from '@/types/session';
 import {
   GlobalBaseSettings,
   GlobalDefaultAgent,
   GlobalLLMConfig,
   GlobalSettings,
+  GlobalTTSConfig,
 } from '@/types/settings';
 
 export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
@@ -18,6 +19,15 @@ export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
   themeMode: 'auto',
 };
 
+export const DEFAUTT_AGENT_TTS_CONFIG: LobeAgentTTSConfig = {
+  showAllLocaleVoice: false,
+  sttLocale: 'auto',
+  ttsService: 'openai',
+  voice: {
+    openai: 'alloy',
+  },
+};
+
 export const VISION_MODEL_DEFAULT_MAX_TOKENS = 1000;
 
 export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
@@ -32,6 +42,7 @@ export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
   },
   plugins: [],
   systemRole: '',
+  tts: DEFAUTT_AGENT_TTS_CONFIG,
 };
 
 export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
@@ -48,8 +59,18 @@ export const DEFAULT_AGENT: GlobalDefaultAgent = {
   meta: DEFAULT_AGENT_META,
 };
 
+export const DEFAULT_TTS_CONFIG: GlobalTTSConfig = {
+  openAI: {
+    sttModel: 'whisper-1',
+    ttsModel: 'tts-1',
+  },
+  sttAutoStop: true,
+  sttServer: 'openai',
+};
+
 export const DEFAULT_SETTINGS: GlobalSettings = {
   defaultAgent: DEFAULT_AGENT,
   languageModel: DEFAULT_LLM_CONFIG,
+  tts: DEFAULT_TTS_CONFIG,
   ...DEFAULT_BASE_SETTINGS,
 };

package/src/features/AgentSetting/AgentTTS/SelectWithTTSPreview.tsx

@@ -0,0 +1,119 @@
+import { AudioPlayer } from '@lobehub/tts/react';
+import { Alert, Highlighter } from '@lobehub/ui';
+import { Button, RefSelectProps, Select, SelectProps } from 'antd';
+import { useTheme } from 'antd-style';
+import { forwardRef, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useTTS } from '@/hooks/useTTS';
+import { ChatMessageError } from '@/types/chatMessage';
+import { TTSServer } from '@/types/session';
+import { getMessageError } from '@/utils/fetch';
+
+interface SelectWithTTSPreviewProps extends SelectProps {
+  server: TTSServer;
+}
+
+const SelectWithTTSPreview = forwardRef<RefSelectProps, SelectWithTTSPreviewProps>(
+  ({ value, options, server, onSelect, ...rest }, ref) => {
+    const [error, setError] = useState<ChatMessageError>();
+    const [voice, setVoice] = useState<string>(value);
+    const { t } = useTranslation('welcome');
+    const theme = useTheme();
+    const PREVIEW_TEXT = ['Lobe Chat', t('slogan.title'), t('slogan.desc1')].join('. ');
+
+    const setDefaultError = useCallback(
+      (err?: any) => {
+        setError({ body: err, message: t('tts.responseError', { ns: 'error' }), type: 500 });
+      },
+      [t],
+    );
+
+    const { isGlobalLoading, audio, stop, start, response, setText } = useTTS(PREVIEW_TEXT, {
+      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();
+      },
+      server,
+      voice,
+    });
+
+    const handleCloseError = useCallback(() => {
+      setError(undefined);
+      stop();
+    }, [stop]);
+
+    const handleRetry = useCallback(() => {
+      setError(undefined);
+      stop();
+      start();
+    }, [stop, start]);
+
+    const handleSelect: SelectProps['onSelect'] = (value, option) => {
+      stop();
+      setVoice(value as string);
+      setText([PREVIEW_TEXT, option?.label].join(' - '));
+      onSelect?.(value, option);
+    };
+    return (
+      <Flexbox gap={8}>
+        <Flexbox align={'center'} gap={8} horizontal style={{ width: '100%' }}>
+          <Select onSelect={handleSelect} options={options} ref={ref} value={value} {...rest} />
+          <AudioPlayer
+            allowPause={false}
+            audio={audio}
+            buttonActive
+            buttonSize={{ blockSize: 36, fontSize: 16 }}
+            buttonStyle={{ border: `1px solid ${theme.colorBorder}` }}
+            isLoading={isGlobalLoading}
+            onInitPlay={start}
+            onLoadingStop={stop}
+            showSlider={false}
+            showTime={false}
+            style={{ flex: 'none', padding: 0, width: 'unset' }}
+            title={t('settingTTS.voice.preview', { ns: 'setting' })}
+          />
+        </Flexbox>
+        {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', width: '100%' }}
+            type="error"
+          />
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default SelectWithTTSPreview;