diff --git a/web/package.json b/web/package.json index e5c71d7f..fd367479 100644 --- a/web/package.json +++ b/web/package.json @@ -18,24 +18,26 @@ "preview": "vite preview" }, "dependencies": { - "@emotion/react": "^11.14.0", - "@mantine/carousel": "^8.3.12", - "@mantine/charts": "^8.3.12", - "@mantine/code-highlight": "^8.3.12", - "@mantine/core": "^8.3.12", - "@mantine/dates": "^8.3.12", - "@mantine/dropzone": "^8.3.12", - "@mantine/hooks": "^8.3.12", - "@mantine/modals": "^8.3.12", - "@mantine/notifications": "^8.3.12", - "@mantine/nprogress": "^8.3.12", - "@mantine/spotlight": "^8.3.12", - "@mantine/tiptap": "^8.3.12", + "@floating-ui/dom": "^1.8.0", + "@mantine/carousel": "^9.5.0", + "@mantine/charts": "^9.5.0", + "@mantine/code-highlight": "^9.5.0", + "@mantine/core": "^9.5.0", + "@mantine/dates": "^9.5.0", + "@mantine/dropzone": "^9.5.0", + "@mantine/hooks": "^9.5.0", + "@mantine/modals": "^9.5.0", + "@mantine/notifications": "^9.5.0", + "@mantine/nprogress": "^9.5.0", + "@mantine/spotlight": "^9.5.0", + "@mantine/tiptap": "^9.5.0", + "@phosphor-icons/react": "^2.1.10", "@tanstack/react-virtual": "^3.13.18", - "@tiptap/extension-link": "^3.15.3", - "@tiptap/pm": "^3.15.3", - "@tiptap/react": "^3.15.3", - "@tiptap/starter-kit": "^3.15.3", + "@tiptap/core": "^3.29.2", + "@tiptap/extension-link": "^3.29.2", + "@tiptap/pm": "^3.29.2", + "@tiptap/react": "^3.29.2", + "@tiptap/starter-kit": "^3.29.2", "@xyflow/react": "^12.10.0", "autoprefixer": "^10.4.23", "axios": "^1.13.2", @@ -44,20 +46,20 @@ "effector": "^23.4.4", "effector-react": "^23.3.0", "elkjs": "^0.11.1", - "embla-carousel": "8.5.2", - "embla-carousel-react": "8.5.2", + "embla-carousel": "^8.6.0", + "embla-carousel-react": "^8.6.0", "handlebars": "^4.7.8", "i18next": "^25.8.4", "immer": "^11.1.3", "patronum": "^2.3.0", "postcss": "^8.5.6", - "react": "^19.2.3", - "react-dom": "^19.2.3", + "react": "^19.2.8", + "react-dom": "^19.2.8", "react-hook-form": "^7.71.1", "react-i18next": "^16.5.4", - "react-icons": "^5.5.0", + "react-is": "^19.2.8", "react-markdown": "^10.1.0", - "recharts": "^3.6.0", + "recharts": "^3.10.1", "rehype-raw": "^7.0.0", "rehype-sanitize": "^6.0.0", "remark-breaks": "^4.0.0", @@ -68,7 +70,7 @@ }, "devDependencies": { "@eslint/js": "^9.39.2", - "@types/react": "^19.2.8", + "@types/react": "^19.2.17", "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.2", "eslint": "^9.39.2", diff --git a/web/src/features/auth/account-chooser.tsx b/web/src/features/auth/account-chooser.tsx index 874c0c2f..4893bb8d 100644 --- a/web/src/features/auth/account-chooser.tsx +++ b/web/src/features/auth/account-chooser.tsx @@ -12,7 +12,8 @@ import { } from '@mantine/core'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { LuCheck, LuChevronRight, LuKeyRound } from 'react-icons/lu'; + +import { CheckIcon, CaretRightIcon, KeyIcon } from '@ui/icons'; import type { AuthUser } from '../../api/auth'; @@ -88,7 +89,7 @@ export function AccountChooser({ {account.displayName} {current && ( - }> + }> {t('auth.chooser.current')} )} @@ -98,18 +99,18 @@ export function AccountChooser({ {account.hasPassword ? ( - ) : ( - + )} - + {error && ( - }> + }> {error} )} - }> + }> {t('auth.accounts.tabs.account')} - }> + }> {t('auth.accounts.tabs.security')} {status.user?.role === 'admin' && ( - }> + }> {t('auth.accounts.tabs.users')} )} diff --git a/web/src/features/auth/account-overview-section.tsx b/web/src/features/auth/account-overview-section.tsx index 68cf9da4..1c4732df 100644 --- a/web/src/features/auth/account-overview-section.tsx +++ b/web/src/features/auth/account-overview-section.tsx @@ -10,7 +10,8 @@ import { } from '@mantine/core'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { LuLogOut, LuRefreshCw } from 'react-icons/lu'; + +import { SignOutIcon, ArrowsClockwiseIcon } from '@ui/icons'; import { AccountChooser } from './account-chooser'; import { AuthCredentialsForm } from './auth-credentials-form'; @@ -78,7 +79,7 @@ export function AccountOverviewSection({ {status.mode === 'public' && !manualSwitch && ( )} - - - diff --git a/web/src/features/sidebars/operation-profiles/operation-profile-blocks-editor.tsx b/web/src/features/sidebars/operation-profiles/operation-profile-blocks-editor.tsx index 077b5b3a..aa68f108 100644 --- a/web/src/features/sidebars/operation-profiles/operation-profile-blocks-editor.tsx +++ b/web/src/features/sidebars/operation-profiles/operation-profile-blocks-editor.tsx @@ -3,10 +3,10 @@ import { useUnit } from 'effector-react'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { FormProvider, useFieldArray, useForm, useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { LuArrowDown, LuArrowUp, LuPencil, LuPlus, LuTrash2 } from 'react-icons/lu'; import { v4 as uuidv4 } from 'uuid'; import { updateOperationProfileFx } from '@model/operation-profiles'; +import { ArrowDownIcon, ArrowUpIcon, PencilSimpleIcon, PlusIcon, TrashIcon } from '@ui/icons'; import { ProfileSettingsPanel } from './ui/profile-settings-panel'; @@ -127,7 +127,7 @@ export const OperationProfileBlocksEditor: React.FC = ({ profile, blocks, style={{ flex: 1 }} /> - diff --git a/web/src/features/sidebars/operation-profiles/ui/entity-actions-menu.tsx b/web/src/features/sidebars/operation-profiles/ui/entity-actions-menu.tsx index 5e261a00..188b2660 100644 --- a/web/src/features/sidebars/operation-profiles/ui/entity-actions-menu.tsx +++ b/web/src/features/sidebars/operation-profiles/ui/entity-actions-menu.tsx @@ -1,8 +1,8 @@ import { ActionIcon, Button, Group, Menu } from '@mantine/core'; import React, { useRef } from 'react'; -import { LuCopyPlus, LuEllipsis, LuPlus, LuTrash2 } from 'react-icons/lu'; import { EXPORT_FILE_ICON, IMPORT_FILE_ICON } from '@ui/file-transfer-icons'; +import { CopyIcon, DotsThreeIcon, PlusIcon, TrashIcon } from '@ui/icons'; import { toaster } from '@ui/toaster'; type Selection = { id: string; name: string } | null; @@ -51,18 +51,18 @@ export const EntityActionsMenu: React.FC = ({ return ( - - + } + leftSection={} disabled={!selected} onClick={() => selected && onDuplicate(selected.id)} > @@ -88,7 +88,7 @@ export const EntityActionsMenu: React.FC = ({ } + leftSection={} disabled={!selected} onClick={() => { if (!selected || !window.confirm(labels.confirmRemove)) return; diff --git a/web/src/features/sidebars/operation-profiles/ui/operation-editor/operation-editor.tsx b/web/src/features/sidebars/operation-profiles/ui/operation-editor/operation-editor.tsx index 4785369d..8079486d 100644 --- a/web/src/features/sidebars/operation-profiles/ui/operation-editor/operation-editor.tsx +++ b/web/src/features/sidebars/operation-profiles/ui/operation-editor/operation-editor.tsx @@ -2,10 +2,11 @@ import { Badge, Button, Group, Select, Stack, Text } from '@mantine/core'; import React, { memo } from 'react'; import { useController, useFormContext, useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { LuTrash2 } from 'react-icons/lu'; + import { FormInput } from '@ui/form-components'; import { IconButtonWithTooltip } from '@ui/icon-button-with-tooltip'; +import { TrashIcon } from '@ui/icons'; import { TOOLTIP_PORTAL_SETTINGS } from '@ui/z-index'; import { makeDefaultGuardKindParams, type FormGuardKindParams } from '../../form/guard-kind-form'; @@ -103,7 +104,7 @@ export const OperationEditor: React.FC = memo(({ index, title, status, ca } + icon={} colorPalette="red" size="input-sm" variant="ghost" diff --git a/web/src/features/sidebars/operation-profiles/ui/operation-list.tsx b/web/src/features/sidebars/operation-profiles/ui/operation-list.tsx index f7e44839..aeb3d2d6 100644 --- a/web/src/features/sidebars/operation-profiles/ui/operation-list.tsx +++ b/web/src/features/sidebars/operation-profiles/ui/operation-list.tsx @@ -4,7 +4,8 @@ import { useVirtualizer } from '@tanstack/react-virtual'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { LuPlus, LuSearch, LuSlidersHorizontal } from 'react-icons/lu'; + +import { PlusIcon, MagnifyingGlassIcon, SlidersHorizontalIcon } from '@ui/icons'; import { isOperationKind } from '../utils/operation-kind'; @@ -190,7 +191,7 @@ export const OperationList: React.FC = ({ - @@ -201,7 +202,7 @@ export const OperationList: React.FC = ({ value={filters.query} onChange={(event) => setFilters((prev) => ({ ...prev, query: event.currentTarget.value }))} placeholder={t('operationProfiles.filters.searchPlaceholder')} - leftSection={} + leftSection={} aria-label={t('operationProfiles.filters.searchAria')} style={{ flex: 1 }} /> @@ -210,7 +211,7 @@ export const OperationList: React.FC = ({ @@ -90,7 +91,7 @@ export const OperationWorkspace: React.FC = ({ return (
- diff --git a/web/src/features/sidebars/operation-profiles/ui/profile-settings-panel.tsx b/web/src/features/sidebars/operation-profiles/ui/profile-settings-panel.tsx index d72cafb1..13eaa672 100644 --- a/web/src/features/sidebars/operation-profiles/ui/profile-settings-panel.tsx +++ b/web/src/features/sidebars/operation-profiles/ui/profile-settings-panel.tsx @@ -2,10 +2,11 @@ import { Collapse, Stack, Text, UnstyledButton } from '@mantine/core'; import React from 'react'; import { useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { LuChevronDown, LuRotateCcw } from 'react-icons/lu'; + import { FormInput, FormSelect, FormSwitch } from '@ui/form-components'; import { IconButtonWithTooltip } from '@ui/icon-button-with-tooltip'; +import { CaretDownIcon, ArrowCounterClockwiseIcon } from '@ui/icons'; import { TOOLTIP_PORTAL_SETTINGS } from '@ui/z-index'; type Props = { @@ -37,7 +38,7 @@ export const ProfileSettingsPanel: React.FC = ({ blockCount, onResetSessi aria-expanded={opened} >
- + {profileName} @@ -57,7 +58,7 @@ export const ProfileSettingsPanel: React.FC = ({ blockCount, onResetSessi
- +
@@ -91,7 +92,7 @@ export const ProfileSettingsPanel: React.FC = ({ blockCount, onResetSessi } + icon={} size="input-sm" variant="ghost" tooltipSettings={TOOLTIP_PORTAL_SETTINGS} diff --git a/web/src/features/sidebars/operation-profiles/ui/run-trace-panel.tsx b/web/src/features/sidebars/operation-profiles/ui/run-trace-panel.tsx index ce0388e3..7d42d415 100644 --- a/web/src/features/sidebars/operation-profiles/ui/run-trace-panel.tsx +++ b/web/src/features/sidebars/operation-profiles/ui/run-trace-panel.tsx @@ -2,10 +2,11 @@ import { Badge, Button, Collapse, Group, Loader, Paper, Stack, Text, UnstyledBut import { useUnit } from 'effector-react'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { LuActivity, LuChevronDown, LuChevronRight, LuCircleCheck, LuCircleMinus, LuCircleX, LuMessageCircle } from 'react-icons/lu'; + import { $lastRunTrace } from '@model/operation-run-trace'; import { toggleSidebarOpen } from '@model/sidebars'; +import { PulseIcon, CaretDownIcon, CaretRightIcon, CheckCircleIcon, MinusCircleIcon, XCircleIcon, ChatCircleIcon } from '@ui/icons'; import { describeDestination, describeOperationSummary, runStatusColor } from './run-trace-summary'; @@ -15,9 +16,9 @@ const HOOK_ORDER = ['before_main_llm', 'after_main_llm']; const StatusIcon: React.FC<{ status: TraceOperation['status'] }> = ({ status }) => { if (status === 'running') return ; - if (status === 'done') return ; - if (status === 'skipped') return ; - return ; + if (status === 'done') return ; + if (status === 'skipped') return ; + return ; }; const OperationRow: React.FC<{ trace: RunTrace; op: TraceOperation }> = ({ trace, op }) => { @@ -55,13 +56,13 @@ const OperationRow: React.FC<{ trace: RunTrace; op: TraceOperation }> = ({ trace {hasDetails && ( - {opened ? : } + {opened ? : } )} - + {op.errorMessage && ( @@ -113,7 +114,7 @@ export const RunTracePanel: React.FC = () => { return (
- +
@@ -128,7 +129,7 @@ export const RunTracePanel: React.FC = () => { @@ -126,7 +127,7 @@ export const RagConnectionEditor: React.FC = ({ {modelId ? {modelId} : null} - + diff --git a/web/src/features/sidebars/settings/rag-settings-tab.tsx b/web/src/features/sidebars/settings/rag-settings-tab.tsx index fb4cec43..ffa0279b 100644 --- a/web/src/features/sidebars/settings/rag-settings-tab.tsx +++ b/web/src/features/sidebars/settings/rag-settings-tab.tsx @@ -3,9 +3,9 @@ import { useUnit } from 'effector-react'; import { useEffect, useRef, useState } from 'react'; import { FormProvider, useForm, useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { LuRotateCcw } from 'react-icons/lu'; import { ragProviderModel } from '@model/rag-provider'; +import { ArrowCounterClockwiseIcon } from '@ui/icons'; import { toaster } from '@ui/toaster'; import { LlmDisclosureSection } from '../../llm-provider/llm-disclosure-section'; @@ -249,7 +249,7 @@ export const RagSettingsTab = () => { ) : null} -