veryfront 0.1.47 → 0.1.49

package/src/src/react/components/ai/chat/utils/export.ts

@@ -0,0 +1,77 @@
+/**
+ * Conversation Export Utilities
+ * @module ai/react/components/chat/utils/export
+ */
+import * as dntShim from "../../../../../../_dnt.shims.js";
+
+
+import type { UIMessage } from "../../../../../agent/react/index.js";
+import { extractSourcesFromParts, getTextContent } from "./message-parts.js";
+
+/**
+ * Convert chat messages to a markdown string.
+ */
+export function exportAsMarkdown(messages: UIMessage[]): string {
+  const lines: string[] = [];
+
+  for (const msg of messages) {
+    if (msg.role === "system") continue;
+
+    if (msg.role === "user") {
+      lines.push(`**User:**\n${getTextContent(msg)}`);
+      lines.push("");
+      continue;
+    }
+
+    // Assistant message
+    const textParts: string[] = [];
+    const toolSummaries: string[] = [];
+
+    for (const part of msg.parts) {
+      if (part.type === "text") {
+        textParts.push(part.text);
+      } else if (part.type === "reasoning") {
+        textParts.push(`> *Thinking:* ${part.text}`);
+      } else if (
+        part.type.startsWith("tool-") && part.type !== "tool-result" && "toolName" in part
+      ) {
+        const name = (part as { toolName: string }).toolName;
+        const state = (part as { state?: string }).state ?? "";
+        toolSummaries.push(`> Tool: **${name}** (${state})`);
+      }
+    }
+
+    lines.push("**Assistant:**");
+    if (toolSummaries.length > 0) {
+      lines.push(toolSummaries.join("\n"));
+    }
+    lines.push(textParts.join(""));
+
+    const sources = extractSourcesFromParts(msg.parts);
+    if (sources.length > 0) {
+      lines.push(
+        "\nSources: " +
+          sources.map((s, i) => `[${i + 1}] ${s.title}${s.url ? ` (${s.url})` : ""}`).join(", "),
+      );
+    }
+    lines.push("");
+  }
+
+  return lines.join("\n").trim() + "\n";
+}
+
+/**
+ * Download messages as a .md file.
+ */
+export function downloadMarkdown(messages: UIMessage[], filename?: string): void {
+  const md = exportAsMarkdown(messages);
+  const blob = new dntShim.Blob([md], { type: "text/markdown;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename ?? `chat-${new Date().toISOString().slice(0, 10)}.md`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}

package/src/src/react/components/ai/chat/utils/message-parts.ts

@@ -9,6 +9,7 @@ import type {
   UIMessage,
   UIMessagePart,
 } from "../../../../../agent/react/index.js";
+import type { Source } from "../components/sources.js";
 
 /** Get text content from UIMessage parts */
 export function getTextContent(message: UIMessage): string {
@@ -27,6 +28,17 @@ export function isToolPart(part: UIMessagePart): part is ToolUIPart | DynamicToo
   return part.type.startsWith("tool-") && part.type !== "tool-result";
 }
 
+const SKILL_TOOL_NAMES: ReadonlySet<string> = new Set([
+  "load-skill",
+  "load-skill-reference",
+  "execute-skill-script",
+]);
+
+/** Check if a tool part is a skill-related tool (load-skill, load-skill-reference, execute-skill-script) */
+export function isSkillToolPart(tool: ToolUIPart | DynamicToolUIPart): boolean {
+  return SKILL_TOOL_NAMES.has(tool.toolName);
+}
+
 /** Check if a part is a reasoning part */
 export function isReasoningPart(
   part: UIMessagePart,
@@ -40,7 +52,8 @@ export function isReasoningPart(
 export type PartGroup =
   | { type: "text"; content: string }
   | { type: "tool"; tool: ToolUIPart | DynamicToolUIPart }
-  | { type: "reasoning"; text: string; isStreaming: boolean };
+  | { type: "reasoning"; text: string; isStreaming: boolean }
+  | { type: "step"; stepIndex: number; isComplete: boolean };
 
 /**
  * Group consecutive parts for ordered rendering
@@ -80,6 +93,16 @@ export function groupPartsInOrder(parts: UIMessagePart[]): PartGroup[] {
         text: part.text,
         isStreaming: part.state === "streaming",
       });
+      continue;
+    }
+
+    if (part.type === "step-start" || part.type === "step-end") {
+      groups.push({
+        type: "step",
+        stepIndex: (part as { stepIndex: number }).stepIndex,
+        isComplete: part.type === "step-end",
+      });
+      continue;
     }
     // Skip other non-renderable parts
   }
@@ -87,3 +110,42 @@ export function groupPartsInOrder(parts: UIMessagePart[]): PartGroup[] {
   flushText();
   return groups;
 }
+
+/**
+ * Extract sources from tool result parts.
+ * Looks for `documents` arrays in tool outputs and maps them to Source[].
+ */
+export function extractSourcesFromParts(parts: UIMessagePart[]): Source[] {
+  const sources: Source[] = [];
+
+  for (const part of parts) {
+    if (part.type !== "tool-result") continue;
+
+    const result = (part as { result?: unknown }).result;
+    if (!result || typeof result !== "object") continue;
+
+    const docs = (result as Record<string, unknown>).documents;
+    if (!Array.isArray(docs)) continue;
+
+    for (const doc of docs) {
+      if (!doc || typeof doc !== "object") continue;
+      const d = doc as Record<string, unknown>;
+      sources.push({
+        title: typeof d.title === "string"
+          ? d.title
+          : typeof d.name === "string"
+          ? d.name
+          : "Source",
+        url: typeof d.url === "string" ? d.url : undefined,
+        score: typeof d.score === "number" ? d.score : undefined,
+        snippet: typeof d.snippet === "string"
+          ? d.snippet
+          : typeof d.content === "string"
+          ? d.content.slice(0, 200)
+          : undefined,
+      });
+    }
+  }
+
+  return sources;
+}

package/src/src/react/components/ai/chat-with-sidebar.tsx

@@ -0,0 +1,371 @@
+import * as React from "react";
+import { cn, generateTokenCSS } from "./theme.js";
+import { Chat, type ChatProps } from "./chat/index.js";
+import { ChatSidebar } from "./chat/components/sidebar.js";
+import { type ChatTab, TabSwitcher } from "./chat/components/tab-switcher.js";
+import { useThreads } from "./chat/hooks/use-threads.js";
+import { PanelLeftIcon } from "./icons/index.js";
+
+type ChatMessageSetter = (messages: ChatProps["messages"]) => void;
+type ChatWithSidebarPassthroughProps = Omit<
+  ChatProps,
+  "messages" | "model" | "onModelChange" | "activeTab" | "onTabChange" | "className"
+>;
+type TabChangeHandler = NonNullable<ChatProps["onTabChange"]>;
+
+export interface ChatWithSidebarChatController {
+  messages: ChatProps["messages"];
+  input: ChatProps["input"];
+  onChange: ChatProps["onChange"];
+  onSubmit?: ChatProps["onSubmit"];
+  stop?: ChatProps["stop"];
+  reload?: ChatProps["reload"];
+  setInput?: ChatProps["setInput"];
+  isLoading?: ChatProps["isLoading"];
+  error?: ChatProps["error"];
+  model?: ChatProps["model"];
+  activeModel?: ChatProps["activeModel"];
+  onModelChange?: ChatProps["onModelChange"];
+  inferenceMode?: ChatProps["inferenceMode"];
+  browserStatus?: ChatProps["browserStatus"];
+  editMessage?: ChatProps["editMessage"];
+  getBranches?: ChatProps["getBranches"];
+  switchBranch?: ChatProps["switchBranch"];
+  setMessages: ChatMessageSetter;
+}
+
+interface ChatWithSidebarSidebarBaseConfig {
+  storageKey?: string;
+  visible?: boolean;
+}
+
+export type ChatWithSidebarSidebarConfig =
+  | (ChatWithSidebarSidebarBaseConfig & {
+    open: boolean;
+    onToggle: () => void;
+  })
+  | (ChatWithSidebarSidebarBaseConfig & {
+    open?: undefined;
+    onToggle?: () => void;
+  });
+
+export interface ChatWithSidebarModelConfig {
+  options?: ChatProps["models"];
+}
+
+export interface ChatWithSidebarAttachmentConfig {
+  accept?: ChatProps["attachAccept"];
+  items?: ChatProps["attachments"];
+  uploads?: ChatProps["uploads"];
+  onAttach?: ChatProps["onAttach"];
+  onDrop?: ChatProps["onDrop"];
+  onRemoveItem?: ChatProps["onRemoveAttachment"];
+  onRemoveUpload?: ChatProps["onRemoveUpload"];
+}
+
+export interface ChatWithSidebarQuickActionsConfig {
+  suggestions?: ChatProps["suggestions"];
+  onSuggestionClick?: ChatProps["onSuggestionClick"];
+  actions?: ChatProps["quickActions"];
+  onAction?: ChatProps["onQuickAction"];
+}
+
+export interface ChatWithSidebarMessageConfig {
+  render?: ChatProps["renderMessage"];
+  renderTool?: ChatProps["renderTool"];
+  onFeedback?: ChatProps["onFeedback"];
+  onSourceClick?: ChatProps["onSourceClick"];
+}
+
+export interface ChatWithSidebarFeatureConfig {
+  steps?: ChatProps["showSteps"];
+  tabs?: ChatProps["showTabs"];
+  sources?: ChatProps["showSources"];
+  export?: ChatProps["showExport"];
+  scrollButton?: ChatProps["showScrollButton"];
+  messageActions?: ChatProps["showMessageActions"];
+}
+
+export type ChatWithSidebarTabsConfig =
+  | {
+    active: ChatProps["activeTab"];
+    onChange: TabChangeHandler;
+  }
+  | {
+    active?: undefined;
+    onChange?: TabChangeHandler;
+  };
+
+export interface ChatWithSidebarVoiceConfig {
+  enabled?: ChatProps["enableVoice"];
+  onVoice?: ChatProps["onVoice"];
+}
+
+export interface ChatWithSidebarGroupedProps {
+  chat: ChatWithSidebarChatController;
+  sidebar?: ChatWithSidebarSidebarConfig;
+  models?: ChatWithSidebarModelConfig;
+  attachments?: ChatWithSidebarAttachmentConfig;
+  quickActions?: ChatWithSidebarQuickActionsConfig;
+  message?: ChatWithSidebarMessageConfig;
+  features?: ChatWithSidebarFeatureConfig;
+  tabs?: ChatWithSidebarTabsConfig;
+  voice?: ChatWithSidebarVoiceConfig;
+  className?: string;
+  maxHeight?: ChatProps["maxHeight"];
+  theme?: ChatProps["theme"];
+  placeholder?: ChatProps["placeholder"];
+  emptyState?: ChatProps["emptyState"];
+  children?: ChatProps["children"];
+}
+
+export type ChatWithSidebarProps = ChatWithSidebarGroupedProps;
+
+export const ChatWithSidebar = React.forwardRef<HTMLDivElement, ChatWithSidebarProps>(
+  function ChatWithSidebar(
+    {
+      chat,
+      sidebar,
+      models,
+      attachments,
+      quickActions,
+      message,
+      features,
+      tabs,
+      voice,
+      className,
+      maxHeight,
+      theme,
+      placeholder,
+      emptyState,
+      children,
+    },
+    ref,
+  ): React.ReactElement {
+    const storageKey = sidebar?.storageKey;
+    const controlledOpen = sidebar?.open;
+    const onSidebarToggle = sidebar?.onToggle;
+    const showSidebar = sidebar?.visible ?? true;
+    const setMessages = chat.setMessages;
+    const messages = chat.messages;
+    const model = chat.model;
+    const onModelChange = chat.onModelChange;
+    const controlledTab = tabs?.active;
+    const chatProps: ChatWithSidebarPassthroughProps = {
+      input: chat.input,
+      onChange: chat.onChange,
+      onSubmit: chat.onSubmit,
+      stop: chat.stop,
+      reload: chat.reload,
+      setInput: chat.setInput,
+      isLoading: chat.isLoading,
+      error: chat.error,
+      placeholder,
+      maxHeight,
+      theme,
+      renderMessage: message?.render,
+      renderTool: message?.renderTool,
+      suggestions: quickActions?.suggestions,
+      onSuggestionClick: quickActions?.onSuggestionClick,
+      emptyState,
+      showScrollButton: features?.scrollButton,
+      showMessageActions: features?.messageActions,
+      models: models?.options,
+      activeModel: chat.activeModel,
+      inferenceMode: chat.inferenceMode,
+      browserStatus: chat.browserStatus,
+      showSources: features?.sources,
+      onSourceClick: message?.onSourceClick,
+      onAttach: attachments?.onAttach,
+      onDrop: attachments?.onDrop,
+      attachAccept: attachments?.accept,
+      attachments: attachments?.items,
+      onRemoveAttachment: attachments?.onRemoveItem,
+      showExport: features?.export,
+      onFeedback: message?.onFeedback,
+      editMessage: chat.editMessage,
+      getBranches: chat.getBranches,
+      switchBranch: chat.switchBranch,
+      showSteps: features?.steps,
+      showTabs: features?.tabs,
+      uploads: attachments?.uploads,
+      onRemoveUpload: attachments?.onRemoveUpload,
+      quickActions: quickActions?.actions,
+      onQuickAction: quickActions?.onAction,
+      enableVoice: voice?.enabled,
+      onVoice: voice?.onVoice,
+      children,
+    };
+
+    const {
+      activeThreadId,
+      createThread,
+      deleteThread,
+      renameThread,
+      selectThread,
+      threads,
+      updateThread,
+    } = useThreads({ storageKey });
+    const [internalOpen, setInternalOpen] = React.useState(false);
+    const [internalTab, setInternalTab] = React.useState<ChatTab>("chat");
+    const showTabs = chatProps.showTabs ?? false;
+
+    const isSidebarControlled = controlledOpen !== undefined;
+    const sidebarOpen = isSidebarControlled ? controlledOpen : internalOpen;
+    const toggleSidebar = React.useCallback(() => {
+      if (isSidebarControlled) {
+        onSidebarToggle?.();
+        return;
+      }
+
+      setInternalOpen((prev) => {
+        const next = !prev;
+        onSidebarToggle?.();
+        return next;
+      });
+    }, [isSidebarControlled, onSidebarToggle]);
+
+    const isTabControlled = controlledTab !== undefined;
+    const activeTab = controlledTab ?? internalTab;
+    const handleTabChange = React.useCallback((tab: ChatTab) => {
+      if (!isTabControlled) {
+        setInternalTab(tab);
+      }
+      tabs?.onChange?.(tab);
+    }, [isTabControlled, tabs]);
+
+    // Keep refs in sync so callbacks always read current values
+    const activeIdRef = React.useRef(activeThreadId);
+    activeIdRef.current = activeThreadId;
+    const messagesRef = React.useRef(messages);
+    messagesRef.current = messages;
+    const threadsRef = React.useRef(threads);
+    threadsRef.current = threads;
+
+    // Sync current messages to active thread on change
+    const prevMessagesRef = React.useRef(messages);
+    React.useEffect(() => {
+      const currentActiveId = activeIdRef.current;
+      if (!currentActiveId || messages === prevMessagesRef.current) return;
+      prevMessagesRef.current = messages;
+
+      if (messages.length > 0) {
+        // Auto-title from first user message — combine with message sync
+        // into a single updateThread call to avoid racing setThreads batches
+        const activeThread = threadsRef.current.find((t) => t.id === currentActiveId);
+        let title: string | undefined;
+        if (activeThread?.title === "New Chat") {
+          const firstUserMsg = messages.find((m) => m.role === "user");
+          if (firstUserMsg) {
+            const text = firstUserMsg.parts
+              .filter((p) => p.type === "text")
+              .map((p) => (p as { text: string }).text)
+              .join("")
+              .trim();
+            if (text) title = text.slice(0, 30);
+          }
+        }
+
+        updateThread(currentActiveId, title ? { messages, title } : { messages });
+      }
+    }, [messages, updateThread]);
+
+    const setInput = chat.setInput;
+    const stopChat = chat.stop;
+
+    const handleSelectThread = React.useCallback(
+      (id: string) => {
+        stopChat?.();
+        const currentActiveId = activeIdRef.current;
+        if (currentActiveId && messagesRef.current.length > 0) {
+          updateThread(currentActiveId, { messages: messagesRef.current });
+        }
+        selectThread(id);
+        const thread = threadsRef.current.find((t) => t.id === id);
+        setMessages(thread?.messages ?? []);
+        setInput?.("");
+      },
+      [selectThread, updateThread, setMessages, setInput, stopChat],
+    );
+
+    const handleNewThread = React.useCallback(() => {
+      stopChat?.();
+      const currentActiveId = activeIdRef.current;
+      if (currentActiveId && messagesRef.current.length > 0) {
+        updateThread(currentActiveId, { messages: messagesRef.current });
+      }
+      const nextThread = createThread();
+      setMessages(nextThread.messages);
+      setInput?.("");
+    }, [createThread, updateThread, setMessages, setInput, stopChat]);
+
+    if (!showSidebar) {
+      return (
+        <Chat
+          ref={ref}
+          messages={messages}
+          model={model}
+          onModelChange={onModelChange}
+          className={className}
+          {...chatProps}
+        />
+      );
+    }
+
+    const tokenCSS = React.useMemo(() => generateTokenCSS(), []);
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex h-full bg-[var(--background)]", className)}
+        data-vf-chat=""
+      >
+        <style dangerouslySetInnerHTML={{ __html: tokenCSS }} />
+        {sidebarOpen && (
+          <ChatSidebar
+            threads={threads}
+            activeThreadId={activeThreadId}
+            onSelectThread={handleSelectThread}
+            onDeleteThread={(id) => {
+              deleteThread(id);
+              const next = threadsRef.current.find((t) => t.id !== id);
+              setMessages(next?.messages ?? []);
+            }}
+            onRenameThread={renameThread}
+            onNewThread={handleNewThread}
+          />
+        )}
+        <div className="flex-1 min-w-0 flex flex-col">
+          <div className="flex items-center px-3 pt-4 pb-1 shrink-0">
+            <button
+              type="button"
+              onClick={toggleSidebar}
+              className="size-8 inline-flex items-center justify-center rounded-full text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
+              aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
+            >
+              <PanelLeftIcon className="size-[18px]" />
+            </button>
+            {showTabs && (
+              <div className="flex-1 flex justify-center">
+                <TabSwitcher activeTab={activeTab} onTabChange={handleTabChange} className="py-0" />
+              </div>
+            )}
+            {showTabs && <div className="size-8 shrink-0" />}
+          </div>
+          <Chat
+            messages={messages}
+            model={model}
+            onModelChange={onModelChange}
+            className="flex-1 min-h-0"
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+            hideTabSwitcher
+            {...chatProps}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+ChatWithSidebar.displayName = "ChatWithSidebar";

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

@@ -1,31 +1,146 @@
+/**
+ * Chat re-export aggregator — single import path for all chat components.
+ *
+ * @module ai/react/components/ai/chat
+ */
+
+// ---------------------------------------------------------------------------
+// Core preset + compound
+// ---------------------------------------------------------------------------
+export { Chat, ChatComponents, type ChatProps } from "./chat/index.js";
+
+// ---------------------------------------------------------------------------
+// Composition building blocks
+// ---------------------------------------------------------------------------
+export {
+  ChatComposer,
+  type ChatComposerProps,
+  ChatEmpty,
+  type ChatEmptyProps,
+  ChatIf,
+  type ChatIfProps,
+  ChatMessageList,
+  type ChatMessageListProps,
+  ChatRoot,
+  type ChatRootProps,
+  ErrorBanner,
+  type ErrorBannerProps,
+  Message,
+  type MessageRootProps,
+  ModelAvatar,
+  type ModelAvatarProps,
+} from "./chat/index.js";
+
+// ---------------------------------------------------------------------------
+// Contexts
+// ---------------------------------------------------------------------------
 export {
-  Chat,
-  ChatComponents,
-  ChatFooter,
-  ChatHeader,
-  ChatInput,
-  ChatMessages,
-  type ChatProps,
+  ChatContextProvider,
+  type ChatContextValue,
+  ComposerContextProvider,
+  type ComposerContextValue,
+  MessageContextProvider,
+  type MessageContextValue,
+  ThreadListContextProvider,
+  type ThreadListContextValue,
+  useChatContext,
+  useChatContextOptional,
+  useComposerContext,
+  useComposerContextOptional,
+  useMessageContext,
+  useMessageContextOptional,
+  useThreadListContext,
+  useThreadListContextOptional,
+} from "./chat/index.js";
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+export {
+  type AttachmentInfo,
+  AttachmentPill,
+  type AttachmentPillProps,
+  BranchPicker,
+  type BranchPickerProps,
+  ChatSidebar,
+  type ChatSidebarProps,
+  type ChatTab,
+  type CodeBlockProps,
   ConversationEmptyState,
   type ConversationEmptyStateProps,
   ConversationScrollButton,
   type ConversationScrollButtonProps,
+  downloadMarkdown,
+  DropZoneOverlay,
+  type DropZoneOverlayProps,
+  exportAsMarkdown,
+  extractSourcesFromParts,
+  FadeIn,
+  type FeedbackValue,
   getTextContent,
   groupPartsInOrder,
+  InferenceBadge,
+  type InferenceBadgeProps,
+  InlineCitation,
+  type InlineCitationProps,
   isReasoningPart,
+  isSkillToolPart,
   isToolPart,
   Loader,
   MessageActions,
   type MessageActionsProps,
+  MessageEditForm,
+  type MessageEditFormProps,
+  MessageFeedback,
+  type MessageFeedbackProps,
   type PartGroup,
+  type QuickAction,
+  QuickActions,
+  type QuickActionsProps,
   ReasoningCard,
+  RichCodeBlock,
   Shimmer,
+  SkillBadge,
+  type SkillBadgeProps,
+  type Source,
+  Sources,
+  type SourcesProps,
+  StepIndicator,
+  type StepIndicatorProps,
   Suggestion,
   type SuggestionProps,
   Suggestions,
   type SuggestionsProps,
+  TabSwitcher,
+  type TabSwitcherProps,
+  type Thread,
   ToolCallCard,
   ToolStatusBadge,
+  UpgradeCTA,
+  type UpgradeCTAProps,
+  type UploadedFile,
+  UploadsPanel,
+  type UploadsPanelProps,
+  useThreads,
+  type UseThreadsOptions,
+  type UseThreadsResult,
 } from "./chat/index.js";
 
+// ---------------------------------------------------------------------------
+// Adjacent components
+// ---------------------------------------------------------------------------
 export { type ModelOption, ModelSelector, type ModelSelectorProps } from "./model-selector.js";
+export {
+  ChatWithSidebar,
+  type ChatWithSidebarAttachmentConfig,
+  type ChatWithSidebarChatController,
+  type ChatWithSidebarFeatureConfig,
+  type ChatWithSidebarGroupedProps,
+  type ChatWithSidebarMessageConfig,
+  type ChatWithSidebarModelConfig,
+  type ChatWithSidebarProps,
+  type ChatWithSidebarQuickActionsConfig,
+  type ChatWithSidebarSidebarConfig,
+  type ChatWithSidebarTabsConfig,
+  type ChatWithSidebarVoiceConfig,
+} from "./chat-with-sidebar.js";