diff --git a/.vscode/settings.json b/.vscode/settings.json index e961d7645..4097b2bda 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -48,5 +48,9 @@ "search.exclude": { "**/dist/**": true, ".yarn/releases/**": true - } + }, + "tailwindCSS.classAttributes": [ + "className", + "classNames", + ] } diff --git a/eslint.config.mjs b/eslint.config.mjs index efbc13b0d..0bcc6b57d 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -145,7 +145,7 @@ export default defineConfig([ paths: [ { name: 'antd', - importNames: ['Flex', 'Switch', 'message', 'Button'], + importNames: ['Flex', 'Switch', 'message', 'Button', 'Tooltip'], message: '❌ Do not import this component from antd. Use our custom components instead: import { ... } from "@cherrystudio/ui"' }, diff --git a/packages/ui/package.json b/packages/ui/package.json index a0835b838..93eb4abfa 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -69,7 +69,7 @@ "react-dom": "^19.0.0", "storybook": "^9.1.6", "styled-components": "^6.1.15", - "tsdown": "^0.12.9", + "tsdown": "^0.15.5", "tsx": "^4.20.5", "typescript": "^5.6.2", "vitest": "^3.2.4" diff --git a/packages/ui/src/components/base/Avatar/EmojiAvatar.tsx b/packages/ui/src/components/base/Avatar/EmojiAvatar.tsx index 20df79d9e..da637b42f 100644 --- a/packages/ui/src/components/base/Avatar/EmojiAvatar.tsx +++ b/packages/ui/src/components/base/Avatar/EmojiAvatar.tsx @@ -10,14 +10,7 @@ interface EmojiAvatarProps { style?: React.CSSProperties } -const EmojiAvatar = ({ - children, - size = 31, - fontSize, - onClick, - className, - style -}: EmojiAvatarProps) => ( +const EmojiAvatar = ({ children, size = 31, fontSize, onClick, className, style }: EmojiAvatarProps) => (
= ({ ) return tooltip ? ( - + {tagContent} ) : ( diff --git a/packages/ui/src/components/base/Tooltip/index.tsx b/packages/ui/src/components/base/Tooltip/index.tsx new file mode 100644 index 000000000..d69deadba --- /dev/null +++ b/packages/ui/src/components/base/Tooltip/index.tsx @@ -0,0 +1,34 @@ +import type { TooltipProps as HeroUITooltipProps } from '@heroui/react' +import { cn, Tooltip as HeroUITooltip } from '@heroui/react' + +export interface TooltipProps extends HeroUITooltipProps {} + +/** + * Tooltip wrapper that applies consistent styling and arrow display. + * Differences from raw HeroUI Tooltip: + * 1. Defaults showArrow={true} + * 2. Merges a default max-w-60 class into the content slot, capping width at 240px. + * All other HeroUI Tooltip props/behaviors remain unchanged. + * + * @see https://www.heroui.com/docs/components/tooltip + */ +export const Tooltip = ({ + children, + classNames, + showArrow, + ...rest +}: Omit & { + classNames?: TooltipProps['classNames'] & { placeholder?: string } +}) => { + return ( + +
{children}
+ + ) +} diff --git a/packages/ui/src/components/display/ListItem/index.tsx b/packages/ui/src/components/display/ListItem/index.tsx index a10502092..196fdb294 100644 --- a/packages/ui/src/components/display/ListItem/index.tsx +++ b/packages/ui/src/components/display/ListItem/index.tsx @@ -43,7 +43,7 @@ const ListItem = ({
{icon && {icon}}
- +
{title}
diff --git a/packages/ui/src/components/icons/ToolsCallingIcon/index.tsx b/packages/ui/src/components/icons/ToolsCallingIcon/index.tsx index b8faa2493..a6b31babe 100644 --- a/packages/ui/src/components/icons/ToolsCallingIcon/index.tsx +++ b/packages/ui/src/components/icons/ToolsCallingIcon/index.tsx @@ -14,7 +14,7 @@ interface ToolsCallingIconProps extends React.HTMLAttributes { const ToolsCallingIcon = ({ className, iconClassName, TooltipProps, ...props }: ToolsCallingIconProps) => { return (
- +
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 39a2a6d4c..db518c81f 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -15,6 +15,7 @@ export { ErrorTag, InfoTag, StatusTag, SuccessTag, WarnTag } from './base/Status export { DescriptionSwitch, Switch } from './base/Switch' export { default as TextBadge } from './base/TextBadge' export { getToastUtilities, type ToastUtilities } from './base/Toast' +export { Tooltip, type TooltipProps } from './base/Tooltip' // Display Components export { default as Ellipsis } from './display/Ellipsis' @@ -80,15 +81,12 @@ export { DraggableList, useDraggableReorder } from './interactive/DraggableList' export type { EditableNumberProps } from './interactive/EditableNumber' // EditableNumber export { default as EditableNumber } from './interactive/EditableNumber' -export { default as HelpTooltip } from './interactive/HelpTooltip' +// Tooltip variants +export { HelpTooltip, type IconTooltipProps, InfoTooltip, WarnTooltip } from './interactive/IconTooltips' // ImageToolButton export { default as ImageToolButton } from './interactive/ImageToolButton' -// InfoTooltip -export { default as InfoTooltip } from './interactive/InfoTooltip' // Sortable export { Sortable } from './interactive/Sortable' -// WarnTooltip -export { default as WarnTooltip } from './interactive/WarnTooltip' // Composite Components (复合组件) // 暂无复合组件 diff --git a/packages/ui/src/components/interactive/CollapsibleSearchBar/index.tsx b/packages/ui/src/components/interactive/CollapsibleSearchBar/index.tsx index 43a0ac60f..6e850f7d5 100644 --- a/packages/ui/src/components/interactive/CollapsibleSearchBar/index.tsx +++ b/packages/ui/src/components/interactive/CollapsibleSearchBar/index.tsx @@ -1,10 +1,12 @@ // Original path: src/renderer/src/components/CollapsibleSearchBar.tsx import type { InputRef } from 'antd' -import { Input, Tooltip } from 'antd' +import { Input } from 'antd' import { Search } from 'lucide-react' import { motion } from 'motion/react' import React, { memo, useCallback, useEffect, useRef, useState } from 'react' +import { Tooltip } from '../../base/Tooltip' + interface CollapsibleSearchBarProps { onSearch: (text: string) => void placeholder?: string @@ -93,7 +95,7 @@ const CollapsibleSearchBar = ({ }} style={{ cursor: 'pointer', display: 'flex' }} onClick={() => setSearchVisible(true)}> - + {icon} diff --git a/packages/ui/src/components/interactive/DraggableList/virtual-list.tsx b/packages/ui/src/components/interactive/DraggableList/virtual-list.tsx index 794d2204e..6085bdfd8 100644 --- a/packages/ui/src/components/interactive/DraggableList/virtual-list.tsx +++ b/packages/ui/src/components/interactive/DraggableList/virtual-list.tsx @@ -1,4 +1,3 @@ -import { Scrollbar } from '@cherrystudio/ui' import type { DroppableProps, DropResult, @@ -10,6 +9,7 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd' import { type ScrollToOptions, useVirtualizer, type VirtualItem } from '@tanstack/react-virtual' import { type Key, memo, useCallback, useImperativeHandle, useRef } from 'react' +import Scrollbar from '../../layout/Scrollbar' import { droppableReorder } from './sort' export interface DraggableVirtualListRef { diff --git a/packages/ui/src/components/interactive/HelpTooltip/index.tsx b/packages/ui/src/components/interactive/HelpTooltip/index.tsx deleted file mode 100644 index 592f6ae2a..000000000 --- a/packages/ui/src/components/interactive/HelpTooltip/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// Original path: src/renderer/src/components/TooltipIcons/HelpTooltip.tsx -import type { TooltipProps } from 'antd' -import { Tooltip } from 'antd' -import { HelpCircle } from 'lucide-react' - -type InheritedTooltipProps = Omit - -interface HelpTooltipProps extends InheritedTooltipProps { - iconColor?: string - iconSize?: string | number - iconStyle?: React.CSSProperties -} - -const HelpTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: HelpTooltipProps) => { - return ( - - - - ) -} - -export default HelpTooltip diff --git a/packages/ui/src/components/interactive/IconTooltips/HelpTooltip.tsx b/packages/ui/src/components/interactive/IconTooltips/HelpTooltip.tsx new file mode 100644 index 000000000..43643ff06 --- /dev/null +++ b/packages/ui/src/components/interactive/IconTooltips/HelpTooltip.tsx @@ -0,0 +1,19 @@ +// Original path: src/renderer/src/components/TooltipIcons/HelpTooltip.tsx +import { HelpCircle } from 'lucide-react' + +import { Tooltip } from '../../base/Tooltip' +import type { IconTooltipProps } from './types' + +export const HelpTooltip = ({ iconProps, ...rest }: IconTooltipProps) => { + return ( + + + + ) +} diff --git a/packages/ui/src/components/interactive/IconTooltips/InfoTooltip.tsx b/packages/ui/src/components/interactive/IconTooltips/InfoTooltip.tsx new file mode 100644 index 000000000..7e05cb141 --- /dev/null +++ b/packages/ui/src/components/interactive/IconTooltips/InfoTooltip.tsx @@ -0,0 +1,19 @@ +// Original: src/renderer/src/components/TooltipIcons/InfoTooltip.tsx +import { Info } from 'lucide-react' + +import { Tooltip } from '../../base/Tooltip' +import type { IconTooltipProps } from './types' + +export const InfoTooltip = ({ iconProps, ...rest }: IconTooltipProps) => { + return ( + + + + ) +} diff --git a/packages/ui/src/components/interactive/IconTooltips/WarnTooltip.tsx b/packages/ui/src/components/interactive/IconTooltips/WarnTooltip.tsx new file mode 100644 index 000000000..746f3233d --- /dev/null +++ b/packages/ui/src/components/interactive/IconTooltips/WarnTooltip.tsx @@ -0,0 +1,19 @@ +// Original path: src/renderer/src/components/TooltipIcons/WarnTooltip.tsx +import { AlertTriangle } from 'lucide-react' + +import { Tooltip } from '../../base/Tooltip' +import type { IconTooltipProps } from './types' + +export const WarnTooltip = ({ iconProps, ...rest }: IconTooltipProps) => { + return ( + + + + ) +} diff --git a/packages/ui/src/components/interactive/IconTooltips/index.tsx b/packages/ui/src/components/interactive/IconTooltips/index.tsx new file mode 100644 index 000000000..a88bfa368 --- /dev/null +++ b/packages/ui/src/components/interactive/IconTooltips/index.tsx @@ -0,0 +1,4 @@ +export { HelpTooltip } from './HelpTooltip' +export { InfoTooltip } from './InfoTooltip' +export type { IconTooltipProps } from './types' +export { WarnTooltip } from './WarnTooltip' diff --git a/packages/ui/src/components/interactive/IconTooltips/types.ts b/packages/ui/src/components/interactive/IconTooltips/types.ts new file mode 100644 index 000000000..356a280c8 --- /dev/null +++ b/packages/ui/src/components/interactive/IconTooltips/types.ts @@ -0,0 +1,7 @@ +import type { LucideProps } from 'lucide-react' + +import type { TooltipProps } from '../../base/Tooltip' + +export interface IconTooltipProps extends TooltipProps { + iconProps?: LucideProps +} diff --git a/packages/ui/src/components/interactive/ImageToolButton/index.tsx b/packages/ui/src/components/interactive/ImageToolButton/index.tsx index 97a5eeaeb..198c3cbe8 100644 --- a/packages/ui/src/components/interactive/ImageToolButton/index.tsx +++ b/packages/ui/src/components/interactive/ImageToolButton/index.tsx @@ -1,8 +1,9 @@ // Original path: src/renderer/src/components/Preview/ImageToolButton.tsx -import { Button } from '@cherrystudio/ui' -import { Tooltip } from 'antd' import { memo } from 'react' +import Button from '../../base/Button' +import { Tooltip } from '../../base/Tooltip' + interface ImageToolButtonProps { tooltip: string icon: React.ReactNode @@ -11,7 +12,7 @@ interface ImageToolButtonProps { const ImageToolButton = ({ tooltip, icon, onPress }: ImageToolButtonProps) => { return ( - + diff --git a/packages/ui/src/components/interactive/InfoTooltip/index.tsx b/packages/ui/src/components/interactive/InfoTooltip/index.tsx deleted file mode 100644 index 34d9ba796..000000000 --- a/packages/ui/src/components/interactive/InfoTooltip/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// Original: src/renderer/src/components/TooltipIcons/InfoTooltip.tsx -import type { TooltipProps } from 'antd' -import { Tooltip } from 'antd' -import { Info } from 'lucide-react' - -type InheritedTooltipProps = Omit - -interface InfoTooltipProps extends InheritedTooltipProps { - iconColor?: string - iconSize?: string | number - iconStyle?: React.CSSProperties -} - -const InfoTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: InfoTooltipProps) => { - return ( - - - - ) -} - -export default InfoTooltip diff --git a/packages/ui/src/components/interactive/WarnTooltip/index.tsx b/packages/ui/src/components/interactive/WarnTooltip/index.tsx deleted file mode 100644 index f0dc05ce4..000000000 --- a/packages/ui/src/components/interactive/WarnTooltip/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -// Original path: src/renderer/src/components/TooltipIcons/WarnTooltip.tsx -import type { TooltipProps } from 'antd' -import { Tooltip } from 'antd' -import { AlertTriangle } from 'lucide-react' - -type InheritedTooltipProps = Omit - -interface WarnTooltipProps extends InheritedTooltipProps { - iconColor?: string - iconSize?: string | number - iconStyle?: React.CSSProperties -} - -const WarnTooltip = ({ - iconColor = 'var(--color-status-warning)', - iconSize = 14, - iconStyle, - ...rest -}: WarnTooltipProps) => { - return ( - - - - ) -} - -export default WarnTooltip diff --git a/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx b/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx index 82e3a5849..d7f14b209 100644 --- a/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx +++ b/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx @@ -1,5 +1,5 @@ import { CodeEditor, type CodeEditorHandles } from '@cherrystudio/ui' -import { Button } from '@cherrystudio/ui' +import { Button, Tooltip } from '@cherrystudio/ui' import { usePreference } from '@data/hooks/usePreference' import { CopyIcon, FilePngIcon } from '@renderer/components/Icons' import { isMac } from '@renderer/config/constant' @@ -8,7 +8,7 @@ import { useTemporaryValue } from '@renderer/hooks/useTemporaryValue' import { classNames } from '@renderer/utils' import { extractHtmlTitle, getFileNameFromHtmlTitle } from '@renderer/utils/formats' import { captureScrollableIframeAsBlob, captureScrollableIframeAsDataURL } from '@renderer/utils/image' -import { Dropdown, Modal, Splitter, Tooltip, Typography } from 'antd' +import { Dropdown, Modal, Splitter, Typography } from 'antd' import { Camera, Check, Code, Eye, Maximize2, Minimize2, SaveIcon, SquareSplitHorizontal, X } from 'lucide-react' import { useCallback, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -126,7 +126,7 @@ const HtmlArtifactsPopup: React.FC = ({ open, title, ht } ] }}> - +
= ({ return ( {latencyText && {latencyText}} - + {icon} diff --git a/src/renderer/src/components/Icons/ReasoningIcon.tsx b/src/renderer/src/components/Icons/ReasoningIcon.tsx index 8d7aa94fe..ae8318789 100644 --- a/src/renderer/src/components/Icons/ReasoningIcon.tsx +++ b/src/renderer/src/components/Icons/ReasoningIcon.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from 'antd' +import { Tooltip } from '@cherrystudio/ui' import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' @@ -9,7 +9,7 @@ const ReasoningIcon: FC - + diff --git a/src/renderer/src/components/Icons/SVGIcon.tsx b/src/renderer/src/components/Icons/SVGIcon.tsx index ad503f0e3..f866ad21d 100644 --- a/src/renderer/src/components/Icons/SVGIcon.tsx +++ b/src/renderer/src/components/Icons/SVGIcon.tsx @@ -279,7 +279,7 @@ export function PoeLogo(props: SVGProps) { y1="7.303" y2="27.715"> - + ) { y1="23.511" y2="9.464"> - + diff --git a/src/renderer/src/components/Icons/ToolsCallingIcon.tsx b/src/renderer/src/components/Icons/ToolsCallingIcon.tsx index 36b831e71..f8fe661e5 100644 --- a/src/renderer/src/components/Icons/ToolsCallingIcon.tsx +++ b/src/renderer/src/components/Icons/ToolsCallingIcon.tsx @@ -1,5 +1,5 @@ import { ToolOutlined } from '@ant-design/icons' -import { Tooltip } from 'antd' +import { Tooltip } from '@cherrystudio/ui' import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' @@ -10,7 +10,7 @@ const ToolsCallingIcon: FC - + diff --git a/src/renderer/src/components/Icons/VisionIcon.tsx b/src/renderer/src/components/Icons/VisionIcon.tsx index d1f2b4e18..8ae435789 100644 --- a/src/renderer/src/components/Icons/VisionIcon.tsx +++ b/src/renderer/src/components/Icons/VisionIcon.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from 'antd' +import { Tooltip } from '@cherrystudio/ui' import { ImageIcon } from 'lucide-react' import type { FC } from 'react' import React from 'react' @@ -10,7 +10,7 @@ const VisionIcon: FC, return ( - + diff --git a/src/renderer/src/components/Icons/WebSearchIcon.tsx b/src/renderer/src/components/Icons/WebSearchIcon.tsx index 156ea1307..2a3222719 100644 --- a/src/renderer/src/components/Icons/WebSearchIcon.tsx +++ b/src/renderer/src/components/Icons/WebSearchIcon.tsx @@ -1,5 +1,5 @@ import { GlobalOutlined } from '@ant-design/icons' -import { Tooltip } from 'antd' +import { Tooltip } from '@cherrystudio/ui' import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' @@ -10,7 +10,7 @@ const WebSearchIcon: FC - + diff --git a/src/renderer/src/components/InputEmbeddingDimension.tsx b/src/renderer/src/components/InputEmbeddingDimension.tsx index db2c79d87..f5d8134e9 100644 --- a/src/renderer/src/components/InputEmbeddingDimension.tsx +++ b/src/renderer/src/components/InputEmbeddingDimension.tsx @@ -1,11 +1,11 @@ -import { Button } from '@cherrystudio/ui' +import { Button, Tooltip } from '@cherrystudio/ui' import { loggerService } from '@logger' import AiProvider from '@renderer/aiCore' import { RefreshIcon } from '@renderer/components/Icons' import { useProvider } from '@renderer/hooks/useProvider' import type { Model } from '@renderer/types' import { getErrorMessage } from '@renderer/utils' -import { InputNumber, Space, Tooltip } from 'antd' +import { InputNumber, Space } from 'antd' import { memo, useCallback, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -74,7 +74,7 @@ const InputEmbeddingDimension = ({ onChange={onChange} disabled={disabled} /> - + - )), - Tooltip: vi.fn(({ children, title }) =>
{children}
) + )) +})) + +vi.mock('@cherrystudio/ui', () => ({ + Button: ({ children, onPress, disabled, isDisabled, startContent, ...props }: any) => ( + + ), + Tooltip: ({ children }: { children: React.ReactNode }) => <>{children} })) describe('ImageToolButton', () => { diff --git a/src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap b/src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap index fe1074ed7..183512360 100644 --- a/src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap +++ b/src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap @@ -2,24 +2,17 @@ exports[`ImageToolButton > should match snapshot 1`] = ` -
- -
+ Icon + + `; diff --git a/src/renderer/src/components/ProviderLogoPicker/index.tsx b/src/renderer/src/components/ProviderLogoPicker/index.tsx index d06a1a9cb..338b0ef64 100644 --- a/src/renderer/src/components/ProviderLogoPicker/index.tsx +++ b/src/renderer/src/components/ProviderLogoPicker/index.tsx @@ -1,8 +1,9 @@ import { SearchOutlined } from '@ant-design/icons' +import { Tooltip } from '@cherrystudio/ui' import { ProviderAvatarPrimitive } from '@renderer/components/ProviderAvatar' import { PROVIDER_LOGO_MAP } from '@renderer/config/providers' import { getProviderLabel } from '@renderer/i18n/label' -import { Input, Tooltip } from 'antd' +import { Input } from 'antd' import type { FC } from 'react' import { useMemo, useState } from 'react' import styled from 'styled-components' @@ -51,9 +52,14 @@ const ProviderLogoPicker: FC = ({ onProviderClick }) => { {filteredProviders.map(({ id, name, logo }) => ( - + handleProviderClick(e, id)}> - + ))} diff --git a/src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx b/src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx index 7b6853a7b..b989c545c 100644 --- a/src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx +++ b/src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx @@ -1,8 +1,8 @@ import { CopyOutlined } from '@ant-design/icons' -import { Button } from '@cherrystudio/ui' +import { Button, Tooltip } from '@cherrystudio/ui' import { DEFAULT_LANGUAGES, getHighlighter, getShiki } from '@renderer/utils/shiki' import { NodeViewContent, NodeViewWrapper, type ReactNodeViewProps, ReactNodeViewRenderer } from '@tiptap/react' -import { Select, Tooltip } from 'antd' +import { Select } from 'antd' import type { FC } from 'react' import { useCallback, useEffect, useState } from 'react' @@ -66,7 +66,7 @@ const CodeBlockNodeView: FC = (props) => { options={languageOptions.map((lang) => ({ value: lang, label: lang }))} style={{ minWidth: 90 }} /> - + ) - const MockTooltip: React.FC> = ({ children, title }) => ( + return { + Button: MockButton, + InputNumber: MockInputNumber, + Space: { Compact: MockSpaceCompact } + } +}) + +vi.mock('@cherrystudio/ui', () => ({ + Button: ({ children, onPress, disabled, isDisabled, startContent, ...props }: any) => ( + + ), + Tooltip: ({ children, title }: { children: React.ReactNode; title: React.ReactNode }) => (
{children}
) - - return { - Button: MockButton, - InputNumber: MockInputNumber, - Space: { Compact: MockSpaceCompact }, - Tooltip: MockTooltip - } -}) +})) // Mock dependencies vi.mock('@renderer/aiCore', () => ({ diff --git a/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap index 609d3df38..f8ddaa407 100644 --- a/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap +++ b/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap @@ -14,22 +14,17 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with />
diff --git a/src/renderer/src/components/app/PinnedMinapps.tsx b/src/renderer/src/components/app/PinnedMinapps.tsx index eb1603d52..1c51464bc 100644 --- a/src/renderer/src/components/app/PinnedMinapps.tsx +++ b/src/renderer/src/components/app/PinnedMinapps.tsx @@ -1,3 +1,4 @@ +import { Tooltip } from '@cherrystudio/ui' import { usePreference } from '@data/hooks/usePreference' import { useTheme } from '@renderer/context/ThemeProvider' import { useMinappPopup } from '@renderer/hooks/useMinappPopup' @@ -5,7 +6,7 @@ import { useMinapps } from '@renderer/hooks/useMinapps' import { useNavbarPosition } from '@renderer/hooks/useNavbar' import type { MinAppType } from '@renderer/types' import type { MenuProps } from 'antd' -import { Dropdown, Tooltip } from 'antd' +import { Dropdown } from 'antd' import type { FC } from 'react' import { useEffect } from 'react' import { useTranslation } from 'react-i18next' @@ -86,16 +87,18 @@ export const SidebarOpenedMinappTabs: FC = () => { const isActive = minappShow && currentMinappId === app.id return ( - - - handleOnClick(app)} - className={`${isActive ? 'opened-active' : ''}`}> - - - - + + {/* FIXME: Antd Dropdown is not compatible with HeroUI Tooltip */} + {/* */} + handleOnClick(app)} className={`${isActive ? 'opened-active' : ''}`}> + + + {/* */} + ) })} @@ -126,7 +129,7 @@ export const SidebarPinnedApps: FC = () => { ] const isActive = minappShow && currentMinappId === app.id return ( - + { + placement="right" + content={t('settings.theme.title') + ': ' + getThemeModeLabel(settedTheme)} + delay={800}> {settedTheme === ThemeMode.dark ? ( @@ -103,7 +102,7 @@ const Sidebar: FC = () => { )} - + { hideMinappPopup() @@ -161,7 +160,7 @@ const MainMenus: FC = () => { const isActive = path === '/' ? isRoute(path) : isRoutes(path) return ( - + { hideMinappPopup() diff --git a/src/renderer/src/pages/code/CodeToolsPage.tsx b/src/renderer/src/pages/code/CodeToolsPage.tsx index 982988383..054654632 100644 --- a/src/renderer/src/pages/code/CodeToolsPage.tsx +++ b/src/renderer/src/pages/code/CodeToolsPage.tsx @@ -1,5 +1,4 @@ -import { Button } from '@cherrystudio/ui' -import { Avatar } from '@cherrystudio/ui' +import { Avatar, Button, Tooltip } from '@cherrystudio/ui' import AiProvider from '@renderer/aiCore' import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar' import ModelSelector from '@renderer/components/ModelSelector' @@ -18,7 +17,7 @@ import { setIsBunInstalled } from '@renderer/store/mcp' import type { EndpointType, Model } from '@renderer/types' import type { TerminalConfig } from '@shared/config/constant' import { codeTools, terminalApps } from '@shared/config/constant' -import { Alert, Checkbox, Input, Popover, Select, Space, Tooltip } from 'antd' +import { Alert, Checkbox, Input, Popover, Select, Space } from 'antd' import { ArrowUpRight, Download, FolderOpen, HelpCircle, Terminal, X } from 'lucide-react' import type { FC } from 'react' import { useCallback, useEffect, useMemo, useState } from 'react' @@ -458,7 +457,7 @@ const CodeToolsPage: FC = () => { selectedTerminal !== terminalApps.cmd && selectedTerminal !== terminalApps.powershell && selectedTerminal !== terminalApps.windowsTerminal && ( - +
diff --git a/src/renderer/src/pages/home/Tabs/components/OpenAISettingsGroup.tsx b/src/renderer/src/pages/home/Tabs/components/OpenAISettingsGroup.tsx index e752f450b..aaae0925a 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 { HelpTooltip } from '@cherrystudio/ui' import Selector from '@renderer/components/Selector' import { isSupportedReasoningEffortOpenAIModel, @@ -14,8 +15,6 @@ import { setOpenAISummaryText, setOpenAIVerbosity } from '@renderer/store/settin import type { Model, OpenAIServiceTier, OpenAISummaryText, ServiceTier } from '@renderer/types' import { GroqServiceTiers, OpenAIServiceTiers, SystemProviderIds } from '@renderer/types' import type { OpenAIVerbosity } from '@types' -import { Tooltip } from 'antd' -import { CircleHelp } from 'lucide-react' import type { FC } from 'react' import { useCallback, useEffect, useMemo } from 'react' import { useTranslation } from 'react-i18next' @@ -167,9 +166,7 @@ const OpenAISettingsGroup: FC = ({ model, providerId, SettingGroup, Setti {t('settings.openai.service_tier.title')}{' '} - - - + = ({ model, providerId, SettingGroup, Setti {t('settings.openai.summary_text_mode.title')}{' '} - - - + = ({ model, providerId, SettingGroup, Setti {isSupportVerbosity && ( - {t('settings.openai.verbosity.title')}{' '} - - - + {t('settings.openai.verbosity.title')} = ({ selectedBase }) => {
- +
{base.model.name}
diff --git a/src/renderer/src/pages/knowledge/__tests__/AdvancedSettingsPanel.test.tsx b/src/renderer/src/pages/knowledge/__tests__/AdvancedSettingsPanel.test.tsx index 8bb50c250..053936899 100644 --- a/src/renderer/src/pages/knowledge/__tests__/AdvancedSettingsPanel.test.tsx +++ b/src/renderer/src/pages/knowledge/__tests__/AdvancedSettingsPanel.test.tsx @@ -25,7 +25,7 @@ const mocks = vi.hoisted(() => { } }) -vi.mock('@renderer/components/TooltipIcons', () => ({ +vi.mock('@cherrystudio/ui', () => ({ InfoTooltip: ({ title }: { title: string }) =>
{mocks.i18n.t(title)}
})) @@ -36,7 +36,10 @@ vi.mock('react-i18next', () => ({ })) vi.mock('lucide-react', () => ({ - TriangleAlert: () => warning + TriangleAlert: () => warning, + CheckIcon: () => check, + CircleXIcon: () => error, + AlertTriangleIcon: () => alert })) vi.mock('antd', () => ({ diff --git a/src/renderer/src/pages/knowledge/__tests__/GeneralSettingsPanel.test.tsx b/src/renderer/src/pages/knowledge/__tests__/GeneralSettingsPanel.test.tsx index 64c566ac2..95d1f8e6b 100644 --- a/src/renderer/src/pages/knowledge/__tests__/GeneralSettingsPanel.test.tsx +++ b/src/renderer/src/pages/knowledge/__tests__/GeneralSettingsPanel.test.tsx @@ -31,10 +31,10 @@ const mocks = vi.hoisted(() => ({ })) // Mock InfoTooltip component -vi.mock('@renderer/components/TooltipIcons', () => ({ +vi.mock('@cherrystudio/ui', () => ({ InfoTooltip: ({ title, placement }: { title: string; placement: string }) => ( - - ℹ️ + + {title} ) })) diff --git a/src/renderer/src/pages/knowledge/__tests__/__snapshots__/AdvancedSettingsPanel.test.tsx.snap b/src/renderer/src/pages/knowledge/__tests__/__snapshots__/AdvancedSettingsPanel.test.tsx.snap index 20daa4a4e..4dca9d125 100644 --- a/src/renderer/src/pages/knowledge/__tests__/__snapshots__/AdvancedSettingsPanel.test.tsx.snap +++ b/src/renderer/src/pages/knowledge/__tests__/__snapshots__/AdvancedSettingsPanel.test.tsx.snap @@ -27,9 +27,7 @@ exports[`AdvancedSettingsPanel > basic rendering > should match snapshot 1`] = ` class="settings-label" > 分块大小 -
- knowledge.chunk_size_tooltip -
+
basic rendering > should match snapshot 1`] = ` class="settings-label" > 分块重叠 -
- knowledge.chunk_overlap_tooltip -
+
basic rendering > should match snapshot 1`] = ` class="settings-label" > 检索相似度阈值 -
- knowledge.threshold_tooltip -
+
basic rendering > should match snapshot 1`] = ` - ℹ️ - + />
basic rendering > should match snapshot 1`] = ` - ℹ️ - + />
basic rendering > should match snapshot 1`] = ` - ℹ️ - + /> = ({ textTo return ( - + handleCopy(textToCopy)}> diff --git a/src/renderer/src/pages/knowledge/components/KnowledgeSettings/AdvancedSettingsPanel.tsx b/src/renderer/src/pages/knowledge/components/KnowledgeSettings/AdvancedSettingsPanel.tsx index 03b6d1b4e..788155b27 100644 --- a/src/renderer/src/pages/knowledge/components/KnowledgeSettings/AdvancedSettingsPanel.tsx +++ b/src/renderer/src/pages/knowledge/components/KnowledgeSettings/AdvancedSettingsPanel.tsx @@ -1,4 +1,4 @@ -import { InfoTooltip } from '@renderer/components/TooltipIcons' +import { InfoTooltip } from '@cherrystudio/ui' import type { KnowledgeBase } from '@renderer/types' import { Alert, InputNumber } from 'antd' import { TriangleAlert } from 'lucide-react' @@ -24,7 +24,7 @@ const AdvancedSettingsPanel: React.FC = ({ newBase,
{t('knowledge.chunk_size')} - +
= ({ newBase,
{t('knowledge.chunk_overlap')} - +
= ({ newBase,
{t('knowledge.threshold')} - +
= ({
{t('settings.tool.preprocess.title')} - +
= ({ Options }) => { {t('paintings.auto_create_paint')} - - - + onChangeAutoCreate(checked)} /> @@ -1103,18 +1096,6 @@ const ToolbarMenu = styled.div` align-items: center; gap: 6px; ` -const InfoIcon = styled(Info)` - margin-left: 5px; - cursor: help; - color: var(--color-text-2); - opacity: 0.6; - width: 16px; - height: 16px; - - &:hover { - opacity: 1; - } -` const SliderContainer = styled.div` display: flex; diff --git a/src/renderer/src/pages/paintings/SiliconPage.tsx b/src/renderer/src/pages/paintings/SiliconPage.tsx index 442f7b310..f13282ad8 100644 --- a/src/renderer/src/pages/paintings/SiliconPage.tsx +++ b/src/renderer/src/pages/paintings/SiliconPage.tsx @@ -1,7 +1,5 @@ import { PlusOutlined, RedoOutlined } from '@ant-design/icons' -import { ColFlex, RowFlex } from '@cherrystudio/ui' -import { Switch } from '@cherrystudio/ui' -import { Button } from '@cherrystudio/ui' +import { Button, ColFlex, InfoTooltip, RowFlex, Switch } from '@cherrystudio/ui' import { useCache } from '@data/hooks/useCache' import { usePreference } from '@data/hooks/usePreference' import { loggerService } from '@logger' @@ -26,9 +24,8 @@ import FileManager from '@renderer/services/FileManager' import { translateText } from '@renderer/services/TranslateService' import type { FileMetadata, Painting } from '@renderer/types' import { getErrorMessage, uuid } from '@renderer/utils' -import { Input, InputNumber, Radio, Select, Slider, Tooltip } from 'antd' +import { Input, InputNumber, Radio, Select, Slider } from 'antd' import TextArea from 'antd/es/input/TextArea' -import { Info } from 'lucide-react' import type { FC } from 'react' import { useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -407,9 +404,7 @@ const SiliconPage: FC<{ Options: string[] }> = ({ Options }) => { {t('paintings.number_images')} - - - + = ({ Options }) => { {t('paintings.seed')} - - - + = ({ Options }) => { {t('paintings.inference_steps')} - - - + updatePaintingState({ steps: v })} /> @@ -453,9 +444,7 @@ const SiliconPage: FC<{ Options: string[] }> = ({ Options }) => { {t('paintings.guidance_scale')} - - - + = ({ Options }) => { {t('paintings.negative_prompt')} - - - +