@lobehub/chat 0.145.8 → 0.145.9

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.145.9](https://github.com/lobehub/lobe-chat/compare/v0.145.8...v0.145.9)
+
+<sup>Released on **2024-04-02**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve scrollbar style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve scrollbar style, closes [#1869](https://github.com/lobehub/lobe-chat/issues/1869) ([33d857f](https://github.com/lobehub/lobe-chat/commit/33d857f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.145.8](https://github.com/lobehub/lobe-chat/compare/v0.145.7...v0.145.8)
 
 <sup>Released on **2024-04-02**</sup>

package/docs/self-hosting/advanced/sso-providers/auth0.mdx

@@ -5,15 +5,15 @@
 
   Register and log in to [Auth0][auth0-client-page], click on the "Applications" in the left navigation bar to switch to the application management interface, and click "Create Application" in the upper right corner to create an application.
 
-  <Image alt="Create Auth0 Application S1" inStep src="hhttps://github.com/CloudPassenger/lobe-chat/assets/30863298/1b405347-f4c3-4c55-82f6-47116f2210d0" />
+  <Image alt="Create Auth0 Application S1" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/f068190f-0027-4d3b-8667-d632e43d5a86" />
 
   Fill in the application name you want to display to the organization users, choose any application type, and click "Create".
 
-  <Image alt="Create Auth0 Application S2" inStep src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/75c92f85-3ad3-4473-a9c6-e667e28d428d" />
+  <Image alt="Create Auth0 Application S2" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/3e0082df-9b6f-46f3-b67f-bdc79e1eb2cc" />
 
   After successful creation, click on the corresponding application to enter the application details page, switch to the "Settings" tab, and you can see the corresponding configuration information.
 
-  <Image alt="Create Auth0 Application S3" inStep src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/a1ed996b-95ef-4b7d-a50d-b4666eccfecb" />
+  <Image alt="Create Auth0 Application S3" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/df4cea85-616a-46f5-b2de-42725d9b82a6" />
 
   In the application configuration page, you also need to configure Allowed Callback URLs, where you should fill in:
 
@@ -21,7 +21,7 @@
   http(s)://your-domain/api/auth/callback/auth0
   ```
 
-  <Image alt="Create Auth0 Application S4" inStep src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/575f46aa-f485-49bd-8b90-dbb1ce1a5c1b" />
+  <Image alt="Create Auth0 Application S4" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/62fbd09f-a69a-4460-949b-0f6285fa65b9" />
 
   <Callout type={'important'}>
     You can fill in or modify Allowed Callback URLs after deployment, but make sure the filled URL is
@@ -32,7 +32,7 @@
 
   Click on the "Users Management" in the left navigation bar to enter the user management interface, where you can create users for your organization to log in to LobeChat.
 
-  <Image alt="Add Users" inStep src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/3b8127ab-dc4f-4ff9-a4cb-dec3ef0295cc" />
+  <Image alt="Add Users" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/0beda150-d0b6-43cf-a9f1-fce928b83a96" />
 
   ### Configure Environment Variables
 
@@ -67,13 +67,13 @@ If your enterprise or organization already has a unified identity authentication
 
 Auth0 supports single sign-on services such as Azure Active Directory, Slack, Google Workspace, Office 365, Zoom, and more. For a detailed list of supported services, please refer to [this link][auth0-sso-integrations].
 
-<Image alt="Connecting to an Existing Single Sign-On Service" src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/32650f4f-d0b0-4843-b26d-d35bad11d8a3" />
+<Image alt="Connecting to an Existing Single Sign-On Service" src="https://github.com/lobehub/lobe-chat/assets/30863298/9891347e-a338-4aa9-8714-f16c8dbcfcec" />
 
 ### Configuring Social Login
 
 If your enterprise or organization needs to support external user logins, you can configure social login services in Authentication -> Social.
 
-<Image alt="Configuring Social Login" src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/7b6f6a6c-2686-49d8-9dbd-0516053f1efa" />
+<Image alt="Configuring Social Login" src="https://github.com/lobehub/lobe-chat/assets/30863298/880749a6-5ba4-4e20-a968-b583a54de7fa" />
 
 <Callout type={'warning'}>
   Configuring social login services by default allows anyone to authenticate, which may lead to

package/docs/self-hosting/advanced/sso-providers/auth0.zh-CN.mdx

@@ -5,15 +5,15 @@
 
   注册并登录 [Auth0][auth0-client-page]，点击左侧导航栏的「Applications」，切换到应用管理界面，点击右上角「Create Application」以创建应用。
 
-  <Image alt="创建 Auth0 应用 S1" inStep src="hhttps://github.com/CloudPassenger/lobe-chat/assets/30863298/1b405347-f4c3-4c55-82f6-47116f2210d0" />
+  <Image alt="创建 Auth0 应用 S1" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/f068190f-0027-4d3b-8667-d632e43d5a86" />
 
   填写你想向组织用户显示的应用名称，可选择任意应用类型，点击「Create」。
 
-  <Image alt="创建 Auth0 应用 S2" inStep src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/75c92f85-3ad3-4473-a9c6-e667e28d428d" />
+  <Image alt="创建 Auth0 应用 S2" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/3e0082df-9b6f-46f3-b67f-bdc79e1eb2cc" />
 
   创建成功后，点击相应的应用，进入应用详情页，切换到「Settings」标签页，就可以看到相应的配置信息
 
-  <Image alt="创建 Auth0 应用 S3" inStep src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/a1ed996b-95ef-4b7d-a50d-b4666eccfecb" />
+  <Image alt="创建 Auth0 应用 S3" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/df4cea85-616a-46f5-b2de-42725d9b82a6" />
 
   在应用配置页面中，还需要配置 Allowed Callback URLs，在此处填写:
 
@@ -21,7 +21,7 @@
   http(s)://your-domain/api/auth/callback/auth0
   ```
 
-  <Image alt="创建 Auth0 应用 S4" inStep src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/575f46aa-f485-49bd-8b90-dbb1ce1a5c1b" />
+  <Image alt="创建 Auth0 应用 S4" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/62fbd09f-a69a-4460-949b-0f6285fa65b9" />
 
   <Callout type={'important'}>
     可以在部署后再填写或修改 Allowed Callback URLs，但是务必保证填写的 URL 与部署的 URL 一致
@@ -31,7 +31,7 @@
 
   点击左侧导航栏的「Users Management」，进入用户管理界面，可以为你的组织新建用户，用以登录 LobeChat
 
-  <Image alt="新增用户" inStep src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/3b8127ab-dc4f-4ff9-a4cb-dec3ef0295cc" />
+  <Image alt="新增用户" inStep src="https://github.com/lobehub/lobe-chat/assets/30863298/0beda150-d0b6-43cf-a9f1-fce928b83a96" />
 
   ### 配置环境变量
 
@@ -63,13 +63,13 @@
 
 Auth0 支持 Azure Active Directory / Slack / Google Workspace / Office 365 / Zoom 等单点登录服务，详细支持列表可参考 [这里][auth0-sso-integrations]
 
-<Image alt="Connecting to an Existing Single Sign-On Service" src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/32650f4f-d0b0-4843-b26d-d35bad11d8a3" />
+<Image alt="Connecting to an Existing Single Sign-On Service" src="https://github.com/lobehub/lobe-chat/assets/30863298/9891347e-a338-4aa9-8714-f16c8dbcfcec" />
 
 ### 配置社交登录
 
 如果你的企业或组织需要支持外部人员登录，可以在 Authentication -> Social 中，配置社交登录服务。
 
-<Image alt="Configuring Social Login" src="https://github.com/CloudPassenger/lobe-chat/assets/30863298/7b6f6a6c-2686-49d8-9dbd-0516053f1efa" />
+<Image alt="Configuring Social Login" src="https://github.com/lobehub/lobe-chat/assets/30863298/880749a6-5ba4-4e20-a968-b583a54de7fa" />
 
 <Callout type={'warning'}>
   配置社交登录服务默认会允许所有人通过认证，这可能会导致 LobeChat 被外部人员滥用。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.145.8",
+  "version": "0.145.9",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/chat/features/TopicListContent/Topic/index.tsx

@@ -1,5 +1,5 @@
 import { EmptyCard } from '@lobehub/ui';
-import { useThemeMode } from 'antd-style';
+import { css, cx, useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import React, { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +15,12 @@ import { ChatTopic } from '@/types/topic';
 import { Placeholder, SkeletonList } from './SkeletonList';
 import TopicItem from './TopicItem';
 
+const container = css`
+  > div {
+    padding-inline: 8px;
+  }
+`;
+
 export const Topic = memo(() => {
   const { t } = useTranslation('chat');
   const virtuosoRef = useRef<VirtuosoHandle>(null);
@@ -78,6 +84,7 @@ export const Topic = memo(() => {
         </Flexbox>
       )}
       <Virtuoso
+        className={cx(container)}
         components={{ ScrollSeekPlaceholder: Placeholder }}
         computeItemKey={(_, item) => item.id}
         data={topics}

package/src/app/chat/features/TopicListContent/index.tsx

@@ -9,12 +9,7 @@ const TopicListContent = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
     <Flexbox gap={mobile ? 8 : 0} height={'100%'} style={{ overflow: 'hidden' }}>
       {mobile ? <TopicSearchBar /> : <Header />}
-      <Flexbox
-        gap={16}
-        height={'100%'}
-        paddingInline={mobile ? 0 : 8}
-        style={{ paddingTop: 6, position: 'relative' }}
-      >
+      <Flexbox gap={16} height={'100%'} style={{ paddingTop: 6, position: 'relative' }}>
         <Topic />
       </Flexbox>
     </Flexbox>

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -20,21 +20,55 @@ import { setCookie } from '@/utils/cookie';
 
 const useStyles = createStyles(({ css, token }) => ({
   bg: css`
+    position: relative;
+
     overflow-y: hidden;
+    overscroll-behavior: none;
     display: flex;
     flex-direction: column;
     align-items: center;
 
     height: 100%;
+    max-height: 100dvh !important;
 
     background: ${token.colorBgLayout};
   `,
+  // scrollbar-width and scrollbar-color are supported from Chrome 121
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+  scrollbar: css`
+    scrollbar-color: ${token.colorFill} transparent;
+    scrollbar-width: thin;
+  `,
+
+  // so this is a polyfill for older browsers
+  scrollbarPolyfill: css`
+    ::-webkit-scrollbar {
+      width: 0.75em;
+      height: 0.75em;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+
+    :hover::-webkit-scrollbar-thumb {
+      background-color: ${token.colorText};
+      background-clip: content-box;
+      border: 3px solid transparent;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  `,
 }));
 
 const Container = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
+  const { styles, cx } = useStyles();
 
-  return <App className={styles.bg}>{children}</App>;
+  return (
+    <App className={cx(styles.bg, styles.scrollbar, styles.scrollbarPolyfill)}>{children}</App>
+  );
 });
 
 export interface AppThemeProps {

package/src/styles/global.ts

@@ -9,25 +9,13 @@ export default ({ prefixCls }: { prefixCls: string }) => css`
     overscroll-behavior: none;
     height: 100% !important;
     max-height: 100dvh !important;
+  }
 
-    ::-webkit-scrollbar {
-      display: none;
-      width: 0;
-      height: 0;
-    }
+  * {
+    scrollbar-width: thin;
   }
 
   p {
     margin-bottom: 0;
   }
-
-  @media (max-width: 575px) {
-    * {
-      ::-webkit-scrollbar {
-        display: none;
-        width: 0;
-        height: 0;
-      }
-    }
-  }
 `;