Feat: web app dark mode (#14732)

web/app/components/share/text-generation/index.tsx

@@ -3,18 +3,16 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  RiBookmark3Line,
   RiErrorWarningFill,
 } from '@remixicon/react'
-import { useBoolean, useClickAway } from 'ahooks'
-import { XMarkIcon } from '@heroicons/react/24/outline'
+import { useBoolean } from 'ahooks'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import TabHeader from '../../base/tab-header'
-import Button from '../../base/button'
 import { checkOrSetAccessToken } from '../utils'
-import s from './style.module.css'
+import MenuDropdown from './menu-dropdown'
 import RunBatch from './run-batch'
 import ResDownload from './run-batch/res-download'
-import cn from '@/utils/classnames'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import RunOnce from '@/app/components/share/text-generation/run-once'
 import { fetchSavedMessage as doFetchSavedMessage, fetchAppInfo, fetchAppParams, removeMessage, saveMessage } from '@/service/share'
@@ -26,6 +24,7 @@ import type {
   TextToSpeechConfig,
 } from '@/models/debug'
 import AppIcon from '@/app/components/base/app-icon'
+import Badge from '@/app/components/base/badge'
 import { changeLanguage } from '@/i18n/i18next-config'
 import Loading from '@/app/components/base/loading'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
@@ -37,6 +36,8 @@ import Toast from '@/app/components/base/toast'
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { Resolution, TransferMethod } from '@/types/app'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
+import LogoSite from '@/app/components/base/logo/logo-site'
+import cn from '@/utils/classnames'
 
 const GROUP_SIZE = 5 // to avoid RPM(Request per minute) limit. The group task finished then the next group.
 enum TaskStatus {
@@ -72,8 +73,6 @@ const TextGeneration: FC<IMainProps> = ({
   const { t } = useTranslation()
   const media = useBreakpoints()
   const isPC = media === MediaType.pc
-  const isTablet = media === MediaType.tablet
-  const isMobile = media === MediaType.mobile
 
   const searchParams = useSearchParams()
   const mode = searchParams.get('mode') || 'create'
@@ -102,6 +101,7 @@ const TextGeneration: FC<IMainProps> = ({
   const [appId, setAppId] = useState<string>('')
   const [siteInfo, setSiteInfo] = useState<SiteInfo | null>(null)
   const [canReplaceLogo, setCanReplaceLogo] = useState<boolean>(false)
+  const [customConfig, setCustomConfig] = useState<Record<string, any> | null>(null)
   const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
   const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
   const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig | null>(null)
@@ -142,7 +142,7 @@ const TextGeneration: FC<IMainProps> = ({
     setAllTaskList([]) // clear batch task running status
 
     // eslint-disable-next-line ts/no-use-before-define
-    showResSidebar()
+    showResultPanel()
   }
 
   const [controlRetry, setControlRetry] = useState(0)
@@ -323,7 +323,7 @@ const TextGeneration: FC<IMainProps> = ({
     setControlStopResponding(Date.now())
 
     // eslint-disable-next-line ts/no-use-before-define
-    showResSidebar()
+    showResultPanel()
   }
   const handleCompleted = (completionRes: string, taskId?: number, isSuccess?: boolean) => {
     const allTaskListLatest = getLatestTaskList()
@@ -388,10 +388,11 @@ const TextGeneration: FC<IMainProps> = ({
   useEffect(() => {
     (async () => {
       const [appData, appParams]: any = await fetchInitData()
-      const { app_id: appId, site: siteInfo, can_replace_logo } = appData
+      const { app_id: appId, site: siteInfo, can_replace_logo, custom_config } = appData
       setAppId(appId)
       setSiteInfo(siteInfo as SiteInfo)
       setCanReplaceLogo(can_replace_logo)
+      setCustomConfig(custom_config)
       changeLanguage(siteInfo.default_language)
 
       const { user_input_form, more_like_this, file_upload, text_to_speech }: any = appParams
@@ -431,24 +432,21 @@ const TextGeneration: FC<IMainProps> = ({
     icon_url: siteInfo?.icon_url,
   })
 
-  const [isShowResSidebar, { setTrue: doShowResSidebar, setFalse: hideResSidebar }] = useBoolean(false)
-  const showResSidebar = () => {
+  const [isShowResultPanel, { setTrue: doShowResultPanel, setFalse: hideResultPanel }] = useBoolean(false)
+  const showResultPanel = () => {
     // fix: useClickAway hideResSidebar will close sidebar
     setTimeout(() => {
-      doShowResSidebar()
+      doShowResultPanel()
     }, 0)
   }
-  const resRef = useRef<HTMLDivElement>(null)
-  useClickAway(() => {
-    hideResSidebar()
-  }, resRef)
+  const [resultExisted, setResultExisted] = useState(false)
 
   const renderRes = (task?: Task) => (<Res
     key={task?.id}
     isWorkflow={isWorkflow}
     isCallBatchAPI={isCallBatchAPI}
     isPC={isPC}
-    isMobile={isMobile}
+    isMobile={!isPC}
     isInstalledApp={isInstalledApp}
     installedAppInfo={installedAppInfo}
     isError={task?.status === TaskStatus.failed}
@@ -458,7 +456,7 @@ const TextGeneration: FC<IMainProps> = ({
     controlSend={controlSend}
     controlRetry={task?.status === TaskStatus.failed ? controlRetry : 0}
     controlStopResponding={controlStopResponding}
-    onShowRes={showResSidebar}
+    onShowRes={showResultPanel}
     handleSaveMessage={handleSaveMessage}
     taskId={task?.id}
     onCompleted={handleCompleted}
@@ -466,77 +464,60 @@ const TextGeneration: FC<IMainProps> = ({
     completionFiles={completionFiles}
     isShowTextToSpeech={!!textToSpeechConfig?.enabled}
     siteInfo={siteInfo}
+    onRunStart={() => setResultExisted(true)}
   />)
 
   const renderBatchRes = () => {
     return (showTaskList.map(task => renderRes(task)))
   }
 
-  const resWrapClassNames = (() => {
-    if (isPC)
-      return 'grow h-full'
-
-    if (!isShowResSidebar)
-      return 'none'
-
-    return cn('fixed z-50 inset-0', isTablet ? 'pl-[128px]' : 'pl-6')
-  })()
-
   const renderResWrap = (
     <div
-      ref={resRef}
-      className={
-        cn(
-          'flex flex-col h-full shrink-0',
-          isPC ? 'px-10 py-8' : 'bg-gray-50',
-          isTablet && 'p-6', isMobile && 'p-4')
-      }
+      className={cn(
+        'relative flex flex-col h-full',
+        !isPC && 'h-[calc(100vh_-_36px)] rounded-t-2xl shadow-lg backdrop-blur-sm',
+        !isPC
+          ? isShowResultPanel
+            ? 'bg-background-default-burn'
+            : 'bg-components-panel-bg border-t-[0.5px] border-divider-regular'
+          : 'bg-chatbot-bg',
+      )}
     >
-      <>
-        <div className='flex items-center justify-between shrink-0'>
-          <div className='flex items-center space-x-3'>
-            <div className={s.starIcon}></div>
-            <div className='text-lg font-semibold text-gray-800'>{t('share.generation.title')}</div>
-          </div>
-          <div className='flex items-center space-x-2'>
-            {allFailedTaskList.length > 0 && (
-              <div className='flex items-center'>
-                <RiErrorWarningFill className='w-4 h-4 text-[#D92D20]' />
-                <div className='ml-1 text-[#D92D20]'>{t('share.generation.batchFailed.info', { num: allFailedTaskList.length })}</div>
-                <Button
-                  variant='primary'
-                  className='ml-2'
-                  onClick={handleRetryAllFailedTask}
-                >{t('share.generation.batchFailed.retry')}</Button>
-                <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>
-              </div>
-            )}
-            {allSuccessTaskList.length > 0 && (
-              <ResDownload
-                isMobile={isMobile}
-                values={exportRes}
-              />
-            )}
-            {!isPC && (
-              <div
-                className='flex items-center justify-center cursor-pointer'
-                onClick={hideResSidebar}
-              >
-                <XMarkIcon className='w-4 h-4 text-gray-800' />
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className='overflow-y-auto grow'>
-          {!isCallBatchAPI ? renderRes() : renderBatchRes()}
-          {!noPendingTask && (
-            <div className='mt-4'>
-              <Loading type='area' />
-            </div>
+      {isCallBatchAPI && (
+        <div className={cn(
+          'shrink-0 px-14 pt-9 pb-2 flex items-center justify-between',
+          !isPC && 'px-4 pt-3 pb-1',
+        )}>
+          <div className='text-text-primary system-md-semibold-uppercase'>{t('share.generation.executions', { num: allTaskList.length })}</div>
+          {allSuccessTaskList.length > 0 && (
+            <ResDownload
+              isMobile={!isPC}
+              values={exportRes}
+            />
           )}
         </div>
-      </>
+      )}
+      <div className={cn(
+        'grow flex flex-col h-0 overflow-y-auto',
+        isPC && 'px-14 py-8',
+        isPC && isCallBatchAPI && 'pt-0',
+        !isPC && 'p-0 pb-2',
+      )}>
+        {!isCallBatchAPI ? renderRes() : renderBatchRes()}
+        {!noPendingTask && (
+          <div className='mt-4'>
+            <Loading type='area' />
+          </div>
+        )}
+      </div>
+      {isCallBatchAPI && allFailedTaskList.length > 0 && (
+        <div className='z-10 absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 p-3 rounded-xl bg-components-panel-bg-blur backdrop-blur-sm border border-components-panel-border shadow-lg'>
+          <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+          <div className='text-text-secondary system-sm-medium'>{t('share.generation.batchFailed.info', { num: allFailedTaskList.length })}</div>
+          <div className='w-px h-3.5 bg-divider-regular'></div>
+          <div onClick={handleRetryAllFailedTask} className='text-text-accent system-sm-semibold-uppercase cursor-pointer'>{t('share.generation.batchFailed.retry')}</div>
+        </div>
+      )}
     </div>
   )
 
@@ -548,46 +529,34 @@ const TextGeneration: FC<IMainProps> = ({
   }
 
   return (
-    <>
+    <div className={cn(
+      'bg-background-default-burn',
+      isPC && 'flex',
+      !isPC && 'flex-col',
+      isInstalledApp ? 'h-full rounded-2xl shadow-md' : 'h-screen',
+    )}>
+      {/* Left */}
       <div className={cn(
-        isPC && 'flex',
-        isInstalledApp ? s.installedApp : 'h-screen',
-        'bg-gray-50',
+        'shrink-0 relative flex flex-col h-full',
+        isPC ? 'w-[600px] max-w-[50%]' : resultExisted ? 'h-[calc(100%_-_64px)]' : '',
+        isInstalledApp && 'rounded-l-2xl',
       )}>
-        {/* Left */}
-        <div className={cn(
-          isPC ? 'w-[600px] max-w-[50%] p-8' : 'p-4',
-          isInstalledApp && 'rounded-l-2xl',
-          'shrink-0 relative flex flex-col pb-10 h-full border-r border-gray-100 bg-white',
-        )}>
-          <div className='mb-6'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center space-x-3'>
-                <AppIcon
-                  size="small"
-                  iconType={siteInfo.icon_type}
-                  icon={siteInfo.icon}
-                  background={siteInfo.icon_background || appDefaultIconBackground}
-                  imageUrl={siteInfo.icon_url}
-                />
-                <div className='text-lg font-semibold text-gray-800'>{siteInfo.title}</div>
-              </div>
-              {!isPC && (
-                <Button
-                  className='shrink-0 ml-2'
-                  onClick={showResSidebar}
-                >
-                  <div className='flex items-center space-x-2 text-primary-600 text-[13px] font-medium'>
-                    <div className={s.starIcon}></div>
-                    <span>{t('share.generation.title')}</span>
-                  </div>
-                </Button>
-              )}
-            </div>
-            {siteInfo.description && (
-              <div className='mt-2 text-xs text-gray-500'>{siteInfo.description}</div>
-            )}
+        {/* header */}
+        <div className={cn('shrink-0 space-y-4 border-b border-divider-subtle', isPC ? 'p-8 pb-0 bg-components-panel-bg' : 'p-4 pb-0')}>
+          <div className='flex items-center gap-3'>
+            <AppIcon
+              size={isPC ? 'large' : 'small'}
+              iconType={siteInfo.icon_type}
+              icon={siteInfo.icon}
+              background={siteInfo.icon_background || appDefaultIconBackground}
+              imageUrl={siteInfo.icon_url}
+            />
+            <div className='grow text-text-secondary system-md-semibold truncate'>{siteInfo.title}</div>
+            <MenuDropdown data={siteInfo} />
           </div>
+          {siteInfo.description && (
+            <div className='system-xs-regular text-text-tertiary'>{siteInfo.description}</div>
+          )}
           <TabHeader
             items={[
               { id: 'create', name: t('share.generation.tabs.create') },
@@ -597,11 +566,12 @@ const TextGeneration: FC<IMainProps> = ({
                   id: 'saved',
                   name: t('share.generation.tabs.saved'),
                   isRight: true,
+                  icon: <RiBookmark3Line className='w-4 h-4' />,
                   extra: savedMessages.length > 0
                     ? (
-                      <div className='ml-1 flex items-center h-5 px-1.5 rounded-md border border-gray-200 text-gray-500 text-xs font-medium'>
+                      <Badge className='ml-1'>
                         {savedMessages.length}
-                      </div>
+                      </Badge>
                     )
                     : null,
                 }]
@@ -610,72 +580,89 @@ const TextGeneration: FC<IMainProps> = ({
             value={currentTab}
             onChange={setCurrentTab}
           />
-          <div className='h-20 overflow-y-auto grow'>
-            <div className={cn(currentTab === 'create' ? 'block' : 'hidden')}>
-              <RunOnce
-                siteInfo={siteInfo}
-                inputs={inputs}
-                inputsRef={inputsRef}
-                onInputsChange={setInputs}
-                promptConfig={promptConfig}
-                onSend={handleSend}
-                visionConfig={visionConfig}
-                onVisionFilesChange={setCompletionFiles}
-              />
-            </div>
-            <div className={cn(isInBatchTab ? 'block' : 'hidden')}>
-              <RunBatch
-                vars={promptConfig.prompt_variables}
-                onSend={handleRunBatch}
-                isAllFinished={allTasksRun}
-              />
-            </div>
-
-            {currentTab === 'saved' && (
-              <SavedItems
-                className='mt-4'
-                isShowTextToSpeech={textToSpeechConfig?.enabled}
-                list={savedMessages}
-                onRemove={handleRemoveSavedMessage}
-                onStartCreateContent={() => setCurrentTab('create')}
-              />
-            )}
+        </div>
+        {/* form */}
+        <div className={cn(
+          'grow h-0 bg-components-panel-bg overflow-y-auto',
+          isPC ? 'px-8' : 'px-4',
+          !isPC && resultExisted && customConfig?.remove_webapp_brand && 'rounded-b-2xl border-b-[0.5px] border-divider-regular',
+        )}>
+          <div className={cn(currentTab === 'create' ? 'block' : 'hidden')}>
+            <RunOnce
+              siteInfo={siteInfo}
+              inputs={inputs}
+              inputsRef={inputsRef}
+              onInputsChange={setInputs}
+              promptConfig={promptConfig}
+              onSend={handleSend}
+              visionConfig={visionConfig}
+              onVisionFilesChange={setCompletionFiles}
+            />
           </div>
-
-          {/* copyright */}
+          <div className={cn(isInBatchTab ? 'block' : 'hidden')}>
+            <RunBatch
+              vars={promptConfig.prompt_variables}
+              onSend={handleRunBatch}
+              isAllFinished={allTasksRun}
+            />
+          </div>
+          {currentTab === 'saved' && (
+            <SavedItems
+              className={cn(isPC ? 'mt-6' : 'mt-4')}
+              isShowTextToSpeech={textToSpeechConfig?.enabled}
+              list={savedMessages}
+              onRemove={handleRemoveSavedMessage}
+              onStartCreateContent={() => setCurrentTab('create')}
+            />
+          )}
+        </div>
+        {/* powered by */}
+        {!customConfig?.remove_webapp_brand && (
           <div className={cn(
-            isInstalledApp ? 'left-[248px]' : 'left-8',
-            'fixed  bottom-4  flex space-x-2 text-gray-400 font-normal text-xs',
+            'shrink-0 py-3 flex items-center gap-1.5 bg-components-panel-bg',
+            isPC ? 'px-8' : 'px-4',
+            !isPC && resultExisted && 'rounded-b-2xl border-b-[0.5px] border-divider-regular',
           )}>
-            {siteInfo.copyright && (
-              <div className="">© {(new Date()).getFullYear()} {siteInfo.copyright}</div>
+            <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('share.chat.poweredBy')}</div>
+            {customConfig?.replace_webapp_logo && (
+              <img src={customConfig?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
             )}
-            {siteInfo.privacy_policy && (
-              <>
-                {siteInfo.copyright && <div>·</div>}
-                <div>{t('share.chat.privacyPolicyLeft')}
-                  <a
-                    className='text-gray-500 px-1'
-                    href={siteInfo.privacy_policy}
-                    target='_blank' rel='noopener noreferrer'>{t('share.chat.privacyPolicyMiddle')}</a>
-                  {t('share.chat.privacyPolicyRight')}
-                </div>
-              </>
+            {!customConfig?.replace_webapp_logo && (
+              <LogoSite className='!h-5' />
             )}
           </div>
-        </div>
-
-        {/* Result */}
-        <div
-          className={resWrapClassNames}
-          style={{
-            background: (!isPC && isShowResSidebar) ? 'rgba(35, 56, 118, 0.2)' : 'none',
-          }}
-        >
-          {renderResWrap}
-        </div>
+        )}
       </div>
-    </>
+      {/* Result */}
+      <div className={cn(
+        isPC
+          ? 'grow h-full'
+          : isShowResultPanel
+            ? 'fixed z-50 inset-0 bg-background-overlay backdrop-blur-sm'
+            : resultExisted
+              ? 'relative shrink-0 h-16 pt-2.5 bg-background-default-burn overflow-hidden'
+              : '',
+      )}>
+        {!isPC && (
+          <div
+            className={cn(
+              isShowResultPanel
+                ? 'p-2 pt-6 flex items-center justify-center'
+                : 'z-10 absolute top-0 left-0 w-full px-2 pt-[3px] pb-[57px] flex items-center justify-center',
+            )}
+            onClick={() => {
+              if (isShowResultPanel)
+                hideResultPanel()
+              else
+                showResultPanel()
+            }}
+          >
+            <div className='w-8 h-1 rounded bg-divider-solid cursor-grab'/>
+          </div>
+        )}
+        {renderResWrap}
+      </div>
+    </div>
   )
 }