@lobehub/chat 1.0.0 → 1.0.2

package/src/features/PluginStore/index.tsx

@@ -0,0 +1,57 @@
+import { Modal } from '@lobehub/ui';
+import { Segmented } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useServerConfigStore } from '@/store/serverConfig';
+import { useToolStore } from '@/store/tool';
+
+import InstalledPluginList from './InstalledPluginList';
+import OnlineList from './OnlineList';
+
+interface PluginStoreProps {
+  open?: boolean;
+  setOpen: (open: boolean) => void;
+}
+export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
+  const { t } = useTranslation('plugin');
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  const [listType] = useToolStore((s) => [s.listType]);
+
+  return (
+    <Modal
+      allowFullscreen
+      footer={null}
+      onCancel={() => {
+        setOpen(false);
+      }}
+      open={open}
+      styles={{ body: { overflow: 'hidden' } }}
+      title={t('store.title')}
+      width={800}
+    >
+      <Flexbox 
+        gap={ mobile ? 8 : 16 } 
+        style={{ maxHeight: mobile ? '-webkit-fill-available' : 'inherit' }}
+        width={'100%'}
+      >
+        <Segmented
+          block
+          onChange={(v) => {
+            useToolStore.setState({ listType: v as any });
+          }}
+          options={[
+            { label: t('store.tabs.all'), value: 'all' },
+            { label: t('store.tabs.installed'), value: 'installed' },
+          ]}
+          style={{ flex: 1 }}
+          value={listType}
+        />
+        {listType === 'all' ? <OnlineList /> : <InstalledPluginList />}
+      </Flexbox>
+    </Modal>
+  );
+});
+
+export default PluginStore;

package/src/features/Setting/Footer.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { MessageSquareHeart } from 'lucide-react';
+import Link from 'next/link';
+import { PropsWithChildren, memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import GuideModal from '@/components/GuideModal';
+import GuideVideo from '@/components/GuideVideo';
+import { GITHUB, GITHUB_ISSUES } from '@/const/url';
+import { isOnServerSide } from '@/utils/env';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+  `,
+);
+
+const Footer = memo<PropsWithChildren>(() => {
+  const { t } = useTranslation('common');
+  const [openStar, setOpenStar] = useState(false);
+  const [openFeedback, setOpenFeedback] = useState(false);
+  const { styles } = useStyles();
+  return (
+    <>
+      <Flexbox flex={1} justify={'flex-end'}>
+        <Center
+          as={'footer'}
+          className={styles}
+          flex={'none'}
+          horizontal
+          padding={16}
+          width={'100%'}
+        >
+          <div style={{ textAlign: 'center' }}>
+            <Icon icon={MessageSquareHeart} /> {`${t('footer.title')} `}
+            <Link
+              aria-label={'star'}
+              href={GITHUB}
+              onClick={(e) => {
+                e.preventDefault();
+                setOpenStar(true);
+              }}
+            >
+              {t('footer.action.star')}
+            </Link>
+            {` ${t('footer.and')} `}
+            <Link
+              aria-label={'feedback'}
+              href={GITHUB_ISSUES}
+              onClick={(e) => {
+                e.preventDefault();
+                setOpenFeedback(true);
+              }}
+            >
+              {t('footer.action.feedback')}
+            </Link>
+            {' !'}
+          </div>
+        </Center>
+      </Flexbox>
+      <GuideModal
+        cancelText={t('footer.later')}
+        cover={<GuideVideo height={269} src={'/videos/star.mp4'} width={358} />}
+        desc={t('footer.star.desc')}
+        okText={t('footer.star.action')}
+        onCancel={() => setOpenStar(false)}
+        onOk={() => {
+          if (isOnServerSide) return;
+          window.open(GITHUB, '__blank');
+        }}
+        open={openStar}
+        title={t('footer.star.title')}
+      />
+      <GuideModal
+        cancelText={t('footer.later')}
+        cover={<GuideVideo height={269} src={'/videos/feedback.mp4'} width={358} />}
+        desc={t('footer.feedback.desc')}
+        okText={t('footer.feedback.action')}
+        onCancel={() => setOpenFeedback(false)}
+        onOk={() => {
+          if (isOnServerSide) return;
+          window.open(GITHUB_ISSUES, '__blank');
+        }}
+        open={openFeedback}
+        title={t('footer.feedback.title')}
+      />
+    </>
+  );
+});
+
+export default Footer;

package/src/features/Setting/SettingContainer.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { PropsWithChildren, ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const SettingContainer = memo<
+  PropsWithChildren<{ addonAfter?: ReactNode; addonBefore?: ReactNode }>
+>(({ children, addonAfter, addonBefore }) => {
+  const { mobile = false } = useResponsive();
+  return (
+    <Flexbox
+      align={'center'}
+      height={'100%'}
+      paddingBlock={mobile ? undefined : 32}
+      style={{ overflowX: 'hidden', overflowY: 'auto' }}
+      width={'100%'}
+    >
+      {addonBefore}
+      <Flexbox
+        gap={64}
+        paddingInline={mobile ? undefined : 24}
+        style={{
+          maxWidth: 1024,
+        }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+      {addonAfter}
+    </Flexbox>
+  );
+});
+
+export default SettingContainer;

package/src/features/SyncStatusInspector/DisableSync.tsx

@@ -0,0 +1,79 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { Badge, Button, Popover } from 'antd';
+import { TooltipPlacement } from 'antd/es/tooltip';
+import { LucideCloudCog, LucideCloudy } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useUserStore } from '@/store/user';
+import { syncSettingsSelectors } from '@/store/user/selectors';
+
+interface DisableSyncProps {
+  noPopover?: boolean;
+  placement?: TooltipPlacement;
+}
+
+const DisableSync = memo<DisableSyncProps>(({ noPopover, placement = 'bottomLeft' }) => {
+  const { t } = useTranslation('common');
+  const [haveConfig, setSettings] = useUserStore((s) => [
+    !!syncSettingsSelectors.webrtcConfig(s).channelName,
+    s.setSettings,
+  ]);
+
+  const enableSync = () => {
+    setSettings({ sync: { webrtc: { enabled: true } } });
+  };
+
+  const tag = (
+    <div>
+      <Tag>
+        <Badge status="default" />
+        {t('sync.status.disabled')}
+      </Tag>
+    </div>
+  );
+
+  return noPopover ? (
+    tag
+  ) : (
+    <Popover
+      arrow={false}
+      content={
+        <Flexbox gap={12} width={320}>
+          {t('sync.disabled.desc')}
+          {haveConfig ? (
+            <Flexbox gap={8} horizontal>
+              <Link href={'/settings/sync'}>
+                <Button block icon={<Icon icon={LucideCloudCog} />}>
+                  {t('sync.disabled.actions.settings')}
+                </Button>
+              </Link>
+              <Button block onClick={enableSync} type={'primary'}>
+                {t('sync.disabled.actions.enable')}
+              </Button>
+            </Flexbox>
+          ) : (
+            <Link href={'/settings/sync'}>
+              <Button block icon={<Icon icon={LucideCloudCog} />} type={'primary'}>
+                {t('sync.disabled.actions.settings')}
+              </Button>
+            </Link>
+          )}
+        </Flexbox>
+      }
+      placement={placement}
+      title={
+        <Flexbox gap={8} horizontal>
+          <Icon icon={LucideCloudy} />
+          {t('sync.disabled.title')}
+        </Flexbox>
+      }
+    >
+      {tag}
+    </Popover>
+  );
+});
+
+export default DisableSync;

package/src/features/SyncStatusInspector/EnableSync.tsx

@@ -0,0 +1,136 @@
+import { ActionIcon, Avatar, Icon } from '@lobehub/ui';
+import { Divider, Popover, Switch, Tag, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { TooltipPlacement } from 'antd/es/tooltip';
+import isEqual from 'fast-deep-equal';
+import { LucideCloudy, LucideLaptop, LucideSmartphone, SettingsIcon } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useUserStore } from '@/store/user';
+import { syncSettingsSelectors } from '@/store/user/selectors';
+import { pathString } from '@/utils/url';
+
+import EnableTag from './EnableTag';
+
+const { Text } = Typography;
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  text: css`
+    max-width: 100%;
+    color: ${token.colorTextTertiary};
+    .${prefixCls}-typography-copy {
+      color: ${token.colorTextTertiary};
+    }
+  `,
+  title: css`
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+interface EnableSyncProps {
+  hiddenActions?: boolean;
+  placement?: TooltipPlacement;
+}
+
+const EnableSync = memo<EnableSyncProps>(({ hiddenActions, placement = 'bottomLeft' }) => {
+  const { t } = useTranslation('common');
+
+  const { styles, theme } = useStyles();
+  const [syncStatus, isSyncing, channelName, enableWebRTC, setSettings] = useUserStore((s) => [
+    s.syncStatus,
+    s.syncStatus === 'syncing',
+    syncSettingsSelectors.webrtcChannelName(s),
+    syncSettingsSelectors.enableWebRTC(s),
+    s.setSettings,
+  ]);
+
+  const users = useUserStore((s) => s.syncAwareness, isEqual);
+
+  const switchSync = (enabled: boolean) => {
+    setSettings({ sync: { webrtc: { enabled } } });
+  };
+
+  return (
+    <Popover
+      arrow={false}
+      content={
+        <Flexbox gap={16}>
+          <Flexbox align={'center'} gap={24} horizontal>
+            <Flexbox
+              align={'center'}
+              className={styles.title}
+              gap={4}
+              horizontal
+              style={{ paddingInlineEnd: 12 }}
+            >
+              {t('sync.channel')}
+              <Text className={styles.text} copyable>
+                {channelName}
+              </Text>
+            </Flexbox>
+          </Flexbox>
+          <Divider dashed style={{ margin: 0 }} />
+          <Flexbox gap={12}>
+            {users.map((user) => (
+              <Flexbox gap={12} horizontal key={user.clientID}>
+                <Avatar
+                  avatar={
+                    <Icon
+                      color={theme.purple}
+                      icon={user.isMobile ? LucideSmartphone : LucideLaptop}
+                      size={{ fontSize: 24 }}
+                    />
+                  }
+                  background={theme.purple1}
+                  shape={'square'}
+                />
+
+                <Flexbox>
+                  <Flexbox gap={8} horizontal>
+                    {user.name || user.id}
+                    {user.current && (
+                      <Flexbox horizontal>
+                        <Tag bordered={false} color={'blue'}>
+                          {t('sync.awareness.current')}
+                        </Tag>
+                      </Flexbox>
+                    )}
+                  </Flexbox>
+                  <Typography.Text type={'secondary'}>
+                    {user.os} · {user.browser}
+                  </Typography.Text>
+                </Flexbox>
+              </Flexbox>
+            ))}
+          </Flexbox>
+        </Flexbox>
+      }
+      placement={placement}
+      title={
+        <Flexbox distribution={'space-between'} horizontal>
+          <Flexbox align={'center'} gap={8} horizontal>
+            <Icon icon={LucideCloudy} />
+            {t('sync.title')}
+            {!hiddenActions && (
+              <Switch checked={enableWebRTC} onChange={switchSync} size={'small'} />
+            )}
+          </Flexbox>
+          {!hiddenActions && (
+            <Link href={pathString('/settings/sync')}>
+              <ActionIcon icon={SettingsIcon} title={t('sync.actions.settings')} />
+            </Link>
+          )}
+        </Flexbox>
+      }
+    >
+      <div>
+        <EnableTag isSyncing={isSyncing} status={syncStatus} />
+      </div>
+    </Popover>
+  );
+});
+
+export default EnableSync;

package/src/features/SyncStatusInspector/EnableTag.tsx

@@ -0,0 +1,66 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Badge, Tag } from 'antd';
+import { LucideCloudy, LucideRefreshCw, LucideRouter, LucideWifiOff } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PeerSyncStatus } from '@/types/sync';
+
+const EnableTag = memo<{ isSyncing: boolean; status: PeerSyncStatus }>(({ status, isSyncing }) => {
+  const { t } = useTranslation('common');
+
+  switch (status) {
+    case PeerSyncStatus.Connecting: {
+      return (
+        <Tag
+          bordered={false}
+          color={'blue'}
+          icon={<Badge color={'blue'} status="processing" />}
+          style={{ display: 'flex', gap: 4 }}
+        >
+          {t('sync.status.connecting')}
+        </Tag>
+      );
+    }
+
+    case PeerSyncStatus.Synced: {
+      return (
+        <Tag bordered={false} color={'green'} icon={<Icon icon={LucideCloudy} />}>
+          {t('sync.status.synced')}
+        </Tag>
+      );
+    }
+
+    case PeerSyncStatus.Ready: {
+      return (
+        <Tag bordered={false} color={'blue'} icon={<Icon icon={LucideRouter} />}>
+          {t('sync.status.ready')}
+        </Tag>
+      );
+    }
+
+    case PeerSyncStatus.Syncing: {
+      return (
+        <Tag
+          bordered={false}
+          color={'blue'}
+          icon={<Icon icon={LucideRefreshCw} spin={isSyncing} />}
+        >
+          {t('sync.status.syncing')}
+        </Tag>
+      );
+    }
+
+    case PeerSyncStatus.Unconnected: {
+      return (
+        <Tooltip title={t('sync.unconnected.tip')}>
+          <Tag bordered={false} color={'red'} icon={<Icon icon={LucideWifiOff} />}>
+            {t('sync.status.unconnected')}
+          </Tag>
+        </Tooltip>
+      );
+    }
+  }
+});
+
+export default EnableTag;

package/src/features/SyncStatusInspector/index.tsx

@@ -0,0 +1,27 @@
+import { TooltipPlacement } from 'antd/es/tooltip';
+import { memo } from 'react';
+
+import { useUserStore } from '@/store/user';
+
+import DisableSync from './DisableSync';
+import EnableSync from './EnableSync';
+
+interface SyncStatusTagProps {
+  hiddenActions?: boolean;
+  hiddenEnableGuide?: boolean;
+  placement?: TooltipPlacement;
+}
+
+const SyncStatusTag = memo<SyncStatusTagProps>(
+  ({ hiddenActions, placement, hiddenEnableGuide }) => {
+    const [enableSync] = useUserStore((s) => [s.syncEnabled]);
+
+    return enableSync ? (
+      <EnableSync hiddenActions={hiddenActions} placement={placement} />
+    ) : (
+      <DisableSync noPopover={hiddenEnableGuide} placement={placement} />
+    );
+  },
+);
+
+export default SyncStatusTag;

package/src/features/User/DataStatistics.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Badge } from 'antd';
+import { createStyles } from 'antd-style';
+import { isNumber } from 'lodash-es';
+import { LoaderCircle } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import useSWR from 'swr';
+
+import { messageService } from '@/services/message';
+import { sessionService } from '@/services/session';
+import { topicService } from '@/services/topic';
+import { useServerConfigStore } from '@/store/serverConfig';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    padding: 6px 8px;
+    background: ${token.colorFillTertiary};
+    border-radius: ${token.borderRadius}px;
+  `,
+  count: css`
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1.2;
+  `,
+  title: css`
+    font-size: 12px;
+    line-height: 1.2;
+    color: ${token.colorTextDescription};
+  `,
+  today: css`
+    font-size: 12px;
+  `,
+}));
+
+const formatNumber = (num: any) => {
+  if (!isNumber(num)) return num;
+  // 使用Intl.NumberFormat来添加千分号
+  const formattedWithComma = new Intl.NumberFormat('en-US').format(num);
+
+  // 格式化为 K 或 M
+  if (num >= 10_000_000) {
+    return (num / 1_000_000).toFixed(1) + 'M';
+  } else if (num >= 10_000) {
+    return (num / 1000).toFixed(1) + 'K';
+  } else if (num === 0) {
+    return 0;
+  } else {
+    return formattedWithComma;
+  }
+};
+
+const DataStatistics = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest }) => {
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  // sessions
+  const { data: sessions, isLoading: sessionsLoading } = useSWR(
+    'count-sessions',
+    sessionService.countSessions,
+  );
+  // topics
+  const { data: topics, isLoading: topicsLoading } = useSWR(
+    'count-topics',
+    topicService.countTopics,
+  );
+  // messages
+  const { data: messages, isLoading: messagesLoading } = useSWR(
+    'count-messages',
+    messageService.countMessages,
+  );
+  const { data: messagesToday } = useSWR('today-messages', messageService.countTodayMessages);
+
+  const { styles, theme } = useStyles();
+  const { t } = useTranslation('common');
+
+  const loading = useMemo(() => <Icon icon={LoaderCircle} spin />, []);
+
+  const items = [
+    {
+      count: sessionsLoading ? loading : sessions,
+      key: 'sessions',
+      title: t('dataStatistics.sessions'),
+    },
+    {
+      count: topicsLoading ? loading : topics,
+      key: 'topics',
+      title: t('dataStatistics.topics'),
+    },
+    {
+      count: messagesLoading ? loading : messages,
+      countToady: messagesToday,
+      key: 'messages',
+      title: t('dataStatistics.messages'),
+    },
+  ];
+
+  return (
+    <Flexbox
+      align={'center'}
+      gap={4}
+      horizontal
+      paddingInline={8}
+      style={{ marginBottom: 8, ...style }}
+      width={'100%'}
+      {...rest}
+    >
+      {items.map((item) => {
+        if (item.key === 'messages') {
+          const showBadge = Boolean(item.countToady && item.countToady > 0);
+          return (
+            <Flexbox
+              align={'center'}
+              className={styles.card}
+              flex={showBadge && !mobile ? 2 : 1}
+              gap={4}
+              horizontal
+              justify={'space-between'}
+              key={item.key}
+            >
+              <Flexbox gap={2}>
+                <div className={styles.count}>{formatNumber(item.count)}</div>
+                <div className={styles.title}>{item.title}</div>
+              </Flexbox>
+              {showBadge && (
+                <Tooltip title={t('dataStatistics.today')}>
+                  <Badge
+                    count={`+${item.countToady}`}
+                    style={{
+                      background: theme.colorSuccess,
+                      color: theme.colorSuccessBg,
+                      cursor: 'pointer',
+                    }}
+                  />
+                </Tooltip>
+              )}
+            </Flexbox>
+          );
+        }
+
+        return (
+          <Flexbox className={styles.card} flex={1} gap={2} key={item.key}>
+            <Flexbox horizontal>
+              <div className={styles.count}>{formatNumber(item.count)}</div>
+            </Flexbox>
+            <div className={styles.title}>{item.title}</div>
+          </Flexbox>
+        );
+      })}
+    </Flexbox>
+  );
+});
+
+export default DataStatistics;

package/src/features/User/PlanTag.tsx

@@ -0,0 +1,45 @@
+import { Tooltip } from '@lobehub/ui';
+import { Tag } from 'antd';
+import { useTheme } from 'antd-style';
+import { CSSProperties, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export enum PlanType {
+  Preview = 'preview',
+}
+
+export interface PlanTagProps {
+  type?: PlanType;
+}
+
+const PlanTag = memo<PlanTagProps>(({ type = PlanType.Preview }) => {
+  const { t } = useTranslation('common');
+  const theme = useTheme();
+  const tag: {
+    desc: string;
+    style: CSSProperties;
+    title: string;
+  } = useMemo(() => {
+    switch (type) {
+      case PlanType.Preview: {
+        return {
+          desc: t('userPanel.preview'),
+          style: {
+            background: theme.colorFill,
+          },
+          title: 'Preview',
+        };
+      }
+    }
+  }, []);
+
+  return (
+    <Tooltip title={tag.desc}>
+      <Tag bordered={false} style={{ ...tag.style, borderRadius: 12, cursor: 'pointer' }}>
+        {tag.title}
+      </Tag>
+    </Tooltip>
+  );
+});
+
+export default PlanTag;