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

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

@@ -0,0 +1,313 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,298 @@
+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

@@ -0,0 +1,40 @@
+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}
+          />
+        )
+      )}
+    </>
+  );
+};