@lobehub/chat 0.90.3 → 0.91.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.91.0](https://github.com/lobehub/lobe-chat/compare/v0.90.3...v0.91.0)
+
+<sup>Released on **2023-10-17**</sup>
+
+#### ✨ Features
+
+- **misc**: Add hotkeys.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add hotkeys, closes [#286](https://github.com/lobehub/lobe-chat/issues/286) ([041054d](https://github.com/lobehub/lobe-chat/commit/041054d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.90.3](https://github.com/lobehub/lobe-chat/compare/v0.90.2...v0.90.3)
 
 <sup>Released on **2023-10-17**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.90.3",
+  "version": "0.91.0",
   "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",

package/src/app/chat/features/ChatInputContent/ActionBar/ActionRight.tsx

@@ -3,8 +3,11 @@ import { Popconfirm } from 'antd';
 import { useResponsive } from 'antd-style';
 import { Eraser } from 'lucide-react';
 import { memo } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
+import HotKeys from '@/components/HotKeys';
+import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
 import { useSessionStore } from '@/store/session';
 
 import SaveTopic from '../Footer/SaveTopic';
@@ -13,6 +16,12 @@ const ActionsRight = memo(() => {
   const { t } = useTranslation('setting');
   const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig]);
   const { mobile } = useResponsive();
+  const hotkeys = [PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
+
+  useHotkeys(hotkeys, clearMessage, {
+    preventDefault: true,
+  });
+
   return (
     <>
       {mobile && <SaveTopic />}
@@ -20,14 +29,16 @@ const ActionsRight = memo(() => {
         cancelText={t('cancel', { ns: 'common' })}
         okButtonProps={{ danger: true }}
         okText={t('ok', { ns: 'common' })}
-        onConfirm={() => clearMessage()}
+        onConfirm={clearMessage}
         placement={'topRight'}
         title={t('confirmClearCurrentMessages', { ns: 'common' })}
       >
         <ActionIcon
           icon={Eraser}
           placement={'bottom'}
-          title={t('clearCurrentMessages', { ns: 'common' })}
+          title={
+            (<HotKeys desc={t('clearCurrentMessages', { ns: 'common' })} keys={hotkeys} />) as any
+          }
         />
       </Popconfirm>
     </>

package/src/app/chat/features/ChatInputContent/Footer/SaveTopic.tsx

@@ -3,8 +3,11 @@ import { Button } from 'antd';
 import { useResponsive } from 'antd-style';
 import { LucideGalleryVerticalEnd } from 'lucide-react';
 import { memo } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
+import HotKeys from '@/components/HotKeys';
+import { PREFIX_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
 import { useSessionStore } from '@/store/session';
 
 const SaveTopic = memo(() => {
@@ -12,13 +15,19 @@ const SaveTopic = memo(() => {
   const [hasTopic, saveToTopic] = useSessionStore((s) => [!!s.activeTopicId, s.saveToTopic]);
   const { mobile } = useResponsive();
 
+  const hotkeys = [PREFIX_KEY, SAVE_TOPIC_KEY].join('+');
+
+  useHotkeys(hotkeys, saveToTopic, {
+    preventDefault: true,
+  });
+
   if (hasTopic) return undefined;
 
   const Render = mobile ? ActionIcon : Button;
   const icon: any = mobile ? LucideGalleryVerticalEnd : <Icon icon={LucideGalleryVerticalEnd} />;
 
   return (
-    <Tooltip title={t('topic.saveCurrentMessages')}>
+    <Tooltip title={<HotKeys desc={t('topic.saveCurrentMessages')} keys={hotkeys} />}>
       <Render aria-label={t('topic.saveCurrentMessages')} icon={icon} onClick={saveToTopic} />
     </Tooltip>
   );

package/src/app/chat/features/Conversation/ChatList/index.tsx

@@ -1,8 +1,10 @@
 import { ChatList } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
+import { PREFIX_KEY, REGENERATE_KEY } from '@/const/hotkeys';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 
@@ -36,6 +38,21 @@ const List = memo(() => {
     ];
   });
 
+  const hotkeys = [PREFIX_KEY, REGENERATE_KEY].join('+');
+
+  useHotkeys(
+    hotkeys,
+    () => {
+      console.log(111);
+      const lastMessage = data.at(-1);
+      if (!lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system') return;
+      resendMessage(lastMessage.id);
+    },
+    {
+      preventDefault: true,
+    },
+  );
+
   if (!init) return <SkeletonList />;
 
   return (

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

@@ -5,15 +5,13 @@ import { memo } from 'react';
 import PageTitle from '@/components/PageTitle';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 const Title = memo(() => {
   const [avatar, title] = useSessionStore((s) => [
     agentSelectors.currentAgentAvatar(s),
     agentSelectors.currentAgentTitle(s),
   ]);
-  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
 
-  return <PageTitle title={pageTitle} />;
+  return <PageTitle title={[avatar, title].filter(Boolean).join(' ')} />;
 });
 export default Title;

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

@@ -13,7 +13,7 @@ import { useStyles } from './style';
 
 const SystemRole = memo(() => {
   const [openModal, setOpenModal] = useState(false);
-
+  const [editing, setEditing] = useState(false);
   const { styles } = useStyles();
   const [systemRole, updateAgentConfig] = useSessionStore((s) => [
     agentSelectors.currentAgentSystemRole(s),
@@ -35,7 +35,16 @@ const SystemRole = memo(() => {
         }
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
-      <Flexbox className={styles.promptBox} height={200}>
+      <Flexbox
+        className={styles.promptBox}
+        height={200}
+        onDoubleClick={(e) => {
+          if (e.altKey) {
+            setOpenModal(true);
+            setEditing(true);
+          }
+        }}
+      >
         {!init ? (
           <Skeleton
             active
@@ -47,9 +56,11 @@ const SystemRole = memo(() => {
           <>
             <EditableMessage
               classNames={{ markdown: styles.prompt }}
+              editing={editing}
               onChange={(e) => {
                 updateAgentConfig({ systemRole: e });
               }}
+              onEditingChange={setEditing}
               onOpenChange={setOpenModal}
               openModal={openModal}
               placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}

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

@@ -83,7 +83,16 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
   );
 
   return (
-    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+    <Flexbox
+      align={'center'}
+      gap={8}
+      horizontal
+      justify={'space-between'}
+      onDoubleClick={(e) => {
+        if (!id) return;
+        if (e.altKey) toggleEditing(true);
+      }}
+    >
       <ActionIcon
         color={fav ? theme.colorWarning : undefined}
         fill={fav ? theme.colorWarning : 'transparent'}

package/src/app/chat/settings/features/EditPage.tsx

@@ -8,7 +8,6 @@ import PageTitle from '@/components/PageTitle';
 import AgentSetting from '@/features/AgentSetting';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 const EditPage = memo(() => {
   const { t } = useTranslation('setting');
@@ -20,11 +19,9 @@ const EditPage = memo(() => {
     agentSelectors.currentAgentTitle(s),
   ]);
 
-  const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
-
   return (
     <>
-      <PageTitle title={pageTitle} />
+      <PageTitle title={t('header.sessionWithName', { name: title })} />
       <AgentSetting
         config={config}
         meta={meta}

package/src/app/market/index.tsx

@@ -5,13 +5,11 @@ import { useTranslation } from 'react-i18next';
 
 import PageTitle from '@/components/PageTitle';
 import { useMarketStore } from '@/store/market';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import AgentSearchBar from './features/AgentSearchBar';
 
 const Market = memo(() => {
   const { t } = useTranslation('common');
-  const pageTitle = genSiteHeadTitle(t('tab.market'));
 
   useEffect(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
@@ -20,7 +18,7 @@ const Market = memo(() => {
 
   return (
     <>
-      <PageTitle title={pageTitle} />
+      <PageTitle title={t('tab.market')} />
       <AgentSearchBar />
     </>
   );

package/src/app/metadata.ts

@@ -1,10 +1,8 @@
 import { Metadata } from 'next';
 
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
 import pkg from '../../package.json';
 
-const title = genSiteHeadTitle();
+const title = 'LobeChat';
 const { description, homepage } = pkg;
 const metadata: Metadata = {
   appleWebApp: {

package/src/app/settings/agent/index.tsx

@@ -6,17 +6,15 @@ import { useTranslation } from 'react-i18next';
 import PageTitle from '@/components/PageTitle';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Agent from './Agent';
 
 export default memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.Agent);
   const { t } = useTranslation('setting');
-  const pageTitle = genSiteHeadTitle(t('tab.agent'));
   return (
     <>
-      <PageTitle title={pageTitle} />
+      <PageTitle title={t('tab.agent')} />
       <Agent />
     </>
   );

package/src/app/settings/common/index.tsx

@@ -7,7 +7,6 @@ import PageTitle from '@/components/PageTitle';
 import { CURRENT_VERSION } from '@/const/version';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Footer from '../features/Footer';
 import Common from './Common';
@@ -15,11 +14,10 @@ import Common from './Common';
 export default memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.Common);
   const { t } = useTranslation('setting');
-  const pageTitle = genSiteHeadTitle(t('tab.common'));
 
   return (
     <>
-      <PageTitle title={pageTitle} />
+      <PageTitle title={t('tab.common')} />
       <Common />
       <Footer>LobeChat v{CURRENT_VERSION}</Footer>
     </>

package/src/app/settings/llm/index.tsx

@@ -8,17 +8,15 @@ import Footer from '@/app/settings/features/Footer';
 import PageTitle from '@/components/PageTitle';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import LLM from './LLM';
 
 export default memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.LLM);
   const { t } = useTranslation('setting');
-  const pageTitle = genSiteHeadTitle(t('tab.llm'));
   return (
     <>
-      <PageTitle title={pageTitle} />
+      <PageTitle title={t('tab.llm')} />
       <LLM />
       <Footer>
         <Trans i18nKey="llm.waitingForMore" ns={'setting'}>

package/src/components/HotKeys/index.tsx

@@ -0,0 +1,57 @@
+import { createStyles } from 'antd-style';
+import { Fragment, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    font-size: 12px;
+
+    span {
+      font-weight: 600;
+      opacity: 0.5;
+    }
+
+    kbd {
+      padding: 3px 5px;
+
+      line-height: 1;
+      color: ${token.colorTextSecondary};
+
+      background: ${token.colorBgContainer};
+      border: 1px solid ${token.colorBorderSecondary};
+      border-bottom-color: ${token.colorBorder};
+      border-radius: ${token.borderRadius}px;
+      box-shadow: inset 0 -1px 0 ${token.colorBorder};
+    }
+  `,
+);
+
+export interface HotKeysProps {
+  desc?: string;
+  keys: string;
+}
+
+const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
+  const { styles } = useStyles();
+  const keysGroup = keys.split('+').filter(Boolean);
+  const content = (
+    <Flexbox align={'center'} className={styles} gap={2} horizontal>
+      {keysGroup.map((key, index) => (
+        <Fragment key={index}>
+          <kbd>{key.toUpperCase()}</kbd>
+          {index + 1 < keysGroup.length && <span>+</span>}
+        </Fragment>
+      ))}
+    </Flexbox>
+  );
+
+  if (!desc) return content;
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      {content}
+      {desc}
+    </Flexbox>
+  );
+});
+
+export default HotKeys;

package/src/components/{PageTitle.tsx → PageTitle/index.tsx}

@@ -2,7 +2,7 @@ import { memo, useEffect } from 'react';
 
 const PageTitle = memo<{ title: string }>(({ title }) => {
   useEffect(() => {
-    document.title = title;
+    document.title = title ? `${title} · LobeChat` : 'LobeChat';
   }, [title]);
 
   return null;

package/src/const/hotkeys.ts

@@ -0,0 +1,4 @@
+export const PREFIX_KEY = 'alt';
+export const SAVE_TOPIC_KEY = 'n';
+export const CLEAN_MESSAGE_KEY = 'backspace';
+export const REGENERATE_KEY = 'r';

package/src/utils/genSiteHeadTitle.ts

@@ -1 +0,0 @@
-export const genSiteHeadTitle = (title?: string) => (title ? `${title} · LobeChat` : 'LobeChat');