veryfront 0.1.545 → 0.1.547

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

@@ -1,183 +0,0 @@
-/**
- * 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 react/components/chat/composition/chat-root
- */
-
-import * as React from "../../../../../../react/react.js";
-import { ChatContainer } from "../../../../primitives/index.js";
-import type { ChatMessage } from "../../../../../agent/react/index.js";
-import type { ChatTheme } from "../../theme.js";
-import { getDocumentNonce } from "../../csp-nonce.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: ChatMessage[];
-  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 nonce = getDocumentNonce();
-    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 nonce={nonce} 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/chat/chat/composition/error-banner.tsx

@@ -1,38 +0,0 @@
-/**
- * ErrorBanner — Inline error display with optional retry action.
- *
- * @module react/components/chat/composition/error-banner
- */
-
-import * as React from "../../../../../../react/react.js";
-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";

package/src/src/react/components/chat/chat/composition/message.tsx

@@ -1,343 +0,0 @@
-/**
- * Message — Compound component for rendering individual chat messages.
- *
- * Provides fine-grained control over per-message rendering. Each sub-component
- * consumes MessageContext, so they must be nested inside Message.Root.
- *
- * @example
- * ```tsx
- * <Message.Root message={msg}>
- *   <Message.Avatar />
- *   <div className="flex-1">
- *     <Message.Content />
- *     <Message.Actions />
- *   </div>
- * </Message.Root>
- * ```
- *
- * @module react/components/chat/composition/message
- */
-
-import * as React from "../../../../../../react/react.js";
-import type {
-  BranchInfo,
-  ChatDynamicToolPart,
-  ChatMessage,
-  ChatToolPart,
-} from "../../../../../agent/react/index.js";
-import { cn } from "../../theme.js";
-import { Markdown } from "../../markdown.js";
-import { MessageItem } from "../../../../primitives/index.js";
-import { MessageContextProvider, useMessageContext } from "../contexts/message-context.js";
-import type { MessageContextValue } from "../contexts/message-context.js";
-import { useChatContextOptional } from "../contexts/chat-context.js";
-import type { FeedbackValue } from "../components/message-feedback.js";
-import { MessageActions as ActionsImpl } from "../components/message-actions.js";
-import { MessageFeedback as FeedbackImpl } from "../components/message-feedback.js";
-import { BranchPicker as BranchPickerImpl } from "../components/branch-picker.js";
-import { ReasoningCard } from "../components/reasoning.js";
-import { SkillBadge } from "../components/skill-badge.js";
-import { ToolCallCard } from "../components/tool-ui.js";
-import { StepIndicator } from "../components/step-indicator.js";
-import { Sources as SourcesImpl } from "../components/sources.js";
-import type { Source } from "../components/sources.js";
-import { ModelAvatar as AvatarImpl } from "./model-avatar.js";
-import {
-  extractSourcesFromParts,
-  getTextContent,
-  groupPartsInOrder,
-  isSkillToolPart,
-} from "../utils/message-parts.js";
-
-// ---------------------------------------------------------------------------
-// Message.Root
-// ---------------------------------------------------------------------------
-
-export interface MessageRootProps {
-  message: ChatMessage;
-  isStreaming?: boolean;
-  children: React.ReactNode;
-  className?: string;
-
-  // Optional overrides — falls back to ChatContext when available
-  editMessage?: (messageId: string, newText: string) => Promise<void>;
-  getBranches?: (messageId: string) => BranchInfo;
-  switchBranch?: (messageId: string, branchIndex: number) => void;
-  onFeedback?: (messageId: string, feedback: FeedbackValue) => void;
-  feedback?: FeedbackValue | null;
-}
-
-const MessageRoot = React.forwardRef<HTMLDivElement, MessageRootProps>(
-  function MessageRoot(
-    { message, isStreaming = false, children, className, ...overrides },
-    ref,
-  ) {
-    const chat = useChatContextOptional();
-    const role = message.role as MessageContextValue["role"];
-    const parts = React.useMemo(() => groupPartsInOrder(message.parts), [message.parts]);
-    const textContent = React.useMemo(() => getTextContent(message), [message]);
-
-    const editMessage = overrides.editMessage ?? chat?.editMessage;
-    const getBranches = overrides.getBranches ?? chat?.getBranches;
-    const switchBranch = overrides.switchBranch ?? chat?.switchBranch;
-    const onFeedbackProp = overrides.onFeedback ?? chat?.onFeedback;
-
-    const branch = React.useMemo(
-      () => getBranches?.(message.id) ?? null,
-      [getBranches, message.id],
-    );
-
-    const onCopy = React.useCallback(async () => {
-      try {
-        await navigator.clipboard.writeText(textContent);
-      } catch (_) {
-        /* expected: clipboard API unavailable, using fallback */
-        const textarea = document.createElement("textarea");
-        textarea.value = textContent;
-        document.body.appendChild(textarea);
-        textarea.select();
-        document.execCommand("copy");
-        document.body.removeChild(textarea);
-      }
-    }, [textContent]);
-
-    const contextValue = React.useMemo<MessageContextValue>(
-      () => ({
-        message,
-        role,
-        isStreaming,
-        parts,
-        textContent,
-        branch,
-        onBranchPrev: branch && switchBranch
-          ? () => switchBranch(message.id, branch.current - 2)
-          : undefined,
-        onBranchNext: branch && switchBranch
-          ? () => switchBranch(message.id, branch.current)
-          : undefined,
-        onCopy,
-        onEdit: editMessage
-          ? (content: string) => {
-            editMessage(message.id, content);
-          }
-          : undefined,
-        onFeedback: onFeedbackProp
-          ? (value: FeedbackValue) => onFeedbackProp(message.id, value)
-          : undefined,
-        feedback: overrides.feedback,
-      }),
-      [
-        message,
-        message.id,
-        role,
-        isStreaming,
-        parts,
-        textContent,
-        branch,
-        switchBranch,
-        onCopy,
-        editMessage,
-        onFeedbackProp,
-        overrides.feedback,
-      ],
-    );
-
-    const isUser = role === "user";
-
-    return (
-      <MessageContextProvider value={contextValue}>
-        <MessageItem
-          ref={ref}
-          role={message.role}
-          className={cn(
-            isUser
-              ? "flex flex-col items-end group/msg"
-              : "flex items-start gap-3 justify-start group/msg",
-            className,
-          )}
-        >
-          {children}
-        </MessageItem>
-      </MessageContextProvider>
-    );
-  },
-);
-MessageRoot.displayName = "Message.Root";
-
-// ---------------------------------------------------------------------------
-// Message.Avatar
-// ---------------------------------------------------------------------------
-
-interface MessageAvatarProps {
-  className?: string;
-}
-
-function MessageAvatar({ className }: MessageAvatarProps): React.ReactElement | null {
-  const { message, role } = useMessageContext();
-  if (role === "user") return null;
-  return (
-    <AvatarImpl
-      model={(message.metadata?.model as string) || undefined}
-      className={className}
-    />
-  );
-}
-MessageAvatar.displayName = "Message.Avatar";
-
-// ---------------------------------------------------------------------------
-// Message.Content
-// ---------------------------------------------------------------------------
-
-export interface MessageContentProps {
-  renderTool?: (tool: ChatToolPart | ChatDynamicToolPart) => React.ReactNode;
-  showSteps?: boolean;
-  showSources?: boolean;
-  onSourceClick?: (source: Source, index: number) => void;
-  className?: string;
-}
-
-function MessageContent({
-  renderTool,
-  showSteps = false,
-  showSources = false,
-  onSourceClick,
-  className,
-}: MessageContentProps): React.ReactElement {
-  const { message, role, parts, textContent } = useMessageContext();
-  const chat = useChatContextOptional();
-  const shouldShowSources = showSources || chat?.showSources || false;
-  const sourceClickHandler = onSourceClick ?? chat?.onSourceClick;
-
-  if (role === "user") {
-    return (
-      <div className={cn(chat?.theme.message?.user, className)}>
-        <p className="whitespace-pre-wrap text-[15px] leading-relaxed">{textContent}</p>
-      </div>
-    );
-  }
-
-  const stepCount = parts.filter((g) => g.type === "step").length;
-  const messageSources = shouldShowSources ? extractSourcesFromParts(message.parts) : [];
-
-  return (
-    <div className={cn(chat?.theme.message?.assistant, "flex-1 min-w-0", className)}>
-      {parts.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>
-        );
-      })}
-      {messageSources.length > 0 && (
-        <SourcesImpl sources={messageSources} onSourceClick={sourceClickHandler} />
-      )}
-    </div>
-  );
-}
-MessageContent.displayName = "Message.Content";
-
-// ---------------------------------------------------------------------------
-// Message.Actions
-// ---------------------------------------------------------------------------
-
-interface MessageActionsWrapperProps {
-  className?: string;
-}
-
-function MessageActionsWrapper(
-  { className }: MessageActionsWrapperProps,
-): React.ReactElement | null {
-  const { textContent, onEdit } = useMessageContext();
-  if (!textContent) return null;
-  return <ActionsImpl content={textContent} onEdit={onEdit} className={className} />;
-}
-MessageActionsWrapper.displayName = "Message.Actions";
-
-// ---------------------------------------------------------------------------
-// Message.Feedback
-// ---------------------------------------------------------------------------
-
-interface MessageFeedbackWrapperProps {
-  className?: string;
-}
-
-function MessageFeedbackWrapper(
-  { className }: MessageFeedbackWrapperProps,
-): React.ReactElement | null {
-  const { message, onFeedback, feedback } = useMessageContext();
-  if (!onFeedback) return null;
-  return (
-    <FeedbackImpl
-      messageId={message.id}
-      feedback={feedback}
-      onFeedback={(_msgId, value) => onFeedback(value)}
-      className={className}
-    />
-  );
-}
-MessageFeedbackWrapper.displayName = "Message.Feedback";
-
-// ---------------------------------------------------------------------------
-// Message.BranchPicker
-// ---------------------------------------------------------------------------
-
-function MessageBranchPicker(): React.ReactElement | null {
-  const { branch, onBranchPrev, onBranchNext } = useMessageContext();
-  if (!branch || branch.total <= 1) return null;
-  return (
-    <BranchPickerImpl
-      current={branch.current}
-      total={branch.total}
-      onPrev={onBranchPrev ?? (() => {})}
-      onNext={onBranchNext ?? (() => {})}
-    />
-  );
-}
-MessageBranchPicker.displayName = "Message.BranchPicker";
-
-// ---------------------------------------------------------------------------
-// Message — compound export
-// ---------------------------------------------------------------------------
-
-export type { MessageContentProps as MessageCompoundContentProps, MessageContextValue };
-
-export const Message = Object.assign(MessageRoot, {
-  Root: MessageRoot,
-  Avatar: MessageAvatar,
-  Content: MessageContent,
-  Actions: MessageActionsWrapper,
-  Feedback: MessageFeedbackWrapper,
-  BranchPicker: MessageBranchPicker,
-});

package/src/src/react/components/chat/chat/composition/model-avatar.tsx

@@ -1,103 +0,0 @@
-/**
- * Model Avatar — Provider-specific avatar icons.
- *
- * Uses official brand logomarks from Simple Icons (simpleicons.org).
- *
- * @module react/components/chat/composition/model-avatar
- */
-
-import * as React from "../../../../../../react/react.js";
-import { cn } from "../../theme.js";
-import { SparklesIcon } from "../../icons/index.js";
-
-export interface ModelAvatarProps {
-  model?: string;
-  className?: string;
-}
-
-// Official Anthropic logomark — Simple Icons (viewBox 0 0 24 24)
-function AnthropicLogo({ className }: { className?: string }): React.ReactElement {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-      <path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" />
-    </svg>
-  );
-}
-
-// Official OpenAI logomark — Simple Icons (viewBox 0 0 24 24)
-function OpenAILogo({ className }: { className?: string }): React.ReactElement {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-    </svg>
-  );
-}
-
-// Official Google Gemini logomark — Simple Icons (viewBox 0 0 24 24)
-function GeminiLogo({ className }: { className?: string }): React.ReactElement {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-      <path d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81" />
-    </svg>
-  );
-}
-
-function resolveProvider(model: string): "anthropic" | "openai" | "google" | "unknown" {
-  const m = model.toLowerCase();
-  if (m.includes("anthropic") || m.includes("claude")) return "anthropic";
-  if (
-    m.includes("openai") || m.includes("gpt") || m.includes("o1") ||
-    m.includes("o3") || m.includes("o4")
-  ) return "openai";
-  if (m.includes("google") || m.includes("gemini")) return "google";
-  return "unknown";
-}
-
-const PROVIDER_STYLES = {
-  anthropic: "bg-[#181818]",
-  openai: "bg-[var(--foreground)]",
-  google: "bg-[var(--foreground)]",
-  unknown: "bg-[var(--muted-foreground)]",
-} as const;
-
-export function ModelAvatar(
-  { model, className }: ModelAvatarProps,
-): React.ReactElement {
-  const provider = resolveProvider(model ?? "");
-
-  const base = cn(
-    "mt-1 shrink-0 size-8 rounded-full flex items-center justify-center",
-    PROVIDER_STYLES[provider],
-    className,
-  );
-
-  if (provider === "anthropic") {
-    return (
-      <div className={base}>
-        <AnthropicLogo className="size-4 text-[#D4A27F]" />
-      </div>
-    );
-  }
-
-  if (provider === "openai") {
-    return (
-      <div className={base}>
-        <OpenAILogo className="size-4 text-[var(--background)]" />
-      </div>
-    );
-  }
-
-  if (provider === "google") {
-    return (
-      <div className={base}>
-        <GeminiLogo className="size-4 text-[var(--background)]" />
-      </div>
-    );
-  }
-
-  return (
-    <div className={base}>
-      <SparklesIcon className="size-4 text-[var(--background)]" />
-    </div>
-  );
-}