veryfront 0.1.47 → 0.1.49

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

@@ -0,0 +1,337 @@
+/**
+ * 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 ai/react/components/chat/composition/message
+ */
+
+import * as React from "react";
+import type { BranchInfo, DynamicToolUIPart, ToolUIPart, UIMessage } 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: UIMessage;
+  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 {
+        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
+// ---------------------------------------------------------------------------
+
+export 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: ToolUIPart | DynamicToolUIPart) => 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
+// ---------------------------------------------------------------------------
+
+export 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
+// ---------------------------------------------------------------------------
+
+export 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/ai/chat/composition/model-avatar.tsx

@@ -0,0 +1,103 @@
+/**
+ * Model Avatar — Provider-specific avatar icons.
+ *
+ * Uses official brand logomarks from Simple Icons (simpleicons.org).
+ *
+ * @module ai/react/components/chat/composition/model-avatar
+ */
+
+import * as React from "react";
+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>
+  );
+}

package/src/src/react/components/ai/chat/contexts/chat-context.tsx

@@ -0,0 +1,78 @@
+/**
+ * ChatContext — Root-level shared state for the chat component system.
+ *
+ * Provided by ChatRoot. Consumed by all descendant chat components via useChatContext().
+ *
+ * @module ai/react/components/chat/contexts/chat-context
+ */
+
+import * as React from "react";
+import type { UIMessage } from "../../../../../agent/react/index.js";
+import type { ChatTheme } 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";
+
+export interface ChatContextValue {
+  // 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;
+
+  // UI State
+  isEmpty: boolean;
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+
+  // Theme
+  theme: ChatTheme;
+}
+
+const ChatContext = React.createContext<ChatContextValue | null>(null);
+
+export function useChatContext(): ChatContextValue {
+  const context = React.useContext(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within a ChatRoot or Chat component");
+  }
+  return context;
+}
+
+export function useChatContextOptional(): ChatContextValue | null {
+  return React.useContext(ChatContext);
+}
+
+export const ChatContextProvider = ChatContext.Provider;

package/src/src/react/components/ai/chat/contexts/composer-context.tsx

@@ -0,0 +1,59 @@
+/**
+ * ComposerContext — Input/composer state for the chat input area.
+ *
+ * Provided by Composer.Root or ChatRoot. Consumed by input, submit button,
+ * attachment controls, model selector, voice input, etc.
+ *
+ * @module ai/react/components/chat/contexts/composer-context
+ */
+
+import * as React from "react";
+import type { AttachmentInfo } from "../components/attachment-pill.js";
+import type { ModelOption } from "../../model-selector.js";
+
+export interface ComposerContextValue {
+  // Input
+  input: string;
+  setInput: (value: string) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+
+  // Attachments
+  attachments: AttachmentInfo[];
+  onAttach?: (files: FileList) => void;
+  onRemoveAttachment?: (id: string) => void;
+  attachAccept?: string;
+
+  // Submit
+  onSubmit: (e?: React.FormEvent) => void;
+  isLoading: boolean;
+  canSubmit: boolean;
+
+  // Stop
+  onStop?: () => void;
+
+  // Voice
+  onVoice?: () => void;
+  isListening: boolean;
+  transcript?: string;
+
+  // Model
+  model?: string;
+  models: ModelOption[];
+  onModelChange?: (modelId: string) => void;
+}
+
+const ComposerContext = React.createContext<ComposerContextValue | null>(null);
+
+export function useComposerContext(): ComposerContextValue {
+  const context = React.useContext(ComposerContext);
+  if (!context) {
+    throw new Error("useComposerContext must be used within a Composer or Chat component");
+  }
+  return context;
+}
+
+export function useComposerContextOptional(): ComposerContextValue | null {
+  return React.useContext(ComposerContext);
+}
+
+export const ComposerContextProvider = ComposerContext.Provider;

package/src/src/react/components/ai/chat/contexts/index.ts

@@ -0,0 +1,36 @@
+/**
+ * Chat Contexts
+ *
+ * React contexts for the compound component system. Each context provides
+ * state to a specific layer of the component tree.
+ *
+ * @module ai/react/components/chat/contexts
+ */
+
+export {
+  ChatContextProvider,
+  type ChatContextValue,
+  useChatContext,
+  useChatContextOptional,
+} from "./chat-context.js";
+
+export {
+  MessageContextProvider,
+  type MessageContextValue,
+  useMessageContext,
+  useMessageContextOptional,
+} from "./message-context.js";
+
+export {
+  ComposerContextProvider,
+  type ComposerContextValue,
+  useComposerContext,
+  useComposerContextOptional,
+} from "./composer-context.js";
+
+export {
+  ThreadListContextProvider,
+  type ThreadListContextValue,
+  useThreadListContext,
+  useThreadListContextOptional,
+} from "./thread-list-context.js";

package/src/src/react/components/ai/chat/contexts/message-context.tsx

@@ -0,0 +1,49 @@
+/**
+ * MessageContext — Per-message state for message sub-components.
+ *
+ * Provided by Message.Root or the message rendering loop.
+ * Consumed by action bars, branch pickers, feedback buttons, etc.
+ *
+ * @module ai/react/components/chat/contexts/message-context
+ */
+
+import * as React from "react";
+import type { BranchInfo, UIMessage } from "../../../../../agent/react/index.js";
+import type { FeedbackValue } from "../components/message-feedback.js";
+import type { PartGroup } from "../utils/message-parts.js";
+
+export interface MessageContextValue {
+  message: UIMessage;
+  role: "user" | "assistant" | "system" | "tool";
+  isStreaming: boolean;
+  parts: PartGroup[];
+  textContent: string;
+
+  // Branch navigation
+  branch: BranchInfo | null;
+  onBranchPrev?: () => void;
+  onBranchNext?: () => void;
+
+  // Actions
+  onCopy: () => Promise<void>;
+  onEdit?: (content: string) => void;
+  onRegenerate?: () => void;
+  onFeedback?: (value: FeedbackValue) => void;
+  feedback?: FeedbackValue | null;
+}
+
+const MessageContext = React.createContext<MessageContextValue | null>(null);
+
+export function useMessageContext(): MessageContextValue {
+  const context = React.useContext(MessageContext);
+  if (!context) {
+    throw new Error("useMessageContext must be used within a Message component");
+  }
+  return context;
+}
+
+export function useMessageContextOptional(): MessageContextValue | null {
+  return React.useContext(MessageContext);
+}
+
+export const MessageContextProvider = MessageContext.Provider;