Merge caitlin/CRM_ENVR: AI chat ref+health, tips panel, cyberpunk theme, app-shell/bg improvements
This commit is contained in:
JCBSComputer
+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>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user