ohcnetwork / ayushma_fe

Ayushma is a digital AI health and nursing assistant to help Nurses and Doctors in the most remote parts of the world. It is a part of the Open Health Care Network

---

🚀 Staging Deployment

Auto deployed to ayushma.ohc.network for production branch. All pull requests have preview builds powered by Vercel.

Getting started

• 💬 Comment on the issue if you are willing to take it up, and link the pull request with the issue.
• 📸 Attach screenshots in the pull requests showing the changes made in the UI.

Install the required dependencies

pnpm i

🏃 Run the app in development mode

pnpm dev

Once the development server has started, open localhost:3000 in your browser. The page will be automatically reloaded when you make edits and save. You will also see any lint errors in the console.

🔑 Staging API Credentials

Authenticate to staging API with the following credentials

- email: [email protected]
  password: Demo@Ayu

You can also register as a new user.

🏷️ Make use of labels to update the PR/issue status

• Mark your PRs as work-in-progress if it's still being worked on.
• Once you have solved the related issue, mark your PR with need testing and need review labels.
• When you’re making a PR with lots of code changes that affects multiple functionalities, or is likely to break, make sure you tag it with Major Code Change label.

📖 Documentations

• Swagger API Documentation

💎 Backend

Ayushma's backend is built on Django. You can find documentation on the Backend Repository

🚀 Production

Build the app for production

pnpm build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Start a production http-server

pnpm start

Starts a production http-server in local to run the project with Service worker. The build is minified and the filenames include the hashes.

🚀 Your app is ready to be deployed!

White Labeling

Ayushma is a white label product. You can customize the app to your needs by changing the following files:

Images

Path	Description
public/logo_text.svg	Logo with text
public/logo_white.svg	Logo with white text
public/logo.svg	Logo without text

Environment Variables (place in .env / .env.local file)

Variable	Description	Default
NEXT_PUBLIC_API_URL	Backend API URL	https://ayushma-api.ohc.network/api/
NEXT_PUBLIC_LOCAL_STORAGE	Local storage key name	ayushma-storage
NEXT_PUBLIC_AI_NAME	Name of the AI	Ayushma
NEXT_PUBLIC_AI_DESCRIPTION	Description of the AI	Revolutionizing medical diagnosis through AI and Opensource
NEXT_PUBLIC_AI_WARNING	Warning message for accuracy	Please be aware that Ayushma AI may generate inaccurate information; kindly report any concerns to [email protected]
NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY	Google Recaptcha Site Key	6Lerts4nAAAAAKyXaNZkYj4XfRO0M2R-XYIA3qv8

ayushma_fe's Issues

Add env variables to configure logos

Add variables

NEXT_PUBLIC_LOGO_URL

these will be optional, and if present, will override the current logo. (they should be urls)
Update the admin panel to use the same logo

Add a download as pdf button to test run results page

The Admin should be able to download the test result as a pdf file of A4 size, keeping the same design as on page.

Output should look like this

Chatsidebar is blank on profile page

https://ayushma.ohc.network/profile
The chat sidebar doesn't list the chats on the profile page because the project_id isn't present in the URL. Is that expected behavior or a bug?

Create a profile page

Create a route (main)/profile that allows the user to update their full name, and password. User can access this by clicking on the user icon in the sidebar

Redesign document page

The current document page is very unorganized missing proper layout.

Show average cosine and bleu scores in exported test runs in CSV.

Show an error when the /converse API fails

WHAT:
An error should be shown if the /converse api fails during chatting.
Currently, the chat will stay in loading state infinitely when an error occurs.

Add captcha to the register page

Register Page should have captcha required to be filled. This is to prevent bots.

Modal not utilizing entire screen

The Modal is only covering the sidebar region in mobile view, instead it should cover the entire screen

The entire background isn't getting dark-shaded

Feedback logos should be absolute to top of the message

The feedback buttons (currently at bottom right) should be on the top right of the message in absolute position

Original english message should be smaller in size and gray

The english message (original response from GPT before translation) is there only for reference, and thus does not need to take up as much space. We can reduce the font size and make it gray.

Add infinite scrolling for chat history

Currently only 10 results are returned by API in the sidebar history
Using react infinite scroll (you will have to install it) and react query's useInfiniteQuery make the API fetch previous history as you scroll down.

Ayushma Page Title is malfunctioning

Currently the Ayushma Page Title is

Please be aware that Ayushma AI may generate inaccurate information; kindly report any concerns to [email protected]

This is most likely a malfunction, or a config issue

Add a button to project page to mark it as default

Add a button on the project edit page to mark and unmark it as the default project. It will update is_default.

Add fallback for no default projects

Currently, when visiting /, a query is made to fetch the default project and then the user is redirected to /project/<project_id>

Incase there is no default project returned, show an error message saying - No project found. Please try again later.

Beta tag overlapping logo

Currently the Ayushma logo is overlapping with the Beta badge.

Ideally the Text Logo & The Logo Icon should be separate components or the Beta badge should be completely outside the logo component

Add a toggle in settings to show/hide original message

Add a toggle in the settings page that shows or hides original english response from Ayushma.

Increase the height of the prompt field in the Admin panel.

The height of prompt field is too small for the admin to properly see the text and scroll.

The Respective URL for the same is: /admin/projects/[project_id]

Screenshot for reference:

Setup a new admin layout

Setup a base layout for /admin.
Add a sidebar containing links for /admin (dashboard), and / (chat)
Try to reuse the current sidebar component.
Be sure to include the logout button

If the user does not have superuser access (which you can check through the storage atom), do not render the children or sidebar, but render a message saying you need super user access, and a link to go back to home page.

Add UI for setting default project

List chats in descending order of creation

SideBar button are overflowing.

When there are many chats in the chat list in side bar, the button are overflowing out of screen height.

The chat list could be made scrollable.

Text in the /profile route is too faint to be visible and add a password visibility toggle.

The text in the /profile page is poorly visible and also there isn't a password visibility toggle available. It would be good if these minor UI changes gets implemented.

The following is a screenshot for reference:

Update project page metadata to change page title and description according to project

On chat page, the title should change to the project title

Ask for delete confirmation when deleting test

Right now the test is deleted immediately when delete is clicked without any confirmation alert

TODO

• Add Extensive documentation for all env variables
• Add Hero Page
• Add configurable domains for projects
• Make page title and preset questions configurable for each project.
• Allow projects to use their own OpenAI key
• Allow frontend to be deployed through docker
• Add usage limitations for users with access to key.

Add documentation for env variables

Update the readme file to include documentation for all env variables required to be setup to deploy ayushma. Something similar as implemented in the backend repo

Sidebar toggle switch not working in chat in mobile view

When I open a previous chat in mobile view and try to click on the bars to open the sidebar, it doesn't work

Use the key from local storage from the env

Replace the hardcoded key from api.ts

JSON.parse(localStorage.getItem("ayushma-storage") || "{}");

Add Indicator to documents telling if they are a url, file or text

Show admin panel button in sidebar if user is superuser

Along with the three buttons at the bottom, add an admin panel icon button that takes the user to /admin.

Update the User type to include the superuser attribute, then check from storage atom if user is admin, and if is admin, show the button.

This PR is dependent on ohcnetwork/ayushma#59

New chat page title, description and preset questions should be fetched from the project endpoint

needs # to be merged

Chat search triggers a get request every time input changes

Chat search should only trigger after the user has stopped typing, preferably for 1 second. Also, add horizontal padding to the chats list and customize the scrollbar to take up less width.

Fix the cancel and Update Profile buttons moving when the password and confirm password doesn't match.

The cancel and update profile buttons in the edit profile page tend to move down in case the password and confirm password doesn't match. It is advisable from a UI perspective to let the positions of these buttons be fixed.

Add root( / ) or HomePage route to Ayushma's logo

I noticed, there's no way to come back to the homepage route ( '/' ), after going to some other route, say '/profile'. Hence, it would be better to add a '/' route to the Ayushma's logo so that the user can navigate back to the homepage without altering the url.

Screenshot for reference:

Display Projects in descending order of creation in test run selection

It is currently without order. Should display in order of creation (newest to oldest)

Chat History getting wiped off when tried to navigate to profile page.

The chat history of Ayushma gets all cleared up when we navigate to "/profile" url.

Image Reference:

Video Reference:
https://github.com/coronasafe/ayushma_fe/assets/73941119/2c96563b-03f1-4fe3-a42e-9bf8390e5c75

Make text highlighting work when a message is created

Currently text highlighting does not work when the message is created, but works when a message audio is replayed.

Use Modal for Delet Chat

Instead of using the default browser alert, use a model for delete chat confirmation

Add a basic audio player to the chat message

We want to be able to replay a message's audio. We have to add a play/pause button, and a visual indicator that audio is playing

Configure infinite scroll for projects view in admin panel

Add labels to details form in project page

The details form is missing labels for fields.
We could also organize the action buttons.

Show average cosign and bleu scores in the test run list

Shift the list below the question form.
Implement infinite scroll to the list.

Adding a new message to a chat duplicates it until reload

The chatbar is also not reset

Button has hover effects in disabled state

The custom Button component in ui/interactive has hover effects even when it is in disabled state

What can we do:

• Disable hover effects
• Change cursor to not-allowed cursor

Update the UI of the Edit Profile Page.

Making changes in src/app/(main)/profile/page.tsx

The current UI of edit profile page has a full width and the background blends with the actual content, hence, the input fields in the form lacks obvious separation from a user's perspective. Hence, it is advisable to reduce the width and to provide some distinction between the form and the background to boost the UI.

Profile page and Project page front-end issue

The view password icons are very big compared to the input box

The buttons aren't responsive in Project view in mobile view

Create register and forgot password pages

create a register page that accepts email, username, password, full name. This should be identical to the /login page.

Create a /forgot-password page, accepting an email address.

Create a /reset-password page, that accepts an OTP and user_id in the query params. First, make a request to /verify-forgot-token to fetch username and email. Once that is done, load the page and show change password for <user> title accepting a password and reenter password field. Perform the reenter validation at frontend.

Once complete, redirect to /login.

Club all of these pages inside an (auth) group along with the login page in app directory, sharing the same layout for ease of development.

This issue is dependent on ohcnetwork/ayushma#71

Add navigation to admin panel

Add a navigation sidebar to the admin panel. You can reuse the sidebar component.

It should contain

• Projects /admin
• Users (this route has not yet been made) /admin/users
• Ayushma /

Use Modals for Delete, Archive, and Set as Default project

Instead of using browser alert, use the component Modal for these actions for admin view