fix(components): unify code style conditional classnaming

langgenius · Dec 10, 2024 · d7b1c65 · d7b1c65
1 parent 28231d3
commit d7b1c65
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 56 deletions.
diff --git a/web/app/account/avatar.tsx b/web/app/account/avatar.tsx
@@ -7,7 +7,7 @@ import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
-
+import cn from '@/utils/classnames'
 export type IAppSelector = {
   isMobile: boolean
 }
@@ -37,13 +37,10 @@ export default function AppSelector() {
           <>
             <div>
               <Menu.Button
-                className={`
-                    inline-flex items-center
-                    rounded-[20px] p-1x text-sm
-                  text-gray-700 hover:bg-gray-200
-                    mobile:px-1
-                    ${open && 'bg-gray-200'}
-                  `}
+                className={cn(
+                  'inline-flex items-center rounded-[20px] p-1x text-sm text-gray-700 hover:bg-gray-200 mobile:px1',
+                  { 'bg-gray-200': open },
+                )}
               >
                 <Avatar name={userProfile.name} size={32} />
               </Menu.Button>

diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
@@ -187,10 +187,7 @@ const Annotation: FC<Props> = ({
                     <div className='flex items-center pl-1.5'>
                       <div className='shrink-0 mr-1 w-[1px] h-3.5 bg-gray-200'></div>
                       <div
-                        className={`
-                      shrink-0  h-7 w-7 flex items-center justify-center
-                      text-xs text-gray-700 font-medium 
-                    `}
+                        className='shrink-0  h-7 w-7 flex items-center justify-center text-xs text-gray-700 font-medium'
                         onClick={() => { setIsShowEdit(true) }}
                       >
                         <div className='flex h-6 w-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-200'>

diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
@@ -27,7 +27,7 @@ import { FileText } from '@/app/components/base/icons/src/vender/line/files'
 import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
 import type { InputVar } from '@/app/components/workflow/types'
 import { appDefaultIconBackground } from '@/config'
-
+import cn from '@/utils/classnames'
 export type AppPublisherProps = {
   disabled?: boolean
   publishDisabled?: boolean
@@ -155,10 +155,10 @@ const AppPublisher = ({
                     {t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
                   </div>
                   <Button
-                    className={`
-                      ml-2 px-2 text-primary-600
-                      ${published && 'text-primary-300 border-gray-100'}
-                    `}
+                    className={cn(
+                      'ml-2 px-2 text-primary-600',
+                      { 'text-primary-300 border-gray-100': published },
+                    )}
                     size='small'
                     onClick={handleRestore}
                     disabled={published}

diff --git a/web/app/components/app/configuration/base/var-highlight/index.tsx b/web/app/components/app/configuration/base/var-highlight/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 export type IVarHighlightProps = {
   name: string
@@ -16,7 +16,11 @@ const VarHighlight: FC<IVarHighlightProps> = ({
   return (
     <div
       key={name}
-      className={`${s.item} ${className} flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600`}
+      className={cn(
+        s.item,
+        className,
+        'flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600',
+      )}
     >
       <span className='opacity-60'>{'{{'}</span>
       <span>{name}</span>

diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
@@ -10,6 +10,7 @@ import { useBoolean, useGetState } from 'ahooks'
 import { clone, isEqual } from 'lodash-es'
 import { CodeBracketIcon } from '@heroicons/react/20/solid'
 import { useShallow } from 'zustand/react/shallow'
+import cn from '@/utils/classnames'
 import AgentSettingButton from '@/app/components/app/configuration/config/agent-setting-button'
 import useAdvancedPromptConfig from '@/app/components/app/configuration/hooks/use-advanced-prompt-config'
 import EditHistoryModal from '@/app/components/app/configuration/config-prompt/conversation-history/edit-modal'
@@ -936,7 +937,12 @@ const Configuration: FC = () => {
                   </div>
                 </div>
               </div>
-              <div className={`w-full sm:w-1/2 shrink-0 flex flex-col h-full ${debugWithMultipleModel && 'max-w-[560px]'}`}>
+              <div
+                className={cn(
+                  'w-full sm:w-1/2 shrink-0 flex flex-col h-full',
+                  { 'max-w-[560px]': debugWithMultipleModel },
+                )}
+              >
                 <Config />
               </div>
               {!isMobile && <div className="relative flex flex-col w-1/2 h-full overflow-y-auto grow " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>

diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -10,6 +10,7 @@ import { getLastAnswer } from '../utils'
 import { useChatWithHistoryContext } from './context'
 import Header from './header'
 import ConfigPanel from './config-panel'
+import cn from '@/utils/classnames'
 import {
   fetchSuggestedQuestions,
   getUrl,
@@ -127,7 +128,10 @@ const ChatWrapper = () => {
           />
           {
             !currentConversationId && (
-              <div className={`mx-auto w-full max-w-[720px] ${isMobile && 'px-4'}`}>
+              <div className={cn('mx-auto w-full max-w-[720px]', {
+                'px-4': isMobile,
+              })}>
+
                 <div className='mb-6' />
                 <ConfigPanel />
                 <div

diff --git a/web/app/components/base/chat/chat-with-history/header.tsx b/web/app/components/base/chat/chat-with-history/header.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
+import cn from '@/utils/classnames'
 
 type HeaderProps = {
   title: string
@@ -11,11 +12,13 @@ const Header: FC<HeaderProps> = ({
 }) => {
   return (
     <div
-      className={`
-      sticky top-0 flex items-center px-8 h-16 bg-white/80 text-base font-medium 
-      text-gray-900 border-b-[0.5px] border-b-gray-100 backdrop-blur-md z-10
-      ${isMobile && '!h-12'}
-      `}
+      className={cn(
+        'sticky top-0 flex items-center px-8 h-16 bg-white/80 text-base font-medium',
+        'text-gray-900 border-b-[0.5px] border-b-gray-100 backdrop-blur-md z-10',
+        {
+          '!h-12': isMobile,
+        },
+      )}
     >
       {title}
     </div>

diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx
@@ -14,6 +14,7 @@ import Sidebar from './sidebar'
 import HeaderInMobile from './header-in-mobile'
 import ConfigPanel from './config-panel'
 import ChatWrapper from './chat-wrapper'
+import cn from '@/utils/classnames'
 import type { InstalledApp } from '@/models/explore'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -38,7 +39,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     themeBuilder,
   } = useChatWithHistoryContext()
 
-  const chatReady = (!showConfigPanelBeforeChat || !!appPrevChatList.length)
+  const chatReady = !showConfigPanelBeforeChat || !!appPrevChatList.length
   const customConfig = appData?.custom_config
   const site = appData?.site
 
@@ -65,35 +66,40 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
   }
 
   return (
-    <div className={`h-full flex bg-white ${className} ${isMobile && 'flex-col'}`}>
-      {
-        !isMobile && (
-          <Sidebar />
-        )
-      }
-      {
-        isMobile && (
-          <HeaderInMobile />
-        )
-      }
-      <div className={`grow overflow-hidden ${showConfigPanelBeforeChat && !appPrevChatList.length && 'flex items-center justify-center'}`}>
-        {
-          showConfigPanelBeforeChat && !appChatListDataLoading && !appPrevChatList.length && (
-            <div className={`flex w-full items-center justify-center h-full ${isMobile && 'px-4'}`}>
-              <ConfigPanel />
-            </div>
-          )
-        }
-        {
-          appChatListDataLoading && chatReady && (
-            <Loading type='app' />
-          )
-        }
-        {
-          chatReady && !appChatListDataLoading && (
-            <ChatWrapper key={chatShouldReloadKey} />
-          )
-        }
+    <div
+      className={cn('h-full flex bg-white', className, {
+        'flex-col': isMobile,
+      })}
+    >
+      {!isMobile && <Sidebar />}
+      {isMobile && <HeaderInMobile />}
+      <div
+        className={
+          cn(
+            'grow overflow-hidden',
+            {
+              'flex items-center justify-center':
+              showConfigPanelBeforeChat && !appPrevChatList.length,
+            })}
+      >
+        {showConfigPanelBeforeChat
+          && !appChatListDataLoading
+          && !appPrevChatList.length && (
+          <div
+            className={cn(
+              'flex w-full items-center justify-center h-full',
+              {
+                'px-4': isMobile,
+              },
+            )}
+          >
+            <ConfigPanel />
+          </div>
+        )}
+        {appChatListDataLoading && chatReady && <Loading type="app" />}
+        {chatReady && !appChatListDataLoading && (
+          <ChatWrapper key={chatShouldReloadKey} />
+        )}
       </div>
     </div>
   )