veryfront 0.1.47 → 0.1.49

package/src/src/react/components/ai/chat/composition/chat-empty.tsx

@@ -0,0 +1,77 @@
+/**
+ * ChatEmpty — Empty state for the chat conversation.
+ *
+ * @module ai/react/components/chat/composition/chat-empty
+ */
+
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { ConversationEmptyState, Suggestion, Suggestions } from "../components/empty-state.js";
+import { type QuickAction, QuickActions } from "../components/quick-actions.js";
+
+export interface ChatEmptyProps {
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  suggestions?: string[];
+  onSuggestionClick?: (suggestion: string) => void;
+  quickActions?: QuickAction[];
+  onQuickAction?: (action: QuickAction) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ChatEmpty = React.forwardRef<HTMLDivElement, ChatEmptyProps>(
+  function ChatEmpty(
+    {
+      icon,
+      title = "What can I help with?",
+      description,
+      suggestions,
+      onSuggestionClick,
+      quickActions,
+      onQuickAction,
+      className,
+      children,
+    },
+    ref,
+  ) {
+    const showSuggestions = (suggestions?.length ?? 0) > 0;
+    const showQuickActions = (quickActions?.length ?? 0) > 0;
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex flex-col items-center justify-center h-full px-4", className)}
+      >
+        <div className="flex-1" />
+        <ConversationEmptyState
+          icon={icon}
+          title={title}
+          description={description}
+        />
+        {showSuggestions && (
+          <div className="w-full max-w-2xl mt-6">
+            <Suggestions layout="grid">
+              {suggestions?.map((suggestion) => (
+                <Suggestion
+                  key={suggestion}
+                  suggestion={suggestion}
+                  onClick={onSuggestionClick}
+                />
+              ))}
+            </Suggestions>
+          </div>
+        )}
+        {showQuickActions && (
+          <div className="mt-4">
+            <QuickActions actions={quickActions} onActionClick={onQuickAction} />
+          </div>
+        )}
+        {children}
+        <div className="flex-1" />
+      </div>
+    );
+  },
+);
+ChatEmpty.displayName = "ChatEmpty";

package/src/src/react/components/ai/chat/composition/chat-if.tsx

@@ -0,0 +1,25 @@
+/**
+ * ChatIf — Conditional rendering helper for chat components.
+ *
+ * @module ai/react/components/chat/composition/chat-if
+ */
+
+import type * as React from "react";
+import { useChatContextOptional } from "../contexts/chat-context.js";
+import type { ChatContextValue } from "../contexts/chat-context.js";
+
+export interface ChatIfProps {
+  children: React.ReactNode;
+  condition: boolean | ((ctx: ChatContextValue) => boolean);
+  fallback?: React.ReactNode;
+}
+
+export function ChatIf(
+  { children, condition, fallback = null }: ChatIfProps,
+): React.ReactNode {
+  const ctx = useChatContextOptional();
+
+  const shouldRender = typeof condition === "function" ? (ctx ? condition(ctx) : false) : condition;
+
+  return shouldRender ? children : fallback;
+}

package/src/src/react/components/ai/chat/composition/chat-message-list.tsx

@@ -0,0 +1,356 @@
+/**
+ * ChatMessageList — Message rendering loop with component injection.
+ *
+ * Renders user and assistant messages with support for branching, editing,
+ * feedback, sources, reasoning, tool calls, and step indicators.
+ *
+ * @module ai/react/components/chat/composition/chat-message-list
+ */
+
+import * as React from "react";
+import { MessageItem, MessageList } from "../../../../primitives/index.js";
+import type {
+  BranchInfo,
+  BrowserInferenceStatus,
+  DynamicToolUIPart,
+  InferenceMode,
+  ToolUIPart,
+  UIMessage,
+} from "../../../../../agent/react/index.js";
+import type { ChatTheme } from "../../theme.js";
+import { cn } from "../../theme.js";
+import { Markdown } from "../../markdown.js";
+import {
+  extractSourcesFromParts,
+  getTextContent,
+  groupPartsInOrder,
+  isSkillToolPart,
+} from "../utils/message-parts.js";
+import { ConversationScrollButton } from "../components/empty-state.js";
+import { MessageActions } from "../components/message-actions.js";
+import { ReasoningCard } from "../components/reasoning.js";
+import { SkillBadge } from "../components/skill-badge.js";
+import { ToolCallCard } from "../components/tool-ui.js";
+
+import { Sources } from "../components/sources.js";
+import type { Source } from "../components/sources.js";
+import { MessageEditForm } from "../components/message-edit-form.js";
+import { BranchPicker } from "../components/branch-picker.js";
+import { MessageFeedback } from "../components/message-feedback.js";
+import type { FeedbackValue } from "../components/message-feedback.js";
+import { StepIndicator } from "../components/step-indicator.js";
+import { ModelAvatar } from "./model-avatar.js";
+
+export interface ChatMessageListProps {
+  messages: UIMessage[];
+  isLoading?: boolean;
+  theme?: ChatTheme;
+
+  // Rendering
+  renderMessage?: (message: UIMessage) => React.ReactNode;
+  renderTool?: (tool: ToolUIPart | DynamicToolUIPart) => React.ReactNode;
+  model?: string;
+
+  // Features
+  showMessageActions?: boolean;
+  showSources?: boolean;
+  showSteps?: boolean;
+  showScrollButton?: boolean;
+  onSourceClick?: (source: Source, index: number) => void;
+  inferenceMode?: InferenceMode;
+  browserStatus?: BrowserInferenceStatus | null;
+
+  // Editing / Branching
+  editMessage?: (messageId: string, newText: string) => Promise<void>;
+  getBranches?: (messageId: string) => BranchInfo;
+  switchBranch?: (messageId: string, branchIndex: number) => void;
+
+  // Feedback
+  onFeedback?: (messageId: string, feedback: FeedbackValue) => void;
+
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ChatMessageList = React.forwardRef<HTMLDivElement, ChatMessageListProps>(
+  function ChatMessageList(
+    {
+      messages,
+      isLoading,
+      theme,
+      renderMessage,
+      renderTool,
+      model,
+      showMessageActions = true,
+      showSources = false,
+      showSteps = false,
+      showScrollButton = false,
+      onSourceClick,
+      inferenceMode: _inferenceMode,
+      browserStatus,
+      editMessage,
+      getBranches,
+      switchBranch,
+      onFeedback,
+      className,
+      children,
+    },
+    ref,
+  ) {
+    const messagesEndRef = React.useRef<HTMLDivElement>(null!);
+    const [editingMessageId, setEditingMessageId] = React.useState<string | null>(null);
+    const [feedbackMap, setFeedbackMap] = React.useState<Record<string, FeedbackValue>>({});
+
+    const handleFeedback = React.useCallback(
+      (msgId: string, value: FeedbackValue) => {
+        setFeedbackMap((prev) => ({ ...prev, [msgId]: value }));
+        onFeedback?.(msgId, value);
+      },
+      [onFeedback],
+    );
+
+    const messageCount = messages.length;
+    React.useEffect(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [messageCount]);
+
+    return (
+      <MessageList ref={ref} className={cn("flex-1 min-h-0 overflow-y-auto relative", className)}>
+        <div className="max-w-2xl mx-auto px-4 py-6 space-y-6">
+          {messages.map((msg) => {
+            if (renderMessage) {
+              return <React.Fragment key={msg.id}>{renderMessage(msg)}</React.Fragment>;
+            }
+
+            if (msg.role === "user") {
+              return (
+                <UserMessage
+                  key={msg.id}
+                  message={msg}
+                  theme={theme}
+                  isEditing={editingMessageId === msg.id}
+                  onStartEdit={() => setEditingMessageId(msg.id)}
+                  onCancelEdit={() =>
+                    setEditingMessageId(null)}
+                  editMessage={editMessage}
+                  getBranches={getBranches}
+                  switchBranch={switchBranch}
+                />
+              );
+            }
+
+            return (
+              <AssistantMessage
+                key={msg.id}
+                message={msg}
+                theme={theme}
+                renderTool={renderTool}
+                showMessageActions={showMessageActions}
+                showSources={showSources}
+                showSteps={showSteps}
+                onSourceClick={onSourceClick}
+                onFeedback={onFeedback ? handleFeedback : undefined}
+                feedbackMap={feedbackMap}
+              />
+            );
+          })}
+
+          {isLoading && messages[messages.length - 1]?.role !== "assistant" && (
+            <div className="flex items-start gap-3">
+              <ModelAvatar model={model} />
+              {browserStatus === "downloading-model" || browserStatus === "loading-runtime"
+                ? (
+                  <div className="flex items-center gap-2 text-xs text-[var(--muted-foreground)] py-2.5">
+                    <span className="size-1.5 rounded-full bg-amber-500 animate-pulse" />
+                    <span>
+                      {browserStatus === "downloading-model"
+                        ? "Downloading model..."
+                        : "Loading AI..."}
+                    </span>
+                  </div>
+                )
+                : (
+                  <div className="flex gap-1.5 items-center py-3">
+                    <span className={cn(theme?.loading)} />
+                    <span className={cn(theme?.loading)} style={{ animationDelay: "0.15s" }} />
+                    <span className={cn(theme?.loading)} style={{ animationDelay: "0.3s" }} />
+                  </div>
+                )}
+            </div>
+          )}
+
+          <div ref={messagesEndRef} />
+        </div>
+
+        {children}
+
+        {showScrollButton && (
+          <ConversationScrollButton
+            onClick={() => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })}
+          />
+        )}
+      </MessageList>
+    );
+  },
+);
+ChatMessageList.displayName = "ChatMessageList";
+
+// --- Internal sub-components ---
+
+interface UserMessageProps {
+  message: UIMessage;
+  theme?: ChatTheme;
+  isEditing: boolean;
+  onStartEdit: () => void;
+  onCancelEdit: () => void;
+  editMessage?: (messageId: string, newText: string) => Promise<void>;
+  getBranches?: (messageId: string) => BranchInfo;
+  switchBranch?: (messageId: string, branchIndex: number) => void;
+}
+
+function UserMessage({
+  message: msg,
+  theme,
+  isEditing,
+  onStartEdit,
+  onCancelEdit,
+  editMessage,
+  getBranches,
+  switchBranch,
+}: UserMessageProps): React.ReactElement {
+  const content = getTextContent(msg);
+  const branches = getBranches?.(msg.id);
+  const hasBranches = branches && branches.total > 1;
+
+  return (
+    <MessageItem role={msg.role} className={cn("flex flex-col items-end", "group/msg")}>
+      {isEditing
+        ? (
+          <div className="w-full max-w-md">
+            <MessageEditForm
+              initialContent={content}
+              onSave={(text) => {
+                onCancelEdit();
+                editMessage?.(msg.id, text);
+              }}
+              onCancel={onCancelEdit}
+            />
+          </div>
+        )
+        : (
+          <div className={theme?.message?.user}>
+            <p className="whitespace-pre-wrap text-[15px] leading-relaxed">{content}</p>
+          </div>
+        )}
+      {!isEditing && (
+        <div className="flex items-center gap-2 mt-1">
+          {hasBranches && (
+            <BranchPicker
+              current={branches.current}
+              total={branches.total}
+              onPrev={() => switchBranch?.(msg.id, branches.current - 2)}
+              onNext={() => switchBranch?.(msg.id, branches.current)}
+            />
+          )}
+          {editMessage && <MessageActions content={content} onEdit={onStartEdit} />}
+        </div>
+      )}
+    </MessageItem>
+  );
+}
+
+interface AssistantMessageProps {
+  message: UIMessage;
+  theme?: ChatTheme;
+  renderTool?: (tool: ToolUIPart | DynamicToolUIPart) => React.ReactNode;
+  showMessageActions?: boolean;
+  showSources?: boolean;
+  showSteps?: boolean;
+  onSourceClick?: (source: Source, index: number) => void;
+  onFeedback?: (messageId: string, feedback: FeedbackValue) => void;
+  feedbackMap: Record<string, FeedbackValue>;
+}
+
+function AssistantMessage({
+  message: msg,
+  theme,
+  renderTool,
+  showMessageActions = true,
+  showSources = false,
+  showSteps = false,
+  onSourceClick,
+  onFeedback,
+  feedbackMap,
+}: AssistantMessageProps): React.ReactElement {
+  const partGroups = groupPartsInOrder(msg.parts);
+  const stepCount = partGroups.filter((g) => g.type === "step").length;
+  const textContent = getTextContent(msg);
+  const messageSources = showSources ? extractSourcesFromParts(msg.parts) : [];
+
+  return (
+    <MessageItem
+      role={msg.role}
+      className={cn("flex items-start gap-3", "justify-start", "group/msg")}
+    >
+      <ModelAvatar model={(msg.metadata?.model as string) || undefined} />
+      <div className={cn(theme?.message?.assistant, "flex-1 min-w-0")}>
+        {partGroups.map((group, index) => {
+          if (group.type === "text") {
+            return (
+              <Markdown key={`text-${index}`} className="text-[15px] leading-7">
+                {group.content}
+              </Markdown>
+            );
+          }
+          if (group.type === "reasoning") {
+            return (
+              <ReasoningCard
+                key={`reasoning-${index}`}
+                text={group.text}
+                isStreaming={group.isStreaming}
+              />
+            );
+          }
+          if (group.type === "step") {
+            return showSteps && stepCount > 1
+              ? (
+                <StepIndicator
+                  key={`step-${group.stepIndex}`}
+                  stepIndex={group.stepIndex}
+                  isComplete={group.isComplete}
+                />
+              )
+              : null;
+          }
+          const isSkill = isSkillToolPart(group.tool);
+          return (
+            <div key={group.tool.toolCallId} className={isSkill ? "my-2" : "my-3"}>
+              {renderTool
+                ? renderTool(group.tool)
+                : isSkill
+                ? <SkillBadge tool={group.tool} />
+                : <ToolCallCard tool={group.tool} />}
+            </div>
+          );
+        })}
+
+        {(showMessageActions || onFeedback) && textContent && (
+          <div className="flex items-center gap-1 mt-1">
+            {showMessageActions && <MessageActions content={textContent} />}
+            {onFeedback && (
+              <MessageFeedback
+                messageId={msg.id}
+                feedback={feedbackMap[msg.id]}
+                onFeedback={onFeedback}
+              />
+            )}
+          </div>
+        )}
+
+        {messageSources.length > 0 && (
+          <Sources sources={messageSources} onSourceClick={onSourceClick} />
+        )}
+      </div>
+    </MessageItem>
+  );
+}

package/src/src/react/components/ai/chat/composition/chat-root.tsx

@@ -0,0 +1,181 @@
+/**
+ * ChatRoot — Context provider and container for the compound chat system.
+ *
+ * Provides ChatContextValue to all descendant components. Extra HTML div
+ * attributes (e.g. drag handlers) are forwarded to the container element.
+ *
+ * @module ai/react/components/chat/composition/chat-root
+ */
+
+import * as React from "react";
+import { ChatContainer } from "../../../../primitives/index.js";
+import type { UIMessage } from "../../../../../agent/react/index.js";
+import type { ChatTheme } from "../../theme.js";
+import { cn, defaultChatTheme, generateTokenCSS, mergeThemes } from "../../theme.js";
+import type { ModelOption } from "../../model-selector.js";
+import type { AttachmentInfo } from "../components/attachment-pill.js";
+import type { FeedbackValue } from "../components/message-feedback.js";
+import type { Source } from "../components/sources.js";
+import type { BranchInfo } from "../../../../../agent/react/index.js";
+import { ChatContextProvider } from "../contexts/chat-context.js";
+import type { ChatContextValue } from "../contexts/chat-context.js";
+
+export interface ChatRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  children: React.ReactNode;
+
+  // Messages
+  messages: UIMessage[];
+  isLoading?: boolean;
+  error?: Error | null;
+
+  // Input
+  input: string;
+  setInput?: (value: string) => void;
+
+  // Submit / Stop
+  onSubmit?: (e?: React.FormEvent) => void | Promise<void>;
+  onStop?: () => void;
+  onReload?: () => void;
+
+  // Model
+  model?: string;
+  models?: ModelOption[];
+  onModelChange?: (modelId: string) => void;
+
+  // Attachments
+  attachments?: AttachmentInfo[];
+  onAttach?: (files: FileList) => void;
+  onRemoveAttachment?: (id: string) => void;
+
+  // Branching
+  editMessage?: (messageId: string, newText: string) => Promise<void>;
+  getBranches?: (messageId: string) => BranchInfo;
+  switchBranch?: (messageId: string, branchIndex: number) => void;
+
+  // Feedback
+  onFeedback?: (messageId: string, feedback: FeedbackValue) => void;
+
+  // Sources
+  showSources?: boolean;
+  onSourceClick?: (source: Source, index: number) => void;
+
+  // Theme
+  theme?: Partial<ChatTheme>;
+  maxHeight?: string;
+}
+
+export const ChatRoot = React.forwardRef<HTMLDivElement, ChatRootProps>(
+  function ChatRoot(
+    {
+      children,
+      messages,
+      isLoading = false,
+      error = null,
+      input,
+      setInput,
+      onSubmit,
+      onStop,
+      onReload,
+      model,
+      models = [],
+      onModelChange,
+      attachments = [],
+      onAttach,
+      onRemoveAttachment,
+      editMessage,
+      getBranches,
+      switchBranch,
+      onFeedback,
+      showSources = false,
+      onSourceClick,
+      theme: userTheme,
+      maxHeight = "100%",
+      className,
+      style,
+      ...containerProps
+    },
+    ref,
+  ) {
+    const theme = React.useMemo(() => mergeThemes(defaultChatTheme, userTheme), [userTheme]);
+    const tokenCSS = React.useMemo(() => generateTokenCSS(), []);
+    const [isAtBottom, _setIsAtBottom] = React.useState(true);
+    const scrollAreaRef = React.useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = React.useCallback(() => {
+      scrollAreaRef.current?.scrollTo({
+        top: scrollAreaRef.current.scrollHeight,
+        behavior: "smooth",
+      });
+    }, []);
+
+    const contextValue = React.useMemo<ChatContextValue>(
+      () => ({
+        messages,
+        isLoading,
+        error,
+        input,
+        setInput: setInput ?? (() => {}),
+        onSubmit: onSubmit ?? (() => {}),
+        onStop,
+        onReload,
+        model,
+        models,
+        onModelChange,
+        attachments,
+        onAttach,
+        onRemoveAttachment,
+        editMessage,
+        getBranches,
+        switchBranch,
+        onFeedback,
+        showSources,
+        onSourceClick,
+        isEmpty: messages.length === 0,
+        isAtBottom,
+        scrollToBottom,
+        theme,
+      }),
+      [
+        messages,
+        isLoading,
+        error,
+        input,
+        setInput,
+        onSubmit,
+        onStop,
+        onReload,
+        model,
+        models,
+        onModelChange,
+        attachments,
+        onAttach,
+        onRemoveAttachment,
+        editMessage,
+        getBranches,
+        switchBranch,
+        onFeedback,
+        showSources,
+        onSourceClick,
+        isAtBottom,
+        scrollToBottom,
+        theme,
+      ],
+    );
+
+    return (
+      <ChatContextProvider value={contextValue}>
+        <style dangerouslySetInnerHTML={{ __html: tokenCSS }} />
+        <ChatContainer
+          ref={ref}
+          data-vf-chat=""
+          className={cn(theme.container, "relative", className)}
+          style={{ maxHeight, ...style }}
+          {...containerProps}
+        >
+          {children}
+        </ChatContainer>
+      </ChatContextProvider>
+    );
+  },
+);
+ChatRoot.displayName = "ChatRoot";

package/src/src/react/components/ai/chat/composition/error-banner.tsx

@@ -0,0 +1,38 @@
+/**
+ * ErrorBanner — Inline error display with optional retry action.
+ *
+ * @module ai/react/components/chat/composition/error-banner
+ */
+
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { RefreshCwIcon } from "../../icons/index.js";
+
+export interface ErrorBannerProps {
+  error: Error;
+  onRetry?: () => void;
+  className?: string;
+}
+
+export const ErrorBanner = React.forwardRef<HTMLDivElement, ErrorBannerProps>(
+  function ErrorBanner({ error, onRetry, className }, ref) {
+    return (
+      <div ref={ref} className={cn("max-w-2xl mx-auto px-4 pb-2", className)}>
+        <div className="px-4 py-3 bg-red-50 rounded-2xl text-red-600 text-sm flex items-center justify-between gap-3 border border-red-100">
+          <span>{error.message}</span>
+          {onRetry && (
+            <button
+              type="button"
+              onClick={onRetry}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-100 hover:bg-red-200 rounded-full transition-colors"
+            >
+              <RefreshCwIcon className="size-3" />
+              Retry
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+ErrorBanner.displayName = "ErrorBanner";