@lobehub/chat 1.17.7 → 1.18.1

package/src/app/(main)/discover/(detail)/features/ShareButton.tsx

@@ -0,0 +1,160 @@
+import { ActionIcon, Avatar, CopyButton, Icon, Input, Modal, Tag } from '@lobehub/ui';
+import { Button, ButtonProps, Skeleton, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { startCase } from 'lodash-es';
+import { LinkIcon, Share2Icon } from 'lucide-react';
+import Link from 'next/link';
+import { ReactNode, memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useShare } from '@/hooks/useShare';
+
+import CardBanner from '../../components/CardBanner';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    banner: css`
+      overflow: hidden;
+
+      background: ${token.colorBgContainer};
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: ${token.borderRadiusLG}px;
+      box-shadow: ${token.boxShadowTertiary};
+    `,
+    copy: css`
+      background: ${token.colorPrimary};
+
+      &:hover {
+        background: ${token.colorPrimaryHover};
+      }
+    `,
+    icon: css`
+      border: 1px solid ${token.colorFillSecondary};
+
+      svg {
+        fill: ${token.colorTextSecondary};
+      }
+
+      &:hover {
+        border: 1px solid ${token.colorBorderSecondary};
+
+        svg {
+          fill: ${token.colorText};
+        }
+      }
+    `,
+  };
+});
+
+interface ShareButtonProps extends ButtonProps {
+  meta?: {
+    avatar?: string | ReactNode;
+    desc?: string;
+    hashtags?: string[];
+    tags?: ReactNode;
+    title?: string;
+    url: string;
+  };
+}
+
+const ShareButton = memo<ShareButtonProps>(({ meta, ...rest }) => {
+  const { x, reddit, telegram, whatsapp, mastodon, linkedin, weibo } = useShare({
+    avatar: '',
+    desc: '',
+    hashtags: [],
+    title: '',
+    url: '',
+    ...meta,
+  });
+  const { t } = useTranslation('common');
+  const { styles, theme } = useStyles();
+  const [open, setOpen] = useState(false);
+
+  let content;
+
+  if (meta) {
+    content = (
+      <Center gap={16} style={{ position: 'relative' }} width={'100%'}>
+        <Flexbox align={'center'} className={styles.banner} width={'100%'}>
+          <CardBanner avatar={meta.avatar} size={640} style={{ height: 72, marginBottom: -36 }} />
+          <Center
+            flex={'none'}
+            height={72}
+            style={{
+              backgroundColor: theme.colorBgContainer,
+              borderRadius: '50%',
+              overflow: 'hidden',
+              zIndex: 2,
+            }}
+            width={72}
+          >
+            <Avatar animation avatar={meta.avatar} shape={'circle'} size={64} />
+          </Center>
+          <Center padding={12} width={'100%'}>
+            <h3 style={{ fontWeight: 'bold', textAlign: 'center' }}>{meta.title}</h3>
+            <Typography.Paragraph style={{ color: theme.colorTextSecondary, textAlign: 'center' }}>
+              {meta.desc}
+            </Typography.Paragraph>
+            {meta.hashtags && (
+              <Flexbox align={'center'} gap={4} horizontal justify={'center'} wrap={'wrap'}>
+                {meta.hashtags.map((tag, index) => (
+                  <Tag key={index} style={{ margin: 0 }}>
+                    {startCase(tag).trim()}
+                  </Tag>
+                ))}
+              </Flexbox>
+            )}
+            {meta.tags}
+          </Center>
+        </Flexbox>
+        <Flexbox align={'center'} gap={8} horizontal justify={'center'} wrap={'wrap'}>
+          {[x, reddit, telegram, whatsapp, mastodon, linkedin, weibo].map((item) => (
+            <Link href={item.link} key={item.title} target={'_blank'}>
+              <ActionIcon
+                className={styles.icon}
+                icon={item.icon as any}
+                size={{ blockSize: 36, borderRadius: 18, fontSize: 16 }}
+                title={item.title}
+              />
+            </Link>
+          ))}
+        </Flexbox>
+        <Flexbox align={'center'} gap={8} horizontal width={'100%'}>
+          <Input type={'block'} value={meta.url} />
+          <CopyButton
+            className={styles.copy}
+            color={theme.colorBgLayout}
+            content={meta.url}
+            icon={LinkIcon}
+            size={{ blockSize: 36, fontSize: 16 }}
+          />
+        </Flexbox>
+      </Center>
+    );
+  } else {
+    content = <Skeleton active paragraph={{ rows: 4 }} title={false} />;
+  }
+
+  return (
+    <>
+      <Button
+        icon={<Icon icon={Share2Icon} />}
+        onClick={() => setOpen(true)}
+        size={'large'}
+        {...rest}
+      />
+      <Modal
+        footer={null}
+        onCancel={() => setOpen(false)}
+        open={open}
+        title={t('share')}
+        width={360}
+      >
+        {content}
+      </Modal>
+    </>
+  );
+});
+
+export default ShareButton;

package/src/app/(main)/discover/(detail)/features/SidebarContainer.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const SidebarContainer = memo<FlexboxProps>(({ children, style, ...rest }) => {
+  return (
+    <Flexbox
+      flex={'none'}
+      gap={48}
+      height={'100%'}
+      style={{ position: 'relative', width: 320, ...style }}
+      width={'100%'}
+      {...rest}
+    >
+      {children}
+    </Flexbox>
+  );
+});
+
+export default SidebarContainer;

package/src/app/(main)/discover/(detail)/layout.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const MainLayout = ServerLayout<PropsWithChildren>({ Desktop, Mobile });
+
+MainLayout.displayName = 'DiscoverAssistantsDetailLayout';
+
+export default MainLayout;

package/src/app/(main)/discover/(detail)/loading.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useServerConfigStore } from '@/store/serverConfig';
+
+import DetailLayout from './features/DetailLayout';
+
+const Loading = memo(() => {
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  return (
+    <DetailLayout
+      actions={<Skeleton.Button block />}
+      header={
+        <Flexbox gap={12} width={'100%'}>
+          <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>
+            <Flexbox align={'center'} gap={12} horizontal justify={'flex-start'}>
+              <Skeleton.Avatar active shape={'circle'} size={48} />
+              <Skeleton.Button active />
+            </Flexbox>
+            <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'}>
+              <Skeleton.Button active />
+            </Flexbox>
+          </Flexbox>
+          <Skeleton active title={false} />
+        </Flexbox>
+      }
+      mobile={mobile}
+      sidebar={<Skeleton paragraph={{ rows: 5 }} />}
+    >
+      <Skeleton paragraph={{ rows: 16 }} title={false} />
+    </DetailLayout>
+  );
+});
+
+export default Loading;

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/Actions.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { ModelIcon } from '@lobehub/icons';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_URL } from '@/const/url';
+import { DiscoverModelItem, DiscoverProviderItem } from '@/types/discover';
+
+import ModelFeatureTags from '../../../../features/ModelFeatureTags';
+import ShareButton from '../../../features/ShareButton';
+import ChatWithModel from './ChatWithModel';
+
+interface ModelActionsProps extends FlexboxProps {
+  data: DiscoverModelItem;
+  identifier: string;
+  providerData: DiscoverProviderItem[];
+}
+
+const ModelActions = memo<ModelActionsProps>(({ identifier, providerData, data }) => {
+  const { t } = useTranslation('models');
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <ChatWithModel providerData={providerData} providers={data.providers} />
+      <ShareButton
+        meta={{
+          avatar: <ModelIcon model={identifier} size={64} type={'avatar'} />,
+          desc: data.meta.description && t(`${identifier}.description`),
+          tags: (
+            <ModelFeatureTags
+              functionCall={data.meta.functionCall}
+              tokens={data.meta.tokens}
+              vision={data.meta.vision}
+            />
+          ),
+          title: data.meta.title,
+          url: urlJoin(OFFICIAL_URL, '/discover/model', identifier),
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default ModelActions;

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/ChatWithModel.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { ProviderIcon } from '@lobehub/icons';
+import { Icon } from '@lobehub/ui';
+import { Button, Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronDownIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+
+import { DiscoverProviderItem } from '@/types/discover';
+
+const useStyles = createStyles(({ css }) => ({
+  button: css`
+    button {
+      width: 100%;
+    }
+  `,
+}));
+
+const ChatWithModel = memo<{ providerData: DiscoverProviderItem[]; providers?: string[] }>(
+  ({ providerData, providers = [] }) => {
+    const { styles } = useStyles();
+    const { t } = useTranslation('discover');
+    const includeLobeHub = providers?.includes('lobehub');
+    const route = useRouter();
+    const list = providerData.filter((provider) => provider.identifier !== 'lobehub');
+
+    const items = list.map((item) => ({
+      icon: <ProviderIcon provider={item.identifier} size={20} type={'avatar'} />,
+      key: item.identifier,
+      label: (
+        <Link href={urlJoin('/discover/provider', item.identifier)}>
+          {[item.meta.title, t('models.guide')].join(' ')}
+        </Link>
+      ),
+    }));
+
+    const handleLobeHubChat = () => {
+      route.push('/chat');
+    };
+
+    if (includeLobeHub)
+      return (
+        <Dropdown.Button
+          className={styles.button}
+          icon={<Icon icon={ChevronDownIcon} />}
+          menu={{
+            items,
+          }}
+          onClick={handleLobeHubChat}
+          overlayStyle={{ minWidth: 267 }}
+          size={'large'}
+          style={{ flex: 1, width: 'unset' }}
+          type={'primary'}
+        >
+          {t('models.chat')}
+        </Dropdown.Button>
+      );
+
+    if (items.length === 1)
+      return (
+        <Link href={urlJoin('/discover/provider', items[0].key)} style={{ flex: 1 }}>
+          <Button block className={styles.button} size={'large'} type={'primary'}>
+            {t('models.guide')}
+          </Button>
+        </Link>
+      );
+
+    return (
+      <Dropdown
+        menu={{
+          items,
+        }}
+        trigger={['click']}
+      >
+        <Button
+          className={styles.button}
+          size={'large'}
+          style={{ flex: 1, width: 'unset' }}
+          type={'primary'}
+        >
+          {t('models.guide')}
+        </Button>
+      </Dropdown>
+    );
+  },
+);
+
+export default ChatWithModel;

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/Header.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { ModelIcon } from '@lobehub/icons';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverModelItem } from '@/types/discover';
+
+import ModelFeatureTags from '../../../../features/ModelFeatureTags';
+import Back from '../../../features/Back';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  tag: css`
+    color: ${token.colorTextSecondary};
+    background: ${token.colorFillSecondary};
+    border: none;
+  `,
+  time: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block: 0;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 1.2;
+  `,
+}));
+
+interface HeaderProps {
+  data: DiscoverModelItem;
+  identifier: string;
+  mobile?: boolean;
+}
+
+const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
+  const { styles, theme } = useStyles();
+  const { t } = useTranslation(['discover', 'models']);
+
+  return (
+    <Flexbox gap={12} width={'100%'}>
+      {!mobile && <Back href={'/discover/models'} />}
+      <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>
+        <Flexbox align={'center'} gap={16} horizontal justify={'flex-start'}>
+          <ModelIcon model={identifier} size={48} type={'avatar'} />
+          <Flexbox gap={2}>
+            <h1 className={styles.title}>{data.meta.title}</h1>
+            <Flexbox
+              align={'center'}
+              gap={12}
+              horizontal
+              style={{ color: theme.colorTextSecondary }}
+            >
+              <div>{identifier}</div>
+              <time className={styles.time} dateTime={new Date(data.createdAt).toISOString()}>
+                {data.createdAt}
+              </time>
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+        {!mobile && (
+          <Flexbox align={'center'} gap={4} horizontal justify={'flex-end'}>
+            <Link href={'/discover/models'}>
+              <Button className={styles.tag} shape={'round'} size={'small'}>
+                {t('tab.models')}
+              </Button>
+            </Link>
+          </Flexbox>
+        )}
+      </Flexbox>
+      {data.meta.description && <div>{t(`${identifier}.description`, { ns: 'models' })}</div>}
+      <ModelFeatureTags
+        functionCall={data.meta.functionCall}
+        tokens={data.meta.tokens}
+        vision={data.meta.vision}
+      />
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/SuggestionItem.tsx

@@ -0,0 +1,75 @@
+import { ModelIcon } from '@lobehub/icons';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { DiscoverModelItem } from '@/types/discover';
+
+import ModelFeatureTags from '../../../../../features/ModelFeatureTags';
+
+const { Paragraph, Title } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+  `,
+  desc: css`
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  id: css`
+    margin-block-end: 0 !important;
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+  `,
+  token: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+}));
+
+export interface SuggestionItemProps
+  extends Omit<DiscoverModelItem, 'suggestions' | 'socialData' | 'providers'>,
+    FlexboxProps {}
+
+const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier, ...rest }) => {
+  const { title, description, tokens, vision, functionCall } = meta;
+  const { t } = useTranslation('models');
+  const { cx, styles } = useStyles();
+
+  return (
+    <Flexbox className={cx(styles.container, className)} gap={12} key={identifier} {...rest}>
+      <Flexbox align={'center'} gap={12} horizontal width={'100%'}>
+        <ModelIcon model={identifier} size={36} type={'avatar'} />
+        <Flexbox style={{ overflow: 'hidden' }}>
+          <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+            {title}
+          </Title>
+          <Paragraph className={styles.id} ellipsis={{ rows: 1 }}>
+            {identifier}
+          </Paragraph>
+        </Flexbox>
+      </Flexbox>
+      {description && (
+        <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+          {t(`${identifier}.description`)}
+        </Paragraph>
+      )}
+      <ModelFeatureTags functionCall={functionCall} tokens={tokens} vision={vision} />
+    </Flexbox>
+  );
+});
+
+export default SuggestionItem;

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverModelItem } from '@/types/discover';
+
+import Block from '../../../../features/Block';
+import SuggestionItem from './SuggestionItem';
+
+interface InfoSidebarProps extends FlexboxProps {
+  data: DiscoverModelItem;
+  identifier: string;
+  mobile?: boolean;
+}
+
+const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
+  const { t } = useTranslation('discover');
+
+  return (
+    <Flexbox gap={48} style={{ position: 'relative' }} width={'100%'} {...rest}>
+      <Block
+        gap={24}
+        more={t('models.more')}
+        moreLink={urlJoin('/discover/models', data.meta?.category || '')}
+        title={t('models.suggestions')}
+      >
+        {data?.suggestions?.length > 0 ? (
+          data?.suggestions.map((item) => (
+            <InterceptingLink
+              href={urlJoin('/discover/model', item.identifier)}
+              key={item.identifier}
+            >
+              <SuggestionItem {...item} />
+            </InterceptingLink>
+          ))
+        ) : (
+          <Skeleton active paragraph={{ rows: 5 }} title={false} />
+        )}
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default InfoSidebar;

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/ParameterList/ParameterItem.tsx

@@ -0,0 +1,71 @@
+import { Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import Statistic from '../../../../../components/Statistic';
+
+const DEFAULT_DOC_URL = 'https://lobehub.com/docs/usage/agents/model';
+
+export interface ParameterItemProps {
+  defaultValue: string | number;
+  desc: string;
+  docUrl?: string;
+  range?: (string | number)[];
+  type: string;
+}
+
+const formatNum = (num: string | number) => {
+  return typeof num === 'number' ? num.toFixed(2) : num.toUpperCase();
+};
+
+const ParameterItem = memo<ParameterItemProps>(
+  ({ docUrl = DEFAULT_DOC_URL, desc, type, defaultValue, range }) => {
+    const { t } = useTranslation('discover');
+    const theme = useTheme();
+
+    return (
+      <Flexbox align={'flex-start'} gap={16}>
+        <p style={{ color: theme.colorTextSecondary, margin: 0 }}>
+          {desc}{' '}
+          <Link href={docUrl} target={'_blank'}>
+            {t('models.parameterList.docs')}
+          </Link>
+        </p>
+        <Divider dashed style={{ margin: 0 }} />
+        <Flexbox align={'center'} gap={16} horizontal style={{ paddingBottom: 8 }} wrap={'wrap'}>
+          <Statistic
+            gap={4}
+            title={t('models.parameterList.type')}
+            value={<code>{type.toUpperCase()}</code>}
+            valuePlacement={'bottom'}
+            valueStyle={{ fontSize: 14 }}
+            width={100}
+          />
+          <Statistic
+            gap={4}
+            title={t('models.parameterList.defaultValue')}
+            value={formatNum(defaultValue)}
+            valuePlacement={'bottom'}
+            valueStyle={{ fontSize: 14 }}
+            width={100}
+          />
+          {range && (
+            <Statistic
+              gap={4}
+              title={t('models.parameterList.range')}
+              value={range.map((item) => (type === 'float' ? formatNum(item) : item)).join(' ~ ')}
+              valuePlacement={'bottom'}
+              valueStyle={{ fontSize: 14 }}
+              width={100}
+            />
+          )}
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default ParameterItem;