AI Chat page looks better. Caitlin is my witness

src/components/ai/ai-chat.tsx

@@ -1,33 +1,80 @@
 "use client"
 
-import { useState, useRef, useEffect, Fragment } from "react"
-import { Send, Bot, User, RefreshCw, AlertCircle, Check, Terminal } from "lucide-react"
+import { useState, useRef, useEffect, Fragment, forwardRef, useImperativeHandle, useCallback } from "react"
+import { Bot, Terminal } 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-[#f97316] hover:text-[#f97316]/80">{part}</a>
     }
     return <Fragment key={i}>{part}</Fragment>
   })
 }
 
+function formatContent(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-[#f97316] 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
 }
 
-export function AIChat() {
+interface AIChatProps {
+  onMessageSent?: (msg: string) => void
+}
+
+const quickActions = [
+  { icon: "✉️", iconBg: "bg-[#f97316]/10", iconColor: "text-[#f97316]", title: "Cold Email Template", desc: "Generate targeted outreach emails", prompt: "Write a cold email template for a Software Developer" },
+  { icon: "🛡️", iconBg: "bg-[#3b82f6]/10", iconColor: "text-[#3b82f6]", title: "Handle Objections", desc: "Get scripts for common objections", prompt: "Give me objection handling scripts for sales" },
+  { icon: "🎯", iconBg: "bg-[#8b5cf6]/10", iconColor: "text-[#8b5cf6]", title: "Target Industry", desc: "Find leads in specific industries", prompt: "How do I target leads in the tech industry" },
+  { icon: "📋", iconBg: "bg-[#22c55e]/10", iconColor: "text-[#22c55e]", title: "Build Lead List", desc: "Strategies to grow your pipeline", prompt: "Help me build a lead list strategy" },
+  { icon: "📞", iconBg: "bg-[#f97316]/10", iconColor: "text-[#f97316]", title: "Call Scripts", desc: "Proven phone sales scripts", prompt: "Give me a cold call script for outreach" },
+  { icon: "📊", iconBg: "bg-[#ec4899]/10", iconColor: "text-[#ec4899]", title: "Sales Strategy", desc: "Industry specific sales tactics", prompt: "What sales strategies work best per industry" },
+]
+
+const commandPills = [
+  { icon: "📋", label: "Lists", prompt: "lists" },
+  { icon: "👥", label: "Leads", prompt: "leads" },
+  { icon: "💡", label: "Tips", prompt: "Give me some sales tips" },
+  { icon: "✉️", label: "Templates", prompt: "Show me email templates" },
+]
+
+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 messagesEndRef = useRef<HTMLDivElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const hasUserMessage = messages.some(m => m.role === "user")
 
-  const checkServer = async () => {
+  useImperativeHandle(ref, () => ({
+    fillInput(text: string) {
+      setInput(text)
+      setTimeout(() => textareaRef.current?.focus(), 50)
+    },
+  }), [])
+
+  const checkServer = useCallback(async () => {
     try {
       const res = await fetch("/api/ai/chat", {
         method: "POST",
@@ -42,7 +89,7 @@ export function AIChat() {
     } catch {
       setTimeout(checkServer, 2000)
     }
-  }
+  }, [])
 
   useEffect(() => {
     fetch("/api/ai/jobs")
@@ -74,18 +121,19 @@ export function AIChat() {
         ])
       })
     checkServer()
-  }, [])
+  }, [checkServer])
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
   }, [messages])
 
-  const sendMessage = async () => {
-    const msg = input.trim()
+  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)
 
@@ -113,167 +161,211 @@ 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 handleTextareaInput = useCallback((e: React.FormEvent<HTMLTextAreaElement>) => {
+    const t = e.target as HTMLTextAreaElement
+    t.style.height = "auto"
+    t.style.height = t.scrollHeight + "px"
+  }, [])
+
+  const handleQuickAction = useCallback((prompt: string) => {
+    setInput(prompt)
+    setTimeout(() => sendMessage(prompt), 50)
+  }, [sendMessage])
+
+  const handleCommandPill = useCallback((prompt: string) => {
+    setInput(prompt)
+    setTimeout(() => sendMessage(prompt), 50)
+  }, [sendMessage])
+
+  if (bootState === "booting") {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="flex flex-col items-center gap-5">
+          <p className="text-sm text-[#6b7280] animate-pulse">Servers booting...</p>
+          <div className="h-[56px] w-[110px] bg-[#1a1d2e] border border-[#ffffff0f] 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="#f97316" opacity="0.9"/>
+                <rect x="6" y="6" width="6" height="2" rx="1" className="robot-arm-l" fill="#f97316" opacity="0.7"/>
+                <rect x="28" y="6" width="6" height="2" rx="1" className="robot-arm-r" fill="#f97316" opacity="0.7"/>
+                <rect x="14" y="5" width="4" height="4" rx="1" fill="#0f1117"/>
+                <rect x="22" y="5" width="4" height="4" rx="1" fill="#0f1117"/>
+                <circle cx="16" cy="7" r="1.5" className="robot-eye" fill="#f97316"/>
+                <circle cx="24" cy="7" r="1.5" className="robot-eye" fill="#f97316"/>
+                <rect x="17" y="10" width="6" height="2" rx="1" fill="#0f1117"/>
+                <rect x="12" y="18" width="5" height="10" rx="2" className="robot-leg-l" fill="#f97316" opacity="0.8"/>
+                <rect x="23" y="18" width="5" height="10" rx="2" className="robot-leg-r" fill="#f97316" opacity="0.8"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
   }
 
-  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-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="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="#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>
+  if (bootState === "ready" && !hasUserMessage) {
+    return (
+      <div className="flex-1 flex flex-col overflow-y-auto" style={{ backgroundImage: "radial-gradient(circle, #ffffff08 1px, transparent 1px)", backgroundSize: "24px 24px" }}>
+        <div className="flex-1 flex items-center justify-center">
+          <div className="max-w-lg mx-auto pt-12 pb-6 px-4">
+            <div className="float-in">
+              <div className="w-16 h-16 rounded-2xl mx-auto mb-6 bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center shadow-[0_0_40px_rgba(249,115,22,0.3)]">
+                <Bot className="h-8 w-8 text-white" />
+              </div>
+              <h2 className="text-white font-bold text-2xl text-center mb-2">What can I help you with?</h2>
+              <p className="text-[#6b7280] text-sm text-center mb-8 leading-relaxed">Your AI sales assistant is ready. Choose a quick action or type your question below.</p>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              {quickActions.map((action, i) => (
+                <div
+                  key={i}
+                  onClick={() => handleQuickAction(action.prompt)}
+                  className="float-in bg-[#1a1d2e] hover:bg-[#1f2437] rounded-xl p-4 border border-[#ffffff0a] hover:border-[#f97316]/30 cursor-pointer transition-all duration-200 hover:shadow-[0_4px_20px_rgba(249,115,22,0.1)] hover:-translate-y-0.5"
+                  style={{ animationDelay: `${0.1 + i * 0.05}s` }}
+                >
+                  <div className={`w-9 h-9 rounded-lg ${action.iconBg} ${action.iconColor} flex items-center justify-center text-lg`}>{action.icon}</div>
+                  <h3 className="text-white text-sm font-medium mt-3">{action.title}</h3>
+                  <p className="text-[#6b7280] text-xs mt-1">{action.desc}</p>
+                </div>
+              ))}
+            </div>
+            <div className="flex gap-2 justify-center mt-6 flex-wrap">
+              {commandPills.map((pill, i) => (
+                <div
+                  key={i}
+                  onClick={() => handleCommandPill(pill.prompt)}
+                  className="bg-[#1a1d2e] border border-[#ffffff0f] hover:border-[#f97316]/40 hover:bg-[#1f2437] rounded-full px-4 py-2 text-xs text-[#9ca3af] hover:text-[#f97316] transition-all duration-200 cursor-pointer flex items-center gap-1.5"
+                >
+                  <span>{pill.icon}</span>
+                  <span>{pill.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="sticky bottom-0 bg-[#0f1117]/95 backdrop-blur-md border-t border-[#ffffff08] px-4 py-4">
+          <div className="max-w-3xl mx-auto">
+            <div className="bg-[#1a1d2e] rounded-2xl border border-[#ffffff0a] focus-within:border-[#f97316]/40 focus-within:shadow-[0_0_20px_rgba(249,115,22,0.08)] transition-all duration-200 flex items-end gap-3 px-4 py-3">
+              <button type="button" className="w-8 h-8 rounded-lg text-[#4b5563] hover:text-[#f97316] hover:bg-[#ffffff08] flex items-center justify-center transition-colors duration-200 flex-shrink-0 text-lg">📎</button>
+              <textarea
+                ref={textareaRef}
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onInput={handleTextareaInput}
+                onKeyDown={handleKeyDown}
+                placeholder="Ask for sales tips..."
+                rows={1}
+                className="bg-transparent flex-1 text-[#e5e7eb] text-sm placeholder-[#4b5563] resize-none outline-none min-h-[24px] max-h-[200px] overflow-y-auto leading-6"
+              />
+              <button
+                type="button"
+                onClick={() => sendMessage()}
+                disabled={!input.trim()}
+                className={`w-9 h-9 rounded-xl flex-shrink-0 bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center text-white transition-all duration-200 ${input.trim() ? "hover:shadow-[0_0_20px_rgba(249,115,22,0.4)] hover:scale-105 active:scale-95" : "opacity-40 cursor-not-allowed"}`}
+              >
+                ➤
+              </button>
+            </div>
+            <div className="flex justify-between items-center mt-2 px-1">
+              <span className="text-[#374151] text-[10px]">Shift + Enter for new line</span>
+              <span className="text-[#374151] text-[10px]">{input.length} / 2000</span>
+            </div>
           </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>
-      </div>
-    </div>
-  )
-
-  if (bootState === "booting") return bootOverlay
+    )
+  }
 
   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">
-                <Bot className="h-4 w-4 text-[#1BB0CE]" />
+    <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, #ffffff08 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-[#f97316] to-[#ea580c] flex items-center justify-center text-white text-sm flex-shrink-0">
+                    <Bot className="h-4 w-4" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="bg-[#1a1d2e] rounded-2xl rounded-tl-sm border border-[#ffffff08] border-l-2 border-l-[#f97316] px-5 py-4 max-w-[85%]">
+                      <div className="text-[#e5e7eb] text-sm leading-7 whitespace-pre-wrap">{formatContent(msg.content)}</div>
+                    </div>
+                    <div className="text-[#4b5563] text-[10px] mt-1">AI Assistant</div>
+                  </div>
+                </div>
+              ) : (
+                <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-[#f97316] to-[#ea580c] rounded-2xl rounded-tr-sm px-5 py-4 max-w-[75%]">
+                      <div className="text-white text-sm leading-7 whitespace-pre-wrap">{msg.content}</div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+          {loading && (
+            <div className="flex gap-3 items-start">
+              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center text-white text-sm flex-shrink-0">
+                <Bot className="h-4 w-4" />
               </div>
-            )}
-            <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]"
-              }`}
-            >
-              {linkifyText(msg.content)}
-            </div>
-            {msg.role === "user" && (
-              <div className="h-8 w-8 rounded-full bg-[#1BB0CE] flex items-center justify-center flex-none">
-                <User className="h-4 w-4 text-white" />
+              <div className="bg-[#1a1d2e] rounded-2xl rounded-tl-sm border border-[#ffffff08] border-l-2 border-l-[#f97316] px-5 py-4 inline-flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-[#f97316] dot-1" />
+                <span className="w-2 h-2 rounded-full bg-[#f97316] dot-2" />
+                <span className="w-2 h-2 rounded-full bg-[#f97316] dot-3" />
               </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">
-              <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>
-          </div>
-        )}
-        <div ref={messagesEndRef} />
+          )}
+          <div ref={messagesEndRef} />
+        </div>
       </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 className="sticky bottom-0 bg-[#0f1117]/95 backdrop-blur-md border-t border-[#ffffff08] px-4 py-4">
+        <div className="max-w-3xl mx-auto">
+          {error && (
+            <div className="mb-2.5 text-xs text-red-400 flex items-center gap-1.5">
+              <span>⚠️</span>
+              {error}
+            </div>
+          )}
+          <div className="bg-[#1a1d2e] rounded-2xl border border-[#ffffff0a] focus-within:border-[#f97316]/40 focus-within:shadow-[0_0_20px_rgba(249,115,22,0.08)] transition-all duration-200 flex items-end gap-3 px-4 py-3">
+            <button type="button" className="w-8 h-8 rounded-lg text-[#4b5563] hover:text-[#f97316] hover:bg-[#ffffff08] flex items-center justify-center transition-colors duration-200 flex-shrink-0 text-lg">📎</button>
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onInput={handleTextareaInput}
+              onKeyDown={handleKeyDown}
+              placeholder="Ask for sales tips..."
+              rows={1}
+              className="bg-transparent flex-1 text-[#e5e7eb] text-sm placeholder-[#4b5563] resize-none outline-none min-h-[24px] max-h-[200px] overflow-y-auto leading-6"
+            />
+            <button
+              type="button"
+              onClick={() => sendMessage()}
+              disabled={!input.trim()}
+              className={`w-9 h-9 rounded-xl flex-shrink-0 bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center text-white transition-all duration-200 ${input.trim() ? "hover:shadow-[0_0_20px_rgba(249,115,22,0.4)] hover:scale-105 active:scale-95" : "opacity-40 cursor-not-allowed"}`}
+            >
+              ➤
+            </button>
+          </div>
+          <div className="flex justify-between items-center mt-2 px-1">
+            <span className="text-[#374151] text-[10px]">Shift + Enter for new line</span>
+            <span className="text-[#374151] text-[10px]">{input.length} / 2000</span>
           </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>
         </div>
       </div>
     </div>
   )
-}
+})
+
+AIChat.displayName = "AIChat"

src/components/ai/job-selector.tsx

@@ -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-[#f97316]/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-[#f97316] 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-[#f97316]" /> : <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-[#f97316]/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} &mdash; {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>
         </>