@lobehub/chat 1.51.2 → 1.51.3

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/rehypePlugin.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+
+import rehypePlugin from './rehypePlugin';
+
+describe('rehypePlugin', () => {
+  it('should transform <lobeArtifact> tags with attributes', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [
+            {
+              type: 'raw',
+              value: '<lobeArtifact identifier="test-id" type="image/svg+xml" title="Test Title">',
+            },
+            { type: 'text', value: 'Artifact content' },
+            { type: 'raw', value: '</lobeArtifact>' },
+          ],
+        },
+      ],
+    };
+
+    const expectedTree = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'lobeArtifact',
+          properties: {
+            identifier: 'test-id',
+            type: 'image/svg+xml',
+            title: 'Test Title',
+          },
+          children: [{ type: 'text', value: 'Artifact content' }],
+        },
+      ],
+    };
+
+    const plugin = rehypePlugin();
+    plugin(tree);
+
+    expect(tree).toEqual(expectedTree);
+  });
+
+  it('should handle mixed content with thinking tags and plain text', () => {
+    const tree = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [{ type: 'text', value: 'Initial plain text paragraph' }],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [
+            { type: 'raw', value: '<lobeThinking>' },
+            { type: 'text', value: 'AI is thinking...' },
+            { type: 'raw', value: '</lobeThinking>' },
+          ],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [
+            {
+              type: 'raw',
+              value: '<lobeArtifact identifier="test-id" type="image/svg+xml" title="Test Title">',
+            },
+            { type: 'text', value: 'Artifact content' },
+            { type: 'raw', value: '</lobeArtifact>' },
+          ],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [{ type: 'text', value: 'Final plain text paragraph' }],
+        },
+      ],
+    };
+
+    const expectedTree = {
+      type: 'root',
+      children: [
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [{ type: 'text', value: 'Initial plain text paragraph' }],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [
+            { type: 'raw', value: '<lobeThinking>' },
+            { type: 'text', value: 'AI is thinking...' },
+            { type: 'raw', value: '</lobeThinking>' },
+          ],
+        },
+        {
+          type: 'element',
+          tagName: 'lobeArtifact',
+          properties: {
+            identifier: 'test-id',
+            type: 'image/svg+xml',
+            title: 'Test Title',
+          },
+          children: [{ type: 'text', value: 'Artifact content' }],
+        },
+        {
+          type: 'element',
+          tagName: 'p',
+          children: [{ type: 'text', value: 'Final plain text paragraph' }],
+        },
+      ],
+    };
+
+    const plugin = rehypePlugin();
+    plugin(tree);
+
+    expect(tree).toEqual(expectedTree);
+  });
+});

package/src/features/DevPanel/CacheViewer/DataTable/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { RefreshCw } from 'lucide-react';
+import { memo } from 'react';
+
+import Header from '../../features/Header';
+import Table from '../../features/Table';
+import { useCachePanelContext } from '../cacheProvider';
+
+const DataTable = memo(() => {
+  const { entries, isLoading, refreshData } = useCachePanelContext();
+  return (
+    <>
+      <Header
+        actions={[
+          {
+            icon: RefreshCw,
+            onClick: () => refreshData(),
+            title: 'Refresh',
+          },
+        ]}
+        title="Cache Entries"
+      />
+      <Table
+        columns={['url', 'headers.content-type', 'body', 'kind', 'tags', 'revalidate', 'timestamp']}
+        dataSource={entries}
+        loading={isLoading}
+      />
+    </>
+  );
+});
+
+export default DataTable;

package/src/features/DevPanel/CacheViewer/cacheProvider.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useTransition,
+} from 'react';
+
+import { getCacheFiles } from './getCacheEntries';
+import type { NextCacheFileData } from './schema';
+
+interface CachePanelContextProps {
+  entries: NextCacheFileData[];
+  isLoading: boolean;
+  refreshData: () => void;
+  setEntries: (value: NextCacheFileData[]) => void;
+}
+
+const CachePanelContext = createContext<CachePanelContextProps>({
+  entries: [],
+  isLoading: false,
+  refreshData: () => {},
+  setEntries: () => {},
+});
+
+export const useCachePanelContext = () => useContext(CachePanelContext);
+
+export const CachePanelContextProvider = (
+  props: PropsWithChildren<{
+    entries: NextCacheFileData[];
+  }>,
+) => {
+  const [isLoading, startTransition] = useTransition();
+  const [entries, setEntries] = useState(props.entries);
+  const pathname = usePathname();
+
+  const refreshData = () => {
+    startTransition(async () => {
+      const files = await getCacheFiles();
+      setEntries(files ?? []);
+    });
+  };
+
+  useEffect(() => {
+    refreshData();
+  }, [pathname]);
+
+  return (
+    <CachePanelContext.Provider
+      value={{
+        entries,
+        isLoading,
+        refreshData,
+        setEntries,
+      }}
+    >
+      {props.children}
+    </CachePanelContext.Provider>
+  );
+};

package/src/features/DevPanel/CacheViewer/getCacheEntries.ts

@@ -0,0 +1,52 @@
+'use server';
+
+import { existsSync, promises } from 'node:fs';
+import pMap from 'p-map';
+import { ZodError } from 'zod';
+
+import { type NextCacheFileData, nextCacheFileSchema } from './schema';
+
+const cachePath = '.next/cache/fetch-cache';
+
+export const getCacheFiles = async (): Promise<NextCacheFileData[]> => {
+  if (!existsSync(cachePath)) {
+    return [];
+  }
+  const files = await promises.readdir(cachePath);
+  let result: NextCacheFileData[] = (await pMap(files, async (file) => {
+    // ignore tags-manifest file
+    if (/manifest/.test(file)) return false;
+    try {
+      const fileContent = await promises.readFile(`${cachePath}/${file}`).catch((err) => {
+        throw new Error(`Error reading file ${file}`, {
+          cause: err,
+        });
+      });
+
+      const fileStats = await promises.stat(`${cachePath}/${file}`).catch((err) => {
+        throw new Error(`Error reading file ${file}`, {
+          cause: err,
+        });
+      });
+
+      const jsonData = JSON.parse(fileContent.toString());
+
+      return nextCacheFileSchema.parse({
+        ...jsonData,
+        id: file,
+        timestamp: new Date(fileStats.birthtime),
+      });
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const issues = error.issues;
+        console.error(`File ${file} do not match the schema`, issues);
+      }
+      console.error(`Error parsing ${file}`);
+      return false;
+    }
+  })) as NextCacheFileData[];
+
+  result = result.filter(Boolean) as NextCacheFileData[];
+
+  return result.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+};

package/src/features/DevPanel/CacheViewer/index.tsx

@@ -0,0 +1,25 @@
+import { Empty } from 'antd';
+import { Center } from 'react-layout-kit';
+
+import DataTable from './DataTable';
+import { CachePanelContextProvider } from './cacheProvider';
+import { getCacheFiles } from './getCacheEntries';
+
+const CacheViewer = async () => {
+  const files = await getCacheFiles();
+
+  if (!files || files.length === 0)
+    return (
+      <Center height={'80%'}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+
+  return (
+    <CachePanelContextProvider entries={files}>
+      <DataTable />
+    </CachePanelContextProvider>
+  );
+};
+
+export default CacheViewer;

package/src/features/DevPanel/CacheViewer/schema.ts

@@ -0,0 +1,49 @@
+import { z } from 'zod';
+
+const unstableCacheFileSchema = z.object({
+  data: z.object({
+    body: z.string(),
+    headers: z.object({}).transform(() => null),
+    status: z.number(),
+    url: z.literal(''),
+  }),
+  kind: z.union([z.literal('FETCH'), z.unknown()]),
+  revalidate: z.number().optional(),
+  tags: z.array(z.string()).optional().default([]),
+});
+
+const fetchCacheFileSchema = z.object({
+  data: z.object({
+    body: z.string(),
+    headers: z.record(z.string(), z.string()),
+    status: z.number(),
+    url: z.string().url(),
+  }),
+  id: z.string(),
+  kind: z.union([z.literal('FETCH'), z.unknown()]),
+  revalidate: z.number().optional(),
+  tags: z.array(z.string()).optional().default([]),
+});
+
+const atou = (str: string, type: string) => {
+  if (type.startsWith('image/')) return `data:${type};base64,${str}`;
+  return Buffer.from(str, 'base64').toString();
+};
+export const nextCacheFileSchema = z
+  .union([unstableCacheFileSchema, fetchCacheFileSchema])
+  .transform((item) => {
+    const { data, ...cacheEntry } = item;
+    const body =
+      data.url !== ''
+        ? atou(data.body, data.headers ? data.headers['content-type'] : '')
+        : data.body;
+    return {
+      ...cacheEntry,
+      ...data,
+      body,
+      timestamp: data.headers?.date ? new Date(data.headers?.date) : new Date(),
+      url: data.url === '' ? 'unstable_cache' : data.url,
+    };
+  });
+
+export type NextCacheFileData = z.infer<typeof nextCacheFileSchema>;

package/src/features/DevPanel/FeatureFlagViewer/Form.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Form, Highlighter } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { createStyles } from 'antd-style';
+import { snakeCase } from 'lodash-es';
+import { ListRestartIcon } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DEFAULT_FEATURE_FLAGS } from '@/config/featureFlags';
+
+import Header from '../features/Header';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  container: css`
+    * {
+      font-family: ${token.fontFamilyCode};
+      font-size: 12px;
+    }
+    .${prefixCls}-form-item {
+      padding-block: 4px !important;
+    }
+  `,
+}));
+
+const FeatureFlagForm = memo<{ flags: any }>(({ flags }) => {
+  const { styles } = useStyles();
+  const [data, setData] = useState(flags);
+  const [form] = Form.useForm();
+
+  const output = useMemo(
+    () =>
+      Object.entries(data).map(([key, value]) => {
+        const flag = snakeCase(key);
+        // @ts-ignore
+        if (DEFAULT_FEATURE_FLAGS[flag] === value) return false;
+        if (value === true) return `+${flag}`;
+        return `-${flag}`;
+      }),
+    [data],
+  );
+
+  return (
+    <>
+      <Header
+        actions={[
+          {
+            icon: ListRestartIcon,
+            onClick: () => {
+              form.resetFields();
+              setData(flags);
+            },
+            title: 'Reset',
+          },
+        ]}
+        title={'Feature Flag Env'}
+      />
+      <Flexbox
+        className={styles.container}
+        height={'100%'}
+        paddingInline={16}
+        style={{ overflow: 'auto', position: 'relative' }}
+        width={'100%'}
+      >
+        <Form
+          form={form}
+          initialValues={flags}
+          itemMinWidth={'max(75%,240px)'}
+          items={Object.keys(flags).map((key) => {
+            return {
+              children: <Switch size={'small'} />,
+              label: snakeCase(key),
+              minWidth: undefined,
+              name: key,
+              valuePropName: 'checked',
+            };
+          })}
+          itemsType={'flat'}
+          onValuesChange={(_, v) => setData(v)}
+          variant={'pure'}
+        />
+      </Flexbox>
+      <Highlighter
+        language={'env'}
+        style={{ flex: 'none', fontSize: 12 }}
+        wrap
+      >{`FEATURE_FLAGS="${output.filter(Boolean).join(',')}"`}</Highlighter>
+    </>
+  );
+});
+
+export default FeatureFlagForm;

package/src/features/DevPanel/FeatureFlagViewer/index.tsx

@@ -0,0 +1,11 @@
+import { getServerFeatureFlagsValue } from '@/config/featureFlags';
+
+import FeatureFlagForm from './Form';
+
+const FeatureFlagViewer = () => {
+  const serverFeatureFlags = getServerFeatureFlagsValue();
+
+  return <FeatureFlagForm flags={serverFeatureFlags} />;
+};
+
+export default FeatureFlagViewer;

package/src/features/DevPanel/MetadataViewer/Ld.tsx

@@ -0,0 +1,25 @@
+import { Highlighter } from '@lobehub/ui';
+import { Empty } from 'antd';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { useLd } from './useHead';
+
+const Ld = memo(() => {
+  const ld = useLd();
+
+  if (!ld)
+    return (
+      <Center height={'80%'}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Center>
+    );
+
+  return (
+    <Highlighter language="json" type={'pure'}>
+      {JSON.stringify(JSON.parse(ld), null, 2)}
+    </Highlighter>
+  );
+});
+
+export default Ld;

package/src/features/DevPanel/MetadataViewer/MetaData.tsx

@@ -0,0 +1,30 @@
+import { Form } from '@lobehub/ui';
+import { Input } from 'antd';
+import { memo } from 'react';
+
+import { useHead, useTitle } from './useHead';
+
+const MetaData = memo(() => {
+  const title = useTitle();
+  const description = useHead('name', 'description');
+
+  return (
+    <Form
+      itemMinWidth={'max(75%,240px)'}
+      items={[
+        {
+          children: <Input value={title} variant={'filled'} />,
+          label: `Title (${title.length})`,
+        },
+        {
+          children: <Input.TextArea rows={2} value={description} variant={'filled'} />,
+          label: `Description (${description.length})`,
+        },
+      ]}
+      itemsType={'flat'}
+      variant={'pure'}
+    />
+  );
+});
+
+export default MetaData;

package/src/features/DevPanel/MetadataViewer/Og.tsx

@@ -0,0 +1,75 @@
+import { Form } from '@lobehub/ui';
+import { Input } from 'antd';
+import Image from 'next/image';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useHead } from './useHead';
+
+const MetaData = memo(() => {
+  const ogTitle = useHead('property', 'og:title');
+  const ogDescription = useHead('property', 'og:description');
+  const ogImage = useHead('property', 'og:image');
+
+  return (
+    <Form
+      itemMinWidth={'max(75%,240px)'}
+      items={[
+        {
+          children: <Input value={ogTitle} variant={'filled'} />,
+          label: `OG Title (${ogTitle.length})`,
+        },
+        {
+          children: <Input.TextArea rows={2} value={ogDescription} variant={'filled'} />,
+          label: `OG Description (${ogDescription.length})`,
+        },
+        {
+          children: (
+            <Flexbox
+              height={186}
+              style={{
+                background: 'rgba(0, 0, 0, .5)',
+                borderRadius: 14,
+                overflow: 'hidden',
+                position: 'relative',
+              }}
+              width={358}
+            >
+              <div
+                style={{
+                  background: 'rgba(0, 0, 0, .5)',
+                  borderRadius: 4,
+                  bottom: 10,
+                  left: 10,
+                  lineHeight: 1.3,
+                  padding: '2px 6px',
+                  position: 'absolute',
+                  zIndex: 10,
+                }}
+              >
+                lobehub.com
+              </div>
+              <Image
+                alt={'og'}
+                fill
+                src={ogImage}
+                style={{ objectFit: 'cover' }}
+                unoptimized={true}
+              />
+            </Flexbox>
+          ),
+          label: 'Og Image',
+          minWidth: undefined,
+        },
+        {
+          children: <Input value={ogImage} variant={'filled'} />,
+          label: 'Og Image Url',
+        },
+      ]}
+      itemsType={'flat'}
+      variant={'pure'}
+    />
+  );
+});
+
+export default MetaData;

package/src/features/DevPanel/MetadataViewer/index.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { TabsNav } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from '../features/Header';
+import Ld from './Ld';
+import MetaData from './MetaData';
+import Og from './Og';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  container: css`
+    * {
+      font-size: 12px;
+    }
+    .${prefixCls}-form-item {
+      padding-block: 8px;
+    }
+  `,
+}));
+
+enum Tab {
+  Ld = 'ld',
+  Meta = 'meta',
+  Og = 'og',
+}
+
+const MetadataViewer = memo(() => {
+  const { styles } = useStyles();
+  const [active, setActive] = useState<Tab>(Tab.Og);
+  return (
+    <Flexbox
+      className={styles.container}
+      height={'100%'}
+      style={{ overflow: 'hidden', position: 'relative' }}
+      width={'100%'}
+    >
+      <Header
+        style={{ paddingInlineStart: 0 }}
+        title={
+          <TabsNav
+            activeKey={active}
+            items={[
+              {
+                key: Tab.Og,
+                label: 'OG',
+              },
+              {
+                key: Tab.Meta,
+                label: 'MetaData',
+              },
+              {
+                key: Tab.Ld,
+                label: 'StructuredData',
+              },
+            ]}
+            onChange={(v) => setActive(v as Tab)}
+            style={{ margin: 16 }}
+            variant={'compact'}
+          />
+        }
+      />
+      <Flexbox
+        flex={1}
+        height={'100%'}
+        paddingInline={16}
+        style={{ overflow: 'auto', paddingBottom: 16, position: 'relative' }}
+        width={'100%'}
+      >
+        {active === Tab.Og && <Og />}
+        {active === Tab.Meta && <MetaData />}
+        {active === Tab.Ld && <Ld />}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default MetadataViewer;

package/src/features/DevPanel/MetadataViewer/useHead.ts

@@ -0,0 +1,16 @@
+import { isOnServerSide } from '@/utils/env';
+
+export const useHead = (prop: string, name: string) => {
+  if (isOnServerSide) return '';
+  return document.querySelector(`meta[${prop}='${name}']`)?.getAttribute('content') || '';
+};
+
+export const useTitle = () => {
+  if (isOnServerSide) return '';
+  return document.querySelector(`title`)?.innerHTML || '';
+};
+
+export const useLd = () => {
+  if (isOnServerSide) return '';
+  return document.querySelector(`script[type='application/ld+json']`)?.innerHTML || '';
+};