💄 style(ui): Modify and repair UI layout (lobehub#3321)

* 🐛 fix(ui): Layout issue when assistant name long * 💄 style(ui): Adjust the display style of list setting button * 💄 style(ui): Adjust Custom Model Option layout * 💄 style(ui): Adjust layout of selection model * 💄 style(ui): Modify custom model configuration on mobile * 🐛 fix(ui): Fix text of selection model cannot folded * 💄 style(ui): Adjust layout of selection model
diegopizzocaro · Jul 30, 2024 · cda776f · cda776f
1 parent f45971b
commit cda776f
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 19 deletions.
diff --git a/src/app/(main)/chat/(workspace)/_layout/Mobile/ChatHeader/ChatHeaderTitle.tsx b/src/app/(main)/chat/(workspace)/_layout/Mobile/ChatHeader/ChatHeaderTitle.tsx
@@ -43,7 +43,16 @@ const ChatHeaderTitle = memo(() => {
         </Flexbox>
       }
       title={
-        <div onClick={() => toggleConfig()}>
+        <div
+          onClick={() => toggleConfig()}
+          style={{
+            marginRight: '8px',
+            maxWidth: '64vw',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
           {displayTitle}
           {topicLength > 1 ? `(${topicLength + 1})` : ''}
         </div>

diff --git a/src/app/(main)/chat/@session/features/SessionListContent/CollapseGroup/Actions.tsx b/src/app/(main)/chat/@session/features/SessionListContent/CollapseGroup/Actions.tsx
@@ -5,6 +5,7 @@ import { MoreVertical, PencilLine, Plus, Settings2, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
@@ -30,6 +31,8 @@ const Actions = memo<ActionsProps>(
     const { styles } = useStyles();
     const { modal, message } = App.useApp();
 
+    const isMobile = useIsMobile();
+
     const [createSession, removeSessionGroup] = useSessionStore((s) => [
       s.createSession,
       s.removeSessionGroup,
@@ -123,12 +126,13 @@ const Actions = memo<ActionsProps>(
         trigger={['click']}
       >
         <ActionIcon
+          active={isMobile ? true : false}
           icon={MoreVertical}
           onClick={(e) => {
             e.stopPropagation();
           }}
           size={{ blockSize: 22, fontSize: 16 }}
-          style={{ marginRight: -8 }}
+          style={{ background: isMobile ? 'transparent' : '', marginRight: -8 }}
         />
       </Dropdown>
     );

diff --git a/src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx b/src/app/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx
@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import ModelIcon from '@/components/ModelIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 import { useUserStore } from '@/store/user';
-import { modelConfigSelectors } from '@/store/user/selectors';
+import { modelConfigSelectors, modelProviderSelectors } from '@/store/user/selectors';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 interface CustomModelOptionProps {
@@ -28,30 +28,34 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
       s.toggleEditingCustomModelCard,
       s.removeEnabledModels,
     ]);
+
   const modelCard = useUserStore(
     modelConfigSelectors.getCustomModelCard({ id, provider }),
     isEqual,
   );
 
+  const isEnabled = useUserStore(
+    (s) => modelProviderSelectors.getEnableModelsById(provider)(s)?.includes(id),
+    isEqual,
+  );
+
   return (
     <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
-      <Flexbox align={'center'} gap={8} horizontal>
+      <Flexbox align={'center'} gap={8} horizontal style={{ flex: 1, width: '70%' }}>
         <ModelIcon model={id} size={32} />
-        <Flexbox>
+        <Flexbox direction={'vertical'} style={{ flex: 1, overflow: 'hidden' }}>
           <Flexbox align={'center'} gap={8} horizontal>
-            {modelCard?.displayName || id}
+            <Typography.Text ellipsis>{modelCard?.displayName || id}</Typography.Text>
             <ModelInfoTags id={id} {...modelCard} isCustom />
           </Flexbox>
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
-            <Flexbox gap={2} horizontal>
-              {id}
-              {!!modelCard?.deploymentName && (
-                <>
-                  <Icon icon={LucideArrowRight} />
-                  {modelCard?.deploymentName}
-                </>
-              )}
-            </Flexbox>
+          <Typography.Text ellipsis style={{ fontSize: 12, marginTop: '4px' }} type={'secondary'}>
+            {id}
+            {!!modelCard?.deploymentName && (
+              <>
+                <Icon icon={LucideArrowRight} />
+                {modelCard?.deploymentName}
+              </>
+            )}
           </Typography.Text>
         </Flexbox>
       </Flexbox>
@@ -83,6 +87,7 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
               type: 'warning',
             });
           }}
+          style={isEnabled ? { marginRight: '10px' } : {}}
           title={t('delete')}
         />
       </Flexbox>

diff --git a/src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/Form.tsx b/src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal/Form.tsx
@@ -2,6 +2,7 @@ import { Checkbox, Form, FormInstance, Input } from 'antd';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { ChatModelCard } from '@/types/llm';
 
 import MaxTokenSlider from './MaxTokenSlider';
@@ -18,6 +19,8 @@ const ModelConfigForm = memo<ModelConfigFormProps>(
 
     const [formInstance] = Form.useForm();
 
+    const isMobile = useIsMobile();
+
     useEffect(() => {
       onFormInstanceReady(formInstance);
     }, []);
@@ -37,7 +40,7 @@ const ModelConfigForm = memo<ModelConfigFormProps>(
           initialValues={initialValues}
           labelCol={{ span: 4 }}
           style={{ marginTop: 16 }}
-          wrapperCol={{ offset: 1, span: 18 }}
+          wrapperCol={isMobile ? { span: 18 } : { offset: 1, span: 18 }}
         >
           <Form.Item
             extra={t('llm.customModelCards.modelConfig.id.extra')}

diff --git a/src/components/ModelSelect/index.tsx b/src/components/ModelSelect/index.tsx
@@ -1,4 +1,5 @@
 import { Icon, Tooltip } from '@lobehub/ui';
+import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { Infinity, LucideEye, LucidePaperclip, ToyBrick } from 'lucide-react';
 import numeral from 'numeral';
@@ -142,7 +143,9 @@ export const ModelItemRender = memo<ModelItemRenderProps>(({ showInfoTag = true,
     <Flexbox align={'center'} gap={32} horizontal justify={'space-between'}>
       <Flexbox align={'center'} gap={8} horizontal>
         <ModelIcon model={model.id} size={20} />
-        {model.displayName || model.id}
+        <Typography.Paragraph ellipsis={false} style={{ marginBottom: 0 }}>
+          {model.displayName || model.id}
+        </Typography.Paragraph>
       </Flexbox>
 
       {showInfoTag && <ModelInfoTags {...model} />}

diff --git a/src/features/ModelSwitchPanel/index.tsx b/src/features/ModelSwitchPanel/index.tsx
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useUserStore } from '@/store/user';
@@ -49,7 +50,10 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
     s.updateAgentConfig,
   ]);
 
+  const isMobile = useIsMobile();
+
   const router = useRouter();
+
   const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
 
   const items = useMemo<ItemType[]>(() => {
@@ -102,7 +106,7 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
           overflowY: 'scroll',
         },
       }}
-      placement={'topLeft'}
+      placement={isMobile ? 'top' : 'topLeft'}
       trigger={['click']}
     >
       <div className={styles.tag}>{children}</div>