@sybilion/uilib 1.0.20

package/src/components/ui/ChartAreaInteractive/overlays/useChartYRange.ts

@@ -0,0 +1,209 @@
+import { useMemo, useRef } from 'react';
+
+import { BaseChartWrapperProps } from '#uilib/components/ui/Chart/components/BaseChartWrapper';
+import { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+
+interface UseChartYRangeOptions {
+  baseChartProps: BaseChartWrapperProps;
+  chartData?: ChartDataPoint[];
+  disableRescaleWhenQuantileChanges?: boolean;
+  excludeQuantileBands?: boolean;
+  selectedForecastId?: number;
+}
+
+/**
+ * Hook to calculate yMin and yMax from chart data
+ * Optionally includes quantile values from forecast data
+ */
+export function useChartYRange({
+  baseChartProps,
+  chartData,
+  disableRescaleWhenQuantileChanges,
+  excludeQuantileBands = false,
+  selectedForecastId,
+}: UseChartYRangeOptions) {
+  // Store initial Y-range when disableRescaleWhenQuantileChanges is true
+  const stableYRangeRef = useRef<{
+    yMin: number;
+    yMax: number;
+    forecastId?: number;
+  } | null>(null);
+  const prevBaseChartDataRef = useRef(baseChartProps.chartData);
+
+  // Helper function to calculate Y-range from data
+  const calculateYRange = (
+    dataToUse: ChartDataPoint[],
+    excludeQuantileBands: boolean,
+    forecastId?: number,
+  ) => {
+    const allValues: number[] = [];
+
+    dataToUse.forEach(point => {
+      Object.entries(point).forEach(([key, value]) => {
+        if (key === 'date') return;
+
+        // When selectedForecastId is provided, scale only from selected forecast + its quantile band
+        // (exclude historical, other forecasts, and other forecasts' quantile values)
+        if (forecastId !== undefined) {
+          if (key === 'historical') return;
+          if (key.startsWith('forecast_') && key !== `forecast_${forecastId}`)
+            return;
+          // Exclude q{quantile}_{otherAnalysisId} - only include selected forecast's quantiles
+          if (key.startsWith('q') && !key.endsWith(`_${forecastId}`)) return;
+        }
+
+        // When excludeQuantileBands is true, exclude:
+        // 1. Quantile band arrays ([number, number])
+        // 2. Individual quantile values (q{quantile}_{analysisId} properties)
+        // Only include historical and forecast line values
+        if (excludeQuantileBands) {
+          // Skip quantile band arrays
+          if (
+            Array.isArray(value) &&
+            value.length === 2 &&
+            typeof value[0] === 'number' &&
+            typeof value[1] === 'number'
+          ) {
+            return;
+          }
+
+          // Skip individual quantile values (properties starting with 'q' followed by number/underscore)
+          // Format: q{quantile}_{analysisId} (e.g., q0.05_123, q0.95_123)
+          if (key.startsWith('q') && typeof value === 'number') {
+            return;
+          }
+
+          // Include only historical and forecast line values
+          if (typeof value === 'number') {
+            allValues.push(value);
+          }
+          return;
+        }
+
+        // When not excluding, include both numbers and quantile band arrays
+        if (typeof value === 'number') {
+          allValues.push(value);
+        } else if (
+          Array.isArray(value) &&
+          value.length === 2 &&
+          typeof value[0] === 'number' &&
+          typeof value[1] === 'number'
+        ) {
+          allValues.push(value[0], value[1]);
+        }
+      });
+    });
+
+    if (allValues.length === 0) {
+      return { yMin: 0, yMax: 100 };
+    }
+
+    const min = Math.min(...allValues);
+    const max = Math.max(...allValues);
+    const diff = max - min;
+
+    return {
+      yMin: min - diff * 0.1,
+      yMax: max + diff * 0.1,
+    };
+  };
+
+  // When disableRescaleWhenQuantileChanges is true, calculate initial stable range
+  // If chartData (transformedChartData) is provided, use it WITH quantile bands for initial calculation
+  // Then keep it stable when dragging quantiles
+  const stableRange = useMemo(() => {
+    if (
+      baseChartProps.yMin !== undefined &&
+      baseChartProps.yMax !== undefined
+    ) {
+      return {
+        yMin: baseChartProps.yMin,
+        yMax: baseChartProps.yMax,
+      };
+    }
+
+    if (!disableRescaleWhenQuantileChanges) {
+      return null;
+    }
+
+    // Reset stable range when dataset or selected forecast changes
+    if (prevBaseChartDataRef.current !== baseChartProps.chartData) {
+      prevBaseChartDataRef.current = baseChartProps.chartData;
+      stableYRangeRef.current = null;
+    }
+    if (stableYRangeRef.current?.forecastId !== selectedForecastId) {
+      stableYRangeRef.current = null;
+    }
+
+    // If chartData (transformedChartData) is provided, use it WITH quantile bands for initial calculation
+    // This ensures IntervalsOverlay includes quantile bands in Y-scale
+    const dataToUse = chartData ?? baseChartProps.chartData;
+    const shouldExcludeQuantileBands = chartData
+      ? false // Include quantile bands when using transformedChartData
+      : excludeQuantileBands || true; // Exclude when using baseChartProps.chartData
+
+    const result = calculateYRange(
+      dataToUse,
+      shouldExcludeQuantileBands,
+      selectedForecastId,
+    );
+
+    // Store in ref on first calculation or after dataset/forecast change
+    if (!stableYRangeRef.current) {
+      stableYRangeRef.current = {
+        ...result,
+        forecastId: selectedForecastId,
+      };
+    }
+
+    return result;
+  }, [
+    baseChartProps.yMin,
+    baseChartProps.yMax,
+    baseChartProps.chartData,
+    chartData,
+    disableRescaleWhenQuantileChanges,
+    excludeQuantileBands,
+    selectedForecastId,
+  ]);
+
+  // When disableRescaleWhenQuantileChanges is false, calculate from transformed data
+  const dynamicRange = useMemo(() => {
+    if (
+      baseChartProps.yMin !== undefined &&
+      baseChartProps.yMax !== undefined
+    ) {
+      return {
+        yMin: baseChartProps.yMin,
+        yMax: baseChartProps.yMax,
+      };
+    }
+
+    if (disableRescaleWhenQuantileChanges) {
+      return null;
+    }
+
+    const dataToUse = chartData ?? baseChartProps.chartData;
+    return calculateYRange(dataToUse, excludeQuantileBands, selectedForecastId);
+  }, [
+    baseChartProps.yMin,
+    baseChartProps.yMax,
+    baseChartProps.chartData,
+    chartData,
+    disableRescaleWhenQuantileChanges,
+    excludeQuantileBands,
+    selectedForecastId,
+  ]);
+
+  // Return appropriate range
+  if (disableRescaleWhenQuantileChanges) {
+    const cached = stableYRangeRef.current;
+    const cachedMatchesForecast =
+      cached && cached.forecastId === selectedForecastId;
+    return cachedMatchesForecast
+      ? { yMin: cached!.yMin, yMax: cached!.yMax }
+      : (stableRange ?? { yMin: 0, yMax: 100 });
+  }
+
+  return dynamicRange;
+}

package/src/components/ui/ChartAreaInteractive/overlays/useForecastColor.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+
+import { DEFAULT_QUANTILE_BAND_COLOR } from '#uilib/components/ui/Chart/components/QuantileBands';
+
+import { Analysis } from '../ChartAreaInteractive.types';
+import {
+  FORECAST_COLORS_MAP,
+  FORECAST_LINE_COLORS,
+  ForecastItemData,
+  getForecastQuantileBandColor,
+} from '../ChartLines';
+
+const DEFAULT_FORECAST_COLORS = {
+  lineColor: DEFAULT_QUANTILE_BAND_COLOR,
+  quantileBandColor: DEFAULT_QUANTILE_BAND_COLOR,
+};
+
+/**
+ * Hook to get the forecast color using the same logic as ChartLines
+ * Finds the forecast in forecastData array and returns its color or a color from forecastColors array
+ */
+export function useForecastColor(
+  selectedForecast: Analysis | undefined,
+  forecastData: ForecastItemData[],
+): { lineColor: string; quantileBandColor: string } {
+  return useMemo(() => {
+    if (!selectedForecast?.id || !forecastData) return DEFAULT_FORECAST_COLORS;
+
+    const forecastIndex = forecastData.findIndex(
+      item => item.id === selectedForecast.id,
+    );
+
+    if (forecastIndex === -1) return DEFAULT_FORECAST_COLORS;
+
+    const forecastItem = forecastData[forecastIndex];
+    const lineColor =
+      forecastItem.color ||
+      FORECAST_LINE_COLORS[forecastIndex % FORECAST_LINE_COLORS.length];
+
+    const quantileBandColor = forecastItem.color
+      ? FORECAST_COLORS_MAP[forecastItem.color]
+      : getForecastQuantileBandColor(forecastIndex);
+
+    return {
+      lineColor,
+      quantileBandColor,
+    };
+  }, [selectedForecast?.id, forecastData]);
+}

package/src/components/ui/ChartAreaInteractive/overlays/useQuantileBands.ts

@@ -0,0 +1,248 @@
+import { useMemo } from 'react';
+
+import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
+import { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ForecastData } from '#uilib/types/forecast-data';
+
+interface UseQuantileBandOptions {
+  color?: string;
+  chartData: ChartDataPoint[];
+  selectedForecastId?: number;
+  forecastData: { [key: string]: ForecastData };
+  bandKey: string;
+  getBandValues: (
+    date: string,
+    dateIndex: number,
+    allQuantiles: Record<string, number[]>,
+  ) => [number, number] | null;
+  getBandConfig: (
+    bandKey: string,
+    forecastColor?: string,
+  ) => QuantileBandConfig;
+}
+
+/**
+ * Hook to transform chart data and create quantile band configuration
+ */
+export function useQuantileBands({
+  color,
+  chartData,
+  selectedForecastId,
+  forecastData,
+  bandKey,
+  getBandValues,
+  getBandConfig,
+}: UseQuantileBandOptions) {
+  const transformedChartData = useMemo(() => {
+    if (
+      !selectedForecastId ||
+      !forecastData[selectedForecastId]?.allQuantiles
+    ) {
+      return chartData;
+    }
+
+    const forecastDataForSelected = forecastData[selectedForecastId];
+    const allQuantilesData = forecastDataForSelected.allQuantiles;
+    const clonedData = [...chartData];
+
+    // Get forecast dates to map quantile array indices correctly
+    const forecastDates = forecastDataForSelected.dates || [];
+    const forecastDatesSet = new Set(forecastDates);
+
+    // Find the last historical point for connection
+    const historicalPoints = clonedData.filter(
+      point => point.historical !== undefined,
+    );
+    const lastHistoricalPoint =
+      historicalPoints.length > 0
+        ? historicalPoints[historicalPoints.length - 1]
+        : null;
+    const lastHistoricalDate = lastHistoricalPoint?.date;
+    const lastHistoricalValue = lastHistoricalPoint?.historical;
+
+    // Get first forecast date
+    const firstForecastDate = forecastDates[0];
+    const firstForecastDateObj = firstForecastDate
+      ? new Date(firstForecastDate)
+      : null;
+    const lastHistoricalDateObj = lastHistoricalDate
+      ? new Date(lastHistoricalDate)
+      : null;
+
+    // Check if there's a gap between historical and forecast data (forecast starts after historical)
+    const hasGap =
+      lastHistoricalDate &&
+      firstForecastDate &&
+      lastHistoricalValue !== undefined &&
+      firstForecastDateObj &&
+      lastHistoricalDateObj &&
+      firstForecastDateObj.getTime() > lastHistoricalDateObj.getTime();
+
+    // Check if forecast starts before or at last historical point (need bridge point)
+    const needsBridgePoint =
+      lastHistoricalDate &&
+      firstForecastDate &&
+      lastHistoricalValue !== undefined &&
+      firstForecastDateObj &&
+      lastHistoricalDateObj &&
+      firstForecastDateObj.getTime() <= lastHistoricalDateObj.getTime();
+
+    // Find bridge point when forecast starts before or at last historical point
+    let bridgePoint = null;
+    let pointBeforeForecast = null;
+    if (needsBridgePoint && historicalPoints.length > 0) {
+      // Find the last historical point before or at the first forecast date
+      // If dates are equal, use lastHistoricalPoint; otherwise find the point before
+      bridgePoint =
+        firstForecastDateObj &&
+        lastHistoricalDateObj &&
+        firstForecastDateObj.getTime() === lastHistoricalDateObj.getTime()
+          ? lastHistoricalPoint
+          : [...historicalPoints]
+              .reverse()
+              .find(
+                p =>
+                  firstForecastDateObj &&
+                  new Date(p.date).getTime() < firstForecastDateObj.getTime(),
+              ) || lastHistoricalPoint;
+
+      // Find the actual point BEFORE the first forecast date for connection
+      if (firstForecastDateObj) {
+        pointBeforeForecast = [...historicalPoints].findLast(
+          p => new Date(p.date).getTime() < firstForecastDateObj.getTime(),
+        );
+      }
+    }
+
+    // Create a map from date to quantile array index
+    const dateToQuantileIndex = new Map<string, number>();
+    forecastDates.forEach((date, index) => {
+      dateToQuantileIndex.set(date, index);
+    });
+
+    const result = clonedData.map(point => {
+      const newPoint = { ...point };
+
+      // If there's a gap and this is the last historical point, add band data for connection
+      if (
+        hasGap &&
+        point.date === lastHistoricalDate &&
+        lastHistoricalValue !== undefined
+      ) {
+        // Set zero-width band at the last historical value for visual connection
+        newPoint[bandKey] = [lastHistoricalValue, lastHistoricalValue] as [
+          number,
+          number,
+        ];
+      }
+
+      // If forecast starts before or at last historical point, add bridge point connection
+      // Set connection band at the point BEFORE the first forecast date (if exists)
+      const isBridgePointDate =
+        needsBridgePoint &&
+        bridgePoint &&
+        bridgePoint.historical !== undefined &&
+        point.date === bridgePoint.date;
+      const isPointBeforeForecast =
+        needsBridgePoint &&
+        pointBeforeForecast &&
+        pointBeforeForecast.historical !== undefined &&
+        point.date === pointBeforeForecast.date;
+      const isAlsoForecastDate = forecastDatesSet.has(point.date);
+
+      // Set zero-width connection band at the point BEFORE forecast starts
+      if (isPointBeforeForecast && !isAlsoForecastDate) {
+        newPoint[bandKey] = [
+          pointBeforeForecast.historical,
+          pointBeforeForecast.historical,
+        ] as [number, number];
+      } else if (isBridgePointDate && !isAlsoForecastDate) {
+        // Fallback: if no point before forecast, use bridge point
+        newPoint[bandKey] = [
+          bridgePoint.historical,
+          bridgePoint.historical,
+        ] as [number, number];
+      }
+
+      // Only update band data for forecast dates
+      if (forecastDatesSet.has(point.date)) {
+        const quantileIndex = dateToQuantileIndex.get(point.date);
+
+        if (quantileIndex !== undefined) {
+          const bandValues = getBandValues(
+            point.date,
+            quantileIndex,
+            allQuantilesData,
+          );
+
+          if (bandValues) {
+            // If this is also the bridge point (forecast starts at same date as last historical),
+            // start the band from the historical value for smooth connection
+            const isBridgePointDate =
+              needsBridgePoint &&
+              bridgePoint &&
+              point.date === bridgePoint.date &&
+              bridgePoint.historical !== undefined;
+
+            if (isBridgePointDate && quantileIndex === 0) {
+              // Start from historical value, expand to forecast upper bound
+              newPoint[bandKey] = [bridgePoint.historical, bandValues[1]] as [
+                number,
+                number,
+              ];
+            } else {
+              newPoint[bandKey] = bandValues;
+            }
+          } else {
+            // Remove band data if values don't exist
+            delete newPoint[bandKey];
+          }
+        }
+      }
+      // For non-forecast dates, preserve existing band data if it exists
+      // This ensures continuity of the band visualization
+
+      return newPoint;
+    });
+    return result;
+  }, [chartData, selectedForecastId, forecastData, bandKey, getBandValues]);
+
+  const quantileBands: QuantileBandConfig[] = useMemo(() => {
+    if (!selectedForecastId || !forecastData[selectedForecastId]) {
+      return [];
+    }
+
+    // Get sample values to create config
+    const forecastDataForSelected = forecastData[selectedForecastId];
+    const forecastDates = forecastDataForSelected.dates || [];
+    if (forecastDates.length === 0) return [];
+
+    const allQuantilesData = forecastDataForSelected.allQuantiles;
+    if (!allQuantilesData) return [];
+
+    const lastIndex = forecastDates.length - 1;
+    const bandValues = getBandValues(
+      forecastDates[lastIndex],
+      lastIndex,
+      allQuantilesData,
+    );
+
+    if (!bandValues) return [];
+
+    // const [lowerValue, upperValue] = bandValues;
+
+    return [getBandConfig(bandKey, color)];
+  }, [
+    selectedForecastId,
+    forecastData,
+    bandKey,
+    getBandValues,
+    getBandConfig,
+    color,
+  ]);
+
+  return {
+    transformedChartData,
+    quantileBands,
+  };
+}

package/src/components/ui/Chat/Chat.styl

@@ -0,0 +1,7 @@
+.root
+  display flex
+  flex-direction column
+  height 100%
+
+.isEmpty
+  padding-bottom 170px // goes under prompt

package/src/components/ui/Chat/Chat.styl.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'isEmpty': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chat/Chat.tsx

@@ -0,0 +1,22 @@
+import cn from 'classnames';
+
+import { ChatPresets } from '#uilib/components/ui/Chat/ChatPresets';
+
+import S from './Chat.styl';
+import type { ChatProps } from './Chat.types';
+import { ChatEmptyState } from './ChatEmptyState/ChatEmptyState';
+import { ChatMessage } from './ChatMessage';
+import { ChatPrompt } from './ChatPrompt';
+
+export function Chat({ children, className, isEmpty, ...props }: ChatProps) {
+  return (
+    <div className={cn(S.root, className, isEmpty && S.isEmpty)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Chat.Prompt = ChatPrompt;
+Chat.Message = ChatMessage;
+Chat.Presets = ChatPresets;
+Chat.EmptyState = ChatEmptyState;

package/src/components/ui/Chat/Chat.types.ts

@@ -0,0 +1,88 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import type { PresetScriptGraph } from './ChatMessage/presetScript';
+
+export enum MessageRole {
+  USER = 'user',
+  ASSISTANT = 'assistant',
+  SYSTEM = 'system',
+}
+
+/** System placeholder while dashboard generation runs (must match ChatSheet `addMessage` text). */
+export const GENERATING_DASHBOARD_SYSTEM_TEXT = 'Generating dashboard…';
+
+export interface Message {
+  id: string;
+  role: MessageRole;
+  text: string;
+  timestamp: number;
+}
+
+export interface Chat {
+  session_id: string;
+  name: string;
+  messages: Message[];
+}
+
+export interface ChatPreset {
+  id: string;
+  /** Button label and exact user message text when the preset is sent (used to detect “used” presets). */
+  text: string;
+  answer?: string;
+  /**
+   * Local demo: linear `string[]` (each line may end with ` [Button label]`), or a graph with
+   * `initialMessage` + branch keys (slugs or numeric strings) for `[Label|branchKey]` buttons.
+   */
+  script?: string[] | PresetScriptGraph;
+  /**
+   * Local demo: assistant text may include `[Label]` buttons; clicking sends the label as user
+   * text and appends `replies[label]` as the next assistant message (can include more `[…]`).
+   */
+  replies?: Record<string, string>;
+  /**
+   * Local graph: maps step id → next graph key after the user sends a free-text reply (no chip).
+   * Use virtual step `initial` after `initialMessage`; other ids match the branch key whose
+   * assistant bubble is on screen (e.g. `q_company`, `p_rev`).
+   */
+  freeformNext?: Record<string, string>;
+}
+
+export type ScriptCompletePayload = {
+  presetId: string;
+  answers: Record<string, string>;
+};
+
+export interface ChatPromptProps {
+  className?: string;
+  id: string;
+  onSubmit: (message: string) => void;
+  placeholder?: string;
+  presets?: ChatPreset[];
+  disabled?: boolean;
+  footer?: ReactNode;
+  onChatDeleted?: (sessionId: string) => void;
+  /** Deep link `?prompt=` — one-shot composer pre-fill (see useChatPanelChromeModel). */
+  prefillMessage?: string | null;
+}
+
+export interface ChatMessageProps {
+  role: MessageRole;
+  text: string;
+  onQuickReply?: (branchKey: string, displayLabel: string) => void;
+  /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */
+  suppressedQuickReplyKeys?: ReadonlySet<string>;
+  quickReplyDisabled?: boolean;
+  /** When false, bracket quick-replies render as plain text (no button). */
+  isLastMessage?: boolean;
+  /** Preset script continuation (last message only); not sent to LLM. */
+  scriptContinue?: { label: string };
+  onScriptContinue?: () => void;
+  /** Renders `[CHART]` placeholder in assistant messages (app supplies dataset chart). */
+  renderMessageChart?: () => ReactNode;
+}
+
+export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  className?: string;
+  isEmpty?: boolean;
+}