[Bounty- $25] mobile responsive

[bhaktatejas922]

We need to make the innkeeper/ branch mobile responsive

this can be test using

npm run start -> using a chrome extension to simulate a phone

[bhaktatejas922]

chat must be full screen on mobile. X to exit chat must also be visible

[magiccoder-beep]

I can do it.

[magiccoder-beep]

could you send me your design or file for responsive?

[John-Weak]

@bhaktatejas922 does this look good?

[magiccoder-beep]

so you have to implement your UI to responsive for mobile devices?

[magiccoder-beep]

Ok, I will do that

[magiccoder-beep]

send me invitation to github profile, redcrystalll

[John-Weak]

@blackberry2024 i have done the code changes already 😄 , only confirming the output with @bhaktatejas922

https://github.com/autoinfra-ai/lingtual-embedded-chat/pull/13

[magiccoder-beep]

Oh. so I have no things to do for your project?

[bhaktatejas922]

Thanks for the update @John-Weak

Will test soon then send the bounty.

[utin-francis-peter]

Hello, @bhaktatejas922

I've implemented the requirements and made a PR. Kindly have a look.

PR link: https://github.com/autoinfra-ai/lingtual-embedded-chat/pull/14

[bhaktatejas922]

Issue is still open as neither PR works correctly on mobile + desktop:

Addition context: - this is how we use it

<ChatWidget
        window_title={`${websiteInformation.hotelName || ''} Front Desk`}
        flow_id={websiteInformation.dashUserId || ''}
        host_url={process.env.NEXT_PUBLIC_HOTELAI_ROOT_DOMAIN}
        api_key={sessionId} // Use sessionId in the apiKey slot
        //@ts-ignore
        style={{
          position: 'fixed',
          bottom: '50px',
          right: '50px',
          zIndex: 999,
        }}
        chatInputField="input"
        chat_inputs='{"input":""}'
        suggested_questions='[
    {
      "questionId": 1,
      "text": "What is the check-in and check-out time?"
    },
    {
      "questionId": 2, 
      "text": "What is nearby?"
    },
    {
      "questionId": 3,
      "text": "What is the cancellation policy?"
    }
  ]'
      ></ChatWidget>

[utin-francis-peter]

@bhaktatejas922 please could you leave a comment in my PR?

Unsure where to look at the moment as new styles only applied to screens <= 768px, thereby maintaining the desktop styles as they initially were.

On mobile, the shared output was achieved.

Please share some steps on using the widget in a real application for better testing.

Thank you.

[John-Weak]

@bhaktatejas922 updated the PR

[jay7134]

I can do it.