Optimization for AI Chat/ Fixed Themes not loading

2026-06-30 15:54:16 +02:00
parent db487e4614
commit 1e4950009d
5 changed files with 213 additions and 98 deletions
@@ -1,17 +1,33 @@
 "use client"

-import { useState, useCallback } from "react"
+import { useState, useCallback, useEffect } from "react"
 import { AIChat } from "@/components/ai/ai-chat"
 import { JobSelector } from "@/components/ai/job-selector"
-import { Bot, Lightbulb, Target, MessageSquare } from "lucide-react"
+import { Bot, Lightbulb, Target, MessageSquare, Wifi, WifiOff } from "lucide-react"

 export default function AIAssistantPage() {
  const [selectedJob, setSelectedJob] = useState<{ job_title: string; keywords: string[]; industry: string; description: string } | null>(null)
+  const [aiOnline, setAiOnline] = useState<boolean | null>(null)

  const handleJobSelect = useCallback((job: typeof selectedJob) => {
    setSelectedJob(job)
  }, [])

+  useEffect(() => {
+    let cancelled = false
+    const check = async () => {
+      try {
+        const res = await fetch("/api/ai/jobs")
+        if (!cancelled) setAiOnline(res.ok)
+      } catch {
+        if (!cancelled) setAiOnline(false)
+      }
+    }
+    check()
+    const id = setInterval(check, 15000)
+    return () => { cancelled = true; clearInterval(id) }
+  }, [])
+
  return (
    <div className="flex h-[calc(100vh-3.5rem)]">
      <div className="flex-1 flex flex-col min-w-0">
@@ -20,10 +36,22 @@ export default function AIAssistantPage() {
            <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>
-            <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>
          </div>
        </div>

@@ -12,7 +12,7 @@ export async function GET() {
      [user.id],
    )

-    const websiteTheme = result.rows[0]?.website_theme || "spidey"
+    const websiteTheme = result.rows[0]?.website_theme || "default"
    return NextResponse.json({ websiteTheme })
  } catch (error) {
    console.error("Website theme GET error:", error)
@@ -26,7 +26,7 @@ export async function PUT(request: NextRequest) {
    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })

    const body = await request.json()
-    const theme = body.websiteTheme || "spidey"
+    const theme = body.websiteTheme || "default"

    await query(
      `UPDATE users SET preferences = preferences || $2::jsonb WHERE id = $1`,
@@ -1,24 +1,63 @@
 "use client"

 import { useState, useRef, useEffect, Fragment } from "react"
-import { Send, Bot, User, RefreshCw, AlertCircle, Check, Terminal } from "lucide-react"
+import { Send, Bot, User, AlertCircle, Terminal, Sparkles, Lightbulb, Target, MessageSquare } from "lucide-react"

 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-[#1BB0CE] hover:text-[#1BB0CE]/80">
+          {part}
+        </a>
+      )
    }
    return <Fragment key={i}>{part}</Fragment>
  })
 }

+function formatContent(text: string) {
+  const blocks: { type: "code" | "text"; content: string }[] = []
+  const regex = /```(\w*)\n?([\s\S]*?)```/g
+  let last = 0
+  let match: RegExpExecArray | null
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > last) {
+      blocks.push({ type: "text", content: text.slice(last, match.index) })
+    }
+    blocks.push({ type: "code", content: match[2].trim() })
+    last = match.index + match[0].length
+  }
+  if (last < text.length) {
+    blocks.push({ type: "text", content: text.slice(last) })
+  }
+  return blocks.length ? blocks : [{ type: "text" as const, content: text }]
+}
+
 interface ChatMessage {
  role: "user" | "assistant"
  content: 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" }} />
+    </div>
+  )
+}
+
+const suggestions = [
+  { icon: Terminal, label: "Lists", query: "Show me available job lists and categories" },
+  { icon: Target, label: "Leads", query: "Pull recent leads" },
+  { icon: Lightbulb, label: "Tips", query: "Give me general sales tips" },
+  { icon: MessageSquare, label: "Objections", query: "How do I handle common objections?" },
+]
+
 export function AIChat() {
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [input, setInput] = useState("")
@@ -26,6 +65,8 @@ export function AIChat() {
  const [error, setError] = useState("")
  const [bootState, setBootState] = useState<"booting" | "ready" | "error">("booting")
  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const chatContainerRef = useRef<HTMLDivElement>(null)

  const checkServer = async () => {
    try {
@@ -80,8 +121,15 @@ export function AIChat() {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

-  const sendMessage = async () => {
-    const msg = input.trim()
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = "auto"
+      inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`
+    }
+  }, [input])
+
+  const sendMessage = async (text?: string) => {
+    const msg = (text || input).trim()
    if (!msg || loading) return

    setInput("")
@@ -158,11 +206,10 @@ export function AIChat() {
        .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-4">
-        <p className="text-sm text-[#6a6a75]">Servers booting...</p>
-        <div className="h-[50px] w-[100px] bg-[#1a1a24] border border-[#2a2a35] rounded-lg flex items-center justify-center overflow-hidden">
+      <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="40" height="36" viewBox="0 0 40 36" fill="none">
+            <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"/>
@@ -176,104 +223,144 @@ export function AIChat() {
            </svg>
          </div>
        </div>
-      </div>
-    </div>
-  )
-
-  const readyOverlay = (
-    <div className="flex-1 flex items-center justify-center">
-      <div className="flex flex-col items-center gap-4">
-        <div className="h-[50px] w-[100px] bg-[#1a1a24] border border-[#2a2a35] rounded-lg flex items-center justify-center">
-          <Check className="h-6 w-6 text-green-400" />
-        </div>
-        <div className="text-center space-y-1">
-          <p className="text-xs text-[#6a6a75]">Try these commands:</p>
-          <div className="flex gap-2">
-            <code className="text-xs px-2 py-1 rounded bg-[#2a2a35] text-[#1BB0CE] flex items-center gap-1"><Terminal className="h-3 w-3" /> lists</code>
-            <code className="text-xs px-2 py-1 rounded bg-[#2a2a35] text-[#1BB0CE] flex items-center gap-1"><Terminal className="h-3 w-3" /> leads</code>
-          </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>
  )

-  if (bootState === "booting") return bootOverlay
+  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 className="flex flex-col h-full">
-      {bootState === "ready" && readyOverlay}
-
-      <div className="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin">
-        {messages.map((msg, i) => (
-          <div key={i} className={`flex gap-3 ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
-            {msg.role === "assistant" && (
-              <div className="h-8 w-8 rounded-full bg-[#1BB0CE]/20 flex items-center justify-center flex-none">
+              <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]" />
                  </div>
                )}
+                <div className={`max-w-[80%] space-y-2 ${
+                  isUser ? "items-end" : "items-start"
+                }`}>
                  <div
-              className={`max-w-[75%] rounded-lg px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap ${
-                msg.role === "user"
-                  ? "bg-[#1BB0CE] text-white"
-                  : "bg-[#1a1a24] text-[#c8c8d0] border border-[#2a2a35]"
+                    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"
                    }`}
                  >
-              {linkifyText(msg.content)}
+                    {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>
-            {msg.role === "user" && (
-              <div className="h-8 w-8 rounded-full bg-[#1BB0CE] flex items-center justify-center flex-none">
+                </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>
                )}
              </div>
-        ))}
+            )
+          })}
          {loading && (
-          <div className="flex gap-3 justify-start">
-            <div className="h-8 w-8 rounded-full bg-[#1BB0CE]/20 flex items-center justify-center flex-none">
+            <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>
-            <div className="max-w-[75%] rounded-lg px-4 py-2.5 bg-[#1a1a24] border border-[#2a2a35]">
-              <svg className="h-4 w-4 animate-spin text-[#1BB0CE]" viewBox="0 0 24 24" fill="none">
-                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" opacity="0.25"/>
-                <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="4" strokeLinecap="round"/>
-              </svg>
+              <div className="rounded-2xl px-4 py-3 bg-[#1a1a24] border border-[#2a2a35] rounded-bl-md shadow-sm">
+                <TypingDots />
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </div>
-
-      <div className="border-t border-[#2a2a35] p-4">
-        {error && (
-          <div className="mb-2 text-xs text-red-400 flex items-center gap-1.5">
-            <AlertCircle className="h-3 w-3" />
-            {error}
      </div>
-        )}
-        <div className="flex gap-2">
-          <textarea
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Ask for sales tips..."
-            rows={1}
-            className="flex-1 bg-[#1a1a24] border border-[#2a2a35] rounded-lg px-3 py-2 text-sm text-[#e8e8ef] placeholder-[#6a6a75] resize-none outline-none focus:border-[#1BB0CE]/50"
-          />
-          <button
-            type="button"
-            onClick={sendMessage}
-            disabled={loading || !input.trim()}
-            className="h-9 w-9 rounded-lg bg-[#1BB0CE] hover:bg-[#1BB0CE]/80 disabled:opacity-40 flex items-center justify-center flex-none transition-colors"
-          >
-            {loading ? (
-              <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
-                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" opacity="0.25"/>
-                <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="4" strokeLinecap="round"/>
-              </svg>
-            ) : <Send className="h-4 w-4" />}
-          </button>
+    )
+  } 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">
+          {!hasMessages && (
+            <div className="flex flex-wrap gap-2">
+              {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"
+                >
+                  <s.icon className="h-3 w-3" />
+                  {s.label}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {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">
+              <AlertCircle className="h-3 w-3 flex-none" />
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-2 items-end">
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              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"
+            />
+            <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"
+            >
+              <Send className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -6,7 +6,7 @@ import { type ThemeProviderProps } from "next-themes"
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return (
    <NextThemesProvider
-      themes={["light", "dark", "system", "ocean", "forest", "sunset", "midnight"]}
+      themes={["light", "dark", "system", "ocean", "forest", "sunset", "midnight", "rose", "amber", "violet", "slate", "ruby"]}
      {...props}
    >
      {children}