@schandlergarcia/sf-web-components 1.9.38 → 1.9.39

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

@@ -0,0 +1,178 @@
+import React from "react";
+import { renderSchemaComponent } from "@/components/workspace/ComponentRegistry";
+import ChatToolCall from "./ChatToolCall";
+import { UserCircleIcon, CpuChipIcon } from "@heroicons/react/24/solid";
+
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+/**
+ * Lightweight inline formatter for assistant messages.
+ * Handles code blocks, inline code, bold, italic, and line breaks.
+ */
+function formatContent(text) {
+  if (!text) return null;
+  const parts = [];
+  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) {
+  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>
+    ));
+  });
+}
+
+/**
+ * Renders a single chat message.
+ *
+ * @param {Object} message — { id, role, content, components?, toolCalls?, isError?, isStreaming?, timestamp? }
+ * @param {React.ReactNode} avatar — custom avatar override
+ */
+export default function ChatMessage({ message, avatar }) {
+  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.jsx

@@ -0,0 +1,73 @@
+import React, { useRef, useEffect } from "react";
+import ChatMessage from "./ChatMessage";
+import ChatTypingIndicator from "./ChatTypingIndicator";
+import ChatSuggestions from "./ChatSuggestions";
+
+/**
+ * Scrollable message area with auto-scroll to latest message.
+ *
+ * @param {Array}     messages — array of message objects
+ * @param {boolean}   isLoading — show typing indicator
+ * @param {boolean}   isStreaming — agent is streaming (show different indicator text)
+ * @param {string[]}  suggestions — follow-up suggestions shown after last assistant message
+ * @param {Function}  onSuggestion — (text) => void
+ * @param {Function}  renderAvatar — (message) => ReactNode, optional per-message avatar
+ */
+export default function ChatMessageList({
+  messages = [],
+  isLoading = false,
+  isStreaming = false,
+  suggestions = [],
+  onSuggestion,
+  renderAvatar,
+}) {
+  const bottomRef = useRef(null);
+  const containerRef = useRef(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.jsx

@@ -0,0 +1,97 @@
+import React from "react";
+import ChatMessageList from "./ChatMessageList";
+import ChatInput from "./ChatInput";
+import ChatWelcome from "./ChatWelcome";
+import useChatState from "./useChatState";
+import { TrashIcon } from "@heroicons/react/24/outline";
+
+/**
+ * All-in-one chat panel. Composes ChatMessageList, ChatInput, ChatWelcome,
+ * and useChatState into a single drop-in component.
+ *
+ * @param {string}   title — panel header title
+ * @param {Function} onSend — async (userMessage, history, helpers) => assistantMessage?
+ * @param {Array}    initialMessages — seed messages
+ * @param {string}   welcomeTitle — welcome screen heading
+ * @param {string}   welcomeSubtitle — welcome screen description
+ * @param {string[]} suggestions — starter and follow-up prompts
+ * @param {string}   placeholder — input placeholder
+ * @param {string}   className — additional classes on the root container
+ * @param {Function} renderAvatar — (message) => ReactNode
+ * @param {boolean}  showHeader — show the title bar (default true)
+ */
+export default function ChatPanel({
+  title = "AI Assistant",
+  onSend,
+  initialMessages = [],
+  welcomeTitle,
+  welcomeSubtitle,
+  suggestions = [],
+  placeholder,
+  className = "",
+  renderAvatar,
+  showHeader = true,
+}) {
+  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.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { SparklesIcon } from "@heroicons/react/24/outline";
+
+/**
+ * Quick-action prompt buttons. Place above the input or after an assistant message.
+ *
+ * @param {string[]} suggestions — prompt strings
+ * @param {Function} onSelect — (suggestion) => void
+ */
+export default function ChatSuggestions({ suggestions = [], onSelect }) {
+  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.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import Spinner from "../ui/Spinner";
+import {
+  WrenchScrewdriverIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  ChevronDownIcon,
+} from "@heroicons/react/24/outline";
+
+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.
+ *
+ * @param {Object} toolCall — { id?, name, args?, status: "running"|"complete"|"error", result? }
+ */
+export default function ChatToolCall({ toolCall }) {
+  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.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { CpuChipIcon } from "@heroicons/react/24/solid";
+
+/**
+ * Animated typing indicator shown while the agent is processing.
+ */
+export default function ChatTypingIndicator({ label = "Thinking" }) {
+  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.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { CpuChipIcon } from "@heroicons/react/24/solid";
+import ChatSuggestions from "./ChatSuggestions";
+
+/**
+ * Empty-state welcome screen shown before the first message.
+ *
+ * @param {string} title — welcome heading
+ * @param {string} subtitle — description text
+ * @param {string[]} suggestions — starter prompt suggestions
+ * @param {Function} onSuggestion — (text) => void
+ * @param {React.ReactNode} icon — custom icon override
+ */
+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,
+}) {
+  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>
+  );
+}

package/src/components/library/chat/index.jsx

@@ -0,0 +1,10 @@
+export { default as ChatPanel } from "./ChatPanel";
+export { default as ChatBar } from "./ChatBar";
+export { default as ChatMessageList } from "./ChatMessageList";
+export { default as ChatMessage } from "./ChatMessage";
+export { default as ChatInput } from "./ChatInput";
+export { default as ChatTypingIndicator } from "./ChatTypingIndicator";
+export { default as ChatSuggestions } from "./ChatSuggestions";
+export { default as ChatToolCall } from "./ChatToolCall";
+export { default as ChatWelcome } from "./ChatWelcome";
+export { default as useChatState } from "./useChatState";

package/src/components/library/chat/useChatState.jsx

@@ -0,0 +1,130 @@
+import { useState, useCallback, useRef } from "react";
+
+let _nextId = 1;
+function uid() {
+  return `msg-${Date.now()}-${_nextId++}`;
+}
+
+/**
+ * Core state management hook for AI chat.
+ *
+ * @param {Object} options
+ * @param {Array}  options.initialMessages — seed the conversation
+ * @param {Function} options.onSend — async (userMessage, allMessages) => assistantMessage | void
+ *   Return a message object to add it, or use appendChunk / addMessage for streaming.
+ *
+ * @returns {Object}
+ *
+ * @example
+ * const chat = useChatState({
+ *   onSend: async (msg, history) => {
+ *     const res = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ messages: history }) });
+ *     const data = await res.json();
+ *     return { role: "assistant", content: data.reply, components: data.components };
+ *   },
+ * });
+ */
+export default function useChatState({ initialMessages = [], onSend } = {}) {
+  const [messages, setMessages] = useState(() =>
+    initialMessages.map((m) => ({ id: uid(), timestamp: new Date().toISOString(), ...m }))
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState(null);
+  const onSendRef = useRef(onSend);
+  onSendRef.current = onSend;
+
+  const addMessage = useCallback((msg) => {
+    const full = { id: uid(), timestamp: new Date().toISOString(), ...msg };
+    setMessages((prev) => [...prev, full]);
+    return full.id;
+  }, []);
+
+  const updateMessage = useCallback((id, updates) => {
+    setMessages((prev) =>
+      prev.map((m) => (m.id === id ? { ...m, ...updates } : m))
+    );
+  }, []);
+
+  const appendChunk = useCallback((id, chunk) => {
+    setMessages((prev) =>
+      prev.map((m) =>
+        m.id === id ? { ...m, content: (m.content ?? "") + chunk } : m
+      )
+    );
+  }, []);
+
+  const removeMessage = useCallback((id) => {
+    setMessages((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setError(null);
+  }, []);
+
+  const sendMessage = useCallback(
+    async (content, extra = {}) => {
+      if (!content?.trim()) return;
+      setError(null);
+
+      const userMsg = { role: "user", content: content.trim(), ...extra };
+      const userId = uid();
+      const fullUser = { ...userMsg, id: userId, timestamp: new Date().toISOString() };
+
+      setMessages((prev) => [...prev, fullUser]);
+      setIsLoading(true);
+
+      try {
+        const allMsgs = [...messages, fullUser];
+        const result = await onSendRef.current?.(fullUser, allMsgs, {
+          addMessage,
+          updateMessage,
+          appendChunk,
+          setStreaming: setIsStreaming,
+        });
+
+        if (result && typeof result === "object" && result.role) {
+          addMessage(result);
+        }
+      } catch (err) {
+        setError(err?.message ?? "Failed to send message");
+        addMessage({
+          role: "system",
+          content: err?.message ?? "Something went wrong. Please try again.",
+          isError: true,
+        });
+      } finally {
+        setIsLoading(false);
+        setIsStreaming(false);
+      }
+    },
+    [messages, addMessage, updateMessage, appendChunk]
+  );
+
+  const retryLast = useCallback(() => {
+    const lastUser = [...messages].reverse().find((m) => m.role === "user");
+    if (!lastUser) return;
+
+    const idx = messages.lastIndexOf(lastUser);
+    setMessages(messages.slice(0, idx));
+    setError(null);
+
+    sendMessage(lastUser.content);
+  }, [messages, sendMessage]);
+
+  return {
+    messages,
+    isLoading,
+    isStreaming,
+    error,
+    sendMessage,
+    addMessage,
+    updateMessage,
+    appendChunk,
+    removeMessage,
+    clearMessages,
+    retryLast,
+    setError,
+  };
+}