@licklist/design 0.78.5-dev.105 → 0.78.5-dev.107

package/src/v2/shadcn/_reference/ai/AIChatPanel.tsx

@@ -1,313 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ScrollArea } from '../ui/scroll-area';
-import { IconCross, IconNew, IconArrowUp } from '../../../icons';
-import { ChatMessageContent } from './ChatMessageContent';
-import { supabase } from '@/integrations/supabase/client';
-import { useAIChatPanel } from '@/contexts/AIChatPanelContext';
-import { useUser } from '@/contexts/UserContext';
-import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
-
-interface AIChatPanelProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export const AIChatPanel: React.FC<AIChatPanelProps> = ({ isOpen, onClose }) => {
-  const [inputValue, setInputValue] = useState('');
-  const { messages, isLoading, sendMessage, addBotMessage, clearMessages, consumePendingMessage } = useAIChatPanel();
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const scrollYRef = useRef(0);
-  const navigate = useNavigate();
-  const { profile } = useUser();
-  const hasSentPending = useRef(false);
-
-  // Send pending message from search bar when panel opens
-  useEffect(() => {
-    if (isOpen && !hasSentPending.current) {
-      const pending = consumePendingMessage();
-      if (pending) {
-        sendMessage(pending);
-      }
-      hasSentPending.current = true;
-    }
-    if (!isOpen) {
-      hasSentPending.current = false;
-    }
-  }, [isOpen, consumePendingMessage, sendMessage]);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  useEffect(() => {
-    if (isOpen) {
-      // Capture current scroll position and lock body in place
-      // This prevents iOS from scrolling the layout viewport when keyboard opens
-      scrollYRef.current = window.scrollY;
-      document.body.style.position = 'fixed';
-      document.body.style.top = `-${scrollYRef.current}px`;
-      document.body.style.left = '0';
-      document.body.style.right = '0';
-      document.body.style.overflow = 'hidden';
-      setTimeout(() => inputRef.current?.focus(), 300);
-    } else {
-      // Restore body and scroll position
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.left = '';
-      document.body.style.right = '';
-      document.body.style.overflow = '';
-      window.scrollTo(0, scrollYRef.current);
-    }
-    return () => {
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.left = '';
-      document.body.style.right = '';
-      document.body.style.overflow = '';
-    };
-  }, [isOpen]);
-
-  // Prevent any touch-driven scrolling from leaking to the background
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const preventScroll = (e: TouchEvent) => {
-      // Allow scrolling inside the ScrollArea, block everything else
-      const target = e.target as HTMLElement;
-      const scrollArea = panelRef.current?.querySelector('[data-radix-scroll-area-viewport]');
-      if (scrollArea && scrollArea.contains(target)) return;
-      e.preventDefault();
-    };
-
-    document.addEventListener('touchmove', preventScroll, { passive: false });
-    return () => document.removeEventListener('touchmove', preventScroll);
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!inputValue.trim() || isLoading) return;
-    sendMessage(inputValue.trim());
-    setInputValue('');
-    // Re-focus input after submission so user can keep typing
-    setTimeout(() => inputRef.current?.focus(), 0);
-  };
-
-  const handleClose = () => {
-    onClose();
-  };
-
-  const handleNewChat = () => {
-    clearMessages();
-  };
-
-  const handleInteractiveSelect = (value: string) => {
-    sendMessage(value);
-  };
-
-  const handleNavigate = (path: string) => {
-    onClose();
-    navigate(path);
-  };
-
-  const handleInteractiveAction = async (action: string, data?: Record<string, any>) => {
-    if (action === 'cancel') {
-      sendMessage('Cancel this action.');
-      return;
-    }
-    if (action === 'edit') {
-      sendMessage('I want to edit the details.');
-      return;
-    }
-    if (action === 'create_user' && data) {
-      // Show a short user action message
-      sendMessage(`Create ${data.firstName} ${data.lastName}`);
-      try {
-        const { data: sessionData } = await supabase.auth.getSession();
-        if (!sessionData.session) {
-          addBotMessage('❌ Not authenticated. Please log in first.');
-          return;
-        }
-
-        const providers: any[] = [];
-        if (data.providerId) {
-          providers.push({ id: data.providerId, type: 'provider', role: data.role, companyId: data.companyId });
-        }
-        if (data.companyId) {
-          providers.push({ id: data.companyId, type: 'company', role: data.role });
-        }
-
-        const response = await fetch(`${import.meta.env.VITE_SUPABASE_URL}/functions/v1/create-admin-user`, {
-          method: 'POST',
-          headers: {
-            Authorization: `Bearer ${sessionData.session.access_token}`,
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            firstName: data.firstName,
-            lastName: data.lastName,
-            email: data.email,
-            role: data.role,
-            providers: providers.length > 0 ? providers : undefined,
-          }),
-        });
-
-        const result = await response.json();
-        if (!response.ok) throw new Error(result.error || 'Failed to create user');
-
-        const roleName = (data.role || '').replace(/_/g, ' ');
-        addBotMessage(`✅ **${data.firstName} ${data.lastName}** has been created as **${roleName}**. Their temporary password has been generated.`);
-      } catch (err: any) {
-        addBotMessage(`❌ Failed to create user: ${err.message}`);
-      }
-      return;
-    }
-    // Default: send the action as a message
-    sendMessage(action);
-  };
-
-  return (
-    <>
-      {/* Overlay */}
-      <div
-        className="fixed inset-0 z-40 animate-fade-in touch-none"
-        style={{ backgroundColor: 'var(--overlay-curtain)' }}
-        onClick={handleClose}
-        onTouchMove={(e) => e.preventDefault()}
-      />
-
-      {/* Panel — uses inset-0 so it always fills the available viewport,
-          even when the mobile keyboard shrinks the visual viewport */}
-      <div
-        ref={panelRef}
-        className="fixed inset-0 sm:left-auto sm:w-[420px] bg-surface-primary shadow-xl z-50 animate-slide-in-right flex flex-col overscroll-none"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-border-primary flex-shrink-0">
-          <div className="flex items-center gap-2">
-            <div className="bkit-icon-glow"><IconNew size={32} /></div>
-            <h2 className="text-lg font-semibold text-label-primary">Brad Bot</h2>
-          </div>
-          <div className="flex items-center gap-1">
-            {messages.length > 0 && (
-              <button
-                onClick={handleNewChat}
-                className="text-xs font-medium text-label-secondary hover:text-label-primary transition-colors px-2 py-1.5 rounded-lg hover:bg-surface-primary-hover"
-              >
-                Clear
-              </button>
-            )}
-            <button
-              onClick={handleClose}
-              className="p-2 rounded-lg hover:bg-surface-primary-hover transition-colors flex items-center justify-center"
-              aria-label="Close assistant"
-            >
-              <IconCross className="w-5 h-5 text-label-secondary" />
-            </button>
-          </div>
-        </div>
-
-        {/* Messages */}
-        <ScrollArea className="flex-1 min-h-0">
-          <div className="p-4 space-y-3">
-            {messages.length === 0 && (
-              <div className="flex flex-col items-center justify-center py-16 text-center">
-                <div className="mb-4 opacity-50 text-fill-secondary"><IconNew size={48} /></div>
-                <h3 className="text-sm font-semibold text-label-primary mb-1">Brad Bot</h3>
-                <p className="text-xs text-label-secondary max-w-[260px]">
-                  Search, query data, or make changes across your dashboard.
-                </p>
-              </div>
-            )}
-            {messages.map((msg) => (
-              <div
-                key={msg.id}
-                className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}
-              >
-                {/* Identity row */}
-                <div className={`flex items-center gap-1.5 mb-1 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
-                  {msg.role === 'user' ? (
-                    <>
-                      <Avatar className="h-5 w-5">
-                        {profile?.avatarUrl && <AvatarImage src={profile.avatarUrl} alt={profile.fullName} />}
-                        <AvatarFallback className="text-[10px] bg-surface-tertiary text-label-secondary">
-                          {profile?.initials || '?'}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span className="text-xs font-semibold text-label-secondary">{profile?.firstName || 'You'}</span>
-                    </>
-                  ) : (
-                    <>
-                      <div className="text-fill-secondary"><IconNew size={16} /></div>
-                      <span className="text-xs font-semibold text-label-secondary">Brad Bot</span>
-                    </>
-                  )}
-                </div>
-                <div className={`max-w-[90%] rounded-lg px-4 py-2.5 text-sm ${
-                  msg.role === 'user'
-                    ? 'bg-surface-primary border border-border-primary text-label-primary'
-                    : 'bg-surface-tertiary text-label-primary'
-                }`}>
-                  {msg.role === 'assistant' ? (
-                    <ChatMessageContent
-                      content={msg.content}
-                      onSelect={handleInteractiveSelect}
-                      onAction={handleInteractiveAction}
-                      onNavigate={handleNavigate}
-                      disabled={isLoading}
-                    />
-                  ) : (
-                    <div className="whitespace-pre-wrap">{msg.content}</div>
-                  )}
-                </div>
-              </div>
-            ))}
-            {isLoading && messages[messages.length - 1]?.role === 'user' && (
-              <div className="flex justify-start">
-                <div className="bg-surface-tertiary rounded-lg px-4 py-2.5">
-                  <div className="flex items-center gap-1.5 mb-1">
-                    <div className="bkit-icon-glow"><IconNew size={16} /></div>
-                    <span className="text-xs font-semibold text-label-secondary">Brad Bot</span>
-                  </div>
-                  <div className="flex gap-1.5">
-                    <span className="w-2 h-2 rounded-full bkit-thinking-dot" />
-                    <span className="w-2 h-2 rounded-full bkit-thinking-dot [animation-delay:0.2s]" />
-                    <span className="w-2 h-2 rounded-full bkit-thinking-dot [animation-delay:0.4s]" />
-                  </div>
-                </div>
-              </div>
-            )}
-            <div ref={messagesEndRef} />
-          </div>
-        </ScrollArea>
-
-        {/* Input */}
-        <div className="border-t border-border-primary p-4 pb-[max(1rem,env(safe-area-inset-bottom))] flex-shrink-0">
-          <form onSubmit={handleSubmit} className="flex items-center gap-2">
-            <input
-              ref={inputRef}
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              className="flex-1 h-10 rounded-lg border border-border-primary bg-surface-primary px-3 text-base text-label-primary focus:outline-none focus:border-border-selected"
-              placeholder="Ask Brad Bot anything..."
-            />
-            <button
-              type="submit"
-              className="h-10 w-10 flex-shrink-0 flex items-center justify-center rounded-lg bg-fill-action transition-opacity"
-              aria-label="Send message"
-            >
-              <IconArrowUp size={24} className="[&_path]:!fill-white" />
-            </button>
-          </form>
-        </div>
-      </div>
-    </>
-  );
-};

package/src/v2/shadcn/_reference/ai/AIChatSearchBar.tsx

@@ -1,36 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { IconNew } from '../../../icons';
-import { useAIChatPanel } from '@/contexts/AIChatPanelContext';
-
-const AIChatSearchBar: React.FC = () => {
-  const [inputValue, setInputValue] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { openPanelWithMessage } = useAIChatPanel();
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!inputValue.trim()) return;
-    openPanelWithMessage(inputValue.trim());
-    setInputValue('');
-  };
-
-  return (
-    <div className="w-full pt-6">
-      <div className="w-full rounded-xl border border-border-primary bg-surface-secondary">
-        <form onSubmit={handleSubmit} className="flex items-center gap-3 p-3">
-          <div className="w-8 h-8 flex-shrink-0 bkit-icon-glow"><IconNew size={32} /></div>
-          <input
-            ref={inputRef}
-            type="text"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            className="flex-1 bg-transparent text-[16px] text-label-primary focus:outline-none"
-            placeholder="Ask Brad Bot anything..."
-          />
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default AIChatSearchBar;

package/src/v2/shadcn/_reference/ai/ChatInteractiveBlock.tsx

@@ -1,298 +0,0 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { format } from 'date-fns';
-import { Button } from '../ui/button';
-import { Calendar } from '../ui/calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
-import type {
-  InteractiveBlock,
-  RadioSelectBlock,
-  UserCardBlock,
-  ActionButtonsBlock,
-  QuickActionsBlock,
-  EntityCardBlock,
-} from './parseInteractiveBlocks';
-
-interface ChatInteractiveBlockProps {
-  block: InteractiveBlock;
-  onSelect?: (value: string) => void;
-  onAction?: (action: string, data?: Record<string, any>) => void;
-  onNavigate?: (path: string) => void;
-  disabled?: boolean;
-}
-
-const RadioSelect: React.FC<{
-  block: RadioSelectBlock;
-  onSelect?: (value: string) => void;
-  disabled?: boolean;
-}> = ({ block, onSelect, disabled }) => {
-  const [selected, setSelected] = useState<string | null>(null);
-
-  const handleSelect = (value: string) => {
-    if (disabled || selected) return;
-    setSelected(value);
-    onSelect?.(value);
-  };
-
-  return (
-    <div className="flex flex-col gap-1.5 mt-2">
-      {block.options.map((opt) => (
-        <button
-          key={opt.value}
-          onClick={() => handleSelect(opt.value)}
-          disabled={disabled || !!selected}
-          className={`flex flex-col items-start gap-0.5 px-3 py-2 rounded-lg border text-left transition-colors ${
-            selected === opt.value
-              ? 'border-border-selected bg-surface-action-soft'
-              : selected
-                ? 'border-border-primary bg-surface-secondary opacity-50'
-                : 'border-border-primary bg-surface-secondary hover:bg-surface-primary-hover'
-          } ${disabled || selected ? 'cursor-default' : 'cursor-pointer'}`}
-        >
-          <span className="text-sm font-medium text-label-primary">{opt.label}</span>
-          {opt.description && (
-            <span className="text-xs text-label-secondary">{opt.description}</span>
-          )}
-        </button>
-      ))}
-    </div>
-  );
-};
-
-const UserCard: React.FC<{ block: UserCardBlock }> = ({ block }) => {
-  const initials = `${block.firstName.charAt(0)}${block.lastName.charAt(0)}`.toUpperCase();
-  const roleName = (block.roleLabel || block.role || '').replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
-  const assignmentName = block.providerName || block.companyName;
-
-  return (
-    <div className="flex items-start gap-3 p-3 bg-surface-primary border border-border-primary rounded-lg mt-2 min-w-[320px]">
-      <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-surface-tertiary border border-border-primary">
-        <span className="text-label-secondary font-bold text-sm">{initials}</span>
-      </div>
-      <div className="flex flex-col gap-1 flex-1 min-w-0">
-        <span className="text-label-primary font-medium text-sm">{block.firstName} {block.lastName}</span>
-        <span className="text-label-secondary text-xs truncate">{block.email}</span>
-        <div className="flex flex-wrap items-center gap-1.5 mt-0.5">
-          {roleName && (
-            <div className="flex justify-center items-center gap-2 bg-surface-tertiary px-2 py-1 rounded-lg w-fit">
-              <span className="text-label-secondary text-[10px] leading-3 font-mono font-semibold whitespace-nowrap">
-                {roleName}
-              </span>
-            </div>
-          )}
-          {assignmentName && (
-            <div className="flex justify-center items-center gap-2 bg-surface-tertiary px-2 py-1 rounded-lg w-fit">
-              <span className="text-label-secondary text-[10px] leading-3 font-mono font-semibold whitespace-nowrap">
-                {assignmentName}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const ActionButtons: React.FC<{
-  block: ActionButtonsBlock;
-  onAction?: (action: string, data?: Record<string, any>) => void;
-  disabled?: boolean;
-}> = ({ block, onAction, disabled }) => {
-  const [clicked, setClicked] = useState<string | null>(null);
-
-  const handleClick = (btn: typeof block.buttons[0]) => {
-    if (disabled || clicked) return;
-    setClicked(btn.action);
-    onAction?.(btn.action, btn.data);
-  };
-
-  const variantMap: Record<string, any> = {
-    primary: 'default',
-    ghost: 'ghost',
-    cancel: 'cancel',
-    destructive: 'destructive',
-  };
-
-  return (
-    <div className="flex flex-col gap-1.5 mt-2">
-      {block.buttons.map((btn) => (
-        <Button
-          key={btn.action}
-          variant={variantMap[btn.variant] || 'default'}
-          size="sm"
-          onClick={() => handleClick(btn)}
-          disabled={disabled || !!clicked}
-          className={`w-full ${btn.variant === 'ghost' ? 'bg-surface-primary' : ''} ${clicked && clicked !== btn.action ? 'opacity-50' : ''}`}
-        >
-          {clicked === btn.action ? 'Processing...' : btn.label}
-        </Button>
-      ))}
-    </div>
-  );
-};
-
-const QuickActions: React.FC<{
-  block: QuickActionsBlock;
-  onSelect?: (value: string) => void;
-  disabled?: boolean;
-}> = ({ block, onSelect, disabled }) => {
-  const [clicked, setClicked] = useState<string | null>(null);
-  const [datePickerAction, setDatePickerAction] = useState<string | null>(null);
-  const [selectedDate, setSelectedDate] = useState<Date>();
-
-  const handleClick = (action: typeof block.actions[0]) => {
-    if (disabled || clicked) return;
-
-    if (action.type === 'date-picker') {
-      setDatePickerAction(action.action);
-      return;
-    }
-
-    setClicked(action.action);
-    onSelect?.(action.action);
-  };
-
-  const handleDateSelect = (date: Date | undefined) => {
-    if (!date || !datePickerAction) return;
-    setSelectedDate(date);
-    const formatted = format(date, 'do MMMM yyyy');
-    setClicked(datePickerAction);
-    setDatePickerAction(null);
-    onSelect?.(`Show bookings for ${formatted}`);
-  };
-
-  return (
-    <div className="flex flex-col gap-1.5 mt-2">
-      {block.actions.map((action) => (
-        action.type === 'date-picker' ? (
-          <Popover key={action.action} open={datePickerAction === action.action} onOpenChange={(open) => !open && setDatePickerAction(null)}>
-            <PopoverTrigger asChild>
-              <button
-                onClick={() => handleClick(action)}
-                disabled={disabled || !!clicked}
-                className={`flex items-center gap-2 px-3 py-2.5 rounded-lg border text-left transition-colors ${
-                  clicked === action.action
-                    ? 'border-border-selected bg-surface-action-soft'
-                    : clicked
-                      ? 'border-border-primary bg-surface-secondary opacity-50'
-                      : 'border-border-primary bg-surface-secondary hover:bg-surface-primary-hover'
-                } ${disabled || clicked ? 'cursor-default' : 'cursor-pointer'}`}
-              >
-                <span className="text-sm font-medium text-label-primary">{action.label}</span>
-              </button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start" side="top">
-              <Calendar
-                mode="single"
-                selected={selectedDate}
-                onSelect={handleDateSelect}
-                className="p-3 pointer-events-auto"
-              />
-            </PopoverContent>
-          </Popover>
-        ) : (
-          <button
-            key={action.action}
-            onClick={() => handleClick(action)}
-            disabled={disabled || !!clicked}
-            className={`flex items-center gap-2 px-3 py-2.5 rounded-lg border text-left transition-colors ${
-              clicked === action.action
-                ? 'border-border-selected bg-surface-action-soft'
-                : clicked
-                  ? 'border-border-primary bg-surface-secondary opacity-50'
-                  : 'border-border-primary bg-surface-secondary hover:bg-surface-primary-hover'
-            } ${disabled || clicked ? 'cursor-default' : 'cursor-pointer'}`}
-          >
-            <span className="text-sm font-medium text-label-primary">{action.label}</span>
-          </button>
-        )
-      ))}
-    </div>
-  );
-};
-
-const EntityCards: React.FC<{
-  block: EntityCardBlock;
-  onNavigate?: (path: string) => void;
-}> = ({ block, onNavigate }) => {
-  const getEntityPath = (item: typeof block.items[0]): string | null => {
-    const providerPrefix = item.providerType === 'promoter' ? 'promoter' : 'venue';
-
-    switch (item.entityType) {
-      case 'customer':
-        if (item.providerId) return `/${providerPrefix}/${item.providerId}/customers/${item.id}`;
-        return `/admin/customers/${item.id}`;
-      case 'user':
-        if (item.providerId) return `/${providerPrefix}/${item.providerId}/users/${item.id}`;
-        return `/admin/users/${item.id}`;
-      case 'provider':
-        return `/admin/providers/${item.id}`;
-      case 'company':
-        return `/admin/companies/${item.id}`;
-      default:
-        return null;
-    }
-  };
-
-  const getInitials = (name: string): string => {
-    return name
-      .split(' ')
-      .map((w) => w.charAt(0))
-      .slice(0, 2)
-      .join('')
-      .toUpperCase();
-  };
-
-  return (
-    <div className="flex flex-col gap-1.5 mt-2">
-      {block.items.map((item) => {
-        const path = getEntityPath(item);
-        return (
-          <button
-            key={item.id}
-            onClick={() => path && onNavigate?.(path)}
-            className="flex items-center gap-3 p-3 bg-surface-secondary border border-border-primary rounded-lg text-left transition-colors hover:bg-surface-primary-hover cursor-pointer"
-          >
-            <div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-surface-tertiary border border-border-primary">
-              <span className="text-label-secondary font-semibold text-xs">{getInitials(item.name)}</span>
-            </div>
-            <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-              <span className="text-sm font-medium text-label-primary">{item.name}</span>
-              {item.subtitle && (
-                <span className="text-xs text-label-secondary truncate">{item.subtitle}</span>
-              )}
-            </div>
-            {item.badge && (
-              <span className="text-xs font-medium text-label-secondary bg-surface-tertiary px-2 py-0.5 rounded flex-shrink-0">
-                {item.badge}
-              </span>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
-export const ChatInteractiveBlock: React.FC<ChatInteractiveBlockProps> = ({
-  block,
-  onSelect,
-  onAction,
-  onNavigate,
-  disabled,
-}) => {
-  switch (block.type) {
-    case 'radio-select':
-      return <RadioSelect block={block} onSelect={onSelect} disabled={disabled} />;
-    case 'user-card':
-      return <UserCard block={block} />;
-    case 'action-buttons':
-      return <ActionButtons block={block} onAction={onAction} disabled={disabled} />;
-    case 'quick-actions':
-      return <QuickActions block={block} onSelect={onSelect} disabled={disabled} />;
-    case 'entity-card':
-      return <EntityCards block={block} onNavigate={onNavigate} />;
-    default:
-      return null;
-  }
-};

package/src/v2/shadcn/_reference/ai/ChatMessageContent.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { parseMessageContent } from './parseInteractiveBlocks';
-import { ChatInteractiveBlock } from './ChatInteractiveBlock';
-
-interface ChatMessageContentProps {
-  content: string;
-  onSelect?: (value: string) => void;
-  onAction?: (action: string, data?: Record<string, any>) => void;
-  onNavigate?: (path: string) => void;
-  disabled?: boolean;
-}
-
-export const ChatMessageContent: React.FC<ChatMessageContentProps> = ({
-  content,
-  onSelect,
-  onAction,
-  onNavigate,
-  disabled,
-}) => {
-  const segments = parseMessageContent(content);
-
-  return (
-    <>
-      {segments.map((seg, i) =>
-        seg.kind === 'text' ? (
-          <div key={i} className="whitespace-pre-wrap">{seg.content}</div>
-        ) : (
-          <ChatInteractiveBlock
-            key={i}
-            block={seg.block}
-            onSelect={onSelect}
-            onAction={onAction}
-            onNavigate={onNavigate}
-            disabled={disabled}
-          />
-        )
-      )}
-    </>
-  );
-};