feat: add welcome intro

web/app/components/app/chat/index.tsx

@@ -41,6 +41,7 @@ export type SubmitAnnotationFunc = (messageId: string, content: string) => Promi
 export type DisplayScene = 'web' | 'console'
 
 export type IChatProps = {
+  configElem?: React.ReactNode
   chatList: IChatItem[]
   /**
    * Whether to display the editing area and rating status
@@ -412,6 +413,7 @@ const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar
 }
 
 const Chat: FC<IChatProps> = ({
+  configElem,
   chatList,
   feedbackDisabled = false,
   isHideFeedbackEdit = false,
@@ -509,8 +511,9 @@ const Chat: FC<IChatProps> = ({
 
   return (
     <div className={cn('px-3.5', 'h-full')}>
+      {chatList.length === 0 && (configElem || null)}
       {/* Chat List */}
-      <div className="h-full space-y-[30px]">
+      <div className={cn((chatList.length === 0 && configElem) ? 'h-0' : 'h-full', 'space-y-[30px]')}>
         {chatList.map((item) => {
           if (item.isAnswer) {
             const isLast = item.id === chatList[chatList.length - 1].id

web/app/components/explore/universal-chat/config/index.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+export type IConfigProps = {
+  className?: string
+  plugins: Record<string, boolean>
+  onPluginChange: (key: string, value: boolean) => void
+  contexts: any[]
+  onContextChange: (contexts: any[]) => void
+}
+
+const Config: FC<IConfigProps> = ({
+  className,
+  plugins,
+  onPluginChange,
+  contexts,
+  onContextChange,
+}) => {
+  return (
+    <div className={className}>
+      Config content
+    </div>
+  )
+}
+export default React.memo(Config)

web/app/components/explore/universal-chat/index.tsx

@@ -10,9 +10,9 @@ import { useBoolean, useGetState } from 'ahooks'
 import AppUnavailable from '../../base/app-unavailable'
 import useConversation from './hooks/use-conversation'
 import s from './style.module.css'
+import Init from './init'
 import { ToastContext } from '@/app/components/base/toast'
 import Sidebar from '@/app/components/share/chat/sidebar'
-import ConfigSence from '@/app/components/share/chat/config-scence'
 import {
   delConversation,
   fetchAppParams,
@@ -34,7 +34,6 @@ import Loading from '@/app/components/base/loading'
 import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import Confirm from '@/app/components/base/confirm'
-
 const APP_ID = 'universal-chat'
 const isUniversalChat = true
 
@@ -163,12 +162,6 @@ const Main: FC<IMainProps> = () => {
     // parse variables in introduction
     setChatList(generateNewChatListWithOpenstatement('', inputs))
   }
-  const hasSetInputs = (() => {
-    if (!isNewConversation)
-      return true
-
-    return isChatStarted
-  })()
 
   const conversationName = currConversationInfo?.name || t('share.chat.newChatDefaultName') as string
   const conversationIntroduction = currConversationInfo?.introduction || ''
@@ -518,6 +511,15 @@ const Main: FC<IMainProps> = () => {
     )
   }
 
+  const [plugins, setPlugins] = useState<Record<string, boolean>>({})
+  const handlePluginsChange = (key, value) => {
+    setPlugins({
+      ...plugins,
+      [key]: value,
+    })
+  }
+  const [contexts, setContexts] = useState<any[]>([])
+
   if (appUnavailable)
     return <AppUnavailable isUnknwonReason={isUnknwonReason} />
 
@@ -552,23 +554,15 @@ const Main: FC<IMainProps> = () => {
           'flex-grow flex flex-col overflow-y-auto',
         )
         }>
-          <ConfigSence
-            conversationName={conversationName}
-            hasSetInputs={hasSetInputs}
-            isPublicVersion={true}
-            siteInfo={siteInfo}
-            promptConfig={promptConfig}
-            onStartChat={handleStartChat}
-            canEidtInpus={canEditInpus}
-            savedInputs={currInputs as Record<string, any>}
-            onInputsChange={setCurrInputs}
-          />
-
-          {
-            hasSetInputs && (
           <div className={cn(doShowSuggestion ? 'pb-[140px]' : (isResponsing ? 'pb-[113px]' : 'pb-[76px]'), 'relative grow h-[200px] pc:w-[794px] max-w-full mobile:w-full mx-auto mb-3.5 overflow-hidden')}>
             <div className='h-full overflow-y-auto' ref={chatListDomRef}>
               <Chat
+                configElem={<Init
+                  plugins={plugins}
+                  onPluginChange={handlePluginsChange}
+                  contexts={contexts}
+                  onContextChange={setContexts}
+                />}
                 chatList={chatList}
                 onSend={handleSend}
                 isHideFeedbackEdit
@@ -587,8 +581,7 @@ const Main: FC<IMainProps> = () => {
                 isShowSpeechToText={speechToTextConfig?.enabled}
               />
             </div>
-              </div>)
-          }
+          </div>
 
           {isShowConfirm && (
             <Confirm

web/app/components/explore/universal-chat/init/index.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import type { IConfigProps } from '../config'
+import Config from '../config'
+import s from './style.module.css'
+
+const Init: FC<IConfigProps> = ({
+  ...configProps
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='h-full flex items-center'>
+      <div>
+        <div className='w-[480px] mx-auto text-center'>
+          <div className={cn(s.textGradient, 'mb-2 leading-[32px] font-semibold text-[24px]')}>{t('explore.universalChat.welcome')}</div>
+          <div className='mb-2 font-normal text-sm text-gray-500'>{t('explore.universalChat.welcomeDescribe')}</div>
+        </div>
+        <div className='flex mb-2 mx-auto h-8 items-center'>
+          <div className={s.line}></div>
+        </div>
+        <Config className='w-[480px] mx-auto' {...configProps} />
+      </div>
+    </div>
+  )
+}
+export default React.memo(Init)

web/app/components/explore/universal-chat/init/style.module.css

+.textGradient {
+  background: linear-gradient(to right, rgba(16, 74, 225, 1) 0, rgba(0, 152, 238, 1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+.line {
+  width: 720px;
+  border-top: 1px solid #eee; /* TODO: gradient */ 
+  /* border-image-source: linear-gradient(90deg, rgba(242, 244, 247, 0) 0%, #F2F4F7 49.17%, rgba(242, 244, 247, 0) 100%); */
+}
+
+

web/i18n/lang/explore.en.ts

@@ -35,6 +35,10 @@ const translation = {
     Programming: 'Programming',
     HR: 'HR',
   },
+  universalChat: {
+    welcome: 'Start chat with Dify',
+    welcomeDescribe: 'Your AI conversation companion for personalized assistance',
+  },
 }
 
 export default translation

web/i18n/lang/explore.zh.ts

@@ -35,6 +35,10 @@ const translation = {
     Programming: '编程',
     HR: '人力资源',
   },
+  universalChat: {
+    welcome: '开始和 Dify 聊天吧',
+    welcomeDescribe: '您的 AI 对话伴侣，为您提供个性化的帮助',
+  },
 }
 
 export default translation