From eddf4eeac6bc3adcc57869c243d6948e778a7438 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Thu, 10 Apr 2025 10:50:49 +0800
Subject: [PATCH] feat: webapp supports login and logout

---
 web/app/(shareLayout)/webapp-signin/page.tsx  |  21 ++--
 .../chat/chat-with-history/sidebar/index.tsx  |  14 ++-
 .../share/text-generation/index.tsx           |  24 ++--
 .../share/text-generation/info-modal.tsx      |  49 ++++++++
 .../share/text-generation/menu-dropdown.tsx   | 107 ++++++++++++++++++
 web/service/share.ts                          |   5 -
 6 files changed, 189 insertions(+), 31 deletions(-)
 create mode 100644 web/app/components/share/text-generation/info-modal.tsx
 create mode 100644 web/app/components/share/text-generation/menu-dropdown.tsx

diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index 12f4152c6f..f3ca649468 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/page.tsx
@@ -2,13 +2,17 @@
 import { useRouter, useSearchParams } from 'next/navigation'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import Toast from '@/app/components/base/toast'
-import { fetchSystemFeatures, fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
+import { fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
 import { setAccessToken } from '@/app/components/share/utils'
-import Loading from '@/app/components/base/loading'
+import Button from '@/app/components/base/button'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const WebSSOForm: FC = () => {
+  const { t } = useTranslation()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const searchParams = useSearchParams()
   const router = useRouter()
 
@@ -42,14 +46,14 @@ const WebSSOForm: FC = () => {
     router.push(redirectUrl)
   }
 
-  const handleSSOLogin = async (protocol: string) => {
+  const handleSSOLogin = async () => {
     const appCode = getAppCodeFromRedirectUrl()
     if (!appCode || !redirectUrl) {
       showErrorToast('redirect url or app code is invalid.')
       return
     }
 
-    switch (protocol) {
+    switch (systemFeatures.sso_enforced_for_web_protocol) {
       case 'saml': {
         const samlRes = await fetchWebSAMLSSOUrl(appCode, redirectUrl)
         router.push(samlRes.url)
@@ -72,18 +76,13 @@ const WebSSOForm: FC = () => {
 
   useEffect(() => {
     const init = async () => {
-      const res = await fetchSystemFeatures()
-      const protocol = res.sso_enforced_for_web_protocol
-
       if (message) {
         showErrorToast(message)
         return
       }
 
-      if (!tokenFromUrl) {
-        await handleSSOLogin(protocol)
+      if (!tokenFromUrl)
         return
-      }
 
       await processTokenAndRedirect()
     }
@@ -94,7 +93,7 @@ const WebSSOForm: FC = () => {
   return (
     <div className="flex items-center justify-center h-full">
       <div className={cn('flex flex-col items-center w-full grow justify-center', 'px-6', 'md:px-[108px]')}>
-        <Loading type='area' />
+        <Button variant='primary' onClick={() => { handleSSOLogin() }}>{t('login.withSSO')}</Button>
       </div>
     </div>
   )
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 69716f9ed8..a4d0af3388 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -11,6 +11,7 @@ import { Edit05 } from '@/app/components/base/icons/src/vender/line/general'
 import type { ConversationItem } from '@/models/share'
 import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
+import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 
 const Sidebar = () => {
   const { t } = useTranslation()
@@ -115,11 +116,14 @@ const Sidebar = () => {
           )
         }
       </div>
-      {appData?.site.copyright && (
-        <div className='px-4 pb-4 text-xs text-gray-400'>
-          © {(new Date()).getFullYear()} {appData?.site.copyright}
-        </div>
-      )}
+      <div className='flex items-center justify-between px-4 pb-4 '>
+        <MenuDropdown placement='top-start' data={appData?.site} />
+        {appData?.site.copyright && (
+          <div className='text-xs text-gray-400 truncate'>
+            © {(new Date()).getFullYear()} {appData?.site.copyright}
+          </div>
+        )}
+      </div>
       {!!showConfirm && (
         <Confirm
           title={t('share.chat.deleteConversation.title')}
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index c54601aa7c..34c6ce41a6 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -14,6 +14,7 @@ import { checkOrSetAccessToken } from '../utils'
 import s from './style.module.css'
 import RunBatch from './run-batch'
 import ResDownload from './run-batch/res-download'
+import MenuDropdown from './menu-dropdown'
 import cn from '@/utils/classnames'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import RunOnce from '@/app/components/share/text-generation/run-once'
@@ -558,16 +559,19 @@ const TextGeneration: FC<IMainProps> = ({
           '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 className='flex items-center'>
+              <div className='flex grow'>
+                <div className='flex items-center space-x-3 grow'>
+                  <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>
+                <MenuDropdown />
               </div>
               {!isPC && (
                 <Button
diff --git a/web/app/components/share/text-generation/info-modal.tsx b/web/app/components/share/text-generation/info-modal.tsx
new file mode 100644
index 0000000000..156270fc85
--- /dev/null
+++ b/web/app/components/share/text-generation/info-modal.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import cn from 'classnames'
+import Modal from '@/app/components/base/modal'
+import AppIcon from '@/app/components/base/app-icon'
+import type { SiteInfo } from '@/models/share'
+import { appDefaultIconBackground } from '@/config'
+
+type Props = {
+  data?: SiteInfo
+  isShow: boolean
+  onClose: () => void
+}
+
+const InfoModal = ({
+  isShow,
+  onClose,
+  data,
+}: Props) => {
+  return (
+    <Modal
+      isShow={isShow}
+      onClose={onClose}
+      className='min-w-[400px] max-w-[400px] !p-0'
+      closable
+    >
+      <div className={cn('flex flex-col items-center gap-4 px-4 pb-8 pt-10')}>
+        <AppIcon
+          size='xxl'
+          iconType={data?.icon_type}
+          icon={data?.icon}
+          background={data?.icon_background || appDefaultIconBackground}
+          imageUrl={data?.icon_url}
+        />
+        <div className='system-xl-semibold text-text-secondary'>{data?.title}</div>
+        <div className='system-xs-regular text-text-tertiary'>
+          {/* copyright */}
+          {data?.copyright && (
+            <div>© {(new Date()).getFullYear()} {data?.copyright}</div>
+          )}
+          {data?.custom_disclaimer && (
+            <div className='mt-2'>{data.custom_disclaimer}</div>
+          )}
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default InfoModal
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
new file mode 100644
index 0000000000..5c9d035e06
--- /dev/null
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -0,0 +1,107 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Placement } from '@floating-ui/react'
+import {
+  RiEqualizer2Line,
+} from '@remixicon/react'
+import { useRouter } from 'next/navigation'
+import Divider from '../../base/divider'
+import { removeAccessToken } from '../utils'
+import InfoModal from './info-modal'
+import ActionButton from '@/app/components/base/action-button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { SiteInfo } from '@/models/share'
+import cn from '@/utils/classnames'
+
+type Props = {
+  data?: SiteInfo
+  placement?: Placement
+}
+
+const MenuDropdown: FC<Props> = ({
+  data,
+  placement,
+}) => {
+  const router = useRouter()
+  const { t } = useTranslation()
+  const [open, doSetOpen] = useState(false)
+  const openRef = useRef(open)
+  const setOpen = useCallback((v: boolean) => {
+    doSetOpen(v)
+    openRef.current = v
+  }, [doSetOpen])
+
+  const handleTrigger = useCallback(() => {
+    setOpen(!openRef.current)
+  }, [setOpen])
+
+  const handleLogout = useCallback(() => {
+    removeAccessToken()
+    router.replace(`/webapp-signin?redirect_url=${window.location.href}`)
+  }, [])
+
+  const [show, setShow] = useState(false)
+
+  return (
+    <>
+      <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
+        placement={placement || 'bottom-end'}
+        offset={{
+          mainAxis: 4,
+          crossAxis: -4,
+        }}
+      >
+        <PortalToFollowElemTrigger onClick={handleTrigger}>
+          <div>
+            <ActionButton size='l' className={cn(open && 'bg-state-base-hover')}>
+              <RiEqualizer2Line className='h-[18px] w-[18px]' />
+            </ActionButton>
+          </div>
+        </PortalToFollowElemTrigger>
+        <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='p-1'>
+              {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'>
+                  <span className='grow'>{t('share.chat.privacyPolicyMiddle')}</span>
+                </a>
+              )}
+              <div
+                onClick={() => {
+                  handleTrigger()
+                  setShow(true)
+                }}
+                className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
+              >{t('common.userProfile.about')}</div>
+              <Divider />
+              <div
+                onClick={() => {
+                  handleLogout()
+                }}
+                className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-destructive hover:bg-state-base-hover'
+              >{t('common.userProfile.logout')}</div>
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+      {show && (
+        <InfoModal
+          isShow={show}
+          onClose={() => {
+            setShow(false)
+          }}
+          data={data}
+        />
+      )}
+    </>
+  )
+}
+export default React.memo(MenuDropdown)
diff --git a/web/service/share.ts b/web/service/share.ts
index 0e46e30d01..f9d4ccccc0 100644
--- a/web/service/share.ts
+++ b/web/service/share.ts
@@ -11,7 +11,6 @@ import type {
   ConversationItem,
 } from '@/models/share'
 import type { ChatConfig } from '@/app/components/base/chat/types'
-import type { SystemFeatures } from '@/types/feature'
 
 function getAction(action: 'get' | 'post' | 'del' | 'patch', isInstalledApp: boolean) {
   switch (action) {
@@ -144,10 +143,6 @@ export const fetchAppParams = async (isInstalledApp: boolean, installedAppId = '
   return (getAction('get', isInstalledApp))(getUrl('parameters', isInstalledApp, installedAppId)) as Promise<ChatConfig>
 }
 
-export const fetchSystemFeatures = async () => {
-  return (getAction('get', false))(getUrl('system-features', false, '')) as Promise<SystemFeatures>
-}
-
 export const fetchWebSAMLSSOUrl = async (appCode: string, redirectUrl: string) => {
   return (getAction('get', false))(getUrl('/enterprise/sso/saml/login', false, ''), {
     params: {