The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Team Chat App Interface

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a single-screen, fully interactive team chat application for [BRAND], set inside [WORKSPACE], a [TEAM_TYPE] collaborating on [PROJECT]. The first viewport is the actual product, not a marketing landing page: a channel sidebar, a dense but calm message thread, and a member directory share one polished workspace. All people, organizations, conversations, and project details are fictional and original.

- Audience: Designers and developers building collaboration software, product teams that need a realistic messaging UI, and people looking for a substantial React app interface rather than a static visual mockup.
- Goal: Let a visitor switch channels, search and send messages, toggle reactions, open and answer thread replies, insert mentions and Unicode emoji, filter members, and switch between dark and light themes. Keep all changes in React state and localStorage so the complete experience works as static files with no network service.
- Tone: Warm, focused, and quietly playful. Use concise, believable workplace messages with specific decisions and helpful responses; avoid corporate slogans, forced enthusiasm, and generic lorem ipsum.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: lucide-react (ISC), @fontsource-variable/manrope (OFL), @fontsource-variable/inter (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set Vite base to './', build.outDir to 'dist', and build.sourcemap to false; the production output must be fully static and portable.
  - Configure Tailwind with a class-based dark strategy and semantic color tokens backed by CSS variables; define the complete light and dark palettes in src/index.css.
  - Keep all editable interface labels, channel names, member profiles, sample messages, reactions, and thread replies in src/content.ts, organized by workspace and channel and written for the supplied variable values.
  - Use React useReducer for workspace state and small presentational components for the sidebar, message list, composer, thread, member directory, and overlays; do not add a router or a state-management dependency.
  - Persist theme, per-channel drafts, sent messages, reactions, thread replies, and cleared unread counts under one localStorage key derived from the slugified [BRAND]; include a clearly labeled Reset local demo action in the workspace menu.
  - Use a textarea for the composer and native buttons for every action, with visible focus rings, accessible names, Escape-to-close behavior, and focus return when popovers or drawers close.

## Variables
- [BRAND] — Chat product name (default: "Plumthread"). Use a short invented product name and derive its lowercase slug for the document title and localStorage key.
- [WORKSPACE] — Workspace name (default: "Fable & Fern Studio"). Name the fictional organization shown at the top of the channel sidebar.
- [TEAM_TYPE] — Team description (default: "independent product design studio"). Adapt member roles, channel names, and workplace vocabulary to this kind of team.
- [PROJECT] — Current shared project (default: "Wander notebook redesign"). Make the selected channel, pinned note, and sample conversation center on this project.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/team-chat-app-interface in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Light canvas `#F4F3F7` — Overall app background and narrow gutters behind the workspace.
- Light surface `#FFFFFF` — Conversation pane, composer, search fields, and primary controls.
- Light sidebar `#ECEAF2` — Channel sidebar and member directory background.
- Light hover `#F7F5FA` — Message-row hover, selected subtle surfaces, and reaction-chip background.
- Light text `#25222C` — Primary headings, message text, and important labels.
- Light muted `#706A7B` — Timestamps, secondary labels, channel descriptions, and inactive icons.
- Light border `#DCD8E3` — One-pixel pane dividers, input borders, and separators.
- Violet accent `#7051C8` — Selected channel, primary send button, mention text, focus rings, and active controls in light mode.
- Violet soft `#E8E1F7` — Selected-channel background, active reaction chips, and soft badges in light mode.
- Presence green `#2E8B68` — Online status dots and small success confirmations in both themes.
- Dark canvas `#141219` — Overall app background in dark mode.
- Dark surface `#1D1A24` — Conversation, composer, fields, and popovers in dark mode.
- Dark sidebar `#19161F` — Channel and member panes in dark mode.
- Dark raised `#282331` — Hovered rows, selected subtle surfaces, and overlay borders in dark mode.
- Dark text `#F0EDF5` — Primary text and active icons in dark mode.
- Dark muted `#AAA3B6` — Secondary text, timestamps, and inactive icons in dark mode.
- Dark border `#383240` — Pane, field, and overlay dividers in dark mode.
- Dark violet accent `#B39AEF` — Active text, focus, mentions, and selected details in dark mode; pair solid primary buttons with #21182F text.

### Typography
- Brand, workspace, and pane headings: Manrope Variable (OFL), weights 600/700/800
- Messages, controls, metadata, and body copy: Inter Variable (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use a 4px base scale. Desktop is a 100dvh grid with a 248px channel sidebar, a fluid minmax(0,1fr) conversation, and a 248px member pane. Pane headers are 64px tall. Sidebar rows are 36px with 10px horizontal padding; message rows use 12px vertical and 20px horizontal padding with 36px avatars and 12px text-column gaps. Keep the conversation readable with a 760px maximum text width. The composer sits 16px from the conversation edges and 12px from the bottom.
- Radius: Use 8px for channel rows and small buttons, 12px for fields and reaction chips, 14px for the composer, 16px for popovers and drawers, and full circles for avatars and status dots. Panes are border-separated rather than floating cards; only overlays use a restrained 0 16px 40px rgb(20 15 30 / 0.18) shadow.
- Motion: Use 140–180ms ease-out transitions for hover backgrounds, icon color, border color, reaction state, and theme changes; never animate the full message list continuously.
- Motion: Append a sent message with a 160ms fade and translateY(4px) entrance, then scroll it into view smoothly unless reduced motion is requested.
- Motion: Open emoji, mention, reaction, and workspace popovers with a 120ms opacity and scale(0.98 to 1) transition anchored to their triggering control.
- Motion: Slide the reply panel or mobile drawers 12px into place with a 180ms ease-out transition and fade their backdrop; avoid large parallax or scroll-jacking effects.
- Motion: Under prefers-reduced-motion: reduce, remove entrance, sliding, smooth-scroll, and theme transitions while preserving immediate state feedback.
- Imagery: No photographs, generated bitmaps, stock assets, or external avatar services. The rich application UI is the first-screen visual anchor. Draw eight distinct fictional people as original inline SVG geometric portraits with simple head-and-shoulder shapes, varied skin tones, hair shapes, clothing, and violet, coral, ochre, teal, and blue backgrounds; do not use initials-only avatars or resemble real individuals. Create an original [BRAND] mark from two interlocking rounded loops. Use Lucide for interface icons and plain system-rendered Unicode characters for emoji, never downloaded emoji artwork.

## Pages & Sections
### Team Chat Workspace (`index.html`)
1. **Application shell and local workspace state** — Set the document title to '[BRAND] · Team chat'. Start in light theme unless a saved choice exists, with a small head script applying the saved theme before paint. Provide six channels, three direct-message conversations, eight members, and the currently signed-in fictional user 'Alex Rivera'. The default selected channel is '# project-wander', derived from [PROJECT]. Other default channels are '# team-room', '# design-crit' with unread count 3, '# research-notes', '# build-log' with unread count 1, and '# small-talk'. Every channel and direct-message conversation has its own believable sample messages; none opens to a blank or not-found state. Keep all state client-side and make every visible control perform a real local action.
   Layout: Render one border-box app at 100dvh and 100% width, overflow hidden, using grid-template-columns: 248px minmax(0,1fr) 248px at 1440px. The center column alone scrolls its message history; headers, sidebars, and composer remain fixed within the app. Use semantic aside, main, section, and nav elements. Place a small optional [CREDIT] link at the bottom of the channel sidebar without disturbing the product layout.
   Motion: The initial workspace appears fully composed without a loading animation. Theme changes use the short color transitions from Design and never flash unstyled content.
2. **Brand header and channel sidebar** — The top row shows the original loop mark, [BRAND] in Manrope 700, and a compact theme toggle with Sun and Moon icons and the accessible label 'Switch to dark theme' or 'Switch to light theme'. Below it, a workspace button shows [WORKSPACE], the caption '8 members · 5 online', and a ChevronDown. Its menu contains 'Workspace details' and 'Reset local demo'; details opens a small dialog explaining that messages stay in this browser, and reset asks for confirmation before restoring the original content. A 'New message' button with SquarePen icon focuses the composer. Channel section labels are 'Channels' and 'Direct messages'. Use Hash icons for channels, original SVG avatars for direct messages, violet selected styling, and small rounded unread badges. Selecting a channel updates the header, messages, member context, and composer placeholder, clears that channel's unread badge, and preserves its own draft.
   Layout: Make the left pane a flex column with a 64px brand row, 20px side padding for the workspace block, and 12px for navigation groups. Channel rows are 36px high with 8px gaps and 13px medium-weight labels. Put navigation in the scrolling middle and the signed-in user's 36px avatar, name, 'Available' status, and Settings icon in a 64px bottom row.
   Motion: Selected channels and buttons change background and icon color in 140ms. Unread badges disappear with a brief opacity transition only after selection.
3. **Conversation header and message search** — For the default view, show '# project-wander' in Manrope 700, the topic 'Decisions, critique, and small wins for [PROJECT]', and an avatar stack with '8 members'. Header buttons are Search, Open member list, and More horizontal. Search expands into a 260px input labeled 'Search messages'; typing filters the active conversation case-insensitively and highlights matches without changing the stored messages. Show a result count and a Clear search button. An empty result reads 'No messages match “{query}” in this channel.' with a 'Clear search' action. The More menu contains 'View pinned note' and 'Mark channel unread'; the pinned action opens the project note and mark-unread restores a badge without leaving the channel.
   Layout: Use a 64px high flex header with 20px horizontal padding and a one-pixel bottom border. Keep the title and topic in a min-width-zero column, truncate only the topic, and keep action buttons 36px square. On narrow screens, show Menu at the left, retain Search and Members icons, and remove the topic rather than crowding the title.
   Motion: Expand search with a 160ms width and opacity transition. Popover menus use the standard 120ms entrance and close on outside click or Escape.
4. **Pinned project note and message history** — Begin the default history with a slim lavender pinned-note strip: Pin icon, 'Project note', and 'Option B is our direction for the critique; keep the notebook switcher visible.' Add a centered 'Today' divider. Render full-width message rows, not speech bubbles. Default messages are: 09:12 Maya Chen, 'Morning! I added the three navigation options to the prototype. Option B keeps the notebook switcher visible without crowding the editor.' with reactions ✨ 4 and 👍 3 and a '2 replies' link; 09:15 Jonah Brooks, 'Option B also gives us the cleanest route on mobile. I can keep the same hierarchy without a second toolbar.'; 09:18 Priya Nair, 'That matches the interviews. Five of six participants looked for notebooks before they looked for formatting.' with reaction 🎯 2; 09:24 Sofia Alvarez with a small 'Decision' badge, 'Let’s take Option B into today’s critique. I’ll note the trade-off in the project log.'; 09:31 Theo Martin, 'I trimmed the page transition to 180 ms. It feels responsive without making the notebook jump.'; 09:36 Alex Rivera, 'The empty state is ready too—one quiet illustration and a single create action.' Group consecutive messages from the same sender only when they are within three minutes; otherwise repeat the sender and time. Hovering a row reveals SmilePlus, Reply, and More horizontal actions. The reaction button opens a small emoji strip; clicking any reaction toggles the current user's vote and updates its count and selected styling. Reply opens the thread pane. Message More includes 'Copy text', which writes to the clipboard and shows 'Message copied' in a small toast.
   Layout: The message scroller fills all space between header and composer, with 20px horizontal padding and 16px bottom padding. Use 36px avatars at the left, sender and time on one line, 14px message text at 1.55 line-height, and 12px metadata. Reaction chips sit 6px apart beneath the relevant message. Keep the hover action bar at the row's upper-right with a bordered surface background. Include a subtle 'New messages' pill only when the user is scrolled away from the bottom and a new local message arrives.
   Motion: Rows use background-only hover feedback. New reactions scale from 0.96 to 1 over 120ms; sent messages use the standard 160ms entrance. Do not animate or type out the preloaded conversation.
5. **Reply thread panel** — The default parent for '2 replies' is Maya's 09:12 message. Its thread replies are Jonah at 09:14, 'I checked the 390px layout—the switcher still fits above the editor.' and Maya at 09:16, 'Perfect. I’ll bring that frame to the critique as well.' Opening any other reply action uses that message as the parent and starts with its own stored replies or an honest 'No replies yet. Start the conversation.' state. The panel title is 'Thread', with the active channel beneath and an X button labeled 'Close thread'. A compact composer at the bottom says 'Reply in thread' and supports Enter to send, Shift+Enter for a newline, and the same Unicode emoji picker. Thread replies append locally and persist. Closing the thread restores the member directory without resetting the conversation.
   Layout: On wide desktop, replace the 248px member pane with a 320px thread pane and let the conversation absorb the width difference. Use a 64px header, a bordered parent-message block, a scrolling reply list, and an 88px minimum composer. At widths below 1180px, present the thread as a 340px right overlay above the member pane; on mobile it becomes a full-width right drawer.
   Motion: Use a 180ms horizontal slide and fade for the panel and 160ms for newly appended replies; reduced-motion mode swaps instantly.
6. **Composer, mentions, and emoji picker** — The composer placeholder is 'Message # project-wander' and changes with the active channel. Provide Plus, AtSign, Smile, and a violet Send button with ArrowUp icon; disable Send only when the trimmed draft is empty. Typing @ followed by zero or more name characters opens a mention list of matching members with avatar, name, role, and status. Arrow keys change the active suggestion, Enter or click inserts '@FirstName LastName', and Escape closes it. Smile opens a 6-column by 4-row picker containing these plain Unicode emoji: 😀 😄 😂 🙂 😉 😊 😍 🤔 👍 👏 🙌 🙏 💪 ✨ 🎉 ❤️ 💜 💡 ✅ 🎯 🚀 📌 📝 ☕ 🌿. Selecting one inserts it at the caret and keeps focus in the textarea. Enter sends a nonempty message, Shift+Enter adds a newline, and the sent message appears under 'You · Alex Rivera' with the current local time. Store per-channel drafts on input and sent messages on submit; do not simulate delivery to another person or any network request.
   Layout: Anchor the composer inside the center pane with 16px side margins and 12px bottom margin. Use a bordered 14px-radius surface with a minimum 44px textarea and a maximum 128px height that grows with content. Put utility icons in a 36px bottom toolbar and Send at the lower-right with 32px height. Position mention and emoji popovers above their controls, constrained to the viewport; on mobile, the emoji picker becomes a bottom sheet no taller than 42dvh.
   Motion: Popovers scale and fade over 120ms. Send has a subtle pressed scale(0.97), and the sent-message entrance never moves the composer itself.
7. **Member directory and profile actions** — Title the right pane 'Members' with a Users icon and a count of 8. Include a search input labeled 'Find a member' and group results under 'Online — 5', 'Away — 2', and 'Offline — 1'. Default members are Maya Chen, Product designer, online; Jonah Brooks, Frontend engineer, online; Priya Nair, Research lead, online; Sofia Alvarez, Product manager, online; Alex Rivera, Content designer, online; Theo Martin, Motion designer, away; Noor Haddad, Accessibility specialist, away; and Adrian Okafor, Engineering lead, offline. Every row has an original geometric portrait and a status dot. Selecting a person opens a profile popover with their larger portrait, name, role, status, and one concrete detail such as 'Working on notebook navigation' for Maya; the 'Message' action opens or creates that direct-message conversation. Filtering updates the visible groups and shows 'No members found' with a clear action when appropriate.
   Layout: Use a 64px header, 16px side padding, a 36px search field, and 48px member rows with 36px avatars and 10px gaps. Names use 13px semibold and roles 11px muted text. The pane scrolls independently if needed. Profile popovers are 280px wide and remain inside the viewport.
   Motion: Filtering is immediate with no list shuffle animation. Profile popovers use the standard 120ms scale-and-fade transition.
8. **Responsive drawers, keyboard access, and persistence** — At 1180px and below, hide the member pane by default and open it as a right overlay; at 820px and below, also hide the channel sidebar and open it with the header Menu button as a left drawer. Both drawers use a labeled close button, a noninteractive backdrop that closes on click, Escape support, focus trapping, and body-scroll locking. Selecting a channel on mobile closes its drawer. Keep message text at 14px and all touch targets at least 44px on mobile. Support '/' to focus message search when not typing, Escape to dismiss the topmost overlay, and the composer shortcuts already described. Save and restore local state without console errors when storage is empty or unavailable. At 390×844, show the complete conversation header, several readable messages, and composer with zero horizontal overflow; at 1440×900, show all three panes, the pinned note, at least five messages, and the composer in the first viewport.
   Layout: Desktop sidebars remain fixed-width. Overlay drawers are min(320px,88vw) on the left and min(340px,92vw) on the right, full app height with safe-area padding. The mobile center column is always 100% width and uses 12px message and composer gutters. Hide decorative avatar stacks before shrinking sender names or message text.
   Motion: Drawers slide 12px and fade with their backdrop over 180ms. All sliding, smooth scrolling, and nonessential transitions are disabled for reduced motion.

## Assets
- font: Self-host Manrope Variable and Inter Variable through the npm packages @fontsource-variable/manrope and @fontsource-variable/inter (OFL). Import the local font CSS in src/main.tsx; no Google Fonts or other font CDN URLs.
- icon: Use lucide-react (ISC) for Hash, Search, Menu, Sun, Moon, ChevronDown, SquarePen, Settings, Pin, SmilePlus, Reply, MoreHorizontal, X, Plus, AtSign, Smile, ArrowUp, Users, Check, and Copy. Use system-rendered Unicode emoji only. Do not import or copy any proprietary icon or emoji set.
- image: Use no bitmap images and request no generated assets. Draw the eight fictional geometric portrait avatars, the two-loop [BRAND] mark, and any tiny empty-state illustration as original inline SVG/CSS in the project. No stock photographs, real likenesses, recognizable brand imagery, avatar URLs, or placeholder-image services.

## Don'ts
- Do not add a backend, server code, API routes, authentication, a database, websockets, analytics, external APIs, or any real message delivery; all interactions and persistence must work locally in the browser.
- Do not load scripts, styles, fonts, icons, emoji, avatars, or images from a CDN or remote URL. Keep every runtime asset local and use relative paths with Vite base './'.
- Do not use real chat product names, logos, slogans, branded marks, proprietary emoji artwork, commercial fonts, or the exact layout and palette of an existing chat product.
- Do not copy conversations, real user identities, recognizable avatar likenesses, or existing product copy. Keep all sample content fictional and rewrite it when the supplied variables change.
- Do not use Aceternity UI, Tailwind Plus or Tailwind UI, ThemeForest or Framer template source, copied component implementations, or dependencies without an allowed permissive license.
- Do not use initials-only member portraits, stock-photo services, placeholder-image services, hotlinked files, generated bitmap avatars, or anime, game, celebrity, or other real-person likenesses.
- Do not turn this into a marketing landing page or add a typographic hero, pricing, testimonial, or feature sections; the first screen must remain the complete, rich chat application.
- Do not leave visible buttons, menus, channel rows, reactions, replies, member filters, theme controls, or composer actions nonfunctional; every offered control must have a client-side result.
- Do not use speech-bubble-heavy message cards, glassmorphism, gradients across whole panes, continuous ambient animation, scroll-jacking, or motion that ignores prefers-reduced-motion.
- Do not display calendar dates or real-world timestamps as factual product data; use 'Today' and fictional sample times only.
- Do not produce source maps, copy src/ into dist/, exceed 20 MB in dist/, or require more than the single npm run build command for production output.
- Do not use bare-directory links or introduce routes that require a server fallback. This is one self-contained index.html application; any local navigation must target index.html or a hash route.
- Do not mention VibeFather inside the product UI except for the optional small [CREDIT] link in the sidebar footer.

---
— Prompt by VibeFather · https://vibefather.ai/t/team-chat-app-interface · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.