Skip to content

Commit

Permalink
💄 style: fix mobile agent settings not show correctly (#6203)
Browse files Browse the repository at this point in the history
* fix agent setting mobile

* improve code

* improve style for desktop

* fix inbox issue

* fix chat page issue

* fix desktop style

* refactor the store code

* fix navigation issue
  • Loading branch information
arvinxx authored Feb 16, 2025
1 parent 4ae2080 commit 0285d95
Show file tree
Hide file tree
Showing 28 changed files with 220 additions and 111 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
import FileIcon from '@/components/FileIcon';
import { UploadFileItem } from '@/types/files';

import UploadDetail from '../../../components/UploadDetail';
import UploadDetail from '../../../../../../../../../../../features/ChatInput/components/UploadDetail';

const useStyles = createStyles(({ css, token }) => ({
container: css`
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
'use client';

import { Skeleton } from 'antd';
import { useTheme } from 'antd-style';
import { TextAreaRef } from 'antd/es/input/TextArea';
import { memo, useRef, useState } from 'react';
import { Flexbox } from 'react-layout-kit';

import ActionBar from '@/features/ChatInput/ActionBar';
import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
Expand All @@ -12,6 +14,7 @@ import { useSendMessage } from '@/features/ChatInput/useSend';
import { useChatStore } from '@/store/chat';
import { chatSelectors } from '@/store/chat/selectors';

import { useInitAgentConfig } from '../../../../_layout/useInitAgentConfig';
import Files from './Files';
import InputArea from './InputArea';
import SendButton from './Send';
Expand All @@ -33,6 +36,7 @@ const MobileChatInput = memo(() => {
const ref = useRef<TextAreaRef>(null);
const [expand, setExpand] = useState<boolean>(false);
const { send: sendMessage, canSend } = useSendMessage();
const { isLoading } = useInitAgentConfig();

const [loading, value, onInput, onStop] = useChatStore((s) => [
chatSelectors.isAIGenerating(s),
Expand Down Expand Up @@ -63,15 +67,21 @@ const MobileChatInput = memo(() => {
<SendButton disabled={!canSend} loading={loading} onSend={sendMessage} onStop={onStop} />
}
topAddons={
<>
<Files />
<ActionBar
leftActions={defaultLeftActions}
padding={'0 8px'}
rightActions={defaultRightActions}
rightAreaStartRender={<SaveTopic mobile />}
/>
</>
isLoading ? (
<Flexbox paddingInline={8}>
<Skeleton.Button active block size={'small'} />
</Flexbox>
) : (
<>
<Files />
<ActionBar
leftActions={defaultLeftActions}
padding={'0 8px'}
rightActions={defaultRightActions}
rightAreaStartRender={<SaveTopic mobile />}
/>
</>
)
}
value={value}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import MobileChatInput from '@/features/ChatInput/Mobile';

import DesktopChatInput from './Desktop';
import MobileChatInput from './Mobile';

const ChatInput = ({ mobile }: { mobile: boolean }) => {
const Input = mobile ? MobileChatInput : DesktopChatInput;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,21 @@ const Main = memo(() => {
const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);

return !init ? (
<Flexbox horizontal>
<Flexbox gap={4} horizontal>
{!isPinned && (
<ActionIcon
aria-label={t('agents')}
icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
onClick={() => {
updateSystemStatus({
sessionsWidth: showSessionPanel ? 0 : 320,
showSessionPanel: !showSessionPanel,
});
}}
size={DESKTOP_HEADER_ICON_SIZE}
title={t('agents')}
/>
)}
<Skeleton
active
avatar={{ shape: 'circle', size: 'default' }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import { MobileNavBar } from '@lobehub/ui/mobile';
import { memo, useState } from 'react';

import { useInitAgentConfig } from '@/app/[variants]/(main)/chat/(workspace)/_layout/useInitAgentConfig';
import { INBOX_SESSION_ID } from '@/const/session';
import { useQueryRoute } from '@/hooks/useQueryRoute';
import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
Expand All @@ -17,7 +16,6 @@ const MobileHeader = memo(() => {
const [open, setOpen] = useState(false);

const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
useInitAgentConfig();

return (
<MobileNavBar
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const AgentSettings = memo(() => {
width={'100%'}
>
{tab === ChatSettingsTabs.Meta && <AgentMeta />}
{tab === ChatSettingsTabs.Prompt && <AgentPrompt modal />}
{tab === ChatSettingsTabs.Prompt && <AgentPrompt />}
{tab === ChatSettingsTabs.Chat && <AgentChat />}
{tab === ChatSettingsTabs.Modal && <AgentModal />}
{tab === ChatSettingsTabs.TTS && <AgentTTS />}
Expand Down
45 changes: 0 additions & 45 deletions src/app/[variants]/(main)/chat/settings/features/EditPage.tsx

This file was deleted.

100 changes: 95 additions & 5 deletions src/app/[variants]/(main)/chat/settings/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,97 @@
import EditPage from './features/EditPage';
'use client';

const Page = () => {
return <EditPage />;
};
import { TabsNav } from '@lobehub/ui';
import isEqual from 'fast-deep-equal';
import { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';

export default Page;
import PageTitle from '@/components/PageTitle';
import { INBOX_SESSION_ID } from '@/const/session';
import { AgentSettingsProvider } from '@/features/AgentSetting';
import AgentChat from '@/features/AgentSetting/AgentChat';
import AgentMeta from '@/features/AgentSetting/AgentMeta';
import AgentModal from '@/features/AgentSetting/AgentModal';
import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
import AgentTTS from '@/features/AgentSetting/AgentTTS';
import { useAgentStore } from '@/store/agent';
import { agentSelectors } from '@/store/agent/selectors';
import { ChatSettingsTabs } from '@/store/global/initialState';
import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
import { useSessionStore } from '@/store/session';
import { sessionMetaSelectors } from '@/store/session/selectors';

const EditPage = memo(() => {
const { t } = useTranslation('setting');
const [tab, setTab] = useState(ChatSettingsTabs.Prompt);

const [id, updateAgentMeta, title] = useSessionStore((s) => [
s.activeId,
s.updateSessionMeta,
sessionMetaSelectors.currentAgentTitle(s),
]);
const [useFetchAgentConfig, updateAgentConfig] = useAgentStore((s) => [
s.useFetchAgentConfig,
s.updateAgentConfig,
]);

const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);

const { isLoading } = useFetchAgentConfig(id);
const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);

return (
<>
<PageTitle title={t('header.sessionWithName', { name: title })} />

<TabsNav
items={[
{
key: ChatSettingsTabs.Prompt,
label: t('settingAgent.prompt.title'),
},
(id !== INBOX_SESSION_ID && {
key: ChatSettingsTabs.Meta,
label: t('settingAgent.title'),
}) as any,
{
key: ChatSettingsTabs.Chat,
label: t('settingChat.title'),
},
{
key: ChatSettingsTabs.Modal,
label: t('settingModel.title'),
},
{
key: ChatSettingsTabs.TTS,
label: t('settingTTS.title'),
},
(enablePlugins && {
key: ChatSettingsTabs.Plugin,
label: t('settingPlugin.title'),
}) as any,
]}
onChange={(value) => setTab(value as ChatSettingsTabs)}
variant={'compact'}
/>
<AgentSettingsProvider
config={config}
id={id}
loading={isLoading}
meta={meta}
onConfigChange={updateAgentConfig}
onMetaChange={updateAgentMeta}
>
{tab === ChatSettingsTabs.Prompt && <AgentPrompt modal />}
{tab === ChatSettingsTabs.Meta && <AgentMeta />}
{tab === ChatSettingsTabs.Chat && <AgentChat />}
{tab === ChatSettingsTabs.Modal && <AgentModal />}
{tab === ChatSettingsTabs.TTS && <AgentTTS />}
{tab === ChatSettingsTabs.Plugin && <AgentPlugin />}
</AgentSettingsProvider>
</>
);
});

export default EditPage;
28 changes: 19 additions & 9 deletions src/features/AgentSetting/AgentMeta/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
import { Button } from 'antd';
import { Button, Skeleton } from 'antd';
import isEqual from 'fast-deep-equal';
import { isString } from 'lodash-es';
import { Wand2 } from 'lucide-react';
Expand All @@ -27,7 +27,11 @@ const AgentMeta = memo(() => {
s.autocompleteMeta,
s.autocompleteAllMeta,
]);
const [isInbox, loading] = useStore((s) => [s.id === INBOX_SESSION_ID, s.autocompleteLoading]);
const [isInbox, isIniting, autocompleteLoading] = useStore((s) => [
s.id === INBOX_SESSION_ID,
s.loading,
s.autocompleteLoading,
]);
const meta = useStore((s) => s.meta, isEqual);

if (isInbox) return;
Expand Down Expand Up @@ -59,10 +63,12 @@ const AgentMeta = memo(() => {
const autocompleteItems: FormItemProps[] = basic.map((item) => {
const AutoGenerate = item.Render;
return {
children: (
children: isIniting ? (
<Skeleton.Button active block size={'small'} />
) : (
<AutoGenerate
canAutoGenerate={hasSystemRole}
loading={loading[item.key as keyof SessionLoadingState]}
loading={autocompleteLoading[item.key as keyof SessionLoadingState]}
onChange={item.onChange}
onGenerate={() => {
autocompleteMeta(item.key as keyof typeof meta);
Expand All @@ -78,11 +84,13 @@ const AgentMeta = memo(() => {
const metaData: ItemGroup = {
children: [
{
children: (
children: isIniting ? (
<Skeleton.Button active block size={'small'} />
) : (
<AutoGenerateAvatar
background={meta.backgroundColor}
canAutoGenerate={hasSystemRole}
loading={loading['avatar']}
loading={autocompleteLoading['avatar']}
onChange={(avatar) => updateMeta({ avatar })}
onGenerate={() => autocompleteMeta('avatar')}
value={meta.avatar}
Expand All @@ -92,7 +100,9 @@ const AgentMeta = memo(() => {
minWidth: undefined,
},
{
children: (
children: isIniting ? (
<Skeleton.Button active block size={'small'} />
) : (
<BackgroundSwatches
backgroundColor={meta.backgroundColor}
onChange={(backgroundColor) => updateMeta({ backgroundColor })}
Expand All @@ -103,7 +113,7 @@ const AgentMeta = memo(() => {
},
...autocompleteItems,
],
extra: (
extra: !isIniting && (
<Tooltip
title={
!hasSystemRole
Expand All @@ -114,7 +124,7 @@ const AgentMeta = memo(() => {
<Button
disabled={!hasSystemRole}
icon={<Icon icon={Wand2} />}
loading={Object.values(loading).some((i) => !!i)}
loading={Object.values(autocompleteLoading).some((i) => !!i)}
onClick={(e: any) => {
e.stopPropagation();

Expand Down
Loading

0 comments on commit 0285d95

Please sign in to comment.