@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/src/components/library/chat/ChatInput.tsx

@@ -1,91 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { PaperAirplaneIcon, StopCircleIcon } from "@heroicons/react/24/solid";
-
-export interface ChatInputProps {
-  onSend?: (content: string) => void;
-  disabled?: boolean;
-  isLoading?: boolean;
-  onStop?: () => void;
-  placeholder?: string;
-  maxRows?: number;
-}
-
-/**
- * Chat input with auto-resize textarea, Send button, and keyboard shortcuts.
- * Enter sends, Shift+Enter inserts newline.
- */
-export default function ChatInput({
-  onSend,
-  disabled = false,
-  isLoading = false,
-  onStop,
-  placeholder = "Type a message…",
-  maxRows = 6,
-}: ChatInputProps) {
-  const [value, setValue] = useState("");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    const ta = textareaRef.current;
-    if (!ta) return;
-    ta.style.height = "auto";
-    const lineHeight = 22;
-    const maxHeight = lineHeight * maxRows;
-    ta.style.height = `${Math.min(ta.scrollHeight, maxHeight)}px`;
-  }, [value, maxRows]);
-
-  function handleSend() {
-    if (!value.trim() || disabled) return;
-    onSend?.(value);
-    setValue("");
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "auto";
-    }
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  }
-
-  const canSend = value.trim().length > 0 && !disabled;
-
-  return (
-    <div className="flex items-end gap-2 rounded-xl border border-slate-200 bg-white p-2 shadow-sm transition-colors focus-within:border-brand-300 focus-within:ring-2 focus-within:ring-brand-500/20 dark:border-slate-700 dark:bg-slate-900 dark:focus-within:border-brand-700 dark:focus-within:ring-brand-400/20">
-      <textarea
-        ref={textareaRef}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        disabled={disabled}
-        rows={1}
-        className="max-h-36 min-h-[22px] flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:text-slate-50 dark:placeholder:text-slate-500"
-        aria-label="Chat message input"
-      />
-
-      {isLoading && onStop ? (
-        <button
-          type="button"
-          onClick={onStop}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300"
-          aria-label="Stop generating"
-        >
-          <StopCircleIcon className="h-5 w-5" />
-        </button>
-      ) : (
-        <button
-          type="button"
-          onClick={handleSend}
-          disabled={!canSend}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-white transition hover:bg-brand-500 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-brand-500 dark:hover:bg-brand-400"
-          aria-label="Send message"
-        >
-          <PaperAirplaneIcon className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/library/chat/ChatMessage.tsx

@@ -1,191 +0,0 @@
-import React from "react";
-import { renderSchemaComponent, type SchemaComponent } from "@/components/workspace/ComponentRegistry";
-import ChatToolCall, { ToolCall } from "./ChatToolCall";
-import { UserCircleIcon, CpuChipIcon } from "@heroicons/react/24/solid";
-
-function cx(...classes: (string | boolean | undefined)[]): string {
-  return classes.filter(Boolean).join(" ");
-}
-
-/**
- * Lightweight inline formatter for assistant messages.
- * Handles code blocks, inline code, bold, italic, and line breaks.
- */
-function formatContent(text: string): React.ReactNode {
-  if (!text) return null;
-  const parts: React.ReactNode[] = [];
-  let key = 0;
-
-  const codeBlockRegex = /```(\w*)\n?([\s\S]*?)```/g;
-  let lastIndex = 0;
-  let match;
-
-  while ((match = codeBlockRegex.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      parts.push(
-        <span key={key++}>{formatInline(text.slice(lastIndex, match.index))}</span>
-      );
-    }
-    parts.push(
-      <pre
-        key={key++}
-        className="my-2 overflow-x-auto rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs leading-relaxed dark:border-slate-700 dark:bg-slate-800/50"
-      >
-        <code>{match[2]}</code>
-      </pre>
-    );
-    lastIndex = match.index + match[0].length;
-  }
-
-  if (lastIndex < text.length) {
-    parts.push(
-      <span key={key++}>{formatInline(text.slice(lastIndex))}</span>
-    );
-  }
-
-  return parts;
-}
-
-function formatInline(text: string): React.ReactNode {
-  const tokens = text.split(/(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*)/g);
-  return tokens.map((token, i) => {
-    if (token.startsWith("**") && token.endsWith("**")) {
-      return <strong key={i} className="font-semibold">{token.slice(2, -2)}</strong>;
-    }
-    if (token.startsWith("*") && token.endsWith("*")) {
-      return <em key={i}>{token.slice(1, -1)}</em>;
-    }
-    if (token.startsWith("`") && token.endsWith("`")) {
-      return (
-        <code
-          key={i}
-          className="rounded bg-slate-100 px-1 py-0.5 text-xs font-mono dark:bg-slate-800"
-        >
-          {token.slice(1, -1)}
-        </code>
-      );
-    }
-    return token.split("\n").map((line, j, arr) => (
-      <React.Fragment key={`${i}-${j}`}>
-        {line}
-        {j < arr.length - 1 ? <br /> : null}
-      </React.Fragment>
-    ));
-  });
-}
-
-export interface ChatMessageData {
-  id: string;
-  role: "user" | "assistant" | "system";
-  content?: string;
-  components?: SchemaComponent[];
-  toolCalls?: ToolCall[];
-  isError?: boolean;
-  isStreaming?: boolean;
-  timestamp?: string;
-}
-
-export interface ChatMessageProps {
-  message: ChatMessageData;
-  avatar?: React.ReactNode;
-}
-
-/**
- * Renders a single chat message.
- */
-export default function ChatMessage({ message, avatar }: ChatMessageProps) {
-  const isUser = message.role === "user";
-  const isSystem = message.role === "system";
-  const isAssistant = message.role === "assistant";
-
-  const defaultAvatar = isUser ? (
-    <UserCircleIcon className="h-7 w-7 text-slate-400 dark:text-slate-500" />
-  ) : (
-    <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-100 dark:bg-brand-900/40">
-      <CpuChipIcon className="h-4 w-4 text-brand-600 dark:text-brand-400" />
-    </div>
-  );
-
-  if (isSystem) {
-    return (
-      <div
-        className={cx(
-          "mx-auto max-w-lg rounded-lg px-4 py-2 text-center text-xs",
-          message.isError
-            ? "bg-red-50 text-red-600 dark:bg-red-950/30 dark:text-red-400"
-            : "text-slate-400 dark:text-slate-500"
-        )}
-      >
-        {message.content}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cx(
-        "flex gap-3",
-        isUser ? "flex-row-reverse" : "flex-row"
-      )}
-    >
-      {/* Avatar */}
-      <div className="shrink-0 pt-0.5">{avatar ?? defaultAvatar}</div>
-
-      {/* Bubble */}
-      <div
-        className={cx(
-          "max-w-[80%] space-y-2",
-          isUser ? "items-end" : "items-start"
-        )}
-      >
-        {/* Text content */}
-        {message.content ? (
-          <div
-            className={cx(
-              "rounded-2xl px-4 py-2.5 text-sm leading-relaxed",
-              isUser
-                ? "rounded-tr-md bg-brand-600 text-white dark:bg-brand-500"
-                : "rounded-tl-md bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100",
-              message.isStreaming && "animate-pulse"
-            )}
-          >
-            {isAssistant ? formatContent(message.content) : message.content}
-          </div>
-        ) : null}
-
-        {/* Tool calls */}
-        {message.toolCalls?.length ? (
-          <div className="space-y-1.5 pl-1">
-            {message.toolCalls.map((tc, idx) => (
-              <ChatToolCall key={tc.id ?? idx} toolCall={tc} />
-            ))}
-          </div>
-        ) : null}
-
-        {/* Inline components — render real command center components */}
-        {message.components?.length ? (
-          <div className="w-full space-y-3 pt-1">
-            {message.components.map((comp, idx) =>
-              renderSchemaComponent(comp, idx)
-            )}
-          </div>
-        ) : null}
-
-        {/* Timestamp */}
-        {message.timestamp ? (
-          <div
-            className={cx(
-              "px-1 text-[10px] text-slate-400 dark:text-slate-500",
-              isUser ? "text-right" : "text-left"
-            )}
-          >
-            {new Date(message.timestamp).toLocaleTimeString([], {
-              hour: "2-digit",
-              minute: "2-digit",
-            })}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/components/library/chat/ChatMessageList.tsx

@@ -1,75 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import ChatMessage, { ChatMessageData } from "./ChatMessage";
-import ChatTypingIndicator from "./ChatTypingIndicator";
-import ChatSuggestions from "./ChatSuggestions";
-
-export interface ChatMessageListProps {
-  messages?: ChatMessageData[];
-  isLoading?: boolean;
-  isStreaming?: boolean;
-  suggestions?: string[];
-  onSuggestion?: (text: string) => void;
-  renderAvatar?: (message: ChatMessageData) => React.ReactNode;
-}
-
-/**
- * Scrollable message area with auto-scroll to latest message.
- */
-export default function ChatMessageList({
-  messages = [],
-  isLoading = false,
-  isStreaming = false,
-  suggestions = [],
-  onSuggestion,
-  renderAvatar,
-}: ChatMessageListProps) {
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages.length, isLoading, isStreaming]);
-
-  const lastMessage = messages[messages.length - 1];
-  const showSuggestions =
-    suggestions.length > 0 &&
-    !isLoading &&
-    !isStreaming &&
-    lastMessage?.role === "assistant";
-
-  return (
-    <div
-      ref={containerRef}
-      className="flex-1 overflow-y-auto px-4 py-4"
-    >
-      <div className="mx-auto max-w-3xl space-y-4">
-        {messages.map((msg) => (
-          <ChatMessage
-            key={msg.id}
-            message={msg}
-            avatar={renderAvatar?.(msg)}
-          />
-        ))}
-
-        {showSuggestions ? (
-          <div className="pl-10">
-            <ChatSuggestions
-              suggestions={suggestions}
-              onSelect={onSuggestion}
-            />
-          </div>
-        ) : null}
-
-        {isLoading && !isStreaming ? (
-          <ChatTypingIndicator label="Thinking" />
-        ) : null}
-
-        {isStreaming ? (
-          <ChatTypingIndicator label="Generating" />
-        ) : null}
-
-        <div ref={bottomRef} />
-      </div>
-    </div>
-  );
-}

package/src/components/library/chat/ChatPanel.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import ChatMessageList from "./ChatMessageList";
-import ChatInput from "./ChatInput";
-import ChatWelcome from "./ChatWelcome";
-import useChatState, { UseChatStateOptions } from "./useChatState";
-import { ChatMessageData } from "./ChatMessage";
-import { TrashIcon } from "@heroicons/react/24/outline";
-
-export interface ChatPanelProps {
-  title?: string;
-  onSend?: UseChatStateOptions["onSend"];
-  initialMessages?: UseChatStateOptions["initialMessages"];
-  welcomeTitle?: string;
-  welcomeSubtitle?: string;
-  suggestions?: string[];
-  placeholder?: string;
-  className?: string;
-  renderAvatar?: (message: ChatMessageData) => React.ReactNode;
-  showHeader?: boolean;
-}
-
-/**
- * All-in-one chat panel. Composes ChatMessageList, ChatInput, ChatWelcome,
- * and useChatState into a single drop-in component.
- */
-export default function ChatPanel({
-  title = "AI Assistant",
-  onSend,
-  initialMessages = [],
-  welcomeTitle,
-  welcomeSubtitle,
-  suggestions = [],
-  placeholder,
-  className = "",
-  renderAvatar,
-  showHeader = true,
-}: ChatPanelProps) {
-  const chat = useChatState({ initialMessages, onSend });
-
-  const isEmpty = chat.messages.length === 0;
-
-  return (
-    <div
-      className={[
-        "flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      {/* Header */}
-      {showHeader ? (
-        <div className="flex items-center justify-between border-b border-slate-100 px-4 py-3 dark:border-slate-800">
-          <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">
-            {title}
-          </h3>
-          {chat.messages.length > 0 ? (
-            <button
-              type="button"
-              onClick={chat.clearMessages}
-              className="rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300"
-              aria-label="Clear chat"
-            >
-              <TrashIcon className="h-4 w-4" />
-            </button>
-          ) : null}
-        </div>
-      ) : null}
-
-      {/* Messages or welcome */}
-      {isEmpty ? (
-        <ChatWelcome
-          title={welcomeTitle}
-          subtitle={welcomeSubtitle}
-          suggestions={suggestions}
-          onSuggestion={(text) => chat.sendMessage(text)}
-        />
-      ) : (
-        <ChatMessageList
-          messages={chat.messages}
-          isLoading={chat.isLoading}
-          isStreaming={chat.isStreaming}
-          suggestions={suggestions}
-          onSuggestion={(text) => chat.sendMessage(text)}
-          renderAvatar={renderAvatar}
-        />
-      )}
-
-      {/* Input */}
-      <div className="border-t border-slate-100 p-3 dark:border-slate-800">
-        <ChatInput
-          onSend={(content) => chat.sendMessage(content)}
-          disabled={chat.isLoading}
-          isLoading={chat.isLoading}
-          placeholder={placeholder}
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/library/chat/ChatSuggestions.tsx

@@ -1,29 +0,0 @@
-import { SparklesIcon } from "@heroicons/react/24/outline";
-
-export interface ChatSuggestionsProps {
-  suggestions?: string[];
-  onSelect?: (suggestion: string) => void;
-}
-
-/**
- * Quick-action prompt buttons. Place above the input or after an assistant message.
- */
-export default function ChatSuggestions({ suggestions = [], onSelect }: ChatSuggestionsProps) {
-  if (!suggestions.length) return null;
-
-  return (
-    <div className="flex flex-wrap gap-2">
-      {suggestions.map((text) => (
-        <button
-          key={text}
-          type="button"
-          onClick={() => onSelect?.(text)}
-          className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:border-brand-700 dark:hover:bg-brand-950/30 dark:hover:text-brand-300"
-        >
-          <SparklesIcon className="h-3 w-3" aria-hidden="true" />
-          {text}
-        </button>
-      ))}
-    </div>
-  );
-}

package/src/components/library/chat/ChatToolCall.tsx

@@ -1,110 +0,0 @@
-import { useState } from "react";
-import Spinner from "../ui/Spinner";
-import {
-  WrenchScrewdriverIcon,
-  CheckCircleIcon,
-  XCircleIcon,
-  ChevronDownIcon,
-} from "@heroicons/react/24/outline";
-
-export interface ToolCall {
-  id?: string;
-  name: string;
-  args?: unknown;
-  status: "running" | "complete" | "error";
-  result?: unknown;
-}
-
-export interface ChatToolCallProps {
-  toolCall: ToolCall;
-}
-
-const STATUS_CONFIG = {
-  running: {
-    icon: <Spinner size="xs" tone="brand" label="Running" />,
-    text: "text-brand-600 dark:text-brand-400",
-    bg: "bg-brand-50 border-brand-100 dark:bg-brand-950/20 dark:border-brand-900/30",
-    label: "Running",
-  },
-  complete: {
-    icon: <CheckCircleIcon className="h-3.5 w-3.5 text-emerald-500" />,
-    text: "text-emerald-700 dark:text-emerald-300",
-    bg: "bg-emerald-50 border-emerald-100 dark:bg-emerald-950/20 dark:border-emerald-900/30",
-    label: "Complete",
-  },
-  error: {
-    icon: <XCircleIcon className="h-3.5 w-3.5 text-red-500" />,
-    text: "text-red-700 dark:text-red-300",
-    bg: "bg-red-50 border-red-100 dark:bg-red-950/20 dark:border-red-900/30",
-    label: "Failed",
-  },
-};
-
-/**
- * Displays an agent tool call / function execution step.
- */
-export default function ChatToolCall({ toolCall }: ChatToolCallProps) {
-  const [expanded, setExpanded] = useState(false);
-  const config = STATUS_CONFIG[toolCall.status] ?? STATUS_CONFIG.running;
-  const hasDetails = toolCall.args || toolCall.result;
-
-  return (
-    <div
-      className={[
-        "rounded-lg border text-xs",
-        config.bg,
-      ].join(" ")}
-    >
-      <button
-        type="button"
-        onClick={() => hasDetails && setExpanded(!expanded)}
-        className={[
-          "flex w-full items-center gap-2 px-3 py-1.5",
-          hasDetails ? "cursor-pointer" : "cursor-default",
-        ].join(" ")}
-      >
-        {config.icon}
-        <WrenchScrewdriverIcon className="h-3 w-3 text-slate-400 dark:text-slate-500" />
-        <span className={["font-medium", config.text].join(" ")}>
-          {toolCall.name}
-        </span>
-        <span className="text-slate-400 dark:text-slate-500">
-          — {config.label}
-        </span>
-        {hasDetails ? (
-          <ChevronDownIcon
-            className={[
-              "ml-auto h-3 w-3 text-slate-400 transition-transform dark:text-slate-500",
-              expanded ? "rotate-180" : "",
-            ].join(" ")}
-          />
-        ) : null}
-      </button>
-
-      {expanded && hasDetails ? (
-        <div className="border-t border-inherit px-3 py-2 font-mono text-[11px] leading-relaxed text-slate-600 dark:text-slate-300">
-          {toolCall.args ? (
-            <div className="mb-1">
-              <span className="font-sans font-semibold text-slate-500 dark:text-slate-400">
-                Args:{" "}
-              </span>
-              {typeof toolCall.args === "string"
-                ? toolCall.args
-                : JSON.stringify(toolCall.args, null, 2)}
-            </div>
-          ) : null}
-          {toolCall.result ? (
-            <div>
-              <span className="font-sans font-semibold text-slate-500 dark:text-slate-400">
-                Result:{" "}
-              </span>
-              {typeof toolCall.result === "string"
-                ? toolCall.result
-                : JSON.stringify(toolCall.result, null, 2)}
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  );
-}

package/src/components/library/chat/ChatTypingIndicator.tsx

@@ -1,26 +0,0 @@
-import { CpuChipIcon } from "@heroicons/react/24/solid";
-
-export interface ChatTypingIndicatorProps {
-  label?: string;
-}
-
-/**
- * Animated typing indicator shown while the agent is processing.
- */
-export default function ChatTypingIndicator({ label = "Thinking" }: ChatTypingIndicatorProps) {
-  return (
-    <div className="flex items-start gap-3">
-      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-100 dark:bg-brand-900/40">
-        <CpuChipIcon className="h-4 w-4 text-brand-600 dark:text-brand-400" />
-      </div>
-      <div className="flex items-center gap-2 rounded-2xl rounded-tl-md bg-slate-100 px-4 py-3 dark:bg-slate-800">
-        <div className="flex gap-1">
-          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 dark:bg-slate-500 [animation-delay:0ms]" />
-          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 dark:bg-slate-500 [animation-delay:150ms]" />
-          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400 dark:bg-slate-500 [animation-delay:300ms]" />
-        </div>
-        <span className="text-xs text-slate-400 dark:text-slate-500">{label}</span>
-      </div>
-    </div>
-  );
-}

package/src/components/library/chat/ChatWelcome.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import { CpuChipIcon } from "@heroicons/react/24/solid";
-import ChatSuggestions from "./ChatSuggestions";
-
-export interface ChatWelcomeProps {
-  title?: string;
-  subtitle?: string;
-  suggestions?: string[];
-  onSuggestion?: (text: string) => void;
-  icon?: React.ReactNode;
-}
-
-/**
- * Empty-state welcome screen shown before the first message.
- */
-export default function ChatWelcome({
-  title = "How can I help?",
-  subtitle = "Ask me anything about your data, or try one of the suggestions below.",
-  suggestions = [],
-  onSuggestion,
-  icon,
-}: ChatWelcomeProps) {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
-      {icon ?? (
-        <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-100 dark:bg-brand-900/40">
-          <CpuChipIcon className="h-7 w-7 text-brand-600 dark:text-brand-400" />
-        </div>
-      )}
-      <div>
-        <h3 className="text-base font-semibold text-slate-900 dark:text-slate-50">
-          {title}
-        </h3>
-        <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
-          {subtitle}
-        </p>
-      </div>
-      {suggestions.length ? (
-        <div className="mt-2">
-          <ChatSuggestions suggestions={suggestions} onSelect={onSuggestion} />
-        </div>
-      ) : null}
-    </div>
-  );
-}