@lobehub/chat 0.96.8 → 0.97.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.96.8",
+  "version": "0.97.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",
@@ -27,8 +27,7 @@
     "build:analyze": "ANALYZE=true next build",
     "build:docker": "DOCKER=true next build",
     "dev": "next dev -p 3010",
-    "i18n": "npm run i18n:workflow && lobe-i18n",
-    "i18n:workflow": "ts-node --project ./tsconfig.json scripts/i18nWorkflow/index.ts",
+    "i18n": "npm run workflow:i18n && lobe-i18n",
     "lint": "npm run lint:ts && npm run lint:style && npm run type-check && npm run lint:circular",
     "lint:circular": "dpdm src/**/*.ts  --warning false  --tree false  --exit-code circular:1  -T true",
     "lint:md": "remark . --quiet --frail --output",
@@ -43,7 +42,9 @@
     "test": "vitest --passWithNoTests",
     "test:coverage": "vitest run --coverage --passWithNoTests",
     "test:update": "vitest -u",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "workflow:i18n": "ts-node --project ./tsconfig.json scripts/i18nWorkflow/index.ts",
+    "workflow:readme": "bun scripts/readmeWorkflow/index.ts"
   },
   "lint-staged": {
     "*.md": [
@@ -66,8 +67,6 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5",
-    "@emoji-mart/data": "^1",
-    "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^9",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
@@ -81,7 +80,6 @@
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
     "dayjs": "^1",
-    "emoji-mart": "^5",
     "fast-deep-equal": "^3",
     "gpt-tokenizer": "^2",
     "i18next": "^23",
@@ -149,6 +147,7 @@
     "jsdom": "^22",
     "lint-staged": "^15",
     "lodash": "^4",
+    "markdown-table": "^3",
     "next-pwa": "^5",
     "node-fetch": "^3",
     "prettier": "^3",

package/scripts/readmeWorkflow/const.ts

@@ -0,0 +1,19 @@
+export interface DataItem {
+  author: string;
+  createAt: string;
+  homepage: string;
+  identifier: string;
+  meta: { avatar: string; description: string; tags: string[]; title: string };
+}
+
+export const MARKET_URL = 'https://chat-preview.lobehub.com/market';
+export const PLGUIN_URL = 'https://chat-preview.lobehub.com/settings/agent';
+export const AGENT_EN_URL = 'https://chat-agents.lobehub.com/index.json';
+export const AGENT_CN_URL = 'https://chat-agents.lobehub.com/index.zh-CN.json';
+export const AGENT_REPO = 'https://github.com/lobehub/lobe-chat-agents';
+export const PLUGIN_EN_URL = 'https://chat-plugins.lobehub.com/index.json';
+export const PLUGIN_CN_URL = 'https://chat-plugins.lobehub.com/index.zh-CN.json';
+export const PLUGIN_REPO = 'https://github.com/lobehub/lobe-chat-plugins';
+
+export const AGENT_SPLIT = '<!-- AGENT LIST -->';
+export const PLUGIN_SPLIT = '<!-- PLUGIN LIST -->';

package/scripts/readmeWorkflow/index.ts

@@ -0,0 +1,12 @@
+import { consola } from 'consola';
+
+import syncAgentIndex from './syncAgentIndex';
+import syncPluginIndex from './syncPluginIndex';
+
+const runSync = async () => {
+  consola.start('Start sync readme workflow...');
+  await syncAgentIndex();
+  await syncPluginIndex();
+};
+
+runSync();

package/scripts/readmeWorkflow/syncAgentIndex.ts

@@ -0,0 +1,47 @@
+import { consola } from 'consola';
+import { markdownTable } from 'markdown-table';
+import qs from 'query-string';
+
+import { AGENT_REPO, AGENT_SPLIT, DataItem, MARKET_URL } from './const';
+import { fetchAgentIndex, genLink, genTags, readReadme, updateReadme, writeReadme } from './utlis';
+
+const genAgentTable = (data: DataItem[], lang: string) => {
+  const isCN = lang === 'zh-CN';
+  const content = data.slice(0, 4).map((item) => [
+    [
+      genLink(
+        item.meta.title,
+        qs.stringifyUrl({
+          query: { agent: item.identifier },
+          url: MARKET_URL,
+        }),
+      ),
+      `<sup>By **${genLink(item.author, item.homepage)}** on **${item.createAt}**</sup>`,
+    ].join('<br/>'),
+    [item.meta.description, genTags(item.meta.tags)].join('<br/>'),
+  ]);
+  return markdownTable([
+    isCN ? ['最近新增', '助手说明'] : ['Recent Submits', 'Description'],
+    ...content,
+  ]);
+};
+
+const runAgentTable = async (lang: string) => {
+  const data = await fetchAgentIndex(lang);
+  const md = readReadme(lang);
+  const mdTable = genAgentTable(data, lang);
+  const newMd = updateReadme(
+    AGENT_SPLIT,
+    md,
+    [mdTable, `> 📊 Total agents: ${genLink(`<kbd>**${data.length}**</kbd> `, AGENT_REPO)}`].join(
+      '\n\n',
+    ),
+  );
+  writeReadme(newMd, lang);
+  consola.success('Sync agent index success!');
+};
+
+export default async () => {
+  await runAgentTable('en-US');
+  await runAgentTable('zh-CN');
+};

package/scripts/readmeWorkflow/syncPluginIndex.ts

@@ -0,0 +1,43 @@
+import { consola } from 'consola';
+import { markdownTable } from 'markdown-table';
+
+import { DataItem, PLGUIN_URL, PLUGIN_REPO, PLUGIN_SPLIT } from './const';
+import { fetchPluginIndex, genLink, genTags, readReadme, updateReadme, writeReadme } from './utlis';
+
+const genPluginTable = (data: DataItem[], lang: string) => {
+  const isCN = lang === 'zh-CN';
+  const content = data
+    .filter((item) => item.author === 'LobeHub')
+    .map((item) => [
+      [
+        genLink(item.meta.title, PLGUIN_URL),
+        `<sup>By **${item.author}** on **${item.createAt}**</sup>`,
+      ].join('<br/>'),
+      genLink(item.homepage.split('github.com/')[1], item.homepage),
+      [item.meta.description, genTags(item.meta.tags)].join('<br/>'),
+    ]);
+  return markdownTable([
+    isCN ? ['官方插件', '仓库', '插件描述'] : ['Official Plugin', 'Repository', 'Description'],
+    ...content,
+  ]);
+};
+
+const runPluginTable = async (lang: string) => {
+  const data = await fetchPluginIndex(lang);
+  const md = readReadme(lang);
+  const mdTable = genPluginTable(data, lang);
+  const newMd = updateReadme(
+    PLUGIN_SPLIT,
+    md,
+    [mdTable, `> 📊 Total plugins: ${genLink(`<kbd>**${data.length}**</kbd>`, PLUGIN_REPO)}`].join(
+      '\n\n',
+    ),
+  );
+  writeReadme(newMd, lang);
+  consola.success('Sync plugin index success!');
+};
+
+export default async () => {
+  await runPluginTable('en-US');
+  await runPluginTable('zh-CN');
+};

package/scripts/readmeWorkflow/utlis.ts

@@ -0,0 +1,52 @@
+import { kebabCase } from 'lodash';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { AGENT_CN_URL, AGENT_EN_URL, PLUGIN_CN_URL, PLUGIN_EN_URL } from './const';
+
+const fetchIndex = async (url: string) => {
+  const res = await fetch(url);
+  return await res.json();
+};
+
+export const fetchAgentIndex = async (lang: string) => {
+  const isCN = lang === 'zh-CN';
+  const url = isCN ? AGENT_CN_URL : AGENT_EN_URL;
+  const data = await fetchIndex(url);
+  return data.agents;
+};
+
+export const fetchPluginIndex = async (lang: string) => {
+  const isCN = lang === 'zh-CN';
+  const url = isCN ? PLUGIN_CN_URL : PLUGIN_EN_URL;
+  const data = await fetchIndex(url);
+  return data.plugins;
+};
+
+export const genLink = (title: string, url: string) => `[${title}](${url})`;
+
+export const genTags = (tags: string[]) =>
+  tags
+    .filter(Boolean)
+    .map((tag) => `\`${kebabCase(tag)}\``)
+    .join(' ');
+
+const getReadmePath = (lang: string) => {
+  const isCN = lang === 'zh-CN';
+  return resolve(__dirname, '../../', isCN ? `./README.zh-CN.md` : `./README.md`);
+};
+
+export const readReadme = (lang: string): string => {
+  return readFileSync(getReadmePath(lang), 'utf8');
+};
+
+export const writeReadme = (content: string, lang: string) => {
+  writeFileSync(getReadmePath(lang), content, 'utf8');
+};
+
+export const updateReadme = (split: string, md: string, content: string): string => {
+  const mds = md.split(split);
+  mds[1] = [' ', content, ' '].join('\n\n');
+
+  return mds.join(split);
+};

package/src/app/chat/(desktop)/features/ChatHeader.tsx

@@ -55,7 +55,17 @@ const Header = memo(() => {
           </Flexbox>
         ) : (
           <Flexbox align={'flex-start'} gap={12} horizontal>
-            <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
+            <Avatar
+              avatar={avatar}
+              background={backgroundColor}
+              onClick={() =>
+                isInbox
+                  ? router.push('/settings/agent')
+                  : router.push(pathString('/chat/settings', { hash: location.hash }))
+              }
+              size={40}
+              title={title}
+            />
             <ChatHeaderTitle
               desc={displayDesc}
               tag={

package/src/app/chat/{features/ChatInputContent/Footer/index.tsx → (desktop)/features/ChatInput/Footer.tsx}

@@ -5,7 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import SaveTopic from './SaveTopic';
+import SaveTopic from '../../../features/ChatInputContent/Topic';
 
 const Footer = memo(() => {
   const theme = useTheme();

package/src/app/chat/(desktop)/features/{ChatInput.tsx → ChatInput/index.tsx}

@@ -4,7 +4,8 @@ import { memo, useState } from 'react';
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 
-import ChatInputContent from '../../features/ChatInputContent';
+import ChatInputContent from '../../../features/ChatInputContent';
+import Footer from './Footer';
 
 const ChatInputDesktopLayout = memo(() => {
   const [expand, setExpand] = useState<boolean>(false);
@@ -29,7 +30,7 @@ const ChatInputDesktopLayout = memo(() => {
       size={{ height: inputHeight, width: '100%' }}
       style={{ zIndex: 10 }}
     >
-      <ChatInputContent expand={expand} onExpandChange={setExpand} />
+      <ChatInputContent expand={expand} footer={<Footer />} onExpandChange={setExpand} />
     </DraggablePanel>
   );
 });

package/src/app/chat/(desktop)/features/SessionList.tsx

@@ -14,7 +14,7 @@ const useStyles = createStyles(({ stylish, css, cx }) =>
       display: flex;
       flex-direction: column;
       gap: 2px;
-      padding: 0 6px;
+      padding: 8px 8px 0;
     `,
   ),
 );

package/src/app/chat/(desktop)/features/SideBar.tsx

@@ -11,7 +11,7 @@ import { sessionSelectors } from '@/store/session/selectors';
 
 import TopicListContent from '../../features/TopicListContent';
 
-const SystemRole = dynamic(() => import('../../features/TopicListContent/SystemRole'));
+const SystemRole = dynamic(() => import('../../features/SystemRole'));
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`

package/src/app/chat/(mobile)/features/ChatHeader.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { LayoutList, Settings } from 'lucide-react';
+import { Clock3, Settings } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,11 +32,7 @@ const MobileHeader = memo(() => {
       right={
         <>
           <ShareButton />
-          <ActionIcon
-            icon={LayoutList}
-            onClick={() => toggleConfig()}
-            size={MOBILE_HEADER_ICON_SIZE}
-          />
+          <ActionIcon icon={Clock3} onClick={() => toggleConfig()} size={MOBILE_HEADER_ICON_SIZE} />
           {!isInbox && (
             <ActionIcon
               icon={Settings}

package/src/app/chat/(mobile)/features/TopicList.tsx

@@ -16,7 +16,7 @@ const Topics = memo(() => {
 
   return (
     <Modal onCancel={() => toggleConfig(false)} open={showAgentSettings} title={t('topic.title')}>
-      <TopicListContent />
+      <TopicListContent mobile />
     </Modal>
   );
 });

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

@@ -10,7 +10,7 @@ import HotKeys from '@/components/HotKeys';
 import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
 import { useSessionStore } from '@/store/session';
 
-import SaveTopic from '../Footer/SaveTopic';
+import SaveTopic from '../Topic';
 
 const ActionsRight = memo(() => {
   const { t } = useTranslation('setting');

package/src/app/chat/features/ChatInputContent/{Footer/SaveTopic.tsx → Topic/index.tsx}

@@ -1,7 +1,7 @@
 import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
 import { useResponsive } from 'antd-style';
-import { LucideGalleryVerticalEnd } from 'lucide-react';
+import { LucideGalleryVerticalEnd, LucideMessageSquarePlus } from 'lucide-react';
 import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -12,23 +12,25 @@ import { useSessionStore } from '@/store/session';
 
 const SaveTopic = memo(() => {
   const { t } = useTranslation('chat');
-  const [hasTopic, saveToTopic] = useSessionStore((s) => [!!s.activeTopicId, s.saveToTopic]);
+  const [hasTopic, openNewTopicOrSaveTopic] = useSessionStore((s) => [
+    !!s.activeTopicId,
+    s.openNewTopicOrSaveTopic,
+  ]);
   const { mobile } = useResponsive();
 
-  const hotkeys = [PREFIX_KEY, SAVE_TOPIC_KEY].join('+');
+  const icon = hasTopic ? LucideMessageSquarePlus : LucideGalleryVerticalEnd;
+  const Render = mobile ? ActionIcon : Button;
+  const iconRender: any = mobile ? icon : <Icon icon={icon} />;
+  const desc = t(hasTopic ? 'topic.openNewTopic' : 'topic.saveCurrentMessages');
 
-  useHotkeys(hotkeys, saveToTopic, {
+  const hotkeys = [PREFIX_KEY, SAVE_TOPIC_KEY].join('+');
+  useHotkeys(hotkeys, openNewTopicOrSaveTopic, {
     preventDefault: true,
   });
 
-  if (hasTopic) return undefined;
-
-  const Render = mobile ? ActionIcon : Button;
-  const icon: any = mobile ? LucideGalleryVerticalEnd : <Icon icon={LucideGalleryVerticalEnd} />;
-
   return (
-    <Tooltip title={<HotKeys desc={t('topic.saveCurrentMessages')} keys={hotkeys} />}>
-      <Render aria-label={t('topic.saveCurrentMessages')} icon={icon} onClick={saveToTopic} />
+    <Tooltip title={<HotKeys desc={desc} keys={hotkeys} />}>
+      <Render aria-label={desc} icon={iconRender} onClick={openNewTopicOrSaveTopic} />
     </Tooltip>
   );
 });

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

@@ -1,7 +1,7 @@
 import { ChatInputArea } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import dynamic from 'next/dynamic';
-import { Suspense, memo, useState } from 'react';
+import { ReactNode, Suspense, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { CHAT_TEXTAREA_HEIGHT } from '@/const/layoutTokens';
@@ -10,18 +10,18 @@ import { agentSelectors } from '@/store/session/selectors';
 
 import ActionLeft from './ActionBar/ActionLeft';
 import ActionsRight from './ActionBar/ActionRight';
-import Footer from './Footer';
 
 const Token = dynamic(() => import('./ActionBar/Token'), { ssr: false });
 
 interface ChatContentProps {
   expand?: boolean;
+  footer?: ReactNode;
   mobile?: boolean;
   onExpandChange?: (expand: boolean) => void;
 }
 
 const ChatInputContent = memo<ChatContentProps>(
-  ({ expand, onExpandChange, mobile: defaultMobile }) => {
+  ({ expand, onExpandChange, mobile: defaultMobile, footer }) => {
     const { t } = useTranslation('common');
 
     const [message, setMessage] = useState('');
@@ -50,7 +50,7 @@ const ChatInputContent = memo<ChatContentProps>(
         }
         actionsRight={<ActionsRight />}
         expand={expand}
-        footer={<Footer />}
+        footer={footer}
         loading={isLoading}
         minHeight={mobile ? 0 : CHAT_TEXTAREA_HEIGHT}
         onExpandChange={onExpandChange}

package/src/app/chat/features/Conversation/ChatList/Actions/Error.tsx

@@ -5,11 +5,5 @@ import { memo } from 'react';
 export const ErrorActionsBar = memo<ActionsBarProps>(({ text, onActionClick }) => {
   const { regenerate, del } = useChatListActionsBar(text);
 
-  return (
-    <ActionIconGroup
-      items={[regenerate, del]}
-      onActionClick={onActionClick}
-      type="ghost"
-    />
-  );
+  return <ActionIconGroup items={[regenerate, del]} onActionClick={onActionClick} type="ghost" />;
 });

package/src/app/chat/features/Conversation/ChatList/Actions/User.tsx

@@ -7,7 +7,6 @@ export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
   const { translate } = useCustomActions();
 
-
   return (
     <ActionIconGroup
       dropdownMenu={[edit, copy, regenerate, divider, translate, divider, del]}

package/src/app/chat/features/Conversation/ChatList/Actions/index.ts

@@ -1,5 +1,7 @@
 import { ChatListProps } from '@lobehub/ui';
 
+import { useSessionStore } from '@/store/session';
+
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
 import { FunctionActionsBar } from './Function';
@@ -11,3 +13,49 @@ export const renderActions: ChatListProps['renderActions'] = {
   system: DefaultActionsBar,
   user: UserActionsBar,
 };
+
+interface ActionsClick {
+  onClick: () => void;
+  trigger: boolean;
+}
+
+export const useActionsClick = (): ChatListProps['onActionsClick'] => {
+  const [deleteMessage, resendMessage, translateMessage] = useSessionStore((s) => [
+    s.deleteMessage,
+    s.resendMessage,
+    s.translateMessage,
+  ]);
+
+  return (action, { id, error }) => {
+    const actionsClick: ActionsClick[] = [
+      {
+        onClick: () => {
+          deleteMessage(id);
+        },
+        trigger: action.key === 'del',
+      },
+      {
+        onClick: () => {
+          resendMessage(id);
+          // if this message is an error message, we need to delete it
+          if (error) deleteMessage(id);
+        },
+        trigger: action.key === 'regenerate',
+      },
+      {
+        onClick: () => {
+          /**
+           * @description Click the menu item with translate item, the result is:
+           * @key 'en-US'
+           * @keyPath ['en-US','translate']
+           */
+          const lang = action.keyPath[0];
+          translateMessage(id, lang);
+        },
+        trigger: action.keyPath.at(-1) === 'translate',
+      },
+    ];
+
+    actionsClick.find((item) => item.trigger)?.onClick();
+  };
+};

package/src/app/chat/features/Conversation/ChatList/Messages/index.ts

@@ -1,4 +1,11 @@
 import { ChatListProps } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { useRouter } from 'next/navigation';
+
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/slices/session/selectors';
+import { pathString } from '@/utils/url';
 
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
@@ -9,3 +16,23 @@ export const renderMessages: ChatListProps['renderMessages'] = {
   default: DefaultMessage,
   function: FunctionMessage,
 };
+
+export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {
+  const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
+  const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
+  const { mobile } = useResponsive();
+  const router = useRouter();
+
+  return (role) => {
+    switch (role) {
+      case 'assistant': {
+        return () =>
+          isInbox
+            ? router.push('/settings/agent')
+            : mobile
+            ? router.push(pathString('/chat/settings', { hash: location.hash }))
+            : toggleSystemRole(true);
+      }
+    }
+  };
+};

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

@@ -8,15 +8,16 @@ import { PREFIX_KEY, REGENERATE_KEY } from '@/const/hotkeys';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 
-import { renderActions } from './Actions';
+import { renderActions, useActionsClick } from './Actions';
 import { renderErrorMessages } from './Error';
 import { renderMessagesExtra } from './Extras';
-import { renderMessages } from './Messages';
+import { renderMessages, useAvatarsClick } from './Messages';
 import SkeletonList from './SkeletonList';
 
 const List = memo(() => {
   const init = useSessionChatInit();
   const { t } = useTranslation('common');
+
   const data = useSessionStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
 
   const [
@@ -24,10 +25,8 @@ const List = memo(() => {
     enableHistoryCount,
     historyCount,
     chatLoadingId,
-    deleteMessage,
     resendMessage,
     dispatchMessage,
-    translateMessage,
   ] = useSessionStore((s) => {
     const config = agentSelectors.currentAgentConfig(s);
     return [
@@ -35,12 +34,12 @@ const List = memo(() => {
       config.enableHistoryCount,
       config.historyCount,
       s.chatLoadingId,
-      s.deleteMessage,
       s.resendMessage,
       s.dispatchMessage,
-      s.translateMessage,
     ];
   });
+  const onActionsClick = useActionsClick();
+  const onAvatarsClick = useAvatarsClick();
 
   const hotkeys = [PREFIX_KEY, REGENERATE_KEY].join('+');
 
@@ -64,29 +63,8 @@ const List = memo(() => {
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
       loadingId={chatLoadingId}
-      onActionsClick={(action, { id, error }) => {
-        switch (action.key) {
-          case 'del': {
-            deleteMessage(id);
-            break;
-          }
-          case 'regenerate': {
-            resendMessage(id);
-
-            // if this message is an error message, we need to delete it
-            if (error) deleteMessage(id);
-            break;
-          }
-        }
-
-        // click the menu item with translate item, the result is:
-        // key: 'en-US'
-        // keyPath: ['en-US','translate']
-        if (action.keyPath.at(-1) === 'translate') {
-          const lang = action.keyPath[0];
-          translateMessage(id, lang);
-        }
-      }}
+      onActionsClick={onActionsClick}
+      onAvatarsClick={onAvatarsClick}
       onMessageChange={(id, content) =>
         dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content })
       }

package/src/app/chat/features/{TopicListContent/SystemRole/Header.tsx → SidebarHeader/index.tsx}

@@ -9,13 +9,12 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-interface HeaderProps {
+interface SidebarHeaderProps {
   actions?: ReactNode;
-  mobile?: boolean;
-  title: string;
+  title: ReactNode;
 }
 
-const Header = memo<HeaderProps>(({ title, actions }) => {
+const SidebarHeader = memo<SidebarHeaderProps>(({ title, actions }) => {
   const { styles } = useStyles();
 
   return (
@@ -24,15 +23,17 @@ const Header = memo<HeaderProps>(({ title, actions }) => {
       className={styles.header}
       distribution={'space-between'}
       horizontal
-      padding={12}
+      padding={14}
       paddingInline={16}
     >
-      <Flexbox>{title}</Flexbox>
-      <Flexbox gap={4} horizontal>
+      <Flexbox align={'center'} gap={4} horizontal>
+        {title}
+      </Flexbox>
+      <Flexbox align={'center'} gap={2} horizontal>
         {actions}
       </Flexbox>
     </Flexbox>
   );
 });
 
-export default Header;
+export default SidebarHeader;