orchid-ai 2.1.4 → 2.2.0

package/src/components/ChatWindow.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import Message from './Message';
 
 const DEFAULT_SUGGESTIONS = [
@@ -14,6 +14,9 @@ export default function ChatWindow({
   messages,
   loading,
   statusText,
+  queuedMessages,
+  onCancelQueue,
+  onStop,
   onSuggestionClick,
   aiEnabled,
   organisationName,
@@ -27,9 +30,40 @@ export default function ChatWindow({
 }) {
   const exportPrefix = appName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
   const bottomRef = useRef(null);
+  const scrollerRef = useRef(null);
+  const stickToBottomRef = useRef(true);
+  const prevLoadingRef = useRef(false);
 
+  // Track whether the user has scrolled away from the bottom. Only update on actual
+  // scroll events — not on content growth — so appending text never disengages sticky.
+  const handleScroll = useCallback(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    stickToBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 120;
+  }, []);
+
+  // Re-engage sticky scroll whenever a new request starts so the user always sees
+  // their message and the incoming response, even if they had scrolled up.
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (loading && !prevLoadingRef.current) {
+      stickToBottomRef.current = true;
+    }
+    prevLoadingRef.current = loading;
+  }, [loading]);
+
+  // Pin the viewport to the bottom on every streaming delta. Direct scrollTop
+  // assignment is instant so the bubble always extends naturally from the bottom
+  // of the screen with no lag or chasing. A single smooth scroll runs when
+  // streaming ends to settle the final render.
+  useEffect(() => {
+    if (!stickToBottomRef.current) return;
+    const el = scrollerRef.current;
+    if (!el) return;
+    if (loading) {
+      el.scrollTop = el.scrollHeight - el.clientHeight;
+    } else {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
   }, [messages, loading, statusText]);
 
   const renderEmptyState = () => {
@@ -106,7 +140,7 @@ export default function ChatWindow({
   const hasStreamingMessage = lastMsg?.isStreaming === true;
 
   return (
-    <div className="ai-chat-window">
+    <div className="ai-chat-window" ref={scrollerRef} onScroll={handleScroll}>
       {messages?.length === 0 && !loading && renderEmptyState()}
       {(messages ?? []).map((msg, i) => {
         const isLast = i === (messages?.length ?? 0) - 1;
@@ -120,12 +154,14 @@ export default function ChatWindow({
             truncated={msg.truncated}
             exportPrefix={exportPrefix}
             isStreaming={msg.isStreaming}
+            stopped={msg.stopped}
             streamingStatusText={streamingStatusText}
             processTrace={msg.processTrace}
             processInterimLive={msg.processInterimLive}
             showProcessTracePanel={showProcessTracePanel}
             queryContext={msg.queryContext}
             showQuerySummary={showQuerySummary}
+            attachments={msg.attachments}
           />
         );
       })}
@@ -146,6 +182,29 @@ export default function ChatWindow({
           </div>
         </div>
       )}
+      {(queuedMessages ?? []).map((msg, i) => (
+        <div key={i} className="ai-chat-message user ai-chat-message--queued">
+          <div className="ai-chat-avatar user">YOU</div>
+          <div className="ai-chat-bubble user ai-chat-bubble--queued">
+            <div className="ai-chat-pending-msg-text">{msg}</div>
+            <div className="ai-chat-pending-footer">
+              <span className="ai-chat-pending-status">Queued</span>
+              <div className="ai-chat-pending-actions">
+                {onCancelQueue && (
+                  <button type="button" className="ai-chat-pending-btn" onClick={() => onCancelQueue(i)}>
+                    Cancel
+                  </button>
+                )}
+                {i === 0 && onStop && (
+                  <button type="button" className="ai-chat-pending-btn ai-chat-pending-btn--primary" onClick={onStop}>
+                    Send now
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
       <div ref={bottomRef} />
     </div>
   );

package/src/components/Message.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo, useEffect } from "react";
+import React, { useRef, useState, useMemo, useEffect, useLayoutEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import AiVisualization from "./visualizations/AiVisualization";
@@ -46,6 +46,72 @@ function getBlockLabel(lang) {
   return `Generating ${lang}`;
 }
 
+/**
+ * Split fully-closed orchid-ai-chart / hemiq-chart fences out of the content string
+ * so they can be rendered as stable memoized components. Text between/around charts
+ * becomes separate ReactMarkdown segments. Keys are based on character position so
+ * they stay stable as trailing text streams in.
+ *
+ * Returns an array of { type: 'text'|'chart', content|language+rawValue, key }.
+ */
+const COMPLETE_CHART_FENCE_RE = /```(orchid-ai-chart|hemiq-chart)\r?\n([\s\S]*?)```/g;
+
+function splitContentSegments(content) {
+  const segments = [];
+  let lastIndex = 0;
+  const re = new RegExp(COMPLETE_CHART_FENCE_RE.source, 'g');
+  let match;
+  while ((match = re.exec(content)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ type: 'text', content: content.slice(lastIndex, match.index), key: `t${lastIndex}` });
+    }
+    segments.push({
+      type: 'chart',
+      language: match[1],
+      rawValue: match[2].replace(/\n$/, ''),
+      key: `c${match.index}`,
+    });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < content.length) {
+    segments.push({ type: 'text', content: content.slice(lastIndex), key: `t${lastIndex}` });
+  }
+  return segments;
+}
+
+/**
+ * Renders a completed chart block. Wrapped in React.memo so it only re-renders
+ * when the chart JSON actually changes — not on every streaming delta.
+ */
+const MemoizedChartBlock = React.memo(function MemoizedChartBlock({ language, rawValue }) {
+  const chartResult = resolveChartBlock(language, rawValue);
+  if (chartResult.type === "chart") {
+    return <AiVisualization chart={chartResult.chart} />;
+  }
+  if (chartResult.type === "invalid_chart_code") {
+    const cutOff = chartResult.error?.includes("JSON");
+    return (
+      <div className="ai-chart-card ai-chart-error">
+        <p>
+          {cutOff
+            ? "Visualization could not be rendered — the response was cut off. Try asking again or request fewer records."
+            : "Visualization could not be rendered — the AI used an unsupported format. Try rephrasing your request."}
+        </p>
+        {IS_DEV && (
+          <details className="ai-chart-debug-details">
+            <summary>Debug (development only)</summary>
+            <pre className="ai-chart-debug-pre">
+              {chartResult.error ? `Validator: ${chartResult.error}\n\n` : ""}
+              {`--- raw ${language} fence ---\n${rawValue}`}
+            </pre>
+          </details>
+        )}
+      </div>
+    );
+  }
+  return null;
+});
+
 const UPPER_ABBREV = new Set(['id', 'url', 'api', 'uuid', 'ip', 'sku', 'po', 'eta', 'ref']);
 
 function camelToTitleCase(str) {
@@ -154,6 +220,39 @@ function formatToolName(tool) {
     .replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
+function urlHost(url) {
+  try { return new URL(url).hostname; } catch { return url; }
+}
+
+function renderQueryParam(value) {
+  if (Array.isArray(value)) {
+    const items = value.map(String).filter(Boolean);
+    if (items.length && items.every((v) => /^https?:\/\//i.test(v))) {
+      return (
+        <ul className="ai-chat-process-url-list">
+          {items.map((url, i) => (
+            <li key={i}>
+              <a href={url} title={url} target="_blank" rel="noopener noreferrer" className="ai-chat-process-url">
+                {urlHost(url)}
+              </a>
+            </li>
+          ))}
+        </ul>
+      );
+    }
+    return formatQueryValue(value);
+  }
+  const s = String(value ?? '');
+  if (/^https?:\/\//i.test(s)) {
+    return (
+      <a href={s} title={s} target="_blank" rel="noopener noreferrer" className="ai-chat-process-url">
+        {urlHost(s)}
+      </a>
+    );
+  }
+  return formatQueryValue(value);
+}
+
 function QueryStep({ entry }) {
   const params = Object.entries(entry.input || {}).filter(([, v]) => v !== null && v !== undefined && v !== '');
   return (
@@ -168,7 +267,7 @@ function QueryStep({ entry }) {
             {params.map(([key, value]) => (
               <div key={key} className="ai-chat-process-trace__query-param">
                 <dt>{camelToTitleCase(key)}</dt>
-                <dd>{formatQueryValue(value)}</dd>
+                <dd>{renderQueryParam(value)}</dd>
               </div>
             ))}
           </dl>
@@ -257,21 +356,79 @@ function ProcessTracePanel({ processTrace, processInterimLive, isStreaming, show
   );
 }
 
+function AttachmentFileIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+      <polyline points="13 2 13 9 20 9" />
+    </svg>
+  );
+}
+
 export default function Message({
   role,
   content,
   truncated,
   exportPrefix = "orchid-ai",
   isStreaming = false,
+  stopped = false,
   streamingStatusText,
   processTrace,
   processInterimLive = "",
   showProcessTracePanel = true,
+  queryContext,
+  showQuerySummary = false,
+  attachments,
 }) {
   const isUser = role === "user";
   const [copied, setCopied] = useState(false);
   const [isPrinting, setIsPrinting] = useState(false);
   const messageRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const prevBubbleHeightRef = useRef(null); // height after the previous paint
+  const pendingRevealRef = useRef(0);       // accumulated clip-path reveal not yet finished (px)
+
+  // Record bubble height AFTER each paint so the next useLayoutEffect can detect line wraps.
+  useEffect(() => {
+    if (isUser || !isStreaming) {
+      prevBubbleHeightRef.current = null;
+      pendingRevealRef.current = 0;
+      return;
+    }
+    const el = bubbleRef.current;
+    if (!el) return;
+    prevBubbleHeightRef.current = el.scrollHeight;
+    // Reset the accumulator when the clip-path transition finishes naturally.
+    const onEnd = (e) => {
+      if (e.propertyName === 'clip-path') pendingRevealRef.current = 0;
+    };
+    el.addEventListener('transitionend', onEnd, { once: true });
+    return () => el.removeEventListener('transitionend', onEnd);
+  }, [content, isStreaming, isUser]);
+
+  // Reveal new line-wrap content via clip-path BEFORE each paint.
+  // clip-path is layout-neutral — it never changes the bubble's layout height,
+  // so scrollHeight / scrollTop stay correct and the scroll stays pinned.
+  useLayoutEffect(() => {
+    if (isUser) return;
+    const el = bubbleRef.current;
+    if (!el) return;
+    if (!isStreaming) {
+      el.style.clipPath = '';
+      el.style.transition = '';
+      return;
+    }
+    const newHeight = el.scrollHeight;
+    const prevHeight = prevBubbleHeightRef.current;
+    if (prevHeight !== null && newHeight > prevHeight + 2) {
+      pendingRevealRef.current += newHeight - prevHeight;
+      el.style.transition = 'none';
+      el.style.clipPath = `inset(0 0 ${pendingRevealRef.current}px 0)`;
+      el.offsetHeight; // force reflow so transition: none takes effect
+      el.style.transition = 'clip-path 0.12s ease-out';
+      el.style.clipPath = 'inset(0 0 0px 0)';
+    }
+  }, [content, isStreaming, isUser]);
 
   // Extract AI-provided title comment and strip it from rendered content
   const { responseTitle, renderContent } = useMemo(
@@ -282,7 +439,12 @@ export default function Message({
   // 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;
+  // When stopped mid-generation, detect any unclosed chart fence so we can show a
+  // static "Rendering stopped" block instead of the animated placeholder.
+  const stoppedPrefix = !isUser && stopped && !isStreaming ? getStreamingPrefix(renderContent) : null;
+  const openBlockLabel = (streamingPrefix !== null || stoppedPrefix !== null)
+    ? getBlockLabel(getOpenBlockLanguage(renderContent))
+    : null;
 
   const handleCopy = () => {
     const stripChartBlocks = (value) =>
@@ -370,7 +532,9 @@ export default function Message({
     showProcessTracePanel !== false &&
     orchidAiProcessTraceHasDisplayableContent(processTrace, processInterimLive, { isStreaming });
 
-  const markdownComponents = {
+  // Stable reference — none of these renderers close over changing component state,
+  // so a single memoized object prevents ReactMarkdown from re-rendering on every delta.
+  const markdownComponents = useMemo(() => ({
     pre({ children, ...props }) {
       const onlyChild = React.Children.toArray(children)[0];
       const className = onlyChild?.props?.className || "";
@@ -431,14 +595,21 @@ export default function Message({
         </a>
       );
     },
-  };
+  }), []);
+
+  // Split completed chart blocks into their own memoized components so streaming
+  // text after a chart doesn't cause already-rendered visualizations to redraw.
+  const contentSegments = useMemo(
+    () => splitContentSegments(renderContent),
+    [renderContent]
+  );
 
   return (
     <div className={`ai-chat-message ${role}`} ref={messageRef}>
       <div className={`ai-chat-avatar ${role}`}>
         {isUser ? "You" : "AI"}
       </div>
-      <div className={`ai-chat-bubble ${role}`}>
+      <div className={`ai-chat-bubble ${role}`} ref={bubbleRef}>
         <div className="ai-chat-message-content">
           {!isUser ? (
             <ProcessTracePanel
@@ -459,7 +630,18 @@ export default function Message({
             </div>
           ) : null}
           {isUser ? (
-            <UserBubbleContent content={content} />
+            <>
+              {attachments?.length > 0 && (
+                <div className="ai-chat-user-attachments">
+                  {attachments.map((att, i) => (
+                    att.preview
+                      ? <img key={i} src={att.preview} alt={att.name} className="ai-chat-attachment-img" />
+                      : <div key={i} className="ai-chat-attachment-file"><AttachmentFileIcon />{att.name}</div>
+                  ))}
+                </div>
+              )}
+              <UserBubbleContent content={content} />
+            </>
           ) : streamingPrefix !== null ? (
             <>
               {streamingPrefix && (
@@ -476,8 +658,31 @@ export default function Message({
                 </div>
               </div>
             </>
+          ) : stoppedPrefix !== null ? (
+            <>
+              {stoppedPrefix && (
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>{stoppedPrefix}</ReactMarkdown>
+              )}
+              <div className="ai-building-block ai-building-block--stopped" role="status">
+                <span className="ai-building-block__label">Rendering stopped</span>
+              </div>
+            </>
           ) : (
-            <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>{renderContent}</ReactMarkdown>
+            contentSegments.map((seg) =>
+              seg.type === 'chart' ? (
+                <MemoizedChartBlock key={seg.key} language={seg.language} rawValue={seg.rawValue} />
+              ) : (
+                <ReactMarkdown key={seg.key} remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                  {seg.content}
+                </ReactMarkdown>
+              )
+            )
+          )}
+          {!isUser && stopped && stoppedPrefix === null && (
+            <div className="ai-chat-interrupted-notice">Response interrupted</div>
+          )}
+          {!isUser && showQuerySummary && queryContext && (
+            <QuerySummaryPanel queryContext={queryContext} />
           )}
           {!isUser && truncated && (
             <div className="ai-truncation-warning">

package/src/components/visualizations/DataTable.jsx

@@ -1,11 +1,58 @@
 import React from "react";
 
+function csvEscape(value) {
+  const s = (value ?? "").toString();
+  return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+}
+
+function buildCsv(columns, rows) {
+  const header = columns.map((c) => csvEscape(c.label)).join(",");
+  const body = rows.map((row) => columns.map((c) => csvEscape(row[c.key])).join(",")).join("\r\n");
+  return `${header}\r\n${body}`;
+}
+
+function downloadCsv(filename, csv) {
+  // Prepend a BOM so Excel reads UTF-8 correctly.
+  const blob = new Blob([`${csv}`], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+function safeFilename(title) {
+  const base = (title || "table").replace(/[\\/:*?"<>|]+/g, "").trim().slice(0, 80);
+  return `${base || "table"}.csv`;
+}
+
 export default function DataTable({ chart }) {
   const { title, columns, rows } = chart;
 
+  const handleDownload = () => downloadCsv(safeFilename(title), buildCsv(columns, rows));
+
   return (
     <div className="ai-chart-card">
-      {title ? <h4 className="ai-chart-title">{title}</h4> : null}
+      <div className="ai-chart-card-header">
+        {title ? <h4 className="ai-chart-title">{title}</h4> : <span />}
+        <button
+          type="button"
+          className="ai-chart-csv-btn"
+          onClick={handleDownload}
+          title="Download as CSV"
+          aria-label="Download table as CSV"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+          CSV
+        </button>
+      </div>
       <div className="ai-data-table-wrap">
         <table className="ai-data-table">
           <thead>