devnonla-ui 0.1.0

package/src/chat/message-ui/ChatInput.tsx

@@ -0,0 +1,162 @@
+import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { FluentIcon } from "../../icon/FluentIcon";
+import { cn } from "../../lib/cn";
+
+export type ChatInputProps = {
+  generating?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  onSend: (text: string) => void;
+  onCancel?: () => void;
+  /** Clear conversation / start a new chat. */
+  onClear?: () => void;
+  /** Left-side toolbar (model picker, tools, …). */
+  toolbar?: ReactNode;
+  defaultValue?: string;
+  className?: string;
+  autoFocus?: boolean;
+  /** When this changes (e.g. conversation id), clear + focus the input. */
+  focusSignal?: string | null;
+  /** Redirect bare keypresses into this input when focus is elsewhere. */
+  enableTypeToFocus?: boolean;
+};
+
+function resize(el: HTMLTextAreaElement | null, maxRows = 10) {
+  if (!el) return;
+  el.style.height = "auto";
+  const line = Number.parseFloat(getComputedStyle(el).lineHeight) || 22;
+  const max = line * maxRows + 8;
+  el.style.height = `${Math.min(el.scrollHeight, max)}px`;
+}
+
+function isEditableTarget(el: EventTarget | null): boolean {
+  if (!(el instanceof HTMLElement)) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el.isContentEditable) return true;
+  return Boolean(el.closest("input, textarea, select, [contenteditable], [role='dialog'], [role='alertdialog'], [role='listbox'], [role='menu'], .monaco-editor"));
+}
+
+export function ChatInput({ generating = false, placeholder = "Message…", disabled = false, onSend, onCancel, onClear, toolbar, defaultValue = "", className, autoFocus = false, focusSignal, enableTypeToFocus = false }: ChatInputProps) {
+  const [text, setText] = useState(defaultValue);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const hasText = text.trim().length > 0;
+  const canSend = !generating && !disabled && hasText;
+
+  useLayoutEffect(() => {
+    resize(textareaRef.current);
+  }, [text]);
+
+  useEffect(() => {
+    const onSignal = focusSignal !== undefined;
+    if (!autoFocus && !onSignal) return;
+    if (onSignal) setText("");
+
+    let tries = 0;
+    let timer = 0;
+    const tryFocus = () => {
+      const ta = textareaRef.current;
+      if (!ta || ta.disabled) {
+        if (tries++ < 20) timer = window.setTimeout(tryFocus, 40);
+        return;
+      }
+      ta.focus({ preventScroll: true });
+    };
+    timer = window.setTimeout(tryFocus, 0);
+    return () => clearTimeout(timer);
+  }, [autoFocus, focusSignal]);
+
+  useEffect(() => {
+    if (!enableTypeToFocus) return;
+
+    const onKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.defaultPrevented || e.isComposing) return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.key.length !== 1) return;
+
+      const ta = textareaRef.current;
+      if (!ta || ta.disabled || document.activeElement === ta) return;
+      if (isEditableTarget(e.target) || isEditableTarget(document.activeElement)) return;
+
+      e.preventDefault();
+      ta.focus();
+      const start = ta.selectionStart ?? ta.value.length;
+      const end = ta.selectionEnd ?? ta.value.length;
+      const next = ta.value.slice(0, start) + e.key + ta.value.slice(end);
+      setText(next);
+      requestAnimationFrame(() => {
+        const nextTa = textareaRef.current;
+        if (!nextTa) return;
+        nextTa.selectionStart = nextTa.selectionEnd = start + e.key.length;
+      });
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [enableTypeToFocus]);
+
+  const handleSend = () => {
+    if (!canSend) return;
+    onSend(text.trim());
+    setText("");
+  };
+
+  const handleKeyDown = (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.nativeEvent.isComposing) return;
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className={cn("nonla-glass relative isolate shrink-0 mx-4 mb-2.5 overflow-hidden pt-1 rounded-xl flex flex-col", disabled && "opacity-70", className)}>
+      <textarea
+        ref={textareaRef}
+        data-chat-input
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={generating || disabled}
+        placeholder={placeholder}
+        rows={1}
+        className={cn(
+          "w-full resize-none appearance-none border-0 bg-transparent shadow-none outline-none focus:outline-none px-2.5 pt-1 pb-2.5",
+          "text-(length:--chat-composer-size) leading-(--chat-composer-leading) font-normal",
+          disabled ? "text-muted-foreground cursor-not-allowed placeholder:text-quaternary-foreground" : "text-foreground placeholder:text-muted-foreground/60",
+        )}
+      />
+
+      <div className="flex items-center gap-1.5 pb-2 px-2">
+        {onClear ? (
+          <button type="button" onClick={onClear} title="New chat" aria-label="New chat" className="inline-flex size-6 shrink-0 items-center justify-center rounded-lg border-0 bg-transparent cursor-pointer hover:bg-ink-hover">
+            <FluentIcon name="chat-add-24" size={16} />
+          </button>
+        ) : null}
+        {toolbar}
+        <div className="flex-1" />
+
+        {generating ? (
+          <button type="button" onClick={onCancel} title="Stop" className="w-6 h-6 rounded-full bg-brand text-white flex items-center justify-center shrink-0 cursor-pointer hover:bg-brand/90 active:scale-95 transition-all duration-100 border-0">
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
+              <rect x="1.5" y="1.5" width="9" height="9" rx="2" fill="currentColor" />
+            </svg>
+            <span className="sr-only">Stop</span>
+          </button>
+        ) : (
+          <button
+            type="button"
+            disabled={!canSend}
+            onClick={handleSend}
+            title="Send (Enter)"
+            className={cn("w-6 h-6 rounded-full flex items-center justify-center shrink-0 transition-all duration-100 border-0", canSend ? "bg-foreground text-background cursor-pointer" : "bg-border text-muted-foreground cursor-not-allowed opacity-50")}
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
+              <path d="M6 9.5V2.5M6 2.5L3 5.5M6 2.5L9 5.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+            <span className="sr-only">Send</span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/chat/message-ui/ChatMarkdown.tsx

@@ -0,0 +1,128 @@
+import { useRef } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Checkbox } from "../../checkbox/Checkbox";
+import { CodeBlock } from "../../codeblock/CodeBlock";
+import { cn } from "../../lib/cn";
+import { ChatMarkdownTable } from "./ChatMarkdownTable";
+import { MermaidBlock } from "./MermaidBlock";
+import { isPendingMermaidBlock } from "./mermaidFence";
+
+/** Message body — sizes come from --chat-* tokens. */
+export const chatBodyClass = "font-normal text-foreground text-(length:--chat-body-size) leading-(--chat-body-leading)";
+
+/** Shared Tailwind prose classes for chat markdown. */
+export const chatMarkdownClass = cn(
+  chatBodyClass,
+  "min-w-0 wrap-anywhere",
+  "[&_p]:m-0 [&_p]:mb-(--chat-p-mb) [&_p:last-child]:mb-0",
+  "[&_h1]:mt-(--chat-h-mt) [&_h1]:mb-(--chat-h-mb) [&_h1]:text-(length:--chat-h1-size) [&_h1]:font-semibold [&_h1]:leading-snug",
+  "[&_h2]:mt-(--chat-h-mt) [&_h2]:mb-(--chat-h-mb) [&_h2]:text-(length:--chat-h2-size) [&_h2]:font-semibold [&_h2]:leading-snug",
+  "[&_h3]:mt-(--chat-h-mt) [&_h3]:mb-(--chat-h-mb) [&_h3]:text-(length:--chat-h3-size) [&_h3]:font-semibold [&_h3]:leading-snug",
+  "[&_h4]:mt-(--chat-h-mt) [&_h4]:mb-(--chat-h-mb) [&_h4]:text-(length:--chat-h4-size) [&_h4]:font-semibold [&_h4]:leading-snug",
+  "[&_h1:first-child]:mt-0 [&_h2:first-child]:mt-0 [&_h3:first-child]:mt-0 [&_h4:first-child]:mt-0",
+  "[&_strong]:font-semibold [&_em]:italic",
+  "[&_blockquote]:m-0 [&_blockquote]:mb-(--chat-p-mb) [&_blockquote]:border-0 [&_blockquote]:p-0 [&_blockquote]:not-italic [&_blockquote]:text-inherit [&_blockquote:last-child]:mb-0",
+  "[&_ul]:mt-2 [&_ul]:mb-(--chat-p-mb)",
+  "[&_ul:not(.contains-task-list)]:list-disc [&_ul:not(.contains-task-list)]:pl-[26px]",
+  "[&_ul.contains-task-list]:list-none [&_ul.contains-task-list]:pl-[26px]",
+  "[&_li.task-list-item]:relative",
+  "[&_li.task-list-item>.nonla-md-task-check]:absolute [&_li.task-list-item>.nonla-md-task-check]:top-0 [&_li.task-list-item>.nonla-md-task-check]:left-[-22px]",
+  "[&_ol]:mt-2 [&_ol]:mb-(--chat-p-mb) [&_ol]:list-decimal [&_ol]:pl-[26px]",
+  "[&_li]:my-1.5 [&_li]:leading-(--chat-body-leading)",
+  "[&_a]:text-link [&_a]:no-underline [&_a]:hover:underline [&_a]:hover:underline-offset-[3px]",
+);
+
+export type ChatMarkdownStreamState = {
+  content: string;
+  streaming: boolean;
+};
+
+export type ChatMarkdownProps = {
+  content: string;
+  streaming?: boolean;
+  className?: string;
+};
+
+/**
+ * Build markdown components. Pass getState so pending-mermaid can update via ref
+ * without recreating the components object (avoids remounting finished charts).
+ */
+export function createChatMarkdownComponents(getState?: () => ChatMarkdownStreamState): Components {
+  return {
+    code({ className, children }) {
+      const match = /language-(\w+)/.exec(className || "");
+      const lang = match?.[1] ?? "";
+      const codeText = String(children).replace(/\n$/, "");
+      const isBlock = codeText.includes("\n") || !!match;
+
+      if (isBlock) {
+        const isMermaid = lang.toLowerCase() === "mermaid";
+        if (isMermaid) {
+          const state = getState?.();
+          const pending = state ? isPendingMermaidBlock(state.content, codeText, state.streaming) : false;
+          if (!pending) return <MermaidBlock>{codeText}</MermaidBlock>;
+        }
+
+        return <CodeBlock code={codeText} language={lang || undefined} className="my-3 last:mb-0" />;
+      }
+
+      return <span className="rounded-sm bg-gray-50/60 px-1">{children}</span>;
+    },
+    hr() {
+      return null;
+    },
+    table({ children }) {
+      return <ChatMarkdownTable>{children}</ChatMarkdownTable>;
+    },
+    th({ children }) {
+      return (
+        <th>
+          <div className="inline-block max-w-[300px] wrap-break-word">{children}</div>
+        </th>
+      );
+    },
+    td({ children }) {
+      return (
+        <td>
+          <div className="inline-block max-w-[300px] wrap-break-word">{children}</div>
+        </td>
+      );
+    },
+    a({ href, children, ...props }) {
+      return (
+        <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+          {children}
+        </a>
+      );
+    },
+    input({ type, checked }) {
+      if (type !== "checkbox") return <input type={type} checked={checked} readOnly />;
+      return (
+        <span className="nonla-md-task-check pointer-events-none inline-flex h-(--chat-body-leading) items-center">
+          <Checkbox checked={Boolean(checked)} tabIndex={-1} />
+        </span>
+      );
+    },
+  };
+}
+
+export const chatMarkdownComponents: Components = createChatMarkdownComponents();
+
+export function ChatMarkdown({ content, streaming = false, className }: ChatMarkdownProps) {
+  const streamStateRef = useRef<ChatMarkdownStreamState>({ content, streaming });
+  streamStateRef.current = { content, streaming };
+
+  const componentsRef = useRef<Components | null>(null);
+  if (!componentsRef.current) {
+    componentsRef.current = createChatMarkdownComponents(() => streamStateRef.current);
+  }
+
+  return (
+    <div className={cn(chatMarkdownClass, className)}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={componentsRef.current}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/chat/message-ui/ChatMarkdownTable.tsx

@@ -0,0 +1,45 @@
+import { type ReactNode, useCallback, useRef } from "react";
+import { ButtonCopy } from "../../button/ButtonCopy";
+
+function escapeCell(text: string): string {
+  return text.replace(/\|/g, "\\|").replace(/\n+/g, "").trim();
+}
+
+function tableToMarkdown(table: HTMLTableElement): string {
+  const rows = Array.from(table.querySelectorAll("tr"));
+  const data = rows.map((tr) => Array.from(tr.querySelectorAll("th, td")).map((cell) => escapeCell(cell.textContent ?? "")));
+  if (data.length === 0) return "";
+
+  const colCount = Math.max(...data.map((row) => row.length));
+  const pad = (row: string[]) => Array.from({ length: colCount }, (_, i) => row[i] ?? "");
+
+  const header = pad(data[0]!);
+  const separator = header.map(() => "---");
+  const body = data.slice(1).map(pad);
+
+  return [`| ${header.join(" | ")} |`, `| ${separator.join(" | ")} |`, ...body.map((row) => `| ${row.join(" | ")} |`)].join("\n");
+}
+
+export function ChatMarkdownTable({ children }: { children: ReactNode }) {
+  const tableRef = useRef<HTMLTableElement>(null);
+
+  const getText = useCallback(() => {
+    const table = tableRef.current;
+    return table ? tableToMarkdown(table) : "";
+  }, []);
+
+  return (
+    <div className="relative my-4 max-w-full overflow-hidden rounded-xl border border-border bg-card group">
+      <ButtonCopy getText={getText} label="Copy as Markdown" className="absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100" />
+
+      <div className="overflow-x-auto">
+        <table
+          ref={tableRef}
+          className="w-max min-w-full wrap-normal border-separate border-spacing-0 text-[14px] [&_th]:bg-foreground/[0.04] [&_th]:text-foreground [&_th]:font-semibold [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:text-left [&_th]:align-top [&_th]:border-r [&_th]:border-b [&_th]:border-border [&_th:last-child]:border-r-0 [&_td]:px-2.5 [&_td]:py-1.5 [&_td]:align-top [&_td]:text-foreground [&_td]:bg-card [&_td]:border-r [&_td]:border-b [&_td]:border-border [&_td:last-child]:border-r-0 [&_tbody_tr:last-child_td]:border-b-0"
+        >
+          {children}
+        </table>
+      </div>
+    </div>
+  );
+}

package/src/chat/message-ui/ChatSpinner.tsx

@@ -0,0 +1,5 @@
+import { cn } from "../../lib/cn";
+
+export function ChatSpinner({ className }: { className?: string }) {
+  return <span className={cn("size-3 shrink-0 rounded-full border-2 border-muted-foreground/25 border-t-muted-foreground animate-spin", className)} aria-hidden />;
+}

package/src/chat/message-ui/ChatThinking.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../lib/cn";
+
+export type ChatThinkingProps = {
+  thinking: string;
+  /** Final duration in seconds (shown when not streaming). */
+  duration?: number;
+  streaming?: boolean;
+  className?: string;
+};
+
+/** Collapsed by default; expand to read (and stream) reasoning. */
+export function ChatThinking({ thinking, duration = 0, streaming = false, className }: ChatThinkingProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const [elapsedSec, setElapsedSec] = useState(0);
+
+  useEffect(() => {
+    if (!streaming) return;
+    setElapsedSec(0);
+    const started = Date.now();
+    const id = setInterval(() => {
+      setElapsedSec(Math.floor((Date.now() - started) / 1000));
+    }, 1000);
+    return () => clearInterval(id);
+  }, [streaming]);
+
+  useLayoutEffect(() => {
+    if (!streaming) return;
+    const el = bodyRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [thinking, streaming]);
+
+  if (!thinking.trim()) return null;
+
+  const liveElapsed = Math.max(elapsedSec, duration);
+  const shownDuration = Math.max(1, duration);
+  const label = streaming ? (liveElapsed >= 3 ? `Thinking ${liveElapsed}s` : "Thinking") : `Thought ${shownDuration}s`;
+
+  return (
+    <details
+      className={cn("nonla-chat-thinking px-4 pb-2 group/thinking", className)}
+      style={{ overflowAnchor: "none" }}
+      onToggle={(e) => {
+        if (!streaming || !e.currentTarget.open) return;
+        const el = bodyRef.current;
+        if (el) el.scrollTop = el.scrollHeight;
+      }}
+    >
+      <summary className="cursor-pointer select-none text-sm font-medium text-tertiary-foreground flex items-center gap-1 py-0.5 list-none [&::-webkit-details-marker]:hidden">
+        <span className={streaming ? "nonla-chat-shimmer" : undefined}>{label}</span>
+        <svg className="w-3 h-3 shrink-0 opacity-0 transition-[opacity,transform] duration-150 group-hover/thinking:opacity-100 group-open/thinking:opacity-100 group-open/thinking:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </summary>
+
+      <div ref={bodyRef} className="pt-2 max-h-40 min-w-0 overflow-y-auto overflow-x-hidden mb-2 text-[14px] leading-normal">
+        <p className="text-[14px] leading-normal text-quaternary-foreground whitespace-pre-wrap wrap-break-word m-0">{thinking}</p>
+      </div>
+    </details>
+  );
+}

package/src/chat/message-ui/ChatUserMessage.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/cn";
+
+const MAX_HEIGHT = 150;
+
+export type ChatUserMessageProps = {
+  content: string;
+  className?: string;
+};
+
+export function ChatUserMessage({ content, className }: ChatUserMessageProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => setIsOverflow(el.scrollHeight > MAX_HEIGHT);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [content]);
+
+  const collapsed = isOverflow && !isExpanded;
+
+  const toggle = () => {
+    const sel = window.getSelection();
+    if (sel?.toString()) return;
+    setIsExpanded((v) => !v);
+  };
+
+  return (
+    <div
+      className={cn(
+        "nonla-chat-user relative isolate mt-6 mb-3 mx-4 overflow-hidden rounded-xl px-3 py-2.5",
+        "border border-brand/40 bg-[color-mix(in_oklab,var(--brand)_14%,var(--glass))] backdrop-blur-xl backdrop-saturate-150",
+        isOverflow && "cursor-pointer",
+        className,
+      )}
+      onClick={isOverflow ? toggle : undefined}
+    >
+      <div
+        ref={contentRef}
+        className={cn(
+          "overflow-hidden text-(length:--chat-body-size) leading-(--chat-body-leading) text-(--nonla-ink) whitespace-pre-wrap wrap-break-word",
+          collapsed && "mask-[linear-gradient(to_bottom,#000_calc(100%-1.75rem),transparent)]",
+        )}
+        style={{ maxHeight: collapsed ? MAX_HEIGHT : undefined }}
+      >
+        {content}
+      </div>
+      {isOverflow ? (
+        <button
+          type="button"
+          aria-expanded={isExpanded}
+          aria-label={isExpanded ? "Collapse message" : "Expand message"}
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsExpanded((v) => !v);
+          }}
+          className="flex w-full cursor-pointer items-center justify-center border-0 bg-transparent pt-1 text-muted-foreground hover:text-foreground"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden className={cn("transition-transform duration-200", isExpanded && "rotate-180")}>
+            <path d="M2.5 4.5 6 8l3.5-3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/chat/message-ui/ChatWelcome.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export type ChatWelcomeProps = {
+  name: string;
+  description?: string | null;
+  /** Avatar node (image / initials). */
+  avatar?: ReactNode;
+  starters?: string[];
+  onStarter?: (text: string) => void;
+  disabled?: boolean;
+  className?: string;
+};
+
+const DEFAULT_STARTERS = ["What can you help me with?", "Brainstorm a few ideas with me", "Walk me through how you work"] as const;
+
+function DefaultAvatar({ name }: { name: string }) {
+  const initial = (name.trim()[0] ?? "?").toUpperCase();
+  return (
+    <div className="flex size-16 items-center justify-center rounded-full bg-brand/20 text-xl font-semibold text-brand-700" aria-hidden>
+      {initial}
+    </div>
+  );
+}
+
+export function ChatWelcome({ name, description, avatar, starters = [...DEFAULT_STARTERS], onStarter, disabled, className }: ChatWelcomeProps) {
+  const desc = description?.trim() || null;
+
+  return (
+    <div className={cn("nonla-chat-welcome flex flex-col items-center justify-center min-h-full w-full px-6 py-10 text-center", className)}>
+      <div className="relative mb-5">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute left-1/2 top-1/2 size-28 -translate-x-1/2 -translate-y-1/2 rounded-full"
+          style={{
+            background: "radial-gradient(circle, color-mix(in oklab, var(--brand) 28%, transparent) 0%, transparent 70%)",
+          }}
+        />
+        <div
+          className="relative rounded-full p-0.5"
+          style={{
+            background: "linear-gradient(145deg, color-mix(in oklab, var(--brand-600) 55%, transparent), transparent 60%)",
+          }}
+        >
+          <div className="rounded-full bg-popover p-0.5">{avatar ?? <DefaultAvatar name={name} />}</div>
+        </div>
+      </div>
+
+      <h2 className="m-0 text-[22px] font-semibold tracking-tight text-foreground leading-snug">Hi, I&apos;m {name}</h2>
+
+      {desc ? <p className="mt-2 mb-0 max-w-90 text-[13px] leading-relaxed text-tertiary-foreground line-clamp-2">{desc}</p> : <p className="mt-2 mb-0 max-w-[320px] text-[13px] leading-relaxed text-tertiary-foreground">Send a message to start working together.</p>}
+
+      {starters.length > 0 && onStarter ? (
+        <div className="mt-8 flex flex-wrap items-center justify-center gap-2 max-w-130">
+          {starters.map((text) => (
+            <button
+              key={text}
+              type="button"
+              disabled={disabled}
+              onClick={() => onStarter(text)}
+              className="px-3 py-1.5 rounded-lg border border-border bg-transparent text-[12px] font-medium text-tertiary-foreground cursor-pointer transition-colors duration-150 font-[inherit] hover:border-border hover:bg-muted/60 hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              {text}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}