@lobehub/chat 1.51.1 → 1.51.3

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 || '';
+};

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

@@ -1,42 +1,19 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Empty } from 'antd';
 import { createStyles } from 'antd-style';
 import { Download, Filter, RefreshCw } from 'lucide-react';
 import React from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
 import { mutate } from 'swr';
 
-import { FETCH_TABLE_DATA_KEY } from '../usePgTable';
-import Table from './Table';
+import Header from '../../features/Header';
+import Table from '../../features/Table';
+import { FETCH_TABLE_DATA_KEY, usePgTable, useTableColumns } from '../usePgTable';
 
 const useStyles = createStyles(({ token, css }) => ({
   dataPanel: css`
     overflow: hidden;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-
-    height: 100%;
-
     background: ${token.colorBgContainer};
   `,
-  toolbar: css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    padding-block: 12px;
-    padding-inline: 16px;
-    border-block-end: 1px solid ${token.colorBorderSecondary};
-  `,
-  toolbarButtons: css`
-    display: flex;
-    gap: 4px;
-  `,
-  toolbarTitle: css`
-    font-size: ${token.fontSizeLG}px;
-    font-weight: ${token.fontWeightStrong};
-    color: ${token.colorText};
-  `,
 }));
 
 interface DataTableProps {
@@ -46,29 +23,42 @@ interface DataTableProps {
 const DataTable = ({ tableName }: DataTableProps) => {
   const { styles } = useStyles();
 
+  const tableColumns = useTableColumns(tableName);
+  const tableData = usePgTable(tableName);
+  const columns = tableColumns.data?.map((t) => t.name) || [];
+  const isLoading = tableColumns.isLoading || tableData.isLoading;
+  const dataSource = tableData.data?.data || [];
+
   return (
-    <div className={styles.dataPanel}>
-      {/* Toolbar */}
-      <div className={styles.toolbar}>
-        <div className={styles.toolbarTitle}>{tableName || 'Select a table'}</div>
-        <div className={styles.toolbarButtons}>
-          <Button color={'default'} icon={<Icon icon={Filter} />} variant={'filled'}>
-            Filter
-          </Button>
-          <ActionIcon icon={Download} title={'Export'} />
-          <ActionIcon
-            icon={RefreshCw}
-            onClick={async () => {
+    <Flexbox className={styles.dataPanel} flex={1} height={'100%'}>
+      <Header
+        actions={[
+          {
+            icon: Filter,
+            title: 'Filter',
+          },
+          {
+            icon: Download,
+            title: 'Export',
+          },
+          {
+            icon: RefreshCw,
+            onClick: async () => {
               await mutate(FETCH_TABLE_DATA_KEY(tableName));
-            }}
-            title={'Refresh'}
-          />
-        </div>
-      </div>
-
-      {/* Table */}
-      <Table tableName={tableName} />
-    </div>
+            },
+            title: 'Refresh',
+          },
+        ]}
+        title={tableName || 'Select a table'}
+      />
+      {tableName ? (
+        <Table columns={columns} dataSource={dataSource} loading={isLoading} />
+      ) : (
+        <Center height={'80%'}>
+          <Empty description={'Select a table to view data'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        </Center>
+      )}
+    </Flexbox>
   );
 };
 

package/src/features/DevPanel/PostgresViewer/{TableColumns.tsx → SchemaSidebar/Columns.tsx}

@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import React from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useTableColumns } from './usePgTable';
+import { useTableColumns } from '../usePgTable';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
@@ -26,7 +26,7 @@ interface TableColumnsProps {
   tableName: string;
 }
 
-const TableColumns = ({ tableName }: TableColumnsProps) => {
+const Columns = ({ tableName }: TableColumnsProps) => {
   const { styles } = useStyles();
 
   const { data, isLoading } = useTableColumns(tableName);
@@ -34,7 +34,9 @@ const TableColumns = ({ tableName }: TableColumnsProps) => {
   return (
     <div className={styles.container}>
       {isLoading ? (
-        <div>Loading...</div>
+        ` <Center width={'100%'}>
+          <Icon icon={Loader2Icon} spin />
+        </Center>`
       ) : (
         <Flexbox>
           {data?.map((column) => (
@@ -64,4 +66,4 @@ const TableColumns = ({ tableName }: TableColumnsProps) => {
   );
 };
 
-export default TableColumns;
+export default Columns;

package/src/features/DevPanel/PostgresViewer/{Schema.tsx → SchemaSidebar/index.tsx}

@@ -1,11 +1,11 @@
-import { Icon } from '@lobehub/ui';
+import { DraggablePanel, DraggablePanelBody, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ChevronDown, ChevronRight, Database, Table as TableIcon } from 'lucide-react';
+import { ChevronDown, ChevronRight, Database, Loader2Icon, Table as TableIcon } from 'lucide-react';
 import React, { useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
-import TableColumns from './TableColumns';
-import { useFetchTables } from './usePgTable';
+import { useFetchTables } from '../usePgTable';
+import Columns from './Columns';
 
 const useStyles = createStyles(({ token, css }) => ({
   button: css`
@@ -51,24 +51,7 @@ const useStyles = createStyles(({ token, css }) => ({
     color: ${token.colorTextTertiary};
   `,
   schemaHeader: css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-
-    padding-block: 12px;
-    padding-inline: 16px;
-
     font-weight: ${token.fontWeightStrong};
-    color: ${token.colorText};
-  `,
-  schemaPanel: css`
-    overflow: scroll;
-
-    width: 280px;
-    height: 100%;
-    border-inline-end: 1px solid ${token.colorBorderSecondary};
-
-    background: ${token.colorBgContainer};
   `,
   selected: css`
     background: ${token.colorFillSecondary};
@@ -146,41 +129,52 @@ const SchemaPanel = ({ onTableSelect, selectedTable }: SchemaPanelProps) => {
   };
 
   return (
-    <div className={styles.schemaPanel}>
-      <div className={styles.schemaHeader}>
-        <Database size={16} />
-        <Flexbox align={'center'} horizontal justify={'space-between'}>
-          <span>Tables {data?.length}</span>
-          <span className={styles.schema}>public</span>
+    <DraggablePanel placement={'left'}>
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }}>
+        <Flexbox
+          align={'center'}
+          className={styles.schemaHeader}
+          gap={8}
+          horizontal
+          paddingBlock={12}
+          paddingInline={16}
+        >
+          <Database size={16} />
+          <Flexbox align={'center'} horizontal justify={'space-between'}>
+            <span>Tables {data?.length}</span>
+            <span className={styles.schema}>public</span>
+          </Flexbox>
         </Flexbox>
-      </div>
-      {isLoading ? (
-        <div>Loading...</div>
-      ) : (
-        <Flexbox>
-          {data?.map((table) => (
-            <div key={table.name}>
-              <Flexbox
-                className={cx(styles.tableItem, selectedTable === table.name && styles.selected)}
-                horizontal
-                onClick={() => {
-                  toggleTable(table.name);
-                  onTableSelect(table.name);
-                }}
-              >
-                <Icon icon={expandedTables.has(table.name) ? ChevronDown : ChevronRight} />
-                <TableIcon size={16} />
-                <Flexbox align={'center'} horizontal justify={'space-between'}>
-                  <span>{table.name}</span>
-                  <span className={styles.count}>{table.count}</span>
+        <DraggablePanelBody style={{ padding: 0 }}>
+          {isLoading ? (
+            <Center height={'100%'} width={'100%'}>
+              <Icon icon={Loader2Icon} spin />
+            </Center>
+          ) : (
+            data?.map((table) => (
+              <div key={table.name}>
+                <Flexbox
+                  className={cx(styles.tableItem, selectedTable === table.name && styles.selected)}
+                  horizontal
+                  onClick={() => {
+                    toggleTable(table.name);
+                    onTableSelect(table.name);
+                  }}
+                >
+                  <Icon icon={expandedTables.has(table.name) ? ChevronDown : ChevronRight} />
+                  <TableIcon size={16} />
+                  <Flexbox align={'center'} horizontal justify={'space-between'}>
+                    <span>{table.name}</span>
+                    <span className={styles.count}>{table.count}</span>
+                  </Flexbox>
                 </Flexbox>
-              </Flexbox>
-              {expandedTables.has(table.name) && <TableColumns tableName={table.name} />}
-            </div>
-          ))}
-        </Flexbox>
-      )}
-    </div>
+                {expandedTables.has(table.name) && <Columns tableName={table.name} />}
+              </div>
+            ))
+          )}
+        </DraggablePanelBody>
+      </Flexbox>
+    </DraggablePanel>
   );
 };
 

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

@@ -1,8 +1,10 @@
+'use client';
+
 import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import DataTable from './DataTable';
-import SchemaPanel from './Schema';
+import SchemaSidebar from './SchemaSidebar';
 
 // Main Database Panel Component
 const DatabasePanel = () => {
@@ -10,7 +12,7 @@ const DatabasePanel = () => {
 
   return (
     <Flexbox height={'100%'} horizontal>
-      <SchemaPanel onTableSelect={setSelectedTable} selectedTable={selectedTable} />
+      <SchemaSidebar onTableSelect={setSelectedTable} selectedTable={selectedTable} />
       <DataTable tableName={selectedTable} />
     </Flexbox>
   );