From a798dcfae992f03a4391540bf5b318481b4299f0 Mon Sep 17 00:00:00 2001 From: Bowen Liang Date: Thu, 4 Jan 2024 15:37:51 +0800 Subject: [PATCH] web: Add style CI workflow to enforce eslint checks on web module (#1910) --- .github/workflows/style.yml | 34 +++++++++++++++++++ web/.eslintrc.json | 5 +-- .../(commonLayout)/datasets/DatasetFooter.tsx | 2 +- .../(shareLayout)/completion/[token]/page.tsx | 2 +- .../app/chat/loading-anim/index.tsx | 7 ++-- web/app/components/app/chat/mermaid/index.tsx | 1 - .../configuration/base/group-name/index.tsx | 7 ++-- .../base/icons/more-like-this-icon.tsx | 5 +-- .../base/operation-btn/index.tsx | 9 ++--- .../base/var-highlight/index.tsx | 7 ++-- .../base/warning-mask/has-not-set-api.tsx | 7 ++-- .../configuration/base/warning-mask/index.tsx | 5 +-- .../configuration/config-var/modal-foot.tsx | 7 ++-- .../config/feature/feature-group/index.tsx | 7 ++-- .../dataset-config/type-icon/index.tsx | 12 +++---- .../experience-enchance-group/index.tsx | 5 +-- .../more-like-this/index.tsx | 7 ++-- .../components/app/text-generate/index.tsx | 4 +-- web/app/components/base/app-unavailable.tsx | 5 +-- web/app/components/base/panel/index.tsx | 16 ++++----- .../empty-dataset-creation-modal/index.tsx | 12 +++---- .../create/stop-embedding-modal/index.tsx | 13 ++++--- web/app/components/develop/code.tsx | 2 +- web/app/components/develop/doc.tsx | 17 +++++----- web/app/components/develop/md.tsx | 18 +++++----- .../Integrations-page/index.tsx | 4 +-- .../members-page/operation/index.tsx | 2 +- web/app/components/header/app-back/index.tsx | 1 - .../share/chat/value-panel/index.tsx | 20 +++++------ 29 files changed, 141 insertions(+), 102 deletions(-) create mode 100644 .github/workflows/style.yml diff --git a/.github/workflows/style.yml b/.github/workflows/style.yml new file mode 100644 index 0000000000..062667a745 --- /dev/null +++ b/.github/workflows/style.yml @@ -0,0 +1,34 @@ +name: Style check + +on: + pull_request: + branches: + - main + push: + branches: + - deploy/dev + +jobs: + test: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup NodeJS + uses: actions/setup-node@v4 + with: + node-version: 18 + cache: yarn + cache-dependency-path: ./web/package.json + + - name: Web dependencies + run: | + cd ./web + yarn install --frozen-lockfile + + - name: Web style check + run: | + cd ./web + yarn run lint diff --git a/web/.eslintrc.json b/web/.eslintrc.json index cab2c9c415..1ab9727739 100644 --- a/web/.eslintrc.json +++ b/web/.eslintrc.json @@ -23,6 +23,7 @@ ] } ], - "react-hooks/exhaustive-deps": "warn" + "react-hooks/exhaustive-deps": "warn", + "react/display-name": "warn" } -} \ No newline at end of file +} diff --git a/web/app/(commonLayout)/datasets/DatasetFooter.tsx b/web/app/(commonLayout)/datasets/DatasetFooter.tsx index 020bfceffe..8d37afb88b 100644 --- a/web/app/(commonLayout)/datasets/DatasetFooter.tsx +++ b/web/app/(commonLayout)/datasets/DatasetFooter.tsx @@ -1,6 +1,6 @@ 'use client' -import { useTranslation } from "react-i18next" +import { useTranslation } from 'react-i18next' const DatasetFooter = () => { const { t } = useTranslation() diff --git a/web/app/(shareLayout)/completion/[token]/page.tsx b/web/app/(shareLayout)/completion/[token]/page.tsx index 0c3992dc72..28bbfa68da 100644 --- a/web/app/(shareLayout)/completion/[token]/page.tsx +++ b/web/app/(shareLayout)/completion/[token]/page.tsx @@ -10,4 +10,4 @@ const TextGeneration: FC = () => { ) } -export default React.memo(TextGeneration) \ No newline at end of file +export default React.memo(TextGeneration) diff --git a/web/app/components/app/chat/loading-anim/index.tsx b/web/app/components/app/chat/loading-anim/index.tsx index 0cd4111b39..09f8a54789 100644 --- a/web/app/components/app/chat/loading-anim/index.tsx +++ b/web/app/components/app/chat/loading-anim/index.tsx @@ -1,13 +1,14 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import s from './style.module.css' -export interface ILoaidingAnimProps { +export type ILoaidingAnimProps = { type: 'text' | 'avatar' } const LoaidingAnim: FC = ({ - type + type, }) => { return (
diff --git a/web/app/components/app/chat/mermaid/index.tsx b/web/app/components/app/chat/mermaid/index.tsx index 04d137e509..86f472c06e 100644 --- a/web/app/components/app/chat/mermaid/index.tsx +++ b/web/app/components/app/chat/mermaid/index.tsx @@ -23,7 +23,6 @@ const style = { overflow: 'auto', } -// eslint-disable-next-line react/display-name const Flowchart = React.forwardRef((props: { PrimitiveCode: string }, ref) => { diff --git a/web/app/components/app/configuration/base/group-name/index.tsx b/web/app/components/app/configuration/base/group-name/index.tsx index 68c87d6d92..51fe09021b 100644 --- a/web/app/components/app/configuration/base/group-name/index.tsx +++ b/web/app/components/app/configuration/base/group-name/index.tsx @@ -1,12 +1,13 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' -export interface IGroupNameProps { +export type IGroupNameProps = { name: string } const GroupName: FC = ({ - name + name, }) => { return (
diff --git a/web/app/components/app/configuration/base/icons/more-like-this-icon.tsx b/web/app/components/app/configuration/base/icons/more-like-this-icon.tsx index 8aa79fb400..74c808eb39 100644 --- a/web/app/components/app/configuration/base/icons/more-like-this-icon.tsx +++ b/web/app/components/app/configuration/base/icons/more-like-this-icon.tsx @@ -1,7 +1,8 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' -const MoreLikeThisIcon: FC = ({ }) => { +const MoreLikeThisIcon: FC = () => { return ( diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx index 1756464f7e..889aafb54d 100644 --- a/web/app/components/app/configuration/base/operation-btn/index.tsx +++ b/web/app/components/app/configuration/base/operation-btn/index.tsx @@ -1,9 +1,10 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import { PlusIcon } from '@heroicons/react/20/solid' -export interface IOperationBtnProps { +export type IOperationBtnProps = { type: 'add' | 'edit' actionName?: string onClick: () => void @@ -14,13 +15,13 @@ const iconMap = { edit: ( - ) + ), } const OperationBtn: FC = ({ type, actionName, - onClick + onClick, }) => { const { t } = useTranslation() return ( diff --git a/web/app/components/app/configuration/base/var-highlight/index.tsx b/web/app/components/app/configuration/base/var-highlight/index.tsx index 8d7e09573f..64c907d664 100644 --- a/web/app/components/app/configuration/base/var-highlight/index.tsx +++ b/web/app/components/app/configuration/base/var-highlight/index.tsx @@ -1,9 +1,10 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import s from './style.module.css' -export interface IVarHighlightProps { +export type IVarHighlightProps = { name: string } @@ -31,6 +32,4 @@ export const varHighlightHTML = ({ name }: IVarHighlightProps) => { return html } - - export default React.memo(VarHighlight) diff --git a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx index af39b70038..80a9cc955b 100644 --- a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx +++ b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx @@ -1,10 +1,11 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import WarningMask from '.' import Button from '@/app/components/base/button' -export interface IHasNotSetAPIProps { +export type IHasNotSetAPIProps = { isTrailFinished: boolean onSetting: () => void } @@ -18,7 +19,7 @@ const icon = ( const HasNotSetAPI: FC = ({ isTrailFinished, - onSetting + onSetting, }) => { const { t } = useTranslation() diff --git a/web/app/components/app/configuration/base/warning-mask/index.tsx b/web/app/components/app/configuration/base/warning-mask/index.tsx index d7e45e360f..550c3f73a8 100644 --- a/web/app/components/app/configuration/base/warning-mask/index.tsx +++ b/web/app/components/app/configuration/base/warning-mask/index.tsx @@ -1,9 +1,10 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import s from './style.module.css' -export interface IWarningMaskProps { +export type IWarningMaskProps = { title: string description: string footer: React.ReactNode diff --git a/web/app/components/app/configuration/config-var/modal-foot.tsx b/web/app/components/app/configuration/config-var/modal-foot.tsx index acd8d9b51d..71efcadb25 100644 --- a/web/app/components/app/configuration/config-var/modal-foot.tsx +++ b/web/app/components/app/configuration/config-var/modal-foot.tsx @@ -1,16 +1,17 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import Button from '@/app/components/base/button' -export interface IModalFootProps { +export type IModalFootProps = { onConfirm: () => void onCancel: () => void } const ModalFoot: FC = ({ onConfirm, - onCancel + onCancel, }) => { const { t } = useTranslation() return ( diff --git a/web/app/components/app/configuration/config/feature/feature-group/index.tsx b/web/app/components/app/configuration/config/feature/feature-group/index.tsx index 6bbe851134..a4b27f18d4 100644 --- a/web/app/components/app/configuration/config/feature/feature-group/index.tsx +++ b/web/app/components/app/configuration/config/feature/feature-group/index.tsx @@ -1,8 +1,9 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import GroupName from '@/app/components/app/configuration/base/group-name' -export interface IFeatureGroupProps { +export type IFeatureGroupProps = { title: string description?: string children: React.ReactNode @@ -11,7 +12,7 @@ export interface IFeatureGroupProps { const FeatureGroup: FC = ({ title, description, - children + children, }) => { return (
diff --git a/web/app/components/app/configuration/dataset-config/type-icon/index.tsx b/web/app/components/app/configuration/dataset-config/type-icon/index.tsx index 9bebea6127..65951f662f 100644 --- a/web/app/components/app/configuration/dataset-config/type-icon/index.tsx +++ b/web/app/components/app/configuration/dataset-config/type-icon/index.tsx @@ -1,14 +1,15 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' -export interface ITypeIconProps { +export type ITypeIconProps = { type: 'upload_file' size?: 'md' | 'lg' } // data_source_type: current only support upload_file -const Icon = ({ type, size = "lg" }: ITypeIconProps) => { - const len = size === "lg" ? 32 : 24 +const Icon = ({ type, size = 'lg' }: ITypeIconProps) => { + const len = size === 'lg' ? 32 : 24 const iconMap = { upload_file: ( @@ -16,10 +17,9 @@ const Icon = ({ type, size = "lg" }: ITypeIconProps) => { - ) + ), } return iconMap[type] - } const TypeIcon: FC = ({ diff --git a/web/app/components/app/configuration/features/experience-enchance-group/index.tsx b/web/app/components/app/configuration/features/experience-enchance-group/index.tsx index 0c898cbee4..ee3f3b9ff6 100644 --- a/web/app/components/app/configuration/features/experience-enchance-group/index.tsx +++ b/web/app/components/app/configuration/features/experience-enchance-group/index.tsx @@ -1,11 +1,12 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import GroupName from '../../base/group-name' import MoreLikeThis from './more-like-this' /* -* Include +* Include * 1. More like this */ const ExperienceEnchanceGroup: FC = () => { diff --git a/web/app/components/app/configuration/features/experience-enchance-group/more-like-this/index.tsx b/web/app/components/app/configuration/features/experience-enchance-group/more-like-this/index.tsx index 91d77fee14..f63ed1c25a 100644 --- a/web/app/components/app/configuration/features/experience-enchance-group/more-like-this/index.tsx +++ b/web/app/components/app/configuration/features/experience-enchance-group/more-like-this/index.tsx @@ -1,10 +1,11 @@ 'use client' -import React, { FC } from 'react' -import Panel from '@/app/components/app/configuration/base/feature-panel' +import type { FC } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' -import MoreLikeThisIcon from '../../../base/icons/more-like-this-icon' import { XMarkIcon } from '@heroicons/react/24/outline' import { useLocalStorageState } from 'ahooks' +import MoreLikeThisIcon from '../../../base/icons/more-like-this-icon' +import Panel from '@/app/components/app/configuration/base/feature-panel' const GENERATE_NUM = 1 diff --git a/web/app/components/app/text-generate/index.tsx b/web/app/components/app/text-generate/index.tsx index 447830d801..4cacbdbd52 100644 --- a/web/app/components/app/text-generate/index.tsx +++ b/web/app/components/app/text-generate/index.tsx @@ -1,7 +1,7 @@ 'use client' import type { FC } from 'react' -import { format } from '@/service/base' import React from 'react' +import { format } from '@/service/base' export type ITextGenerationProps = { value: string @@ -16,7 +16,7 @@ const TextGeneration: FC = ({
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx index 037a6d6928..57cf9727fc 100644 --- a/web/app/components/base/app-unavailable.tsx +++ b/web/app/components/base/app-unavailable.tsx @@ -1,8 +1,9 @@ 'use client' -import React, { FC } from 'react' +import type { FC } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' -interface IAppUnavailableProps { +type IAppUnavailableProps = { code?: number isUnknwonReason?: boolean unknownReason?: string diff --git a/web/app/components/base/panel/index.tsx b/web/app/components/base/panel/index.tsx index 0b30d91778..11de390fd7 100644 --- a/web/app/components/base/panel/index.tsx +++ b/web/app/components/base/panel/index.tsx @@ -1,11 +1,11 @@ 'use client' -import React, { FC, useEffect } from 'react' +import type { FC } from 'react' +import React, { useEffect } from 'react' import cn from 'classnames' import { useBoolean } from 'ahooks' import { ChevronRightIcon } from '@heroicons/react/24/outline' - -export interface IPanelProps { +export type IPanelProps = { className?: string headerIcon: React.ReactNode title: React.ReactNode @@ -30,23 +30,21 @@ const Panel: FC = ({ foldDisabled = false, onFoldChange, controlUnFold, - controlFold + controlFold, }) => { - const [fold, { setTrue: setFold, setFalse: setUnFold, toggle: toggleFold }] = useBoolean(keepUnFold ? false : true) + const [fold, { setTrue: setFold, setFalse: setUnFold, toggle: toggleFold }] = useBoolean(!keepUnFold) useEffect(() => { onFoldChange?.(fold) }, [fold]) useEffect(() => { - if (controlUnFold) { + if (controlUnFold) setUnFold() - } }, [controlUnFold]) useEffect(() => { - if (controlFold) { + if (controlFold) setFold() - } }, [controlFold]) // overflow-hidden diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx index b6dade73d3..9f95c20161 100644 --- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx +++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx @@ -3,6 +3,8 @@ import React, { useState } from 'react' import { useRouter } from 'next/navigation' import { useTranslation } from 'react-i18next' import { useContext } from 'use-context-selector' +import cn from 'classnames' +import s from './index.module.css' import Modal from '@/app/components/base/modal' import Input from '@/app/components/base/input' import Button from '@/app/components/base/button' @@ -10,12 +12,9 @@ import Button from '@/app/components/base/button' import { ToastContext } from '@/app/components/base/toast' import { createEmptyDataset } from '@/service/datasets' -import cn from 'classnames' -import s from './index.module.css' - type IProps = { - show: boolean, - onHide: () => void, + show: boolean + onHide: () => void } const EmptyDatasetCreationModal = ({ @@ -27,7 +26,7 @@ const EmptyDatasetCreationModal = ({ const { notify } = useContext(ToastContext) const router = useRouter() - const submit = async () => { + const submit = async () => { if (!inputValue) { notify({ type: 'error', message: t('datasetCreation.stepOne.modal.nameNotEmpty') }) return @@ -43,7 +42,6 @@ const EmptyDatasetCreationModal = ({ } catch (err) { notify({ type: 'error', message: t('datasetCreation.stepOne.modal.failed') }) - return } } diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx index 434ed5e669..a9efa7a828 100644 --- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx +++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx @@ -1,16 +1,15 @@ 'use client' import React from 'react' import { useTranslation } from 'react-i18next' +import cn from 'classnames' +import s from './index.module.css' import Modal from '@/app/components/base/modal' import Button from '@/app/components/base/button' -import cn from 'classnames' -import s from './index.module.css' - type IProps = { - show: boolean, - onConfirm: () => void, - onHide: () => void, + show: boolean + onConfirm: () => void + onHide: () => void } const StopEmbeddingModal = ({ @@ -34,7 +33,7 @@ const StopEmbeddingModal = ({
{t('datasetCreation.stepThree.modelTitle')}
-
{t('datasetCreation.stepThree.modelContent')}
+
{t('datasetCreation.stepThree.modelContent')}
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx index 8d841d9f7f..cef583f33e 100644 --- a/web/app/components/develop/code.tsx +++ b/web/app/components/develop/code.tsx @@ -257,7 +257,7 @@ const CodeGroupContext = createContext(false) export function CodeGroup({ children, title, inputs, targetCode, ...props }: IChildrenProps) { const languages = Children.map(children, child => - getPanelTitle(child.props.children.props) + getPanelTitle(child.props.children.props), ) const tabGroupProps = useTabGroupProps(languages) const hasTabs = Children.count(children) > 1 diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx index ce1f95001f..455531a9fd 100644 --- a/web/app/components/develop/doc.tsx +++ b/web/app/components/develop/doc.tsx @@ -1,9 +1,9 @@ 'use client' +import { useContext } from 'use-context-selector' import TemplateEn from './template/template.en.mdx' import TemplateZh from './template/template.zh.mdx' import TemplateChatEn from './template/template_chat.en.mdx' import TemplateChatZh from './template/template_chat.zh.mdx' -import { useContext } from 'use-context-selector' import I18n from '@/context/i18n' type IDocProps = { @@ -14,20 +14,21 @@ const Doc = ({ appDetail }: IDocProps) => { const { locale } = useContext(I18n) const variables = appDetail?.model_config?.configs?.prompt_variables || [] const inputs = variables.reduce((res: any, variable: any) => { - res[variable.key] = variable.name || ''; + res[variable.key] = variable.name || '' return res }, {}) return (
- {appDetail?.mode === 'completion' ? ( - locale === 'en' ? : - ) : ( - locale === 'en' ? : - )} + {appDetail?.mode === 'completion' + ? ( + locale === 'en' ? : + ) + : ( + locale === 'en' ? : + )}
) - } export default Doc diff --git a/web/app/components/develop/md.tsx b/web/app/components/develop/md.tsx index 508a0fd7f6..0f622c9f25 100644 --- a/web/app/components/develop/md.tsx +++ b/web/app/components/develop/md.tsx @@ -22,20 +22,20 @@ export const Heading = function H2({ title, name, }: IHeaderingProps) { - let style = ''; + let style = '' switch (method) { case 'PUT': - style = 'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400'; - break; + style = 'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400' + break case 'DELETE': - style = 'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400'; - break; + style = 'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400' + break case 'POST': - style = 'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400'; - break; + style = 'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400' + break default: - style = 'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400'; - break; + style = 'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400' + break } return ( <> diff --git a/web/app/components/header/account-setting/Integrations-page/index.tsx b/web/app/components/header/account-setting/Integrations-page/index.tsx index ab27bc1f95..60b365cfe9 100644 --- a/web/app/components/header/account-setting/Integrations-page/index.tsx +++ b/web/app/components/header/account-setting/Integrations-page/index.tsx @@ -2,9 +2,9 @@ import { useTranslation } from 'react-i18next' import classNames from 'classnames' -import s from './index.module.css' import useSWR from 'swr' import Link from 'next/link' +import s from './index.module.css' import { fetchAccountIntegrates } from '@/service/common' const titleClassName = ` @@ -42,7 +42,7 @@ export default function IntegrationsPage() {
{ !integrate.is_bound && ( - diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx index 7c11ad6e54..8201eed058 100644 --- a/web/app/components/header/account-setting/members-page/operation/index.tsx +++ b/web/app/components/header/account-setting/members-page/operation/index.tsx @@ -99,7 +99,7 @@ const Operation = ({
{ ['admin', 'normal'].map(role => ( - +
handleUpdateMemberRole(role)}> { role === member.role diff --git a/web/app/components/header/app-back/index.tsx b/web/app/components/header/app-back/index.tsx index 374711eb93..b0206df122 100644 --- a/web/app/components/header/app-back/index.tsx +++ b/web/app/components/header/app-back/index.tsx @@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next' import { ArrowLeftIcon, Squares2X2Icon } from '@heroicons/react/24/solid' import type { AppDetailResponse } from '@/models/app' - type IAppBackProps = { curApp: AppDetailResponse } diff --git a/web/app/components/share/chat/value-panel/index.tsx b/web/app/components/share/chat/value-panel/index.tsx index ff4aaedab4..b9b26d8667 100644 --- a/web/app/components/share/chat/value-panel/index.tsx +++ b/web/app/components/share/chat/value-panel/index.tsx @@ -1,13 +1,13 @@ 'use client' -import React, { FC, ReactNode } from 'react' +import type { FC, ReactNode } from 'react' +import React from 'react' import cn from 'classnames' +import { useTranslation } from 'react-i18next' +import s from './style.module.css' import { StarIcon } from '@/app/components/share/chat/welcome/massive-component' import Button from '@/app/components/base/button' -import { useTranslation } from 'react-i18next' -import s from './style.module.css' - -export interface ITemplateVarPanelProps { +export type ITemplateVarPanelProps = { className?: string header: ReactNode children?: ReactNode | null @@ -18,7 +18,7 @@ const TemplateVarPanel: FC = ({ className, header, children, - isFold + isFold, }) => { return (
@@ -38,9 +38,9 @@ const TemplateVarPanel: FC = ({ ) } -export const PanelTitle: FC<{ title: string, className?: string }> = ({ +export const PanelTitle: FC<{ title: string; className?: string }> = ({ title, - className + className, }) => { return (
@@ -50,10 +50,10 @@ export const PanelTitle: FC<{ title: string, className?: string }> = ({ ) } -export const VarOpBtnGroup: FC<{ className?: string, onConfirm: () => void, onCancel: () => void }> = ({ +export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCancel: () => void }> = ({ className, onConfirm, - onCancel + onCancel, }) => { const { t } = useTranslation()