Vibe Check

Vibe Check is a Layla mini-app that turns a character chat into an emotional dashboard. Pick a character, load the latest conversation history, and see how the mood moves between you and them message by message, day by day.

It uses the Layla WebView SDK to read characters, fetch chat sessions and history, and score each message with Layla's sentiment classifier.

What It Shows

• Mood over time: your emotional tone and the character's tone plotted side by side.
• How it broke down: good vibes, hard feelings, in-between moments, and neutral chat as a percentage split.
• Most-felt feelings: the emotions that appear most often across the selected conversation.
• You vs character: quick comparisons for positivity, warm moments, and emotional range.
• Explore more: deeper views for reply weather, mood maps, year in colour, feelings that travel together, warmest hours, and emotional signatures.

Screenshots

Layla Mini-App Metadata

The mini-app metadata lives in public/app.json:

• Title: Vibe Check
• Tagline: See the feelings between the texts.
• Icon: icon.jpg
• Background image: bg.jpg

When the app is built, these files are copied into dist so they can be packaged with the generated index.html.

Getting Started

Install dependencies:

npm install

Run the app locally:

npm run dev

Build the mini-app:

npm run build

Preview the production build:

npm run preview

Check linting:

npm run lint

Local Development

During local development, the app installs a Layla SDK mock so it can run in a browser without the Layla WebView bridge. The mock provides demo characters, chat history, and sentiment data for the dashboard flow.

Inside the Layla app, the mini-app uses the real SDK bridge instead:

• characters.list for paginated character selection
• characters.getImage for character portraits
• chat.getChatSessions and chat.getChatHistory for conversation history
• classifier.getSentiment for per-message emotion scoring

Modular Dashboards

Vibe Check is built so new dashboards can be added without changing the Layla data-loading flow. SentimentDashboard.tsx owns the app shell: character selection, history loading, sentiment enrichment, shared summary cards, and the preview gallery. Once the chat history is loaded, each dashboard receives the same enriched messages array and can focus only on its own visualization.

The shared message shape is defined in src/models/chat.ts. Raw classifier scores are enriched once into fields like fired, dominant, valence, arousal, and family, so every dashboard works from the same sentiment vocabulary.

The current full-screen dashboard modules live in src/components/:

• ReplyWeather shows how one person's mood tends to follow the other's.
• MoodMap plots messages on an emotional valence/arousal plane.
• YearInColour turns chat history into a calendar-style mood story.
• FeelingsTogether maps emotions that tend to appear together.
• WhenYoureWarmest highlights the hours where the conversation feels warmest.
• YourSignatures compares each person's emotional fingerprint.

To add another dashboard:

1. Create a new component in src/components/ that accepts messages: ChatMsg[] and onClose: () => void.
2. Keep any view-specific calculations inside that component or a small helper beside it.
3. Add a matching preview item to the PREVIEWS list in SentimentDashboard.tsx.
4. Add a render branch in the preview sheet section so the new preview opens the new component.

This keeps data access, sentiment enrichment, and visualization concerns separate. New dashboards can reuse the same chat timeline while experimenting with completely different charts, summaries, or interaction patterns.

Packaging For Layla

This project uses Vite with vite-plugin-singlefile, so the production build emits a self-contained index.html plus the public Layla mini-app assets.

To package the app:

1. Run npm run build.
2. Zip the contents of dist, not the dist folder itself.
3. Make sure app.json, index.html, icon.jpg, and bg.jpg are at the root of the zip.
4. Import the zip into Layla as a mini-app.

Project Structure

public/
  app.json          Layla mini-app manifest
  icon.jpg          Mini-app icon
  bg.jpg            Mini-app background image
src/
  SentimentDashboard.tsx
  lib/laylaTimeline.ts
  models/chat.ts
  components/
assets/
  1.jpg             App screenshot
  2.jpg             App screenshot
  3.jpg             App screenshot
  4.jpg             App screenshot
  5.jpg             App screenshot
  google_badge.png
  apple_badge.png

Layla App

Visit the official Layla website: https://www.layla-network.ai/

Download the Layla app: