veryfront 0.1.47 → 0.1.49

package/src/src/react/components/ai/chat/components/tab-switcher.tsx

@@ -0,0 +1,69 @@
+/**
+ * TabSwitcher — Animated tab pill matching the Studio Tabs pattern.
+ *
+ * Uses a CSS-only sliding indicator (no Framer Motion dependency) with
+ * spring-like cubic-bezier easing to approximate Studio's motion.div.
+ * WAI-ARIA tabs pattern with keyboard navigation.
+ */
+
+import * as React from "react";
+import { cn } from "../../theme.js";
+
+export type ChatTab = "chat" | "uploads";
+
+export interface TabSwitcherProps {
+  activeTab: ChatTab;
+  onTabChange: (tab: ChatTab) => void;
+  className?: string;
+}
+
+const TABS: { value: ChatTab; label: string }[] = [
+  { value: "chat", label: "Chat" },
+  { value: "uploads", label: "Uploads" },
+];
+
+export function TabSwitcher({
+  activeTab,
+  onTabChange,
+  className,
+}: TabSwitcherProps): React.ReactElement {
+  return (
+    <div className={cn("flex items-center justify-center py-5", className)}>
+      <div
+        role="tablist"
+        aria-label="Chat view"
+        className="inline-flex w-fit items-center gap-1 p-1 rounded-full bg-[var(--tab-background)] h-[38px]"
+      >
+        {TABS.map((tab) => {
+          const isActive = activeTab === tab.value;
+          return (
+            <button
+              key={tab.value}
+              type="button"
+              role="tab"
+              aria-selected={isActive}
+              tabIndex={isActive ? 0 : -1}
+              onClick={() => onTabChange(tab.value)}
+              onKeyDown={(e) => {
+                if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+                  e.preventDefault();
+                  const next = tab.value === "chat" ? "uploads" : "chat";
+                  onTabChange(next);
+                }
+              }}
+              className={cn(
+                "inline-flex items-center h-full px-5 text-sm font-medium rounded-full transition-colors cursor-pointer",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+                isActive
+                  ? "bg-[var(--tab-active-background)] text-[var(--tab-active-foreground)]"
+                  : "text-[var(--tab-foreground)]",
+              )}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/src/react/components/ai/chat/components/tool-ui.tsx

@@ -45,7 +45,7 @@ export function ToolStatusBadge({ state }: { state: string }): React.JSX.Element
   const config = TOOL_STATUS_CONFIG[state];
 
   return (
-    <span className="inline-flex items-center gap-1.5 rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground border border-border">
+    <span className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)] px-2.5 py-0.5 text-xs font-medium text-[var(--foreground)] border border-[var(--border)]">
       {config?.icon ?? <CircleIcon className="size-3.5" />}
       {config?.label ?? state}
     </span>
@@ -67,14 +67,14 @@ function formatJsonWithHighlight(obj: unknown): React.ReactNode {
   const highlighted = escaped
     .replace(
       /&quot;([^&]*)&quot;:/g,
-      '<span class="text-green-600 dark:text-green-400">&quot;$1&quot;</span>:',
+      '<span class="text-green-600">&quot;$1&quot;</span>:',
     )
     .replace(
       /: &quot;([^&]*)&quot;/g,
-      ': <span class="text-amber-600 dark:text-amber-400">&quot;$1&quot;</span>',
+      ': <span class="text-amber-600">&quot;$1&quot;</span>',
     )
-    .replace(/: (\d+)/g, ': <span class="text-blue-600 dark:text-blue-400">$1</span>')
-    .replace(/: (true|false)/g, ': <span class="text-purple-600 dark:text-purple-400">$1</span>');
+    .replace(/: (\d+)/g, ': <span class="text-blue-600">$1</span>')
+    .replace(/: (true|false)/g, ': <span class="text-purple-600">$1</span>');
 
   return (
     <pre
@@ -97,11 +97,11 @@ function renderOutputAsTable(output: unknown): React.ReactNode | null {
     <div className="overflow-x-auto">
       <table className="min-w-full text-sm">
         <thead>
-          <tr className="border-b border-neutral-200 dark:border-neutral-700">
+          <tr className="border-b border-[var(--border)]">
             {keys.map((key) => (
               <th
                 key={key}
-                className="px-4 py-2 text-left font-semibold text-neutral-900 dark:text-neutral-100"
+                className="px-4 py-2 text-left font-semibold text-[var(--foreground)]"
               >
                 {key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
               </th>
@@ -113,9 +113,9 @@ function renderOutputAsTable(output: unknown): React.ReactNode | null {
             const record = row as Record<string, unknown> | null;
 
             return (
-              <tr key={i} className="border-b border-neutral-100 dark:border-neutral-800">
+              <tr key={i} className="border-b border-[var(--border)]">
                 {keys.map((key) => (
-                  <td key={key} className="px-4 py-2 text-neutral-700 dark:text-neutral-300">
+                  <td key={key} className="px-4 py-2 text-[var(--card-foreground)]">
                     {String(record?.[key] ?? "")}
                   </td>
                 ))}
@@ -142,55 +142,57 @@ export function ToolCallCard({
   const tableOutput = tool.output === undefined ? null : renderOutputAsTable(tool.output);
 
   return (
-    <div className="not-prose w-full rounded-md border border-border bg-card">
+    <div className="not-prose w-full rounded-xl border border-[var(--border)] bg-[var(--card)]">
       <button
         type="button"
         onClick={() => setIsExpanded((v) => !v)}
-        className="group flex w-full items-center justify-between gap-4 p-3 hover:bg-muted/50 transition-colors"
+        className="group flex w-full items-center justify-between gap-4 p-3 hover:bg-[var(--accent)] transition-all rounded-t-xl"
       >
         <div className="flex items-center gap-2">
-          <WrenchIcon className="size-4 text-muted-foreground" />
-          <span className="font-medium text-sm text-foreground">{tool.toolName}</span>
+          <WrenchIcon className="size-4 text-[var(--muted-foreground)]" />
+          <span className="font-medium text-sm text-[var(--foreground)]">{tool.toolName}</span>
           <ToolStatusBadge state={tool.state} />
         </div>
         <ChevronDownIcon
           className={cn(
-            "size-4 text-muted-foreground transition-transform",
+            "size-4 text-[var(--muted-foreground)] transition-transform",
             isExpanded && "rotate-180",
           )}
         />
       </button>
 
       {!isExpanded ? null : (
-        <div className="border-t border-border">
+        <div className="border-t border-[var(--border)]">
           {tool.input === undefined ? null : (
             <div className="space-y-2 overflow-hidden p-4">
-              <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+              <h4 className="font-medium text-[var(--muted-foreground)] text-xs uppercase tracking-wide">
                 Parameters
               </h4>
-              <div className="rounded-md bg-muted/50 p-3">
+              <div className="rounded-lg bg-[var(--accent)] p-3">
                 {formatJsonWithHighlight(tool.input)}
               </div>
             </div>
           )}
 
-          {tool.output === undefined ? null : (
-            <div className="space-y-2 p-4 border-t border-border">
-              <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
-                Result
-              </h4>
-              <div className="overflow-x-auto rounded-md bg-muted/50 text-foreground">
-                {tableOutput ?? <div className="p-3">{formatJsonWithHighlight(tool.output)}</div>}
+          {tool.output === undefined
+            ? null
+            : (
+              <div className="space-y-2 p-4 border-t border-[var(--border)]">
+                <h4 className="font-medium text-[var(--muted-foreground)] text-xs uppercase tracking-wide">
+                  Result
+                </h4>
+                <div className="overflow-x-auto rounded-lg bg-[var(--accent)] text-[var(--foreground)]">
+                  {tableOutput ?? <div className="p-3">{formatJsonWithHighlight(tool.output)}</div>}
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
           {!tool.errorText ? null : (
-            <div className="space-y-2 p-4 border-t border-border">
-              <h4 className="font-medium text-destructive text-xs uppercase tracking-wide">
+            <div className="space-y-2 p-4 border-t border-[var(--border)]">
+              <h4 className="font-medium text-[var(--destructive)] text-xs uppercase tracking-wide">
                 Error
               </h4>
-              <div className="rounded-md bg-destructive/10 text-destructive p-3 text-sm">
+              <div className="rounded-lg bg-[var(--destructive)]/10 text-[var(--destructive)] p-3 text-sm">
                 {tool.errorText}
               </div>
             </div>

package/src/src/react/components/ai/chat/components/upgrade-cta.tsx

@@ -28,17 +28,16 @@ export function UpgradeCTA({ inferenceMode }: UpgradeCTAProps): React.ReactEleme
   };
 
   return (
-    <div className="w-full max-w-2xl mx-auto mt-4 px-4 py-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl text-sm text-blue-700 dark:text-blue-300 flex items-start gap-3">
+    <div className="w-full max-w-2xl mx-auto mt-4 px-4 py-3 bg-[var(--accent)] rounded-xl text-sm text-[var(--foreground)] flex items-start gap-3">
       <span className="flex-1">
         Using a lightweight local model. Add an API key to your{" "}
-        <code className="px-1 py-0.5 bg-blue-100 dark:bg-blue-900/40 rounded text-xs">.env</code>
-        {" "}
+        <code className="px-1 py-0.5 bg-[var(--border)] rounded text-xs">.env</code>{" "}
         for GPT-4o or Claude.
       </span>
       <button
         type="button"
         onClick={handleDismiss}
-        className="text-blue-400 hover:text-blue-600 dark:hover:text-blue-200 transition-colors flex-shrink-0"
+        className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-all flex-shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
         aria-label="Dismiss"
       >
         <svg

package/src/src/react/components/ai/chat/components/uploads-panel.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { FileTextIcon, TrashIcon } from "../../icons/index.js";
+
+export interface UploadedFile {
+  id: string;
+  name: string;
+  size?: number;
+  type?: string;
+}
+
+export interface UploadsPanelProps {
+  uploads?: UploadedFile[];
+  onRemoveUpload?: (id: string) => void;
+  onAttach?: (files: FileList) => void;
+  attachAccept?: string;
+  className?: string;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function UploadsPanel({
+  uploads = [],
+  onRemoveUpload,
+  onAttach,
+  attachAccept,
+  className,
+}: UploadsPanelProps): React.ReactElement {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  return (
+    <div className={cn("flex flex-col h-full", className)}>
+      <div className="flex-1 overflow-y-auto px-4 py-4">
+        {uploads.length === 0
+          ? (
+            <div className="flex flex-col items-center justify-center h-full text-center">
+              <h1 className="text-2xl font-medium text-[var(--foreground)] tracking-tight">
+                No files uploaded
+              </h1>
+              <p className="mt-2 max-w-sm text-sm text-[var(--muted-foreground)] leading-relaxed">
+                Upload files to start asking questions
+              </p>
+              {onAttach && (
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="mt-4 px-4 py-2 text-sm font-medium rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
+                >
+                  Upload Files
+                </button>
+              )}
+            </div>
+          )
+          : (
+            <div className="max-w-2xl mx-auto space-y-1.5">
+              {uploads.map((doc) => (
+                <div
+                  key={doc.id}
+                  className="flex items-center gap-3 rounded-lg px-3 py-2.5 group hover:bg-[var(--accent)] transition-colors"
+                >
+                  <div className="shrink-0 size-8 rounded-lg bg-[var(--accent)] flex items-center justify-center text-[var(--muted-foreground)]">
+                    <FileTextIcon className="size-4" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-[var(--card-foreground)] truncate">
+                      {doc.name}
+                    </p>
+                    {doc.size != null && (
+                      <p className="text-xs text-[var(--muted-foreground)]">
+                        {formatFileSize(doc.size)}
+                      </p>
+                    )}
+                  </div>
+                  {onRemoveUpload && (
+                    <button
+                      type="button"
+                      onClick={() => onRemoveUpload(doc.id)}
+                      className="shrink-0 p-1.5 rounded-md text-[var(--muted-foreground)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10 transition-colors opacity-0 group-hover:opacity-100"
+                      aria-label={`Remove ${doc.name}`}
+                    >
+                      <TrashIcon className="size-4" />
+                    </button>
+                  )}
+                </div>
+              ))}
+              {onAttach && (
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="w-full flex items-center justify-center gap-2 rounded-lg px-3 py-2.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
+                >
+                  <span className="text-xs">+</span>
+                  Upload more files
+                </button>
+              )}
+            </div>
+          )}
+      </div>
+      {onAttach && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={attachAccept}
+          multiple
+          aria-label="Upload file"
+          onChange={(e) => {
+            if (e.target.files?.length) onAttach(e.target.files);
+            e.target.value = "";
+          }}
+          style={{
+            position: "absolute",
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: "hidden",
+            clip: "rect(0,0,0,0)",
+            whiteSpace: "nowrap",
+            border: 0,
+          }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -1,67 +1,17 @@
 /**
- * Chat Composition API
+ * Chat Composition API — All composable building blocks for chat UIs.
+ *
  * @module ai/react/components/chat/composition/api
  */
 
-import * as React from "react";
-import { InputBox, MessageList } from "../../../../primitives/index.js";
-import { cn, defaultChatTheme } from "../../theme.js";
+// Root / Layout
+export { ChatRoot, type ChatRootProps } from "./chat-root.js";
+export { ChatMessageList, type ChatMessageListProps } from "./chat-message-list.js";
+export { ChatComposer, type ChatComposerProps } from "./chat-composer.js";
+export { ChatEmpty, type ChatEmptyProps } from "./chat-empty.js";
+export { ChatIf, type ChatIfProps } from "./chat-if.js";
+export { ModelAvatar, type ModelAvatarProps } from "./model-avatar.js";
+export { ErrorBanner, type ErrorBannerProps } from "./error-banner.js";
 
-export const ChatHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(function ChatHeader({ className, children, ...props }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "border-b border-gray-200 dark:border-gray-800 p-4 bg-gray-50 dark:bg-gray-900",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-ChatHeader.displayName = "ChatHeader";
-
-export const ChatMessages = MessageList;
-ChatMessages.displayName = "ChatMessages";
-
-export const ChatInput = React.forwardRef<
-  HTMLInputElement | HTMLTextAreaElement,
-  React.ComponentProps<typeof InputBox>
->(function ChatInput({ className, ...props }, ref) {
-  return (
-    <div className="border-t border-gray-200 dark:border-gray-800 p-4">
-      <div className="flex gap-2">
-        <InputBox
-          ref={ref}
-          className={cn(defaultChatTheme.input, className)}
-          {...props}
-        />
-      </div>
-    </div>
-  );
-});
-ChatInput.displayName = "ChatInput";
-
-export const ChatFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(function ChatFooter({ className, children, ...props }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "border-t border-gray-200 dark:border-gray-800 p-4 text-sm text-gray-500",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-ChatFooter.displayName = "ChatFooter";
+// Message compound
+export { Message, type MessageRootProps } from "./message.js";

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

@@ -0,0 +1,205 @@
+/**
+ * ChatComposer — Input area with attachments, model selector, voice, and submit.
+ *
+ * @module ai/react/components/chat/composition/chat-composer
+ */
+
+import * as React from "react";
+import { InputBox, SubmitButton } from "../../../../primitives/index.js";
+import { cn } from "../../theme.js";
+import { PaperclipIcon } from "../../icons/index.js";
+import { type ModelOption, ModelSelector } from "../../model-selector.js";
+import type { ChatTheme } from "../../theme.js";
+import { AttachmentPill } from "../components/attachment-pill.js";
+import type { AttachmentInfo } from "../components/attachment-pill.js";
+import { downloadMarkdown } from "../utils/export.js";
+import type { UIMessage } from "../../../../../agent/react/index.js";
+
+export interface ChatComposerProps {
+  input: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onSubmit?: (e: React.FormEvent) => void;
+  isLoading?: boolean;
+  placeholder?: string;
+  theme?: ChatTheme;
+
+  // Stop / Voice
+  stop?: () => void;
+  onVoice?: () => void;
+  isListening?: boolean;
+  transcript?: string;
+
+  // Model
+  models?: ModelOption[];
+  model?: string;
+  onModelChange?: (model: string) => void;
+
+  // Attachments
+  onAttach?: (files: FileList) => void;
+  attachAccept?: string;
+  attachments?: AttachmentInfo[];
+  onRemoveAttachment?: (id: string) => void;
+
+  // Export
+  showExport?: boolean;
+  messages?: UIMessage[];
+
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ChatComposer = React.forwardRef<HTMLDivElement, ChatComposerProps>(
+  function ChatComposer(
+    {
+      input,
+      onChange,
+      onSubmit,
+      isLoading,
+      placeholder = "Type a message...",
+      theme,
+      stop,
+      onVoice,
+      isListening = false,
+      transcript,
+      models,
+      model,
+      onModelChange,
+      onAttach,
+      attachAccept,
+      attachments,
+      onRemoveAttachment,
+      showExport = false,
+      messages,
+      className,
+      children,
+    },
+    ref,
+  ) {
+    const fileInputRef = React.useRef<HTMLInputElement>(null!);
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex-shrink-0 pb-6 pt-2", className)}
+      >
+        <div className="max-w-2xl mx-auto px-4">
+          {children && (
+            <div className="flex flex-wrap items-center gap-1.5 pb-3">
+              {children}
+            </div>
+          )}
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              onSubmit?.(e);
+            }}
+          >
+            <div className="relative overflow-hidden rounded-[20px] shadow-md bg-[var(--card)] px-3 py-3 md:px-4 md:py-4 transition-all">
+              {attachments && attachments.length > 0 && (
+                <div className="flex flex-wrap gap-1.5 pb-3">
+                  {attachments.map((file) => (
+                    <AttachmentPill
+                      key={file.id}
+                      attachment={file}
+                      onRemove={onRemoveAttachment}
+                    />
+                  ))}
+                </div>
+              )}
+              <InputBox
+                value={isListening ? transcript || input : input}
+                onChange={onChange}
+                placeholder={isListening ? "Listening..." : placeholder}
+                disabled={isLoading || isListening}
+                multiline
+                className={cn(
+                  theme?.input,
+                )}
+              />
+              <div className="flex items-center justify-between gap-2 mt-2 min-h-[38px]">
+                <div className="flex items-center gap-2">
+                  {onAttach && (
+                    <>
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept={attachAccept}
+                        multiple
+                        aria-label="Upload file"
+                        onChange={(e) => {
+                          if (e.target.files?.length) onAttach(e.target.files);
+                          e.target.value = "";
+                        }}
+                        style={{
+                          position: "absolute",
+                          width: 1,
+                          height: 1,
+                          padding: 0,
+                          margin: -1,
+                          overflow: "hidden",
+                          clip: "rect(0,0,0,0)",
+                          whiteSpace: "nowrap",
+                          border: 0,
+                        }}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => fileInputRef.current?.click()}
+                        className="size-9 flex items-center justify-center rounded-full text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 transition-colors shrink-0"
+                        aria-label="Attach file"
+                      >
+                        <PaperclipIcon className="size-5" />
+                      </button>
+                    </>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  {models && models.length > 0 && onModelChange && (
+                    <ModelSelector
+                      models={models}
+                      value={model}
+                      onChange={onModelChange}
+                      disabled={isLoading}
+                    />
+                  )}
+                  {showExport && messages && messages.length > 0 && (
+                    <button
+                      type="button"
+                      onClick={() => downloadMarkdown(messages)}
+                      className="size-9 flex items-center justify-center rounded-full text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 transition-colors shrink-0"
+                      aria-label="Export conversation"
+                      title="Export as Markdown"
+                    >
+                      <svg
+                        className="size-5"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                        <polyline points="7 10 12 15 17 10" />
+                        <line x1="12" y1="15" x2="12" y2="3" />
+                      </svg>
+                    </button>
+                  )}
+                  <SubmitButton
+                    isLoading={isLoading || isListening}
+                    hasInput={!!input.trim()}
+                    onStop={isListening ? undefined : stop}
+                    onVoice={onVoice}
+                    disabled={!input.trim()}
+                    className={theme?.button}
+                  />
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  },
+);
+ChatComposer.displayName = "ChatComposer";