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

feat: scrollbar

Browse Source
This commit is contained in:
kangfenmao 2024-10-24 14:50:16 +08:00
parent 6e7b6d8387
commit 077a66c675
14 changed files with 542 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -93,6 +93,7 @@
"openai": "^4.52.1", "openai": "^4.52.1",
"prettier": "^3.2.4", "prettier": "^3.2.4",
"react": "^18.2.0", "react": "^18.2.0",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-i18next": "^14.1.2", "react-i18next": "^14.1.2",
"react-markdown": "^9.0.1", "react-markdown": "^9.0.1",

9
src/renderer/src/assets/styles/index.scss
View File

@ -1,5 +1,6 @@
@import './markdown.scss'; @import './markdown.scss';
@import './ant.scss'; @import './ant.scss';
@import './scrollbar.scss';
@import '../fonts/icon-fonts/iconfont.css'; @import '../fonts/icon-fonts/iconfont.css';
@import '../fonts/ubuntu/ubuntu.css'; @import '../fonts/ubuntu/ubuntu.css';
@ -36,9 +37,6 @@
--color-error: #f44336; --color-error: #f44336;
--color-link: #1677ff; --color-link: #1677ff;
--color-code-background: #323232; --color-code-background: #323232;
--color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
--color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
--color-scrollbar-thumb-active: rgba(255, 255, 255, 0.2);
--color-hover: rgba(40, 40, 40, 1); --color-hover: rgba(40, 40, 40, 1);
--color-active: rgba(55, 55, 55, 1); --color-active: rgba(55, 55, 55, 1);
@ -48,7 +46,7 @@
--navbar-height: 40px; --navbar-height: 40px;
--sidebar-width: 50px; --sidebar-width: 50px;
--status-bar-height: 40px; --status-bar-height: 40px;
--input-bar-height: 85px; --input-bar-height: 100px;
--assistants-width: 275px; --assistants-width: 275px;
--topic-list-width: 275px; --topic-list-width: 275px;
@ -88,9 +86,6 @@ body[theme-mode='light'] {
--color-error: #f44336; --color-error: #f44336;
--color-link: #1677ff; --color-link: #1677ff;
--color-code-background: #e3e3e3; --color-code-background: #e3e3e3;
--color-scrollbar-thumb: rgba(0, 0, 0, 0.08);
--color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.15);
--color-scrollbar-thumb-active: rgba(0, 0, 0, 0.2);
--color-hover: var(--color-white-mute); --color-hover: var(--color-white-mute);
--color-active: var(--color-white-soft); --color-active: var(--color-white-soft);

23
src/renderer/src/assets/styles/scrollbar.scss
View File

@ -1,7 +1,17 @@
:root {
--color-scrollbar-thumb: #6b6b6b;
--color-scrollbar-thumb-hover: #939393;
}
body[theme-mode='light'] {
--color-scrollbar-thumb: #b1b1b1;
--color-scrollbar-thumb-hover: #7d7d7d;
}
/* 全局初始化滚动条样式 */ /* 全局初始化滚动条样式 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 4px; width: 5px;
height: 2px; height: 5px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -9,8 +19,17 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px;
background: var(--color-scrollbar-thumb); background: var(--color-scrollbar-thumb);
&:hover { &:hover {
background: var(--color-scrollbar-thumb-hover); background: var(--color-scrollbar-thumb-hover);
} }
} }
pre::-webkit-scrollbar-thumb {
border-radius: 0;
background: rgba(0, 0, 0, 0.08);
&:hover {
background: rgba(0, 0, 0, 0.15);
}
}

22
src/renderer/src/components/Scrollbar/index.tsx Normal file
View File

@ -0,0 +1,22 @@
import { ScrollbarProps, Scrollbars } from 'react-custom-scrollbars-2'
import styled from 'styled-components'
export const Scrollbar: React.FC<ScrollbarProps> = ({ children, ...props }) => {
return (
<Scrollbars
autoHide
{...props}
renderThumbVertical={(props) => <Thumb {...props} />}
renderTrackHorizontal={(props) => <Thumb {...props} />}>
{children}
</Scrollbars>
)
}
const Thumb = styled.div`
border-radius: 10px;
background-color: var(--color-scrollbar-thumb);
&:hover {
background-color: var(--color-scrollbar-thumb-hover);
}
`

1
src/renderer/src/hooks/useAppInit.ts
View File

@ -45,7 +45,6 @@ export function useAppInit() {
useEffect(() => { useEffect(() => {
const transparentWindow = windowStyle === 'transparent' && isMac && !minappShow const transparentWindow = windowStyle === 'transparent' && isMac && !minappShow
window.root.style.background = transparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)' window.root.style.background = transparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
!isMac && import('@renderer/assets/styles/scrollbar.scss')
}, [windowStyle, minappShow]) }, [windowStyle, minappShow])
useEffect(() => { useEffect(() => {

80
src/renderer/src/pages/agents/Agents.tsx
View File

@ -2,6 +2,7 @@ import { DeleteOutlined, EditOutlined, MoreOutlined, PlusOutlined } from '@ant-d
import AssistantSettingsPopup from '@renderer/components/AssistantSettings' import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
import DragableList from '@renderer/components/DragableList' import DragableList from '@renderer/components/DragableList'
import { HStack } from '@renderer/components/Layout' import { HStack } from '@renderer/components/Layout'
import { Scrollbar } from '@renderer/components/Scrollbar'
import { useAgents } from '@renderer/hooks/useAgents' import { useAgents } from '@renderer/hooks/useAgents'
import { createAssistantFromAgent } from '@renderer/services/assistant' import { createAssistantFromAgent } from '@renderer/services/assistant'
import { Agent } from '@renderer/types' import { Agent } from '@renderer/types'
@ -56,42 +57,45 @@ const Agents: React.FC<Props> = ({ onClick }) => {
) )
return ( return (
<Container style={{ paddingBottom: dragging ? 30 : 0 }}> <Scrollbar style={{ width: 280 }}>
{agents.length > 0 && ( <Container style={{ paddingBottom: dragging ? 30 : 0 }}>
<DragableList {agents.length > 0 && (
list={agents} <DragableList
onUpdate={updateAgents} list={agents}
onDragStart={() => setDragging(true)} onUpdate={updateAgents}
onDragEnd={() => setDragging(false)}> onDragStart={() => setDragging(true)}
{(agent: Agent) => ( onDragEnd={() => setDragging(false)}>
<Dropdown menu={{ items: getMenuItems(agent) }} trigger={['contextMenu']}> {(agent: Agent) => (
<AgentItem onClick={() => onClick(agent)}> <Dropdown menu={{ items: getMenuItems(agent) }} trigger={['contextMenu']}>
<HStack alignItems="center" justifyContent="space-between" h="36px"> <AgentItem onClick={() => onClick(agent)}>
<AgentItemName className="text-nowrap"> <HStack alignItems="center" justifyContent="space-between" h="36px">
{agent.emoji} {agent.name} <AgentItemName className="text-nowrap">
</AgentItemName> {agent.emoji} {agent.name}
<ActionButton className="actions" gap="15px" onClick={(e) => e.stopPropagation()}> </AgentItemName>
<Dropdown menu={{ items: getMenuItems(agent) }} trigger={['hover']}> <ActionButton className="actions" gap="15px" onClick={(e) => e.stopPropagation()}>
<MoreOutlined style={{ cursor: 'pointer' }} /> <Dropdown menu={{ items: getMenuItems(agent) }} trigger={['hover']}>
</Dropdown> <MoreOutlined style={{ cursor: 'pointer' }} />
</ActionButton> </Dropdown>
</HStack> </ActionButton>
<AgentItemPrompt>{agent.prompt}</AgentItemPrompt> </HStack>
</AgentItem> <AgentItemPrompt>{agent.prompt}</AgentItemPrompt>
</Dropdown> </AgentItem>
)} </Dropdown>
</DragableList> )}
)} </DragableList>
{!dragging && ( )}
<Button {!dragging && (
type="dashed" <Button
icon={<PlusOutlined />} type="dashed"
onClick={() => AddAgentPopup.show()} icon={<PlusOutlined />}
style={{ borderRadius: 20, height: 34 }}> onClick={() => AddAgentPopup.show()}
{t('agents.add.title')} style={{ borderRadius: 20, height: 34 }}>
</Button> {t('agents.add.title')}
)} </Button>
</Container> )}
<div style={{ height: 10 }} />
</Container>
</Scrollbar>
) )
} }
@ -99,10 +103,8 @@ const Container = styled.div`
padding: 15px; padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 280px;
height: calc(100vh - var(--navbar-height));
border-right: 0.5px solid var(--color-border); border-right: 0.5px solid var(--color-border);
overflow-y: scroll; min-height: calc(100vh - var(--navbar-height));
` `
const AgentItem = styled.div` const AgentItem = styled.div`

56
src/renderer/src/pages/agents/AgentsPage.tsx
View File

@ -1,5 +1,6 @@
import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar' import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
import { VStack } from '@renderer/components/Layout' import { VStack } from '@renderer/components/Layout'
import { Scrollbar } from '@renderer/components/Scrollbar'
import SystemAgents from '@renderer/config/agents.json' import SystemAgents from '@renderer/config/agents.json'
import { createAssistantFromAgent } from '@renderer/services/assistant' import { createAssistantFromAgent } from '@renderer/services/assistant'
import { Agent } from '@renderer/types' import { Agent } from '@renderer/types'
@ -60,32 +61,34 @@ const AgentsPage: FC = () => {
</Navbar> </Navbar>
<ContentContainer id="content-container"> <ContentContainer id="content-container">
<Agents onClick={onAddAgentConfirm} /> <Agents onClick={onAddAgentConfirm} />
<AssistantsContainer> <Scrollbar>
<VStack style={{ flex: 1 }}> <AssistantsContainer>
{Object.keys(agentGroups) <VStack style={{ flex: 1 }}>
.reverse() {Object.keys(agentGroups)
.map((group) => ( .reverse()
<div key={group}> .map((group) => (
<Title level={5} key={group} style={{ marginBottom: 16 }}> <div key={group}>
{group} <Title level={5} key={group} style={{ marginBottom: 16 }}>
</Title> {group}
<Row gutter={16}> </Title>
{agentGroups[group].map((agent, index) => { <Row gutter={16}>
return ( {agentGroups[group].map((agent, index) => {
<Col span={8} key={group + index}> return (
<AgentCard <Col span={8} key={group + index}>
onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))} <AgentCard
agent={agent as any} onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))}
/> agent={agent as any}
</Col> />
) </Col>
})} )
</Row> })}
</div> </Row>
))} </div>
<div style={{ minHeight: 20 }} /> ))}
</VStack> <div style={{ minHeight: 20 }} />
</AssistantsContainer> </VStack>
</AssistantsContainer>
</Scrollbar>
</ContentContainer> </ContentContainer>
</Container> </Container>
) )
@ -112,7 +115,6 @@ const AssistantsContainer = styled.div`
flex-direction: row; flex-direction: row;
height: calc(100vh - var(--navbar-height)); height: calc(100vh - var(--navbar-height));
padding: 15px 20px; padding: 15px 20px;
overflow-y: scroll;
` `
const AgentPrompt = styled.div` const AgentPrompt = styled.div`

23
src/renderer/src/pages/files/FilesPage.tsx
View File

@ -1,5 +1,6 @@
import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar' import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
import { VStack } from '@renderer/components/Layout' import { VStack } from '@renderer/components/Layout'
import { Scrollbar } from '@renderer/components/Scrollbar'
import db from '@renderer/databases' import db from '@renderer/databases'
import FileManager from '@renderer/services/file' import FileManager from '@renderer/services/file'
import { FileType, FileTypes } from '@renderer/types' import { FileType, FileTypes } from '@renderer/types'
@ -66,15 +67,17 @@ const FilesPage: FC = () => {
<NavbarCenter style={{ borderRight: 'none' }}>{t('files.title')}</NavbarCenter> <NavbarCenter style={{ borderRight: 'none' }}>{t('files.title')}</NavbarCenter>
</Navbar> </Navbar>
<ContentContainer id="content-container"> <ContentContainer id="content-container">
<VStack style={{ width: '100%' }}> <Scrollbar>
<Table <VStack style={{ width: '100%', padding: 15 }}>
dataSource={dataSource} <Table
columns={columns} dataSource={dataSource}
style={{ width: '100%', marginBottom: 20 }} columns={columns}
size="small" style={{ width: '100%', marginBottom: 20 }}
pagination={{ pageSize: 100 }} size="small"
/> pagination={{ pageSize: 100 }}
</VStack> />
</VStack>
</Scrollbar>
</ContentContainer> </ContentContainer>
</Container> </Container>
) )
@ -93,8 +96,6 @@ const ContentContainer = styled.div`
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
overflow-y: scroll;
padding: 15px;
` `
const FileNameText = styled.div` const FileNameText = styled.div`

50
src/renderer/src/pages/home/Messages/Messages.tsx
View File

@ -1,4 +1,4 @@
import { isWindows } from '@renderer/config/constant' import { Scrollbar } from '@renderer/components/Scrollbar'
import db from '@renderer/databases' import db from '@renderer/databases'
import { useAssistant } from '@renderer/hooks/useAssistant' import { useAssistant } from '@renderer/hooks/useAssistant'
import { useSettings } from '@renderer/hooks/useSettings' import { useSettings } from '@renderer/hooks/useSettings'
@ -9,7 +9,7 @@ import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
import { deleteMessageFiles, filterMessages, getContextCount } from '@renderer/services/messages' import { deleteMessageFiles, filterMessages, getContextCount } from '@renderer/services/messages'
import { estimateHistoryTokens, estimateMessageUsage } from '@renderer/services/tokens' import { estimateHistoryTokens, estimateMessageUsage } from '@renderer/services/tokens'
import { Assistant, Message, Model, Topic } from '@renderer/types' import { Assistant, Message, Model, Topic } from '@renderer/types'
import { captureScrollableDiv, classNames, runAsyncFunction, uuid } from '@renderer/utils' import { captureScrollableDiv, runAsyncFunction, uuid } from '@renderer/utils'
import { t } from 'i18next' import { t } from 'i18next'
import { flatten, last, reverse, take } from 'lodash' import { flatten, last, reverse, take } from 'lodash'
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
@ -220,45 +220,33 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
}, [assistant, messages]) }, [assistant, messages])
return ( return (
<Container <Scrollbar>
id="messages" <Container id="messages" style={{ maxWidth }} key={assistant.id} ref={containerRef}>
className={classNames(isWindows && 'scrollbar')} <Suggestions assistant={assistant} messages={messages} lastMessage={lastMessage} />
style={{ maxWidth }} {lastMessage && <MessageItem key={lastMessage.id} message={lastMessage} lastMessage />}
key={assistant.id} {reverse([...messages]).map((message, index) => (
ref={containerRef}> <MessageItem
<Suggestions assistant={assistant} messages={messages} lastMessage={lastMessage} /> key={message.id}
{lastMessage && <MessageItem key={lastMessage.id} message={lastMessage} lastMessage />} message={message}
{reverse([...messages]).map((message, index) => ( index={index}
<MessageItem hidePresetMessages={assistant.settings?.hideMessages}
key={message.id} onEditMessage={onEditMessage}
message={message} onDeleteMessage={onDeleteMessage}
index={index} />
hidePresetMessages={assistant.settings?.hideMessages} ))}
onEditMessage={onEditMessage} <Prompt assistant={assistant} key={assistant.prompt} />
onDeleteMessage={onDeleteMessage} </Container>
/> </Scrollbar>
))}
<Prompt assistant={assistant} key={assistant.prompt} />
</Container>
) )
} }
const Container = styled.div` const Container = styled.div`
position: relative;
display: flex; display: flex;
flex-direction: column;
overflow-y: auto;
flex-direction: column-reverse; flex-direction: column-reverse;
max-height: calc(100vh - var(--input-bar-height) - var(--navbar-height));
padding: 10px 0; padding: 10px 0;
background-color: var(--color-background); background-color: var(--color-background);
padding-bottom: 20px; padding-bottom: 20px;
overflow-x: hidden; overflow-x: hidden;
&.scrollbar {
&::-webkit-scrollbar {
width: 10px;
}
}
` `
export default Messages export default Messages

113
src/renderer/src/pages/home/Tabs/Assistants.tsx
View File

@ -2,6 +2,7 @@ import { DeleteOutlined, EditOutlined, MinusCircleOutlined, PlusOutlined, SaveOu
import AssistantSettingsPopup from '@renderer/components/AssistantSettings' import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
import DragableList from '@renderer/components/DragableList' import DragableList from '@renderer/components/DragableList'
import CopyIcon from '@renderer/components/Icons/CopyIcon' import CopyIcon from '@renderer/components/Icons/CopyIcon'
import { Scrollbar } from '@renderer/components/Scrollbar'
import { useAgents } from '@renderer/hooks/useAgents' import { useAgents } from '@renderer/hooks/useAgents'
import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant' import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
import { useSettings } from '@renderer/hooks/useSettings' import { useSettings } from '@renderer/hooks/useSettings'
@ -178,69 +179,69 @@ const Assistants: FC<Props> = ({
}, [activeAssistant?.id, list, onSwitchAssistant]) }, [activeAssistant?.id, list, onSwitchAssistant])
return ( return (
<Container> <Scrollbar>
{assistants.length >= 10 && ( <Container>
<SearchContainer> {assistants.length >= 10 && (
<Input <SearchContainer>
placeholder={t('chat.assistant.search.placeholder')} <Input
suffix={<CommandKey>⌘+K</CommandKey>} placeholder={t('chat.assistant.search.placeholder')}
value={search} suffix={<CommandKey>⌘+K</CommandKey>}
onChange={(e) => setSearch(e.target.value)} value={search}
style={{ borderRadius: 16, borderWidth: 0.5 }} onChange={(e) => setSearch(e.target.value)}
onKeyDown={onSearch} style={{ borderRadius: 16, borderWidth: 0.5 }}
ref={searchRef} onKeyDown={onSearch}
onFocus={() => dispatch(setSearching(true))} ref={searchRef}
onBlur={() => { onFocus={() => dispatch(setSearching(true))}
dispatch(setSearching(false)) onBlur={() => {
setSearch('') dispatch(setSearching(false))
}} setSearch('')
allowClear }}
/> allowClear
</SearchContainer> />
)} </SearchContainer>
<DragableList )}
list={list} <DragableList
onUpdate={updateAssistants} list={list}
droppableProps={{ isDropDisabled: !isEmpty(search) }} onUpdate={updateAssistants}
style={{ paddingBottom: dragging ? '34px' : 0 }} droppableProps={{ isDropDisabled: !isEmpty(search) }}
onDragStart={() => setDragging(true)} style={{ paddingBottom: dragging ? '34px' : 0 }}
onDragEnd={() => setDragging(false)}> onDragStart={() => setDragging(true)}
{(assistant) => { onDragEnd={() => setDragging(false)}>
const isCurrent = assistant.id === activeAssistant?.id {(assistant) => {
return ( const isCurrent = assistant.id === activeAssistant?.id
<Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}> return (
<AssistantItem onClick={() => onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}> <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
<AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName> <AssistantItem onClick={() => onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}>
{isCurrent && ( <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
<ArrowRightButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}> {isCurrent && (
<i className="iconfont icon-gridlines" /> <ArrowRightButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
</ArrowRightButton> <i className="iconfont icon-gridlines" />
)} </ArrowRightButton>
{false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>} )}
</AssistantItem> {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
</Dropdown> </AssistantItem>
) </Dropdown>
}} )
</DragableList> }}
{!dragging && ( </DragableList>
<AssistantItem onClick={onCreateAssistant}> {!dragging && (
<AssistantName> <AssistantItem onClick={onCreateAssistant}>
<PlusOutlined style={{ color: 'var(--color-text-2)', marginRight: 4 }} /> <AssistantName>
{t('chat.add.assistant.title')} <PlusOutlined style={{ color: 'var(--color-text-2)', marginRight: 4 }} />
</AssistantName> {t('chat.add.assistant.title')}
</AssistantItem> </AssistantName>
)} </AssistantItem>
</Container> )}
<div style={{ minHeight: 10 }}></div>
</Container>
</Scrollbar>
) )
} }
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--navbar-height));
overflow-y: auto;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px;
` `
const AssistantItem = styled.div` const AssistantItem = styled.div`

347
src/renderer/src/pages/home/Tabs/Settings.tsx
View File

@ -1,5 +1,6 @@
import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons' import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons'
import { HStack } from '@renderer/components/Layout' import { HStack } from '@renderer/components/Layout'
import { Scrollbar } from '@renderer/components/Scrollbar'
import { DEFAULT_CONEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant' import { DEFAULT_CONEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
import { useAssistant } from '@renderer/hooks/useAssistant' import { useAssistant } from '@renderer/hooks/useAssistant'
import { useSettings } from '@renderer/hooks/useSettings' import { useSettings } from '@renderer/hooks/useSettings'
@ -97,183 +98,185 @@ const SettingsTab: FC<Props> = (props) => {
}, [assistant]) }, [assistant])
return ( return (
<Container> <Scrollbar>
<SettingSubtitle style={{ marginTop: 5 }}> <Container>
{t('settings.messages.model.title')}{' '} <SettingSubtitle style={{ marginTop: 5 }}>
<Tooltip title={t('chat.settings.reset')}> {t('settings.messages.model.title')}{' '}
<ReloadOutlined onClick={onReset} style={{ cursor: 'pointer', fontSize: 12, padding: '0 3px' }} /> <Tooltip title={t('chat.settings.reset')}>
</Tooltip> <ReloadOutlined onClick={onReset} style={{ cursor: 'pointer', fontSize: 12, padding: '0 3px' }} />
</SettingSubtitle> </Tooltip>
<SettingDivider /> </SettingSubtitle>
<Row align="middle"> <SettingDivider />
<Label>{t('chat.settings.temperature')}</Label> <Row align="middle">
<Tooltip title={t('chat.settings.temperature.tip')}> <Label>{t('chat.settings.temperature')}</Label>
<QuestionIcon /> <Tooltip title={t('chat.settings.temperature.tip')}>
</Tooltip>
</Row>
<Row align="middle" gutter={10}>
<Col span={24}>
<Slider
min={0}
max={2}
onChange={setTemperature}
onChangeComplete={onTemperatureChange}
value={typeof temperature === 'number' ? temperature : 0}
step={0.1}
/>
</Col>
</Row>
<Row align="middle">
<Label>{t('chat.settings.conext_count')}</Label>
<Tooltip title={t('chat.settings.conext_count.tip')}>
<QuestionIcon />
</Tooltip>
</Row>
<Row align="middle" gutter={10}>
<Col span={24}>
<Slider
min={0}
max={20}
onChange={setConextCount}
onChangeComplete={onConextCountChange}
value={typeof contextCount === 'number' ? contextCount : 0}
step={1}
/>
</Col>
</Row>
<SettingRow>
<SettingRowTitleSmall>{t('model.stream_output')}</SettingRowTitleSmall>
<Switch
size="small"
checked={streamOutput}
onChange={(checked) => {
setStreamOutput(checked)
onUpdateAssistantSettings({ streamOutput: checked })
}}
/>
</SettingRow>
<SettingDivider />
<Row align="middle" justify="space-between">
<HStack alignItems="center">
<Label>{t('chat.settings.max_tokens')}</Label>
<Tooltip title={t('chat.settings.max_tokens.tip')}>
<QuestionIcon /> <QuestionIcon />
</Tooltip> </Tooltip>
</HStack> </Row>
<Switch <Row align="middle" gutter={10}>
size="small" <Col span={24}>
checked={enableMaxTokens} <Slider
onChange={(enabled) => { min={0}
setEnableMaxTokens(enabled) max={2}
onUpdateAssistantSettings({ enableMaxTokens: enabled }) onChange={setTemperature}
}} onChangeComplete={onTemperatureChange}
/> value={typeof temperature === 'number' ? temperature : 0}
</Row> step={0.1}
<Row align="middle" gutter={10}> />
<Col span={24}> </Col>
<Slider </Row>
disabled={!enableMaxTokens} <Row align="middle">
min={0} <Label>{t('chat.settings.conext_count')}</Label>
max={32000} <Tooltip title={t('chat.settings.conext_count.tip')}>
onChange={setMaxTokens} <QuestionIcon />
onChangeComplete={onMaxTokensChange} </Tooltip>
value={typeof maxTokens === 'number' ? maxTokens : 0} </Row>
step={100} <Row align="middle" gutter={10}>
/> <Col span={24}>
</Col> <Slider
</Row> min={0}
<SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle> max={20}
<SettingDivider /> onChange={setConextCount}
<SettingRow> onChangeComplete={onConextCountChange}
<SettingRowTitleSmall>{t('settings.messages.divider')}</SettingRowTitleSmall> value={typeof contextCount === 'number' ? contextCount : 0}
<Switch step={1}
size="small" />
checked={showMessageDivider} </Col>
onChange={(checked) => dispatch(setShowMessageDivider(checked))} </Row>
/> <SettingRow>
</SettingRow> <SettingRowTitleSmall>{t('model.stream_output')}</SettingRowTitleSmall>
<SettingDivider /> <Switch
<SettingRow> size="small"
<SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall> checked={streamOutput}
<Switch onChange={(checked) => {
size="small" setStreamOutput(checked)
checked={messageFont === 'serif'} onUpdateAssistantSettings({ streamOutput: checked })
onChange={(checked) => dispatch(setMessageFont(checked ? 'serif' : 'system'))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
<Switch
size="small"
checked={codeShowLineNumbers}
onChange={(checked) => dispatch(setCodeShowLineNumbers(checked))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
</SettingRow>
<Row align="middle" gutter={10}>
<Col span={24}>
<Slider
value={fontSizeValue}
onChange={(value) => setFontSizeValue(value)}
onChangeComplete={(value) => dispatch(setFontSize(value))}
min={12}
max={22}
step={1}
marks={{
12: <span style={{ fontSize: '12px' }}>A</span>,
14: <span style={{ fontSize: '14px' }}>{t('common.default')}</span>,
22: <span style={{ fontSize: '18px' }}>A</span>
}} }}
/> />
</Col> </SettingRow>
</Row> <SettingDivider />
<SettingSubtitle>{t('settings.messages.input.title')}</SettingSubtitle> <Row align="middle" justify="space-between">
<SettingDivider /> <HStack alignItems="center">
<SettingRow> <Label>{t('chat.settings.max_tokens')}</Label>
<SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall> <Tooltip title={t('chat.settings.max_tokens.tip')}>
<Switch <QuestionIcon />
size="small" </Tooltip>
checked={showInputEstimatedTokens} </HStack>
onChange={(checked) => dispatch(setShowInputEstimatedTokens(checked))} <Switch
size="small"
checked={enableMaxTokens}
onChange={(enabled) => {
setEnableMaxTokens(enabled)
onUpdateAssistantSettings({ enableMaxTokens: enabled })
}}
/>
</Row>
<Row align="middle" gutter={10}>
<Col span={24}>
<Slider
disabled={!enableMaxTokens}
min={0}
max={32000}
onChange={setMaxTokens}
onChangeComplete={onMaxTokensChange}
value={typeof maxTokens === 'number' ? maxTokens : 0}
step={100}
/>
</Col>
</Row>
<SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.divider')}</SettingRowTitleSmall>
<Switch
size="small"
checked={showMessageDivider}
onChange={(checked) => dispatch(setShowMessageDivider(checked))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
<Switch
size="small"
checked={messageFont === 'serif'}
onChange={(checked) => dispatch(setMessageFont(checked ? 'serif' : 'system'))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
<Switch
size="small"
checked={codeShowLineNumbers}
onChange={(checked) => dispatch(setCodeShowLineNumbers(checked))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
</SettingRow>
<Row align="middle" gutter={10}>
<Col span={24}>
<Slider
value={fontSizeValue}
onChange={(value) => setFontSizeValue(value)}
onChangeComplete={(value) => dispatch(setFontSize(value))}
min={12}
max={22}
step={1}
marks={{
12: <span style={{ fontSize: '12px' }}>A</span>,
14: <span style={{ fontSize: '14px' }}>{t('common.default')}</span>,
22: <span style={{ fontSize: '18px' }}>A</span>
}}
/>
</Col>
</Row>
<SettingSubtitle>{t('settings.messages.input.title')}</SettingSubtitle>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
<Switch
size="small"
checked={showInputEstimatedTokens}
onChange={(checked) => dispatch(setShowInputEstimatedTokens(checked))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
<Switch
size="small"
checked={pasteLongTextAsFile}
onChange={(checked) => dispatch(setPasteLongTextAsFile(checked))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
<Switch
size="small"
checked={renderInputMessageAsMarkdown}
onChange={(checked) => dispatch(setRenderInputMessageAsMarkdown(checked))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
</SettingRow>
<Select
value={sendMessageShortcut}
menuItemSelectedIcon={<CheckOutlined />}
options={[
{ value: 'Enter', label: `Enter ${t('chat.input.send')}` },
{ value: 'Shift+Enter', label: `Shift + Enter ${t('chat.input.send')}` }
]}
onChange={(value) => setSendMessageShortcut(value)}
style={{ width: '100%', marginTop: 10 }}
/> />
</SettingRow> </Container>
<SettingDivider /> </Scrollbar>
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
<Switch
size="small"
checked={pasteLongTextAsFile}
onChange={(checked) => dispatch(setPasteLongTextAsFile(checked))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
<Switch
size="small"
checked={renderInputMessageAsMarkdown}
onChange={(checked) => dispatch(setRenderInputMessageAsMarkdown(checked))}
/>
</SettingRow>
<SettingDivider />
<SettingRow>
<SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
</SettingRow>
<Select
value={sendMessageShortcut}
menuItemSelectedIcon={<CheckOutlined />}
options={[
{ value: 'Enter', label: `Enter ${t('chat.input.send')}` },
{ value: 'Shift+Enter', label: `Shift + Enter ${t('chat.input.send')}` }
]}
onChange={(value) => setSendMessageShortcut(value)}
style={{ width: '100%', marginTop: 10 }}
/>
</Container>
) )
} }

68
src/renderer/src/pages/home/Tabs/Topics.tsx
View File

@ -8,6 +8,7 @@ import {
} from '@ant-design/icons' } from '@ant-design/icons'
import DragableList from '@renderer/components/DragableList' import DragableList from '@renderer/components/DragableList'
import PromptPopup from '@renderer/components/Popups/PromptPopup' import PromptPopup from '@renderer/components/Popups/PromptPopup'
import { Scrollbar } from '@renderer/components/Scrollbar'
import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant' import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
import { useSettings } from '@renderer/hooks/useSettings' import { useSettings } from '@renderer/hooks/useSettings'
import { TopicManager } from '@renderer/hooks/useTopic' import { TopicManager } from '@renderer/hooks/useTopic'
@ -177,38 +178,40 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
) )
return ( return (
<Container> <Scrollbar>
<DragableList list={assistant.topics} onUpdate={updateTopics}> <Container>
{(topic) => { <DragableList list={assistant.topics} onUpdate={updateTopics}>
const isActive = topic.id === activeTopic?.id {(topic) => {
return ( const isActive = topic.id === activeTopic?.id
<Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}> return (
<TopicListItem <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
className={isActive ? 'active' : ''} <TopicListItem
style={{ borderRadius }} className={isActive ? 'active' : ''}
onClick={() => onSwitchTopic(topic)}> style={{ borderRadius }}
<TopicName className="name">{topic.name.replace('`', '')}</TopicName> onClick={() => onSwitchTopic(topic)}>
{showTopicTime && <TopicTime>{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>} <TopicName className="name">{topic.name.replace('`', '')}</TopicName>
{isActive && ( {showTopicTime && <TopicTime>{dayjs(topic.createdAt).format('MM/DD HH:mm')}</TopicTime>}
<MenuButton {isActive && (
className="menu" <MenuButton
onClick={(e) => { className="menu"
e.stopPropagation() onClick={(e) => {
if (assistant.topics.length === 1) { e.stopPropagation()
return onClearMessages() if (assistant.topics.length === 1) {
} return onClearMessages()
onDeleteTopic(topic) }
}}> onDeleteTopic(topic)
<CloseOutlined /> }}>
</MenuButton> <CloseOutlined />
)} </MenuButton>
</TopicListItem> )}
</Dropdown> </TopicListItem>
) </Dropdown>
}} )
</DragableList> }}
<div style={{ minHeight: '10px' }}></div> </DragableList>
</Container> <div style={{ minHeight: '10px' }}></div>
</Container>
</Scrollbar>
) )
} }
@ -216,7 +219,6 @@ const Container = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 10px; padding-top: 10px;
max-height: calc(100vh - var(--navbar-height) - 70px);
` `
const TopicListItem = styled.div` const TopicListItem = styled.div`

106
src/renderer/src/pages/settings/ProviderSettings/index.tsx
View File

@ -1,5 +1,6 @@
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons' import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'
import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd' import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
import { Scrollbar } from '@renderer/components/Scrollbar'
import { getProviderLogo } from '@renderer/config/providers' import { getProviderLogo } from '@renderer/config/providers'
import { useAllProviders, useProviders } from '@renderer/hooks/useProvider' import { useAllProviders, useProviders } from '@renderer/hooks/useProvider'
import { Provider } from '@renderer/types' import { Provider } from '@renderer/types'
@ -85,56 +86,58 @@ const ProvidersList: FC = () => {
return ( return (
<Container> <Container>
<ProviderListContainer> <ProviderListContainer>
<ProviderList> <Scrollbar>
<DragDropContext onDragStart={() => setDragging(true)} onDragEnd={onDragEnd}> <ProviderList>
<Droppable droppableId="droppable"> <DragDropContext onDragStart={() => setDragging(true)} onDragEnd={onDragEnd}>
{(provided) => ( <Droppable droppableId="droppable">
<div {...provided.droppableProps} ref={provided.innerRef}> {(provided) => (
{providers.map((provider, index) => ( <div {...provided.droppableProps} ref={provided.innerRef}>
<Draggable key={`draggable_${provider.id}_${index}`} draggableId={provider.id} index={index}> {providers.map((provider, index) => (
{(provided) => ( <Draggable key={`draggable_${provider.id}_${index}`} draggableId={provider.id} index={index}>
<div {(provided) => (
ref={provided.innerRef} <div
{...provided.draggableProps} ref={provided.innerRef}
{...provided.dragHandleProps} {...provided.draggableProps}
style={{ ...provided.draggableProps.style, marginBottom: 5 }}> {...provided.dragHandleProps}
<Dropdown style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
menu={{ items: provider.isSystem ? [] : getDropdownMenus(provider) }} <Dropdown
trigger={['contextMenu']}> menu={{ items: provider.isSystem ? [] : getDropdownMenus(provider) }}
<ProviderListItem trigger={['contextMenu']}>
key={JSON.stringify(provider)} <ProviderListItem
className={provider.id === selectedProvider?.id ? 'active' : ''} key={JSON.stringify(provider)}
onClick={() => setSelectedProvider(provider)}> className={provider.id === selectedProvider?.id ? 'active' : ''}
{provider.isSystem && ( onClick={() => setSelectedProvider(provider)}>
<ProviderLogo shape="square" src={getProviderLogo(provider.id)} size={25} /> {provider.isSystem && (
)} <ProviderLogo shape="square" src={getProviderLogo(provider.id)} size={25} />
{!provider.isSystem && ( )}
<ProviderLogo {!provider.isSystem && (
size={25} <ProviderLogo
shape="square" size={25}
style={{ backgroundColor: generateColorFromChar(provider.name), minWidth: 25 }}> shape="square"
{getFirstCharacter(provider.name)} style={{ backgroundColor: generateColorFromChar(provider.name), minWidth: 25 }}>
</ProviderLogo> {getFirstCharacter(provider.name)}
)} </ProviderLogo>
<ProviderItemName className="text-nowrap"> )}
{provider.isSystem ? t(`provider.${provider.id}`) : provider.name} <ProviderItemName className="text-nowrap">
</ProviderItemName> {provider.isSystem ? t(`provider.${provider.id}`) : provider.name}
{provider.enabled && ( </ProviderItemName>
<Tag color="green" style={{ marginLeft: 'auto' }}> {provider.enabled && (
ON <Tag color="green" style={{ marginLeft: 'auto' }}>
</Tag> ON
)} </Tag>
</ProviderListItem> )}
</Dropdown> </ProviderListItem>
</div> </Dropdown>
)} </div>
</Draggable> )}
))} </Draggable>
</div> ))}
)} </div>
</Droppable> )}
</DragDropContext> </Droppable>
</ProviderList> </DragDropContext>
</ProviderList>
</Scrollbar>
{!dragging && ( {!dragging && (
<AddButtonWrapper> <AddButtonWrapper>
<Button type="dashed" style={{ width: '100%' }} icon={<PlusOutlined />} onClick={onAddProvider} /> <Button type="dashed" style={{ width: '100%' }} icon={<PlusOutlined />} onClick={onAddProvider} />
@ -159,15 +162,12 @@ const ProviderListContainer = styled.div`
width: var(--assistants-width); width: var(--assistants-width);
height: calc(100vh - var(--navbar-height)); height: calc(100vh - var(--navbar-height));
border-right: 0.5px solid var(--color-border); border-right: 0.5px solid var(--color-border);
overflow-y: auto;
` `
const ProviderList = styled.div` const ProviderList = styled.div`
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--navbar-height));
overflow: auto;
padding: 8px; padding: 8px;
` `

76
yarn.lock
View File

@ -2344,6 +2344,7 @@ __metadata:
openai: "npm:^4.52.1" openai: "npm:^4.52.1"
prettier: "npm:^3.2.4" prettier: "npm:^3.2.4"
react: "npm:^18.2.0" react: "npm:^18.2.0"
react-custom-scrollbars-2: "npm:^4.5.0"
react-dom: "npm:^18.2.0" react-dom: "npm:^18.2.0"
react-i18next: "npm:^14.1.2" react-i18next: "npm:^14.1.2"
react-markdown: "npm:^9.0.1" react-markdown: "npm:^9.0.1"
@ -2413,6 +2414,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"add-px-to-style@npm:1.0.0":
version: 1.0.0
resolution: "add-px-to-style@npm:1.0.0"
checksum: 10c0/d05d0e3242360e296b5b244d1bfbb946a06338653685af95962291da39ee6db9b33ccc2299a5a0ebef8fde62d39b085997b0b76d4c6098f4c164e539afa8d0f4
languageName: node
linkType: hard
"agent-base@npm:6, agent-base@npm:^6.0.2": "agent-base@npm:6, agent-base@npm:^6.0.2":
version: 6.0.2 version: 6.0.2
resolution: "agent-base@npm:6.0.2" resolution: "agent-base@npm:6.0.2"
@ -4292,6 +4300,17 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"dom-css@npm:^2.0.0":
version: 2.1.0
resolution: "dom-css@npm:2.1.0"
dependencies:
add-px-to-style: "npm:1.0.0"
prefix-style: "npm:2.0.1"
to-camel-case: "npm:1.0.0"
checksum: 10c0/80975ea794f740b8da0ebde8b4a7203bcf017f44027c669f45c71822f9d298fcf62cd5333134af82d9f886719655149a3257ca3c669af920b523bc7e1fc6723c
languageName: node
linkType: hard
"dom-walk@npm:^0.1.0": "dom-walk@npm:^0.1.0":
version: 0.1.2 version: 0.1.2
resolution: "dom-walk@npm:0.1.2" resolution: "dom-walk@npm:0.1.2"
@ -9301,6 +9320,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"prefix-style@npm:2.0.1":
version: 2.0.1
resolution: "prefix-style@npm:2.0.1"
checksum: 10c0/1db0449b2f7578d30e0ca96cf3014b9dbe42531f0d97dac7ecc7f1369dfbf326fa8e8a321e468ee86e2959f001115c109a0ebe0a4182ca1e920cba10b2d8344d
languageName: node
linkType: hard
"prelude-ls@npm:^1.2.1": "prelude-ls@npm:^1.2.1":
version: 1.2.1 version: 1.2.1
resolution: "prelude-ls@npm:1.2.1" resolution: "prelude-ls@npm:1.2.1"
@ -9392,7 +9418,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"prop-types@npm:^15.8.1": "prop-types@npm:^15.5.10, prop-types@npm:^15.8.1":
version: 15.8.1 version: 15.8.1
resolution: "prop-types@npm:15.8.1" resolution: "prop-types@npm:15.8.1"
dependencies: dependencies:
@ -9501,6 +9527,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"raf@npm:^3.1.0":
version: 3.4.1
resolution: "raf@npm:3.4.1"
dependencies:
performance-now: "npm:^2.1.0"
checksum: 10c0/337f0853c9e6a77647b0f499beedafea5d6facfb9f2d488a624f88b03df2be72b8a0e7f9118a3ff811377d534912039a3311815700d2b6d2313f82f736f9eb6e
languageName: node
linkType: hard
"rc-cascader@npm:~3.28.1": "rc-cascader@npm:~3.28.1":
version: 3.28.1 version: 3.28.1
resolution: "rc-cascader@npm:3.28.1" resolution: "rc-cascader@npm:3.28.1"
@ -10049,6 +10084,20 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"react-custom-scrollbars-2@npm:^4.5.0":
version: 4.5.0
resolution: "react-custom-scrollbars-2@npm:4.5.0"
dependencies:
dom-css: "npm:^2.0.0"
prop-types: "npm:^15.5.10"
raf: "npm:^3.1.0"
peerDependencies:
react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
checksum: 10c0/9670bf15bebabbe6c5b75be577430d6a990875874725019fa75db73b0e51300d65158ef962f9b534513b9b70b900244deb11df55c429ba426e580e478634f4f9
languageName: node
linkType: hard
"react-dom@npm:^18.2.0": "react-dom@npm:^18.2.0":
version: 18.3.1 version: 18.3.1
resolution: "react-dom@npm:18.3.1" resolution: "react-dom@npm:18.3.1"
@ -11786,6 +11835,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"to-camel-case@npm:1.0.0":
version: 1.0.0
resolution: "to-camel-case@npm:1.0.0"
dependencies:
to-space-case: "npm:^1.0.0"
checksum: 10c0/357921548908053d774d4b836f42437139c6fc9d73aaf40a1aa59d7317d760541a19667eb2884d9db83902065a90d80b0fe74c59bc13943e8489df9ef4335069
languageName: node
linkType: hard
"to-fast-properties@npm:^2.0.0": "to-fast-properties@npm:^2.0.0":
version: 2.0.0 version: 2.0.0
resolution: "to-fast-properties@npm:2.0.0" resolution: "to-fast-properties@npm:2.0.0"
@ -11793,6 +11851,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"to-no-case@npm:^1.0.0":
version: 1.0.2
resolution: "to-no-case@npm:1.0.2"
checksum: 10c0/c035b04e1042ed67ceb23dc5c7c20ccde11a83ab1d2b3947c17918472b5d26dd4ffdb4cf9464752e7707ab9f3af4a106f9b61244c724bc6810422acd5984da3d
languageName: node
linkType: hard
"to-regex-range@npm:^5.0.1": "to-regex-range@npm:^5.0.1":
version: 5.0.1 version: 5.0.1
resolution: "to-regex-range@npm:5.0.1" resolution: "to-regex-range@npm:5.0.1"
@ -11802,6 +11867,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"to-space-case@npm:^1.0.0":
version: 1.0.0
resolution: "to-space-case@npm:1.0.0"
dependencies:
to-no-case: "npm:^1.0.0"
checksum: 10c0/b99e1b5d0f3c90a8d47fa3b155d515027bd83a370740e82ee7cb064f86e3655f030f068bddcb8d18239e7408761b4376d89ab91e5ccdb17dc859d8fd4f570ac5
languageName: node
linkType: hard
"toggle-selection@npm:^1.0.6": "toggle-selection@npm:^1.0.6":
version: 1.0.6 version: 1.0.6
resolution: "toggle-selection@npm:1.0.6" resolution: "toggle-selection@npm:1.0.6"