浏览代码

fix: Fixed an issue where the back bottom button on Chat was still visible when the dialog box size changed and it was not needed

zhangyumei.0319 3 周之前
父节点
当前提交
ae9e57d168
共有 2 个文件被更改,包括 39 次插入32 次删除
  1. 4 0
      packages/semi-foundation/chat/foundation.ts
  2. 35 32
      packages/semi-ui/chat/index.tsx

+ 4 - 0
packages/semi-foundation/chat/foundation.ts

@@ -145,6 +145,10 @@ export default class ChatFoundation <P = Record<string, any>, S = Record<string,
         return scroll;
     }, 100)
 
+    handleScrollContainerResize = () => {
+        this.getScroll(this._adapter.getContainerRef());
+    }
+
     clearContext = (e: any) => {
         const { chats } = this.getStates();
         if (chats[chats.length - 1].role === ROLE.DIVIDER) {

+ 35 - 32
packages/semi-ui/chat/index.tsx

@@ -15,6 +15,7 @@ import type { FileItem } from '../upload';
 import LocaleConsumer from "../locale/localeConsumer";
 import { Locale } from "../locale/interface";
 import { Button, Upload } from '../index';
+import ResizeObserver from '../resizeObserver';
 
 const prefixCls = cssClasses.PREFIX;
 const { CHAT_ALIGN, MODE, SEND_HOT_KEY, MESSAGE_STATUS } = strings;
@@ -331,38 +332,40 @@ class Chat extends BaseComponent<ChatProps, ChatState> {
                     {topSlot}
                     {/* chat area */}
                     <div className={`${prefixCls}-content`}>
-                        <div
-                            className={cls(`${prefixCls}-container`, {
-                                'semi-chat-container-scroll-hidden': !wheelScroll
-                            })}
-                            onScroll={this.containerScroll}
-                            ref={this.containerRef}
-                        >
-                            <ChatContent
-                                align={align}
-                                mode={mode}
-                                chats={chats}
-                                roleConfig={roleConfig}
-                                customMarkDownComponents={customMarkDownComponents}
-                                onMessageDelete={this.foundation.deleteMessage}
-                                onChatsChange={onChatsChange}
-                                onMessageBadFeedback={this.foundation.dislikeMessage}
-                                onMessageGoodFeedback={this.foundation.likeMessage}
-                                onMessageReset={this.foundation.resetMessage}
-                                onMessageCopy={onMessageCopy}
-                                chatBoxRenderConfig={chatBoxRenderConfig}
-                                renderDivider={renderDivider}
-                                markdownRenderProps={markdownRenderProps}
-                            />
-                            {/* hint area */}
-                            {!!hints?.length && <Hint
-                                className={hintCls}
-                                style={hintStyle}
-                                value={hints}
-                                onHintClick={this.foundation.onHintClick}
-                                renderHintBox={renderHintBox}
-                            />}
-                        </div>
+                        <ResizeObserver onResize={this.foundation.handleScrollContainerResize}>
+                            <div
+                                className={cls(`${prefixCls}-container`, {
+                                    'semi-chat-container-scroll-hidden': !wheelScroll
+                                })}
+                                onScroll={this.containerScroll}
+                                ref={this.containerRef}
+                            >
+                                <ChatContent
+                                    align={align}
+                                    mode={mode}
+                                    chats={chats}
+                                    roleConfig={roleConfig}
+                                    customMarkDownComponents={customMarkDownComponents}
+                                    onMessageDelete={this.foundation.deleteMessage}
+                                    onChatsChange={onChatsChange}
+                                    onMessageBadFeedback={this.foundation.dislikeMessage}
+                                    onMessageGoodFeedback={this.foundation.likeMessage}
+                                    onMessageReset={this.foundation.resetMessage}
+                                    onMessageCopy={onMessageCopy}
+                                    chatBoxRenderConfig={chatBoxRenderConfig}
+                                    renderDivider={renderDivider}
+                                    markdownRenderProps={markdownRenderProps}
+                                />
+                                {/* hint area */}
+                                {!!hints?.length && <Hint
+                                    className={hintCls}
+                                    style={hintStyle}
+                                    value={hints}
+                                    onHintClick={this.foundation.onHintClick}
+                                    renderHintBox={renderHintBox}
+                                />}
+                            </div>
+                        </ResizeObserver>
                     </div>
                     {backBottomVisible && !showStopGenerateFlag && (<span className={`${prefixCls}-action`}>
                         <Button