From b4a07d9e96baf4ffaf987da9b5fbd0c0414055b4 Mon Sep 17 00:00:00 2001 From: jZonG Date: Wed, 12 Mar 2025 13:56:19 +0800 Subject: [PATCH] fix scroll in mobile suggest questions display tooltip for start a new chat reset chat input position fix webapp UI issues --- .../chat/chat-with-history/chat-wrapper.tsx | 30 +++++++++++++++++-- .../chat/chat-with-history/header/index.tsx | 15 +++++++--- .../base/chat/chat-with-history/index.tsx | 4 +-- .../base/chat/chat/answer/index.tsx | 2 +- web/app/components/base/chat/chat/index.tsx | 9 +++++- .../chat/embedded-chatbot/chat-wrapper.tsx | 2 +- web/i18n/en-US/share-app.ts | 1 + web/i18n/zh-Hans/share-app.ts | 1 + 8 files changed, 52 insertions(+), 12 deletions(-) diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx index 4a3e292f80..3b32367512 100644 --- 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 ( +
+
+ +
+ {welcomeMessage.content} + +
+
+
+ ) + } return (
{
{welcomeMessage.content}
) - }, [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) ? { switchSibling={siblingMessageId => setTargetMessageId(siblingMessageId)} inputDisabled={inputDisabled} isMobile={isMobile} + sidebarCollapseState={sidebarCollapseState} /> ) diff --git a/web/app/components/base/chat/chat-with-history/header/index.tsx b/web/app/components/base/chat/chat-with-history/header/index.tsx index 389658c42e..f0e4d085b9 100644 --- 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 = () => {
{isSidebarCollapsed && ( - - - + +
+ + + +
+ )}
diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx index 466e3cef2a..ec7121e404 100644 --- 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 = ({ {isMobile && ( )} -
+
{isSidebarCollapsed && (
= ({
)} -
+
{!isMobile &&
} {appChatListDataLoading && ( diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx index 9e29d28433..a2371abe44 100644 --- 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 = ({
)}
-
+
= ({ @@ -110,6 +111,7 @@ const Chat: FC = ({ noSpacing, inputDisabled, isMobile, + sidebarCollapseState, }) => { const { t } = useTranslation() const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({ @@ -193,6 +195,11 @@ const Chat: FC = ({ } }, []) + 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 = ({
{ 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} diff --git a/web/i18n/en-US/share-app.ts b/web/i18n/en-US/share-app.ts index b700225621..3db0e98f99 100644 --- 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', diff --git a/web/i18n/zh-Hans/share-app.ts b/web/i18n/zh-Hans/share-app.ts index 0f1f14e363..bfd17ef7a3 100644 --- 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: '已置顶',