@lobehub/chat 0.40.3 → 0.40.5

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.40.5](https://github.com/lobehub/lobe-chat/compare/v0.40.4...v0.40.5)
+
+<sup>Released on **2023-08-10**</sup>
+
+#### 💄 Styles
+
+- **misc**: 增加未初始化的 loading 态.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: 增加未初始化的 loading 态 ([dcb7c07](https://github.com/lobehub/lobe-chat/commit/dcb7c07))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.40.4](https://github.com/lobehub/lobe-chat/compare/v0.40.3...v0.40.4)
+
+<sup>Released on **2023-08-10**</sup>
+
+#### 💄 Styles
+
+- **misc**: 优化 Header 样式.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: 优化 Header 样式 ([edd148a](https://github.com/lobehub/lobe-chat/commit/edd148a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.40.3](https://github.com/lobehub/lobe-chat/compare/v0.40.2...v0.40.3)
 
 <sup>Released on **2023-08-10**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.40.3",
+  "version": "0.40.5",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/components/Tag/index.tsx

@@ -1,2 +1,51 @@
-export { default as PluginTag } from './PluginTag';
-export { default } from './Tag';
+import { Tag as AntTag, type TagProps as AntTagProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ cx, css, token }) => ({
+  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};
+      }
+    `,
+  ),
+}));
+
+export interface TagProps extends AntTagProps {
+  icon?: ReactNode;
+}
+
+const Tag = memo<TagProps>(({ icon, children, ...props }) => {
+  const { styles } = useStyles();
+
+  return (
+    <AntTag bordered={false} className={styles.tag} {...props}>
+      <Flexbox align={'center'} gap={4} horizontal>
+        {icon}
+        {children}
+      </Flexbox>
+    </AntTag>
+  );
+});
+
+export default Tag;

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

@@ -1,13 +1,12 @@
 import { ActionIcon, Avatar, Icon, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { App, Dropdown, type MenuProps } from 'antd';
+import { App, Dropdown, type MenuProps, Tag } 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';
@@ -150,11 +149,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
       addon={
         !(showModel || showChatLength) ? undefined : (
           <Flexbox gap={4} horizontal style={{ flexWrap: 'wrap' }}>
-            {showModel && (
-              <Tag capitalize type={'openai'}>
-                {model}
-              </Tag>
-            )}
+            {showModel && <Tag bordered={false}>{model}</Tag>}
           </Flexbox>
         )
       }

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

@@ -0,0 +1,47 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css }) => ({
+  avatar: css``,
+  paragraph: css`
+    height: 12px !important;
+    margin-top: 12px !important;
+
+    > li {
+      height: 12px !important;
+    }
+  `,
+  title: css`
+    height: 14px !important;
+    margin-top: 4px !important;
+    margin-bottom: 12px !important;
+
+    > li {
+      height: 14px !important;
+    }
+  `,
+}));
+
+//  从 3~10 随机取一个整数
+
+const SkeletonItem = () => {
+  const { styles } = useStyles();
+
+  const list = Array.from({ length: 4 }).fill('');
+  return (
+    <Flexbox gap={8} paddingInline={16}>
+      {list.map((_, index) => (
+        <Skeleton
+          active
+          avatar
+          key={index}
+          paragraph={{ className: styles.paragraph, rows: 1 }}
+          round
+          title={{ className: styles.title }}
+        />
+      ))}
+    </Flexbox>
+  );
+};
+export default SkeletonItem;

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

@@ -1,20 +1,32 @@
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
 import SessionItem from './SessionItem';
+import SkeletonItem from './SkeletonItem';
 
 const SessionList = memo(() => {
+  const [isInit, setInit] = useState(false);
   const list = useSessionStore((s) => sessionSelectors.sessionList(s), isEqual);
   const [activeId, loading] = useSessionStore(
     (s) => [s.activeId, s.autocompleteLoading.title],
     shallow,
   );
 
-  return (
+  useEffect(() => {
+    const hasRehydrated = useSessionStore.persist.hasHydrated();
+
+    if (hasRehydrated) {
+      setInit(true);
+    }
+  }, []);
+
+  return !isInit ? (
+    <SkeletonItem />
+  ) : (
     <>
       {list.map(({ id }) => (
         <Link href={`/chat/${id}`} key={id}>

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

@@ -45,9 +45,7 @@ const MessageExtra = ({
 
   const modelTag = (
     <div>
-      <Tag capitalize type={'openai'}>
-        {extra?.fromModel as string}
-      </Tag>
+      <Tag>{extra?.fromModel as string}</Tag>
     </div>
   );
 

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

@@ -74,6 +74,7 @@ const FunctionCall = memo<FunctionCallProps>(({ function_call, loading, content
               label: t('debug.response'),
             },
           ]}
+          style={{ maxWidth: 800 }}
         />
       )}
     </Flexbox>

package/src/{components/Tag → pages/chat/[id]/Header}/PluginTag.tsx

@@ -1,13 +1,13 @@
-import { Avatar } from '@lobehub/ui';
+import { Avatar, Icon } from '@lobehub/ui';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
+import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import Tag from '@/components/Tag';
 import { PluginsMap } from '@/plugins';
 
-import Tag from './index';
-
 export interface PluginTagProps {
   plugins: string[];
 }
@@ -15,7 +15,7 @@ export interface PluginTagProps {
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
   const { t } = useTranslation('plugin');
 
-  if (plugins.length === 0) return <Tag type={'plugin'}>{t(`plugins.${plugins[0]}` as any)}</Tag>;
+  if (plugins.length === 0) return null;
 
   const items: MenuProps['items'] = plugins.map((id) => ({
     icon: (
@@ -24,11 +24,15 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
     key: id,
     label: t(`plugins.${id}` as any),
   }));
+  const count = plugins.length;
+
   return (
     <Dropdown menu={{ items }}>
-      <div style={{ height: 20 }}>
-        <Tag count={plugins.length} type={'plugin'}>
+      <div>
+        <Tag>
+          {<Icon icon={LucideToyBrick} />}
           {t(`plugins.${plugins[0]}` as any)}
+          {count > 1 && <div>({plugins.length - 1}+)</div>}
         </Tag>
       </div>
     </Dropdown>

package/src/pages/chat/[id]/{Header.tsx → Header/index.tsx}

@@ -1,15 +1,19 @@
+import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
-import { PanelRightClose, PanelRightOpen, Settings, Share2 } from 'lucide-react';
+import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import HeaderTitle from '@/components/HeaderTitle';
-import Tag, { PluginTag } from '@/components/Tag';
+import Tag from '@/components/Tag';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
+import PluginTag from './PluginTag';
+
 const Header = memo(() => {
   const { t } = useTranslation('common');
 
@@ -34,7 +38,7 @@ const Header = memo(() => {
   return (
     <ChatHeader
       left={
-        <>
+        <Flexbox align={'flex-start'} horizontal>
           <Avatar
             avatar={avatar}
             background={backgroundColor}
@@ -49,27 +53,28 @@ const Header = memo(() => {
             desc={description}
             tag={
               <>
-                <Tag capitalize type={'openai'}>
+                <Tag>
+                  <SiOpenai size={'11px'} style={{ marginTop: 3 }} />
                   {model}
                 </Tag>
-                {plugins?.length > 1 && <PluginTag plugins={plugins} />}
+                {plugins?.length > 0 && <PluginTag plugins={plugins} />}
               </>
             }
             title={title}
           />
-        </>
+        </Flexbox>
       }
       right={
         id && (
           <>
-            <ActionIcon
-              icon={Share2}
-              onClick={() => {
-                // genShareUrl();
-              }}
-              size={{ fontSize: 24 }}
-              title={t('share')}
-            />
+            {/*<ActionIcon*/}
+            {/*  icon={Share2}*/}
+            {/*  onClick={() => {*/}
+            {/*    // genShareUrl();*/}
+            {/*  }}*/}
+            {/*  size={{ fontSize: 24 }}*/}
+            {/*  title={t('share')}*/}
+            {/*/>*/}
             <ActionIcon
               icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
               onClick={() => toggleConfig()}

package/src/pages/settings/Header.tsx

@@ -12,12 +12,7 @@ const Header = memo(() => {
 
   return (
     <ChatHeader
-      left={
-        <HeaderTitle
-          tag={<Tag type={'version'}>{`v${pkg.version}`}</Tag>}
-          title={t('header.global')}
-        />
-      }
+      left={<HeaderTitle tag={<Tag>{`v${pkg.version}`}</Tag>} title={t('header.global')} />}
       onBackClick={() => Router.back()}
       showBackButton
     />

package/src/components/Tag/Tag.tsx

@@ -1,79 +0,0 @@
-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;