Initial commit

dify_1.0.0/web/app/components/share/text-generation/icons/star.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.66699 1.33366C3.66699 0.965469 3.36852 0.666992 3.00033 0.666992C2.63214 0.666992 2.33366 0.965469 2.33366 1.33366V2.33366H1.33366C0.965469 2.33366 0.666992 2.63214 0.666992 3.00033C0.666992 3.36852 0.965469 3.66699 1.33366 3.66699H2.33366V4.66699C2.33366 5.03518 2.63214 5.33366 3.00033 5.33366C3.36852 5.33366 3.66699 5.03518 3.66699 4.66699V3.66699H4.66699C5.03518 3.66699 5.33366 3.36852 5.33366 3.00033C5.33366 2.63214 5.03518 2.33366 4.66699 2.33366H3.66699V1.33366Z" fill="#444CE7"/>
+<path d="M3.66699 11.3337C3.66699 10.9655 3.36852 10.667 3.00033 10.667C2.63214 10.667 2.33366 10.9655 2.33366 11.3337V12.3337H1.33366C0.965469 12.3337 0.666992 12.6321 0.666992 13.0003C0.666992 13.3685 0.965469 13.667 1.33366 13.667H2.33366V14.667C2.33366 15.0352 2.63214 15.3337 3.00033 15.3337C3.36852 15.3337 3.66699 15.0352 3.66699 14.667V13.667H4.66699C5.03518 13.667 5.33366 13.3685 5.33366 13.0003C5.33366 12.6321 5.03518 12.3337 4.66699 12.3337H3.66699V11.3337Z" fill="#444CE7"/>
+<path d="M9.28922 1.76101C9.1902 1.50354 8.94284 1.33366 8.66699 1.33366C8.39114 1.33366 8.14378 1.50354 8.04476 1.76101L6.88864 4.76691C6.68837 5.28761 6.62544 5.43766 6.53936 5.55872C6.45299 5.68019 6.34686 5.78632 6.22539 5.87269C6.10432 5.95878 5.95428 6.02171 5.43358 6.22198L2.42767 7.37809C2.17021 7.47712 2.00033 7.72448 2.00033 8.00033C2.00033 8.27617 2.17021 8.52353 2.42767 8.62256L5.43358 9.77867C5.95428 9.97894 6.10432 10.0419 6.22539 10.128C6.34686 10.2143 6.45299 10.3205 6.53936 10.4419C6.62544 10.563 6.68837 10.713 6.88864 11.2337L8.04476 14.2396C8.14379 14.4971 8.39114 14.667 8.66699 14.667C8.94284 14.667 9.1902 14.4971 9.28922 14.2396L10.4453 11.2337C10.6456 10.713 10.7085 10.563 10.7946 10.4419C10.881 10.3205 10.9871 10.2143 11.1086 10.128C11.2297 10.0419 11.3797 9.97894 11.9004 9.77867L14.9063 8.62256C15.1638 8.52353 15.3337 8.27617 15.3337 8.00033C15.3337 7.72448 15.1638 7.47712 14.9063 7.37809L11.9004 6.22198C11.3797 6.02171 11.2297 5.95878 11.1086 5.87269C10.9871 5.78632 10.881 5.68019 10.7946 5.55872C10.7085 5.43766 10.6456 5.28761 10.4453 4.76691L9.28922 1.76101Z" fill="#444CE7"/>
+</svg>

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

@@ -0,0 +1,682 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiErrorWarningFill,
+} from '@remixicon/react'
+import { useBoolean, useClickAway } from 'ahooks'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+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 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'
+import type { SiteInfo } from '@/models/share'
+import type {
+  MoreLikeThisConfig,
+  PromptConfig,
+  SavedMessage,
+  TextToSpeechConfig,
+} from '@/models/debug'
+import AppIcon from '@/app/components/base/app-icon'
+import { changeLanguage } from '@/i18n/i18next-config'
+import Loading from '@/app/components/base/loading'
+import { userInputsFormToPromptVariables } from '@/utils/model-config'
+import Res from '@/app/components/share/text-generation/result'
+import SavedItems from '@/app/components/app/text-generate/saved-items'
+import type { InstalledApp } from '@/models/explore'
+import { DEFAULT_VALUE_MAX_LEN, appDefaultIconBackground } from '@/config'
+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'
+
+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
+  installedAppInfo?: InstalledApp
+  isWorkflow?: boolean
+}
+
+const TextGeneration: FC<IMainProps> = ({
+  isInstalledApp = false,
+  installedAppInfo,
+  isWorkflow = false,
+}) => {
+  const { notify } = Toast
+
+  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'
+  const [currentTab, setCurrentTab] = useState<string>(['create', 'batch'].includes(mode) ? mode : 'create')
+
+  const router = useRouter()
+  const pathname = usePathname()
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams)
+    if (params.has('mode')) {
+      params.delete('mode')
+      router.replace(`${pathname}?${params.toString()}`)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Notice this situation isCallBatchAPI but not in batch tab
+  const [isCallBatchAPI, setIsCallBatchAPI] = useState(false)
+  const isInBatchTab = currentTab === 'batch'
+  const [inputs, doSetInputs] = useState<Record<string, any>>({})
+  const inputsRef = useRef(inputs)
+  const setInputs = useCallback((newInputs: Record<string, any>) => {
+    doSetInputs(newInputs)
+    inputsRef.current = newInputs
+  }, [])
+  const [appId, setAppId] = useState<string>('')
+  const [siteInfo, setSiteInfo] = useState<SiteInfo | null>(null)
+  const [canReplaceLogo, setCanReplaceLogo] = useState<boolean>(false)
+  const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
+  const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
+  const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig | null>(null)
+
+  // save message
+  const [savedMessages, setSavedMessages] = useState<SavedMessage[]>([])
+  const fetchSavedMessage = async () => {
+    const res: any = await doFetchSavedMessage(isInstalledApp, installedAppInfo?.id)
+    setSavedMessages(res.data)
+  }
+  const handleSaveMessage = async (messageId: string) => {
+    await saveMessage(messageId, isInstalledApp, installedAppInfo?.id)
+    notify({ type: 'success', message: t('common.api.saved') })
+    fetchSavedMessage()
+  }
+  const handleRemoveSavedMessage = async (messageId: string) => {
+    await removeMessage(messageId, isInstalledApp, installedAppInfo?.id)
+    notify({ type: 'success', message: t('common.api.remove') })
+    fetchSavedMessage()
+  }
+
+  // send message task
+  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 handleSend = () => {
+    setIsCallBatchAPI(false)
+    setControlSend(Date.now())
+
+    // eslint-disable-next-line ts/no-use-before-define
+    setAllTaskList([]) // clear batch task running status
+
+    // eslint-disable-next-line ts/no-use-before-define
+    showResSidebar()
+  }
+
+  const [controlRetry, setControlRetry] = useState(0)
+  const handleRetryAllFailedTask = () => {
+    setControlRetry(Date.now())
+  }
+  const [allTaskList, doSetAllTaskList] = useState<Task[]>([])
+  const allTaskListRef = useRef<Task[]>([])
+  const getLatestTaskList = () => allTaskListRef.current
+  const setAllTaskList = (taskList: Task[]) => {
+    doSetAllTaskList(taskList)
+    allTaskListRef.current = taskList
+  }
+  const pendingTaskList = allTaskList.filter(task => task.status === TaskStatus.pending)
+  const noPendingTask = pendingTaskList.length === 0
+  const showTaskList = allTaskList.filter(task => task.status !== TaskStatus.pending)
+  const [currGroupNum, doSetCurrGroupNum] = useState(0)
+  const currGroupNumRef = useRef(0)
+  const setCurrGroupNum = (num: number) => {
+    doSetCurrGroupNum(num)
+    currGroupNumRef.current = num
+  }
+  const getCurrGroupNum = () => {
+    return currGroupNumRef.current
+  }
+  const allSuccessTaskList = allTaskList.filter(task => task.status === TaskStatus.completed)
+  const allFailedTaskList = allTaskList.filter(task => task.status === TaskStatus.failed)
+  const allTasksFinished = allTaskList.every(task => task.status === TaskStatus.completed)
+  const allTasksRun = allTaskList.every(task => [TaskStatus.completed, TaskStatus.failed].includes(task.status))
+  const [batchCompletionRes, doSetBatchCompletionRes] = useState<Record<string, string>>({})
+  const batchCompletionResRef = useRef<Record<string, string>>({})
+  const setBatchCompletionRes = (res: Record<string, string>) => {
+    doSetBatchCompletionRes(res)
+    batchCompletionResRef.current = res
+  }
+  const getBatchCompletionRes = () => batchCompletionResRef.current
+  const exportRes = allTaskList.map((task) => {
+    const batchCompletionResLatest = getBatchCompletionRes()
+    const res: Record<string, string> = {}
+    const { inputs } = task.params
+    promptConfig?.prompt_variables.forEach((v) => {
+      res[v.name] = inputs[v.key]
+    })
+    let result = batchCompletionResLatest[task.id]
+    // task might return multiple fields, should marshal object to string
+    if (typeof batchCompletionResLatest[task.id] === 'object')
+      result = JSON.stringify(result)
+
+    res[t('share.generation.completionResult')] = result
+    return res
+  })
+  const checkBatchInputs = (data: string[][]) => {
+    if (!data || data.length === 0) {
+      notify({ type: 'error', message: t('share.generation.errorMsg.empty') })
+      return false
+    }
+    const headerData = data[0]
+    let isMapVarName = true
+    promptConfig?.prompt_variables.forEach((item, index) => {
+      if (!isMapVarName)
+        return
+
+      if (item.name !== headerData[index])
+        isMapVarName = false
+    })
+
+    if (!isMapVarName) {
+      notify({ type: 'error', message: t('share.generation.errorMsg.fileStructNotMatch') })
+      return false
+    }
+
+    let payloadData = data.slice(1)
+    if (payloadData.length === 0) {
+      notify({ type: 'error', message: t('share.generation.errorMsg.atLeastOne') })
+      return false
+    }
+
+    // check middle empty line
+    const allEmptyLineIndexes = payloadData.filter(item => item.every(i => i === '')).map(item => payloadData.indexOf(item))
+    if (allEmptyLineIndexes.length > 0) {
+      let hasMiddleEmptyLine = false
+      let startIndex = allEmptyLineIndexes[0] - 1
+      allEmptyLineIndexes.forEach((index) => {
+        if (hasMiddleEmptyLine)
+          return
+
+        if (startIndex + 1 !== index) {
+          hasMiddleEmptyLine = true
+          return
+        }
+        startIndex++
+      })
+
+      if (hasMiddleEmptyLine) {
+        notify({ type: 'error', message: t('share.generation.errorMsg.emptyLine', { rowIndex: startIndex + 2 }) })
+        return false
+      }
+    }
+
+    // check row format
+    payloadData = payloadData.filter(item => !item.every(i => i === ''))
+    // after remove empty rows in the end, checked again
+    if (payloadData.length === 0) {
+      notify({ type: 'error', message: t('share.generation.errorMsg.atLeastOne') })
+      return false
+    }
+    let errorRowIndex = 0
+    let requiredVarName = ''
+    let moreThanMaxLengthVarName = ''
+    let maxLength = 0
+    payloadData.forEach((item, index) => {
+      if (errorRowIndex !== 0)
+        return
+
+      promptConfig?.prompt_variables.forEach((varItem, varIndex) => {
+        if (errorRowIndex !== 0)
+          return
+        if (varItem.type === 'string') {
+          const maxLen = varItem.max_length || DEFAULT_VALUE_MAX_LEN
+          if (item[varIndex].length > maxLen) {
+            moreThanMaxLengthVarName = varItem.name
+            maxLength = maxLen
+            errorRowIndex = index + 1
+            return
+          }
+        }
+        if (!varItem.required)
+          return
+
+        if (item[varIndex].trim() === '') {
+          requiredVarName = varItem.name
+          errorRowIndex = index + 1
+        }
+      })
+    })
+
+    if (errorRowIndex !== 0) {
+      if (requiredVarName)
+        notify({ type: 'error', message: t('share.generation.errorMsg.invalidLine', { rowIndex: errorRowIndex + 1, varName: requiredVarName }) })
+
+      if (moreThanMaxLengthVarName)
+        notify({ type: 'error', message: t('share.generation.errorMsg.moreThanMaxLengthLine', { rowIndex: errorRowIndex + 1, varName: moreThanMaxLengthVarName, maxLength }) })
+
+      return false
+    }
+    return true
+  }
+  const handleRunBatch = (data: string[][]) => {
+    if (!checkBatchInputs(data))
+      return
+    if (!allTasksFinished) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForBatchResponse') })
+      return
+    }
+
+    const payloadData = data.filter(item => !item.every(i => i === '')).slice(1)
+    const varLen = promptConfig?.prompt_variables.length || 0
+    setIsCallBatchAPI(true)
+    const allTaskList: Task[] = payloadData.map((item, i) => {
+      const inputs: Record<string, string> = {}
+      if (varLen > 0) {
+        item.slice(0, varLen).forEach((input, index) => {
+          inputs[promptConfig?.prompt_variables[index].key as string] = input
+        })
+      }
+      return {
+        id: i + 1,
+        status: i < GROUP_SIZE ? TaskStatus.running : TaskStatus.pending,
+        params: {
+          inputs,
+        },
+      }
+    })
+    setAllTaskList(allTaskList)
+    setCurrGroupNum(0)
+    setControlSend(Date.now())
+    // clear run once task status
+    setControlStopResponding(Date.now())
+
+    // eslint-disable-next-line ts/no-use-before-define
+    showResSidebar()
+  }
+  const handleCompleted = (completionRes: string, taskId?: number, isSuccess?: boolean) => {
+    const allTaskListLatest = getLatestTaskList()
+    const batchCompletionResLatest = getBatchCompletionRes()
+    const pendingTaskList = allTaskListLatest.filter(task => task.status === TaskStatus.pending)
+    const runTasksCount = 1 + allTaskListLatest.filter(task => [TaskStatus.completed, TaskStatus.failed].includes(task.status)).length
+    const needToAddNextGroupTask = (getCurrGroupNum() !== runTasksCount) && pendingTaskList.length > 0 && (runTasksCount % GROUP_SIZE === 0 || (allTaskListLatest.length - runTasksCount < GROUP_SIZE))
+    // avoid add many task at the same time
+    if (needToAddNextGroupTask)
+      setCurrGroupNum(runTasksCount)
+
+    const nextPendingTaskIds = needToAddNextGroupTask ? pendingTaskList.slice(0, GROUP_SIZE).map(item => item.id) : []
+    const newAllTaskList = allTaskListLatest.map((item) => {
+      if (item.id === taskId) {
+        return {
+          ...item,
+          status: isSuccess ? TaskStatus.completed : TaskStatus.failed,
+        }
+      }
+      if (needToAddNextGroupTask && nextPendingTaskIds.includes(item.id)) {
+        return {
+          ...item,
+          status: TaskStatus.running,
+        }
+      }
+      return item
+    })
+    setAllTaskList(newAllTaskList)
+    if (taskId) {
+      setBatchCompletionRes({
+        ...batchCompletionResLatest,
+        [`${taskId}`]: completionRes,
+      })
+    }
+  }
+
+  const fetchInitData = async () => {
+    if (!isInstalledApp)
+      await checkOrSetAccessToken()
+
+    return Promise.all([
+      isInstalledApp
+        ? {
+          app_id: installedAppInfo?.id,
+          site: {
+            title: installedAppInfo?.app.name,
+            prompt_public: false,
+            copyright: '',
+            icon: installedAppInfo?.app.icon,
+            icon_background: installedAppInfo?.app.icon_background,
+          },
+          plan: 'basic',
+        }
+        : fetchAppInfo(),
+      fetchAppParams(isInstalledApp, installedAppInfo?.id),
+      !isWorkflow
+        ? fetchSavedMessage()
+        : {},
+    ])
+  }
+
+  useEffect(() => {
+    (async () => {
+      const [appData, appParams]: any = await fetchInitData()
+      const { app_id: appId, site: siteInfo, can_replace_logo } = appData
+      setAppId(appId)
+      setSiteInfo(siteInfo as SiteInfo)
+      setCanReplaceLogo(can_replace_logo)
+      changeLanguage(siteInfo.default_language)
+
+      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,
+      })
+      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)
+    })()
+  }, [])
+
+  // Can Use metadata(https://beta.nextjs.org/docs/api-reference/metadata) to set title. But it only works in server side client.
+  useEffect(() => {
+    if (siteInfo?.title) {
+      if (canReplaceLogo)
+        document.title = `${siteInfo.title}`
+      else
+        document.title = `${siteInfo.title} - Powered by Dify`
+    }
+  }, [siteInfo?.title, canReplaceLogo])
+
+  useAppFavicon({
+    enable: !isInstalledApp,
+    icon_type: siteInfo?.icon_type,
+    icon: siteInfo?.icon,
+    icon_background: siteInfo?.icon_background,
+    icon_url: siteInfo?.icon_url,
+  })
+
+  const [isShowResSidebar, { setTrue: doShowResSidebar, setFalse: hideResSidebar }] = useBoolean(false)
+  const showResSidebar = () => {
+    // fix: useClickAway hideResSidebar will close sidebar
+    setTimeout(() => {
+      doShowResSidebar()
+    }, 0)
+  }
+  const resRef = useRef<HTMLDivElement>(null)
+  useClickAway(() => {
+    hideResSidebar()
+  }, resRef)
+
+  const renderRes = (task?: Task) => (<Res
+    key={task?.id}
+    isWorkflow={isWorkflow}
+    isCallBatchAPI={isCallBatchAPI}
+    isPC={isPC}
+    isMobile={isMobile}
+    isInstalledApp={isInstalledApp}
+    installedAppInfo={installedAppInfo}
+    isError={task?.status === TaskStatus.failed}
+    promptConfig={promptConfig}
+    moreLikeThisEnabled={!!moreLikeThisConfig?.enabled}
+    inputs={isCallBatchAPI ? (task as Task).params.inputs : inputs}
+    controlSend={controlSend}
+    controlRetry={task?.status === TaskStatus.failed ? controlRetry : 0}
+    controlStopResponding={controlStopResponding}
+    onShowRes={showResSidebar}
+    handleSaveMessage={handleSaveMessage}
+    taskId={task?.id}
+    onCompleted={handleCompleted}
+    visionConfig={visionConfig}
+    completionFiles={completionFiles}
+    isShowTextToSpeech={!!textToSpeechConfig?.enabled}
+    siteInfo={siteInfo}
+  />)
+
+  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')
+      }
+    >
+      <>
+        <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>
+          )}
+        </div>
+      </>
+    </div>
+  )
+
+  if (!appId || !siteInfo || !promptConfig) {
+    return (
+      <div className='flex items-center h-screen'>
+        <Loading type='app' />
+      </div>)
+  }
+
+  return (
+    <>
+      <div className={cn(
+        isPC && 'flex',
+        isInstalledApp ? s.installedApp : 'h-screen',
+        'bg-gray-50',
+      )}>
+        {/* 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>
+            )}
+          </div>
+          <TabHeader
+            items={[
+              { id: 'create', name: t('share.generation.tabs.create') },
+              { id: 'batch', name: t('share.generation.tabs.batch') },
+              ...(!isWorkflow
+                ? [{
+                  id: 'saved',
+                  name: t('share.generation.tabs.saved'),
+                  isRight: true,
+                  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'>
+                        {savedMessages.length}
+                      </div>
+                    )
+                    : null,
+                }]
+                : []),
+            ]}
+            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>
+
+          {/* copyright */}
+          <div className={cn(
+            isInstalledApp ? 'left-[248px]' : 'left-8',
+            'fixed  bottom-4  flex space-x-2 text-gray-400 font-normal text-xs',
+          )}>
+            {siteInfo.copyright && (
+              <div className="">© {(new Date()).getFullYear()} {siteInfo.copyright}</div>
+            )}
+            {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>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Result */}
+        <div
+          className={resWrapClassNames}
+          style={{
+            background: (!isPC && isShowResSidebar) ? 'rgba(35, 56, 118, 0.2)' : 'none',
+          }}
+        >
+          {renderResWrap}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default TextGeneration

dify_1.0.0/web/app/components/share/text-generation/no-data/index.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const StarIcon = (
+  <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.50033 48.3337V36.667M7.50033 13.3337V1.66699M1.66699 7.50033H13.3337M1.66699 42.5003H13.3337M27.3337 4.00032L23.2872 14.521C22.6292 16.2319 22.3002 17.0873 21.7886 17.8069C21.3351 18.4446 20.7779 19.0018 20.1402 19.4552C19.4206 19.9669 18.5652 20.2959 16.8543 20.9539L6.33366 25.0003L16.8543 29.0467C18.5652 29.7048 19.4206 30.0338 20.1402 30.5454C20.7779 30.9989 21.3351 31.5561 21.7886 32.1938C22.3002 32.9133 22.6292 33.7688 23.2872 35.4796L27.3337 46.0003L31.3801 35.4796C32.0381 33.7688 32.3671 32.9133 32.8788 32.1938C33.3322 31.5561 33.8894 30.9989 34.5271 30.5454C35.2467 30.0338 36.1021 29.7048 37.813 29.0467L48.3337 25.0003L37.813 20.9539C36.1021 20.2959 35.2467 19.9669 34.5271 19.4552C33.8894 19.0018 33.3322 18.4446 32.8788 17.8069C32.3671 17.0873 32.0381 16.2319 31.3801 14.521L27.3337 4.00032Z" stroke="#EAECF0" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+
+)
+
+export type INoDataProps = {}
+const NoData: FC<INoDataProps> = () => {
+  const { t } = useTranslation()
+  return (
+    <div className='flex flex-col h-full w-full justify-center items-center'>
+      {StarIcon}
+      <div
+        className='mt-3 text-gray-300 text-xs leading-3'
+      >
+        {t('share.generation.noData')}
+      </div>
+    </div>
+  )
+}
+export default React.memo(NoData)

dify_1.0.0/web/app/components/share/text-generation/result/content.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react'
+import React from 'react'
+import Header from './header'
+import type { FeedbackType } from '@/app/components/base/chat/chat/type'
+import { format } from '@/service/base'
+
+export type IResultProps = {
+  content: string
+  showFeedback: boolean
+  feedback: FeedbackType
+  onFeedback: (feedback: FeedbackType) => void
+}
+const Result: FC<IResultProps> = ({
+  content,
+  showFeedback,
+  feedback,
+  onFeedback,
+}) => {
+  return (
+    <div className='basis-3/4 h-max'>
+      <Header result={content} showFeedback={showFeedback} feedback={feedback} onFeedback={onFeedback} />
+      <div
+        className='mt-4 w-full flex text-sm leading-5 overflow-scroll font-normal text-gray-900'
+        style={{
+          maxHeight: '70vh',
+        }}
+        dangerouslySetInnerHTML={{
+          __html: format(content),
+        }}
+      ></div>
+    </div>
+  )
+}
+export default React.memo(Result)

dify_1.0.0/web/app/components/share/text-generation/result/header.tsx

@@ -0,0 +1,113 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { ClipboardDocumentIcon, HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
+import copy from 'copy-to-clipboard'
+import type { FeedbackType } from '@/app/components/base/chat/chat/type'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import Tooltip from '@/app/components/base/tooltip'
+
+type IResultHeaderProps = {
+  result: string
+  showFeedback: boolean
+  feedback: FeedbackType
+  onFeedback: (feedback: FeedbackType) => void
+}
+
+const Header: FC<IResultHeaderProps> = ({
+  feedback,
+  showFeedback,
+  onFeedback,
+  result,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className='flex w-full justify-between items-center '>
+      <div className='text-gray-800 text-2xl leading-4 font-normal'>{t('share.generation.resultTitle')}</div>
+      <div className='flex items-center space-x-2'>
+        <Button
+          className='h-7 p-[2px] pr-2'
+          onClick={() => {
+            copy(result)
+            Toast.notify({ type: 'success', message: 'copied' })
+          }}
+        >
+          <>
+            <ClipboardDocumentIcon className='text-gray-500 w-4 h-3 mr-1' />
+            <span className='text-gray-500 text-xs leading-3'>{t('share.generation.copy')}</span>
+          </>
+        </Button>
+
+        {showFeedback && feedback.rating && feedback.rating === 'like' && (
+          <Tooltip
+            popupContent="Undo Great Rating"
+          >
+            <div
+              onClick={() => {
+                onFeedback({
+                  rating: null,
+                })
+              }}
+              className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-primary-600 border border-primary-200 bg-primary-100 hover:border-primary-300 hover:bg-primary-200'>
+              <HandThumbUpIcon width={16} height={16} />
+            </div>
+          </Tooltip>
+        )}
+
+        {showFeedback && feedback.rating && feedback.rating === 'dislike' && (
+          <Tooltip
+            popupContent="Undo Undesirable Response"
+          >
+            <div
+              onClick={() => {
+                onFeedback({
+                  rating: null,
+                })
+              }}
+              className='flex w-7 h-7 items-center justify-center rounded-md cursor-pointer  !text-red-600 border border-red-200 bg-red-100 hover:border-red-300 hover:bg-red-200'>
+              <HandThumbDownIcon width={16} height={16} />
+            </div>
+          </Tooltip>
+        )}
+
+        {showFeedback && !feedback.rating && (
+          <div className='flex rounded-lg border border-gray-200 p-[1px] space-x-1'>
+            <Tooltip
+              popupContent="Great Rating"
+              needsDelay={false}
+            >
+              <div
+                onClick={() => {
+                  onFeedback({
+                    rating: 'like',
+                  })
+                }}
+                className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>
+                <HandThumbUpIcon width={16} height={16} />
+              </div>
+            </Tooltip>
+            <Tooltip
+              popupContent="Undesirable Response"
+              needsDelay={false}
+            >
+              <div
+                onClick={() => {
+                  onFeedback({
+                    rating: 'dislike',
+                  })
+                }}
+                className='flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-gray-100'>
+                <HandThumbDownIcon width={16} height={16} />
+              </div>
+            </Tooltip>
+          </div>
+        )}
+      </div>
+
+    </div>
+  )
+}
+
+export default React.memo(Header)

dify_1.0.0/web/app/components/share/text-generation/result/index.tsx

@@ -0,0 +1,438 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import { useBoolean } from 'ahooks'
+import { t } from 'i18next'
+import produce from 'immer'
+import cn from '@/utils/classnames'
+import TextGenerationRes from '@/app/components/app/text-generate/item'
+import NoData from '@/app/components/share/text-generation/no-data'
+import Toast from '@/app/components/base/toast'
+import { sendCompletionMessage, sendWorkflowMessage, updateFeedback } from '@/service/share'
+import type { FeedbackType } from '@/app/components/base/chat/chat/type'
+import Loading from '@/app/components/base/loading'
+import type { PromptConfig } from '@/models/debug'
+import type { InstalledApp } from '@/models/explore'
+import type { ModerationService } from '@/models/common'
+import { TransferMethod, type VisionFile, type VisionSettings } from '@/types/app'
+import { NodeRunningStatus, WorkflowRunningStatus } from '@/app/components/workflow/types'
+import type { WorkflowProcess } from '@/app/components/base/chat/types'
+import { sleep } from '@/utils'
+import type { SiteInfo } from '@/models/share'
+import { TEXT_GENERATION_TIMEOUT_MS } from '@/config'
+import {
+  getFilesInLogs,
+} from '@/app/components/base/file-uploader/utils'
+
+export interface IResultProps {
+  isWorkflow: boolean
+  isCallBatchAPI: boolean
+  isPC: boolean
+  isMobile: boolean
+  isInstalledApp: boolean
+  installedAppInfo?: InstalledApp
+  isError: boolean
+  isShowTextToSpeech: boolean
+  promptConfig: PromptConfig | null
+  moreLikeThisEnabled: boolean
+  inputs: Record<string, any>
+  controlSend?: number
+  controlRetry?: number
+  controlStopResponding?: number
+  onShowRes: () => void
+  handleSaveMessage: (messageId: string) => void
+  taskId?: number
+  onCompleted: (completionRes: string, taskId?: number, success?: boolean) => void
+  enableModeration?: boolean
+  moderationService?: (text: string) => ReturnType<ModerationService>
+  visionConfig: VisionSettings
+  completionFiles: VisionFile[]
+  siteInfo: SiteInfo | null
+}
+
+const Result: FC<IResultProps> = ({
+  isWorkflow,
+  isCallBatchAPI,
+  isPC,
+  isMobile,
+  isInstalledApp,
+  installedAppInfo,
+  isError,
+  isShowTextToSpeech,
+  promptConfig,
+  moreLikeThisEnabled,
+  inputs,
+  controlSend,
+  controlRetry,
+  controlStopResponding,
+  onShowRes,
+  handleSaveMessage,
+  taskId,
+  onCompleted,
+  visionConfig,
+  completionFiles,
+  siteInfo,
+}) => {
+  const [isResponding, { setTrue: setRespondingTrue, setFalse: setRespondingFalse }] = useBoolean(false)
+  useEffect(() => {
+    if (controlStopResponding)
+      setRespondingFalse()
+  }, [controlStopResponding])
+
+  const [completionRes, doSetCompletionRes] = useState<any>('')
+  const completionResRef = useRef<any>()
+  const setCompletionRes = (res: any) => {
+    completionResRef.current = res
+    doSetCompletionRes(res)
+  }
+  const getCompletionRes = () => completionResRef.current
+  const [workflowProcessData, doSetWorkflowProcessData] = useState<WorkflowProcess>()
+  const workflowProcessDataRef = useRef<WorkflowProcess>()
+  const setWorkflowProcessData = (data: WorkflowProcess) => {
+    workflowProcessDataRef.current = data
+    doSetWorkflowProcessData(data)
+  }
+  const getWorkflowProcessData = () => workflowProcessDataRef.current
+
+  const { notify } = Toast
+  const isNoData = !completionRes
+
+  const [messageId, setMessageId] = useState<string | null>(null)
+  const [feedback, setFeedback] = useState<FeedbackType>({
+    rating: null,
+  })
+
+  const handleFeedback = async (feedback: FeedbackType) => {
+    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating } }, isInstalledApp, installedAppInfo?.id)
+    setFeedback(feedback)
+  }
+
+  const logError = (message: string) => {
+    notify({ type: 'error', message })
+  }
+
+  const checkCanSend = () => {
+    // batch will check outer
+    if (isCallBatchAPI)
+      return true
+
+    const prompt_variables = promptConfig?.prompt_variables
+    if (!prompt_variables || prompt_variables?.length === 0) {
+      if (completionFiles.find(item => item.transfer_method === TransferMethod.local_file && !item.upload_file_id)) {
+        notify({ type: 'info', message: t('appDebug.errorMessage.waitForFileUpload') })
+        return false
+      }
+      return true
+    }
+
+    let hasEmptyInput = ''
+    const requiredVars = prompt_variables?.filter(({ key, name, required }) => {
+      const res = (!key || !key.trim()) || (!name || !name.trim()) || (required || required === undefined || required === null)
+      return res
+    }) || [] // compatible with old version
+    requiredVars.forEach(({ key, name }) => {
+      if (hasEmptyInput)
+        return
+
+      if (!inputs[key])
+        hasEmptyInput = name
+    })
+
+    if (hasEmptyInput) {
+      logError(t('appDebug.errorMessage.valueOfVarRequired', { key: hasEmptyInput }))
+      return false
+    }
+
+    if (completionFiles.find(item => item.transfer_method === TransferMethod.local_file && !item.upload_file_id)) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForFileUpload') })
+      return false
+    }
+    return !hasEmptyInput
+  }
+
+  const handleSend = async () => {
+    if (isResponding) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
+      return false
+    }
+
+    if (!checkCanSend())
+      return
+
+    const data: Record<string, any> = {
+      inputs,
+    }
+    if (visionConfig.enabled && completionFiles && completionFiles?.length > 0) {
+      data.files = completionFiles.map((item) => {
+        if (item.transfer_method === TransferMethod.local_file) {
+          return {
+            ...item,
+            url: '',
+          }
+        }
+        return item
+      })
+    }
+
+    setMessageId(null)
+    setFeedback({
+      rating: null,
+    })
+    setCompletionRes('')
+
+    let res: string[] = []
+    let tempMessageId = ''
+
+    if (!isPC)
+      onShowRes()
+
+    setRespondingTrue()
+    let isEnd = false
+    let isTimeout = false;
+    (async () => {
+      await sleep(TEXT_GENERATION_TIMEOUT_MS)
+      if (!isEnd) {
+        setRespondingFalse()
+        onCompleted(getCompletionRes(), taskId, false)
+        isTimeout = true
+      }
+    })()
+
+    if (isWorkflow) {
+      sendWorkflowMessage(
+        data,
+        {
+          onWorkflowStarted: ({ workflow_run_id }) => {
+            tempMessageId = workflow_run_id
+            setWorkflowProcessData({
+              status: WorkflowRunningStatus.Running,
+              tracing: [],
+              expand: false,
+              resultText: '',
+            })
+          },
+          onIterationStart: ({ data }) => {
+            setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+              draft.expand = true
+              draft.tracing!.push({
+                ...data,
+                status: NodeRunningStatus.Running,
+                expand: true,
+              } as any)
+            }))
+          },
+          onIterationNext: () => {
+            setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+              draft.expand = true
+              const iterations = draft.tracing.find(item => item.node_id === data.node_id
+                && (item.execution_metadata?.parallel_id === data.execution_metadata?.parallel_id || item.parallel_id === data.execution_metadata?.parallel_id))!
+              iterations?.details!.push([])
+            }))
+          },
+          onIterationFinish: ({ data }) => {
+            setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+              draft.expand = true
+              const iterationsIndex = draft.tracing.findIndex(item => item.node_id === data.node_id
+                && (item.execution_metadata?.parallel_id === data.execution_metadata?.parallel_id || item.parallel_id === data.execution_metadata?.parallel_id))!
+              draft.tracing[iterationsIndex] = {
+                ...data,
+                expand: !!data.error,
+              } as any
+            }))
+          },
+          onNodeStarted: ({ data }) => {
+            if (data.iteration_id)
+              return
+
+            setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+              draft.expand = true
+              draft.tracing!.push({
+                ...data,
+                status: NodeRunningStatus.Running,
+                expand: true,
+              } as any)
+            }))
+          },
+          onNodeFinished: ({ data }) => {
+            if (data.iteration_id)
+              return
+
+            setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+              const currentIndex = draft.tracing!.findIndex(trace => trace.node_id === data.node_id
+                && (trace.execution_metadata?.parallel_id === data.execution_metadata?.parallel_id || trace.parallel_id === data.execution_metadata?.parallel_id))
+              if (currentIndex > -1 && draft.tracing) {
+                draft.tracing[currentIndex] = {
+                  ...(draft.tracing[currentIndex].extras
+                    ? { extras: draft.tracing[currentIndex].extras }
+                    : {}),
+                  ...data,
+                  expand: !!data.error,
+                } as any
+              }
+            }))
+          },
+          onWorkflowFinished: ({ data }) => {
+            if (isTimeout) {
+              notify({ type: 'warning', message: t('appDebug.warningMessage.timeoutExceeded') })
+              return
+            }
+            if (data.error) {
+              notify({ type: 'error', message: data.error })
+              setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+                draft.status = WorkflowRunningStatus.Failed
+              }))
+              setRespondingFalse()
+              onCompleted(getCompletionRes(), taskId, false)
+              isEnd = true
+              return
+            }
+            setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+              draft.status = WorkflowRunningStatus.Succeeded
+              draft.files = getFilesInLogs(data.outputs || []) as any[]
+            }))
+            if (!data.outputs) {
+              setCompletionRes('')
+            }
+            else {
+              setCompletionRes(data.outputs)
+              const isStringOutput = Object.keys(data.outputs).length === 1 && typeof data.outputs[Object.keys(data.outputs)[0]] === 'string'
+              if (isStringOutput) {
+                setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+                  draft.resultText = data.outputs[Object.keys(data.outputs)[0]]
+                }))
+              }
+            }
+            setRespondingFalse()
+            setMessageId(tempMessageId)
+            onCompleted(getCompletionRes(), taskId, true)
+            isEnd = true
+          },
+          onTextChunk: (params) => {
+            const { data: { text } } = params
+            setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+              draft.resultText += text
+            }))
+          },
+          onTextReplace: (params) => {
+            const { data: { text } } = params
+            setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
+              draft.resultText = text
+            }))
+          },
+        },
+        isInstalledApp,
+        installedAppInfo?.id,
+      )
+    }
+    else {
+      sendCompletionMessage(data, {
+        onData: (data: string, _isFirstMessage: boolean, { messageId }) => {
+          tempMessageId = messageId
+          res.push(data)
+          setCompletionRes(res.join(''))
+        },
+        onCompleted: () => {
+          if (isTimeout) {
+            notify({ type: 'warning', message: t('appDebug.warningMessage.timeoutExceeded') })
+            return
+          }
+          setRespondingFalse()
+          setMessageId(tempMessageId)
+          onCompleted(getCompletionRes(), taskId, true)
+          isEnd = true
+        },
+        onMessageReplace: (messageReplace) => {
+          res = [messageReplace.answer]
+          setCompletionRes(res.join(''))
+        },
+        onError() {
+          if (isTimeout) {
+            notify({ type: 'warning', message: t('appDebug.warningMessage.timeoutExceeded') })
+            return
+          }
+          setRespondingFalse()
+          onCompleted(getCompletionRes(), taskId, false)
+          isEnd = true
+        },
+      }, isInstalledApp, installedAppInfo?.id)
+    }
+  }
+
+  const [controlClearMoreLikeThis, setControlClearMoreLikeThis] = useState(0)
+  useEffect(() => {
+    if (controlSend) {
+      handleSend()
+      setControlClearMoreLikeThis(Date.now())
+    }
+  }, [controlSend])
+
+  useEffect(() => {
+    if (controlRetry)
+      handleSend()
+  }, [controlRetry])
+
+  const renderTextGenerationRes = () => (
+    <TextGenerationRes
+      isWorkflow={isWorkflow}
+      workflowProcessData={workflowProcessData}
+      className='mt-3'
+      isError={isError}
+      onRetry={handleSend}
+      content={completionRes}
+      messageId={messageId}
+      isInWebApp
+      moreLikeThis={moreLikeThisEnabled}
+      onFeedback={handleFeedback}
+      feedback={feedback}
+      onSave={handleSaveMessage}
+      isMobile={isMobile}
+      isInstalledApp={isInstalledApp}
+      installedAppId={installedAppInfo?.id}
+      isLoading={isCallBatchAPI ? (!completionRes && isResponding) : false}
+      taskId={isCallBatchAPI ? ((taskId as number) < 10 ? `0${taskId}` : `${taskId}`) : undefined}
+      controlClearMoreLikeThis={controlClearMoreLikeThis}
+      isShowTextToSpeech={isShowTextToSpeech}
+      hideProcessDetail
+      siteInfo={siteInfo}
+    />
+  )
+
+  return (
+    <div className={cn(isNoData && !isCallBatchAPI && 'h-full')}>
+      {!isCallBatchAPI && !isWorkflow && (
+        (isResponding && !completionRes)
+          ? (
+            <div className='flex h-full w-full justify-center items-center'>
+              <Loading type='area' />
+            </div>)
+          : (
+            <>
+              {(isNoData)
+                ? <NoData />
+                : renderTextGenerationRes()
+              }
+            </>
+          )
+      )}
+      {
+        !isCallBatchAPI && isWorkflow && (
+          (isResponding && !workflowProcessData)
+            ? (
+              <div className='flex h-full w-full justify-center items-center'>
+                <Loading type='area' />
+              </div>
+            )
+            : !workflowProcessData
+              ? <NoData />
+              : renderTextGenerationRes()
+        )
+      }
+      {isCallBatchAPI && (
+        <div className='mt-2'>
+          {renderTextGenerationRes()}
+        </div>
+      )}
+    </div>
+  )
+}
+export default React.memo(Result)

dify_1.0.0/web/app/components/share/text-generation/run-batch/csv-download/index.tsx

@@ -0,0 +1,70 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import {
+  useCSVDownloader,
+} from 'react-papaparse'
+import { useTranslation } from 'react-i18next'
+import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
+
+export type ICSVDownloadProps = {
+  vars: { name: string }[]
+}
+
+const CSVDownload: FC<ICSVDownloadProps> = ({
+  vars,
+}) => {
+  const { t } = useTranslation()
+  const { CSVDownloader, Type } = useCSVDownloader()
+  const addQueryContentVars = [...vars]
+  const template = (() => {
+    const res: Record<string, string> = {}
+    addQueryContentVars.forEach((item) => {
+      res[item.name] = ''
+    })
+    return res
+  })()
+
+  return (
+    <div className='mt-6'>
+      <div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
+      <div className='mt-2 max-h-[500px] overflow-auto'>
+        <table className='w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
+          <thead className='text-gray-500'>
+            <tr>
+              {addQueryContentVars.map((item, i) => (
+                <td key={i} className='h-9 pl-4 border-b border-gray-200'>{item.name}</td>
+              ))}
+            </tr>
+          </thead>
+          <tbody className='text-gray-300'>
+            <tr>
+              {addQueryContentVars.map((item, i) => (
+                <td key={i} className='h-9 pl-4'>{item.name} {t('share.generation.field')}</td>
+              ))}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <CSVDownloader
+        className="block mt-2 cursor-pointer"
+        type={Type.Link}
+        filename={'template'}
+        bom={true}
+        config={{
+          // delimiter: ';',
+        }}
+        data={[
+          template,
+        ]}
+      >
+        <div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
+          <DownloadIcon className='w-3 h-3' />
+          <span>{t('share.generation.downloadTemplate')}</span>
+        </div>
+      </CSVDownloader>
+    </div>
+
+  )
+}
+export default React.memo(CSVDownload)

dify_1.0.0/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx

@@ -0,0 +1,70 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import {
+  useCSVReader,
+} from 'react-papaparse'
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
+import cn from '@/utils/classnames'
+import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
+
+export type Props = {
+  onParsed: (data: string[][]) => void
+}
+
+const CSVReader: FC<Props> = ({
+  onParsed,
+}) => {
+  const { t } = useTranslation()
+  const { CSVReader } = useCSVReader()
+  const [zoneHover, setZoneHover] = useState(false)
+  return (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        onParsed(results.data)
+        setZoneHover(false)
+      }}
+      onDragOver={(event: DragEvent) => {
+        event.preventDefault()
+        setZoneHover(true)
+      }}
+      onDragLeave={(event: DragEvent) => {
+        event.preventDefault()
+        setZoneHover(false)
+      }}
+    >
+      {({
+        getRootProps,
+        acceptedFile,
+      }: any) => (
+        <>
+          <div
+            {...getRootProps()}
+            className={cn(s.zone, zoneHover && s.zoneHover, acceptedFile ? 'px-6' : 'justify-center border-dashed text-gray-500')}
+          >
+            {
+              acceptedFile
+                ? (
+                  <div className='w-full flex items-center space-x-2'>
+                    <CSVIcon className="shrink-0" />
+                    <div className='flex w-0 grow'>
+                      <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{acceptedFile.name.replace(/.csv$/, '')}</span>
+                      <span className='shrink-0 text-gray-500'>.csv</span>
+                    </div>
+                  </div>
+                )
+                : (
+                  <div className='flex items-center justify-center space-x-2'>
+                    <CSVIcon className="shrink-0" />
+                    <div className='text-gray-500'>{t('share.generation.csvUploadTitle')}<span className='text-primary-400'>{t('share.generation.browse')}</span></div>
+                  </div>
+                )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  )
+}
+
+export default React.memo(CSVReader)

dify_1.0.0/web/app/components/share/text-generation/run-batch/csv-reader/style.module.css

@@ -0,0 +1,11 @@
+.zone {
+    @apply flex items-center h-20 rounded-xl bg-gray-50 border border-gray-200 cursor-pointer text-sm font-normal;
+}
+
+.zoneHover {
+    @apply border-solid bg-gray-100;
+}
+
+.info {
+    @apply text-gray-800 text-sm;
+}

dify_1.0.0/web/app/components/share/text-generation/run-batch/index.tsx

@@ -0,0 +1,59 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import {
+  PlayIcon,
+} from '@heroicons/react/24/solid'
+import { useTranslation } from 'react-i18next'
+import {
+  RiLoader2Line,
+} from '@remixicon/react'
+import CSVReader from './csv-reader'
+import CSVDownload from './csv-download'
+import cn from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+export type IRunBatchProps = {
+  vars: { name: string }[]
+  onSend: (data: string[][]) => void
+  isAllFinished: boolean
+}
+
+const RunBatch: FC<IRunBatchProps> = ({
+  vars,
+  onSend,
+  isAllFinished,
+}) => {
+  const { t } = useTranslation()
+
+  const [csvData, setCsvData] = React.useState<string[][]>([])
+  const [isParsed, setIsParsed] = React.useState(false)
+  const handleParsed = (data: string[][]) => {
+    setCsvData(data)
+    // console.log(data)
+    setIsParsed(true)
+  }
+
+  const handleSend = () => {
+    onSend(csvData)
+  }
+  const Icon = isAllFinished ? PlayIcon : RiLoader2Line
+  return (
+    <div className='pt-4'>
+      <CSVReader onParsed={handleParsed} />
+      <CSVDownload vars={vars} />
+      <div className='mt-4 h-[1px] bg-gray-100'></div>
+      <div className='flex justify-end'>
+        <Button
+          variant="primary"
+          className='mt-4 pl-3 pr-4'
+          onClick={handleSend}
+          disabled={!isParsed || !isAllFinished}
+        >
+          <Icon className={cn(!isAllFinished && 'animate-spin', 'shrink-0 w-4 h-4 mr-1')} aria-hidden="true" />
+          <span className='uppercase text-[13px]'>{t('share.generation.run')}</span>
+        </Button>
+      </div>
+    </div>
+  )
+}
+export default React.memo(RunBatch)

dify_1.0.0/web/app/components/share/text-generation/run-batch/res-download/index.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import {
+  useCSVDownloader,
+} from 'react-papaparse'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
+import Button from '@/app/components/base/button'
+export type IResDownloadProps = {
+  isMobile: boolean
+  values: Record<string, string>[]
+}
+
+const ResDownload: FC<IResDownloadProps> = ({
+  isMobile,
+  values,
+}) => {
+  const { t } = useTranslation()
+  const { CSVDownloader, Type } = useCSVDownloader()
+
+  return (
+    <CSVDownloader
+      className="block cursor-pointer"
+      type={Type.Link}
+      filename={'result'}
+      bom={true}
+      config={{
+        // delimiter: ';',
+      }}
+      data={values}
+    >
+      <Button className={cn('space-x-2 bg-white', isMobile ? '!p-0 !w-8 justify-center' : '')}>
+        <DownloadIcon className='w-4 h-4 text-[#155EEF]' />
+        {!isMobile && <span className='text-[#155EEF]'>{t('common.operation.download')}</span>}
+      </Button>
+    </CSVDownloader>
+  )
+}
+export default React.memo(ResDownload)

dify_1.0.0/web/app/components/share/text-generation/run-once/index.tsx

@@ -0,0 +1,168 @@
+import type { FC, FormEvent } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PlayIcon,
+} from '@heroicons/react/24/solid'
+import Select from '@/app/components/base/select'
+import type { SiteInfo } from '@/models/share'
+import type { PromptConfig } from '@/models/debug'
+import Button from '@/app/components/base/button'
+import Textarea from '@/app/components/base/textarea'
+import { DEFAULT_VALUE_MAX_LEN } from '@/config'
+import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
+import type { VisionFile, VisionSettings } from '@/types/app'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
+import { getProcessedFiles } from '@/app/components/base/file-uploader/utils'
+
+export type IRunOnceProps = {
+  siteInfo: SiteInfo
+  promptConfig: PromptConfig
+  inputs: Record<string, any>
+  inputsRef: React.MutableRefObject<Record<string, any>>
+  onInputsChange: (inputs: Record<string, any>) => void
+  onSend: () => void
+  visionConfig: VisionSettings
+  onVisionFilesChange: (files: VisionFile[]) => void
+}
+const RunOnce: FC<IRunOnceProps> = ({
+  promptConfig,
+  inputs,
+  inputsRef,
+  onInputsChange,
+  onSend,
+  visionConfig,
+  onVisionFilesChange,
+}) => {
+  const { t } = useTranslation()
+
+  const onClear = () => {
+    const newInputs: Record<string, any> = {}
+    promptConfig.prompt_variables.forEach((item) => {
+      newInputs[item.key] = ''
+    })
+    onInputsChange(newInputs)
+  }
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    onSend()
+  }
+
+  const handleInputsChange = useCallback((newInputs: Record<string, any>) => {
+    onInputsChange(newInputs)
+    inputsRef.current = newInputs
+  }, [onInputsChange, inputsRef])
+
+  return (
+    <div className="">
+      <section>
+        {/* input form */}
+        <form onSubmit={onSubmit}>
+          {promptConfig.prompt_variables.map(item => (
+            <div className='w-full mt-4' key={item.key}>
+              <label className='text-gray-900 text-sm font-medium'>{item.name}</label>
+              <div className='mt-2'>
+                {item.type === 'select' && (
+                  <Select
+                    className='w-full'
+                    defaultValue={inputs[item.key]}
+                    onSelect={(i) => { handleInputsChange({ ...inputsRef.current, [item.key]: i.value }) }}
+                    items={(item.options || []).map(i => ({ name: i, value: i }))}
+                    allowSearch={false}
+                    bgClassName='bg-gray-50'
+                  />
+                )}
+                {item.type === 'string' && (
+                  <input
+                    type="text"
+                    className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
+                    placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                    value={inputs[item.key]}
+                    onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
+                    maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
+                  />
+                )}
+                {item.type === 'paragraph' && (
+                  <Textarea
+                    className='h-[104px] sm:text-xs'
+                    placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                    value={inputs[item.key]}
+                    onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
+                  />
+                )}
+                {item.type === 'number' && (
+                  <input
+                    type="number"
+                    className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
+                    placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                    value={inputs[item.key]}
+                    onChange={(e) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
+                  />
+                )}
+                {item.type === 'file' && (
+                  <FileUploaderInAttachmentWrapper
+                    onChange={(files) => { handleInputsChange({ ...inputsRef.current, [item.key]: getProcessedFiles(files)[0] }) }}
+                    fileConfig={{
+                      ...item.config,
+                      fileUploadConfig: (visionConfig as any).fileUploadConfig,
+                    }}
+                  />
+                )}
+                {item.type === 'file-list' && (
+                  <FileUploaderInAttachmentWrapper
+                    onChange={(files) => { handleInputsChange({ ...inputsRef.current, [item.key]: getProcessedFiles(files) }) }}
+                    fileConfig={{
+                      ...item.config,
+                      fileUploadConfig: (visionConfig as any).fileUploadConfig,
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          ))}
+          {
+            visionConfig?.enabled && (
+              <div className="w-full mt-4">
+                <div className="text-gray-900 text-sm font-medium">{t('common.imageUploader.imageUpload')}</div>
+                <div className='mt-2'>
+                  <TextGenerationImageUploader
+                    settings={visionConfig}
+                    onFilesChange={files => onVisionFilesChange(files.filter(file => file.progress !== -1).map(fileItem => ({
+                      type: 'image',
+                      transfer_method: fileItem.type,
+                      url: fileItem.url,
+                      upload_file_id: fileItem.fileId,
+                    })))}
+                  />
+                </div>
+              </div>
+            )
+          }
+          {promptConfig.prompt_variables.length > 0 && (
+            <div className='mt-4 h-[1px] bg-gray-100'></div>
+          )}
+          <div className='w-full mt-4'>
+            <div className="flex items-center justify-between">
+              <Button
+                onClick={onClear}
+                disabled={false}
+              >
+                <span className='text-[13px]'>{t('common.operation.clear')}</span>
+              </Button>
+              <Button
+                type='submit'
+                variant="primary"
+                disabled={false}
+              >
+                <PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
+                <span className='text-[13px]'>{t('share.generation.run')}</span>
+              </Button>
+            </div>
+          </div>
+        </form>
+      </section>
+    </div>
+  )
+}
+export default React.memo(RunOnce)

dify_1.0.0/web/app/components/share/text-generation/style.module.css

@@ -0,0 +1,12 @@
+.installedApp {
+  height: 100%;
+  border-radius: 16px;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.starIcon {
+  width: 16px;
+  height: 16px;
+  background: url(./icons/star.svg) center center no-repeat;
+  background-size: contain;
+}

dify_1.0.0/web/app/components/share/utils.ts

@@ -0,0 +1,53 @@
+import { CONVERSATION_ID_INFO } from '../base/chat/constants'
+import { fetchAccessToken } from '@/service/share'
+
+export const checkOrSetAccessToken = async () => {
+  const sharedToken = globalThis.location.pathname.split('/').slice(-1)[0]
+  const accessToken = localStorage.getItem('token') || JSON.stringify({ [sharedToken]: '' })
+  let accessTokenJson = { [sharedToken]: '' }
+  try {
+    accessTokenJson = JSON.parse(accessToken)
+  }
+  catch (e) {
+
+  }
+  if (!accessTokenJson[sharedToken]) {
+    const res = await fetchAccessToken(sharedToken)
+    accessTokenJson[sharedToken] = res.access_token
+    localStorage.setItem('token', JSON.stringify(accessTokenJson))
+  }
+}
+
+export const setAccessToken = async (sharedToken: string, token: string) => {
+  const accessToken = localStorage.getItem('token') || JSON.stringify({ [sharedToken]: '' })
+  let accessTokenJson = { [sharedToken]: '' }
+  try {
+    accessTokenJson = JSON.parse(accessToken)
+  }
+  catch (e) {
+
+  }
+
+  localStorage.removeItem(CONVERSATION_ID_INFO)
+
+  accessTokenJson[sharedToken] = token
+  localStorage.setItem('token', JSON.stringify(accessTokenJson))
+}
+
+export const removeAccessToken = () => {
+  const sharedToken = globalThis.location.pathname.split('/').slice(-1)[0]
+
+  const accessToken = localStorage.getItem('token') || JSON.stringify({ [sharedToken]: '' })
+  let accessTokenJson = { [sharedToken]: '' }
+  try {
+    accessTokenJson = JSON.parse(accessToken)
+  }
+  catch (e) {
+
+  }
+
+  localStorage.removeItem(CONVERSATION_ID_INFO)
+
+  delete accessTokenJson[sharedToken]
+  localStorage.setItem('token', JSON.stringify(accessTokenJson))
+}