@lobehub/chat 0.35.0 → 0.35.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.35.1](https://github.com/lobehub/lobe-chat/compare/v0.35.0...v0.35.1)
+
+<sup>Released on **2023-07-31**</sup>
+
+#### 💄 Styles
+
+- **misc**: Update doc mode and token tags.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Update doc mode and token tags ([1d3c5b6](https://github.com/lobehub/lobe-chat/commit/1d3c5b6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.35.0](https://github.com/lobehub/lobe-chat/compare/v0.34.0...v0.35.0)
 
 <sup>Released on **2023-07-31**</sup>

package/locales/en_US/common.json

@@ -1,33 +1,31 @@
 {
-  "DefaultSession": "Default Session",
   "about": "About",
   "advanceSettings": "Advanced Settings",
   "agentMaxToken": "Max Token Length",
   "agentModel": "Model",
   "agentProfile": "Agent Profile",
   "archive": "Archive",
-  "archiveCurrentMessages": "Archive Current Session",
   "autoGenerate": "Auto Generate",
   "autoGenerateTooltip": "Auto generate assistant description based on prompts",
   "cancel": "Cancel",
   "changelog": "Changelog",
-  "clearCurrentMessages": "Clear Current Session Messages",
+  "clearCurrentMessages": "Clear Current Messages",
   "close": "Close",
-  "confirmClearCurrentMessages": "You are about to clear the current session messages. Once cleared, they cannot be recovered. Please confirm your action.",
+  "confirmClearCurrentMessages": "You are about to clear the current messages. Once cleared, they cannot be recovered. Please confirm your action.",
   "confirmRemoveSessionItemAlert": "You are about to delete this assistant. Once deleted, it cannot be recovered. Please confirm your action.",
   "copy": "Copy",
-  "copySuccess": "Copy Success",
+  "copySuccess": "Copy Successful",
   "defaultAgent": "Default Assistant",
   "defaultSession": "Default Session",
   "delete": "Delete",
   "edit": "Edit",
-  "export": "Export",
+  "export": "Export Configuration",
   "exportType": {
-    "agent": "Export Agent Settings",
-    "agentWithMessage": "Export Agent Settings and Messages",
-    "all": "Export Global Settings and All Agent Data",
-    "allAgent": "Export All Agent Settings",
-    "allAgentWithMessage": "Export All Agent Settings and Messages",
+    "agent": "Export Assistant Settings",
+    "agentWithMessage": "Export Assistant and Messages",
+    "all": "Export Global Settings and All Assistant Data",
+    "allAgent": "Export All Assistant Settings",
+    "allAgentWithMessage": "Export All Assistants and Messages",
     "globalSetting": "Export Global Settings"
   },
   "feedback": "Feedback",
@@ -35,21 +33,19 @@
   "message": {
     "function_loading": "Plugin request in progress..."
   },
-  "moreSetting": "More settings...",
+  "moreSetting": "More Settings...",
   "newAgent": "New Assistant",
   "noDescription": "No description available",
   "ok": "OK",
-  "overload": "Exceed Limit",
   "pin": "Pin",
   "pinOff": "Unpin",
   "regenerate": "Regenerate",
   "rename": "Rename",
   "reset": "Reset",
-  "roleAndArchive": "Roles and Archives",
-  "searchAgentPlaceholder": "Search assistants and sessions...",
+  "roleAndArchive": "Roles and Archive",
+  "searchAgentPlaceholder": "Search Assistants and Sessions...",
   "send": "Send",
   "sendPlaceholder": "Enter chat content...",
-  "sessionSetting": "Session Settings",
   "setting": "Settings",
   "share": "Share",
   "tab": {
@@ -57,12 +53,17 @@
     "market": "Assistant Market"
   },
   "temp": "Temporary",
-  "tokenDetail": "System Role Token: {{systemRoleToken}} Chats Token: {{chatsToken}}",
+  "tokenDetail": "Role Setting: {{systemRoleToken}} · Chat History: {{chatsToken}}",
+  "tokenTag": {
+    "overload": "Exceeded Limit",
+    "remained": "Remaining",
+    "used": "Used"
+  },
   "topic": {
-    "saveCurrentMessages": "Save Current Conversation as Topic",
-    "searchPlaceholder": "Search Topics...",
     "confirmRemoveTopic": "You are about to delete this topic. Once deleted, it cannot be recovered. Please proceed with caution.",
-    "defaultTitle": "Default Topic"
+    "defaultTitle": "Default Topic",
+    "saveCurrentMessages": "Save the current session as a topic",
+    "searchPlaceholder": "Search Topics..."
   },
   "updateAgent": "Update Assistant Profile",
   "updatePrompt": "Update Prompts"

package/locales/en_US/plugin.json

@@ -1,14 +1,13 @@
 {
   "loading": {
-    "content": "Loading...",
+    "content": "Loading data...",
     "plugin": "Plugin is running..."
   },
   "pluginList": "Plugin List",
-  "pluginLoading": "Plugin Loading...",
   "plugins": {
     "realtimeWeather": "Real-time Weather Forecast",
     "searchEngine": "Search Engine",
-    "undefined": "Plugin Detection...",
+    "undefined": "Plugin detection in progress...",
     "websiteCrawler": "Website Content Extraction"
   },
   "realtimeWeather": {

package/locales/en_US/setting.json

@@ -1,16 +1,15 @@
 {
-  "agentHeader": "Edit Assistant Information",
   "danger": {
     "clear": {
       "action": "Clear Now",
-      "confirm": "Are you sure you want to clear all chat and settings data?",
-      "desc": "Clear all chat and settings data",
-      "title": "Clear All Data",
-      "success": "All session messages have been cleared."
+      "confirm": "Confirm clearing all chat data?",
+      "desc": "Clear all session data",
+      "success": "All session messages have been cleared",
+      "title": "Clear All Session Messages"
     },
     "reset": {
       "action": "Reset Now",
-      "confirm": "Are you sure you want to reset all settings?",
+      "confirm": "Confirm resetting all settings?",
       "currentVersion": "Current Version",
       "desc": "Reset all settings to default values",
       "title": "Reset All Settings"
@@ -25,34 +24,41 @@
     "avatar": {
       "title": "Avatar"
     },
+    "backgroundColor": {
+      "title": "Background Color"
+    },
     "description": {
-      "placeholder": "Please enter assistant description",
+      "placeholder": "Enter assistant description",
       "title": "Assistant Description"
     },
     "name": {
-      "placeholder": "Please enter assistant name",
+      "placeholder": "Enter assistant name",
       "title": "Name"
     },
     "prompt": {
-      "placeholder": "Please enter AI prompt",
-      "title": "Assistant Role"
+      "placeholder": "Enter role prompt",
+      "title": "Role Prompt"
     },
     "tag": {
-      "placeholder": "Please enter tags",
-      "title": "Tags"
+      "placeholder": "Enter tag",
+      "title": "Tag"
     },
-    "title": "Assistant Information",
-    "backgroundColor": {
-      "title": "Background Color"
-    }
+    "title": "Assistant Information"
   },
   "settingChat": {
+    "chatStyleType": {
+      "title": "Chat Window Style",
+      "type": {
+        "chat": "Chat Mode",
+        "docs": "Document Mode"
+      }
+    },
     "compressThreshold": {
-      "desc": "When the uncompressed chat history exceeds this value, it will be compressed",
-      "title": "Chat History Compression Threshold"
+      "desc": "When the uncompressed history messages exceed this value, compression will be performed",
+      "title": "History Message Length Compression Threshold"
     },
     "enableCompressThreshold": {
-      "title": "Enable Chat History Compression Threshold"
+      "title": "Enable History Message Length Compression Threshold"
     },
     "enableHistoryCount": {
       "title": "Enable History Message Count Limit"
@@ -63,24 +69,17 @@
     },
     "inputTemplate": {
       "desc": "The latest user message will be filled into this template",
-      "title": "User Input Preprocessing",
-      "placeholder": "Enter pre-processing template, {text} will be replaced with real-time input information"
+      "placeholder": "Enter the input template, {text} will be replaced with real-time input",
+      "title": "User Input Preprocessing"
     },
-    "title": "Chat Settings",
-    "chatStyleType": {
-      "title": "Chat Window Style",
-      "type": {
-        "chat": "Chat Mode",
-        "docs": "Document Mode"
-      }
-    }
+    "title": "Chat Settings"
   },
   "settingModel": {
     "enableMaxTokens": {
       "title": "Enable Single Reply Limit"
     },
     "frequencyPenalty": {
-      "desc": "The higher the value, the more likely it is to reduce repeated words",
+      "desc": "The larger the value, the more likely it is to reduce repeated words",
       "title": "Frequency Penalty"
     },
     "maxTokens": {
@@ -98,18 +97,18 @@
       "title": "Model"
     },
     "presencePenalty": {
-      "desc": "The higher the value, the more likely it is to expand to new topics",
+      "desc": "The larger the value, the more likely it is to expand to new topics",
       "title": "Topic Freshness"
     },
     "temperature": {
-      "desc": "The higher the value, the more random the reply",
+      "desc": "The larger the value, the more random the reply",
       "title": "Randomness",
       "titleWithValue": "Randomness {{value}}"
     },
     "title": "Model Settings",
     "topP": {
       "desc": "Similar to randomness, but do not change together with randomness",
-      "title": "Nucleus Sampling"
+      "title": "Top-p Sampling"
     }
   },
   "settingOpenAI": {
@@ -130,8 +129,8 @@
   },
   "settingSystem": {
     "accessCode": {
-      "desc": "Encrypted access has been enabled by the administrator",
-      "placeholder": "Please enter access password",
+      "desc": "Encryption access has been enabled by the administrator",
+      "placeholder": "Enter access password",
       "title": "Access Password"
     },
     "title": "System Settings"

package/locales/zh_CN/common.json

@@ -37,7 +37,6 @@
   "newAgent": "新建助手",
   "noDescription": "暂无描述",
   "ok": "确定",
-  "overload": "超过限制",
   "pin": "置顶",
   "pinOff": "取消置顶",
   "regenerate": "重新生成",
@@ -54,7 +53,12 @@
     "market": "助手市场"
   },
   "temp": "临时",
-  "tokenDetail": "系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}",
+  "tokenDetail": "角色设定: {{systemRoleToken}} · 历史消息: {{chatsToken}}",
+  "tokenTag": {
+    "overload": "超过限制",
+    "remained": "剩余",
+    "used": "使用"
+  },
   "topic": {
     "confirmRemoveTopic": "即将删除该话题，删除后将不可恢复，请谨慎操作。",
     "defaultTitle": "默认话题",

package/locales/zh_CN/setting.json

@@ -36,8 +36,8 @@
       "title": "名称"
     },
     "prompt": {
-      "placeholder": "请输入 AI 提示词",
-      "title": "助手角色"
+      "placeholder": "请输入角色 Prompt 提示词",
+      "title": "角色设定"
     },
     "tag": {
       "placeholder": "请输入标签",

package/package.json

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

package/src/features/AgentSetting/AgentPrompt/index.tsx

@@ -11,15 +11,11 @@ import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
-  input: css`
-    padding: 12px;
-    background: ${token.colorFillTertiary};
-    border: 1px solid ${token.colorPrimaryBorder};
-    border-radius: 8px;
-  `,
-  markdown: css`
-    padding: 12px;
-    background: ${token.colorFillTertiary};
+  token: css`
+    padding-left: 8px;
+    background: ${token.colorBgLayout};
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusSM}px;
   `,
 }));
 
@@ -30,14 +26,24 @@ export interface AgentPromptProps {
 
 const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
-
+  const { styles } = useStyles();
   const { systemRole, model } = config;
   const systemTokenCount = useMemo(() => encode(systemRole || '').length, [systemRole]);
 
   return (
     <FormGroup
       extra={
-        <TokenTag displayMode={'used'} maxValue={ModelTokens[model]} value={systemTokenCount} />
+        <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}
+        />
       }
       icon={Bot}
       style={FORM_STYLE.style}
@@ -46,9 +52,9 @@ const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
       <CodeEditor
         language={'md'}
         onValueChange={(e) => updateConfig({ systemRole: e })}
-        placeholder={t('settingAgent.name.placeholder')}
+        placeholder={t('settingAgent.prompt.placeholder')}
         resize={false}
-        style={{ marginTop: 16 }}
+        style={{ padding: '16px 0' }}
         type={'pure'}
         value={systemRole}
       />

package/src/locales/default/common.ts

@@ -37,7 +37,6 @@ export default {
   newAgent: '新建助手',
   noDescription: '暂无描述',
   ok: '确定',
-  overload: '超过限制',
   pin: '置顶',
   pinOff: '取消置顶',
   regenerate: '重新生成',
@@ -54,7 +53,12 @@ export default {
     market: '助手市场',
   },
   temp: '临时',
-  tokenDetail: '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
+  tokenDetail: '角色设定: {{systemRoleToken}} · 历史消息: {{chatsToken}}',
+  tokenTag: {
+    overload: '超过限制',
+    remained: '剩余',
+    used: '使用',
+  },
   topic: {
     confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
     defaultTitle: '默认话题',

package/src/locales/default/setting.ts

@@ -36,8 +36,8 @@ export default {
       title: '名称',
     },
     prompt: {
-      placeholder: '请输入 AI 提示词',
-      title: '助手角色',
+      placeholder: '请输入角色 Prompt 提示词',
+      title: '角色设定',
     },
     tag: {
       placeholder: '请输入标签',

package/src/locales/resources/en_US.ts

@@ -1,11 +1,3 @@
-import common from '../../../locales/en_US/common.json';
-import plugin from '../../../locales/en_US/plugin.json';
-import setting from '../../../locales/en_US/setting.json';
-
-const resources = {
-  common,
-  plugin,
-  setting,
-} as const;
+const resources = {} as const;
 
 export default resources;

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

@@ -2,7 +2,7 @@ import { ActionIcon, Avatar, Icon, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
 import { App, Dropdown, type MenuProps, Tag } from 'antd';
 import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
-import { FC, memo, useMemo, useRef } from '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';
@@ -22,13 +22,13 @@ interface SessionItemProps {
 }
 
 const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading }) => {
+  const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const isHovering = useHover(ref);
 
   const { t } = useTranslation('common');
-  const isHighlight = isHovering;
 
-  const { styles, theme, cx } = useStyles(isHighlight);
+  const { styles, theme } = useStyles();
   const [defaultModel] = useSettings((s) => [s.settings.model], shallow);
 
   const [
@@ -50,7 +50,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
     return [
       session.pinned,
       agentSelectors.getTitle(meta),
-      meta.description,
+      agentSelectors.getDescription(meta),
       systemRole,
       agentSelectors.getAvatar(meta),
       meta.backgroundColor,
@@ -115,49 +115,15 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         },
       },
     ],
-    [id],
+    [id, pin],
   );
 
   const showModel = model !== defaultModel;
   const showChatLength = chatLength > 0;
 
   return (
-    <div ref={ref}>
-      <Flexbox className={cx(styles.container, pin && styles.pin)} style={{ position: 'relative' }}>
-        <Item
-          active={active}
-          avatar={
-            <Avatar
-              animation={isHovering}
-              avatar={avatar}
-              background={avatarBackground}
-              shape="circle"
-              size={46}
-              title={title}
-            />
-          }
-          className={isHighlight ? styles.hover : undefined}
-          classNames={{ time: cx('session-time', styles.time) }}
-          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>
-          }
-          loading={loading}
-          style={{ color: theme.colorText }}
-          title={title}
-        />
+    <Item
+      actions={
         <Dropdown
           arrow={false}
           menu={{
@@ -166,23 +132,54 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
               domEvent.stopPropagation();
             },
           }}
+          onOpenChange={setOpen}
+          open={open}
           trigger={['click']}
         >
           <ActionIcon
-            className="session-remove"
             icon={MoreVertical}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
             size={{
               blockSize: 28,
               fontSize: 16,
             }}
           />
         </Dropdown>
-      </Flexbox>
-    </div>
+      }
+      active={active}
+      avatar={
+        <Avatar
+          animation={isHovering}
+          avatar={avatar}
+          background={avatarBackground}
+          shape="circle"
+          size={46}
+          title={title}
+        />
+      }
+      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>
+      }
+      loading={loading}
+      pin={pin}
+      ref={ref}
+      showAction={open || isHovering}
+      style={{ color: theme.colorText }}
+      title={title}
+    />
   );
 }, shallow);
 

package/src/pages/chat/SessionList/List/style.ts

@@ -1,11 +1,8 @@
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 
-export const useStyles = createStyles(({ css, token }, isHighlight: boolean) => {
+export const useStyles = createStyles(({ css, token }) => {
   return {
-    active: css`
-      display: flex;
-    `,
     button: css`
       position: sticky;
       z-index: 30;
@@ -24,34 +21,9 @@ export const useStyles = createStyles(({ css, token }, isHighlight: boolean) =>
     `,
     container: css`
       position: relative;
-
-      .session-remove {
-        position: absolute;
-        top: 50%;
-        right: 16px;
-        transform: translateY(-50%);
-
-        opacity: ${isHighlight ? 1 : 0};
-      }
-
-      .session-time {
-        opacity: ${isHighlight ? 0 : 1};
-        transition: opacity 100ms ${token.motionEaseOut};
-      }
-
-      &:hover {
-        .session-time {
-          opacity: 0;
-        }
-
-        .session-remove {
-          opacity: 1;
-        }
-      }
-    `,
-    hover: css`
-      background-color: ${token.colorFillSecondary};
+      height: 72px;
     `,
+
     modalRoot: css`
       z-index: 2000;
     `,

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

@@ -19,10 +19,10 @@ const APIKeyForm = memo<{ onConfirm?: () => void }>(({ onConfirm }) => {
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>
-      <Avatar avatar={'🔑'} background={theme.colorText} gap={12} size={80} />
+      <Avatar avatar={'🔑'} background={theme.colorFillContent} gap={12} size={80} />
       <Flexbox style={{ fontSize: 20 }}>{t('unlock.apikey.title')}</Flexbox>
       <Flexbox className={styles.desc}>{t('unlock.apikey.description')}</Flexbox>
-      <Input
+      <Input.Password
         onChange={(e) => {
           setSettings({ OPENAI_API_KEY: e.target.value });
         }}

package/src/pages/chat/[id]/Conversation/Input/Token.tsx

@@ -23,10 +23,14 @@ const Token = memo<{ input: string }>(({ input }) => {
   );
 
   return (
-    <Tooltip title={t('tokenDetail', { chatsToken, systemRoleToken })}>
+    <Tooltip placement={'bottom'} title={t('tokenDetail', { chatsToken, systemRoleToken })}>
       <TokenTag
         maxValue={ModelTokens[model]}
-        text={{ overload: t('overload') }}
+        text={{
+          overload: t('tokenTag.overload'),
+          remained: t('tokenTag.remained'),
+          used: t('tokenTag.used'),
+        }}
         value={totalToken + inputTokenCount}
       />
     </Tooltip>

package/src/pages/chat/[id]/index.page.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { sessionSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Layout from '../layout';
@@ -12,12 +12,12 @@ import Header from './Header';
 import Config from './Sidebar';
 
 const Chat = memo(() => {
-  const [title] = useSessionStore((s) => {
-    const context = sessionSelectors.currentSession(s);
-    return [context?.meta.title];
-  }, isEqual);
+  const [avatar, title] = useSessionStore(
+    (s) => [agentSelectors.currentAgentAvatar(s), agentSelectors.currentAgentTitle(s)],
+    isEqual,
+  );
 
-  const pageTitle = genSiteHeadTitle(title);
+  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
 
   return (
     <>

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

@@ -62,7 +62,10 @@ const hasSystemRole = (s: SessionStore) => {
 };
 
 export const getAvatar = (s: MetaData) => s.avatar || DEFAULT_AVATAR;
-export const getTitle = (s: MetaData) => s.title || t('defaultSession');
+export const getTitle = (s: MetaData) => s.title || t('defaultSession', { ns: 'common' });
+
+export const getDescription = (s: MetaData) =>
+  s.description || t('noDescription', { ns: 'common' });
 
 export const agentSelectors = {
   currentAgentAvatar,
@@ -75,6 +78,7 @@ export const agentSelectors = {
   currentAgentTitle,
   currentAutocomplete,
   getAvatar,
+  getDescription,
   getTitle,
   hasSystemRole,
 };