@lobehub/chat 0.40.2 → 0.40.4

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [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>
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正没有 prompt 的编辑与保存按钮的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: 修正没有 prompt 的编辑与保存按钮的问题 ([b7e1648](https://github.com/lobehub/lobe-chat/commit/b7e1648))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.40.2](https://github.com/lobehub/lobe-chat/compare/v0.40.1...v0.40.2)
 
 <sup>Released on **2023-08-08**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.40.2",
+  "version": "0.40.4",
   "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/features/AgentSetting/AgentPrompt/index.tsx

@@ -1,9 +1,11 @@
-import { CodeEditor, FormGroup, TokenTag } from '@lobehub/ui';
+import { EditableMessage, FormGroup, TokenTag } from '@lobehub/ui';
+import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { encode } from 'gpt-tokenizer';
 import { Bot } from 'lucide-react';
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelTokens } from '@/const/modelTokens';
@@ -11,11 +13,16 @@ import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
-  token: css`
-    padding-left: 8px;
-    background: ${token.colorBgLayout};
-    border: 1px solid ${token.colorBorder};
-    border-radius: ${token.borderRadiusSM}px;
+  input: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorPrimaryBorder};
+    border-radius: 8px;
+  `,
+  markdown: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+    border: 1px solid transparent;
   `,
 }));
 
@@ -27,37 +34,55 @@ export interface AgentPromptProps {
 const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
+  const [editing, setEditing] = useState(false);
   const { systemRole, model } = config;
   const systemTokenCount = useMemo(() => encode(systemRole || '').length, [systemRole]);
 
   return (
     <FormGroup
       extra={
-        <TokenTag
-          className={styles.token}
-          displayMode={'used'}
-          maxValue={ModelTokens[model]}
-          text={{
-            overload: t('tokenTag.overload', { ns: 'common' }),
-            remained: t('tokenTag.remained', { ns: 'common' }),
-            used: t('tokenTag.used', { ns: 'common' }),
-          }}
-          value={systemTokenCount}
-        />
+        <Flexbox align={'center'} gap={8} horizontal>
+          <TokenTag
+            displayMode={'used'}
+            maxValue={ModelTokens[model]}
+            text={{
+              overload: t('tokenTag.overload', { ns: 'common' }),
+              remained: t('tokenTag.remained', { ns: 'common' }),
+              used: t('tokenTag.used', { ns: 'common' }),
+            }}
+            value={systemTokenCount}
+          />
+        </Flexbox>
       }
       icon={Bot}
       style={FORM_STYLE.style}
       title={t('settingAgent.prompt.title')}
     >
-      <CodeEditor
-        language={'md'}
-        onValueChange={(e) => updateConfig({ systemRole: e })}
-        placeholder={t('settingAgent.prompt.placeholder')}
-        resize={false}
-        style={{ padding: '16px 0' }}
-        type={'pure'}
-        value={systemRole}
-      />
+      <Flexbox gap={16} paddingBlock={16}>
+        <EditableMessage
+          classNames={styles}
+          editing={editing}
+          onChange={(e) => {
+            updateConfig({ systemRole: e });
+          }}
+          onEditingChange={setEditing}
+          showEditWhenEmpty
+          value={systemRole}
+        />
+        {!editing && !!systemRole && (
+          <Flexbox direction={'horizontal-reverse'}>
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                setEditing(true);
+              }}
+              type={'primary'}
+            >
+              {t('edit', { ns: 'common' })}
+            </Button>
+          </Flexbox>
+        )}
+      </Flexbox>
     </FormGroup>
   );
 });

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/[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;