@lobehub/chat 1.48.2 → 1.48.4

package/src/features/Conversation/Messages/Assistant/Reasoning/index.tsx

@@ -1,123 +1,19 @@
-import { Icon, Markdown } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { AtomIcon, ChevronDown, ChevronRight } from 'lucide-react';
-import { rgba } from 'polished';
-import { memo, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { memo } from 'react';
 
+import Thinking from '@/components/Thinking';
 import { useChatStore } from '@/store/chat';
 import { aiChatSelectors } from '@/store/chat/selectors';
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  container: css`
-    cursor: pointer;
-
-    width: fit-content;
-    padding-block: 4px;
-    padding-inline: 8px;
-    border-radius: 6px;
-
-    color: ${token.colorTextTertiary};
-
-    &:hover {
-      background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary};
-    }
-  `,
-  expand: css`
-    background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary} !important;
-  `,
-  shinyText: css`
-    color: ${rgba(token.colorText, 0.45)};
-
-    background: linear-gradient(
-      120deg,
-      ${rgba(token.colorTextBase, 0)} 40%,
-      ${token.colorTextSecondary} 50%,
-      ${rgba(token.colorTextBase, 0)} 60%
-    );
-    background-clip: text;
-    background-size: 200% 100%;
-
-    animation: shine 1.5s linear infinite;
-
-    @keyframes shine {
-      0% {
-        background-position: 100%;
-      }
-
-      100% {
-        background-position: -100%;
-      }
-    }
-  `,
-  title: css`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    font-size: 12px;
-    text-overflow: ellipsis;
-  `,
-}));
-
-interface ThinkingProps {
+interface ReasoningProps {
   content?: string;
   duration?: number;
   id: string;
 }
 
-const Thinking = memo<ThinkingProps>(({ content = '', duration, id }) => {
-  const { t } = useTranslation('chat');
-  const { styles, cx } = useStyles();
-
-  const [showDetail, setShowDetail] = useState(false);
-
+const Reasoning = memo<ReasoningProps>(({ content = '', duration, id }) => {
   const isReasoning = useChatStore(aiChatSelectors.isMessageInReasoning(id));
 
-  useEffect(() => {
-    if (isReasoning && !content) {
-      setShowDetail(true);
-    }
-
-    if (!isReasoning) {
-      setShowDetail(false);
-    }
-  }, [isReasoning, content]);
-
-  return (
-    <Flexbox
-      className={cx(styles.container, showDetail && styles.expand)}
-      gap={16}
-      onClick={() => {
-        setShowDetail(!showDetail);
-      }}
-    >
-      <Flexbox distribution={'space-between'} flex={1} horizontal>
-        {isReasoning ? (
-          <Flexbox gap={8} horizontal>
-            <Icon icon={AtomIcon} />
-            <Flexbox className={styles.shinyText} horizontal>
-              {t('reasoning.thinking')}
-            </Flexbox>
-          </Flexbox>
-        ) : (
-          <Flexbox gap={8} horizontal>
-            <Icon icon={AtomIcon} />
-            {t('reasoning.thought', { duration: ((duration || 0) / 1000).toFixed(1) })}
-          </Flexbox>
-        )}
-        <Icon icon={showDetail ? ChevronDown : ChevronRight} />
-      </Flexbox>
-
-      {showDetail && (
-        <Flexbox>
-          <Markdown variant={'chat'}>{content}</Markdown>
-        </Flexbox>
-      )}
-    </Flexbox>
-  );
+  return <Thinking content={content} duration={duration} thinking={isReasoning} />;
 });
 
-export default Thinking;
+export default Reasoning;

package/src/locales/default/chat.ts

@@ -84,10 +84,6 @@ export default {
       },
     },
   },
-  reasoning: {
-    thinking: '深度思考中',
-    thought: '已深度思考（用时 {{duration}} 秒）',
-  },
   regenerate: '重新生成',
   roleAndArchive: '角色与记录',
   searchAgentPlaceholder: '搜索助手...',

package/src/locales/default/components.ts

@@ -88,4 +88,9 @@ export default {
     emptyModel: '没有启用的模型，请前往设置开启',
     provider: '提供商',
   },
+  Thinking: {
+    thinking: '深度思考中...',
+    thought: '已深度思考',
+    thoughtWithDuration: '已深度思考（用时 {{duration}} 秒）',
+  },
 };

package/src/utils/format.test.ts

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import { describe, expect, it } from 'vitest';
 
-import { CNY_TO_USD } from '@/const/discover';
+import { USD_TO_CNY } from '@/const/currency';
 
 import {
   formatDate,
@@ -194,16 +194,9 @@ describe('format', () => {
       expect(formatPriceByCurrency(1234.56, 'USD')).toBe('1,234.56');
     });
 
-    it('should format CNY prices correctly', () => {
-      // Assuming CNY_TO_USD is 6.5
-      const CNY_TO_USD = 6.5;
-      expect(formatPriceByCurrency(1000, 'CNY')).toBe('140.06');
-      expect(formatPriceByCurrency(6500, 'CNY')).toBe('910.36');
-    });
-
     it('should use the correct CNY_TO_USD conversion rate', () => {
       const price = 1000;
-      const expectedCNY = formatPrice(price / CNY_TO_USD);
+      const expectedCNY = formatPrice(price / USD_TO_CNY);
       expect(formatPriceByCurrency(price, 'CNY')).toBe(expectedCNY);
     });
   });

package/src/utils/format.ts

@@ -2,7 +2,7 @@ import dayjs from 'dayjs';
 import { isNumber } from 'lodash-es';
 import numeral from 'numeral';
 
-import { CNY_TO_USD } from '@/const/discover';
+import { USD_TO_CNY } from '@/const/currency';
 import { ModelPriceCurrency } from '@/types/llm';
 
 export const formatSize = (bytes: number, fractionDigits: number = 1): string => {
@@ -118,7 +118,7 @@ export const formatPrice = (price: number, fractionDigits: number = 2) => {
 
 export const formatPriceByCurrency = (price: number, currency?: ModelPriceCurrency) => {
   if (currency === 'CNY') {
-    return formatPrice(price / CNY_TO_USD);
+    return formatPrice(price / USD_TO_CNY);
   }
   return formatPrice(price);
 };