From 4f38aa97655cfbfd2ca540bcdca54c367d919ee8 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Sat, 24 Aug 2024 17:48:07 +0800 Subject: [PATCH 01/11] :art: chore: panel to modal --- .../actions/ShareButton/ShareModal.tsx | 2 +- .../SideBar/SessionList/SessionCreate.tsx | 4 +- .../SessionCreateModal/Market/List/index.tsx | 34 +++++++ .../Market/MarketInfo/actions/ChatButton.tsx | 35 +++++++ .../Market/MarketInfo/actions/Subscribe.tsx | 59 ++++++++++++ .../Market/MarketInfo/actions/UnSubscribe.tsx | 44 +++++++++ .../Market/MarketInfo/index.tsx | 93 +++++++++++++++++++ .../SessionCreateModal/Market/index.tsx | 49 ++++++++++ .../SessionList/SessionCreateModal/index.tsx | 39 ++++++++ .../SessionList/SessionCreateModal/style.ts | 12 +++ src/app/chat/SideBar/SessionList/index.tsx | 8 +- src/locales/default/chat.ts | 1 + 12 files changed, 373 insertions(+), 7 deletions(-) create mode 100644 src/app/chat/SideBar/SessionList/SessionCreateModal/Market/List/index.tsx create mode 100644 src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/ChatButton.tsx create mode 100644 src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/Subscribe.tsx create mode 100644 src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/UnSubscribe.tsx create mode 100644 src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/index.tsx create mode 100644 src/app/chat/SideBar/SessionList/SessionCreateModal/Market/index.tsx create mode 100644 src/app/chat/SideBar/SessionList/SessionCreateModal/index.tsx create mode 100644 src/app/chat/SideBar/SessionList/SessionCreateModal/style.ts diff --git a/src/app/chat/ChatHeader/actions/ShareButton/ShareModal.tsx b/src/app/chat/ChatHeader/actions/ShareButton/ShareModal.tsx index 0aa7bdd6..a7b6d7d4 100644 --- a/src/app/chat/ChatHeader/actions/ShareButton/ShareModal.tsx +++ b/src/app/chat/ChatHeader/actions/ShareButton/ShareModal.tsx @@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; import { FORM_STYLE } from '@/constants/token'; +import { useScreenshot } from '@/hooks/useScreenshot'; import { useSessionStore } from '@/store/session'; -import { useScreenshot } from '../../../../../hooks/useScreenshot'; import Preview from './Preview'; import { FieldType, ImageType } from './type'; diff --git a/src/app/chat/SideBar/SessionList/SessionCreate.tsx b/src/app/chat/SideBar/SessionList/SessionCreate.tsx index ae28499c..e20586e8 100644 --- a/src/app/chat/SideBar/SessionList/SessionCreate.tsx +++ b/src/app/chat/SideBar/SessionList/SessionCreate.tsx @@ -7,12 +7,12 @@ import { useGlobalStore } from '@/store/global'; export default () => { const openPanel = useGlobalStore((s) => s.openPanel); - const { t } = useTranslation('common'); + const { t } = useTranslation('chat'); return ( openPanel('market')} - title={t('actions.sessionCreate')} + title={t('sessionCreate')} size={DESKTOP_HEADER_ICON_SIZE} /> ); diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/List/index.tsx b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/List/index.tsx new file mode 100644 index 00000000..bf90b921 --- /dev/null +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/List/index.tsx @@ -0,0 +1,34 @@ +import React, { memo, useEffect } from 'react'; + +import GridList from '@/components/GridList'; +import { agentSelectors, useAgentStore } from '@/store/agent'; +import { useMarketStore } from '@/store/market'; + +const AgentList = () => { + const [activateAgent, agentList, agentLoading, currentAgentId, fetchAgentIndex] = useMarketStore( + (s) => [s.activateAgent, s.agentList, s.agentLoading, s.currentAgentId, s.fetchAgentIndex], + ); + useEffect(() => { + fetchAgentIndex(); + }, [fetchAgentIndex]); + + const [subscribed] = useAgentStore((s) => [agentSelectors.subscribed(s)]); + + return ( + ({ + avatar: items.meta.avatar, + id: items.agentId, + name: items.meta.name, + }))} + onClick={(id) => { + activateAgent(id); + }} + isActivated={(id) => id === currentAgentId} + isChecked={(id) => subscribed(id)} + /> + ); +}; + +export default memo(AgentList); diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/ChatButton.tsx b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/ChatButton.tsx new file mode 100644 index 00000000..0da55e4d --- /dev/null +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/ChatButton.tsx @@ -0,0 +1,35 @@ +import { Button } from 'antd'; +import { useRouter } from 'next/navigation'; +import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useGlobalStore } from '@/store/global'; +import { useSessionStore } from '@/store/session'; +import { Agent } from '@/types/agent'; + +interface ChatButtonProps { + agent: Agent; +} + +const ChatButton = memo(({ agent }) => { + const router = useRouter(); + const { t } = useTranslation('chat'); + const createSession = useSessionStore((s) => s.createSession); + + const [closePanel] = useGlobalStore((s) => [s.closePanel]); + return ( + + ); +}); + +export default ChatButton; diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/Subscribe.tsx b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/Subscribe.tsx new file mode 100644 index 00000000..702c01be --- /dev/null +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/Subscribe.tsx @@ -0,0 +1,59 @@ +import { Button, Popover, Progress, Space } from 'antd'; +import React, { memo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Flexbox } from 'react-layout-kit'; + +import { useDownloadAgent } from '@/hooks/useDownloadAgent'; +import { agentSelectors, useAgentStore } from '@/store/agent'; +import { Agent } from '@/types/agent'; + +interface SubscribeButtonProps { + agent: Agent; +} + +const Subscribe = memo((props: SubscribeButtonProps) => { + const { agent } = props; + const subscribed = useAgentStore((s) => agentSelectors.subscribed(s)); + + const { fetchAgentData, percent, downloading } = useDownloadAgent(); + const isSubscribed = subscribed(agent.agentId); + + const { t } = useTranslation('common'); + + return ( + document.querySelector('#subscribe_button')!} + title={ + + + + {t('download.cover')} + + + + {t('download.avatar')} + + + + {t('download.model')} + + + } + > + + + ); +}); + +export default Subscribe; diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/UnSubscribe.tsx b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/UnSubscribe.tsx new file mode 100644 index 00000000..db2b71f2 --- /dev/null +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/UnSubscribe.tsx @@ -0,0 +1,44 @@ +import { Button, Popconfirm, message } from 'antd'; +import React, { memo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useAgentStore } from '@/store/agent'; +import { useSessionStore } from '@/store/session'; +import { Agent } from '@/types/agent'; + +interface UnSubscribeButtonProps { + agent: Agent; +} + +const UnSubscribe = memo((props: UnSubscribeButtonProps) => { + const { agent } = props; + const removeLocalAgent = useAgentStore((s) => s.removeLocalAgent); + const removeSessionByAgentId = useSessionStore((s) => s.removeSessionByAgentId); + const [loading, setLoading] = useState(false); + + const { t } = useTranslation('role'); + + return ( + { + if (!agent) return; + setLoading(true); + await removeLocalAgent(agent.agentId); + removeSessionByAgentId(agent.agentId); + setLoading(false); + message.success(t('subscribe.success', { ns: 'common' })); + }} + title={t('subscribe.undo', { ns: 'common' }) + '?'} + > + + + ); +}); + +export default UnSubscribe; diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/index.tsx b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/index.tsx new file mode 100644 index 00000000..d072ed7c --- /dev/null +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/index.tsx @@ -0,0 +1,93 @@ +import { DraggablePanel } from '@lobehub/ui'; +import { createStyles } from 'antd-style'; +import React, { memo, useState } from 'react'; + +import Author from '@/components/Author'; +import AgentCard from '@/components/agent/AgentCard'; +import SystemRole from '@/components/agent/SystemRole'; +import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token'; +import { agentSelectors, useAgentStore } from '@/store/agent'; +import { marketStoreSelectors, useMarketStore } from '@/store/market'; + +import ChatButton from './actions/ChatButton'; +import Subscribe from './actions/Subscribe'; +import UnSubscribe from './actions/UnSubscribe'; + +const useStyles = createStyles(({ css, token }) => ({ + content: css` + overflow: auto; + display: flex; + flex-direction: column; + + height: 100% !important; + padding: 0; + `, + header: css` + border-bottom: 1px solid ${token.colorBorder}; + `, +})); + +const Header = () => { + const { styles } = useStyles(); + const [tempId, setTempId] = useState(''); + const [showAgentSidebar, activateAgent, deactivateAgent, currentAgentItem] = useMarketStore( + (s) => [ + marketStoreSelectors.showAgentSideBar(s), + s.activateAgent, + s.deactivateAgent, + marketStoreSelectors.currentAgentItem(s), + ], + ); + const [subscribed] = useAgentStore((s) => [agentSelectors.subscribed(s)]); + + const actions = []; + if (currentAgentItem) { + const isSubscribed = subscribed(currentAgentItem.agentId); + + if (isSubscribed) { + actions.push( + , + , + ); + } else { + actions.push( + , + ); + } + } + + return ( + { + if (!show) { + setTempId(useMarketStore.getState().currentAgentId); + deactivateAgent(); + } else if (tempId) { + activateAgent(tempId); + } + }} + placement={'right'} + > + + } + footer={} + /> + + ); +}; + +export default memo(Header); diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/index.tsx b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/index.tsx new file mode 100644 index 00000000..48144fce --- /dev/null +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/index.tsx @@ -0,0 +1,49 @@ +import { createStyles } from 'antd-style'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Flexbox } from 'react-layout-kit'; + +import TopBanner from '@/components/TopBanner'; + +import AgentList from './List'; +import MarketInfo from './MarketInfo'; + +const useStyles = createStyles(({ css }) => ({ + container: css` + overflow-y: auto; + + width: 100%; + height: 100%; + min-height: 500px; + padding: 0 24px; + `, + content: css` + max-width: 1024px; + margin: 0 auto; + `, + title: css` + z-index: 2; + margin-top: 24px; + font-size: 36px; + font-weight: 800; + `, +})); + +const Agent = () => { + const { styles } = useStyles(); + const { t } = useTranslation('market'); + + return ( + +
+
+ + +
+
+ + + ); +}; + +export default Agent; diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/index.tsx b/src/app/chat/SideBar/SessionList/SessionCreateModal/index.tsx new file mode 100644 index 00000000..50aad1f7 --- /dev/null +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/index.tsx @@ -0,0 +1,39 @@ +import { ActionIcon, Modal } from '@lobehub/ui'; +import { PlusCircle } from 'lucide-react'; +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/token'; + +import Market from './Market'; +import { useStyles } from './style'; + +export default () => { + const { t } = useTranslation('chat'); + const [isModalOpen, setIsModalOpen] = useState(false); + const { styles } = useStyles(); + + return ( + <> + setIsModalOpen(true)} + /> + + setIsModalOpen(false)} + open={isModalOpen} + title={t('market')} + > + + + + ); +}; diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/style.ts b/src/app/chat/SideBar/SessionList/SessionCreateModal/style.ts new file mode 100644 index 00000000..1fa46db0 --- /dev/null +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/style.ts @@ -0,0 +1,12 @@ +import { createStyles } from 'antd-style'; + +export const useStyles = createStyles(({ css, token }) => ({ + modalBody: css` + height: 640px; + padding: 0; + padding-block: 0 !important; + padding-inline: 0 !important; + + border-top: 1px solid ${token.colorBorder}; + `, +})); diff --git a/src/app/chat/SideBar/SessionList/index.tsx b/src/app/chat/SideBar/SessionList/index.tsx index 349c3820..5ea99f57 100644 --- a/src/app/chat/SideBar/SessionList/index.tsx +++ b/src/app/chat/SideBar/SessionList/index.tsx @@ -8,7 +8,7 @@ import { HEADER_HEIGHT } from '@/constants/token'; import V from './Elsa'; import List from './List'; -import SessionCreate from './SessionCreate'; +import SessionCreateModal from './SessionCreateModal'; const useStyles = createStyles(({ css, token, prefixCls }) => ({ list: css` @@ -43,7 +43,7 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({ `, })); -const SideBar = () => { +const SessionList = () => { const { styles } = useStyles(); const [searchName, setSearchName] = useState(); const { t } = useTranslation('common'); @@ -66,7 +66,7 @@ const SideBar = () => { type={'block'} value={searchName} /> - +
@@ -76,4 +76,4 @@ const SideBar = () => { ); }; -export default SideBar; +export default SessionList; diff --git a/src/locales/default/chat.ts b/src/locales/default/chat.ts index f1358ee2..ed8d9757 100644 --- a/src/locales/default/chat.ts +++ b/src/locales/default/chat.ts @@ -36,6 +36,7 @@ export default { placeholder: '请输入内容开始聊天', alert: '请谨记：智能体所说的一切都是由 AI 生成的', }, + market: '发现', tts: { record: '语音识别（需科学上网）', combine: '语音合成', From 174b57b8c9bb9ff9bfbe0eead068c9ec1a7a830b Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Sat, 24 Aug 2024 23:22:34 +0800 Subject: [PATCH 02/11] =?UTF-8?q?:art:=20chore:=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=EF=BC=9A=E5=8E=BB=E6=8E=89=20Panel=EF=BC=8C=E5=8F=96=E7=94=A8?= =?UTF-8?q?=20Modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 - src/app/chat/Apps.tsx | 36 ------- .../Market/Card/SubscribeButton.tsx | 2 +- .../Market/Card/UnSubscribeButton.tsx | 0 .../DanceMarketModal}/Market/Card/index.tsx | 5 +- .../DanceMarketModal}/Market/List/index.tsx | 0 .../DanceMarketModal}/Market/index.tsx | 0 .../DanceMarketModal}/Market/style.ts | 0 .../DanceList/DanceMarketModal/index.tsx | 31 ++++++ .../DanceList/DanceMarketModal/style.ts | 12 +++ src/app/chat/ChatInfo/DanceList/index.tsx | 14 ++- .../SideBar/SessionList/SessionCreate.tsx | 19 ---- .../Market/MarketInfo/actions/ChatButton.tsx | 3 - .../SessionList/SessionCreateModal/index.tsx | 2 +- src/app/chat/SideBar/SessionList/index.tsx | 4 +- src/app/chat/SideBar/SkeletonList.tsx | 50 ++++++++++ src/app/chat/SideBar/index.tsx | 6 +- src/app/chat/layout.tsx | 7 +- src/app/chat/loading.tsx | 3 + .../market}/Market/List/index.tsx | 0 .../Market/MarketInfo/actions/ChatButton.tsx | 3 - .../Market/MarketInfo/actions/Subscribe.tsx | 0 .../Market/MarketInfo/actions/UnSubscribe.tsx | 0 .../market}/Market/MarketInfo/index.tsx | 0 .../market}/Market/index.tsx | 0 src/app/market/page.tsx | 2 +- src/components/CircleLoading/index.tsx | 21 ++++ src/components/Panel/Container.tsx | 94 ------------------ src/components/Panel/index.tsx | 97 ------------------- src/components/Panel/style.ts | 79 --------------- src/features/DebugUI/data.ts | 10 -- src/locales/default/chat.ts | 2 +- src/panels/DancePanel/index.tsx | 26 ----- src/panels/MarketPanel/index.tsx | 26 ----- src/panels/MarketPanel/style.ts | 12 --- src/panels/PanelContainer.tsx | 50 ---------- src/panels/PanelContext.ts | 5 - src/store/global/index.ts | 89 +---------------- src/store/global/selectors/panel.ts | 13 --- src/store/market/index.ts | 4 +- src/store/market/slices/panel.ts | 22 ----- src/types/config.ts | 21 ---- 42 files changed, 144 insertions(+), 628 deletions(-) delete mode 100644 src/app/chat/Apps.tsx rename src/{panels/DancePanel => app/chat/ChatInfo/DanceList/DanceMarketModal}/Market/Card/SubscribeButton.tsx (96%) rename src/{panels/DancePanel => app/chat/ChatInfo/DanceList/DanceMarketModal}/Market/Card/UnSubscribeButton.tsx (100%) rename src/{panels/DancePanel => app/chat/ChatInfo/DanceList/DanceMarketModal}/Market/Card/index.tsx (93%) rename src/{panels/DancePanel => app/chat/ChatInfo/DanceList/DanceMarketModal}/Market/List/index.tsx (100%) rename src/{panels/DancePanel => app/chat/ChatInfo/DanceList/DanceMarketModal}/Market/index.tsx (100%) rename src/{panels/DancePanel => app/chat/ChatInfo/DanceList/DanceMarketModal}/Market/style.ts (100%) create mode 100644 src/app/chat/ChatInfo/DanceList/DanceMarketModal/index.tsx create mode 100644 src/app/chat/ChatInfo/DanceList/DanceMarketModal/style.ts delete mode 100644 src/app/chat/SideBar/SessionList/SessionCreate.tsx create mode 100644 src/app/chat/SideBar/SkeletonList.tsx create mode 100644 src/app/chat/loading.tsx rename src/{panels/MarketPanel => app/market}/Market/List/index.tsx (100%) rename src/{panels/MarketPanel => app/market}/Market/MarketInfo/actions/ChatButton.tsx (83%) rename src/{panels/MarketPanel => app/market}/Market/MarketInfo/actions/Subscribe.tsx (100%) rename src/{panels/MarketPanel => app/market}/Market/MarketInfo/actions/UnSubscribe.tsx (100%) rename src/{panels/MarketPanel => app/market}/Market/MarketInfo/index.tsx (100%) rename src/{panels/MarketPanel => app/market}/Market/index.tsx (100%) create mode 100644 src/components/CircleLoading/index.tsx delete mode 100644 src/components/Panel/Container.tsx delete mode 100644 src/components/Panel/index.tsx delete mode 100644 src/components/Panel/style.ts delete mode 100644 src/panels/DancePanel/index.tsx delete mode 100644 src/panels/MarketPanel/index.tsx delete mode 100644 src/panels/MarketPanel/style.ts delete mode 100644 src/panels/PanelContainer.tsx delete mode 100644 src/panels/PanelContext.ts delete mode 100644 src/store/global/selectors/panel.ts delete mode 100644 src/store/market/slices/panel.ts diff --git a/package.json b/package.json index c4bbecd2..06fe8354 100644 --- a/package.json +++ b/package.json @@ -67,8 +67,6 @@ "@ant-design/icons": "^5.3.7", "@aws-sdk/client-s3": "^3.600.0", "@aws-sdk/s3-request-presigner": "^3.600.0", - "@dnd-kit/core": "^6.1.0", - "@dnd-kit/utilities": "^3.2.2", "@gltf-transform/core": "^4.0.2", "@icons-pack/react-simple-icons": "^9.6.0", "@lobehub/i18n-cli": "^1.18.1", diff --git a/src/app/chat/Apps.tsx b/src/app/chat/Apps.tsx deleted file mode 100644 index 28f26cc1..00000000 --- a/src/app/chat/Apps.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import dynamic from 'next/dynamic'; - -import { useGlobalStore } from '@/store/global'; -import { PanelKey } from '@/types/config'; - -const DancePanel = dynamic(() => import('@/panels/DancePanel')); -const MarketPanel = dynamic(() => import('@/panels/MarketPanel')); - -export const apps = [ - { - component: , - key: 'dance', - }, - { - component: , - key: 'market', - }, -]; - -export default () => { - const [panel] = useGlobalStore((s) => [s.panel]); - - return ( - <> - {apps.map((app) => { - const open = panel[app.key as PanelKey].open; - const component = app.component; - return ( -
- {component} -
- ); - })} - - ); -}; diff --git a/src/panels/DancePanel/Market/Card/SubscribeButton.tsx b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/Card/SubscribeButton.tsx similarity index 96% rename from src/panels/DancePanel/Market/Card/SubscribeButton.tsx rename to src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/Card/SubscribeButton.tsx index 0da73331..00708ba3 100644 --- a/src/panels/DancePanel/Market/Card/SubscribeButton.tsx +++ b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/Card/SubscribeButton.tsx @@ -26,7 +26,7 @@ const SubscribeButton = (props: SubscribeButtonProps) => { type={'primary'} > - {t('actions.downloadSubscribe')} + {t('download.subscribe')} {downloading ? ( ({ content: css` display: flex; diff --git a/src/panels/DancePanel/Market/List/index.tsx b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/List/index.tsx similarity index 100% rename from src/panels/DancePanel/Market/List/index.tsx rename to src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/List/index.tsx diff --git a/src/panels/DancePanel/Market/index.tsx b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/index.tsx similarity index 100% rename from src/panels/DancePanel/Market/index.tsx rename to src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/index.tsx diff --git a/src/panels/DancePanel/Market/style.ts b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/style.ts similarity index 100% rename from src/panels/DancePanel/Market/style.ts rename to src/app/chat/ChatInfo/DanceList/DanceMarketModal/Market/style.ts diff --git a/src/app/chat/ChatInfo/DanceList/DanceMarketModal/index.tsx b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/index.tsx new file mode 100644 index 00000000..1e9adf1a --- /dev/null +++ b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/index.tsx @@ -0,0 +1,31 @@ +import { Modal } from '@lobehub/ui'; +import { useTranslation } from 'react-i18next'; + +import Market from './Market'; +import { useStyles } from './style'; + +interface Props { + open: boolean; + setOpen: (open: boolean) => void; +} + +export default (props: Props) => { + const { open, setOpen } = props; + const { t } = useTranslation('chat'); + const { styles } = useStyles(); + + return ( + setOpen(false)} + open={open} + title={t('musicAndDance', { ns: 'dance' })} + > + + + ); +}; diff --git a/src/app/chat/ChatInfo/DanceList/DanceMarketModal/style.ts b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/style.ts new file mode 100644 index 00000000..1fa46db0 --- /dev/null +++ b/src/app/chat/ChatInfo/DanceList/DanceMarketModal/style.ts @@ -0,0 +1,12 @@ +import { createStyles } from 'antd-style'; + +export const useStyles = createStyles(({ css, token }) => ({ + modalBody: css` + height: 640px; + padding: 0; + padding-block: 0 !important; + padding-inline: 0 !important; + + border-top: 1px solid ${token.colorBorder}; + `, +})); diff --git a/src/app/chat/ChatInfo/DanceList/index.tsx b/src/app/chat/ChatInfo/DanceList/index.tsx index 419c8e66..099f2c2e 100644 --- a/src/app/chat/ChatInfo/DanceList/index.tsx +++ b/src/app/chat/ChatInfo/DanceList/index.tsx @@ -3,16 +3,19 @@ import { Empty } from 'antd'; import { createStyles } from 'antd-style'; import classNames from 'classnames'; import { PlusCircle } from 'lucide-react'; -import React, { memo } from 'react'; +import dynamic from 'next/dynamic'; +import React, { memo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; import Header from '@/components/Header'; import { useDanceStore } from '@/store/dance'; -import { useGlobalStore } from '@/store/global'; import DanceItem from './Item'; +// eslint-disable-next-line @typescript-eslint/no-use-before-define +const DanceMarketModal = dynamic(() => import('./DanceMarketModal')); + interface PlayListProps { className?: string; style?: React.CSSProperties; @@ -40,7 +43,7 @@ const useStyles = createStyles(({ css, token }) => ({ const DanceList = (props: PlayListProps) => { const danceList = useDanceStore((s) => s.danceList); - const [openPanel] = useGlobalStore((s) => [s.openPanel]); + const [open, setOpen] = useState(false); const { t } = useTranslation('chat'); const { className, style } = props; @@ -49,13 +52,14 @@ const DanceList = (props: PlayListProps) => { return ( +
{ - openPanel('dance'); + setOpen(true); }} title={t('musicAndDance', { ns: 'dance' })} /> @@ -74,7 +78,7 @@ const DanceList = (props: PlayListProps) => { glow size="middle" onClick={() => { - openPanel('dance'); + setOpen(true); }} > {t('musicAndDance', { ns: 'dance' })} diff --git a/src/app/chat/SideBar/SessionList/SessionCreate.tsx b/src/app/chat/SideBar/SessionList/SessionCreate.tsx deleted file mode 100644 index e20586e8..00000000 --- a/src/app/chat/SideBar/SessionList/SessionCreate.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { ActionIcon } from '@lobehub/ui'; -import { PlusCircle } from 'lucide-react'; -import { useTranslation } from 'react-i18next'; - -import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/token'; -import { useGlobalStore } from '@/store/global'; - -export default () => { - const openPanel = useGlobalStore((s) => s.openPanel); - const { t } = useTranslation('chat'); - return ( - openPanel('market')} - title={t('sessionCreate')} - size={DESKTOP_HEADER_ICON_SIZE} - /> - ); -}; diff --git a/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/ChatButton.tsx b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/ChatButton.tsx index 0da55e4d..90cda7a3 100644 --- a/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/ChatButton.tsx +++ b/src/app/chat/SideBar/SessionList/SessionCreateModal/Market/MarketInfo/actions/ChatButton.tsx @@ -3,7 +3,6 @@ import { useRouter } from 'next/navigation'; import React, { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useGlobalStore } from '@/store/global'; import { useSessionStore } from '@/store/session'; import { Agent } from '@/types/agent'; @@ -16,14 +15,12 @@ const ChatButton = memo(({ agent }) => { const { t } = useTranslation('chat'); const createSession = useSessionStore((s) => s.createSession); - const [closePanel] = useGlobalStore((s) => [s.closePanel]); return (