@lobehub/chat 0.162.24 → 0.163.0

package/src/app/(main)/chat/@session/features/SessionListContent/List/Item/Actions.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Dropdown, type MenuProps } from 'antd';
+import { App, Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
+import { ItemType } from 'antd/es/menu/interface';
 import isEqual from 'fast-deep-equal';
 import {
   Check,
@@ -16,6 +17,7 @@ import {
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { isServerMode } from '@/const/version';
 import { configService } from '@/services/config';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
@@ -58,108 +60,113 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, setOpen })
   const isDefault = group === SessionDefaultGroup.Default;
   // const hasDivider = !isDefault || Object.keys(sessionByGroup).length > 0;
 
-  const items: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={pin ? PinOff : Pin} />,
-        key: 'pin',
-        label: t(pin ? 'pinOff' : 'pin'),
-        onClick: () => {
-          pinSession(id, !pin);
-        },
-      },
-      {
-        icon: <Icon icon={LucideCopy} />,
-        key: 'duplicate',
-        label: t('duplicate', { ns: 'common' }),
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-
-          duplicateSession(id);
-        },
-      },
-      {
-        type: 'divider',
-      },
-      {
-        children: [
-          ...sessionCustomGroups.map(({ id: groupId, name }) => ({
-            icon: group === groupId ? <Icon icon={Check} /> : <div />,
-            key: groupId,
-            label: name,
+  const items = useMemo(
+    () =>
+      (
+        [
+          {
+            icon: <Icon icon={pin ? PinOff : Pin} />,
+            key: 'pin',
+            label: t(pin ? 'pinOff' : 'pin'),
             onClick: () => {
-              updateSessionGroup(id, groupId);
+              pinSession(id, !pin);
             },
-          })),
+          },
           {
-            icon: isDefault ? <Icon icon={Check} /> : <div />,
-            key: 'defaultList',
-            label: t('defaultList'),
-            onClick: () => {
-              updateSessionGroup(id, SessionDefaultGroup.Default);
+            icon: <Icon icon={LucideCopy} />,
+            key: 'duplicate',
+            label: t('duplicate', { ns: 'common' }),
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+
+              duplicateSession(id);
             },
           },
           {
             type: 'divider',
           },
           {
-            icon: <Icon icon={LucidePlus} />,
-            key: 'createGroup',
-            label: <div>{t('sessionGroup.createGroup')}</div>,
-            onClick: ({ domEvent }) => {
-              domEvent.stopPropagation();
-              openCreateGroupModal();
-            },
+            children: [
+              ...sessionCustomGroups.map(({ id: groupId, name }) => ({
+                icon: group === groupId ? <Icon icon={Check} /> : <div />,
+                key: groupId,
+                label: name,
+                onClick: () => {
+                  updateSessionGroup(id, groupId);
+                },
+              })),
+              {
+                icon: isDefault ? <Icon icon={Check} /> : <div />,
+                key: 'defaultList',
+                label: t('defaultList'),
+                onClick: () => {
+                  updateSessionGroup(id, SessionDefaultGroup.Default);
+                },
+              },
+              {
+                type: 'divider',
+              },
+              {
+                icon: <Icon icon={LucidePlus} />,
+                key: 'createGroup',
+                label: <div>{t('sessionGroup.createGroup')}</div>,
+                onClick: ({ domEvent }) => {
+                  domEvent.stopPropagation();
+                  openCreateGroupModal();
+                },
+              },
+            ],
+            icon: <Icon icon={ListTree} />,
+            key: 'moveGroup',
+            label: t('sessionGroup.moveGroup'),
           },
-        ],
-        icon: <Icon icon={ListTree} />,
-        key: 'moveGroup',
-        label: t('sessionGroup.moveGroup'),
-      },
-      {
-        type: 'divider',
-      },
-      {
-        children: [
           {
-            key: 'agent',
-            label: t('exportType.agent', { ns: 'common' }),
-            onClick: () => {
-              configService.exportSingleAgent(id);
-            },
+            type: 'divider',
           },
+          isServerMode
+            ? undefined
+            : {
+                children: [
+                  {
+                    key: 'agent',
+                    label: t('exportType.agent', { ns: 'common' }),
+                    onClick: () => {
+                      configService.exportSingleAgent(id);
+                    },
+                  },
+                  {
+                    key: 'agentWithMessage',
+                    label: t('exportType.agentWithMessage', { ns: 'common' }),
+                    onClick: () => {
+                      configService.exportSingleSession(id);
+                    },
+                  },
+                ],
+                icon: <Icon icon={HardDriveDownload} />,
+                key: 'export',
+                label: t('export', { ns: 'common' }),
+              },
           {
-            key: 'agentWithMessage',
-            label: t('exportType.agentWithMessage', { ns: 'common' }),
-            onClick: () => {
-              configService.exportSingleSession(id);
+            danger: true,
+            icon: <Icon icon={Trash} />,
+            key: 'delete',
+            label: t('delete', { ns: 'common' }),
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+              modal.confirm({
+                centered: true,
+                okButtonProps: { danger: true },
+                onOk: async () => {
+                  await removeSession(id);
+                  message.success(t('confirmRemoveSessionSuccess'));
+                },
+                rootClassName: styles.modalRoot,
+                title: t('confirmRemoveSessionItemAlert'),
+              });
             },
           },
-        ],
-        icon: <Icon icon={HardDriveDownload} />,
-        key: 'export',
-        label: t('export', { ns: 'common' }),
-      },
-      {
-        danger: true,
-        icon: <Icon icon={Trash} />,
-        key: 'delete',
-        label: t('delete', { ns: 'common' }),
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-          modal.confirm({
-            centered: true,
-            okButtonProps: { danger: true },
-            onOk: async () => {
-              await removeSession(id);
-              message.success(t('confirmRemoveSessionSuccess'));
-            },
-            rootClassName: styles.modalRoot,
-            title: t('confirmRemoveSessionItemAlert'),
-          });
-        },
-      },
-    ],
+        ] as ItemType[]
+      ).filter(Boolean),
     [id, pin],
   );
 

package/src/app/(main)/chat/settings/features/HeaderContent.tsx

@@ -5,6 +5,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { isServerMode } from '@/const/version';
 import { configService } from '@/services/config';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
@@ -18,45 +19,50 @@ export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ moda
   const mobile = useServerConfigStore((s) => s.isMobile);
 
   const items = useMemo<MenuProps['items']>(
-    () => [
-      {
-        key: 'agent',
-        label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
-        onClick: () => {
-          if (!id) return;
+    () =>
+      isServerMode
+        ? []
+        : [
+            {
+              key: 'agent',
+              label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
+              onClick: () => {
+                if (!id) return;
 
-          configService.exportSingleAgent(id);
-        },
-      },
-      {
-        key: 'agentWithMessage',
-        label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
-        onClick: () => {
-          if (!id) return;
+                configService.exportSingleAgent(id);
+              },
+            },
+            {
+              key: 'agentWithMessage',
+              label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
+              onClick: () => {
+                if (!id) return;
 
-          configService.exportSingleSession(id);
-        },
-      },
-    ],
+                configService.exportSingleSession(id);
+              },
+            },
+          ],
     [],
   );
 
   return (
     <>
       <SubmitAgentButton modal={modal} />
-      <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        {modal ? (
-          <Button block icon={<Icon icon={HardDriveDownload} />}>
-            {t('export', { ns: 'common' })}
-          </Button>
-        ) : (
-          <ActionIcon
-            icon={HardDriveDownload}
-            size={HEADER_ICON_SIZE(mobile)}
-            title={t('export', { ns: 'common' })}
-          />
-        )}
-      </Dropdown>
+      {!isServerMode && (
+        <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+          {modal ? (
+            <Button block icon={<Icon icon={HardDriveDownload} />}>
+              {t('export', { ns: 'common' })}
+            </Button>
+          ) : (
+            <ActionIcon
+              icon={HardDriveDownload}
+              size={HEADER_ICON_SIZE(mobile)}
+              title={t('export', { ns: 'common' })}
+            />
+          )}
+        </Dropdown>
+      )}
     </>
   );
 });

package/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -87,12 +87,14 @@ const ProviderConfig = memo<ProviderConfigProps>(
       enabled,
       isFetchOnClient,
       isProviderEndpointNotEmpty,
+      isProviderApiKeyNotEmpty,
     ] = useUserStore((s) => [
       s.toggleProviderEnabled,
       s.setSettings,
       modelConfigSelectors.isProviderEnabled(id)(s),
       modelConfigSelectors.isProviderFetchOnClient(id)(s),
       keyVaultsConfigSelectors.isProviderEndpointNotEmpty(id)(s),
+      keyVaultsConfigSelectors.isProviderApiKeyNotEmpty(id)(s),
     ]);
 
     useSyncSettings(form);
@@ -122,7 +124,15 @@ const ProviderConfig = memo<ProviderConfigProps>(
         label: proxyUrl?.title || t('llm.proxyUrl.title'),
         name: [KeyVaultsConfigKey, id, LLMProviderBaseUrlKey],
       },
-      (showBrowserRequest || (showEndpoint && isProviderEndpointNotEmpty)) && {
+      /*
+       * Conditions to show Client Fetch Switch
+       * 1. Component props
+       * 2. Provider allow to edit endpoint and the value of endpoint is not empty
+       * 3. There is an apikey provided by user
+       */
+      (showBrowserRequest ||
+        (showEndpoint && isProviderEndpointNotEmpty) ||
+        (showApiKey && isProviderApiKeyNotEmpty)) && {
         children: (
           <Switch
             onChange={(enabled) => {

package/src/app/api/middleware/auth/index.ts

@@ -10,7 +10,7 @@ import { ChatErrorType } from '@/types/fetch';
 import { checkAuthMethod, getJWTPayload } from './utils';
 
 type CreateRuntime = (jwtPayload: JWTPayload) => AgentRuntime;
-type RequestOptions = { createRuntime?: CreateRuntime, params: { provider: string }; };
+type RequestOptions = { createRuntime?: CreateRuntime; params: { provider: string } };
 
 export type RequestHandler = (
   req: Request,

package/src/app/api/webhooks/clerk/__tests__/fixtures/createUser.json

@@ -0,0 +1,73 @@
+{
+  "backup_code_enabled": false,
+  "banned": false,
+  "create_organization_enabled": true,
+  "created_at": 1713709987911,
+  "delete_self_enabled": true,
+  "email_addresses": [
+    {
+      "created_at": 1713709977919,
+      "email_address": "arvinx@foxmail.com",
+      "id": "idn_2fPkD9X1lfzSn5lJVDGyochYq8k",
+      "linked_to": [],
+      "object": "email_address",
+      "reserved": false,
+      "updated_at": 1713709987951,
+      "verification": []
+    }
+  ],
+  "external_accounts": [
+    {
+      "approved_scopes": "read:user user:email",
+      "avatar_url": "https://avatars.githubusercontent.com/u/28616219?v=4",
+      "created_at": 1713709542104,
+      "email_address": "arvinx@foxmail.com",
+      "first_name": "Arvin",
+      "id": "eac_2fPjKROeJ1bBs8Uxa6RFMxKogTB",
+      "identification_id": "idn_2fPjyV3sqtQJZUbEzdK2y23a1bq",
+      "image_url": "https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2F2YXRhcnMuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3UvMjg2MTYyMTk/dj00IiwicyI6IkhCeHE5NmdlRk85ekRxMjJlR05EalUrbVFBbmVDZjRVQkpwNGYxcW5JajQifQ",
+      "label": null,
+      "last_name": "Xu",
+      "object": "external_account",
+      "provider": "oauth_github",
+      "provider_user_id": "28616219",
+      "public_metadata": {},
+      "updated_at": 1713709542104,
+      "username": "arvinxx",
+      "verification": {
+        "attempts": null,
+        "expire_at": 1713710140131,
+        "status": "verified",
+        "strategy": "oauth_github"
+      }
+    }
+  ],
+  "external_id": null,
+  "first_name": "Arvin",
+  "has_image": true,
+  "id": "user_2fPkELglwI48WpZVwwdAxBKBPK6",
+  "image_url": "https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZlBrRU1adVpwdlpvZFBHcVREdHJnTzJJM3cifQ",
+  "last_active_at": 1713709987902,
+  "last_name": "Xu",
+  "last_sign_in_at": null,
+  "locked": false,
+  "lockout_expires_in_seconds": null,
+  "object": "user",
+  "passkeys": [],
+  "password_enabled": false,
+  "phone_numbers": [],
+  "primary_email_address_id": "idn_2fPkD9X1lfzSn5lJVDGyochYq8k",
+  "primary_phone_number_id": null,
+  "primary_web3_wallet_id": null,
+  "private_metadata": {},
+  "profile_image_url": "https://images.clerk.dev/oauth_github/img_2fPkEMZuZpvZodPGqTDtrgO2I3w",
+  "public_metadata": {},
+  "saml_accounts": [],
+  "totp_enabled": false,
+  "two_factor_enabled": false,
+  "unsafe_metadata": {},
+  "updated_at": 1713709987972,
+  "username": "arvinxx",
+  "verification_attempts_remaining": 100,
+  "web3_wallets": []
+}

package/src/app/api/webhooks/clerk/route.ts

@@ -0,0 +1,159 @@
+import { UserJSON } from '@clerk/backend';
+import { NextResponse } from 'next/server';
+
+import { authEnv } from '@/config/auth';
+import { isServerMode } from '@/const/version';
+import { UserModel } from '@/database/server/models/user';
+import { pino } from '@/libs/logger';
+
+import { validateRequest } from './validateRequest';
+
+if (authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH && isServerMode && !authEnv.CLERK_WEBHOOK_SECRET) {
+  throw new Error('`CLERK_WEBHOOK_SECRET` environment variable is missing');
+}
+
+const createUser = async (id: string, params: UserJSON) => {
+  pino.info('creating user due to clerk webhook');
+
+  const userModel = new UserModel();
+
+  // Check if user already exists
+  const res = await userModel.findById(id);
+
+  // If user already exists, skip creating a new user
+  if (res)
+    return NextResponse.json(
+      { message: 'user not created due to user already existing in the database', success: false },
+      { status: 200 },
+    );
+
+  const email = params.email_addresses.find((e) => e.id === params.primary_email_address_id);
+  const phone = params.phone_numbers.find((e) => e.id === params.primary_phone_number_id);
+
+  await userModel.createUser({
+    avatar: params.image_url,
+    clerkCreatedAt: new Date(params.created_at),
+    email: email?.email_address,
+    firstName: params.first_name,
+    id,
+    lastName: params.last_name,
+    phone: phone?.phone_number,
+    username: params.username,
+  });
+
+  return NextResponse.json({ message: 'user created', success: true }, { status: 200 });
+};
+
+const deleteUser = async (id?: string) => {
+  if (id) {
+    pino.info('delete user due to clerk webhook');
+    const userModel = new UserModel();
+
+    await userModel.deleteUser(id);
+
+    return NextResponse.json({ message: 'user deleted' }, { status: 200 });
+  } else {
+    pino.warn('clerk sent a delete user request, but no user ID was included in the payload');
+    return NextResponse.json({ message: 'ok' }, { status: 200 });
+  }
+};
+
+const updateUser = async (id: string, params: UserJSON) => {
+  pino.info('updating user due to clerk webhook');
+
+  const userModel = new UserModel();
+
+  // Check if user already exists
+  const res = await userModel.findById(id);
+
+  // If user not exists, skip update the user
+  if (!res)
+    return NextResponse.json(
+      {
+        message: "user not updated due to the user don't existing in the database",
+        success: false,
+      },
+      { status: 200 },
+    );
+
+  const email = params.email_addresses.find((e) => e.id === params.primary_email_address_id);
+  const phone = params.phone_numbers.find((e) => e.id === params.primary_phone_number_id);
+
+  await userModel.updateUser(id, {
+    avatar: params.image_url,
+    email: email?.email_address,
+    firstName: params.first_name,
+    id,
+    lastName: params.last_name,
+    phone: phone?.phone_number,
+    username: params.username,
+  });
+
+  return NextResponse.json({ message: 'user updated', success: true }, { status: 200 });
+};
+
+export const POST = async (req: Request): Promise<NextResponse> => {
+  const payload = await validateRequest(req, authEnv.CLERK_WEBHOOK_SECRET!);
+
+  if (!payload) {
+    return NextResponse.json(
+      { error: 'webhook verification failed or payload was malformed' },
+      { status: 400 },
+    );
+  }
+
+  const { type, data } = payload;
+
+  pino.trace(`clerk webhook payload: ${{ data, type }}`);
+
+  switch (type) {
+    case 'user.created': {
+      return createUser(data.id, data);
+    }
+    case 'user.deleted': {
+      return deleteUser(data.id);
+    }
+    case 'user.updated': {
+      return updateUser(data.id, data);
+    }
+
+    default: {
+      pino.warn(
+        `${req.url} received event type "${type}", but no handler is defined for this type`,
+      );
+      return NextResponse.json({ error: `uncreognised payload type: ${type}` }, { status: 400 });
+    }
+    // case 'user.updated':
+    //   break;
+    // case 'session.created':
+    //   break;
+    // case 'session.ended':
+    //   break;
+    // case 'session.removed':
+    //   break;
+    // case 'session.revoked':
+    //   break;
+    // case 'email.created':
+    //   break;
+    // case 'sms.created':
+    //   break;
+    // case 'organization.created':
+    //   break;
+    // case 'organization.updated':
+    //   break;
+    // case 'organization.deleted':
+    //   break;
+    // case 'organizationMembership.created':
+    //   break;
+    // case 'organizationMembership.deleted':
+    //   break;
+    // case 'organizationMembership.updated':
+    //   break;
+    // case 'organizationInvitation.accepted':
+    //   break;
+    // case 'organizationInvitation.created':
+    //   break;
+    // case 'organizationInvitation.revoked':
+    //   break;
+  }
+};

package/src/app/api/webhooks/clerk/validateRequest.ts

@@ -0,0 +1,22 @@
+import { WebhookEvent } from '@clerk/nextjs/server';
+import { headers } from 'next/headers';
+import { Webhook } from 'svix';
+
+export const validateRequest = async (request: Request, secret: string) => {
+  const payloadString = await request.text();
+  const headerPayload = headers();
+
+  const svixHeaders = {
+    'svix-id': headerPayload.get('svix-id')!,
+    'svix-signature': headerPayload.get('svix-signature')!,
+    'svix-timestamp': headerPayload.get('svix-timestamp')!,
+  };
+  const wh = new Webhook(secret);
+
+  try {
+    return wh.verify(payloadString, svixHeaders) as WebhookEvent;
+  } catch {
+    console.error('incoming webhook failed verification');
+    return;
+  }
+};

package/src/app/trpc/edge/[trpc]/route.ts

@@ -3,7 +3,7 @@ import type { NextRequest } from 'next/server';
 
 import { pino } from '@/libs/logger';
 import { createContext } from '@/server/context';
-import { edgeRouter } from '@/server/routers';
+import { edgeRouter } from '@/server/routers/edge';
 
 export const runtime = 'edge';
 

package/src/app/trpc/lambda/[trpc]/route.ts

@@ -0,0 +1,26 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import type { NextRequest } from 'next/server';
+
+import { pino } from '@/libs/logger';
+import { createContext } from '@/server/context';
+import { lambdaRouter } from '@/server/routers/lambda';
+
+const handler = (req: NextRequest) =>
+  fetchRequestHandler({
+    /**
+     * @link https://trpc.io/docs/v11/context
+     */
+    createContext: () => createContext(req),
+
+    endpoint: '/trpc/lambda',
+
+    onError: ({ error, path, type }) => {
+      pino.info(`Error in tRPC handler (lambda) on path: ${path}, type: ${type}`);
+      console.error(error);
+    },
+
+    req,
+    router: lambdaRouter,
+  });
+
+export { handler as GET, handler as POST };

package/src/config/auth.ts

@@ -75,6 +75,7 @@ export const getAuthConfig = () => {
     server: {
       // Clerk
       CLERK_SECRET_KEY: z.string().optional(),
+      CLERK_WEBHOOK_SECRET: z.string().optional(),
 
       // NEXT-AUTH
       NEXT_AUTH_SECRET: z.string().optional(),
@@ -110,6 +111,7 @@ export const getAuthConfig = () => {
       NEXT_PUBLIC_ENABLE_CLERK_AUTH: !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
       NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
       CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
+      CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
 
       // Next Auth
       NEXT_PUBLIC_ENABLE_NEXT_AUTH: