diff --git a/src/renderer/src/assets/styles/ant.scss b/src/renderer/src/assets/styles/ant.scss index ebe45ef5c6..225cbe8a9d 100644 --- a/src/renderer/src/assets/styles/ant.scss +++ b/src/renderer/src/assets/styles/ant.scss @@ -58,166 +58,80 @@ } } -.mention-models-dropdown { - &.ant-dropdown { - background: rgba(var(--color-base-rgb), 0.65) !important; - backdrop-filter: blur(35px) saturate(150%) !important; - animation-duration: 0.15s !important; - } - - /* 移动其他样式到 mention-models-dropdown 类下 */ - .ant-slide-up-enter .ant-dropdown-menu, - .ant-slide-up-appear .ant-dropdown-menu, - .ant-slide-up-leave .ant-dropdown-menu, - .ant-slide-up-enter-active .ant-dropdown-menu, - .ant-slide-up-appear-active .ant-dropdown-menu, - .ant-slide-up-leave-active .ant-dropdown-menu { - background: rgba(var(--color-base-rgb), 0.65) !important; - backdrop-filter: blur(35px) saturate(150%) !important; - } - - .ant-dropdown-menu { - /* 保持原有的下拉菜单样式，但限定在 mention-models-dropdown 类下 */ - max-height: 400px; - overflow-y: auto; - overflow-x: hidden; - padding: 4px 12px; - position: relative; - background: rgba(var(--color-base-rgb), 0.65) !important; - backdrop-filter: blur(35px) saturate(150%) !important; - border: 0.5px solid rgba(var(--color-border-rgb), 0.3); - border-radius: 10px; - box-shadow: - 0 0 0 0.5px rgba(0, 0, 0, 0.15), - 0 4px 16px rgba(0, 0, 0, 0.15), - 0 2px 8px rgba(0, 0, 0, 0.12), - inset 0 0 0 0.5px rgba(255, 255, 255, var(--inner-glow-opacity, 0.1)); - transform-origin: top; - will-change: transform, opacity; - transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); - margin-bottom: 0; - - &.no-scrollbar { - padding-right: 12px; - } - - &.has-scrollbar { - padding-right: 2px; - } - - // Scrollbar styles - &::-webkit-scrollbar { - width: 14px; - height: 6px; - } - - &::-webkit-scrollbar-thumb { - border: 4px solid transparent; - background-clip: padding-box; - border-radius: 7px; - background-color: var(--color-scrollbar-thumb); - min-height: 50px; - transition: all 0.2s; - } - - &:hover::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-thumb); - } - - &::-webkit-scrollbar-thumb:hover { - background-color: var(--color-scrollbar-thumb-hover); - } - - &::-webkit-scrollbar-thumb:active { - background-color: var(--color-scrollbar-thumb-hover); - } - - &::-webkit-scrollbar-track { - background: transparent; - border-radius: 7px; - } - } - - .ant-dropdown-menu-item-group { - margin-bottom: 4px; - - &:not(:first-child) { - margin-top: 4px; - } - - .ant-dropdown-menu-item-group-title { - padding: 5px 12px; - color: var(--color-text-3); - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.03em; - opacity: 0.7; - } - } - - // Handle no-results case margin - .no-results { - padding: 8px 12px; - color: var(--color-text-3); - cursor: default; - font-size: 13px; - opacity: 0.8; - margin-bottom: 40px; - - &:hover { - background: none; - } - } - - .ant-dropdown-menu-item { - padding: 5px 12px; - margin: 0 -12px; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - gap: 8px; - border-radius: 6px; - font-size: 13px; - - &:hover { - background: rgba(var(--color-hover-rgb), 0.5); - } - - &.ant-dropdown-menu-item-selected { - background-color: rgba(var(--color-primary-rgb), 0.12); - color: var(--color-primary); - } - - .ant-dropdown-menu-item-icon { - margin-right: 0; - opacity: 0.9; - } - } +.ant-dropdown-menu .ant-dropdown-menu-sub { + max-height: 50vh; + width: max-content; + overflow-y: auto; + overflow-x: hidden; + border: 0.5px solid var(--color-border); } - .ant-dropdown { + background-color: var(--ant-color-bg-elevated); + overflow: hidden; + border-radius: var(--ant-border-radius-lg); .ant-dropdown-menu { max-height: 50vh; overflow-y: auto; border: 0.5px solid var(--color-border); - .ant-dropdown-menu-sub { - max-height: 50vh; - width: max-content; - overflow-y: auto; - overflow-x: hidden; - border: 0.5px solid var(--color-border); - } } .ant-dropdown-arrow + .ant-dropdown-menu { border: none; } } - .ant-select-dropdown { border: 0.5px solid var(--color-border); } +.ant-dropdown-menu-submenu { + background-color: var(--ant-color-bg-elevated); + overflow: hidden; + border-radius: var(--ant-border-radius-lg); +} + +.ant-popover { + .ant-popover-inner { + border: 0.5px solid var(--color-border); + .ant-popover-inner-content { + max-height: 70vh; + overflow-y: auto; + } + } + .ant-popover-arrow + .ant-popover-content { + .ant-popover-inner { + border: none; + } + } +} + +.ant-modal:not(.ant-modal-confirm) { + .ant-modal-confirm-body-has-title { + padding: 16px 0 0 0; + } + .ant-modal-content { + border-radius: 10px; + border: 0.5px solid var(--color-border); + padding: 0 0 8px 0; + .ant-modal-header { + padding: 16px 16px 0 16px; + border-radius: 10px; + } + .ant-modal-body { + max-height: 80vh; + overflow-y: auto; + padding: 0 16px 0 16px; + } + .ant-modal-footer { + padding: 0 16px 8px 16px; + } + .ant-modal-confirm-btns { + margin-bottom: 8px; + } + } +} +.ant-modal.ant-modal-confirm.ant-modal-confirm-confirm { + .ant-modal-content { + padding: 16px; + } +} .ant-collapse { border: 1px solid var(--color-border); @@ -227,8 +141,14 @@ } .ant-collapse-content { - border-top: 1px solid var(--color-border) !important; + border-top: 0.5px solid var(--color-border) !important; .ant-color-picker & { border-top: none !important; } } + +.ant-slider { + .ant-slider-handle::after { + box-shadow: 0 1px 4px 0px rgb(128 128 128 / 50%) !important; + } +} diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss index 6100e1d0ee..ce7e9cefe9 100644 --- a/src/renderer/src/assets/styles/color.scss +++ b/src/renderer/src/assets/styles/color.scss @@ -47,7 +47,7 @@ --color-list-item: #222; --color-list-item-hover: #1e1e1e; - --modal-background: #1f1f1f; + --modal-background: #111111; --color-highlight: rgba(0, 0, 0, 1); --color-background-highlight: rgba(255, 255, 0, 0.9); @@ -66,9 +66,9 @@ --settings-width: 250px; --scrollbar-width: 5px; - --chat-background: #111111; - --chat-background-user: #28b561; - --chat-background-assistant: #2c2c2c; + --chat-background: transparent; + --chat-background-user: rgba(255, 255, 255, 0.08); + --chat-background-assistant: transparent; --chat-text-user: var(--color-black); --list-item-border-radius: 20px; @@ -132,8 +132,8 @@ --navbar-background-mac: rgba(255, 255, 255, 0.55); --navbar-background: rgba(244, 244, 244); - --chat-background: #f3f3f3; - --chat-background-user: #95ec69; - --chat-background-assistant: #ffffff; + --chat-background: transparent; + --chat-background-user: rgba(0, 0, 0, 0.045); + --chat-background-assistant: transparent; --chat-text-user: var(--color-text); } diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss index 9974f19596..da28abc8c5 100644 --- a/src/renderer/src/assets/styles/index.scss +++ b/src/renderer/src/assets/styles/index.scss @@ -111,27 +111,7 @@ ul { word-wrap: break-word; } -.bubble { - background-color: var(--chat-background); - #chat-main { - background-color: var(--chat-background); - } - #messages { - background-color: var(--chat-background); - } - #inputbar { - margin: -5px 15px 15px 15px; - background: var(--color-background); - } - .system-prompt { - background-color: var(--chat-background-assistant); - } - .message-content-container { - margin: 5px 0; - border-radius: 8px; - padding: 0.5rem 1rem; - } - +.bubble:not(.multi-select-mode) { .block-wrapper { display: flow-root; } @@ -149,30 +129,35 @@ ul { } .message-user { - color: var(--chat-text-user); - .message-content-container-user .anticon { - color: var(--chat-text-user) !important; + .message-header { + flex-direction: row-reverse; + text-align: right; + .message-header-info-wrap { + flex-direction: row-reverse; + text-align: right; + } } - - .markdown { - color: var(--chat-text-user); - } - } - .group-grid-container.horizontal, - .group-grid-container.grid { - .message-content-container-assistant { - padding: 0; - } - } - .group-message-wrapper { - background-color: var(--color-background); .message-content-container { - width: 100%; + border-radius: 10px 0 10px 10px; + padding: 10px 16px 10px 16px; + background-color: var(--chat-background-user); + align-self: self-end; + } + .MessageFooter { + margin-top: 2px; + align-self: self-end; } } - .group-menu-bar { - background-color: var(--color-background); + + .message-assistant { + .message-content-container { + padding-left: 0; + } + .MessageFooter { + margin-left: 0; + } } + code { color: var(--color-text); } @@ -196,3 +181,9 @@ span.highlight { span.highlight.selected { background-color: var(--color-background-highlight-accent); } + +textarea { + &::-webkit-resizer { + display: none; + } +} diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss index 0c80d9f68a..eea9070cae 100644 --- a/src/renderer/src/assets/styles/markdown.scss +++ b/src/renderer/src/assets/styles/markdown.scss @@ -98,7 +98,6 @@ border: none; border-top: 0.5px solid var(--color-border); margin: 20px 0; - background-color: var(--color-border); } span { @@ -119,7 +118,7 @@ } pre { - border-radius: 5px; + border-radius: 8px; overflow-x: auto; font-family: 'Fira Code', 'Courier New', Courier, monospace; background-color: var(--color-background-mute); @@ -157,15 +156,28 @@ } table { - border-collapse: collapse; + --table-border-radius: 8px; margin: 1em 0; width: 100%; + border-radius: var(--table-border-radius); + overflow: hidden; + border-collapse: separate; + border: 0.5px solid var(--color-border); + border-spacing: 0; } th, td { - border: 0.5px solid var(--color-border); + border-right: 0.5px solid var(--color-border); + border-bottom: 0.5px solid var(--color-border); padding: 0.5em; + &:last-child { + border-right: none; + } + } + + tr:last-child td { + border-bottom: none; } th { @@ -238,6 +250,10 @@ text-decoration: underline; } } + + > *:last-child { + margin-bottom: 0 !important; + } } .footnotes { @@ -309,7 +325,7 @@ mjx-container { /* CodeMirror 相关样式 */ .cm-editor { - border-radius: 5px; + border-radius: inherit; &.cm-focused { outline: none; @@ -317,7 +333,7 @@ mjx-container { .cm-scroller { font-family: var(--code-font-family); - border-radius: 5px; + border-radius: inherit; .cm-gutters { line-height: 1.6; diff --git a/src/renderer/src/components/CodeBlockView/CodePreview.tsx b/src/renderer/src/components/CodeBlockView/CodePreview.tsx index 566a980f67..dde163283d 100644 --- a/src/renderer/src/components/CodeBlockView/CodePreview.tsx +++ b/src/renderer/src/components/CodeBlockView/CodePreview.tsx @@ -244,8 +244,7 @@ const ContentContainer = styled.div<{ }>` position: relative; overflow: auto; - border: 0.5px solid transparent; - border-radius: 5px; + border-radius: inherit; margin-top: 0; /* 动态宽度计算 */ @@ -254,6 +253,7 @@ const ContentContainer = styled.div<{ .shiki { padding: 1em; + border-radius: inherit; code { display: flex; @@ -301,7 +301,7 @@ const ContentContainer = styled.div<{ } } - animation: ${(props) => (props.$fadeIn ? 'contentFadeIn 0.3s ease-in-out forwards' : 'none')}; + animation: ${(props) => (props.$fadeIn ? 'contentFadeIn 0.1s ease-in forwards' : 'none')}; ` const CodePlaceholder = styled.div` diff --git a/src/renderer/src/components/CodeBlockView/index.tsx b/src/renderer/src/components/CodeBlockView/index.tsx index 811b8665cc..c25ab3079d 100644 --- a/src/renderer/src/components/CodeBlockView/index.tsx +++ b/src/renderer/src/components/CodeBlockView/index.tsx @@ -273,6 +273,7 @@ const CodeHeader = styled.div<{ $isInSpecialView: boolean }>` align-items: center; color: var(--color-text); font-size: 14px; + line-height: 1; font-weight: bold; padding: 0 10px; border-top-left-radius: 8px; @@ -288,6 +289,10 @@ const SplitViewWrapper = styled.div` flex: 1 1 auto; width: 100%; } + + &:not(:has(+ [class*='Container'])) { + border-radius: 0 0 8px 8px; + } ` export default memo(CodeBlockView) diff --git a/src/renderer/src/components/CodeEditor/index.tsx b/src/renderer/src/components/CodeEditor/index.tsx index d92fd91e8e..db699fa030 100644 --- a/src/renderer/src/components/CodeEditor/index.tsx +++ b/src/renderer/src/components/CodeEditor/index.tsx @@ -227,10 +227,10 @@ const CodeEditor = ({ ...customBasicSetup // override basicSetup }} style={{ - ...style, fontSize: `${fontSize - 1}px`, - border: '0.5px solid transparent', - marginTop: 0 + marginTop: 0, + borderRadius: 'inherit', + ...style }} /> ) diff --git a/src/renderer/src/components/ContextMenu/index.tsx b/src/renderer/src/components/ContextMenu/index.tsx index 195fcb2a38..610afa695f 100644 --- a/src/renderer/src/components/ContextMenu/index.tsx +++ b/src/renderer/src/components/ContextMenu/index.tsx @@ -1,87 +1,59 @@ import { Dropdown } from 'antd' -import { useCallback, useEffect, useState } from 'react' +import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' -import styled from 'styled-components' interface ContextMenuProps { children: React.ReactNode - onContextMenu?: (e: React.MouseEvent) => void - style?: React.CSSProperties } -const ContextMenu: React.FC = ({ children, onContextMenu, style }) => { +const ContextMenu: React.FC = ({ children }) => { const { t } = useTranslation() - const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null) - const [selectedText, setSelectedText] = useState('') + const [selectedText, setSelectedText] = useState(undefined) - const handleContextMenu = useCallback( - (e: React.MouseEvent) => { - e.preventDefault() - const _selectedText = window.getSelection()?.toString() - if (_selectedText) { - setContextMenuPosition({ x: e.clientX, y: e.clientY }) - setSelectedText(_selectedText) - } - onContextMenu?.(e) - }, - [onContextMenu] - ) + const contextMenuItems = useMemo(() => { + if (!selectedText) return [] - useEffect(() => { - const handleClick = () => { - setContextMenuPosition(null) - } - document.addEventListener('click', handleClick) - return () => { - document.removeEventListener('click', handleClick) - } - }, []) - - // 获取右键菜单项 - const getContextMenuItems = (t: (key: string) => string, selectedText: string) => [ - { - key: 'copy', - label: t('common.copy'), - onClick: () => { - if (selectedText) { - navigator.clipboard - .writeText(selectedText) - .then(() => { - window.message.success({ content: t('message.copied'), key: 'copy-message' }) - }) - .catch(() => { - window.message.error({ content: t('message.copy.failed'), key: 'copy-message-failed' }) - }) - } - } - }, - { - key: 'quote', - label: t('chat.message.quote'), - onClick: () => { - if (selectedText) { - window.api?.quoteToMainWindow(selectedText) + return [ + { + key: 'copy', + label: t('common.copy'), + onClick: () => { + if (selectedText) { + navigator.clipboard + .writeText(selectedText) + .then(() => { + window.message.success({ content: t('message.copied'), key: 'copy-message' }) + }) + .catch(() => { + window.message.error({ content: t('message.copy.failed'), key: 'copy-message-failed' }) + }) + } + } + }, + { + key: 'quote', + label: t('chat.message.quote'), + onClick: () => { + if (selectedText) { + window.api?.quoteToMainWindow(selectedText) + } } } + ] + }, [selectedText, t]) + + const onOpenChange = (open: boolean) => { + if (open) { + const selectedText = window.getSelection()?.toString() + setSelectedText(selectedText) } - ] + } return ( - - {contextMenuPosition && ( - -
- - )} + {children} - + ) } -const ContextContainer = styled.div`` - export default ContextMenu diff --git a/src/renderer/src/components/CustomCollapse.tsx b/src/renderer/src/components/CustomCollapse.tsx index 9c94084d70..c6f4f79a78 100644 --- a/src/renderer/src/components/CustomCollapse.tsx +++ b/src/renderer/src/components/CustomCollapse.tsx @@ -1,5 +1,6 @@ import { Collapse } from 'antd' import { merge } from 'lodash' +import { ChevronRight } from 'lucide-react' import { FC, memo, useMemo, useState } from 'react' interface CustomCollapseProps { @@ -78,6 +79,14 @@ const CustomCollapse: FC = ({ destroyInactivePanel={destroyInactivePanel} collapsible={collapsible} onChange={setActiveKeys} + expandIcon={({ isActive }) => ( + + )} items={[ { styles: collapseItemStyles, diff --git a/src/renderer/src/components/EditableNumber/index.tsx b/src/renderer/src/components/EditableNumber/index.tsx new file mode 100644 index 0000000000..3cc0f09507 --- /dev/null +++ b/src/renderer/src/components/EditableNumber/index.tsx @@ -0,0 +1,114 @@ +import { InputNumber } from 'antd' +import { FC, useEffect, useRef, useState } from 'react' +import styled from 'styled-components' + +export interface EditableNumberProps { + value?: number | null + min?: number + max?: number + step?: number + precision?: number + placeholder?: string + disabled?: boolean + changeOnBlur?: boolean + onChange?: (value: number | null) => void + onBlur?: () => void + style?: React.CSSProperties + className?: string + size?: 'small' | 'middle' | 'large' + suffix?: string + prefix?: string + align?: 'start' | 'center' | 'end' +} + +const EditableNumber: FC = ({ + value, + min, + max, + step = 0.01, + precision, + placeholder, + disabled = false, + onChange, + onBlur, + changeOnBlur = false, + style, + className, + size = 'middle', + align = 'end' +}) => { + const [isEditing, setIsEditing] = useState(false) + const [inputValue, setInputValue] = useState(value) + const inputRef = useRef(null) + + useEffect(() => { + setInputValue(value) + }, [value]) + + const handleFocus = () => { + if (disabled) return + setIsEditing(true) + } + + const handleInputChange = (newValue: number | null) => { + onChange?.(newValue ?? null) + } + + const handleBlur = () => { + setIsEditing(false) + onBlur?.() + } + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleBlur() + } else if (e.key === 'Escape') { + setInputValue(value) + setIsEditing(false) + } + } + + return ( + + + + {value ?? placeholder} + + + ) +} + +const Container = styled.div` + display: inline-block; + position: relative; +` + +const DisplayText = styled.div<{ + $align: 'start' | 'center' | 'end' + $isEditing: boolean +}>` + position: absolute; + inset: 0; + display: ${({ $isEditing }) => ($isEditing ? 'none' : 'flex')}; + align-items: center; + justify-content: ${({ $align }) => $align}; + pointer-events: none; +` + +export default EditableNumber diff --git a/src/renderer/src/components/Popups/MultiSelectionPopup.tsx b/src/renderer/src/components/Popups/MultiSelectionPopup.tsx index f021b631f9..f277fbe3a8 100644 --- a/src/renderer/src/components/Popups/MultiSelectionPopup.tsx +++ b/src/renderer/src/components/Popups/MultiSelectionPopup.tsx @@ -35,17 +35,38 @@ const MultiSelectActionPopup: FC = ({ topic }) => { {t('common.selectedMessages', { count: selectedMessageIds.length })} - } disabled={isActionDisabled} onClick={() => handleAction('save')} /> + + + + } transitionName="animation-move-down" centered> @@ -120,15 +127,6 @@ const PopupContainer: React.FC = ({ resolve }) => { )} - - - - - - - ) diff --git a/src/renderer/src/pages/history/HistoryPage.tsx b/src/renderer/src/pages/history/HistoryPage.tsx index f1b3890660..d20accfd87 100644 --- a/src/renderer/src/pages/history/HistoryPage.tsx +++ b/src/renderer/src/pages/history/HistoryPage.tsx @@ -1,11 +1,11 @@ -import { ArrowLeftOutlined, EnterOutlined } from '@ant-design/icons' +import { HStack } from '@renderer/components/Layout' import { useAppDispatch } from '@renderer/store' import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk' import { Topic } from '@renderer/types' import type { Message } from '@renderer/types/newMessage' -import { Input, InputRef } from 'antd' +import { Divider, Input, InputRef } from 'antd' import { last } from 'lodash' -import { Search } from 'lucide-react' +import { ChevronLeft, CornerDownLeft, Search } from 'lucide-react' import { FC, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -73,26 +73,35 @@ const TopicsPage: FC = () => { return ( -
- {stack.length > 1 && ( - - - - - - )} - + 1 ? ( + + + + ) : ( + + + + ) + } + suffix={search.length >= 2 ? : null} ref={inputRef} + placeholder={t('history.search.placeholder')} + value={search} onChange={(e) => setSearch(e.target.value.trimStart())} - suffix={search.length >= 2 ? : } + allowClear + autoFocus + spellCheck={false} + style={{ paddingLeft: 0 }} + variant="borderless" + size="middle" onPressEnter={onSearch} /> -
+ + + { const SearchMessage: FC = ({ message, ...props }) => { const navigate = NavigationService.navigate! - const { messageStyle } = useSettings() const { t } = useTranslation() const [topic, setTopic] = useState(null) @@ -43,18 +41,18 @@ const SearchMessage: FC = ({ message, ...props }) => { return ( - - + + @@ -74,12 +72,11 @@ const MessagesContainer = styled.div` ` const ContainerWrapper = styled.div` - width: 800px; + width: 100%; display: flex; flex-direction: column; - .message { - padding: 0; - } + padding: 16px; + position: relative; ` export default SearchMessage diff --git a/src/renderer/src/pages/history/components/SearchResults.tsx b/src/renderer/src/pages/history/components/SearchResults.tsx index 5882f4945c..2fd299a388 100644 --- a/src/renderer/src/pages/history/components/SearchResults.tsx +++ b/src/renderer/src/pages/history/components/SearchResults.tsx @@ -151,7 +151,8 @@ const Container = styled.div` ` const ContainerWrapper = styled.div` - width: 800px; + width: 100%; + padding: 0 16px; display: flex; flex-direction: column; ` diff --git a/src/renderer/src/pages/history/components/TopicMessages.tsx b/src/renderer/src/pages/history/components/TopicMessages.tsx index 27372db4f3..1b4be00029 100644 --- a/src/renderer/src/pages/history/components/TopicMessages.tsx +++ b/src/renderer/src/pages/history/components/TopicMessages.tsx @@ -1,9 +1,8 @@ -import { ArrowRightOutlined, MessageOutlined } from '@ant-design/icons' +import { MessageOutlined } from '@ant-design/icons' import { HStack } from '@renderer/components/Layout' import SearchPopup from '@renderer/components/Popups/SearchPopup' import { MessageEditingProvider } from '@renderer/context/MessageEditingContext' import useScrollPosition from '@renderer/hooks/useScrollPosition' -import { useSettings } from '@renderer/hooks/useSettings' import { getAssistantById } from '@renderer/services/AssistantService' import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService' import { isGenerating, locateToMessage } from '@renderer/services/MessagesService' @@ -13,6 +12,7 @@ import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk' import { Topic } from '@renderer/types' import { Button, Divider, Empty } from 'antd' import { t } from 'i18next' +import { Forward } from 'lucide-react' import { FC, useEffect } from 'react' import styled from 'styled-components' @@ -25,7 +25,6 @@ interface Props extends React.HTMLAttributes { const TopicMessages: FC = ({ topic, ...props }) => { const navigate = NavigationService.navigate! const { handleScroll, containerRef } = useScrollPosition('TopicMessages') - const { messageStyle } = useSettings() const dispatch = useAppDispatch() useEffect(() => { @@ -48,8 +47,8 @@ const TopicMessages: FC = ({ topic, ...props }) => { return ( - - + + {topic?.messages.map((message) => (
@@ -58,7 +57,7 @@ const TopicMessages: FC = ({ topic, ...props }) => { size="middle" style={{ color: 'var(--color-text-3)', position: 'absolute', right: 0, top: 5 }} onClick={() => locateToMessage(navigate, message)} - icon={} + icon={} />
@@ -86,12 +85,10 @@ const MessagesContainer = styled.div` ` const ContainerWrapper = styled.div` - width: 800px; + width: 100%; + padding: 16px; display: flex; flex-direction: column; - .message { - padding: 0; - } ` export default TopicMessages diff --git a/src/renderer/src/pages/history/components/TopicsHistory.tsx b/src/renderer/src/pages/history/components/TopicsHistory.tsx index 85d8ef5a26..d95a3f7ae6 100644 --- a/src/renderer/src/pages/history/components/TopicsHistory.tsx +++ b/src/renderer/src/pages/history/components/TopicsHistory.tsx @@ -78,7 +78,8 @@ const TopicsHistory: React.FC = ({ keywords, onClick, onSearch, ...props } const ContainerWrapper = styled.div` - width: 800px; + width: 100%; + padding: 0 16px; display: flex; flex-direction: column; ` diff --git a/src/renderer/src/pages/home/Chat.tsx b/src/renderer/src/pages/home/Chat.tsx index e2fdbb740c..8d16c5a36c 100644 --- a/src/renderer/src/pages/home/Chat.tsx +++ b/src/renderer/src/pages/home/Chat.tsx @@ -7,6 +7,7 @@ import { useSettings } from '@renderer/hooks/useSettings' import { useShortcut } from '@renderer/hooks/useShortcuts' import { useShowTopics } from '@renderer/hooks/useStore' import { Assistant, Topic } from '@renderer/types' +import { classNames } from '@renderer/utils' import { Flex } from 'antd' import { debounce } from 'lodash' import React, { FC, useMemo, useState } from 'react' @@ -106,7 +107,7 @@ const Chat: FC = (props) => { } return ( - +
= ({ assistant: _assistant, setActiveTopic, topic }) = _text = text _files = files - const resizeTextArea = useCallback(() => { - const textArea = textareaRef.current?.resizableTextArea?.textArea - if (textArea) { - // 如果已经手动设置了高度,则不自动调整 - if (textareaHeight) { - return + const resizeTextArea = useCallback( + (force: boolean = false) => { + const textArea = textareaRef.current?.resizableTextArea?.textArea + if (textArea) { + // 如果已经手动设置了高度,则不自动调整 + if (textareaHeight && !force) { + return + } + if (textArea?.scrollHeight) { + textArea.style.height = Math.min(textArea.scrollHeight, 400) + 'px' + } } - textArea.style.height = 'auto' - textArea.style.height = textArea?.scrollHeight > 400 ? '400px' : `${textArea?.scrollHeight}px` - } - }, [textareaHeight]) + }, + [textareaHeight] + ) const sendMessage = useCallback(async () => { if (inputEmpty || loading) { @@ -749,13 +753,13 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = } return ( - - + + = ({ assistant: _assistant, setActiveTopic, topic }) = ref={textareaRef} style={{ fontSize, - minHeight: textareaHeight ? `${textareaHeight}px` : undefined + minHeight: textareaHeight ? `${textareaHeight}px` : '30px' }} styles={{ textarea: TextareaStyle }} onFocus={(e: React.FocusEvent) => { @@ -851,8 +855,8 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = - - + + ) } @@ -887,16 +891,15 @@ const Container = styled.div` flex-direction: column; position: relative; z-index: 2; + padding: 0 16px 16px 16px; ` const InputBarContainer = styled.div` border: 0.5px solid var(--color-border); transition: all 0.2s ease; position: relative; - margin: 14px 20px; - margin-top: 0; border-radius: 15px; - padding-top: 6px; // 为拖动手柄留出空间 + padding-top: 8px; // 为拖动手柄留出空间 background-color: var(--color-background-opacity); &.file-dragging { @@ -919,7 +922,7 @@ const InputBarContainer = styled.div` const TextareaStyle: CSSProperties = { paddingLeft: 0, - padding: '6px 15px 8px' // 减小顶部padding + padding: '6px 15px 0px' // 减小顶部padding } const Textarea = styled(TextArea)` @@ -934,16 +937,17 @@ const Textarea = styled(TextArea)` &.ant-input { line-height: 1.4; } + &::-webkit-scrollbar { + width: 3px; + } ` const Toolbar = styled.div` display: flex; flex-direction: row; justify-content: space-between; - padding: 0 8px; - padding-bottom: 0; - margin-bottom: 4px; - height: 30px; + padding: 5px 8px; + height: 40px; gap: 16px; position: relative; z-index: 2; diff --git a/src/renderer/src/pages/home/Inputbar/TokenCount.tsx b/src/renderer/src/pages/home/Inputbar/TokenCount.tsx index 0f556a1d15..bad0729b8e 100644 --- a/src/renderer/src/pages/home/Inputbar/TokenCount.tsx +++ b/src/renderer/src/pages/home/Inputbar/TokenCount.tsx @@ -45,7 +45,7 @@ const TokenCount: FC = ({ estimateTokenCount, inputTokenCount, contextCou return ( - + {contextCount.current} / {formatMaxCount(contextCount.max)} diff --git a/src/renderer/src/pages/home/Markdown/CitationTooltip.tsx b/src/renderer/src/pages/home/Markdown/CitationTooltip.tsx index 45b804c851..6041b562af 100644 --- a/src/renderer/src/pages/home/Markdown/CitationTooltip.tsx +++ b/src/renderer/src/pages/home/Markdown/CitationTooltip.tsx @@ -54,9 +54,10 @@ const CitationTooltip: React.FC = ({ children, citation }) return ( = ({ children, className, id, onSave }) => { {children} ) : ( - + {children} ) diff --git a/src/renderer/src/pages/home/Markdown/__tests__/CitationTooltip.test.tsx b/src/renderer/src/pages/home/Markdown/__tests__/CitationTooltip.test.tsx index 06a390c06a..072bf3047e 100644 --- a/src/renderer/src/pages/home/Markdown/__tests__/CitationTooltip.test.tsx +++ b/src/renderer/src/pages/home/Markdown/__tests__/CitationTooltip.test.tsx @@ -93,7 +93,7 @@ describe('CitationTooltip', () => { const tooltip = screen.getByTestId('tooltip-wrapper') expect(tooltip).toHaveAttribute('data-placement', 'top') - expect(tooltip).toHaveAttribute('data-color', 'var(--color-background-mute)') + expect(tooltip).toHaveAttribute('data-color', 'var(--color-background)') const styles = JSON.parse(tooltip.getAttribute('data-styles') || '{}') expect(styles.body).toEqual({ diff --git a/src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/CitationTooltip.test.tsx.snap b/src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/CitationTooltip.test.tsx.snap index ff5c69767e..e9c6def351 100644 --- a/src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/CitationTooltip.test.tsx.snap +++ b/src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/CitationTooltip.test.tsx.snap @@ -47,7 +47,7 @@ exports[`CitationTooltip > basic rendering > should match snapshot 1`] = ` }
= ({ block }) => { ? [`file://${block?.file?.path}`] : [] return ( - + {images.map((src, index) => ( ))} @@ -34,6 +34,5 @@ const Container = styled.div` display: flex; flex-direction: row; gap: 10px; - margin-top: 8px; ` export default React.memo(ImageBlock) diff --git a/src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx index 74d16a80f0..e1420ba6cb 100644 --- a/src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx +++ b/src/renderer/src/pages/home/Messages/Blocks/ThinkingBlock.tsx @@ -3,7 +3,7 @@ import { useSettings } from '@renderer/hooks/useSettings' import { MessageBlockStatus, type ThinkingMessageBlock } from '@renderer/types/newMessage' import { lightbulbVariants } from '@renderer/utils/motionVariants' import { Collapse, message as antdMessage, Tooltip } from 'antd' -import { Lightbulb } from 'lucide-react' +import { ChevronRight, Lightbulb } from 'lucide-react' import { motion } from 'motion/react' import { memo, useCallback, useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -57,6 +57,14 @@ const ThinkingBlock: React.FC = ({ block }) => { size="small" onChange={() => setActiveKey((key) => (key ? '' : 'thought'))} className="message-thought-container" + expandIcon={({ isActive }) => ( + + )} expandIconPosition="end" items={[ { diff --git a/src/renderer/src/pages/home/Messages/Blocks/index.tsx b/src/renderer/src/pages/home/Messages/Blocks/index.tsx index b469f03264..9f4d6e838a 100644 --- a/src/renderer/src/pages/home/Messages/Blocks/index.tsx +++ b/src/renderer/src/pages/home/Messages/Blocks/index.tsx @@ -164,17 +164,7 @@ export default React.memo(MessageBlockRenderer) const ImageBlockGroup = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 8px; max-width: 960px; - /* > * { - min-width: 200px; - } */ - @media (min-width: 1536px) { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - max-width: 1280px; - > * { - min-width: 250px; - } - } ` diff --git a/src/renderer/src/pages/home/Messages/CitationsList.tsx b/src/renderer/src/pages/home/Messages/CitationsList.tsx index 672587fff5..0c40f83ed6 100644 --- a/src/renderer/src/pages/home/Messages/CitationsList.tsx +++ b/src/renderer/src/pages/home/Messages/CitationsList.tsx @@ -1,10 +1,9 @@ import ContextMenu from '@renderer/components/ContextMenu' import Favicon from '@renderer/components/Icons/FallbackFavicon' -import { HStack } from '@renderer/components/Layout' import { fetchWebContent } from '@renderer/utils/fetch' import { cleanMarkdownContent } from '@renderer/utils/formats' import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' -import { Button, Drawer, message, Skeleton } from 'antd' +import { Button, message, Popover, Skeleton } from 'antd' import { Check, Copy, FileSearch } from 'lucide-react' import React, { useState } from 'react' import { useTranslation } from 'react-i18next' @@ -48,16 +47,49 @@ const truncateText = (text: string, maxLength = 100) => { const CitationsList: React.FC = ({ citations }) => { const { t } = useTranslation() - const [open, setOpen] = useState(false) const previewItems = citations.slice(0, 3) const count = citations.length if (!count) return null + const popoverContent = ( + + {citations.map((citation) => ( + + {citation.type === 'websearch' ? ( + + ) : ( + + )} + + ))} + + ) + return ( - <> - setOpen(true)}> + + {t('message.citations')} +
+ } + placement="right" + trigger="hover" + styles={{ + body: { + padding: '0 0 8px 0' + } + }}> + {previewItems.map((c, i) => ( @@ -71,27 +103,7 @@ const CitationsList: React.FC = ({ citations }) => { {t('message.citation', { count })} - - setOpen(false)} - open={open} - width={680} - styles={{ header: { border: 'none' }, body: { paddingTop: 0 } }} - destroyOnClose={false}> - {open && - citations.map((citation) => ( - - {citation.type === 'websearch' ? ( - - ) : ( - - )} - - ))} - - + ) } @@ -136,16 +148,17 @@ const WebSearchCitation: React.FC<{ citation: Citation }> = ({ citation }) => { }) return ( - - + + - {citation.number} {citation.showFavicon && citation.url && ( )} handleLinkClick(citation.url, e)}> {citation.title || {citation.hostname}} + + {citation.number} {fetchedContent && } {isLoading ? ( @@ -153,28 +166,29 @@ const WebSearchCitation: React.FC<{ citation: Citation }> = ({ citation }) => { ) : ( {fetchedContent} )} - - + + ) } const KnowledgeCitation: React.FC<{ citation: Citation }> = ({ citation }) => { return ( - - + + - {citation.number} {citation.showFavicon && } handleLinkClick(citation.url, e)}> {citation.title} + + {citation.number} {citation.content && } {citation.content && truncateText(citation.content, 100)} - - + + ) } @@ -213,10 +227,19 @@ const PreviewIcon = styled.div` ` const CitationIndex = styled.div` - font-size: 14px; + width: 14px; + height: 14px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: var(--color-reference); + font-size: 10px; line-height: 1.6; - color: var(--color-text-2); - margin-right: 8px; + color: var(--color-reference-text); + flex-shrink: 0; + opacity: 1; + transition: opacity 0.3s ease; ` const CitationLink = styled.a` @@ -224,7 +247,7 @@ const CitationLink = styled.a` line-height: 1.6; color: var(--color-text-1); text-decoration: none; - + flex: 1; .hostname { color: var(--color-link); } @@ -236,10 +259,14 @@ const CopyIconWrapper = styled.div` align-items: center; justify-content: center; color: var(--color-text-2); - opacity: 0.6; - margin-left: auto; + opacity: 0; padding: 4px; border-radius: 4px; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.3s ease; &:hover { opacity: 1; @@ -251,11 +278,17 @@ const WebSearchCard = styled.div` display: flex; flex-direction: column; width: 100%; - padding: 12px; - border-radius: var(--list-item-border-radius); - background-color: var(--color-background); + padding: 12px 0; transition: all 0.3s ease; position: relative; + &:hover { + ${CopyIconWrapper} { + opacity: 1; + } + ${CitationIndex} { + opacity: 0; + } + } ` const WebSearchCardHeader = styled.div` @@ -265,6 +298,7 @@ const WebSearchCardHeader = styled.div` gap: 8px; margin-bottom: 6px; width: 100%; + position: relative; ` const WebSearchCardContent = styled.div` @@ -273,6 +307,7 @@ const WebSearchCardContent = styled.div` color: var(--color-text-2); user-select: text; cursor: text; + word-break: break-all; &.selectable-text { -webkit-user-select: text; @@ -282,4 +317,16 @@ const WebSearchCardContent = styled.div` } ` +const PopoverContent = styled.div` + max-width: min(340px, 60vw); + max-height: 60vh; + padding: 0 12px; +` +const PopoverContentItem = styled.div` + border-bottom: 0.5px solid var(--color-border); + &:last-child { + border-bottom: none; + } +` + export default CitationsList diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx index 19fcbdaded..96067bc375 100644 --- a/src/renderer/src/pages/home/Messages/Message.tsx +++ b/src/renderer/src/pages/home/Messages/Message.tsx @@ -1,9 +1,8 @@ -import ContextMenu from '@renderer/components/ContextMenu' import { useMessageEditing } from '@renderer/context/MessageEditingContext' import { useAssistant } from '@renderer/hooks/useAssistant' import { useMessageOperations } from '@renderer/hooks/useMessageOperations' import { useModel } from '@renderer/hooks/useModel' -import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings' +import { useSettings } from '@renderer/hooks/useSettings' import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService' import { getMessageModelId } from '@renderer/services/MessagesService' import { getModelUniqId } from '@renderer/services/ModelService' @@ -42,14 +41,12 @@ const MessageItem: FC = ({ index, hideMenuBar = false, isGrouped, - isStreaming = false, - style + isStreaming = false }) => { const { t } = useTranslation() const { assistant, setModel } = useAssistant(message.assistantId) const model = useModel(getMessageModelId(message), message.model?.provider) || message.model - const { isBubbleStyle } = useMessageStyle() - const { showMessageDivider, messageFont, fontSize, narrowMode, messageStyle } = useSettings() + const { messageFont, fontSize } = useSettings() const { editMessageBlocks, resendUserMessageWithEdit, editMessage } = useMessageOperations(topic) const messageContainerRef = useRef(null) const { editingMessageId, stopEditing } = useMessageEditing() @@ -101,9 +98,6 @@ const MessageItem: FC = ({ const isAssistantMessage = message.role === 'assistant' const showMenubar = !hideMenuBar && !isStreaming && !message.status.includes('ing') && !isEditing - const messageBorder = !isBubbleStyle && showMessageDivider ? '1px dotted var(--color-border)' : 'none' - const messageBackground = getMessageBackground(isBubbleStyle, isAssistantMessage) - const messageHighlightHandler = useCallback((highlight: boolean = true) => { if (messageContainerRef.current) { messageContainerRef.current.scrollIntoView({ behavior: 'smooth' }) @@ -140,101 +134,38 @@ const MessageItem: FC = ({ 'message-assistant': isAssistantMessage, 'message-user': !isAssistantMessage })} - ref={messageContainerRef} - style={{ - ...style, - justifyContent: isBubbleStyle ? (isAssistantMessage ? 'flex-start' : 'flex-end') : undefined, - flex: isBubbleStyle ? undefined : 1 - }}> + ref={messageContainerRef}> + {isEditing && ( - - -
- -
- + )} {!isEditing && ( - - + <> - {showMenubar && !isBubbleStyle && ( - - } - setModel={setModel} - /> - - )} - {showMenubar && isBubbleStyle && ( - + {showMenubar && ( + = ({ /> )} - + )} ) } -const getMessageBackground = (isBubbleStyle: boolean, isAssistantMessage: boolean) => { - return isBubbleStyle - ? isAssistantMessage - ? 'var(--chat-background-assistant)' - : 'var(--chat-background-user)' - : undefined -} - const MessageContainer = styled.div` display: flex; + flex-direction: column; width: 100%; position: relative; transition: background-color 0.3s ease; - padding: 0 20px; transform: translateZ(0); will-change: transform; + padding: 10px 10px 0 10px; + border-radius: 10px; &.message-highlight { background-color: var(--color-primary-mute); } @@ -292,11 +217,7 @@ const MessageContainer = styled.div` const MessageContentContainer = styled.div` max-width: 100%; - display: flex; - flex: 1; - flex-direction: column; - justify-content: space-between; - margin-left: 46px; + padding-left: 46px; margin-top: 5px; overflow-y: auto; ` @@ -306,9 +227,8 @@ const MessageFooter = styled.div` flex-direction: row; justify-content: space-between; align-items: center; - padding: 2px 0; - margin-top: 2px; gap: 20px; + margin-left: 46px; ` const NewContextMessage = styled.div` diff --git a/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx b/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx index 3e4773dcd1..7b116f8495 100644 --- a/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx +++ b/src/renderer/src/pages/home/Messages/MessageAnchorLine.tsx @@ -184,7 +184,7 @@ const MessageAnchorLine: FC = ({ messages }) => { else messageItemsRef.current.delete('bottom-anchor') }} style={{ - opacity: mouseY ? 0.5 + calculateValueByDistance('bottom-anchor', 1) : 0.6 + opacity: mouseY ? 0.5 : Math.max(0, 0.6 - (0.3 * Math.abs(0 - messages.length / 2)) / 5) }} onClick={scrollToBottom}> = ({ messages }) => { {messages.map((message, index) => { const opacity = 0.5 + calculateValueByDistance(message.id, 1) - const scale = 1 + calculateValueByDistance(message.id, 1) + const scale = 1 + calculateValueByDistance(message.id, 1.2) const size = 10 + calculateValueByDistance(message.id, 20) const avatarSource = getAvatarSource(isLocalAi, getMessageModelId(message)) const username = removeLeadingEmoji(getUserName(message)) @@ -219,15 +219,14 @@ const MessageAnchorLine: FC = ({ messages }) => { {message.role === 'assistant' ? ( - - A - + }} + /> ) : ( <> {isEmoji(avatar) ? ( @@ -241,7 +240,7 @@ const MessageAnchorLine: FC = ({ messages }) => { {avatar} ) : ( - + )} )} @@ -260,17 +259,28 @@ const MessageItemContainer = styled.div` align-items: flex-end; justify-content: space-between; text-align: right; - gap: 4px; + gap: 3px; opacity: 0; transform-origin: right center; + transition: transform cubic-bezier(0.25, 1, 0.5, 1) 150ms; + will-change: transform; +` + +const MessageItemAvatar = styled(Avatar)` + transition: + width, + height, + cubic-bezier(0.25, 1, 0.5, 1) 150ms; + will-change: width, height; ` const MessageLineContainer = styled.div<{ $height: number | null }>` width: 14px; position: fixed; - top: ${(props) => (props.$height ? `calc(${props.$height / 2}px + var(--status-bar-height))` : '50%')}; + top: calc(50% - var(--status-bar-height) - 10px); right: 13px; - max-height: ${(props) => (props.$height ? `${props.$height}px` : 'calc(100% - var(--status-bar-height) * 2)')}; + max-height: ${(props) => + props.$height ? `${props.$height - 20}px` : 'calc(100% - var(--status-bar-height) * 2 - 20px)'}; transform: translateY(-50%); z-index: 0; user-select: none; @@ -280,7 +290,7 @@ const MessageLineContainer = styled.div<{ $height: number | null }>` font-size: 5px; overflow: hidden; &:hover { - width: 440px; + width: 500px; overflow-x: visible; overflow-y: hidden; ${MessageItemContainer} { diff --git a/src/renderer/src/pages/home/Messages/MessageEditor.tsx b/src/renderer/src/pages/home/Messages/MessageEditor.tsx index 62636ccd68..36449c8efd 100644 --- a/src/renderer/src/pages/home/Messages/MessageEditor.tsx +++ b/src/renderer/src/pages/home/Messages/MessageEditor.tsx @@ -308,10 +308,11 @@ const MessageBlockEditor: FC = ({ message, onSave, onResend, onCancel }) const EditorContainer = styled.div` padding: 8px 0; - border: 1px solid var(--color-border); + border: 0.5px solid var(--color-border); transition: all 0.2s ease; border-radius: 15px; margin-top: 5px; + margin-bottom: 10px; background-color: var(--color-background-opacity); width: 100%; diff --git a/src/renderer/src/pages/home/Messages/MessageGroup.tsx b/src/renderer/src/pages/home/Messages/MessageGroup.tsx index efc9cd8f5d..69b7e7243b 100644 --- a/src/renderer/src/pages/home/Messages/MessageGroup.tsx +++ b/src/renderer/src/pages/home/Messages/MessageGroup.tsx @@ -1,4 +1,3 @@ -import Scrollbar from '@renderer/components/Scrollbar' import { MessageEditingProvider } from '@renderer/context/MessageEditingContext' import { useChatContext } from '@renderer/hooks/useChatContext' import { useMessageOperations } from '@renderer/hooks/useMessageOperations' @@ -10,11 +9,10 @@ import type { Message } from '@renderer/types/newMessage' import { classNames } from '@renderer/utils' import { Popover } from 'antd' import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' -import styled, { css } from 'styled-components' +import styled from 'styled-components' import MessageItem from './Message' import MessageGroupMenuBar from './MessageGroupMenuBar' -import SelectableMessage from './MessageSelect' interface Props { messages: (Message & { index: number })[] @@ -62,7 +60,6 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => { ) const isGrouped = isMultiSelectMode ? false : messageLength > 1 && messages.every((m) => m.role === 'assistant') - const isHorizontal = multiModelMessageStyle === 'horizontal' const isGrid = multiModelMessageStyle === 'grid' useEffect(() => { @@ -166,25 +163,19 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => { isGrouped, message, topic, - index: message.index, - style: { - paddingTop: isGrouped && ['horizontal', 'grid'].includes(multiModelMessageStyle) ? 0 : 15 - } + index: message.index } const messageContent = ( + className={classNames([ + { + [multiModelMessageStyle]: message.role === 'assistant', + selected: message.id === selectedMessageId + } + ])}> ) @@ -193,47 +184,43 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => { return ( + className={classNames([ + 'in-popover', + { + [multiModelMessageStyle]: message.role === 'assistant', + selected: message.id === selectedMessageId + } + ])}> } trigger={gridPopoverTrigger} - styles={{ root: { maxWidth: '60vw', minWidth: '550px', overflowY: 'auto', zIndex: 1000 } }}> -
{messageContent}
+ styles={{ + root: { maxWidth: '60vw', overflowY: 'auto', zIndex: 1000 }, + body: { padding: 2 } + }}> + {messageContent} ) } - return ( - - {messageContent} - - ) + return messageContent }, - [isGrid, isGrouped, topic, multiModelMessageStyle, isHorizontal, selectedMessageId, gridPopoverTrigger] + [isGrid, isGrouped, topic, multiModelMessageStyle, selectedMessageId, gridPopoverTrigger] ) return ( + id={messages[0].askId ? `message-group-${messages[0].askId}` : undefined} + className={classNames([multiModelMessageStyle, { 'multi-select-mode': isMultiSelectMode }])}> + className={classNames([multiModelMessageStyle, { 'multi-select-mode': isMultiSelectMode }])}> {messages.map(renderMessage)} {isGrouped && ( @@ -256,73 +243,103 @@ const MessageGroup = ({ messages, topic, registerMessageElement }: Props) => { ) } -const GroupContainer = styled.div<{ $isGrouped: boolean; $layout: MultiModelMessageStyle }>` - padding-top: ${({ $isGrouped, $layout }) => ($isGrouped && 'horizontal' === $layout ? '15px' : '0')}; - &.group-container.horizontal, - &.group-container.grid { - padding: 0 20px; - .message { - padding: 0; - } +const GroupContainer = styled.div` + &.horizontal, + &.grid { + padding: 4px 10px; .group-menu-bar { margin-left: 0; margin-right: 0; } } + &.multi-select-mode { + padding: 5px 10px; + } ` -const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageStyle; $gridColumns: number }>` +const GridContainer = styled.div<{ $count: number; $gridColumns: number }>` width: 100%; display: grid; - gap: ${({ $layout }) => ($layout === 'horizontal' ? '16px' : '0')}; - grid-template-columns: repeat( - ${({ $layout, $count }) => (['fold', 'vertical'].includes($layout) ? 1 : $count)}, - minmax(480px, 1fr) - ); - @media (max-width: 800px) { - grid-template-columns: repeat( - ${({ $layout, $count }) => (['fold', 'vertical'].includes($layout) ? 1 : $count)}, - minmax(400px, 1fr) - ); + overflow-y: visible; + gap: 16px; + &.horizontal { + padding-bottom: 4px; + grid-template-columns: repeat(${({ $count }) => $count}, minmax(480px, 1fr)); + overflow-x: auto; + } + &.fold, + &.vertical { + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 8px; + } + &.grid { + grid-template-columns: repeat( + ${({ $count, $gridColumns }) => ($count > 1 ? $gridColumns || 2 : 1)}, + minmax(0, 1fr) + ); + grid-template-rows: auto; + } + + &.multi-select-mode { + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 10px; + .message { + border: 0.5px solid var(--color-border); + border-radius: 10px; + padding: 10px; + .message-content-container { + max-height: 200px; + overflow-y: hidden !important; + } + .MessageFooter { + display: none; + } + } } - ${({ $layout }) => - $layout === 'horizontal' && - css` - margin-top: 15px; - `} - ${({ $gridColumns, $layout, $count }) => - $layout === 'grid' && - css` - margin-top: 15px; - grid-template-columns: repeat(${$count > 1 ? $gridColumns || 2 : 1}, minmax(0, 1fr)); - grid-template-rows: auto; - gap: 16px; - `} - ${({ $layout }) => { - return $layout === 'horizontal' - ? css` - overflow-y: auto; - ` - : 'overflow-y: visible;' - }} ` interface MessageWrapperProps { - $layout: 'fold' | 'horizontal' | 'vertical' | 'grid' - // $selected: boolean - $isGrouped: boolean $isInPopover?: boolean } -const MessageWrapper = styled(Scrollbar)` - width: 100%; - display: flex; - +const MessageWrapper = styled.div` &.horizontal { - display: inline-block; + overflow-y: auto; + .message { + border: 0.5px solid var(--color-border); + border-radius: 10px; + } + .message-content-container { + padding-left: 0; + max-height: calc(100vh - 350px); + overflow-y: auto !important; + margin-right: -10px; + } + .MessageFooter { + margin-left: 0; + margin-top: 2px; + margin-bottom: 2px; + } } &.grid { - display: inline-block; + height: 300px; + overflow-y: hidden; + border: 0.5px solid var(--color-border); + border-radius: 10px; + cursor: pointer; + } + &.in-popover { + height: auto; + border: none; + max-height: 50vh; + overflow-y: auto; + cursor: default; + .message-content-container { + padding-left: 0; + } + .MessageFooter { + margin-left: 0; + } } &.fold { display: none; @@ -330,38 +347,6 @@ const MessageWrapper = styled(Scrollbar)` display: inline-block; } } - - ${({ $layout, $isGrouped }) => { - if ($layout === 'horizontal' && $isGrouped) { - return css` - border: 0.5px solid var(--color-border); - padding: 10px; - border-radius: 6px; - max-height: 600px; - margin-bottom: 10px; - ` - } - return '' - }} - - ${({ $layout, $isInPopover, $isGrouped }) => { - // 如果布局是grid，并且是组消息，则设置最大高度和溢出行为（卡片不可滚动，点击展开后可滚动） - // 如果布局是horizontal，则设置溢出行为（卡片可滚动） - // 如果布局是fold、vertical，高度不限制，与正常消息流布局一致，则设置卡片不可滚动（visible） - return $layout === 'grid' && $isGrouped - ? css` - max-height: ${$isInPopover ? '50vh' : '300px'}; - overflow-y: ${$isInPopover ? 'auto' : 'hidden'}; - border: 0.5px solid ${$isInPopover ? 'transparent' : 'var(--color-border)'}; - padding: 10px; - border-radius: 6px; - background-color: var(--color-background); - ` - : css` - overflow-y: ${$layout === 'horizontal' ? 'auto' : 'visible'}; - border-radius: 6px; - ` - }} ` export default memo(MessageGroup) diff --git a/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx b/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx index bd639eb472..6c2e7766d7 100644 --- a/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx +++ b/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx @@ -59,6 +59,7 @@ const MessageGroupMenuBar: FC = ({ {['fold', 'vertical', 'horizontal', 'grid'].map((layout) => ( ` flex-direction: row; align-items: center; gap: 10px; - margin: 0 20px; - padding: 6px 10px; - border-radius: 6px; - margin-top: 10px; + padding: 8px; + border-radius: 10px; + margin: 8px 10px 16px; justify-content: space-between; overflow: hidden; border: 0.5px solid var(--color-border); height: 40px; - background-color: var(--color-background); ` const LayoutContainer = styled.div` diff --git a/src/renderer/src/pages/home/Messages/MessageGroupSettings.tsx b/src/renderer/src/pages/home/Messages/MessageGroupSettings.tsx index 0b52c4168e..208a75f952 100644 --- a/src/renderer/src/pages/home/Messages/MessageGroupSettings.tsx +++ b/src/renderer/src/pages/home/Messages/MessageGroupSettings.tsx @@ -1,10 +1,11 @@ import { SettingOutlined } from '@ant-design/icons' +import Selector from '@renderer/components/Selector' 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 { Col, Row, Slider } from 'antd' import { Popover } from 'antd' import { FC, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -18,19 +19,21 @@ const MessageGroupSettings: FC = () => { return ( +
{t('settings.messages.grid_popover_trigger')}
- + options={[ + { label: t('settings.messages.grid_popover_trigger.hover'), value: 'hover' }, + { label: t('settings.messages.grid_popover_trigger.click'), value: 'click' } + ]} + /> diff --git a/src/renderer/src/pages/home/Messages/MessageHeader.tsx b/src/renderer/src/pages/home/Messages/MessageHeader.tsx index 285cfd516f..465ca923b8 100644 --- a/src/renderer/src/pages/home/Messages/MessageHeader.tsx +++ b/src/renderer/src/pages/home/Messages/MessageHeader.tsx @@ -4,16 +4,17 @@ import { APP_NAME, AppLogo, isLocalAi } from '@renderer/config/env' import { getModelLogo } from '@renderer/config/models' import { useTheme } from '@renderer/context/ThemeProvider' import useAvatar from '@renderer/hooks/useAvatar' +import { useChatContext } from '@renderer/hooks/useChatContext' import { useMinappPopup } from '@renderer/hooks/useMinappPopup' import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings' import { getMessageModelId } from '@renderer/services/MessagesService' import { getModelName } from '@renderer/services/ModelService' -import type { Assistant, Model } from '@renderer/types' +import type { Assistant, Model, Topic } from '@renderer/types' import type { Message } from '@renderer/types/newMessage' import { firstLetter, isEmoji, removeLeadingEmoji } from '@renderer/utils' -import { Avatar } from 'antd' +import { Avatar, Checkbox } from 'antd' import dayjs from 'dayjs' -import { CSSProperties, FC, memo, useCallback, useMemo } from 'react' +import { FC, memo, useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -24,6 +25,7 @@ interface Props { assistant: Assistant model?: Model index: number | undefined + topic: Topic } const getAvatarSource = (isLocalAi: boolean, modelId: string | undefined) => { @@ -31,7 +33,7 @@ const getAvatarSource = (isLocalAi: boolean, modelId: string | undefined) => { return modelId ? getModelLogo(modelId) : undefined } -const MessageHeader: FC = memo(({ assistant, model, message, index }) => { +const MessageHeader: FC = memo(({ assistant, model, message, index, topic }) => { const avatar = useAvatar() const { theme } = useTheme() const { userName, sidebarIcons } = useSettings() @@ -39,6 +41,10 @@ const MessageHeader: FC = memo(({ assistant, model, message, index }) => const { isBubbleStyle } = useMessageStyle() const { openMinappById } = useMinappPopup() + const { isMultiSelectMode, selectedMessageIds, handleSelectMessage } = useChatContext(topic) + + const isSelected = selectedMessageIds?.includes(message.id) + const avatarSource = useMemo(() => getAvatarSource(isLocalAi, getMessageModelId(message)), [message]) const getUserName = useCallback(() => { @@ -67,65 +73,54 @@ const MessageHeader: FC = memo(({ assistant, model, message, index }) => // eslint-disable-next-line react-hooks/exhaustive-deps }, [model?.provider, showMinappIcon]) - const avatarStyle: CSSProperties | undefined = isBubbleStyle - ? { - flexDirection: isAssistantMessage ? 'row' : 'row-reverse', - textAlign: isAssistantMessage ? 'left' : 'right' - } - : undefined - - const containerStyle = isBubbleStyle - ? { - justifyContent: isAssistantMessage ? 'flex-start' : 'flex-end' - } - : undefined - return ( - - - {isAssistantMessage ? ( - - {avatarName} - - ) : ( - <> - {isEmoji(avatar) ? ( - UserPopup.show()} size={35} fontSize={20}> - {avatar} - - ) : ( - UserPopup.show()} - /> - )} - - )} - - - {username} - - - {dayjs(message?.updatedAt ?? message.createdAt).format('MM/DD HH:mm')} - {showTokens && | } - - - - + + {isAssistantMessage ? ( + + {avatarName} + + ) : ( + <> + {isEmoji(avatar) ? ( + UserPopup.show()} size={35} fontSize={20}> + {avatar} + + ) : ( + UserPopup.show()} + /> + )} + + )} + + + {username} + + + {dayjs(message?.updatedAt ?? message.createdAt).format('MM/DD HH:mm')} + {showTokens && | } + + + + {isMultiSelectMode && ( + handleSelectMessage(message.id, e.target.checked)} + style={{ position: 'absolute', right: 0, top: 0 }} + /> + )} ) }) @@ -133,23 +128,18 @@ const MessageHeader: FC = memo(({ assistant, model, message, index }) => MessageHeader.displayName = 'MessageHeader' const Container = styled.div` - display: flex; - flex-direction: row; - align-items: center; - padding-bottom: 4px; -` - -const AvatarWrapper = styled.div` display: flex; flex-direction: row; align-items: center; gap: 10px; + position: relative; ` const UserWrap = styled.div` display: flex; flex-direction: column; justify-content: space-between; + flex: 1; ` const InfoWrap = styled.div` diff --git a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx index c7e39adf2d..50a4fc95ed 100644 --- a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx +++ b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx @@ -507,8 +507,7 @@ const MessageMenubar: FC = (props) => { e.domEvent.stopPropagation() }} trigger={['click']} - placement="topRight" - arrow> + placement="topRight"> e.stopPropagation()} diff --git a/src/renderer/src/pages/home/Messages/Messages.tsx b/src/renderer/src/pages/home/Messages/Messages.tsx index cae4237ffd..1a7d46024c 100644 --- a/src/renderer/src/pages/home/Messages/Messages.tsx +++ b/src/renderer/src/pages/home/Messages/Messages.tsx @@ -1,3 +1,4 @@ +import ContextMenu from '@renderer/components/ContextMenu' import SvgSpinners180Ring from '@renderer/components/Icons/SvgSpinners180Ring' import Scrollbar from '@renderer/components/Scrollbar' import { LOAD_MORE_COUNT } from '@renderer/config/constant' @@ -271,7 +272,6 @@ const Messages: React.FC = ({ assistant, topic, setActiveTopic, o id="messages" className="messages-container" ref={scrollContainerRef} - style={{ position: 'relative', paddingTop: showPrompt ? 10 : 0 }} key={assistant.id} onScroll={handleScrollPosition}> @@ -283,22 +283,25 @@ const Messages: React.FC = ({ assistant, topic, setActiveTopic, o scrollableTarget="messages" inverse style={{ overflow: 'visible' }}> - - {groupedMessages.map(([key, groupMessages]) => ( - - ))} - {isLoadingMore && ( - - - - )} - + + + {groupedMessages.map(([key, groupMessages]) => ( + + ))} + {isLoadingMore && ( + + + + )} + + + {showPrompt && } {messageNavigation === 'anchor' && } @@ -361,6 +364,10 @@ const LoaderContainer = styled.div` const ScrollContainer = styled.div` display: flex; flex-direction: column-reverse; + padding: 20px 10px 20px 16px; + .multi-select-mode & { + padding-bottom: 60px; + } ` interface ContainerProps { @@ -370,11 +377,9 @@ interface ContainerProps { const MessagesContainer = styled(Scrollbar)` display: flex; flex-direction: column-reverse; - padding: 10px 0 20px; overflow-x: hidden; - background-color: var(--color-background); z-index: 1; - margin-right: 2px; + position: relative; ` export default Messages diff --git a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx index b1579b4dc5..6431bb151c 100644 --- a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx +++ b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx @@ -10,7 +10,11 @@ const NarrowLayout: FC = ({ children, ...props }) => { const { narrowMode } = useSettings() if (narrowMode) { - return {children} + return ( + + {children} + + ) } return children diff --git a/src/renderer/src/pages/home/Messages/Prompt.tsx b/src/renderer/src/pages/home/Messages/Prompt.tsx index 1fe67eca43..f0df2a460f 100644 --- a/src/renderer/src/pages/home/Messages/Prompt.tsx +++ b/src/renderer/src/pages/home/Messages/Prompt.tsx @@ -30,11 +30,11 @@ const Prompt: FC = ({ assistant, topic }) => { } const Container = styled.div<{ $isDark: boolean }>` - padding: 10px 20px; - margin: 5px 20px 0 20px; + padding: 10px 16px; border-radius: 10px; cursor: pointer; border: 0.5px solid var(--color-border); + margin: 10px 10px 0 10px; ` const Text = styled.div` diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx index b3b7a844e7..67c3ba7b97 100644 --- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx +++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx @@ -1,6 +1,7 @@ -import { CheckOutlined } from '@ant-design/icons' +import EditableNumber from '@renderer/components/EditableNumber' import { HStack } from '@renderer/components/Layout' import Scrollbar from '@renderer/components/Scrollbar' +import Selector from '@renderer/components/Selector' import { DEFAULT_CONTEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant' import { isOpenAIModel, @@ -38,7 +39,6 @@ import { setPasteLongTextThreshold, setRenderInputMessageAsMarkdown, setShowInputEstimatedTokens, - setShowMessageDivider, setShowPrompt, setShowTokens, setShowTranslateConfirm, @@ -54,7 +54,7 @@ import { } from '@renderer/types' import { modalConfirm } from '@renderer/utils' import { getSendMessageShortcutLabel } from '@renderer/utils/input' -import { Button, Col, InputNumber, Row, Select, Slider, Switch, Tooltip } from 'antd' +import { Button, Col, InputNumber, Row, Slider, Switch, Tooltip } from 'antd' import { CircleHelp, Settings2 } from 'lucide-react' import { FC, useCallback, useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -86,7 +86,6 @@ const SettingsTab: FC = (props) => { const { showPrompt, - showMessageDivider, messageFont, showInputEstimatedTokens, sendMessageShortcut, @@ -312,20 +311,6 @@ const SettingsTab: FC = (props) => { dispatch(setShowTokens(checked))} /> - - - {t('settings.messages.divider')} - - - - - dispatch(setShowMessageDivider(checked))} - /> - - {t('settings.messages.use_serif_font')} = (props) => { {t('message.message.style')} - dispatch(setMessageStyle(value as 'plain' | 'bubble'))} - style={{ width: 135 }} - size="small"> - {t('message.message.style.plain')} - {t('message.message.style.bubble')} - + options={[ + { value: 'plain', label: t('message.message.style.plain') }, + { value: 'bubble', label: t('message.message.style.bubble') } + ]} + /> {t('message.message.multi_model_style')} - dispatch(setMultiModelMessageStyle(value as 'fold' | 'vertical' | 'horizontal' | 'grid')) } - style={{ width: 135 }}> - {t('message.message.multi_model_style.fold')} - {t('message.message.multi_model_style.vertical')} - {t('message.message.multi_model_style.horizontal')} - {t('message.message.multi_model_style.grid')} - + options={[ + { value: 'fold', label: t('message.message.multi_model_style.fold') }, + { value: 'vertical', label: t('message.message.multi_model_style.vertical') }, + { value: 'horizontal', label: t('message.message.multi_model_style.horizontal') }, + { value: 'grid', label: t('message.message.multi_model_style.grid') } + ]} + /> {t('settings.messages.navigation')} - dispatch(setMessageNavigation(value as 'none' | 'buttons' | 'anchor'))} - style={{ width: 135 }}> - {t('settings.messages.navigation.none')} - {t('settings.messages.navigation.buttons')} - {t('settings.messages.navigation.anchor')} - + options={[ + { value: 'none', label: t('settings.messages.navigation.none') }, + { value: 'buttons', label: t('settings.messages.navigation.buttons') }, + { value: 'anchor', label: t('settings.messages.navigation.anchor') } + ]} + /> {t('settings.messages.math_engine')} - dispatch(setMathEngine(value as MathEngine))} - style={{ width: 135 }} - size="small"> - KaTeX - MathJax - {t('settings.messages.math_engine.none')} - + options={[ + { value: 'KaTeX', label: 'KaTeX' }, + { value: 'MathJax', label: 'MathJax' }, + { value: 'none', label: t('settings.messages.math_engine.none') } + ]} + /> @@ -430,17 +415,14 @@ const SettingsTab: FC = (props) => { {t('message.message.code_style')} - onCodeStyleChange(value as CodeStyleVarious)} - style={{ width: 135 }} - size="small"> - {themeNames.map((theme) => ( - - {theme} - - ))} - + options={themeNames.map((theme) => ({ + value: theme, + label: theme + }))} + /> @@ -466,7 +448,7 @@ const SettingsTab: FC = (props) => { - = (props) => { {t('settings.messages.input.paste_long_text_threshold')} - = (props) => { {t('settings.input.target_language')} - } + onChange={(value) => setTargetLanguage(value as TranslateLanguageVarious)} options={[ { value: 'chinese', label: t('settings.input.target_language.chinese') }, { value: 'chinese-traditional', label: t('settings.input.target_language.chinese-traditional') }, @@ -653,17 +633,14 @@ const SettingsTab: FC = (props) => { { value: 'japanese', label: t('settings.input.target_language.japanese') }, { value: 'russian', label: t('settings.input.target_language.russian') } ]} - onChange={(value) => setTargetLanguage(value as TranslateLanguageVarious)} - style={{ width: 135 }} /> {t('settings.messages.input.send_shortcuts')} - } + onChange={(value) => setSendMessageShortcut(value as SendMessageShortcut)} options={[ { value: 'Enter', label: getSendMessageShortcutLabel('Enter') }, { value: 'Ctrl+Enter', label: getSendMessageShortcutLabel('Ctrl+Enter') }, @@ -671,8 +648,6 @@ const SettingsTab: FC = (props) => { { value: 'Command+Enter', label: getSendMessageShortcutLabel('Command+Enter') }, { value: 'Shift+Enter', label: getSendMessageShortcutLabel('Shift+Enter') } ]} - onChange={(value) => setSendMessageShortcut(value as SendMessageShortcut)} - style={{ width: 135 }} /> @@ -704,12 +679,4 @@ const SettingGroup = styled.div<{ theme?: ThemeMode }>` margin-bottom: 10px; ` -const StyledSelect = styled(Select)` - .ant-select-selector { - border-radius: 15px !important; - padding: 4px 10px !important; - height: 26px !important; - } -` - export default SettingsTab diff --git a/src/renderer/src/pages/home/Tabs/components/OpenAISettingsGroup.tsx b/src/renderer/src/pages/home/Tabs/components/OpenAISettingsGroup.tsx index 2aa25c5ff1..18b6800a6d 100644 --- a/src/renderer/src/pages/home/Tabs/components/OpenAISettingsGroup.tsx +++ b/src/renderer/src/pages/home/Tabs/components/OpenAISettingsGroup.tsx @@ -1,3 +1,4 @@ +import Selector from '@renderer/components/Selector' import { SettingDivider, SettingRow } from '@renderer/pages/settings' import { CollapsibleSettingGroup } from '@renderer/pages/settings/SettingGroup' import { RootState, useAppDispatch } from '@renderer/store' @@ -102,13 +103,11 @@ const OpenAISettingsGroup: FC = ({ - { setServiceTierMode(value as OpenAIServiceTier) }} - size="small" options={serviceTierOptions} /> @@ -135,6 +134,7 @@ const OpenAISettingsGroup: FC = ({ )} + ) } diff --git a/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx b/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx index c59c944415..528f64f41a 100644 --- a/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx +++ b/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx @@ -13,6 +13,7 @@ import { KnowledgeBase, Model } from '@renderer/types' import { getErrorMessage } from '@renderer/utils/error' import { Flex, Form, Input, InputNumber, Modal, Select, Slider, Switch } from 'antd' import { find, sortBy } from 'lodash' +import { ChevronDown } from 'lucide-react' import { nanoid } from 'nanoid' import { useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -116,6 +117,7 @@ const PopupContainer: React.FC = ({ title, resolve }) => { const aiProvider = new AiProvider(provider) values.dimensions = await aiProvider.getEmbeddingDimensions(selectedEmbeddingModel) } catch (error) { + console.error('Error getting embedding dimensions:', error) window.message.error(t('message.error.get_embedding_dimensions') + '\n' + getErrorMessage(error)) setLoading(false) return @@ -181,7 +183,12 @@ const PopupContainer: React.FC = ({ title, resolve }) => { label={t('models.embedding_model')} tooltip={{ title: t('models.embedding_model_tooltip'), placement: 'right' }} rules={[{ required: true, message: t('message.error.enter.model') }]}> - } + /> = ({ title, resolve }) => { label={t('models.rerank_model')} tooltip={{ title: t('models.rerank_model_tooltip'), placement: 'right' }} rules={[{ required: false, message: t('message.error.enter.model') }]}> - } + /> {t('models.rerank_model_not_support_provider', { @@ -201,13 +213,7 @@ const PopupContainer: React.FC = ({ title, resolve }) => { label={t('knowledge.document_count')} initialValue={DEFAULT_KNOWLEDGE_DOCUMENT_COUNT} // 设置初始值 tooltip={{ title: t('knowledge.document_count_help') }}> - + = ({ base, resolve }) => { const [results, setResults] = useState>([]) const [searchKeyword, setSearchKeyword] = useState('') const { t } = useTranslation() - const searchInputRef = useRef(null) const handleSearch = async (value: string) => { if (!value.trim()) { @@ -84,77 +84,98 @@ const PopupContainer: React.FC = ({ base, resolve }) => { return ( visible && searchInputRef.current?.focus()} - width={800} + width={700} footer={null} centered - transitionName="animation-move-down"> - - + + + + + } + value={searchKeyword} + placeholder={t('knowledge.search')} allowClear - enterButton - size="large" - onSearch={handleSearch} - ref={searchInputRef} + autoFocus + spellCheck={false} + style={{ paddingLeft: 0 }} + variant="borderless" + size="middle" + onChange={(e) => setSearchKeyword(e.target.value)} + onPressEnter={() => handleSearch(searchKeyword)} /> - - {loading ? ( - - - - ) : ( - ( - - - - Score: {(item.score * 100).toFixed(1)}% - - handleCopy(item.pageContent)}> - - - - - {highlightText(item.pageContent)} - - - {t('knowledge.source')}:{' '} - {item.file ? ( - - {item.file.origin_name} - - ) : ( - item.metadata.source - )} - - - - - )} - /> - )} - - + + + + + {loading ? ( + + + + ) : ( + ( + + + + + {t('knowledge.source')}:{' '} + {item.file ? ( + + {item.file.origin_name} + + ) : ( + item.metadata.source + )} + + Score: {(item.score * 100).toFixed(1)}% + + + + handleCopy(item.pageContent)}> + + + + + + {highlightText(item.pageContent)} + + + + )} + /> + )} + ) } -const SearchContainer = styled.div` - display: flex; - flex-direction: column; - gap: 20px; -` - const ResultsContainer = styled.div` - max-height: 60vh; + padding: 0 16px; overflow-y: auto; + max-height: 70vh; ` const LoadingContainer = styled.div` @@ -164,21 +185,29 @@ const LoadingContainer = styled.div` height: 200px; ` +const TagContainer = styled.div` + position: absolute; + top: 58px; + right: 16px; + display: flex; + align-items: center; + gap: 8px; + opacity: 0; + transition: opacity 0.2s; +` + const ResultItem = styled.div` width: 100%; position: relative; padding: 16px; background: var(--color-background-soft); border-radius: 8px; -` -const TagContainer = styled.div` - position: absolute; - top: 8px; - right: 8px; - display: flex; - align-items: center; - gap: 8px; + &:hover { + ${TagContainer} { + opacity: 1 !important; + } + } ` const ScoreTag = styled.div` @@ -187,6 +216,7 @@ const ScoreTag = styled.div` color: white; border-radius: 4px; font-size: 12px; + flex-shrink: 0; ` const CopyButton = styled.div` @@ -195,7 +225,7 @@ const CopyButton = styled.div` justify-content: center; width: 24px; height: 24px; - background: var(--color-background); + background: var(--color-background-mute); color: var(--color-text); border-radius: 4px; cursor: pointer; @@ -208,12 +238,35 @@ const CopyButton = styled.div` ` const MetadataContainer = styled.div` - margin-top: 8px; - padding-top: 8px; - border-top: 1px solid var(--color-border); + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + margin-bottom: 8px; + padding-bottom: 8px; + border-bottom: 1px solid var(--color-border); user-select: text; ` +const SearchIcon = styled.div` + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: var(--color-background-soft); + margin-right: 2px; + &.back-icon { + cursor: pointer; + transition: background-color 0.2s; + &:hover { + background-color: var(--color-background-mute); + } + } +` + const TopViewKey = 'KnowledgeSearchPopup' export default class KnowledgeSearchPopup { diff --git a/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx b/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx index d994fa9ee1..625ca2c90f 100644 --- a/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx +++ b/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx @@ -1,4 +1,4 @@ -import { DownOutlined, WarningOutlined } from '@ant-design/icons' +import { WarningOutlined } from '@ant-design/icons' import { TopView } from '@renderer/components/TopView' import { DEFAULT_KNOWLEDGE_DOCUMENT_COUNT } from '@renderer/config/constant' import { getEmbeddingMaxContext } from '@renderer/config/embedings' @@ -10,11 +10,11 @@ import { useProviders } from '@renderer/hooks/useProvider' import { SettingHelpText } from '@renderer/pages/settings' import { getModelUniqId } from '@renderer/services/ModelService' import { KnowledgeBase } from '@renderer/types' -import { Alert, Form, Input, InputNumber, Modal, Select, Slider } from 'antd' +import { Alert, Button, Form, Input, InputNumber, Modal, Select, Slider } from 'antd' import { sortBy } from 'lodash' +import { ChevronDown } from 'lucide-react' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' -import styled from 'styled-components' interface ShowParams { base: KnowledgeBase @@ -140,7 +140,13 @@ const PopupContainer: React.FC = ({ base: _base, resolve }) => { initialValue={getModelUniqId(base.model)} tooltip={{ title: t('models.embedding_model_tooltip'), placement: 'right' }} rules={[{ required: true, message: t('message.error.enter.model') }]}> - } + /> = ({ base: _base, resolve }) => { options={rerankSelectOptions} placeholder={t('settings.models.empty')} allowClear + suffixIcon={} /> @@ -166,27 +173,21 @@ const PopupContainer: React.FC = ({ base: _base, resolve }) => { name="documentCount" label={t('knowledge.document_count')} tooltip={{ title: t('knowledge.document_count_help') }}> - + - setShowAdvanced(!showAdvanced)}> - setShowAdvanced(!showAdvanced)}> + {t('common.advanced_settings')} + - {t('common.advanced_settings')} - + -
+
= ({ base: _base, resolve }) => { const TopViewKey = 'KnowledgeSettingsPopup' -const AdvancedSettingsButton = styled.div` - cursor: pointer; - margin-bottom: 16px; - margin-top: -10px; - color: var(--color-primary); - display: flex; - align-items: center; -` - export default class KnowledgeSettingsPopup { static hide() { TopView.hide(TopViewKey) diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx index 169ed3ffd5..a593f41cbe 100644 --- a/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx +++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx @@ -3,7 +3,7 @@ import { Box } from '@renderer/components/Layout' import { useAppSelector } from '@renderer/store' import { Assistant, AssistantSettings } from '@renderer/types' import { Row, Segmented, Select, SelectProps, Tooltip } from 'antd' -import { CircleHelp } from 'lucide-react' +import { ChevronDown, CircleHelp } from 'lucide-react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -46,6 +46,7 @@ const AssistantKnowledgeBaseSettings: React.FC = ({ assistant, updateAssi .toLowerCase() .includes(input.toLowerCase()) } + suffixIcon={} /> diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx index 1a22848ce5..31e44abfbb 100644 --- a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx +++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx @@ -1,13 +1,16 @@ import { DeleteOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons' import ModelAvatar from '@renderer/components/Avatar/ModelAvatar' +import EditableNumber from '@renderer/components/EditableNumber' import { HStack } from '@renderer/components/Layout' import SelectModelPopup from '@renderer/components/Popups/SelectModelPopup' +import Selector from '@renderer/components/Selector' import { DEFAULT_CONTEXTCOUNT, DEFAULT_TEMPERATURE } from '@renderer/config/constant' import { SettingRow } from '@renderer/pages/settings' import { Assistant, AssistantSettingCustomParameters, AssistantSettings } from '@renderer/types' import { modalConfirm } from '@renderer/utils' import { Button, Col, Divider, Input, InputNumber, Row, Select, Slider, Switch, Tooltip } from 'antd' import { isNull } from 'lodash' +import { ChevronDown } from 'lucide-react' import { FC, useCallback, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -107,9 +110,15 @@ const AssistantModelSettings: FC = ({ assistant, updateAssistant, updateA ) case 'boolean': return ( - onUpdateCustomParameter(index, 'value', checked)} + { setToolUseMode(value) updateAssistantSettings({ toolUseMode: value }) - }}> - {t('assistants.settings.tool_use_mode.prompt')} - {t('assistants.settings.tool_use_mode.function')} - + }} + size={14} + /> @@ -409,20 +433,26 @@ const AssistantModelSettings: FC = ({ assistant, updateAssistant, updateA onChange={(e) => onUpdateCustomParameter(index, 'name', e.target.value)} /> - + - {renderParameterValueInput(param, index)} + {renderParameterValueInput(param, index)} - + {emoji && ( = ({ resolve, tab, ...prop styles={{ content: { padding: 0, - overflow: 'hidden', - background: 'var(--color-background)' + overflow: 'hidden' }, - header: { padding: '10px 15px', borderBottom: '0.5px solid var(--color-border)', margin: 0 } + header: { padding: '10px 15px', borderBottom: '0.5px solid var(--color-border)', margin: 0, borderRadius: 0 }, + body: { + padding: 0 + } }} - width="70vw" + width="min(800px, 70vw)" height="80vh" centered> @@ -145,15 +147,14 @@ const AssistantSettingPopupContainer: React.FC = ({ resolve, tab, ...prop } const LeftMenu = styled.div` - background-color: var(--color-background); height: calc(80vh - 20px); border-right: 0.5px solid var(--color-border); ` const Settings = styled.div` flex: 1; - padding: 10px 20px; - height: calc(80vh - 20px); + padding: 16px 16px; + height: calc(80vh - 16px); overflow-y: scroll; ` @@ -163,6 +164,7 @@ const StyledModal = styled(Modal)` } .ant-modal-close { top: 4px; + right: 4px; } .ant-menu-item { height: 36px; diff --git a/src/renderer/src/pages/settings/DataSettings/AgentsSubscribeUrlSettings.tsx b/src/renderer/src/pages/settings/DataSettings/AgentsSubscribeUrlSettings.tsx index eb37f41737..f4e76fadd9 100755 --- a/src/renderer/src/pages/settings/DataSettings/AgentsSubscribeUrlSettings.tsx +++ b/src/renderer/src/pages/settings/DataSettings/AgentsSubscribeUrlSettings.tsx @@ -39,7 +39,6 @@ const AgentsSubscribeUrlSettings: FC = () => { /> - ) } diff --git a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx b/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx index 3574c808d1..32b3148541 100644 --- a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx +++ b/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx @@ -4,7 +4,7 @@ import { useTheme } from '@renderer/context/ThemeProvider' import { useMinappPopup } from '@renderer/hooks/useMinappPopup' import { RootState, useAppDispatch } from '@renderer/store' import { setJoplinExportReasoning, setJoplinToken, setJoplinUrl } from '@renderer/store/settings' -import { Button, Switch, Tooltip } from 'antd' +import { Button, Space, Switch, Tooltip } from 'antd' import Input from 'antd/es/input/Input' import { FC } from 'react' import { useTranslation } from 'react-i18next' @@ -106,14 +106,15 @@ const JoplinSettings: FC = () => { - - + + + + diff --git a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx b/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx index 719a2363d7..26e8d0872a 100644 --- a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx +++ b/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx @@ -10,7 +10,7 @@ import { setNotionExportReasoning, setNotionPageNameKey } from '@renderer/store/settings' -import { Button, Switch, Tooltip } from 'antd' +import { Button, Space, Switch, Tooltip } from 'antd' import Input from 'antd/es/input/Input' import { FC } from 'react' import { useTranslation } from 'react-i18next' @@ -121,15 +121,16 @@ const NotionSettings: FC = () => { {t('settings.data.notion.api_key')} - - + + + + diff --git a/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx b/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx index 15207200b4..108452c133 100644 --- a/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx +++ b/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx @@ -1,6 +1,7 @@ import { CheckOutlined, FolderOutlined, LoadingOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons' import { HStack } from '@renderer/components/Layout' import NutstorePathPopup from '@renderer/components/Popups/NutsorePathPopup' +import Selector from '@renderer/components/Selector' import { WebdavBackupManager } from '@renderer/components/WebdavBackupManager' import { useWebdavBackupModal, WebdavBackupModal } from '@renderer/components/WebdavModals' import { useTheme } from '@renderer/context/ThemeProvider' @@ -23,7 +24,7 @@ import { } from '@renderer/store/nutstore' import { modalConfirm } from '@renderer/utils' import { NUTSTORE_HOST } from '@shared/config/nutstore' -import { Button, Input, Select, Switch, Tooltip, Typography } from 'antd' +import { Button, Input, Switch, Tooltip, Typography } from 'antd' import dayjs from 'dayjs' import { FC, useCallback, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -279,18 +280,23 @@ const NutstoreSettings: FC = () => { {t('settings.data.webdav.autoSync')} - + {nutstoreAutoSync && syncInterval > 0 && ( <> diff --git a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx b/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx index 3ba6673eea..2681f13053 100644 --- a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx +++ b/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx @@ -4,7 +4,7 @@ import { useTheme } from '@renderer/context/ThemeProvider' import { useMinappPopup } from '@renderer/hooks/useMinappPopup' import { RootState, useAppDispatch } from '@renderer/store' import { setSiyuanApiUrl, setSiyuanBoxId, setSiyuanRootPath, setSiyuanToken } from '@renderer/store/settings' -import { Button, Tooltip } from 'antd' +import { Button, Space, Tooltip } from 'antd' import Input from 'antd/es/input/Input' import { FC } from 'react' import { useTranslation } from 'react-i18next' @@ -108,14 +108,15 @@ const SiyuanSettings: FC = () => { - - + + + + diff --git a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx index 8e2a7e5aa2..54db33f024 100644 --- a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx +++ b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx @@ -1,5 +1,6 @@ import { FolderOpenOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons' import { HStack } from '@renderer/components/Layout' +import Selector from '@renderer/components/Selector' import { WebdavBackupManager } from '@renderer/components/WebdavBackupManager' import { useWebdavBackupModal, WebdavBackupModal } from '@renderer/components/WebdavModals' import { useTheme } from '@renderer/context/ThemeProvider' @@ -16,7 +17,7 @@ import { setWebdavSyncInterval as _setWebdavSyncInterval, setWebdavUser as _setWebdavUser } from '@renderer/store/settings' -import { Button, Input, Select, Switch, Tooltip } from 'antd' +import { Button, Input, Switch, Tooltip } from 'antd' import dayjs from 'dayjs' import { FC, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -173,31 +174,43 @@ const WebDavSettings: FC = () => { {t('settings.data.webdav.autoSync')} - + {t('settings.data.webdav.maxBackups')} - + diff --git a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx b/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx index 72a629e55b..60a8d6ef7c 100644 --- a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx +++ b/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx @@ -4,7 +4,7 @@ import { useTheme } from '@renderer/context/ThemeProvider' import { useMinappPopup } from '@renderer/hooks/useMinappPopup' import { RootState, useAppDispatch } from '@renderer/store' import { setYuqueRepoId, setYuqueToken, setYuqueUrl } from '@renderer/store/settings' -import { Button, Tooltip } from 'antd' +import { Button, Space, Tooltip } from 'antd' import Input from 'antd/es/input/Input' import { FC } from 'react' import { useTranslation } from 'react-i18next' @@ -100,14 +100,15 @@ const YuqueSettings: FC = () => { - - + + + + diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx index 48c8dcbe92..56d09bd8dc 100644 --- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx +++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx @@ -196,7 +196,7 @@ const DisplaySettings: FC = () => { value={userTheme.colorPrimary} onChange={(color) => handleColorPrimaryChange(color.toHexString())} showText - style={{ width: '110px' }} + size="small" presets={[ { label: 'Presets', @@ -222,13 +222,15 @@ const DisplaySettings: FC = () => { {t('settings.zoom.title')} - + {emoji && ( { justifyContent: 'space-between' }}> {t('settings.assistant.model_params')} - @@ -156,7 +156,7 @@ const AssistantSettings: FC = () => { - + { step={0.01} /> - + { - + { step={0.01} /> - + @@ -207,7 +207,7 @@ const AssistantSettings: FC = () => { - + { step={1} /> - + { /> - + @@ -255,7 +255,7 @@ const AssistantSettings: FC = () => { onUpdateAssistantSettings({ enableMaxTokens: enabled }) }} /> - + {enableMaxTokens && ( @@ -307,7 +307,7 @@ const PopupContainer: React.FC = ({ resolve }) => { afterClose={onClose} transitionName="animation-move-down" centered - width={800} + width={500} footer={null}> diff --git a/src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx index cf79088ac4..1ff9517f9b 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx @@ -121,7 +121,7 @@ const PopupContainer: React.FC = ({ title, provider, resolve }) => { tooltip={t('settings.models.add.group_name.tooltip')}> - + {showMoreSettings && ( -
- - {t('models.type.select')} +
+ + {t('models.type.select')}: {(() => { const defaultTypes = [ ...(isVisionModel(model) ? ['vision'] : []), @@ -235,6 +238,7 @@ const ModelEditContent: FC = ({ model, onUpdateModel, ope } }} dropdownMatchSelectWidth={false} + suffixIcon={} /> @@ -281,32 +285,9 @@ const ModelEditContent: FC = ({ model, onUpdateModel, ope } const TypeTitle = styled.div` - margin-top: 16px; - margin-bottom: 12px; + margin: 12px 0; font-size: 14px; font-weight: 600; ` -const ExpandIcon = styled.div` - font-size: 12px; - color: var(--color-text-3); -` - -const MoreSettingsRow = styled.div` - display: flex; - align-items: center; - gap: 8px; - color: var(--color-text-3); - cursor: pointer; - padding: 4px 8px; - border-radius: 4px; - max-width: 150px; - overflow: hidden; - text-overflow: ellipsis; - - &:hover { - background-color: var(--color-background-soft); - } -` - export default ModelEditContent diff --git a/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx b/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx index 12f5e29925..7577ed8c07 100644 --- a/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx +++ b/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx @@ -1,5 +1,5 @@ import { TopView } from '@renderer/components/TopView' -import { Button, Form, FormProps, Input, Modal } from 'antd' +import { Button, Flex, Form, FormProps, Input, Modal } from 'antd' import { useState } from 'react' import { useTranslation } from 'react-i18next' @@ -66,7 +66,7 @@ const PopupContainer: React.FC = ({ title, resolve }) => { centered>
= ({ title, resolve }) => { - + - +
) diff --git a/src/renderer/src/pages/settings/WebSearchSettings/index.tsx b/src/renderer/src/pages/settings/WebSearchSettings/index.tsx index e00eb785e7..6fab13d388 100644 --- a/src/renderer/src/pages/settings/WebSearchSettings/index.tsx +++ b/src/renderer/src/pages/settings/WebSearchSettings/index.tsx @@ -1,8 +1,8 @@ +import Selector from '@renderer/components/Selector' import { useTheme } from '@renderer/context/ThemeProvider' import { useDefaultWebSearchProvider, useWebSearchProviders } from '@renderer/hooks/useWebSearchProviders' import { WebSearchProvider } from '@renderer/types' import { hasObjectKey } from '@renderer/utils' -import { Select } from 'antd' import { FC, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -37,9 +37,9 @@ const WebSearchSettings: FC = () => { {t('settings.websearch.search_provider')}
- ) }))} + suffixIcon={} /> )} @@ -452,6 +455,7 @@ const TranslatePage: FC = () => { ) }))} + suffixIcon={} /> ) } @@ -551,6 +555,7 @@ const TranslatePage: FC = () => { ) })) ]} + suffixIcon={} />