From 8e37bdf34291b956e7574c7e8525de99c7c6ae89 Mon Sep 17 00:00:00 2001 From: jZonG Date: Tue, 15 Apr 2025 17:38:55 +0800 Subject: [PATCH 1/8] feat: add theme switcher --- web/app/components/base/theme-selector.tsx | 97 +++++++++++++++++++ web/app/components/base/theme-switcher.tsx | 58 +++++++++++ .../header/account-dropdown/index.tsx | 15 ++- .../share/text-generation/menu-dropdown.tsx | 9 ++ web/app/layout.tsx | 3 +- web/app/signin/_header.tsx | 29 +++--- web/i18n/en-US/common.ts | 6 ++ web/i18n/ja-JP/common.ts | 6 ++ web/i18n/zh-Hans/common.ts | 6 ++ 9 files changed, 214 insertions(+), 15 deletions(-) create mode 100644 web/app/components/base/theme-selector.tsx create mode 100644 web/app/components/base/theme-switcher.tsx diff --git a/web/app/components/base/theme-selector.tsx b/web/app/components/base/theme-selector.tsx new file mode 100644 index 0000000000..8dfe1d2602 --- /dev/null +++ b/web/app/components/base/theme-selector.tsx @@ -0,0 +1,97 @@ +'use client' + +import { useState } from 'react' +import { + RiCheckLine, + RiComputerLine, + RiMoonLine, + RiSunLine, +} from '@remixicon/react' +import { useTranslation } from 'react-i18next' +import { useTheme } from 'next-themes' +import ActionButton from '@/app/components/base/action-button' +import { + PortalToFollowElem, + PortalToFollowElemContent, + PortalToFollowElemTrigger, +} from '@/app/components/base/portal-to-follow-elem' + +export type Theme = 'light' | 'dark' | 'system' + +export default function ThemeSelector() { + const { t } = useTranslation() + const { theme, setTheme } = useTheme() + const [open, setOpen] = useState(false) + + const handleThemeChange = (newTheme: Theme) => { + setTheme(newTheme) + setOpen(false) + } + + const getCurrentIcon = () => { + switch (theme) { + case 'light': return + case 'dark': return + default: return + } + } + + return ( + + setOpen(!open)} + > + + {getCurrentIcon()} + + + +
+ + + +
+ + + ) +} diff --git a/web/app/components/base/theme-switcher.tsx b/web/app/components/base/theme-switcher.tsx new file mode 100644 index 0000000000..902d064a66 --- /dev/null +++ b/web/app/components/base/theme-switcher.tsx @@ -0,0 +1,58 @@ +'use client' +import { + RiComputerLine, + RiMoonLine, + RiSunLine, +} from '@remixicon/react' +import { useTheme } from 'next-themes' +import cn from '@/utils/classnames' + +export type Theme = 'light' | 'dark' | 'system' + +export default function ThemeSwitcher() { + const { theme, setTheme } = useTheme() + + const handleThemeChange = (newTheme: Theme) => { + setTheme(newTheme) + } + + return ( +
+
handleThemeChange('system')} + > +
+ +
+
+
+
handleThemeChange('light')} + > +
+ +
+
+
+
handleThemeChange('dark')} + > +
+ +
+
+
+ ) +} diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx index 66b61d7ec1..88bee4dd51 100644 --- a/web/app/components/header/account-dropdown/index.tsx +++ b/web/app/components/header/account-dropdown/index.tsx @@ -14,6 +14,7 @@ import { RiMap2Line, RiSettings3Line, RiStarLine, + RiTShirt2Line, } from '@remixicon/react' import Link from 'next/link' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' @@ -25,6 +26,7 @@ import Compliance from './compliance' import PremiumBadge from '@/app/components/base/premium-badge' import I18n from '@/context/i18n' import Avatar from '@/app/components/base/avatar' +import ThemeSwitcher from '@/app/components/base/theme-switcher' import { logout } from '@/service/common' import AppContext, { useAppContext } from '@/context/app-context' import { useProviderContext } from '@/context/provider-context' @@ -83,8 +85,8 @@ export default function AppSelector() { @@ -189,6 +191,15 @@ export default function AppSelector() { ) } + +
+
+ +
{t('common.theme.theme')}
+ +
+
+
handleLogout()}>
= ({
+
+
+
{t('common.theme.theme')}
+ +
+
+
{data?.privacy_policy && ( diff --git a/web/app/layout.tsx b/web/app/layout.tsx index 6b5618f217..2143c4b0a3 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -60,8 +60,7 @@ const LocaleLayout = async ({ diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx index c7b1e67092..d2e3236d1d 100644 --- a/web/app/signin/_header.tsx +++ b/web/app/signin/_header.tsx @@ -2,6 +2,8 @@ import React from 'react' import { useContext } from 'use-context-selector' import Select from '@/app/components/base/select/locale' +import ThemeSelector from '@/app/components/base/theme-selector' +import Divider from '@/app/components/base/divider' import { languages } from '@/i18n/language' import type { Locale } from '@/i18n' import I18n from '@/context/i18n' @@ -10,17 +12,22 @@ import LogoSite from '@/app/components/base/logo/logo-site' const Header = () => { const { locale, setLocaleOnClient } = useContext(I18n) - return
- - item.supported)} + onChange={(value) => { + setLocaleOnClient(value as Locale) + }} + /> + + +
+
+ ) } export default Header diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts index 0811ba73ff..66949f7276 100644 --- a/web/i18n/en-US/common.ts +++ b/web/i18n/en-US/common.ts @@ -1,4 +1,10 @@ const translation = { + theme: { + theme: 'Theme', + light: 'light', + dark: 'dark', + auto: 'system', + }, api: { success: 'Success', actionSuccess: 'Action succeeded', diff --git a/web/i18n/ja-JP/common.ts b/web/i18n/ja-JP/common.ts index 8a47801f58..1c31359485 100644 --- a/web/i18n/ja-JP/common.ts +++ b/web/i18n/ja-JP/common.ts @@ -1,4 +1,10 @@ const translation = { + theme: { + theme: 'テーマ', + light: '明るい', + dark: '暗い', + auto: 'システム', + }, api: { success: '成功', actionSuccess: 'アクションが成功しました', diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts index 9c822885e0..c2d43e21a0 100644 --- a/web/i18n/zh-Hans/common.ts +++ b/web/i18n/zh-Hans/common.ts @@ -1,4 +1,10 @@ const translation = { + theme: { + theme: '主题', + light: '浅色', + dark: '深色', + auto: '自动', + }, api: { success: '成功', actionSuccess: '操作成功', From 7f3fc0948da4079c4ee8221b870e447645d0327e Mon Sep 17 00:00:00 2001 From: jZonG Date: Wed, 16 Apr 2025 15:12:52 +0800 Subject: [PATCH 2/8] fix: style of category in explore --- web/app/components/explore/category.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx index 4456131600..51daaa95dd 100644 --- a/web/app/components/explore/category.tsx +++ b/web/app/components/explore/category.tsx @@ -31,8 +31,8 @@ const Category: FC = ({ const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn const itemClassName = (isSelected: boolean) => cn( - 'flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] font-medium leading-[18px] text-gray-700 hover:bg-gray-200', - isSelected && 'border-gray-200 bg-white text-primary-600 shadow-xs hover:bg-white', + 'flex h-[32px] cursor-pointer items-center rounded-lg border-[0.5px] border-transparent px-3 py-[7px] font-medium leading-[18px] text-text-tertiary hover:bg-components-main-nav-nav-button-bg-active', + isSelected && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text-active shadow-xs', ) return ( @@ -50,7 +50,7 @@ const Category: FC = ({ className={itemClassName(name === value)} onClick={() => onChange(name)} > - {categoryI18n[name] ? t(`explore.category.${name}`) : name} + {(categoryI18n as any)[name] ? t(`explore.category.${name}`) : name}
))}
From ae144a8dc6667973844a9007a86d0223d823d4cf Mon Sep 17 00:00:00 2001 From: JzoNg Date: Mon, 21 Apr 2025 10:46:10 +0800 Subject: [PATCH 3/8] fix: style of var input --- .../plugin-detail-panel/tool-selector/reasoning-config-form.tsx | 2 +- .../workflow/nodes/tool/components/input-var-list.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx index 0d137502f4..750a8cfff6 100644 --- a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx +++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx @@ -183,7 +183,7 @@ const ReasoningConfigForm: React.FC = ({ <> {isString && ( = ({
{isString && ( Date: Mon, 21 Apr 2025 10:57:10 +0800 Subject: [PATCH 4/8] fix: style of end node --- web/app/components/workflow/nodes/end/node.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/components/workflow/nodes/end/node.tsx b/web/app/components/workflow/nodes/end/node.tsx index e0c5604391..6906e0f77c 100644 --- a/web/app/components/workflow/nodes/end/node.tsx +++ b/web/app/components/workflow/nodes/end/node.tsx @@ -52,7 +52,7 @@ const Node: FC> = ({ isChatMode, }) return ( -
+
{!isEnv && !isChatVar && ( <> From e114334c18646584cd791cf901925a45dc64168e Mon Sep 17 00:00:00 2001 From: JzoNg Date: Mon, 21 Apr 2025 11:14:56 +0800 Subject: [PATCH 5/8] fix: style of api-key generate modal --- .../develop/secret-key/input-copy.tsx | 21 ++++--------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/web/app/components/develop/secret-key/input-copy.tsx b/web/app/components/develop/secret-key/input-copy.tsx index bb6b4653b5..982c63f620 100644 --- a/web/app/components/develop/secret-key/input-copy.tsx +++ b/web/app/components/develop/secret-key/input-copy.tsx @@ -2,20 +2,18 @@ import React, { useEffect, useState } from 'react' import copy from 'copy-to-clipboard' import { t } from 'i18next' -import s from './style.module.css' import Tooltip from '@/app/components/base/tooltip' +import CopyFeedback from '@/app/components/base/copy-feedback' type IInputCopyProps = { value?: string className?: string - readOnly?: boolean children?: React.ReactNode } const InputCopy = ({ value = '', className, - readOnly = true, children, }: IInputCopyProps) => { const [isCopied, setIsCopied] = useState(false) @@ -45,23 +43,12 @@ const InputCopy = ({ popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`} position='bottom' > - {value} + {value}
-
- -
-
{ - copy(value) - setIsCopied(true) - }}> -
-
- +
+
) From c8f90b9976fa53dd06bf0d68076a101d3ecd96f8 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Mon, 21 Apr 2025 11:25:13 +0800 Subject: [PATCH 6/8] fix: theme change of api page --- web/app/(commonLayout)/datasets/Doc.tsx | 2 +- web/app/components/develop/doc.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/app/(commonLayout)/datasets/Doc.tsx b/web/app/(commonLayout)/datasets/Doc.tsx index 20264ce8ad..efdfe157f2 100644 --- a/web/app/(commonLayout)/datasets/Doc.tsx +++ b/web/app/(commonLayout)/datasets/Doc.tsx @@ -121,7 +121,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => { )}
-
+
{Template}
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx index deda6dc8b8..1a4f4661f0 100644 --- a/web/app/components/develop/doc.tsx +++ b/web/app/components/develop/doc.tsx @@ -121,7 +121,7 @@ const Doc = ({ appDetail }: IDocProps) => { )} -
+
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && ( (() => { switch (locale) { From 1145608495cf445c4dc84b2bb176920b8389beb4 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Mon, 21 Apr 2025 11:58:41 +0800 Subject: [PATCH 7/8] fix: collapse icon style of document detail --- .../assets/vender/line/editor/collapse.svg | 9 +++ .../src/vender/line/editor/Collapse.json | 62 +++++++++++++++++++ .../icons/src/vender/line/editor/Collapse.tsx | 20 ++++++ .../icons/src/vender/line/editor/index.ts | 1 + .../detail/completed/display-toggle.tsx | 2 +- 5 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 web/app/components/base/icons/assets/vender/line/editor/collapse.svg create mode 100644 web/app/components/base/icons/src/vender/line/editor/Collapse.json create mode 100644 web/app/components/base/icons/src/vender/line/editor/Collapse.tsx diff --git a/web/app/components/base/icons/assets/vender/line/editor/collapse.svg b/web/app/components/base/icons/assets/vender/line/editor/collapse.svg new file mode 100644 index 0000000000..b54e046085 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/editor/collapse.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/app/components/base/icons/src/vender/line/editor/Collapse.json b/web/app/components/base/icons/src/vender/line/editor/Collapse.json new file mode 100644 index 0000000000..5e3cf08ce0 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/editor/Collapse.json @@ -0,0 +1,62 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "16", + "height": "16", + "viewBox": "0 0 16 16", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "Icon L" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "Vector" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M2.66602 11.3333H0.666016L3.33268 8.66667L5.99935 11.3333H3.99935L3.99935 14H2.66602L2.66602 11.3333Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M2.66602 4.66667L2.66602 2L3.99935 2L3.99935 4.66667L5.99935 4.66667L3.33268 7.33333L0.666016 4.66667L2.66602 4.66667Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M7.33268 2.66667H13.9993V4H7.33268V2.66667ZM7.33268 12H13.9993V13.3333H7.33268V12ZM5.99935 7.33333H13.9993V8.66667H5.99935V7.33333Z", + "fill": "currentColor" + }, + "children": [] + } + ] + } + ] + } + ] + }, + "name": "Collapse" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/editor/Collapse.tsx b/web/app/components/base/icons/src/vender/line/editor/Collapse.tsx new file mode 100644 index 0000000000..6f43dde272 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/editor/Collapse.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './Collapse.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconData } from '@/app/components/base/icons/IconBase' + +const Icon = ( + { + ref, + ...props + }: React.SVGProps & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'Collapse' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/editor/index.ts b/web/app/components/base/icons/src/vender/line/editor/index.ts index f571be03c6..b31c42e390 100644 --- a/web/app/components/base/icons/src/vender/line/editor/index.ts +++ b/web/app/components/base/icons/src/vender/line/editor/index.ts @@ -1,5 +1,6 @@ export { default as AlignLeft } from './AlignLeft' export { default as BezierCurve03 } from './BezierCurve03' +export { default as Collapse } from './Collapse' export { default as Colors } from './Colors' export { default as ImageIndentLeft } from './ImageIndentLeft' export { default as LeftIndent02 } from './LeftIndent02' diff --git a/web/app/components/datasets/documents/detail/completed/display-toggle.tsx b/web/app/components/datasets/documents/detail/completed/display-toggle.tsx index b5da72c603..24e0be15a1 100644 --- a/web/app/components/datasets/documents/detail/completed/display-toggle.tsx +++ b/web/app/components/datasets/documents/detail/completed/display-toggle.tsx @@ -2,7 +2,7 @@ import React, { type FC } from 'react' import { useTranslation } from 'react-i18next' import { RiLineHeight } from '@remixicon/react' import Tooltip from '@/app/components/base/tooltip' -import { Collapse } from '@/app/components/base/icons/src/public/knowledge' +import { Collapse } from '@/app/components/base/icons/src/vender/line/editor' type DisplayToggleProps = { isCollapsed: boolean From b37fe9a02464e457de4bbc57599460b13351060b Mon Sep 17 00:00:00 2001 From: JzoNg Date: Mon, 21 Apr 2025 14:01:40 +0800 Subject: [PATCH 8/8] fix: style of DSL import --- .../app/create-from-dsl-modal/index.tsx | 2 +- .../app/create-from-dsl-modal/uploader.tsx | 22 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx index c1df10ed64..9739ac47ea 100644 --- a/web/app/components/app/create-from-dsl-modal/index.tsx +++ b/web/app/components/app/create-from-dsl-modal/index.tsx @@ -262,7 +262,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS { currentTab === CreateFromDSLModalTab.FROM_URL && (
-
DSL URL
+
DSL URL
= ({ />
{!file && ( -
+
- -
+ +
{t('datasetCreation.stepOne.uploader.button')} - {t('datasetDocuments.list.batchModal.browse')} + {t('datasetDocuments.list.batchModal.browse')}
{dragging &&
}
)} {file && ( -
+
@@ -126,12 +126,10 @@ const Uploader: FC = ({ {formatFileSize(file.size)}
-
- -
-
+
+ -
+
)}