socaichat/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Overview

This is a 1:1 pixel-perfect clone of the Google Gemini chat interface, built with Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, and shadcn/ui. It was generated via v0.app and auto-synced to this repo. Deployed on Vercel.

Commands

npm install        # Install dependencies
npm run dev        # Start dev server (localhost:3000)
npm run build      # Build for production
npm run lint       # Run ESLint
npm start          # Start production server

Architecture

Entry Point

• app/page.tsx — renders <GeminiChat /> only; all logic lives in components

Core Component: components/gemini/GeminiChat.tsx

The root stateful component. Owns all state: sidebar open/close, active conversation, message list, typing indicator. Composes all other Gemini components.

Gemini Component Breakdown

Component	Purpose
GeminiSidebar.tsx	Left sidebar — logo, new chat button, conversation history list, bottom nav (Help/Activity/Extensions), user avatar
GeminiTopbar.tsx	Top bar — hamburger toggle, model selector dropdown (Gemini 2.0 Flash etc.), settings + avatar
GeminiWelcome.tsx	Empty state — gradient greeting, 4 suggestion cards
GeminiMessage.tsx	Single message — user bubble (right-aligned, bg pill) vs AI response (left-aligned, ◆ icon, no bubble, markdown-like rendering)
GeminiInput.tsx	Bottom input — rounded container, attachment icon, auto-resize textarea, mic + send button
GeminiTypingIndicator.tsx	Animated dots shown while AI is "responding"
ExtensionsPanel.tsx	Extensions panel UI

Styling

• Tailwind CSS 4 with @tailwindcss/postcss
• Dark theme only — hardcoded color palette:
  • Page bg: #131314, Sidebar: #1e1e1e, Hover/card: #2a2a2a, Border: #3a3a3a
  • Primary text: #e3e3e3, Muted: #9aa0a6
  • Accent gradient: from-[#4285f4] to-[#a855f7]
• components/ui/ — standard shadcn/ui primitives (do not modify directly)

Key Patterns

• All components use "use client" — no server components beyond the page shell
• cn() from @/lib/utils for conditional class merging
• No external API calls — all data is mock/local state in GeminiChat.tsx

Sync Workflow

This repo is auto-synced from v0.app. Changes made on v0.app are pushed here automatically, then deployed to Vercel. Manual edits here may be overwritten on the next v0 sync.