appCard.tsx 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. 'use client'
  2. import type { HTMLProps } from 'react'
  3. import React, { useMemo, useState } from 'react'
  4. import {
  5. Cog8ToothIcon,
  6. DocumentTextIcon,
  7. PaintBrushIcon,
  8. RocketLaunchIcon,
  9. } from '@heroicons/react/24/outline'
  10. import { usePathname, useRouter } from 'next/navigation'
  11. import { useTranslation } from 'react-i18next'
  12. import SettingsModal from './settings'
  13. import EmbeddedModal from './embedded'
  14. import CustomizeModal from './customize'
  15. import style from './style.module.css'
  16. import type { ConfigParams } from './settings'
  17. import Tooltip from '@/app/components/base/tooltip'
  18. import AppBasic from '@/app/components/app-sidebar/basic'
  19. import { asyncRunSafe, randomString } from '@/utils'
  20. import Button from '@/app/components/base/button'
  21. import Tag from '@/app/components/base/tag'
  22. import Switch from '@/app/components/base/switch'
  23. import Divider from '@/app/components/base/divider'
  24. import CopyFeedback from '@/app/components/base/copy-feedback'
  25. import ShareQRCode from '@/app/components/base/qrcode'
  26. import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
  27. import type { AppDetailResponse } from '@/models/app'
  28. import { useAppContext } from '@/context/app-context'
  29. export type IAppCardProps = {
  30. className?: string
  31. appInfo: AppDetailResponse
  32. cardType?: 'api' | 'webapp'
  33. customBgColor?: string
  34. onChangeStatus: (val: boolean) => Promise<void>
  35. onSaveSiteConfig?: (params: ConfigParams) => Promise<void>
  36. onGenerateCode?: () => Promise<void>
  37. }
  38. const EmbedIcon = ({ className = '' }: HTMLProps<HTMLDivElement>) => {
  39. return <div className={`${style.codeBrowserIcon} ${className}`}></div>
  40. }
  41. function AppCard({
  42. appInfo,
  43. cardType = 'webapp',
  44. customBgColor,
  45. onChangeStatus,
  46. onSaveSiteConfig,
  47. onGenerateCode,
  48. className,
  49. }: IAppCardProps) {
  50. const router = useRouter()
  51. const pathname = usePathname()
  52. const { currentWorkspace, isCurrentWorkspaceManager } = useAppContext()
  53. const [showSettingsModal, setShowSettingsModal] = useState(false)
  54. const [showEmbedded, setShowEmbedded] = useState(false)
  55. const [showCustomizeModal, setShowCustomizeModal] = useState(false)
  56. const [genLoading, setGenLoading] = useState(false)
  57. const { t } = useTranslation()
  58. const OPERATIONS_MAP = useMemo(() => {
  59. const operationsMap = {
  60. webapp: [
  61. { opName: t('appOverview.overview.appInfo.preview'), opIcon: RocketLaunchIcon },
  62. { opName: t('appOverview.overview.appInfo.customize.entry'), opIcon: PaintBrushIcon },
  63. ] as { opName: string; opIcon: any }[],
  64. api: [{ opName: t('appOverview.overview.apiInfo.doc'), opIcon: DocumentTextIcon }],
  65. app: [],
  66. }
  67. if (appInfo.mode !== 'completion' && appInfo.mode !== 'workflow')
  68. operationsMap.webapp.push({ opName: t('appOverview.overview.appInfo.embedded.entry'), opIcon: EmbedIcon })
  69. if (isCurrentWorkspaceManager)
  70. operationsMap.webapp.push({ opName: t('appOverview.overview.appInfo.settings.entry'), opIcon: Cog8ToothIcon })
  71. return operationsMap
  72. }, [isCurrentWorkspaceManager, appInfo, t])
  73. const isApp = cardType === 'webapp'
  74. const basicName = isApp
  75. ? appInfo?.site?.title
  76. : t('appOverview.overview.apiInfo.title')
  77. const runningStatus = isApp ? appInfo.enable_site : appInfo.enable_api
  78. const { app_base_url, access_token } = appInfo.site ?? {}
  79. const appMode = (appInfo.mode !== 'completion' && appInfo.mode !== 'workflow') ? 'chat' : appInfo.mode
  80. const appUrl = `${app_base_url}/${appMode}/${access_token}`
  81. const apiUrl = appInfo?.api_base_url
  82. let bgColor = 'bg-primary-50 bg-opacity-40'
  83. if (cardType === 'api')
  84. bgColor = 'bg-purple-50'
  85. const genClickFuncByName = (opName: string) => {
  86. switch (opName) {
  87. case t('appOverview.overview.appInfo.preview'):
  88. return () => {
  89. window.open(appUrl, '_blank')
  90. }
  91. case t('appOverview.overview.appInfo.customize.entry'):
  92. return () => {
  93. setShowCustomizeModal(true)
  94. }
  95. case t('appOverview.overview.appInfo.settings.entry'):
  96. return () => {
  97. setShowSettingsModal(true)
  98. }
  99. case t('appOverview.overview.appInfo.embedded.entry'):
  100. return () => {
  101. setShowEmbedded(true)
  102. }
  103. default:
  104. // jump to page develop
  105. return () => {
  106. const pathSegments = pathname.split('/')
  107. pathSegments.pop()
  108. router.push(`${pathSegments.join('/')}/develop`)
  109. }
  110. }
  111. }
  112. const onGenCode = async () => {
  113. if (onGenerateCode) {
  114. setGenLoading(true)
  115. await asyncRunSafe(onGenerateCode())
  116. setGenLoading(false)
  117. }
  118. }
  119. return (
  120. <div
  121. className={`shadow-xs border-[0.5px] rounded-lg border-gray-200 ${
  122. className ?? ''
  123. }`}
  124. >
  125. <div className={`px-6 py-5 ${customBgColor ?? bgColor} rounded-lg`}>
  126. <div className="mb-2.5 flex flex-row items-start justify-between">
  127. <AppBasic
  128. iconType={cardType}
  129. icon={appInfo.icon}
  130. icon_background={appInfo.icon_background}
  131. name={basicName}
  132. type={
  133. isApp
  134. ? t('appOverview.overview.appInfo.explanation')
  135. : t('appOverview.overview.apiInfo.explanation')
  136. }
  137. />
  138. <div className="flex flex-row items-center h-9">
  139. <Tag className="mr-2" color={runningStatus ? 'green' : 'yellow'}>
  140. {runningStatus
  141. ? t('appOverview.overview.status.running')
  142. : t('appOverview.overview.status.disable')}
  143. </Tag>
  144. <Switch defaultValue={runningStatus} onChange={onChangeStatus} disabled={currentWorkspace?.role === 'normal'} />
  145. </div>
  146. </div>
  147. <div className="flex flex-col justify-center py-2">
  148. <div className="py-1">
  149. <div className="pb-1 text-xs text-gray-500">
  150. {isApp
  151. ? t('appOverview.overview.appInfo.accessibleAddress')
  152. : t('appOverview.overview.apiInfo.accessibleAddress')}
  153. </div>
  154. <div className="w-full h-9 pl-2 pr-0.5 py-0.5 bg-black bg-opacity-[0.02] rounded-lg border border-black border-opacity-5 justify-start items-center inline-flex">
  155. <div className="h-4 px-2 justify-start items-start gap-2 flex flex-1 min-w-0">
  156. <div className="text-gray-700 text-xs font-medium text-ellipsis overflow-hidden whitespace-nowrap">
  157. {isApp ? appUrl : apiUrl}
  158. </div>
  159. </div>
  160. <Divider type="vertical" className="!h-3.5 shrink-0 !mx-0.5" />
  161. {isApp && <ShareQRCode content={isApp ? appUrl : apiUrl} selectorId={randomString(8)} className={'hover:bg-gray-200'} />}
  162. <CopyFeedback
  163. content={isApp ? appUrl : apiUrl}
  164. selectorId={randomString(8)}
  165. className={'hover:bg-gray-200'}
  166. />
  167. {/* button copy link/ button regenerate */}
  168. {isApp && isCurrentWorkspaceManager && (
  169. <Tooltip
  170. content={t('appOverview.overview.appInfo.regenerate') || ''}
  171. selector={`code-generate-${randomString(8)}`}
  172. >
  173. <div
  174. className="w-8 h-8 ml-0.5 cursor-pointer hover:bg-gray-200 rounded-lg"
  175. onClick={onGenCode}
  176. >
  177. <div
  178. className={`w-full h-full ${style.refreshIcon} ${
  179. genLoading ? style.generateLogo : ''
  180. }`}
  181. ></div>
  182. </div>
  183. </Tooltip>
  184. )}
  185. </div>
  186. </div>
  187. </div>
  188. <div className={'pt-2 flex flex-row items-center flex-wrap gap-y-2'}>
  189. {!isApp && <SecretKeyButton className='flex-shrink-0 !h-8 bg-white mr-2' textCls='!text-gray-700 font-medium' iconCls='stroke-[1.2px]' appId={appInfo.id} />}
  190. {OPERATIONS_MAP[cardType].map((op) => {
  191. const disabled
  192. = op.opName === t('appOverview.overview.appInfo.settings.entry')
  193. ? false
  194. : !runningStatus
  195. return (
  196. <Button
  197. className="mr-2 border-[0.5px] !h-8 hover:outline hover:outline-[0.5px] hover:outline-gray-300 text-gray-700 font-medium bg-white shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]"
  198. key={op.opName}
  199. onClick={genClickFuncByName(op.opName)}
  200. disabled={disabled}
  201. >
  202. <Tooltip
  203. content={
  204. t('appOverview.overview.appInfo.preUseReminder') ?? ''
  205. }
  206. selector={`op-btn-${randomString(16)}`}
  207. className={disabled ? 'mt-[-8px]' : '!hidden'}
  208. >
  209. <div className="flex flex-row items-center">
  210. <op.opIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />
  211. <span className="text-[13px]">{op.opName}</span>
  212. </div>
  213. </Tooltip>
  214. </Button>
  215. )
  216. })}
  217. </div>
  218. </div>
  219. {isApp
  220. ? (
  221. <>
  222. <SettingsModal
  223. appInfo={appInfo}
  224. isShow={showSettingsModal}
  225. onClose={() => setShowSettingsModal(false)}
  226. onSave={onSaveSiteConfig}
  227. />
  228. <EmbeddedModal
  229. isShow={showEmbedded}
  230. onClose={() => setShowEmbedded(false)}
  231. appBaseUrl={app_base_url}
  232. accessToken={access_token}
  233. />
  234. <CustomizeModal
  235. isShow={showCustomizeModal}
  236. linkUrl=""
  237. onClose={() => setShowCustomizeModal(false)}
  238. appId={appInfo.id}
  239. api_base_url={appInfo.api_base_url}
  240. mode={appInfo.mode}
  241. />
  242. </>
  243. )
  244. : null}
  245. </div>
  246. )
  247. }
  248. export default AppCard