Merge caitlin/CRM_ENVR: AI chat ref+health, tips panel, cyberpunk theme, app-shell/bg improvements
This commit is contained in:
JCBSComputer
@@ -0,0 +1,58 @@
|
||||
name: Build & Auto-Repair
|
||||
on:
|
||||
push:
|
||||
branches: [main, develop]
|
||||
pull_request:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci --no-audit --no-fund
|
||||
|
||||
- name: Install Playwright
|
||||
run: npx playwright install chromium firefox
|
||||
|
||||
- name: Build check
|
||||
id: build
|
||||
continue-on-error: true
|
||||
run: npx tsc --noEmit
|
||||
|
||||
- name: Run self-healing setup
|
||||
if: steps.build.outcome == 'failure'
|
||||
run: node scripts/setup.mjs --self-heal
|
||||
|
||||
- name: Run code repair agent
|
||||
if: steps.build.outcome == 'failure'
|
||||
env:
|
||||
OLLAMA_HOST: ${{ vars.OLLAMA_HOST || 'http://localhost:11434' }}
|
||||
run: node scripts/code-repair-agent.mjs --ci
|
||||
|
||||
- name: Re-check build after repair
|
||||
id: rebuild
|
||||
continue-on-error: true
|
||||
run: npx tsc --noEmit
|
||||
|
||||
- name: Commit fixes
|
||||
if: steps.build.outcome == 'failure' && steps.rebuild.outcome == 'success'
|
||||
run: |
|
||||
git config user.name "CRM Repair Bot"
|
||||
git config user.email "bot@coastit.co.za"
|
||||
git add -A
|
||||
git diff --cached --quiet || git commit -m "[bot] Auto-repair build errors"
|
||||
git push
|
||||
|
||||
- name: Build failed — report
|
||||
if: steps.rebuild.outcome == 'failure'
|
||||
run: |
|
||||
echo "::error::Build still failing after auto-repair. Manual intervention required."
|
||||
exit 1
|
||||
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"version": 2,
|
||||
"description": "Template registry for self-healing setup. Maps internal import paths to templates.",
|
||||
"templates": {
|
||||
"data/stickers": {
|
||||
"template": "stickers.ts",
|
||||
"description": "Emoji-based sticker packs for media picker"
|
||||
},
|
||||
"data/constants": {
|
||||
"template": "constants.ts",
|
||||
"description": "App-wide constants (lead statuses, roles, event types)"
|
||||
},
|
||||
"lib/utils": {
|
||||
"template": "utils.ts",
|
||||
"description": "Utility functions (cn, formatters, helpers)"
|
||||
},
|
||||
"types/index": {
|
||||
"template": "types-index.ts",
|
||||
"description": "Core type definitions (User, Lead, DashboardStats)"
|
||||
},
|
||||
"hooks/use-media": {
|
||||
"template": "hooks/use-media.ts",
|
||||
"description": "Media query hook"
|
||||
},
|
||||
"hooks/use-debounce": {
|
||||
"template": "hooks/use-debounce.ts",
|
||||
"description": "Debounce hook"
|
||||
},
|
||||
"hooks/use-local-storage": {
|
||||
"template": "hooks/use-local-storage.ts",
|
||||
"description": "LocalStorage hook with SSR safety"
|
||||
}
|
||||
},
|
||||
"fallbackTemplates": {
|
||||
"@/data/*": "data-generic.ts",
|
||||
"@/lib/*": "lib-generic.ts",
|
||||
"@/hooks/*": "hook-generic.ts",
|
||||
"@/types/*": "types-generic.ts",
|
||||
"@/components/*": "component-generic.tsx",
|
||||
"@/utils/*": "utils-generic.ts"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// ── Generic Component Template ────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
// Placeholder for @/components/* imports. Customize as needed.
|
||||
|
||||
export default function GenericComponent() {
|
||||
return <div />;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
// ── App Constants ────────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup. Edit .setup-templates/templates/constants.ts to customize.
|
||||
|
||||
export const APP_NAME = "CoastIT CRM";
|
||||
export const APP_VERSION = "1.0.0";
|
||||
|
||||
export const LEAD_STATUSES = {
|
||||
new: { label: "New", color: "bg-blue-500" },
|
||||
contacted: { label: "Contacted", color: "bg-yellow-500" },
|
||||
qualified: { label: "Qualified", color: "bg-purple-500" },
|
||||
proposal: { label: "Proposal", color: "bg-orange-500" },
|
||||
won: { label: "Won", color: "bg-green-500" },
|
||||
lost: { label: "Lost", color: "bg-red-500" },
|
||||
} as const;
|
||||
|
||||
export const USER_ROLES = {
|
||||
super_admin: { label: "Super Admin", level: 1 },
|
||||
admin: { label: "Admin", level: 2 },
|
||||
sales: { label: "Sales", level: 3 },
|
||||
dev: { label: "Developer", level: 4 },
|
||||
} as const;
|
||||
|
||||
export const EVENT_TYPES = [
|
||||
"meeting",
|
||||
"call",
|
||||
"email",
|
||||
"task",
|
||||
"note",
|
||||
] as const;
|
||||
|
||||
export const EVENT_STATUSES = [
|
||||
"scheduled",
|
||||
"completed",
|
||||
"cancelled",
|
||||
"rescheduled",
|
||||
] as const;
|
||||
|
||||
export const AI_MODELS = {
|
||||
chat: "llama3.2:3b",
|
||||
scraper: "dolphin-llama3:8b",
|
||||
coder: "qwen2.5-coder:1.5b-base",
|
||||
} as const;
|
||||
|
||||
export const PAGINATION = {
|
||||
defaultLimit: 50,
|
||||
maxLimit: 200,
|
||||
} as const;
|
||||
|
||||
export const DATE_FORMATS = {
|
||||
short: "MMM d, yyyy",
|
||||
long: "MMMM d, yyyy",
|
||||
time: "h:mm a",
|
||||
datetime: "MMM d, yyyy h:mm a",
|
||||
} as const;
|
||||
@@ -0,0 +1,17 @@
|
||||
// ── Generic Data Module Template ─────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
// Placeholder for @/data/* imports. Customize as needed.
|
||||
|
||||
export interface DataItem {
|
||||
id: string;
|
||||
name: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export function getDataItems(): DataItem[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
export function getDataItem(id: string): DataItem | undefined {
|
||||
return undefined;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// ── Generic Hook Template ────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
// Placeholder for @/hooks/* imports. Customize as needed.
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export function useHook<T>(initialValue: T): [T, (value: T) => void] {
|
||||
const [value, setValue] = useState(initialValue);
|
||||
return [value, setValue];
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// ── useDebounce Hook ──────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup. Edit to customize.
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedValue(value), delay);
|
||||
return () => clearTimeout(timer);
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// ── useLocalStorage Hook ──────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup. Edit to customize.
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void] {
|
||||
const [storedValue, setStoredValue] = useState<T>(initialValue);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const item = window.localStorage.getItem(key);
|
||||
if (item) setStoredValue(JSON.parse(item));
|
||||
} catch {
|
||||
// corrupted data — use initial value
|
||||
}
|
||||
}, [key]);
|
||||
|
||||
const setValue = (value: T | ((prev: T) => T)) => {
|
||||
try {
|
||||
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
||||
setStoredValue(valueToStore);
|
||||
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
||||
} catch {
|
||||
// storage full or disabled
|
||||
}
|
||||
};
|
||||
|
||||
return [storedValue, setValue];
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
// ── useMedia Hook ─────────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup. Edit to customize.
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export function useMedia(query: string): boolean {
|
||||
const [matches, setMatches] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const mql = window.matchMedia(query);
|
||||
setMatches(mql.matches);
|
||||
const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
|
||||
mql.addEventListener("change", handler);
|
||||
return () => mql.removeEventListener("change", handler);
|
||||
}, [query]);
|
||||
|
||||
return matches;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// ── Generic Lib Module Template ──────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
// Placeholder for @/lib/* imports. Customize as needed.
|
||||
|
||||
export function libFunction(): void {
|
||||
// Placeholder
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
// ── Sticker Packs ─────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup. Edit .setup-templates/templates/stickers.ts to customize.
|
||||
|
||||
export interface Sticker {
|
||||
id: string;
|
||||
name: string;
|
||||
emoji?: string;
|
||||
svg?: string;
|
||||
}
|
||||
|
||||
export interface StickerPack {
|
||||
id: string;
|
||||
name: string;
|
||||
stickers: Sticker[];
|
||||
}
|
||||
|
||||
const reactionStickers: Sticker[] = [
|
||||
{ id: "thumbs-up", name: "Thumbs Up", emoji: "👍" },
|
||||
{ id: "thumbs-down", name: "Thumbs Down", emoji: "👎" },
|
||||
{ id: "heart", name: "Heart", emoji: "❤️" },
|
||||
{ id: "laugh", name: "Laugh", emoji: "😂" },
|
||||
{ id: "wow", name: "Wow", emoji: "😮" },
|
||||
{ id: "sad", name: "Sad", emoji: "😢" },
|
||||
{ id: "angry", name: "Angry", emoji: "😡" },
|
||||
{ id: "clap", name: "Clap", emoji: "👏" },
|
||||
{ id: "fire", name: "Fire", emoji: "🔥" },
|
||||
{ id: "100", name: "100", emoji: "💯" },
|
||||
{ id: "eyes", name: "Eyes", emoji: "👀" },
|
||||
{ id: "pray", name: "Pray", emoji: "🙏" },
|
||||
];
|
||||
|
||||
const animalStickers: Sticker[] = [
|
||||
{ id: "cat", name: "Cat", emoji: "🐱" },
|
||||
{ id: "dog", name: "Dog", emoji: "🐶" },
|
||||
{ id: "panda", name: "Panda", emoji: "🐼" },
|
||||
{ id: "fox", name: "Fox", emoji: "🦊" },
|
||||
{ id: "bear", name: "Bear", emoji: "🐻" },
|
||||
{ id: "koala", name: "Koala", emoji: "🐨" },
|
||||
{ id: "tiger", name: "Tiger", emoji: "🐯" },
|
||||
{ id: "lion", name: "Lion", emoji: "🦁" },
|
||||
{ id: "monkey", name: "Monkey", emoji: "🐵" },
|
||||
{ id: "frog", name: "Frog", emoji: "🐸" },
|
||||
{ id: "penguin", name: "Penguin", emoji: "🐧" },
|
||||
{ id: "bird", name: "Bird", emoji: "🐦" },
|
||||
];
|
||||
|
||||
const foodStickers: Sticker[] = [
|
||||
{ id: "pizza", name: "Pizza", emoji: "🍕" },
|
||||
{ id: "burger", name: "Burger", emoji: "🍔" },
|
||||
{ id: "taco", name: "Taco", emoji: "🌮" },
|
||||
{ id: "sushi", name: "Sushi", emoji: "🍣" },
|
||||
{ id: "ramen", name: "Ramen", emoji: "🍜" },
|
||||
{ id: "ice-cream", name: "Ice Cream", emoji: "🍦" },
|
||||
{ id: "cake", name: "Cake", emoji: "🍰" },
|
||||
{ id: "coffee", name: "Coffee", emoji: "☕" },
|
||||
{ id: "beer", name: "Beer", emoji: "🍺" },
|
||||
{ id: "wine", name: "Wine", emoji: "🍷" },
|
||||
{ id: "donut", name: "Donut", emoji: "🍩" },
|
||||
{ id: "cookie", name: "Cookie", emoji: "🍪" },
|
||||
];
|
||||
|
||||
const activityStickers: Sticker[] = [
|
||||
{ id: "football", name: "Football", emoji: "⚽" },
|
||||
{ id: "basketball", name: "Basketball", emoji: "🏀" },
|
||||
{ id: "tennis", name: "Tennis", emoji: "🎾" },
|
||||
{ id: "running", name: "Running", emoji: "🏃" },
|
||||
{ id: "swimming", name: "Swimming", emoji: "🏊" },
|
||||
{ id: "cycling", name: "Cycling", emoji: "🚴" },
|
||||
{ id: "gym", name: "Gym", emoji: "🏋️" },
|
||||
{ id: "yoga", name: "Yoga", emoji: "🧘" },
|
||||
{ id: "music", name: "Music", emoji: "🎵" },
|
||||
{ id: "party", name: "Party", emoji: "🎉" },
|
||||
{ id: "gift", name: "Gift", emoji: "🎁" },
|
||||
{ id: "trophy", name: "Trophy", emoji: "🏆" },
|
||||
];
|
||||
|
||||
const stickerPacks: StickerPack[] = [
|
||||
{ id: "reactions", name: "Reactions", stickers: reactionStickers },
|
||||
{ id: "animals", name: "Animals", stickers: animalStickers },
|
||||
{ id: "food", name: "Food & Drink", stickers: foodStickers },
|
||||
{ id: "activities", name: "Activities", stickers: activityStickers },
|
||||
];
|
||||
|
||||
export function getStickerPacks(): StickerPack[] {
|
||||
return stickerPacks;
|
||||
}
|
||||
|
||||
export function getStickerPack(id: string): StickerPack | undefined {
|
||||
return stickerPacks.find((p) => p.id === id);
|
||||
}
|
||||
|
||||
export function getSticker(packId: string, stickerId: string): Sticker | undefined {
|
||||
const pack = getStickerPack(packId);
|
||||
return pack?.stickers.find((s) => s.id === stickerId);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// ── Generic Types Template ────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
// Placeholder for @/types/* imports. Customize as needed.
|
||||
|
||||
export type GenericType = Record<string, unknown>;
|
||||
|
||||
export interface GenericInterface {
|
||||
id: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
// ── Type Definitions ──────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup. Edit .setup-templates/templates/types-index.ts to customize.
|
||||
|
||||
export type UserRole = "super_admin" | "admin" | "sales" | "dev";
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone?: string;
|
||||
role: UserRole;
|
||||
active: boolean;
|
||||
avatar: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Lead {
|
||||
id: string;
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
source: string;
|
||||
description: string;
|
||||
status: LeadStatus;
|
||||
assignedUserId: string | null;
|
||||
assignedUser: User | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export type LeadStatus =
|
||||
| "new"
|
||||
| "contacted"
|
||||
| "qualified"
|
||||
| "proposal"
|
||||
| "won"
|
||||
| "lost";
|
||||
|
||||
export interface DashboardStats {
|
||||
totalLeads: number;
|
||||
newLeads: number;
|
||||
contactedLeads: number;
|
||||
qualifiedLeads: number;
|
||||
proposalLeads: number;
|
||||
wonLeads: number;
|
||||
lostLeads: number;
|
||||
conversionRate: number;
|
||||
monthlyBreakdown: {
|
||||
label: string;
|
||||
total: number;
|
||||
new: number;
|
||||
contacted: number;
|
||||
qualified: number;
|
||||
proposal: number;
|
||||
won: number;
|
||||
lost: number;
|
||||
}[];
|
||||
leadsPerMonth: { label: string; leads: number; won: number }[];
|
||||
recentLeads: Lead[];
|
||||
statusDistribution: { name: string; value: number; color: string }[];
|
||||
periodLabel: string;
|
||||
trends: Record<string, { pct: number; up: boolean }>;
|
||||
}
|
||||
|
||||
export interface Note {
|
||||
id: string;
|
||||
leadId: string;
|
||||
userId: string;
|
||||
authorName: string;
|
||||
authorAvatar: string;
|
||||
authorRole: UserRole;
|
||||
note: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export type NotificationType =
|
||||
| "lead_created"
|
||||
| "lead_status_changed"
|
||||
| "lead_assigned"
|
||||
| "chat_message"
|
||||
| "note_added"
|
||||
| "event_scheduled";
|
||||
|
||||
export interface Notification {
|
||||
id: string;
|
||||
type: NotificationType;
|
||||
title: string;
|
||||
description: string;
|
||||
timestamp: string;
|
||||
read: boolean;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string;
|
||||
conversationId: string;
|
||||
senderId: string;
|
||||
senderName: string;
|
||||
senderAvatar: string;
|
||||
content: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
export interface Conversation {
|
||||
id: string;
|
||||
participants: { id: string; name: string; avatar: string; role: string }[];
|
||||
lastMessage: string;
|
||||
lastMessageTime: string;
|
||||
unread: number;
|
||||
messages: ChatMessage[];
|
||||
}
|
||||
|
||||
export type EventType = "meeting" | "call" | "email" | "task" | "note";
|
||||
export type EventStatus = "scheduled" | "completed" | "cancelled" | "rescheduled";
|
||||
|
||||
export interface CalendarEvent {
|
||||
id: string;
|
||||
userId: string;
|
||||
participantId: string | null;
|
||||
developerId: string | null;
|
||||
leadId: string | null;
|
||||
conversationId: string | null;
|
||||
title: string;
|
||||
description: string | null;
|
||||
participantNotes: string | null;
|
||||
eventType: EventType;
|
||||
startTime: string;
|
||||
endTime: string | null;
|
||||
durationMinutes: number | null;
|
||||
status: EventStatus;
|
||||
creator: { id: string; name: string; email?: string; role?: string; avatar?: string } | null;
|
||||
participant: { id: string; name: string; email?: string; role?: string; avatar?: string } | null;
|
||||
developer: { id: string; name: string; email?: string; role?: string; avatar?: string } | null;
|
||||
lead: { id: string; companyName: string; contactName: string } | null;
|
||||
clientName: string | null;
|
||||
clientEmail: string | null;
|
||||
clientPhone: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// ── Generic Utils Template ────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
// Placeholder for @/utils/* imports. Customize as needed.
|
||||
|
||||
export function utilsFunction(): void {
|
||||
// Placeholder
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// ── Utility Functions ────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup. Edit .setup-templates/templates/utils.ts to customize.
|
||||
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function formatDate(date: Date | string, options?: Intl.DateTimeFormatOptions): string {
|
||||
const d = typeof date === "string" ? new Date(date) : date;
|
||||
return d.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
...options,
|
||||
});
|
||||
}
|
||||
|
||||
export function formatTime(date: Date | string): string {
|
||||
const d = typeof date === "string" ? new Date(date) : date;
|
||||
return d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
|
||||
}
|
||||
|
||||
export function formatCurrency(amount: number, currency = "USD"): string {
|
||||
return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
|
||||
}
|
||||
|
||||
export function truncate(str: string, length: number): string {
|
||||
if (str.length <= length) return str;
|
||||
return str.slice(0, length - 3) + "...";
|
||||
}
|
||||
|
||||
export function generateId(): string {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
|
||||
export function debounce<T extends (...args: unknown[]) => unknown>(
|
||||
fn: T,
|
||||
delay: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeoutId: ReturnType<typeof setTimeout>;
|
||||
return (...args: Parameters<T>) => {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(() => fn(...args), delay);
|
||||
};
|
||||
}
|
||||
|
||||
export function throttle<T extends (...args: unknown[]) => unknown>(
|
||||
fn: T,
|
||||
limit: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let inThrottle = false;
|
||||
return (...args: Parameters<T>) => {
|
||||
if (!inThrottle) {
|
||||
fn(...args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => (inThrottle = false), limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function classNames(...classes: (string | boolean | undefined | null)[]): string {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
export function sleep(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
export function retry<T>(fn: () => Promise<T>, retries = 3, delay = 1000): Promise<T> {
|
||||
return fn().catch((err) =>
|
||||
retries > 0 ? sleep(delay).then(() => retry(fn, retries - 1, delay * 2)) : Promise.reject(err)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/* ============================================================================
|
||||
Default Theme — Clean, Professional SaaS Design Tokens
|
||||
This is the standard CRM appearance. No Spidey branding or assets.
|
||||
============================================================================ */
|
||||
|
||||
.theme-default {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 210 80% 52%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 215 25% 22%;
|
||||
--input: 215 25% 22%;
|
||||
--ring: 210 80% 52%;
|
||||
--radius: 0.5rem;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 210 80% 52%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 215 25% 22%;
|
||||
--sidebar-ring: 210 80% 52%;
|
||||
}
|
||||
@@ -11,8 +11,6 @@
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 0 100% 53%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
@@ -23,16 +21,12 @@
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 0 100% 53%;
|
||||
--radius: 0.5rem;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 0 100% 53%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 0 100% 53%;
|
||||
}
|
||||
|
||||
.light.theme-spidey {
|
||||
|
||||
@@ -202,6 +202,7 @@ Provide concise, actionable sales advice. When asked about a specific job catego
|
||||
{ role: "user", content: userMessage },
|
||||
],
|
||||
stream: false,
|
||||
keep_alive: "30m",
|
||||
options: { temperature: 0.7, num_predict: 1024 },
|
||||
}),
|
||||
})
|
||||
@@ -576,11 +577,40 @@ async function processRequest(req, res, body, startTime) {
|
||||
}
|
||||
})
|
||||
|
||||
// ── Warm up model on startup ────────────────────────────────────
|
||||
// Pre-loads the model into Ollama's memory so the first user
|
||||
// request doesn't pay the cold-start penalty.
|
||||
async function warmModel() {
|
||||
console.log(`Warming up model ${MODEL}...`)
|
||||
try {
|
||||
const res = await fetch(`${OLLAMA_URL}/api/generate`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
signal: AbortSignal.timeout(300000),
|
||||
body: JSON.stringify({
|
||||
model: MODEL,
|
||||
prompt: "Hello",
|
||||
keep_alive: "30m",
|
||||
options: { num_predict: 1 },
|
||||
}),
|
||||
})
|
||||
if (res.ok) {
|
||||
console.log(`Model ${MODEL} loaded and kept alive for 30 minutes`)
|
||||
} else {
|
||||
console.warn(`Model warm-up returned ${res.status}`)
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(`Model warm-up failed (will load on first request): ${err.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
// ── Start ───────────────────────────────────────────────────────
|
||||
server.listen(PORT, HOST, () => {
|
||||
console.log(`CRM AI server listening on http://${HOST}:${PORT}`)
|
||||
console.log(` Model: ${MODEL}`)
|
||||
console.log(` Ollama: ${OLLAMA_URL}`)
|
||||
// Kick off warm-up in background (don't block server start)
|
||||
warmModel()
|
||||
})
|
||||
|
||||
initPg()
|
||||
|
||||
@@ -195,6 +195,9 @@ ON CONFLICT DO NOTHING;
|
||||
-- admin_demo / AdminAccess@2026
|
||||
-- sales_demo / SalesAccess@2026
|
||||
-- dev_demo / DevTesting@2026
|
||||
-- ewan (password change required on first login)
|
||||
-- caitlin (password change required on first login)
|
||||
-- dillen (password change required on first login)
|
||||
|
||||
INSERT INTO users (id, username, email, password_hash, first_name, last_name, is_active, password_change_required) VALUES
|
||||
('00000000-0000-0000-0000-000000000001', 'superadmin_demo', 'superadmin@coastit.co.za',
|
||||
@@ -208,7 +211,16 @@ INSERT INTO users (id, username, email, password_hash, first_name, last_name, is
|
||||
'Sales', 'User', TRUE, TRUE),
|
||||
('00000000-0000-0000-0000-000000000004', 'dev_demo', 'dev@coastit.co.za',
|
||||
'$2b$12$ghyJFb17lXoFOCYUPB6Fk.q8wDNOJhq9OUPNzd5DKaZsDjCF2NBJa',
|
||||
'Dev', 'User', TRUE, TRUE)
|
||||
'Dev', 'User', TRUE, TRUE),
|
||||
('00000000-0000-0000-0000-000000000005', 'ewan', 'ewan@coastit.co.za',
|
||||
'$2b$12$nO.9p.f4oWFhfScxM8MGQuiR9YjU85YTIqcb1kS.kyDBMHdmQ.EyG',
|
||||
'Ewan', 'Scheepers', TRUE, TRUE),
|
||||
('00000000-0000-0000-0000-000000000006', 'caitlin', 'caitlin@coastit.co.za',
|
||||
'$2b$12$I5FHjje4OA5raP3642twT.Wmcl00rA1/wDPiQjRK14yDgybUjmrYG',
|
||||
'Caitlin', 'Hermanus', TRUE, TRUE),
|
||||
('00000000-0000-0000-0000-000000000007', 'dillen', 'dillen@coastit.co.za',
|
||||
'$2b$12$QnvaRzdJEV/Bq8tp5vguM.ad.oeAcV2bjdzndIFdA4Opn5vY2WVaW',
|
||||
'Dillen', 'van der Merwe', TRUE, TRUE)
|
||||
ON CONFLICT (username) WHERE (deleted_at IS NULL) DO NOTHING;
|
||||
|
||||
-- Update the SUPER_ADMIN to set created_by to self (post-bootstrap)
|
||||
@@ -217,7 +229,7 @@ WHERE id = '00000000-0000-0000-0000-000000000001' AND created_by IS NULL;
|
||||
|
||||
-- Set created_by for other users (SUPER_ADMIN created them)
|
||||
UPDATE users SET created_by = '00000000-0000-0000-0000-000000000001'
|
||||
WHERE id IN ('00000000-0000-0000-0000-000000000002','00000000-0000-0000-0000-000000000003','00000000-0000-0000-0000-000000000004')
|
||||
WHERE id IN ('00000000-0000-0000-0000-000000000002','00000000-0000-0000-0000-000000000003','00000000-0000-0000-0000-000000000004','00000000-0000-0000-0000-000000000005','00000000-0000-0000-0000-000000000006','00000000-0000-0000-0000-000000000007')
|
||||
AND created_by IS NULL;
|
||||
|
||||
-- ============================================================================
|
||||
@@ -233,7 +245,10 @@ ON CONFLICT DO NOTHING;
|
||||
INSERT INTO user_roles (user_id, role_id, assigned_by) VALUES
|
||||
('00000000-0000-0000-0000-000000000002', '00000002-0000-0000-0000-000000000000', '00000000-0000-0000-0000-000000000001'),
|
||||
('00000000-0000-0000-0000-000000000003', '00000003-0000-0000-0000-000000000000', '00000000-0000-0000-0000-000000000001'),
|
||||
('00000000-0000-0000-0000-000000000004', '00000004-0000-0000-0000-000000000000', '00000000-0000-0000-0000-000000000001')
|
||||
('00000000-0000-0000-0000-000000000004', '00000004-0000-0000-0000-000000000000', '00000000-0000-0000-0000-000000000001'),
|
||||
('00000000-0000-0000-0000-000000000005', '00000002-0000-0000-0000-000000000000', '00000000-0000-0000-0000-000000000001'),
|
||||
('00000000-0000-0000-0000-000000000006', '00000002-0000-0000-0000-000000000000', '00000000-0000-0000-0000-000000000001'),
|
||||
('00000000-0000-0000-0000-000000000007', '00000002-0000-0000-0000-000000000000', '00000000-0000-0000-0000-000000000001')
|
||||
ON CONFLICT DO NOTHING;
|
||||
|
||||
-- ============================================================================
|
||||
|
||||
@@ -595,6 +595,11 @@ WHERE id = '00000000-0000-0000-0000-000000000003' AND password_encrypted IS NULL
|
||||
UPDATE users SET password_encrypted = encrypt_password('DevTesting@2026')
|
||||
WHERE id = '00000000-0000-0000-0000-000000000004' AND password_encrypted IS NULL;
|
||||
|
||||
-- NOTE: New admin users (ewan, caitlin, dillen) have password_encrypted=NULL.
|
||||
-- They will set their own passwords on first login (password_change_required=TRUE).
|
||||
-- SUPER_ADMIN can populate password_encrypted later via the recovery endpoint
|
||||
-- after users have set their chosen passwords.
|
||||
|
||||
-- ============================================================================
|
||||
-- FUTURE REQUIREMENT NOTE:
|
||||
-- If this system is ever exposed publicly, remove reversible password storage
|
||||
|
||||
+7
-1
@@ -6,13 +6,19 @@
|
||||
"dev": "npm run dev:precheck & npm run dev:ollama & npm run dev:start",
|
||||
"dev:signaling": "node signaling-server.mjs",
|
||||
"dev:open": "node scripts/open-browser.mjs",
|
||||
"dev:start": "concurrently -n AI,BROWSE,SIGNAL,NEXT,OPEN -c cyan,magenta,yellow,green,white \"npm run dev:rust\" \"npm run dev:browser-use\" \"npm run dev:signaling\" \"npm run dev:next\" \"npm run dev:open\"",
|
||||
"dev:repair": "node scripts/code-repair-agent.mjs --watch",
|
||||
"dev:start": "concurrently -n REPAIR,AI,BROWSE,SIGNAL,NEXT,OPEN -c red,cyan,magenta,yellow,green,white \"npm run dev:repair\" \"npm run dev:rust\" \"npm run dev:browser-use\" \"npm run dev:signaling\" \"npm run dev:next\" \"npm run dev:open\"",
|
||||
"dev:next": "next dev -p 3006",
|
||||
"dev:precheck": "node scripts/precheck.mjs",
|
||||
"dev:ollama": "node scripts/ensure-ollama.mjs",
|
||||
"dev:rust": "node ai-server/index.mjs",
|
||||
"dev:browser-use": "cd browser-use-service && node ../scripts/run-python.mjs main.py",
|
||||
"setup": "node scripts/setup.mjs",
|
||||
"setup:self-heal": "node scripts/setup.mjs --self-heal",
|
||||
"repair": "node scripts/code-repair-agent.mjs",
|
||||
"repair:watch": "node scripts/code-repair-agent.mjs --watch",
|
||||
"repair:ci": "node scripts/code-repair-agent.mjs --ci",
|
||||
"build:fix": "npm run build 2>&1 || node scripts/code-repair-agent.mjs --ci",
|
||||
"build": "next build",
|
||||
"start": "next start -p 3006",
|
||||
"lint": "eslint"
|
||||
|
||||
@@ -0,0 +1,346 @@
|
||||
// ── Code Repair Agent ─────────────────────────────────────────────
|
||||
// Phase 2: Auto-fix TypeScript build errors using qwen2.5-coder:1.5b-base
|
||||
//
|
||||
// Usage:
|
||||
// node scripts/code-repair-agent.mjs # one-shot: fix build errors
|
||||
// node scripts/code-repair-agent.mjs --watch # watch mode: re-fix on file changes
|
||||
// node scripts/code-repair-agent.mjs --ci # CI mode: fix + commit
|
||||
//
|
||||
// Requires: Ollama running at OLLAMA_HOST (default http://localhost:11434)
|
||||
// Model: qwen2.5-coder:1.5b-base
|
||||
//
|
||||
// ── Architecture ──────────────────────────────────────────────────
|
||||
// 1. Capture build output from `npx tsc --noEmit`
|
||||
// 2. Parse error locations (file, line, column, message)
|
||||
// 3. Read the failing source file + surrounding context (~20 lines)
|
||||
// 4. Send to qwen2.5-coder via Ollama API for fix suggestion
|
||||
// 5. Apply fix if confidence > threshold (0.7)
|
||||
// 6. Re-run build to verify fix
|
||||
// 7. If breaking change detected (wide-reaching import changes), escalate
|
||||
// 8. In --ci mode: auto-commit with [bot] prefix
|
||||
|
||||
import { execSync } from "node:child_process"
|
||||
import { readFileSync, writeFileSync, existsSync, appendFileSync } from "node:fs"
|
||||
import { resolve, dirname } from "node:path"
|
||||
import { fileURLToPath } from "node:url"
|
||||
import { createRequire } from "node:module"
|
||||
|
||||
const SELF = dirname(fileURLToPath(import.meta.url))
|
||||
const _require = createRequire(import.meta.url)
|
||||
const ROOT = resolve(SELF, "..")
|
||||
const OLLAMA_HOST = process.env.OLLAMA_HOST || "http://localhost:11434"
|
||||
const MODEL = process.env.REPAIR_MODEL || "qwen2.5-coder:1.5b-base"
|
||||
const MAX_ITERATIONS = 5
|
||||
const CONFIDENCE_THRESHOLD = 0.7
|
||||
const ESCALATION_TIMEOUT_MS = 30 * 60 * 1000 // 30 min
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────
|
||||
|
||||
function log(msg, level = "info") {
|
||||
const prefix = level === "error" ? "✗" : level === "warn" ? "⚠" : "✓"
|
||||
console.log(` ${prefix} [repair] ${msg}`)
|
||||
}
|
||||
|
||||
function runTsc() {
|
||||
try {
|
||||
const out = execSync("npx tsc --noEmit", { stdio: "pipe", timeout: 60000, cwd: ROOT })
|
||||
return { ok: true, output: out.toString() }
|
||||
} catch (e) {
|
||||
return { ok: false, output: e.stdout?.toString() || e.message || "" }
|
||||
}
|
||||
}
|
||||
|
||||
function parseErrors(output) {
|
||||
const errors = []
|
||||
// Match: src/file.ts(line,col): error TSxxxx: message
|
||||
const lineRegex = /(src\/[^:]+)\((\d+),(\d+)\):\s+error\s+TS\d+:\s+(.+)/g
|
||||
let m
|
||||
while ((m = lineRegex.exec(output)) !== null) {
|
||||
errors.push({
|
||||
file: resolve(ROOT, m[1]),
|
||||
line: parseInt(m[2], 10),
|
||||
column: parseInt(m[3], 10),
|
||||
message: m[4].trim(),
|
||||
})
|
||||
}
|
||||
return errors
|
||||
}
|
||||
|
||||
function readContext(filePath, errorLine, contextLines = 20) {
|
||||
try {
|
||||
const lines = readFileSync(filePath, "utf-8").split("\n")
|
||||
const start = Math.max(0, errorLine - 1 - contextLines)
|
||||
const end = Math.min(lines.length, errorLine - 1 + contextLines)
|
||||
return {
|
||||
content: lines.slice(start, end).join("\n"),
|
||||
contextLine: errorLine - 1 - start, // 0-indexed line of the error in the snippet
|
||||
totalLines: lines.length,
|
||||
}
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// ── Ollama Integration ─────────────────────────────────────────────
|
||||
|
||||
async function queryOllama(prompt) {
|
||||
const response = await fetch(`${OLLAMA_HOST}/api/generate`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
model: MODEL,
|
||||
prompt,
|
||||
stream: false,
|
||||
options: { temperature: 0.3, num_predict: 2048 },
|
||||
}),
|
||||
})
|
||||
if (!response.ok) throw new Error(`Ollama returned ${response.status}`)
|
||||
const data = await response.json()
|
||||
return data.response || ""
|
||||
}
|
||||
|
||||
function buildRepairPrompt(filePath, errorMessage, codeContext) {
|
||||
return `You are a TypeScript repair agent. Fix the following error.
|
||||
|
||||
FILE: ${filePath}
|
||||
ERROR: ${errorMessage}
|
||||
|
||||
CODE CONTEXT (line ${codeContext.contextLine + 1} is the error line):
|
||||
\`\`\`typescript
|
||||
${codeContext.content}
|
||||
\`\`\`
|
||||
|
||||
Respond with ONLY the fix JSON in this exact format:
|
||||
{"fix": "the exact replacement code for the error line(s)", "confidence": 0.0-1.0, "explanation": "brief explanation"}
|
||||
|
||||
Rules:
|
||||
- Keep the fix minimal and precise
|
||||
- Only change what's necessary to fix the error
|
||||
- If the error is a missing import, suggest the import statement
|
||||
- If the error is a type mismatch, suggest the corrected code
|
||||
- confidence < 0.7 will not be auto-applied
|
||||
- If you cannot determine a fix, set confidence to 0`
|
||||
}
|
||||
|
||||
function parseFixResponse(text) {
|
||||
try {
|
||||
// Extract JSON from response (it might have markdown fences)
|
||||
const jsonMatch = text.match(/\{[\s\S]*"fix"[\s\S]*"confidence"[\s\S]*\}/)
|
||||
if (!jsonMatch) return null
|
||||
return JSON.parse(jsonMatch[0])
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function applyFix(filePath, fixSuggestion) {
|
||||
if (!fixSuggestion || !fixSuggestion.fix) return { applied: false, reason: "No fix suggestion" }
|
||||
|
||||
try {
|
||||
const original = readFileSync(filePath, "utf-8")
|
||||
writeFileSync(filePath, fixSuggestion.fix, "utf-8")
|
||||
return { applied: true, backup: original }
|
||||
} catch (e) {
|
||||
return { applied: false, reason: e.message }
|
||||
}
|
||||
}
|
||||
|
||||
// ── Breaking Change Escalation ─────────────────────────────────────
|
||||
|
||||
function isBreakingChange(errors, fixes) {
|
||||
// Heuristic: if fix touches import structure or exports, it's breaking
|
||||
for (const fix of fixes) {
|
||||
if (!fix || !fix.fix) continue
|
||||
if (fix.fix.includes("export ") || fix.fix.includes("import ") || fix.fix.includes("delete ")) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
async function escalateBreakingChange(errors, fixes) {
|
||||
const logFile = resolve(ROOT, "repair-escalation.log")
|
||||
const timestamp = new Date().toISOString()
|
||||
const entry = [
|
||||
`=== Breaking Change Escalation @ ${timestamp} ===`,
|
||||
`Errors: ${errors.map(e => `${e.file}:${e.line}: ${e.message}`).join("\n ")}`,
|
||||
`Fixes: ${fixes.map(f => f?.fix?.slice(0, 200)).join("\n ")}`,
|
||||
`Auto-apply in ${ESCALATION_TIMEOUT_MS / 60000} minutes or cancel with Ctrl+C`,
|
||||
"========================================\n",
|
||||
].join("\n")
|
||||
|
||||
appendFileSync(logFile, entry)
|
||||
log(`Breaking change escalated — see ${logFile}`, "warn")
|
||||
log(`Auto-applying in ${ESCALATION_TIMEOUT_MS / 60000} min (Ctrl+C to cancel)...`, "warn")
|
||||
|
||||
// Wait for timeout or user intervention
|
||||
await new Promise(resolve => setTimeout(resolve, ESCALATION_TIMEOUT_MS))
|
||||
log("Escalation timeout reached — applying fixes")
|
||||
return true
|
||||
}
|
||||
|
||||
// ── Git Auto-Commit ────────────────────────────────────────────────
|
||||
|
||||
function gitCommit(message) {
|
||||
try {
|
||||
execSync("git add -A", { stdio: "pipe", cwd: ROOT })
|
||||
execSync(`git commit -m "[bot] ${message}"`, { stdio: "pipe", cwd: ROOT })
|
||||
log(`Committed: [bot] ${message}`)
|
||||
return true
|
||||
} catch (e) {
|
||||
log(`Git commit failed: ${e.message}`, "warn")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// ── Main Repair Loop ───────────────────────────────────────────────
|
||||
|
||||
async function repairOnce(doCommit = false) {
|
||||
log("Running build check...")
|
||||
const build = runTsc()
|
||||
if (build.ok) {
|
||||
log("No build errors found")
|
||||
return { fixed: false, errors: [] }
|
||||
}
|
||||
|
||||
const errors = parseErrors(build.output)
|
||||
if (errors.length === 0) {
|
||||
log("Could not parse build errors from output", "warn")
|
||||
log(build.output.slice(0, 1000))
|
||||
return { fixed: false, errors: [] }
|
||||
}
|
||||
|
||||
log(`Found ${errors.length} error(s):`)
|
||||
for (const e of errors.slice(0, 10)) {
|
||||
const shortFile = e.file.replace(ROOT, "").replace(/^\//, "")
|
||||
log(`${shortFile}:${e.line}:${e.column} — ${e.message}`)
|
||||
}
|
||||
|
||||
const fixes = []
|
||||
for (const error of errors) {
|
||||
const context = readContext(error.file, error.line)
|
||||
if (!context) {
|
||||
log(`Cannot read ${error.file}`, "error")
|
||||
continue
|
||||
}
|
||||
|
||||
log(`Asking ${MODEL} to fix ${error.file}:${error.line}...`)
|
||||
try {
|
||||
const prompt = buildRepairPrompt(error.file, error.message, context)
|
||||
const response = await queryOllama(prompt)
|
||||
const fix = parseFixResponse(response)
|
||||
|
||||
if (fix && fix.confidence >= CONFIDENCE_THRESHOLD) {
|
||||
const result = applyFix(error.file, fix)
|
||||
if (result.applied) {
|
||||
log(`${fix.explanation || "Applied fix"} (confidence: ${fix.confidence})`)
|
||||
fixes.push(fix)
|
||||
} else {
|
||||
log(`Failed to apply fix: ${result.reason}`, "error")
|
||||
}
|
||||
} else {
|
||||
log(`Low confidence (${fix?.confidence || 0}) or invalid response — skipping`, "warn")
|
||||
}
|
||||
} catch (e) {
|
||||
log(`Ollama error: ${e.message}`, "error")
|
||||
}
|
||||
}
|
||||
|
||||
if (fixes.length === 0) {
|
||||
log("No fixes could be applied", "error")
|
||||
return { fixed: false, errors }
|
||||
}
|
||||
|
||||
// Verify by re-running build
|
||||
log("Verifying fixes...")
|
||||
const verify = runTsc()
|
||||
if (verify.ok) {
|
||||
log("All fixes verified — build passes!")
|
||||
if (doCommit) gitCommit(`Auto-fix: ${fixes.length} error(s) resolved`)
|
||||
return { fixed: true, errors: [], fixes }
|
||||
}
|
||||
|
||||
const remainingErrors = parseErrors(verify.output)
|
||||
log(`${remainingErrors.length} error(s) remaining after fix`, "warn")
|
||||
|
||||
// Check for breaking changes
|
||||
if (isBreakingChange(remainingErrors, fixes)) {
|
||||
log("Breaking change detected — escalating", "warn")
|
||||
const approved = await escalateBreakingChange(remainingErrors, fixes)
|
||||
if (approved) {
|
||||
if (doCommit) gitCommit(`Breaking change applied after escalation`)
|
||||
return { fixed: true, errors: remainingErrors, fixes, escalated: true }
|
||||
}
|
||||
}
|
||||
|
||||
return { fixed: remainingErrors.length === 0, errors: remainingErrors, fixes }
|
||||
}
|
||||
|
||||
async function repairLoop(maxIterations = MAX_ITERATIONS, doCommit = false) {
|
||||
for (let i = 0; i < maxIterations; i++) {
|
||||
log(`=== Repair iteration ${i + 1}/${maxIterations} ===`)
|
||||
const result = await repairOnce(doCommit)
|
||||
if (!result.fixed) {
|
||||
if (result.errors?.length > 0) {
|
||||
log(`${result.errors.length} error(s) remaining — run again for deeper fix`, "warn")
|
||||
}
|
||||
break
|
||||
}
|
||||
if (result.errors?.length === 0) break
|
||||
}
|
||||
log("Repair agent finished")
|
||||
}
|
||||
|
||||
// ── Watch Mode ─────────────────────────────────────────────────────
|
||||
|
||||
function watchMode() {
|
||||
log("Watch mode active — monitoring src/ for changes...", "info")
|
||||
const chokidar = (() => {
|
||||
try {
|
||||
return _require("chokidar")
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
})()
|
||||
|
||||
if (!chokidar) {
|
||||
log("chokidar not available — using simple polling (5s interval)", "warn")
|
||||
setInterval(async () => {
|
||||
const result = await repairOnce(false)
|
||||
if (result.fixed) log("Auto-fix applied")
|
||||
}, 5000)
|
||||
return
|
||||
}
|
||||
|
||||
const watcher = chokidar.watch("src/**/*.{ts,tsx}", { cwd: ROOT, ignoreInitial: true })
|
||||
let debounceTimer = null
|
||||
|
||||
watcher.on("change", async (filePath) => {
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(async () => {
|
||||
log(`Change detected: ${filePath}`)
|
||||
await repairLoop(3, false)
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
log("Watching for changes...")
|
||||
}
|
||||
|
||||
// ── Entry ──────────────────────────────────────────────────────────
|
||||
|
||||
const args = process.argv.slice(2)
|
||||
const isWatch = args.includes("--watch") || args.includes("-w")
|
||||
const isCI = args.includes("--ci") || args.includes("-c")
|
||||
|
||||
async function main() {
|
||||
if (isWatch) {
|
||||
watchMode()
|
||||
} else {
|
||||
await repairLoop(MAX_ITERATIONS, isCI)
|
||||
}
|
||||
}
|
||||
|
||||
main().catch((e) => {
|
||||
console.error("Repair agent crashed:", e)
|
||||
process.exit(1)
|
||||
})
|
||||
@@ -0,0 +1,396 @@
|
||||
// ── Module Generator ─────────────────────────────────────────────────
|
||||
// Generates missing internal modules from templates.
|
||||
// Supports built-in templates and custom .setup-templates/ directory.
|
||||
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const ROOT = path.resolve(__dirname, "..", "..");
|
||||
const SETUP_TEMPLATES_DIR = path.join(ROOT, ".setup-templates");
|
||||
const REGISTRY_PATH = path.join(SETUP_TEMPLATES_DIR, "registry.json");
|
||||
const TEMPLATES_DIR = path.join(SETUP_TEMPLATES_DIR, "templates");
|
||||
|
||||
export interface TemplateRegistry {
|
||||
[importPath: string]: {
|
||||
template: string;
|
||||
params?: Record<string, unknown>;
|
||||
generator?: string; // optional custom generator function name
|
||||
};
|
||||
}
|
||||
|
||||
export interface GenerationResult {
|
||||
success: boolean;
|
||||
filePath: string;
|
||||
internalPath: string;
|
||||
message?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface FallbackRegistry {
|
||||
[pattern: string]: string;
|
||||
}
|
||||
|
||||
/** Load the template registry from .setup-templates/registry.json */
|
||||
export function loadRegistry(): { templates: TemplateRegistry; fallbacks: FallbackRegistry } {
|
||||
const builtInTemplates: TemplateRegistry = {
|
||||
"data/stickers": { template: "stickers.ts" },
|
||||
"data/constants": { template: "constants.ts" },
|
||||
"lib/utils": { template: "utils.ts" },
|
||||
"types/index": { template: "types-index.ts", params: { inferFromUsage: true } },
|
||||
};
|
||||
const builtInFallbacks: FallbackRegistry = {
|
||||
"@/data/*": "data-generic.ts",
|
||||
"@/lib/*": "lib-generic.ts",
|
||||
"@/hooks/*": "hook-generic.ts",
|
||||
"@/types/*": "types-generic.ts",
|
||||
"@/components/*": "component-generic.tsx",
|
||||
"@/utils/*": "utils-generic.ts",
|
||||
};
|
||||
|
||||
try {
|
||||
if (fs.existsSync(REGISTRY_PATH)) {
|
||||
const content = fs.readFileSync(REGISTRY_PATH, "utf-8");
|
||||
const custom = JSON.parse(content);
|
||||
return {
|
||||
templates: { ...builtInTemplates, ...(custom.templates || {}) },
|
||||
fallbacks: { ...builtInFallbacks, ...(custom.fallbackTemplates || {}) },
|
||||
};
|
||||
}
|
||||
} catch {
|
||||
// Use built-in
|
||||
}
|
||||
return { templates: builtInTemplates, fallbacks: builtInFallbacks };
|
||||
}
|
||||
|
||||
/** Match an internal path against fallback patterns */
|
||||
export function matchFallback(internalPath: string, fallbacks: FallbackRegistry): string | undefined {
|
||||
for (const [pattern, template] of Object.entries(fallbacks)) {
|
||||
// Convert glob pattern to regex
|
||||
const regexStr = "^" + pattern
|
||||
.replace(/\//g, "\\/")
|
||||
.replace(/\./g, "\\.")
|
||||
.replace(/\*/g, ".*")
|
||||
.replace(/[$^+(){}[\]|]/g, "\\$&")
|
||||
+ "$";
|
||||
const regex = new RegExp(regexStr);
|
||||
if (regex.test(internalPath)) {
|
||||
return template;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/** Render a template with parameters */
|
||||
function renderTemplate(templateContent: string, params: Record<string, unknown> = {}): string {
|
||||
let result = templateContent;
|
||||
for (const [key, value] of Object.entries(params)) {
|
||||
const regex = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, "g");
|
||||
result = result.replace(regex, String(value));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/** Get template content - first from custom templates dir, then built-in */
|
||||
function getTemplateContent(templateName: string): string {
|
||||
// Check custom templates first
|
||||
const customPath = path.join(TEMPLATES_DIR, templateName);
|
||||
if (fs.existsSync(customPath)) {
|
||||
return fs.readFileSync(customPath, "utf-8");
|
||||
}
|
||||
|
||||
// Built-in templates (embedded)
|
||||
const builtInTemplates: Record<string, string> = {
|
||||
"stickers.ts": `// ── Sticker Packs ─────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup. Edit .setup-templates/templates/stickers.ts to customize.
|
||||
|
||||
export interface Sticker {
|
||||
id: string;
|
||||
name: string;
|
||||
emoji?: string;
|
||||
svg?: string;
|
||||
}
|
||||
|
||||
export interface StickerPack {
|
||||
id: string;
|
||||
name: string;
|
||||
stickers: Sticker[];
|
||||
}
|
||||
|
||||
export function getStickerPacks(): StickerPack[] {
|
||||
return [
|
||||
{
|
||||
id: "reactions",
|
||||
name: "Reactions",
|
||||
stickers: [
|
||||
{ id: "thumbs-up", name: "Thumbs Up", emoji: "👍" },
|
||||
{ id: "thumbs-down", name: "Thumbs Down", emoji: "👎" },
|
||||
{ id: "heart", name: "Heart", emoji: "❤️" },
|
||||
{ id: "laugh", name: "Laugh", emoji: "😂" },
|
||||
{ id: "wow", name: "Wow", emoji: "😮" },
|
||||
{ id: "sad", name: "Sad", emoji: "😢" },
|
||||
{ id: "angry", name: "Angry", emoji: "😡" },
|
||||
{ id: "clap", name: "Clap", emoji: "👏" },
|
||||
{ id: "fire", name: "Fire", emoji: "🔥" },
|
||||
{ id: "100", name: "100", emoji: "💯" },
|
||||
{ id: "eyes", name: "Eyes", emoji: "👀" },
|
||||
{ id: "pray", name: "Pray", emoji: "🙏" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "animals",
|
||||
name: "Animals",
|
||||
stickers: [
|
||||
{ id: "cat", name: "Cat", emoji: "🐱" },
|
||||
{ id: "dog", name: "Dog", emoji: "🐶" },
|
||||
{ id: "panda", name: "Panda", emoji: "🐼" },
|
||||
{ id: "fox", name: "Fox", emoji: "🦊" },
|
||||
{ id: "bear", name: "Bear", emoji: "🐻" },
|
||||
{ id: "koala", name: "Koala", emoji: "🐨" },
|
||||
{ id: "tiger", name: "Tiger", emoji: "🐯" },
|
||||
{ id: "lion", name: "Lion", emoji: "🦁" },
|
||||
{ id: "monkey", name: "Monkey", emoji: "🐵" },
|
||||
{ id: "frog", name: "Frog", emoji: "🐸" },
|
||||
{ id: "penguin", name: "Penguin", emoji: "🐧" },
|
||||
{ id: "bird", name: "Bird", emoji: "🐦" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "food",
|
||||
name: "Food & Drink",
|
||||
stickers: [
|
||||
{ id: "pizza", name: "Pizza", emoji: "🍕" },
|
||||
{ id: "burger", name: "Burger", emoji: "🍔" },
|
||||
{ id: "taco", name: "Taco", emoji: "🌮" },
|
||||
{ id: "sushi", name: "Sushi", emoji: "🍣" },
|
||||
{ id: "ramen", name: "Ramen", emoji: "🍜" },
|
||||
{ id: "ice-cream", name: "Ice Cream", emoji: "🍦" },
|
||||
{ id: "cake", name: "Cake", emoji: "🎂" },
|
||||
{ id: "coffee", name: "Coffee", emoji: "☕" },
|
||||
{ id: "beer", name: "Beer", emoji: "🍺" },
|
||||
{ id: "wine", name: "Wine", emoji: "🍷" },
|
||||
{ id: "donut", name: "Donut", emoji: "🍩" },
|
||||
{ id: "cookie", name: "Cookie", emoji: "🍪" },
|
||||
],
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export function getStickerPacks(): StickerPack[] {
|
||||
return [
|
||||
// reactions, animals, food packs defined above
|
||||
// (inline for brevity - full packs in template file)
|
||||
];
|
||||
}
|
||||
`,
|
||||
"constants.ts": `// ── App Constants ────────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
|
||||
export const APP_NAME = "CoastIT CRM";
|
||||
export const APP_VERSION = "1.0.0";
|
||||
|
||||
export const LEAD_STATUSES = {
|
||||
new: { label: "New", color: "bg-blue-500" },
|
||||
contacted: { label: "Contacted", color: "bg-yellow-500" },
|
||||
qualified: { label: "Qualified", color: "bg-purple-500" },
|
||||
proposal: { label: "Proposal", color: "bg-orange-500" },
|
||||
won: { label: "Won", color: "bg-green-500" },
|
||||
lost: { label: "Lost", color: "bg-red-500" },
|
||||
} as const;
|
||||
|
||||
export const USER_ROLES = {
|
||||
super_admin: { label: "Super Admin", level: 1 },
|
||||
admin: { label: "Admin", level: 2 },
|
||||
sales: { label: "Sales", level: 3 },
|
||||
dev: { label: "Developer", level: 4 },
|
||||
} as const;
|
||||
|
||||
export const EVENT_TYPES = [
|
||||
"meeting",
|
||||
"call",
|
||||
"email",
|
||||
"task",
|
||||
"note",
|
||||
] as const;
|
||||
`,
|
||||
"utils.ts": `// ── Utility Functions ────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function formatDate(date: Date | string, options?: Intl.DateTimeFormatOptions): string {
|
||||
const d = typeof date === "string" ? new Date(date) : date;
|
||||
return d.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
...options,
|
||||
});
|
||||
}
|
||||
|
||||
export function formatTime(date: Date | string): string {
|
||||
const d = typeof date === "string" ? new Date(date) : date;
|
||||
return d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
|
||||
}
|
||||
|
||||
export function formatCurrency(amount: number, currency = "USD"): string {
|
||||
return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
|
||||
}
|
||||
|
||||
export function truncate(str: string, length: number): string {
|
||||
if (str.length <= length) return str;
|
||||
return str.slice(0, length - 3) + "...";
|
||||
}
|
||||
|
||||
export function generateId(): string {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
|
||||
export function debounce<T extends (...args: unknown[]) => unknown>(
|
||||
fn: T,
|
||||
delay: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeoutId: ReturnType<typeof setTimeout>;
|
||||
return (...args: Parameters<T>) => {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(() => fn(...args), delay);
|
||||
};
|
||||
}
|
||||
`,
|
||||
"types-index.ts": `// ── Type Definitions ──────────────────────────────────────────────────
|
||||
// Auto-generated by self-healing setup.
|
||||
|
||||
export type UserRole = "super_admin" | "admin" | "sales" | "dev";
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone?: string;
|
||||
role: UserRole;
|
||||
active: boolean;
|
||||
avatar: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Lead {
|
||||
id: string;
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
source: string;
|
||||
description: string;
|
||||
status: LeadStatus;
|
||||
assignedUserId: string | null;
|
||||
assignedUser: User | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export type LeadStatus = "new" | "contacted" | "qualified" | "proposal" | "won" | "lost";
|
||||
|
||||
export interface DashboardStats {
|
||||
totalLeads: number;
|
||||
newLeads: number;
|
||||
contactedLeads: number;
|
||||
qualifiedLeads: number;
|
||||
proposalLeads: number;
|
||||
wonLeads: number;
|
||||
lostLeads: number;
|
||||
conversionRate: number;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
return builtInTemplates[templateName] || "";
|
||||
}
|
||||
|
||||
/** Generate a single missing module */
|
||||
export function generateModule(
|
||||
internalPath: string,
|
||||
templates: TemplateRegistry,
|
||||
fallbacks: FallbackRegistry
|
||||
): GenerationResult {
|
||||
let entry = templates[internalPath];
|
||||
let templateFile = entry?.template;
|
||||
|
||||
// Try fallback patterns
|
||||
if (!entry) {
|
||||
const fallbackTemplate = matchFallback(internalPath, fallbacks);
|
||||
if (fallbackTemplate) {
|
||||
templateFile = fallbackTemplate;
|
||||
entry = { template: fallbackTemplate };
|
||||
}
|
||||
}
|
||||
|
||||
if (!templateFile) {
|
||||
return {
|
||||
success: false,
|
||||
filePath: "",
|
||||
internalPath,
|
||||
error: `No template registered for @/${internalPath}`,
|
||||
};
|
||||
}
|
||||
|
||||
const templateContent = getTemplateContent(templateFile);
|
||||
if (!templateContent) {
|
||||
return {
|
||||
success: false,
|
||||
filePath: "",
|
||||
internalPath,
|
||||
error: `Template not found: ${entry.template}`,
|
||||
};
|
||||
}
|
||||
|
||||
const rendered = renderTemplate(templateContent, entry.params || {});
|
||||
const filePath = path.join(ROOT, "src", internalPath + (internalPath.endsWith(".ts") ? "" : ".ts"));
|
||||
|
||||
// Ensure directory exists
|
||||
const dir = path.dirname(filePath);
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
|
||||
// Write file
|
||||
try {
|
||||
fs.writeFileSync(filePath, rendered, "utf-8");
|
||||
return {
|
||||
success: true,
|
||||
filePath,
|
||||
internalPath,
|
||||
message: `Generated @/${internalPath}`,
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
success: false,
|
||||
filePath,
|
||||
internalPath,
|
||||
error: `Failed to write file: ${e instanceof Error ? e.message : String(e)}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/** Generate all missing modules for a list of internal paths */
|
||||
export function generateAll(internalPaths: string[]): GenerationResult[] {
|
||||
const { templates, fallbacks } = loadRegistry();
|
||||
const results: GenerationResult[] = [];
|
||||
|
||||
for (const internalPath of internalPaths) {
|
||||
const result = generateModule(internalPath, templates, fallbacks);
|
||||
results.push(result);
|
||||
if (result.success) {
|
||||
console.log(` ✓ ${result.message}`);
|
||||
} else {
|
||||
console.error(` ✗ Failed @/${internalPath}: ${result.error}`);
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
// ── TypeScript Error Parser ──────────────────────────────────────────
|
||||
// Parses `tsc --noEmit` or `npm run build` output to extract
|
||||
// "Module not found: Can't resolve '@/path/to/module'" errors.
|
||||
// Returns actionable missing module info for the generator.
|
||||
|
||||
export interface MissingModule {
|
||||
/** The import path that failed, e.g. "@/data/stickers" */
|
||||
importPath: string;
|
||||
/** The file that contains the failing import */
|
||||
importerFile: string;
|
||||
/** Line number in importer file */
|
||||
line: number;
|
||||
/** Column number */
|
||||
column: number;
|
||||
/** Full error message for context */
|
||||
message: string;
|
||||
/** Whether this is an internal (@/...) module we can generate */
|
||||
isInternal: boolean;
|
||||
/** The normalized internal path, e.g. "data/stickers" */
|
||||
internalPath?: string;
|
||||
}
|
||||
|
||||
/** Parse TypeScript compiler output for missing module errors */
|
||||
export function parseMissingModules(tscOutput: string): MissingModule[] {
|
||||
const results: MissingModule[] = [];
|
||||
|
||||
// Pattern: error TS2307: Cannot find module '@/data/stickers' or its corresponding type declarations.
|
||||
// File: src/components/chats/media-picker.tsx:10:1
|
||||
const errorRegex = /error\s+TS\d+:\s+Cannot find module\s+'([^']+)'\s+or its corresponding type declarations\.\s*(?:\n\s*(.*?):(\d+):(\d+))?/g;
|
||||
|
||||
let match;
|
||||
while ((match = errorRegex.exec(tscOutput)) !== null) {
|
||||
const importPath = match[1];
|
||||
const importerFile = match[2] || "";
|
||||
const line = parseInt(match[3] || "0", 10);
|
||||
const column = parseInt(match[4] || "0", 10);
|
||||
|
||||
// Also handle: Module not found: Error: Can't resolve '@/data/stickers' in 'C:\...\src\components\chats'
|
||||
const altRegex = /Module not found: Error: Can't resolve\s+'([^']+)'\s+in\s+'([^']+)'/g;
|
||||
let altMatch;
|
||||
let altImporter = importerFile;
|
||||
while ((altMatch = altRegex.exec(tscOutput)) !== null) {
|
||||
if (altMatch[1] === importPath) {
|
||||
altImporter = altMatch[2];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const isInternal = importPath.startsWith("@/") || importPath.startsWith("~/");
|
||||
|
||||
let internalPath: string | undefined;
|
||||
if (isInternal) {
|
||||
internalPath = importPath.replace(/^[@~]\//, "");
|
||||
}
|
||||
|
||||
results.push({
|
||||
importPath,
|
||||
importerFile: altImporter,
|
||||
line,
|
||||
column,
|
||||
message: `Cannot find module '${importPath}'`,
|
||||
isInternal,
|
||||
internalPath,
|
||||
});
|
||||
}
|
||||
|
||||
// Deduplicate by importPath + importerFile
|
||||
const seen = new Set<string>();
|
||||
return results.filter((m) => {
|
||||
const key = `${m.importPath}|${m.importerFile}`;
|
||||
if (seen.has(key)) return false;
|
||||
seen.add(key);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
/** Filter to only internal (@/...) modules we can auto-generate */
|
||||
export function filterGeneratable(modules: MissingModule[]): MissingModule[] {
|
||||
return modules.filter((m) => m.isInternal && m.internalPath);
|
||||
}
|
||||
|
||||
/** Group missing modules by internal path */
|
||||
export function groupByInternalPath(modules: MissingModule[]): Map<string, MissingModule[]> {
|
||||
const groups = new Map<string, MissingModule[]>();
|
||||
for (const m of modules) {
|
||||
if (!m.internalPath) continue;
|
||||
const existing = groups.get(m.internalPath) || [];
|
||||
existing.push(m);
|
||||
groups.set(m.internalPath, existing);
|
||||
}
|
||||
return groups;
|
||||
}
|
||||
+195
-16
@@ -5,17 +5,22 @@
|
||||
// 2. pip install -r requirements.txt (Python dependencies)
|
||||
// 3. playwright install firefox chromium (Playwright browsers)
|
||||
// 4. Copies .env.example to .env.local if not exists
|
||||
// 5. --self-heal flag: runs build check + auto-generates missing modules
|
||||
//
|
||||
// All steps are cross-platform (Windows, Mac, Linux).
|
||||
// Uses execSync for simplicity since each step blocks the next.
|
||||
|
||||
import { execSync } from "node:child_process"
|
||||
import { existsSync, copyFileSync } from "node:fs"
|
||||
import { existsSync, copyFileSync, readFileSync, writeFileSync, mkdirSync } from "node:fs"
|
||||
import { platform } from "node:os"
|
||||
import { resolve, dirname } from "node:path"
|
||||
import { fileURLToPath } from "node:url"
|
||||
|
||||
const SEP = platform() === "win32" ? "&" : ";"
|
||||
const SELF = dirname(fileURLToPath(import.meta.url))
|
||||
const ROOT = resolve(SELF, "..")
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────
|
||||
|
||||
// Auto-detect Python executable (python vs python3)
|
||||
function detectPython() {
|
||||
const candidates = platform() === "win32" ? ["python", "python3"] : ["python3", "python"]
|
||||
for (const cmd of candidates) {
|
||||
@@ -28,7 +33,6 @@ function detectPython() {
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
// Auto-detect pip (pip vs pip3), fall back to python -m pip
|
||||
function detectPip(python) {
|
||||
const candidates = platform() === "win32" ? ["pip", "pip3"] : ["pip3", "pip"]
|
||||
for (const cmd of candidates) {
|
||||
@@ -40,41 +44,216 @@ function detectPip(python) {
|
||||
return `${python} -m pip`
|
||||
}
|
||||
|
||||
const PY = detectPython()
|
||||
const PIP = detectPip(PY)
|
||||
|
||||
function run(cmd, label) {
|
||||
function run(cmd, label, opts = {}) {
|
||||
console.log(`\n── ${label} ──`)
|
||||
try {
|
||||
execSync(cmd, { stdio: "inherit", timeout: 120000 })
|
||||
execSync(cmd, { stdio: "inherit", timeout: opts.timeout || 120000, cwd: opts.cwd || ROOT })
|
||||
} catch (e) {
|
||||
if (opts.optional) {
|
||||
console.log(` ~ Skipped (${e.message})`)
|
||||
return false
|
||||
}
|
||||
console.error(` ✗ Failed: ${e.message}`)
|
||||
process.exit(1)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// ── Self-Healing Module Registry ───────────────────────────────────
|
||||
|
||||
function loadRegistry() {
|
||||
const registryPath = resolve(ROOT, ".setup-templates", "registry.json")
|
||||
const templatesDir = resolve(ROOT, ".setup-templates", "templates")
|
||||
|
||||
const builtInTemplates = {
|
||||
"data/stickers": { template: "stickers.ts" },
|
||||
"data/constants": { template: "constants.ts" },
|
||||
"lib/utils": { template: "utils.ts" },
|
||||
"types/index": { template: "types-index.ts" },
|
||||
"hooks/use-media": { template: "hooks/use-media.ts" },
|
||||
"hooks/use-debounce": { template: "hooks/use-debounce.ts" },
|
||||
"hooks/use-local-storage": { template: "hooks/use-local-storage.ts" },
|
||||
}
|
||||
|
||||
const builtInFallbacks = {
|
||||
"@/data/*": "data-generic.ts",
|
||||
"@/lib/*": "lib-generic.ts",
|
||||
"@/hooks/*": "hook-generic.ts",
|
||||
"@/types/*": "types-generic.ts",
|
||||
"@/components/*": "component-generic.tsx",
|
||||
"@/utils/*": "utils-generic.ts",
|
||||
}
|
||||
|
||||
let templates = { ...builtInTemplates }
|
||||
let fallbacks = { ...builtInFallbacks }
|
||||
|
||||
try {
|
||||
if (existsSync(registryPath)) {
|
||||
const custom = JSON.parse(readFileSync(registryPath, "utf-8"))
|
||||
templates = { ...templates, ...(custom.templates || {}) }
|
||||
fallbacks = { ...fallbacks, ...(custom.fallbackTemplates || {}) }
|
||||
}
|
||||
} catch {}
|
||||
|
||||
const templateCache = {}
|
||||
|
||||
function getTemplate(templateName) {
|
||||
if (templateCache[templateName]) return templateCache[templateName]
|
||||
const candidatePaths = [
|
||||
resolve(templatesDir, templateName),
|
||||
resolve(templatesDir, "hooks", templateName.replace("hooks/", "")),
|
||||
]
|
||||
for (const p of candidatePaths) {
|
||||
if (existsSync(p)) {
|
||||
const content = readFileSync(p, "utf-8")
|
||||
templateCache[templateName] = content
|
||||
return content
|
||||
}
|
||||
}
|
||||
return ""
|
||||
}
|
||||
|
||||
function matchFallback(internalPath) {
|
||||
for (const [pattern, templateFile] of Object.entries(fallbacks)) {
|
||||
const regexStr = "^" + pattern
|
||||
.replace(/\//g, "\\/").replace(/\./g, "\\.")
|
||||
.replace(/\*/g, ".*")
|
||||
.replace(/[$^+(){}[\]|]/g, "\\$&") + "$"
|
||||
const regex = new RegExp(regexStr)
|
||||
if (regex.test(internalPath)) return templateFile
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function generateModule(internalPath) {
|
||||
let templateFile = templates[internalPath]?.template
|
||||
if (!templateFile) templateFile = matchFallback(internalPath)
|
||||
if (!templateFile) return { success: false, error: `No template for @/${internalPath}` }
|
||||
|
||||
const content = getTemplate(templateFile)
|
||||
if (!content) return { success: false, error: `Template file not found: ${templateFile}` }
|
||||
|
||||
const ext = templateFile.endsWith(".tsx") ? ".tsx" : ".ts"
|
||||
const filePath = resolve(ROOT, "src", internalPath + ext)
|
||||
mkdirSync(dirname(filePath), { recursive: true })
|
||||
writeFileSync(filePath, content, "utf-8")
|
||||
return { success: true, filePath, message: `Generated @/${internalPath}` }
|
||||
}
|
||||
|
||||
return { generateModule }
|
||||
}
|
||||
|
||||
function parseMissingModules(buildOutput) {
|
||||
const results = []
|
||||
const seen = new Set()
|
||||
|
||||
// Pattern: error TS2307: Cannot find module '@/path' or its corresponding type declarations.
|
||||
const errorRegex = /error\s+TS\d+:\s+Cannot find module\s+'([^']+)'/g
|
||||
let match
|
||||
while ((match = errorRegex.exec(buildOutput)) !== null) {
|
||||
const importPath = match[1]
|
||||
if (!seen.has(importPath)) {
|
||||
seen.add(importPath)
|
||||
const isInternal = importPath.startsWith("@/") || importPath.startsWith("~/")
|
||||
const internalPath = isInternal ? importPath.replace(/^[@~]\//, "") : undefined
|
||||
results.push({ importPath, isInternal, internalPath })
|
||||
}
|
||||
}
|
||||
|
||||
// Also catch webpack-style: Module not found: Error: Can't resolve '@/path'
|
||||
const webpackRegex = /Module not found: Error: Can't resolve\s+'([^']+)'/g
|
||||
while ((match = webpackRegex.exec(buildOutput)) !== null) {
|
||||
const importPath = match[1]
|
||||
if (!seen.has(importPath)) {
|
||||
seen.add(importPath)
|
||||
const isInternal = importPath.startsWith("@/") || importPath.startsWith("~/")
|
||||
const internalPath = isInternal ? importPath.replace(/^[@~]\//, "") : undefined
|
||||
results.push({ importPath, isInternal, internalPath })
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
|
||||
// ── Main ───────────────────────────────────────────────────────────
|
||||
|
||||
const args = process.argv.slice(2)
|
||||
const doSelfHeal = args.includes("--self-heal") || args.includes("-s")
|
||||
const PY = detectPython()
|
||||
const PIP = detectPip(PY)
|
||||
|
||||
console.log("=== CoastIT CRM Setup ===\n")
|
||||
|
||||
// 1. Node dependencies
|
||||
run("npm install", "Installing Node.js dependencies")
|
||||
|
||||
// 2. Python dependencies (run from browser-use-service directory)
|
||||
// 2. Python dependencies
|
||||
run(`cd browser-use-service ${SEP} ${PIP} install -r requirements.txt`, "Installing Python dependencies")
|
||||
|
||||
// 3. Playwright browsers (Firefox for primary scraping, Chromium for Chrome/Edge/Opera + Agent fallback)
|
||||
// 3. Playwright browsers
|
||||
run(`${PY} -m playwright install firefox chromium`, "Installing Playwright browsers")
|
||||
|
||||
// 4. .env file — create from template if it doesn't exist
|
||||
if (!existsSync(".env.local")) {
|
||||
// 4. .env file
|
||||
if (!existsSync(resolve(ROOT, ".env.local"))) {
|
||||
console.log("\n── Creating .env.local ──")
|
||||
copyFileSync(".env.example", ".env.local")
|
||||
copyFileSync(resolve(ROOT, ".env.example"), resolve(ROOT, ".env.local"))
|
||||
console.log(" ✓ Created .env.local from .env.example — edit it with your settings")
|
||||
} else {
|
||||
console.log("\n── .env.local already exists, skipping ──")
|
||||
}
|
||||
|
||||
// 5. Remaining manual steps
|
||||
console.log("\n── Next steps ──")
|
||||
// 5. Self-healing build check (--self-heal flag)
|
||||
if (doSelfHeal) {
|
||||
console.log("\n── Self-Healing Build Check ──")
|
||||
const { generateModule } = loadRegistry()
|
||||
let lastGeneratedCount = -1
|
||||
let iteration = 0
|
||||
const MAX_ITERATIONS = 5
|
||||
|
||||
while (iteration < MAX_ITERATIONS) {
|
||||
iteration++
|
||||
console.log(` Build check pass ${iteration}/${MAX_ITERATIONS}...`)
|
||||
|
||||
let buildOutput = ""
|
||||
try {
|
||||
buildOutput = execSync("npx tsc --noEmit", { stdio: "pipe", timeout: 60000, cwd: ROOT }).toString()
|
||||
} catch (e) {
|
||||
buildOutput = e.stdout?.toString() || e.message || ""
|
||||
}
|
||||
|
||||
const missing = parseMissingModules(buildOutput)
|
||||
const internalMissing = missing
|
||||
.filter(m => m.isInternal && m.internalPath)
|
||||
.filter((m, i, arr) => arr.findIndex(x => x.internalPath === m.internalPath) === i) // dedup
|
||||
|
||||
if (internalMissing.length === 0) {
|
||||
console.log(" ✓ No missing internal modules found!")
|
||||
break
|
||||
}
|
||||
|
||||
console.log(` Found ${internalMissing.length} missing internal module(s)`)
|
||||
|
||||
let generated = 0
|
||||
for (const mod of internalMissing) {
|
||||
const result = generateModule(mod.internalPath)
|
||||
if (result.success) {
|
||||
console.log(` ✓ ${result.message}`)
|
||||
generated++
|
||||
} else {
|
||||
console.log(` ✗ ${result.error}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (generated === 0 || generated === lastGeneratedCount) {
|
||||
console.log(" No new modules could be generated. Stopping.")
|
||||
break
|
||||
}
|
||||
lastGeneratedCount = generated
|
||||
}
|
||||
}
|
||||
|
||||
// 6. Final summary
|
||||
console.log("\n── Final Steps ──")
|
||||
console.log(" 1. Make sure PostgreSQL is running with database 'crm'")
|
||||
console.log(" 2. Pull the Ollama model: ollama pull dolphin-llama3:8b")
|
||||
console.log(" 3. Edit .env.local with your settings")
|
||||
|
||||
@@ -1,13 +1,23 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useCallback, useEffect } from "react"
|
||||
import { useState, useCallback, useRef, useEffect } from "react"
|
||||
import { AIChat } from "@/components/ai/ai-chat"
|
||||
import { JobSelector } from "@/components/ai/job-selector"
|
||||
import { Bot, Lightbulb, Target, MessageSquare, Wifi, WifiOff } from "lucide-react"
|
||||
import { Bot, ChevronRight, Wifi, WifiOff } from "lucide-react"
|
||||
|
||||
const tips = [
|
||||
"Ask for cold email templates for a specific job",
|
||||
"Request objection handling tips",
|
||||
"Ask for outreach strategies per industry",
|
||||
"Generate a follow up sequence",
|
||||
"Get LinkedIn connection message templates",
|
||||
]
|
||||
|
||||
export default function AIAssistantPage() {
|
||||
const [selectedJob, setSelectedJob] = useState<{ job_title: string; keywords: string[]; industry: string; description: string } | null>(null)
|
||||
const [recentPrompts, setRecentPrompts] = useState<string[]>([])
|
||||
const [aiOnline, setAiOnline] = useState<boolean | null>(null)
|
||||
const aiChatRef = useRef<{ fillInput: (text: string) => void } | null>(null)
|
||||
|
||||
const handleJobSelect = useCallback((job: typeof selectedJob) => {
|
||||
setSelectedJob(job)
|
||||
@@ -28,83 +38,121 @@ export default function AIAssistantPage() {
|
||||
return () => { cancelled = true; clearInterval(id) }
|
||||
}, [])
|
||||
|
||||
const handleTipClick = useCallback((tip: string) => {
|
||||
aiChatRef.current?.fillInput(tip)
|
||||
}, [])
|
||||
|
||||
const handleRecentPromptClick = useCallback((prompt: string) => {
|
||||
aiChatRef.current?.fillInput(prompt)
|
||||
}, [])
|
||||
|
||||
const handleMessageSent = useCallback((msg: string) => {
|
||||
setRecentPrompts((prev) => {
|
||||
const next = [msg, ...prev.filter((p) => p !== msg)].slice(0, 3)
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-3.5rem)]">
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<div className="border-b border-[#2a2a35] px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-9 w-9 rounded-lg bg-[#1BB0CE]/15 flex items-center justify-center">
|
||||
<Bot className="h-5 w-5 text-[#1BB0CE]" />
|
||||
<div className="flex h-[calc(100vh-3.5rem)] bg-background">
|
||||
<div className="flex-1 flex flex-col min-w-0 border border-foreground transition-colors overflow-hidden">
|
||||
<div className="bg-card/80 backdrop-blur-md border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary flex items-center justify-center" style={{boxShadow: "0 0 40px hsl(var(--primary) / 0.3)"}}>
|
||||
<Bot className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-foreground font-bold text-lg">AI Sales Assistant</h1>
|
||||
<p className="text-muted-foreground text-xs mt-0.5">Powered by local AI</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-lg font-semibold text-[#e8e8ef]">AI Sales Assistant</h1>
|
||||
<p className="text-xs text-[#6a6a75]">Uncensored sales tips and strategies powered by local AI</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className={aiOnline === null ? "text-[#6a6a75]" : aiOnline ? "text-green-400" : "text-red-400"}>
|
||||
{aiOnline === null ? "Checking..." : aiOnline ? "Connected" : "Disconnected"}
|
||||
</span>
|
||||
{aiOnline === null ? (
|
||||
<span className="h-2 w-2 rounded-full bg-[#6a6a75]" />
|
||||
) : aiOnline ? (
|
||||
<Wifi className="h-3.5 w-3.5 text-green-400" />
|
||||
) : (
|
||||
<WifiOff className="h-3.5 w-3.5 text-red-400" />
|
||||
)}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className={aiOnline === null ? "text-[#6a6a75]" : aiOnline ? "text-green-400" : "text-red-400"}>
|
||||
{aiOnline === null ? "Checking..." : aiOnline ? "Connected" : "Disconnected"}
|
||||
</span>
|
||||
{aiOnline === null ? (
|
||||
<span className="h-2 w-2 rounded-full bg-[#6a6a75]" />
|
||||
) : aiOnline ? (
|
||||
<Wifi className="h-3.5 w-3.5 text-green-400" />
|
||||
) : (
|
||||
<WifiOff className="h-3.5 w-3.5 text-red-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="w-px h-5 bg-border" />
|
||||
<div className="bg-muted/50 rounded-lg px-3 py-1.5">
|
||||
<span className="text-muted-foreground text-xs">Local AI Model</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex">
|
||||
<div className="flex-1 flex flex-col min-w-0 border-r border-[#2a2a35]">
|
||||
<AIChat />
|
||||
<AIChat ref={aiChatRef} onMessageSent={handleMessageSent} />
|
||||
</div>
|
||||
<div className="w-[300px] flex-none bg-sidebar border border-foreground transition-colors p-5 overflow-y-auto h-full flex flex-col">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
<span className="text-primary text-[10px] font-bold uppercase tracking-[0.15em]">Target Job</span>
|
||||
</div>
|
||||
|
||||
<div className="w-72 flex-none p-4 space-y-4 overflow-y-auto">
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-[#6a6a75] uppercase tracking-wider mb-2 flex items-center gap-1.5">
|
||||
<Target className="h-3.5 w-3.5" />
|
||||
Target Job
|
||||
</h3>
|
||||
<JobSelector onSelect={handleJobSelect} />
|
||||
</div>
|
||||
|
||||
{selectedJob && (
|
||||
<div className="bg-[#1a1a24] border border-[#2a2a35] rounded-lg p-3 space-y-2">
|
||||
<h4 className="text-sm font-medium text-[#e8e8ef]">{selectedJob.job_title}</h4>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs px-1.5 py-0.5 rounded bg-[#1BB0CE]/10 text-[#1BB0CE]">{selectedJob.industry}</span>
|
||||
</div>
|
||||
<p className="text-xs text-[#8a8a95]">{selectedJob.description}</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedJob.keywords.map((kw, i) => (
|
||||
<span key={i} className="text-xs px-1.5 py-0.5 rounded bg-[#2a2a35] text-[#6a6a75]">
|
||||
{kw}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<JobSelector onSelect={handleJobSelect} />
|
||||
{selectedJob && (
|
||||
<div className="bg-card/50 border border-border rounded-xl p-3.5 mt-3 space-y-2">
|
||||
<h4 className="text-sm font-semibold text-foreground">{selectedJob.job_title}</h4>
|
||||
<span className="text-xs px-2 py-0.5 rounded-md bg-primary/10 text-primary font-medium inline-block">{selectedJob.industry}</span>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">{selectedJob.description}</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{selectedJob.keywords.map((kw, i) => (
|
||||
<span key={i} className="text-xs px-2 py-0.5 rounded-md bg-muted/50 text-muted-foreground">{kw}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-[#1a1a24] border border-[#2a2a35] rounded-lg p-3 space-y-2">
|
||||
<h4 className="text-xs font-semibold text-[#6a6a75] uppercase tracking-wider flex items-center gap-1.5">
|
||||
<Lightbulb className="h-3.5 w-3.5" />
|
||||
Tips
|
||||
</h4>
|
||||
<ul className="space-y-1.5 text-xs text-[#8a8a95]">
|
||||
<li className="flex gap-2">
|
||||
<MessageSquare className="h-3 w-3 mt-0.5 flex-none text-[#1BB0CE]" />
|
||||
Ask for cold email templates for a specific job
|
||||
</li>
|
||||
<li className="flex gap-2">
|
||||
<MessageSquare className="h-3 w-3 mt-0.5 flex-none text-[#1BB0CE]" />
|
||||
Request objection handling tips
|
||||
</li>
|
||||
<li className="flex gap-2">
|
||||
<MessageSquare className="h-3 w-3 mt-0.5 flex-none text-[#1BB0CE]" />
|
||||
Ask for outreach strategies per industry
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
<span className="text-primary text-[10px] font-bold uppercase tracking-[0.15em]">Quick Tips</span>
|
||||
</div>
|
||||
{tips.map((tip, i) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => handleTipClick(tip)}
|
||||
className="flex items-start gap-2.5 bg-card/50 hover:bg-card border border-border hover:border-primary/20 rounded-xl p-3.5 mb-2 cursor-pointer transition-all duration-200 group"
|
||||
>
|
||||
<ChevronRight className="h-3.5 w-3.5 mt-0.5 text-muted-foreground group-hover:text-primary transition-colors duration-200 flex-shrink-0" />
|
||||
<span className="text-muted-foreground text-xs leading-5 group-hover:text-foreground transition-colors duration-200">{tip}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
<span className="text-primary text-[10px] font-bold uppercase tracking-[0.15em]">Recent Prompts</span>
|
||||
</div>
|
||||
{recentPrompts.length > 0 ? (
|
||||
recentPrompts.map((prompt, i) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => handleRecentPromptClick(prompt)}
|
||||
className="bg-card/50 rounded-xl p-3 mb-2 border border-border text-muted-foreground text-xs truncate hover:text-foreground cursor-pointer transition-colors duration-200"
|
||||
>
|
||||
{prompt}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-muted-foreground text-xs text-center py-4">Your recent prompts will appear here</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-auto border-t border-border pt-4">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="text-muted-foreground text-[10px] uppercase tracking-wide">Messages today</div>
|
||||
<div className="text-foreground text-sm font-semibold mt-0.5">24</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-muted-foreground text-[10px] uppercase tracking-wide">Tokens used</div>
|
||||
<div className="text-foreground text-sm font-semibold mt-0.5">12.4k</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -86,7 +86,7 @@ export default function DashboardPage() {
|
||||
</PageHeader>
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-[#888888] dark:text-[#666666]">Pipeline Overview</p>
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-[#8A9078] dark:text-[#666666]">Pipeline Overview</p>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
{stats
|
||||
@@ -97,7 +97,7 @@ export default function DashboardPage() {
|
||||
}
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-[#888888] dark:text-[#666666]">Analytics</p>
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-[#8A9078] dark:text-[#666666]">Analytics</p>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<LeadStatusChart data={stats?.statusDistribution ?? []} />
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
|
||||
const GIPHY_API_KEY = process.env.GIPHY_API_KEY
|
||||
const GIPHY_BASE = "https://api.giphy.com/v1/gifs"
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
}
|
||||
|
||||
if (!GIPHY_API_KEY) {
|
||||
return NextResponse.json({ error: "GIPHY API key not configured" }, { status: 500 })
|
||||
}
|
||||
|
||||
const { searchParams } = new URL(request.url)
|
||||
const type = searchParams.get("type") || "trending"
|
||||
const query = searchParams.get("q") || ""
|
||||
const offset = parseInt(searchParams.get("offset") || "0", 10)
|
||||
const limit = Math.min(parseInt(searchParams.get("limit") || "20", 10), 50)
|
||||
|
||||
let url: string
|
||||
if (type === "search" && query) {
|
||||
url = `${GIPHY_BASE}/search?api_key=${GIPHY_API_KEY}&q=${encodeURIComponent(query)}&limit=${limit}&offset=${offset}&rating=g`
|
||||
} else {
|
||||
url = `${GIPHY_BASE}/trending?api_key=${GIPHY_API_KEY}&limit=${limit}&offset=${offset}&rating=g`
|
||||
}
|
||||
|
||||
const res = await fetch(url)
|
||||
if (!res.ok) {
|
||||
const errBody = await res.text()
|
||||
console.error("GIPHY API error:", res.status, errBody)
|
||||
return NextResponse.json({ error: `GIPHY API error (${res.status}): ${errBody}` }, { status: res.status })
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
const gifs = (data.data || []).map((gif: any) => ({
|
||||
id: gif.id,
|
||||
title: gif.title,
|
||||
url: gif.images?.original?.url || "",
|
||||
previewUrl: gif.images?.fixed_width?.url || "",
|
||||
previewHeight: gif.images?.fixed_width?.height || 150,
|
||||
width: gif.images?.original?.width || 0,
|
||||
height: gif.images?.original?.height || 0,
|
||||
}))
|
||||
|
||||
return NextResponse.json({
|
||||
gifs,
|
||||
pagination: data.pagination || { total_count: 0, count: gifs.length, offset },
|
||||
})
|
||||
} catch (error: any) {
|
||||
console.error("GIPHY proxy error:", error)
|
||||
return NextResponse.json({ error: error.message || "Internal server error" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { NextResponse } from "next/server"
|
||||
import { checkAiServiceStatus } from "@/lib/ai"
|
||||
|
||||
export async function GET() {
|
||||
const ok = await checkAiServiceStatus()
|
||||
return NextResponse.json({ status: ok ? "ok" : "unavailable" }, { status: ok ? 200 : 503 })
|
||||
}
|
||||
+62
-25
@@ -1,8 +1,8 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
|
||||
const TENOR_API_KEY = process.env.TENOR_API_KEY || ""
|
||||
const TENOR_BASE = "https://tenor.googleapis.com/v2"
|
||||
const GIPHY_API_KEY = process.env.GIPHY_API_KEY
|
||||
const GIPHY_BASE = "https://api.giphy.com/v1/gifs"
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
@@ -12,41 +12,78 @@ export async function GET(request: NextRequest) {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const q = searchParams.get("q") || ""
|
||||
const limit = Math.min(parseInt(searchParams.get("limit") || "20", 10), 50)
|
||||
const pos = searchParams.get("pos") || ""
|
||||
const pos = parseInt(searchParams.get("pos") || "0", 10) || 0
|
||||
|
||||
if (!TENOR_API_KEY) {
|
||||
if (!GIPHY_API_KEY) {
|
||||
console.error("Missing GIPHY_API_KEY environment variable")
|
||||
return NextResponse.json({ results: [], noKey: true })
|
||||
}
|
||||
|
||||
const endpoint = q
|
||||
? `${TENOR_BASE}/search?q=${encodeURIComponent(q)}&key=${TENOR_API_KEY}&limit=${limit}&media_filter=minimal`
|
||||
: `${TENOR_BASE}/featured?key=${TENOR_API_KEY}&limit=${limit}&media_filter=minimal`
|
||||
let data: any
|
||||
|
||||
const url = pos ? `${endpoint}&pos=${pos}` : endpoint
|
||||
if (q) {
|
||||
const url = `${GIPHY_BASE}/search?api_key=${GIPHY_API_KEY}&q=${encodeURIComponent(q)}&limit=${limit}&offset=${pos}&rating=g`
|
||||
const res = await fetch(url, { signal: AbortSignal.timeout(8000) })
|
||||
if (!res.ok) {
|
||||
const errBody = await res.text()
|
||||
console.error("GIPHY API search error:", res.status, errBody)
|
||||
return NextResponse.json({ results: [], error: `GIPHY error: ${errBody}` }, { status: 502 })
|
||||
}
|
||||
data = await res.json()
|
||||
} else {
|
||||
const trendingUrl = `${GIPHY_BASE}/trending?api_key=${GIPHY_API_KEY}&limit=${limit}&offset=${pos}&rating=g`
|
||||
const trendingRes = await fetch(trendingUrl, { signal: AbortSignal.timeout(8000) })
|
||||
|
||||
const res = await fetch(url, { signal: AbortSignal.timeout(8000) })
|
||||
if (!res.ok) {
|
||||
return NextResponse.json({ results: [], error: "Tenor API error" }, { status: 502 })
|
||||
if (trendingRes.ok) {
|
||||
data = await trendingRes.json()
|
||||
if (!data.data?.length && pos === 0) {
|
||||
console.log("Trending returned no results, falling back to default search")
|
||||
const fallbackUrl = `${GIPHY_BASE}/search?api_key=${GIPHY_API_KEY}&q=funny&limit=${limit}&offset=${pos}&rating=g`
|
||||
const fallbackRes = await fetch(fallbackUrl, { signal: AbortSignal.timeout(8000) })
|
||||
if (!fallbackRes.ok) {
|
||||
const errBody = await fallbackRes.text()
|
||||
console.error("GIPHY fallback search error:", fallbackRes.status, errBody)
|
||||
return NextResponse.json({ results: [], error: `GIPHY error: ${errBody}` }, { status: 502 })
|
||||
}
|
||||
data = await fallbackRes.json()
|
||||
}
|
||||
} else {
|
||||
const errBody = await trendingRes.text()
|
||||
console.error("GIPHY trending error:", trendingRes.status, errBody)
|
||||
console.log("Trending failed, falling back to default search")
|
||||
const fallbackUrl = `${GIPHY_BASE}/search?api_key=${GIPHY_API_KEY}&q=funny&limit=${limit}&offset=${pos}&rating=g`
|
||||
const fallbackRes = await fetch(fallbackUrl, { signal: AbortSignal.timeout(8000) })
|
||||
if (!fallbackRes.ok) {
|
||||
const fallbackErr = await fallbackRes.text()
|
||||
console.error("GIPHY fallback search error:", fallbackRes.status, fallbackErr)
|
||||
return NextResponse.json({ results: [], error: `GIPHY error: ${fallbackErr}` }, { status: 502 })
|
||||
}
|
||||
data = await fallbackRes.json()
|
||||
}
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
const results = (data.results || []).map((item: any) => {
|
||||
const media = item.media_formats?.gif || item.media_formats?.tinygif || {}
|
||||
const preview = item.media_formats?.tinygif || item.media_formats?.gif || {}
|
||||
const results = (data.data || []).map((item: any) => {
|
||||
const dims = item.images?.original
|
||||
return {
|
||||
id: item.id,
|
||||
title: item.title || "",
|
||||
url: media.url || "",
|
||||
previewUrl: preview.url || "",
|
||||
width: media.dims?.[0] || 200,
|
||||
height: media.dims?.[1] || 200,
|
||||
url: dims?.url || "",
|
||||
previewUrl: item.images?.fixed_width?.url || "",
|
||||
width: dims?.width ? parseInt(dims.width, 10) : 200,
|
||||
height: dims?.height ? parseInt(dims.height, 10) : 200,
|
||||
}
|
||||
})
|
||||
|
||||
return NextResponse.json({ results, next: data.next || "" })
|
||||
} catch (error) {
|
||||
console.error("GIF API error:", error)
|
||||
return NextResponse.json({ results: [], error: "Failed to fetch GIFs" }, { status: 500 })
|
||||
const nextOffset = pos + results.length
|
||||
const total = data.pagination?.total_count || 0
|
||||
const hasMore = total ? nextOffset < total : results.length === limit
|
||||
const nextPos = hasMore ? String(nextOffset) : ""
|
||||
|
||||
return NextResponse.json({ results, next: nextPos })
|
||||
} catch (error: any) {
|
||||
console.error("GIF proxy error:", error)
|
||||
const message = error?.message === "Failed to fetch"
|
||||
? "Could not reach the GIF service."
|
||||
: "Failed to fetch GIFs."
|
||||
return NextResponse.json({ results: [], error: message }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,24 +53,24 @@ export default function CallRoomPage({ params }: { params: Promise<{ roomId: str
|
||||
|
||||
if (!joined) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#CC0000]/10 to-[#990000]/10 p-4">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-8 w-full max-w-md border border-[#E0E0E0] dark:border-[#CC0000]/20 shadow-lg text-center">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#C84B4B]/10 to-[#C84B4B]/10 p-4">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-8 w-full max-w-md border border-[#D4D8CC] dark:border-[#CC0000]/20 shadow-lg text-center">
|
||||
{connectionTimeout ? (
|
||||
<>
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-3">This call is no longer available.</h1>
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-3">This call is no longer available.</h1>
|
||||
</>
|
||||
) : !isReady ? (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-4 py-6">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[#CC0000]" />
|
||||
<p className="text-[#888888] text-sm">Connecting to call...</p>
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[#C84B4B]" />
|
||||
<p className="text-[#8A9078] text-sm">Connecting to call...</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-3">Join Call</h1>
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-3">Join Call</h1>
|
||||
{micError && (
|
||||
<p className="text-[#CC0000] text-xs mb-4">{micError}</p>
|
||||
<p className="text-[#C84B4B] text-xs mb-4">{micError}</p>
|
||||
)}
|
||||
<input
|
||||
type="text"
|
||||
@@ -78,12 +78,12 @@ export default function CallRoomPage({ params }: { params: Promise<{ roomId: str
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") handleJoin() }}
|
||||
placeholder="Enter your name"
|
||||
className="bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E0E0E0] dark:border-[#333333] text-[#111111] dark:text-white placeholder-[#AAAAAA] dark:placeholder-[#555555] rounded-xl px-4 py-2.5 text-sm w-full mb-4 outline-none transition-colors focus:border-[#CC0000] dark:focus:border-[#FF4444]"
|
||||
className="bg-[#FAFAF6] dark:bg-[#1A1A1A] border border-[#D4D8CC] dark:border-[#333333] text-[#2D3020] dark:text-white placeholder-[#8A9078] dark:placeholder-[#555555] rounded-xl px-4 py-2.5 text-sm w-full mb-4 outline-none transition-colors focus:border-[#C84B4B] dark:focus:border-[#FF4444]"
|
||||
/>
|
||||
<button
|
||||
onClick={handleJoin}
|
||||
disabled={!displayName.trim()}
|
||||
className="w-full bg-[#CC0000] hover:bg-[#990000] disabled:bg-[#CCCCCC] disabled:cursor-not-allowed dark:bg-[#FF1111] dark:hover:bg-[#CC0000] dark:disabled:bg-[#333333] text-white font-semibold text-sm rounded-xl py-2.5 flex items-center justify-center gap-2 transition-all duration-200"
|
||||
className="w-full bg-[#C84B4B] hover:bg-[#C84B4B]/80 disabled:bg-[#8A9078] disabled:cursor-not-allowed dark:bg-[#FF1111] dark:hover:bg-[#CC0000] dark:disabled:bg-[#333333] text-white font-semibold text-sm rounded-xl py-2.5 flex items-center justify-center gap-2 transition-all duration-200"
|
||||
>
|
||||
<Phone className="h-4 w-4" />
|
||||
Join Call
|
||||
@@ -96,14 +96,14 @@ export default function CallRoomPage({ params }: { params: Promise<{ roomId: str
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#CC0000]/10 to-[#990000]/10 p-4">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-8 w-full max-w-md border border-[#E0E0E0] dark:border-[#CC0000]/20 shadow-lg text-center">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#C84B4B]/10 to-[#C84B4B]/10 p-4">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-8 w-full max-w-md border border-[#D4D8CC] dark:border-[#CC0000]/20 shadow-lg text-center">
|
||||
{callState === "calling" && (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-4">Calling</h1>
|
||||
<p className="text-[#888888] text-sm animate-pulse">Connecting to call room...</p>
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-4">Calling</h1>
|
||||
<p className="text-[#8A9078] text-sm animate-pulse">Connecting to call room...</p>
|
||||
<div className="flex justify-center mt-6">
|
||||
<button onClick={handleEnd} className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200">
|
||||
<button onClick={handleEnd} className="w-14 h-14 rounded-full bg-[#C84B4B] hover:bg-[#C84B4B]/80 dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200">
|
||||
<PhoneOff className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -112,21 +112,21 @@ export default function CallRoomPage({ params }: { params: Promise<{ roomId: str
|
||||
|
||||
{callState === "waiting" && (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-4">Waiting for participant</h1>
|
||||
<p className="text-[#888888] text-sm animate-pulse">Share the call link to invite someone...</p>
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-4">Waiting for participant</h1>
|
||||
<p className="text-[#8A9078] text-sm animate-pulse">Share the call link to invite someone...</p>
|
||||
{participants.length > 0 && (
|
||||
<div className="mt-4 bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-xl p-3">
|
||||
<div className="flex items-center gap-2 text-xs text-[#888888] mb-2">
|
||||
<div className="mt-4 bg-[#FAFAF6] dark:bg-[#1A1A1A] rounded-xl p-3">
|
||||
<div className="flex items-center gap-2 text-xs text-[#8A9078] mb-2">
|
||||
<Users className="h-3 w-3" />
|
||||
Participants ({participants.length})
|
||||
</div>
|
||||
{participants.map((p) => (
|
||||
<div key={p.id} className="text-sm text-[#111111] dark:text-white text-left">{p.label}</div>
|
||||
<div key={p.id} className="text-sm text-[#2D3020] dark:text-white text-left">{p.label}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-center mt-6">
|
||||
<button onClick={handleEnd} className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200">
|
||||
<button onClick={handleEnd} className="w-14 h-14 rounded-full bg-[#C84B4B] hover:bg-[#C84B4B]/80 dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200">
|
||||
<PhoneOff className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -135,21 +135,21 @@ export default function CallRoomPage({ params }: { params: Promise<{ roomId: str
|
||||
|
||||
{callState === "participant_joined" && (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-4">Participant joined</h1>
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-4">Participant joined</h1>
|
||||
{participants.length > 0 && (
|
||||
<div className="mb-4 bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-xl p-3">
|
||||
<div className="flex items-center gap-2 text-xs text-[#888888] mb-2">
|
||||
<div className="mb-4 bg-[#FAFAF6] dark:bg-[#1A1A1A] rounded-xl p-3">
|
||||
<div className="flex items-center gap-2 text-xs text-[#8A9078] mb-2">
|
||||
<Users className="h-3 w-3" />
|
||||
Participants ({participants.length})
|
||||
</div>
|
||||
{participants.map((p) => (
|
||||
<div key={p.id} className="text-sm text-[#111111] dark:text-white text-left">{p.label}</div>
|
||||
<div key={p.id} className="text-sm text-[#2D3020] dark:text-white text-left">{p.label}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-[#888888] text-sm animate-pulse">Connecting...</p>
|
||||
<p className="text-[#8A9078] text-sm animate-pulse">Connecting...</p>
|
||||
<div className="flex justify-center mt-6">
|
||||
<button onClick={handleEnd} className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200">
|
||||
<button onClick={handleEnd} className="w-14 h-14 rounded-full bg-[#C84B4B] hover:bg-[#C84B4B]/80 dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200">
|
||||
<PhoneOff className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -158,10 +158,10 @@ export default function CallRoomPage({ params }: { params: Promise<{ roomId: str
|
||||
|
||||
{callState === "connecting" && (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-4">Connecting</h1>
|
||||
<p className="text-[#888888] text-sm animate-pulse">Establishing secure connection...</p>
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-4">Connecting</h1>
|
||||
<p className="text-[#8A9078] text-sm animate-pulse">Establishing secure connection...</p>
|
||||
<div className="flex justify-center mt-6">
|
||||
<button onClick={handleEnd} className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200">
|
||||
<button onClick={handleEnd} className="w-14 h-14 rounded-full bg-[#C84B4B] hover:bg-[#C84B4B]/80 dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200">
|
||||
<PhoneOff className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -170,37 +170,37 @@ export default function CallRoomPage({ params }: { params: Promise<{ roomId: str
|
||||
|
||||
{callState === "connected" && (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-1">Connected</h1>
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-1">Connected</h1>
|
||||
{participants.length > 0 && (
|
||||
<div className="mb-4 bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-xl p-3">
|
||||
<div className="flex items-center gap-2 text-xs text-[#888888] mb-2">
|
||||
<div className="mb-4 bg-[#FAFAF6] dark:bg-[#1A1A1A] rounded-xl p-3">
|
||||
<div className="flex items-center gap-2 text-xs text-[#8A9078] mb-2">
|
||||
<Users className="h-3 w-3" />
|
||||
Participants ({participants.length})
|
||||
</div>
|
||||
{participants.map((p) => (
|
||||
<div key={p.id} className="text-sm text-[#111111] dark:text-white text-left">{p.label}</div>
|
||||
<div key={p.id} className="text-sm text-[#2D3020] dark:text-white text-left">{p.label}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-[#CC0000] font-mono text-lg mb-6">
|
||||
<div className="text-[#C84B4B] font-mono text-lg mb-6">
|
||||
{formatDuration(callDuration)}
|
||||
</div>
|
||||
<div className="flex justify-center gap-4">
|
||||
<button
|
||||
onClick={toggleSpeaker}
|
||||
className={`w-14 h-14 rounded-full flex items-center justify-center text-white font-bold transition-all duration-200 ${isSpeakerOn ? 'bg-[#0033CC] dark:bg-[#1144FF]' : 'bg-[#444444] dark:bg-[#333333]'}`}
|
||||
className={`w-14 h-14 rounded-full flex items-center justify-center text-white font-bold transition-all duration-200 ${isSpeakerOn ? 'bg-[#5A8FC4] dark:bg-[#1144FF]' : 'bg-[#8A9078] dark:bg-[#333333]'}`}
|
||||
>
|
||||
{isSpeakerOn ? <Volume2 className="h-5 w-5" /> : <VolumeX className="h-5 w-5" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleMute}
|
||||
className={`w-14 h-14 rounded-full flex items-center justify-center text-white font-bold transition-all duration-200 ${isMuted ? 'bg-[#0033CC] dark:bg-[#1144FF]' : 'bg-[#444444] dark:bg-[#333333]'}`}
|
||||
className={`w-14 h-14 rounded-full flex items-center justify-center text-white font-bold transition-all duration-200 ${isMuted ? 'bg-[#5A8FC4] dark:bg-[#1144FF]' : 'bg-[#8A9078] dark:bg-[#333333]'}`}
|
||||
>
|
||||
{isMuted ? <MicOff className="h-5 w-5" /> : <Mic className="h-5 w-5" />}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleEnd}
|
||||
className="w-14 h-14 rounded-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200"
|
||||
className="w-14 h-14 rounded-full bg-[#C84B4B] hover:bg-[#C84B4B]/80 dark:bg-[#FF1111] flex items-center justify-center text-white font-bold transition-all duration-200"
|
||||
>
|
||||
<PhoneOff className="h-5 w-5" />
|
||||
</button>
|
||||
@@ -210,15 +210,15 @@ export default function CallRoomPage({ params }: { params: Promise<{ roomId: str
|
||||
|
||||
{(callState === "ended" || callState === "idle") && (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-4">Call ended</h1>
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-4">Call ended</h1>
|
||||
{callDuration > 0 && (
|
||||
<p className="text-[#888888] text-sm mb-6">Duration: {formatDuration(callDuration)}</p>
|
||||
<p className="text-[#8A9078] text-sm mb-6">Duration: {formatDuration(callDuration)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-[#CC0000] text-xs mt-4">{error}</p>
|
||||
<p className="text-[#C84B4B] text-xs mt-4">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+34
-25
@@ -2,6 +2,8 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Audiowide&display=swap');
|
||||
|
||||
@import "../styles/ai-assistant.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -76,35 +78,41 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: 220 14% 84%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 220 10% 91%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 220 14% 96%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 120 100% 50%;
|
||||
--background: 60 20% 95%;
|
||||
--foreground: 71 20% 16%;
|
||||
--card: 60 29% 97%;
|
||||
--card-foreground: 71 20% 16%;
|
||||
--popover: 60 29% 97%;
|
||||
--popover-foreground: 71 20% 16%;
|
||||
--primary: 0 53% 54%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 220 14% 88%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 220 14% 88%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 220 14% 88%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--sidebar: 216 12% 92%;
|
||||
--sidebar-foreground: 0 0% 20%;
|
||||
--sidebar-primary: 0 91.2% 59.8%;
|
||||
--secondary: 210 47% 56%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
--muted: 75 10% 93%;
|
||||
--muted-foreground: 75 10% 52%;
|
||||
--accent: 159 32% 43%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 53% 54%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 80 13% 82%;
|
||||
--input: 80 13% 82%;
|
||||
--ring: 0 53% 54%;
|
||||
--sidebar: 80 17% 92%;
|
||||
--sidebar-foreground: 71 20% 16%;
|
||||
--sidebar-primary: 0 53% 54%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 218 16% 87%;
|
||||
--sidebar-accent-foreground: 0 0% 20%;
|
||||
--sidebar-border: 220 11% 84%;
|
||||
--sidebar-ring: 0 76.3% 48%;
|
||||
--sidebar-accent: 80 17% 92%;
|
||||
--sidebar-accent-foreground: 71 20% 16%;
|
||||
--sidebar-border: 80 13% 82%;
|
||||
--sidebar-ring: 0 53% 54%;
|
||||
--radius: 0.5rem;
|
||||
--theme-primary: hsl(var(--primary));
|
||||
--color-blue: 210 47% 56%;
|
||||
--color-teal: 159 32% 43%;
|
||||
--color-red-tint: 0 62% 95%;
|
||||
--color-blue-tint: 208 54% 93%;
|
||||
--color-teal-tint: 157 35% 91%;
|
||||
--color-avatar: 102 21% 52%;
|
||||
--event-call: 160 84% 39%;
|
||||
--event-follow_up: 38 92% 48%;
|
||||
--event-website_creation: 263 70% 50%;
|
||||
@@ -728,3 +736,4 @@ main {
|
||||
.checkbox-text { color: rgba(232,232,239,0.38); }
|
||||
.footer-text { color: rgba(232,232,239,0.2); }
|
||||
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ interface Props {
|
||||
|
||||
function ErrorPage({ message }: { message: string }) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#CC0000]/10 to-[#990000]/10 p-4">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-8 w-full max-w-md border border-[#E0E0E0] dark:border-[#CC0000]/20 shadow-lg text-center">
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-3">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#C84B4B]/10 to-[#C84B4B]/10 p-4">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-8 w-full max-w-md border border-[#D4D8CC] dark:border-[#CC0000]/20 shadow-lg text-center">
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-3">
|
||||
{message}
|
||||
</h1>
|
||||
</div>
|
||||
@@ -42,24 +42,24 @@ export default async function JoinPage({ params }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#CC0000]/10 to-[#990000]/10 p-4">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-8 w-full max-w-md border border-[#E0E0E0] dark:border-[#CC0000]/20 shadow-lg text-center">
|
||||
<h1 className="text-2xl font-bold text-[#111111] dark:text-white mb-3">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#C84B4B]/10 to-[#C84B4B]/10 p-4">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-8 w-full max-w-md border border-[#D4D8CC] dark:border-[#CC0000]/20 shadow-lg text-center">
|
||||
<h1 className="text-2xl font-bold text-[#2D3020] dark:text-white mb-3">
|
||||
You're Invited!
|
||||
</h1>
|
||||
<p className="text-[#888888] text-sm mb-6">
|
||||
<p className="text-[#8A9078] text-sm mb-6">
|
||||
Someone wants to connect with you on our platform.
|
||||
</p>
|
||||
<div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-xl p-4 mb-6 text-left">
|
||||
<p className="text-xs text-[#888888] mb-1">Contact Number</p>
|
||||
<p className="text-sm font-medium text-[#111111] dark:text-white">{invite.phone}</p>
|
||||
<div className="bg-[#FAFAF6] dark:bg-[#1A1A1A] rounded-xl p-4 mb-6 text-left">
|
||||
<p className="text-xs text-[#8A9078] mb-1">Contact Number</p>
|
||||
<p className="text-sm font-medium text-[#2D3020] dark:text-white">{invite.phone}</p>
|
||||
</div>
|
||||
<p className="text-xs text-[#888888] mb-6">
|
||||
<p className="text-xs text-[#8A9078] mb-6">
|
||||
Create an account to start making free voice calls to this person and others on the platform.
|
||||
</p>
|
||||
<a
|
||||
href="/register"
|
||||
className="block w-full bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-3 transition-all duration-200"
|
||||
className="block w-full bg-[#C84B4B] hover:bg-[#C84B4B]/80 dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-3 transition-all duration-200"
|
||||
>
|
||||
Create Account
|
||||
</a>
|
||||
|
||||
+2
-1
@@ -4,6 +4,7 @@ import { ThemeProvider } from "@/providers/theme-provider"
|
||||
import { WebsiteThemeProvider } from "@/providers/website-theme-provider"
|
||||
import { Toaster } from "@/components/ui/sonner"
|
||||
import "./globals.css"
|
||||
import "../../Web_Backgrounds/default-theme.css"
|
||||
import "../../Web_Backgrounds/spidey-theme.css"
|
||||
|
||||
const inter = Inter({
|
||||
@@ -32,7 +33,7 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`${inter.variable} min-h-screen antialiased`}>
|
||||
<ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
|
||||
<ThemeProvider attribute="class" defaultTheme="light" disableTransitionOnChange>
|
||||
<WebsiteThemeProvider>
|
||||
{children}
|
||||
<Toaster />
|
||||
|
||||
@@ -4,6 +4,8 @@ import { useState, useEffect, useRef, Suspense } from "react"
|
||||
import { useSearchParams, useRouter } from "next/navigation"
|
||||
import { Eye, EyeOff, Loader2 } from "lucide-react"
|
||||
|
||||
const WEBSITE_THEME_KEY = "crm-website-theme"
|
||||
|
||||
const waves = [
|
||||
{ a: 16, f: 0.011, s: 0.018, y: 0.38, fill: "rgba(27,176,206,0.18)" },
|
||||
{ a: 20, f: 0.008, s: 0.013, y: 0.52, fill: "rgba(27,176,206,0.25)" },
|
||||
@@ -237,6 +239,9 @@ function LoginForm() {
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
localStorage.removeItem(WEBSITE_THEME_KEY)
|
||||
const root = document.documentElement
|
||||
root.className = root.className.split(" ").filter((c) => !c.startsWith("theme-")).join(" ").trim()
|
||||
const redirectTo = searchParams.get("redirect") || "/dashboard"
|
||||
router.push(redirectTo)
|
||||
} else {
|
||||
|
||||
+236
-171
@@ -1,18 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef, useEffect, Fragment } from "react"
|
||||
import { Send, Bot, User, AlertCircle, Terminal, Sparkles, Lightbulb, Target, MessageSquare } from "lucide-react"
|
||||
import { useState, useRef, useEffect, Fragment, forwardRef, useImperativeHandle, useCallback } from "react"
|
||||
import { Send, Bot, User, AlertCircle, Sparkles, Lightbulb, Target, MessageSquare, Terminal } from "lucide-react"
|
||||
import { GifPicker } from "./gif-picker"
|
||||
|
||||
function linkifyText(text: string) {
|
||||
const urlRegex = /(https?:\/\/[^\s<]+[^\s<.,;:!?)\]}>])/
|
||||
const parts = text.split(urlRegex)
|
||||
return parts.map((part, i) => {
|
||||
if (part.startsWith("http://") || part.startsWith("https://")) {
|
||||
return (
|
||||
<a key={i} href={part} target="_blank" rel="noopener noreferrer" className="underline text-[#1BB0CE] hover:text-[#1BB0CE]/80">
|
||||
{part}
|
||||
</a>
|
||||
)
|
||||
return <a key={i} href={part} target="_blank" rel="noopener noreferrer" className="underline text-primary hover:text-primary/80">{part}</a>
|
||||
}
|
||||
return <Fragment key={i}>{part}</Fragment>
|
||||
})
|
||||
@@ -33,20 +30,44 @@ function formatContent(text: string) {
|
||||
if (last < text.length) {
|
||||
blocks.push({ type: "text", content: text.slice(last) })
|
||||
}
|
||||
return blocks.length ? blocks : [{ type: "text" as const, content: text }]
|
||||
if (blocks.length) return blocks
|
||||
return [{ type: "text" as const, content: text }]
|
||||
}
|
||||
|
||||
function formatBullets(text: string) {
|
||||
const lines = text.split("\n")
|
||||
return lines.map((line, i) => {
|
||||
const trimmed = line.trim()
|
||||
if (trimmed.startsWith("•") || trimmed.startsWith("-")) {
|
||||
const content = trimmed.replace(/^[•\-]\s*/, "")
|
||||
return (
|
||||
<div key={i} className="flex items-start gap-2.5 my-1.5">
|
||||
<span className="w-1.5 h-1.5 bg-primary rounded-sm inline-block mt-2 flex-shrink-0" />
|
||||
<span>{linkifyText(content)}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (line === "") return <div key={i} className="h-2" />
|
||||
return <p key={i} className="my-1">{linkifyText(line)}</p>
|
||||
})
|
||||
}
|
||||
|
||||
interface ChatMessage {
|
||||
role: "user" | "assistant"
|
||||
content: string
|
||||
gif?: {
|
||||
url: string
|
||||
previewUrl: string
|
||||
title: string
|
||||
}
|
||||
}
|
||||
|
||||
function TypingDots() {
|
||||
return (
|
||||
<div className="flex gap-1.5 items-center h-6 px-1">
|
||||
<span className="h-2 w-2 rounded-full bg-[#1BB0CE]/60 animate-bounce" style={{ animationDelay: "0ms" }} />
|
||||
<span className="h-2 w-2 rounded-full bg-[#1BB0CE]/60 animate-bounce" style={{ animationDelay: "150ms" }} />
|
||||
<span className="h-2 w-2 rounded-full bg-[#1BB0CE]/60 animate-bounce" style={{ animationDelay: "300ms" }} />
|
||||
<span className="h-2 w-2 rounded-full bg-primary/60 animate-bounce" style={{ animationDelay: "0ms" }} />
|
||||
<span className="h-2 w-2 rounded-full bg-primary/60 animate-bounce" style={{ animationDelay: "150ms" }} />
|
||||
<span className="h-2 w-2 rounded-full bg-primary/60 animate-bounce" style={{ animationDelay: "300ms" }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -58,34 +79,83 @@ const suggestions = [
|
||||
{ icon: MessageSquare, label: "Objections", query: "How do I handle common objections?" },
|
||||
]
|
||||
|
||||
export function AIChat() {
|
||||
interface AIChatProps {
|
||||
onMessageSent?: (msg: string) => void
|
||||
}
|
||||
|
||||
export const AIChat = forwardRef<{ fillInput: (text: string) => void }, AIChatProps>(({ onMessageSent }, ref) => {
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([])
|
||||
const [input, setInput] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
const [bootState, setBootState] = useState<"booting" | "ready" | "error">("booting")
|
||||
const [showGifPicker, setShowGifPicker] = useState(false)
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null)
|
||||
const chatContainerRef = useRef<HTMLDivElement>(null)
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const hasUserMessage = messages.some(m => m.role === "user")
|
||||
const loadedFromStorage = useRef(false)
|
||||
|
||||
const checkServer = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/ai/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: "ping" }),
|
||||
})
|
||||
if (res.status !== 503) {
|
||||
setBootState("ready")
|
||||
} else {
|
||||
setTimeout(checkServer, 2000)
|
||||
useImperativeHandle(ref, () => ({
|
||||
fillInput(text: string) {
|
||||
setInput(text)
|
||||
setTimeout(() => textareaRef.current?.focus(), 50)
|
||||
},
|
||||
}), [])
|
||||
|
||||
const handleGifSelect = useCallback((gif: { url: string; previewUrl: string; title: string }) => {
|
||||
setMessages((prev) => [...prev, { role: "user", content: gif.title || "Sent a GIF", gif }])
|
||||
setShowGifPicker(false)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (showGifPicker) {
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setShowGifPicker(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handler)
|
||||
return () => document.removeEventListener("mousedown", handler)
|
||||
}
|
||||
}, [showGifPicker])
|
||||
|
||||
useEffect(() => {
|
||||
const saved = localStorage.getItem("ai-chat-messages")
|
||||
if (saved) {
|
||||
try {
|
||||
const parsed = JSON.parse(saved)
|
||||
if (Array.isArray(parsed) && parsed.length > 0) {
|
||||
setMessages(parsed)
|
||||
loadedFromStorage.current = true
|
||||
}
|
||||
} catch {}
|
||||
} else {
|
||||
loadedFromStorage.current = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (messages.length > 0) {
|
||||
localStorage.setItem("ai-chat-messages", JSON.stringify(messages))
|
||||
}
|
||||
}, [messages])
|
||||
|
||||
const checkServer = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/ai/health")
|
||||
if (res.ok) {
|
||||
setBootState("ready")
|
||||
return
|
||||
}
|
||||
setTimeout(checkServer, 2000)
|
||||
} catch {
|
||||
setTimeout(checkServer, 2000)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (loadedFromStorage.current) return
|
||||
fetch("/api/ai/jobs")
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
@@ -115,25 +185,26 @@ export function AIChat() {
|
||||
])
|
||||
})
|
||||
checkServer()
|
||||
}, [])
|
||||
}, [checkServer])
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
|
||||
}, [messages])
|
||||
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.style.height = "auto"
|
||||
inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = "auto"
|
||||
textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`
|
||||
}
|
||||
}, [input])
|
||||
|
||||
const sendMessage = async (text?: string) => {
|
||||
const sendMessage = useCallback(async (text?: string) => {
|
||||
const msg = (text || input).trim()
|
||||
if (!msg || loading) return
|
||||
|
||||
setInput("")
|
||||
setError("")
|
||||
onMessageSent?.(msg)
|
||||
setMessages((prev) => [...prev, { role: "user", content: msg }])
|
||||
setLoading(true)
|
||||
|
||||
@@ -161,132 +232,137 @@ export function AIChat() {
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
}, [input, loading, onMessageSent])
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
sendMessage()
|
||||
}
|
||||
}
|
||||
}, [sendMessage])
|
||||
|
||||
const bootOverlay = (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<style>{`
|
||||
@keyframes walk {
|
||||
0%, 100% { transform: translateX(0) translateY(0); }
|
||||
25% { transform: translateX(12px) translateY(-4px); }
|
||||
50% { transform: translateX(24px) translateY(0); }
|
||||
75% { transform: translateX(12px) translateY(-4px); }
|
||||
}
|
||||
@keyframes legLeft {
|
||||
0%, 100% { transform: rotate(-10deg); }
|
||||
50% { transform: rotate(10deg); }
|
||||
}
|
||||
@keyframes legRight {
|
||||
0%, 100% { transform: rotate(10deg); }
|
||||
50% { transform: rotate(-10deg); }
|
||||
}
|
||||
@keyframes armLeft {
|
||||
0%, 100% { transform: rotate(15deg); }
|
||||
50% { transform: rotate(-15deg); }
|
||||
}
|
||||
@keyframes armRight {
|
||||
0%, 100% { transform: rotate(-15deg); }
|
||||
50% { transform: rotate(15deg); }
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 45%, 55%, 100% { height: 4px; }
|
||||
50% { height: 1px; }
|
||||
}
|
||||
.robot-walk { animation: walk 0.6s ease-in-out infinite; }
|
||||
.robot-leg-l { transform-origin: top center; animation: legLeft 0.3s ease-in-out infinite; }
|
||||
.robot-leg-r { transform-origin: top center; animation: legRight 0.3s ease-in-out infinite; }
|
||||
.robot-arm-l { transform-origin: top center; animation: armLeft 0.3s ease-in-out infinite; }
|
||||
.robot-arm-r { transform-origin: top center; animation: armRight 0.3s ease-in-out infinite; }
|
||||
.robot-eye { animation: blink 2s ease-in-out infinite; }
|
||||
`}</style>
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="h-[60px] w-[120px] bg-[#1a1a24] border border-[#2a2a35] rounded-xl flex items-center justify-center overflow-hidden shadow-lg shadow-black/20">
|
||||
<div className="robot-walk relative">
|
||||
<svg width="44" height="40" viewBox="0 0 40 36" fill="none">
|
||||
<rect x="10" y="2" width="20" height="16" rx="3" fill="#1BB0CE" opacity="0.9"/>
|
||||
<rect x="6" y="6" width="6" height="2" rx="1" className="robot-arm-l" fill="#1BB0CE" opacity="0.7"/>
|
||||
<rect x="28" y="6" width="6" height="2" rx="1" className="robot-arm-r" fill="#1BB0CE" opacity="0.7"/>
|
||||
<rect x="14" y="5" width="4" height="4" rx="1" fill="#0d1117"/>
|
||||
<rect x="22" y="5" width="4" height="4" rx="1" fill="#0d1117"/>
|
||||
<circle cx="16" cy="7" r="1.5" className="robot-eye" fill="#1BB0CE"/>
|
||||
<circle cx="24" cy="7" r="1.5" className="robot-eye" fill="#1BB0CE"/>
|
||||
<rect x="17" y="10" width="6" height="2" rx="1" fill="#0d1117"/>
|
||||
<rect x="12" y="18" width="5" height="10" rx="2" className="robot-leg-l" fill="#1BB0CE" opacity="0.8"/>
|
||||
<rect x="23" y="18" width="5" height="10" rx="2" className="robot-leg-r" fill="#1BB0CE" opacity="0.8"/>
|
||||
</svg>
|
||||
const handleTextareaInput = useCallback((e: React.FormEvent<HTMLTextAreaElement>) => {
|
||||
const t = e.target as HTMLTextAreaElement
|
||||
t.style.height = "auto"
|
||||
t.style.height = t.scrollHeight + "px"
|
||||
}, [])
|
||||
|
||||
if (bootState === "booting") {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<style>{`
|
||||
@keyframes walk {
|
||||
0%, 100% { transform: translateX(0) translateY(0); }
|
||||
25% { transform: translateX(12px) translateY(-4px); }
|
||||
50% { transform: translateX(24px) translateY(0); }
|
||||
75% { transform: translateX(12px) translateY(-4px); }
|
||||
}
|
||||
@keyframes legLeft {
|
||||
0%, 100% { transform: rotate(-10deg); }
|
||||
50% { transform: rotate(10deg); }
|
||||
}
|
||||
@keyframes legRight {
|
||||
0%, 100% { transform: rotate(10deg); }
|
||||
50% { transform: rotate(-10deg); }
|
||||
}
|
||||
@keyframes armLeft {
|
||||
0%, 100% { transform: rotate(15deg); }
|
||||
50% { transform: rotate(-15deg); }
|
||||
}
|
||||
@keyframes armRight {
|
||||
0%, 100% { transform: rotate(-15deg); }
|
||||
50% { transform: rotate(15deg); }
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 45%, 55%, 100% { height: 4px; }
|
||||
50% { height: 1px; }
|
||||
}
|
||||
.robot-walk { animation: walk 0.6s ease-in-out infinite; }
|
||||
.robot-leg-l { transform-origin: top center; animation: legLeft 0.3s ease-in-out infinite; }
|
||||
.robot-leg-r { transform-origin: top center; animation: legRight 0.3s ease-in-out infinite; }
|
||||
.robot-arm-l { transform-origin: top center; animation: armLeft 0.3s ease-in-out infinite; }
|
||||
.robot-arm-r { transform-origin: top center; animation: armRight 0.3s ease-in-out infinite; }
|
||||
.robot-eye { animation: blink 2s ease-in-out infinite; }
|
||||
`}</style>
|
||||
<div className="flex flex-col items-center gap-5">
|
||||
<p className="text-sm text-muted-foreground animate-pulse">Servers booting...</p>
|
||||
<div className="h-[56px] w-[110px] bg-card border border-border rounded-xl flex items-center justify-center overflow-hidden">
|
||||
<div className="robot-walk relative">
|
||||
<svg width="40" height="36" viewBox="0 0 40 36" fill="none">
|
||||
<rect x="10" y="2" width="20" height="16" rx="3" fill="hsl(var(--primary))" opacity="0.9"/>
|
||||
<rect x="6" y="6" width="6" height="2" rx="1" className="robot-arm-l" fill="hsl(var(--primary))" opacity="0.7"/>
|
||||
<rect x="28" y="6" width="6" height="2" rx="1" className="robot-arm-r" fill="hsl(var(--primary))" opacity="0.7"/>
|
||||
<rect x="14" y="5" width="4" height="4" rx="1" style={{fill: "hsl(var(--background))"}}/>
|
||||
<rect x="22" y="5" width="4" height="4" rx="1" style={{fill: "hsl(var(--background))"}}/>
|
||||
<circle cx="16" cy="7" r="1.5" className="robot-eye" fill="hsl(var(--primary))"/>
|
||||
<circle cx="24" cy="7" r="1.5" className="robot-eye" fill="hsl(var(--primary))"/>
|
||||
<rect x="17" y="10" width="6" height="2" rx="1" style={{fill: "hsl(var(--background))"}}/>
|
||||
<rect x="12" y="18" width="5" height="10" rx="2" className="robot-leg-l" fill="hsl(var(--primary))" opacity="0.8"/>
|
||||
<rect x="23" y="18" width="5" height="10" rx="2" className="robot-leg-r" fill="hsl(var(--primary))" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-sm font-medium text-[#c8c8d0]">Waking up the AI...</p>
|
||||
<p className="text-xs text-[#6a6a75]">Loading model — this takes about a minute on first run</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const hasMessages = messages.length > 0
|
||||
|
||||
let mainArea: React.ReactNode
|
||||
if (bootState === "booting") {
|
||||
mainArea = bootOverlay
|
||||
} else if (hasMessages) {
|
||||
mainArea = (
|
||||
<div ref={chatContainerRef} className="flex-1 overflow-y-auto scrollbar-thin min-h-0">
|
||||
<div className="p-4 space-y-4">
|
||||
{messages.map((msg, i) => {
|
||||
const isUser = msg.role === "user"
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex gap-3 ${isUser ? "justify-end" : "justify-start"} animate-in fade-in slide-in-from-bottom-2 duration-300`}
|
||||
>
|
||||
{!isUser && (
|
||||
<div className="h-8 w-8 rounded-full bg-[#1BB0CE]/20 flex items-center justify-center flex-none shadow-sm shadow-[#1BB0CE]/10">
|
||||
<Bot className="h-4 w-4 text-[#1BB0CE]" />
|
||||
return (
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
<div className="flex-1 overflow-y-auto px-4 py-6" style={{ backgroundImage: "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)", backgroundSize: "24px 24px" }}>
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
{messages.map((msg, i) => (
|
||||
<div key={i}>
|
||||
{msg.role === "assistant" ? (
|
||||
<div className="flex gap-3 items-start">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-primary flex items-center justify-center text-white text-sm flex-shrink-0">
|
||||
<Bot className="h-4 w-4" />
|
||||
</div>
|
||||
)}
|
||||
<div className={`max-w-[80%] space-y-2 ${
|
||||
isUser ? "items-end" : "items-start"
|
||||
}`}>
|
||||
<div
|
||||
className={`rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap break-words ${
|
||||
isUser
|
||||
? "bg-[#1BB0CE] text-white rounded-br-md shadow-md shadow-[#1BB0CE]/20"
|
||||
: "bg-[#1a1a24] text-[#c8c8d0] border border-[#2a2a35] rounded-bl-md shadow-sm"
|
||||
}`}
|
||||
>
|
||||
{formatContent(msg.content).map((block, bi) =>
|
||||
block.type === "code" ? (
|
||||
<pre key={bi} className="my-1.5 p-3 rounded-lg bg-[#0d1117] border border-[#2a2a35] overflow-x-auto text-xs font-mono text-[#e8e8ef] leading-relaxed">
|
||||
<code>{block.content}</code>
|
||||
</pre>
|
||||
) : (
|
||||
<span key={bi}>{linkifyText(block.content)}</span>
|
||||
)
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="bg-card rounded-2xl rounded-tl-sm border border-border border-l-2 border-l-primary px-5 py-4 max-w-[85%]">
|
||||
<div className="text-foreground text-sm leading-7 whitespace-pre-wrap">
|
||||
{formatContent(msg.content).map((block, bi) =>
|
||||
block.type === "code" ? (
|
||||
<pre key={bi} className="my-1.5 p-3 rounded-lg bg-muted border border-border overflow-x-auto text-xs font-mono leading-relaxed">
|
||||
<code>{block.content}</code>
|
||||
</pre>
|
||||
) : (
|
||||
<span key={bi}>{formatBullets(block.content)}</span>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-[10px] mt-1">AI Assistant</div>
|
||||
</div>
|
||||
</div>
|
||||
{isUser && (
|
||||
<div className="h-8 w-8 rounded-full bg-[#1BB0CE] flex items-center justify-center flex-none shadow-md shadow-[#1BB0CE]/30">
|
||||
<User className="h-4 w-4 text-white" />
|
||||
) : (
|
||||
<div className="flex gap-3 items-start flex-row-reverse">
|
||||
<div className="flex-1 min-w-0 flex justify-end">
|
||||
<div className="bg-gradient-to-br from-primary to-primary rounded-2xl rounded-tr-sm px-5 py-4 max-w-[75%]">
|
||||
{msg.gif ? (
|
||||
<img
|
||||
src={msg.gif.url}
|
||||
alt={msg.gif.title || "GIF"}
|
||||
className="w-full rounded-lg max-h-64 object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-white text-sm leading-7 whitespace-pre-wrap">{msg.content}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{loading && (
|
||||
<div className="flex gap-3 justify-start animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||
<div className="h-8 w-8 rounded-full bg-[#1BB0CE]/20 flex items-center justify-center flex-none shadow-sm shadow-[#1BB0CE]/10">
|
||||
<Bot className="h-4 w-4 text-[#1BB0CE]" />
|
||||
<div className="flex gap-3 items-start">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-primary flex items-center justify-center text-white text-sm flex-shrink-0">
|
||||
<Bot className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="rounded-2xl px-4 py-3 bg-[#1a1a24] border border-[#2a2a35] rounded-bl-md shadow-sm">
|
||||
<div className="bg-card rounded-2xl rounded-tl-sm border border-border border-l-2 border-l-primary px-5 py-4 inline-flex items-center gap-1.5">
|
||||
<TypingDots />
|
||||
</div>
|
||||
</div>
|
||||
@@ -294,37 +370,17 @@ export function AIChat() {
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
mainArea = (
|
||||
<div className="flex-1 flex items-center justify-center px-8">
|
||||
<div className="text-center space-y-6 max-w-sm">
|
||||
<div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-[#1BB0CE]/20 to-[#1BB0CE]/5 mx-auto flex items-center justify-center shadow-lg shadow-[#1BB0CE]/10 border border-[#1BB0CE]/10">
|
||||
<Sparkles className="h-8 w-8 text-[#1BB0CE]" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold text-[#e8e8ef]">AI Sales Assistant</h2>
|
||||
<p className="text-sm text-[#6a6a75]">Ask me anything about sales strategies, outreach, and prospect targeting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{mainArea}
|
||||
{bootState !== "booting" && (
|
||||
<div className="border-t border-[#2a2a35] bg-[#0d1117]/50 backdrop-blur-sm p-4 space-y-3">
|
||||
<div className="sticky bottom-0 bg-background/95 backdrop-blur-md px-4 py-4">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{!hasMessages && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
{suggestions.map((s, i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
onClick={() => sendMessage(s.query)}
|
||||
disabled={loading}
|
||||
className="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full bg-[#1a1a24] border border-[#2a2a35] text-[#8a8a95] hover:text-[#1BB0CE] hover:border-[#1BB0CE]/30 hover:bg-[#1BB0CE]/5 transition-all disabled:opacity-40"
|
||||
className="inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full bg-muted/50 border border-border text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/5 transition-all disabled:opacity-40"
|
||||
>
|
||||
<s.icon className="h-3 w-3" />
|
||||
{s.label}
|
||||
@@ -334,33 +390,42 @@ export function AIChat() {
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-400 flex items-center gap-1.5 bg-red-400/5 border border-red-400/10 rounded-lg px-3 py-2">
|
||||
<div className="mb-2.5 text-xs text-red-400 flex items-center gap-1.5 bg-red-400/5 border border-red-400/10 rounded-lg px-3 py-2">
|
||||
<AlertCircle className="h-3 w-3 flex-none" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 items-end">
|
||||
<div className="bg-card rounded-2xl border border-border focus-within:border-primary/40 focus-within:shadow-[0_0_20px_hsl(var(--primary)_/_0.08)] transition-all duration-200 flex items-end gap-3 px-4 py-3 relative" ref={containerRef}>
|
||||
<button type="button" className="w-8 h-8 rounded-lg text-muted-foreground hover:text-primary hover:bg-muted/50 flex items-center justify-center transition-colors duration-200 flex-shrink-0 text-[11px] font-semibold tracking-wide" onClick={() => setShowGifPicker((v) => !v)}>GIF</button>
|
||||
{showGifPicker && <GifPicker onSelect={handleGifSelect} onClose={() => setShowGifPicker(false)} />}
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onInput={handleTextareaInput}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Ask for sales tips..."
|
||||
rows={1}
|
||||
className="flex-1 bg-[#1a1a24] border border-[#2a2a35] rounded-xl px-4 py-2.5 text-sm text-[#e8e8ef] placeholder-[#6a6a75] resize-none outline-none focus:border-[#1BB0CE]/50 focus:ring-1 focus:ring-[#1BB0CE]/20 transition-all"
|
||||
className="bg-transparent flex-1 text-foreground text-sm placeholder-muted-foreground resize-none outline-none min-h-[24px] max-h-[200px] overflow-y-auto leading-6"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => sendMessage()}
|
||||
disabled={loading || !input.trim()}
|
||||
className="h-10 w-10 rounded-xl bg-[#1BB0CE] hover:bg-[#1BB0CE]/80 disabled:opacity-40 flex items-center justify-center flex-none transition-all active:scale-95 shadow-md shadow-[#1BB0CE]/20"
|
||||
disabled={!input.trim()}
|
||||
className={`w-9 h-9 rounded-xl flex-shrink-0 bg-gradient-to-br from-primary to-primary flex items-center justify-center text-white transition-all duration-200 ${input.trim() ? "hover:shadow-[0_0_20px_hsl(var(--primary)_/_0.4)] hover:scale-105 active:scale-95" : "opacity-40 cursor-not-allowed"}`}
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-2 px-1">
|
||||
<span className="text-muted-foreground text-[10px]">Shift + Enter for new line</span>
|
||||
<span className="text-muted-foreground text-[10px]">{input.length} / 2000</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
AIChat.displayName = "AIChat"
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef, useEffect, useCallback } from "react"
|
||||
import { Search, Loader2, ImageIcon } from "lucide-react"
|
||||
|
||||
interface GifResult {
|
||||
id: string
|
||||
title: string
|
||||
url: string
|
||||
previewUrl: string
|
||||
previewHeight: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
interface GifPickerProps {
|
||||
onSelect: (gif: { url: string; previewUrl: string; title: string }) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const SEARCH_CACHE = new Map<string, GifResult[]>()
|
||||
|
||||
export function GifPicker({ onSelect, onClose }: GifPickerProps) {
|
||||
const [gifs, setGifs] = useState<GifResult[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
const [search, setSearch] = useState("")
|
||||
const [offset, setOffset] = useState(0)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [error, setError] = useState("")
|
||||
const sentinelRef = useRef<HTMLDivElement>(null)
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
|
||||
|
||||
const fetchGifs = useCallback(async (q: string, off: number, append: boolean) => {
|
||||
if (off === 0) {
|
||||
const cacheKey = q || "__trending__"
|
||||
const cached = SEARCH_CACHE.get(cacheKey)
|
||||
if (cached) {
|
||||
setGifs(cached)
|
||||
setLoading(false)
|
||||
setHasMore(true)
|
||||
setOffset(cached.length)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
if (!append) setLoading(true)
|
||||
else setLoadingMore(true)
|
||||
setError("")
|
||||
|
||||
const params = new URLSearchParams()
|
||||
if (q) {
|
||||
params.set("type", "search")
|
||||
params.set("q", q)
|
||||
}
|
||||
params.set("offset", String(off))
|
||||
params.set("limit", "20")
|
||||
|
||||
const res = await fetch(`/api/ai/giphy?${params}`)
|
||||
if (!res.ok) {
|
||||
const data = await res.json()
|
||||
throw new Error(data.error || "Failed to fetch GIFs")
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
const newGifs: GifResult[] = data.gifs || []
|
||||
|
||||
if (append) {
|
||||
setGifs((prev) => [...prev, ...newGifs])
|
||||
} else {
|
||||
setGifs(newGifs)
|
||||
if (off === 0 && !q) {
|
||||
SEARCH_CACHE.set("__trending__", newGifs)
|
||||
}
|
||||
if (q) {
|
||||
SEARCH_CACHE.set(q, newGifs)
|
||||
}
|
||||
}
|
||||
|
||||
setOffset(off + newGifs.length)
|
||||
setHasMore(newGifs.length === 20)
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Failed to load GIFs")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoadingMore(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchGifs("", 0, false)
|
||||
}, [fetchGifs])
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current)
|
||||
if (!search.trim()) {
|
||||
fetchGifs("", 0, false)
|
||||
return
|
||||
}
|
||||
searchTimeoutRef.current = setTimeout(() => {
|
||||
fetchGifs(search.trim(), 0, false)
|
||||
}, 400)
|
||||
return () => {
|
||||
if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current)
|
||||
}
|
||||
}, [search, fetchGifs])
|
||||
|
||||
useEffect(() => {
|
||||
const sentinel = sentinelRef.current
|
||||
if (!sentinel) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
|
||||
fetchGifs(search.trim(), offset, true)
|
||||
}
|
||||
},
|
||||
{ rootMargin: "200px" }
|
||||
)
|
||||
|
||||
observer.observe(sentinel)
|
||||
return () => observer.disconnect()
|
||||
}, [hasMore, loadingMore, loading, offset, search, fetchGifs])
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-full left-0 right-0 mb-2 bg-card border border-border rounded-2xl shadow-xl shadow-black/20 overflow-hidden z-50">
|
||||
<div className="p-3 border-b border-border">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search GIFs..."
|
||||
className="w-full bg-muted/50 text-foreground text-sm rounded-xl pl-9 pr-4 py-2.5 outline-none focus:ring-2 focus:ring-primary/30 placeholder:text-muted-foreground/60"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto" style={{ maxHeight: "360px" }}>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-primary" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 px-4 text-center">
|
||||
<ImageIcon className="h-8 w-8 text-muted-foreground mb-2" />
|
||||
<p className="text-sm text-muted-foreground">{error}</p>
|
||||
</div>
|
||||
) : gifs.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 px-4 text-center">
|
||||
<ImageIcon className="h-8 w-8 text-muted-foreground mb-2" />
|
||||
<p className="text-sm text-muted-foreground">No GIFs found.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-2 p-3">
|
||||
{gifs.map((gif) => (
|
||||
<button
|
||||
key={gif.id}
|
||||
type="button"
|
||||
onClick={() => onSelect({ url: gif.url, previewUrl: gif.previewUrl, title: gif.title })}
|
||||
className="relative rounded-xl overflow-hidden bg-muted/30 hover:ring-2 hover:ring-primary/50 transition-all duration-200 aspect-video"
|
||||
title={gif.title}
|
||||
>
|
||||
<img
|
||||
src={gif.previewUrl}
|
||||
alt={gif.title || "GIF"}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{loadingMore && (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-primary" />
|
||||
</div>
|
||||
)}
|
||||
{hasMore && <div ref={sentinelRef} className="h-4" />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -39,32 +39,32 @@ export function JobSelector({ onSelect }: JobSelectorProps) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="w-full flex items-center gap-2 bg-[#1a1a24] border border-[#2a2a35] rounded-lg px-3 py-2 text-sm text-[#e8e8ef] hover:border-[#1BB0CE]/50 transition-colors"
|
||||
className="w-full flex items-center gap-2.5 bg-[#1a1d2e] border border-[#ffffff0f] hover:border-primary/30 rounded-xl px-4 py-3 text-sm text-[#9ca3af] hover:text-[#e5e7eb] transition-all duration-200"
|
||||
>
|
||||
<Briefcase className="h-4 w-4 text-[#1BB0CE] flex-none" />
|
||||
<Briefcase className="h-4 w-4 text-primary flex-none" />
|
||||
<span className="flex-1 text-left truncate">
|
||||
{selected ? selected.job_title : loading ? "Loading jobs..." : "Select a job category"}
|
||||
</span>
|
||||
{loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <ChevronDown className="h-3.5 w-3.5 text-[#6a6a75]" />}
|
||||
{loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" /> : <ChevronDown className={`h-3.5 w-3.5 text-[#4b5563] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
|
||||
<div className="absolute top-full left-0 right-0 mt-1 z-20 bg-[#15151e] border border-[#2a2a35] rounded-lg shadow-xl max-h-60 overflow-y-auto">
|
||||
<div className="absolute top-full left-0 right-0 mt-1.5 z-20 bg-[#1a1d2e] border border-[#ffffff0f] rounded-xl shadow-xl shadow-black/40 max-h-60 overflow-y-auto">
|
||||
{jobs.map((job, i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
onClick={() => handleSelect(job)}
|
||||
className="w-full text-left px-3 py-2.5 text-sm text-[#c8c8d0] hover:bg-[#1a1a24] hover:text-[#e8e8ef] transition-colors border-b border-[#1a1a24] last:border-0"
|
||||
className="w-full text-left px-4 py-3 text-sm text-[#9ca3af] hover:bg-[#1f2437] hover:text-[#e5e7eb] transition-all duration-150 border-b border-[#ffffff08] last:border-0 border-l-2 border-l-transparent hover:border-l-primary/40"
|
||||
>
|
||||
<div className="font-medium">{job.job_title}</div>
|
||||
<div className="text-xs text-[#6a6a75] mt-0.5">{job.industry} — {job.description}</div>
|
||||
<div className="text-xs text-[#4b5563] mt-0.5">{job.industry} — {job.description}</div>
|
||||
</button>
|
||||
))}
|
||||
{jobs.length === 0 && !loading && (
|
||||
<div className="px-3 py-4 text-xs text-[#6a6a75] text-center">No job categories loaded</div>
|
||||
<div className="px-4 py-4 text-xs text-[#4b5563] text-center">No job categories loaded</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -57,7 +57,13 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
|
||||
return () => document.removeEventListener("mousedown", handleClick)
|
||||
}, [onClose])
|
||||
|
||||
useEffect(() => { setRecentGifs(getRecent(RECENT_GIFS_KEY)) }, [])
|
||||
useEffect(() => {
|
||||
setRecentGifs(getRecent(RECENT_GIFS_KEY))
|
||||
if (!navigator.onLine) {
|
||||
console.warn("[GIF Picker] Browser is offline — GIF service may be unavailable")
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { setRecentStickers(getRecent(RECENT_STICKERS_KEY)) }, [])
|
||||
|
||||
const fetchGifs = useCallback(async (query: string, pos = "") => {
|
||||
@@ -76,6 +82,7 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
|
||||
const res = await fetch(`/api/gifs?${params}`)
|
||||
const data = await res.json()
|
||||
if (data.noKey) {
|
||||
console.error("[GIF Picker] GIPHY_API_KEY is not configured on the server. Add GIPHY_API_KEY to .env.local and restart the dev server.")
|
||||
setGifUnavailable(true)
|
||||
setGifResults([])
|
||||
} else if (data.results) {
|
||||
@@ -103,6 +110,15 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
|
||||
return () => { if (searchTimer.current) clearTimeout(searchTimer.current) }
|
||||
}, [tab, gifQuery, fetchGifs])
|
||||
|
||||
useEffect(() => {
|
||||
if (tab !== "gif" || !gifError) return
|
||||
const interval = setInterval(() => {
|
||||
if (gifUnavailable) return
|
||||
fetchGifs(gifQuery.trim())
|
||||
}, 15000)
|
||||
return () => clearInterval(interval)
|
||||
}, [tab, gifError, gifUnavailable, gifQuery, fetchGifs])
|
||||
|
||||
const handleGifSelect = (gif: any) => {
|
||||
const content = JSON.stringify({ gif: gif.url, w: gif.width, h: gif.height })
|
||||
addRecent(RECENT_GIFS_KEY, gif.id)
|
||||
@@ -208,7 +224,7 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
|
||||
) : gifUnavailable ? (
|
||||
<div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-2">
|
||||
<Image className="h-8 w-8 opacity-40" />
|
||||
<span>GIFs are temporarily unavailable.</span>
|
||||
<span>GIF service not configured.</span>
|
||||
</div>
|
||||
) : gifError ? (
|
||||
<div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-2">
|
||||
|
||||
@@ -162,11 +162,11 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
|
||||
>
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-6 w-full max-w-md border border-[#E0E0E0] dark:border-[#CC0000]/20 shadow-[0_8px_40px_rgba(0,0,0,0.18)] relative">
|
||||
<div className="bg-white dark:bg-[#141414] rounded-2xl p-6 w-full max-w-md border border-[#D4D8CC] dark:border-[#CC0000]/20 shadow-[0_8px_40px_rgba(0,0,0,0.18)] relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 text-[#888888] hover:text-[#111111] dark:hover:text-white transition-colors"
|
||||
className="absolute top-4 right-4 text-[#8A9078] hover:text-[#2D3020] dark:hover:text-white transition-colors"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
@@ -174,27 +174,27 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
{callLink ? (
|
||||
shareSent ? (
|
||||
<>
|
||||
<p className="text-sm text-[#00AA00] font-semibold text-center mb-3">Call link copied.</p>
|
||||
<h2 className="font-bold text-lg text-[#111111] dark:text-white">Waiting for participant</h2>
|
||||
<p className="text-[#888888] text-sm mt-1 mb-4">
|
||||
<p className="text-sm text-[#4A9078] font-semibold text-center mb-3">Call link copied.</p>
|
||||
<h2 className="font-bold text-lg text-[#2D3020] dark:text-white">Waiting for participant</h2>
|
||||
<p className="text-[#8A9078] text-sm mt-1 mb-4">
|
||||
The recipient must receive and open the call link.
|
||||
</p>
|
||||
|
||||
<div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-xl p-3 mb-4 break-all text-xs text-[#111111] dark:text-white">
|
||||
<div className="bg-card dark:bg-[#1A1A1A] rounded-xl p-3 mb-4 break-all text-xs text-foreground dark:text-white">
|
||||
{callLink}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={copyLink}
|
||||
className="flex-1 flex items-center justify-center gap-2 bg-[#444444] hover:bg-[#555555] dark:bg-[#333333] dark:hover:bg-[#444444] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
|
||||
className="flex-1 flex items-center justify-center gap-2 bg-[#8A9078] hover:bg-[#8A9078]/80 dark:bg-[#333333] dark:hover:bg-[#444444] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
Copy URL
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShareSent(false); setShareError(null) }}
|
||||
className="flex-1 flex items-center justify-center gap-2 bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
|
||||
className="flex-1 flex items-center justify-center gap-2 bg-[#C84B4B] hover:bg-[#C84B4B]/80 dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
|
||||
>
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
WhatsApp
|
||||
@@ -205,24 +205,24 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
href={callLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full mt-4 bg-[#444444] hover:bg-[#555555] dark:bg-[#333333] dark:hover:bg-[#444444] text-white font-semibold text-sm rounded-xl py-2.5 text-center transition-all duration-200"
|
||||
className="block w-full mt-4 bg-muted-foreground hover:bg-muted-foreground/80 dark:bg-[#333333] dark:hover:bg-[#444444] text-white font-semibold text-sm rounded-xl py-2.5 text-center transition-all duration-200"
|
||||
>
|
||||
Open Call
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="font-bold text-lg text-[#111111] dark:text-white">Choose how to notify this person</h2>
|
||||
<p className="text-[#888888] text-sm mt-1 mb-4">
|
||||
<h2 className="font-bold text-lg text-[#2D3020] dark:text-white">Choose how to notify this person</h2>
|
||||
<p className="text-[#8A9078] text-sm mt-1 mb-4">
|
||||
Select a method to send the call link
|
||||
</p>
|
||||
|
||||
<div className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-xl p-3 mb-4 break-all text-xs text-[#111111] dark:text-white">
|
||||
<div className="bg-[#FAFAF6] dark:bg-[#1A1A1A] rounded-xl p-3 mb-4 break-all text-xs text-[#2D3020] dark:text-white">
|
||||
{callLink}
|
||||
</div>
|
||||
|
||||
{showWaUrl && (
|
||||
<div className="bg-[#1A1A1A] dark:bg-[#000000] rounded-xl p-2 mb-3 break-all text-[10px] text-[#00AA00] font-mono">
|
||||
<div className="bg-card dark:bg-[#000000] rounded-xl p-2 mb-3 break-all text-[10px] text-[#4A9078] font-mono">
|
||||
{showWaUrl}
|
||||
</div>
|
||||
)}
|
||||
@@ -237,7 +237,7 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
</button>
|
||||
<button
|
||||
onClick={copyLink}
|
||||
className="flex items-center justify-center gap-2 bg-[#444444] hover:bg-[#555555] dark:bg-[#333333] dark:hover:bg-[#444444] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
|
||||
className="flex items-center justify-center gap-2 bg-[#8A9078] hover:bg-[#8A9078]/80 dark:bg-[#333333] dark:hover:bg-[#444444] text-white font-semibold text-sm rounded-xl py-2.5 transition-all duration-200"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
Copy URL
|
||||
@@ -245,16 +245,16 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
</div>
|
||||
|
||||
{shareError && (
|
||||
<p className="text-[#CC0000] text-xs text-center">{shareError}</p>
|
||||
<p className="text-[#C84B4B] text-xs text-center">{shareError}</p>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<h2 className="font-bold text-lg text-[#111111] dark:text-white">Start a Call</h2>
|
||||
<p className="text-[#888888] text-sm mt-1 mb-5">Search contacts or dial a number</p>
|
||||
<h2 className="font-bold text-lg text-[#2D3020] dark:text-white">Start a Call</h2>
|
||||
<p className="text-[#8A9078] text-sm mt-1 mb-5">Search contacts or dial a number</p>
|
||||
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-[#888888] dark:text-[#666666] mb-2">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-[#8A9078] dark:text-[#666666] mb-2">
|
||||
CONTACTS
|
||||
</p>
|
||||
|
||||
@@ -262,25 +262,25 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search contacts..."
|
||||
className="bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E0E0E0] dark:border-[#333333] text-[#111111] dark:text-white placeholder-[#AAAAAA] dark:placeholder-[#555555] rounded-xl px-4 py-2.5 text-sm w-full mb-3 outline-none transition-colors focus:border-[#CC0000] dark:focus:border-[#FF4444]"
|
||||
className="bg-[#FAFAF6] dark:bg-[#1A1A1A] border border-[#D4D8CC] dark:border-[#333333] text-[#2D3020] dark:text-white placeholder-[#8A9078] dark:placeholder-[#555555] rounded-xl px-4 py-2.5 text-sm w-full mb-3 outline-none transition-colors focus:border-[#C84B4B] dark:focus:border-[#FF4444]"
|
||||
/>
|
||||
|
||||
<div className="max-h-[200px] overflow-y-auto space-y-1 mb-4">
|
||||
{contactsLoading && (
|
||||
<p className="text-[#AAAAAA] text-sm text-center py-4 animate-pulse">Loading contacts...</p>
|
||||
<p className="text-[#8A9078] text-sm text-center py-4 animate-pulse">Loading contacts...</p>
|
||||
)}
|
||||
{contactsError && (
|
||||
<p className="text-[#CC0000] text-sm text-center py-4">Could not load contacts</p>
|
||||
<p className="text-[#C84B4B] text-sm text-center py-4">Could not load contacts</p>
|
||||
)}
|
||||
{!contactsLoading && !contactsError && filteredContacts.length === 0 && (
|
||||
<p className="text-[#AAAAAA] text-sm text-center py-4">No contacts found</p>
|
||||
<p className="text-[#8A9078] text-sm text-center py-4">No contacts found</p>
|
||||
)}
|
||||
{!contactsLoading && !contactsError && filteredContacts.map((contact) => (
|
||||
<div
|
||||
key={contact.id}
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all duration-150 hover:bg-[#F5F5F5] dark:hover:bg-[#1A1A1A]"
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer transition-all duration-150 hover:bg-[#FAFAF6] dark:hover:bg-[#1A1A1A]"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold shrink-0 bg-[#FFF0F0] dark:bg-[#CC0000]/15 text-[#CC0000] dark:text-[#FF4444]">
|
||||
<div className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold shrink-0 bg-[#FAEAEA] dark:bg-[#CC0000]/15 text-[#C84B4B] dark:text-[#FF4444]">
|
||||
{contact.avatar_url ? (
|
||||
<img
|
||||
src={contact.avatar_url}
|
||||
@@ -292,13 +292,13 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-[#111111] dark:text-white truncate">{contact.name}</p>
|
||||
<p className="text-xs text-[#888888] dark:[#666666] truncate">{contact.phone}</p>
|
||||
<p className="text-sm font-medium text-[#2D3020] dark:text-white truncate">{contact.name}</p>
|
||||
<p className="text-xs text-[#8A9078] dark:[#666666] truncate">{contact.phone}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCall(contact.phone)}
|
||||
className="shrink-0 text-[#CC0000] dark:text-[#FF4444] hover:opacity-80 transition-opacity"
|
||||
className="shrink-0 text-[#C84B4B] dark:text-[#FF4444] hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<Phone className="h-4 w-4" />
|
||||
</button>
|
||||
@@ -307,12 +307,12 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 my-4">
|
||||
<hr className="flex-1 border-t border-[#E0E0E0] dark:border-[#222222]" />
|
||||
<span className="text-xs text-[#AAAAAA] dark:text-[#555555]">OR</span>
|
||||
<hr className="flex-1 border-t border-[#E0E0E0] dark:border-[#222222]" />
|
||||
<hr className="flex-1 border-t border-[#D4D8CC] dark:border-[#222222]" />
|
||||
<span className="text-xs text-[#8A9078] dark:text-[#555555]">OR</span>
|
||||
<hr className="flex-1 border-t border-[#D4D8CC] dark:border-[#222222]" />
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-[#888888] dark:text-[#666666] mb-2">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-[#8A9078] dark:text-[#666666] mb-2">
|
||||
DIAL A NUMBER
|
||||
</p>
|
||||
|
||||
@@ -321,10 +321,10 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
value={phoneNumber}
|
||||
onChange={(e) => { setPhoneNumber(e.target.value); setPhoneError(false) }}
|
||||
placeholder="+27 000 000 0000"
|
||||
className="bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E0E0E0] dark:border-[#333333] text-[#111111] dark:text-white placeholder-[#AAAAAA] dark:placeholder-[#555555] rounded-xl px-4 py-2.5 text-sm w-full outline-none transition-colors focus:border-[#CC0000] dark:focus:border-[#FF4444]"
|
||||
className="bg-[#FAFAF6] dark:bg-[#1A1A1A] border border-[#D4D8CC] dark:border-[#333333] text-[#2D3020] dark:text-white placeholder-[#8A9078] dark:placeholder-[#555555] rounded-xl px-4 py-2.5 text-sm w-full outline-none transition-colors focus:border-[#C84B4B] dark:focus:border-[#FF4444]"
|
||||
/>
|
||||
{phoneError && (
|
||||
<p className="text-[#CC0000] text-xs mt-1">Please enter a phone number</p>
|
||||
<p className="text-[#C84B4B] text-xs mt-1">Please enter a phone number</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
@@ -337,7 +337,7 @@ export default function VoiceCallModal({ open, onClose }: VoiceCallModalProps) {
|
||||
setPhoneError(false)
|
||||
handleCall(trimmed)
|
||||
}}
|
||||
className="w-full mt-3 bg-[#CC0000] hover:bg-[#990000] dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 flex items-center justify-center gap-2 transition-all duration-200"
|
||||
className="w-full mt-3 bg-[#C84B4B] hover:bg-[#C84B4B]/80 dark:bg-[#FF1111] dark:hover:bg-[#CC0000] text-white font-semibold text-sm rounded-xl py-2.5 flex items-center justify-center gap-2 transition-all duration-200"
|
||||
>
|
||||
<Phone className="h-4 w-4" />
|
||||
Call Now
|
||||
|
||||
@@ -21,14 +21,14 @@ export function CrossedLightsabers() {
|
||||
<circle cx="100" cy="73" r="24" fill="url(#purpleGlow)" className="animate-pulse-intersection" />
|
||||
|
||||
<g className="animate-pulse-red">
|
||||
<line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" opacity="0.12" className="stroke-[#dc2626] dark:stroke-[#ef4444] saber-outer" />
|
||||
<line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" opacity="0.25" className="stroke-[#dc2626] dark:stroke-[#ef4444] saber-mid" />
|
||||
<line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" opacity="0.12" className="stroke-[#C84B4B] dark:stroke-[#ef4444] saber-outer" />
|
||||
<line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" opacity="0.25" className="stroke-[#C84B4B] dark:stroke-[#ef4444] saber-mid" />
|
||||
<line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" className="stroke-[#f87171] dark:stroke-[#fca5a5] saber-core" />
|
||||
</g>
|
||||
|
||||
<g className="animate-pulse-blue">
|
||||
<line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" opacity="0.12" className="stroke-[#1d4ed8] dark:stroke-[#3b82f6] saber-blue-outer" />
|
||||
<line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" opacity="0.25" className="stroke-[#1d4ed8] dark:stroke-[#3b82f6] saber-blue-mid" />
|
||||
<line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" opacity="0.12" className="stroke-[#5A8FC4] dark:stroke-[#3b82f6] saber-blue-outer" />
|
||||
<line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" opacity="0.25" className="stroke-[#5A8FC4] dark:stroke-[#3b82f6] saber-blue-mid" />
|
||||
<line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" className="stroke-[#60a5fa] dark:stroke-[#93c5fd] saber-blue-core" />
|
||||
</g>
|
||||
|
||||
|
||||
@@ -16,8 +16,8 @@ interface LeadsPerMonthChartProps {
|
||||
data: IntervalData[]
|
||||
}
|
||||
|
||||
const NEW_LEADS = "#CC0000"
|
||||
const CLOSED = "#0033CC"
|
||||
const NEW_LEADS = "#C84B4B"
|
||||
const CLOSED = "#5A8FC4"
|
||||
|
||||
export function LeadsPerMonthChart({ data: initialData }: LeadsPerMonthChartProps) {
|
||||
const [year, setYear] = useState(new Date().getFullYear())
|
||||
@@ -153,11 +153,11 @@ export function LeadsPerMonthChart({ data: initialData }: LeadsPerMonthChartProp
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="newLeadsGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#FF1111" />
|
||||
<stop offset="0%" stopColor="#C84B4B" />
|
||||
<stop offset="100%" stopColor={NEW_LEADS} />
|
||||
</linearGradient>
|
||||
<linearGradient id="closedGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#1144FF" />
|
||||
<stop offset="0%" stopColor="#5A8FC4" />
|
||||
<stop offset="100%" stopColor={CLOSED} />
|
||||
</linearGradient>
|
||||
<filter id="shadowNew">
|
||||
|
||||
@@ -23,10 +23,10 @@ export function StatCardSkeleton() {
|
||||
|
||||
return (
|
||||
<div className="col-span-full flex flex-col items-center justify-center py-20">
|
||||
<p className="text-[#444444] dark:text-[#AAAAAA] text-sm">
|
||||
<p className="text-[#8A9078] dark:text-[#AAAAAA] text-sm">
|
||||
Loading your data...
|
||||
</p>
|
||||
<div className="w-48 h-1 rounded-full overflow-hidden bg-[#E0E0E0] dark:bg-[#222222] mt-4">
|
||||
<div className="w-48 h-1 rounded-full overflow-hidden bg-[#D4D8CC] dark:bg-[#222222] mt-4">
|
||||
<div className="w-full h-full rounded-full bg-sidebar animate-[loading_1.5s_ease-in-out_infinite]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { motion } from "framer-motion"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useWebsiteTheme } from "@/providers/website-theme-provider"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { LucideIcon } from "lucide-react"
|
||||
|
||||
@@ -19,12 +20,12 @@ interface StatCardProps {
|
||||
}
|
||||
|
||||
const cardColors: Record<string, { bg: string; text: string; glow: string; accent: string }> = {
|
||||
"Total Leads": { bg: "bg-[#CC0000]/10", text: "text-[#CC0000] dark:text-[#FF1111]", glow: "via-[rgba(204,0,0,0.25)]", accent: "#CC0000" },
|
||||
"Open Leads": { bg: "bg-[#0033CC]/10", text: "text-[#0033CC] dark:text-[#1144FF]", glow: "via-[rgba(0,51,204,0.25)]", accent: "#0033CC" },
|
||||
"Contacted": { bg: "bg-[#CC0000]/10", text: "text-[#CC0000] dark:text-[#FF1111]", glow: "via-[rgba(204,0,0,0.25)]", accent: "#CC0000" },
|
||||
"Pending": { bg: "bg-[#0033CC]/10", text: "text-[#0033CC] dark:text-[#1144FF]", glow: "via-[rgba(0,51,204,0.25)]", accent: "#0033CC" },
|
||||
"Closed": { bg: "bg-[#CC0000]/10", text: "text-[#CC0000] dark:text-[#FF1111]", glow: "via-[rgba(204,0,0,0.25)]", accent: "#CC0000" },
|
||||
"Conversion Rate": { bg: "bg-[#0033CC]/10", text: "text-[#0033CC] dark:text-[#1144FF]", glow: "via-[rgba(0,51,204,0.25)]", accent: "#0033CC" },
|
||||
"Total Leads": { bg: "bg-[#C84B4B]/10", text: "text-[#C84B4B] dark:text-[#FF1111]", glow: "via-[rgba(200,75,75,0.25)]", accent: "#C84B4B" },
|
||||
"Open Leads": { bg: "bg-[#5A8FC4]/10", text: "text-[#5A8FC4] dark:text-[#1144FF]", glow: "via-[rgba(90,143,196,0.25)]", accent: "#5A8FC4" },
|
||||
"Contacted": { bg: "bg-[#C84B4B]/10", text: "text-[#C84B4B] dark:text-[#FF1111]", glow: "via-[rgba(200,75,75,0.25)]", accent: "#C84B4B" },
|
||||
"Pending": { bg: "bg-[#5A8FC4]/10", text: "text-[#5A8FC4] dark:text-[#1144FF]", glow: "via-[rgba(90,143,196,0.25)]", accent: "#5A8FC4" },
|
||||
"Closed": { bg: "bg-[#C84B4B]/10", text: "text-[#C84B4B] dark:text-[#FF1111]", glow: "via-[rgba(200,75,75,0.25)]", accent: "#C84B4B" },
|
||||
"Conversion Rate": { bg: "bg-[#5A8FC4]/10", text: "text-[#5A8FC4] dark:text-[#1144FF]", glow: "via-[rgba(90,143,196,0.25)]", accent: "#5A8FC4" },
|
||||
}
|
||||
|
||||
function computeGoal(max: number): number {
|
||||
@@ -50,6 +51,7 @@ function smoothPath(points: { x: number; y: number }[]): string {
|
||||
}
|
||||
|
||||
export function StatCard({ title, value, icon: Icon, description, index = 0, trend, sparklineField, monthlyBreakdown, conversionRate }: StatCardProps) {
|
||||
const { websiteTheme } = useWebsiteTheme()
|
||||
const color = cardColors[title] ?? cardColors["Total Leads"]
|
||||
|
||||
const isNumeric = typeof value === "number"
|
||||
@@ -108,8 +110,8 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
|
||||
const sparkColor = color.accent
|
||||
|
||||
const isRed = index % 2 === 0
|
||||
const stripColor = isRed ? "from-[#CC0000] via-[#FF1111] to-[#CC0000]" : "from-[#0033CC] via-[#1144FF] to-[#0033CC]"
|
||||
const stripGlow = isRed ? "shadow-[#CC0000]/20" : "shadow-[#0033CC]/20"
|
||||
const stripColor = isRed ? "from-[#C84B4B] via-[#C84B4B] to-[#C84B4B]" : "from-[#5A8FC4] via-[#5A8FC4] to-[#5A8FC4]"
|
||||
const stripGlow = isRed ? "shadow-[#C84B4B]/20" : "shadow-[#5A8FC4]/20"
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@@ -119,28 +121,30 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
|
||||
className="relative"
|
||||
>
|
||||
<Card className="group h-full hover:shadow-xl transition-all duration-200 relative z-10 overflow-hidden">
|
||||
{/* Red/Blue gradient top strip */}
|
||||
<div className={`h-1 w-full bg-gradient-to-r ${stripColor} ${stripGlow} shadow-sm`} />
|
||||
{websiteTheme === "spidey" && (
|
||||
<div className={`h-1 w-full bg-gradient-to-r ${stripColor} ${stripGlow} shadow-sm`} />
|
||||
)}
|
||||
|
||||
{/* Action lines on hover */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23CC0000' stroke-width='0.4' opacity='0.15'%3E%3Cline x1='100' y1='100' x2='0' y2='0'/%3E%3Cline x1='100' y1='100' x2='50' y2='0'/%3E%3Cline x1='100' y1='100' x2='100' y2='0'/%3E%3Cline x1='100' y1='100' x2='150' y2='0'/%3E%3Cline x1='100' y1='100' x2='200' y2='0'/%3E%3Cline x1='100' y1='100' x2='200' y2='50'/%3E%3Cline x1='100' y1='100' x2='200' y2='100'/%3E%3Cline x1='100' y1='100' x2='200' y2='150'/%3E%3Cline x1='100' y1='100' x2='200' y2='200'/%3E%3Cline x1='100' y1='100' x2='150' y2='200'/%3E%3Cline x1='100' y1='100' x2='100' y2='200'/%3E%3Cline x1='100' y1='100' x2='50' y2='200'/%3E%3Cline x1='100' y1='100' x2='0' y2='200'/%3E%3Cline x1='100' y1='100' x2='0' y2='150'/%3E%3Cline x1='100' y1='100' x2='0' y2='100'/%3E%3Cline x1='100' y1='100' x2='0' y2='50'/%3E%3C/g%3E%3C/svg%3E")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
/>
|
||||
{websiteTheme === "spidey" && (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23CC0000' stroke-width='0.4' opacity='0.15'%3E%3Cline x1='100' y1='100' x2='0' y2='0'/%3E%3Cline x1='100' y1='100' x2='50' y2='0'/%3E%3Cline x1='100' y1='100' x2='100' y2='0'/%3E%3Cline x1='100' y1='100' x2='150' y2='0'/%3E%3Cline x1='100' y1='100' x2='200' y2='0'/%3E%3Cline x1='100' y1='100' x2='200' y2='50'/%3E%3Cline x1='100' y1='100' x2='200' y2='100'/%3E%3Cline x1='100' y1='100' x2='200' y2='150'/%3E%3Cline x1='100' y1='100' x2='200' y2='200'/%3E%3Cline x1='100' y1='100' x2='150' y2='200'/%3E%3Cline x1='100' y1='100' x2='100' y2='200'/%3E%3Cline x1='100' y1='100' x2='50' y2='200'/%3E%3Cline x1='100' y1='100' x2='0' y2='200'/%3E%3Cline x1='100' y1='100' x2='0' y2='150'/%3E%3Cline x1='100' y1='100' x2='0' y2='100'/%3E%3Cline x1='100' y1='100' x2='0' y2='50'/%3E%3C/g%3E%3C/svg%3E")`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<CardContent className="p-6 flex flex-col relative z-[1]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium text-muted-foreground">{title}</p>
|
||||
<p className="text-3xl font-bold tracking-tight text-[#111111] dark:text-white">
|
||||
<p className="text-3xl font-bold tracking-tight text-[#2D3020] dark:text-white">
|
||||
{isNumeric ? display : value}
|
||||
</p>
|
||||
{description && (
|
||||
<p className="text-xs text-[#888888] dark:text-[#666666]">{description}</p>
|
||||
<p className="text-xs text-[#8A9078] dark:text-[#666666]">{description}</p>
|
||||
)}
|
||||
{trend && (
|
||||
<span className={cn(
|
||||
@@ -196,9 +200,9 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
|
||||
{title === "Conversion Rate" && conversionRate !== undefined && (
|
||||
<div className="mt-3">
|
||||
<div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
|
||||
<div className="h-full rounded-full bg-gradient-to-r from-[#CC0000] to-[#0033CC]" style={{ width: `${Math.min(conversionRate, 100)}%` }} />
|
||||
<div className="h-full rounded-full bg-gradient-to-r from-[#C84B4B] to-[#5A8FC4]" style={{ width: `${Math.min(conversionRate, 100)}%` }} />
|
||||
</div>
|
||||
<p className="text-xs text-[#888888] dark:text-[#666666] mt-1">{conversionRate}% conversion rate</p>
|
||||
<p className="text-xs text-[#8A9078] dark:text-[#666666] mt-1">{conversionRate}% conversion rate</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { useWebsiteTheme } from "@/providers/website-theme-provider"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import { Sidebar } from "./sidebar"
|
||||
import { Topbar } from "./topbar"
|
||||
import { useWebsiteTheme } from "@/providers/website-theme-provider"
|
||||
|
||||
interface AppShellProps {
|
||||
children: React.ReactNode
|
||||
@@ -35,12 +35,12 @@ export function AppShell({ children }: AppShellProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F8F8F8] dark:bg-[#0A0A0A] relative overflow-hidden"
|
||||
<div className="min-h-screen bg-background dark:bg-[#0A0A0A] relative overflow-hidden"
|
||||
style={websiteTheme === "spidey" ? {
|
||||
backgroundImage: "radial-gradient(circle, #CC000010 1px, transparent 1px), radial-gradient(circle, #0033CC06 1px, transparent 1px)",
|
||||
backgroundSize: "28px 28px, 14px 14px",
|
||||
backgroundPosition: "0 0, 7px 7px",
|
||||
} : {}}
|
||||
} : undefined}
|
||||
>
|
||||
{/* Spider-Man decorations — Spidey theme only */}
|
||||
{websiteTheme === "spidey" && (
|
||||
|
||||
@@ -8,17 +8,17 @@ export function CrmIcon() {
|
||||
viewBox="0 0 64 64"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g className="fill-[#333333] dark:fill-white/[0.15] dark:stroke-[#e5e7eb]" style={{strokeWidth: "1.5px"}}>
|
||||
<g className="fill-[#2D3020] dark:fill-white/[0.15] dark:stroke-[#e5e7eb]" style={{strokeWidth: "1.5px"}}>
|
||||
<path className="dark:[stroke-linejoin:round]" d="m10.35 35.62s-.75.14-1-1.48-.58-8.61-.3-8.87a10 10 0 0 1 2.07-.63s0-7.54 2.67-11.86 5.4-6.09 10.65-7.56a29.38 29.38 0 0 1 15.18.3c4.41 1.18 8.7 4.62 9.89 8.8a49.27 49.27 0 0 1 1.49 9.55 9.53 9.53 0 0 1 2.52.9c.17.33.43 9.12 0 9.38a1.6 1.6 0 0 1 -.87.23s7.86 18 7.59 19-12.93 6.36-30.1 6.23-26.05-5.41-26.36-6.11 6.57-17.88 6.57-17.88z" />
|
||||
</g>
|
||||
<g className="fill-[#777777] dark:fill-white/[0.1] dark:stroke-[#d4d4d4]" style={{strokeWidth: "1px"}}>
|
||||
<g className="fill-[#8A9078] dark:fill-white/[0.1] dark:stroke-[#d4d4d4]" style={{strokeWidth: "1px"}}>
|
||||
<path d="m13.24 27.92s-.6-7.65 1.3-11.91a19.6 19.6 0 0 1 7.75-8.23 20.47 20.47 0 0 1 6.51-1.45c.05.16.67 10.23.66 11.61a27 27 0 0 1 -.57 4s-4-2.44-8.16-1.38a10.47 10.47 0 0 0 -7.49 7.36z" />
|
||||
<path d="m30.11 22.18s.53-3.69.54-4.89-.8-10.82-.6-10.95a4.11 4.11 0 0 1 1.88 0c.07.16 1.07 11.66 1.28 13.22a9.33 9.33 0 0 1 .27 2.44 2.85 2.85 0 0 1 -3.37.18z" />
|
||||
<path d="m34.8 21.44a76.48 76.48 0 0 1 -1.4-9.35c-.17-3.62-.51-5.65-.06-5.83s6.66.17 10.42 3.45 4.06 5.61 3.81 5.66-2.52-1-2.64-.77-.15.8.06.92 2.69 1.1 2.82 1.26a4.18 4.18 0 0 1 .28.95 16.94 16.94 0 0 0 -3-1.13c-.12.17-.23.92 0 1s3 1.3 3 1.3l.11.79s-2.83-1.18-3-1.14-.36.8-.15.92 3.16 1.26 3.25 1.43.41 1.36.41 1.36l-1.71-.54s.31.87.48 1 1.3.42 1.31.76a31.35 31.35 0 0 1 .2 3.33c-.12 0-2.2-6.45-5.21-7.09s-8.98 1.72-8.98 1.72z" />
|
||||
<path d="m22.44 22.28c2.21 0 7.19 2.45 9.76 1.84s6.89-2.79 9.51-2.81 4.07 2.48 6.36 7.84 7.14 17.34 7 17.34-8.1-17.89-9.66-20.23-2.66-3-5.86-2.77-6.81 1-6.85 1.41 0 7.17.49 7.75 3.06.71 6.18.51 5-.33 5.77-.64a10.14 10.14 0 0 0 1.69-1l7.79 16.48a30.15 30.15 0 0 0 -2.94-2.56c-.21.05-.31.8-.19.88s3.67 3.33 4 3.7a12.43 12.43 0 0 1 1.61 2.63c-.12.17-.45.55-.66.47s-5-5.71-5.39-5.83-.45.6-.45.6 5.18 5.5 5.06 5.63a8.62 8.62 0 0 1 -1.15.57s-4.34-5-4.5-4.94-.69.6-.4.81a45.71 45.71 0 0 1 4.07 4.36 7 7 0 0 1 -1.2.4 46.49 46.49 0 0 0 -3.58-3.72c-.25 0-.61.39-.49.55s3.34 3.29 3.22 3.46a4 4 0 0 1 -1.16.37s-2.47-2.59-2.65-2.59-.74.31-.53.6 2.39 2.19 2.27 2.28a4.86 4.86 0 0 1 -1 .19c-.13 0-2-2-2.22-2s-.78.19-.65.48 1.83 1.79 1.63 1.92-5.17 1.66-15.76 1.51-14.84-1.85-14.84-1.85a46 46 0 0 0 -4.22-3.69c-.37 0-.78.6-.61.72a29.31 29.31 0 0 1 2.86 2.6c-.16 0-3.27-.92-4.32-1.1a7.6 7.6 0 0 1 -2.26-.61c0-.13 6-14.45 6.27-14.41s4.29 10.07 4.29 10.07a2.77 2.77 0 0 0 1.2 2.89 3.9 3.9 0 0 0 3.49-.25l15.51.08c.12 0 2.65 1.27 3.69-.68s.44-2.67.44-2.67 4-11.27 3.76-11.52a5.63 5.63 0 0 0 -1.76-.35s-2.75 10.32-3 10.33-1.26-.3-1.68-.34a3.18 3.18 0 0 0 -.7 0l-5.48-7.62s1.1-6-3.28-6-3.14 6-3.14 6-1-.06-2 1.51-3.39 6.29-3.39 6.29a3.77 3.77 0 0 0 -1.45.2c-.66.27-1.07.49-1.07.49s-3.54-8.29-3.46-8.46.82-2.15 1.2-2.16 2.93.39 3.93.41 1.16-.11 1.2-.28.27-.8.1-.8-5.11-.57-5.48-.57-1.07 2.14-1.36 2.23-1.32.25-1.2 0 2.16-5.13 2.29-5.1 7.53 1.07 9.73.64 2.76-1.11 3.07-2.16a31.45 31.45 0 0 0 .25-6.59 19.1 19.1 0 0 0 -6.2-1.31c-2.79-.09-4.67-.13-5.87 1.82s-10.79 27.71-10.96 27.76a3.64 3.64 0 0 1 -.92-.29s4.91-14 6.78-19.26 3.47-11.56 9.47-11.46z" />
|
||||
<path d="m28.76 40.3a14.69 14.69 0 0 0 2.25 0l2.29-.09s-.39 9.67 0 9.75.67.27.66-.06-.19-7.75.06-7.79.75 1.52.75 1.52-.14 6.42 0 6.46.88.27.84.06 0-4.75 0-4.75l1.43 2.26-.79.06s-.08 2 .17 2a4.75 4.75 0 0 0 .71 0c.12 0 .11 1.16.11 1.16s-7.26-.19-9.8-.13-2.74.11-2.74.11a6.75 6.75 0 0 0 -.55-2l-.62-1.28s4.86-7.15 5.23-7.28z" />
|
||||
</g>
|
||||
<g className="fill-[#333333] dark:fill-white/[0.15] dark:stroke-[#d4d4d4]" style={{strokeWidth: "0.7px"}}>
|
||||
<g className="fill-[#2D3020] dark:fill-white/[0.15] dark:stroke-[#d4d4d4]" style={{strokeWidth: "0.7px"}}>
|
||||
<path d="m30.57 41.13c.28-.1.79-.06.84.1s.41 8.41.17 8.63-.88.14-.88 0-.25-8.69-.13-8.73z" />
|
||||
<path d="m28.74 41.26c.21-.09.7-.19.79 0s.55 8.61.38 8.66-.87.18-.87 0-.3-8.66-.3-8.66z" />
|
||||
<path d="m27 44.8c.06-.14.87-.4.87-.23a52.12 52.12 0 0 1 .21 5.25 3 3 0 0 1 -.79.06s-.38-4.88-.29-5.08z" />
|
||||
|
||||
@@ -4,7 +4,7 @@ export function SidebarNameLogo() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 192.756 192.756"
|
||||
className="fill-[#333333] dark:fill-[#e5e7eb] w-full h-auto"
|
||||
className="fill-[#2D3020] dark:fill-[#e5e7eb] w-full h-auto"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g fill-rule="evenodd" clip-rule="evenodd">
|
||||
|
||||
@@ -73,7 +73,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
.toUpperCase();
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-card dark:bg-sidebar px-4 lg:px-6 relative overflow-hidden">
|
||||
<header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-sidebar dark:bg-sidebar px-4 lg:px-6 relative overflow-hidden">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2 mr-2 shrink-0">
|
||||
{websiteTheme === "spidey" && <CaptainAmericaShield />}
|
||||
@@ -94,10 +94,10 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative hidden flex-1 sm:block md:w-80">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#888888] dark:text-[#666666]" />
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground dark:text-[#666666]" />
|
||||
<Input
|
||||
placeholder="Search leads, companies..."
|
||||
className="h-9 w-full max-w-sm pl-9 bg-[#F0F0F0] dark:bg-[#1E1E1E] border-[#E0E0E0] dark:border-[#222222] text-[#111111] dark:text-white"
|
||||
className="h-9 w-full max-w-sm pl-9 bg-muted dark:bg-[#1E1E1E] border-border dark:border-[#222222] text-foreground dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -117,7 +117,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
className="text-muted-foreground"
|
||||
className="text-muted-foreground hover:bg-[#8b949e]/10 hover:text-[#8b949e]"
|
||||
>
|
||||
{mounted ? (
|
||||
theme === "dark" ? (
|
||||
@@ -135,7 +135,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setBugModalOpen(true)}
|
||||
className="text-muted-foreground"
|
||||
className="text-muted-foreground hover:bg-[#8b949e]/10 hover:text-[#8b949e]"
|
||||
title="Report a Bug"
|
||||
>
|
||||
<Bug className="h-5 w-5" />
|
||||
@@ -147,7 +147,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="relative text-muted-foreground"
|
||||
className="relative text-muted-foreground hover:bg-[#8b949e]/10 hover:text-[#8b949e]"
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
<span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
|
||||
@@ -217,7 +217,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
{/* User profile */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="relative h-9 gap-2 pl-2 pr-3">
|
||||
<Button variant="ghost" className="relative h-9 gap-2 pl-2 pr-3 hover:bg-[#8b949e]/10 hover:text-[#8b949e]">
|
||||
<Avatar className="h-7 w-7">
|
||||
<AvatarImage src={user.avatar} />
|
||||
<AvatarFallback>{initials}</AvatarFallback>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Sun, Moon, Monitor, Shield } from "lucide-react"
|
||||
import { Sun, Moon, Monitor, Palette, Shield } from "lucide-react"
|
||||
import { useWebsiteTheme } from "@/providers/website-theme-provider"
|
||||
|
||||
const COLOR_THEME_KEY = "crm-color-theme"
|
||||
@@ -31,7 +31,7 @@ const themeOptions = [
|
||||
]
|
||||
|
||||
const backgroundOptions = [
|
||||
{ value: "default", label: "None", icon: Shield, color: "bg-gray-400", ring: "ring-gray-400", desc: "No background theme" },
|
||||
{ value: "default", label: "Default", icon: Shield, color: "bg-zinc-500", ring: "ring-zinc-500", desc: "Standard CRM appearance" },
|
||||
{ value: "spidey", label: "Spidey", icon: Shield, color: "bg-red-600", ring: "ring-red-600", desc: "Dark theme with red accents" },
|
||||
{ value: "cosmic", label: "Cosmic", icon: Shield, color: "bg-gradient-to-r from-purple-500 to-green-500", ring: "ring-purple-500", desc: "Deep space with purple nebula and cyan accents" },
|
||||
{ value: "cyberpunk", label: "Cyberpunk", icon: Shield, color: "bg-gradient-to-r from-pink-500 to-cyan-400", ring: "ring-pink-500", desc: "Dark retro-futuristic synthwave aesthetic" },
|
||||
@@ -46,12 +46,12 @@ function getStoredColorTheme(): string {
|
||||
}
|
||||
|
||||
function applyColorTheme(theme: string) {
|
||||
document.documentElement.className = document.documentElement.className
|
||||
.replace(/\b(default|ocean|forest|sunset|midnight|rose|amber|violet|slate|ruby)\b/g, "")
|
||||
.trim()
|
||||
const colorThemes = ["default","ocean","forest","sunset","midnight","rose","amber","violet","slate","ruby"]
|
||||
const classes = document.documentElement.className.split(" ").filter(c => !colorThemes.includes(c))
|
||||
if (theme !== "default") {
|
||||
document.documentElement.classList.add(theme)
|
||||
classes.push(theme)
|
||||
}
|
||||
document.documentElement.className = classes.join(" ").trim()
|
||||
localStorage.setItem(COLOR_THEME_KEY, theme)
|
||||
}
|
||||
|
||||
|
||||
@@ -75,7 +75,7 @@ export function BugReportModal({ open, onClose }: BugReportModalProps) {
|
||||
>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="absolute right-4 top-4 text-[#888888] hover:text-[#111111] dark:hover:text-white transition-colors"
|
||||
className="absolute right-4 top-4 text-[#8A9078] hover:text-[#2D3020] dark:hover:text-white transition-colors"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
@@ -83,15 +83,15 @@ export function BugReportModal({ open, onClose }: BugReportModalProps) {
|
||||
{submitted ? (
|
||||
<div className="flex flex-col items-center py-8 text-center">
|
||||
<CheckCircle className="h-12 w-12 text-emerald-500 mb-4" />
|
||||
<h3 className="text-lg font-semibold text-[#111111] dark:text-white mb-2">
|
||||
<h3 className="text-lg font-semibold text-[#2D3020] dark:text-white mb-2">
|
||||
Bug Report Submitted
|
||||
</h3>
|
||||
<p className="text-sm text-[#666666] dark:text-[#AAAAAA]">
|
||||
<p className="text-sm text-[#8A9078] dark:text-[#AAAAAA]">
|
||||
Thank you for your report. The development team will investigate.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="mt-6 rounded-lg bg-[#CC0000] px-6 py-2 text-sm font-medium text-white hover:bg-[#AA0000] transition-colors"
|
||||
className="mt-6 rounded-lg bg-[#C84B4B] px-6 py-2 text-sm font-medium text-white hover:bg-[#C84B4B]/80 transition-colors"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
@@ -99,14 +99,14 @@ export function BugReportModal({ open, onClose }: BugReportModalProps) {
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/30">
|
||||
<Bug className="h-5 w-5 text-[#CC0000]" />
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#FAEAEA] dark:bg-red-900/30">
|
||||
<Bug className="h-5 w-5 text-[#C84B4B]" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#111111] dark:text-white">
|
||||
<h3 className="text-lg font-semibold text-[#2D3020] dark:text-white">
|
||||
Report a Bug
|
||||
</h3>
|
||||
<p className="text-xs text-[#666666] dark:text-[#AAAAAA]">
|
||||
<p className="text-xs text-[#8A9078] dark:text-[#AAAAAA]">
|
||||
Help us improve the system
|
||||
</p>
|
||||
</div>
|
||||
@@ -120,8 +120,8 @@ export function BugReportModal({ open, onClose }: BugReportModalProps) {
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-[#444444] dark:text-[#CCCCCC]">
|
||||
Title <span className="text-[#CC0000]">*</span>
|
||||
<label className="mb-1.5 block text-sm font-medium text-[#8A9078] dark:text-[#CCCCCC]">
|
||||
Title <span className="text-[#C84B4B]">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -129,13 +129,13 @@ export function BugReportModal({ open, onClose }: BugReportModalProps) {
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Brief description of the issue"
|
||||
required
|
||||
className="w-full rounded-lg border border-[#E0E0E0] dark:border-[#333333] bg-white dark:bg-[#1E1E1E] px-3 py-2 text-sm text-[#111111] dark:text-white placeholder-[#999999] focus:border-[#CC0000] focus:outline-none focus:ring-1 focus:ring-[#CC0000]"
|
||||
className="w-full rounded-lg border border-[#D4D8CC] dark:border-[#333333] bg-white dark:bg-[#1E1E1E] px-3 py-2 text-sm text-[#2D3020] dark:text-white placeholder-[#8A9078] focus:border-[#C84B4B] focus:outline-none focus:ring-1 focus:ring-[#C84B4B]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-[#444444] dark:text-[#CCCCCC]">
|
||||
Description <span className="text-[#CC0000]">*</span>
|
||||
<label className="mb-1.5 block text-sm font-medium text-[#8A9078] dark:text-[#CCCCCC]">
|
||||
Description <span className="text-[#C84B4B]">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
@@ -143,18 +143,18 @@ export function BugReportModal({ open, onClose }: BugReportModalProps) {
|
||||
placeholder="What happened? What did you expect?"
|
||||
rows={4}
|
||||
required
|
||||
className="w-full resize-none rounded-lg border border-[#E0E0E0] dark:border-[#333333] bg-white dark:bg-[#1E1E1E] px-3 py-2 text-sm text-[#111111] dark:text-white placeholder-[#999999] focus:border-[#CC0000] focus:outline-none focus:ring-1 focus:ring-[#CC0000]"
|
||||
className="w-full resize-none rounded-lg border border-[#D4D8CC] dark:border-[#333333] bg-white dark:bg-[#1E1E1E] px-3 py-2 text-sm text-[#2D3020] dark:text-white placeholder-[#8A9078] focus:border-[#C84B4B] focus:outline-none focus:ring-1 focus:ring-[#C84B4B]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-[#444444] dark:text-[#CCCCCC]">
|
||||
<label className="mb-1.5 block text-sm font-medium text-[#8A9078] dark:text-[#CCCCCC]">
|
||||
Severity
|
||||
</label>
|
||||
<select
|
||||
value={severity}
|
||||
onChange={(e) => setSeverity(e.target.value)}
|
||||
className="w-full rounded-lg border border-[#E0E0E0] dark:border-[#333333] bg-white dark:bg-[#1E1E1E] px-3 py-2 text-sm text-[#111111] dark:text-white focus:border-[#CC0000] focus:outline-none focus:ring-1 focus:ring-[#CC0000]"
|
||||
className="w-full rounded-lg border border-[#D4D8CC] dark:border-[#333333] bg-white dark:bg-[#1E1E1E] px-3 py-2 text-sm text-[#2D3020] dark:text-white focus:border-[#C84B4B] focus:outline-none focus:ring-1 focus:ring-[#C84B4B]"
|
||||
>
|
||||
<option value="low">Low — Minor cosmetic issue</option>
|
||||
<option value="medium">Medium — Affects functionality</option>
|
||||
@@ -163,8 +163,8 @@ export function BugReportModal({ open, onClose }: BugReportModalProps) {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] px-3 py-2">
|
||||
<p className="text-xs text-[#888888]">
|
||||
<div className="rounded-lg bg-[#FAFAF6] dark:bg-[#1A1A1A] px-3 py-2">
|
||||
<p className="text-xs text-[#8A9078]">
|
||||
<span className="font-medium">Page:</span> {typeof window !== "undefined" ? window.location.href : ""}
|
||||
</p>
|
||||
</div>
|
||||
@@ -172,7 +172,7 @@ export function BugReportModal({ open, onClose }: BugReportModalProps) {
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-lg bg-[#CC0000] px-4 py-2.5 text-sm font-medium text-white hover:bg-[#AA0000] disabled:opacity-50 transition-colors"
|
||||
className="flex w-full items-center justify-center gap-2 rounded-lg bg-[#C84B4B] px-4 py-2.5 text-sm font-medium text-white hover:bg-[#C84B4B]/80 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{loading && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{loading ? "Submitting..." : "Submit Bug Report"}
|
||||
|
||||
@@ -19,8 +19,8 @@ export function PageHeader({ title, description, children, className }: PageHead
|
||||
className={cn("flex items-center justify-between pb-6", className)}
|
||||
>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#CC0000] dark:border-[#FF1111] pl-4 text-[#111111] dark:text-white">{title}</h1>
|
||||
{description && <p className="text-sm text-[#444444] dark:text-[#AAAAAA] mt-1">{description}</p>}
|
||||
<h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#C84B4B] dark:border-[#FF1111] pl-4 text-[#2D3020] dark:text-white">{title}</h1>
|
||||
{description && <p className="text-sm text-[#8A9078] dark:text-[#AAAAAA] mt-1">{description}</p>}
|
||||
</div>
|
||||
{children && <div className="flex items-center gap-3">{children}</div>}
|
||||
</motion.div>
|
||||
|
||||
@@ -30,11 +30,11 @@ export function getDashboardStats(period: string): DashboardStats {
|
||||
})
|
||||
|
||||
return [
|
||||
{ name: "Open", value: statusCounts.open, color: "#CC0000" },
|
||||
{ name: "Contacted", value: statusCounts.contacted, color: "#0033CC" },
|
||||
{ name: "Open", value: statusCounts.open, color: "#C84B4B" },
|
||||
{ name: "Contacted", value: statusCounts.contacted, color: "#5A8FC4" },
|
||||
{ name: "Pending", value: statusCounts.pending, color: "#FFFFFF" },
|
||||
{ name: "Closed", value: statusCounts.closed, color: "#0033CC" },
|
||||
{ name: "Ignored", value: statusCounts.ignored, color: "#CC0000" },
|
||||
{ name: "Closed", value: statusCounts.closed, color: "#5A8FC4" },
|
||||
{ name: "Ignored", value: statusCounts.ignored, color: "#C84B4B" },
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -74,7 +74,7 @@ function buildEmail(event: EventConfirmationInput, variant: "scheduled" | "resch
|
||||
<html><head><meta charset="utf-8"></head>
|
||||
<body style="font-family:Arial,Helvetica,sans-serif;background:#f4f4f5;padding:40px 20px">
|
||||
<div style="max-width:520px;margin:0 auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08)">
|
||||
<div style="background:linear-gradient(135deg,#CC0000,#0033CC);padding:24px 32px">
|
||||
<div style="background:linear-gradient(135deg,#C84B4B,#5A8FC4);padding:24px 32px">
|
||||
<h1 style="color:#fff;margin:0;font-size:20px">${heading}</h1>
|
||||
</div>
|
||||
<div style="padding:32px">
|
||||
|
||||
@@ -47,13 +47,6 @@ export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const stored = getStoredTheme()
|
||||
if (stored) {
|
||||
setWebsiteThemeState(stored)
|
||||
applyWebsiteTheme(stored)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
fetch("/api/settings/website-theme")
|
||||
.then((res) => (res.ok ? res.json() : null))
|
||||
.then((data) => {
|
||||
@@ -63,7 +56,10 @@ export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
|
||||
applyWebsiteTheme(theme)
|
||||
})
|
||||
.catch(() => {
|
||||
applyWebsiteTheme("default")
|
||||
const stored = getStoredTheme()
|
||||
const theme = stored || "default"
|
||||
setWebsiteThemeState(theme)
|
||||
applyWebsiteTheme(theme)
|
||||
})
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
/* ============================================================================
|
||||
AI Assistant Page — Animations & Keyframes
|
||||
============================================================================ */
|
||||
|
||||
/* Robot walking animation (boot state) */
|
||||
@keyframes walk {
|
||||
0%, 100% { transform: translateX(0) translateY(0); }
|
||||
25% { transform: translateX(12px) translateY(-4px); }
|
||||
50% { transform: translateX(24px) translateY(0); }
|
||||
75% { transform: translateX(12px) translateY(-4px); }
|
||||
}
|
||||
|
||||
@keyframes legLeft {
|
||||
0%, 100% { transform: rotate(-10deg); }
|
||||
50% { transform: rotate(10deg); }
|
||||
}
|
||||
|
||||
@keyframes legRight {
|
||||
0%, 100% { transform: rotate(10deg); }
|
||||
50% { transform: rotate(-10deg); }
|
||||
}
|
||||
|
||||
@keyframes armLeft {
|
||||
0%, 100% { transform: rotate(15deg); }
|
||||
50% { transform: rotate(-15deg); }
|
||||
}
|
||||
|
||||
@keyframes armRight {
|
||||
0%, 100% { transform: rotate(-15deg); }
|
||||
50% { transform: rotate(15deg); }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 45%, 55%, 100% { height: 4px; }
|
||||
50% { height: 1px; }
|
||||
}
|
||||
|
||||
.robot-walk { animation: walk 0.6s ease-in-out infinite; }
|
||||
.robot-leg-l { transform-origin: top center; animation: legLeft 0.3s ease-in-out infinite; }
|
||||
.robot-leg-r { transform-origin: top center; animation: legRight 0.3s ease-in-out infinite; }
|
||||
.robot-arm-l { transform-origin: top center; animation: armLeft 0.3s ease-in-out infinite; }
|
||||
.robot-arm-r { transform-origin: top center; animation: armRight 0.3s ease-in-out infinite; }
|
||||
.robot-eye { animation: blink 2s ease-in-out infinite; }
|
||||
|
||||
/* Welcome screen float-in animation */
|
||||
@keyframes float-in {
|
||||
0% { opacity: 0; transform: translateY(12px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.float-in { animation: float-in 0.4s ease-out both; }
|
||||
|
||||
/* Typing indicator bouncing dots */
|
||||
@keyframes bounce-dot {
|
||||
0%, 60%, 100% { transform: translateY(0); }
|
||||
30% { transform: translateY(-6px); }
|
||||
}
|
||||
|
||||
.dot-1 { animation: bounce-dot 1.2s infinite 0ms; }
|
||||
.dot-2 { animation: bounce-dot 1.2s infinite 150ms; }
|
||||
.dot-3 { animation: bounce-dot 1.2s infinite 300ms; }
|
||||
@@ -53,6 +53,12 @@ const config: Config = {
|
||||
border: "hsl(var(--sidebar-border))",
|
||||
ring: "hsl(var(--sidebar-ring))",
|
||||
},
|
||||
blue: "hsl(var(--color-blue))",
|
||||
teal: "hsl(var(--color-teal))",
|
||||
"red-tint": "hsl(var(--color-red-tint))",
|
||||
"blue-tint": "hsl(var(--color-blue-tint))",
|
||||
"teal-tint": "hsl(var(--color-teal-tint))",
|
||||
avatar: "hsl(var(--color-avatar))",
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
|
||||
Reference in New Issue
Block a user