@lobehub/lobehub 2.0.0-next.344 → 2.0.0-next.346

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

@@ -1,73 +0,0 @@
-{
-  "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/(backend)/api/webhooks/clerk/route.ts

@@ -1,95 +0,0 @@
-import { NextResponse } from 'next/server';
-
-import { serverDB } from '@/database/server';
-import { authEnv } from '@/envs/auth';
-import { pino } from '@/libs/logger';
-import { UserService } from '@/server/services/user';
-
-import { validateRequest } from './validateRequest';
-
-if (authEnv.NEXT_PUBLIC_ENABLE_CLERK_AUTH && !authEnv.CLERK_WEBHOOK_SECRET) {
-  throw new Error('`CLERK_WEBHOOK_SECRET` environment variable is missing');
-}
-
-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 }}`);
-
-  const userService = new UserService(serverDB);
-  switch (type) {
-    case 'user.created': {
-      pino.info('creating user due to clerk webhook');
-      const result = await userService.createUser(data.id, data);
-
-      return NextResponse.json(result, { status: 200 });
-    }
-
-    case 'user.deleted': {
-      if (!data.id) {
-        pino.warn('clerk sent a delete user request, but no user ID was included in the payload');
-        return NextResponse.json({ message: 'ok' }, { status: 200 });
-      }
-
-      pino.info('delete user due to clerk webhook');
-
-      await userService.deleteUser(data.id);
-
-      return NextResponse.json({ message: 'user deleted' }, { status: 200 });
-    }
-
-    case 'user.updated': {
-      const result = await userService.updateUser(data.id, data);
-
-      return NextResponse.json(result, { status: 200 });
-    }
-
-    default: {
-      pino.warn(
-        `${req.url} received event type "${type}", but no handler is defined for this type`,
-      );
-      return NextResponse.json({ error: `unrecognised 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/(backend)/api/webhooks/clerk/validateRequest.ts

@@ -1,22 +0,0 @@
-import { type 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 = await 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/[variants]/(auth)/login/[[...login]]/page.tsx

@@ -1,27 +0,0 @@
-import { SignIn } from '@clerk/nextjs';
-import { BRANDING_NAME } from '@lobechat/business-const';
-
-import { enableClerk } from '@/envs/auth';
-import { notFound } from '@/libs/next/navigation';
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { type DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('clerk', locale);
-  return metadataModule.generate({
-    description: t('signIn.start.subtitle'),
-    title: t('signIn.start.title', { applicationName: BRANDING_NAME }),
-    url: '/login',
-  });
-};
-
-const Page = () => {
-  if (!enableClerk) return notFound();
-
-  return <SignIn path="/login" />;
-};
-
-export default Page;

package/src/app/[variants]/(main)/settings/security/features/ClerkProfile.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import { UserProfile } from '@clerk/nextjs';
-import { type ElementsConfig } from '@clerk/types';
-import { createStaticStyles, responsive } from 'antd-style';
-import { memo } from 'react';
-
-export const styles = createStaticStyles(
-  ({ css, cssVar }) =>
-    ({
-      cardBox: css`
-        width: 100%;
-        min-width: 100%;
-        background: transparent;
-      `,
-      footer: css`
-        display: none !important;
-      `,
-      headerTitle: css`
-        ${responsive.sm} {
-          margin: 0;
-          padding: 16px;
-
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 24px;
-
-          opacity: 0.5;
-        }
-      `,
-      navbar: css`
-        display: none !important;
-      `,
-      navbarMobileMenuRow: css`
-        display: none !important;
-      `,
-      pageScrollBox: css`
-        padding: 0;
-      `,
-      profileSection: css`
-        ${responsive.sm} {
-          padding-inline: 16px;
-          background: ${cssVar.colorBgContainer};
-        }
-      `,
-      rootBox: css`
-        width: 100%;
-        height: 100%;
-      `,
-      scrollBox: css`
-        background: transparent !important;
-      `,
-    }) as Partial<Record<keyof ElementsConfig, any>>,
-);
-
-const Client = memo(() => {
-  return (
-    <UserProfile
-      appearance={{
-        elements: styles,
-      }}
-      path={'/profile'}
-    />
-  );
-});
-
-export default Client;

package/src/features/Conversation/ChatList/components/AutoScroll.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import { memo, useEffect } from 'react';
-
-import { messageStateSelectors, useConversationStore, virtuaListSelectors } from '../../store';
-import BackBottom from './BackBottom';
-
-const AutoScroll = memo(() => {
-  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
-  const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
-  const isGenerating = useConversationStore(messageStateSelectors.isAIGenerating);
-  const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
-
-  useEffect(() => {
-    if (atBottom && isGenerating && !isScrolling) {
-      scrollToBottom(false);
-    }
-  }, [atBottom, isGenerating, isScrolling, scrollToBottom]);
-
-  return <BackBottom onScrollToBottom={() => scrollToBottom(true)} visible={!atBottom} />;
-});
-
-AutoScroll.displayName = 'ConversationAutoScroll';
-
-export default AutoScroll;

package/src/layout/AuthProvider/Clerk/UserUpdater.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { useClerk, useUser } from '@clerk/nextjs';
-import { memo } from 'react';
-import { createStoreUpdater } from 'zustand-utils';
-
-import { useUserStore } from '@/store/user';
-import { type LobeUser } from '@/types/user';
-
-// update the user data into the context
-const UserUpdater = memo(() => {
-  const { isLoaded, user, isSignedIn } = useUser();
-
-  const { session, openUserProfile, signOut, openSignIn } = useClerk();
-
-  const useStoreUpdater = createStoreUpdater(useUserStore);
-
-  const lobeUser = {
-    avatar: user?.imageUrl,
-    firstName: user?.firstName,
-    fullName: user?.fullName,
-    id: user?.id,
-    latestName: user?.lastName,
-    username: user?.username,
-  } as LobeUser;
-
-  useStoreUpdater('isLoaded', isLoaded);
-  useStoreUpdater('user', lobeUser);
-  useStoreUpdater('isSignedIn', isSignedIn);
-
-  useStoreUpdater('clerkUser', user!);
-  useStoreUpdater('clerkSession', session!);
-  useStoreUpdater('clerkSignIn', openSignIn);
-  useStoreUpdater('clerkOpenUserProfile', openUserProfile);
-  useStoreUpdater('clerkSignOut', signOut);
-
-  return null;
-});
-
-export default UserUpdater;

package/src/layout/AuthProvider/Clerk/index.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { ClerkProvider } from '@clerk/nextjs';
-import { type PropsWithChildren, memo, useEffect, useMemo, useState, useTransition } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import UserUpdater from './UserUpdater';
-import { useAppearance } from './useAppearance';
-
-const Clerk = memo(({ children }: PropsWithChildren) => {
-  const appearance = useAppearance();
-  const {
-    i18n: { language, getResourceBundle },
-  } = useTranslation('clerk');
-
-  const localization = useMemo(() => getResourceBundle(language, 'clerk'), [language]);
-
-  // When useAppearance returns different result during SSR vs. client-side (when theme mode is auto), the appearance is not applied
-  // It's because Clerk internally re-applies SSR props after transition which overrides client-side props, see https://github.com/clerk/javascript/blob/main/packages/nextjs/src/app-router/client/ClerkProvider.tsx
-  // This re-renders the provider after transition to make sure client-side props are always applied
-  const [count, setCount] = useState(0);
-  const [isPending, startTransition] = useTransition();
-  useEffect(() => {
-    if (count || isPending) return;
-    startTransition(() => {
-      setCount((count) => count + 1);
-    });
-  }, [count, setCount, isPending, startTransition]);
-
-  const allowedRedirectOrigins = useMemo(() => {
-    const rawOrigins = process.env.NEXT_PUBLIC_CLERK_AUTH_ALLOW_ORIGINS;
-    if (!rawOrigins) return undefined;
-
-    const origins = rawOrigins
-      .split(',')
-      .map((origin) => origin.trim())
-      .filter(Boolean);
-    return origins.length ? origins : undefined;
-  }, []);
-
-  return (
-    <ClerkProvider
-      allowedRedirectOrigins={allowedRedirectOrigins}
-      appearance={appearance}
-      localization={localization}
-      signUpUrl="/signup"
-    >
-      {children}
-      <UserUpdater />
-    </ClerkProvider>
-  );
-});
-
-export default Clerk;

package/src/layout/AuthProvider/Clerk/useAppearance.ts

@@ -1,133 +0,0 @@
-'use client';
-
-import { dark } from '@clerk/themes';
-import { type ElementsConfig, type Theme } from '@clerk/types';
-import { BRANDING_URL } from '@lobechat/business-const';
-import { createStaticStyles, cssVar, cx } from 'antd-style';
-
-import { useIsDark } from '@/hooks/useIsDark';
-
-const prefixCls = 'cl';
-
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  avatarBox: css`
-    width: 40px;
-    height: 40px;
-  `,
-  cardBox: css`
-    border-radius: ${cssVar.borderRadiusLG}px;
-    background: ${cssVar.colorBgContainer};
-    box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};
-  `,
-  header: css`
-    gap: 1em;
-  `,
-  logoBox: css`
-    height: 48px;
-  `,
-  modalBackdrop: css`
-    background: ${cssVar.colorBgMask};
-  `,
-  modalContent: css`
-    &.${prefixCls}-modalContent {
-      .${prefixCls}-cardBox {
-        border: 1px solid ${cssVar.colorSplit} !important;
-        border-radius: ${cssVar.borderRadiusLG}px !important;
-        box-shadow: ${cssVar.boxShadow} !important;
-      }
-
-      .${prefixCls}-userProfile-root {
-        width: min(80vw, 55rem);
-        height: min(80vh, 44rem);
-      }
-    }
-  `,
-  navbar: css`
-    background: ${cssVar.colorFillTertiary};
-
-    @media (max-width: 768px) {
-      background: ${cssVar.colorBgContainer};
-    }
-  `,
-  navbarButton: css`
-    line-height: 2;
-  `,
-  navbar_dark: css`
-    background: ${cssVar.colorBgContainer};
-  `,
-  pageScrollBox: css`
-    align-self: center;
-    width: 100%;
-    max-width: 1024px;
-  `,
-  rootBox: css`
-    &.${prefixCls}-userProfile-root {
-      width: 100%;
-      height: 100%;
-
-      .${prefixCls}-cardBox {
-        width: 100%;
-        height: 100%;
-        border: unset;
-        border-radius: unset;
-
-        box-shadow: unset;
-      }
-    }
-  `,
-  scrollBox: css`
-    border: unset;
-    border-radius: unset;
-    background: ${cssVar.colorBgElevated};
-    box-shadow: 0 1px 0 1px ${cssVar.colorFillTertiary};
-  `,
-  scrollBox_dark: css`
-    background: ${cssVar.colorFillQuaternary};
-  `,
-  socialButtons: css`
-    display: flex;
-    flex-direction: column;
-  `,
-  socialButtonsBlockButton__github: css`
-    order: 1;
-  `,
-  socialButtonsBlockButton__google: css`
-    order: -1;
-  `,
-})) as Partial<Record<keyof ElementsConfig, any>>;
-
-export const useAppearance = () => {
-  const isDarkMode = useIsDark();
-
-  const navbarStyle = cx(styles.navbar, isDarkMode && (styles as any).navbar_dark);
-  const scrollBoxStyle = cx(styles.scrollBox, isDarkMode && (styles as any).scrollBox_dark);
-
-  const elements = {
-    ...styles,
-    navbar: navbarStyle,
-    scrollBox: scrollBoxStyle,
-  } as Partial<Record<keyof ElementsConfig, any>>;
-
-  return {
-    baseTheme: isDarkMode ? dark : undefined,
-    elements,
-    layout: {
-      helpPageUrl: BRANDING_URL.help ?? 'https://lobehub.com/docs',
-      privacyPageUrl: BRANDING_URL.privacy ?? 'https://lobehub.com/privacy',
-      socialButtonsVariant: 'blockButton',
-      termsPageUrl: BRANDING_URL.terms ?? 'https://lobehub.com/terms',
-    },
-    variables: {
-      borderRadius: cssVar.borderRadius,
-      colorBackground: cssVar.colorBgContainer,
-      colorDanger: cssVar.colorError,
-      colorInputBackground: cssVar.colorFillTertiary,
-      colorNeutral: cssVar.colorText,
-      colorSuccess: cssVar.colorSuccess,
-      colorText: cssVar.colorText,
-      colorTextSecondary: cssVar.colorTextDescription,
-      colorWarning: cssVar.colorWarning,
-      fontSize: cssVar.fontSize,
-    },
-  } as Theme;
-};