veryfront 0.1.47 → 0.1.49

package/src/src/react/components/ai/chat/components/attachment-pill.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+
+export interface AttachmentInfo {
+  id: string;
+  name: string;
+  status?: "uploading" | "ready";
+  type?: string;
+  size?: number;
+  preview?: string;
+}
+
+export interface AttachmentPillProps {
+  attachment: AttachmentInfo;
+  onRemove?: (id: string) => void;
+}
+
+const FILE_TYPE_COLORS: Record<string, string> = {
+  pdf: "text-red-500 bg-red-500/10",
+  docx: "text-blue-500 bg-blue-500/10",
+  csv: "text-emerald-500 bg-emerald-500/10",
+  txt: "text-neutral-500 bg-neutral-500/10",
+  md: "text-purple-500 bg-purple-500/10",
+  mdx: "text-purple-500 bg-purple-500/10",
+};
+
+function getExtension(name: string): string {
+  const dot = name.lastIndexOf(".");
+  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : "";
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function AttachmentPill({
+  attachment,
+  onRemove,
+}: AttachmentPillProps): React.ReactElement {
+  const [showPreview, setShowPreview] = React.useState(false);
+  const ext = attachment.type ?? getExtension(attachment.name);
+  const colorClass = FILE_TYPE_COLORS[ext] ?? "text-neutral-400 bg-neutral-400/10";
+
+  return (
+    <span
+      className="relative inline-flex items-center gap-1.5 pl-2.5 pr-1.5 py-1 rounded-lg bg-[var(--accent)] text-xs text-[var(--card-foreground)]"
+      onMouseEnter={() => setShowPreview(true)}
+      onMouseLeave={() => setShowPreview(false)}
+    >
+      {/* File type badge */}
+      <span
+        className={cn(
+          "inline-flex items-center justify-center rounded px-1 py-0.5 text-[9px] font-bold uppercase leading-none",
+          colorClass,
+        )}
+      >
+        {ext || "?"}
+      </span>
+
+      <span className="truncate max-w-[120px]">{attachment.name}</span>
+
+      {attachment.size != null && (
+        <span className="text-[10px] text-[var(--input-placeholder)] shrink-0">
+          {formatSize(attachment.size)}
+        </span>
+      )}
+
+      {attachment.status === "uploading"
+        ? (
+          <span className="size-3 shrink-0 rounded-full border-2 border-neutral-400 border-t-transparent animate-spin" />
+        )
+        : onRemove && (
+          <button
+            type="button"
+            onClick={() => onRemove(attachment.id)}
+            aria-label={`Remove ${attachment.name}`}
+            className="size-4 shrink-0 flex items-center justify-center rounded-full hover:bg-[var(--accent)] text-[var(--input-placeholder)] hover:text-[var(--foreground)] transition-colors"
+          >
+            <svg
+              className="size-3"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        )}
+
+      {/* Hover preview */}
+      {showPreview && attachment.preview && (
+        <div className="absolute bottom-full left-0 mb-2 z-50 w-64 pointer-events-none">
+          <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl shadow-lg p-3 text-left">
+            <p className="text-[10px] font-medium text-[var(--muted-foreground)] uppercase mb-1">
+              Preview
+            </p>
+            <p className="text-xs text-[var(--card-foreground)] line-clamp-4 whitespace-pre-wrap">
+              {attachment.preview}
+            </p>
+          </div>
+        </div>
+      )}
+    </span>
+  );
+}

package/src/src/react/components/ai/chat/components/branch-picker.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+
+export interface BranchPickerProps {
+  current: number;
+  total: number;
+  onPrev: () => void;
+  onNext: () => void;
+}
+
+export function BranchPicker({
+  current,
+  total,
+  onPrev,
+  onNext,
+}: BranchPickerProps): React.ReactElement | null {
+  if (total <= 1) return null;
+
+  return (
+    <div className="inline-flex items-center gap-1 text-xs text-[var(--input-placeholder)]">
+      <button
+        type="button"
+        onClick={onPrev}
+        disabled={current <= 1}
+        className={cn(
+          "size-5 flex items-center justify-center rounded-full transition-all",
+          "hover:bg-[var(--foreground)]/5",
+          "disabled:opacity-50 disabled:pointer-events-none",
+        )}
+        aria-label="Previous variant"
+      >
+        <svg
+          className="size-3"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+      <span className="tabular-nums min-w-[2ch] text-center">{current}/{total}</span>
+      <button
+        type="button"
+        onClick={onNext}
+        disabled={current >= total}
+        className={cn(
+          "size-5 flex items-center justify-center rounded-full transition-all",
+          "hover:bg-[var(--foreground)]/5",
+          "disabled:opacity-50 disabled:pointer-events-none",
+        )}
+        aria-label="Next variant"
+      >
+        <svg
+          className="size-3"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+    </div>
+  );
+}

package/src/src/react/components/ai/chat/components/code-block.tsx

@@ -0,0 +1,82 @@
+import * as dntShim from "../../../../../../_dnt.shims.js";
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { CheckIcon, CopyIcon } from "../../icons/index.js";
+
+export interface CodeBlockProps {
+  language?: string;
+  code: string;
+  inline?: boolean;
+  className?: string;
+}
+
+export const RichCodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
+  function RichCodeBlock({ language, code, inline, className }, ref) {
+    const [copied, setCopied] = React.useState(false);
+
+    const handleCopy = React.useCallback(async (): Promise<void> => {
+      try {
+        await navigator.clipboard.writeText(code);
+      } catch {
+        const textarea = document.createElement("textarea");
+        textarea.value = code;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+      setCopied(true);
+      dntShim.setTimeout(() => setCopied(false), 2000);
+    }, [code]);
+
+    if (inline) {
+      return (
+        <code
+          className={cn(
+            "bg-[var(--accent)] px-1.5 py-0.5 rounded text-sm font-mono",
+            className,
+          )}
+        >
+          {code}
+        </code>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "my-4 rounded-xl overflow-hidden border border-[var(--border)]",
+          className,
+        )}
+      >
+        <div className="flex items-center justify-between px-4 py-2 text-[var(--muted-foreground)] text-xs">
+          <span className="font-mono font-medium">{language || "text"}</span>
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="inline-flex items-center gap-1.5 text-[var(--input-placeholder)] hover:text-[var(--foreground)] transition-colors"
+          >
+            {copied
+              ? (
+                <>
+                  <CheckIcon className="size-3.5" />
+                  <span>Copied</span>
+                </>
+              )
+              : (
+                <>
+                  <CopyIcon className="size-3.5" />
+                  <span>Copy</span>
+                </>
+              )}
+          </button>
+        </div>
+        <pre className="p-4 text-[var(--foreground)] bg-[var(--accent)] overflow-auto text-sm [&_.hljs]:bg-transparent [&_.hljs]:p-0">
+        <code className={language ? `language-${language}` : undefined}>{code}</code>
+        </pre>
+      </div>
+    );
+  },
+);
+RichCodeBlock.displayName = "RichCodeBlock";

package/src/src/react/components/ai/chat/components/drop-zone.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+
+export interface DropZoneOverlayProps {
+  visible: boolean;
+  accept?: string;
+}
+
+export function DropZoneOverlay({
+  visible,
+  accept,
+}: DropZoneOverlayProps): React.ReactElement | null {
+  if (!visible) return null;
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 z-50 flex flex-col items-center justify-center gap-3",
+        "bg-[var(--background)]/80 backdrop-blur-sm",
+        "border-2 border-dashed border-[var(--success)] rounded-2xl",
+        "pointer-events-none",
+      )}
+    >
+      <svg
+        className="size-10 text-[var(--success)]"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="17 8 12 3 7 8" />
+        <line x1="12" y1="3" x2="12" y2="15" />
+      </svg>
+      <div className="text-center">
+        <p className="text-sm font-medium text-[var(--card-foreground)]">
+          Drop files here
+        </p>
+        {accept && (
+          <p className="text-xs text-[var(--muted-foreground)] mt-1">
+            {accept.replace(/\./g, "").toUpperCase().replace(/,/g, ", ")}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -20,18 +20,18 @@ export function Suggestion({
       type="button"
       onClick={() => onClick?.(suggestion)}
       className={cn(
-        "group flex items-start gap-3 rounded-xl border border-border bg-background p-4 text-left text-sm text-foreground transition-all hover:bg-muted hover:border-muted-foreground/20",
+        "group flex items-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-left text-sm text-[var(--muted-foreground)] transition-all hover:bg-[var(--accent)] hover:border-[var(--input-border)] hover:text-[var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
         className,
       )}
     >
       {icon
         ? (
-          <span className="shrink-0 text-muted-foreground transition-colors group-hover:text-foreground">
+          <span className="shrink-0 text-[var(--input-placeholder)] transition-colors group-hover:text-[var(--foreground)]">
             {icon}
           </span>
         )
         : null}
-      <span className="line-clamp-2">{suggestion}</span>
+      <span className="line-clamp-1">{suggestion}</span>
     </button>
   );
 }
@@ -49,7 +49,7 @@ export function Suggestions({
 }: SuggestionsProps): React.ReactElement {
   const containerClassName = layout === "horizontal"
     ? "flex gap-2 overflow-x-auto pb-2 scrollbar-hide"
-    : "grid grid-cols-2 gap-3 max-w-2xl mx-auto";
+    : "flex flex-wrap justify-center gap-2 max-w-2xl mx-auto";
 
   return <div className={cn(containerClassName, className)}>{children}</div>;
 }
@@ -71,10 +71,22 @@ export function ConversationEmptyState({
 }: ConversationEmptyStateProps): React.ReactElement {
   return (
     <div className={cn("flex flex-col items-center justify-center text-center", className)}>
-      {icon ? <div className="mb-4 text-muted-foreground">{icon}</div> : null}
-      <h1 className="text-3xl font-semibold text-foreground">{title}</h1>
+      {icon
+        ? (
+          <div className="mb-4 text-[var(--muted-foreground)]">
+            {icon}
+          </div>
+        )
+        : null}
+      <h1 className="text-2xl font-medium text-[var(--foreground)] tracking-tight">
+        {title}
+      </h1>
       {description
-        ? <p className="mt-2 max-w-md text-base text-muted-foreground">{description}</p>
+        ? (
+          <p className="mt-2 max-w-sm text-sm text-[var(--muted-foreground)] leading-relaxed">
+            {description}
+          </p>
+        )
         : null}
       {children}
     </div>
@@ -99,7 +111,7 @@ export function ConversationScrollButton({
       type="button"
       onClick={onClick}
       className={cn(
-        "absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full border border-border bg-background p-2 shadow-lg transition-all hover:bg-muted",
+        "absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full border border-[var(--border)] bg-[var(--card)] p-2 shadow-lg transition-all hover:bg-[var(--accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
         className,
       )}
     >

package/src/src/react/components/ai/chat/components/inference-badge.tsx

@@ -38,7 +38,7 @@ export function InferenceBadge({
   }
 
   return (
-    <div className="flex items-center gap-1.5 px-3 py-1 text-xs text-neutral-500 dark:text-neutral-400">
+    <div className="flex items-center gap-1.5 px-3 py-1 text-xs text-[var(--muted-foreground)]">
       <span
         className={`size-1.5 rounded-full ${dotColor} ${showProgress ? "animate-pulse" : ""}`}
       />

package/src/src/react/components/ai/chat/components/inline-citation.tsx

@@ -0,0 +1,150 @@
+import * as dntShim from "../../../../../../_dnt.shims.js";
+import * as React from "react";
+import type { Source } from "./sources.js";
+import { cn } from "../../theme.js";
+
+export interface InlineCitationProps {
+  index: number;
+  source?: Source;
+  className?: string;
+  onClick?: (index: number) => void;
+}
+
+export function InlineCitation({
+  index,
+  source,
+  className,
+  onClick,
+}: InlineCitationProps): React.ReactElement {
+  const [showCard, setShowCard] = React.useState(false);
+  const timerRef = React.useRef<ReturnType<typeof dntShim.setTimeout>>(undefined);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [cardStyle, setCardStyle] = React.useState<React.CSSProperties>({});
+
+  const show = React.useCallback(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = dntShim.setTimeout(() => {
+      // Position the card using fixed positioning to prevent overflow clipping
+      const el = buttonRef.current;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        setCardStyle({
+          position: "fixed",
+          left: Math.max(
+            8,
+            Math.min(rect.left + rect.width / 2 - 160, globalThis.innerWidth - 328),
+          ),
+          bottom: globalThis.innerHeight - rect.top + 8,
+          zIndex: 9999,
+        });
+      }
+      setShowCard(true);
+    }, 150);
+  }, []);
+
+  const hide = React.useCallback(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = dntShim.setTimeout(() => setShowCard(false), 100);
+  }, []);
+
+  React.useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  return (
+    <>
+      <span className="relative inline-block">
+        <button
+          ref={buttonRef}
+          type="button"
+          onClick={() => onClick?.(index)}
+          onMouseEnter={show}
+          onMouseLeave={hide}
+          className={cn(
+            "inline-flex items-center justify-center",
+            "size-4 rounded text-[10px] font-medium leading-none",
+            "bg-[var(--border)] text-[var(--card-foreground)]",
+            "hover:bg-[var(--accent)] transition-colors",
+            "align-super -translate-y-0.5 mx-0.5",
+            className,
+          )}
+        >
+          {index + 1}
+        </button>
+      </span>
+
+      {showCard && source && (
+        <div
+          style={cardStyle}
+          className="w-80 animate-in fade-in duration-150"
+          onMouseEnter={show}
+          onMouseLeave={hide}
+        >
+          <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl shadow-xl p-3.5 text-left">
+            {/* Title */}
+            <div className="flex items-start gap-2">
+              <span className="flex-shrink-0 flex items-center justify-center size-5 rounded bg-[var(--border)] text-[10px] font-bold text-[var(--card-foreground)] mt-0.5">
+                {index + 1}
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium text-[var(--foreground)] line-clamp-2">
+                  {source.title}
+                </p>
+                {source.url && (
+                  <p className="text-[10px] text-[var(--muted-foreground)] truncate mt-0.5 flex items-center gap-1">
+                    <svg
+                      className="size-2.5 shrink-0"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                      <polyline points="15 3 21 3 21 9" />
+                      <line x1="10" y1="14" x2="21" y2="3" />
+                    </svg>
+                    {source.url}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Snippet as blockquote */}
+            {source.snippet && (
+              <div className="mt-2.5 pl-3 border-l-2 border-[var(--border)]">
+                <p className="text-xs text-[var(--card-foreground)] line-clamp-4 leading-relaxed italic">
+                  {source.snippet}
+                </p>
+              </div>
+            )}
+
+            {/* Score bar */}
+            {source.score != null && (
+              <div className="mt-2.5 flex items-center gap-2">
+                <span className="text-[10px] text-[var(--input-placeholder)] shrink-0">
+                  Relevance
+                </span>
+                <div className="flex-1 h-1 rounded-full bg-[var(--border)] overflow-hidden">
+                  <div
+                    className={cn(
+                      "h-full rounded-full transition-all",
+                      source.score >= 0.7
+                        ? "bg-emerald-500"
+                        : source.score >= 0.4
+                        ? "bg-amber-500"
+                        : "bg-neutral-400",
+                    )}
+                    style={{ width: `${Math.round(source.score * 100)}%` }}
+                  />
+                </div>
+                <span className="text-[10px] tabular-nums text-[var(--input-placeholder)]">
+                  {Math.round(source.score * 100)}%
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/src/react/components/ai/chat/components/message-actions.tsx

@@ -3,64 +3,86 @@ import * as React from "react";
 import { cn } from "../../theme.js";
 import { CheckIcon, CopyIcon } from "../../icons/index.js";
 
+const ACTION_BUTTON =
+  "inline-flex items-center justify-center size-7 text-[var(--input-placeholder)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2";
+
 export interface MessageActionsProps {
   content: string;
   className?: string;
+  /** When provided, renders an edit button that calls this handler */
+  onEdit?: (content: string) => void;
 }
 
-export function MessageActions({
-  content,
-  className,
-}: MessageActionsProps): React.ReactElement {
-  const [copied, setCopied] = React.useState(false);
+export const MessageActions = React.forwardRef<HTMLDivElement, MessageActionsProps>(
+  function MessageActions({ content, className, onEdit }, ref) {
+    const [copied, setCopied] = React.useState(false);
 
-  const setCopiedWithTimeout = React.useCallback((): void => {
-    setCopied(true);
-    dntShim.setTimeout(() => setCopied(false), 2000);
-  }, []);
+    const setCopiedWithTimeout = React.useCallback((): void => {
+      setCopied(true);
+      dntShim.setTimeout(() => setCopied(false), 2000);
+    }, []);
 
-  const fallbackCopy = React.useCallback((): void => {
-    const textarea = document.createElement("textarea");
-    textarea.value = content;
-    document.body.appendChild(textarea);
-    textarea.select();
-    document.execCommand("copy");
-    document.body.removeChild(textarea);
-  }, [content]);
+    const fallbackCopy = React.useCallback((): void => {
+      const textarea = document.createElement("textarea");
+      textarea.value = content;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    }, [content]);
 
-  const handleCopy = React.useCallback(async (): Promise<void> => {
-    try {
-      await navigator.clipboard.writeText(content);
-    } catch {
-      // Fallback for older browsers
-      fallbackCopy();
-    } finally {
-      setCopiedWithTimeout();
-    }
-  }, [content, fallbackCopy, setCopiedWithTimeout]);
+    const handleCopy = React.useCallback(async (): Promise<void> => {
+      try {
+        await navigator.clipboard.writeText(content);
+      } catch {
+        // Fallback for older browsers
+        fallbackCopy();
+      } finally {
+        setCopiedWithTimeout();
+      }
+    }, [content, fallbackCopy, setCopiedWithTimeout]);
 
-  return (
-    <div className={cn("flex items-center gap-1 mt-2", className)}>
-      <button
-        type="button"
-        onClick={handleCopy}
-        className="inline-flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors"
-        title={copied ? "Copied!" : "Copy to clipboard"}
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center gap-0.5 mt-1.5 opacity-0 group-hover/msg:opacity-100 transition-all duration-200",
+          className,
+        )}
       >
-        {copied
-          ? (
-            <>
-              <CheckIcon className="size-3" />
-              <span>Copied</span>
-            </>
-          )
-          : (
-            <>
-              <CopyIcon className="size-3" />
-              <span>Copy</span>
-            </>
-          )}
-      </button>
-    </div>
-  );
-}
+        <button
+          type="button"
+          onClick={handleCopy}
+          className={ACTION_BUTTON}
+          title={copied ? "Copied!" : "Copy to clipboard"}
+          aria-label={copied ? "Copied!" : "Copy to clipboard"}
+        >
+          {copied ? <CheckIcon className="size-3.5" /> : <CopyIcon className="size-3.5" />}
+        </button>
+        {onEdit && (
+          <button
+            type="button"
+            onClick={() => onEdit(content)}
+            className={ACTION_BUTTON}
+            title="Edit message"
+            aria-label="Edit message"
+          >
+            <svg
+              className="size-3.5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+              <path d="m15 5 4 4" />
+            </svg>
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+MessageActions.displayName = "MessageActions";