fix scroll in mobile

suggest questions display tooltip for start a new chat reset chat input position fix webapp UI issues
2025-03-12 13:56:19 +08:00 · 2025-03-12 13:56:19 +08:00 · b4a07d9e96
commit b4a07d9e96
parent 46036e6ce6
8 changed files with 52 additions and 12 deletions
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@ -19,6 +19,7 @@ import {
 } from '@/service/share'
 import AppIcon from '@/app/components/base/app-icon'
 import AnswerIcon from '@/app/components/base/answer-icon'
+import SuggestedQuestions from '@/app/components/base/chat/chat/answer/suggested-questions'
 import cn from '@/utils/classnames'

 const ChatWrapper = () => {
@ -39,6 +40,7 @@ const ChatWrapper = () => {
    currentChatInstanceRef,
    appData,
    themeBuilder,
+    sidebarCollapseState,
  } = useChatWithHistoryContext()
  const appConfig = useMemo(() => {
    const config = appParams || {}
@ -144,10 +146,10 @@ const ChatWrapper = () => {
  }, [chatList, doSend])

  const messageList = useMemo(() => {
-    if (currentConversationId)
+    if (currentConversationId || isResponding)
      return chatList
    return chatList.filter(item => !item.isOpeningStatement)
-  }, [chatList, currentConversationId])
+  }, [chatList, currentConversationId, isResponding])

  const [collapsed, setCollapsed] = useState(!!currentConversationId)

@ -166,12 +168,33 @@ const ChatWrapper = () => {

  const welcome = useMemo(() => {
    const welcomeMessage = chatList.find(item => item.isOpeningStatement)
+    if (isResponding)
+      return null
    if (currentConversationId)
      return null
    if (!welcomeMessage)
      return null
    if (!collapsed && inputsForms.length > 0)
      return null
+    if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
+      return (
+        <div className='h-[50vh] py-12 px-4 flex items-center justify-center'>
+          <div className='grow max-w-[720px] flex gap-4'>
+            <AppIcon
+              size='xl'
+              iconType={appData?.site.icon_type}
+              icon={appData?.site.icon}
+              background={appData?.site.icon_background}
+              imageUrl={appData?.site.icon_url}
+            />
+            <div className='grow px-4 py-3 bg-chat-bubble-bg text-text-primary rounded-2xl body-lg-regular'>
+              {welcomeMessage.content}
+              <SuggestedQuestions item={welcomeMessage} />
+            </div>
+          </div>
+        </div>
+      )
+    }
    return (
      <div className={cn('h-[50vh] py-12 flex flex-col items-center justify-center gap-3')}>
        <AppIcon
@ -184,7 +207,7 @@ const ChatWrapper = () => {
        <div className='text-text-tertiary body-2xl-regular'>{welcomeMessage.content}</div>
      </div>
    )
-  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length])
+  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length, isResponding])

  const answerIcon = (appData?.site && appData.site.use_icon_as_answer_icon)
    ? <AnswerIcon
@ -227,6 +250,7 @@ const ChatWrapper = () => {
        switchSibling={siblingMessageId => setTargetMessageId(siblingMessageId)}
        inputDisabled={inputDisabled}
        isMobile={isMobile}
+        sidebarCollapseState={sidebarCollapseState}
      />
    </div>
  )
--- a/web/app/components/base/chat/chat-with-history/header/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/index.tsx
@ -9,7 +9,7 @@ import {
  useChatWithHistoryContext,
 } from '../context'
 import Operation from './operation'
-import ActionButton from '@/app/components/base/action-button'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
 import Tooltip from '@/app/components/base/tooltip'
 import ViewFormDropdown from '@/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown'
@ -106,9 +106,16 @@ const Header = () => {
            <div className='h-[14px] w-px bg-divider-regular'></div>
          </div>
          {isSidebarCollapsed && (
-            <ActionButton size='l' onClick={handleNewConversation}>
-              <RiEditBoxLine className='w-[18px] h-[18px]' />
-            </ActionButton>
+            <Tooltip
+              disabled={!!currentConversationId}
+              popupContent={t('share.chat.newChatTip')}
+            >
+              <div>
+                <ActionButton size='l' state={!currentConversationId ? ActionButtonState.Disabled : ActionButtonState.Default} disabled={!currentConversationId} onClick={handleNewConversation}>
+                  <RiEditBoxLine className='w-[18px] h-[18px]' />
+                </ActionButton>
+              </div>
+            </Tooltip>
          )}
        </div>
        <div className='flex items-center gap-1'>
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@ -82,7 +82,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
      {isMobile && (
        <HeaderInMobile />
      )}
-      <div className={cn('relative grow p-2')}>
+      <div className={cn('relative grow p-2', isMobile && 'h-[calc(100%_-_56px)] p-0')}>
        {isSidebarCollapsed && (
          <div
            className={cn(
@ -95,7 +95,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
            <Sidebar isPanel />
          </div>
        )}
-        <div className='h-full flex flex-col bg-chatbot-bg rounded-2xl border-[0,5px] border-components-panel-border-subtle overflow-hidden'>
+        <div className={cn('h-full flex flex-col bg-chatbot-bg border-[0,5px] border-components-panel-border-subtle overflow-hidden', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>
          {!isMobile && <Header />}
          {appChatListDataLoading && (
            <Loading type='app' />
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@ -110,7 +110,7 @@ const Answer: FC<AnswerProps> = ({
          </div>
        )}
      </div>
-      <div className='chat-answer-container group grow w-0 ml-4' ref={containerRef}>
+      <div className='chat-answer-container group grow w-0 ml-4 pb-4' ref={containerRef}>
        <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
          <div
            ref={contentRef}
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@ -72,6 +72,7 @@ export type ChatProps = {
  noSpacing?: boolean
  inputDisabled?: boolean
  isMobile?: boolean
+  sidebarCollapseState?: boolean
 }

 const Chat: FC<ChatProps> = ({
@ -110,6 +111,7 @@ const Chat: FC<ChatProps> = ({
  noSpacing,
  inputDisabled,
  isMobile,
+  sidebarCollapseState,
 }) => {
  const { t } = useTranslation()
  const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({
@ -193,6 +195,11 @@ const Chat: FC<ChatProps> = ({
    }
  }, [])

+  useEffect(() => {
+    if (!sidebarCollapseState)
+      setTimeout(() => handleWindowResize(), 200)
+  }, [sidebarCollapseState])
+
  const hasTryToAsk = config?.suggested_questions_after_answer?.enabled && !!suggestedQuestions?.length && onSend

  return (
@ -255,7 +262,7 @@ const Chat: FC<ChatProps> = ({
          </div>
        </div>
        <div
-          className={`absolute bottom-0 bg-chat-input-mask ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
+          className={`absolute bottom-0 bg-chat-input-mask flex justify-center ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
          ref={chatFooterRef}
        >
          <div
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@ -204,7 +204,7 @@ const ChatWrapper = () => {
      config={appConfig}
      chatList={messageList}
      isResponding={isResponding}
-      chatContainerInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}
+      chatContainerInnerClassName={cn('mx-auto w-full max-w-full pt-4 tablet:px-4', isMobile && 'px-4')}
      chatFooterClassName={cn('pb-4', !isMobile && 'rounded-b-2xl')}
      chatFooterInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-2')}
      onSend={doSend}
--- a/web/i18n/en-US/share-app.ts
+++ b/web/i18n/en-US/share-app.ts
@ -6,6 +6,7 @@ const translation = {
  },
  chat: {
    newChat: 'Start New chat',
+    newChatTip: 'Already in a new chat',
    chatSettingsTitle: 'New chat setup',
    chatFormTip: 'Chat settings cannot be modified after the chat has started.',
    pinnedTitle: 'Pinned',
--- a/web/i18n/zh-Hans/share-app.ts
+++ b/web/i18n/zh-Hans/share-app.ts
@ -6,6 +6,7 @@ const translation = {
  },
  chat: {
    newChat: '开启新对话',
+    newChatTip: '已在新对话中',
    chatSettingsTitle: '新对话设置',
    chatFormTip: '对话开始后，对话设置将无法修改。',
    pinnedTitle: '已置顶',