veryfront 0.1.47 → 0.1.49

package/src/src/react/components/ai/error-boundary.tsx

@@ -44,13 +44,13 @@ export class AIErrorBoundary extends React.Component<
 
     return (
       <div
-        className="border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 rounded-2xl p-6"
+        className="border border-[var(--destructive)]/20 bg-[var(--destructive)]/5 rounded-2xl p-6"
         role="alert"
       >
         <div className="flex items-start gap-4">
-          <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/40 flex items-center justify-center flex-shrink-0">
+          <div className="size-10 rounded-full bg-[var(--destructive)]/10 flex items-center justify-center flex-shrink-0">
             <svg
-              className="w-5 h-5 text-red-600 dark:text-red-400"
+              className="size-5 text-[var(--destructive)]"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -65,18 +65,18 @@ export class AIErrorBoundary extends React.Component<
           </div>
 
           <div className="flex-1 min-w-0">
-            <h3 className="text-base font-semibold text-red-900 dark:text-red-100">
+            <h3 className="text-base font-semibold text-[var(--foreground)]">
               {errorMessage ?? "An error occurred in the AI component"}
             </h3>
 
-            <p className="mt-1.5 text-sm text-red-700 dark:text-red-300 leading-relaxed">
+            <p className="mt-1.5 text-sm text-[var(--destructive)] leading-relaxed">
               {error.message}
             </p>
 
             <button
               type="button"
               onClick={this.reset}
-              className="mt-4 px-5 py-2.5 text-sm font-medium text-white bg-red-500 hover:bg-red-600 active:scale-[0.98] rounded-full transition-all"
+              className="mt-4 px-5 py-2.5 text-sm font-medium bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90 active:scale-[0.98] rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
             >
               Try Again
             </button>

package/src/src/react/components/ai/icons/index.ts

@@ -165,6 +165,15 @@ const COPY_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
   },
 ];
 
+const PAPERCLIP_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  {
+    type: "path",
+    props: {
+      d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48",
+    },
+  },
+];
+
 const CHECK_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
   { type: "polyline", props: { points: "20 6 9 17 4 12" } },
 ];
@@ -223,6 +232,97 @@ export function CopyIcon({ className }: IconProps): React.ReactElement {
   return renderIcon(className, COPY_ICON_ELEMENTS);
 }
 
+export function PaperclipIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, PAPERCLIP_ICON_ELEMENTS);
+}
+
 export function CheckIcon({ className }: IconProps): React.ReactElement {
   return renderIcon(className, CHECK_ICON_ELEMENTS);
 }
+
+const PLUS_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  { type: "line", props: { x1: "12", y1: "5", x2: "12", y2: "19" } },
+  { type: "line", props: { x1: "5", y1: "12", x2: "19", y2: "12" } },
+];
+
+const TRASH_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  { type: "polyline", props: { points: "3 6 5 6 21 6" } },
+  {
+    type: "path",
+    props: { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" },
+  },
+];
+
+const PANEL_LEFT_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  { type: "rect", props: { width: "18", height: "18", x: "3", y: "3", rx: "2" } },
+  { type: "line", props: { x1: "9", y1: "3", x2: "9", y2: "21" } },
+];
+
+const PENCIL_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  { type: "path", props: { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" } },
+  { type: "path", props: { d: "m15 5 4 4" } },
+];
+
+export function PlusIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, PLUS_ICON_ELEMENTS);
+}
+
+export function TrashIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, TRASH_ICON_ELEMENTS);
+}
+
+export function PanelLeftIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, PANEL_LEFT_ICON_ELEMENTS);
+}
+
+export function PencilIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, PENCIL_ICON_ELEMENTS);
+}
+
+const SPARKLES_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  {
+    type: "path",
+    props: {
+      d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z",
+    },
+  },
+  { type: "path", props: { d: "M5 3v4" } },
+  { type: "path", props: { d: "M19 17v4" } },
+  { type: "path", props: { d: "M3 5h4" } },
+  { type: "path", props: { d: "M17 19h4" } },
+];
+
+export function SparklesIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, SPARKLES_ICON_ELEMENTS);
+}
+
+const CODE_BRACKETS_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  { type: "polyline", props: { points: "16 18 22 12 16 6" } },
+  { type: "polyline", props: { points: "8 6 2 12 8 18" } },
+];
+
+const TARGET_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  { type: "circle", props: { cx: "12", cy: "12", r: "10" } },
+  { type: "circle", props: { cx: "12", cy: "12", r: "6" } },
+  { type: "circle", props: { cx: "12", cy: "12", r: "2" } },
+];
+
+const FILE_TEXT_ICON_ELEMENTS: ReadonlyArray<IconElementSpec> = [
+  { type: "path", props: { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" } },
+  { type: "polyline", props: { points: "14 2 14 8 20 8" } },
+  { type: "line", props: { x1: "16", y1: "13", x2: "8", y2: "13" } },
+  { type: "line", props: { x1: "16", y1: "17", x2: "8", y2: "17" } },
+  { type: "polyline", props: { points: "10 9 9 9 8 9" } },
+];
+
+export function CodeBracketsIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, CODE_BRACKETS_ICON_ELEMENTS);
+}
+
+export function TargetIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, TARGET_ICON_ELEMENTS);
+}
+
+export function FileTextIcon({ className }: IconProps): React.ReactElement {
+  return renderIcon(className, FILE_TEXT_ICON_ELEMENTS);
+}

package/src/src/react/components/ai/markdown.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { cn } from "./theme.js";
 import { isBrowserEnvironment } from "../../../platform/compat/runtime.js";
 import { validateTrustedHtml } from "../../../security/client/html-sanitizer.js";
+import { RichCodeBlock } from "./chat/components/code-block.js";
 
 export interface MarkdownProps {
   /** Markdown content to render */
@@ -90,7 +91,7 @@ function MermaidDiagram({ code }: { code: string }): React.ReactElement {
 
   if (!isBrowserEnvironment()) {
     return (
-      <pre className="my-4 p-4 bg-neutral-100 dark:bg-neutral-800 rounded-lg overflow-auto">
+      <pre className="my-4 p-4 bg-[var(--accent)] rounded-lg overflow-auto">
         <code>{code}</code>
       </pre>
     );
@@ -98,7 +99,7 @@ function MermaidDiagram({ code }: { code: string }): React.ReactElement {
 
   if (error) {
     return (
-      <div className="my-4 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg text-red-600 dark:text-red-400 text-sm">
+      <div className="my-4 p-4 bg-red-50 rounded-lg text-red-600 text-sm">
         <p className="font-medium">Mermaid Error</p>
         <p>{error}</p>
         <pre className="mt-2 text-xs overflow-auto">{code}</pre>
@@ -108,8 +109,8 @@ function MermaidDiagram({ code }: { code: string }): React.ReactElement {
 
   if (!svg) {
     return (
-      <div className="my-4 p-4 bg-neutral-100 dark:bg-neutral-800 rounded-lg animate-pulse">
-        <div className="h-32 flex items-center justify-center text-neutral-400">
+      <div className="my-4 p-4 bg-[var(--accent)] rounded-lg animate-pulse">
+        <div className="h-32 flex items-center justify-center text-[var(--muted-foreground)]">
           Loading diagram...
         </div>
       </div>
@@ -140,7 +141,7 @@ function CodeBlock({
 
   if (inline) {
     return (
-      <code className="bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded text-sm font-mono">
+      <code className="bg-[var(--accent)] px-1.5 py-0.5 rounded text-sm font-mono">
         {code}
       </code>
     );
@@ -150,11 +151,7 @@ function CodeBlock({
     return <MermaidDiagram code={code} />;
   }
 
-  return (
-    <pre className="my-4 p-4 bg-neutral-900 dark:bg-neutral-950 rounded-lg overflow-auto">
-      <code className={language ? `language-${language} hljs` : "hljs"}>{code}</code>
-    </pre>
-  );
+  return <RichCodeBlock language={language} code={code} />;
 }
 
 function FallbackMarkdown({
@@ -162,7 +159,7 @@ function FallbackMarkdown({
   className,
 }: Pick<MarkdownProps, "children" | "className">): React.ReactElement {
   return (
-    <div className={cn("prose prose-sm dark:prose-invert max-w-none", className)}>
+    <div className={cn("prose prose-sm max-w-none", className)}>
       <p className="whitespace-pre-wrap">{children}</p>
     </div>
   );
@@ -208,7 +205,7 @@ export function Markdown({
   }
 
   return (
-    <div className={cn("prose prose-sm dark:prose-invert max-w-none", className)}>
+    <div className={cn("prose prose-sm max-w-none", className)}>
       <ReactMarkdown
         remarkPlugins={remarkGfm ? [remarkGfm] : []}
         rehypePlugins={rehypeHighlight ? [rehypeHighlight] : []}
@@ -235,7 +232,7 @@ export function Markdown({
           table(props: any) {
             return (
               <div className="my-4 overflow-auto">
-                <table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
+                <table className="min-w-full divide-y divide-[var(--border)]">
                   {props.children}
                 </table>
               </div>
@@ -246,7 +243,7 @@ export function Markdown({
             return (
               <a
                 href={props.href}
-                className="text-blue-600 dark:text-blue-400 hover:underline"
+                className="text-blue-600 hover:underline"
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -257,7 +254,7 @@ export function Markdown({
           // deno-lint-ignore no-explicit-any
           blockquote(props: any) {
             return (
-              <blockquote className="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 my-4 text-neutral-600 dark:text-neutral-400 italic">
+              <blockquote className="border-l-4 border-[var(--border)] pl-4 my-4 text-[var(--card-foreground)] italic">
                 {props.children}
               </blockquote>
             );

package/src/src/react/components/ai/model-selector.tsx

@@ -1,11 +1,15 @@
 /**
  * ModelSelector - Dropdown for switching models at runtime
  *
- * Renders a compact dropdown that integrates with useChat's model/setModel.
- * Expects "provider/model" strings (e.g. "openai/gpt-4o").
+ * Opens upward from the trigger using fixed positioning
+ * so it never affects the surrounding layout.
+ *
+ * Implements WAI-ARIA listbox pattern with full keyboard navigation.
  */
 
 import * as React from "react";
+import { cn } from "./theme.js";
+import { ChevronDownIcon } from "./icons/index.js";
 
 /** A "provider/model" value and its display label. */
 export interface ModelOption {
@@ -13,6 +17,12 @@ export interface ModelOption {
   value: string;
   /** Display label (e.g. "GPT-4o") */
   label: string;
+  /** Provider name for grouping (e.g. "openai") */
+  provider?: string;
+  /** Short description shown beneath the label */
+  description?: string;
+  /** Badge text (e.g. "Local", "New") */
+  badge?: string;
 }
 
 /** Props for `<ModelSelector>`. */
@@ -29,6 +39,20 @@ export interface ModelSelectorProps {
   disabled?: boolean;
 }
 
+function groupByProvider(models: ModelOption[]): Map<string, ModelOption[]> {
+  const groups = new Map<string, ModelOption[]>();
+  for (const model of models) {
+    const key = model.provider ?? "";
+    const group = groups.get(key);
+    if (group) {
+      group.push(model);
+    } else {
+      groups.set(key, [model]);
+    }
+  }
+  return groups;
+}
+
 export function ModelSelector({
   models,
   value,
@@ -36,19 +60,203 @@ export function ModelSelector({
   className,
   disabled,
 }: ModelSelectorProps): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const [pos, setPos] = React.useState<{ bottom: number; right: number } | null>(null);
+  const [focusedIndex, setFocusedIndex] = React.useState(-1);
+
+  const selected = models.find((m) => m.value === value) ?? models[0];
+  const listboxId = React.useId();
+
+  // Measure trigger and position dropdown above it, right-aligned
+  React.useEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const r = triggerRef.current.getBoundingClientRect();
+    setPos({
+      bottom: globalThis.innerHeight - r.top + 6,
+      right: globalThis.innerWidth - r.right,
+    });
+    // Focus the selected item when opening
+    const selectedIdx = models.findIndex((m) => m.value === (value ?? selected?.value));
+    setFocusedIndex(selectedIdx >= 0 ? selectedIdx : 0);
+  }, [open, models, value, selected?.value]);
+
+  // Close on outside click
+  React.useEffect(() => {
+    if (!open) return;
+
+    function handleMouseDown(e: MouseEvent): void {
+      const target = e.target as Node;
+      if (
+        triggerRef.current?.contains(target) ||
+        dropdownRef.current?.contains(target)
+      ) {
+        return;
+      }
+      setOpen(false);
+    }
+
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [open]);
+
+  // Keyboard navigation
+  React.useEffect(() => {
+    if (!open) return;
+
+    function handleKeyDown(e: KeyboardEvent): void {
+      switch (e.key) {
+        case "Escape":
+          setOpen(false);
+          triggerRef.current?.focus();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => (prev + 1) % models.length);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => (prev - 1 + models.length) % models.length);
+          break;
+        case "Home":
+          e.preventDefault();
+          setFocusedIndex(0);
+          break;
+        case "End":
+          e.preventDefault();
+          setFocusedIndex(models.length - 1);
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < models.length) {
+            onChange(models[focusedIndex]!.value);
+            setOpen(false);
+            triggerRef.current?.focus();
+          }
+          break;
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, focusedIndex, models, onChange]);
+
+  // Scroll focused item into view
+  React.useEffect(() => {
+    if (!open || focusedIndex < 0) return;
+    const option = dropdownRef.current?.querySelector(`[data-index="${focusedIndex}"]`);
+    option?.scrollIntoView({ block: "nearest" });
+  }, [open, focusedIndex]);
+
+  const hasGroups = models.some((m) => m.provider);
+  const groups = hasGroups ? groupByProvider(models) : null;
+
+  function handleSelect(model: ModelOption): void {
+    onChange(model.value);
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
+  function renderItem(model: ModelOption, flatIndex: number): React.ReactElement {
+    const isActive = model.value === (value ?? selected?.value);
+    const isFocused = flatIndex === focusedIndex;
+
+    return (
+      <div
+        key={model.value}
+        role="option"
+        aria-selected={isActive}
+        data-index={flatIndex}
+        onClick={() => handleSelect(model)}
+        onMouseEnter={() => setFocusedIndex(flatIndex)}
+        className={cn(
+          "w-full text-left px-3 py-2 text-sm transition-all rounded-lg cursor-pointer",
+          isActive
+            ? "bg-[var(--foreground)]/[0.05] text-[var(--foreground)]"
+            : "text-[var(--card-foreground)] hover:bg-[var(--foreground)]/[0.05] hover:text-[var(--foreground)]",
+          isFocused && !isActive && "bg-[var(--foreground)]/[0.05]",
+        )}
+      >
+        <div className="flex items-center gap-2">
+          <span className="font-medium">{model.label}</span>
+          {model.badge && (
+            <span className="px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-[var(--foreground)]/[0.07] text-[var(--muted-foreground)]">
+              {model.badge}
+            </span>
+          )}
+        </div>
+        {model.description && (
+          <p className="text-xs text-[var(--muted-foreground)] mt-0.5">
+            {model.description}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // Build flat index mapping for grouped layout
+  let flatIndex = 0;
+  const dropdownContent = groups
+    ? Array.from(groups.entries()).map(([provider, items], groupIndex) => (
+      <div key={provider || "__ungrouped"} role="group" aria-label={provider || undefined}>
+        {groupIndex > 0 && <div className="h-px bg-[var(--border)] my-1" />}
+        {provider && (
+          <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--input-placeholder)]">
+            {provider}
+          </div>
+        )}
+        {items.map((item) =>
+          renderItem(item, flatIndex++)
+        )}
+      </div>
+    ))
+    : models.map((item) => renderItem(item, flatIndex++));
+
   return (
-    <select
-      value={value ?? ""}
-      onChange={(e) => onChange(e.target.value)}
-      disabled={disabled}
-      className={className ??
-        "text-xs px-2 py-1 rounded-md border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 focus:outline-none focus:ring-1 focus:ring-neutral-400"}
-    >
-      {models.map((m) => (
-        <option key={m.value} value={m.value}>
-          {m.label}
-        </option>
-      ))}
-    </select>
+    <div className={cn("inline-block", className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => !disabled && setOpen((prev) => !prev)}
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={open ? listboxId : undefined}
+        className={cn(
+          "inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full",
+          "border border-[var(--border)]",
+          "bg-[var(--card)]",
+          "text-[var(--card-foreground)]",
+          "hover:bg-[var(--foreground)]/[0.05] hover:text-[var(--foreground)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
+          "transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+        )}
+      >
+        <span>{selected?.label ?? "Select model"}</span>
+        <ChevronDownIcon
+          className={cn("size-3 transition-transform rotate-180", open && "rotate-0")}
+        />
+      </button>
+
+      {open && pos && (
+        <div
+          ref={dropdownRef}
+          id={listboxId}
+          role="listbox"
+          aria-label="Select model"
+          className="min-w-[220px] max-h-[320px] overflow-auto rounded-xl border border-[var(--border)] bg-[var(--card)] shadow-xl p-1"
+          style={{
+            position: "fixed",
+            bottom: pos.bottom,
+            right: pos.right,
+            zIndex: 9999,
+          }}
+        >
+          {dropdownContent}
+        </div>
+      )}
+    </div>
   );
 }