Scrolling on mobile (iPhone Safari and Android Chrome) browser freezes unless one scrolls on the edge of the screen

codelabspro commented 1 year ago

Have the following code for integrating chat-ui-kit-react in my web app -

  return (
    <Layout>
      <Head>
        <title>Assistant</title>
        <meta
          name="description"
          content="Assistant"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <section className="container grid items-center gap-6 pt-6 pb-8 md:py-10">
        <div className="flex max-w-[980px] flex-col items-start gap-2">
          <h1 className="text-3xl font-extrabold leading-tight tracking-tighter sm:text-3xl md:text-5xl lg:text-6xl">
            Chat
            <br className="hidden sm:inline" />
          </h1>
          <p className="max-w-[700px] text-lg text-slate-700 dark:text-slate-400 sm:text-xl">
            Chat with Assistant
          </p>
        </div>
        <MainContainer>
          <ChatContainer>
            <MessageList
              scrollBehavior="smooth"
              typingIndicator={
                typing ? (
                  <TypingIndicator
                    className="px-2"
                    content="Assistant is typing"
                  />
                ) : null
              }
            >
              {messages.map((message, index) => {
                return <Message key={index} model={{message: message.content, direction: message.direction as MessageDirection, position: "single"}} />
              })}
            </MessageList>
            <MessageInput
              className=""
              placeholder="Type message here"
              onSend={handleSend}
            />
          </ChatContainer>
        </MainContainer>
      </section>
    </Layout>
  )

However, when I deploy and use the app on mobile (iPhone Safari and Android Chrome) browsers, scrolling by dragging finger on the MessageList component doesn't work. Scrolling only works when one drags along the edge containing the scrollbar.

Is there something about the MainContainer or ChatContainer which is rejecting the scroll event detection?

Any help or input would be appreciated.

lynnchin commented 1 year ago

I also had similar issue encountered when scrolling the app on mobile. It appears the scrolling not working. Is this really responsive?

Anik-Roy commented 1 year ago

Having same issue on chomre for android.

nikkizol commented 1 month ago

@lynnchin @Anik-Roy yes, scrolling not working on mobile, any workaround?

chatscope / chat-ui-kit-react

Scrolling on mobile (iPhone Safari and Android Chrome) browser freezes unless one scrolls on the edge of the screen #96