whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: Extract message group settings into a separate component

Browse Source
This commit is contained in:
kangfenmao 2025-02-17 22:13:53 +08:00
parent 93e28ed916
commit 7feeb07624
2 changed files with 64 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/renderer/src/pages/home/Messages/MessageGroup.tsx
View File

@ -10,15 +10,15 @@ import { HStack } from '@renderer/components/Layout'
import Scrollbar from '@renderer/components/Scrollbar'
import { useSettings } from '@renderer/hooks/useSettings'
import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
import { useAppDispatch } from '@renderer/store'
import { MultiModelMessageStyle, setGridColumns, setGridPopoverTrigger } from '@renderer/store/settings'
import { MultiModelMessageStyle } from '@renderer/store/settings'
import { Message, Model, Topic } from '@renderer/types'
import { Button, Popover, Segmented as AntdSegmented, Select, Slider } from 'antd'
import { Button, Popover, Segmented as AntdSegmented } from 'antd'
import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled, { css } from 'styled-components'
import MessageItem from './Message'
import MessageGroupSettings from './MessageGroupSettings'
interface Props {
messages: (Message & { index: number })[]
@ -41,8 +41,6 @@ const MessageGroup: FC<Props> = ({
}) => {
const { multiModelMessageStyle: multiModelMessageStyleSetting, gridColumns } = useSettings()
const { t } = useTranslation()
const dispatch = useAppDispatch()
const [gridColumnsValue, setGridColumnsValue] = useState(gridColumns)
const [multiModelMessageStyle, setMultiModelMessageStyle] =
useState<MultiModelMessageStyle>(multiModelMessageStyleSetting)
@ -198,26 +196,7 @@ const MessageGroup: FC<Props> = ({
/>
</ModelsContainer>
)}
{multiModelMessageStyle === 'grid' && (
<HStack style={{ marginLeft: 20, gap: 20, alignItems: 'center' }}>
<Select
value={gridPopoverTrigger || 'hover'}
onChange={(value) => dispatch(setGridPopoverTrigger(value))}
size="small">
<Select.Option value="hover">{t('settings.messages.grid_popover_trigger.hover')}</Select.Option>
<Select.Option value="click">{t('settings.messages.grid_popover_trigger.click')}</Select.Option>
</Select>
<Slider
style={{ width: 80 }}
value={gridColumnsValue}
onChange={(value) => setGridColumnsValue(value)}
onChangeComplete={(value) => dispatch(setGridColumns(value))}
min={2}
max={6}
step={1}
/>
</HStack>
)}
{multiModelMessageStyle === 'grid' && <MessageGroupSettings />}
</HStack>
<Button
type="text"
@ -278,6 +257,7 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
}
return 'block'
}};
${({ $layout, $isGrouped }) => {
if ($layout === 'horizontal' && $isGrouped) {
return css`

59
src/renderer/src/pages/home/Messages/MessageGroupSettings.tsx Normal file
View File

@ -0,0 +1,59 @@
import { SettingOutlined } from '@ant-design/icons'
import { useSettings } from '@renderer/hooks/useSettings'
import { SettingDivider } from '@renderer/pages/settings'
import { SettingRow } from '@renderer/pages/settings'
import { useAppDispatch } from '@renderer/store'
import { setGridColumns, setGridPopoverTrigger } from '@renderer/store/settings'
import { Col, Row, Select, Slider } from 'antd'
import { Popover } from 'antd'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
const MessageGroupSettings: FC = () => {
const dispatch = useAppDispatch()
const { t } = useTranslation()
const { gridColumns, gridPopoverTrigger } = useSettings()
const [gridColumnsValue, setGridColumnsValue] = useState(gridColumns)
return (
<Popover
trigger={undefined}
showArrow
content={
<div style={{ padding: 10 }}>
<SettingRow>
<div style={{ marginRight: 10 }}>{t('settings.messages.grid_popover_trigger')}</div>
<Select
value={gridPopoverTrigger || 'hover'}
onChange={(value) => dispatch(setGridPopoverTrigger(value as 'hover' | 'click'))}
size="small">
<Select.Option value="hover">{t('settings.messages.grid_popover_trigger.hover')}</Select.Option>
<Select.Option value="click">{t('settings.messages.grid_popover_trigger.click')}</Select.Option>
</Select>
</SettingRow>
<SettingDivider />
<SettingRow>
<div>{t('settings.messages.grid_columns')}</div>
</SettingRow>
<Row align="middle" gutter={10}>
<Col span={24}>
<Slider
value={gridColumnsValue}
style={{ width: '100%' }}
onChange={(value) => setGridColumnsValue(value)}
onChangeComplete={(value) => dispatch(setGridColumns(value))}
min={2}
max={6}
step={1}
/>
</Col>
</Row>
</div>
}>
<SettingOutlined style={{ marginLeft: 15, cursor: 'pointer' }} />
</Popover>
)
}
export default MessageGroupSettings