@slipstream-ui/ai 0.5.0 → 0.6.0

package/dist/index.d.mts

@@ -45,6 +45,10 @@ type MessageProps = {
     userLabel?: string;
     /** Display name for the assistant role; override for localization. */
     assistantLabel?: string;
+    /** Formats the message timestamp; defaults to the runtime's toLocaleTimeString(). */
+    formatTime?: (date: Date) => string;
+    /** BCP-47 locale used by the default timestamp formatter. */
+    locale?: string;
     /**
      * Custom content renderer, e.g. for markdown/code blocks.
      * When provided, it fully replaces the default plain-text rendering.
@@ -77,7 +81,7 @@ type MessageProps = {
  * (and timestamp re-formatting) for every other message in the transcript.
  * Callback props must be referentially stable for memo to help.
  */
-declare const MemoizedMessage: React.MemoExoticComponent<React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>>;
+declare const MemoizedMessage: React.NamedExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
 
 /** User sentiment for an AI response. */
 type FeedbackRating = 'up' | 'down';
@@ -357,7 +361,7 @@ type PromptInputProps = {
 };
 declare const PromptInputRoot: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLTextAreaElement>>;
 /** Auto-resizing textarea bound to the prompt state. Accepts standard textarea props. */
-declare const PromptInputTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const PromptInputTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & React.RefAttributes<HTMLTextAreaElement>>;
 /** Status-aware submit control: send / stop / error icons chosen automatically. */
 declare const PromptInputSubmit: React.ForwardRefExoticComponent<{
     className?: string;
@@ -409,6 +413,10 @@ type ReasoningProps = {
     duration?: number | string;
     /** Marks reasoning as still arriving: animated header state. */
     isStreaming?: boolean;
+    /** Formats step timestamps; defaults to the runtime's toLocaleTimeString(). */
+    formatTime?: (date: Date) => string;
+    /** BCP-47 locale used by the default timestamp formatter. */
+    locale?: string;
     /** Localized header, count and step labels. */
     labels?: {
         title?: string;
@@ -527,13 +535,19 @@ type CommandPaletteProps = {
     /** Shown while async commands load. */
     loadingText?: string;
     placeholder?: string;
+    /** Accessible label for the combobox. Default 'Command palette'. */
+    dialogLabel?: string;
+    /** Accessible label for the listbox. Default 'Commands'. */
+    listLabel?: string;
+    /** Shown when no command matches. Default 'No matching commands.'. */
+    emptyText?: string;
 };
 /**
  * Cmd+K command palette: combobox + listbox with aria-activedescendant
  * keyboard navigation, lexical filtering over label/keywords, and
  * Escape-to-close. No focus leaves the input while navigating.
  */
-declare function CommandPalette({ open, onOpenChange, commands, onSelect, loadCommands, debounceMs, renderCommand, loadingText, placeholder, }: CommandPaletteProps): React.JSX.Element | null;
+declare function CommandPalette({ open, onOpenChange, commands, onSelect, loadCommands, debounceMs, renderCommand, loadingText, placeholder, dialogLabel, listLabel, emptyText, }: CommandPaletteProps): React.JSX.Element | null;
 
 /**
  * Structural types mirroring the parts of the Vercel AI SDK's chat state the
@@ -608,4 +622,5 @@ type UseSlipstreamStreamResult = {
  */
 declare function useSlipstreamStream({ status, error, onRetry, messages, }: UseSlipstreamStreamOptions): UseSlipstreamStreamResult;
 
-export { type AiSdkMessage, type AiSdkStatus, type AiSdkToolInvocation, Attachment, type AttachmentItem, AttachmentList, type AttachmentListProps, type AttachmentProps, Branch, type BranchProps, ChainThought, type ChainThoughtProps, type ChainThoughtStep, CodeBlock, type CodeBlockProps, type Command, CommandPalette, type CommandPaletteProps, Confirmation, type ConfirmationProps, type ConfirmationStatus, Conversation, type ConversationProps, type FeedbackRating, InlineCitation, type InlineCitationProps, MemoizedMessage as Message, MessageActions, type MessageActionsProps, type Message as MessageData, type MessageProps, type MessageRole, PromptInputRoot as PromptInput, PromptInputActionAddAttachments, PromptInputActionDictate, PromptInputBody, PromptInputButton, type PromptInputButtonProps, PromptInputFooter, PromptInputHeader, type PromptInputProps, PromptInputSubmit, PromptInputTextarea, PromptInputTools, Reasoning, type ReasoningProps, type ReasoningStep, Response, type ResponseProps, Source, type SourceItem, type SourceProps, Sources, type SourcesProps, StreamingIndicator, type StreamingIndicatorProps, type Suggestion, Suggestions, type SuggestionsProps, ToolCall, type ToolCall$1 as ToolCallData, type ToolCallProps, type UseAttachmentsOptions, type UseAttachmentsResult, type UseSlipstreamMessagesOptions, type UseSlipstreamMessagesResult, type UseSlipstreamStreamOptions, type UseSlipstreamStreamResult, closeIncompleteMarkdown, toSlipstreamMessage, toSlipstreamMessages, toSlipstreamToolCall, toSlipstreamToolCalls, usePromptInputAttachments, useSlipstreamMessages, useSlipstreamStream, useSpeechRecognition };
+export { Attachment, AttachmentList, Branch, ChainThought, CodeBlock, CommandPalette, Confirmation, Conversation, InlineCitation, MemoizedMessage as Message, MessageActions, PromptInputRoot as PromptInput, PromptInputActionAddAttachments, PromptInputActionDictate, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputHeader, PromptInputSubmit, PromptInputTextarea, PromptInputTools, Reasoning, Response, Source, Sources, StreamingIndicator, Suggestions, ToolCall, closeIncompleteMarkdown, toSlipstreamMessage, toSlipstreamMessages, toSlipstreamToolCall, toSlipstreamToolCalls, usePromptInputAttachments, useSlipstreamMessages, useSlipstreamStream, useSpeechRecognition };
+export type { AiSdkMessage, AiSdkStatus, AiSdkToolInvocation, AttachmentItem, AttachmentListProps, AttachmentProps, BranchProps, ChainThoughtProps, ChainThoughtStep, CodeBlockProps, Command, CommandPaletteProps, ConfirmationProps, ConfirmationStatus, ConversationProps, FeedbackRating, InlineCitationProps, MessageActionsProps, Message as MessageData, MessageProps, MessageRole, PromptInputButtonProps, PromptInputProps, ReasoningProps, ReasoningStep, ResponseProps, SourceItem, SourceProps, SourcesProps, StreamingIndicatorProps, Suggestion, SuggestionsProps, ToolCall$1 as ToolCallData, ToolCallProps, UseAttachmentsOptions, UseAttachmentsResult, UseSlipstreamMessagesOptions, UseSlipstreamMessagesResult, UseSlipstreamStreamOptions, UseSlipstreamStreamResult };

package/dist/index.d.ts

@@ -45,6 +45,10 @@ type MessageProps = {
     userLabel?: string;
     /** Display name for the assistant role; override for localization. */
     assistantLabel?: string;
+    /** Formats the message timestamp; defaults to the runtime's toLocaleTimeString(). */
+    formatTime?: (date: Date) => string;
+    /** BCP-47 locale used by the default timestamp formatter. */
+    locale?: string;
     /**
      * Custom content renderer, e.g. for markdown/code blocks.
      * When provided, it fully replaces the default plain-text rendering.
@@ -77,7 +81,7 @@ type MessageProps = {
  * (and timestamp re-formatting) for every other message in the transcript.
  * Callback props must be referentially stable for memo to help.
  */
-declare const MemoizedMessage: React.MemoExoticComponent<React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>>;
+declare const MemoizedMessage: React.NamedExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
 
 /** User sentiment for an AI response. */
 type FeedbackRating = 'up' | 'down';
@@ -357,7 +361,7 @@ type PromptInputProps = {
 };
 declare const PromptInputRoot: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLTextAreaElement>>;
 /** Auto-resizing textarea bound to the prompt state. Accepts standard textarea props. */
-declare const PromptInputTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const PromptInputTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & React.RefAttributes<HTMLTextAreaElement>>;
 /** Status-aware submit control: send / stop / error icons chosen automatically. */
 declare const PromptInputSubmit: React.ForwardRefExoticComponent<{
     className?: string;
@@ -409,6 +413,10 @@ type ReasoningProps = {
     duration?: number | string;
     /** Marks reasoning as still arriving: animated header state. */
     isStreaming?: boolean;
+    /** Formats step timestamps; defaults to the runtime's toLocaleTimeString(). */
+    formatTime?: (date: Date) => string;
+    /** BCP-47 locale used by the default timestamp formatter. */
+    locale?: string;
     /** Localized header, count and step labels. */
     labels?: {
         title?: string;
@@ -527,13 +535,19 @@ type CommandPaletteProps = {
     /** Shown while async commands load. */
     loadingText?: string;
     placeholder?: string;
+    /** Accessible label for the combobox. Default 'Command palette'. */
+    dialogLabel?: string;
+    /** Accessible label for the listbox. Default 'Commands'. */
+    listLabel?: string;
+    /** Shown when no command matches. Default 'No matching commands.'. */
+    emptyText?: string;
 };
 /**
  * Cmd+K command palette: combobox + listbox with aria-activedescendant
  * keyboard navigation, lexical filtering over label/keywords, and
  * Escape-to-close. No focus leaves the input while navigating.
  */
-declare function CommandPalette({ open, onOpenChange, commands, onSelect, loadCommands, debounceMs, renderCommand, loadingText, placeholder, }: CommandPaletteProps): React.JSX.Element | null;
+declare function CommandPalette({ open, onOpenChange, commands, onSelect, loadCommands, debounceMs, renderCommand, loadingText, placeholder, dialogLabel, listLabel, emptyText, }: CommandPaletteProps): React.JSX.Element | null;
 
 /**
  * Structural types mirroring the parts of the Vercel AI SDK's chat state the
@@ -608,4 +622,5 @@ type UseSlipstreamStreamResult = {
  */
 declare function useSlipstreamStream({ status, error, onRetry, messages, }: UseSlipstreamStreamOptions): UseSlipstreamStreamResult;
 
-export { type AiSdkMessage, type AiSdkStatus, type AiSdkToolInvocation, Attachment, type AttachmentItem, AttachmentList, type AttachmentListProps, type AttachmentProps, Branch, type BranchProps, ChainThought, type ChainThoughtProps, type ChainThoughtStep, CodeBlock, type CodeBlockProps, type Command, CommandPalette, type CommandPaletteProps, Confirmation, type ConfirmationProps, type ConfirmationStatus, Conversation, type ConversationProps, type FeedbackRating, InlineCitation, type InlineCitationProps, MemoizedMessage as Message, MessageActions, type MessageActionsProps, type Message as MessageData, type MessageProps, type MessageRole, PromptInputRoot as PromptInput, PromptInputActionAddAttachments, PromptInputActionDictate, PromptInputBody, PromptInputButton, type PromptInputButtonProps, PromptInputFooter, PromptInputHeader, type PromptInputProps, PromptInputSubmit, PromptInputTextarea, PromptInputTools, Reasoning, type ReasoningProps, type ReasoningStep, Response, type ResponseProps, Source, type SourceItem, type SourceProps, Sources, type SourcesProps, StreamingIndicator, type StreamingIndicatorProps, type Suggestion, Suggestions, type SuggestionsProps, ToolCall, type ToolCall$1 as ToolCallData, type ToolCallProps, type UseAttachmentsOptions, type UseAttachmentsResult, type UseSlipstreamMessagesOptions, type UseSlipstreamMessagesResult, type UseSlipstreamStreamOptions, type UseSlipstreamStreamResult, closeIncompleteMarkdown, toSlipstreamMessage, toSlipstreamMessages, toSlipstreamToolCall, toSlipstreamToolCalls, usePromptInputAttachments, useSlipstreamMessages, useSlipstreamStream, useSpeechRecognition };
+export { Attachment, AttachmentList, Branch, ChainThought, CodeBlock, CommandPalette, Confirmation, Conversation, InlineCitation, MemoizedMessage as Message, MessageActions, PromptInputRoot as PromptInput, PromptInputActionAddAttachments, PromptInputActionDictate, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputHeader, PromptInputSubmit, PromptInputTextarea, PromptInputTools, Reasoning, Response, Source, Sources, StreamingIndicator, Suggestions, ToolCall, closeIncompleteMarkdown, toSlipstreamMessage, toSlipstreamMessages, toSlipstreamToolCall, toSlipstreamToolCalls, usePromptInputAttachments, useSlipstreamMessages, useSlipstreamStream, useSpeechRecognition };
+export type { AiSdkMessage, AiSdkStatus, AiSdkToolInvocation, AttachmentItem, AttachmentListProps, AttachmentProps, BranchProps, ChainThoughtProps, ChainThoughtStep, CodeBlockProps, Command, CommandPaletteProps, ConfirmationProps, ConfirmationStatus, ConversationProps, FeedbackRating, InlineCitationProps, MessageActionsProps, Message as MessageData, MessageProps, MessageRole, PromptInputButtonProps, PromptInputProps, ReasoningProps, ReasoningStep, ResponseProps, SourceItem, SourceProps, SourcesProps, StreamingIndicatorProps, Suggestion, SuggestionsProps, ToolCall$1 as ToolCallData, ToolCallProps, UseAttachmentsOptions, UseAttachmentsResult, UseSlipstreamMessagesOptions, UseSlipstreamMessagesResult, UseSlipstreamStreamOptions, UseSlipstreamStreamResult };

package/dist/index.js

@@ -85,6 +85,8 @@ var Message = React.forwardRef(
     avatarFallback,
     userLabel = "You",
     assistantLabel = "Assistant",
+    formatTime,
+    locale,
     renderContent,
     isStreaming = false,
     error,
@@ -138,7 +140,7 @@ var Message = React.forwardRef(
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mb-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium", children: displayLabel }),
-              message.timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-muted-foreground", children: new Date(message.timestamp).toLocaleTimeString() })
+              message.timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-muted-foreground", children: formatTime ? formatTime(new Date(message.timestamp)) : new Date(message.timestamp).toLocaleTimeString(locale) })
             ] }),
             error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "alert", className: "text-sm", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-destructive mb-2", children: error }),
@@ -1362,7 +1364,7 @@ var React12 = __toESM(require("react"));
 var import_core16 = require("@slipstream-ui/core");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var Reasoning = React12.forwardRef(
-  ({ steps, className, collapsible = true, defaultExpanded = false, duration, isStreaming = false, labels, ...props }, ref) => {
+  ({ steps, className, collapsible = true, defaultExpanded = false, duration, isStreaming = false, labels, formatTime, locale, ...props }, ref) => {
     const [isExpanded, setIsExpanded] = React12.useState(defaultExpanded);
     const contentId = React12.useId();
     if (steps.length === 0) {
@@ -1401,7 +1403,7 @@ var Reasoning = React12.forwardRef(
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-sm flex-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "font-medium text-foreground mb-1", children: labels?.step?.(index + 1) ?? `Step ${index + 1}` }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-muted-foreground", children: step.content }),
-          step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-xs text-muted-foreground mt-1", children: new Date(step.timestamp).toLocaleTimeString() })
+          step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-xs text-muted-foreground mt-1", children: formatTime ? formatTime(new Date(step.timestamp)) : new Date(step.timestamp).toLocaleTimeString(locale) })
         ] })
       ] }, step.id)) })
     ] });
@@ -1647,7 +1649,10 @@ function CommandPalette({
   debounceMs = 200,
   renderCommand,
   loadingText = "Searching\u2026",
-  placeholder = "Type a command."
+  placeholder = "Type a command.",
+  dialogLabel = "Command palette",
+  listLabel = "Commands",
+  emptyText = "No matching commands."
 }) {
   const [query, setQuery] = React19.useState("");
   const [activeIndex, setActiveIndex] = React19.useState(0);
@@ -1734,7 +1739,7 @@ function CommandPalette({
             "aria-controls": listboxId,
             "aria-activedescendant": filtered.length > 0 ? optionId(activeIndex) : void 0,
             "aria-autocomplete": "list",
-            "aria-label": "Command palette",
+            "aria-label": dialogLabel,
             placeholder,
             value: query,
             onChange: (event) => {
@@ -1750,12 +1755,12 @@ function CommandPalette({
           {
             id: listboxId,
             role: "listbox",
-            "aria-label": "Commands",
+            "aria-label": listLabel,
             "aria-busy": loading || void 0,
             className: "max-h-72 overflow-y-auto py-1",
             children: [
               loading && filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { role: "presentation", className: "px-4 py-3 text-sm text-muted-foreground", children: loadingText }),
-              !loading && filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { role: "presentation", className: "px-4 py-3 text-sm text-muted-foreground", children: "No matching commands." }),
+              !loading && filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { role: "presentation", className: "px-4 py-3 text-sm text-muted-foreground", children: emptyText }),
               filtered.map((command, index) => {
                 const showSection = command.section && command.section !== lastSection;
                 lastSection = command.section ?? lastSection;