chore: build chat preview

web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx

@@ -8,11 +8,13 @@ const buildIconGridCells = Array.from({ length: 16 }, (_, index) => `build-icon-
 
 type AgentBuildChatProps = Omit<AgentChatRuntimeProps, 'inputPlaceholder' | 'renderEmptyState'>
 
-function AgentBuildChatEmptyState() {
+function AgentBuildChatEmptyState({
+  inputNode,
+}: AgentChatRuntimeEmptyStateProps) {
   const { t } = useTranslation('agentV2')
 
   return (
-    <div className="pointer-events-none absolute inset-x-12 bottom-[calc(27%+84px)] flex justify-center">
+    <div className="flex h-full items-center justify-center">
       <div className="flex w-full max-w-150 flex-col items-start p-3 text-left">
         <div className="relative flex size-12 items-center justify-center overflow-hidden rounded-xl border-[0.5px] border-components-panel-border-subtle bg-background-default-dimmed text-text-tertiary">
           <div className="grid size-full grid-cols-4 grid-rows-4 gap-px p-1">
@@ -28,6 +30,7 @@ function AgentBuildChatEmptyState() {
         <p className="mt-1 max-w-full body-md-regular text-text-tertiary">
           {t('agentDetail.configure.build.empty.description')}
         </p>
+        {inputNode}
       </div>
     </div>
   )
@@ -40,8 +43,8 @@ export function AgentBuildChat(props: AgentBuildChatProps) {
     <AgentChatRuntime
       {...props}
       inputPlaceholder={t('agentDetail.configure.build.inputPlaceholder')}
-      renderEmptyState={(_emptyStateProps: AgentChatRuntimeEmptyStateProps) => (
-        <AgentBuildChatEmptyState />
+      renderEmptyState={(emptyStateProps: AgentChatRuntimeEmptyStateProps) => (
+        <AgentBuildChatEmptyState {...emptyStateProps} />
       )}
     />
   )

web/features/agent-v2/agent-detail/configure/components/preview/chat-runtime.tsx

@@ -23,6 +23,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import { useQuery } from '@tanstack/react-query'
 import { useAtomValue } from 'jotai'
 import { useCallback, useMemo } from 'react'
+import ChatInputArea from '@/app/components/base/chat/chat/chat-input-area'
 import { useChat } from '@/app/components/base/chat/chat/hooks'
 import { buildChatItemTree, getLastAnswer, isValidGeneratedAnswer } from '@/app/components/base/chat/utils'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
@@ -395,6 +396,7 @@ export type AgentChatRuntimeEmptyStateProps = {
   agentIconType?: AgentIconType | null
   agentName?: string
   hasInstructions: boolean
+  inputNode: ReactNode
 }
 
 export type AgentChatRuntimeProps = {
@@ -587,6 +589,21 @@ function AgentPreviewChatSession({
   }, [chatList, doSend])
   const isEmptyChat = chatList.length === 0
   const hasInstructions = !!config.pre_prompt.trim()
+  const emptyChatInputNode = (
+    <div className="pointer-events-auto mt-5 w-full">
+      <ChatInputArea
+        botName={agentName || 'Agent'}
+        placeholder={inputPlaceholder}
+        disabled={isResponding}
+        showFileUpload={false}
+        visionConfig={config.file_upload}
+        speechToTextConfig={config.speech_to_text}
+        onSend={doSend}
+        inputs={inputs}
+        inputsForm={inputsForm}
+      />
+    </div>
+  )
 
   return (
     <Chat
@@ -600,12 +617,13 @@ function AgentPreviewChatSession({
             agentIconType,
             agentName,
             hasInstructions,
+            inputNode: emptyChatInputNode,
           })
         : null}
-      chatContainerClassName={cn('pt-6', isEmptyChat ? 'px-12' : 'px-3')}
+      chatContainerClassName={cn('pt-6', isEmptyChat ? 'px-12 pt-2 !pb-[88px]' : 'px-3')}
       chatFooterClassName={cn(
-        'pb-0',
-        isEmptyChat ? '!bottom-[27%] px-12 pt-3' : 'px-3 pt-10',
+        '!bottom-2 pb-0',
+        isEmptyChat ? 'hidden' : 'px-3 pt-10',
       )}
       inputPlaceholder={inputPlaceholder}
       showFileUpload={false}
@@ -616,6 +634,7 @@ function AgentPreviewChatSession({
       onRegenerate={doRegenerate}
       switchSibling={siblingMessageId => setTargetMessageId(siblingMessageId)}
       onStopResponding={handleStop}
+      noChatInput={isEmptyChat}
       showPromptLog
       questionIcon={<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="xl" />}
       onAnnotationEdited={handleAnnotationEdited}

web/features/agent-v2/agent-detail/configure/components/preview/preview-chat.tsx

@@ -13,13 +13,14 @@ function AgentPreviewChatEmptyState({
   agentIconType,
   agentName,
   hasInstructions,
+  inputNode,
 }: AgentChatRuntimeEmptyStateProps) {
   const { t } = useTranslation('agentV2')
   const imageUrl = (agentIconType === 'image' || agentIconType === 'link') ? agentIcon : undefined
   const iconType = imageUrl ? 'image' : agentIconType
 
   return (
-    <div className="pointer-events-none absolute inset-x-12 bottom-[calc(27%+84px)] flex justify-center">
+    <div className="flex h-full items-center justify-center">
       <div className="flex w-full max-w-150 flex-col items-start p-3 text-left">
         <AppIcon
           size="xxl"
@@ -43,6 +44,7 @@ function AgentPreviewChatEmptyState({
             {t('agentDetail.configure.preview.empty.noInstructionsDescription')}
           </p>
         )}
+        {inputNode}
       </div>
     </div>
   )