mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-07-12 01:21:49 +08:00
Merge branch 'feat/theme-switch' into deploy/dev
This commit is contained in:
commit
a1ae8b9ef8
@ -121,7 +121,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<article className={cn('prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12', theme === Theme.dark && 'dark:prose-invert')}>
|
<article className={cn('prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12', theme === Theme.dark && 'prose-invert')}>
|
||||||
{Template}
|
{Template}
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
@ -262,7 +262,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
|
|||||||
{
|
{
|
||||||
currentTab === CreateFromDSLModalTab.FROM_URL && (
|
currentTab === CreateFromDSLModalTab.FROM_URL && (
|
||||||
<div>
|
<div>
|
||||||
<div className='system-md-semibold leading6 mb-1'>DSL URL</div>
|
<div className='system-md-semibold mb-1 text-text-secondary'>DSL URL</div>
|
||||||
<Input
|
<Input
|
||||||
placeholder={t('app.importFromDSLUrlPlaceholder') || ''}
|
placeholder={t('app.importFromDSLUrlPlaceholder') || ''}
|
||||||
value={dslUrlValue}
|
value={dslUrlValue}
|
||||||
|
@ -3,6 +3,7 @@ import type { FC } from 'react'
|
|||||||
import React, { useEffect, useRef, useState } from 'react'
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
import {
|
import {
|
||||||
RiDeleteBinLine,
|
RiDeleteBinLine,
|
||||||
|
RiUploadCloud2Line,
|
||||||
} from '@remixicon/react'
|
} from '@remixicon/react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { useContext } from 'use-context-selector'
|
import { useContext } from 'use-context-selector'
|
||||||
@ -10,8 +11,7 @@ import { formatFileSize } from '@/utils/format'
|
|||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
|
import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
|
||||||
import { ToastContext } from '@/app/components/base/toast'
|
import { ToastContext } from '@/app/components/base/toast'
|
||||||
import { UploadCloud01 } from '@/app/components/base/icons/src/vender/line/general'
|
import ActionButton from '@/app/components/base/action-button'
|
||||||
import Button from '@/app/components/base/button'
|
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
file: File | undefined
|
file: File | undefined
|
||||||
@ -102,19 +102,19 @@ const Uploader: FC<Props> = ({
|
|||||||
/>
|
/>
|
||||||
<div ref={dropRef}>
|
<div ref={dropRef}>
|
||||||
{!file && (
|
{!file && (
|
||||||
<div className={cn('flex h-12 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}>
|
<div className={cn('flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
|
||||||
<div className='flex w-full items-center justify-center space-x-2'>
|
<div className='flex w-full items-center justify-center space-x-2'>
|
||||||
<UploadCloud01 className='mr-2 h-6 w-6' />
|
<RiUploadCloud2Line className='h-6 w-6 text-text-tertiary' />
|
||||||
<div className='text-gray-500'>
|
<div className='text-text-tertiary'>
|
||||||
{t('datasetCreation.stepOne.uploader.button')}
|
{t('datasetCreation.stepOne.uploader.button')}
|
||||||
<span className='cursor-pointer pl-1 text-[#155eef]' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
|
<span className='cursor-pointer pl-1 text-text-accent' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
|
{dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{file && (
|
{file && (
|
||||||
<div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}>
|
<div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', ' hover:bg-components-panel-on-panel-item-bg-hover')}>
|
||||||
<div className='flex items-center justify-center p-3'>
|
<div className='flex items-center justify-center p-3'>
|
||||||
<YamlIcon className="h-6 w-6 shrink-0" />
|
<YamlIcon className="h-6 w-6 shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
@ -126,12 +126,10 @@ const Uploader: FC<Props> = ({
|
|||||||
<span>{formatFileSize(file.size)}</span>
|
<span>{formatFileSize(file.size)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='hidden items-center group-hover:flex'>
|
<div className='hidden items-center pr-3 group-hover:flex'>
|
||||||
<Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
|
<ActionButton onClick={removeFile}>
|
||||||
<div className='mx-2 h-4 w-px bg-gray-200' />
|
|
||||||
<div className='cursor-pointer p-2' onClick={removeFile}>
|
|
||||||
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
|
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
|
||||||
</div>
|
</ActionButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -0,0 +1,9 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Icon L">
|
||||||
|
<g id="Vector">
|
||||||
|
<path d="M2.66602 11.3333H0.666016L3.33268 8.66667L5.99935 11.3333H3.99935L3.99935 14H2.66602L2.66602 11.3333Z" fill="#354052"/>
|
||||||
|
<path 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="#354052"/>
|
||||||
|
<path d="M7.33268 2.66667H13.9993V4H7.33268V2.66667ZM7.33268 12H13.9993V13.3333H7.33268V12ZM5.99935 7.33333H13.9993V8.66667H5.99935V7.33333Z" fill="#354052"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 579 B |
@ -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"
|
||||||
|
}
|
@ -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<SVGSVGElement> & {
|
||||||
|
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||||
|
},
|
||||||
|
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||||
|
|
||||||
|
Icon.displayName = 'Collapse'
|
||||||
|
|
||||||
|
export default Icon
|
@ -1,5 +1,6 @@
|
|||||||
export { default as AlignLeft } from './AlignLeft'
|
export { default as AlignLeft } from './AlignLeft'
|
||||||
export { default as BezierCurve03 } from './BezierCurve03'
|
export { default as BezierCurve03 } from './BezierCurve03'
|
||||||
|
export { default as Collapse } from './Collapse'
|
||||||
export { default as Colors } from './Colors'
|
export { default as Colors } from './Colors'
|
||||||
export { default as ImageIndentLeft } from './ImageIndentLeft'
|
export { default as ImageIndentLeft } from './ImageIndentLeft'
|
||||||
export { default as LeftIndent02 } from './LeftIndent02'
|
export { default as LeftIndent02 } from './LeftIndent02'
|
||||||
|
97
web/app/components/base/theme-selector.tsx
Normal file
97
web/app/components/base/theme-selector.tsx
Normal file
@ -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 <RiSunLine className='h-4 w-4 text-text-tertiary' />
|
||||||
|
case 'dark': return <RiMoonLine className='h-4 w-4 text-text-tertiary' />
|
||||||
|
default: return <RiComputerLine className='h-4 w-4 text-text-tertiary' />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PortalToFollowElem
|
||||||
|
open={open}
|
||||||
|
onOpenChange={setOpen}
|
||||||
|
placement='bottom-end'
|
||||||
|
offset={{ mainAxis: 6 }}
|
||||||
|
>
|
||||||
|
<PortalToFollowElemTrigger
|
||||||
|
onClick={() => setOpen(!open)}
|
||||||
|
>
|
||||||
|
<ActionButton
|
||||||
|
className={`h-8 w-8 p-[6px] ${open && 'bg-state-base-hover'}`}
|
||||||
|
>
|
||||||
|
{getCurrentIcon()}
|
||||||
|
</ActionButton>
|
||||||
|
</PortalToFollowElemTrigger>
|
||||||
|
<PortalToFollowElemContent className='z-[1000]'>
|
||||||
|
<div className='flex w-[144px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
|
||||||
|
<button
|
||||||
|
className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
|
||||||
|
onClick={() => handleThemeChange('light')}
|
||||||
|
>
|
||||||
|
<RiSunLine className='h-4 w-4 text-text-tertiary' />
|
||||||
|
<div className='flex grow items-center justify-start px-1'>
|
||||||
|
<span className='system-md-regular'>{t('common.theme.light')}</span>
|
||||||
|
</div>
|
||||||
|
{theme === 'light' && <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
|
||||||
|
<RiCheckLine className='h-4 w-4 text-text-accent' />
|
||||||
|
</div>}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
|
||||||
|
onClick={() => handleThemeChange('dark')}
|
||||||
|
>
|
||||||
|
<RiMoonLine className='h-4 w-4 text-text-tertiary' />
|
||||||
|
<div className='flex grow items-center justify-start px-1'>
|
||||||
|
<span className='system-md-regular'>{t('common.theme.dark')}</span>
|
||||||
|
</div>
|
||||||
|
{theme === 'dark' && <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
|
||||||
|
<RiCheckLine className='h-4 w-4 text-text-accent' />
|
||||||
|
</div>}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
|
||||||
|
onClick={() => handleThemeChange('system')}
|
||||||
|
>
|
||||||
|
<RiComputerLine className='h-4 w-4 text-text-tertiary' />
|
||||||
|
<div className='flex grow items-center justify-start px-1'>
|
||||||
|
<span className='system-md-regular'>{t('common.theme.auto')}</span>
|
||||||
|
</div>
|
||||||
|
{theme === 'system' && <div className='flex h-4 w-4 shrink-0 items-center justify-center'>
|
||||||
|
<RiCheckLine className='h-4 w-4 text-text-accent' />
|
||||||
|
</div>}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</PortalToFollowElemContent>
|
||||||
|
</PortalToFollowElem>
|
||||||
|
)
|
||||||
|
}
|
58
web/app/components/base/theme-switcher.tsx
Normal file
58
web/app/components/base/theme-switcher.tsx
Normal file
@ -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 (
|
||||||
|
<div className='flex items-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5'>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
|
||||||
|
theme === 'system' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
|
||||||
|
)}
|
||||||
|
onClick={() => handleThemeChange('system')}
|
||||||
|
>
|
||||||
|
<div className='p-0.5'>
|
||||||
|
<RiComputerLine className='h-4 w-4' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={cn('h-[14px] w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')}></div>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
|
||||||
|
theme === 'light' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
|
||||||
|
)}
|
||||||
|
onClick={() => handleThemeChange('light')}
|
||||||
|
>
|
||||||
|
<div className='p-0.5'>
|
||||||
|
<RiSunLine className='h-4 w-4' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={cn('h-[14px] w-px bg-transparent', theme === 'system' && 'bg-divider-regular')}></div>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
|
||||||
|
theme === 'dark' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
|
||||||
|
)}
|
||||||
|
onClick={() => handleThemeChange('dark')}
|
||||||
|
>
|
||||||
|
<div className='p-0.5'>
|
||||||
|
<RiMoonLine className='h-4 w-4' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -2,7 +2,7 @@ import React, { type FC } from 'react'
|
|||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { RiLineHeight } from '@remixicon/react'
|
import { RiLineHeight } from '@remixicon/react'
|
||||||
import Tooltip from '@/app/components/base/tooltip'
|
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 = {
|
type DisplayToggleProps = {
|
||||||
isCollapsed: boolean
|
isCollapsed: boolean
|
||||||
|
@ -121,7 +121,7 @@ const Doc = ({ appDetail }: IDocProps) => {
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<article className={cn('prose-xl prose', theme === Theme.dark && 'dark:prose-invert')} >
|
<article className={cn('prose-xl prose', theme === Theme.dark && 'prose-invert')} >
|
||||||
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
|
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
|
||||||
(() => {
|
(() => {
|
||||||
switch (locale) {
|
switch (locale) {
|
||||||
|
@ -2,20 +2,18 @@
|
|||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import copy from 'copy-to-clipboard'
|
import copy from 'copy-to-clipboard'
|
||||||
import { t } from 'i18next'
|
import { t } from 'i18next'
|
||||||
import s from './style.module.css'
|
|
||||||
import Tooltip from '@/app/components/base/tooltip'
|
import Tooltip from '@/app/components/base/tooltip'
|
||||||
|
import CopyFeedback from '@/app/components/base/copy-feedback'
|
||||||
|
|
||||||
type IInputCopyProps = {
|
type IInputCopyProps = {
|
||||||
value?: string
|
value?: string
|
||||||
className?: string
|
className?: string
|
||||||
readOnly?: boolean
|
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
const InputCopy = ({
|
const InputCopy = ({
|
||||||
value = '',
|
value = '',
|
||||||
className,
|
className,
|
||||||
readOnly = true,
|
|
||||||
children,
|
children,
|
||||||
}: IInputCopyProps) => {
|
}: IInputCopyProps) => {
|
||||||
const [isCopied, setIsCopied] = useState(false)
|
const [isCopied, setIsCopied] = useState(false)
|
||||||
@ -45,23 +43,12 @@ const InputCopy = ({
|
|||||||
popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
|
popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
|
||||||
position='bottom'
|
position='bottom'
|
||||||
>
|
>
|
||||||
{value}
|
<span className='text-text-secondary'>{value}</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="h-4 shrink-0 border bg-divider-regular" />
|
<div className="h-4 w-px shrink-0 bg-divider-regular" />
|
||||||
<Tooltip
|
<div className='mx-1'><CopyFeedback content={value} /></div>
|
||||||
popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
|
|
||||||
position='bottom'
|
|
||||||
>
|
|
||||||
<div className="shrink-0 px-0.5">
|
|
||||||
<div className={`box-border flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {
|
|
||||||
copy(value)
|
|
||||||
setIsCopied(true)
|
|
||||||
}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -31,8 +31,8 @@ const Category: FC<ICategoryProps> = ({
|
|||||||
const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn
|
const isAllCategories = !list.includes(value as AppCategory) || value === allCategoriesEn
|
||||||
|
|
||||||
const itemClassName = (isSelected: boolean) => cn(
|
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',
|
'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-gray-200 bg-white text-primary-600 shadow-xs hover:bg-white',
|
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 (
|
return (
|
||||||
@ -50,7 +50,7 @@ const Category: FC<ICategoryProps> = ({
|
|||||||
className={itemClassName(name === value)}
|
className={itemClassName(name === value)}
|
||||||
onClick={() => onChange(name)}
|
onClick={() => onChange(name)}
|
||||||
>
|
>
|
||||||
{categoryI18n[name] ? t(`explore.category.${name}`) : name}
|
{(categoryI18n as any)[name] ? t(`explore.category.${name}`) : name}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -14,6 +14,7 @@ import {
|
|||||||
RiMap2Line,
|
RiMap2Line,
|
||||||
RiSettings3Line,
|
RiSettings3Line,
|
||||||
RiStarLine,
|
RiStarLine,
|
||||||
|
RiTShirt2Line,
|
||||||
} from '@remixicon/react'
|
} from '@remixicon/react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
|
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 PremiumBadge from '@/app/components/base/premium-badge'
|
||||||
import { useGetDocLanguage } from '@/context/i18n'
|
import { useGetDocLanguage } from '@/context/i18n'
|
||||||
import Avatar from '@/app/components/base/avatar'
|
import Avatar from '@/app/components/base/avatar'
|
||||||
|
import ThemeSwitcher from '@/app/components/base/theme-switcher'
|
||||||
import { logout } from '@/service/common'
|
import { logout } from '@/service/common'
|
||||||
import AppContext, { useAppContext } from '@/context/app-context'
|
import AppContext, { useAppContext } from '@/context/app-context'
|
||||||
import { useProviderContext } from '@/context/provider-context'
|
import { useProviderContext } from '@/context/provider-context'
|
||||||
@ -82,8 +84,8 @@ export default function AppSelector() {
|
|||||||
<MenuItems
|
<MenuItems
|
||||||
className="
|
className="
|
||||||
absolute right-0 mt-1.5 w-60 max-w-80
|
absolute right-0 mt-1.5 w-60 max-w-80
|
||||||
origin-top-right divide-y divide-divider-subtle rounded-xl bg-components-panel-bg-blur
|
origin-top-right divide-y divide-divider-subtle rounded-xl bg-components-panel-bg-blur shadow-lg
|
||||||
shadow-lg focus:outline-none
|
backdrop-blur-sm focus:outline-none
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<MenuItem disabled>
|
<MenuItem disabled>
|
||||||
@ -186,6 +188,15 @@ export default function AppSelector() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
<MenuItem disabled>
|
||||||
|
<div className='p-1'>
|
||||||
|
<div className={cn(itemClassName, 'hover:bg-transparent')}>
|
||||||
|
<RiTShirt2Line className='size-4 shrink-0 text-text-tertiary' />
|
||||||
|
<div className='system-md-regular grow px-1 text-text-secondary'>{t('common.theme.theme')}</div>
|
||||||
|
<ThemeSwitcher/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</MenuItem>
|
||||||
<MenuItem>
|
<MenuItem>
|
||||||
<div className='p-1' onClick={() => handleLogout()}>
|
<div className='p-1' onClick={() => handleLogout()}>
|
||||||
<div
|
<div
|
||||||
|
@ -183,7 +183,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
|
|||||||
<>
|
<>
|
||||||
{isString && (
|
{isString && (
|
||||||
<Input
|
<Input
|
||||||
className={cn(inputsIsFocus[variable] ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'rounded-lg border px-3 py-[6px]')}
|
className={cn(inputsIsFocus[variable] ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'rounded-lg border px-3 py-[6px]')}
|
||||||
value={varInput?.value as string || ''}
|
value={varInput?.value as string || ''}
|
||||||
onChange={handleMixedTypeChange(variable)}
|
onChange={handleMixedTypeChange(variable)}
|
||||||
nodesOutputVars={nodeOutputVars}
|
nodesOutputVars={nodeOutputVars}
|
||||||
|
@ -12,6 +12,8 @@ import {
|
|||||||
PortalToFollowElemContent,
|
PortalToFollowElemContent,
|
||||||
PortalToFollowElemTrigger,
|
PortalToFollowElemTrigger,
|
||||||
} from '@/app/components/base/portal-to-follow-elem'
|
} from '@/app/components/base/portal-to-follow-elem'
|
||||||
|
import Divider from '@/app/components/base/divider'
|
||||||
|
import ThemeSwitcher from '@/app/components/base/theme-switcher'
|
||||||
import InfoModal from './info-modal'
|
import InfoModal from './info-modal'
|
||||||
import type { SiteInfo } from '@/models/share'
|
import type { SiteInfo } from '@/models/share'
|
||||||
import cn from '@/utils/classnames'
|
import cn from '@/utils/classnames'
|
||||||
@ -59,6 +61,13 @@ const MenuDropdown: FC<Props> = ({
|
|||||||
</PortalToFollowElemTrigger>
|
</PortalToFollowElemTrigger>
|
||||||
<PortalToFollowElemContent className='z-50'>
|
<PortalToFollowElemContent className='z-50'>
|
||||||
<div className='w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
|
<div className='w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
|
||||||
|
<div className='p-1'>
|
||||||
|
<div className={cn('system-md-regular flex cursor-pointer items-center rounded-lg py-1.5 pl-3 pr-2 text-text-secondary')}>
|
||||||
|
<div className='grow'>{t('common.theme.theme')}</div>
|
||||||
|
<ThemeSwitcher/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Divider type='horizontal' className='my-0' />
|
||||||
<div className='p-1'>
|
<div className='p-1'>
|
||||||
{data?.privacy_policy && (
|
{data?.privacy_policy && (
|
||||||
<a href={data.privacy_policy} target='_blank' className='system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>
|
<a href={data.privacy_policy} target='_blank' className='system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>
|
||||||
|
@ -52,7 +52,7 @@ const Node: FC<NodeProps<EndNodeType>> = ({
|
|||||||
isChatMode,
|
isChatMode,
|
||||||
})
|
})
|
||||||
return (
|
return (
|
||||||
<div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-components-badge-white-to-dark px-1 text-xs font-normal text-text-secondary'>
|
<div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'>
|
||||||
<div className='flex items-center text-xs font-medium text-text-tertiary'>
|
<div className='flex items-center text-xs font-medium text-text-tertiary'>
|
||||||
{!isEnv && !isChatVar && (
|
{!isEnv && !isChatVar && (
|
||||||
<>
|
<>
|
||||||
|
@ -179,7 +179,7 @@ const InputVarList: FC<Props> = ({
|
|||||||
</div>
|
</div>
|
||||||
{isString && (
|
{isString && (
|
||||||
<Input
|
<Input
|
||||||
className={cn(inputsIsFocus[variable] ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'rounded-lg border px-3 py-[6px]')}
|
className={cn(inputsIsFocus[variable] ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'rounded-lg border px-3 py-[6px]')}
|
||||||
value={varInput?.value as string || ''}
|
value={varInput?.value as string || ''}
|
||||||
onChange={handleMixedTypeChange(variable)}
|
onChange={handleMixedTypeChange(variable)}
|
||||||
readOnly={readOnly}
|
readOnly={readOnly}
|
||||||
|
@ -63,8 +63,7 @@ const LocaleLayout = async ({
|
|||||||
<TanstackQueryIniter>
|
<TanstackQueryIniter>
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
attribute='data-theme'
|
attribute='data-theme'
|
||||||
forcedTheme='light'
|
defaultTheme='system'
|
||||||
defaultTheme='light' // TODO: change to 'system' when dark mode ready
|
|
||||||
enableSystem
|
enableSystem
|
||||||
disableTransitionOnChange
|
disableTransitionOnChange
|
||||||
>
|
>
|
||||||
|
@ -2,6 +2,8 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useContext } from 'use-context-selector'
|
import { useContext } from 'use-context-selector'
|
||||||
import Select from '@/app/components/base/select/locale'
|
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 { languages } from '@/i18n/language'
|
||||||
import type { Locale } from '@/i18n'
|
import type { Locale } from '@/i18n'
|
||||||
import I18n from '@/context/i18n'
|
import I18n from '@/context/i18n'
|
||||||
@ -10,17 +12,22 @@ import LogoSite from '@/app/components/base/logo/logo-site'
|
|||||||
const Header = () => {
|
const Header = () => {
|
||||||
const { locale, setLocaleOnClient } = useContext(I18n)
|
const { locale, setLocaleOnClient } = useContext(I18n)
|
||||||
|
|
||||||
return <div className='flex w-full items-center justify-between p-6'>
|
return (
|
||||||
<LogoSite />
|
<div className='flex w-full items-center justify-between p-6'>
|
||||||
<Select
|
<LogoSite />
|
||||||
value={locale}
|
<div className='flex items-center gap-1'>
|
||||||
items={languages.filter(item => item.supported)}
|
<Select
|
||||||
onChange={(value) => {
|
value={locale}
|
||||||
setLocaleOnClient(value as Locale)
|
items={languages.filter(item => item.supported)}
|
||||||
}}
|
onChange={(value) => {
|
||||||
/>
|
setLocaleOnClient(value as Locale)
|
||||||
|
}}
|
||||||
</div>
|
/>
|
||||||
|
<Divider type='vertical' className='mx-0 ml-2 h-4' />
|
||||||
|
<ThemeSelector />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Header
|
export default Header
|
||||||
|
@ -1,4 +1,10 @@
|
|||||||
const translation = {
|
const translation = {
|
||||||
|
theme: {
|
||||||
|
theme: 'Theme',
|
||||||
|
light: 'light',
|
||||||
|
dark: 'dark',
|
||||||
|
auto: 'system',
|
||||||
|
},
|
||||||
api: {
|
api: {
|
||||||
success: 'Success',
|
success: 'Success',
|
||||||
actionSuccess: 'Action succeeded',
|
actionSuccess: 'Action succeeded',
|
||||||
|
@ -1,4 +1,10 @@
|
|||||||
const translation = {
|
const translation = {
|
||||||
|
theme: {
|
||||||
|
theme: 'テーマ',
|
||||||
|
light: '明るい',
|
||||||
|
dark: '暗い',
|
||||||
|
auto: 'システム',
|
||||||
|
},
|
||||||
api: {
|
api: {
|
||||||
success: '成功',
|
success: '成功',
|
||||||
actionSuccess: 'アクションが成功しました',
|
actionSuccess: 'アクションが成功しました',
|
||||||
|
@ -1,4 +1,10 @@
|
|||||||
const translation = {
|
const translation = {
|
||||||
|
theme: {
|
||||||
|
theme: '主题',
|
||||||
|
light: '浅色',
|
||||||
|
dark: '深色',
|
||||||
|
auto: '自动',
|
||||||
|
},
|
||||||
api: {
|
api: {
|
||||||
success: '成功',
|
success: '成功',
|
||||||
actionSuccess: '操作成功',
|
actionSuccess: '操作成功',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user