App does not display properly on mobile phones

LutzEST commented 5 months ago

Please provide us with the following information:

This issue is for a: (mark with an `x`)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Open app in mobile phone browser and initiate the chat. The chat response window in portrait mode extends beyond the right hand boundary. Citations do not visibly open. In Landscape mode a small citation window opens but content does not load.

Any log messages given by the failure

Expected/desired behavior

Even in portrait mode the chat response should be within the screen boundary. Citations could open in a new tab.

OS and Version?

Android 14, One UI 6.0 Current Ecosia and Google browser

azd version?

run azd version and copy paste here.

Versions

Mention any other details that might be useful

Thanks! We'll be in touch soon.

pamelafox commented 5 months ago

Thanks for the report, we have not done responsive testing on the frontend. We welcome pull requests if you find ways to improve the mobile responsiveness. We'll note this as an open issue in case others want to take this on.

pamelafox commented 4 months ago

CC @zedhaque who is looking into responsiveness. (GitHub isn't letting me assign it to Zed for some reason).

zedhaque commented 4 months ago

Thanks @pamelafox.

I am preparing to make the app's frontend responsive, and as a starting point, below are the initial wireframes for the mobile views. The process I envision involves first gathering feedback on these mobile views, then making any necessary changes to the mobile wireframes before submitting wireframes for other breakpoints (tablet, desktop) for additional feedback. The goal at this initial stage is to incorporate all your feedback back to the wireframe before I begin making CSS and JS changes to submit a PR.

Please note:

The icons in the wireframes serve purely for illustrative purposes. I will utilize existing icons, and should there be any missing (e.g., chat, ask), they will also be sourced from Fluent UI. Feel free to suggest icons and I will incorporate them.
There are no plans to alter any colors or introduce additional functionalities. The primary goal is to enhance the app's responsiveness and implement only the necessary changes.
I am adopting a mobile-first design approach, which is why I am starting with the lowest breakpoint.

Discussion items:

Moving from using pixels (px) to relative units like rem and em in CSS - several key reasons, enhancing flexibility, scalability, and accessibility of websites. For example, changing the root font size (html { font-size: 16px; } to html { font-size: 18px; }) will adjust all related rem sizes accordingly, which is beneficial for quickly adapting the design for different devices or preferences. I believe these will affect the CSS files only, possibly some inline CSS if present.

CSS code change examples for above:

app/frontend/src/index.css

html {
    background: #f2f2f2;
    font-size: 16px;
    }

app/frontend/src/page/chat/Chat.module.css

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem; /* 20px / 16 = 1.25rem */
}

How about using icons for chat, ask, and login on small screens? For larger breakpoints, where more space is available, we will display both the icon and text for these functions. Developer settings will work as is. Also note - number of example questions will depend on breakpoints e.g. desktop 3 items but for mobile 2 items.
I've moved the GitHub link and the text 'Azure OpenAI + Azure AI Search' to the bottom of the 'chat/question input box'. For larger breakpoints, such as those we use currently, it can either return to the header or remain below for consistency. What are your thoughts?

Wireframe for above 2 items:

As the chat progresses, or if you have enabled 'follow-up questions,' the header currently disappears. Should we consider making the header a sticky one, i.e., always visible? This would prevent users from needing to scroll up. However, note that 'Clear Chat' and 'Developer Settings' won't be visible even with a sticky header, unless we move those options beside the chat box. What are your thoughts?

Wireframe for above item:

This question pertains only to the mobile view; the desktop view can remain as it is currently. Regarding the Analysis tab—for example, 'Thought Process', 'Supporting Content', 'Citation'—these will all function in the same manner. Below, I am presenting 3 options for discussion: Option 1 is positioned at the bottom (this mirrors how the 'ask' feature operates on mobile today), and Option 2 involves a pop-up window. Option 3 is opening the analysis tab in a new window. Thoughts?

Wireframe for above item:

Should the 'ask' page include an icon/logo for consistency? I don’t anticipate any changes other than to the analysis tab, which will function in the same manner as the chat analysis tab once the above is finalized.

Based on your feedback, I will update the mobile wireframes and also provide versions for tablet and desktop, along with any further questions.

pamelafox commented 4 months ago

Thanks, great write-up!

How about using icons for chat, ask, and login on small screens? For larger breakpoints, where more space is available, we will display both the icon and text for these functions. Developer settings will work as is. Also note - number of example questions will depend on breakpoints e.g. desktop 3 items but for mobile 2 items.

I always like when an icon has text, personally, unless it's super obvious (like our submit button in the text field). For the sample, the title doesn't seem that important, and I'd rather see "Chat"/"Ask" but I imagine it's important for users who are forking for their company. I guess icons are fine then. The other approach would be a burger menu, since that's fairly commonly understood at this point. That would also scale better for those who add multiple tabs - I see quite a few who add different searches for different indexes.

I've moved the GitHub link and the text 'Azure OpenAI + Azure AI Search' to the bottom of the 'chat/question input box'. For larger breakpoints, such as those we use currently, it can either return to the header or remain below for consistency. What are your thoughts?

Yeah that seems fine for the bottom. I'd be okay with it always at the bottom, personally. Or maybe we can replace "GPT + Enterprise data | Sample" with that instead. I think customers would typically just have a single place for company name?

As the chat progresses, or if you have enabled 'follow-up questions,' the header currently disappears. Should we consider making the header a sticky one, i.e., always visible? This would prevent users from needing to scroll up. However, note that 'Clear Chat' and 'Developer Settings' won't be visible even with a sticky header, unless we move those options beside the chat box. What are your thoughts?

What's the header you're describing, "Chat with your data"? I think that's fine to disappear. It would be good for "Clear chat" and "Developer settings" to be sticky. ("Manage user uploads" also is a part of that now).

This question pertains only to the mobile view; the desktop view can remain as it is currently. Regarding the Analysis tab—for example, 'Thought Process', 'Supporting Content', 'Citation'—these will all function in the same manner. Below, I am presenting 3 options for discussion: Option 1 is positioned at the bottom (this mirrors how the 'ask' feature operates on mobile today), and Option 2 involves a pop-up window. Option 3 is opening the analysis tab in a new window. Thoughts?

Option 2 seems like it'd be awkward to scroll. My guess is that option 3 might be the most usable overall. Might be a bigger code change though. Maybe try option 1 and see how it feels?

Should the 'ask' page include an icon/logo for consistency? I don’t anticipate any changes other than to the analysis tab, which will function in the same manner as the chat analysis tab once the above is finalized.

Sure! I don't know when we decide to sprinkle sparkles. More sparkles!

LutzEST commented 4 months ago

That's a great approach.

I have found two fixes so far:

Note: I have also changed header items and the position of the Clear Chat and Developer Settings icons for our purposes but they did not have a responsiveness issue in the first place.

To ensure that the chat response stays within the screen limits of the device, I modified .chatMessageGpt in Chat.Module.CSS like this: Switching to 100% is not required but looks better on smaller screens and works well on all screens:
In terms of positioning the citation / thought process window I have moved it above the chat by adding a column-reverse to the chatRoot 👍

While the esthetics are debatable, this produced another issue: On the two mobile phones I have access to, a iPhone12 SE and a Samsung A52 with One UI the citations are not loaded. On an iPad Pro 5th generation with OS 17.3.1 only the PDF title page is displayed.

zedhaque commented 4 months ago

Thanks @pamelafox and @LutzEST for the feedback.

I've updated the mobile view (applicable to all mobile devices, with a typical max width of around 450 pixels). We have two design options:

Option 1: Features a hamburger menu which scales well as it can accommodate all menu items. However, accessing frequently used functions like "clear chat" requires two clicks. For managing file uploads and developer settings, we could use the existing interaction style, although I'm unsure how it might work; for instance, managing file uploads could be very complicated.

Option 2: The hamburger menu is primarily for navigating "chat/ask pages" such as "HR chat" or "Ask a product question". I intentionally didn't add icons for these pages in the hamburger menu to demonstrate a different approach. It might be better not to have icons for these pages to keep the interface clean. Meanwhile, icons on the top navigation are used for quick actions that can be performed in one click.

I've also added an iPad mini (768 px) wireframe with option 2—as you can see, we can keep the existing descriptive text but might require a lower font size if it's not desktop, but we will deal with font size later during implementation.

Hopefully, I will do another wireframe update tomorrow based on the other feedback you have provided. But do let me know which option you prefer for the menu from above.

zedhaque commented 4 months ago

One more thing to add for Option 2: If users only have a single instance of 'Chat' and plan to remove 'Ask a question,' they might consider removing the hamburger menu altogether.

zedhaque commented 4 months ago

Here’s how the sticky header will function: It enables users to access "Clear chat", "Manage file upload" etc. without having to scroll up, across all breakpoints.

zedhaque commented 3 months ago

Here are some screenshots of the current chat pages using Microsoft Edge (Dev tools/responsive) - Please look at the Dimension Filed for the device type e.g. iPhone SE, XR etc.

Below are from a Desktop views

zedhaque commented 3 months ago

And here are the proposed chat pages for making them responsive. I am showing multiple breakpoints, but only one breakpoint is complete so far.

Desktop pages - as you can see the question input is not at the bottom like the current desktop.

poonkuzhali commented 1 month ago

It will be great if the citation(pdf viewer) is working. When the citation link is clicked, it does open the citation on the side(similar to website), but its not viewable/scrollable, and one has to scroll to the side to view it completely. It will be really useful, if the citation could be a popup from the chat page

zedhaque commented 1 month ago

@poonkuzhali - thanks for your feedback. The issue you mentioned will be fixed in a new PR. We reviewed two options:

Citation shows below the chat - current window (same as how "/qa" works in mobile)
Citations opens in a new window for mobile but for desktop stays as current design.

I am working on option 2. Let me know your thoughts?

poonkuzhali commented 1 month ago

@zedhaque Thank you so much for your response. I appreciate all the work you are doing for this project!

Option 2 - Please correct me if I'm wrong - since the file is in a blob storage, the citation link would point to the blob, should additional permissions be granted for all users in order to access the citation in a new window. Currently, everything including citation works in the website view, with access/permission granted to the app service alone.

Option 1: /qa works perfectly across all mobile devices. So I guess this would work without any permission issues.

Thank you!

Azure-Samples / azure-search-openai-demo