style: removed dark theme styles, updated search and ui
This commit is contained in:
parent
75e396ecf0
commit
64c8831530
@ -31,9 +31,6 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
|
|||||||
Menu: {
|
Menu: {
|
||||||
activeBarBorderWidth: 0,
|
activeBarBorderWidth: 0,
|
||||||
darkItemBg: 'transparent'
|
darkItemBg: 'transparent'
|
||||||
},
|
|
||||||
Modal: {
|
|
||||||
colorBgMask: isDarkTheme ? 'rgba(0, 0, 0, 0.85)' : 'rgba(255, 255, 255, 0.8)'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
token: {
|
token: {
|
||||||
|
|||||||
@ -44,7 +44,7 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
|
|||||||
const showRightTopics = showTopics && topicPosition === 'right'
|
const showRightTopics = showTopics && topicPosition === 'right'
|
||||||
const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
|
const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
|
||||||
const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
|
const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
|
||||||
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)`
|
return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 2px)`
|
||||||
}, [showAssistants, showTopics, topicPosition])
|
}, [showAssistants, showTopics, topicPosition])
|
||||||
|
|
||||||
const scrollToBottom = useCallback(() => {
|
const scrollToBottom = useCallback(() => {
|
||||||
|
|||||||
@ -8,14 +8,13 @@ import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
|
|||||||
import { useSettings } from '@renderer/hooks/useSettings'
|
import { useSettings } from '@renderer/hooks/useSettings'
|
||||||
import { getDefaultTopic } from '@renderer/services/AssistantService'
|
import { getDefaultTopic } from '@renderer/services/AssistantService'
|
||||||
import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
|
import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
|
||||||
import { useAppDispatch, useAppSelector } from '@renderer/store'
|
import { useAppSelector } from '@renderer/store'
|
||||||
import { setSearching } from '@renderer/store/runtime'
|
|
||||||
import { Assistant } from '@renderer/types'
|
import { Assistant } from '@renderer/types'
|
||||||
import { uuid } from '@renderer/utils'
|
import { uuid } from '@renderer/utils'
|
||||||
import { Dropdown, Input, InputRef } from 'antd'
|
import { Dropdown } from 'antd'
|
||||||
import { ItemType } from 'antd/es/menu/interface'
|
import { ItemType } from 'antd/es/menu/interface'
|
||||||
import { isEmpty, last, omit } from 'lodash'
|
import { last, omit } from 'lodash'
|
||||||
import { FC, useCallback, useEffect, useRef, useState } from 'react'
|
import { FC, useCallback, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
|
||||||
@ -34,13 +33,10 @@ const Assistants: FC<Props> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
|
const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
|
||||||
const generating = useAppSelector((state) => state.runtime.generating)
|
const generating = useAppSelector((state) => state.runtime.generating)
|
||||||
const [search, setSearch] = useState('')
|
|
||||||
const [dragging, setDragging] = useState(false)
|
const [dragging, setDragging] = useState(false)
|
||||||
const { removeAllTopics } = useAssistant(activeAssistant.id)
|
const { removeAllTopics } = useAssistant(activeAssistant.id)
|
||||||
const { clickAssistantToShowTopic, topicPosition } = useSettings()
|
const { clickAssistantToShowTopic, topicPosition } = useSettings()
|
||||||
const searchRef = useRef<InputRef>(null)
|
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const dispatch = useAppDispatch()
|
|
||||||
const { addAgent } = useAgents()
|
const { addAgent } = useAgents()
|
||||||
|
|
||||||
const onDelete = useCallback(
|
const onDelete = useCallback(
|
||||||
@ -138,71 +134,11 @@ const Assistants: FC<Props> = ({
|
|||||||
[clickAssistantToShowTopic, generating, setActiveAssistant, t, topicPosition]
|
[clickAssistantToShowTopic, generating, setActiveAssistant, t, topicPosition]
|
||||||
)
|
)
|
||||||
|
|
||||||
const list = assistants.filter((assistant) => assistant.name?.toLowerCase().includes(search.toLowerCase().trim()))
|
|
||||||
|
|
||||||
const onSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
const isEnterPressed = e.keyCode == 13
|
|
||||||
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
return searchRef.current?.blur()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isEnterPressed) {
|
|
||||||
if (list.length > 0) {
|
|
||||||
if (list.length === 1) {
|
|
||||||
onSwitchAssistant(list[0])
|
|
||||||
setSearch('')
|
|
||||||
setTimeout(() => searchRef.current?.blur(), 0)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const index = list.findIndex((a) => a.id === activeAssistant?.id)
|
|
||||||
onSwitchAssistant(index === list.length - 1 ? list[0] : list[index + 1])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
|
||||||
searchRef.current?.focus()
|
|
||||||
searchRef.current?.select()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Command or Ctrl + K create new topic
|
|
||||||
useEffect(() => {
|
|
||||||
const onKeydown = (e) => {
|
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
|
||||||
searchRef.current?.focus()
|
|
||||||
searchRef.current?.select()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.addEventListener('keydown', onKeydown)
|
|
||||||
return () => document.removeEventListener('keydown', onKeydown)
|
|
||||||
}, [activeAssistant?.id, list, onSwitchAssistant])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
{assistants.length >= 10 && (
|
|
||||||
<SearchContainer>
|
|
||||||
<Input
|
|
||||||
placeholder={t('chat.assistant.search.placeholder')}
|
|
||||||
suffix={<CommandKey>⌘+K</CommandKey>}
|
|
||||||
value={search}
|
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
|
||||||
style={{ borderRadius: 16, borderWidth: 0.5 }}
|
|
||||||
onKeyDown={onSearch}
|
|
||||||
ref={searchRef}
|
|
||||||
onFocus={() => dispatch(setSearching(true))}
|
|
||||||
onBlur={() => {
|
|
||||||
dispatch(setSearching(false))
|
|
||||||
setSearch('')
|
|
||||||
}}
|
|
||||||
allowClear
|
|
||||||
/>
|
|
||||||
</SearchContainer>
|
|
||||||
)}
|
|
||||||
<DragableList
|
<DragableList
|
||||||
list={list}
|
list={assistants}
|
||||||
onUpdate={updateAssistants}
|
onUpdate={updateAssistants}
|
||||||
droppableProps={{ isDropDisabled: !isEmpty(search) }}
|
|
||||||
style={{ paddingBottom: dragging ? '34px' : 0 }}
|
style={{ paddingBottom: dragging ? '34px' : 0 }}
|
||||||
onDragStart={() => setDragging(true)}
|
onDragStart={() => setDragging(true)}
|
||||||
onDragEnd={() => setDragging(false)}>
|
onDragEnd={() => setDragging(false)}>
|
||||||
@ -317,18 +253,4 @@ const TopicCount = styled.div`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
`
|
`
|
||||||
|
|
||||||
const SearchContainer = styled.div`
|
|
||||||
margin: 12px 10px;
|
|
||||||
margin-top: 2px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const CommandKey = styled.div`
|
|
||||||
color: var(--color-text-2);
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 2px 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: var(--color-background);
|
|
||||||
margin-right: -4px;
|
|
||||||
`
|
|
||||||
|
|
||||||
export default Assistants
|
export default Assistants
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user