@lobehub/chat 1.86.1 → 1.87.0

package/src/app/[variants]/(main)/settings/common/features/Appearance/Preview.tsx

@@ -0,0 +1,298 @@
+import { Block } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    agent: css`
+      padding: 4px;
+      border-radius: 2px;
+    `,
+    agentActive: css`
+      background: ${token.colorFillSecondary};
+    `,
+    bubble: css`
+      padding: 6px;
+      border: 1px solid ${rgba(token.colorBorderSecondary, 0.66)};
+      border-radius: 3px;
+      background-color: ${token.colorBgContainer};
+    `,
+    container: css`
+      overflow: hidden;
+      justify-self: flex-end;
+
+      width: 332px;
+      height: 200px;
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadiusLG}px;
+
+      background: ${token.colorBgLayout};
+    `,
+    conversation: css`
+      background: ${token.colorBgContainerSecondary};
+    `,
+    header: css`
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+    `,
+    icon: css`
+      flex: none;
+      border-radius: 2px;
+      background: ${token.colorFillSecondary};
+    `,
+    input: css`
+      border-block-start: 1px solid ${token.colorBorderSecondary};
+    `,
+    nav: css`
+      padding: 4px;
+      border-inline-end: 1px solid ${token.colorBorderSecondary};
+      background: ${token.colorBgLayout};
+    `,
+    sidebar: css`
+      padding: 4px;
+      border-inline-end: 1px solid ${token.colorBorderSecondary};
+      background: ${token.colorBgLayout};
+    `,
+  };
+});
+
+const AgentItem = memo<{
+  active?: boolean;
+  color?: string;
+}>(({ active, color }) => {
+  const { cx, styles, theme } = useStyles();
+  return (
+    <Flexbox
+      align={'center'}
+      className={cx(styles.agent, active && styles.agentActive)}
+      gap={4}
+      horizontal
+      width={'100%'}
+    >
+      <Flexbox
+        className={styles.icon}
+        height={12}
+        style={{ background: color, borderRadius: '50%' }}
+        width={12}
+      />
+      <Flexbox flex={1} gap={4}>
+        <Flexbox
+          className={styles.icon}
+          height={2}
+          style={{
+            background: theme.colorTextTertiary,
+          }}
+          width={'66%'}
+        />
+        <Flexbox
+          className={styles.icon}
+          height={2}
+          style={{
+            background: theme.colorTextQuaternary,
+          }}
+          width={'100%'}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+const Preview = memo(() => {
+  const { styles, theme } = useStyles();
+
+  const nav = (
+    <Flexbox align={'center'} className={styles.nav} gap={8} width={24}>
+      <Flexbox
+        className={styles.icon}
+        height={14}
+        style={{ border: `2px solid ${theme.colorPrimary}`, borderRadius: '50%' }}
+        width={14}
+      />
+      <Flexbox className={styles.icon} height={12} width={12} />
+      <Flexbox className={styles.icon} height={12} width={12} />
+      <Flexbox className={styles.icon} height={12} width={12} />
+    </Flexbox>
+  );
+
+  const sidebar = (
+    <Flexbox className={styles.sidebar} gap={4} width={72}>
+      <Flexbox
+        gap={4}
+        paddingInline={2}
+        style={{
+          paddingTop: 4,
+        }}
+      >
+        <Flexbox className={styles.icon} height={8} width={'50%'} />
+        <Flexbox
+          className={styles.icon}
+          height={8}
+          style={{
+            background: theme.colorFillTertiary,
+          }}
+          width={'100%'}
+        />
+      </Flexbox>
+      <AgentItem />
+      <AgentItem active />
+      <AgentItem />
+      <AgentItem />
+    </Flexbox>
+  );
+
+  const header = (
+    <Flexbox
+      align={'center'}
+      className={styles.header}
+      horizontal
+      justify={'space-between'}
+      padding={4}
+    >
+      <Flexbox align={'center'} gap={4} horizontal>
+        <Flexbox className={styles.icon} height={12} style={{ borderRadius: '50%' }} width={12} />
+        <Flexbox className={styles.icon} height={8} width={32} />
+      </Flexbox>
+      <Flexbox gap={2} horizontal>
+        <Flexbox className={styles.icon} height={10} width={10} />
+        <Flexbox className={styles.icon} height={10} width={10} />
+      </Flexbox>
+    </Flexbox>
+  );
+
+  const input = (
+    <Flexbox
+      align={'flex-end'}
+      className={styles.input}
+      height={48}
+      justify={'flex-end'}
+      padding={8}
+    >
+      <Flexbox
+        className={styles.icon}
+        height={12}
+        style={{
+          background: theme.colorPrimary,
+        }}
+        width={32}
+      />
+    </Flexbox>
+  );
+
+  return (
+    <Block className={styles.container} horizontal shadow variant={'outlined'}>
+      {nav}
+      {sidebar}
+      <Flexbox className={styles.conversation} flex={1}>
+        {header}
+        <Flexbox align={'flex-start'} flex={1} gap={8} padding={6}>
+          <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'} width={'100%'}>
+            <Flexbox className={styles.bubble} gap={4} width={64}>
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'100%'}
+              />
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'66%'}
+              />
+            </Flexbox>
+            <Flexbox
+              className={styles.icon}
+              height={14}
+              style={{ borderRadius: '50%' }}
+              width={14}
+            />
+          </Flexbox>
+          <Flexbox gap={4} horizontal>
+            <Flexbox
+              className={styles.icon}
+              height={14}
+              style={{ borderRadius: '50%' }}
+              width={14}
+            />
+            <Flexbox className={styles.bubble} gap={4} width={160}>
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'100%'}
+              />
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'66%'}
+              />
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'100%'}
+              />
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'100%'}
+              />
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'33%'}
+              />
+            </Flexbox>
+          </Flexbox>
+          <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'} width={'100%'}>
+            <Flexbox className={styles.bubble} gap={4} width={100}>
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'100%'}
+              />
+              <Flexbox
+                className={styles.icon}
+                height={2}
+                style={{
+                  background: theme.colorTextQuaternary,
+                }}
+                width={'66%'}
+              />
+            </Flexbox>
+            <Flexbox
+              className={styles.icon}
+              height={14}
+              style={{ borderRadius: '50%' }}
+              width={14}
+            />
+          </Flexbox>
+        </Flexbox>
+        {input}
+      </Flexbox>
+    </Block>
+  );
+});
+
+export default Preview;

package/src/app/[variants]/(main)/settings/common/features/{Theme → Appearance}/ThemeSwatches/ThemeSwatchesNeutral.tsx

@@ -2,20 +2,15 @@ import { ColorSwatches, NeutralColors, findCustomThemeName, neutralColors } from
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useUserStore } from '@/store/user';
-import { userGeneralSettingsSelectors } from '@/store/user/selectors';
-
-const ThemeSwatchesNeutral = memo(() => {
+const ThemeSwatchesNeutral = memo<{
+  onChange?: (v: NeutralColors) => void;
+  value?: NeutralColors;
+}>(({ value, onChange }) => {
   const { t } = useTranslation('color');
 
-  const [neutralColor, updateGeneralConfig] = useUserStore((s) => [
-    userGeneralSettingsSelectors.neutralColor(s),
-    s.updateGeneralConfig,
-  ]);
-
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('neutral', v) as NeutralColors;
-    updateGeneralConfig({ neutralColor: name || '' });
+    onChange?.(name || '');
   };
 
   return (
@@ -47,7 +42,7 @@ const ThemeSwatchesNeutral = memo(() => {
         },
       ]}
       onChange={handleSelect}
-      value={neutralColor ? neutralColors[neutralColor] : undefined}
+      value={value ? neutralColors[value] : undefined}
     />
   );
 });

package/src/app/[variants]/(main)/settings/common/features/{Theme → Appearance}/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -2,19 +2,15 @@ import { ColorSwatches, PrimaryColors, findCustomThemeName, primaryColors } from
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useUserStore } from '@/store/user';
-import { userGeneralSettingsSelectors } from '@/store/user/selectors';
-
-const ThemeSwatchesPrimary = memo(() => {
+const ThemeSwatchesPrimary = memo<{
+  onChange?: (v: PrimaryColors) => void;
+  value?: PrimaryColors;
+}>(({ onChange, value }) => {
   const { t } = useTranslation('color');
-  const [primaryColor, updateGeneralConfig] = useUserStore((s) => [
-    userGeneralSettingsSelectors.primaryColor(s),
-    s.updateGeneralConfig,
-  ]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('primary', v) as PrimaryColors;
-    updateGeneralConfig({ primaryColor: name || '' });
+    onChange?.(name || '');
   };
 
   return (
@@ -74,7 +70,7 @@ const ThemeSwatchesPrimary = memo(() => {
         },
       ]}
       onChange={handleSelect}
-      value={primaryColor ? primaryColors[primaryColor] : undefined}
+      value={value ? primaryColors[value] : undefined}
     />
   );
 });

package/src/app/[variants]/(main)/settings/common/features/Appearance/index.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Form, type FormGroupItemType, Icon } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { Loader2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/slices/settings/selectors';
+
+import Preview from './Preview';
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
+
+const Appearance = memo(() => {
+  const { t } = useTranslation('setting');
+  const { general } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
+  const [loading, setLoading] = useState(false);
+
+  if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
+
+  const theme: FormGroupItemType = {
+    children: [
+      {
+        children: <Preview />,
+        label: t('settingAppearance.preview.title'),
+        minWidth: undefined,
+      },
+      {
+        children: <ThemeSwatchesPrimary />,
+        desc: t('settingAppearance.primaryColor.desc'),
+        label: t('settingAppearance.primaryColor.title'),
+        minWidth: undefined,
+        name: 'primaryColor',
+      },
+      {
+        children: <ThemeSwatchesNeutral />,
+        desc: t('settingAppearance.neutralColor.desc'),
+        label: t('settingAppearance.neutralColor.title'),
+        minWidth: undefined,
+        name: 'neutralColor',
+      },
+    ],
+    extra: loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />,
+    title: t('settingAppearance.title'),
+  };
+
+  return (
+    <Form
+      initialValues={general}
+      items={[theme]}
+      itemsType={'group'}
+      onValuesChange={async (value) => {
+        setLoading(true);
+        await setSettings({ general: value });
+        setLoading(false);
+      }}
+      variant={'borderless'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default Appearance;

package/src/app/[variants]/(main)/settings/common/features/ChatAppearance/ChatPreview.tsx

@@ -0,0 +1,35 @@
+import { Block, MarkdownProps } from '@lobehub/ui';
+import { ChatItem } from '@lobehub/ui/chat';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { BRANDING_NAME } from '@/const/branding';
+import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
+
+const ChatPreview = memo<Pick<MarkdownProps, 'fontSize'>>(({ fontSize }) => {
+  const theme = useTheme();
+  const { t } = useTranslation('welcome');
+  return (
+    <Block
+      style={{
+        background: theme.colorBgContainerSecondary,
+        marginBlock: 16,
+        minHeight: 110,
+      }}
+      variant={'outlined'}
+    >
+      <ChatItem
+        avatar={{
+          avatar: DEFAULT_INBOX_AVATAR,
+        }}
+        fontSize={fontSize}
+        message={t('guide.defaultMessageWithoutCreate', {
+          appName: BRANDING_NAME,
+        })}
+      />
+    </Block>
+  );
+});
+
+export default ChatPreview;

package/src/app/[variants]/(main)/settings/common/features/ChatAppearance/HighlighterPreview.tsx

@@ -0,0 +1,55 @@
+import { Block, HighlighterProps } from '@lobehub/ui';
+import { ChatItem } from '@lobehub/ui/chat';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
+
+const code = `
+\`\`\`ts
+const person = { name: "Alice", age: 30 };
+type PersonType = typeof person;  // { name: string; age: number }
+
+// 'satisfies' to ensure a type matches but allows more specific types
+type Animal = { name: string };
+const dog = { name: "Buddy", breed: "Golden Retriever" } satisfies Animal;
+\`\`\`
+`;
+
+const HighlighterPreview = memo<{ theme?: HighlighterProps['theme'] }>(
+  ({ theme }) => {
+    const token = useTheme();
+
+    return (
+      <Block
+        style={{
+          background: token.colorBgContainerSecondary,
+          marginBlock: 16,
+          minHeight: 260,
+          paddingBottom: 16,
+        }}
+        variant={'outlined'}
+      >
+        <ChatItem
+          avatar={{
+            avatar: DEFAULT_INBOX_AVATAR,
+          }}
+          markdownProps={{
+            componentProps: {
+              highlight: {
+                fullFeatured: false,
+                theme,
+              },
+            },
+          }}
+          message={code}
+        />
+      </Block>
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.theme === nextProps.theme;
+  },
+);
+
+export default HighlighterPreview;

package/src/app/[variants]/(main)/settings/common/features/ChatAppearance/MermaidPreview.tsx

@@ -0,0 +1,51 @@
+import { Block, MermaidProps } from '@lobehub/ui';
+import { ChatItem } from '@lobehub/ui/chat';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
+
+const code = `\`\`\`mermaid
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
+\`\`\`
+`;
+
+const MermaidPreview = memo<{ theme?: MermaidProps['theme'] }>(
+  ({ theme }) => {
+    const token = useTheme();
+    return (
+      <Block
+        style={{
+          background: token.colorBgContainerSecondary,
+          marginBlock: 16,
+          minHeight: 320,
+          paddingBottom: 16,
+        }}
+        variant={'outlined'}
+      >
+        <ChatItem
+          avatar={{
+            avatar: DEFAULT_INBOX_AVATAR,
+          }}
+          markdownProps={{
+            componentProps: {
+              mermaid: {
+                fullFeatured: false,
+                theme,
+              },
+            },
+          }}
+          message={code}
+        />
+      </Block>
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.theme === nextProps.theme;
+  },
+);
+
+export default MermaidPreview;

package/src/app/[variants]/(main)/settings/common/features/ChatAppearance/index.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import {
+  Form,
+  type FormGroupItemType,
+  Icon,
+  Select,
+  SliderWithInput,
+  highlighterThemes,
+  mermaidThemes,
+} from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { Loader2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+import ChatPreview from './ChatPreview';
+import HighlighterPreview from './HighlighterPreview';
+import MermaidPreview from './MermaidPreview';
+
+const ChatAppearance = memo(() => {
+  const { t } = useTranslation('setting');
+  const { general } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
+  const [loading, setLoading] = useState(false);
+
+  if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
+
+  const theme: FormGroupItemType = {
+    children: [
+      {
+        children: <ChatPreview fontSize={general.fontSize} />,
+        noStyle: true,
+      },
+      {
+        children: (
+          <SliderWithInput
+            marks={{
+              12: {
+                label: 'A',
+                style: {
+                  fontSize: 12,
+                  marginTop: 4,
+                },
+              },
+              14: {
+                label: t('settingChatAppearance.fontSize.marks.normal'),
+                style: {
+                  fontSize: 14,
+                  marginTop: 4,
+                },
+              },
+              18: {
+                label: 'A',
+                style: {
+                  fontSize: 18,
+                  marginTop: 4,
+                },
+              },
+            }}
+            max={18}
+            min={12}
+            step={1}
+          />
+        ),
+        desc: t('settingChatAppearance.fontSize.desc'),
+        label: t('settingChatAppearance.fontSize.title'),
+        name: 'fontSize',
+      },
+      {
+        children: <HighlighterPreview theme={general.highlighterTheme} />,
+        noStyle: true,
+      },
+      {
+        children: (
+          <Select
+            options={highlighterThemes.map((item) => ({
+              label: item.displayName,
+              value: item.id,
+            }))}
+          />
+        ),
+        label: t('settingChatAppearance.highlighterTheme.title'),
+        name: 'highlighterTheme',
+      },
+      {
+        children: <MermaidPreview theme={general.mermaidTheme} />,
+        noStyle: true,
+      },
+      {
+        children: (
+          <Select
+            options={mermaidThemes.map((item) => ({
+              label: item.displayName,
+              value: item.id,
+            }))}
+          />
+        ),
+        label: t('settingChatAppearance.mermaidTheme.title'),
+        name: 'mermaidTheme',
+      },
+    ],
+    extra: loading && <Icon icon={Loader2Icon} size={16} spin style={{ opacity: 0.5 }} />,
+    title: t('settingChatAppearance.title'),
+  };
+
+  return (
+    <Form
+      initialValues={general}
+      items={[theme]}
+      itemsType={'group'}
+      onValuesChange={async (value) => {
+        setLoading(true);
+        await setSettings({ general: value });
+        setLoading(false);
+      }}
+      variant={'borderless'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default ChatAppearance;