Skip to content

Commit f27a956

Browse files
JzoNgKVOJzoNgKVO
authored
Feat: api page dark mode (#18078)
1 parent d119c7d commit f27a956

File tree

6 files changed

+51
-84
lines changed

6 files changed

+51
-84
lines changed

‎web/app/(commonLayout)/datasets/Container.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useQuery } from '@tanstack/react-query'
1111
import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
1212
import Datasets from './Datasets'
1313
import DatasetFooter from './DatasetFooter'
14-
import ApiServer from './ApiServer'
14+
import ApiServer from '../../components/develop/ApiServer'
1515
import Doc from './Doc'
1616
import TabSliderNew from '@/app/components/base/tab-slider-new'
1717
import TagManagementModal from '@/app/components/base/tag-management'

‎web/app/(commonLayout)/datasets/Doc.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import TemplateZh from './template/template.zh.mdx'
99
import TemplateJa from './template/template.ja.mdx'
1010
import I18n from '@/context/i18n'
1111
import { LanguagesSupported } from '@/i18n/language'
12+
import useTheme from '@/hooks/use-theme'
13+
import { Theme } from '@/types/app'
14+
import cn from '@/utils/classnames'
1215

1316
type DocProps = {
1417
apiBaseUrl: string
@@ -19,6 +22,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
1922
const { t } = useTranslation()
2023
const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
2124
const [isTocExpanded, setIsTocExpanded] = useState(false)
25+
const { theme } = useTheme()
2226

2327
// Set initial TOC expanded state based on screen width
2428
useEffect(() => {
@@ -83,12 +87,12 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
8387
<div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
8488
{isTocExpanded
8589
? (
86-
<nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-gray-50 p-4 shadow-md">
90+
<nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md">
8791
<div className="mb-4 flex items-center justify-between">
88-
<h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
92+
<h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
8993
<button
9094
onClick={() => setIsTocExpanded(false)}
91-
className="text-gray-500 hover:text-gray-700"
95+
className="text-text-tertiary hover:text-text-secondary"
9296
>
9397
✕
9498
</button>
@@ -98,7 +102,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
98102
<li key={index}>
99103
<a
100104
href={item.href}
101-
className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
105+
className="text-text-secondary transition-colors duration-200 hover:text-text-primary hover:underline"
102106
onClick={e => handleTocClick(e, item)}
103107
>
104108
{item.text}
@@ -111,13 +115,13 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
111115
: (
112116
<button
113117
onClick={() => setIsTocExpanded(true)}
114-
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
118+
className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
115119
>
116-
<RiListUnordered className="h-6 w-6" />
120+
<RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
117121
</button>
118122
)}
119123
</div>
120-
<article className='prose-xl prose mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'>
124+
<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')}>
121125
{Template}
122126
</article>
123127
</div>

‎web/app/(commonLayout)/datasets/ApiServer.tsx‎ renamed to ‎web/app/components/develop/ApiServer.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type { FC } from 'react'
44
import { useTranslation } from 'react-i18next'
55
import CopyFeedback from '@/app/components/base/copy-feedback'
66
import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
7-
import { randomString } from '@/utils'
87

98
type ApiServerProps = {
109
apiBaseUrl: string
@@ -16,21 +15,17 @@ const ApiServer: FC<ApiServerProps> = ({
1615

1716
return (
1817
<div className='flex flex-wrap items-center gap-y-2'>
19-
<div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-white bg-white/80 pl-1.5 pr-1 leading-5'>
20-
<div className='mr-0.5 h-5 shrink-0 rounded-md border border-gray-200 px-1.5 text-[11px] text-gray-500'>{t('appApi.apiServer')}</div>
21-
<div className='w-fit truncate px-1 text-[13px] font-medium text-gray-800 sm:w-[248px]'>{apiBaseUrl}</div>
22-
<div className='mx-1 h-[14px] w-[1px] bg-gray-200'></div>
23-
<CopyFeedback
24-
content={apiBaseUrl}
25-
selectorId={randomString(8)}
26-
className={'!h-6 !w-6 hover:bg-gray-200'}
27-
/>
18+
<div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-components-input-border-active bg-components-input-bg-normal pl-1.5 pr-1 leading-5'>
19+
<div className='mr-0.5 h-5 shrink-0 rounded-md border border-divider-subtle px-1.5 text-[11px] text-text-tertiary'>{t('appApi.apiServer')}</div>
20+
<div className='w-fit truncate px-1 text-[13px] font-medium text-text-secondary sm:w-[248px]'>{apiBaseUrl}</div>
21+
<div className='mx-1 h-[14px] w-[1px] bg-divider-regular'></div>
22+
<CopyFeedback content={apiBaseUrl}/>
2823
</div>
2924
<div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]'>
3025
{t('appApi.ok')}
3126
</div>
3227
<SecretKeyButton
33-
className='!h-8 shrink-0 bg-white'
28+
className='!h-8 shrink-0'
3429
/>
3530
</div>
3631
)

‎web/app/components/develop/doc.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ import TemplateChatZh from './template/template_chat.zh.mdx'
1717
import TemplateChatJa from './template/template_chat.ja.mdx'
1818
import I18n from '@/context/i18n'
1919
import { LanguagesSupported } from '@/i18n/language'
20+
import useTheme from '@/hooks/use-theme'
21+
import { Theme } from '@/types/app'
22+
import cn from '@/utils/classnames'
2023

2124
type IDocProps = {
2225
appDetail: any
@@ -27,6 +30,7 @@ const Doc = ({ appDetail }: IDocProps) => {
2730
const { t } = useTranslation()
2831
const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
2932
const [isTocExpanded, setIsTocExpanded] = useState(false)
33+
const { theme } = useTheme()
3034

3135
const variables = appDetail?.model_config?.configs?.prompt_variables || []
3236
const inputs = variables.reduce((res: any, variable: any) => {
@@ -83,12 +87,12 @@ const Doc = ({ appDetail }: IDocProps) => {
8387
<div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
8488
{isTocExpanded
8589
? (
86-
<nav className="toc w-full rounded-lg bg-gray-50 p-4 shadow-md">
90+
<nav className="toc w-full rounded-lg bg-components-panel-bg p-4 shadow-md">
8791
<div className="mb-4 flex items-center justify-between">
88-
<h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
92+
<h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
8993
<button
9094
onClick={() => setIsTocExpanded(false)}
91-
className="text-gray-500 hover:text-gray-700"
95+
className="text-text-tertiary hover:text-text-secondary"
9296
>
9397
✕
9498
</button>
@@ -98,7 +102,7 @@ const Doc = ({ appDetail }: IDocProps) => {
98102
<li key={index}>
99103
<a
100104
href={item.href}
101-
className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
105+
className="text-text-secondary transition-colors duration-200 hover:text-text-primary hover:underline"
102106
onClick={e => handleTocClick(e, item)}
103107
>
104108
{item.text}
@@ -111,13 +115,13 @@ const Doc = ({ appDetail }: IDocProps) => {
111115
: (
112116
<button
113117
onClick={() => setIsTocExpanded(true)}
114-
className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
118+
className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
115119
>
116-
<RiListUnordered className="h-6 w-6" />
120+
<RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
117121
</button>
118122
)}
119123
</div>
120-
<article className="prose-xl prose" >
124+
<article className={cn('prose-xl prose', theme === Theme.dark && 'dark:prose-invert')} >
121125
{(appDetail?.mode === 'chat' || appDetail?.mode === 'agent-chat') && (
122126
(() => {
123127
switch (locale) {

‎web/app/components/develop/index.tsx‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
'use client'
2-
import { useTranslation } from 'react-i18next'
3-
import s from './secret-key/style.module.css'
42
import Doc from '@/app/components/develop/doc'
53
import Loading from '@/app/components/base/loading'
6-
import InputCopy from '@/app/components/develop/secret-key/input-copy'
7-
import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
4+
import ApiServer from '@/app/components/develop/ApiServer'
85
import { useStore as useAppStore } from '@/app/components/app/store'
96

107
type IDevelopMainProps = {
@@ -13,33 +10,20 @@ type IDevelopMainProps = {
1310

1411
const DevelopMain = ({ appId }: IDevelopMainProps) => {
1512
const appDetail = useAppStore(state => state.appDetail)
16-
const { t } = useTranslation()
1713

1814
if (!appDetail) {
1915
return (
20-
<div className='flex h-full items-center justify-center bg-white'>
16+
<div className='flex h-full items-center justify-center bg-background-default'>
2117
<Loading />
2218
</div>
2319
)
2420
}
2521

2622
return (
2723
<div className='relative flex h-full flex-col overflow-hidden'>
28-
<div className='flex shrink-0 items-center justify-between border-b border-solid border-b-gray-100 px-6 py-2'>
29-
<div className='text-lg font-medium text-gray-900'></div>
30-
<div className='flex flex-wrap items-center gap-y-1'>
31-
<InputCopy className='mr-1 w-52 shrink-0 sm:w-80' value={appDetail.api_base_url}>
32-
<div className={`ml-2 shrink-0 rounded-[6px] border border-solid border-gray-200 px-2 py-0.5 text-[0.625rem] text-gray-500 ${s.customApi}`}>
33-
{t('appApi.apiServer')}
34-
</div>
35-
</InputCopy>
36-
<div className={`mr-2 flex h-9 items-center rounded-lg
37-
px-3 text-[13px] font-normal ${appDetail.enable_api ? 'bg-green-50 text-green-500' : 'bg-yellow-50 text-yellow-500'}`}>
38-
<div className='mr-1'>{t('appApi.status')}</div>
39-
<div className='font-semibold'>{appDetail.enable_api ? `${t('appApi.ok')}` : `${t('appApi.disabled')}`}</div>
40-
</div>
41-
<SecretKeyButton className='shrink-0' appId={appId} />
42-
</div>
24+
<div className='flex shrink-0 items-center justify-between border-b border-solid border-b-divider-regular px-6 py-2'>
25+
<div className='text-lg font-medium text-text-primary'></div>
26+
<ApiServer apiBaseUrl={appDetail.api_base_url} />
4327
</div>
4428
<div className='grow overflow-auto px-4 py-4 sm:px-10'>
4529
<Doc appDetail={appDetail} />

‎web/app/components/develop/secret-key/secret-key-modal.tsx‎

Lines changed: 17 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
'use client'
22
import {
3-
useEffect,
43
useState,
54
} from 'react'
65
import { useTranslation } from 'react-i18next'
6+
import { RiDeleteBinLine } from '@remixicon/react'
77
import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
88
import useSWR, { useSWRConfig } from 'swr'
9-
import copy from 'copy-to-clipboard'
109
import SecretKeyGenerateModal from './secret-key-generate'
1110
import s from './style.module.css'
11+
import ActionButton from '@/app/components/base/action-button'
1212
import Modal from '@/app/components/base/modal'
1313
import Button from '@/app/components/base/button'
14+
import CopyFeedback from '@/app/components/base/copy-feedback'
1415
import {
1516
createApikey as createAppApikey,
1617
delApikey as delAppApikey,
@@ -22,7 +23,6 @@ import {
2223
fetchApiKeysList as fetchDatasetApiKeysList,
2324
} from '@/service/datasets'
2425
import type { CreateApiKeyResponse } from '@/models/app'
25-
import Tooltip from '@/app/components/base/tooltip'
2626
import Loading from '@/app/components/base/loading'
2727
import Confirm from '@/app/components/base/confirm'
2828
import useTimestamp from '@/hooks/use-timestamp'
@@ -54,20 +54,6 @@ const SecretKeyModal = ({
5454

5555
const [delKeyID, setDelKeyId] = useState('')
5656

57-
const [copyValue, setCopyValue] = useState('')
58-
59-
useEffect(() => {
60-
if (copyValue) {
61-
const timeout = setTimeout(() => {
62-
setCopyValue('')
63-
}, 1000)
64-
65-
return () => {
66-
clearTimeout(timeout)
67-
}
68-
}
69-
}, [copyValue])
70-
7157
const onDel = async () => {
7258
setShowConfirmDelete(false)
7359
if (!delKeyID)
@@ -104,36 +90,30 @@ const SecretKeyModal = ({
10490
{
10591
!!apiKeysList?.data?.length && (
10692
<div className='mt-4 flex grow flex-col overflow-hidden'>
107-
<div className='flex h-9 shrink-0 items-center border-b border-solid text-xs font-semibold text-text-tertiary'>
93+
<div className='flex h-9 shrink-0 items-center border-b border-divider-regular text-xs font-semibold text-text-tertiary'>
10894
<div className='w-64 shrink-0 px-3'>{t('appApi.apiKeyModal.secretKey')}</div>
10995
<div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.created')}</div>
11096
<div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.lastUsed')}</div>
11197
<div className='grow px-3'></div>
11298
</div>
11399
<div className='grow overflow-auto'>
114100
{apiKeysList.data.map(api => (
115-
<div className='flex h-9 items-center border-b border-solid text-sm font-normal text-text-secondary' key={api.id}>
101+
<div className='flex h-9 items-center border-b border-divider-regular text-sm font-normal text-text-secondary' key={api.id}>
116102
<div className='w-64 shrink-0 truncate px-3 font-mono'>{generateToken(api.token)}</div>
117103
<div className='w-[200px] shrink-0 truncate px-3'>{formatTime(Number(api.created_at), t('appLog.dateTimeFormat') as string)}</div>
118104
<div className='w-[200px] shrink-0 truncate px-3'>{api.last_used_at ? formatTime(Number(api.last_used_at), t('appLog.dateTimeFormat') as string) : t('appApi.never')}</div>
119-
<div className='flex grow px-3'>
120-
<Tooltip
121-
popupContent={copyValue === api.token ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
122-
popupClassName='mr-1'
123-
>
124-
<div className={`mr-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover ${s.copyIcon} ${copyValue === api.token ? s.copied : ''}`} onClick={() => {
125-
// setIsCopied(true)
126-
copy(api.token)
127-
setCopyValue(api.token)
128-
}}></div>
129-
</Tooltip>
130-
{isCurrentWorkspaceManager
131-
&& <div className={`flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg ${s.trashIcon}`} onClick={() => {
132-
setDelKeyId(api.id)
133-
setShowConfirmDelete(true)
134-
}}>
135-
</div>
136-
}
105+
<div className='flex grow space-x-2 px-3'>
106+
<CopyFeedback content={api.token} />
107+
{isCurrentWorkspaceManager && (
108+
<ActionButton
109+
onClick={() => {
110+
setDelKeyId(api.id)
111+
setShowConfirmDelete(true)
112+
}}
113+
>
114+
<RiDeleteBinLine className='h-4 w-4' />
115+
</ActionButton>
116+
)}
137117
</div>
138118
</div>
139119
))}

0 commit comments

Comments
 (0)