@gram-ai/elements 1.34.0 → 1.36.0

package/src/components/ui/time-range-picker.stories.tsx

@@ -36,171 +36,214 @@ const meta: Meta<typeof TimeRangePicker> = {
 export default meta;
 type Story = StoryObj<typeof TimeRangePicker>;
 
+function DefaultStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("7d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to, label) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+        console.log("Custom range:", { from, to, label });
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("7d");
+      }}
+    />
+  );
+}
+
 /**
  * Default time range picker with preset badges and calendar.
  * Supports natural language input with AI parsing.
  */
 export const Default: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("7d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-
-    return (
-      <TimeRangePicker
-        preset={customRange ? null : preset}
-        customRange={customRange}
-        onPresetChange={(p) => {
-          setPreset(p);
-          setCustomRange(null);
-        }}
-        onCustomRangeChange={(from, to, label) => {
-          setCustomRange({ from, to });
-          setPreset(null);
-          console.log("Custom range:", { from, to, label });
-        }}
-        onClearCustomRange={() => {
-          setCustomRange(null);
-          setPreset("7d");
-        }}
-      />
-    );
-  },
+  render: () => <DefaultStory />,
 };
 
+function WithTimezoneStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("30d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("30d");
+      }}
+      timezone="UTC-08:00"
+    />
+  );
+}
+
 /**
  * Time range picker with timezone indicator.
  */
 export const WithTimezone: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("30d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  render: () => <WithTimezoneStory />,
+};
+
+function WithLiveModeStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("15m");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [isLive, setIsLive] = useState(true);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("15m");
+      }}
+      showLive
+      isLive={isLive}
+      onLiveChange={setIsLive}
+    />
+  );
+}
 
-    return (
+/**
+ * With LIVE mode toggle enabled.
+ */
+export const WithLiveMode: Story = {
+  render: () => <WithLiveModeStory />,
+};
+
+/**
+ * Disabled state.
+ */
+export const Disabled: Story = {
+  args: {
+    preset: "7d",
+    disabled: true,
+  },
+};
+
+function DatadogStyleStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("7d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [customLabel, setCustomLabel] = useState<string | null>(null);
+  const [isLive, setIsLive] = useState(false);
+
+  return (
+    <div className="space-y-4">
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
+        customRangeLabel={customLabel}
         onPresetChange={(p) => {
           setPreset(p);
           setCustomRange(null);
+          setCustomLabel(null);
         }}
-        onCustomRangeChange={(from, to) => {
+        onCustomRangeChange={(from, to, label) => {
           setCustomRange({ from, to });
           setPreset(null);
+          setCustomLabel(label || null);
         }}
         onClearCustomRange={() => {
           setCustomRange(null);
-          setPreset("30d");
+          setPreset("7d");
+          setCustomLabel(null);
         }}
+        showLive
+        isLive={isLive}
+        onLiveChange={setIsLive}
         timezone="UTC-08:00"
       />
-    );
-  },
-};
+      <div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
+        <strong>Current state:</strong>
+        <pre className="mt-1 overflow-auto">
+          {JSON.stringify(
+            {
+              preset,
+              customRange: customRange
+                ? {
+                    from: customRange.from.toISOString(),
+                    to: customRange.to.toISOString(),
+                  }
+                : null,
+              customLabel,
+              isLive,
+            },
+            null,
+            2,
+          )}
+        </pre>
+      </div>
+    </div>
+  );
+}
 
 /**
- * With LIVE mode toggle enabled.
+ * Full Datadog-style configuration with all features.
+ * Type natural language like "3 days ago", "last Wednesday", "past 2 weeks".
  */
-export const WithLiveMode: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("15m");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [isLive, setIsLive] = useState(true);
+export const DatadogStyle: Story = {
+  render: () => <DatadogStyleStory />,
+};
 
-    return (
+function NaturalLanguageParsingStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("30d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [customLabel, setCustomLabel] = useState<string | null>(null);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Try typing: "yesterday", "3 days ago", "last Wednesday", "January"
+      </p>
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
+        customRangeLabel={customLabel}
         onPresetChange={(p) => {
           setPreset(p);
           setCustomRange(null);
+          setCustomLabel(null);
         }}
-        onCustomRangeChange={(from, to) => {
+        onCustomRangeChange={(from, to, label) => {
           setCustomRange({ from, to });
           setPreset(null);
+          setCustomLabel(label || null);
+          console.log("AI parsed:", { from, to, label });
         }}
         onClearCustomRange={() => {
           setCustomRange(null);
-          setPreset("15m");
+          setPreset("30d");
+          setCustomLabel(null);
         }}
-        showLive
-        isLive={isLive}
-        onLiveChange={setIsLive}
       />
-    );
-  },
-};
-
-/**
- * Disabled state.
- */
-export const Disabled: Story = {
-  args: {
-    preset: "7d",
-    disabled: true,
-  },
-};
-
-/**
- * Full Datadog-style configuration with all features.
- * Type natural language like "3 days ago", "last Wednesday", "past 2 weeks".
- */
-export const DatadogStyle: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("7d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [customLabel, setCustomLabel] = useState<string | null>(null);
-    const [isLive, setIsLive] = useState(false);
-
-    return (
-      <div className="space-y-4">
-        <TimeRangePicker
-          preset={customRange ? null : preset}
-          customRange={customRange}
-          customRangeLabel={customLabel}
-          onPresetChange={(p) => {
-            setPreset(p);
-            setCustomRange(null);
-            setCustomLabel(null);
-          }}
-          onCustomRangeChange={(from, to, label) => {
-            setCustomRange({ from, to });
-            setPreset(null);
-            setCustomLabel(label || null);
-          }}
-          onClearCustomRange={() => {
-            setCustomRange(null);
-            setPreset("7d");
-            setCustomLabel(null);
-          }}
-          showLive
-          isLive={isLive}
-          onLiveChange={setIsLive}
-          timezone="UTC-08:00"
-        />
-        <div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
-          <strong>Current state:</strong>
-          <pre className="mt-1 overflow-auto">
-            {JSON.stringify(
-              {
-                preset,
-                customRange: customRange
-                  ? {
-                      from: customRange.from.toISOString(),
-                      to: customRange.to.toISOString(),
-                    }
-                  : null,
-                customLabel,
-                isLive,
-              },
-              null,
-              2,
-            )}
-          </pre>
-        </div>
-      </div>
-    );
-  },
-};
+    </div>
+  );
+}
 
 /**
  * Natural language parsing demo.
@@ -212,38 +255,5 @@ export const DatadogStyle: Story = {
  * - "January 2024"
  */
 export const NaturalLanguageParsing: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("30d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [customLabel, setCustomLabel] = useState<string | null>(null);
-
-    return (
-      <div className="space-y-4">
-        <p className="text-sm text-muted-foreground">
-          Try typing: "yesterday", "3 days ago", "last Wednesday", "January"
-        </p>
-        <TimeRangePicker
-          preset={customRange ? null : preset}
-          customRange={customRange}
-          customRangeLabel={customLabel}
-          onPresetChange={(p) => {
-            setPreset(p);
-            setCustomRange(null);
-            setCustomLabel(null);
-          }}
-          onCustomRangeChange={(from, to, label) => {
-            setCustomRange({ from, to });
-            setPreset(null);
-            setCustomLabel(label || null);
-            console.log("AI parsed:", { from, to, label });
-          }}
-          onClearCustomRange={() => {
-            setCustomRange(null);
-            setPreset("30d");
-            setCustomLabel(null);
-          }}
-        />
-      </div>
-    );
-  },
+  render: () => <NaturalLanguageParsingStory />,
 };

package/src/components/ui/time-range-picker.tsx

@@ -155,7 +155,7 @@ const BADGE_WIDTH = "min-w-10";
 
 export function getPresetRange(preset: DateRangePreset): TimeRange {
   const p = PRESETS.find((p) => p.value === preset);
-  return p ? p.getRange() : PRESETS[5].getRange(); // Default to 3d
+  return p ? p.getRange() : PRESETS[5]!.getRange(); // Default to 3d
 }
 
 function getPresetByValue(value: DateRangePreset): TimeRangePreset | undefined {
@@ -188,11 +188,15 @@ function parseAsLocalDate(isoString: string): Date {
   // Try to extract just the date part and create a local date
   const dateMatch = isoString.match(/^(\d{4})-(\d{2})-(\d{2})/);
   if (dateMatch) {
-    const [, year, month, day] = dateMatch;
+    const year = dateMatch[1]!;
+    const month = dateMatch[2]!;
+    const day = dateMatch[3]!;
     // Check if there's a time component
     const timeMatch = isoString.match(/T(\d{2}):(\d{2}):?(\d{2})?/);
     if (timeMatch) {
-      const [, hours, minutes, seconds = "0"] = timeMatch;
+      const hours = timeMatch[1]!;
+      const minutes = timeMatch[2]!;
+      const seconds = timeMatch[3] ?? "0";
       return new Date(
         parseInt(year),
         parseInt(month) - 1,
@@ -372,7 +376,7 @@ function TimeRangePicker({
   projectSlug,
   authHeaders,
   className,
-}: TimeRangePickerProps) {
+}: TimeRangePickerProps): React.JSX.Element {
   const [isOpen, setIsOpen] = React.useState(false);
   const [showCalendar, setShowCalendar] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
@@ -585,7 +589,9 @@ function TimeRangePicker({
             onClick={handleInputClick}
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
-            onKeyDown={handleInputKeyDown}
+            onKeyDown={(e) => {
+              void handleInputKeyDown(e);
+            }}
             placeholder="e.g., 3 days ago, last week..."
             disabled={disabled}
             className={cn(

package/src/components/ui/tool-ui.tsx

@@ -159,7 +159,11 @@ function isStructuredContent(
  * Helper Components
  * -------------------------------------------------------------------------- */
 
-function StatusIndicator({ status }: { status: ToolStatus }) {
+function StatusIndicator({
+  status,
+}: {
+  status: ToolStatus;
+}): React.JSX.Element {
   return (
     <div className={cn(statusVariants({ status }))}>
       {status === "pending" && null}
@@ -173,7 +177,7 @@ function StatusIndicator({ status }: { status: ToolStatus }) {
   );
 }
 
-function CopyButton({ content }: { content: string }) {
+function CopyButton({ content }: { content: string }): React.JSX.Element {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async (e: React.MouseEvent) => {
@@ -185,7 +189,9 @@ function CopyButton({ content }: { content: string }) {
 
   return (
     <button
-      onClick={handleCopy}
+      onClick={(e) => {
+        void handleCopy(e);
+      }}
       className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
       aria-label="Copy to clipboard"
     >
@@ -226,7 +232,7 @@ function SyntaxHighlightedCode({
   text: string;
   language?: BundledLanguage;
   className?: string;
-}) {
+}): React.JSX.Element {
   const [highlightedCode, setHighlightedCode] = useState<string | null>(null);
   const [expanded, setExpanded] = useState(false);
 
@@ -241,7 +247,7 @@ function SyntaxHighlightedCode({
     setHighlightedCode(null);
     if (!language || !canHighlight) return;
     let cancelled = false;
-    codeToHtml(displayText, {
+    void codeToHtml(displayText, {
       lang: language,
       theme: "github-dark-default",
       rootStyle: "background-color: transparent;",
@@ -370,7 +376,7 @@ function ToolUISection({
   defaultExpanded = false,
   highlightSyntax = true,
   language = "json",
-}: ToolUISectionProps) {
+}: ToolUISectionProps): React.JSX.Element {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   // For structured content, we don't stringify it
@@ -434,7 +440,7 @@ function ToolUI({
   onApproveOnce,
   onApproveForSession,
   onDeny,
-}: ToolUIProps) {
+}: ToolUIProps): React.JSX.Element {
   // Use annotation title if available, otherwise fall back to name
   const displayName = annotations?.title || name;
   const isApprovalPending =
@@ -455,6 +461,7 @@ function ToolUI({
     if (!isApprovalPending && isExpanded && !defaultExpanded) {
       setIsExpanded(false);
     }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- only react to approval transition; defaultExpanded/isExpanded are intentionally not deps
   }, [isApprovalPending]);
 
   // Handle approve based on selected mode
@@ -497,7 +504,9 @@ function ToolUI({
 
       {/* Tool row */}
       <button
-        onClick={() => hasContent && setIsExpanded(!isExpanded)}
+        onClick={() => {
+          if (hasContent) setIsExpanded(!isExpanded);
+        }}
         disabled={!hasContent}
         className={cn(
           "flex w-full items-center gap-2 px-4 py-3 text-left",
@@ -702,6 +711,8 @@ interface ToolUIGroupProps {
   status?: "running" | "complete";
   /** Whether the group starts expanded */
   defaultExpanded?: boolean;
+  /** Render without the group header, showing children directly. */
+  headerless?: boolean;
   /** Child tool UI components */
   children: React.ReactNode;
   /** Additional class names */
@@ -713,11 +724,23 @@ function ToolUIGroup({
   icon,
   status = "complete",
   defaultExpanded = false,
+  headerless = false,
   children,
   className,
-}: ToolUIGroupProps) {
+}: ToolUIGroupProps): React.JSX.Element {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
+  // A headerless group shows its children unconditionally; when it gains a
+  // header mid-stream, start expanded — collapsing would hide content the
+  // user was already looking at.
+  const [prevHeaderless, setPrevHeaderless] = useState(headerless);
+  if (prevHeaderless !== headerless) {
+    setPrevHeaderless(headerless);
+    if (prevHeaderless) setIsExpanded(true);
+  }
+
+  const showChildren = headerless || isExpanded;
+
   return (
     <div
       data-slot="tool-ui-group"
@@ -727,40 +750,45 @@ function ToolUIGroup({
       )}
     >
       {/* Group header */}
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-accent/50"
-      >
-        {icon || (
-          <StatusIndicator
-            status={status === "running" ? "running" : "complete"}
-          />
-        )}
-        <span
-          className={cn(
-            "flex-1 text-sm font-medium",
-            status === "running" && "shimmer",
-          )}
+      {!headerless && (
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          aria-expanded={isExpanded}
+          className="flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-accent/50"
         >
-          {title}
-        </span>
-        <ChevronDownIcon
-          className={cn(
-            "size-4 text-muted-foreground transition-transform duration-200",
-            isExpanded && "rotate-180",
+          {icon || (
+            <StatusIndicator
+              status={status === "running" ? "running" : "complete"}
+            />
           )}
-        />
-      </button>
-
-      {/* Expandable children */}
-      {isExpanded && (
-        <div
-          data-slot="tool-ui-group-content"
-          className="border-t border-border"
-        >
-          {children}
-        </div>
+          <span
+            className={cn(
+              "flex-1 text-sm font-medium",
+              status === "running" && "shimmer",
+            )}
+          >
+            {title}
+          </span>
+          <ChevronDownIcon
+            className={cn(
+              "size-4 text-muted-foreground transition-transform duration-200",
+              isExpanded && "rotate-180",
+            )}
+          />
+        </button>
       )}
+
+      {/* Collapsed children are hidden, not unmounted — unmounting would
+          reset their state (expansion, async syntax highlighting). */}
+      <div
+        data-slot="tool-ui-group-content"
+        className={cn(
+          !headerless && "border-t border-border",
+          !showChildren && "hidden",
+        )}
+      >
+        {children}
+      </div>
     </div>
   );
 }

package/src/components/ui/tooltip.tsx

@@ -9,7 +9,7 @@ import { usePortalContainer } from "@/hooks/usePortalContainer";
 function TooltipProvider({
   delayDuration = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element {
   return (
     <TooltipPrimitive.Provider
       data-slot="tooltip-provider"
@@ -21,7 +21,7 @@ function TooltipProvider({
 
 function Tooltip({
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -31,7 +31,7 @@ function Tooltip({
 
 function TooltipTrigger({
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
@@ -43,7 +43,7 @@ function TooltipContent({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
   container?: HTMLElement | null;
-}) {
+}): React.JSX.Element {
   const portalContainer = usePortalContainer();
   return (
     <TooltipPrimitive.Portal container={container ?? portalContainer}>

package/src/contexts/ChatIdContext.tsx

@@ -12,7 +12,7 @@ export const ChatIdContext = createContext<ChatIdContextValue | null>(null);
  *
  * @returns The current chat ID, or null if not yet initialized
  */
-export const useChatId = () => {
+export const useChatId = (): string | null => {
   const context = useContext(ChatIdContext);
   if (!context) {
     throw new Error("useChatId must be used within ElementsProvider");

package/src/contexts/ConnectionStatusContext.tsx

@@ -36,7 +36,7 @@ interface ConnectionStatusProviderProps {
 
 export const ConnectionStatusProvider = ({
   children,
-}: ConnectionStatusProviderProps) => {
+}: ConnectionStatusProviderProps): React.JSX.Element => {
   const [state, setState] = useState<ConnectionState>("connected");
   const [retryCount, setRetryCount] = useState(0);
   const [isOnline, setIsOnline] = useState(
@@ -138,7 +138,7 @@ export const ConnectionStatusProvider = ({
   );
 };
 
-export const useConnectionStatus = () => {
+export const useConnectionStatus = (): ConnectionStatusContextValue => {
   const context = useContext(ConnectionStatusContext);
   if (!context) {
     throw new Error(
@@ -153,6 +153,7 @@ export const useConnectionStatus = () => {
  * Returns null if not within a ConnectionStatusProvider (for backwards compatibility).
  */
 
-export const useConnectionStatusOptional = () => {
-  return useContext(ConnectionStatusContext);
-};
+export const useConnectionStatusOptional =
+  (): ConnectionStatusContextValue | null => {
+    return useContext(ConnectionStatusContext);
+  };