💄 style: Update Markdown in ChatItem

bentwnghk · Mar 15, 2024 · be75549 · be75549
1 parent 7d4d83e
commit be75549
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -88,9 +88,9 @@
     "@icons-pack/react-simple-icons": "^9",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
-    "@lobehub/icons": "^1.13.0",
+    "@lobehub/icons": "latest",
     "@lobehub/tts": "latest",
-    "@lobehub/ui": "^1.129.2",
+    "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
     "ai": "^3.0.0",

diff --git a/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx b/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx
@@ -51,7 +51,7 @@ const Preview = memo<FieldType & { title?: string }>(
               </Flexbox>
               {withSystemRole && systemRole && (
                 <div className={styles.role}>
-                  <Markdown className={styles.markdown}>{systemRole}</Markdown>
+                  <Markdown variant={'chat'}>{systemRole}</Markdown>
                 </div>
               )}
             </div>

diff --git a/src/app/chat/features/ChatHeader/ShareButton/style.ts b/src/app/chat/features/ChatHeader/ShareButton/style.ts
@@ -33,7 +33,6 @@ export const useStyles = createStyles(({ css, token, stylish, cx }, withBackgrou
     background: ${token.colorBgContainer};
     border-bottom: 1px solid ${token.colorBorder};
   `,
-  markdown: stylish.markdownInChat,
   preview: cx(
     stylish.noScrollbar,
     css`

diff --git a/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx b/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx
@@ -60,7 +60,7 @@ const AgentModalInner = memo(() => {
       </Flexbox>
       <Flexbox style={{ padding: 16 }}>
         {tab === InfoTabs.prompt && (
-          <Markdown className={styles.markdown} fullFeaturedCodeBlock>
+          <Markdown fullFeaturedCodeBlock variant={'chat'}>
             {systemRole}
           </Markdown>
         )}

diff --git a/src/app/market/features/AgentDetailContent/AgentInfo/style.ts b/src/app/market/features/AgentDetailContent/AgentInfo/style.ts
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token, prefixCls, stylish }) => ({
+export const useStyles = createStyles(({ css, token, prefixCls }) => ({
   author: css`
     font-size: 12px;
   `,
@@ -27,7 +27,6 @@ export const useStyles = createStyles(({ css, token, prefixCls, stylish }) => ({
       flex-direction: column;
     }
   `,
-  markdown: stylish.markdownInChat,
   nav: css`
     padding-top: 8px;
   `,

diff --git a/src/app/settings/llm/Azure/index.tsx b/src/app/settings/llm/Azure/index.tsx
@@ -14,12 +14,7 @@ import { LLMProviderApiTokenKey, LLMProviderBaseUrlKey, LLMProviderConfigKey } f
 
 const useStyles = createStyles(({ css, token }) => ({
   markdown: css`
-    a {
-      font-size: 12px !important;
-    }
-
     p {
-      font-size: 12px !important;
       color: ${token.colorTextDescription} !important;
     }
   `,
@@ -73,7 +68,7 @@ const AzureOpenAIProvider = memo(() => {
             />
           ),
           desc: (
-            <Markdown className={styles.markdown}>
+            <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
               {t('llm.AzureOpenAI.azureApiVersion.desc')}
             </Markdown>
           ),
@@ -89,7 +84,9 @@ const AzureOpenAIProvider = memo(() => {
             />
           ),
           desc: (
-            <Markdown className={styles.markdown}>{t('llm.AzureOpenAI.deployments.desc')}</Markdown>
+            <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
+              {t('llm.AzureOpenAI.deployments.desc')}
+            </Markdown>
           ),
 
           label: t('llm.AzureOpenAI.deployments.title'),

diff --git a/src/app/settings/llm/OpenAI/index.tsx b/src/app/settings/llm/OpenAI/index.tsx
@@ -15,12 +15,7 @@ import { LLMProviderConfigKey } from '../const';
 
 const useStyles = createStyles(({ css, token }) => ({
   markdown: css`
-    a {
-      font-size: 12px !important;
-    }
-
     p {
-      font-size: 12px !important;
       color: ${token.colorTextDescription} !important;
     }
   `,
@@ -110,7 +105,9 @@ const LLM = memo(() => {
             />
           ),
           desc: (
-            <Markdown className={styles.markdown}>{t('llm.OpenAI.azureApiVersion.desc')}</Markdown>
+            <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
+              {t('llm.OpenAI.azureApiVersion.desc')}
+            </Markdown>
           ),
           hidden: !useAzure,
           label: t('llm.OpenAI.azureApiVersion.title'),

diff --git a/src/features/AgentInfo/index.tsx b/src/features/AgentInfo/index.tsx
@@ -7,16 +7,14 @@ import { Center } from 'react-layout-kit';
 
 import { MetaData } from '@/types/meta';
 
-const useStyles = createStyles(({ css, token, stylish }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   avatar: css`
     flex: none;
   `,
   desc: css`
     color: ${token.colorTextDescription};
     text-align: center;
   `,
-  markdown: stylish.markdownInChat,
-
   title: css`
     font-size: 20px;
     font-weight: 600;
@@ -62,7 +60,7 @@ const AgentInfo = memo<AgentInfoProps>(({ systemRole, style, meta, onAvatarClick
       {systemRole && (
         <>
           <Divider style={{ margin: '8px 0' }} />
-          <Markdown className={styles.markdown}>{systemRole}</Markdown>
+          <Markdown variant={'chat'}>{systemRole}</Markdown>
         </>
       )}
     </Center>

diff --git a/src/features/Conversation/Extras/Translate.tsx b/src/features/Conversation/Extras/Translate.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Icon, Markdown, Tag, copyToClipboard } from '@lobehub/ui';
 import { App } from 'antd';
-import { createStyles } from 'antd-style';
+import { useTheme } from 'antd-style';
 import { ChevronDown, ChevronUp, ChevronsRight, CopyIcon, TrashIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,17 +11,13 @@ import { ChatTranslate } from '@/types/message';
 
 import BubblesLoading from '../components/BubblesLoading';
 
-const useStyles = createStyles(({ stylish }) => ({
-  markdown: stylish.markdownInChat,
-}));
-
 interface TranslateProps extends ChatTranslate {
   id: string;
   loading?: boolean;
 }
 
 const Translate = memo<TranslateProps>(({ content = '', from, to, id, loading }) => {
-  const { theme, styles } = useStyles();
+  const theme = useTheme();
   const { t } = useTranslation('common');
   const [show, setShow] = useState(true);
   const clearTranslate = useChatStore((s) => s.clearTranslate);
@@ -67,7 +63,7 @@ const Translate = memo<TranslateProps>(({ content = '', from, to, id, loading })
       {!show ? null : loading && !content ? (
         <BubblesLoading />
       ) : (
-        <Markdown className={styles.markdown}>{content}</Markdown>
+        <Markdown variant={'chat'}>{content}</Markdown>
       )}
     </Flexbox>
   );

diff --git a/src/features/Conversation/Plugins/Render/MarkdownType/index.tsx b/src/features/Conversation/Plugins/Render/MarkdownType/index.tsx
@@ -1,6 +1,9 @@
 import { Markdown } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
+
 import Loading from '../Loading';
 
 export interface PluginMarkdownTypeProps {
@@ -9,9 +12,14 @@ export interface PluginMarkdownTypeProps {
 }
 
 const PluginMarkdownType = memo<PluginMarkdownTypeProps>(({ content, loading }) => {
+  const fontSize = useGlobalStore((s) => settingsSelectors.currentSettings(s).fontSize);
   if (loading) return <Loading />;
 
-  return <Markdown>{content}</Markdown>;
+  return (
+    <Markdown fontSize={fontSize} variant={'chat'}>
+      {content}
+    </Markdown>
+  );
 });
 
 export default PluginMarkdownType;
diff --git a/src/features/Conversation/components/ChatItem/index.tsx b/src/features/Conversation/components/ChatItem/index.tsx
@@ -6,6 +6,8 @@ import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
+import { useGlobalStore } from '@/store/global';
+import { settingsSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
@@ -31,6 +33,7 @@ export interface ChatListItemProps {
 }
 
 const Item = memo<ChatListItemProps>(({ index, id }) => {
+  const fontSize = useGlobalStore((s) => settingsSelectors.currentSettings(s).fontSize);
   const { t } = useTranslation('common');
   const { styles } = useStyles();
   const [editing, setEditing] = useState(false);
@@ -111,6 +114,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
           editing={editing}
           error={error}
           errorMessage={<ErrorMessageExtra data={item} />}
+          fontSize={fontSize}
           loading={loading}
           message={item.content}
           messageExtra={<MessageExtra data={item} />}

diff --git a/src/features/Conversation/index.tsx b/src/features/Conversation/index.tsx
@@ -3,40 +3,22 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ChatHydration from '@/components/StoreHydration/ChatHydration';
-import { useGlobalStore } from '@/store/global';
-import { settingsSelectors } from '@/store/global/selectors';
 
 import SkeletonList from './components/SkeletonList';
 import ChatList from './components/VirtualizedList';
 import { useInitConversation } from './hooks/useInitConversation';
 
-const useStyles = createStyles(({ css, responsive, stylish, cx }, fontSize: number = 14) =>
-  cx(
-    css`
-      position: relative;
-      overflow-y: auto;
-      height: 100%;
-
-      ${responsive.mobile} {
-        ${stylish.noScrollbar}
-        width: 100vw;
-      }
-    `,
-    fontSize !== 14 &&
-      css`
-        article[data-code-type='markdown'] {
-          p,
-          code,
-          pre,
-          ul,
-          ol,
-          li,
-          blockquote {
-            font-size: ${fontSize}px;
-          }
-        }
-      `,
-  ),
+const useStyles = createStyles(
+  ({ css, responsive, stylish }) => css`
+    position: relative;
+    overflow-y: auto;
+    height: 100%;
+
+    ${responsive.mobile} {
+      ${stylish.noScrollbar}
+      width: 100vw;
+    }
+  `,
 );
 
 interface ConversationProps {
@@ -45,8 +27,7 @@ interface ConversationProps {
 }
 
 const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
-  const fontSize = useGlobalStore((s) => settingsSelectors.currentSettings(s).fontSize);
-  const { styles } = useStyles(fontSize);
+  const { styles } = useStyles();
 
   const init = useInitConversation();
 

diff --git a/src/features/PluginDetailModal/Meta.tsx b/src/features/PluginDetailModal/Meta.tsx
@@ -8,16 +8,14 @@ import { Center } from 'react-layout-kit';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
-const useStyles = createStyles(({ css, token, stylish }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   avatar: css`
     flex: none;
   `,
   desc: css`
     color: ${token.colorTextDescription};
     text-align: center;
   `,
-  markdown: stylish.markdownInChat,
-
   title: css`
     font-size: 20px;
     font-weight: 600;

diff --git a/src/features/PluginSettings/index.tsx b/src/features/PluginSettings/index.tsx
@@ -31,15 +31,12 @@ interface PluginSettingsConfigProps {
   schema: PluginSchema;
 }
 
-const useStyles = createStyles(({ css, token, stylish, cx }) => ({
-  markdown: cx(
-    stylish.markdownInChat,
-    css`
-      p {
-        color: ${token.colorTextDescription};
-      }
-    `,
-  ),
+const useStyles = createStyles(({ css, token }) => ({
+  markdown: css`
+    p {
+      color: ${token.colorTextDescription};
+    }
+  `,
 }));
 
 const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) => {
@@ -59,7 +56,13 @@ const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) =>
     <Form form={form} layout={'vertical'} style={{ width: '100%' }}>
       {items.map((item) => (
         <Form.Item
-          desc={item.desc && <Markdown className={styles.markdown}>{item.desc as string}</Markdown>}
+          desc={
+            item.desc && (
+              <Markdown className={styles.markdown} variant={'chat'}>
+                {item.desc as string}
+              </Markdown>
+            )
+          }
           key={item.label}
           label={item.label}
           tag={item.tag}