@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

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

@@ -0,0 +1,256 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  SparklesIcon,
+  XMarkIcon,
+  TrashIcon,
+  ArrowTopRightOnSquareIcon,
+} from "@heroicons/react/24/outline";
+import ChatMessageList from "./ChatMessageList";
+import ChatInput from "./ChatInput";
+import useChatState from "./useChatState";
+
+const BACKDROP_VARIANTS = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.15 } },
+  exit: { opacity: 0, transition: { duration: 0.12 } },
+};
+
+const PANEL_VARIANTS = {
+  hidden: { opacity: 0, y: 20, scale: 0.97 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { type: "spring", damping: 28, stiffness: 380 },
+  },
+  exit: { opacity: 0, y: 10, scale: 0.97, transition: { duration: 0.12 } },
+};
+
+/**
+ * Command-palette style AI chat bar.
+ *
+ * Collapsed: a slim, clickable input strip with sparkle icon and ⌘K hint.
+ * Expanded: a centered floating overlay (portal) with backdrop, full chat,
+ * suggestions, and message history. No layout shift.
+ *
+ * Activate: click the bar, press ⌘K / Ctrl+K, or click a suggestion chip.
+ * Dismiss: Escape or click the backdrop.
+ */
+export default function ChatBar({
+  onSend,
+  suggestions = [],
+  placeholder = "Ask a question\u2026",
+  title = "AI Assistant",
+  initialMessages = [],
+  className = "",
+  panelHeight,
+  renderAvatar,
+  onOpenInTab,
+}) {
+  const [open, setOpen] = useState(false);
+  const [portalVisible, setPortalVisible] = useState(false);
+  const panelRef = useRef(null);
+  const chat = useChatState({ initialMessages, onSend });
+  const isEmpty = chat.messages.length === 0;
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    if (open) setPortalVisible(true);
+  }, [open]);
+
+  useEffect(() => {
+    function onKey(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+      if (e.key === "Escape" && open) close();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, close]);
+
+  useEffect(() => {
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  function handleSend(content) {
+    if (!open) setOpen(true);
+    chat.sendMessage(content);
+  }
+
+  const [shortcutLabel, setShortcutLabel] = useState("⌘K");
+  useEffect(() => {
+    setShortcutLabel(/Mac|iPhone|iPad/.test(navigator.userAgent) ? "⌘K" : "Ctrl K");
+  }, []);
+
+  const overlay =
+    typeof document !== "undefined" && portalVisible
+      ? createPortal(
+          <AnimatePresence onExitComplete={() => setPortalVisible(false)}>
+            {open && (
+              <>
+                {/* Backdrop */}
+                <motion.div
+                  variants={BACKDROP_VARIANTS}
+                  initial="hidden"
+                  animate="visible"
+                  exit="exit"
+                  className="fixed inset-0 z-50 bg-black/30 backdrop-blur-sm"
+                  onClick={close}
+                  aria-hidden="true"
+                />
+
+                {/* Centered panel */}
+                <motion.div
+                  ref={panelRef}
+                  variants={PANEL_VARIANTS}
+                  initial="hidden"
+                  animate="visible"
+                  exit="exit"
+                  className="fixed inset-x-0 top-[10vh] z-50 mx-auto flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900"
+                  style={{ maxHeight: "75vh" }}
+                >
+                  {/* Header */}
+                  <div className="flex items-center justify-between border-b border-slate-100 px-4 py-2.5 dark:border-slate-800">
+                    <div className="flex items-center gap-2">
+                      <SparklesIcon className="h-4 w-4 text-brand-500" />
+                      <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+                        {title}
+                      </h3>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {onOpenInTab ? (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setOpen(false);
+                            setPortalVisible(false);
+                            document.body.style.overflow = "";
+                            onOpenInTab(chat.messages);
+                          }}
+                          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="Open in new tab"
+                          title="Open in new tab"
+                        >
+                          <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+                        </button>
+                      ) : null}
+                      {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}
+                      <button
+                        type="button"
+                        onClick={close}
+                        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="Close"
+                      >
+                        <XMarkIcon className="h-4 w-4" />
+                      </button>
+                      <kbd className="ml-1 hidden rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500 sm:inline-block">
+                        esc
+                      </kbd>
+                    </div>
+                  </div>
+
+                  {/* Body — messages or empty state */}
+                  <div className="min-h-0 flex-1">
+                    {isEmpty ? (
+                      <div className="flex h-full min-h-[200px] flex-col items-center justify-center gap-4 px-6 py-8">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 dark:bg-brand-950/30">
+                          <SparklesIcon className="h-5 w-5 text-brand-500" />
+                        </div>
+                        <p className="text-sm text-slate-500 dark:text-slate-400">
+                          Ask me anything about your data.
+                        </p>
+                        {suggestions.length > 0 ? (
+                          <div className="flex flex-wrap justify-center gap-2">
+                            {suggestions.map((text) => (
+                              <button
+                                key={text}
+                                type="button"
+                                onClick={() => handleSend(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>
+                        ) : null}
+                      </div>
+                    ) : (
+                      <ChatMessageList
+                        messages={chat.messages}
+                        isLoading={chat.isLoading}
+                        isStreaming={chat.isStreaming}
+                        suggestions={suggestions}
+                        onSuggestion={(text) => chat.sendMessage(text)}
+                        renderAvatar={renderAvatar}
+                      />
+                    )}
+                  </div>
+
+                  {/* 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>
+                </motion.div>
+              </>
+            )}
+          </AnimatePresence>,
+          document.body
+        )
+      : null;
+
+  return (
+    <>
+      {overlay}
+
+      {/* Trigger bar */}
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className={[
+          "group flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-left shadow-sm transition-all hover:border-brand-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-brand-700",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        <SparklesIcon className="h-5 w-5 shrink-0 text-brand-500" />
+        <span className="flex-1 text-sm text-slate-400 dark:text-slate-500">
+          {placeholder}
+        </span>
+        {chat.messages.length > 0 ? (
+          <span className="rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-600 dark:bg-brand-950/30 dark:text-brand-400">
+            {chat.messages.length} msgs
+          </span>
+        ) : null}
+        <kbd className="hidden rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 group-hover:border-brand-200 group-hover:text-brand-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500 sm:inline-block">
+          {shortcutLabel}
+        </kbd>
+      </button>
+    </>
+  );
+}

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

@@ -0,0 +1,89 @@
+import React, { useState, useRef, useEffect } from "react";
+import { PaperAirplaneIcon, StopCircleIcon } from "@heroicons/react/24/solid";
+
+/**
+ * Chat input with auto-resize textarea, Send button, and keyboard shortcuts.
+ * Enter sends, Shift+Enter inserts newline.
+ *
+ * @param {Function} onSend — (content: string) => void
+ * @param {boolean}  disabled — disable input while agent is processing
+ * @param {boolean}  isLoading — show stop button instead of send
+ * @param {Function} onStop — optional: called when stop is clicked
+ * @param {string}   placeholder
+ * @param {number}   maxRows — max visible rows before scroll (default 6)
+ */
+export default function ChatInput({
+  onSend,
+  disabled = false,
+  isLoading = false,
+  onStop,
+  placeholder = "Type a message…",
+  maxRows = 6,
+}) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef(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) {
+    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.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>
+  );
+}