Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
codelabspro opened this issue Apr 14, 2023 · 2 comments
Open

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

codelabspro opened this issue Apr 14, 2023 · 2 comments
Assignees
@supersnager
Labels
question Further information is requested

Comments

@codelabspro
Copy link

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.
@supersnager supersnager self-assigned this Apr 19, 2023
@supersnager supersnager added the question Further information is requested label Apr 19, 2023
@lynnchin
Copy link

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

@Anik-Roy
Copy link

Having same issue on chomre for android.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@supersnager supersnager

Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lynnchin @codelabspro @supersnager @Anik-Roy