@lobehub/chat 1.44.3 → 1.45.1

package/src/features/ShareModal/ShareJSON/index.tsx

@@ -14,6 +14,7 @@ import { useChatStore } from '@/store/chat';
 import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
 import { exportFile } from '@/utils/client/exportFile';
 
+import { useStyles } from '../style';
 import Preview from './Preview';
 import { generateMessages } from './generateMessages';
 import { FieldType } from './type';
@@ -26,6 +27,7 @@ const DEFAULT_FIELD_VALUE: FieldType = {
 const ShareImage = memo(() => {
   const [fieldValue, setFieldValue] = useState(DEFAULT_FIELD_VALUE);
   const { t } = useTranslation(['chat', 'common']);
+  const { styles } = useStyles();
   const { message } = App.useApp();
 
   const settings: FormItemProps[] = [
@@ -54,45 +56,55 @@ const ShareImage = memo(() => {
   const title = topic?.title || t('shareModal.exportTitle');
 
   const isMobile = useIsMobile();
+
+  const button = (
+    <>
+      <Button
+        block
+        icon={<Icon icon={CopyIcon} />}
+        onClick={async () => {
+          await copyToClipboard(content);
+          message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
+        }}
+        size={isMobile ? undefined : 'large'}
+        type={'primary'}
+      >
+        {t('copy', { ns: 'common' })}
+      </Button>
+      <Button
+        block
+        onClick={() => {
+          exportFile(content, `${title}.json`);
+        }}
+        size={isMobile ? undefined : 'large'}
+        variant={'filled'}
+      >
+        {t('shareModal.downloadFile')}
+      </Button>
+    </>
+  );
+
   return (
-    <Flexbox gap={16} horizontal={!isMobile}>
-      <Preview content={content} />
-      <Flexbox gap={16}>
-        <Form
-          initialValues={DEFAULT_FIELD_VALUE}
-          items={settings}
-          itemsType={'flat'}
-          onValuesChange={(_, v) => setFieldValue(v)}
-          {...FORM_STYLE}
-          itemMinWidth={320}
-        />
-        <Button
-          block
-          icon={<Icon icon={CopyIcon} />}
-          onClick={async () => {
-            await copyToClipboard(content);
-            message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
-          }}
-          size={'large'}
-          style={isMobile ? { bottom: 0, position: 'sticky' } : undefined}
-          type={'primary'}
-        >
-          {t('copy', { ns: 'common' })}
-        </Button>
-        {!isMobile && (
-          <Button
-            block
-            onClick={() => {
-              exportFile(content, `${title}.json`);
-            }}
-            size={'large'}
-            variant={'filled'}
-          >
-            {t('shareModal.downloadFile')}
-          </Button>
-        )}
+    <>
+      <Flexbox className={styles.body} gap={16} horizontal={!isMobile}>
+        <Preview content={content} />
+        <Flexbox className={styles.sidebar} gap={16}>
+          <Form
+            initialValues={DEFAULT_FIELD_VALUE}
+            items={settings}
+            itemsType={'flat'}
+            onValuesChange={(_, v) => setFieldValue(v)}
+            {...FORM_STYLE}
+          />
+          {!isMobile && button}
+        </Flexbox>
       </Flexbox>
-    </Flexbox>
+      {isMobile && (
+        <Flexbox className={styles.footer} gap={8} horizontal>
+          {button}
+        </Flexbox>
+      )}
+    </>
   );
 });
 

package/src/features/ShareModal/ShareText/Preview.tsx

@@ -1,14 +1,17 @@
 import { Markdown } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { useIsMobile } from '@/hooks/useIsMobile';
+
 import { useContainerStyles } from '../style';
 
 const Preview = memo<{ content: string }>(({ content }) => {
   const { styles } = useContainerStyles();
+  const isMobile = useIsMobile();
 
   return (
     <div className={styles.preview} style={{ padding: 12 }}>
-      <Markdown>{content}</Markdown>
+      <Markdown variant={isMobile ? 'chat' : undefined}>{content}</Markdown>
     </div>
   );
 });

package/src/features/ShareModal/ShareText/index.tsx

@@ -14,6 +14,7 @@ import { useChatStore } from '@/store/chat';
 import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
 import { exportFile } from '@/utils/client/exportFile';
 
+import { useStyles } from '../style';
 import Preview from './Preview';
 import { generateMarkdown } from './template';
 import { FieldType } from './type';
@@ -28,7 +29,7 @@ const DEFAULT_FIELD_VALUE: FieldType = {
 const ShareText = memo(() => {
   const [fieldValue, setFieldValue] = useState(DEFAULT_FIELD_VALUE);
   const { t } = useTranslation(['chat', 'common']);
-
+  const { styles } = useStyles();
   const { message } = App.useApp();
   const settings: FormItemProps[] = [
     {
@@ -74,45 +75,55 @@ const ShareText = memo(() => {
   }).replaceAll('\n\n\n', '\n');
 
   const isMobile = useIsMobile();
+
+  const button = (
+    <>
+      <Button
+        block
+        icon={<Icon icon={CopyIcon} />}
+        onClick={async () => {
+          await copyToClipboard(content);
+          message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
+        }}
+        size={isMobile ? undefined : 'large'}
+        type={'primary'}
+      >
+        {t('copy', { ns: 'common' })}
+      </Button>
+      <Button
+        block
+        onClick={() => {
+          exportFile(content, `${title}.md`);
+        }}
+        size={isMobile ? undefined : 'large'}
+        variant={'filled'}
+      >
+        {t('shareModal.downloadFile')}
+      </Button>
+    </>
+  );
+
   return (
-    <Flexbox gap={16} horizontal={!isMobile}>
-      <Preview content={content} />
-      <Flexbox gap={16}>
-        <Form
-          initialValues={DEFAULT_FIELD_VALUE}
-          items={settings}
-          itemsType={'flat'}
-          onValuesChange={(_, v) => setFieldValue(v)}
-          {...FORM_STYLE}
-          itemMinWidth={320}
-        />
-        <Button
-          block
-          icon={<Icon icon={CopyIcon} />}
-          onClick={async () => {
-            await copyToClipboard(content);
-            message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
-          }}
-          size={'large'}
-          style={isMobile ? { bottom: 0, position: 'sticky' } : undefined}
-          type={'primary'}
-        >
-          {t('copy', { ns: 'common' })}
-        </Button>
-        {!isMobile && (
-          <Button
-            block
-            onClick={() => {
-              exportFile(content, `${title}.md`);
-            }}
-            size={'large'}
-            variant={'filled'}
-          >
-            {t('shareModal.downloadFile')}
-          </Button>
-        )}
+    <>
+      <Flexbox className={styles.body} gap={16} horizontal={!isMobile}>
+        <Preview content={content} />
+        <Flexbox className={styles.sidebar} gap={16}>
+          <Form
+            initialValues={DEFAULT_FIELD_VALUE}
+            items={settings}
+            itemsType={'flat'}
+            onValuesChange={(_, v) => setFieldValue(v)}
+            {...FORM_STYLE}
+          />
+          {!isMobile && button}
+        </Flexbox>
       </Flexbox>
-    </Flexbox>
+      {isMobile && (
+        <Flexbox className={styles.footer} gap={8} horizontal>
+          {button}
+        </Flexbox>
+      )}
+    </>
   );
 });
 

package/src/features/ShareModal/index.tsx

@@ -58,7 +58,7 @@ const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
           style={{ width: '100%' }}
           value={tab}
         />
-        {tab === Tab.Screenshot && <ShareImage />}
+        {tab === Tab.Screenshot && <ShareImage mobile={isMobile} />}
         {tab === Tab.Text && <ShareText />}
         {tab === Tab.JSON && <ShareJSON />}
       </Flexbox>

package/src/features/ShareModal/style.ts

@@ -28,3 +28,33 @@ export const useContainerStyles = createStyles(({ css, token, stylish, cx, respo
     `,
   ),
 }));
+
+export const useStyles = createStyles(({ responsive, token, css }) => ({
+  body: css`
+    ${responsive.mobile} {
+      padding-block-end: 68px;
+    }
+  `,
+  footer: css`
+    ${responsive.mobile} {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline: 0;
+
+      width: 100%;
+      margin: 0;
+      padding: 16px;
+
+      background: ${token.colorBgContainer};
+    }
+  `,
+  sidebar: css`
+    flex: none;
+    width: max(240px, 25%);
+    ${responsive.mobile} {
+      flex: 1;
+      width: unset;
+      margin-inline: -16px;
+    }
+  `,
+}));

package/src/utils/colorUtils.ts

@@ -7,7 +7,7 @@ export const convertAlphaToSolid = (foreground: string, background: string): str
   const alpha = fgColor.alpha();
   const alphaComplement = 1 - alpha;
 
-  const mixedColor = [
+  const mixedColor: [number, number, number] = [
     fgColor.get('rgb.r') * alpha + bgColor.get('rgb.r') * alphaComplement,
     fgColor.get('rgb.g') * alpha + bgColor.get('rgb.g') * alphaComplement,
     fgColor.get('rgb.b') * alpha + bgColor.get('rgb.b') * alphaComplement,

package/src/components/BrowserIcon/components/Brave.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { SVGComponent } from '../types';
-
-export default ({ ...props }: SVGComponent) => {
-  return (
-    <svg viewBox="0 0 112.4 131.9" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <defs>
-        <linearGradient
-          gradientTransform="matrix(112.31 0 0 -131.86 53355.92 89180.8)"
-          gradientUnits="userSpaceOnUse"
-          id="prefix__a"
-          x1={-475.07}
-          x2={-474.07}
-          y1={675.83}
-          y2={675.83}
-        >
-          <stop offset={0} stopColor="#f50" />
-          <stop offset={0.41} stopColor="#f50" />
-          <stop offset={0.58} stopColor="#ff2000" />
-          <stop offset={1} stopColor="#ff2000" />
-        </linearGradient>
-        <linearGradient
-          gradientTransform="matrix(93.22 0 0 -23.76 44217.1 15672.73)"
-          gradientUnits="userSpaceOnUse"
-          id="prefix__b"
-          x1={-474.21}
-          x2={-473.23}
-          y1={659.13}
-          y2={659.13}
-        >
-          <stop offset={0} stopColor="#ff452a" />
-          <stop offset={1} stopColor="#ff2000" />
-        </linearGradient>
-      </defs>
-      <g data-name="Calque 2">
-        <g data-name="Layer 1">
-          <g data-name="build-icons/Stable">
-            <path
-              d="M108.4 31.6l3.1-7.6s-3.9-4.2-8.7-9-14.9-2-14.9-2L76.4 0H35.9L24.4 13.1s-10.1-2.8-14.9 2-8.7 9-8.7 9l3.1 7.6L0 42.9s11.6 43.8 12.9 49.2c2.7 10.5 4.5 14.6 12.1 20s21.3 14.6 23.6 16 5.1 3.8 7.6 3.8 5.3-2.4 7.6-3.8 16-10.7 23.6-16 9.4-9.4 12.1-20c1.4-5.4 12.9-49.2 12.9-49.2z"
-              fill="url(#prefix__a)"
-            />
-            <path
-              d="M84.7 21.4s14.8 17.9 14.8 21.8-1.9 4.8-3.8 6.8-10.1 10.7-11.1 11.8-3.2 2.8-2 5.9 3.2 6.9 1.1 10.9-5.7 6.6-8 6.1-7.8-3.3-9.8-4.6-8.3-6.5-8.3-8.5 6.6-5.6 7.8-6.4 6.7-4 6.8-5.2.1-1.6-1.6-4.7-4.6-7.2-4.1-9.9 5.2-4.1 8.6-5.4 9.9-3.7 10.7-4.1.6-.7-1.9-1-9.4-1.2-12.6-.3-8.5 2.2-9 2.9-.8.7-.4 3.2 2.8 14.2 3 16.3.7 3.5-1.6 4a56.78 56.78 0 01-7.3 1.4 56.78 56.78 0 01-7.3-1.4c-2.2-.5-1.8-1.9-1.6-4s2.5-13.8 3-16.3.1-2.5-.4-3.2-5.8-2-9-2.9-10.1 0-12.6.3-2.7.6-1.9 1 7.3 2.8 10.7 4.1 8.1 2.7 8.6 5.4-2.4 6.8-4.1 9.9-1.7 3.4-1.6 4.7 5.6 4.4 6.8 5.2 7.8 4.4 7.8 6.4-6.3 7.2-8.3 8.5-7.4 4.1-9.8 4.6-5.9-2.2-8-6.1-.2-7.8 1.1-10.9-.9-4.7-2-5.9c-.8-1.2-8.9-9.9-10.8-11.8s-3.7-3-3.7-6.8 14.8-21.8 14.8-21.8 12.5 2.4 14.2 2.4 5.3-1.4 8.7-2.5a20.16 20.16 0 015.6-1.1 20.16 20.16 0 015.6 1.1c3.4 1.1 7 2.5 8.7 2.5s14.2-2.4 14.2-2.4zM73.6 89.9c.9.6.4 1.7-.5 2.2S61 101.4 60 102.4s-2.7 2.5-3.8 2.5-2.7-1.6-3.8-2.5-12.3-9.7-13.1-10.3-1.4-1.7-.5-2.2 3.8-2 7.7-4.1 8.9-3.8 9.7-3.8 5.7 1.7 9.7 3.8 6.7 3.6 7.7 4.1z"
-              fill="#fff"
-            />
-            <path
-              d="M87.9 13.1L76.4 0H35.9L24.4 13.1s-10.1-2.8-14.9 2c0 0 13.5-1.2 18.1 6.3 0 0 12.5 2.4 14.2 2.4s5.3-1.4 8.7-2.5a20.16 20.16 0 015.6-1.1 20.16 20.16 0 015.6 1.1c3.4 1.1 7 2.5 8.7 2.5s14.2-2.4 14.2-2.4c4.6-7.5 18.1-6.3 18.1-6.3-4.7-4.8-14.8-2-14.8-2"
-              fill="url(#prefix__b)"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-};

package/src/components/BrowserIcon/components/Chrome.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { SVGComponent } from '../types';
-
-export default ({ ...props }: SVGComponent) => {
-  return (
-    <svg aria-label="Chrome" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M256 140h228a256 256 0 01-240 371.7" fill="#fc4" />
-      <path d="M357 314L244 511.7A256 256 0 0140 118" fill="#0f9d58" />
-      <path d="M256 140h228a256 256 1 00-444-22l115 196" fill="#db4437" />
-      <circle cx={256} cy={256} fill="#4285f4" r={105} stroke="#f1f1f1" strokeWidth={24} />
-    </svg>
-  );
-};

package/src/components/BrowserIcon/components/Chromium.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { SVGComponent } from '../types';
-
-export default ({ ...props }: SVGComponent) => {
-  return (
-    <svg aria-label="Chromium" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M256 140h228a256 256 0 01-240 371.7" fill="#a2c2fa" />
-      <path d="M357 314L244 511.7A256 256 0 0140 118" fill="#6199f6" />
-      <path d="M256 140h228a256 256 1 00-444-22l115 196" fill="#396bd7" />
-      <circle cx={256} cy={256} fill="#4687f4" r={105} stroke="#f1f1f1" strokeWidth={24} />
-    </svg>
-  );
-};

package/src/components/BrowserIcon/components/Edge.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { SVGComponent } from '../types';
-
-export default ({ ...props }: SVGComponent) => {
-  return (
-    <svg aria-label="Edge" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <rect fill="#fff" height={512} rx="15%" width={512} />
-      <radialGradient cx={0.6} cy={0.5} id="prefix__a">
-        <stop offset={0.8} stopColor="#148" />
-        <stop offset={1} stopColor="#137" />
-      </radialGradient>
-      <radialGradient cx={0.5} cy={0.6} fx={0.2} fy={0.6} id="prefix__b">
-        <stop offset={0.8} stopColor="#38c" />
-        <stop offset={1} stopColor="#269" />
-      </radialGradient>
-      <linearGradient id="prefix__c" y1={0.5} y2={1}>
-        <stop offset={0.1} stopColor="#5ad" />
-        <stop offset={0.6} stopColor="#5c8" />
-        <stop offset={0.8} stopColor="#7d5" />
-      </linearGradient>
-      <path
-        d="M439 374c-50 77-131 98-163 96-191-9-162-262-47-261-82 52 30 224 195 157 17-12 20 3 15 8"
-        fill="url(#prefix__a)"
-      />
-      <path
-        d="M311 255c18-82-31-135-129-135S38 212 38 259c0 124 125 253 287 203-134 39-214-116-146-210 46-66 123-68 132 3M411 99h1"
-        fill="url(#prefix__b)"
-      />
-      <path
-        d="M39 253C51-15 419-30 472 202c14 107-86 149-166 115-42-26 26-20-3-99-48-112-251-103-264 35"
-        fill="url(#prefix__c)"
-      />
-    </svg>
-  );
-};

package/src/components/BrowserIcon/components/Firefox.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { SVGComponent } from '../types';
-
-export default ({ ...props }: SVGComponent) => {
-  return (
-    <svg aria-label="Firefox" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <linearGradient id="prefix__a" x1={0.7} x2={0.3} y2={0.8}>
-        <stop offset={0.3} stopColor="#fd5" />
-        <stop offset={0.6} stopColor="#f85" />
-        <stop offset={1} stopColor="#d06" />
-      </linearGradient>
-      <radialGradient cx={0.4} cy={0.7} id="prefix__b">
-        <stop offset={0.4} stopColor="#74d" />
-        <stop offset={1} stopColor="#a2d" />
-      </radialGradient>
-      <linearGradient id="prefix__c" x1={0.8} x2={0.4} y1={0.2} y2={0.8}>
-        <stop offset={0.2} stopColor="#fd5" />
-        <stop offset={1} stopColor="#f33" />
-      </linearGradient>
-      <g transform="scale(4)">
-        <path
-          d="M48 49s-3-9-1-16c-9 2-33 35-33 35a51 48 0 1087-32s5 9 5 15c-3-9-20-25-26-37-24 13-16 39-16 39"
-          fill="url(#prefix__a)"
-        />
-        <circle cx={64} cy={67} fill="url(#prefix__b)" r={26} />
-        <path
-          d="M21 45l43 12c-6 11-16 3-23 14a22 22 0 1034-20s33 3 17 42H28m36 25h1"
-          fill="url(#prefix__a)"
-        />
-        <path
-          d="M35 43c16 0 12 7 29 14-18 6-23-9-38 0 5 9 12 8 12 8 1 43 72 29 67-17a50 46.6 47 01-88 33c-9-18-1-40 16-51"
-          fill="url(#prefix__c)"
-        />
-      </g>
-    </svg>
-  );
-};

package/src/components/BrowserIcon/components/Opera.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { SVGComponent } from '../types';
-
-export default ({ ...props }: SVGComponent) => {
-  return (
-    <svg aria-label="Opera" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <rect fill="#fff" height={512} rx="15%" width={512} />
-      <path
-        d="M185.2 377.2c-23.7-28-39.1-69.6-40.2-116.1v-10.2c1-46.5 16.5-88 40.2-116 30.9-40.1 76.7-65.5 128-65.5 31.4 0 60.9 9.6 86 26.3A214.2 214.2 0 00256.9 41h-.8a215 215 0 10143.3 375.3 155.1 155.1 0 01-86.2 26.3c-51.2 0-97-25.4-127.9-65.4"
-        fill="#ff1b2d"
-      />
-      <path
-        d="M185.2 134.8c19.7-23.2 45.2-37.3 73-37.3 62.7 0 113.4 71 113.4 158.5s-50.7 158.5-113.3 158.5c-27.9 0-53.3-14-73-37.3 30.8 40 76.6 65.4 127.8 65.4 31.5 0 61-9.6 86.2-26.3 44-39.4 71.7-96.6 71.7-160.3 0-63.7-27.7-121-71.7-160.3A155.1 155.1 0 00313 69.4c-51.2 0-97 25.4-127.9 65.4"
-        fill="#a70014"
-      />
-    </svg>
-  );
-};

package/src/components/BrowserIcon/components/Safari.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { SVGComponent } from '../types';
-
-export default ({ ...props }: SVGComponent) => {
-  return (
-    <svg aria-label="Safari" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <rect fill="#fff" height={512} rx="15%" width={512} />
-      <radialGradient id="prefix__a">
-        <stop offset={0} stopColor="#0bd" />
-        <stop offset={1} stopColor="#17d" />
-      </radialGradient>
-      <g fill="none" stroke="#eee" transform="matrix(4 0 0 4 256 256)">
-        <circle fill="url(#prefix__a)" r={52.5} strokeWidth={5} />
-        <circle r={45} strokeDasharray="1.25 8.175" strokeDashoffset={0.5} strokeWidth={5.5} />
-        <circle r={42.5} strokeDasharray="1.25 7.65" strokeDashoffset={5} strokeWidth={10} />
-      </g>
-      <path d="M280 280l-48-48-116 156" fill="#eee" />
-      <path d="M280 280l-48-48 164-112" fill="#f55" />
-      <path d="M116 388l28-20-12 20 148-108 112-140-16 8 16-24" opacity={0.3} />
-    </svg>
-  );
-};

package/src/components/BrowserIcon/components/Samsung.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { SVGComponent } from '../types';
-
-export default ({ ...props }: SVGComponent) => {
-  return (
-    <svg
-      aria-label="Samsung Internet"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <rect fill="#706CF5" height={512} rx="15%" width={512} />
-      <g fill="none" stroke="#fff" strokeWidth={26}>
-        <circle cx={256} cy={256} r={179} />
-        <path d="M46 221a228 80 15 10441 118" stroke="#706CF5" />
-        <path d="M105 160a228 80 15 10331 87" />
-      </g>
-    </svg>
-  );
-};