orchid-ai 2.0.2 → 2.1.0

package/src/components/Message.jsx

@@ -1,14 +1,113 @@
-import React, { useRef, useState, useMemo } from "react";
+import React, { useRef, useState, useMemo, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import AiVisualization from "./visualizations/AiVisualization";
 import { resolveChartBlock } from "./visualizations/parseChartBlock";
 import { isChartMarkdownLanguage } from "./visualizations/chartSchema";
+import { orchidAiProcessTraceHasDisplayableContent, orchidAiProcessTraceEntryKind } from "../orchidAiProcessTrace";
 
 const IS_DEV = process.env.NODE_ENV === "development";
 
-const TITLE_RE = /<!--\s*title:\s*([^-][^>]*?)\s*-->/i;
+/**
+ * Returns the substring up to (not including) the last unclosed ``` opener,
+ * or null when all code blocks are closed. Used to safely render partial
+ * markdown during streaming without passing broken fences to ReactMarkdown.
+ */
+function getStreamingPrefix(content) {
+  const parts = content.split("```");
+  if (parts.length % 2 === 0) {
+    return content.slice(0, content.lastIndexOf("```"));
+  }
+  return null;
+}
+
+/** Extracts the language identifier from the currently-open (unclosed) code fence. */
+function getOpenBlockLanguage(content) {
+  const lastIdx = content.lastIndexOf("```");
+  if (lastIdx === -1) return "";
+  const after = content.slice(lastIdx + 3);
+  return after.split("\n")[0].trim().toLowerCase();
+}
+
+const CODE_LANGS = new Set([
+  "javascript","js","typescript","ts","jsx","tsx",
+  "python","py","ruby","rb","go","rust","java",
+  "c","cpp","c++","cs","php","bash","sh","zsh",
+  "html","css","yaml","yml","xml","markdown","md",
+]);
+
+function getBlockLabel(lang) {
+  const l = (lang || '').toLowerCase();
+  if (l.includes('orchid-ai-chart') || l.includes('hemiq-chart')) return 'Generating visualization';
+  if (l === 'json') return 'Generating data';
+  if (l === 'sql') return 'Generating query';
+  if (CODE_LANGS.has(l)) return 'Generating code';
+  if (!l) return 'Generating…';
+  return `Generating ${lang}`;
+}
 
+const UPPER_ABBREV = new Set(['id', 'url', 'api', 'uuid', 'ip', 'sku', 'po', 'eta', 'ref']);
+
+function camelToTitleCase(str) {
+  const words = String(str)
+    .replace(/_/g, ' ')
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .split(/\s+/);
+  return words
+    .map((w) => {
+      const lower = w.toLowerCase();
+      if (UPPER_ABBREV.has(lower)) return lower.toUpperCase();
+      return lower.charAt(0).toUpperCase() + lower.slice(1);
+    })
+    .join(' ');
+}
+
+function formatQueryValue(value) {
+  if (Array.isArray(value)) return value.map(String).join(', ');
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  return String(value);
+}
+
+function QuerySummaryPanel({ queryContext }) {
+  if (!queryContext || typeof queryContext !== 'object' || Array.isArray(queryContext)) return null;
+  const entries = Object.entries(queryContext).filter(
+    ([, v]) => v !== null && v !== undefined && v !== ''
+  );
+  if (!entries.length) return null;
+  return (
+    <details className="ai-chat-query-summary">
+      <summary className="ai-chat-query-summary__summary">
+        <span className="ai-chat-query-summary__label">Filters used</span>
+        <span className="ai-chat-query-summary__chevron" aria-hidden>▸</span>
+      </summary>
+      <ul className="ai-chat-query-summary__list">
+        {entries.map(([key, value]) => (
+          <li key={key} className="ai-chat-query-summary__item">
+            <span className="ai-chat-query-summary__key">{camelToTitleCase(key)}</span>
+            <span className="ai-chat-query-summary__value">{formatQueryValue(value)}</span>
+          </li>
+        ))}
+      </ul>
+    </details>
+  );
+}
+
+const TITLE_COMMENT_RE = /<!--\s*title:\s*([^-][^>]*?)\s*-->/gi;
+
+/** Prefer the last `<!--title:...-->` so end-of-reply titles work; still removes legacy start-of-reply comments. */
+function peelOrchidAiTitleComment(content, isUser) {
+  if (isUser) return { responseTitle: null, renderContent: content };
+  const s = String(content ?? "");
+  const matches = [...s.matchAll(TITLE_COMMENT_RE)];
+  if (matches.length === 0) return { responseTitle: null, renderContent: content };
+  const m = matches[matches.length - 1];
+  const full = m[0];
+  const idx = m.index;
+  const responseTitle = m[1].trim();
+  const renderContent = (s.slice(0, idx) + s.slice(idx + full.length)).replace(/^\s+/, "").replace(/\s+$/, "");
+  return { responseTitle, renderContent };
+}
 /** Split on http(s) URLs for lightweight linkify in user bubbles (plain text, not full markdown). */
 const URL_INLINE_RE = /(https?:\/\/[^\s<>`]+)/gi;
 
@@ -48,21 +147,142 @@ function UserBubbleContent({ content }) {
   ));
 }
 
-export default function Message({ role, content, truncated, exportPrefix = "orchid-ai" }) {
+function formatToolName(tool) {
+  return String(tool)
+    .replace(/^(query_|get_)/, '')
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function QueryStep({ entry }) {
+  const params = Object.entries(entry.input || {}).filter(([, v]) => v !== null && v !== undefined && v !== '');
+  return (
+    <li className="ai-chat-process-trace__step ai-chat-process-trace__step--query">
+      <div className="ai-chat-process-trace__rail" aria-hidden>
+        <span className="ai-chat-process-trace__dot" />
+      </div>
+      <div className="ai-chat-process-trace__body">
+        <span className="ai-chat-process-trace__query-collection">{formatToolName(entry.tool)}</span>
+        {params.length > 0 && (
+          <dl className="ai-chat-process-trace__query-params">
+            {params.map(([key, value]) => (
+              <div key={key} className="ai-chat-process-trace__query-param">
+                <dt>{camelToTitleCase(key)}</dt>
+                <dd>{formatQueryValue(value)}</dd>
+              </div>
+            ))}
+          </dl>
+        )}
+      </div>
+    </li>
+  );
+}
+
+function ProcessTracePanel({ processTrace, processInterimLive, isStreaming, showProcessTracePanel }) {
+  if (showProcessTracePanel === false) return null;
+
+  const autoCollapsed = !isStreaming && processTrace?.defaultCollapsed !== false;
+  const [expanded, setExpanded] = useState(() => !autoCollapsed);
+
+  useEffect(() => {
+    setExpanded(!autoCollapsed);
+  }, [autoCollapsed]);
+
+  const hasContent = orchidAiProcessTraceHasDisplayableContent(processTrace, processInterimLive, {
+    isStreaming,
+  });
+  if (!hasContent) return null;
+
+  const items = processTrace?.items ?? [];
+
+  return (
+    <details
+      className="ai-chat-process-trace"
+      open={expanded}
+      onToggle={(e) => setExpanded(e.target.open)}
+    >
+      <summary className="ai-chat-process-trace__summary">
+        <span className="ai-chat-process-trace__summary-text">Working</span>
+        {isStreaming ? (
+          <span className="ai-chat-process-trace__mini-typing" aria-hidden title="In progress">
+            <span />
+            <span />
+            <span />
+          </span>
+        ) : (
+          <span className="ai-chat-process-trace__summary-chevron" aria-hidden>
+            ▸
+          </span>
+        )}
+      </summary>
+      <div className="ai-chat-process-trace__panel">
+        <ul className="ai-chat-process-trace__timeline">
+          {items.map((entry, i) => {
+            if (entry.type === 'query') {
+              return <QueryStep key={i} entry={entry} />;
+            }
+            const lane = orchidAiProcessTraceEntryKind(entry);
+            const isLiveStatus = isStreaming && !processInterimLive && i === items.length - 1 && entry.type === "status";
+            return (
+              <li
+                key={i}
+                className={`ai-chat-process-trace__step ai-chat-process-trace__step--${lane}${isLiveStatus ? " ai-chat-process-trace__step--live" : ""}`}
+              >
+                <div className="ai-chat-process-trace__rail" aria-hidden>
+                  <span className="ai-chat-process-trace__dot" />
+                </div>
+                <div className="ai-chat-process-trace__body">
+                  {entry.type === "status" ? (
+                    <span className="ai-chat-process-trace__line">{entry.value}</span>
+                  ) : (
+                    <div className="ai-chat-process-trace__prose">{entry.value}</div>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+          {processInterimLive ? (
+            <li className="ai-chat-process-trace__step ai-chat-process-trace__step--text ai-chat-process-trace__step--interim">
+              <div className="ai-chat-process-trace__rail" aria-hidden>
+                <span className="ai-chat-process-trace__dot" />
+              </div>
+              <div className="ai-chat-process-trace__body">
+                <div className="ai-chat-process-trace__prose">{processInterimLive}</div>
+              </div>
+            </li>
+          ) : null}
+        </ul>
+      </div>
+    </details>
+  );
+}
+
+export default function Message({
+  role,
+  content,
+  truncated,
+  exportPrefix = "orchid-ai",
+  isStreaming = false,
+  streamingStatusText,
+  processTrace,
+  processInterimLive = "",
+  showProcessTracePanel = true,
+}) {
   const isUser = role === "user";
   const [copied, setCopied] = useState(false);
   const [isPrinting, setIsPrinting] = useState(false);
   const messageRef = useRef(null);
 
   // Extract AI-provided title comment and strip it from rendered content
-  const { responseTitle, renderContent } = useMemo(() => {
-    if (isUser) return { responseTitle: null, renderContent: content };
-    const match = TITLE_RE.exec(content);
-    return {
-      responseTitle: match ? match[1].trim() : null,
-      renderContent: match ? content.replace(match[0], "").replace(/^\s+/, "") : content,
-    };
-  }, [content, isUser]);
+  const { responseTitle, renderContent } = useMemo(
+    () => peelOrchidAiTitleComment(content, isUser),
+    [content, isUser]
+  );
+
+  // When streaming, detect an unclosed code block so we can show a labeled placeholder
+  // instead of passing a broken fence to ReactMarkdown.
+  const streamingPrefix = !isUser && isStreaming ? getStreamingPrefix(renderContent) : null;
+  const openBlockLabel = streamingPrefix !== null ? getBlockLabel(getOpenBlockLanguage(renderContent)) : null;
 
   const handleCopy = () => {
     const stripChartBlocks = (value) =>
@@ -86,9 +306,16 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
     const bubbleContent = messageRef.current.querySelector(".ai-chat-message-content");
     if (!bubbleContent) return;
 
+    /** Omit interim “Working” tray + streaming status from PDF title fallback. */
+    const plainForTitle = (() => {
+      const c = bubbleContent.cloneNode(true);
+      c.querySelectorAll(".ai-chat-process-trace, .ai-chat-streaming-status").forEach((n) => n.remove());
+      return (c.textContent || "").trim();
+    })();
+
     // Build filename from AI-provided title or first meaningful line
     const titleText = responseTitle ||
-      (bubbleContent.textContent || "").split("\n").map((l) => l.trim()).find(Boolean) ||
+      plainForTitle.split("\n").map((l) => l.trim()).find(Boolean) ||
       "response";
     const slug = titleText.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 48) || "response";
     const now = new Date();
@@ -98,7 +325,11 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
     setIsPrinting(true);
 
     const clone = bubbleContent.cloneNode(true);
-    clone.querySelectorAll(".ai-chart-export-actions, .ai-chat-message-actions").forEach((n) => n.remove());
+    clone
+      .querySelectorAll(
+        ".ai-chart-export-actions, .ai-chat-message-actions, .ai-chat-process-trace, .ai-chat-streaming-status"
+      )
+      .forEach((n) => n.remove());
 
     setIsPrinting(true);
     const previousTitle = document.title;
@@ -133,6 +364,12 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
     window.print();
   };
 
+  // Hide the duplicate inline status row when the collapsible Process panel already lists statuses.
+  const processPanelVisible =
+    !isUser &&
+    showProcessTracePanel !== false &&
+    orchidAiProcessTraceHasDisplayableContent(processTrace, processInterimLive, { isStreaming });
+
   const markdownComponents = {
     pre({ children, ...props }) {
       const onlyChild = React.Children.toArray(children)[0];
@@ -203,8 +440,42 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
       </div>
       <div className={`ai-chat-bubble ${role}`}>
         <div className="ai-chat-message-content">
+          {!isUser ? (
+            <ProcessTracePanel
+              processTrace={processTrace}
+              processInterimLive={processInterimLive}
+              isStreaming={isStreaming}
+              showProcessTracePanel={showProcessTracePanel}
+            />
+          ) : null}
+          {!isUser && isStreaming && streamingStatusText && !processPanelVisible ? (
+            <div className="ai-chat-streaming-status" aria-live="polite">
+              <span className="ai-chat-status-text">{streamingStatusText}</span>
+              <div className="ai-chat-typing ai-chat-typing--inline" aria-hidden>
+                <span />
+                <span />
+                <span />
+              </div>
+            </div>
+          ) : null}
           {isUser ? (
             <UserBubbleContent content={content} />
+          ) : streamingPrefix !== null ? (
+            <>
+              {streamingPrefix && (
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>{streamingPrefix}</ReactMarkdown>
+              )}
+              <div className="ai-building-block" role="status" aria-label={openBlockLabel || "Building content"}>
+                {openBlockLabel ? (
+                  <span className="ai-building-block__label">{openBlockLabel}</span>
+                ) : null}
+                <div className="ai-building-block__dots" aria-hidden>
+                  <span className="ai-building-block__dot" />
+                  <span className="ai-building-block__dot" />
+                  <span className="ai-building-block__dot" />
+                </div>
+              </div>
+            </>
           ) : (
             <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>{renderContent}</ReactMarkdown>
           )}
@@ -214,7 +485,7 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
             </div>
           )}
         </div>
-        {!isUser && (
+        {!isUser && !isStreaming && (
           <div className="ai-chat-message-actions">
             <button
               type="button"

package/src/components/visualizations/chartSchema.js

@@ -91,15 +91,16 @@ function normalizeYAxis(axis) {
   return { label, categories };
 }
 
+/** When models omit `xAxis.label`, charts still need a string for the axis caption. */
+const DEFAULT_CATEGORY_AXIS_LABEL = "Category";
+
 function normalizeCategoryAxis(axis) {
   if (!isObject(axis) || !Array.isArray(axis.categories)) {
     return null;
   }
 
-  const label = typeof axis.label === "string" ? axis.label.trim() : "";
-  if (!label) {
-    return null;
-  }
+  const rawLabel = typeof axis.label === "string" ? axis.label.trim() : "";
+  const label = rawLabel || DEFAULT_CATEGORY_AXIS_LABEL;
 
   const categories = axis.categories
     .map((category) => {
@@ -171,9 +172,48 @@ function normalizeSeries(series, allowedCategoryKeys) {
   return normalized.length > 0 ? normalized : null;
 }
 
+/**
+ * Distinct categorical `y` values from dot_chart payloads (series-based and/or flat `points`).
+ */
+function collectDotChartYCategoryKeys(payload) {
+  const ordered = [];
+  const seen = new Set();
+  const addKey = (rawY) => {
+    const key = String(rawY ?? "").trim();
+    if (!key || seen.has(key)) {
+      return;
+    }
+    seen.add(key);
+    ordered.push(key);
+  };
+
+  if (Array.isArray(payload.series)) {
+    for (const entry of payload.series) {
+      if (!isObject(entry) || !Array.isArray(entry.points)) {
+        continue;
+      }
+      for (const pt of entry.points) {
+        if (!isObject(pt)) {
+          continue;
+        }
+        addKey(pt.y);
+      }
+    }
+  }
+  if (Array.isArray(payload.points)) {
+    for (const pt of payload.points) {
+      if (!isObject(pt)) {
+        continue;
+      }
+      addKey(pt.y);
+    }
+  }
+  return ordered;
+}
+
 /**
  * Dot charts: models often send yAxis.label only and put category keys in point.y.
- * Build categories from series points when yAxis.categories is missing or invalid.
+ * Infer categories from `series[].points` and/or top-level `points`.
  */
 function mergeDotChartYAxisWithInferredCategories(payload) {
   if (!isObject(payload) || payload.type !== DOT_CHART_TYPE) {
@@ -188,37 +228,30 @@ function mergeDotChartYAxisWithInferredCategories(payload) {
   }
 
   const yLabel = typeof yRaw.label === "string" ? yRaw.label.trim() : "";
-  if (!yLabel || !Array.isArray(payload.series)) {
+  if (!yLabel) {
     return yRaw;
   }
 
-  const seen = new Map();
-  for (const entry of payload.series) {
-    if (!isObject(entry) || !Array.isArray(entry.points)) {
-      continue;
-    }
-    for (const pt of entry.points) {
-      if (!isObject(pt)) {
-        continue;
-      }
-      const k = String(pt.y || "").trim();
-      if (!k || seen.has(k)) {
-        continue;
-      }
-      const disp =
-        typeof pt.label === "string" && pt.label.trim() ? String(pt.label).trim() : k;
-      seen.set(k, disp);
-    }
-  }
-
-  if (seen.size === 0) {
+  const keys = collectDotChartYCategoryKeys(payload);
+  if (keys.length === 0) {
     return yRaw;
   }
 
-  const categories = [...seen.entries()].map(([key, label]) => ({ key: key, label: label }));
+  const categories = keys.map((key) => ({ key: key, label: key }));
   return { ...yRaw, categories: categories };
 }
 
+/** Prefer `series`; otherwise wrap flat `points` for {@link normalizeSeries}. */
+function getDotChartSeriesInput(payload) {
+  if (Array.isArray(payload.series) && payload.series.length > 0) {
+    return payload.series;
+  }
+  if (Array.isArray(payload.points) && payload.points.length > 0) {
+    return [{ name: "Points", points: payload.points }];
+  }
+  return null;
+}
+
 function normalizeValueSeries(series, allowedCategoryKeys, options = {}) {
   const { allowNegativeValues = true } = options;
 
@@ -560,6 +593,23 @@ function tryCoerceHistogramBinsFromLLM(bins) {
       continue;
     }
 
+    /** e.g. `"8"` or `"12"` — treat as unit-width bucket [n, n + 1) for numeric axes */
+    const loneNumMatch = /^(\d+(?:\.\d+)?)\s*$/i.exec(rangeStr);
+    if (loneNumMatch) {
+      const a = Number(loneNumMatch[1]);
+      if (!Number.isFinite(a)) {
+        return null;
+      }
+      work.push({
+        start: a,
+        end: a + 1,
+        value: value,
+        label: rangeStr,
+        open: false,
+      });
+      continue;
+    }
+
     return null;
   }
 
@@ -1137,8 +1187,9 @@ export function validateDotChartPayload(payload) {
     return { valid: false, error: "Invalid yAxis. Expected label and at least one category with key/label." };
   }
 
+  const seriesInput = getDotChartSeriesInput(payload);
   const series = normalizeSeries(
-    payload.series,
+    seriesInput,
     yAxis.categories.map((category) => category.key)
   );
   if (!series) {

package/src/constants/visualizationInstructions.js

@@ -14,9 +14,9 @@ table | bar_chart | line_chart | stacked_bar_chart | grouped_bar_chart | dot_cha
 
 Do not invent other type names. For several metrics at a glance use **stat_cards** (\`cards\`: [{ \`label\` or \`title\`, \`value\`, optional \`subtitle\`, \`unit\`, \`trend\`: up|down|neutral }]); for tabular listings use **table**; category counts use **bar_chart** (\`bars\`: [{ "label", "value" }], values ≥ 0). **table**: either \`columns\`: [{ "key", "label" }] with \`rows\`: objects keyed by those keys, OR \`columns\` as a string array (headers) with each \`row\` a string array of values in column order.
 
-**line_chart** / **stacked_bar_chart** / **grouped_bar_chart**: \`xAxis.categories\` (≥2 entries with key+label), \`yAxis\` with label, \`series[].points\` with x = category key and numeric value.
+**line_chart** / **stacked_bar_chart** / **grouped_bar_chart**: \`xAxis\` must include **\`label\`** (human-readable axis title, e.g. \`"Date"\`, \`"Week"\`) **and** \`categories\` (≥2 objects, each with \`key\` + \`label\`). \`yAxis\` must include \`label\`. \`series[].points\`: \`x\` = each category’s \`key\`, \`value\` = number (stacked/grouped: values ≥ 0).
 
-**timeline**: \`items\` or \`events\` with label, start, end (ISO 8601). **dot_chart**: numeric \`x\`, categorical \`y\` per point; \`yAxis.categories\` may be omitted (inferred from point \`y\` / \`label\`). **histogram**: bins as \`start\`/\`end\`/\`value\`, or \`range\` (\`"0-1"\`, \`"6+"\`) with \`count\` or \`value\`. **scatter_plot**: standard numeric axes/series.
+**timeline**: \`items\` or \`events\` with label, start, end (ISO 8601). **dot_chart**: numeric \`x\`, categorical \`y\` (row/category key) per point; optional per-point \`label\` for tooltips only. Use either \`series\`: [{ \`name\`, \`points\` }] **or** a top-level \`points\` array; \`yAxis\` needs \`label\`; \`yAxis.categories\` may be omitted (inferred from distinct \`y\`). **histogram**: bins prefer \`start\`, \`end\`, \`value\` (non-negative, end > start); or \`range\` + \`count\`/\`value\` where \`range\` is \`"min-max"\`, \`"8"\` (single numeric bucket), or \`"6+"\` (open upper). **scatter_plot**: standard numeric axes/series.
 
 In prose-only replies (capabilities, no data): do not include an orchid-ai-chart block. When rendering data, skip long schema tutorials—output valid JSON only in the fence.
 ~10 table rows unless the user asks for more.