Her Chat

A supportive, private space to ask questions about periods, PCOS, pregnancy, and general sexual and reproductive health—in plain language, without feeling judged or overwhelmed. Built especially with women and people with cycles in mind.

Her Chat is not meant to replace your doctor or real-life care. It helps you find words for what you're feeling, understand what might be going on, and know when it's a good idea to reach out to a professional.

Recent changes (after last README update)

Summary of updates made since the last README update:

Share

Share icon for current chat — Share is now an icon (share/nodes icon) beside the image uploader in the chat input area, not a header button. Tapping it opens a share preview for the current conversation.
Share icon everywhere — A single ShareIcon component (share/nodes SVG) is used for the current-chat share button, each saved chat’s share button in History, and the Share button in the preview modal so the icon is consistent across the app.
Share preview card — After clicking share (current chat or a saved chat in History), a modal shows a card-style preview: title (“Current conversation” or the saved chat title), date/time, and up to four message bubbles. Actions: Cancel, Copy to clipboard, and Share. Share uses the native share sheet when available (e.g. mobile); otherwise it copies to clipboard and closes the modal.
Share for each saved chat — In History, each saved chat has a share icon button that opens the same preview card for that chat only.

Language & doctor list

Auto-switch language — The bot matches the language of the user’s current (latest) message. If the user switches language mid-conversation (e.g. Bengali → Hindi), the bot switches with them and replies in the new language.
Doctor list always in English — The doctors list reply (intro, clinic names/addresses, conclusion) is always shown in English, regardless of the language the user asked in. Doctor intent keywords now include “gynae” and “gynaecologist” (e.g. “delhi me konse gynae ache he” triggers the doctor flow and the English list).

Search & navigation

Unified search — One search box filters the current chat, saved chats (History), and journal entries. A “Search matches” summary shows counts for this chat, saved chats, and journal; History → Chats and Journal respect the active query. Placeholder/button text: “Search everything”.
About the developer — Hamburger menu includes “About the Developer” (links to /about#developer). The About page has a dedicated developer section with a short bio and icon links (LinkedIn, GitHub, website, email).

Chat & layout

Chat panel — Chat area kept compact with a fixed max height (e.g. 55rem). The input/typing bar no longer grows: footer and form use shrink-0, and the input has a fixed height so it stays a single line.
Chat header status — “Online” / “Thinking…” shown as a small pill badge with a status dot (green when Online, amber with pulse when Thinking) so it matches the header and reads clearly.
Vercel build — Resolved TypeScript error in app/api/chat/route.ts for Gemini generateContent (contents typed as Part and cast for the SDK so the build passes).

Dashboard

Visuals — Dashboard cards restyled with gradients, icons, and shadows. The “Your cycle at a glance” card now shows the last 6 months of period days in a GitHub-style daily grid (rows by weekday, columns by date) with color by flow, plus a footer and symptom summary underneath.
Labels — Month names run across the top of the grid, weekday initials (M T W T F S S) along the left, and the chart title includes the year range (e.g. “Period days (last 6 months, 2025–2026)”) so timing is immediately clear.
Download chart — “Download chart” button exports the cycle/symptom SVG as a PNG (via canvas) for users to save or share.
Education from dashboard — Dashboard header has “← Back to chat” and a dedicated “Education” button that opens Education and closes the dashboard (no need to go back to chat first). Menu “Education” also closes the dashboard when opened.

Small screens

Narrow layout — On viewports < 640px, placeholders shorten to “Search” or “Ask anything…”, the Search button is icon-only, and spacing is tightened so the typing bar stays usable.
Send button on mobile — The chat form uses min-w-0 on the text input and w-full min-w-0 on the form so the input shrinks on small screens and the Send button stays inside the row instead of overflowing.
Search: back to chat on mobile — When search is active, a sticky “Back to chat” bar appears at the top of the messages area (with a left-arrow) so users can exit search easily on mobile. The search toggle in the footer also shows “Close” when search is on, including on small screens.
Period today on mobile — The “Period today:” label above the light/medium/heavy/spotting buttons is now visible on all screen sizes (no longer hidden on mobile).
Education — Accessible from the dashboard via the “Education” button and from the hamburger menu; both use a shared goToEducation() handler that closes dashboard, history, and search and opens Education.

Mobile scroll (Education & Dashboard)

Reliable scroll on mobile — When opening Education or Cycle dashboard (from the menu or from the dashboard’s Education button), the app now:
1. Scrolls the page so the chat card is in view using window.scrollTo (reliable on iOS/Android).
2. Scrolls the messages area to the top (listRef.scrollTop = 0) so the Education or dashboard content is visible.
3. Scrolls the Education or dashboard panel into view with scrollIntoView({ behavior: 'auto' }) after short delays (50 ms and 300 ms) so layout has time to settle on mobile.
Implementation — Shared helper scrollChatSectionIntoView(); refs educationPanelRef, dashboardPanelRef, and chatSectionRef. Scroll runs only in useEffect when showEducation or showDashboard becomes true (no ref-callback scroll), so opening the hamburger menu while Education or Dashboard is open does not trigger an unwanted scroll to the chatbox. All scroll behavior uses behavior: 'auto' for consistency on mobile.

Multilingual chat

Reply in user's language — If the user writes in a language other than English, the chatbot replies in that language (using the script or transliteration they use).
Romanized in, romanized out — If the user writes in romanized form (Latin letters only, e.g. “tumi kemon acho”, “aap kaise ho”), the bot replies in that same language in romanized form (Latin letters), not in the native script (e.g. not in Bengali or Devanagari). If the user uses the native script, the bot replies in that script.
Auto-switch with user — The bot matches the language of the user’s current message. If they switch language mid-conversation (e.g. Bengali → Hindi), the bot switches with them. Full conversation history is sent so the model can detect the switch.
Spelling and transliteration — The model is instructed to interpret the user’s intent despite typos, casual spelling, and transliteration (e.g. "cigarrete", "thikachi", "hochena").
In-app hint — A hero badge and a line above the chat input say “Chat in any language—I’ll reply in yours” so users know they can type in any language.

Doctor search

Any-language detection — Doctor intent is detected from keywords in any language (e.g. “gyno”, “gynae”, “gynacs”, “gynecologist”, “gynaecologist”, “daktar”, “doctor”, “clinic”, “hospital”, “near me”). Users can ask for doctors in Bengali, Hindi, Korean, English, etc., and the app still runs the doctor flow.
City from message — If the user mentions a city (e.g. Kolkata, Delhi, Mumbai, Bangalore, Chennai, Hyderabad, Pune, Ahmedabad, Jaipur, Lucknow, Surat, Patna, Bhopal, Indore, Nagpur, Visakhapatnam, Chandigarh, Guwahati), that city is used for the search even if they haven’t set a location in the menu.
Replies always in English — The doctors list (intro, clinic names/addresses, conclusion), “no clinics” fallback, “no location” prompt, and error message are always shown in English so clinic names and search tips are consistent for everyone.
Free, no billing required — Doctor search now uses OpenStreetMap + Overpass API (free, no API key needed) instead of Google Places. Tries multiple public Overpass mirrors automatically for reliability.

Footer & feedback

Footer — Site footer (SiteShell) includes “Made with care by Sujita Roy”, a Support link, and “© 2026. All rights reserved.”
Give feedback — Optional “Give feedback” link in the hamburger menu; when NEXT_PUBLIC_FEEDBACK_FORM_URL is set (e.g. to a Google Form), it opens the form in a new tab. See “Feedback with Google Forms” below for setup.

Hero cards & menu

Clickable hero cards — The three cards (“Periods & cycles”, “PCOS & pregnancy”, “Private & safe”) are buttons. Tapping one closes menu/education/history/dashboard/search, scrolls to the chat section, and adds a bot message that prompts the user about that topic (e.g. “What would you like to know about periods or your cycle?”).
Hamburger closes on outside tap — When the menu is open, a full-screen transparent overlay is shown; tapping anywhere outside the menu (on the overlay) closes it. The menu and hamburger sit above the overlay (z-index) so they remain clickable.

Other

Favicon — Site favicon set to herchatlogo.png in app/layout.tsx (icon + shortcut).
About page — The paragraph about chats and logs staying on the device (local storage) is styled in pink (text-[#be185d]).
Env & Git — .env.local remains gitignored; no env keys are committed. First commit/push and Vercel deploy (e.g. push to main) and fixing commit author email for Vercel checks were addressed in setup.

How it helps people (especially women)

Judgment-free questions — Ask about periods, discharge, cramps, pregnancy, UTIs, STIs, and more in everyday language.
Cycle awareness — Log period flow (light, medium, heavy, spotting), unlog when needed, and get gentle care reminders.
Journaling — Body check-ins, cycle snapshots, and reflections stay on your device and help you notice patterns.
Finding care — Set your location once, then ask in chat for local doctors; the app suggests nearby gynecologists and clinics with map links.
Education — Bite-sized, clear info on period basics, discharge, pregnancy, UTIs, and safer sex—so you know when to see a provider.
Privacy-first — No accounts, no server-side storage of your chats or logs; everything lives in your browser (local storage).

Features

Chat

AI-powered Q&A — Ask anything about periods, PCOS, pregnancy, sexual health; responses are supportive and non-judgmental.
Multilingual — Chat in any language; the bot replies in yours and switches with you if you change language mid-chat. If you type in romanized form (Latin letters), replies stay in romanized form. Tolerates spelling and transliteration (e.g. Bengali in Latin script).
Image support — Attach an image and ask the chatbot about it (e.g. for visual questions).
Chat history — Save conversations as “New chat”; reopen or delete saved chats from the History panel.
Share chat — Share icon beside the image uploader opens a card-style preview of the current chat with Copy and Share (native share or copy). Each saved chat in History has a share button for that chat’s preview.
Search — Search across the current chat, saved chats, and journal entries from one search bar.

Period & journal

Period log — Log today as light, medium, heavy, or spotting; unlog if needed. Logged days get a short care message.
Journal — Three modes: Body check-in, Cycle snapshot, and Reflection. Entries are stored locally with optional auto-tags (e.g. cramps, bloating, mood).
Period log in History — View all logged period days in the History → Journal tab.

Care & location

Doctor search — Ask in chat in any language (e.g. “doctors near me”, “local gynacs near me”, “kolkata te bhalo gyno”); the app detects doctor intent and, if you’ve set a location or mentioned a city, returns real clinic names, addresses, and “Open in Maps” links (via OpenStreetMap — free, no billing). All doctor-flow replies are in English.
Optional location — Set city/country in the top menu; used for doctor suggestions and tailored education examples.
Education — In-app guides on location & care, finding doctors, period basics, discharge, pregnancy, UTIs, and STIs/safer sex.

Pages & navigation

About — Why Her Chat exists, tech stack, and when data is erased. Link from the menu.
About the developer — Short intro and links to LinkedIn, GitHub, website, and email.
Support — Optional support via UPI (e.g. Google Pay) for users in India; QR code and “Back to Her Chat” link.
Give feedback — Optional link in the menu that opens a Google Form (when NEXT_PUBLIC_FEEDBACK_FORM_URL is set) so users can submit feedback without a backend.

UI/UX

Responsive — Works on mobile, tablet, and desktop; horizontal scroll for journal/period buttons on small screens.
Soft, accessible design — Pink–lavender–blue gradients, readable typography (Plus Jakarta Sans), and clear focus states.
Chat header — “Her Chat” title with gradient dot; History and New chat (on larger screens); status pill showing “Online” (green dot) or “Thinking…” (amber, pulsing). Share is an icon next to the image uploader in the input area and opens a preview card with Copy / Share.
Favicon — Custom Her Chat bow logo as the site favicon.

Tech stack

Layer	Technology
Framework	Next.js 16 (App Router)
UI	React 19, TypeScript 5
Styling	Tailwind CSS 4
AI	Google Generative AI (Gemini; e.g. `gemini-2.0-flash`) for chat and image understanding
Places	OpenStreetMap + Overpass API (free, no billing) for doctor/clinic search; Nominatim for geocoding
Data	Browser localStorage — no backend DB; chats, journal, period log, and location stay on the user’s device

How it was built

App Router — app/page.tsx is the main client page (chat + journal + period bar + history); app/about/page.tsx and app/support/page.tsx are static/simple pages. app/layout.tsx sets metadata and wraps the app in SiteShell (conditional footer).
API routes — app/api/chat/route.ts sends conversation (and optional image) to Gemini and returns the model reply. app/api/doctors/route.ts takes a location and intent, geocodes via Nominatim, queries Overpass (OpenStreetMap) for nearby clinics, and returns name, address, and Maps URL.
State & persistence — React state for messages, journal, period log, history, UI toggles; useEffect hooks read/write to localStorage so data survives refresh but stays on the device.
Doctor flow — If the user message looks like a doctor request and location is set, the app calls /api/doctors and renders structured cards with “Open in Maps”; otherwise it can prompt to set location or return a fallback message.

Getting started

Prerequisites

Node.js (e.g. 18+)
npm, yarn, pnpm, or bun

Install and run

git clone https://github.com/grosssocks/herchat.git
cd herchat
npm install
npm run dev

Open http://localhost:3000.

Environment variables

Create .env.local in the project root (this file is gitignored; do not commit it):

Variable	Required	Description
`GEMINI_API_KEY`	Yes (for chat)	Google AI Studio API key for Gemini (chat + image). Get one free at aistudio.google.com — no billing required.
`NEXT_PUBLIC_FEEDBACK_FORM_URL`	No	Full URL of your Google Form for user feedback. If set, "Give feedback" appears in the hamburger menu and opens this form in a new tab.

No Google Places / Maps billing needed. Doctor search uses OpenStreetMap (Overpass API + Nominatim) which is completely free with no API key.

Example:

GEMINI_API_KEY=your_gemini_key
NEXT_PUBLIC_FEEDBACK_FORM_URL=https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform

Feedback with Google Forms (optional)

To collect user feedback without a database:

Create a Google Form
- Go to Google Forms and sign in.
- Click Blank (or a template).
- Add a title, e.g. "Her Chat – Feedback".
- Add questions, e.g.:
  - Short answer: "What did you like or find helpful?"
  - Short answer: "What could be better?"
  - (Optional) Short answer: "Email if you're okay with a follow-up" or leave anonymous.
- Click Send → link icon → copy the form URL (looks like https://docs.google.com/forms/d/e/.../viewform).
Add the URL to your app
- In the project root, open .env.local.
- Add: NEXT_PUBLIC_FEEDBACK_FORM_URL=https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform (paste your copied URL).
- Restart the dev server (npm run dev). For production (e.g. Vercel), add the same variable in the project settings.
Use it
- The hamburger menu will show Give feedback. Clicking it opens your form in a new tab. Responses appear in Google Forms (and the linked Sheet, if you added one).

Build for production

npm run build
npm start

Project structure (high level)

herchat/
├── app/
│   ├── api/
│   │   ├── chat/route.ts      # Gemini chat + image
│   │   └── doctors/route.ts   # OpenStreetMap/Overpass → clinics
│   ├── about/page.tsx         # About Her Chat + developer
│   ├── support/page.tsx       # Support / UPI
│   ├── layout.tsx             # Root layout, metadata, SiteShell
│   ├── page.tsx               # Main chat + journal + period + history
│   ├── SiteShell.tsx          # Wrapper; conditional footer
│   └── globals.css            # Tailwind + theme
├── public/                    # Favicon, images (e.g. herchatlogo.png, googlepay.png)
├── .env.local                 # Local env (do not commit)
└── package.json

Disclaimer

Her Chat is for general education and support only. It does not provide medical advice, diagnosis, or treatment. Always consult a qualified healthcare provider for personal health concerns.

Author

Sujita Roy — LinkedIn · GitHub · sujitaroy.com

If Her Chat has been helpful, you can support the project (e.g. UPI for users in India).

Name		Name	Last commit message	Last commit date
Latest commit History 19 Commits
app		app
docs/plans		docs/plans
public		public
.gitignore		.gitignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Her Chat

Recent changes (after last README update)

Share

Language & doctor list

Search & navigation

Chat & layout

Dashboard

Small screens

Mobile scroll (Education & Dashboard)

Multilingual chat

Doctor search

Footer & feedback

Hero cards & menu

Other

How it helps people (especially women)

Features

Chat

Period & journal

Care & location

Pages & navigation

UI/UX

Tech stack

How it was built

Getting started

Prerequisites

Install and run

Environment variables

Feedback with Google Forms (optional)

Build for production

Project structure (high level)

Disclaimer

Author

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages