feat: text generation

web/app/components/base/chat/embedded-chatbot/hooks.tsx

@@ -24,10 +24,12 @@ import {
   fetchAppParams,
   fetchChatList,
   fetchConversations,
-  fetchTryAppInfo,
   generationConversationName,
   updateFeedback,
 } from '@/service/share'
+import {
+  fetchTryAppInfo,
+} from '@/service/try-app'
 import type {
   // AppData,
   ConversationItem,
@@ -257,6 +259,8 @@ export const useEmbeddedChatbot = (appSourceType = AppSourceType.webApp, tryAppI
   useEffect(() => {
     // init inputs from url params
     (async () => {
+      if(isTryApp)
+        return
       const inputs = await getProcessedInputsFromUrlParams()
       const userVariables = await getProcessedUserVariablesFromUrlParams()
       setInitInputs(inputs)

web/app/components/explore/installed-app/index.tsx

@@ -33,7 +33,6 @@ const InstalledApp: FC<IInstalledAppProps> = ({
   const { isFetching: isFetchingAppMeta, data: appMeta, error: appMetaError } = useGetInstalledAppMeta(installedApp?.id ?? null)
   const { data: userCanAccessApp, error: useCanAccessAppError } = useGetUserCanAccessApp({ appId: installedApp?.app.id, isInstalledApp: true })
 
-  console.log(appParams, appMeta)
   useEffect(() => {
     if (!installedApp) {
       updateAppInfo(null)

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

@@ -41,24 +41,9 @@ import { AccessMode } from '@/models/access-control'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useWebAppStore } from '@/context/web-app-context'
-
+import type { Task } from './types'
+import { TaskStatus } from './types'
 const GROUP_SIZE = 5 // to avoid RPM(Request per minute) limit. The group task finished then the next group.
-enum TaskStatus {
-  pending = 'pending',
-  running = 'running',
-  completed = 'completed',
-  failed = 'failed',
-}
-
-type TaskParam = {
-  inputs: Record<string, any>
-}
-
-type Task = {
-  id: number
-  status: TaskStatus
-  params: TaskParam
-}
 
 export type IMainProps = {
   isInstalledApp?: boolean

web/app/components/share/text-generation/types.ts

@@ -0,0 +1,16 @@
+type TaskParam = {
+  inputs: Record<string, any>
+}
+
+export type Task = {
+  id: number
+  status: TaskStatus
+  params: TaskParam
+}
+
+export enum TaskStatus {
+  pending = 'pending',
+  running = 'running',
+  completed = 'completed',
+  failed = 'failed',
+}

web/app/components/try/app/index.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import Chat from './chat'
+import TextGeneration from './text-generation'
 
 type Props = {
   appId: string
@@ -10,7 +11,8 @@ type Props = {
 const TryApp: FC<Props> = ({
   appId,
 }) => {
-  const isChat = true
+  // get app type by /trial-apps/<uuid:app_id>
+  const isChat = appId === 'fsVnyqGJbriqnPxK'
   const isCompletion = !isChat
   return (
     <div className='flex h-full'>
@@ -18,7 +20,7 @@ const TryApp: FC<Props> = ({
         <Chat appId={appId} className='h-full grow' />
       )}
       {isCompletion && (
-        <div>Completion</div>
+        <TextGeneration appId={appId} className='h-full grow' />
       )}
       <div className='w-[360px]'>
         Right panel

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

@@ -0,0 +1,263 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import cn from '@/utils/classnames'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import AppIcon from '@/app/components/base/app-icon'
+import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
+import type { SiteInfo } from '@/models/share'
+import type { VisionFile, VisionSettings } from '@/types/app'
+import { Resolution, TransferMethod } from '@/types/app'
+import type { MoreLikeThisConfig, PromptConfig, TextToSpeechConfig } from '@/models/debug'
+import { userInputsFormToPromptVariables } from '@/utils/model-config'
+import { useWebAppStore } from '@/context/web-app-context'
+import { useGetTryAppInfo, useGetTryAppParams } from '@/service/use-try-app'
+import Loading from '@/app/components/base/loading'
+import { appDefaultIconBackground } from '@/config'
+import RunOnce from '../../share/text-generation/run-once'
+import { useBoolean } from 'ahooks'
+import Res from '@/app/components/share/text-generation/result'
+import type { Task } from '../../share/text-generation/types'
+import { TaskStatus } from '../../share/text-generation/types'
+import { noop } from 'lodash'
+
+type Props = {
+  appId: string
+  isWorkflow?: boolean
+  className?: string
+}
+
+const TextGeneration: FC<Props> = ({
+  isWorkflow = false,
+  className,
+}) => {
+  // const { t } = useTranslation()
+  const media = useBreakpoints()
+  const isPC = media === MediaType.pc
+
+  const [inputs, doSetInputs] = useState<Record<string, any>>({})
+  const inputsRef = useRef<Record<string, any>>(inputs)
+  const setInputs = useCallback((newInputs: Record<string, any>) => {
+    doSetInputs(newInputs)
+    inputsRef.current = newInputs
+  }, [])
+
+  const { isFetching: isFetchingAppInfo, data: appInfo } = useGetTryAppInfo()
+  const updateAppInfo = useWebAppStore(s => s.updateAppInfo)
+  const appData = useWebAppStore(s => s.appInfo)
+  const { data: tryAppParams } = useGetTryAppParams()
+  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 [controlStopResponding, setControlStopResponding] = 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 [controlRetry, setControlRetry] = useState(0)
+  const [isShowResultPanel, { setTrue: doShowResultPanel, setFalse: hideResultPanel }] = useBoolean(false)
+// to temp fix lint
+  console.log(setControlStopResponding, setControlRetry)
+  const showResultPanel = () => {
+    // fix: useClickAway hideResSidebar will close sidebar
+    setTimeout(() => {
+      doShowResultPanel()
+    }, 0)
+  }
+
+  const handleSend = () => {
+    setControlSend(Date.now())
+    showResultPanel()
+  }
+
+  const [resultExisted, setResultExisted] = useState(false)
+
+  useEffect(() => {
+    if (!appInfo) return
+    updateAppInfo(appInfo)
+  }, [appInfo, updateAppInfo])
+
+  useEffect(() => {
+    if (!tryAppParams) return
+    updateAppParams(tryAppParams)
+  }, [tryAppParams, updateAppParams])
+
+  useEffect(() => {
+    (async () => {
+      if (!appData || !appParams)
+        return
+      const { site: siteInfo, custom_config } = appData
+      setSiteInfo(siteInfo as SiteInfo)
+      setCustomConfig(custom_config)
+
+      const { user_input_form, more_like_this, file_upload, text_to_speech }: any = appParams
+      setVisionConfig({
+          // legacy of image upload compatible
+        ...file_upload,
+        transfer_methods: file_upload?.allowed_file_upload_methods || file_upload?.allowed_upload_methods,
+          // legacy of image upload compatible
+        image_file_size_limit: appParams?.system_parameters.image_file_size_limit,
+        fileUploadConfig: appParams?.system_parameters,
+      } as any)
+      const prompt_variables = userInputsFormToPromptVariables(user_input_form)
+      setPromptConfig({
+        prompt_template: '', // placeholder for future
+        prompt_variables,
+      } as PromptConfig)
+      setMoreLikeThisConfig(more_like_this)
+      setTextToSpeechConfig(text_to_speech)
+    })()
+  }, [appData, appParams])
+
+  const handleCompleted = noop
+
+  const renderRes = (task?: Task) => (<Res
+    key={task?.id}
+    isWorkflow={isWorkflow}
+    isCallBatchAPI={false}
+    isPC={isPC}
+    isMobile={!isPC}
+    isInstalledApp={false}
+    installedAppInfo={{}}
+    isError={task?.status === TaskStatus.failed}
+    promptConfig={promptConfig}
+    moreLikeThisEnabled={!!moreLikeThisConfig?.enabled}
+    inputs={inputs}
+    controlSend={controlSend}
+    controlRetry={task?.status === TaskStatus.failed ? controlRetry : 0}
+    controlStopResponding={controlStopResponding}
+    onShowRes={showResultPanel}
+    handleSaveMessage={noop}
+    taskId={task?.id}
+    onCompleted={handleCompleted}
+    visionConfig={visionConfig}
+    completionFiles={completionFiles}
+    isShowTextToSpeech={!!textToSpeechConfig?.enabled}
+    siteInfo={siteInfo}
+    onRunStart={() => setResultExisted(true)}
+  />)
+
+  const renderResWrap = (
+    <div
+      className={cn(
+        'relative flex h-full flex-col',
+        !isPC && 'h-[calc(100vh_-_36px)] rounded-t-2xl shadow-lg backdrop-blur-sm',
+        !isPC
+          ? isShowResultPanel
+            ? 'bg-background-default-burn'
+            : 'border-t-[0.5px] border-divider-regular bg-components-panel-bg'
+          : 'bg-chatbot-bg',
+      )}
+    >
+      <div className={cn(
+        'flex h-0 grow flex-col overflow-y-auto',
+        isPC && 'px-14 py-8',
+        !isPC && 'p-0 pb-2',
+      )}>
+        {renderRes()}
+      </div>
+    </div>
+  )
+
+  // console.log(siteInfo, promptConfig)
+
+  if(isFetchingAppInfo || !siteInfo || !promptConfig) {
+    return (
+      <div className={cn('flex h-screen items-center', className)}>
+        <Loading type='app' />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn(
+      'bg-background-default-burn',
+      isPC && 'flex',
+      !isPC && 'flex-col',
+      'h-full rounded-2xl shadow-md',
+      className,
+    )}>
+      {/* Left */}
+      <div className={cn(
+        'relative flex h-full shrink-0 flex-col',
+        isPC ? 'w-[600px] max-w-[50%]' : resultExisted ? 'h-[calc(100%_-_64px)]' : '',
+        'rounded-l-2xl',
+      )}>
+        {/* Header */}
+        <div className={cn('shrink-0 space-y-4 border-b border-divider-subtle', isPC ? 'bg-components-panel-bg p-8 pb-0' : '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='system-md-semibold grow truncate text-text-secondary'>{siteInfo.title}</div>
+            <MenuDropdown hideLogout />
+          </div>
+          {siteInfo.description && (
+            <div className='system-xs-regular text-text-tertiary'>{siteInfo.description}</div>
+          )}
+        </div>
+        {/* form */}
+        <div className={cn(
+          'h-0 grow overflow-y-auto bg-components-panel-bg',
+          isPC ? 'px-8' : 'px-4',
+          !isPC && resultExisted && customConfig?.remove_webapp_brand && 'rounded-b-2xl border-b-[0.5px] border-divider-regular',
+        )}>
+          <RunOnce
+            siteInfo={siteInfo}
+            inputs={inputs}
+            inputsRef={inputsRef}
+            onInputsChange={setInputs}
+            promptConfig={promptConfig}
+            onSend={handleSend}
+            visionConfig={visionConfig}
+            onVisionFilesChange={setCompletionFiles}
+          />
+        </div>
+      </div>
+
+      {/* Result */}
+      <div className={cn(
+        isPC
+          ? 'h-full w-0 grow'
+          : isShowResultPanel
+            ? 'fixed inset-0 z-50 bg-background-overlay backdrop-blur-sm'
+            : resultExisted
+              ? 'relative h-16 shrink-0 overflow-hidden bg-background-default-burn pt-2.5'
+              : '',
+      )}>
+        {!isPC && (
+          <div
+            className={cn(
+              isShowResultPanel
+                ? 'flex items-center justify-center p-2 pt-6'
+                : 'absolute left-0 top-0 z-10 flex w-full items-center justify-center px-2 pb-[57px] pt-[3px]',
+            )}
+            onClick={() => {
+              if (isShowResultPanel)
+                hideResultPanel()
+              else
+                showResultPanel()
+            }}
+          >
+            <div className='h-1 w-8 cursor-grab rounded bg-divider-solid' />
+          </div>
+        )}
+        {renderResWrap}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(TextGeneration)

web/service/share.ts

@@ -141,11 +141,6 @@ export const fetchAppInfo = async () => {
   return get('/site') as Promise<AppData>
 }
 
-// would use trial-apps after api is ok
-export const fetchTryAppInfo = async () => {
-  return get('/site') as Promise<AppData>
-}
-
 export const fetchConversations = async (appSourceType: AppSourceType, installedAppId = '', last_id?: string, pinned?: boolean, limit?: number) => {
   return getAction('get', appSourceType)(getUrl('conversations', appSourceType, installedAppId), { params: { limit: limit || 20, ...(last_id ? { last_id } : {}), ...(pinned !== undefined ? { pinned } : {}) } }) as Promise<AppConversationData>
 }

web/service/try-app.ts

@@ -0,0 +1,11 @@
+import {
+  getPublic as get,
+} from './base'
+import type {
+  AppData,
+} from '@/models/share'
+
+// would use trial-apps after api is ok
+export const fetchTryAppInfo = async () => {
+  return get('/site') as Promise<AppData>
+}

web/service/use-try-app.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchTryAppInfo } from './try-app'
+import { AppSourceType, fetchAppParams } from './share'
+
+const NAME_SPACE = 'try-app'
+
+export const useGetTryAppInfo = () => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'appInfo'],
+    queryFn: () => {
+      return fetchTryAppInfo()
+    },
+  })
+}
+
+export const useGetTryAppParams = () => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'appParams'],
+    queryFn: () => {
+      return fetchAppParams(AppSourceType.webApp) // todo: wait api
+    },
+  })
+}