סרגל הכפתורים הצף – מדריך טכני מלא

// Context for managing docked buttons
const DockContext = createContext(null);
export const useDock = () => useContext(DockContext);

export function DockProvider({ children, user }) {
  const [dockedButtons, setDockedButtons] = useState(() => {
    const saved = localStorage.getItem(`docked-buttons-${user?.email || 'guest'}`);
    return saved ? JSON.parse(saved) : ['help', 'compass', 'feedback', 'accessibility'];
  });

  const addToDock = (buttonId) => {
    setDockedButtons(prev => {
// ...

const buttons = [];

// 1) עוזר אישי – רק למשתמשים שסיימו אונבורדינג
if (user && user.has_completed_onboarding) {
  buttons.push({
    id: "help", panel: "help",
    gradient: "from-pink-500 via-purple-500 to-pink-600",
    glow: "rgba(236, 72, 153, 0.4)",
    icon: Sparkles, label: "עוזר אישי"
  });
}

// ...

{
  "name": "OnboardingAssistant",
  "description": "AI assistant for OTnest onboarding",
  "instructions": "You are an empathetic onboarding assistant for OTnest - the largest OT community in Israel...
    USER TYPES: student, therapist, expert, parent
    Personalize based on user_type, onboarding progress, club membership.
    Respond in Hebrew. Be concise but helpful.",
  "tool_configs": [
    { "entity_name": "User", "allowed_operations": ["read"] },
    { "entity_name": "DiscussionGroup", "allowed_operations": ["read"] },
    { "entity_name": "Course", "allowed_operations": ["read"] },
    { "entity_name": "Event", "allowed_operations": ["read"] }
// ...

// Initialize conversation
let conversations = await base44.agents.listConversations({ agent_name: "OnboardingAssistant" });
let conv = conversations[0] || await base44.agents.createConversation({
  agent_name: "OnboardingAssistant",
  metadata: { userId: user.id, userEmail: user.email }
});

// Send hidden context message
await base44.agents.addMessage(conv, {
  role: "user",
  content: "context info...",
  is_hidden: true
// ...

import React, { useState, useRef, useEffect } from "react";
import { Link } from "react-router-dom";
import { createPageUrl } from "../../utils";
import { GripVertical, Compass, Accessibility, MessageSquarePlus, Sparkles, X, Send, Loader2, ArrowLeft, Star, Check, Shield } from "lucide-react";
import AdvancedAccessibilityPanel from "@/components/accessibility/AdvancedAccessibilityPanel";
import EnhancedFeedbackWidget from "@/components/feedback/EnhancedFeedbackWidget";
import { motion, AnimatePresence } from "framer-motion";
import { base44 } from "@/api/base44Client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
// ...

import React, { useState, useEffect, useRef, createContext, useContext } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { GripVertical, Plus, X, Check } from "lucide-react";
import { cn } from "@/lib/utils";

const DockContext = createContext(null);
export const useDock = () => useContext(DockContext);

export function DraggableFloatingButton({ id, icon: Icon, label, gradient, glow, solid, onClick, isActive, children }) {
  const { addToDock, isInDock } = useDock();
  const [position, setPosition] = useState(() => {
    const saved = localStorage.getItem(`floating-btn-pos-${id}`);
// ...

import React, { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence, Reorder } from "framer-motion";
import { GripVertical, ChevronsDown, ChevronsUp, Minus, HelpCircle } from "lucide-react";
import { useDock } from "./DockableButtonsSystem";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import FloatingButtonsTour from "./FloatingButtonsTour";

export default function FloatingButtonsDock({ buttons, activePanel, onButtonClick, children }) {
  const { dockedButtons, removeFromDock, reorderDock, isInDock } = useDock();
  const [position, setPosition] = useState(/* localStorage */);
  const [isMinimized, setIsMinimized] = useState(/* localStorage */);
  const [editMode, setEditMode] = useState(false);
// ...