@arbidocs/react 0.4.3 → 0.4.4

package/dist/index.js

@@ -1,6 +1,6 @@
 import { formatRelativeTime } from './chunk-EJ2BMHYK.js';
 export { DEFAULT_NOTIFY_TONE, NotificationBell, Toaster, formatRelativeTime, notify, seedNotifications, selectUnread, toast, useNotify } from './chunk-EJ2BMHYK.js';
-import { normalizeCitationMarkup, MarkMenu, AiMarkdown, Card, Button, Badge, TagEntity, MarkdownRenderer, Input, FILE_TYPE_COLORS, getEntityIcon, UserEntity, getEntityColorStyles, AgentBadge, Textarea, Slider, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DocumentEntity, DocumentCard, useAudioRecorder, MicWaveformIndicator, IconToggle, classifyMediaError, formatElapsed, PassageCard } from './chunk-MIJRORQL.js';
+import { normalizeCitationMarkup, MarkMenu, AiMarkdown, Card, Button, Badge, TagEntity, MarkdownRenderer, Input, FILE_TYPE_COLORS, getEntityIcon, UserEntity, getEntityColorStyles, AgentBadge, Textarea, Label, Slider, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DocumentEntity, DocumentCard, useAudioRecorder, MicWaveformIndicator, IconToggle, classifyMediaError, formatElapsed, PassageCard } from './chunk-MIJRORQL.js';
 export { AgentBadge, AiMarkdown, ArbiBotHeadIcon, AudIcon, Avatar, AvatarFallback, AvatarImage, BASE_COLORS, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DictateProvider, DocumentCard, DocumentEntity, ENTITY_MAPPINGS, EmlIcon, EntityIcon, EntityPill, FILE_TYPE_COLORS, HoverCard, HoverCardContent, HoverCardTrigger, IconToggle, ImgIcon, InlineMicButton, Input, Label, MarkMenu, MarkdownRenderer, MarkdownStreamingContext, MicRecordingOverlay, MicWaveformIndicator, NEUTRAL_GRAY, PLACEHOLDER_COLOR, PassageCard, PdfIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PresenceLabel, Progress, ProjectEntity, RadioGroup, RadioGroupItem, RagDot, RelevanceDot, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, StatusPill, Switch, TAG_TYPE_ICONS, TAG_TYPE_LABELS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagEntity, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserEntity, UserMenu, VISIBILITY_ICONS, VidIcon, VisibilityIcon, badgeVariants, buttonVariants, cardVariants, configureEntityRegistry, configureRagLabels, configureStatusRegistry, formatElapsed, getDocIcon, getEntityColor, getEntityColorStyles, getEntityIcon, getEntityLabel, getStatusVariant, getTagTypeIcon, getTagTypeLabel, getWorkspaceColor, markdownBaseComponents, normalizeCitationMarkup, splitMarkdownBlocks, toggleVariants, useAudioRecorder } from './chunk-MIJRORQL.js';
 import { cn, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './chunk-6ALMBER7.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ScrollArea, ScrollBar, cn } from './chunk-6ALMBER7.js';
@@ -23,6 +23,23 @@ import Cropper from 'react-easy-crop';
 import { AgGridReact } from 'ag-grid-react';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 
+// src/credits.ts
+var DEFAULT_USD_PER_CREDIT = 0.01;
+function formatCredits(credits, options = {}) {
+  const { unit = true, locale = "en-US" } = options;
+  const whole = Math.round(Number.isFinite(credits) ? credits : 0);
+  const digits = whole.toLocaleString(locale);
+  return unit ? `${digits} ${whole === 1 ? "credit" : "credits"}` : digits;
+}
+function creditsToUsd(credits, usdPerCredit = DEFAULT_USD_PER_CREDIT) {
+  return credits * usdPerCredit;
+}
+function isUsageMetered(usage, subscription) {
+  const empty = usage.total_spend === 0 && usage.total_tokens === 0 && usage.total_requests === 0;
+  return !(empty && subscription === "dev");
+}
+
+// src/hooks.ts
 var arbiQueryKeys = {
   workspaces: () => ["arbi", "workspaces"],
   documents: (workspaceId) => ["arbi", "documents", workspaceId],
@@ -40,7 +57,14 @@ var arbiQueryKeys = {
   projects: () => ["arbi", "projects"],
   projectUsage: (projectExtId, monthsBack) => ["arbi", "projectUsage", projectExtId, monthsBack],
   projectInvoices: (projectExtId) => ["arbi", "projectInvoices", projectExtId],
-  userUsageToday: () => ["arbi", "userUsageToday"]
+  userUsageToday: () => ["arbi", "userUsageToday"],
+  contacts: () => ["arbi", "contacts"],
+  skills: () => ["arbi", "skills"],
+  taskRuns: (taskId) => ["arbi", "taskRuns", taskId],
+  /** An agent's pinned config; `undefined` = the library default config. */
+  agentConfig: (agentExtId) => ["arbi", "agentConfig", agentExtId ?? "default"],
+  agentWorkspaces: (agentExtId) => ["arbi", "agentWorkspaces", agentExtId],
+  models: () => ["arbi", "models"]
 };
 function useWorkspaces(options) {
   const arbi = useArbi();
@@ -169,15 +193,20 @@ function useProjects(options) {
 }
 function useProjectUsage(projectExtId, monthsBack = 0, options) {
   const arbi = useArbi();
-  return useQuery({
+  const usage = useQuery({
     queryKey: arbiQueryKeys.projectUsage(projectExtId ?? "", monthsBack),
     queryFn: () => arbi.projects.usage(projectExtId, monthsBack),
     enabled: (options?.enabled ?? true) && !!projectExtId && arbi.isLoggedIn
   });
+  const projects = useProjects({ enabled: !!projectExtId && (options?.enabled ?? true) });
+  const subscription = projects.data?.find((p) => p.external_id === projectExtId)?.subscription;
+  const metered = usage.data ? isUsageMetered(usage.data, subscription) : void 0;
+  return { ...usage, metered };
 }
 function useProjectsUsage(projectExtIds, monthsBack = 0, options) {
   const arbi = useArbi();
   const enabled = (options?.enabled ?? true) && arbi.isLoggedIn;
+  const projects = useProjects({ enabled: enabled && projectExtIds.length > 0 });
   const results = useQueries({
     queries: projectExtIds.map((id) => ({
       queryKey: arbiQueryKeys.projectUsage(id, monthsBack),
@@ -185,27 +214,34 @@ function useProjectsUsage(projectExtIds, monthsBack = 0, options) {
       enabled: enabled && !!id
     }))
   });
-  const signature = results.map((r) => `${r.status}:${r.dataUpdatedAt ?? 0}`).join("|");
+  const signature = results.map((r) => `${r.status}:${r.dataUpdatedAt ?? 0}`).join("|") + `#${projects.dataUpdatedAt}`;
   return useMemo(() => {
     const dailyMap = /* @__PURE__ */ new Map();
     const modelMap = /* @__PURE__ */ new Map();
-    let totalSpend = 0;
+    let totalCredits = 0;
+    let anyData = false;
+    let anyMetered = false;
     let totalTokens = 0;
     let totalRequests = 0;
-    for (const r of results) {
+    results.forEach((r, i) => {
       const d = r.data;
-      if (!d) continue;
-      totalSpend += d.total_spend ?? 0;
+      if (!d) return;
+      anyData = true;
+      const subscription = projects.data?.find(
+        (p) => p.external_id === projectExtIds[i]
+      )?.subscription;
+      if (isUsageMetered(d, subscription)) anyMetered = true;
+      totalCredits += d.total_spend ?? 0;
       totalTokens += d.total_tokens ?? 0;
       totalRequests += d.total_requests ?? 0;
       for (const day of d.daily ?? []) {
         const cur = dailyMap.get(day.date) ?? {
           date: day.date,
-          spend: 0,
+          credits: 0,
           totalTokens: 0,
           apiRequests: 0
         };
-        cur.spend += day.spend ?? 0;
+        cur.credits += day.spend ?? 0;
         cur.totalTokens += day.total_tokens ?? 0;
         cur.apiRequests += day.api_requests ?? 0;
         dailyMap.set(day.date, cur);
@@ -213,28 +249,29 @@ function useProjectsUsage(projectExtIds, monthsBack = 0, options) {
       for (const [model, mg] of Object.entries(d.model_groups ?? {})) {
         const cur = modelMap.get(model) ?? {
           model,
-          spend: 0,
+          credits: 0,
           totalTokens: 0,
           promptTokens: 0,
           completionTokens: 0,
           successfulRequests: 0
         };
-        cur.spend += mg.spend ?? 0;
+        cur.credits += mg.spend ?? 0;
         cur.totalTokens += mg.total_tokens ?? 0;
         cur.promptTokens += mg.prompt_tokens ?? 0;
         cur.completionTokens += mg.completion_tokens ?? 0;
         cur.successfulRequests += mg.successful_requests ?? 0;
         modelMap.set(model, cur);
       }
-    }
+    });
     return {
-      totalSpend,
+      totalCredits,
       totalTokens,
       totalRequests,
       daily: [...dailyMap.values()].sort((a, b) => a.date.localeCompare(b.date)),
       modelGroups: [...modelMap.values()].sort(
-        (a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens
+        (a, b) => b.credits - a.credits || b.totalTokens - a.totalTokens
       ),
+      metered: !anyData || anyMetered,
       isLoading: results.some((r) => r.isLoading),
       isError: results.some((r) => r.isError)
     };
@@ -890,6 +927,186 @@ function useArbiShellWorkspaces(options = {}) {
     select: select ?? defaultSelect
   });
 }
+function useCreateTask() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (body) => arbi.tasks.create(body),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.tasks() })
+  });
+}
+function useUpdateTask() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ taskId, patch }) => arbi.tasks.update(taskId, patch),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.tasks() })
+  });
+}
+function useRunTask() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (taskId) => arbi.tasks.runWithAuth(taskId),
+    onSuccess: (_task, taskId) => Promise.all([
+      qc.invalidateQueries({ queryKey: arbiQueryKeys.tasks() }),
+      qc.invalidateQueries({ queryKey: arbiQueryKeys.taskRuns(taskId) })
+    ])
+  });
+}
+function useDeleteTask() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (taskId) => arbi.tasks.delete(taskId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.tasks() })
+  });
+}
+function useTaskRuns(taskId, options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.taskRuns(taskId ?? ""),
+    queryFn: () => arbi.tasks.listRuns(taskId),
+    enabled: (options?.enabled ?? true) && !!taskId && arbi.isLoggedIn,
+    refetchInterval: (q) => q.state.data?.some((r) => r.status === "running") ? 3e3 : false
+  });
+}
+function useCreateAgent() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (name) => arbi.agents.create(name),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.agents() })
+  });
+}
+function useAgentConfig(agentExtId, options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.agentConfig(agentExtId),
+    queryFn: async () => agentExtId ? await arbi.agents.getConfig(agentExtId) : await arbi.agentConfig.get("default"),
+    enabled: (options?.enabled ?? true) && arbi.isLoggedIn
+  });
+}
+function useAgentModels(options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.models(),
+    queryFn: async () => (await arbi.agentConfig.getModels()).models.map((m) => m.model_name),
+    enabled: (options?.enabled ?? true) && arbi.isLoggedIn
+  });
+}
+function useSaveAgentConfig() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ agentExtId, title, sections }) => {
+      const pinned = await arbi.agents.getConfig(agentExtId);
+      const base = pinned ?? await arbi.agentConfig.get("default");
+      const merged = structuredClone(base);
+      for (const [section, params] of Object.entries(sections)) {
+        merged[section] = { ...merged[section] ?? {}, ...params };
+      }
+      return arbi.agentConfig.save({
+        ...merged,
+        agent_ext_id: agentExtId,
+        title: title ?? `agent-${agentExtId}`
+      });
+    },
+    onSuccess: (_saved, { agentExtId }) => Promise.all([
+      qc.invalidateQueries({ queryKey: arbiQueryKeys.configs() }),
+      qc.invalidateQueries({ queryKey: arbiQueryKeys.agentConfig(agentExtId) })
+    ])
+  });
+}
+function useAgentWorkspaces(agentExtId, options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.agentWorkspaces(agentExtId ?? ""),
+    queryFn: () => arbi.agents.listWorkspaces(agentExtId),
+    enabled: (options?.enabled ?? true) && !!agentExtId && arbi.isLoggedIn
+  });
+}
+function useGrantAgentAccess() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      agentExtId,
+      workspaceId,
+      mode = { kind: "standing" }
+    }) => {
+      if (mode.kind === "temporary") {
+        return arbi.agents.grantTemporaryAccess(agentExtId, workspaceId, mode.ttlSeconds);
+      }
+      const agent = (await arbi.agents.list()).find((a) => a.external_id === agentExtId);
+      if (!agent?.email) throw new Error("The agent's address is unknown.");
+      return arbi.workspaces.grantAccess({ workspaceId, emails: [agent.email] });
+    },
+    onSuccess: (_res, { agentExtId }) => qc.invalidateQueries({ queryKey: arbiQueryKeys.agentWorkspaces(agentExtId) })
+  });
+}
+function useRevokeAgentAccess() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      agentExtId,
+      workspaceId
+    }) => {
+      const previous = arbi.hasWorkspace ? arbi.getWorkspaceId() : null;
+      await arbi.selectWorkspace(workspaceId);
+      try {
+        await arbi.workspaces.removeUsers([agentExtId]);
+      } finally {
+        if (previous && previous !== workspaceId) await arbi.selectWorkspace(previous);
+      }
+    },
+    onSuccess: (_res, { agentExtId }) => qc.invalidateQueries({ queryKey: arbiQueryKeys.agentWorkspaces(agentExtId) })
+  });
+}
+function useSkills(options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: [...arbiQueryKeys.skills(), options?.includeHidden ?? false],
+    queryFn: () => arbi.assistant.listSkills({ includeHidden: options?.includeHidden }),
+    enabled: (options?.enabled ?? true) && arbi.isLoggedIn,
+    staleTime: 3e4
+  });
+}
+function useContacts(options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.contacts(),
+    queryFn: () => arbi.contacts.list(),
+    enabled: (options?.enabled ?? true) && arbi.isLoggedIn
+  });
+}
+function usePendingContacts(options) {
+  const contacts = useContacts(options);
+  const pending = useMemo(
+    () => (contacts.data ?? []).filter(
+      (c) => c.status === "invitation_pending" || c.status === "invitation_expired"
+    ),
+    [contacts.data]
+  );
+  return { ...contacts, pending };
+}
+function useAddContacts() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (emails) => arbi.contacts.add(emails),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.contacts() })
+  });
+}
+function useRemoveContacts() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (contactIds) => arbi.contacts.remove(contactIds),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.contacts() })
+  });
+}
 function useWorkspaceDocs(workspaceId) {
   const { data: docs = [], isLoading, isError } = useDocuments(workspaceId);
   const docIds = useMemo(
@@ -3065,7 +3282,6 @@ function isAgentUser(user) {
   return user.external_id.startsWith("agt-");
 }
 var DM_QUERY_KEY = ["arbi", "directMessages"];
-var CONTACTS_QUERY_KEY = ["arbi", "contacts"];
 function mergeContacts(threads, contacts) {
   const byPeer = /* @__PURE__ */ new Map();
   for (const t of threads) byPeer.set(t.peer.external_id, t);
@@ -3131,7 +3347,7 @@ function useDirectMessages(options) {
     enabled
   });
   const contactsQuery = useQuery({
-    queryKey: CONTACTS_QUERY_KEY,
+    queryKey: arbiQueryKeys.contacts(),
     queryFn: () => arbi.contacts.list(),
     enabled
   });
@@ -3216,6 +3432,7 @@ function ConversationList({
   classNames,
   emptyState,
   header,
+  lead,
   className
 }) {
   return /* @__PURE__ */ jsxs(
@@ -3235,6 +3452,7 @@ function ConversationList({
             conversations.length === 1 ? "colleague" : "colleagues"
           ] })
         ] }) : header,
+        lead,
         /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-xs text-muted-foreground", children: emptyState ?? "No conversations yet." }) : /* @__PURE__ */ jsx("ul", { className: "w-full", children: conversations.map((c, i) => {
           const { peer, lastMessage, unreadCount } = c;
           const newSection = c.sectionLabel && c.sectionLabel !== conversations[i - 1]?.sectionLabel;
@@ -3521,14 +3739,117 @@ function DmComposer({
     error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-destructive", "data-testid": "arbi-dm-error", children: error })
   ] });
 }
+var DEFAULT_START_BY_EMAIL_LABELS = {
+  email: "Email address",
+  emailPlaceholder: "name@example.com",
+  message: "Message",
+  messagePlaceholder: "Write the first message\u2026",
+  send: "Send",
+  sending: "Sending\u2026",
+  invalidEmail: "Enter a valid email address."
+};
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function StartByEmail({
+  onStart,
+  onStarted,
+  classNames,
+  labels,
+  className
+}) {
+  const l = { ...DEFAULT_START_BY_EMAIL_LABELS, ...labels };
+  const uid = useId();
+  const [email, setEmail] = useState("");
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const address = email.trim().toLowerCase();
+  const valid = EMAIL.test(address);
+  const submit = async () => {
+    if (!valid || !text.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await onStart(address, text.trim());
+      setEmail("");
+      setText("");
+      onStarted?.(result);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "data-testid": "arbi-dm-start",
+      className: cn("flex flex-col gap-2 border-b border-border px-4 py-3", className),
+      onSubmit: (e) => {
+        e.preventDefault();
+        void submit();
+      },
+      children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-email`, children: l.email }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${uid}-email`,
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: l.emailPlaceholder,
+            "aria-invalid": email !== "" && !valid,
+            "aria-describedby": email !== "" && !valid ? `${uid}-bad` : void 0,
+            disabled: busy,
+            "data-testid": "arbi-dm-start-email"
+          }
+        ),
+        email !== "" && !valid && /* @__PURE__ */ jsx("p", { id: `${uid}-bad`, className: "text-xs text-destructive", children: l.invalidEmail }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-text`, children: l.message }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: `${uid}-text`,
+            value: text,
+            onChange: (e) => setText(e.target.value),
+            placeholder: l.messagePlaceholder,
+            rows: 2,
+            disabled: busy,
+            "data-testid": "arbi-dm-start-message"
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-xs text-destructive", "data-testid": "arbi-dm-start-error", children: error }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "submit",
+            size: "sm",
+            disabled: !valid || !text.trim() || busy,
+            className: cn("self-end", classNames?.sendButton),
+            "data-testid": "arbi-dm-start-send",
+            children: [
+              busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Send, { className: "size-4", "aria-hidden": true }),
+              busy ? l.sending : l.send
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function DirectMessages({
   className,
   classNames,
   emptyThread: emptyThread2,
-  emptyList
+  emptyList,
+  listHeader,
+  listLead,
+  startByEmail,
+  hideOwnContact
 }) {
   const {
-    conversations,
+    conversations: allConversations,
+    myExtId,
     isLoading,
     isError,
     error,
@@ -3538,6 +3859,14 @@ function DirectMessages({
     markRead
   } = useDirectMessages();
   const [selectedPeerId, setSelectedPeerId] = useState(null);
+  const conversations = useMemo(
+    () => hideOwnContact && myExtId ? allConversations.filter((c) => c.peer.external_id !== myExtId) : allConversations,
+    [allConversations, hideOwnContact, myExtId]
+  );
+  const openStarted = (created) => {
+    const peer = Array.isArray(created) ? created[0]?.recipient?.external_id : void 0;
+    if (peer) setSelectedPeerId(peer);
+  };
   const loadError = isError ? error instanceof Error ? error.message : "Couldn\u2019t load messages." : null;
   const selected = useMemo(
     () => conversations.find((c) => c.peer.external_id === selectedPeerId) ?? null,
@@ -3581,7 +3910,20 @@ function DirectMessages({
             selectedPeerId: selected?.peer.external_id ?? null,
             onSelect: setSelectedPeerId,
             classNames,
-            emptyState: isLoading ? "Loading messages\u2026" : emptyList
+            emptyState: isLoading ? "Loading messages\u2026" : emptyList,
+            header: listHeader,
+            lead: /* @__PURE__ */ jsxs(Fragment, { children: [
+              listLead,
+              startByEmail && /* @__PURE__ */ jsx(
+                StartByEmail,
+                {
+                  onStart: sendMessageTo,
+                  onStarted: openStarted,
+                  classNames,
+                  labels: typeof startByEmail === "object" ? startByEmail.labels : void 0
+                }
+              )
+            ] })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
@@ -4990,6 +5332,6 @@ function hasVideoTrack(blob) {
   });
 }
 
-export { ActivityFeed, AiActionCard, AiAnswer, AppleIcon, ArbiBotIcon, ArbiIcon, ArbiWebSocketProvider, ArtifactCanvas, ChatBubble, CitationRenderer, ClaudeIcon, CommandPalette, CommandPaletteProvider, ConversationList, DEFAULT_ASPECT_OPTIONS, DateSeparator, DirectMessages, DmAvatar, DmComposer, DocIcon, DocQaPanel, DocSearch, DocumentCardMenu, DocumentGallery, DocumentReview, DocumentTable, DraftTitleControls, FileIcon, FireworksIcon, GeminiIcon, GitHubIcon, GoogleIcon, HtmlIcon, ImageCropModal, ImageCropper, LinkedInIcon, MessageArtifactCard, MessageBubble, MessageThread, OpenAIIcon, PhotoCapture, ProviderIcon, RUN_WINDOW_MS, SemanticSearch, TxtIcon, TypingIndicator, VideoCapture, VoiceNoteRecorder, XlsIcon, annotateThread, arbiQueryKeys, captureFrameAsBlob, cropImage, dayKey, describeActivity, getNotificationTypeMeta, getWorkspaceActionText, getWorkspaceKind, getWorkspaceSentPhrase, hasVideoTrack, isWorkspaceNotificationType, parseActivityContent, pickRecentWorkspaces, redlineStats, resolveActiveWorkspace, textToArtifact, titleFromQuestion, toRedlineMarkdown, toShellWorkspace, useActivity, useAgents, useAiTask, useArbiChat, useArbiConnected, useArbiDocumentSync, useArbiShellWorkspaces, useArbiUiStore, useArbiWebSocket, useArbiWsContext, useArbiWsMessage, useArbiWsStatus, useArbiWsStore, useArbiWsTask, useArbiWsTasks, useAssistantQuery, useCameraStream, useCommandPalette, useConfigs, useConversations, useDeleteAgents, useDirectMessages, useDocuments, useFacts, useHealth, useParsedDocument, useProjectInvoices, useProjectUsage, useProjects, useProjectsUsage, useSemanticSearch, useSessions, useShellWorkspaces, useTags, useTasks, useThumbnails, useUserUsageToday, useVideoRecorder, useWorkspaceDocs, useWorkspaces, userDisplayName, userInitials };
+export { ActivityFeed, AiActionCard, AiAnswer, AppleIcon, ArbiBotIcon, ArbiIcon, ArbiWebSocketProvider, ArtifactCanvas, ChatBubble, CitationRenderer, ClaudeIcon, CommandPalette, CommandPaletteProvider, ConversationList, DEFAULT_ASPECT_OPTIONS, DEFAULT_START_BY_EMAIL_LABELS, DEFAULT_USD_PER_CREDIT, DateSeparator, DirectMessages, DmAvatar, DmComposer, DocIcon, DocQaPanel, DocSearch, DocumentCardMenu, DocumentGallery, DocumentReview, DocumentTable, DraftTitleControls, FileIcon, FireworksIcon, GeminiIcon, GitHubIcon, GoogleIcon, HtmlIcon, ImageCropModal, ImageCropper, LinkedInIcon, MessageArtifactCard, MessageBubble, MessageThread, OpenAIIcon, PhotoCapture, ProviderIcon, RUN_WINDOW_MS, SemanticSearch, StartByEmail, TxtIcon, TypingIndicator, VideoCapture, VoiceNoteRecorder, XlsIcon, annotateThread, arbiQueryKeys, captureFrameAsBlob, creditsToUsd, cropImage, dayKey, describeActivity, formatCredits, getNotificationTypeMeta, getWorkspaceActionText, getWorkspaceKind, getWorkspaceSentPhrase, hasVideoTrack, isUsageMetered, isWorkspaceNotificationType, parseActivityContent, pickRecentWorkspaces, redlineStats, resolveActiveWorkspace, textToArtifact, titleFromQuestion, toRedlineMarkdown, toShellWorkspace, useActivity, useAddContacts, useAgentConfig, useAgentModels, useAgentWorkspaces, useAgents, useAiTask, useArbiChat, useArbiConnected, useArbiDocumentSync, useArbiShellWorkspaces, useArbiUiStore, useArbiWebSocket, useArbiWsContext, useArbiWsMessage, useArbiWsStatus, useArbiWsStore, useArbiWsTask, useArbiWsTasks, useAssistantQuery, useCameraStream, useCommandPalette, useConfigs, useContacts, useConversations, useCreateAgent, useCreateTask, useDeleteAgents, useDeleteTask, useDirectMessages, useDocuments, useFacts, useGrantAgentAccess, useHealth, useParsedDocument, usePendingContacts, useProjectInvoices, useProjectUsage, useProjects, useProjectsUsage, useRemoveContacts, useRevokeAgentAccess, useRunTask, useSaveAgentConfig, useSemanticSearch, useSessions, useShellWorkspaces, useSkills, useTags, useTaskRuns, useTasks, useThumbnails, useUpdateTask, useUserUsageToday, useVideoRecorder, useWorkspaceDocs, useWorkspaces, userDisplayName, userInitials };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map