@lobehub/chat 0.99.1 → 0.100.1

package/CHANGELOG.md

@@ -2,6 +2,51 @@
 
 # Changelog
 
+### [Version 0.100.1](https://github.com/lobehub/lobe-chat/compare/v0.100.0...v0.100.1)
+
+<sup>Released on **2023-11-09**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.100.0](https://github.com/lobehub/lobe-chat/compare/v0.99.1...v0.100.0)
+
+<sup>Released on **2023-11-09**</sup>
+
+#### ✨ Features
+
+- **hotkeys**: Compatible with SSR, display platform specific key.
+- **misc**: Platform check utils.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **hotkeys**: Compatible with SSR ([99fa4f8](https://github.com/lobehub/lobe-chat/commit/99fa4f8))
+- **hotkeys**: Display platform specific key ([ee332a4](https://github.com/lobehub/lobe-chat/commit/ee332a4))
+- **misc**: Platform check utils ([08a3cb9](https://github.com/lobehub/lobe-chat/commit/08a3cb9))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.99.1](https://github.com/lobehub/lobe-chat/compare/v0.99.0...v0.99.1)
 
 <sup>Released on **2023-11-08**</sup>

package/next.config.mjs

@@ -1,5 +1,5 @@
+import nextPWA from '@ducanh2912/next-pwa';
 import analyzer from '@next/bundle-analyzer';
-import nextPWA from 'next-pwa';
 
 const isProd = process.env.NODE_ENV === 'production';
 const buildWithDocker = process.env.DOCKER === 'true';
@@ -11,55 +11,64 @@ const withBundleAnalyzer = analyzer({
 const withPWA = nextPWA({
   dest: 'public',
   register: true,
-  skipWaiting: true,
+  workboxOptions: {
+    skipWaiting: true,
+  },
 });
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   compress: isProd,
-  reactStrictMode: true,
+  env: {
+    AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL ?? '',
+    PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL ?? '',
+  },
+  experimental: {
+    forceSwcTransforms: true,
+    optimizePackageImports: [
+      'modern-screenshot',
+      'emoji-mart',
+      '@emoji-mart/react',
+      '@emoji-mart/data',
+      '@icons-pack/react-simple-icons',
+      'gpt-tokenizer',
+      'chroma-js',
+    ],
+    webVitalsAttribution: ['CLS', 'LCP'],
+  },
   images: {
-    unoptimized: !isProd,
     remotePatterns: [
       {
-        protocol: 'https',
         hostname: 'registry.npmmirror.com',
-        port: '',
         pathname: '/@lobehub/assets-emoji/1.3.0/files/assets/**',
+        port: '',
+        protocol: 'https',
       },
       {
-        protocol: 'https',
         hostname: 'registry.npmmirror.com',
-        port: '',
         pathname: '/@lobehub/assets-emoji-anim/1.0.0/files/assets/**',
+        port: '',
+        protocol: 'https',
       },
       {
-        protocol: 'https',
         hostname: 'registry.npmmirror.com',
-        port: '',
         pathname: '/@lobehub/assets-logo/1.1.0/files/assets/**',
+        port: '',
+        protocol: 'https',
       },
       {
-        protocol: 'https',
         hostname: 'registry.npmmirror.com',
-        port: '',
         pathname: '/@lobehub/assets-favicons/latest/files/assets/**',
+        port: '',
+        protocol: 'https',
       },
     ],
+    unoptimized: !isProd,
   },
-  experimental: {
-    webVitalsAttribution: ['CLS', 'LCP'],
-    forceSwcTransforms: true,
-    optimizePackageImports: [
-      'modern-screenshot',
-      'emoji-mart',
-      '@emoji-mart/react',
-      '@emoji-mart/data',
-      '@icons-pack/react-simple-icons',
-      'gpt-tokenizer',
-      'chroma-js',
-    ],
-  },
+  output: buildWithDocker ? 'standalone' : undefined,
+
+  reactStrictMode: true,
+
   transpilePackages: ['@lobehub/ui', 'antd-style', 'lodash-es'],
 
   webpack(config) {
@@ -68,15 +77,10 @@ const nextConfig = {
       layers: true,
     };
 
-    return config;
-  },
+    config.resolve.alias['@ant-design/cssinjs'] = '@ant-design/cssinjs/lib';
 
-  env: {
-    AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL,
-    PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL,
+    return config;
   },
-
-  output: buildWithDocker ? 'standalone' : undefined,
 };
 
 export default isProd ? withBundleAnalyzer(withPWA(nextConfig)) : nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.99.1",
+  "version": "0.100.1",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -92,7 +92,7 @@
     "lucide-react": "latest",
     "modern-screenshot": "^4",
     "nanoid": "^5",
-    "next": "^13.5.3",
+    "next": "^14.0.1",
     "openai": "~4.15.0",
     "polished": "^4",
     "posthog-js": "^1",
@@ -121,10 +121,11 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^18",
+    "@ducanh2912/next-pwa": "^9.7.2",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
-    "@next/bundle-analyzer": "^13",
-    "@next/eslint-plugin-next": "^13",
+    "@next/bundle-analyzer": "^14.0.1",
+    "@next/eslint-plugin-next": "^14.0.1",
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
@@ -148,7 +149,6 @@
     "lint-staged": "^15",
     "lodash": "^4",
     "markdown-table": "^3",
-    "next-pwa": "^5",
     "node-fetch": "^3",
     "prettier": "^3",
     "remark-cli": "^11",

package/src/app/layout.tsx

@@ -21,7 +21,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
 
   return (
-    <html lang={lang?.value || DEFAULT_LANG}>
+    <html lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
         <StyleRegistry>
           <Layout

package/src/components/HotKeys/index.tsx

@@ -1,7 +1,12 @@
+'use client';
+
 import { createStyles } from 'antd-style';
-import { Fragment, memo } from 'react';
+import { Fragment, memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { isApplePlatform } from '@/utils/platform';
+
 const useStyles = createStyles(
   ({ css, token }) => css`
     font-size: 12px;
@@ -33,12 +38,28 @@ export interface HotKeysProps {
 
 const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
   const { styles } = useStyles();
-  const keysGroup = keys.split('+').filter(Boolean);
+  const [keysGroup, setKeysGroup] = useState(keys.split('+'));
+  const visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
+
+  useEffect(() => {
+    const mapping: Record<string, string> = {
+      [CLEAN_MESSAGE_KEY]: isApplePlatform() ? '⌫' : 'backspace',
+      [PREFIX_KEY]: isApplePlatform() ? '⌥' : 'alt',
+    };
+    const newValue = keys
+      .split('+')
+      .filter(Boolean)
+      .map((k) => mapping[k] ?? k);
+    setKeysGroup(newValue);
+  }, [keys]);
+
   const content = (
     <Flexbox align={'center'} className={styles} gap={2} horizontal>
       {keysGroup.map((key, index) => (
         <Fragment key={index}>
-          <kbd>{key.toUpperCase()}</kbd>
+          <kbd>
+            <span style={{ visibility }}>{key.toUpperCase()}</span>
+          </kbd>
           {index + 1 < keysGroup.length && <span>+</span>}
         </Fragment>
       ))}

package/src/utils/platform.ts

@@ -0,0 +1,11 @@
+import UAParser from 'ua-parser-js';
+
+export const getPlatform = () => {
+  let ua = navigator.userAgent;
+  return new UAParser(ua).getOS();
+};
+
+export const isApplePlatform = () => {
+  const platform = getPlatform().name;
+  return platform && ['Mac OS', 'iOS'].includes(platform);
+};