@lobehub/chat 0.22.2 → 0.24.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 # Changelog
 
+# [0.24.0](https://github.com/lobehub/lobe-chat/compare/v0.23.0...v0.24.0) (2023-07-26)
+
+### ✨ Features
+
+- Add new translations, update existing translations, add functionality to components, modify styling, and adjust placeholder text ([da4ae72](https://github.com/lobehub/lobe-chat/commit/da4ae72))
+
+# [0.23.0](https://github.com/lobehub/lobe-chat/compare/v0.22.2...v0.23.0) (2023-07-26)
+
+### ✨ Features
+
+- Add new features, update URLs, customize appearance, and implement components ([4b61bf4](https://github.com/lobehub/lobe-chat/commit/4b61bf4))
+
 ### [Version 0.22.2](https://github.com/lobehub/lobe-chat/compare/v0.22.1...v0.22.2)
 
 <sup>Released on **2023-07-26**</sup>

package/locales/en_US/common.json

@@ -1,5 +1,6 @@
 {
   "DefaultSession": "Default Session",
+  "about": "About",
   "advanceSettings": "Advanced Settings",
   "agentMaxToken": "Max Token Length",
   "agentModel": "Model",
@@ -9,25 +10,50 @@
   "autoGenerate": "Auto Generate",
   "autoGenerateTooltip": "Auto generate assistant description based on prompts",
   "cancel": "Cancel",
+  "changelog": "Changelog",
   "clearCurrentMessages": "Clear Current Session Messages",
   "close": "Close",
   "confirmClearCurrentMessages": "You are about to clear the current session 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",
   "defaultAgent": "Default Assistant",
   "defaultSession": "Default Session",
+  "delete": "Delete",
   "edit": "Edit",
   "export": "Export",
+  "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",
+    "globalSetting": "Export Global Settings"
+  },
+  "feedback": "Feedback",
+  "import": "Import Configuration",
   "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...",
   "send": "Send",
   "sendPlaceholder": "Enter chat content...",
   "sessionSetting": "Session Settings",
   "setting": "Settings",
   "share": "Share",
+  "temp": "Temporary",
   "tokenDetail": "System Role Token: {{systemRoleToken}} Chats Token: {{chatsToken}}",
+  "topic": {
+    "saveCurrentMessages": "Save Current Conversation as Topic",
+    "searchPlaceholder": "Search Topics..."
+  },
   "updateAgent": "Update Assistant Profile",
   "updatePrompt": "Update Prompts"
 }

package/locales/en_US/setting.json

@@ -15,7 +15,11 @@
       "title": "Reset All Settings"
     }
   },
-  "header": "Settings",
+  "header": {
+    "global": "Global Settings",
+    "session": "Session Settings",
+    "sessionWithName": "Session Settings · {{name}}"
+  },
   "settingAgent": {
     "avatar": {
       "title": "Avatar"
@@ -61,7 +65,14 @@
       "title": "User Input Preprocessing",
       "placeholder": "Enter pre-processing template, {text} will be replaced with real-time input information"
     },
-    "title": "Chat Settings"
+    "title": "Chat Settings",
+    "chatStyleType": {
+      "title": "Chat Window Style",
+      "type": {
+        "chat": "Chat Mode",
+        "docs": "Document Mode"
+      }
+    }
   },
   "settingModel": {
     "enableMaxTokens": {
@@ -91,7 +102,8 @@
     },
     "temperature": {
       "desc": "The higher the value, the more random the reply",
-      "title": "Randomness"
+      "title": "Randomness",
+      "titleWithValue": "Randomness {{value}}"
     },
     "title": "Model Settings",
     "topP": {

package/locales/zh_CN/common.json

@@ -1,32 +1,56 @@
 {
+  "about": "关于",
   "advanceSettings": "高级设置",
   "agentMaxToken": "会话最大长度",
   "agentModel": "模型",
   "agentProfile": "助手信息",
   "archive": "归档",
-  "archiveCurrentMessages": "归档当前会话",
   "autoGenerate": "自动补全",
   "autoGenerateTooltip": "基于提示词自动补全助手描述",
   "cancel": "取消",
+  "changelog": "更新日志",
   "clearCurrentMessages": "清空当前会话消息",
   "close": "关闭",
   "confirmClearCurrentMessages": "即将清空当前会话消息，清空后将无法找回，请确认你的操作",
   "confirmRemoveSessionItemAlert": "即将删除该助手，删除后该将无法找回，请确认你的操作",
+  "copy": "复制",
+  "copySuccess": "复制成功",
   "defaultAgent": "默认助手",
   "defaultSession": "默认对话",
+  "delete": "删除",
   "edit": "编辑",
-  "export": "导出",
+  "export": "导出配置",
+  "exportType": {
+    "agent": "导出助手设定",
+    "agentWithMessage": "导出助手和消息",
+    "all": "导出全局设置和所有助手数据",
+    "allAgent": "导出所有助手设定",
+    "allAgentWithMessage": "导出所有助手和消息",
+    "globalSetting": "导出全局设置"
+  },
+  "feedback": "反馈与建议",
+  "import": "导入配置",
   "newAgent": "新建助手",
   "noDescription": "暂无描述",
   "ok": "确定",
+  "overload": "超过限制",
+  "pin": "置顶",
+  "pinOff": "取消置顶",
+  "regenerate": "重新生成",
+  "rename": "重命名",
   "reset": "重置",
+  "roleAndArchive": "角色与记录",
   "searchAgentPlaceholder": "搜索助手和对话...",
   "send": "发送",
   "sendPlaceholder": "输入聊天内容...",
-  "sessionSetting": "会话设置",
   "setting": "设置",
   "share": "分享",
+  "temp": "临时",
   "tokenDetail": "系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}",
+  "topic": {
+    "saveCurrentMessages": "将当前会话保存为话题",
+    "searchPlaceholder": "搜索话题..."
+  },
   "updateAgent": "更新助理信息",
   "updatePrompt": "更新提示词"
 }

package/locales/zh_CN/setting.json

@@ -1,5 +1,4 @@
 {
-  "agentHeader": "编辑助手信息",
   "danger": {
     "clear": {
       "action": "立即清除",
@@ -15,7 +14,11 @@
       "title": "重置所有设置"
     }
   },
-  "header": "设置",
+  "header": {
+    "global": "全局设置",
+    "session": "会话设置",
+    "sessionWithName": "会话设置 · {{name}}"
+  },
   "settingAgent": {
     "avatar": {
       "title": "头像"
@@ -42,6 +45,13 @@
     "title": "助手信息"
   },
   "settingChat": {
+    "chatStyleType": {
+      "title": "聊天窗口样式",
+      "type": {
+        "chat": "对话模式",
+        "docs": "文档模式"
+      }
+    },
     "compressThreshold": {
       "desc": "当未压缩的历史消息超过该值时，将进行压缩",
       "title": "历史消息长度压缩阈值"
@@ -91,7 +101,8 @@
     },
     "temperature": {
       "desc": "值越大，回复越随机",
-      "title": "随机性"
+      "title": "随机性",
+      "titleWithValue": "随机性 {{value}}"
     },
     "title": "模型设置",
     "topP": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.22.2",
+  "version": "0.24.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -11,7 +11,7 @@
   ],
   "homepage": "https://github.com/lobehub/lobe-chat",
   "bugs": {
-    "url": "https://github.com/lobehub/lobe-chat/issues/new"
+    "url": "https://github.com/lobehub/lobe-chat/issues/new/choose"
   },
   "repository": {
     "type": "git",
@@ -30,6 +30,7 @@
     "lint:style": "stylelint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install",
     "prettier": "prettier -c --write \"**/**\"",
+    "pull": "git pull",
     "release": "semantic-release",
     "start": "next start",
     "stylelint": "stylelint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
@@ -141,5 +142,6 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
-  }
+  },
+  "changelog": "https://github.com/lobehub/lobe-chat"
 }

package/src/components/HeaderTitle/index.tsx

@@ -36,7 +36,12 @@ const HeaderTitle = memo<HeaderTitleProps>(({ title, desc, tag }) => {
         </Flexbox>
       </Flexbox>
     );
-  return <div className={styles.title}>{title}</div>;
+  return (
+    <Flexbox align={'center'} className={styles.title} gap={8} horizontal>
+      {title}
+      {tag}
+    </Flexbox>
+  );
 });
 
 export default HeaderTitle;

package/src/components/SliderWithInput/index.tsx

@@ -1,36 +1,61 @@
-import { InputNumber, Slider } from 'antd';
+import { InputNumber, type InputNumberProps, Slider } from 'antd';
 import { SliderSingleProps } from 'antd/es/slider';
 import { isNull } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const SliderWithInput = memo<SliderSingleProps>(
-  ({ step, value, onChange, max, min, defaultValue, ...props }) => {
+export interface SliderWithInputProps extends SliderSingleProps {
+  controls?: InputNumberProps['controls'];
+  size?: InputNumberProps['size'];
+}
+
+const SliderWithInput = memo<SliderWithInputProps>(
+  ({
+    step,
+    value,
+    onChange,
+    max,
+    min,
+    defaultValue,
+    size,
+    controls,
+    style,
+    className,
+    ...props
+  }) => {
     const handleOnchange = useCallback((value: number | null) => {
       if (Number.isNaN(value) || isNull(value)) return;
       onChange?.(value);
     }, []);
 
     return (
-      <Flexbox direction={'horizontal'} gap={8}>
+      <Flexbox
+        align={'center'}
+        className={className}
+        direction={'horizontal'}
+        gap={8}
+        style={style}
+      >
         <Slider
           defaultValue={defaultValue}
           max={max}
           min={min}
           onChange={handleOnchange}
           step={step}
-          style={{ flex: 1 }}
-          tooltip={{ getPopupContainer: (triggerNode) => triggerNode }}
+          style={size === 'small' ? { flex: 1, margin: 0 } : { flex: 1 }}
+          tooltip={{ open: false }}
           value={typeof value === 'number' ? value : 0}
           {...props}
         />
         <InputNumber
+          controls={size !== 'small' || controls}
           defaultValue={defaultValue}
           max={max}
           min={min}
           onChange={handleOnchange}
+          size={size}
           step={Number.isNaN(step) || isNull(step) ? undefined : step}
-          style={{ flex: 1, maxWidth: 64 }}
+          style={{ flex: 1, maxWidth: size === 'small' ? 40 : 64 }}
           value={typeof value === 'number' ? value : 0}
         />
       </Flexbox>

package/src/features/SideBar/index.tsx

@@ -1,18 +1,117 @@
-import { ActionIcon, SideNav } from '@lobehub/ui';
-import { MessageSquare, Settings2, Sticker } from 'lucide-react';
+import { ActionIcon, Icon, SideNav } from '@lobehub/ui';
+import { Dropdown, type MenuProps } from 'antd';
+import {
+  Feather,
+  FileClock,
+  FolderInput,
+  FolderOutput,
+  Github,
+  Heart,
+  MessageSquare,
+  Settings,
+  Settings2,
+  Sticker,
+} from 'lucide-react';
 import Router from 'next/router';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
+import { bugs, homepage } from '@/../package.json';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useSettings } from '@/store/settings';
 
 export default memo(() => {
   const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar], shallow);
+  const { t } = useTranslation('common');
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={FolderInput} />,
+        key: 'import',
+        label: <div>{t('import')}</div>,
+      },
+      {
+        children: [
+          {
+            key: 'allAgent',
+            label: <div>{t('exportType.allAgent')}</div>,
+          },
+          {
+            key: 'allAgentWithMessage',
+            label: <div>{t('exportType.allAgentWithMessage')}</div>,
+          },
+          {
+            key: 'globalSetting',
+            label: <div>{t('exportType.globalSetting')}</div>,
+          },
+          {
+            type: 'divider',
+          },
+          {
+            key: 'all',
+            label: <div>{t('exportType.all')}</div>,
+          },
+        ],
+        icon: <Icon icon={FolderOutput} />,
+        key: 'export',
+        label: t('export'),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: <Icon icon={Feather} />,
+        key: 'feedback',
+        label: (
+          <a href={bugs.url} rel="noreferrer" target={'_blank'}>
+            {t('feedback')}
+          </a>
+        ),
+      },
+      {
+        icon: <Icon icon={FileClock} />,
+        key: 'changelog',
+        label: (
+          <a href={`${homepage}/blob/master/CHANGELOG.md`} rel="noreferrer" target={'_blank'}>
+            {t('changelog')}
+          </a>
+        ),
+      },
+      {
+        icon: <Icon icon={Heart} />,
+        key: 'about',
+        label: (
+          <a href={homepage} rel="noreferrer" target={'_blank'}>
+            {t('about')}
+          </a>
+        ),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: <Icon icon={Settings} />,
+        key: 'setting',
+        label: <div onClick={() => Router.push('/setting')}>{t('setting')}</div>,
+      },
+    ],
+    [],
+  );
+
   return (
     <SideNav
       avatar={<AvatarWithUpload />}
-      bottomActions={<ActionIcon icon={Settings2} onClick={() => Router.push('/setting')} />}
+      bottomActions={
+        <>
+          <a href={homepage} rel="noreferrer" target={'_blank'}>
+            <ActionIcon icon={Github} />
+          </a>
+          <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+            <ActionIcon icon={Settings2} />
+          </Dropdown>
+        </>
+      }
       style={{ height: '100vh' }}
       topActions={
         <>

package/src/locales/default/common.ts

@@ -1,4 +1,5 @@
 export default {
+  about: '关于',
   advanceSettings: '高级设置',
   agentMaxToken: '会话最大长度',
   agentModel: '模型',
@@ -7,17 +8,36 @@ export default {
   autoGenerate: '自动补全',
   autoGenerateTooltip: '基于提示词自动补全助手描述',
   cancel: '取消',
+  changelog: '更新日志',
   clearCurrentMessages: '清空当前会话消息',
   close: '关闭',
   confirmClearCurrentMessages: '即将清空当前会话消息，清空后将无法找回，请确认你的操作',
   confirmRemoveSessionItemAlert: '即将删除该助手，删除后该将无法找回，请确认你的操作',
+  copy: '复制',
+  copySuccess: '复制成功',
   defaultAgent: '默认助手',
   defaultSession: '默认对话',
+  delete: '删除',
   edit: '编辑',
-  export: '导出',
+  export: '导出配置',
+  exportType: {
+    agent: '导出助手设定',
+    agentWithMessage: '导出助手和消息',
+    all: '导出全局设置和所有助手数据',
+    allAgent: '导出所有助手设定',
+    allAgentWithMessage: '导出所有助手和消息',
+    globalSetting: '导出全局设置',
+  },
+  feedback: '反馈与建议',
+  import: '导入配置',
   newAgent: '新建助手',
   noDescription: '暂无描述',
   ok: '确定',
+  overload: '超过限制',
+  pin: '置顶',
+  pinOff: '取消置顶',
+  regenerate: '重新生成',
+  rename: '重命名',
   reset: '重置',
   roleAndArchive: '角色与记录',
   searchAgentPlaceholder: '搜索助手和对话...',
@@ -25,6 +45,7 @@ export default {
   sendPlaceholder: '输入聊天内容...',
   setting: '设置',
   share: '分享',
+  temp: '临时',
   tokenDetail: '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
   topic: {
     saveCurrentMessages: '将当前会话保存为话题',

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

@@ -1,7 +1,8 @@
-import { ActionIcon, Avatar, List } from '@lobehub/ui';
-import { Popconfirm, Tag } from 'antd';
-import { X } from 'lucide-react';
-import { FC, memo } from 'react';
+import { ActionIcon, Avatar, Icon, List } from '@lobehub/ui';
+import { useHover } from 'ahooks';
+import { Dropdown, type MenuProps, Popconfirm, 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';
@@ -14,14 +15,20 @@ import { useStyles } from './style';
 const { Item } = List;
 
 interface SessionItemProps {
-  active: boolean;
+  active?: boolean;
   id: string;
-  loading: boolean;
+  loading?: boolean;
+  pin?: boolean;
 }
 
-const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading }) => {
+const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pin }) => {
+  const ref = useRef(null);
+  const isHovering = useHover(ref);
+  const [popOpen, setPopOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const { t } = useTranslation('common');
-  const { styles, theme, cx } = useStyles();
+  const isHighlight = isHovering || dropdownOpen;
+  const { styles, theme, cx } = useStyles(isHighlight);
   const [defaultModel] = useSettings((s) => [s.settings.model], shallow);
 
   const [
@@ -51,75 +58,126 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
     ];
   }, shallow);
 
+  // TODO: 动作绑定
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={pin ? PinOff : Pin} />,
+        key: 'pin',
+        label: t(pin ? 'pinOff' : 'pin'),
+      },
+      {
+        children: [
+          {
+            key: 'agent',
+            label: <div>{t('exportType.agent')}</div>,
+          },
+          {
+            key: 'agentWithMessage',
+            label: <div>{t('exportType.agentWithMessage')}</div>,
+          },
+        ],
+        icon: <Icon icon={FolderOutput} />,
+        key: 'export',
+        label: t('export'),
+      },
+      {
+        icon: <Icon icon={Trash} />,
+        key: 'delete',
+        label: t('delete'),
+        onClick: () => setPopOpen(true),
+      },
+    ],
+    [id],
+  );
+
   const showModel = model !== defaultModel;
   const showChatLength = chatLength > 0;
 
   return (
-    <Flexbox className={styles.container} style={{ position: 'relative' }}>
-      <Item
-        active={active}
-        avatar={
-          <Avatar
-            avatar={avatar}
-            background={avatarBackground}
-            shape="circle"
-            size={46}
-            title={title}
-          />
-        }
-        classNames={{ time: cx('session-time', styles.time) }}
-        date={updateAt}
-        description={
-          <Flexbox gap={4}>
-            <Flexbox>{description || systemRole}</Flexbox>
+    <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>
-                )}
-                {/*{showChatLength && (*/}
-                {/*  <Tag*/}
-                {/*    bordered={false}*/}
-                {/*    style={{ color: theme.colorTextSecondary, display: 'flex', gap: 4 }}*/}
-                {/*  >*/}
-                {/*    <Icon icon={LucideMessageCircle} />*/}
-                {/*    {chatLength}*/}
-                {/*  </Tag>*/}
-                {/*)}*/}
-              </Flexbox>
-            )}
-          </Flexbox>
-        }
-        loading={loading}
-        style={{ color: theme.colorText }}
-        title={title}
-      />
-      <Popconfirm
-        arrow={false}
-        cancelText={t('cancel')}
-        okButtonProps={{ danger: true }}
-        okText={t('ok')}
-        onConfirm={(e) => {
-          e?.stopPropagation();
-          removeSession(id);
-        }}
-        overlayStyle={{ width: 280 }}
-        title={t('confirmRemoveSessionItemAlert')}
-      >
-        <ActionIcon
-          className="session-remove"
-          icon={X}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          size={'small'}
+              {!(showModel || showChatLength) ? undefined : (
+                <Flexbox horizontal>
+                  {showModel && (
+                    <Tag bordered={false} style={{ color: theme.colorTextSecondary }}>
+                      {model}
+                    </Tag>
+                  )}
+                  {/*{showChatLength && (*/}
+                  {/*  <Tag*/}
+                  {/*    bordered={false}*/}
+                  {/*    style={{ color: theme.colorTextSecondary, display: 'flex', gap: 4 }}*/}
+                  {/*  >*/}
+                  {/*    <Icon icon={LucideMessageCircle} />*/}
+                  {/*    {chatLength}*/}
+                  {/*  </Tag>*/}
+                  {/*)}*/}
+                </Flexbox>
+              )}
+            </Flexbox>
+          }
+          loading={loading}
+          style={{ color: theme.colorText }}
+          title={title}
         />
-      </Popconfirm>
-    </Flexbox>
+        <Popconfirm
+          arrow={false}
+          cancelText={t('cancel')}
+          okButtonProps={{ danger: true }}
+          okText={t('ok')}
+          onCancel={() => setPopOpen(false)}
+          onConfirm={(e) => {
+            e?.stopPropagation();
+            removeSession(id);
+            setPopOpen(false);
+          }}
+          open={popOpen}
+          overlayStyle={{ width: 280 }}
+          title={t('confirmRemoveSessionItemAlert')}
+        >
+          <Dropdown
+            arrow={false}
+            menu={{ items }}
+            onOpenChange={setDropdownOpen}
+            open={dropdownOpen}
+            trigger={['click']}
+          >
+            <ActionIcon
+              className="session-remove"
+              icon={MoreVertical}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+              size={{
+                blockSize: 28,
+                fontSize: 16,
+              }}
+            />
+          </Dropdown>
+        </Popconfirm>
+      </Flexbox>
+    </div>
   );
 }, shallow);
 

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

@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 
-export const useStyles = createStyles(({ css, token }) => {
+export const useStyles = createStyles(({ css, token }, isHighlight: boolean) => {
   return {
     active: css`
       display: flex;
@@ -22,7 +22,6 @@ export const useStyles = createStyles(({ css, token }) => {
       background: ${rgba(token.colorBgLayout, 0.5)};
       backdrop-filter: blur(8px);
     `,
-
     container: css`
       position: relative;
 
@@ -32,24 +31,11 @@ export const useStyles = createStyles(({ css, token }) => {
         right: 16px;
         transform: translateY(-50%);
 
-        width: 16px;
-        height: 16px;
-
-        font-size: 10px;
-
-        opacity: 0;
-        background-color: ${token.colorFillTertiary};
-
-        transition: color 600ms ${token.motionEaseOut}, scale 400ms ${token.motionEaseOut},
-          background-color 100ms ${token.motionEaseOut}, opacity 100ms ${token.motionEaseOut};
-
-        &:hover {
-          background-color: ${token.colorFill};
-        }
+        opacity: ${isHighlight ? 1 : 0};
       }
 
       .session-time {
-        opacity: 1;
+        opacity: ${isHighlight ? 0 : 1};
         transition: opacity 100ms ${token.motionEaseOut};
       }
 
@@ -63,6 +49,12 @@ export const useStyles = createStyles(({ css, token }) => {
         }
       }
     `,
+    hover: css`
+      background-color: ${token.colorFillSecondary};
+    `,
+    pin: css`
+      background-color: ${token.colorFillTertiary};
+    `,
     time: css`
       align-self: flex-start;
     `,

package/src/pages/chat/[id]/Config/SideBar.tsx

@@ -28,7 +28,7 @@ const useStyles = createStyles(({ css, token }) => ({
     opacity: 0.75;
     border-bottom: 1px solid ${token.colorBorder};
 
-    transition: 200ms ${token.motionEaseOut};
+    transition: opacity 200ms ${token.motionEaseOut};
 
     &:hover {
       opacity: 1;
@@ -79,8 +79,8 @@ const SideBar = memo(() => {
         }}
         value={systemRole}
       />
-      <Flexbox gap={12} style={{ padding: 16 }}>
-        <SearchBar placeholder={t('topic.searchPlaceholder')} type={'block'} />
+      <Flexbox gap={16} style={{ padding: 16 }}>
+        <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
         <Topic />
       </Flexbox>
     </DraggablePanelBody>

package/src/pages/chat/[id]/Config/TopicItem.tsx

@@ -1,16 +1,20 @@
-import { StarFilled, StarOutlined } from '@ant-design/icons';
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Dropdown, type MenuProps, Tag, Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import { LucideIcon } from 'lucide-react';
-import { memo } from 'react';
+import { MessageSquareDashed, MoreVertical, PencilLine, Share2, Star, Trash } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 
-const useStyles = createStyles(({ css, token }) => ({
+const { Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   active: css`
-    background: ${token.colorFill};
+    background: ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
+    transition: background 200ms ${token.motionEaseOut};
 
     &:hover {
       background: ${token.colorFill};
@@ -18,11 +22,20 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   container: css`
     cursor: pointer;
-    background: ${token.colorFillTertiary};
-    border-radius: 6px;
+    padding: 12px 8px;
+    border-radius: ${token.borderRadius}px;
+
+    .topic-more {
+      opacity: 0;
+      transition: opacity 400ms ${token.motionEaseOut};
+    }
 
     &:hover {
       background: ${token.colorFillSecondary};
+
+      .topic-more {
+        opacity: 1;
+      }
     }
   `,
   split: css`
@@ -39,13 +52,36 @@ export interface ConfigCellProps {
 }
 
 const TopicItem = memo<ConfigCellProps>(({ title, active, id, showFav, fav }) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const { styles, theme, cx } = useStyles();
+  const { t } = useTranslation('common');
 
   const [dispatchTopic, toggleTopic] = useSessionStore(
     (s) => [s.dispatchTopic, s.toggleTopic],
     shallow,
   );
-  const starIcon = (fav ? StarFilled : StarOutlined) as LucideIcon;
+
+  // TODO: 动作绑定
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={PencilLine} />,
+        key: 'rename',
+        label: t('rename'),
+      },
+      {
+        icon: <Icon icon={Share2} />,
+        key: 'share',
+        label: t('share'),
+      },
+      {
+        icon: <Icon icon={Trash} />,
+        key: 'delete',
+        label: t('delete'),
+      },
+    ],
+    [],
+  );
 
   return (
     <Flexbox
@@ -56,23 +92,43 @@ const TopicItem = memo<ConfigCellProps>(({ title, active, id, showFav, fav }) =>
       onClick={() => {
         toggleTopic(id);
       }}
-      padding={'10px 12px'}
     >
-      {title}
-      {!showFav ? undefined : (
+      <Flexbox align={'center'} gap={8} horizontal>
+        {!showFav ? (
+          <Flexbox align={'center'} height={24} justify={'center'} width={24}>
+            <Icon color={theme.colorTextDescription} icon={MessageSquareDashed} />
+          </Flexbox>
+        ) : (
+          <ActionIcon
+            color={fav ? theme.colorWarning : undefined}
+            fill={fav ? theme.colorWarning : 'transparent'}
+            icon={Star}
+            onClick={() => {
+              if (!id) return;
+              dispatchTopic({ id, key: 'favorite', type: 'updateChatTopic', value: !fav });
+            }}
+            size={'small'}
+          />
+        )}
+        <Paragraph ellipsis={{ rows: 2 }} style={{ margin: 0 }}>
+          {title}
+        </Paragraph>
+        {id ? '' : <Tag>{t('temp')}</Tag>}
+      </Flexbox>
+      <Dropdown
+        arrow={false}
+        menu={{ items }}
+        onOpenChange={setDropdownOpen}
+        open={dropdownOpen}
+        trigger={['click']}
+      >
         <ActionIcon
-          icon={starIcon}
-          onClick={() => {
-            if (!id) return;
-
-            dispatchTopic({ id, key: 'favorite', type: 'updateChatTopic', value: !fav });
-          }}
+          className="topic-more"
+          icon={MoreVertical}
           size={'small'}
-          style={{
-            color: fav ? theme.yellow : undefined,
-          }}
+          style={dropdownOpen ? { opacity: 1 } : {}}
         />
-      )}
+      </Dropdown>
     </Flexbox>
   );
 });

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

@@ -1,6 +1,7 @@
 import { ChatList, ChatMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
 import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
@@ -10,6 +11,7 @@ import FunctionMessage from './FunctionMessage';
 import MessageExtra from './MessageExtra';
 
 const List = () => {
+  const { t } = useTranslation('common');
   const data = useSessionStore(chatSelectors.currentChats, isEqual);
   const [displayMode, deleteMessage, resendMessage, dispatchMessage] = useSessionStore(
     (s) => [
@@ -50,6 +52,15 @@ const List = () => {
       renderMessage={renderMessage}
       renderMessageExtra={MessageExtra}
       style={{ marginTop: 24 }}
+      text={{
+        cancel: t('cancel'),
+        confirm: t('ok'),
+        copy: t('copy'),
+        copySuccess: t('copySuccess'),
+        delete: t('delete'),
+        edit: t('edit'),
+        regenerate: t('regenerate'),
+      }}
       type={displayMode}
     />
   );

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

@@ -39,15 +39,18 @@ const InputActions = memo(() => {
         <ActionIcon icon={BrainCog} placement={'bottom'} title={t('settingModel.model.title')} />
       </Dropdown>
       <Popover
+        arrow={false}
         content={
           <SliderWithInput
+            controls={false}
             max={1}
             min={0}
             onChange={(v) => {
               updateAgentConfig({ params: { temperature: v } });
             }}
+            size={'small'}
             step={0.1}
-            style={{ width: 120 }}
+            style={{ width: 160 }}
             value={temperature}
           />
         }

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

@@ -24,7 +24,11 @@ const Token = memo<{ input: string }>(({ input }) => {
 
   return (
     <Tooltip title={t('tokenDetail', { chatsToken, systemRoleToken })}>
-      <TokenTag maxValue={ModelTokens[model]} value={totalToken + inputTokenCount} />
+      <TokenTag
+        maxValue={ModelTokens[model]}
+        text={{ overload: t('overload') }}
+        value={totalToken + inputTokenCount}
+      />
     </Tooltip>
   );
 });

package/src/pages/chat/[id]/edit/AgentPrompt/index.tsx

@@ -37,7 +37,7 @@ const AgentPrompt = memo(() => {
         }}
         placeholder={t('settingAgent.name.placeholder')}
         resize={false}
-        style={{ marginBottom: 16, marginTop: 16 }}
+        style={{ marginTop: 16 }}
         type={'pure'}
         value={systemRole}
       />

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

@@ -1,7 +1,8 @@
 import { ActionIcon, ChatHeader } from '@lobehub/ui';
-import { Download, Share2 } from 'lucide-react';
+import { Dropdown, MenuProps } from 'antd';
+import { FolderOutput, Share2 } from 'lucide-react';
 import Router from 'next/router';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import HeaderTitle from '@/components/HeaderTitle';
@@ -9,6 +10,20 @@ import HeaderTitle from '@/components/HeaderTitle';
 const Header = memo(() => {
   const { t } = useTranslation('setting');
 
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        key: 'agent',
+        label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
+      },
+      {
+        key: 'agentWithMessage',
+        label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
+      },
+    ],
+    [],
+  );
+
   return (
     <ChatHeader
       left={<HeaderTitle title={t('header.session')} />}
@@ -16,11 +31,13 @@ const Header = memo(() => {
       right={
         <>
           <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share', { ns: 'common' })} />
-          <ActionIcon
-            icon={Download}
-            size={{ fontSize: 24 }}
-            title={t('export', { ns: 'common' })}
-          />
+          <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+            <ActionIcon
+              icon={FolderOutput}
+              size={{ fontSize: 24 }}
+              title={t('export', { ns: 'common' })}
+            />
+          </Dropdown>
         </>
       }
       showBackButton

package/src/pages/setting/Header.tsx

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