@lobehub/chat 0.100.4 → 0.101.0

package/tests/setup.ts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom';
+// remove antd hash on test
+import { theme } from 'antd';
+// mock indexedDB to test with dexie
+// refs: https://github.com/dumbmatter/fakeIndexedDB#dexie-and-other-indexeddb-api-wrappers
+import 'fake-indexeddb/auto';
+
+theme.defaultConfig.hashed = false;

package/vitest.config.ts

@@ -7,10 +7,12 @@ export default defineConfig({
       '@': resolve(__dirname, './src'),
     },
     coverage: {
+      exclude: ['__mocks__/**'],
       provider: 'v8',
       reporter: ['text', 'json', 'lcov', 'text-summary'],
     },
     environment: 'jsdom',
     globals: true,
+    setupFiles: './tests/setup.ts',
   },
 });

package/src/app/chat/(desktop)/features/ChatInput/Footer.tsx

@@ -1,35 +0,0 @@
-import { Icon } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { ArrowBigUp, CornerDownLeft } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import SaveTopic from '../../../features/ChatInputContent/Topic';
-
-const Footer = memo(() => {
-  const theme = useTheme();
-  const { t } = useTranslation('chat');
-
-  return (
-    <>
-      <Flexbox
-        gap={4}
-        horizontal
-        style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
-      >
-        <Icon icon={CornerDownLeft} />
-        <span>{t('send')}</span>
-        <span>/</span>
-        <Flexbox horizontal>
-          <Icon icon={ArrowBigUp} />
-          <Icon icon={CornerDownLeft} />
-        </Flexbox>
-        <span>{t('warp')}</span>
-      </Flexbox>
-      <SaveTopic />
-    </>
-  );
-});
-
-export default Footer;

package/src/app/chat/features/ChatInputContent/ActionBar/ActionLeft.tsx

@@ -1,117 +0,0 @@
-import { ActionIcon, SliderWithInput } from '@lobehub/ui';
-import { Dropdown, Popover, Switch } from 'antd';
-import { BrainCog, Thermometer, Timer, TimerOff } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
-import { LanguageModel } from '@/types/llm';
-
-const ActionLeft = memo(() => {
-  const { t } = useTranslation('setting');
-
-  const [model, temperature, historyCount, unlimited, updateAgentConfig] = useSessionStore((s) => {
-    const config = agentSelectors.currentAgentConfig(s);
-    return [
-      config.model,
-      config.params.temperature,
-      config.historyCount,
-      !config.enableHistoryCount,
-      s.updateAgentConfig,
-    ];
-  });
-
-  const modelList = useGlobalStore(settingsSelectors.modelList);
-
-  return (
-    <>
-      <Dropdown
-        menu={{
-          activeKey: model,
-          items: modelList.map((i) => ({ key: i, label: i })),
-          onClick: (e) => {
-            updateAgentConfig({ model: e.key as LanguageModel });
-          },
-          style: {
-            maxHeight: 400,
-            overflow: 'scroll',
-          },
-        }}
-        trigger={['click']}
-      >
-        <ActionIcon icon={BrainCog} placement={'bottom'} title={t('settingModel.model.title')} />
-      </Dropdown>
-      <Popover
-        arrow={false}
-        content={
-          <SliderWithInput
-            controls={false}
-            max={1}
-            min={0}
-            onChange={(v) => {
-              updateAgentConfig({ params: { temperature: v } });
-            }}
-            size={'small'}
-            step={0.1}
-            style={{ width: 160 }}
-            value={temperature}
-          />
-        }
-        placement={'top'}
-        trigger={'click'}
-      >
-        <ActionIcon
-          icon={Thermometer}
-          placement={'bottom'}
-          title={t('settingModel.temperature.titleWithValue', { value: temperature })}
-        />
-      </Popover>
-      <Popover
-        arrow={false}
-        content={
-          <Flexbox align={'center'} gap={16} horizontal>
-            <SliderWithInput
-              disabled={unlimited}
-              max={30}
-              min={1}
-              onChange={(v) => {
-                updateAgentConfig({ historyCount: v });
-              }}
-              step={1}
-              style={{ width: 160 }}
-              value={historyCount}
-            />
-            <Flexbox align={'center'} gap={4} horizontal>
-              <Switch
-                checked={unlimited}
-                onChange={(checked) => {
-                  updateAgentConfig({ enableHistoryCount: !checked });
-                }}
-                size={'small'}
-              />
-              {t('settingChat.enableHistoryCount.alias')}
-            </Flexbox>
-          </Flexbox>
-        }
-        placement={'top'}
-        trigger={'click'}
-      >
-        <ActionIcon
-          icon={unlimited ? TimerOff : Timer}
-          placement={'bottom'}
-          title={t(
-            unlimited
-              ? 'settingChat.enableHistoryCount.unlimited'
-              : 'settingChat.enableHistoryCount.limited',
-            { number: historyCount || 0 },
-          )}
-        />
-      </Popover>
-    </>
-  );
-});
-
-export default ActionLeft;

package/src/app/chat/features/ChatInputContent/ActionBar/ActionRight.tsx

@@ -1,48 +0,0 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Popconfirm } from 'antd';
-import { useResponsive } from 'antd-style';
-import { Eraser } from 'lucide-react';
-import { memo } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { useTranslation } from 'react-i18next';
-
-import HotKeys from '@/components/HotKeys';
-import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
-import { useSessionStore } from '@/store/session';
-
-import SaveTopic from '../Topic';
-
-const ActionsRight = memo(() => {
-  const { t } = useTranslation('setting');
-  const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig]);
-  const { mobile } = useResponsive();
-  const hotkeys = [PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
-
-  useHotkeys(hotkeys, clearMessage, {
-    preventDefault: true,
-  });
-
-  return (
-    <>
-      {mobile && <SaveTopic />}
-      <Popconfirm
-        cancelText={t('cancel', { ns: 'common' })}
-        okButtonProps={{ danger: true }}
-        okText={t('ok', { ns: 'common' })}
-        onConfirm={() => clearMessage()}
-        placement={'topRight'}
-        title={t('confirmClearCurrentMessages', { ns: 'chat' })}
-      >
-        <ActionIcon
-          icon={Eraser}
-          placement={'bottom'}
-          title={
-            (<HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />) as any
-          }
-        />
-      </Popconfirm>
-    </>
-  );
-});
-
-export default ActionsRight;

package/src/app/chat/features/ChatInputContent/index.tsx

@@ -1,71 +0,0 @@
-import { ChatInputArea } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
-import dynamic from 'next/dynamic';
-import { ReactNode, Suspense, memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { CHAT_TEXTAREA_HEIGHT } from '@/const/layoutTokens';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
-
-import ActionLeft from './ActionBar/ActionLeft';
-import ActionsRight from './ActionBar/ActionRight';
-
-const Token = dynamic(() => import('./ActionBar/Token'), { ssr: false });
-
-interface ChatContentProps {
-  expand?: boolean;
-  footer?: ReactNode;
-  mobile?: boolean;
-  onExpandChange?: (expand: boolean) => void;
-}
-
-const ChatInputContent = memo<ChatContentProps>(
-  ({ expand, onExpandChange, mobile: defaultMobile, footer }) => {
-    const { t } = useTranslation('common');
-
-    const [message, setMessage] = useState('');
-    const { mobile: runtimeMobile } = useResponsive();
-
-    const mobile = runtimeMobile || defaultMobile;
-
-    const [isLoading, sendMessage, stopGenerateMessage, showTokenTag] = useSessionStore((s) => [
-      !!s.chatLoadingId,
-      s.sendMessage,
-      s.stopGenerateMessage,
-      agentSelectors.showTokenTag(s),
-    ]);
-
-    return (
-      <ChatInputArea
-        actions={
-          <>
-            <ActionLeft />
-            {showTokenTag && (
-              <Suspense>
-                <Token input={message} />
-              </Suspense>
-            )}
-          </>
-        }
-        actionsRight={<ActionsRight />}
-        expand={expand}
-        footer={footer}
-        loading={isLoading}
-        minHeight={mobile ? 0 : CHAT_TEXTAREA_HEIGHT}
-        onExpandChange={onExpandChange}
-        onInputChange={setMessage}
-        onSend={sendMessage}
-        onStop={stopGenerateMessage}
-        placeholder={t('sendPlaceholder', { ns: 'chat' })}
-        text={{
-          send: t('send'),
-          stop: t('stop'),
-        }}
-        value={message}
-      />
-    );
-  },
-);
-
-export default ChatInputContent;