gpt4 book ai didi

javascript - 滚动到 botframework 网络聊天中气泡的顶部

转载 作者:行者123 更新时间:2023-12-03 13:27:05 26 4
gpt4 key购买 nike

我们的聊天机器人的一些答案非常长。网络聊天会自动滚动到底部,因此用户必须向上滚动才能到达气泡顶部并开始阅读。

我已经实现了一个自定义渲染器(react)来将答案包装到一个自定义组件中,该组件只是将答案包装到一个 div 标签中。我还实现了一段简单的代码来滚动到气泡的顶部。

const MyCustomActivityContainer = ({ children }) => {
const triggerScrollTo = () => {
if (scrollRef && scrollRef.current) {
(scrollRef.current as any).scrollIntoView({
behavior: 'smooth',
block: 'start',
})
}
}

const scrollRef: React.RefObject<HTMLDivElement> = React.createRef()

return (
<div ref={ scrollRef } onClick={ triggerScrollTo }>
{ children }
</div>
)
}

export const activityMiddleware = () => next => card => {
if (/* some conditions */) {
return (
<MyCustomActivityContainer>
{ next(card) }
</MyCustomActivityContainer>
);
} else {
return (
{ next(card) }
)
}
};

但这仅在滚动条 slider 未处于最低位置时才有效(至少还有 1 个像素可供向下滚动, see here )。问题是 useScrollToBottom 钩子(Hook),如果滚动条完全向下滚动,它总是自动滚动到底部。

有什么方法可以覆盖滚动行为或暂时禁用scrollToBottom功能吗?

最佳答案

由于没有可重现的示例,我只能猜测。
我也必须对这个问题做出一些猜测。
因为尚不清楚不工作到底是什么:

  1. 您的意思是点击 <div>MyCustomActivityContainer随后调用 triggerScrollTo不会导致滚动?这会很奇怪,但谁知道呢。在这种情况下,我怀疑如果没有可重现的示例,任何人都会帮助您。
  2. 或者您的意思是您可以将消息滚动到 View 中,但如果它已经在 View 中,那么当用户仍在阅读消息时,新消息可能会导致滚动。
    确实如此,但这与您所说的消息很长的说法相矛盾,因为这是短消息的问题,而不是长消息的问题。

    但无论如何,你应该能够解决这个问题。
    如果在距离最低位置 1 像素时工作正常,则只需滚动该 1 像素即可。您需要找到可滚动元素。并做scrollable_element.scrollTop -= 1 。我测试了这种方法here 。它起作用了(可滚动元素是 <p> 的祖 parent )

  3. 或者您是否尝试在消息到达时自动滚动?这才是真正的问题,但您忘记提及它,并且没有发布尝试自动滚动的代码?

    在这种情况下,您可以尝试使用 setTimeout()并推迟滚动,比方说,200ms 。这个数字基于我从来源收集的信息:

    1. BotFramework-WebChat 使用 react-scroll-to-bottom
    2. react-scroll-to-bottom 中,有一些超时 100ms 34ms
    3. BotFramework-WebChat 不会重新定义它们
    4. react-scroll-to-bottom中有一些启发式方法可能会解决这个问题 https://github.com/compulim/react-scroll-to-bottom/blob/3eb21bc469ee5f5095a431ac584be29a0d2da950/packages/component/src/ScrollToBottom/Composer.js

      Currently, there are no reliable way to check if the "scroll" event is trigger due to user gesture, programmatic scrolling, or Chrome-synthesized "scroll" event to compensate size change. Thus, we use our best-effort to guess if it is triggered by user gesture, and disable sticky if it is heading towards the start direction.

      还有
      https://github.com/compulim/react-scroll-to-bottom/blob/f19b14d6db63dcb07ffa45b4433e72284a9d53b6/packages/component/src/ScrollToBottom/Composer.js#L91

      For what we observed, #1 is fired about 20ms before #2. There is a chance that this stickyCheckTimeout is being scheduled between 1 and 2. That means, if we just look at #1 to decide if we should scroll, we will always scroll, in oppose to the user's intention.

      这就是为什么我认为你应该使用setTimeout()

关于javascript - 滚动到 botframework 网络聊天中气泡的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61011906/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com