💄 style: Fix ChatInputArea style and typo (resolve lobehub#599)

kenneth18 · Dec 8, 2023 · 0d08f3b · 0d08f3b
1 parent f45852e
commit 0d08f3b
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 52 deletions.
diff --git a/src/app/chat/(mobile)/features/ChatHeader.tsx b/src/app/chat/(mobile)/features/ChatHeader.tsx
@@ -1,36 +1,15 @@
-import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { ChevronDown } from 'lucide-react';
+import { MobileNavBar } from '@lobehub/ui';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-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 SettingButton from '../../features/ChatHeader/SettingButton';
 import ShareButton from '../../features/ChatHeader/ShareButton';
+import ChatHeaderTitle from './ChatHeaderTitle';
 
 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 displayTitle = isInbox ? t('inbox.title') : title;
-
   // const items: MenuProps['items'] = [
   //   {
   //     icon: <Icon icon={Share2} />,
@@ -48,25 +27,7 @@ const MobileHeader = memo(() => {
 
   return (
     <MobileNavBar
-      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>}
-        />
-      }
+      center={<ChatHeaderTitle />}
       onBackClick={() => router.push('/chat')}
       right={
         <>

diff --git a/src/app/chat/(mobile)/features/ChatHeaderTitle.tsx b/src/app/chat/(mobile)/features/ChatHeaderTitle.tsx
@@ -0,0 +1,56 @@
+import { ActionIcon, MobileNavBarTitle } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { ChevronDown } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agent';
+import { sessionSelectors } from '@/store/session/slices/session/selectors';
+
+const ChatHeaderTitle = memo(() => {
+  const { t } = useTranslation('chat');
+  const toggleConfig = useGlobalStore((s) => s.toggleMobileTopic);
+  const [topicLength, topic] = useChatStore((s) => [
+    topicSelectors.currentTopicLength(s),
+    topicSelectors.currentActiveTopic(s),
+  ]);
+  const [isInbox, title] = useSessionStore((s) => [
+    sessionSelectors.isInboxSession(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
+  const theme = useTheme();
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+
+  return (
+    <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>{topic?.title || t('topic.title')}</span>
+        </Flexbox>
+      }
+      title={
+        <div onClick={() => toggleConfig()}>
+          {displayTitle}
+          {topicLength > 1 ? `(${topicLength + 1})` : ''}
+        </div>
+      }
+    />
+  );
+});
+
+export default ChatHeaderTitle;
diff --git a/src/app/chat/(mobile)/features/ChatInput/index.tsx b/src/app/chat/(mobile)/features/ChatInput/index.tsx
@@ -1,4 +1,5 @@
 import { MobileChatInputArea, MobileChatSendButton } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,7 +12,7 @@ import Files from './Files';
 
 const ChatInputMobileLayout = memo(() => {
   const { t } = useTranslation('chat');
-
+  const theme = useTheme();
   const { ref, onSend, loading, value, onInput, onStop, expand, setExpand } = useChatInput();
 
   return (
@@ -23,7 +24,10 @@ const ChatInputMobileLayout = memo(() => {
       placeholder={t('sendPlaceholder')}
       ref={ref}
       setExpand={setExpand}
-      style={{ width: '100vw' }}
+      style={{
+        background: `linear-gradient(to bottom, ${theme.colorFillQuaternary}, transparent)`,
+        width: '100vw',
+      }}
       textAreaLeftAddons={<STT mobile />}
       textAreaRightAddons={
         <MobileChatSendButton loading={loading} onSend={onSend} onStop={onStop} />

diff --git a/src/app/chat/features/ChatInput/ActionBar/Tools/index.tsx b/src/app/chat/features/ChatInput/ActionBar/Tools/index.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Avatar, Icon } from '@lobehub/ui';
 import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ArrowRight, Store, ToyBrick } from 'lucide-react';
+import { ArrowRight, PencilRuler, Store, ToyBrick } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -106,7 +106,7 @@ const Tools = memo(() => {
         placement={'topLeft'}
         trigger={['click']}
       >
-        <ActionIcon icon={ToyBrick} placement={'bottom'} title={t('tools.title')} />
+        <ActionIcon icon={PencilRuler} placement={'bottom'} title={t('tools.title')} />
       </Dropdown>
       <PluginStore open={open} setOpen={setOpen} />
     </>

diff --git a/src/app/chat/features/Conversation/ChatList/Extras/Assistant.tsx b/src/app/chat/features/Conversation/ChatList/Extras/Assistant.tsx
@@ -31,7 +31,7 @@ export const AssistantMessageExtra = memo<ChatMessage>(({ extra, id, content })
           <Tag icon={<SiOpenai size={'1em'} />}>{extra?.fromModel as string}</Tag>
         </div>
       )}
-      <div>
+      <>
         {extra?.tts && (
           <ExtraContainer>
             <TTS content={content} id={id} loading={loading} {...extra?.tts} />
@@ -42,7 +42,7 @@ export const AssistantMessageExtra = memo<ChatMessage>(({ extra, id, content })
             <Translate id={id} loading={loading} {...extra?.translate} />
           </ExtraContainer>
         )}
-      </div>
+      </>
     </Flexbox>
   );
 });
diff --git a/src/app/chat/features/Conversation/ChatList/Extras/ExtraContainer.tsx b/src/app/chat/features/Conversation/ChatList/Extras/ExtraContainer.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren, memo } from 'react';
 const ExtraContainer = memo<PropsWithChildren>(({ children }) => {
   return (
     <div>
-      <Divider style={{ margin: '8px 0' }} />
+      <Divider style={{ margin: '0 0 8px 0' }} />
       {children}
     </div>
   );

diff --git a/src/app/market/(desktop)/index.tsx b/src/app/market/(desktop)/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { SpotlightCard } from '@lobehub/ui';
+import { SpotlightCard, SpotlightCardProps } from '@lobehub/ui';
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
@@ -16,7 +16,7 @@ export default memo(() => (
   <ResponsiveIndex Mobile={Mobile}>
     <Layout>
       <Index />
-      <AgentCard CardRender={SpotlightCard} />
+      <AgentCard CardRender={SpotlightCard as FC<SpotlightCardProps>} />
     </Layout>
   </ResponsiveIndex>
 ));
diff --git a/src/store/chat/selectors/topic.ts b/src/store/chat/selectors/topic.ts
@@ -4,6 +4,9 @@ import { ChatStore } from '../store';
 
 const currentTopics = (s: ChatStore): ChatTopic[] => s.topics;
 
+const currentActiveTopic = (s: ChatStore): ChatTopic | undefined => {
+  return s.topics.find((topic) => topic.id === s.activeTopicId);
+};
 const searchTopics = (s: ChatStore): ChatTopic[] => s.searchTopics;
 
 const displayTopics = (s: ChatStore): ChatTopic[] =>
@@ -19,6 +22,7 @@ const getTopicById =
     currentTopics(s).find((topic) => topic.id === id);
 
 export const topicSelectors = {
+  currentActiveTopic,
   currentTopicLength,
   currentTopics,
   currentUnFavTopics,

diff --git a/tests/setup.ts b/tests/setup.ts
@@ -10,4 +10,4 @@ import React from 'react';
 theme.defaultConfig.hashed = false;
 
 // 将 React 设置为全局变量，这样就不需要在每个测试文件中导入它了
-global.React = React;
+(global as any).React = React;