@lobehub/chat 0.13.1 → 0.15.0

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

@@ -7,7 +7,6 @@ import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
-import { DEFAULT_TITLE } from '@/store/session/slices/agentConfig';
 import { useSettings } from '@/store/settings';
 
 import { useStyles } from './style';
@@ -96,7 +95,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         }
         loading={loading}
         style={{ color: theme.colorText }}
-        title={title || t(DEFAULT_TITLE)}
+        title={title || t('defaultSession')}
       />
       <Popconfirm
         arrow={false}

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

@@ -0,0 +1,26 @@
+import { type ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface HeaderProps {
+  actions?: ReactNode;
+  title: string;
+}
+
+const Header = memo<HeaderProps>(({ title, actions }) => {
+  return (
+    <Flexbox
+      align={'center'}
+      distribution={'space-between'}
+      horizontal
+      padding={12}
+      paddingInline={16}
+    >
+      <Flexbox>{title}</Flexbox>
+      <Flexbox gap={4} horizontal>
+        {actions}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Header;

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

@@ -0,0 +1,86 @@
+import { ActionIcon, DraggablePanelBody, EditableMessage, SearchBar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronRight } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+import Header from './Header';
+
+const useStyles = createStyles(({ css, token }) => ({
+  desc: css`
+    color: ${token.colorText};
+  `,
+  model: css`
+    color: ${token.colorTextTertiary};
+  `,
+  prompt: css`
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    height: 200px;
+    padding: 0 16px 16px;
+
+    opacity: 0.75;
+    border-bottom: 1px solid ${token.colorBorder};
+
+    transition: 200ms ${token.motionEaseOut};
+
+    &:hover {
+      opacity: 1;
+    }
+  `,
+  title: css`
+    font-size: ${token.fontSizeHeading4}px;
+    font-weight: bold;
+  `,
+}));
+
+const SideBar = memo(() => {
+  const [openModal, setOpenModal] = useState(false);
+  const { styles } = useStyles();
+  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
+  const systemRole = useSessionStore(agentSelectors.currentAgentSystemRole, shallow);
+
+  const { t } = useTranslation('common');
+  return (
+    <DraggablePanelBody style={{ padding: 0 }}>
+      <Header
+        actions={
+          <ActionIcon
+            icon={ChevronRight}
+            onClick={() => setOpenModal(true)}
+            size="small"
+            title={t('edit')}
+          />
+        }
+        title={t('settingAgent.prompt.title', { ns: 'setting' })}
+      />
+      <EditableMessage
+        classNames={{ markdown: styles.prompt }}
+        onChange={(e) => {
+          updateAgentConfig({ systemRole: e });
+        }}
+        onOpenChange={setOpenModal}
+        openModal={openModal}
+        placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
+        styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
+        text={{
+          cancel: t('cancel'),
+          confirm: t('ok'),
+          edit: t('edit'),
+          title: t('settingAgent.prompt.title', { ns: 'setting' }),
+        }}
+        value={systemRole}
+      />
+      <Flexbox style={{ padding: 16 }}>
+        <SearchBar placeholder={t('archiveSearchPlaceholder')} />
+      </Flexbox>
+    </DraggablePanelBody>
+  );
+});
+
+export default SideBar;

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

@@ -1,22 +1,13 @@
-import {
-  ActionIcon,
-  DraggablePanel,
-  DraggablePanelBody,
-  DraggablePanelContainer,
-} from '@lobehub/ui';
+import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { LucideEdit, LucideX } from 'lucide-react';
-import Router from 'next/router';
 import { rgba } from 'polished';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
-import ReadMode from './ReadMode';
+import SideBar from './SideBar';
 
 const useStyles = createStyles(({ cx, css, token, stylish }) => ({
   drawer: cx(
@@ -31,10 +22,9 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 }));
 
 const Config = () => {
-  const { t } = useTranslation('common');
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig, id] = useSessionStore(
-    (s) => [s.showAgentSettings, s.toggleConfig, s.activeId],
+  const [showAgentSettings, toggleConfig] = useSessionStore(
+    (s) => [s.showAgentSettings, s.toggleConfig],
     shallow,
   );
 
@@ -50,37 +40,7 @@ const Config = () => {
     >
       <HeaderSpacing />
       <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>
-        <Flexbox
-          align={'center'}
-          className={styles.header}
-          distribution={'space-between'}
-          horizontal
-          padding={12}
-          paddingInline={16}
-        >
-          <Flexbox>{t('agentProfile')}</Flexbox>
-          <Flexbox gap={4} horizontal>
-            <ActionIcon
-              icon={LucideEdit}
-              onClick={() => {
-                Router.push(`/chat/${id}/edit`);
-              }}
-              size={{ blockSize: 32, fontSize: 20 }}
-              title={t('edit')}
-            />
-            <ActionIcon
-              icon={LucideX}
-              onClick={() => {
-                toggleConfig(false);
-              }}
-              size={{ blockSize: 32, fontSize: 20 }}
-              title={t('close')}
-            />
-          </Flexbox>
-        </Flexbox>
-        <DraggablePanelBody>
-          <ReadMode />
-        </DraggablePanelBody>
+        <SideBar />
       </DraggablePanelContainer>
     </DraggablePanel>
   );

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

@@ -16,7 +16,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 const FunctionMessage = memo(() => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('plugin');
   const { styles } = useStyles();
   return (
     <Flexbox className={styles.container} gap={8} horizontal>

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

@@ -1,6 +1,6 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
-import { Eraser, Languages } from 'lucide-react';
+import { BrainCog, Eraser, Thermometer, Timer } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
@@ -8,14 +8,22 @@ import { shallow } from 'zustand/shallow';
 import { useSessionStore } from '@/store/session';
 
 const InputActions = memo(() => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('setting');
   const [clearMessage] = useSessionStore((s) => [s.clearMessage], shallow);
 
   return (
     <>
-      <ActionIcon icon={Languages} />
-      <Popconfirm onConfirm={() => clearMessage()} title={t('confirmClearCurrentMessages')}>
-        <ActionIcon icon={Eraser} title={t('clearCurrentMessages')} />
+      <ActionIcon icon={BrainCog} title={t('settingModel.model.title')} />
+      <ActionIcon icon={Thermometer} title={t('settingModel.temperature.title')} />
+      <ActionIcon icon={Timer} title={t('settingChat.historyCount.title')} />
+      <Popconfirm
+        cancelText={t('cancel', { ns: 'common' })}
+        okButtonProps={{ danger: true }}
+        okText={t('ok', { ns: 'common' })}
+        onConfirm={() => clearMessage()}
+        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      >
+        <ActionIcon icon={Eraser} title={t('clearCurrentMessages', { ns: 'common' })} />
       </Popconfirm>
     </>
   );

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

@@ -1,4 +1,4 @@
-import { ChatInputArea, DraggablePanel, Icon } from '@lobehub/ui';
+import { ChatInputArea, DraggablePanel, Icon, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
 import { Archive } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
@@ -13,7 +13,7 @@ import InputActions from './Action';
 import Token from './Token';
 
 const ChatInput = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
   const [expand, setExpand] = useState<boolean>(false);
   const [text, setText] = useState('');
 
@@ -21,7 +21,11 @@ const ChatInput = () => {
   const [sendMessage] = useSessionStore((s) => [s.createOrSendMsg], shallow);
 
   const footer = useMemo(
-    () => <Button icon={<Icon icon={Archive} title={t('archiveCurrentMessages')} />} />,
+    () => (
+      <Tooltip title={t('archiveCurrentMessages')}>
+        <Button icon={<Icon icon={Archive} />} />
+      </Tooltip>
+    ),
     [],
   );
 
@@ -54,6 +58,10 @@ const ChatInput = () => {
         onExpandChange={setExpand}
         onInputChange={setText}
         onSend={sendMessage}
+        placeholder={t('sendPlaceholder')}
+        text={{
+          send: t('send'),
+        }}
       />
     </DraggablePanel>
   );

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

@@ -69,7 +69,7 @@ const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode =>
       if (!(hasModelTag || hasFuncTag)) return;
 
       return (
-        <Flexbox className={styles.container}>
+        <Flexbox className={styles.container} horizontal>
           {hasFuncTag && funcTag}
           {hasModelTag && modelTag}
         </Flexbox>

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

@@ -1,61 +1,45 @@
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { createStyles } from 'antd-style';
-import { ArchiveIcon, MoreVerticalIcon, Share2 } from 'lucide-react';
+import { PanelRightClose, PanelRightOpen, Settings, Share2 } 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 { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
-
-const useStyles = createStyles(({ css, token }) => ({
-  desc: css`
-    font-size: 12px;
-    color: ${token.colorTextTertiary};
-  `,
-  title: css`
-    font-weight: bold;
-    color: ${token.colorText};
-  `,
-}));
+import HeaderTitle from '@/components/HeaderTitle';
+import { agentSelectors, useSessionStore } from '@/store/session';
 
 const Header = memo(() => {
   const { t } = useTranslation('common');
-  const [avatar, model] = useSessionStore(
-    (s) => [agentSelectors.currentAgentAvatar(s), agentSelectors.currentAgentModel(s)],
+
+  const [meta, id, modle] = useSessionStore(
+    (s) => [agentSelectors.currentAgentMeta(s), s.activeId, agentSelectors.currentAgentModel(s)],
     shallow,
   );
-  const [meta, id] = useSessionStore((s) => {
-    const chat = sessionSelectors.currentSession(s);
-    return [chat?.meta, s.activeId];
-  }, shallow);
-
-  const [
-    // genShareUrl,
-
-    toggleConfig,
-  ] = useSessionStore(
-    (s) => [
-      // s.genShareUrl,
-      s.toggleConfig,
-    ],
+  const [showAgentSettings, toggleConfig] = useSessionStore(
+    (s) => [s.showAgentSettings, s.toggleConfig],
     shallow,
   );
 
-  const { styles } = useStyles();
   return (
     <ChatHeader
       left={
         <>
-          <Avatar avatar={avatar} size={40} title={meta?.title} />
-          <Flexbox>
-            <Flexbox align={'center'} className={styles.title} gap={8} horizontal>
-              {meta?.title || t('defaultAgent')}
-              <Tag bordered={false}>{model}</Tag>
-            </Flexbox>
-            <Flexbox className={styles.desc}>{meta?.description || t('noDescription')}</Flexbox>
-          </Flexbox>
+          <Avatar
+            avatar={meta?.avatar}
+            background={meta?.backgroundColor}
+            onClick={() => {
+              Router.push(`/chat/${id}/edit`);
+            }}
+            size={40}
+            style={{ cursor: 'pointer' }}
+            title={meta?.title}
+          />
+          <HeaderTitle
+            desc={meta?.description || t('noDescription')}
+            tag={<Tag>{modle}</Tag>}
+            title={meta?.title || t('defaultAgent')}
+          />
         </>
       }
       right={
@@ -69,12 +53,19 @@ const Header = memo(() => {
               size={{ fontSize: 24 }}
               title={t('share')}
             />
-            <ActionIcon icon={ArchiveIcon} size={{ fontSize: 24 }} title={t('archive')} />
             <ActionIcon
-              icon={MoreVerticalIcon}
+              icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
               onClick={() => toggleConfig()}
               size={{ fontSize: 24 }}
-              title={t('sessionSetting')}
+              title={t('roleAndArchive')}
+            />
+            <ActionIcon
+              icon={Settings}
+              onClick={() => {
+                Router.push(`/chat/${id}/edit`);
+              }}
+              size={{ fontSize: 24 }}
+              title={t('header.session', { ns: 'setting' })}
             />
           </>
         )