💄 style: Optimize the operation of lobechat on mobile devices (fix lo…

…behub#448, fix lobehub#579)
wang991 · Dec 8, 2023 · f45852e · f45852e
1 parent ba32293
commit f45852e
Show file tree

Hide file tree

Showing 18 changed files with 246 additions and 374 deletions.
diff --git a/src/app/chat/(desktop)/features/ChatHeader.tsx b/src/app/chat/(desktop)/features/ChatHeader.tsx
@@ -1,7 +1,7 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { ActionIcon, Avatar, ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
 import { Skeleton } from 'antd';
-import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
+import { PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,6 +14,7 @@ import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
 import PluginTag from '../../features/ChatHeader/PluginTag';
+import SettingButton from '../../features/ChatHeader/SettingButton';
 import ShareButton from '../../features/ChatHeader/ShareButton';
 
 const Header = memo(() => {
@@ -89,16 +90,7 @@ const Header = memo(() => {
             size={DESKTOP_HEADER_ICON_SIZE}
             title={t('roleAndArchive')}
           />
-          {!isInbox && (
-            <ActionIcon
-              icon={Settings}
-              onClick={() => {
-                router.push(pathString('/chat/settings', { hash: location.hash }));
-              }}
-              size={DESKTOP_HEADER_ICON_SIZE}
-              title={t('header.session', { ns: 'setting' })}
-            />
-          )}
+          <SettingButton />
         </>
       }
     />

diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx
diff --git a/src/app/chat/(desktop)/features/ChatInput/InputArea.tsx b/src/app/chat/(desktop)/features/ChatInput/InputArea.tsx
diff --git a/.../features/ChatInput/Footer/LocalFiles.tsx → ...esktop)/features/ChatInput/LocalFiles.tsx b/.../features/ChatInput/Footer/LocalFiles.tsx → ...esktop)/features/ChatInput/LocalFiles.tsx
diff --git a/src/app/chat/(desktop)/features/ChatInput/index.tsx b/src/app/chat/(desktop)/features/ChatInput/index.tsx
@@ -1,62 +1,65 @@
-import { ActionIcon, DraggablePanel } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { ActionIcon, ChatInputArea, ChatSendButton } from '@lobehub/ui';
 import { Maximize2, Minimize2 } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
+import SaveTopic from '@/app/chat/features/ChatInput/Topic';
+import { useChatInput } from '@/app/chat/features/ChatInput/useChatInput';
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
 
 import DragUpload from './DragUpload';
-import Footer from './Footer';
-import InputArea from './InputArea';
-
-const useStyles = createStyles(({ css }) => {
-  return {
-    container: css`
-      position: relative;
-
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-
-      height: 100%;
-      padding: 12px 0 16px;
-    `,
-  };
-});
+import { LocalFiles } from './LocalFiles';
 
 const ChatInputDesktopLayout = memo(() => {
-  const { styles } = useStyles();
-  const [expand, setExpand] = useState<boolean>(false);
-
-  const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    s.preference.inputHeight,
-    s.updatePreference,
-  ]);
+  const { t } = useTranslation('chat');
+  const {
+    ref,
+    onStop,
+    onSend,
+    loading,
+    value,
+    onInput,
+    expand,
+    setExpand,
+    inputHeight,
+    updatePreference,
+    canUpload,
+  } = useChatInput();
 
-  const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
   return (
     <>
       {canUpload && <DragUpload />}
-      <DraggablePanel
-        fullscreen={expand}
-        headerHeight={HEADER_HEIGHT}
-        minHeight={CHAT_TEXTAREA_HEIGHT}
+      <ChatInputArea
+        bottomAddons={
+          <ChatSendButton
+            leftAddons={canUpload && <LocalFiles />}
+            loading={loading}
+            onSend={onSend}
+            onStop={onStop}
+            rightAddons={<SaveTopic />}
+            texts={{
+              send: t('send'),
+              stop: t('stop'),
+              warp: t('warp'),
+            }}
+          />
+        }
+        expand={expand}
+        heights={{ headerHeight: HEADER_HEIGHT, inputHeight, minHeight: CHAT_TEXTAREA_HEIGHT }}
+        loading={loading}
+        onInput={onInput}
+        onSend={onSend}
         onSizeChange={(_, size) => {
           if (!size) return;
           updatePreference({
             inputHeight:
               typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
           });
         }}
-        placement="bottom"
-        size={{ height: inputHeight, width: '100%' }}
-        style={{ zIndex: 10 }}
-      >
-        <section className={styles.container} style={{ minHeight: CHAT_TEXTAREA_HEIGHT }}>
+        placeholder={t('sendPlaceholder')}
+        ref={ref}
+        topAddons={
           <ActionBar
             rightAreaEndRender={
               <ActionIcon
@@ -67,10 +70,9 @@ const ChatInputDesktopLayout = memo(() => {
               />
             }
           />
-          <InputArea />
-          <Footer />
-        </section>
-      </DraggablePanel>
+        }
+        value={value}
+      />
     </>
   );
 });

diff --git a/src/app/chat/(mobile)/features/ChatHeader.tsx b/src/app/chat/(mobile)/features/ChatHeader.tsx
@@ -1,63 +1,85 @@
-import { ActionIcon, Icon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { Dropdown, MenuProps } from 'antd';
-import { Clock3, MoreHorizontal, Settings, Share2 } from 'lucide-react';
+import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { ChevronDown } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
-import { pathString } from '@/utils/url';
 
+import SettingButton from '../../features/ChatHeader/SettingButton';
 import ShareButton from '../../features/ChatHeader/ShareButton';
 
 const MobileHeader = memo(() => {
   const { t } = useTranslation('chat');
+  const topicLength = useChatStore(topicSelectors.currentTopicLength);
   const router = useRouter();
+  const theme = useTheme();
   const [open, setOpen] = useState(false);
 
   const [isInbox, title] = useSessionStore((s) => [
     sessionSelectors.isInboxSession(s),
     agentSelectors.currentAgentTitle(s),
   ]);
 
-  const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
+  const toggleConfig = useGlobalStore((s) => s.toggleMobileTopic);
 
   const displayTitle = isInbox ? t('inbox.title') : title;
 
-  const items: MenuProps['items'] = [
-    {
-      icon: <Icon icon={Share2} />,
-      key: 'share',
-      label: t('share', { ns: 'common' }),
-      onClick: () => setOpen(true),
-    },
-    !isInbox && {
-      icon: <Icon icon={Settings} />,
-      key: 'settings',
-      label: t('header.session', { ns: 'setting' }),
-      onClick: () => router.push(pathString('/chat/settings', { hash: location.hash })),
-    },
-  ].filter(Boolean) as MenuProps['items'];
+  // const items: MenuProps['items'] = [
+  //   {
+  //     icon: <Icon icon={Share2} />,
+  //     key: 'share',
+  //     label: t('share', { ns: 'common' }),
+  //     onClick: () => setOpen(true),
+  //   },
+  //   !isInbox && {
+  //     icon: <Icon icon={Settings} />,
+  //     key: 'settings',
+  //     label: t('header.session', { ns: 'setting' }),
+  //     onClick: () => router.push(pathString('/chat/settings', { hash: location.hash })),
+  //   },
+  // ].filter(Boolean) as MenuProps['items'];
 
   return (
     <MobileNavBar
-      center={<MobileNavBarTitle title={displayTitle} />}
+      center={
+        <MobileNavBarTitle
+          desc={
+            <Flexbox align={'center'} gap={4} horizontal onClick={() => toggleConfig()}>
+              <ActionIcon
+                active
+                icon={ChevronDown}
+                size={{ blockSize: 14, borderRadius: '50%', fontSize: 12 }}
+                style={{
+                  background: theme.colorFillSecondary,
+                  color: theme.colorTextDescription,
+                }}
+              />
+              <span>{`${t('topic.title')} ${topicLength > 1 ? topicLength + 1 : ''}`}</span>
+            </Flexbox>
+          }
+          title={<div onClick={() => toggleConfig()}>{displayTitle}</div>}
+        />
+      }
       onBackClick={() => router.push('/chat')}
       right={
         <>
-          <ActionIcon icon={Clock3} onClick={() => toggleConfig()} size={MOBILE_HEADER_ICON_SIZE} />
           <ShareButton mobile open={open} setOpen={setOpen} />
-          <Dropdown
-            menu={{
-              items,
-            }}
-            trigger={['click']}
-          >
-            <ActionIcon icon={MoreHorizontal} />
-          </Dropdown>
+          <SettingButton mobile />
+          {/*<Dropdown*/}
+          {/*  menu={{*/}
+          {/*    items,*/}
+          {/*  }}*/}
+          {/*  trigger={['click']}*/}
+          {/*>*/}
+          {/*  <ActionIcon icon={MoreHorizontal} />*/}
+          {/*</Dropdown>*/}
         </>
       }
       showBackButton