feat: can show text completion run result pages

web/app/(commonLayout)/try/right/page.tsx

@@ -0,0 +1,9 @@
+import Meta from '../../../components/try/app/meta'
+
+const Page = () => {
+  return (
+    <Meta />
+  )
+}
+
+export default Page

web/app/components/try/app/meta.tsx

@@ -0,0 +1,17 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+
+}
+
+const Meta: FC<Props> = ({
+}) => {
+  return (
+    <div>
+      Meta Info
+    </div>
+  )
+}
+export default React.memo(Meta)

web/app/components/try/app/text-generation.tsx

@@ -9,7 +9,18 @@ import Loading from '@/app/components/base/loading'
 import { appDefaultIconBackground } from '@/config'
 import RunOnce from '../../share/text-generation/run-once'
 import { useWebAppStore } from '@/context/web-app-context'
-import type { AppData } from '@/models/share'
+import type { AppData, SiteInfo } from '@/models/share'
+import { useGetTryAppParams } from '@/service/use-try-app'
+import type { MoreLikeThisConfig, PromptConfig, TextToSpeechConfig } from '@/models/debug'
+import { userInputsFormToPromptVariables } from '@/utils/model-config'
+import type { VisionFile, VisionSettings } from '@/types/app'
+import { Resolution, TransferMethod } from '@/types/app'
+import { useBoolean } from 'ahooks'
+import { noop } from 'lodash'
+import type { Task } from '../../share/text-generation/types'
+import Res from '@/app/components/share/text-generation/result'
+import { AppSourceType } from '@/service/share'
+import { TaskStatus } from '@/app/components/share/text-generation/types'
 
 type Props = {
   appId: string
@@ -33,130 +44,127 @@ const TextGeneration: FC<Props> = ({
     doSetInputs(newInputs)
     inputsRef.current = newInputs
   }, [])
-  console.log(isPC, setInputs)
+  // console.log(isPC, setInputs)
 
   const updateAppInfo = useWebAppStore(s => s.updateAppInfo)
-  // const { data: tryAppParams } = useGetTryAppParams()
+  const { data: tryAppParams } = useGetTryAppParams(appId)
-  // const updateAppParams = useWebAppStore(s => s.updateAppParams)
-  // const appParams = useWebAppStore(s => s.appParams)
-  // const [siteInfo, setSiteInfo] = useState<SiteInfo | null>(null)
-  // const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
-  // const [customConfig, setCustomConfig] = useState<Record<string, any> | null>(null)
-  // const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
-  // const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig | null>(null)
-  // const [controlSend, setControlSend] = useState(0)
-  // const [visionConfig, setVisionConfig] = useState<VisionSettings>({
-  //   enabled: false,
-  //   number_limits: 2,
-  //   detail: Resolution.low,
-  //   transfer_methods: [TransferMethod.local_file],
-  // })
-  // const [completionFiles, setCompletionFiles] = useState<VisionFile[]>([])
-  // const [isShowResultPanel, { setTrue: doShowResultPanel, setFalse: hideResultPanel }] = useBoolean(false)
-  // const showResultPanel = () => {
-  //   // fix: useClickAway hideResSidebar will close sidebar
-  //   setTimeout(() => {
-  //     doShowResultPanel()
-  //   }, 0)
-  // }
 
-  // const handleSend = () => {
+  const updateAppParams = useWebAppStore(s => s.updateAppParams)
-  //   setControlSend(Date.now())
+  const appParams = useWebAppStore(s => s.appParams)
-  //   showResultPanel()
+  const [siteInfo, setSiteInfo] = useState<SiteInfo | null>(null)
-  // }
+  const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
+  const [customConfig, setCustomConfig] = useState<Record<string, any> | null>(null)
+  const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
+  const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig | null>(null)
+  const [controlSend, setControlSend] = useState(0)
+  const [visionConfig, setVisionConfig] = useState<VisionSettings>({
+    enabled: false,
+    number_limits: 2,
+    detail: Resolution.low,
+    transfer_methods: [TransferMethod.local_file],
+  })
+  const [completionFiles, setCompletionFiles] = useState<VisionFile[]>([])
+  const [isShowResultPanel, { setTrue: doShowResultPanel, setFalse: hideResultPanel }] = useBoolean(false)
+  const showResultPanel = () => {
+    // fix: useClickAway hideResSidebar will close sidebar
+    setTimeout(() => {
+      doShowResultPanel()
+    }, 0)
+  }
 
-  // const [resultExisted, setResultExisted] = useState(false)
+  const handleSend = () => {
+    setControlSend(Date.now())
+    showResultPanel()
+  }
+
+  const [resultExisted, setResultExisted] = useState(false)
 
   useEffect(() => {
     if (!appData) return
     updateAppInfo(appData)
   }, [appData, updateAppInfo])
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (!tryAppParams) return
+    if (!tryAppParams) return
-  //   updateAppParams(tryAppParams)
+    updateAppParams(tryAppParams)
-  // }, [tryAppParams, updateAppParams])
+  }, [tryAppParams, updateAppParams])
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   (async () => {
+    (async () => {
-  //     if (!appData || !appParams)
+      if (!appData || !appParams)
-  //       return
+        return
-  //     const { site: siteInfo, custom_config } = appData
+      const { site: siteInfo, custom_config } = appData
-  //     setSiteInfo(siteInfo as SiteInfo)
+      setSiteInfo(siteInfo as SiteInfo)
-  //     setCustomConfig(custom_config)
+      setCustomConfig(custom_config)
 
-  //     const { user_input_form, more_like_this, file_upload, text_to_speech }: any = appParams
+      const { user_input_form, more_like_this, file_upload, text_to_speech }: any = appParams
-  //     setVisionConfig({
+      setVisionConfig({
-  //         // legacy of image upload compatible
+          // legacy of image upload compatible
-  //       ...file_upload,
+        ...file_upload,
-  //       transfer_methods: file_upload?.allowed_file_upload_methods || file_upload?.allowed_upload_methods,
+        transfer_methods: file_upload?.allowed_file_upload_methods || file_upload?.allowed_upload_methods,
-  //         // legacy of image upload compatible
+          // legacy of image upload compatible
-  //       image_file_size_limit: appParams?.system_parameters.image_file_size_limit,
+        image_file_size_limit: appParams?.system_parameters.image_file_size_limit,
-  //       fileUploadConfig: appParams?.system_parameters,
+        fileUploadConfig: appParams?.system_parameters,
-  //     } as any)
+      } as any)
-  //     const prompt_variables = userInputsFormToPromptVariables(user_input_form)
+      const prompt_variables = userInputsFormToPromptVariables(user_input_form)
-  //     setPromptConfig({
+      setPromptConfig({
-  //       prompt_template: '', // placeholder for future
+        prompt_template: '', // placeholder for future
-  //       prompt_variables,
+        prompt_variables,
-  //     } as PromptConfig)
+      } as PromptConfig)
-  //     setMoreLikeThisConfig(more_like_this)
+      setMoreLikeThisConfig(more_like_this)
-  //     setTextToSpeechConfig(text_to_speech)
+      setTextToSpeechConfig(text_to_speech)
-  //   })()
+    })()
-  // }, [appData, appParams])
+  }, [appData, appParams])
 
-  // const handleCompleted = noop
+  const handleCompleted = noop
 
-  // const renderRes = (task?: Task) => (<Res
+  const renderRes = (task?: Task) => (<Res
-  //   key={task?.id}
+    key={task?.id}
-  //   isWorkflow={isWorkflow}
+    isWorkflow={!!isWorkflow}
-  //   isCallBatchAPI={false}
+    isCallBatchAPI={false}
-  //   isPC={isPC}
+    isPC={isPC}
-  //   isMobile={!isPC}
+    isMobile={!isPC}
-  //   appSourceType={AppSourceType.installedApp}
+    appSourceType={AppSourceType.installedApp}
-  //   appId={appId}
+    appId={appId}
-  //   isError={task?.status === TaskStatus.failed}
+    isError={task?.status === TaskStatus.failed}
-  //   promptConfig={promptConfig}
+    promptConfig={promptConfig}
-  //   moreLikeThisEnabled={!!moreLikeThisConfig?.enabled}
+    moreLikeThisEnabled={!!moreLikeThisConfig?.enabled}
-  //   inputs={inputs}
+    inputs={inputs}
-  //   controlSend={controlSend}
+    controlSend={controlSend}
-  //   onShowRes={showResultPanel}
+    onShowRes={showResultPanel}
-  //   handleSaveMessage={noop}
+    handleSaveMessage={noop}
-  //   taskId={task?.id}
+    taskId={task?.id}
-  //   onCompleted={handleCompleted}
+    onCompleted={handleCompleted}
-  //   visionConfig={visionConfig}
+    visionConfig={visionConfig}
-  //   completionFiles={completionFiles}
+    completionFiles={completionFiles}
-  //   isShowTextToSpeech={!!textToSpeechConfig?.enabled}
+    isShowTextToSpeech={!!textToSpeechConfig?.enabled}
-  //   siteInfo={siteInfo}
+    siteInfo={siteInfo}
-  //   onRunStart={() => setResultExisted(true)}
+    onRunStart={() => setResultExisted(true)}
-  // />)
+  />)
 
-  // const renderResWrap = (
+  const renderResWrap = (
-  //   <div
+    <div
-  //     className={cn(
+      className={cn(
-  //       'relative flex h-full flex-col',
+        'relative flex h-full flex-col',
-  //       !isPC && 'h-[calc(100vh_-_36px)] rounded-t-2xl shadow-lg backdrop-blur-sm',
+        !isPC && 'h-[calc(100vh_-_36px)] rounded-t-2xl shadow-lg backdrop-blur-sm',
-  //       !isPC
+        !isPC
-  //         ? isShowResultPanel
+          ? isShowResultPanel
-  //           ? 'bg-background-default-burn'
+            ? 'bg-background-default-burn'
-  //           : 'border-t-[0.5px] border-divider-regular bg-components-panel-bg'
+            : 'border-t-[0.5px] border-divider-regular bg-components-panel-bg'
-  //         : 'bg-chatbot-bg',
+          : 'bg-chatbot-bg',
-  //     )}
+      )}
-  //   >
+    >
-  //     <div className={cn(
+      <div className={cn(
-  //       'flex h-0 grow flex-col overflow-y-auto',
+        'flex h-0 grow flex-col overflow-y-auto',
-  //       isPC && 'px-14 py-8',
+        isPC && 'px-14 py-8',
-  //       !isPC && 'p-0 pb-2',
+        !isPC && 'p-0 pb-2',
-  //     )}>
+      )}>
-  //       {renderRes()}
+        {renderRes()}
-  //     </div>
+      </div>
-  //   </div>
+    </div>
-  // )
+  )
 
-  return (<div>xxxx</div>)
+  if(!siteInfo || !promptConfig) {
-
-  // console.log(siteInfo, promptConfig)
-
-  if(isFetchingAppInfo || !siteInfo || !promptConfig) {
     return (
       <div className={cn('flex h-screen items-center', className)}>
         <Loading type='app' />

web/service/share.ts

@@ -39,7 +39,7 @@ export enum AppSourceType {
 const apiPrefix = {
   [AppSourceType.webApp]: '',
   [AppSourceType.installedApp]: 'installed-apps',
-  [AppSourceType.tryApp]: 'installed-apps', // 'trial-apps', use 'installed-apps' for test
+  [AppSourceType.tryApp]: 'trial-apps',
 }
 
 function getIsPublicAPI(appSourceType: AppSourceType) {

web/service/use-try-app.ts

@@ -13,11 +13,11 @@ export const useGetTryAppInfo = (appId: string) => {
   })
 }
 
-export const useGetTryAppParams = () => {
+export const useGetTryAppParams = (appId: string) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'appParams'],
     queryFn: () => {
-      return fetchAppParams(AppSourceType.webApp) // todo: wait api
+      return fetchAppParams(AppSourceType.tryApp, appId)
     },
   })
 }