@lobehub/chat 0.39.3 → 0.40.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 0.40.0](https://github.com/lobehub/lobe-chat/compare/v0.39.4...v0.40.0)
+
+<sup>Released on **2023-08-05**</sup>
+
+#### ✨ Features
+
+- **misc**: Add new dependency, add Tag and PluginTag components, update HeaderTitle.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add new dependency, add Tag and PluginTag components, update HeaderTitle, closes [#56](https://github.com/lobehub/lobe-chat/issues/56) [#55](https://github.com/lobehub/lobe-chat/issues/55) [#54](https://github.com/lobehub/lobe-chat/issues/54) ([2812ea2](https://github.com/lobehub/lobe-chat/commit/2812ea2))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.39.4](https://github.com/lobehub/lobe-chat/compare/v0.39.3...v0.39.4)
+
+<sup>Released on **2023-08-05**</sup>
+
+#### 💄 Styles
+
+- **misc**: 修正 assistant 消息没有 background 的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: 修正 assistant 消息没有 background 的问题, closes [#42](https://github.com/lobehub/lobe-chat/issues/42) ([812e976](https://github.com/lobehub/lobe-chat/commit/812e976))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.39.3](https://github.com/lobehub/lobe-chat/compare/v0.39.2...v0.39.3)
 
 <sup>Released on **2023-08-04**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.39.3",
+  "version": "0.40.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -64,6 +64,7 @@
     "@commitlint/cli": "^17",
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
+    "@icons-pack/react-simple-icons": "^8",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
     "ahooks": "^3",

package/src/components/Empty/index.tsx

@@ -1,21 +1,21 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, DivProps } from '@lobehub/ui';
 import { X } from 'lucide-react';
 import { memo, useState } from 'react';
 
 import { useStyles } from './style';
 
-interface EmptyProps {
+interface EmptyProps extends DivProps {
   cover: string;
   desc: string;
   title: string;
 }
 
-const Empty = memo<EmptyProps>(({ cover, title, desc }) => {
+const Empty = memo<EmptyProps>(({ cover, title, desc, ...props }) => {
   const [visiable, setVisiable] = useState(true);
   const { styles } = useStyles();
   if (!visiable) return null;
   return (
-    <div className={styles.container}>
+    <div className={styles.container} {...props}>
       <ActionIcon
         className={styles.close}
         icon={X}

package/src/components/HeaderTitle/index.tsx

@@ -3,16 +3,41 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+    max-width: 100%;
+  `,
   desc: css`
+    overflow: hidden;
+
+    width: 100%;
+
     font-size: 12px;
     color: ${token.colorTextTertiary};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  tag: css`
+    flex: none;
   `,
   title: css`
+    overflow: hidden;
+
     font-size: 16px;
     font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  titleContainer: css`
+    flex: 1;
   `,
   titleWithDesc: css`
+    overflow: hidden;
     font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   `,
 }));
 
@@ -26,20 +51,24 @@ const HeaderTitle = memo<HeaderTitleProps>(({ title, desc, tag }) => {
   const { styles } = useStyles();
   if (desc)
     return (
-      <Flexbox>
-        <Flexbox align={'center'} className={styles.titleWithDesc} gap={8} horizontal>
-          {title}
-          {tag}
+      <Flexbox className={styles.container}>
+        <Flexbox align={'center'} className={styles.titleContainer} gap={8} horizontal>
+          <div className={styles.titleWithDesc}>{title}</div>
+          <Flexbox className={styles.tag} horizontal>
+            {tag}
+          </Flexbox>
         </Flexbox>
-        <Flexbox align={'center'} className={styles.desc} horizontal>
-          {desc}
+        <Flexbox align={'center'} horizontal>
+          <div className={styles.desc}>{desc}</div>
         </Flexbox>
       </Flexbox>
     );
   return (
-    <Flexbox align={'center'} className={styles.title} gap={8} horizontal>
-      {title}
-      {tag}
+    <Flexbox align={'center'} className={styles.container} gap={8} horizontal>
+      <div className={styles.title}>{title}</div>
+      <Flexbox className={styles.tag} horizontal>
+        {tag}
+      </Flexbox>
     </Flexbox>
   );
 });

package/src/components/Tag/PluginTag.tsx

@@ -0,0 +1,38 @@
+import { Avatar } from '@lobehub/ui';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PluginsMap } from '@/plugins';
+
+import Tag from './index';
+
+export interface PluginTagProps {
+  plugins: string[];
+}
+
+const PluginTag = memo<PluginTagProps>(({ plugins }) => {
+  const { t } = useTranslation('plugin');
+
+  if (plugins.length === 0) return <Tag type={'plugin'}>{t(`plugins.${plugins[0]}` as any)}</Tag>;
+
+  const items: MenuProps['items'] = plugins.map((id) => ({
+    icon: (
+      <Avatar avatar={PluginsMap[id].avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />
+    ),
+    key: id,
+    label: t(`plugins.${id}` as any),
+  }));
+  return (
+    <Dropdown menu={{ items }}>
+      <div style={{ height: 20 }}>
+        <Tag count={plugins.length} type={'plugin'}>
+          {t(`plugins.${plugins[0]}` as any)}
+        </Tag>
+      </div>
+    </Dropdown>
+  );
+});
+
+export default PluginTag;

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,79 @@
+import { SiOpenai } from '@icons-pack/react-simple-icons';
+import { Tag as AntTag, type TagProps as AntTagProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { capitalize as cap } from 'lodash-es';
+import { type LucideIcon, Milestone, ToyBrick } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ cx, css, token }, hasCount?: boolean) => ({
+  count: css`
+    display: flex;
+    align-items: center;
+
+    height: 20px;
+    padding: 0 8px;
+
+    font-size: 12px;
+    line-height: 1;
+
+    background: ${token.colorFillTertiary};
+    border: ${token.borderRadius}px;
+  `,
+  tag: cx(
+    css`
+      color: ${token.colorTextSecondary} !important;
+      background: ${token.colorFillSecondary};
+      border: ${token.borderRadius}px;
+
+      &:hover {
+        color: ${token.colorText};
+        background: ${token.colorFill};
+      }
+    `,
+    hasCount &&
+      css`
+        padding-right: 0 !important;
+      `,
+  ),
+}));
+
+export interface TagProps extends AntTagProps {
+  capitalize?: boolean;
+  children: string;
+  count?: number;
+  icon?: ReactNode;
+  type?: 'openai' | 'plugin' | 'version';
+}
+
+const Tag = memo<TagProps>(({ type = 'openai', icon, capitalize, count, children, ...props }) => {
+  const { styles } = useStyles(Boolean(count && count > 1));
+  let IconRender: LucideIcon | any;
+
+  switch (type) {
+    case 'openai': {
+      IconRender = SiOpenai;
+      break;
+    }
+    case 'version': {
+      IconRender = Milestone;
+      break;
+    }
+    case 'plugin': {
+      IconRender = ToyBrick;
+      break;
+    }
+  }
+
+  return (
+    <AntTag bordered={false} className={styles.tag} {...props}>
+      <Flexbox align={'center'} gap={4} horizontal>
+        {icon ? icon : <IconRender size={'1em'} />}
+        {capitalize ? cap(children) : children}
+        {count && <div className={styles.count}>{`${count}+`}</div>}
+      </Flexbox>
+    </AntTag>
+  );
+});
+
+export default Tag;

package/src/components/Tag/index.tsx

@@ -0,0 +1,2 @@
+export { default as PluginTag } from './PluginTag';
+export { default } from './Tag';

package/src/pages/chat/SessionList/List/SessionItem.tsx

@@ -1,12 +1,13 @@
 import { ActionIcon, Avatar, Icon, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { App, Dropdown, type MenuProps, Tag } from 'antd';
+import { App, Dropdown, type MenuProps } from 'antd';
 import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
 import { FC, memo, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import Tag from '@/components/Tag';
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { agentSelectors, chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
@@ -28,7 +29,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
 
   const { t } = useTranslation('common');
 
-  const { styles, theme } = useStyles();
+  const { styles } = useStyles();
   const [defaultModel] = useSettings((s) => [s.settings.defaultAgent.config?.model], shallow);
 
   const [
@@ -146,6 +147,17 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         </Dropdown>
       }
       active={active}
+      addon={
+        !(showModel || showChatLength) ? undefined : (
+          <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap' }}>
+            {showModel && (
+              <Tag capitalize type={'openai'}>
+                {model}
+              </Tag>
+            )}
+          </Flexbox>
+        )
+      }
       avatar={
         <Avatar
           animation={isHovering}
@@ -158,21 +170,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
       }
       className={styles.container}
       date={updateAt}
-      description={
-        <Flexbox gap={4}>
-          <Flexbox>{description || systemRole}</Flexbox>
-
-          {!(showModel || showChatLength) ? undefined : (
-            <Flexbox horizontal>
-              {showModel && (
-                <Tag bordered={false} style={{ color: theme.colorTextSecondary }}>
-                  {model}
-                </Tag>
-              )}
-            </Flexbox>
-          )}
-        </Flexbox>
-      }
+      description={description || systemRole}
       loading={loading}
       pin={pin}
       ref={ref}

package/src/pages/chat/[id]/Conversation/ChatList/MessageExtra.tsx

@@ -1,9 +1,9 @@
-import { Tag } from 'antd';
 import { createStyles } from 'antd-style';
 import { ReactNode } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import Tag from '@/components/Tag';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 
@@ -45,8 +45,8 @@ const MessageExtra = ({
 
   const modelTag = (
     <div>
-      <Tag bordered={false} style={{ borderRadius: 6 }}>
-        {extra?.fromModel}
+      <Tag capitalize type={'openai'}>
+        {extra?.fromModel as string}
       </Tag>
     </div>
   );

package/src/pages/chat/[id]/Header.tsx

@@ -1,5 +1,4 @@
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
-import { Tag } from 'antd';
 import { PanelRightClose, PanelRightOpen, Settings, Share2 } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
@@ -7,13 +6,14 @@ import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
 import HeaderTitle from '@/components/HeaderTitle';
+import Tag, { PluginTag } from '@/components/Tag';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
 const Header = memo(() => {
   const { t } = useTranslation('common');
 
-  const [title, description, avatar, backgroundColor, id, model] = useSessionStore(
+  const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore(
     (s) => [
       agentSelectors.currentAgentTitle(s),
       agentSelectors.currentAgentDescription(s),
@@ -21,6 +21,7 @@ const Header = memo(() => {
       agentSelectors.currentAgentBackgroundColor(s),
       s.activeId,
       agentSelectors.currentAgentModel(s),
+      agentSelectors.currentAgentPlugins(s),
     ],
     shallow,
   );
@@ -38,13 +39,24 @@ const Header = memo(() => {
             avatar={avatar}
             background={backgroundColor}
             onClick={() => {
-              Router.push(`/chat/${id}/edit`);
+              Router.push(`/chat/${id}/setting`);
             }}
             size={40}
-            style={{ cursor: 'pointer' }}
+            style={{ cursor: 'pointer', flex: 'none' }}
+            title={title}
+          />
+          <HeaderTitle
+            desc={description}
+            tag={
+              <>
+                <Tag capitalize type={'openai'}>
+                  {model}
+                </Tag>
+                {plugins?.length > 1 && <PluginTag plugins={plugins} />}
+              </>
+            }
             title={title}
           />
-          <HeaderTitle desc={description} tag={<Tag>{model}</Tag>} title={title} />
         </>
       }
       right={

package/src/pages/chat/[id]/Sidebar/Topic/index.tsx

@@ -19,6 +19,7 @@ export const Topic = () => {
         <Empty
           cover={`/images/empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`}
           desc={t('topic.desc')}
+          style={{ marginBottom: 6 }}
           title={t('topic.title')}
         />
       )}

package/src/pages/settings/Header.tsx

@@ -1,18 +1,23 @@
 import { ChatHeader } from '@lobehub/ui';
-import { Tag } from 'antd';
 import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import pkg from '@/../package.json';
 import HeaderTitle from '@/components/HeaderTitle';
+import Tag from '@/components/Tag';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
 
   return (
     <ChatHeader
-      left={<HeaderTitle tag={<Tag>{`v${pkg.version}`}</Tag>} title={t('header.global')} />}
+      left={
+        <HeaderTitle
+          tag={<Tag type={'version'}>{`v${pkg.version}`}</Tag>}
+          title={t('header.global')}
+        />
+      }
       onBackClick={() => Router.back()}
       showBackButton
     />

package/src/store/session/slices/agentConfig/selectors.ts

@@ -55,6 +55,12 @@ const currentAgentModel = (s: SessionStore): LanguageModel => {
   return config?.model || LanguageModel.GPT3_5;
 };
 
+const currentAgentPlugins = (s: SessionStore) => {
+  const config = currentAgentConfig(s);
+
+  return config?.plugins || [];
+};
+
 const hasSystemRole = (s: SessionStore) => {
   const config = currentAgentConfig(s);
 
@@ -74,6 +80,7 @@ export const agentSelectors = {
   currentAgentDescription,
   currentAgentMeta,
   currentAgentModel,
+  currentAgentPlugins,
   currentAgentSystemRole,
   currentAgentTitle,
   currentAutocomplete,

package/src/store/session/slices/chat/selectors/chat.ts

@@ -19,6 +19,7 @@ export const getChatsById =
       session,
       {
         assistant: agentSelectors.currentAgentAvatar(s),
+        assistantBackground: agentSelectors.currentAgentBackgroundColor(s),
         user: useSettings.getState().settings.avatar || DEFAULT_USER_AVATAR,
       },
       s.activeTopicId,

package/src/store/session/slices/chat/selectors/utils.ts

@@ -4,7 +4,7 @@ import { LobeAgentSession } from '@/types/session';
 
 export const organizeChats = (
   session: LobeAgentSession,
-  avatar: { assistant: string; user: string },
+  avatar: { assistant: string; assistantBackground?: string; user: string },
   topicId?: string,
 ) => {
   const getMeta = (message: ChatMessage) => {
@@ -22,6 +22,7 @@ export const organizeChats = (
       case 'assistant': {
         return {
           avatar: avatar.assistant,
+          backgroundColor: avatar.assistantBackground,
           title: session.meta.title,
         };
       }