@lobehub/chat 0.101.7 → 0.102.0

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

@@ -0,0 +1,139 @@
+import { ActionIcon, ActionIconProps, Icon, Tag } from '@lobehub/ui';
+import { Dropdown, Slider } from 'antd';
+import { Download, PauseCircle, Play, StopCircle } from 'lucide-react';
+import React, { memo, useCallback, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const secondsToMinutesAndSeconds = (num: number) => Math.floor(num);
+export interface AudioProps {
+  currentTime: number;
+  download: () => void;
+  duration: number;
+  isPlaying: boolean;
+  pause: () => void;
+  play: () => void;
+  setTime: (time: number) => void;
+  stop: () => void;
+}
+
+export interface AudioPlayerProps {
+  allowPause?: boolean;
+  audio: AudioProps;
+  buttonSize?: ActionIconProps['size'];
+  className?: string;
+  isLoading?: boolean;
+  onInitPlay?: () => void;
+  onPause?: () => void;
+  onPlay?: () => void;
+  onStop?: () => void;
+  showSlider?: boolean;
+  style?: React.CSSProperties;
+  timeRender?: 'tag' | 'text';
+  timeStyle?: React.CSSProperties;
+  timeType?: 'left' | 'current' | 'combine';
+}
+
+const AudioPlayer = memo<AudioPlayerProps>(
+  ({
+    isLoading,
+    style,
+    timeStyle,
+    buttonSize,
+    className,
+    audio,
+    allowPause = true,
+    timeType = 'left',
+    showSlider = true,
+    timeRender = 'text',
+    onInitPlay,
+    onPause,
+    onStop,
+    onPlay,
+  }) => {
+    const { isPlaying, play, stop, pause, duration, setTime, currentTime, download } = audio;
+
+    const formatedLeftTime = secondsToMinutesAndSeconds(duration - currentTime);
+    const formatedCurrentTime = secondsToMinutesAndSeconds(currentTime);
+    const formatedDuration = secondsToMinutesAndSeconds(duration);
+
+    const Time = useMemo(
+      () => (timeRender === 'tag' ? Tag : (props: any) => <div {...props} />),
+      [timeRender],
+    );
+
+    const handlePlay = useCallback(() => {
+      if ((!duration || duration === 0) && !isLoading) {
+        onInitPlay?.();
+      } else {
+        play?.();
+        onPlay?.();
+      }
+    }, [play, duration]);
+
+    const handlePause = useCallback(() => {
+      pause?.();
+      onPause?.();
+    }, [pause]);
+
+    const handleStop = useCallback(() => {
+      stop?.();
+      onStop?.();
+    }, [stop]);
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={className}
+        gap={8}
+        horizontal
+        style={{ paddingRight: 8, width: '100%', ...style }}
+      >
+        <ActionIcon
+          icon={isPlaying ? (allowPause ? PauseCircle : StopCircle) : Play}
+          loading={isLoading}
+          onClick={isPlaying ? (allowPause ? handlePause : handleStop) : handlePlay}
+          size={buttonSize || { blockSize: 32, fontSize: 16 }}
+          style={{ flex: 'none' }}
+        />
+        {showSlider && (
+          <Slider
+            disabled={duration === 0}
+            max={duration}
+            min={0}
+            onChange={(e) => setTime(e)}
+            step={0.01}
+            style={{ flex: 1 }}
+            tooltip={{ formatter: secondsToMinutesAndSeconds as any }}
+            value={currentTime}
+          />
+        )}
+        <Dropdown
+          disabled={duration === 0}
+          menu={{
+            items: [
+              {
+                key: 'download',
+                label: <Icon icon={Download} size={{ fontSize: 16 }} />,
+                onClick: download,
+              },
+            ],
+          }}
+          placement="top"
+        >
+          <Time style={{ cursor: 'pointer', flex: 'none', ...timeStyle }}>
+            {timeType === 'left' && formatedLeftTime}
+            {timeType === 'current' && formatedCurrentTime}
+            {timeType === 'combine' && (
+              <span>
+                {formatedCurrentTime}
+                <span style={{ opacity: 0.66 }}>{` / ${formatedDuration}`}</span>
+              </span>
+            )}
+          </Time>
+        </Dropdown>
+      </Flexbox>
+    );
+  },
+);
+
+export default AudioPlayer;

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,
 };