refactor: rename mascot to chatbot across entire codebase

- Backend: mascot-chat module → chatbot, routes /mascot/chat → /chat - Shared schema: pgMascotChatMessagesTable → pgChatbotMessagesTable - Frontend: MascotProvider/useMascot → ChatbotProvider/useChatbot - Gateway schema: update exports to match shared schema - Docs: update all .md references (CLAUDE.md, README, specs, plans) - All API routes, controller names, service classes, types renamed Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-28 15:00:29 +07:00
parent bd9e7d8151
commit 977a6f9653
38 changed files with 243 additions and 1221 deletions
@@ -0,0 +1,114 @@
+"use client";
+
+import { useRef, useState, useCallback, useEffect } from "react";
+import { Bot, MessageCircle, Minimize2 } from "lucide-react";
+import { useChatbot } from "./chatbot-context";
+import { ChatbotCanvas } from "./chatbot-canvas";
+import { ChatPanel } from "./chat-panel";
+
+export function ChatbotContainer() {
+  const { minimized, setMinimized, chatOpen, setChatOpen } = useChatbot();
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    setDragging(true);
+    setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+  }, [position]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!dragging) return;
+    setPosition({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
+  }, [dragging, dragStart]);
+
+  const handleMouseUp = useCallback(() => setDragging(false), []);
+
+  // Focus input when chat opens
+  useEffect(() => {
+    if (chatOpen) {
+      // Small delay for the animation
+      const id = setTimeout(() => inputRef.current?.focus(), 150);
+      return () => clearTimeout(id);
+    }
+  }, [chatOpen]);
+
+  return (
+    <div
+      className="fixed bottom-4 right-4 z-40 select-none"
+      style={{ transform: `translate(${position.x}px, ${position.y}px)` }}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      {/* Main chatbot bubble */}
+      <div
+        className={`glass-intense rounded-2xl overflow-hidden transition-all duration-200 ${
+          minimized ? "w-14 h-14 cursor-pointer" : "w-[220px]"
+        }`}
+        style={{ height: minimized ? 56 : 320 }}
+      >
+        {minimized ? (
+          <button
+            type="button"
+            onClick={() => setMinimized(false)}
+            className="w-full h-full flex items-center justify-center"
+            onMouseDown={handleMouseDown}
+            aria-label="Open chatbot"
+          >
+            <Bot className="size-6 text-primary" />
+          </button>
+        ) : (
+          <>
+            {/* Drag handle + controls */}
+            <div
+              className="flex items-center justify-between px-3 py-1.5 border-b border-glass-border cursor-grab active:cursor-grabbing"
+              onMouseDown={handleMouseDown}
+            >
+              <span className="text-[10px] font-semibold text-text-secondary tracking-wide uppercase">
+                Chatbot
+              </span>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={() => setChatOpen(!chatOpen)}
+                  className="size-5 flex items-center justify-center rounded hover:bg-glass-bg transition-colors"
+                  aria-label={chatOpen ? "Close chat" : "Open chat"}
+                >
+                  <MessageCircle className="size-3 text-text-secondary/60 hover:text-text-primary" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setMinimized(true)}
+                  className="size-5 flex items-center justify-center rounded hover:bg-glass-bg transition-colors"
+                  aria-label="Minimize chatbot"
+                >
+                  {minimized ? (
+                    <Bot className="size-3 text-text-secondary/60 hover:text-text-primary" />
+                  ) : (
+                    <Minimize2 className="size-3 text-text-secondary/60 hover:text-text-primary" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Canvas area */}
+            <div className="h-[140px] flex items-center justify-center">
+              <ChatbotCanvas />
+            </div>
+
+            {/* Chat panel (expandable) */}
+            <div
+              className={`transition-all duration-200 overflow-hidden ${
+                chatOpen ? "h-[130px]" : "h-0"
+              }`}
+            >
+              <ChatPanel inputRef={inputRef} />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}